Go Back  HTML Forums - Free Webmaster Forums and Help Forums > WEBSITE DEVELOPMENT > HTML / XHTML
User Name:
Password:
 

Reply
Thread Tools   Display Modes
  View First Unread
 
Old 06-13-2011, 11:56 PM
  #1
lion
Super Guru
 
Join Date: Apr 2005
Posts: 1,865
iTrader: (0)
lion is just really nicelion is just really nicelion is just really nicelion is just really nicelion is just really nice
Guide to Server-Side Includes/Dynamic Content/Updating Pages At Once

Introduction:

Seeing as this question is brought up very often, I hope this short guide will be a destination for users seeking information about the topic. Although this is a server-side issue, those who are not aware of this fact generally seek help in HTML/XHTML, so this is where the topic will remain

Note: Read the answers to Frequently Asked Questions in the next post!

Hasn't this been done before?

Absolutely; this is meant as a straightforward stickied version that brings a few things together and references previous threads where you can find further details.

If your question is somewhere in the realm of one of these, you're in the right place:
  • How do large websites manage their content?
  • How do I make the same content appear in multiple pages without copy/pasting?
  • How do I automatically update parts of different pages, without editing every file?
  • How do I avoid duplicating code in multiple files?
  • Is there an alternative to IFrames?

The answer is using PHP Includes, SSI (Server Side Includes), or ASP Includes. Each will be discussed below.

Basic Concept:

Let's assume we have a basic HTML page with a few links that represent a navigation menu (we're using HTML5 markup for simplicity):

Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Main Page</title>
</head>
<body>
<div>
	<ul>
		<li><a href="home.html">Home Page</a></li>
		<li><a href="gallery.html">Gallery Page</a></li>
		<li><a href="about.html">About Page</a></li>
		<li><a href="contact.html">Contact Page</a></li>
	</ul>
</div>
</body>
</html>
This HTML page is now our basic template for subsequent pages that we create, which traditionally meant that we copy and paste our menu into each one. However, what if we end up creating 50 pages and then find out we have to add another link to the menu? Our only solution would be to add the link to each page.

In order to avoid this, we separate our menu from the rest of the page like so:

Code:
<div>
	<ul>
		<li><a href="home.html">Home Page</a></li>
		<li><a href="gallery.html">Gallery Page</a></li>
		<li><a href="about.html">About Page</a></li>
		<li><a href="contact.html">Contact Page</a></li>
	</ul>
</div>
Save it in a file, and then place an include on every page where we want to display the menu:

Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Main Page</title>
</head>
<body>

    code for including menu would go here

</body>
</html>
This setup lets us update our menu file, and have the changes be immediately reflected everywhere we placed our include.

The concept is most often used with things like menus, headers, and footers, but it can be used with anything and we'll now discuss how it's done in practice.

Note: The attached zip contains working examples of all three methods.

PHP Includes:

General Requirements:
  • Your web-hosting provider must support PHP, which most of them do. If your host does not support PHP, I would suggest switching hosts.
  • If you do not have a hosting provider, and you're attempting this on your local computer, it must be set up as a local server and configured to run PHP. The easiest way to do this at once is by installing XAMPP.
Required Filetypes:
  • By default, servers will only parse PHP code inside files with the .php extension. Therefore, you must change the extension of any files you want to use includes in to .php (e.g. index.html becomes index.php).
  • Although your main file must have a .php extension, you can include files with extensions such as .html, .txt, .inc, other .php files, and more.
Syntax
  • Here are two ways to include a file in PHP:

    PHP Code:
    <?php include('file_to_include.html');?>
    or:

    PHP Code:
    <?php include 'file_to_include.html';?>
  • Note that you can also include full URLs if URL file-access is enabled in your server's configuration:
    PHP Code:
    <?php include("http://www.google.com/");?>

Code Example: (some_page.php)
Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP Include</title>
</head>
<body>

    <?php include("menu.html");?>

</body>
</html>
Server Side Includes (SSI):

General Requirements:
  • Your web-hosting provider must support Server Side Includes, which most of them do.
  • If you do not have a hosting provider, and you're attempting this on your local computer, it must be set up as a local server and configured to support Server Side Includes. If you are using Apache, you can find information on enabling SSI here. If you are using IIS, you can install Server Side Includes inside Windows Features > World Wide Web Services > Application Development Features > Server Side Includes, although this path may differ depending on your version of Windows.
Required Filetypes:
  • By default, servers will only parse Server Side Includes inside files with the .shtml, .shtm or .stm extensions. Therefore, you must change any files you want to use includes in to have one of these extensions (e.g. index.html becomes index.shtml).
  • Although your main file must have one of the above extensions, you can include files with extensions such as .ssi, .html, .txt, .inc, and more.
Syntax
  • Here are two ways to include a file using SSI:

    Code:
    <!--#include file="menu.ssi" -->
    Is used to specify a relative path, i.e. a path to your include in relation to where your main file is. The above assumes that your main file, and menu.ssi are in the same directory.

    Code:
    <!--#include virtual="includes/menu.ssi" -->
    Is used to specify a path relative to the web root. The above assumes that menu.ssi is located inside webroot/includes

