homepage Welcome to WebmasterWorld Guest from 54.167.11.16
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / WebmasterWorld / New To Web Development
Forum Library, Charter, Moderators: brotherhood of lan & mack

New To Web Development Forum

    
How to consolidate multiple web pages?
What technique should I be using.
mfox




msg:4017776
 9:29 pm on Nov 2, 2009 (gmt 0)

Hi All,

I am near finishing my first website, using XHTML and CSS for my own self-business.

I am creating a section in the site about each staff member in our group.
There are 10 staff, and for each staff member, I want to have a seperate sections about themselves: ie bio, experience, contact details, etc - 6 categories in all. I want to use the same CSS styling, and don't want all categories on one page.

That would make it 60 potential pages!

Can someone advise me what technique its called where instead of having 60 pages, I can have just one file/text file for each staff member, and some scripting can draw from the text file to populate that categories from just one html file.

If someone can direct me in the right direction please?
Thank you
MFox

 

rocknbil




msg:4017859
 12:24 am on Nov 3, 2009 (gmt 0)

Welcome aboard mfox.

What I consider the "correct" way: Server Side Includes. I say this because this is what SSI is designed for, and there's no programming or scripting necessary.

Text file (mytext.txt):

First SSI test

HTML file:

In your HTML, add the following **if** the text file is in the same directory as the HTML file:

<!-- #include file="mytext.txt" -->

If the file is in a different directory as the text file, use the virtual command:

<!-- #include virtual="/employees/mytext.txt" -->

Save the HTML file with a .shtml extension. This is what tells the server to parse the file, looking for SSI directives.

Upload, load it up, see if it works, this will **not** work in an offline preview.

The more popular, more suggested way: PHP includes. PHP is a robust server-side programming language, and IMO while this will work, is overkill for a simple include. I can do the same thing with ASP and Perl, but I don't. SSI is the "right tool for the job."

<?php
include_once('/path/to/include.php');
?>

Save this file with a .php extension, upload it, see if it works.

mfox




msg:4017959
 4:19 am on Nov 3, 2009 (gmt 0)

Thanks RocknBil for starting me in the right path.

the SSI (Server Side Includes) method sounds the most straightforward.
Would this method allow me to have a text file based on one staff member(relating back to my example), and in the file I have seperate sections with text. Can I then setup links within the html page to import selected sections of text to display. I can therefore just have one html page and relies on links within to show different content.

Or is what i describe above, best used with PHP Include method. I will google both.

Many thanks,
Mfox

rocknbil




msg:4018444
 7:31 pm on Nov 3, 2009 (gmt 0)

Try it! :-)

Wherever you have an SSI directive, you add an include.

<html ..... (etc.)
<body>
<!-- #include virtual="/templates/header.txt" -->
<!-- #include virtual="/employees/jane-doe.txt" -->
<!-- #include virtual="/templates/footer.txt" -->
</body>
</html>

If you plan on incorporating robust dynamic content into your pages, start learning PHP/Perl/ASP. As an example, you could use solely PHP to extract the very info you speak from a database (and is a more common approach.) However, you can combine technologies if you have a reason to do so:

<html ..... (etc.)
<body>
<!-- #include virtual="/templates/header.txt" -->
<!-- #include virtual="/scripts/employees.php?e=1234" -->
<!-- #include virtual="/templates/footer.txt" -->
</body>
</html>

Would this method allow me to have a text file based on one staff member(relating back to my example), and in the file I have seperate sections with text.

Not following closely, but no, I don't think so - it includes the whole file. You can, however, show/hide sections of that text file with Javascript, like any other HTML document.

It sounds to me like what you should start looking at is learning PHP and connecting with a database, but there's a bit of a learning curve there. For a quick one off, 60 plain text files and SSI's will get the job done.

mfox




msg:4018648
 12:24 am on Nov 4, 2009 (gmt 0)

Hi RB
Thanks once again
Definitely sounds like SSI is the way to go in the short term, while I get my head around php.

