Forum Moderators: open

Message Too Old, No Replies

Good Site Design

         

th1chsn

9:09 pm on Jan 5, 2004 (gmt 0)

10+ Year Member



Hello, is it smart to design a site where the pages are referencing other files to determine the design and layout of the site?

For example, in reviewing a site I notice that each page is calling this page

require("common.inc.php");

which in turn pulls in other files that check database settings, connectivity, functions, and a file that lists the html for each page.

So in essence the web page is built on the fly. The header is pulled in at the top, the footer at the bottom, navbar, etc.

Thanks.

bcolflesh

9:12 pm on Jan 5, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



is it smart

Yes!

benihana

9:13 pm on Jan 5, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



yes its quite a comon technique.

th1chsn

9:26 pm on Jan 5, 2004 (gmt 0)

10+ Year Member



So then in each page I reference the file that contains the template. What kind of code do I have to put in that template file that will input each html file with the actual text?

divaone

12:14 am on Jan 6, 2004 (gmt 0)

10+ Year Member



virtually anything you want... html, js, php coding, etc. for example, create a file called menu.inc (or menu.inc.php or menu.php) and place your menu contents in it, or date.inc and place a php script that prints out the current date. if different areas of your site use different templates, name and call the included files accordingly. imo, it works well for keeping your site files organized.

IeuanJ

9:37 am on Jan 6, 2004 (gmt 0)

10+ Year Member



The idea is that you put common code in there. For example if you want the same footer on each page containing copyright info, contact me links etc. You would take that code and put it in a seperate file. Now link to this file from the original (and an infinate number of others) and when it comes to updating that section you only need to do it in one place.

If you're talking about a site with dynamic content it is even mor powerful as you can hold the populating routines seperate as well, making it much more like a programming project except that instead of compiling an executable, the browser and webserver compile it (as you say) on the fly.

robert adams

1:01 am on Jan 7, 2004 (gmt 0)

10+ Year Member



I understand and know how to do this. My question is how do search engines deal with these pages. They don't exist anywhere except in the browser when they are called by a viewer and they are gone as soon as the viewer is gone.

robert

shasan

4:04 am on Jan 7, 2004 (gmt 0)

10+ Year Member



They exist as much for the search engine as for the browser. When the search engine requests yourfile.php, your server serves the file just as if it was any other human browser asking for it, so your includes get parsed, and the resulting HTML displayed to the search engine.

You can't go wrong, unless you use session id's in your URL in which case Google may not like it. But there are ways around that and it's not a good reason to abandon your approach.

robert adams

3:45 pm on Jan 7, 2004 (gmt 0)

10+ Year Member



DUH,
thanks shasan, my brain must have been still on holiday.

luck and joy,
robert

shasan

4:10 pm on Jan 7, 2004 (gmt 0)

10+ Year Member



no worries ;)

th1chsn

12:02 am on Jan 8, 2004 (gmt 0)

10+ Year Member



I'm kind of new to this way of setting up a site. Can someone give me an example of code that pulls in the design file?

The one thing I have a stumbling block on is how does placement come into play here? How is it that everything lines up in the correct place?

Thanks,
Randy

twist

8:02 am on Jan 9, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Here is a really basic example using php.

First create a file called home.php and add the following...

<?
// Page title
$page_title = 'Home Page';

// Includes
include( 'includes/header.php' );
include( 'includes/home.php' );
include( 'includes/footer.php' );
?>

Now create a folder called includes. Set permissions on this folder that do not allow access. Inside the includes folder create these files, header.php, home.php and footer.php.

In your header.php page add stuff like meta tags, css or anything that you can use on each page of your website. Something like this...

<?
echo'
<html>
<head>

<!-- Meta tags -->
<meta name="Keywords" content="cool website">
<meta name="Description" content="My website">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<!-- Link tags -->
<link rel="StyleSheet" href="my.css" type="text/css">
<link rel="top" href="home.php" title="Homepage">
<link rel="search" href="search.php" title="Search">
<link rel="author" href="author.php" title="Contact">