Code Example: (some_page.shtml)
Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>SSI Include</title>
</head>
<body>

    <!--#include file="menu.ssi" -->

</body>
</html>

ASP Includes:

General Requirements:
  • Your web-hosting provider must support ASP.
  • If you do not have a hosting provider, and you're attempting this on your local computer, it must be set up as a local server and configured to support ASP. If you are using Apache, you can find information on enabling ASP here. If you are using IIS, you can install ASP inside Windows Features > World Wide Web Services > Application Development Features > ASP, although this path may differ depending on your version of Windows.
Required Filetypes:
  • By default, servers will only parse ASP code inside files with the .asp extension. Therefore, you must change the extension of any files you want to use includes in to .asp (e.g. index.html becomes index.asp).
  • Although your main file must have a .asp extension, you can include files with extensions such as, .html, .txt, .inc, other .asp files, and more.
Syntax
  • Here are two ways to include a file using ASP (The syntax is exactly the same as SSI):

    Code:
    <!--#include file="menu.html" -->
    Is used to specify a relative path, i.e. a path to your include in relation to where your main file is. The above assumes that your main file, and menu.html are in the same directory.

    Code:
    <!--#include virtual="includes/menu.html" -->
    Is used to specify a path relative to the web root. The above assumes that menu.html is located inside web root directory/includes

Code Example: (some_page.asp)
Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ASP Include</title>
</head>
<body>

    <!--#include file="menu.html" -->

</body>
</html>
Attached Files
File Type: zip Includes.zip (2.5 KB, 211 views)

Last edited by lion : 08-15-2011 at 10:30 AM. Reason: Chaned <titles> as per
lion is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 06-13-2011, 11:57 PM
  #2
lion
Super Guru
 
Join Date: Apr 2005
Posts: 1,865
iTrader: (0)
lion is just really nicelion is just really nicelion is just really nicelion is just really nicelion is just really nice
FAQ:
  • Which one should I use?
    As a matter of personal preference, I would recommend PHP includes due to the fact that they have simple syntax, as well as the fact that PHP is both widely supported and easy to install locally. It is also more flexible as regarding to where your projects might go. You can rename your pages to .shtml and use SSI, but it's unlikely that you'll use or bother to learn other SSI features in the project's life cycle. With PHP however, you have everything you need for creating almost any kind of web application.

    Use PHP if you want to use includes.
    Use SSI if you can't get access to PHP support.
    Use ASP if it is a matter of personal preference, or in conjunction with existing ASP code.
  • I am trying to test an include using the method of my choice, but it's not working, what's wrong?
    Review the requirements for your method of choice and make sure that your web hosting provider, or your local server meet them. If you are trying to run a file with an include on your computer using a local server, and you're sure that you have configured it to have the required support, you're probably trying to access the file using File > Open in your browser. You need to access it through localhost instead, by placing all required files in your web root, and then typing localhost/file.php in your browser's address bar (given that you're trying to get to web root/file.php)
  • I used an include and ended up with invalid HTML, what happened?
    Remember that if you have things like a DOCTYPE or a head section in your include, these elements will appear wherever you've used it even though pages are only supposed to have them once. Therefore, make sure that only your main page contains basic html markup, meta tags etc. This doesn't mean you can't stick those in an include too, though - there's nothing wrong with using includes to build full pages.
  • Does using includes increase the load time of my pages?
    Any server-side processing increases the load time of your pages because the files have to be parsed before they are sent to the browser. The increase in load times from a raw html page, however, is likely to be miniscule. Caching can always be used to increase performance.
  • Are there alternatives to the 3 methods mentioned above? Is this how "professional" websites do it?
    A custom Web Template System (Template Engine), or ASP Master Pages are the only alternatives that come to mind; both are outside of the scope of this tutorial, and most likely outside of the scope of your needs. I can assure you that if you're trying to find a solution to the problems listed in the beginning of this thread, one of the methods previously discussed will suit you perfectly.

Links:
Please inform me of any errors you might find, or if you have any questions or comments.

This thread was created with information indirectly contributed by various members of these boards, most notably cascading-style, Mandarin, michaelstampone, Pegasus, and . Thank you

Last edited by lion : 03-14-2013 at 03:40 PM. Reason: Added Question.
lion is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 06-14-2011, 03:51 AM
  #3
SpAm
MasNotsram
 
SpAm's Avatar
 
Join Date: Dec 2009
Location: Norfolk
Posts: 1,697
iTrader: (0)
SpAm is a splendid one to beholdSpAm is a splendid one to beholdSpAm is a splendid one to beholdSpAm is a splendid one to beholdSpAm is a splendid one to beholdSpAm is a splendid one to beholdSpAm is a splendid one to behold
Great guide

