Sunday, October 5, 2014

Server Side Includes

I have a fantastic group of students in my afternoon Advanced Topics in Information Technology class this year.  Its been a long time since I've had a group with this level of skill, self-motivation, and interest.  It is going to be a fun year!

Two students are studying web page design.  They have already completed both the GDW HTML and GDW CSS tutorials, and now they are working on projects to apply what they have learned to their own website.  One of the two students, Jack, has been working on a menu bar that highlights the current page using CSS.  This led us to a discussion of the need to be able to dynamically include standard parts your website (headers, footers, etc.) across multiple pages, so that changes to these cross page components can be made in only one place. This was a great time to introduce the DRY principal in software development.

Another student in the class, Sam, who is studying The C Programming Language this semester, is also interested in system administration, and on overhearing Jack and me discussing the problem, pointed out Server Side Includes to us. I'm surprised that I've never heard of this technology before, since it provides just the kind of solution I'm looking for in terms of motivating a deeper understanding of web technologies step-by-step.  I don't want to jump into a Python web framework (even a micro framework like bottle) at this point.  I'm not a fan of PHP, though I realize that it is not a bad fit for what I'm looking for. SSI looks to be better.

Sam volunteered to explore setting up and documenting SSI.  I told him to setup an Ubuntu server with VirtualBox.  He will be delayed in doing that because he only has 32 bit Ubuntu on his laptop, so while we wait for Sam to reinstall with 64 bit Ubuntu this weekend, I decided to go ahead and document as much of this process as I could.

Setting Up Ubuntu Server in VirtualBox

Here is a screen shot showing the first stage of the Ubuntu server setup using VirtualBox:


I used 1 Gig of RAM and a 20 Gig virtual hard drive (the first option in the menu of virtual hard drive choices, VDI). I then changed the network setting to use a "Bridged Adapter", which gives the virtual machine its own network address on the host network, instead of putting it behind NAT on a 10.x.x.x. network. This makes it easy for me to ssh into the virtual server from my desktop, and for others (students, say, in a classroom setting), to ssh into it from their machines.

During the installation of Ubuntu Server, the only software package option I picked was "Open SSH Server".  I plan to install everything else I want piece by piece.

The next task is to install apache on the server:
$ sudo aptitude install apache2
As soon as that completes, I can point the browser from my desktop at the IP address of the server running inside a virtual machine that it is hosting (I don't care how many times I've done this, I always think it is cool! ;-)


 
My host machine (desktop) in this case has IP address 192.168.1.4, and the server running inside the virtualbox has IP address 192.168.1.11, so my the browser running on my desktop is connecting to the web server running on the virtual machine.

Enabling SSI

Now to get server side includes working, I followed Sam's instructions:
# a2enmod userdir
# a2enmod include
# vi /etc/apache2/mods-availiable/userdir.conf
   change "IncludesNoExec" to "Includes"
# vi /etc/apache2/mods-available/dir.conf
   add "index.shtml" (immediately after "DirectoryIndex"
     and before "index.html")
# service apache2 restart
We now have user local directories and SSI enabled (we hope ;-).  Let's try it out. I created a public_html subdirectory in my home directory, and put two files in it, index.shtml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SSI Test Page</title>
</head>
<body>
<h1>SSI Test Page</h1>

<!--#include file="success_message.inc" -->

</body>
</html>
and success_message.inc:
<p>
If you are reading this message, SSI is working... Yeah!
</p>
Now I point my web browser at: 192.168.1.11/~jelkner and:

One last thing to note is that the SSI_PSPserver.vdi virtual hard drive file can easily be copied from machine to machine, bringing all the setup with it.

I talked to Sam about what my educational motivation was for wanting to use SSI.  He quoted Nietzsche on his blog post for that day to let me know he totally understood what I was getting at:
"He who would learn to fly one day must first learn to stand and walk and run and climb and dance; one cannot fly into flying."
-Friedrich Nietzsche
I'll say it again, this is going to be a fun year!