Friday, October 31, 2008

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

Saturday, October 25, 2008

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

Monday, October 20, 2008

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.

Saturday, October 18, 2008

Recommended Websites

  • JSON - JavaScript Object Notation

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

Thursday, October 16, 2008

Working on Javascript Form

I am desperately trying to get the Javascript on my billing/shipping form correct, but I am still having a brain-block when it comes to Javascript principles. It's difficult to remember what you need and where, especially when starting from the beginning. Right now my form is just showing the values associated with each field - I am trying to get one field to copy over to another without naming out every variable. I don't think I'm going about this the right way, so I'll probably start over.

Also, I can't remember what (i=0; i < formEl.billing.length; i++) means exactly.

My code:

//will first determine value of checkbox, true or false - check = true or check=false

function validateForm() {
var formEl = document.getElementById("billing_form");
var selectedCheck = copyOver();

return false;
}

function copyOver() {
var formEl = document.getElementById("billing_form");
for (i=0; i < formEl.billing.length; i++) {
if (formEl.checkme.checked) {
formEl.shipping[i].value = formEl.billing[i].value;
}

else { //if false, then leave blank
formEl.shipping[i].value = "";
}
}
}


//code Submit button

Saturday, October 11, 2008

Javascript

I don't really get Javascript. Am I alone?

Class 3 - Intermediate XHTML / CSS Layout

I found that putting together the basic structure of my Social Networking Web Page was a lot easier than previous projects, so at least there's an improvement! I spent a lot of time styling, though, and I hope to get faster at this as time goes on.

Saturday, October 4, 2008

Class 3

We went over everyone's websites today. It was interesting to see that people had similar challenges - it made me feel a little better about my struggles (especially with margins). One of the things I've noticed about CSS is that everything can seem haphazard at times; whereas things are very easily lined up using tables in HTML, you have to move things around in a trial-and-error kind of way using padding, margins, etc. in CSS.

We expanded our knowledge of CSS by looking at parent:child relationships, lists, and form elements. Notes from today:
  • It is suggested we not use heights for divs
  • In Firefox, headings come with padding built in
  • #topnav ul li = the li within the ul within the topnav id
  • ul.round li.special = any li of class special within any ul of class round
  • ul li:hover { }
  • ul li#special_item
  • Mouse out: ul li img { display: none; }
  • Mouse over/hover: ul li:hover img { display:block }
  • #container > div = will apply to first level of descendants

We also did a quick review of Photoshop CS3.

Good reminders regarding <br class="clear" />:
  • Used at the end of every row of floats
  • Breaks up rows of divs, not columns

Update

I was able to tinker more with the webpage and fixed some of the margin and placement issues. My page happens to look totally different (and a lot worse in IE).

I still could not figure out how to vertically align text to a div, but I adjusted the line-height in my title div to be very small and for some reason this moved the text up. Using vertical-align does not work.

I am still unable to center my page in the browser. I have no idea why this doesn't work, especially since I copied it over from an in-class assignment!

Notes from this week's reading:
  • selector:pseudo-class {property: value}
  • Use a before or after pseudo-element when you want something repeated multiple times
  • The onmouseover attribute defines what will happen when the mouse pointer moves over the image. In this case we want the image to NOT be transparent when we move the mouse pointer over it.

    The syntax for this in Firefox is: this.style.opacity=1 and the syntax in IE is: this.filters.alpha.opacity=100.

  • The @media rule allows different style rules for different media in the same style sheet.
  • @media screen
    {
    p.test {font-family:verdana,sans-serif; font-size:14px}
    }

    @media print
    {
    p.test {font-family:times,serif; font-size:10px}
    }
    @media screen,print
    {
    p.test {font-weight:bold}
    }

Some of the items that confuse me from this week's reading:

- first child: the structure of the selector
  • p < em:first-child
    {
    font-weight:bold
    }
  • p:first-child em
    {
    font-weight:bold
    }
  • img
    {
    opacity:0.4; /* Firefox */
    filter:alpha(opacity=40) /* IE */
    }
- The difference between focus and active for links.

Thursday, October 2, 2008

CSS Assignment: Pet Shop


Here is my stab at completing the homework assignment to create our Pet Shop pages using CSS.

I ran into a lot of problems while constructing this page, including the following:
  • Margins: These were one of the biggest challenges for me, whether I had to account for 1px borders or margins specific to a div to figure out the overall container size or to understand why certain elements were not lining up. I didn't realize that when adding padding to a div, the text does not automatically re-wrap to fit - rather it makes the div wider, which messes up the margins. I ended up spending most of my time trying to do calculations in my head and getting frustrated when I reloaded my page only to find that everything had shifted around strangely. Moving forward, I will come up with a wireframe that include margin calculations so I can keep track of any changes.
  • {display: block}: I tried to get this to work with the <h3> tag so that I didn't have to make the "Pet of the Month" nav bar a whole separate div, but it didn't work. Does display: block only work with divs?
  • Spacing elements within divs: How do you increase spacing between text/image elements without using margin or padding (both of which mess up the overall margins) or putting in a lot of nbsp's?
  • Vertical alignment: How do you vertically align text in a div? Is this some old-fashioned idea I inherited from HTML?
  • Tables: When is it okay to use tables in conjunction with CSS? To post the awards badges, I was tempted to use a table, but maybe there is a better way to do this with CSS only.
  • Centering my page in the browser: For some reason, I can't get this to work, even though I copied the code over from one of our exercises in class.