|
|
(20 intermediate revisions by 2 users not shown) |
Line 1: |
Line 1: |
− | This article lists topics for week one of [[Web Design and Development III (MGDP2060)]]. | + | This article lists topics for '''Week One''' of [[Web Design and Development III (MGDP2060)]]. |
| | | |
− | == Topics ==
| + | Next: [[Week Two (MGDP2060)]] |
| | | |
− | Review:
| + | == Introduction to MGDP2060 == |
| | | |
− | * [[HTML]]
| + | Introductory topics: |
− | * [[Cascading Style Sheets]]
| + | |
− | * [[JavaScript]]
| + | |
| | | |
− | New topics:
| + | * [[Calendar (MGDP2060)]] |
| + | * [[Course summary (MGDP2060)]] |
| + | * [[Class structure (MGDP2060)]] |
| + | * [[Requirements (MGDP2060)]] |
| + | * [[Web hosting service (MGDP2060)]] |
| + | * [[Resources (MGDP2060)]] |
| | | |
− | * [[XAMPP]]
| + | Lecture topics: |
− | * [[Getting started with XAMPP]]
| + | |
− | * [[Bootstrap (framework)]]
| + | |
− | * [[Getting started with Bootstrap]]
| + | |
− | * [[PHP]]
| + | |
− | * [[Getting started with PHP]]
| + | |
| | | |
− | == Week one exercises ==
| + | * [[WordPress]] |
| | | |
− | === XAMPP === | + | == Exercises and reading == |
| | | |
− | * Run XAMPP
| + | See [[Week One Exercises (MGDP2060)]]. |
− | * 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 ===
| + | [[Category:Web Design and Development III (MGDP2060)]] |
− | | + | |
− | * Download the Bootstrap files
| + | |
− | ** [[http://getbootstrap.com/getting-started/#download http://getbootstrap.com/getting-started/#download]]
| + | |
− | ** Put the folder containing the Bootstrap files into your [[XAMPP htdocs|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 [http://getbootstrap.com/getting-started/ 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:
| + | |
− | | + | |
− | <pre>
| + | |
− | <?php
| + | |
− | | + | |
− | ?>
| + | |
− | </pre>
| + | |
− | | + | |
− | 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:
| + | |
− | | + | |
− | <pre>
| + | |
− | <?php
| + | |
− | echo "<h1>Hello World</h1>"
| + | |
− | ?>
| + | |
− | </pre>
| + | |
− | | + | |
− | 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.
| + | |
− | | + | |
− | | + | |
− | == See also ==
| + | |
− | | + | |
− | * [[Web Design and Development III (MGDP2060)]]
| + | |