Day 1: Building a Dynamic, Data-Driven Website

Introduction:

Today you are going to learn some of the fundamental concepts behind modern website design. While there are other advanced technologies available to today's web developers, what you will learn and experiment with today is enough to create fashionable, professional, and functional websites.

Your specific task is to choose an e-commerce application on which to work such as an online bookstore, online auctions, or a flight reservation system, and progressively design and implement the application.

Links to Student Sites

  1. Chris' Soccer Shop (author: Chris Bruening)
  2. Austin's Philippines Site (author: Austin Labarez)
  3. Drew's Games Ratings Site (author: Drew Smith)
  4. Starr's Baseball Supplies (author: Andy Starr)

Exercise:

To learn and employ the languages and technologies used in modern web development to create your own dynamic, data-driven website.

Each of these lab computers has been loaded with software to turn them into web servers.

  • Your webpage can be viewed at http://localhost/MyWork/ while in the lab.
  • You will place your files in C:\xampp\htdocs\MyWork\
  • Files will be edited using Notepad.
  • When we are done at the end of the day, we will show you how to take your files with you so you can demo them to friends outside of this lab.

Steps:

  1. Develop an Idea for a Website
  2. A Simple Static Webpage
  3. Add Site Structure and Link Multiple Pages
  4. Factor Content from Presentation using CSS
  5. Adding Simple Dynamic Features using JavaScript
  6. Java Applets
  7. Processing Forms using PHP
  8. Maintaining State between Progressive Interactions using PHP Sessions
  9. Creating a Database using MySQL
  10. Accessing your Database using PHP
  11. Extending Firefox using XUL

Step 1: Develop an Idea for a Website

This is the most important step!

It sets the stage for the remaining steps.

Pick something that interests you! You should take a quick look at the rest of the steps to get a feel for what's expected of your website.
Some ideas:

  • online bookstore
  • online auction/trading site
  • flight reservation system

Think about how people will use your website, how it will look, what features you will need. Think broadly - you can always fine tune your idea as you go along.

Goal: Write a 5-10 sentence paragraph describing your idea. You may also want to draw mock-ups of a few pages to get a better feel for the layout of your site.

Throughout the rest of the steps, we have two running examples: A bookstore and a supercomputer database.
These examples are meant only to demonstrate the idea of each step. They are far too simplistic to be practical and useful - your website should be practical, useful and realistic. At the end of the day we want a well made website you can show off to your friends back home.

Back to top

Step 2: A Simple Static Webpage

The first step to creating a webpage is learning HTML.

Goal: Create a simple "Welcome!" page or something similar.

Examples:

Here are some guides to start you off:

  • w3schools HTML Tutorial
  • HTML Jalfrezi
  • Fundamentals of the Internet and the World Wide Web by R. Greenlaw and E. Hepp. McGraw-Hill, Boston, MA, 1990. pp. 209-347 (copy available in lab)

Both w3schools and HTML Jalfrezi are excellent references for many web development topics.

Back to top

Step 3: Add Site Structure and Link Multiple Pages

Now that you know how to create a single page, you can start building the rest of your website.

Goal: Create multiple pages for the various parts of your website and link them together.

Examples:

Back to top

Step 4: Factor Content from Presentation using CSS

As you may have seen in the HTML tutorials, it is possible to add style and formatting properties to HTML tags.
A better and more consistent method is using Cascading Style Sheets (CSS). These are separate files that define styles for your website. By using CSS, we separate content from presentation - meaning we do not have to redo all the formatting when we update our pages. An illustrative example of the power of CSS is the css Zen Garden (click each link to the right of the page to view different presentation styles made possible through CSS).

Goal: Add style and formatting to your website using CSS

Examples:

Guides:

Back to top

Step 5: Adding Simple Dynamic Features using JavaScript

JavaScript is a scripting language that runs in your browser. It has access to the webpage being displayed and can modify it without having to reload the page.

Goal: Add a dynamic aspect to your website using JavaScript.

Examples:

Guides:

