Week One (MGDP2060)

This article lists topics for week one of Web Design and Development III (MGDP2060).

Topics

Review:

• HTML
• Cascading Style Sheets
• JavaScript

New topics:

• XAMPP
• Getting started with XAMPP
• Bootstrap (framework)
• Getting started with Bootstrap
• PHP
• Getting started with PHP

Week one exercises

XAMPP

• Run XAMPP
• Fix the Apache HTTP Server configuration
  • Revert to default setting
• Browse http://localhost
• Observe that there are no files in the web server root folder

Boostrap

• Download the Bootstrap files
  • [http://getbootstrap.com/getting-started/#download]
  • Put the folder containing the Bootstrap files into your htdocs folder
  • This folder is also known as your web root folder, or simply root folder

Home page

• In your root folder, create a new document named index.html
• See the Basic HTML template
  • Edit the HTML to reference your local Bootstrap files
  • Enter your name, "Home page", and other text content of your choice
  • Be creative, your choice of font, colors, etc.
• Browse http://localhost
  • Confirm that your Bootstrap page displays correctly

PHP

• Change the name of your home page file from index.html to index.php
• Refresh the browser, observe that the page looks the same
  • This demonstrates that a PHP page behaves exactly like a static web page.

PHP code island

Somewhere in the body section of index.php, enter this code:

<?php

?>

The above code is a PHP code island, or code block, made up of a start marker and an end marker

• Only PHP code (and whitespace) may go inside the markers
• The markers, and enclosed code, are separate from the HTML
  • The user will never see the code markers, nor the PHP code
• The server processes the markers, and any enclosed PHP code, before sending a response to the user

PHP echo statement

Use the PHP echo statement to generate output in the HTTP response stream.

Change the code island to this:

<?php
echo "<h1>Hello World</h1>"
?>

Browse http://localhost.

• Observe that the web page displays "Hello World", formatted with an H1 element
• Try changing the text inside the quotation marks, to display different text and different tags

Hello World

This is an example of a Hello World program -- the simplest of programs, generating some expected output, to prove that we can do that much.

In a real PHP program, there is no need to use the echo statement to display "Hello World".

If we want the web page to display "Hello World" for every user, every time the page is loaded, we could (and probably should) use HTML, and not the echo statement.

Dynamic content

The proper use of echo is for displaying dynamic content, which changes depending upon certain conditions.

Examples:

• Display the time (changes every time the user refreshes the page)
• Display results of user submitting web form
  • "Thank you for your order", etc.
• Display either:
  • A login form (if the user is not logged in), or
  • The user's name, menu of options, email inbox, etc. (if the user is logged in)

Finishing up

• At the end of your session at the workstation, copy your working files (the htdocs folder) to your jump drive, or other external storage device
  • Workstation files are wiped overnight
  • Next week, copy files from your jump drive to the workstation, to continue your work
  • You may also copy the files to another computer with XAMPP installed, and work there

See also

• Web Design and Development III (MGDP2060)