Hi there. I'm Matt. Don't hate the player. Hate the game.1

New here? More info about me here.

Subscribe via email or RSS

Oct 6, 2009 | Comments

This is the 3rd 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. My last post explained how to create a MySQL Database. Now we’ll connect that database to our website and write some code! If you haven’t already, definitely review this intro to PHP tutorial from Tizag.

Connecting to your Database

Recall from the last lesson that you created your database–you gave it a name, username, and password. We’ll use this information so that we can access the database on our website.

Using your text editor, create a document called ‘db.php’. Enter the following–my notes are in [brackets].

$host = '[your server name]'; //remember that this was automatically messaged to you when you created your database
$username = '[your username]'; //your username assigned to your database
$password = '[password]'; //your password assigned to your user & database
$database = '[database name]'; //My database was called 11159_tutorial23

Save this file on the same level as ‘index.php’ using your FTP program. Once you have this file created, go back to the document that we started in the last post, ‘index.php’.

Right under the body tag, paste the following text:


$dbcnx = @mysql_connect ("$host", "$username", "$password");
if (!$dbcnx) {
echo '<p> cannot connect </p>';
exit ();

if (!@mysql_select_db('[your database name]')) {
exit('<p>Unable to connect to database at this time.</p>');

Note: replace the red text with your database name. We are connecting the ‘index.php’ file to the database information. The function include() takes db.php (created earlier) and copy and pastes all of the file’s information as if it were right into the document.

The $dbcnx and if() strings are PHP for connecting to a MySQL database. Don’t worry about the specifics–just know that this code is required when creating a database-driven website.

If everything is working, your website will load normally and not show an error (i.e., “unable to connect to database at this time.”).

At this point, confirm that your site has the right text by clicking here.

Now we need to get a food item from the database to display on the webpage. Remember in lesson #2 that we entered a pizza slice’s info into the database. We want to pull this item and all of the data in each of the columns. Using a bit of SQL, we select an ID number from the food table.

$query = "SELECT * FROM food LIMIT 1";
$result = @mysql_query("$query") or die('<p>There was an unexpected error grabbing studies from the database.</p>');

This reads, “Select all items (*) from the table food and limit to one row (LIMIT 1 in the SQL). Stored in $result is our food item row. It includes the image name, description, and calorie total.  We now need to get this info out of $result.

while ($row = mysql_fetch_array($result)) {
$foodid = stripslashes($row['ID']);
$actualcalorie = stripslashes($row['actualcalorie']);
$image = stripslashes($row['image']);
$description = stripslashes($row['description']);

This function (while) takes the variable $result and parses out the column information from our database. For example, the pizza row contained the data “248″ for the “actualcalories” column. We grab this data by assigning it to the $actualcalorie variable using the above code.

Now we have the pizza’s row data all assigned to variables. Its ID is in $foodid. Its calorie total in $actualcalorie. $image is the pizza slice image name. Description is $description. Let’s display these variables on your webpage:

echo $description;
echo "<img src='http://www.yourwebsite.com/images/".$image."' />";

This displays the pizza slice’s description and image on your website. The image, however, will not work because you have not uploaded it to your webhost’s servers. Download this image of a pizza slice and save it as pizza.jpg. Remember, when entering the data into your database, this is what we entered into the pizza row in the image column. Upload it to your website using FTP (refer to lesson #1 for directions). Create a folder under your domain name called “images” and upload the pizza image there.


Try loading your site, you should see the displayed pizza description and image.

That’s it for now. Not sure if you got everything? See all of the code that I covered thus far here. Make sure you change all references to mdaniels.com.

Blog Widget by LinkWithin
blog comments powered by Disqus