PHP Forms

Important link for all your php needs: php.net

For PHP forms you can use either the GET or POST parameters; alternately the REQUEST parameter will both GET and POST.

If somebody submits a form without entering any information, you can send them back to the form like so:

if (empty($fullName)) { //empty is a built-in php function
header("Location:forms.html"); //special HTTP header
}

You can also send an alert once they have been returned to the main form:

if (empty($fullName)) { //empty is a built-in php function
header("Location:forms.php?error=true"); //special HTTP header
}


In the body, you can put:

<?php if($hasError): ?> //: is an alternative to { } offered in php ?>
<p><? = $errorMessage ?></p>
<?php endif ?>


In the php section put:

<?php

$hasError = false; //initially false on first visit because they have not clicked submit yet
if ($_REQUEST['error'] == 'true') { //error is the name or key
$errorMessage = "Please enter something";
$hasError = true; //sets the flag to true
}
?>

Class 6: PHP for eCommerce Page

Here is my PHP assignment - you can click on page 2 or Next and see the second page also created from PHP.

I fixed some of the styling and I was able to fix the flickering effect thanks to Amos' post.

I still have a few outlying issues with PHP, like knowing when it is best to use an array, or the fact that I get an error message whenever I create a php file for inclusion in my main php file and include the <?p ?> tags around it - are you not supposed to include these tags when the php file includes html?? I get really confused about when you use these tags and the html tags

Class 6 - PHP

Today we were introduced to PHP and given a homework assignment to read in its entirety for next week: PHP Tutorial

Good things to remember about PHP:

• PHP is server-side
• Before the server sends the requested .php doc to the client requester, it takes out the PHP and replaces it with what the PHP outputs - this means that when you "View Source" of a php webpage, it will show you the source code as it would read in the html
  
• Tags look like this: <?php ?>
• Always put dollar signs in front of variables
• You don't need to put PHP in the <head> since it is never seen by the browser
• Used to integrate with databases
• Can use the following Frameworks to simplify PHP: Symfony or Cake PHP
• Recommended to keep a separate file for functions
• Variables defined in the main PHP script can be reused in included scripts - what this means is if you define a variable in the PHP on your main page, you can reuse the same variable (with the same definition) in any "included" scripts
  

These are all equivalents to printing to the screen:
echo "Hello PHP"
= print("Hello PHP"); //another way to write it in PHP
= document.write("Hello PHP"); //in JavaScript

Loops:
for ($i=0; $i<10; $i++) {
echo $i;
echo "<br />";
}

Calling a Function:
<?php printSomething(); ?>

Templatizing:
function printSomething($title, $imgsrc, $description) {
print <<<END //<<<END allows you to print a function for multiple items
<div class="product">
<h2>{$title}</h2>>
<p>{$description}</p>
<img src="{$imgsrc}" />
}

In the body:
<? php printSomething("Product 1","images/product1.jpg","something")?>

Including a separate PHP file for reusability across pages:
<?php include("includes/top_nav.php")> //include is a built-in PHP function

Shorthand for Echoing a Variable
<title><? = $pageTitle ?></title>

Class 6 - JavaScript Assignments Review

We spent the earlier part of today going over today's pop quiz answers and showing the class our eCommerce site with JavaScript rollovers. It looks like some people went with the Add/Remove class name technique, whereas others went with the setStyle technique.

Also, there were issues with flickering when mousing over an image and moving between product content text elements (e.g. moving your mouse between the product name and the product description) - Amos is looking into this. There are also issues with the product content "sticking," i.e. not always disappearing on mouseout.

Amos finally helped me figure out some of my page's JavaScript problems - perhaps the biggest of these was the fact that I had assigned the class name of my thumb images (class = "thumbs") to the thumb content (class = "thumbs content") as well!! Additionally, I neglected to add the left and top positions to the element itself, and accidentally added them to the element id:

var contentElId = el.id + "_content";
//alert(contentElId);
var contentEl = $(contentElId); //get the actual element, not the id
contentEl.style.left = leftPos + "px";
contentEl.style.top = topPos + "px";

The mouseout event on the content divs needs to be separated from the mouseover event, but still contained within the setThumbBehaviors function. Within the Event observed mouseout event, it should not be el.id+"_content", as you are getting the Elements by Id already for the class content:

$$('.content').each( function(el) {
var contentElId = el.id; //remove +_content

Working on eCommerce Site

I'm working on the current assignment: an eCommerce site where you mouseover images, revealing their product information in place of the product; when you roll off, the image returns to normal.

Right now, I have the page set up so that when you roll over an image, the div with product information appears...just not over the original image; instead, it appears in the div below and only disappears when I roll over the product info again. I need to come up with something in my code that positions the new div in the right place.

What this involves script-wise is adding a class name to the image div when rolled over, then remove the div name when rolled off. Easier said than done!

Another problem I have is with the CSS buttons - I can't get the link to apply to the entire button (button meaning inline un-ordered list), only to the linked text in the button. I tried putting the link around the <li> instead, but it made no difference.

A good starting place for me was Amos' list of steps:

1) create an event observer that detects the "load" of the window
2) that observer calls a function called setThumbBehaviors()
3) the function setThumbBehaviors should get a list of all the elements that are thumbnails (hopefully you've set up the thumbnails in your XHTML so that they all have the same class name)
4) loop through each thumbnail element (using the .each() function of prototype), and attach an event observer to each one that detects "mouseover" events
5) the "mouseover" event observer should call a function whenever a user mouses over a thumbnail
6) that function should calculate the exact position of the thumbnail that was moused over, and figure out which "product info" div is associated with that thumbnail (see the tabs example).
7) the function should then make the "product info" div visible, and position it at exactly the same spot as the thumbnail info

I did a lot of copying and pasting from class examples - I'm hoping to go back and understand everything later.

Recommended Websites

• JSON - JavaScript Object Notation
  

• Prototype Library
• JQuery
• Dojo
• Scriptaculous
• Yahoo User Interface Library
• Eclipse.org - Integrated Development Environment
• Expression Web2 - Microsoft
  

Billing Form from Class #4

So after reading the HTML DOM tutorial (pretty helpful), re-reading the JavaScript tutorial, and reading the DHTML tutorial, I am much more comfortable in my understanding of JavaScript - I still struggle with knowing how to begin coding, but I can read it comfortably and execute it once I have a little jumpstart. I know that this will still take me a long time to really "get," but I've made strides compared to last week.

At first I looked through all the scripts from the fourth class and tried to meld them together in some weird hybrid (see previous post), but that didn't really work. After a long time, I looked through other people's blogs for some kind of help. Robin W.'s blog really helped me - she had code hints with comments that described each step of the script, so that I at least had some direction. Hopefully, moving forward, I will really be able to do this all on my own.

//get checkbox element using its id
//get billing elements using ids
//get shipping elements using ids
//if checkbox is checked, copy billing info to shipping
//if checkbox is unchecked, remove info from shipping

I didn't get around to:
//Validate Form
//code Submit button

A few things I struggled with:

- Remembering how/when to pass parameters into a function - I kept forgetting to put the checkbox id in the method copyOver() :

• <input type="checkbox" name="checkme" id="checkme" onclick="copyOver('checkme');" />

- Remembering how variables and method parameters interact:

function copyOver(checkboxElId) {
//get checkbox element using its id
var checkboxEl = document.getElementById(checkboxElId);

later this would become checkboxEl.checked in the if statement