Web Development

There are hundreds of ways of building a website. You can hard code it and upload your files directly to your hosting site. Software that can assist in web development for such as Dreamweaver is still being used but is not as frequently used as in the past. You can use an online WordPress App what allows you to enter data and format options and then it spits our the code to be hosted while more frequently people are using online web development services such as Square Space and Wix for fast development and hosting - just like this website!

In this course, we will learn about how websites work, what a web server is and how server side programming works.

In the diagram below you can see the flow of instructions from the Client's computer accessing a website via a browser.

1. The page request goes to a webserver. When you are developing a site using an online tool this is not visible to the developer, however, if you are coding a database into your online business you will need to run a web server locally on your own machine. XAMPP is ideal because it is free and a set of very useful software that allow you to run databases and PHP. The web server manages the interactions between the client's computer and the stored HTML pages and any other files required.

The web server then interacts with the PHP Pre-processor which creates an interface with the database using PHP instructions.

SET UP: What to install.

What you need to build a website:

1. PROTECTION: Kaspersky Online Scanner: A free virus scanner to keep your computer safe from malware when running your web server.

2. A TEXT EDITOR: Notepad++: A free text editor that allows you to code in a variety of different languages. Ideal for web development. Alternatively, Atom is excellent for both Windows and Mac.

3. A WEB SERVER: XAMP: This is a Apache Web Server with a built in MySQL database and PHP server. There is a version for both Mac and Windows. Another cross platform alternative which is also very good is AMPPS.

If you wish to do some more advanced programming you might like to use TestmailServerTool to incorporate an email server into your project.

CODE: What we will learn.

1. HTML

If you do not have some basic HTML skills visit W3Schools. You should become familiar with basic tags:

<!DOCTYPE html>
<html>
<body>
<br>
<p>
<img src>
<h1><h2> etc
<a href>
<table><tr><td>

Designing the interface language UX.

2. CSS

Cascading Style sheets manage how the HTML is presented in the browser. W3Schools provides a good overview of CSS.

3. PHP

PHP is a programming language that allows web developers to program behind their web sites. We are going to use PHP to read in data from our customers on our e-commerce site and calculate their cart purchases.

4. MySQL

MySQL is a platform for online databases. When we have a customer access our website, all the data that will be presented on the website will be stored in a database.

ACTIVITIES: Using HTML, CSS and PHP

The document below entitled "A Wander through the WWW" takes you through six exercises:

1. an introduction to HTML which includes links tables and images.

2. Using CSS to format the HTML

3. Creating your first website with PHP

4. Using IF Statemensts in PHP

5. Using Loops in PHP

6. Creating a Calculator in PHP

VIDEOS FOR WEB SERVERS

PC XAMPP Instructions VIDEO

Mac XAMPP Instructions VIDEO

SETTING UP THE WEBSERVER ON A MAC

Open XAMP
Click "Start" and wait till the Status light turns green
Click "Volumes"
Click "Mount"
Open Finder - you should see 192.168.64.2 (The IP address of your web server) under "Locations" Click on it.
Open "lampp"
Open "htdocs" - this is the file directory where you will be storing your web site so it can be served to your browser via the XAMP web server.
Open Atom to create your first php file (File - New)
File - Save As allows you to save to "htdocs"
You should now be able to see your file in the "Project" section of Atom including the folders it is stored in.

When you load your php file into Chrome - you can click and drag - but you need to replace the address string with the IP address.

Example: /Users/YourName/.bitnami/stackman/machines/xampp/volumes/root/htdocs/MyfirstWebsite/index.php

Replace: /Users/YourName/.bitnami/stackman/machines/xampp/volumes/root/htdocs with 192.168.64.2

Correct Address: 192.168.64.2/MyFirstWebsite/index.php

SETTING UP THE WEBSERVER ON A PC

Open XAMP
Click the "Start" button next to "Apache"
Open Notepad++ or Atom to create a php file (File - New)
To save your php file so XAMP can load it (FIle - Save As) and navigate to:

Windows (C:) - xamp - htdocs

When you load your php file into Chrome you need to replace the address with "localhost"

Example: C:/xampp/htdocs/MyFirstWebsite/index.php

Replace: C:/xampp/htdocs/ with "localhost"

Correct Address: localhost/MyFirstWebsite/index.php

(So much easier! - just sayin')

Commercial Website Design and Development

Now we know how to make a web page, format it and do some basic calculations in PHP let's put it all together to make a commercial website for our product.

First we need to make some design decisions and in the example covered in the Commercial Website Development document below, you are going to make a basic e-commerce site for a company that sells tshirts with computer game designs. You can see it is very simple: A header with the name of the company "Games on Tees" and a cart that identifies the number of items in the cart. The main body of the website has a heading and a submit button with a table listing tshirts that can be selected by the customer. They can enter how many of each item they wish to buy. The second page displays the number of items in your cart and the total cost of the order.

Using Photoshop

It's important that we do some setting up in Photoshop to design our header or company logo and decide on colours. In this course we are going to keep web design to a minimum and limit our designs to ONE colour with black and white. We will use the single colour throughout our design to keep it looking cohesive. Below is a set of activities to introduce you to some basic Photoshop skills in the "Designing with Photoshop" document.

Developing a Model Site

You should now have a header and a cart icon as JPEGs in your computer. You can now start building your e-Commerce website. The document below has TWO exercises:

1. Building a basic website using PHP

2. Incorporating a MySQL Database (Extension)

For extra credit you might like to enhance your site beyond the scope of the provided model allowing new data to be entered into the database. Open the eCommerce Website Instructions below to start building your model.

Incorporating a Database

This is an extension activity where you can place all your product data into a database and have it retrieved using PHP. Firstly, you need to set up a database using MySQL. You click on Admin in XAMP and it will open an interface called PHPMyAdmin. This is where we design a basic database to store your product information as well as images. We use a LOOP to read each record in the table and display it in a table on the page.

Below is the coding for a website that reads the product information from the database as well as how to set up the database in PHPMyAdmin.

ONLINE VIDEO RESOURCES