<!-- Title -->
<title>My Website - ' . $page_title . '</title>

</head>

<body>
';
?>

Make your footer.php like this...

<?
echo'
<center>My Website &#169; 2004</center>
</body>
</html>
';
?>

Now make your home page. If you want your homepage to be dynamic you will have to pass variables in the URL. For example home.php could look like this.

<?
if( $image == true ) {
echo'
<center>This is my homepage<br>
<img src="my_picture.jpg"></center>
';
} else {
echo'
<center>This is my homepage<br>
<a href="home.php?image=true">See my picture</a>
</center>
';
}
?>

Anyway, when a browser calls home.php, since it is a php script, the server processes the script and then returns the result to the users browser.

If you know even enough programming to create if-else statements you can start to imagine how useful and easier your websites will be to create.

Not sure if this helps but good luck anyway.

tomda

8:15 am on Jan 9, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Qn other basic example on how include can be used to create pseudo-database website (that is without using MySQL) as you can call include with the variable : include "name/include" .$id. ".php";

******************
Image you have a main page called name.php and showing name of few persons

<? include "name/include" .$id. ".php";?>
Surname : <? echo $sname;?>
First Name : <? echo $fname;?>
*******************

In 'name' folder,
Create you include1.php file with
$sname = "Peter"
$fname = "Burger"

Create you include2.php file with
$sname = "Roger"
$fname = "Nuggets"
********************

Tommy

th1chsn

12:10 am on Jan 10, 2004 (gmt 0)

10+ Year Member



Thank you so much for that input and examples! It helps me tremendously and will make my site designing so much more organized and easy to modify.

th1chsn

1:46 am on Jan 12, 2004 (gmt 0)

10+ Year Member



I think I am getting the hang of it... but I am having trouble getting my content placed where I want it to show up.

I created two templates and one page calling each one of those. - top.php, bottom.php, and test.php

*****************************
top.php
*****************************
<body bgcolor="#FFFFFF" text="#000000">

<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="800" height="100" valign="top" bgcolor="#FF0000">&nbsp;</td>
</tr>
</table>
<table width="800" border="0" cellpadding="6" cellspacing="1" bgcolor="#3399FF">
<tr>
<td width="786" height="500" valign="top" bgcolor="#FFFFFF">
</td>
</tr>
</table>

*****************************
bottom.php
*****************************
<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="800" height="30" valign="top">
<div align="center">Copyright 2003</div>
</td>
</tr>
</table>

*****************************
test.php - the webpage
*****************************
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<?
include( 'top.php');
?>

<body>
<b>This is where I would put the page contents.</b>
</body>

<?
include( 'bottom.php');
?>
</html>

How do I set it up so that the content of this page appears inside of the table in the top.php design template? As it is now the contents appear in between the top and bottom templates.

Thanks in advance for any help you can give.

Randy

divaone

3:00 am on Jan 12, 2004 (gmt 0)

10+ Year Member



to keep it simple, first create an entire webpage. analyze the page to determine what portions you feel you will use on more than one page. divide the full webpage into several parts, naming them as you have previously... top.php, middle.php, bottom.php, etc. its easier to see as a whole initially.

twist

8:54 am on Jan 12, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Your definately on the right track, you just need to grasp the bigger picture.

Like divaone says, create the page first. Thats how I always start but let me see if I can help with this code first.

First thing to remember is if your using php, then use php. Don't hold back. Try adding one more php page. I'll call it content.

Try this,


<?
// ********************************************************************
// top.php ( This should contain shared info, to be used on all pages )
// ********************************************************************

echo'
<html>
<head>
<title>'. $page_title .'</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">
';
?>

<?
// ********************************************************************
bottom.php ( This, like the top, should be info to be shared )
// ********************************************************************

echo'
<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="800" height="30" valign="top">
<div align="center">Copyright 2003</div>
</td>
</tr>
</table>
</body>
</html>
';
?>

<?
// ********************************************************************
content.php ( This is the meat of your page, the middle )
// ********************************************************************

