Announcement

Collapse
No announcement yet.

Guide to Server-Side Includes/Dynamic Content/Updating Pages At Once

Collapse
This is a sticky topic.
X
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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
    Last edited by lion; 08-15-2011, 12:30 PM. Reason: Chaned <titles> as per

  • #2
    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, 05:40 PM. Reason: Added Question.

    Comment


    • #3
      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.//

      Comment


      • #4
        Thanks for mentioning me in your post.

        This sticky is sure to eliminate a lot of unnecessary threads. Nice work xfox.
        My Website - openalgorithms.com

        Comment


        • #5
          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.

          Comment


          • #6
            You may wish to change the <title>s in some of your examples

            Comment


            • #7
              Thank you guys.

              Done, , good catch

              Comment


              • #8
                nice one .. taught us some good things too

                Comment


                • #9
                  That current PHP include will look for the file in that directory. You cannot do it from root, but you can with this;

                  <?php
                  $path = $_SERVER['DOCUMENT_ROOT'];
                  $path .= "/includes/php/navigationbar.php";
                  include_once($path);
                  ?>

                  Comment


                  • #10
                    hmm really nice post, thanks for sharing, really appreciate!

                    ____________________
                    Last edited by Pegasus; 10-12-2011, 08:36 AM. Reason: sig removed - you can have one after 30 days membership AND 30 posts.

                    Comment


                    • #11
                      can i add dynamic content in a slider?

                      Comment


                      • #12
                        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, 04:02 PM.

                        Comment


                        • #13
                          Thanks for this article. Its very important for us.

                          Comment


                          • #14
                            some good examples and i really loved the way you explained it.

                            Comment


                            • #15
                              Thanks for this post! Helps alot!

                              Comment

                              Working...
                              X