Back to top

Step 6: Java Applets

Java applets are full-blown programs that can be embedded in a webpage. They are capable of more functions than JavaScript is, and can range from simple programs like clocks to complex programs like calculators or games.
Plenty of websites offer free Java Applets for download. In this step you will embed a Java Applet into your website, but you do not have to write it yourself.

Goal: Add a Java applet to your website.

Examples:

Repositories:

Once you have found an applet you like, view the source of the page and search for <APPLET> tag. Then:

  • Copy everything from <APPLET> to </APPLET> into your webpage.
  • Make note of the .class used (e.g. Clock.class) and go back to the webpage where you found the applet.
  • In the URL, Replace the page name with the class filename to download it.
  • Place the class file in your website folder.

If everything worked, the applet should now load in your webpage.

Back to top

Step 7: Processing Forms using PHP

At some point a person using your website will need to send you some kind of information. This could be something like a comment e-mail or an order for merchandise.
PHP is a server-side scripting language that, among other things, can pass information between pages and send e-mails.

Goal: Add a form to your website and process it using PHP.

Note: in the following examples, you can examine the source of the examples to see how they work. Specifically,
  1. right click anywhere on page and select "View Page Source" for .html files, and then
  2. add an 's' to the end of the URL for .php files, e.g. index.phps.

Examples:

Guides:

Back to top

Step 8: Maintaining State between Progressive Interactions using PHP Sessions

Whenever you load a new page, any information from the previous page is lost. You have to pass the information along somehow - you have seen how to use forms, in this step you will use PHP sessions.

Goal: Use PHP sessions to build a shopping cart or similar function.

Examples:

Back to top

Step 9: Creating a Database using MySQL

Most data-intensive websites serve massive amounts of content and therefore employ a database system (DBMS) to help manage the data.

Goal: Create a database, fill it with data appropriate for your website, and run some queries on it.

The administration page for the DBMS on this computer is at: http://localhost/phpmyadmin/
Once you have created your database, you can run SQL queries by going to the "SQL" tab on that page.

Guides:

Back to top

Step 10: Accessing your Database using PHP

PHP has built in functions that make accessing your database very simple. You can take advantage of these to make your website database driven - data is read from the database instead of updated by hand.

Goal: Add MySQL interaction to your webpage.

Examples:

  • Bookstore
    (Available stock is displayed and updated whenever an order is placed)
  • Top 500 Supercomputers
    (Queries now access the database and return actual results)
Back to top

Step 11: Extending Firefox using XUL

In this step you will create a toolbar for Firefox using XUL (XML User Interface Language).

Goal: Create a simple Firefox toolbar.

We have provided a template for you to use that takes care of some of the initial setup.

Template: Example Toolbar

You can try out the Example Toolbar by selecting it in View -> Toolbars

To use this template to create your own toolbar:

  1. Unzip it to C:\
  2. Rename the folder to the name of your toolbar.
  3. Open up the install.rdf file in Notepad.
    Replace "Example Toolbar" with the name of your toolbar.
    Replace "exampletoolbar" with the id of your toolbar. This can just be a lowercase, no-spaces version of the name.
    Update the Optional Items with appropriate values.
  4. Open up the chrome.manifest file in Notepad, and everywhere it says "exampletoolbar" replace it with the id of your toolbar.
  5. In the chrome\content folder, rename exampletoolbar.xul to yourtoolbarid.xul
  6. Edit the .xul and .js files to create your toolbar.

To install the toolbar so it shows up in Firefox:

  1. Open Notepad and type in the path to your toolbar files, e.g. C:\ExampleToolbar
  2. Get your toolbar id from the install.rdf file, e.g. exampletoolbar@udayton.edu
  3. In Notepad, save the text file, giving it your toolbar id as the filename.
  4. Move this file to C:\Program Files\Mozilla Firefox\Extensions\.
  5. Restart Firefox.

Any time you make changes to your toolbar, you have to restart Firefox so the changes take effect.

Guides:

Back to top
Return Home