This is the 4th and final post in a series on how to make a website. Why am I doing this? For marketers, the knowledge required to create a well-designed site is buried in hard-to-understand tutorials, books, and forums for computer programmers. Knowing nothing about web programming one year ago, this series explains everything that I’ve learned.
We’re making a webpage identical to this one. Before we finish our site, make sure your code matches what we’ve done so far here in lesson #2.
- Lesson #1: Web Hosting and File Transfer
- Lesson #2: Starting PHP and MySQL
- Lesson #3: Writing PHP
Entering Data
We need a way to enter calorie data into the website. We’ll use a simple form for this:
<form action="<?php $self ?>" method="GET">
<input name="usercalorie" type="text" cols="20" value="Total Calories. e.g., 400" id="input"/>
<input type="hidden" name="foodid" value="<?php echo $foodid; ?>" />
<input type="hidden" name="actualcalorie" value="<?php echo $actualcalorie; ?>" />
<input type="hidden" name="image" value="<?php echo $image; ?>" />
<input name="send" type="hidden" />
<input type="submit" value="submit" />
</form>
This form creates a text box for users to enter calorie data. When user clicks “submit,” it will pass the data from the text box along with a few other variables that we had assigned previously in PHP.
The first line states that the method is “GET.” All data from the form will be sent via the URL. So for the next line we have a text box named “usercalorie.” This means that if someone types “10″ in the text box, it will be appended to the URL after clicking “submit” as http://www.mdaniels.com/calories?usercalorie=10. Another example: the ID for the food presented is appended as http://www.mdaniels.com/calories?usercalorie=10&foodid=3. We will append on the data for the actual calorie total and image name.
Example: here’s what happens after someone guesses a calorie total:
http://www.mdaniels.com/calories/?usercalorie=400&foodid=6&actualcalorie=1265&image=cheesecake.jpg&send=
We want to take this data and covert into variables. 400 needs to turn into $usercalorie. 1265 as $actualcalorie. This way we can compare the variables and interpret the user’s guess.
To do this, we need the following code:
if(isset($_GET['send'])) {
$usercalorie = htmlspecialchars($_GET['usercalorie']);
$actualcalorie = htmlspecialchars($_GET['actualcalorie']);
$foodid = htmlspecialchars($_GET['foodid']);
$image = htmlspecialchars($_GET['image']);
}
We add this to the top of our code, right after connecting to the database. First, it checks IF the “send” variable is set in the URL. In the example URL above, you can see that it is there at the end of the URL (…&send=). PHP will then convert each of the items into variables. For example, “image=cheesecake.jpg” becomes “$image.”
If done correctly, the user’s information is stored as variables: $usercalorie (what they guessed), $actualcalorie (the actual total calories of the food), $foodid (the food id number), $image (food’s image name).
Manipulating User Data
Let’s capture all of this information in our database. Recall that we created a table to do just that–columns for foodid, usercalorie, and date. After assigning the user’s data to variables, insert into the database:
$sql = "INSERT INTO submit SET foodid='$foodid', usercalorie='$usercalorie', date=now()";
if (@mysql_query($sql)) {
} else {
exit('<p>error adding to rankings table: ' . mysql_error() . '</p>');
}
This is a simple SQL statement. We are inserting data into the table “submit” (created in lesson #2), setting each column to the respective variable created earlier. The “date” item uses a simple command that inserts into the table the current time/date.
By capturing this data we can calculate an “average user guess,” as shown on the live version of the calorie website.
Check your code so far here. That’s pretty much the general structure of the site! Not sure what just happened? Here’s a quick map of our code:
Major Coding Steps:
This is a cycle–every time the user submits something, the site reloads. So as soon as a user submits a calorie total, the website reloads, checks if the user submitted something (yes), captures the user’s guess, grabs one new food row, and prompts the user to evaluate the new food item.
Web Design: CSS
We completed the major steps of the site. How do we make it look pretty? This is where CSS comes in. Check out the Tizag CSS guide here. There is also another amazing CSS tutorial from Smashing Magazine here.
Within the <head> tag, add style tags: <style></style>. Within these tags we can assign CSS to our code. Suppose we want to add some flavor to our form. First add a <div> to the form. The div tag is purely aesthetic. It assigns style to all items within the div tag.
<div id="form">
<form action="<?php $self ?>" method="GET">
....
</form>
</div>
I assigned the div an id=”form”. Within the style tags I write:
#form{
margin-top:10px;
border:10px solid black;
color:#464646;
font-size:25px;
}
By giving our <div> the id “form,” we can refer to it in our CSS as #form, assigning it a few design elements, like font-size and a border. Check out this awesome border for our form:
I will not write all of the CSS that I used for the calorie site. It is far too complex to explain in a tutorial, but I do encourage you to check out the source code at the end of this tutorial and work out how to create something just like it.
Finishing Up
You should now have a working website. Add a few more food items to the site using the MySQL database.
The source code at the bottom adds much more code. It includes all of the copy and the text fields for “your guess” and “average guess.” It also includes the code required to grab a random food item rather than starting in the same spot every time the site loads.
So that’s it. Here’s the entire source code for the website.
