|
HTML - 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>
Similar TutorialsHi all, brand new here. A little history. I am an employee of a very small company that had a website built for them. I was given the task of updating it on a regular basis (it is for a group of movie theatres, so it is updated constantly). Well it was build 4 years ago now and the person who built it used frames. We are wanting to bring it a little up to date so I'm redesigning one at the moment that was be much more simplified. What I'm trying to accomplish is this: I want to be able to have a page that has Form - List/Menu that has the days that each theatre has movies scheduled for. Then, when that date is selected, the showtimes part of the page changes to show that dates showtimes but the rest of the page stays the same. After doing some research I THINK what I need to be using is Server Side Includes...but I'm having trouble figuring out how to get this to work. If you want an example of what I'm after you can go to any major movie theatre chain's website (like movietickets.com) and they have what I'm trying to accomplish. ANY help would be appreciated. Thanks! hey everyone. i'm taking a course in website design this semester and we've gotten to SSI which I am a bit confused over. we're supposed to have built a page with header, menu, footer and then we will be using those three on another 4 pages. so he wants us to pull the header, menu, footer code out and use it with SSI. my question is, what do i need to pull out of this code to make a SSI file that i can then bring in on various pages so they look the same on each? the site is at: http://thing.cs.usm.maine.edu/~mckenney/demo/index.html Hello everyone. I'm working on a website and I'm not quite sure how to do something. I'm hoping someone here might be able to point me in the right direction. The site will have content on each product page such as special deals, recent news or announcements. Each product page will also have their contact information. Now what I need to figure out is this. Since the "recent news" , "Special deals" and "Announcements" will be on every product page. I need to find a way to those things on every page at once. Just to show an example. Here's one of the practice pages: http://sbultimate.com/newsite/toeswitch.html If you scroll down you'll see the sample of Announcements, specials and news. That's the part I'm talking about. If any of you can help me learn how to do this I'd greatly appreciate it. Thanks. Ron Hello all, I have recently set up a website for my gaming servers. http://www.accurategameserver.110mb.com As you can see on my site, it has all the recent game changes etc. I find it really anoying and time consuming to have to keep flicking back and forth to change each section data and its usually only like one small change. Any way that I can change it so that it automatically updates to a set image/text on a seperate page? Last question is, how do ou make a registration form on your website without mysql and send out automatic emails. Thanks all in advance. Cheers Don't forget to register to my website for gaming goodness Hi my site www.brewrecords.net the text on the top right, I have to change it on all pages on the site when a new gig comes in. It is highly time consuming Is there a way i can update it once and that applies to the whole of the site? It's only text. cheers, tom Hi there. The pages in question a http://www.thepeopleupstairs.com/index.html and http://www.thepeopleupstairs.com/tour.html I'm attempting to use an include to display an "upcoming shows" list beneath the Flash music player in the right column and by itself on /tour.html. It's displaying fine in Dreamweaver, but is hidden when I view it in IE and Firefox. Here's the URL of the page I'm attempting to include: http://www.thepeopleupstairs.com/showsinclude.html Any help would be appreciated. It's driving me nuts. Thank you. force download via server side scripting e.g. php <------ DOES ANYONE KNOW HOW TO DO THIS??? I want to have downloads on my site, but dont want to use zip files or the "right click, save as" garbage.... Hi, I am semi new to HTML coding, I have created several basic websites but I am currently working on a bigger web project. I am hoping to create a website that will get traffic, and I am trying to make it as legit as possible, but of course, I do not know how to do certain things, and help would definitely be appreciated So first of all, the website will be kind of like a news page, so I might very well be updating the main page several times a week with new articles, and as I update, I want the older updates to go to page 2, and articles in page 2 to go to page 3 and on...So it is like a Stack, but I just do not know how to express or code this in HTML or what have you. The second is I wish for people to be able to comment on each article. Now I am not sure if I want them to be signed up users or anonymous, but at the least some kind of system so that people can comment on the articles and talk to each other. Also a a side question, if and only if, the site began to get ads or something, where and how would they be implemented? I have extra spaces at the left and right sides of the website, so I am thinking they could just be implemented there? Sorry to all if these questions sound obvious, but I would appreciate any kind of help Thank you for your time! Im not sure if this an html, php, or javascript question but here goes. I am trying to set up a place at my sight where I can have a content page from a certain link update automatically. For example, I want to create a 30 day journal link where each day a new journal page would come up. To my understanding I know I would have create a folder that would have 30 separate html pages. But my question is how can I set up the site that each page would automatically update according to day and time. Let's say that at 12:00am midnight a new html page with new content would be available for the reader. I don't have a lot of time to manually update the link with new content, so I want the site to do it on its own each day. Am I making any sense? I just need to know how I can have content automatically update each day without my needed to go and do it manually every day. Any help would be appreciated....thx so much. Hello, I'm going to be updating an HTML website for a friend, and it's going to be a very basic webpage. Mostly HTML with a little JavaScript thrown in for fun. My question is, how do I handle content management for the user? The website is going to be a standard setup with a "New Information" section on the homepage. This section will be updated by the admin (my friend) on a regular basis, but I'd like to be able to have her update this info in a more user-friendly manner than updating the actual HTML code. Content management is new to me, so I'm open to any suggestions. Thanks in advance! hi im designing a we site by php i have a html form that collect some information from client an it has some script for hide or visible text box when user check a checkbox but when client run my page see a popup menu allowed blocked content.... i saw some site do this withou running this popup how can i do it? thanks I have a lot of content on a page, and it is being added to every day. Because of the constant adding, the page becomes longer & longer. Instead of this happening, is there a script I could use that would make the content AUTOMATICALLY move to a new page when neccessary? Example: Page 1 can only have 30 tables. Someone adds 5 more tables to page one- CAUSING the older tables to be moved to another page. I can make the pages(page 1, page 2, page 3) beforehand, but is there a script that will let the content automatically go from page 1 to page 2 when page 1 is overflowing? Is the ANY way I could do this? Through PHP? or even Javascript? Is it possible to have a asp control in the content section of a content page of a master page? If not what is a possible work around short of remaking the entire page? I'm not sure how to explain this, but I hope someone can help me or point me in the right direction. I'd like to have a small side column on my website with content such as recent updates. Ideally, I'd like to be able change just one file and have that reflected on every page. Right now, I have to go through and update each page manually but I know there must be an easier way to do this. I'm thinking this is somehow related to RSS feeds but I don't really know much about them and I'm not sure if that's what I'm actually looking for. Can anyone offer any advice/tutorials/suggestions/help for a way to do this? The site I'm working on is located here and the section that I would like to be able to change that right column ("Recently Updated"). Hello, I'm helping a friend redesign a film website. Is there a way of making an area of content (such as a set of links in a menu bar) updatable so that if it is updated it will change across all the specified pages on the site? I am vaguely aware of templates in Dreamweaver CS3 and I think this would provide the solution, but my friend uses Frontpage and will be editing and creating content in that. Is there a way of using CSS to update areas of content? I know how to use CSS to update values like fontcolour and background images, but not areas of actual HTML content. Thanks for any help you provide. NewB question I'm sure and this seems like such a basic thing. I searched but didn't find this. I'm building a new site with a sidebar on the right. The page layout is the same for all six pages. In the sidebar I want to have latest news and events; dynamic content basically. I'd like to have that content in a separate file so that I only have to edit it in one place and then have it show up on each of the six pages. I'm relearning HTML and learning css and javascript now, but I can't seem to find a good way to do this. I've looked at link and iframes and I'm wondering if a script would be the way to go. I wanted to ask you all - what's the best way to do this that's standards compliant (XHMTML) Thanks for your help. Cheers, Maggie http://www.walterdecantelupe.co.uk/n...c-content.html I have been working on calling external html files into divs on another page and can't seem to get it right! I can't see what I am doing wring here! Please help. Cheers - Mas The original files are available here http://www.dhtmlgoodies.com/scripts/...ic-content.zip Html HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ajax dynamic content</title>
<style type="text/css">
/* This css is only needed for the demo */
body{
margin:10px;
font-size:0.9em;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
text-align:center;
background-color:#E2EBED;
height:100%;
}
a{
color:#F00;
}
#mainContainer{
width:760px;
margin:0 auto;
text-align:left;
background-color:#FFF;
height:100%;
padding-bottom:10px;
}
#mainContainer .news{
margin:5px;
border:1px dotted #555;
background-color:#EEE;
padding:10px;
}
#mainContainer img{
float:left;
margin:2px;
}
div#header{
border:0px;
background-color:#FFF;
padding:0px;
margin:0px;
height:100px;
}
h2{
font-size:1.3em;
margin-bottom:5px;
}
p{
margin-top:0px;
}
.clear{
clear:both;
}
h2{
color:#000;
}
#news2{
height:150px;
}
.header{
padding-left:5px;
font-weight:bold;
}
</style>
<script type="text/javascript" src="http://www.walterdecantelupe.co.uk/new/js/ajax.js"></script>
<script type="text/javascript" src="http://www.walterdecantelupe.co.uk/new/js/ajax-dynamic-content.js"></script>
<script type="text/javascript">
ajax_loadContent('news1','http://www.walterdecantelupe.co.uk/new/external/externalfile1.html');
ajax_loadContent('news2','http://www.walterdecantelupe.co.uk/new/external/externalfile2.html');
ajax_loadContent('news3','http://www.walterdecantelupe.co.uk/new/external/externalfile3.html');
</script>
</head>
<body>
<div id="mainContainer">
<p class="header">The content of the three boxes below are loaded by Ajax(Asyncron Javascript And XML) from external files.</p>
<div class="news" id="news1"></div>
<div class="news" id="news2"></div>
<div class="news" id="news3"></div>
</div>
</body>
</html>
An HTML guide for the beginner's: Hey im making a gaming gear review site and i want to add a Selection guide to help people choose the right gear for them. Link below is something what i am thinking about but using drop down lists instead. http://www2.razerzone.com/MouseGuide/configurator/ i know how to make a drop down lists but i don't know how to link the information together also how would i produce the final result. Any help would be appreciated. |
|||||||