echo'
<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="800" height="100" valign="top" bgcolor="#FF0000">&nbsp;</td>
</tr>
</table>
<table width="800" border="0" cellpadding="6" cellspacing="1" bgcolor="#3399FF">
<tr>
<td width="786" height="500" valign="top" bgcolor="#FFFFFF">
</td>
</tr>
</table>
';
?>

<?
*****************************
test.php - the webpage
*****************************

$page_title = 'test.php';

include( 'top.php' );
include( 'content.php' );
include( 'bottom.php' );
?>

Now open test.php in your browser. Hope it works. If it doesn't let me know I was kinda rushing.

Good luck.

g1smd

9:59 pm on Jan 12, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



On your original attempt, look at the source code of what is sent to your browser. You'll see that TWO <body> tags get sent.

You need to review what bits of code go in which include files, and be consistent all of the time.

I always run the pages through [validator.w3.org...] as I always end up missing some tag somewhere along the line.

tcustom

4:01 pm on Jan 16, 2004 (gmt 0)

10+ Year Member



Just as as followup to this.....

I'm pretty new at this also, and I included most of my javascript in separate external .js files that are called from within my html page...

So again, is this good programming? Does it slow down page loads any by having to go to external files?

I did it to make my html page less cluttered/more manageable, and gave me the ability to update the .js files separately, without having to search for the code in a long html file....

thoughts?

robert adams

5:21 pm on Jan 16, 2004 (gmt 0)

10+ Year Member




So again, is this good programming? Does it slow down page loads any by having to go to external files?

Actually it helps to speed up your page loading. The scripts can be huge sometimes and all of that text has to load if it is all in the html of the page.

luck,
robert

tcustom

6:32 pm on Jan 16, 2004 (gmt 0)

10+ Year Member



Make sense.....thanks Robert!

twist

1:29 am on Jan 17, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Does it slow down page loads any by having to go to external files?

First thing to understand is the difference between client-side and server-side scripts. A user requests a web page from a web server, on server-side script: the server reads the php script, processes the script and returns the result in html to the users browser. On client-side script: the server sends the html script to the browser (client). The clients computer processes the script.

In the case of external js files. The client recieves the html which then tells the clients computer to ask the server for the js file. The server sends the js file to the client. The client computer then processes the js file.

When using includes in your php script. The server retrieves the file and processes it locally before sending it to the client. Note* Javascript can only be processed by the client, it is a client side scripting language. Keep reading to see how to get around this problem.

What does this all mean? Your website is hosted on a computer somewhere. If your using shared hosting, lets say, that could mean that your website is hosted on the same computer as hundreds of other websites. If you use php this means the web host computer has to use it's processor to process the php. If the processor is over-burdened (processing others php) you site could become slow. So if your hosted on a crowded computer then using a lot of php might be a bad idea.

If you used just plain html and javascript all the web host computer has to do is send the files to the client. Then the clients computer processes the script. Putting the burden of processing on the clients computer.

The good side about server-side scripting is that if you have a good webhost then your pages will become much faster and will load approximately the same time on all your client computers. If you use a lot of javascript to create your pages and lets say someone is viewing your page on a Pentium Pro computer at some college somewhere the computer may take a extra 4 or 5 seconds to process the page. If you have a good web host, try and use php to replace javascript as much as possible.

I did it to make my html page less cluttered/more manageable, and gave me the ability to update the .js files separately, without having to search for the code in a long html file....

I mentioned something earlier, if your going to use php then use php.

First warning of web design. Go easy on the javascript. Javascript is flaky and can behave differently on different computers using different browsers. My rule is to only use javascript that isn't necessary or is simply ignored if the browser doesn't like it. For example, I use javascript to replace my target="_blank" tags because they aren't xhtml compliant. If the browser accepts the javascript then the page will open in a new window. If the browser doesn't then it opens in the same window.

But back on topic, instead of using a external .js file just create another php file with all your javascript. The power of php is that you can pick and choose which javascripts will be sent to the browser.

If you remember my example about including pages. Just add a js.php page,


<?
*****************************
test.php - the webpage
*****************************

