Server-side includes (SSI) with php

CSS lets you separate content and design

Wouldn't it be nice if we could separate content and navigation? We can by using the php 'include' statement.

Readings

Chapter 25

The php scripting language

php - the php hypertext pre-processor

PHP is a widely-used general-purpose scripting language that is especially suited for Web development and can be embedded into HTML.

--php.net

Pages written in php contain html markup, just like regular web pages, except that, before delivering the php page requested to the browser, the webserver will execute any php programming language statements which show up within the special <?...?> tag. (no closing tag). For example:

<span style="color:green">
<?
  print "Today is ". date("l");
?>
</span>

Resulting in

Today is Thursday

So, php let's you dynamically generate HTML markup in your web pages.

Centralizing navigation with include

We'll take advantage of a php command that let's you pull the contents of a file into the "source code" of your web page. Here's how you use the php include command to have the HTML markup in a file called "menu.h" inserted at a particular point in the source code of your web page...

<? include "menu.h"; ?>

If 'menu.h' includes nothing but this....

<p>
  <a href="index.html">HOME</a> | 
  <a href="about.html">About us</a> | ....
</p>

Then, we'll get a simple navigation menu showing up that looks like...

HOME | About us | ....

The magic happens when many pages in our site all use this means to pull in the same chunk of HTML that creates these links. Now...

All the page that 'include' this chunk are guaranteed to have the same menu of links
If we add a page later on, we only need to change the file 'menu.h' and all the pages in our site will automatically show the updated navigation menu.

Try it out...

The markup for the orange menu bar used in many GC pages is located at...

http://www.goshen.edu/a_navbar.htm

Try include-ing this URL in a page of your own!

Using php includes

php files must end in .php in order to be processed by the webserver.
php effects happen on the webserver, before the page is ever sent to the web browser, so using php is completely browser-independent. (As we'll shortly see, javascript is completely browser-dependent.)

As far as the chunk of html that you include is concerned:

It can have any extension you like.
Though, you might want to give all your chunks the same extension, like *.h so that when you look at your directory listings, you can tell which are full web pages and which are the fragments.
It should not be a fully formed web page. Usually the php page will have the overall web page framework tags (<body>, <head>, etc), and the included file should only be an html fragment.

Page templates

Many times you can think of the HTML markup for a typical page on your site as a sandwich:

There is tasty, unique filling (content) on a page, which is different from what's on any other page on the site, sandwiched between...
two "slices" (that is, "chunks") of ~~bread~~ markup which might be exactly the same for each page on your site.

When this is the case, we often talk about the first slice of markup as the "head" or "header", and the bottom slice as the "foot" or "footer".

Templates using the php 'include' command

The markup for a 'Sea Lion' page, except for the area where the content goes, has been concentrated into two chunks, and you can get such a page to appear on any php page that looks like this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<title>SSI: Server-Side Includes with php</title>
</head>
<link rel="stylesheet" type="text/css" 
 href="http://www.goshen.edu/communication/326/layout/peru/style.css" />
<body>
<? include "http://www.goshen.edu/communication/326/layout/peru/head.h"; ?>

<p>Your unique content goes here</p>

<? include "http://www.goshen.edu/communication/326/layout/peru/footer.h"; ?>
</body>
</html>

Try it by pasting this into a file, and saving as "[anything].php".

Templates: GC Blogs

The GC Blog system sandwiches your blog entries between two slices of markup which you can change

Choose edit entries/categories,
then Edit page templates.

Example: The GCMusic center gcmusiccenter.org uses the GCBlog system to drive its announcements section. Why?

Somebody who knows little or no HTML can put up the announcements by 'blogging'.
Somebody with little or no PhotoShop experience can upload photos using the blog interface and get photos/thumbnails at a standard size.
Even for folks who *do* know HTML and/or Photoshop it saves a lot of time.
You can easily set up a e-mail distribution list for the content of any GC Blog.
There's an RSS feed associated with each GCBlog.
It's possible (ask Paul) to set up a GCBlog such that several people can all blog to the same one. E.g. Men's Choir Tour 2007

To come up with the header and footer markup, you would...

First, design and build a web page, with your sample content in place.
Identify where the changing content begins and ends.
All the HTML before the changing content becomes the "header", and
all the HTML after the changing content becomes the "footer".

Other useful things with php

'Rotating' images

myphoto3.jpg

<?
$i = rand(1,5);
$thefile = "myphoto$i.jpg";
print "<p align='center'><b>$thefile</b></p>";
?>