Skip navigation
Currently Being Moderated

Server side includes

Mar 9, 2012 8:49 AM

I have built a site I have tried to put server side in after but have found it very dificult to apley, If I start the site over again how would I go about starting it, is there some instructions on the net I can use, or dose any one have any other ideas that I could use, Please help

http://www.thecarpetandflooringconsultant.co.uk

 
Replies 1 2 Previous Next
  • Currently Being Moderated
    Mar 9, 2012 9:37 AM   in reply to Jeffrey54 Lane

    Where are you struggling with Includes exactly?

     

    I'm not seeing anything in your link that indicates what you need help with.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 9, 2012 10:05 AM   in reply to Jeffrey54 Lane

    Jeffrey54 Lane wrote:

     

    the problem is that when I want to change anything like a link or something that is on every page I have to go in and manually change every page, and as the site gets bigger it’s going to get harder to do,

    Yes, Includes make that much easier to maintain.

     

     

    Jeffrey54 Lane wrote:

     

    I have a separate copy of the site here in Dreamweaver that I am trying it out on, thing is I don’t have a test site server I can put it on so you can see. Thanks Jeff Lane

     

    That's fine. Can you set up a test server on your local PC? Are you running Windows (which version?)?

     

    Is there anything specific that you need help with? There are several Includes tutorials online.

     

    Forums are more suited to specific Q&A rather than a full tutorial.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 9, 2012 10:21 AM   in reply to Jeffrey54 Lane
     
    |
    Mark as:
  • Currently Being Moderated
    Mar 9, 2012 11:14 AM   in reply to John Waller

    Taking a look at your page here's how you might approach it.

     

    First off, duplicate your page (i.e. make a test copy).

     

    Cut the portion of your code out of the document that you want to make into the include file.

     

    Past that into a clean page and save it as say banner.php

     

    In your case, it would mean all of this code:

     

    <div id="banner">

        <div id="banner_text">

          <h2 align="center">The Carpet and Flooring Consultant</h2>

       </div>

        <div id="banner_email_phone">

          <div align="center">Email: <a href="mailto:info@thecarpetandflooringconsultant.co.uk">info@thecarpetandflooringconsultant.co.uk</a></div>

          <div align="center">

            <h4>Telephone Bristol: 0117 908 2753</h4>

     

          </div>

      </div>

      <div id="menu-bar"><ul id="MenuBar">

        <li> <a href="index.html">Home</a></li>

        <li> <a href="commercial-contract_carpet_and_flooring.html">Commercial</a></l i>

        <li> <a href="residential-domestic_carpet_and_flooring.html">Residential</a>< /li>

     

        <li><a href="more_links.html">More Links</a>

          <ul>

            <li><a href="carpet_and_flooring_accessories.html">Accessories</a></li>

            <li><a href="carpet-and-flooring-fitting.html">Fitting Service</a></li>

            <li><a href="contact.html">Contact</a></li>

            <li><a href="products.html">Products</a>

     

              <ul>

                <li><a href="commercial_products.html">Commercial</a></li>

                <li><a href="residential-products.html">Residential</a></li>

                </ul>

              </li>

            <li><a href="tips_and_tricks.html">Tips and Tricks</a></li>

            <li><a href="newsletter.html">Newsletter</a></li>

     

            <li><a href="sitemap.html">Site Map</a></li>

            </ul>

        </li>

        <li><a href="laminate_and_wood_flooring.html">Laminate/Wood</a></li>

    </ul>

     

    Then, add this piece of code to the page precisely where the above code was removed:

     

    <?php include('banner.php') ?>

     

    Upload both your test page and the banner.php page to your server and see what happens when you navigate to the tesp page.

     

    This of course, is using PHP so, it's presuming PHP is available to you on your server.

     

    In the piece of PHP code in your test page, it has to point to the file wherever it is in the structure of the site.

     

    If your include file includes links, you have to be sure that the path to the links is accurate.

     

    Have a go.

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 11, 2012 5:28 AM   in reply to Jeffrey54 Lane

    You seem to be jumping around a bit without telling us exactly what you're doing (page 25 of 47 of what? why are you going to the Apache Friends website?) so it's a bit hard to follow your replies and visualize which hurdle you're currently facing.

     

    I'm going to take a wild guess and presume that you're following this tutorial

    http://www.adobe.com/devnet/dreamweaver/articles/setup_php.html

     

    in which case, the sample files are linked at the top of the page in the grey box (php_test.zip)

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 11, 2012 12:51 PM   in reply to Jeffrey54 Lane

    You're making this too hard on yourself.

     

    First, you don't need a MySQL database to use server-side includes. You only need databases if you plan to store content in them.

     

    Includes statement tell the server to look for a file (include.ssi or include.html) and parse that info into the parent .php or .shtml page.  That's it.  Not complicated.

     

    You don't need a local testing server, either.  It's more convenient to have one for previewing locally but it's not required to use includes.

     

    More on Server-Side Includes

    http://forums.adobe.com/message/2112460#2112460

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 11, 2012 1:46 PM   in reply to Jeffrey54 Lane

    As Nancy says, if all you're trying to do is learn to put Server Side Includes (SSIs) on your webpages then none of where you're going is necessary.

     

    SSIs are really simple and you don't need a local testing server to set them up.

     

    Just upload your small Include files to the server, upload the website pages with a .php extension and Includes statements where required and you're done.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 11, 2012 2:36 PM   in reply to Jeffrey54 Lane

    Take a look again at my post.

     

    Using SSI to do what you describe is a typical implementation.

     

    Use a duplicate page nd try it out.

     

    Once it clicks in your head, it is easy.

     

    For development purposes, you can easily cut and paste the code between your includ file and page.  Leave yourself a reminder in the page if you need to.

     

    <!--banner SSI start-->

     

    <!--banner SSI end-->

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 11, 2012 2:47 PM   in reply to Jeffrey54 Lane

    Jeffrey54 Lane wrote:

     

    I don’t really want the site off line if I can help it, but I still have to make things easier in future, so is there a way I can test the site without a test site

     

    Test SSIs online on your current site. No need for the site to be offline at all.

     

    Trial one dummy page online (on the current website) with SSIs for testing purposes.

     

    e.g. save index.php as index-test.php, upload to your server.

     

    Try adding an SSI to that index-test.php page alone and test it. The rest of the website will continue to function normally while you experiment in the background.

     

    Once it clicks in your head and you 'get' SSIs and it works, you can easily retrofit SSIs to your other pages.

     

    Just make the relevant code changes in your other real site pages and you're done.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 11, 2012 3:08 PM   in reply to Jeffrey54 Lane

    Create a TEST folder on your server.

    Upload pages & include files to the TEST folder to test remotely.

    When you're done, remove the TEST folder from your server.

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 12, 2012 10:23 AM   in reply to Jeffrey54 Lane

    do I also need a container in my includes file,

    Depends on the layout.  I typically put the container divisions on the parent page like so.

     

    <div id="header">
    <!--#include virtual="../Includes/header.html" -->
    </div>
    
    <div id="navbar">
    <!--#include virtual="../Includes/navbar.html" -->
    </div>
    
    <div id="footer">
    <!--#include virtual="../Includes/footer.html" -->
    </div>

     

    I have ended with .shtml and the file that as my includes in it I have ended with .php is this right.

     

    You can name your include file anything you wish:  include.php, include.html, include.ssi, include.foo.  It doesn't matter which extension you use on the include file.    It's the parent page extension that matters.  .shtml or .php will work on most Apache servers.

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 12, 2012 11:07 AM   in reply to Jeffrey54 Lane

    Jeffrey54 Lane wrote:

     

    Also I’ve got a container in the index page do I also need a container in my includes file

    The most straightforward way to look at this is that after building your page, you consider which parts are common accross your site.  Those parts will form your include files.  You make the choice about how much of your code you want to use in the include.  For instance, if you have a navigation menu in a containing <div>  you could cut the <ul> and everything inbetween to the </ul> and copy that to your include file.  You could cut the contiaining <div> or you could cut the whole <div id="header">  Like I say, you make that decision.  Whatever you cut out goes in the include file and you add the php precisely where you lifted that section of code.

     

     

    Jeffrey54 Lane wrote:

     

    do I need a different includes file for each instruction i.e. one for banner, one for spry bar, one for the links at the bottom of the page and one for the footer, or can they all go in to the same file. Thanks Jeff

     

    Yes, you do need seperate include file for each section of code.  If your, "spry bar" is in your banner, or right next to it, you could cut that whole section into your include and just have one.  If the code is common to all pages, that's where this technique really helps.  Again, if your links at the bottom of the page are contained within your footer, or adjoins the footer, then again, you would only need one.

     

    You could end up with just three includes: header.php, sidebar.php and footer.php.

     

    They can't all go in the same file but it makes sense to keep them all in the same place.

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 12, 2012 2:19 PM   in reply to Jeffrey54 Lane

    Jeffrey54 Lane wrote:

     

    I have only tried it with the banner and spry bar, you can will see from my site that they are quite tightly instigated so like martin said if they are next to each other, then include them together, so that is what I’ve done,

     

    I always use one Include per page element. So I would set up the banner and Spry menu as two separate Includes. But that's just me.

     

    Which page do we view to see where you're getting a 404?

     

    The code/content you've posted (from Design View?) doesn't tell us anything. Go into Code View and copy and paste from there.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 12, 2012 2:31 PM   in reply to Jeffrey54 Lane

    That link is pointing to

     

    http://www.thecarpetandflooringconsultant.co.uk/index-test.php/index_t est.shtml

     

    meaning a file called "index_test.shtml" inside a folder named "index-test.php" (presumably that's wrong).

     

     

    Should it be

     

    http://www.thecarpetandflooringconsultant.co.uk/index_test.shtml

     

    or

     

    http://www.thecarpetandflooringconsultant.co.uk/index-test.php

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 12, 2012 2:35 PM   in reply to Jeffrey54 Lane

    can't look at your site at the moment but my first thought would be check the includes are uploaded and check the path.

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 13, 2012 5:44 AM   in reply to Jeffrey54 Lane

    Lets try and make this simpler. (personally I think its easier to have a local testing server set up but its not strictly necessary)

     

    Let's assume you're going to use .php as your final page extentions.

     

    So for instance eventually you will change the index.html page below to index.php, right? (and the rest of your pages will end in .php as well)

    http://www.thecarpetandflooringconsultant.co.uk/index.html

     

    As a test make a complete copy of your site folder and call it - ssi_test

     

    In the ssi_test folder change index.html to index.php

     

    Open index.php and cut everything inside your <div id="menu-bar"></div> (which is the spry menu code below)

     

    <ul id="MenuBar">

        <li> <a href="index.html">Home</a></li>

        <li> <a href="commercial-contract_carpet_and_flooring.html">Commercial</a></l i>

        <li> <a href="residential-domestic_carpet_and_flooring.html">Residential</a>< /li>

     

        <li><a href="more_links.html">More Links</a>

          <ul>

            <li><a href="carpet_and_flooring_accessories.html">Accessories</a></li>

            <li><a href="carpet-and-flooring-fitting.html">Fitting Service</a></li>

            <li><a href="contact.html">Contact</a></li>

            <li><a href="products.html">Products</a>

     

              <ul>

                <li><a href="commercial_products.html">Commercial</a></li>

                <li><a href="residential-products.html">Residential</a></li>

                </ul>

              </li>

            <li><a href="tips_and_tricks.html">Tips and Tricks</a></li>

            <li><a href="newsletter.html">Newsletter</a></li>

     

            <li><a href="sitemap.html">Site Map</a></li>

            </ul>

        </li>

        <li><a href="laminate_and_wood_flooring.html">Laminate/Wood</a></li>

    </ul>

    <p> </p>

    <script type="text/javascript">

    // BeginOAWidget_Instance_2141544: #MenuBar

    var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {

          widgetID: "MenuBar",

          widgetClass: "MenuBar  MenuBarLeftShrink",

          insertMenuBarBreak: true,

          mainMenuShowDelay: 100,

          mainMenuHideDelay: 200,

          subMenuShowDelay: 200,

          subMenuHideDelay: 200

          });

    // EndOAWidget_Instance_2141544

        </script>

     

     

    Paste the spry menu code above into a new Dreamweaver document and save it as - top_nav.php - into a folder in your site root folder called - includes.

     

    In index.php insert the php code below between the 'menu-bar' <div> tags (as shown below)

     

    <div id="menu-bar">

    <?php include('includes/top_nav.php'); ?>

    </div>

     

    That's it, done. You have now included the top navigation within your index.php file.

     

    Now you need to change all your other page extentions from .html to php, remove the spry code form each page and replace it with the <?php include('includes/main_nav.php'); ?> between the menu-bar <divs>

     

    Don't forget to amend the linked pages in the 'top_nav.php' include file to to .php from .html

     

    Upload the ssi_test folder to your server and test it out.

     

     

    As a footnote getting to grips with SSI is NOT as easy as its made out to be. You have to find a way to use them which suits your workkflow. Personally I always use absolute paths to any links in the include files as you can soon trip up if your pages and images are stored in different directories in your site root folder.

     

    What I'd do in the long run is set up a local testing server environment and use localhost as the absolute path whilst testing locally and then once you have everything working the way you need it to work amend the localhost path to the remote absolute path.

     

    So for instance in your include files your localhost link paths to files would look like:

     

    <li> <a href="http://localhost/nameOfYourSiteFolder/commercial-contract_carpet_and_f looring.html">Commercial</a></li>

     

    Change them to the remote absolute path once you have finished testing: (you can do this in seconds with 'find and replace' in Dreamweaver)

     

    <li> <a href="http://www.thecarpetandflooringconsultant.co.uk//commercial-contract_carpet_and_flooring.html">Commercial</a></li>

     

    The alternative is to set up a virtual host for each website on your testing server then there in no need to keep flicking backwards and forward with the paths.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 13, 2012 5:54 AM   in reply to osgood_

    Another thing you may want to take into consideration is the possiblity that your .html pages have good google rankings. You don't want to loose those rankings by changing them from .html to .php so I would get a htaccess page together with a list of pages whose address has altered:

     

    redirect 301 /index.html http://www.thecarpetandflooringconsultant.co.uk/index.php

     
    |
    Mark as:
  • Jim Carpenter
    546 posts
    Apr 6, 2006
    Currently Being Moderated
    Mar 13, 2012 6:06 AM   in reply to Jeffrey54 Lane

    This thread is getting a little long, but thought I would give my two cents worth.

     

    If you are having problems with the SSI working, ask your ISP if they allow SSI. The .shtm extension is working as I can see the index file in the folder. If they do support SSI, make sure you don't use absolute paths for the SSI. Some host don't allow this (osgood, I know you do use them and I have a deep respect for you, but I have always used links relative to site root and never had a problem*). Another thing to try is the afore mentioned is all correct is to rename your SSI with a .html or htm extension as some sites don't allow php extensions on SSIs. If you are passing variables in your SSI, some hosts don't allow this also (long story here).

     

    If you have good tech support with your provided, contact them on the do's and don'ts of using SSI.

     

    Server Side Includes are not as complicated if everything is setup right. It will make your life easier if implimented correctly. A good plan for directory stucture is always, as stated before, good!

     

    Jim

     

    * to use links relative to site root your site definition must be set correctly to your root folder.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 13, 2012 6:15 AM   in reply to Jim Carpenter

    polar_bare wrote:

     

    If they do support SSI, make sure you don't use absolute paths for the SSI. Some host don't allow this (osgood, I know you do use them and I have a deep respect for you, but I have always used links relative to site root and never had a problem*).

     

    Been through this before and relative links within include files don't work locally UNLESS you have a virtual server environmemt set up other wise I would use them - alternative absolute paths

     
    |
    Mark as:
  • Jim Carpenter
    546 posts
    Apr 6, 2006
    Currently Being Moderated
    Mar 13, 2012 6:40 AM   in reply to Jeffrey54 Lane

    Absolute would be like this in a folder called includes off the root:

    http://www.yoursite.com/includes/mysite.shtml

     

    Now a if you have  your site set to "links relative to site root" it would be like this:

    /includes/mysite.shtml

     

    the / tells it to start at the root of the site. I would ask that you contact your isp to see if they allow SSI and have them turn it on for you. I think this is the case here.

     

    When I use an include in a page with a php extension, the syntax is a little different than Nancy states above, but listen to her, she is very smart on all things web.

     

    Here is what I would use to include an include with a php extension, in a php document.<?php include('includes/myinclude.inc.php'); ?> as compared to Nancy's <!--#include virtual="../Includes/header.html" --> which I use with asp pages.

     

     

    Jim

     
    |
    Mark as:
  • Jim Carpenter
    546 posts
    Apr 6, 2006
    Currently Being Moderated
    Mar 13, 2012 8:13 AM   in reply to Jeffrey54 Lane

    There is no main_nav.php file there. The only file in that directory is top_nav.php

     

    Your include file sytax should be like this.<?php include('includes/top_nav.php'); ?>

     

    Sorry this is so confusing for you. You can test your server to see if it can parse the php files by creating a simple php file. Use the following and name it test.php and save it in your root.

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>

    <body>
    <?php
    echo "Hello World!";
    ?>

    </body>
    </html>

     

    Once this is uploaded to the server, open your browser and go to it. It should be a simple page with "Hello World!" on it.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 13, 2012 8:49 AM   in reply to Jeffrey54 Lane

    Jeffrey54 Lane wrote:

     

    Osgood that’s done it thanks mate, and all the rest of you I would never done it without you all Thanks you all very much.

     

    All I have to do new is move all the other items over, so don’t be surprised to see my name pop up again. Thanks Jeff

     

    Oops sorry I made a mistake put - 'main' instead of 'top'

     

    Seems like you got there in the end though

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 13, 2012 9:25 AM   in reply to Jeffrey54 Lane

    Jeffrey54 Lane wrote:

     

    Hi I said I might be back soon, Thiers one more question, on the secondary links bar at the bottom of the page, there is a link that takes you back to the top of the page that you are on, obviously in an includes that can only take you to one page but all of the pages are different, How do I handle this.

     

    Thanks Jeff

     

    The 'back up' link?

     

    Not sure what you mean 'all of the pages are different' - a link to the top of the page should'nt be any different from page to page.

     
    |
    Mark as:
1 2 Previous Next
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points