I shall definitely link to this in future (oh wait, i already have)
__________________
---------------------------------------------
//Improvement in coding is iterative, each 'failure' is just the next step on your learning curve, some knowledge and logic can get you a long way.//
SpAm is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 06-14-2011, 04:24 AM
  #4
michaelstampone
Paladin (Level 15)
 
Join Date: Mar 2011
Location: Colorado, USA
Posts: 395
iTrader: (0)
michaelstampone has a spectacular aura aboutmichaelstampone has a spectacular aura about
Thanks for mentioning me in your post.

This sticky is sure to eliminate a lot of unnecessary threads. Nice work xfox.
__________________
My Website - examplegames.com
michaelstampone is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 06-14-2011, 07:52 AM
  #5
sonico67
Novice (Level 1)
 
Join Date: Jun 2011
Posts: 5
iTrader: (0)
sonico67 is an unknown quantity at this point
Great guide. This is surprisingly useful and many newbies like myself are not even aware this can be done without advanced coding but it's quite simple overall. Thanks for taking the time to explain it.
sonico67 is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 06-14-2011, 08:57 AM
  #6
<head>&nbsp;</head>
 
's Avatar
 
Join Date: Jul 2004
Posts: 3,640
iTrader: (1)
 has much to be proud of has much to be proud of has much to be proud of has much to be proud of has much to be proud of has much to be proud of has much to be proud of has much to be proud of
You may wish to change the <title>s in some of your examples

__________________
I may have opened the door, but you entered of your own free will
urls removed by choice
 is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 06-14-2011, 09:39 AM
  #7
lion
Super Guru
 
Join Date: Apr 2005
Posts: 1,865
iTrader: (0)
lion is just really nicelion is just really nicelion is just really nicelion is just really nicelion is just really nice
Thank you guys.

Done, , good catch
lion is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 06-21-2011, 09:38 AM
  #8
matricol
Adept (Level 5)
 
matricol's Avatar
 
Join Date: Jun 2011
Posts: 40
iTrader: (0)
matricol has a little shameless behaviour in the past
nice one .. taught us some good things too
matricol is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 06-21-2011, 10:30 AM
  #9
Pappa
Chevalier (Level 6)
 
Join Date: Apr 2011
Posts: 60
iTrader: (0)
Pappa is an unknown quantity at this point
That current PHP include will look for the file in that directory. You cannot do it from root, but you can with this;

Quote:
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/includes/php/navigationbar.php";
include_once($path);
?>
Pappa is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 10-12-2011, 01:36 AM
  #10
maintainie
Novice (Level 1)
 
Join Date: Aug 2011
Posts: 10
iTrader: (0)
maintainie is an unknown quantity at this point
hmm really nice post, thanks for sharing, really appreciate!

____________________

Last edited by Pegasus : 10-12-2011 at 06:36 AM. Reason: sig removed - you can have one after 30 days membership AND 30 posts.
maintainie is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-02-2011, 01:31 AM
  #11
shareclock
Novice (Level 1)
 
Join Date: Nov 2011
Posts: 2
iTrader: (0)
shareclock is an unknown quantity at this point
can i add dynamic content in a slider?
shareclock is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 12-20-2011, 12:29 PM
  #12
sonico67
Novice (Level 1)
 
Join Date: Jun 2011
Posts: 5
iTrader: (0)
sonico67 is an unknown quantity at this point
My entire website is made up of html files so I edited the .htaccess file so I could parse includes in them:

Code:
AddHandler server-parsed .html
AddHandler server-parsed .htm
Not sure if it will affect the performance of the site/server but I have decided to give it a try.

Last edited by sonico67 : 12-20-2011 at 02:02 PM.
sonico67 is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 02-23-2012, 01:15 AM
  #13
rabiulbd
Novice (Level 1)
 
Join Date: Feb 2012
Posts: 1
iTrader: (0)
rabiulbd is an unknown quantity at this point
Thanks for this article. Its very important for us.
rabiulbd is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 05-15-2012, 01:45 PM
  #14
stevemack
Battler (Level 3)
 
Join Date: Aug 2010
Posts: 27
iTrader: (0)
stevemack is an unknown quantity at this point
some good examples and i really loved the way you explained it.
stevemack is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 06-05-2012, 11:30 PM
  #15
josefadvincula
Veteran (Level 7)
 
josefadvincula's Avatar
 
Join Date: May 2012
Posts: 61
iTrader: (0)
josefadvincula is an unknown quantity at this point
Thanks for this post! Helps alot!

josefadvincula is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Reply
KEEP TABS
SPONSORS
 
Boxedart

 
 


 
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
  
 
 
 



 
  POSTING RULES
 
 
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Thread Tools
Display Modes

Forum Jump

 

All times are GMT -5. The time now is 02:32 AM.

   

Mascot team created by Drawshop.com | Web Hosting

Powered by vBulletin® Version 3.6.7
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.

Server Monitoring by ENIACmonitor 0.01
HTMLforums.com © Big Resources, Inc. Web Design by BoxedArt.com
vRewrite 1.5 beta SEOed URLs completed by Tech Help Forum and Chalo Na.