Modularize My Website

January 25, 2005 3:23 PM

I want to make my website more modular and easier to update. I have no CMS ability, and no interest in frames What I want is to have something like "index.html" look into some other text or HTML file and load up and display the information (Text, HTML, CSS divs, Links).
As an example I want to have one central text file that saves the banner and navigation buttons of the site so that I only have to update that one file to make site-wide changes.
To me this is somewhat like frames (but not passe) and like an array (I use one Java array to display images) but I want to display code etc. I haven't been able to tinker with it and make it work, and, though I'm asking for it, it doesn't seem to be on google. Anyone?
posted by Napierzaza to Computers & Internet (19 answers total)

The basic concept you're looking for is called "include files", which is a pretty common mechanism in coding. The idea is that you take a commonly-used fragment of code, store it in its own file, and then reference (or "include") that partial file anywhere you need the common chunk. You change the central "include" file, and voila...universal update.

There are several different ways to actually implement it, depending on the platform you're using, but the most common and straightforward way for websites is "server-side includes". Try googling on that, and you should get a _ton_ of explanations for how to do it.
posted by LairBob at 3:38 PM on January 25, 2005

OK, OK...here are a couple of links:

- "Straight" SSI commands
- using PHP
- Using ASP.NET
posted by LairBob at 3:46 PM on January 25, 2005

I am working on the same thing right this minute. I've decided to go with Javascript includes since they are the most basic method and don't require knowledge of languages like PHP or the use of a CMS.
posted by lychee at 4:19 PM on January 25, 2005

don't require knowledge of languages like PHP or the use of a CMS.

Server-Side Includes don't require ANY knowledge of PHP. Literally, you just name your meu "menu.html" (or whatever) and each of your pages "page1.php," "page2.php," "page3.php," etc. In each of those pages, you pop in the include code, which is a line of pre-written code, and it pulls in menu.html. Easy peasy. Then, if you need to add a page to the menu, all you do is add that link to menu.html.
posted by Alt F4 at 5:09 PM on January 25, 2005

Response by poster: No server side stuff BTW.
posted by Napierzaza at 5:41 PM on January 25, 2005

If you can't use server-side stuff like SSI includes or PHP, then you're going to be stuck with doing something in a web IDE like Dreamweaver. Here, the keyword is 'Templates'.
posted by SpecialK at 6:10 PM on January 25, 2005

Napierzaza it's called server side includes because the file is included into the page on the server side unlike frames where the file shows up on the same page in the browser. It is in fact exactly what you are asking for. Talk to your webhost to figure out if they support SSI (it's a rather basic feature), you just need to name your file index.shtml etc usually, but your host can make it so that .HTML files can load SSI too.
posted by riffola at 6:42 PM on January 25, 2005

Yeah, Napierzaza--don't mistake the name for some kind of complicated technology. You just write your files, and post them to the server, like always. The only thing that changes is how you write the HTML code inside those files.
posted by LairBob at 8:34 PM on January 25, 2005

Response by poster: I mean my ISP doesn't provide me with anything.
posted by Napierzaza at 9:09 PM on January 25, 2005

Whose your ISP?

Any decent hosting provider will allow includes and relative to root linking (which is also a large factor in includes for any sort of anchors.)

Having said that I've had clients who have had me develop sites for them only to discover that their ISP requires images in a folder on a different server, with the root of the site being three folders up and four sideways, etc.

I always have them switch ISPs. It's not worth it to jump through hoops when you get basic and fundamental functionality (if that is indeed a word) elsewhere. I realize, however, that this is not always an option.
posted by juiceCake at 11:14 PM on January 25, 2005

You obviously have the ability to have more than one file on the server, or you wouldn't have the problem you do.

Can you name files whatever you want?

Can you put whatever text you want in those files?

If so, I believe you can, at a minimum, do javascript includes. This gives you info on how to include a javascript file into any webpage. In the javascript file itself, you would have to have an object that contains the html code you want for your header. Then, in each webpage that includes that file, you would need to call a function that would write that object to the screen. Whenever you need to change your header, you only need to change the content of the object in the javascript file. There are better solutions, but this one requires almost nothing in support from your ISP.

Sorry I'm not providing more detail, but my web skills are a bit rusty. Reply if you need more help.
posted by EatenByAGrue at 11:28 PM on January 25, 2005

BTW, the reason why this works when those other suggestions don't is because javascript, unlike, e.g., PHP, is executed by your browser, not the server.
posted by EatenByAGrue at 11:33 PM on January 25, 2005

Searching around some more on google finds this site. Hopefully, the instructions there should be clear enough for you to do what you want.
posted by EatenByAGrue at 11:38 PM on January 25, 2005

And crap, I just saw that lychee is way ahead of me. Better reference too. Anyway, my arguments as to why you can use this method are still valid.
posted by EatenByAGrue at 11:42 PM on January 25, 2005

While the Javascript method is valid it seems a little cumbersome. Again, any decent web server will easily support straight SSI commands. Furthermore, you don't have to worry about browsers with disabled JavaScript.

I use this method:

< !--#include virtual="/ssi/main_menu.ssi" -->

Wher main_menu.ssi is simply some HTML code. No need to build the HTML in JavaScript. You service providers web server should support this method. Often the difficulty is in the extension, which may not be set. Usually it's .shtml.

Of course none of us are trying to dictate. Use what you can and wish. The more information the better. Web development is all about compromises.
posted by juiceCake at 7:44 AM on January 26, 2005

Response by poster: I wanted to have includes of text paragraphs. So if I ever say "I've" or "I'm" I can's use the includes.

Is there a work-around for this ? Seems like maybe it would end up making things complex in a different way.
posted by Napierzaza at 7:51 AM on January 26, 2005

Why can't you use the includes if you use I've or I'm in a paragraph of text? I do it all the time using the method above.
posted by juiceCake at 8:12 AM on January 26, 2005

Response by poster: I'm pretty sure it closes the quotes for the header= 'XXX\n'

I may try testing it again. I wish there was a way to get around copying and pasting heard +=' ' each line.
posted by Napierzaza at 8:45 AM on January 26, 2005

To us a single quite you need to escape it using...

\'

header = 'I\'ve decided I can\'t do that'

Should work.
posted by ModestyBCatt at 8:54 AM on January 26, 2005