This is the 2nd post in a series for marketers 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.
If you’re a bit fuzzy on HTML, I highly recommend reviewing Tizag’s HTML tutorial.
We’re going to begin by making a frame of the calorie site in HTML. First you need a text editing program, preferably a free one. For Mac, I use Text Wrangler. For PC, you can use Notepad (already installed on your computer).
This is the frame of your website. Save this as index.php (note the extension, .php) and transfer it to your website, using either Fetch (Mac) or Filezilla (PC). Since we named the file as “index,” your website will be load it by default. Try loading your website; you should see this:
The calorie site works by pulling content from a MySQL database. Refer to this tutorial from tizag for background on SQL.
Go to your web host (webair.com in my case) and log-in. You should find a link to something called a control panel. It looks like this:
You want to find a link that references MySQL. Click this link.
Add a new database. You’ll be prompted to think of a database name, username, and password. You can call the database “tutorial.”
Sometimes the web host automatically changes your username and password by adding numbers in the front. Take note! In this example, my web host added “11159_” to the front of my database name “tutorial23.” It did the same thing to my username and password.
Also not the web server that it was created on. In this case it is sql8.webair.com. We’ll need this later to access our database. If you’re not sure what the server name is for your database, contact your web host customer service for assistance or look on their FAQ pages.
Once you have created your database and noted your username/passoword/server/database name, click on the database to open it. I click “manage” on my control panel:
You’ll now be sent to a screen that is titled phpMyAdmin (see image below). This is a program that comes with your Web Host that helps you manage your database.
For the site, we are creating a database of food items, their calories, and the user submitted calories.
Click on the link that I circled in the above image. You will then be brought to a screen to create a new table.
Create a table titled “food” with 4 fields. Create another table titled “submit” with 4 fields. For the food table, use the following parameters. Note the “auto_increment” in the “extra” column for the ID row.
These rows represent all of the values that we will need for our website. When we request a food item, we’ll ask for the image name, its description, and calorie total. Each food item as a unique id, “ID.” For the “submit” table, use the following parameters:
Note the “auto_increment” for the “extra” column. This a table that will grow whenever a user enters the total calories into the webpage. The “foodid” corresponds to the food item that the user submitted calories for. So if I submitted “1200″ for the slice of pizza (ID is 5), the “foodid” is set to 5 and the “usercalorie” is set to 1200.
Go back to the “food” table by clicking the table name on the left navigation. Then click “insert” on the next page:
We are going to add our first food item. Let’s use a slice of pizza; enter the following data:
Click “go” after you’ve entered the data. For the image field, we enter “Pizza.jpg” as a way to direct the website to an image. We’ll append this text onto the directory of our image folder to create (“http://www.mdaniels.com/images/pizza.jpg“) to load the image.
Now we have a structure for the website. Every time the site loads, a food item is grabbed from the table titled ‘food.’ When a user submits a calorie guess, we’ll insert it into the table titled ‘submit.’
In the next lesson, we’ll take this database and connect it to our site with PHP.