I have recently taken over as a volunteer webmaster for this website:
http://www.ewh.ieee.org/r1/schenectady/newsletter.html

Under the "Schenectady Section News" heading, you can see that there are a bunch of simple pages that all look the same. The current process to add a new one is to copy and paste an old one and modify the text. This seems to violate the principle of "never duplicate code". I was hoping for something more like a "shell" which contains the header etc, that I can point to something like an xml file:

Shell:

<html>
<body>
... all other header stuff...

Place <titletag> here (see below)

Place <contenttag> here (also see below)

</html>

One content example:

<titletag>
Title goes here
</titletag>

<contenttag>
Content goes here
</contenttag>

Can anyone suggest an easy way to do this? I'd be willing to learn a "complicated" way, but this needs to be transferable to the next volunteer, who may not be so willing :)

Thanks!

David

I have recently taken over as a volunteer webmaster for this website:
http://www.ewh.ieee.org/r1/schenectady/newsletter.html

Under the "Schenectady Section News" heading, you can see that there are a bunch of simple pages that all look the same. The current process to add a new one is to copy and paste an old one and modify the text. This seems to violate the principle of "never duplicate code". I was hoping for something more like a "shell" which contains the header etc, that I can point to something like an xml file:

Shell:

<html>
<body>
... all other header stuff...

Place <titletag> here (see below)

Place <contenttag> here (also see below)

</html>

One content example:

<titletag>
Title goes here
</titletag>

<contenttag>
Content goes here
</contenttag>

Can anyone suggest an easy way to do this? I'd be willing to learn a "complicated" way, but this needs to be transferable to the next volunteer, who may not be so willing :)

Thanks!

David

Hi David,

Yes, you definitely can do that, and the way to do it depends which server language and database you have available.

Highly likely you have php installed, so I'll explain you the php way, but this can most definitely be done on other platforms too. My explanation below will talk about php/mysql way of doing it.


For easier understanding, I'll split the process in two phases. First one is simple and you can do it quickly, and the second one demands a bit more programming, and depending how high you shoot can take anywhere from little to very much time.

phase I: using includes

The principle is, create repetitive code (header, footer, menu...) just once, and then include it with a simple 1 line call to any page that uses it.

1. If you have php installed, the first step is that all your files get .php extension instead of .html which they have now (and of course change links from .html to .php).

This doesn't go for menu links, as they will be changed automatically once we finish.

2. Now, put repetitive code chucks (header, footer...) into separate files, and save them as header.php, footer.php etc. Save these to the same place where your pages are.

These files will too contain just html, nothing else.

The only thing we've done by switching to .php extension is allowing our pages to execute some php code, which is really simple as you'll see...really really simple.

3. Now, the sweet part. When you create a new page (and remember to always make it php)
on any place where you want to include some repetitive code, you simply type this:

<?php include 'filename.php'; ?>

and all the code from filename.php will be inserted in that place as if you typed it. But you typed just once. And can also easily change anything site-wide by just editing single file.


phase II: shell, as you named it. Yes, that is possible too, but will include involving database into whole story, and is not a one post thing. I'll just show you the concept here. Let me quote your proposal:

<titletag>
Title goes here
</titletag>

<contenttag>
Content goes here
</contenttag>

Yes, it can be done, and it would be done something like this:

...here is the php code that pulls appropriate text from database depending
on which page user is on...

Once pulled, data from database can be used, for example like this

<title><?php echo $title; ?></title>

This will instruct php to output the content of $title variable between your plain html title tags. So you write your entire site's "shell" just once, and then feed it with database content, and it creates pages on the fly, that look and act like you've hard coded them, and probably better (no typos:))


PS. having database also assumes you'll have a way to input data into it, which brings us to area of CMS (content management system)...shortly, a lot of work.

So if first solution does it for you (includes) you can use it right away, it's really simple - if not, think about migrating the whole site to some existing content management system.

Or if you have affinity towards programming (and a lot of time) - go ahead and make your own.

Wow..this was a long post, hope something useful in it:)

commented: Thanks for the detailed reply! +4

Cool&Awesome,

Thanks for the detailed reply!

With this second method, is it necessary to use an actual database? Is there no way to pull these things from a file? Something like:

<title><?php get contents of title tag from somefile.php ?></title>

?

If not, I'll just stick with the first method you suggested.

David

Not really.

But i just got inspiration - if writing an xml file is good enough for you, a script can be made to read it's content and output it to html page. That is feasible.

I think that was what you looked for in the first place, but using database is so common that it first came to my mind:)

I don't believe php is enabled on my webserver. Is there a way to do this without php?

Hi David

You can actually do this without php as wellby using java script and include everything with a single line of code on each new page you are creating.

All you do, is to create a seperate file, with the css and html in it as javascript, and then use include to link to it.

A good explanation on the how to, you will find here.

Let us know how you doing, and if there is something you not understand.