$page_title = 'test.php';

// Designate which javascript functions are used on the test.php page
$js_replace_target = true;
$js_open_window = true;
$js_mouse_over = false;

include( 'top.php' );
include( 'js.php' ); // <-- added a javascript page
include( 'content.php' );
include( 'bottom.php' );
?>


Now create your js.php file,

<?
echo 'add this javascript code to every page';
if( $js_replace_target == true ) { echo 'add javascript code here'; }
if( $js_open_window == true ) { echo 'add javascript code here'; }
if( $js_mouse_over = false ) { echo 'add javascript code here'; }
?>

Using a method like this you can have only the necessary javascript go to each page. This could potentially make some of your pages smaller. Your 56k visitors will thank you.

Isn't php great :)

P.S. Sorry about the long post, to much caffiene today.

g1smd

10:10 pm on Jan 19, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I like external javascript files as they only need to be served once per visitor, rather than (for embedded js code inside the HTML file) the js code being served once per page view.

twist

4:13 am on Jan 20, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I like external javascript files as they only need to be served once per visitor, rather than (for embedded js code inside the HTML file) the js code being served once per page view.

Believe it or not I was just thinking about this today and I agree 100%. I was going to edit my post. There are still some drawbacks to using external files that are too large.

This website [websiteoptimization.com] can explain it better than I ever could.

twist

5:52 am on Jan 20, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



After reading some more on the website I listed above I am considering moving my javascript back into my html.

This is what it says on the website,

All download times include delays due to round-trip latency with an average of 0.2 seconds per object.

This is what it said for a page I tested with only 2 objects,

With 2 total objects for this page, that computes to a total lag time due to latency of 0.4 seconds.

Here is what I get for my website,

With 15 total objects for this page, that computes to a total lag time due to latency of 3 seconds.

The javascript I use across every page is very little. If I put the javascript back into my script it may have to load every time but it will reduce this round-trip latency thing.

Not sure what to do, anybody have any opinions on this?

tcustom

3:00 pm on Jan 20, 2004 (gmt 0)

10+ Year Member



It gets more interesting......

I call about 7 external .js files from my main page, the largest is 100 lines, but the other 6 are all under 30 lines.

So would be curious about the responses here from others also....

g1smd

8:21 pm on Jan 20, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



External javascript does not have to be parsed by search engine bots before reaching the page content. I consider that essential.

If your JS code is used on many pages, then there will only be a delay on the first page. Subsequent pages will be quicker, and less bandwidth will be used.

twist

9:04 pm on Jan 20, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I call about 7 external .js files from my main page, the largest is 100 lines, but the other 6 are all under 30 lines.

So would be curious about the responses here from others also....

I removed 3 objects from my main page and reduced my 'round-trip latency' by .6 seconds. Have you run your website through the analyzer? [WebPageAnalyzer.com]

My site is targeted to the 56k audience so I need to keep it slim. Here are my results,

Object type Size (bytes)
HTML: 2475
Images: 2544
Javascript: 438
CSS: 5315

4.46 seconds on 56k

When I first found this site the other day my 56k time was over 11 seconds. Just following the tips i'm now under 5 seconds. I reduced my time more by putting my javascript back into my html. I save more time using 1 less external object than I lose re-sending the information. I also turned on gzip compression for my html and went from 11,000+ down to 2,475.

Now I just need to learn how to gzip my css and i'll be happy.

tcustom

9:17 pm on Jan 20, 2004 (gmt 0)

10+ Year Member



twist, I did and my results are not as good...

Object type Size (bytes)  
HTML: 31450
Images: 55465
Javascript: 7569
CSS: 2493
23.33 seconds on 56k

May have to move some of the js back to the html?

twist

10:01 pm on Jan 20, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I just tested webmasterworld.com

Object type Size (bytes)
HTML: 36779
Images: 5340
Javascript: 0
CSS: 0

9.19 seconds on 56k

These guys are good, they have tons of content on their frontpage and they still kept it under 10 seconds. I wonder what would happen if they used compression?