|
|
| (21 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
| + | |
| − | | + | |
| − | == See also ==
| + | |
| − | | + | |
| − | * [[Web Design and Development III (MGDP2060)]]
| + | |
