Week One (MGDP2060)
This article lists topics for week one of Web Design and Development III (MGDP2060).
Contents
Topics
Review:
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.
Browse http://localhost.
Observe that the web page appears unchanged.
Use the browser's View Source feature, or the Inspect Element.
Note that the PHP code island does not appear in the source code.
This is a trivial example, with no actual PHP code.
Rules of PHP code
- Only PHP code (and whitespace) is permitted inside the markers
- The markers, and enclosed code, are separate from the HTML
- The server processes the markers, and any enclosed PHP code, before sending a response to the user
- The user will never see the code markers, nor the PHP code
- The PHP code may generate text which is sent to the user as part of the [[HTTP response stream]
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
Reading for next week
Read -- or at least skim -- the first three chapters of WordPress: The Missing Manual for next week.
You do not need to memorize anything, or have this information at the tip of your tongue, but you should have some familiarity with the subject matter.