If I just want to stick with once language - I think I'll slowly start learning php.
What sort of keywords can I get in google to find about what I want to do: is it just: "php dynamic content"

Thanks
Mfox

rocknbil




msg:4018711
 2:11 am on Nov 4, 2009 (gmt 0)

I'm sorry, where are my manners. LOL That search will likely bring you the web sites of every PHP coder on the 'net.

Start here [w3schools.com], Simple and short tutorials, they discuss PHP includes there.
The whole PHP manual [php.net]

FYI, there are many things you can do with SSI besides simple includes: tutorial [httpd.apache.org] and full manual [httpd.apache.org].

mfox




msg:4019284
 10:02 pm on Nov 4, 2009 (gmt 0)

Rocnbil
Thanks for the directions.
I think SSI will be the way, however, in theory:

Say for my example:
I have 1 html page per staff member.
I want to display a certain text file on that page, depending on which link is selected from a small navigation bar with the titles: 1. Personal details, 2. Biography, 3. Experience
So still keeping 1 html page, rather than 3 seperates ones.

The text will be displayed in a <div> section.
The links will rely upon 3 seperates text files ie staffA_personal.txt, staffA_bio.txt, and staffA_experience.txt to import the text into that div.

Is that possible with SSI?

Sorry to persist with questions
MFox

rocknbil




msg:4019409
 3:11 am on Nov 5, 2009 (gmt 0)

Well, "it depends." :-)

It depends, mostly, on the overall maintenance and what is easiest for the skills available. A PHP coder would say do it in PHP, a Javascript coder good at jQuery would say to use that, personally, I'd have this data in a database and output it using Perl or PHP.

In your case, depends on what you pick up fastest.

The previous examples were just for ideas, in thinking it through (the samples are backwards,) if I were limited to using SSI's, I'd probably approach it like this.

File 1 is "header.txt"

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Employee Profile/title>
<link rel="stylesheet" type="text/css" href="/your-css.css">
<script type="text/javascript" src="/employee-divs.js"></script>
</head>
<body>

(put your page header and main navigation here)
<ul>
<li><a href="#" onClick="return openDiv('personal');">Personal Details</a></li>
<li><a href="#" onClick="return openDiv('bio');">Biography</a></li>
<li><a href="#" onClick="return openDiv('experience');">Experience</a></li>
</ul>

Watch that reference to the .js file, it becomes important in a bit.

file 2 is "footer.txt"

(put your foot info and navigation here )

</body>
</html>

jane-doe.shtml

Your typical employee file is everything between, with the SSI directives.

<!-- #include virtual="/header.txt" -->

<div id="personal">
<h3>Personal Information</h3>
<p>This is the personal information area, bla blah.</p>
</div>

<div id="bio">
<h3>Biography</h3>
<p>This is the biography area, bla blah.</p>
</div>

<div id="experience">
<h3>Experience</h3>
<p>This is the experience area, bla blah.</p>
</div>

<!-- #include virtual="/footer.txt" -->

your-css.css

Your CSS should initially set the div you want on page load as visible (which means you don't have to do anything at all,) the others set the display property to none. Don't set it to invisible, as the div will still "take up space." You want to set the display to none.

#bio, #experience { display: none; }

We don't need to do anything for "personal" as it displays block by default and will be visible (re-arrange these as required.)

employee-divs.js

The Javascript file has only a little JS - try show hide div site:webmasterworld.com in Google for many good samples on this site. The code I'm typing should work, might need some debugging. :-)


function openDiv(divID) {
allDivs=Array('personal','bio','experience');
for (i=0;i<allDivs.length;i++) {
var thisDiv=allDivs[j];
if (document.getElementById(thisDiv)) {
document.getElementById(thisDiv).style.display=
(thisDiv==divID)?'block':'none';
}
}
return false;
}

WHOAH! What is THAT. :-) A short analysis,

When you click the link,

<a href="#" onClick="return openDiv('personal');">

