An Introduction to the Basic Topics of the Lab
The CS215 lab will cover the following basic topics on Web programming:
- HTML Fundamentals
- CSS Fundamentals
- PHP (a server-side script language)
- MySQL Database
- PHP with MySQL
Topics 1 to 3 focus on client-side web programming.
by an Internet browser (the client) running on your machine.
When you type in a URL, your browser (the client) makes a request to the web server at that URL to send all necessary
files/scripts. The server generates a response by passing back any files/scripts requested. Then, any client-side scripts that are received by the browser are executed on your machine.
The output from the client-side scripts and the HTML/CSS code are interpreted by the browser and finally displayed as the web page that you see.
Topics 4 to 6 focus on server-side Web programming.
Specifically, PHP code and SQL statements are executed by servers
(web servers and database servers).
When you type in a URL to a website that has server-side code, your browser sends a request to the server. The server runs the server-side script to produce output/web page content that is then passed back to your machine in the response. Your browser then interprets the response and displays the web page. Notice that the server-side scripts are run on the server and the client-side scripts are run on your machine.
Topic 7 (Ajax) is a combination of client-side and server-side web programming.
The following sections introduce the basic environment of the CS215 lab, including the operating system (Scientific Linux), the web server (Hercules), the database server (MySQL) and the editing environment (Eclipse IDE).
Scientific Linux: The Operating System of the Lab
The operating system in the CS215 lab is Scientific Linux.
In the lab, you will use Linux commands and the Linux GUI to set up your
website and store files on Hercules. After the lab, you can connect to Hercules
from home to continue your exercises, assignments and projects.
Logging on to the Linux Machines
You will use your computer science (CS) username and password to log on to the Linux machines in the CL115 lab.
IMPORTANT: Logging out before Leaving
When you are done working and ready to leave, the last thing you should ALWAYS do is log out. Otherwise, you run the risk that another student will access/modify your files. To logout, choose:
Log Out your_username from the main menu. Do not turn the power off.
Hercules: Your Web Server
In the lab, your HTML, PHP, JS and CSS files will be stored on a web server, specifically, Hercules. The URL (address) of the Hercules server is www2.cs.uregina.ca. If someone requests your web page (
http://www2.cs.uregina.ca/~your_username), Hercules searches your home directory for content inside a special directory called
public_html. Your home directory is stored on Hercules and is the "starting" directory when you log on to Hercules or use the terminal in the Linux lab. To allow others to see your web pages, you need to: 1) store your source files, such as *.html, *.php, *.txt, *.jpg, in the public_html directory (located in your home directory), and 2) change the "permissions" of the files/directories.
Change Your Hercules Password
If you forget or want to change your hercules password, please go to this link.
Logging on to Hercules
From the Linux machines in the lab, you can log on to Hercules from the command-line:
- Start a Linux command-line window (a terminal)
Type the following command:
If it is successful, a welcome message is displayed on the screen.
Note: If you open a "terminal" on the Linux machines, you will see all of your Hercules files and directories. This does not mean that you are on Hercules. Pay attention to the terminal's prompt: a prompt such as
a049510 indicates that you are on a Linux machine, whereas, a prompt such as
hercules indicates that you are on Hercules.
Commands to Get You Started:
- Log into hercules:
- Change the permissions on your home directory:
chmod 711 ~
(to "list" the detailed information about your files:
- If you do not have one, create the "public_html" directory:
- Change the permissions on your "public_html" directory:
chmod 711 public_html
- Enter the public_html directory:
- Edit the html file and save/upload into the
- Change the permissions of:
- all .html files:
chmod 644 *.html
- all .css files:
chmod 644 *.css
- all .jpg (pictures) files:
chmod 644 *.jpg
- your web address (URL) is:
- the permissions on directories should be: 711, which means you can list contents and add files and execute (or change into) that directory; everyone else can only change into that directory.
- the permissions on individual files, e.g., .html, .css, .jpg, or .gif, should be 644, which means you can view and modify the file; everyone else can can only view it.
Eclipse IDE: Your Editing Environment
Install JDK, Eclipse 3.7.2 and PDT 3.0.2 from Zend
Create a PHP Project
The following steps demonstrate using Eclipse to create a PHP project with HTML and PHP files:
- Under the Linux "Applications" Menu, select "Programming" > "Eclipse For PHP"
- The first time you run Eclipse you will see this dialog box. You can click on the check box and click "OK" to continue
- Create a "PHP Project"
- Enter a PHP project name, for example, "lab0_php_prj". Select "Create project at existing location..." and click on "Browse"
- Make sure that your username is selected in the "Places" panel. Click on the "Create Folder" button.
Type "public_html" and press the enter key. Then, click on "OK"
- Double check that your directory is "public_html" and click on "Finish"
- To add an HTML file to the project, right click on "lab0_php_prj". From the pop-up menu, select New > HTML File
- Enter an HTML file name, for example, "index.html". Click on the "Next" button to continue
- Select "New HTML Files (5)" as your HTML template:
- Edit the HTML source code
- Add a PHP file in the same manner as the HTML file. Right click on "lab0_php_prj". From the pop-up menu,
select New > PHP File
The following instructions are for creating php files in the later lab.
You do not need to do these steps now, these instructions are for PHP labs later.
- Enter a PHP file name, for example, "session.php". Click on the "Next" button to continue
- Select a PHP template, for example, "New simple PHP file"
- Edit the PHP source code
- Close the whole project by right clicking and selecting "Close Project" from the pop-up menu
Learning HTML Tags
An HTML document can be described by a set of HTML tags. We will introduce several common HTML tags that can be used to produce a basic page with images, lists, tables and links.
Document Structure Tags
Consider what you need when you write an article: a main title with subheadings and paragraphs. To create titles/headings in HTML, the format is:
</h>, where a number appears after the
h. For instance,
h1 is the most important heading (like your title) and
h6 is the least important (a sub-sub-sub-sub-subheading). Paragraphs are denoted with the opening and closing pair:
</p>. Highlights such as bold (
</strong>), italics (
</i>), and underlining (
</u>) may be used during writing. The following links provide details.
HTML headings: http://www.w3schools.com/html/html_headings.asp
HTML paragraphs: http://www.w3schools.com/html/html_paragraphs.asp
HTML formatting: http://www.w3schools.com/html/html_formatting.asp
List tags are an essential part of HTML. The three kinds of lists are: unordered lists (
</ul>), ordered lists (
</ol>) and description lists (
</dl>). In the ordered and unordered lists, a
</li> tag is used around each list item. In the description list, a pair of term
</dt> tags and description
</dd> tags are used to define each list item. The following link provides details.
HTML lists: http://www.w3schools.com/html/html_lists.asp
To include tables in an HTML document, you will use the
</table> tags. An HTML table contains captions (
</caption>) and rows (
</tr>). Each row contains columns, otherwise known as table data (
</td>). The data for the first row is usually a set of headings denoted using (
</th>) in place of the
<td> pair. The following link provides details.
HTML tables: http://www.w3schools.com/html/html_tables.asp
The most commonly used formats for image files are GIF (graphic interchange format), JPEG (joint photographic experts group) and PNG (portable network graphics). To insert images into a web page, you use the tag: (
<img src="..." alt="..." />), where a source attribute, i.e.,
src, and an attribute for alternative text, i.e.,
alt, should be specified. A
width attribute and a
height attribute can be used optionally. However, it should be pointed out that arbitrary use of these two attributes may distort (squish or stretch) the image. The following links provide details on using images tags.
HTML images: http://www.w3schools.com/html/html_images.asp
Tags for Links
Links can be considered the most important element of an HTML document. Without HTML links, there would be no "surfing the web" as you know it. The use of links, i.e.,
</a> enable us jump from one page to another with a simple click. There are two ways of specifying a web address: either as a relative address or an absolute address. In addition, you may use an
<id> attribute to create bookmarks (places to jump) within an HTML document.
HTML links: http://www.w3schools.com/html/html_links.asp
HTML Block and Inline elements
All HTML elements can be categorized into two types: inline elements and block elements. Inline elements do not explicitly include a line break and the content appears on the current line (or, as the name implies, "in-that-line"). Examples of inline elements are:
<img>. By contrast, block elements normally start and end with an implicit new line. For example,
<h1> tags are block elements.
HTML blocks: http://www.w3schools.com/html/html_blocks.asp
XHTML vs HTML5
XHTML is HTML redesigned as XML. It provides more strict syntax rules than HTML. HTML5 is a newly designed specification with more advanced features (such as tags for adding video, audio, and graphics and additional functionality). Currently, most modern Internet browsers support this specification. The following links provide the details of the two specifications.
What is XHTML: http://www.w3schools.com/html/html_xhtml.asp
What's new in HTML5: http://www.w3schools.com/html/html5_intro.asp
Through a W3C validator, all errors and potential problems in your HTML code can be identified. To ensure that you are coding correctly, this lab requires that all your HTML code be validated. To do this, you need to copy your URL address into the text box provided by the following W3C validation service web site:
The W3C Markup Validation Service: http://validator.w3.org
More information about web validation: http://www.w3schools.com/website/web_validate.asp
Rules for Writing HTML5 in XHTML Format
In the lab, we will be writing HTML5 but adhering to the strict rules of XHTML to encourage proper programming habits. Therefore, you should be aware of the following XHTML syntax rules:
- 1. case sensitivity
- all tags and attributes must be in lower case
- 2. closing tags
- all tags must be closed
- 3. quoted attribute values
- all attribute values must be in quotes
- 4. explicit attribute values
- all attributes must be specified by assignment
- 5. id and name attributes
- only use name for form elements; use id everywhere else it is needed
- 6. element nesting
- the rules for element nesting must be followed. Most important, a block element cannot be nested in an inline element.
Validating HTML5 as XHTML1.1
In order to validate your HTML5 as XHTML, you need to modify some of the content to ensure it is valid XHTML:
- replace the
<!DOCTYPE html> with
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
- add the
xmlns attribute to
<html> tag, that is, using the following html tag:
<html xmlns = "http://www.w3.org/1999/xhtml">
- comment out the character set line:
<meta charset = "utf-8">
A comment in HTML is anything between the following two partial tags:
<!-- Comments are here
In Lab Exercise 1
- Copy the poorly written HTML5 page: "test_html5.html" into public_html directory
using the following command:
cp /net/data/ftp/pub/class/215/basic_html/test_html5.html ~/public_html/
- Ensure that the permissions are correct (644)
- Validate "test_html5.html" using the W3C HTML5 validator (http://validator.w3.org). Correct any mistakes.
- Validate "test_html5.html" using the XHTML1.1 validator (see the notes above on converting your code to XHTML1.1). You will notice that it complains about the
<section> tag. This is a new tag specified in HTML5; it can remain in the code. Besides the two
<section> tag errors, all other errors can be corrected.
You have all encountered HTML forms when you make an online purchase and fill in your address and information. You will be learning how to create a basic HTML form (i.e.,
<form action="" method="">...
</form>). In a form tag, an
action="process.php" attribute specifies a server-side program that is waiting to process the user inputs; in this example, the program is php code saved in the "process.php" file. A
method="post" attribute specifies the type of method, which will be either
post, used for submitting the information. With the help of HTML input elements (i.e.,
<input type="" name="" />), different types of content can be collected. To summarize, we have three types of input elements. The first type is for plain text and includes
textarea. The second type provides options for choices and includes
select. The third type is for submitting or resetting user inputs and includes
reset. All form elements need to have a
<id> attribute, for example,
<input type="text" name="first_Name" id="first_Name" />. The following links provide details.
HTML form tag and attributes: http://www.w3schools.com/html/html_forms.asp
HTML input types: http://www.w3schools.com/html/html_form_input_types.asp
More input elements: http://www.w3schools.com/html/html_form_elements.asp
In Lab Exercise 2
- Edit the HTML medical_form.html
- Create a simple HTML form, which should include an input text box for entering the name, an input box for passwords, a group of radio buttons for gender and a drop-down list for selecting the nationality.
- Validate the page for XHTML 1.1 format (http://validator.w3.org).
Structure of a PHP Web Project
+--index.html (or index.php)
public_html is the root folder of your project/website. In the root folder, you will have the
index.html(index.php) file as your home page. All your additional HTML pages, for example,
introduction.html, can be put into the
basic_html_pages folder. You can put the server side scripts, for example, PHP files, into a
php_service folder. Commonly used PHP functions including header and footer information should be put into the
scripts folders, respectively. If you would like to download third party libraries, you should put them into the
Note: This provides an example of what might be done in industry. For the lab, you will be creating separate directories for each lab to nicely
organize your work incrementally. For each assignment, you should also create a unique directory.
Create two files "index.html" and "medical_form.html" in your public_html directory.
The "index.html", consists of the following information:
- The title of your web site (as a main heading).
- Information about yourself.
- Classes you have taken and are now taking.
- Create a link in the "index.html" page to the "medical_form.html" page.
- links to directly validate your pages.
A sample of a personal web site is provided below (you do not need to make it exactly the same; instead, use your imagination):
A sample medical form is provided below:
Upload the zipped html files to URcourses before 11:55PM today. For detail, please see
How to submit Lab assignments.
Important Note: Your HTML5 documents may not pass XHTML1.1 validation.
Some HTML5 tags do not exist in XHTML and will, therefore, not pass validation. However, you must make sure your web pages do not contain any syntax
errors according to XHTML. That is, some errors are allowed. For example, when using the HTML5
<article> tag, you
will have an error message: "element 'article' undefined"; you may also have an error such as "there is no attribute id"
when you use something like
<section id="mysecid">. Syntax errors according to XHTML (i.e., a paragraph tag without a
closing, an image tag without a back slash, or an embedded block element inside a non-block element) are not allowed.
- To change directories, the command is "cd" : i.e.,
- Permissions for directories should be 711: i.e.,
chmod 711 public_html
- Permissions for all .html files should be 644: i.e.,
chmod 644 *.html
- your web address (URL) is: