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.

We’re making a webpage identical to this one. My last post explained how to set up a web host and transfer files to the Internet. Now

Starting PHP

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:

Starting SQL

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.

Recently I wrote about a project that I built on NYC’s menu labeling law. The next few posts explain how to make a website just like it. 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.

First I will address one of the biggest knowledge gaps for marketers: how does stuff get on the Internet? When I type into my web browser “www.google.com,” how does the Internet know what goes where?

Web Hosting

Before you can create anything on the Internet, you need a web host. Put simply, it’s is a service that gives you access to an Internet-connected hard-drive.

To create something on the Internet, you pay a web hosting service, such as GoDaddy, Bluehost, Webair, Host Gator, $5-$10/month for several gigabytes worth of Internet-connected storage space (more info on web hosting here and here).

When you sign-up and pay with your credit card, they’ll ask you to choose a domain name (or a URL, e.g., www.mdaniels.com).  All your Internet files are stored and accessed via this domain name.

This folder contains everything on mdaniels.com. Suppose you have a picture, called image.jpg. Place it inside the www.mdaniels.com folder and it will appear on the Internet at the address http://www.mdaniels.com/image.jpg.

Note: when you purchase a web hosting service, your domain name should be included in your service. If you have to buy it separately, you’ll need to manually connect the domain name to your web service,  a rather complicated step beyond the scope of this tutorial.

Getting  Started

After your purchase, you’ll get a few emails from your web hosting service (I use the webhost webair.com). The first email:

New Webair hosting account information!

YOUR WEBSITE:

DOMAIN NAME: mdaniels.com
IP ADDRESS: 111.111.11.111

FTP ACCESS:

HOST ADDRESS: ftp.mdaniels.com
USER ID: username
PASSWORD: password
SITES: http://www.mdaniels.com

All of this info is very important, so take note when you receive it. You’ll also get a link to “control panel,” or in my case cp.webair.com. This is where you manage your account, domain name, and bunch of other things that we’ll get into later.

Next, you’ll get a second email confirming your domain registration. When I requested www.mdaniels.com, it didn’t go live on the Internet immediately. It takes a good 48 hours to make its way through the system.

Transferring Files

At this point, you’ve purchased server space and have a domain name that is live (i.e., doesn’t show “page not found” when typed into a web browser). How do you upload your first document to the Internet?

We need to access the folder I illustrated above (i.e., www.mdaniels.com), your domain name server space. But it’s not simple as clicking “My Computer” on your PC. You need a special program that transfers files from your computer to your web host’s servers.  Note: Some web hosts provide a built-in tool on their control panel. Either way, try installing a file transfer program.

Step 1: Installation

If you’re running a PC, install Filezilla. If a Mac, install Fetch.

Step 2: Enter your File Transfer Info

Once you start the program, you should see a field that says host or hostname. Enter the information from the web hosting service email that you received earlier. In my case, it was ftp.mdaniels.com (it usually begins with the letters FTP).

Enter the same username and password from your email that was next to the host name or in the section titled “FTP.”

Step 3: Connect

Click connect and you should see a window appear with your domain name and a few random files.

Open your domain name folder. Try dragging and dropping a file into the folder. You’ve just uploaded something onto the Internet!

Step 4: Uploading a File

Try adding a picture to your domain name directory. Make sure you remember the file name and its extension (e.g., .gif, .jpg, .bmp).

For example, upload a photo called picture.jpg to your domain name folder. It will appear on the internet as www.yourdomainname.com/picture.gif


And that’s how the Internet works.

Summary of steps:

• Go to a web hosting service (like Godaddy or Webair)
• Buy a comfortable option (I recommend that cheapest, usually $5-$10/month)
• Choose a domain name for your website (e.g., www.mdaniels.com)
• Wait at least 48 hours to confirm that your domain name is working.
• Download a file transfer program, such as Filezilla for PC or Fetch for Mac.
• Connect your website and try uploading a file.

Just finished a new project, see it here.

Why? A month ago I came across a post on developing a simple online coding curriculum for kids.

It’s a great idea–but I feel for the marketers, not the kids. My friends in online marketing couldn’t say the difference between CSS and SQL. The absurdity is that they manage the development of major websites and email campaigns!

The problem is that the knowledge required to create a dynamic and well-designed site is buried in esoteric tutorials, books, and forums written by expert computer programmers. It took me over a year to gain my knowledge, which is only a basic understanding, at most.

To save everyone time, I’m writing a few posts on exactly how to create a basic site with all of the coding that any online marketer would come across. I created this small page on NYC’s new menu-labeling law, Dustin Curtis-style (who’s stuff has been a huge inspiration for me). My page has got everything: PHP, SQL, CSS, HTML.

Feel free to play around with it. It grew from an article claiming that we underestimate our fast-food calories by 600, about a quarter of my daily intake.

Anyway, tutorials will be forthcoming.

Post-script: I was able to dissect much of Dustin’s awesome design using Firebug. Thanks Lee for showing me this life-changing tool a few months ago.