Difference between revisions of "Week One (MGDP2060)"
From Wiki @ Karl Jones dot com
Karl Jones (Talk | contribs) (x) |
Karl Jones (Talk | contribs) |
||
Line 23: | Line 23: | ||
* Fix the Apache HTTP Server configuration | * Fix the Apache HTTP Server configuration | ||
** Revert to default setting | ** Revert to default setting | ||
− | * Browse http://localhost | + | * Browse '''http://localhost''' |
* Observe that there are no files in the web server root folder | * Observe that there are no files in the web server root folder | ||
* Download the Bootstrap files | * Download the Bootstrap files | ||
** [[http://getbootstrap.com/getting-started/#download http://getbootstrap.com/getting-started/#download]] | ** [[http://getbootstrap.com/getting-started/#download http://getbootstrap.com/getting-started/#download]] | ||
− | ** Put the folder containing the Bootstrap files into your [[htdocs folder]] | + | ** Put the folder containing the Bootstrap files into your [[XAMPP htdocs|htdocs folder]] |
− | * In your root folder, create a new document named index.html | + | * In your root folder, create a new document named '''index.html''' |
* See the [http://getbootstrap.com/getting-started/ Basic HTML template] | * See the [http://getbootstrap.com/getting-started/ Basic HTML template] | ||
] | ] | ||
Line 35: | Line 35: | ||
** Enter your name, "Home page", and other text content of your choice | ** Enter your name, "Home page", and other text content of your choice | ||
** Be creative, your choice of font, colors, etc. | ** Be creative, your choice of font, colors, etc. | ||
− | * Browse | + | * Browse '''http://localhost''' |
** Confirm that your Bootstrap page displays correctly | ** Confirm that your Bootstrap page displays correctly | ||
− | * Change the name of your home page file from index.html to index.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 | * Refresh the browser, observe that the page looks the same | ||
− | * Somewhere in the body section of index.php, enter this code: | + | * Somewhere in the body section of '''index.php''', enter this code: |
<pre> | <pre> | ||
Line 59: | Line 59: | ||
== Finishing up == | == Finishing up == | ||
− | * At the end of your session at the workstation, copy the | + | * 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 | ** Workstation files are wiped overnight | ||
− | ** Next week, copy files from your jump drive to the workstation | + | ** 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 == | == See also == | ||
* [[Web Design and Development III (MGDP2060)]] | * [[Web Design and Development III (MGDP2060)]] |
Revision as of 20:18, 27 August 2015
This article lists topics for week one of Web Design and Development III (MGDP2060).
Topics
Review:
New topics:
- XAMPP
- Getting started with XAMPP
- Bootstrap (framework)
- Getting started with Bootstrap
- PHP
- Getting started with PHP
Week one exercises
- 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
- Download the Bootstrap files
- [http://getbootstrap.com/getting-started/#download]
- Put the folder containing the Bootstrap files into your htdocs folder
- 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
- Change the name of your home page file from index.html to index.php
- Refresh the browser, observe that the page looks the same
- Somewhere in the body section of index.php, enter this code:
<?php ?>
- Update the PHP to look like this:
<?php echo "<h1>Hello World</h1>" ?>
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