CGS 2820C Web Development
Extra Credit: Include files and Server-Side scripting languages such as ASP and PHP. 30 points maximum.
Description: JavaScript
(for Slideshows, Pop-up messages, Date displays, and Swap images...) uses Client
Side scripts to
allow Dynamic Interaction on the
local Client computer.
PHP (.php), ASP (.asp or .aspx), and Cold Fusion (.cfm) are Server-Side scripting languages for
Dynamically created Webpages on a Web server. You can view .htm and .js files locally. However, you cannot view .php, .cfm,
or .aspx files locally without special software installed on your computer.
W3Schools PHP Intro:
W3Schools PHP Intro 2:
W3Schools PHP Syntax tutorial:
W3Schools PHP Comments tutorial:
W3Schools PHP Echo tutorial:
Note: WordPress is written in Php. So, if you did your last assignments in WordPress, you will not be able to get extra credit for this Php assignment unless you work with your original HTML files. You can rename your original index.htm to home.php (index.php is a WordPress file) and then convert your original HTML pages and Navigation links to PHP, as discussed below.
Include file: A server-side file that can
be "included" in multiple web pages, so if the
external include file is
modified, all of the other web pages that contain the include link are also
immediately modified. An example might be an include Footer with your contact
email, phone, and a Last Modified Date script - one file that works on all pages. Another example may be an include Nav
bar, so that if you add a link to the Nav include file, all the other pages will
immediately have access to it through their <nav> element.
Sample code added to the <body> tag for the Include Nav bar: <?php include ("nav.php"); ?>
Let's assume you have a webpage named newsletter.php.
And assume that newsletter.php has a single line of php code to call an include file called nav.php.
If you right-click the webpage in a browser and view the source code online for newsletter.php:
* all the php code from both files would be converted to HTML code, and
* both files would be combined,
* it would appear as if they were one seamless HTML file, instead of two separate files (newsletter.php and nav.php).
* but you will not see the php include line that was added to newsletter.php
So you do not risk messing up your current site, and to see how server side Include files work:
Make a new folder called /php,
copy all of your
HTML files there and follow the directions below.
PHP Tutorials below
Interactive W3Schools PHP Tutorials
Download XAMPP for PHP
X for Cross-Platform, A for Apache, M for MYSQL, and the Ps for PHP and Perl.
XAMPP helps a local host test its server-side script locally.
Note: You can view .htm and .js files locally on a "client" computer. However, you cannot view the results of .php, .asp, or .cfm, code locally without special software, such as XAMPP (cross-platform, Apache, MySQL, PHP and Perl) installed on your local or client computer.
If you open a web page with Include files in your browser and click View Source, the web server will convert all the include lines into pure HTML, so you will not see the php code or true local source code.
Suggestion/Directions:
1. Make a folder on your site called /php
Copy your image folder and all of your files to the new php folder.
Rename all copied html files from .htm to .php
2. Copy all your navigation code lines in index.php to a new page and save it as nav.php
Below is the sample of all the code in the new nav.php file:
<nav>
<a href="index.php">Home</a>
<a href="Resume.php">Resume</a>
<a href="PFolio.php">Portfolio</a>
<a href="Contact.php">Contact</a>
</nav>
3. Replace all your navigation code in index.php and resume.php... with
<?php include ("nav.php"); ?>
4. Upload your files to the php folder
5. Test by going to http://yourDomain/php/
6. Upload to the assignment dropbox the php URL: http://yourDomain/php/
DreamweaverCS4/Powers12PHPincludes.pdf
To see how to add an ASP Include file:
http://www.w3schools.com/asp/asp_incfiles.asp
<!--#include file ="somefilename"-->
See SamplesHTMLcode/IncludeFiles/
In Dreamweaver click Insert | Server-Side Include
Basic Include File Directions:
1. Create your Include File - for instance, if you are working in php, build a nav.php (I suggest you simply copy your Navigation code from your index.htm file and save those few lines in a separate file named nav.php)
2. Replace your navigation code in index.htm with one of the include calls below:
<?php include ("nav.php"); ?> : PHP
<!--#include file="nav.htm"--> : SHTML
<!--#include file ="nav.aspx"--> : ASP
<cfinclude template = "nav.cfm"> : Cold Fusion
3. Appropriately rename index.htm as index.php or index.shtml or index.cfm (in the end you will rename Contact.htm to Contact.php and replace your nav code with:
<?php include ("nav.php"); ?>
And then do the same for the new Resume.php, Portfolio.php...
(If you use any php code on a web page, you need a .php extension, and the same for .asp, .cfm...)
4. Typically, you cannot view server-side script files on the client (local machine) so you will probably have to upload your files to test them.
Up to 30 points
Criteria:
Relevant
Functional
Well laid out
Add at least two include files, such as header.php, nav.php, and footer.php
Below is a very short working PHP example to show today's date.
<?php
echo date("m-d-y");
?>
<?php
echo 'PHP Date Demo
';
echo date("m-d-y");
?>
See:
EW7_PhpDemo.php
EW7_PhpCalcDemo.php
EW7_PhpInputAndCalcDemo.php
<?php
$width = "60";
$height = "20";
echo "If Height=60px and Width=20px, then area is ";
echo "$width * $height px";
?>
You can install a PHP web server, go to
http://php.net/downloads.php
images [Dir]
contact.php
favicon.ico
index.php
nav.php
footer.php
portfolio.php
resume.php
yourSiteNameLayout.css