You are passing the string "personal" to the function openDiv(). This is the "handle" of the id of the target div in the link. That value is stored in the variable "divID" and is used in the function.

function openDiv(divID) {

The next line creates a "list" of the id's in the document called an array, which we have named "allDivs".

allDivs=Array('personal','bio','experience');

Arrays are zero-based, meaning, the first item in the array has an index of zero, the next 1, and so on. So referencing these by index,

allDivs[ 0 ] is personal
allDivs[ 1 ] is bio
allDivs[ 2 ] is experience

The next line is a for loop. It starts at zero and goes to one less than the total length of the array ( <, "less than," 3, is 2). So it iterates through each item of the array. The j++ sets the increment of the iteration to one. For example, if we had a really long array (list) and wanted to get every fifth one, we could increment by 5: j+=5.

for (j=0;j<allDivs.length;j++) {

The next line is really just to keep from creating wide lines in this post. I take the value of allDivs[j], whatever "j" is as it loops through the array, and store it in a new variable, thisDiv:

var thisDiv=allDivs[j];

The next line tests for the existence of the element in the document and is good coding practice. Testing for it first prevents unnecessary Javascript errors. So if the element exists in the document, we execute the code between the if brackets. {}

if (document.getElementById(thisDiv)) {

The next two lines are called "short circuit evaluation." It is an "if/else" construct, meaning, if (condition) is true, store the first value in the variable or object on the left of the equal sign, otherwise, store the second value in it.

In this case, what's on the left is the Javascript that sets the style for the div.

document.getElementById(thisDiv).style.display=
(thisDiv==divID)?'block':'none';

Remember we passed the string of the div ID onClick? What this says is, "if the current div in our loop is the same div as what's passed into the function, set the style of that div's display to block, otherwise, set the style of the div's display to none."

The next two "curlies" close the "if" and the "for" loop blocks:

}
}

The next line returns false from the function. This is important - when you click a link, the natural action of the browser is to navigate to that link. Return false tells the browser to ignore that and let Javascript manage it. This stops that annoying "scroll to top" effect in an empty link.

return false;

Last one closes the entire function.

}

So what you would do is get this set up for a single test. All of the above should work "as is" but the potential exists I have errors you'll need to work out. (End of a really long day here.) Drop the test text into files like I've specified, upload it to your server, and test. This is also important - server side includes execute only on a server and will not work on your local machine, offline. A side note, I hope you don't have a windows server - but SSI's will work on those as well, it's just a little different.

Once you get it working, you'd use "jane-doe.txt" as a "template" for all your employees.

Any changes you make to header or footer files immediately apply to all pages.

If you have, say one employee that only has "experience" and no bio or personal info - no worry, just leave them out. Remember this?

if (document.getElementById(thisDiv)) {

... will prevent Javascript errors.

The down side, of course, is that the user will be confused by clicking and seeing a blank screen. Probably better to put

<div id="bio">
<h3>Biography</h3>
<p>Jane Doe has not yet provided a biography. Either that or she spontaneously appeared at her desk yesterday and doesn't have one.</p>
</div>

[edited by: rocknbil at 3:25 am (utc) on Nov. 5, 2009]

mfox




msg:4019412
 3:19 am on Nov 5, 2009 (gmt 0)

OMG Rocknbill,

! you didn't have to go to this extent to code some javascript. I am very grateful. I have no experience with JS, but because of your time and effort, will endeavour to try the example you suggested. Thanks for the shtml, and css guides as well.
Give me a week and I'll get back to you, and show you what I've learned!
Thanks
MFox

rocknbil




msg:4019414
 3:21 am on Nov 5, 2009 (gmt 0)

In sharing, I learn. I owe much more to this site than I can every pay back. :-P

mfox




msg:4029454
 11:26 pm on Nov 21, 2009 (gmt 0)

RockNBil

I said I'll get back to you, I used your recommendations and got it working. With that, I've also read up about php and the switch command and thinking that maybe the next lesson I will take

Many thanks
Mfox

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / New To Web Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved