FunkyTower » PHP http://www.davidcrandall.com A great source for tech news, tech help, tech info, and quality web design solutions Tue, 18 Aug 2009 08:38:50 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Website Performance Tips pt. 1: Templating http://www.davidcrandall.com/2008/08/07/website-performance-tips-pt-1-templating/ http://www.davidcrandall.com/2008/08/07/website-performance-tips-pt-1-templating/#comments Fri, 08 Aug 2008 02:18:13 +0000 David http://funkytower.com/?p=267 Do you have a website, blog, or message board online?  Designing it yourself?  Awesome!  That’s really wonderful to hear!  What’s that?  You say your website moves slowly compared to other websites with just as much, if not more content?  Well here are some tips to get your website running smoothely and quickly!

Templating/Dividing with PHP:  Though sometimes a little bit of a hassle to set up, it’s well worth it in the end.  It’s really not that hard, and it doesn’t require very much knowlege of PHP programming, either. 

In most websites, the only thing that changes is the body of the web page; the header, footer, and sometimes even a sidebar, all stay the same.  Instead of a browser constantly having to reload the same thing on different page do this:

Create a full webpage template containing your header, a place for your main content, and your footer.  Include a sidebar if desired.

Use footnotes to lable the beginning and end of the different areas of your website.  To see an example, view the source of this website.  I left the footnotes in here to show how I templated this website. 

OR, here’s a little tutorial for you which I’ll be the code I copied straight from my template (without the CSS.) 

1.  First, and paste it into a text editor or your web design software like Dreamweaver, then save it as sample.html:

  • HTML CODE:
    <!– Start Header –>
    <!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>FunkyTower</title>
    </head>
    <body>
    <div id=”templateheader”><table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ id=”backhead”>
      <tr>
        <td><div align=”center”>
          <table width=”1000″ border=”0″ cellspacing=”0″ cellpadding=”0″ id=”header”>
            <tr>
              <td valign=”bottom”><table width=”400″ border=”0″ cellspacing=”0″ cellpadding=”0″ id=”navbar”>
                <tr>
                  <td><a href=”http://www.funkytower.com” class=”navbar”>Home</a></td>
                  <td><a href=”http://www.funkytower.com/webdesign” class=”navbar”>Web Design</a></td>
                  <td><a href=”http://www.funkytower.com/about” class=”navbar”>About</a></td>
                  <td><a href=”http://www.funkytower.com/contact” class=”navbar”>Contact</a></td>
                  <td><a href=”http://www.funkytower.com/faq” class=”navbar”>FAQ</a></td>
                </tr>
              </table></td>
            </tr>
          </table>
        </div></td>
      </tr>
    </table>
    </div>
    <div align=”center”><br />
      <!– End Header –>
     
      <!–begin body –>
      <br />
    </div>
    <table width=”1000″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ id=”contentholder”>
      <tr>
        <td><div align=”center”>
          <table width=”935″ border=”0″ cellpadding=”0″ cellspacing=”0″ id=”contentholder2″>
            <tr>
              <td align=”right” valign=”top”></td>
              <td align=”right” valign=”top”></td>
            </tr>
            <tr>
              <td width=”581″ valign=”top”><div align=”center”>
                <table width=”565″ border=”0″ align=”left” cellpadding=”0″ cellspacing=”0″ id=”contentmiddle2″>
                  <tr>
                    <td id=”contentheader”>&nbsp;</td>
                  </tr>
                  <tr>
                    <td id=”contentmiddle”><div class=”content” id=”content”>
                      <h1>Welcome</h1>
                      <p>Hello and Welcome to FunkyTower! </p>
                      <p>Have a great day!<br />
                        <a href=”mailTo:david@funkytower.com”>Linke Test</a></p></div></td>
                  </tr>
                  <tr>
                    <td id=”contentfooter”>&nbsp;</td>
                  </tr>
                </table>
              </div></td><!– End Body –>
              <!– Start Sidebar–>
              <td width=”354″ valign=”top”><table width=”327″ border=”0″ align=”right” cellpadding=”0″ cellspacing=”0″ id=”sidebartable”>
                <tr>
                  <td valign=”top”><p align=”right”>
                    <input name=”s” type=”text” id=”s” value=”" size=”30″ class=”searchbar” />
                    <input type=”submit” id=”searchsubmit” value=”" class=”search” />
                    </p></td>
                </tr>
                <tr>
                  <td valign=”top”><div id=”sidebar” class=”sidebar”><img alt=”" src=”images/archivestitle.jpg” width=”327″ height=”58″ />
                    <ul>
                      <li>July 2008</li>
                      <li>August 2008</li>
                      <li>September 2008</li>
                    </ul>
                    <img alt=”" src=”images/categoriesheader.jpg” width=”327″ height=”59″ />
                    <ul>
                      <li>Category 1</li>
                      <li>Category 2</li>
                      <li>Category 3</li>
                      <li>Category 4</li>
                      <li>Category 5</li>
                      <li>Category 6</li>
                    </ul></div></td>
                </tr>
              </table></td>
            </tr>
          </table>
        </div></td>
      </tr>
    </table>
    <!– End sidebar –>
    <!– Begin Footer –><br /><br />
    <table width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″ id=”footercontainer”>
      <tr>
        <td><div align=”center”>
          <table width=”935″ border=”0″ cellpadding=”0″ cellspacing=”0″ id=”footer”>
            <tr>
              <td width=”468″>Stuff and more stuff will go here</td>
              <td width=”467″>Then we’ll have more stuff right here as well!</td>
            </tr>
            <tr>
              <td colspan=”2″><div align=”center” class=”credit”>Blah blah</div></td>
              </tr>
          </table>
        </div></td>
      </tr>
    </table>
    </body>
    </html>
    <!–End Footer–>

So you can clearly see where each section starts and ends. 

2.  The next step is to divide the template into four PHP documents: header.php, body.php, sidebar.php, and footer.php

To do this, Highlight, rightclick, and cut  All the code from “<!–Start Header–>” to “<!–End Header–>”
Paste the code into a new document in notepad and save it as “header.php”

3.  Next, cut all the code from <!–begin body–> to <!–End body–>
Paste this code into a NEW document in notepad and save it as “body.php”

4.  Do the same steps for the sidebar and the footer, naming them “sidebar.php” and “footer.php”.

Now you should have four separate documents for your template: header.php, body.php, sidebar.php, and footer.php
These files must all be in the same folder.

Now all that’s left to do is create a PHP file that calls all your other php files to form one page using <?php require( ) ?>

 

5.  Open up a new notepad document and paste the following code into it:


  • <?php require(‘header.php’) ?>
    <?php require(‘body.php’) ?>
    <?php require(‘sidebar.php’) ?>
    <?php require(‘footer.php’) ?>

6.  Save it as “test.php” to the same folder location/directory as you did all the other files, or upload all the files to one folder/directory on your server.

That’s it!  Now you should have a full web page that looks just like the “template.html” file we made!  Using this method will allow your visitors to only have to load your header, footer, and sidebar just one time! 

Now, If you want to make different web pages, copy your “body.php” file and change  the content within it, and save it as a new php file like content1.php.  Then, take your “test.php” change ‘body.php’ to ‘content1.php’ and save the document as “page1.php” or “index.php” :)

On top of making your website load faster, this also allows editing to be alot simpler.  Say you made a new page and had to edit the sidebar or header so that you could add a link to that page.  Well, instead of editing SEVERAL pages to have the same effect, you just have to edit one, and it effects ALL your web pages! :)   Cool, huh?

 

What Do You Think
Did this tutorial help you?  Did you learn something new?  Have more tips to make your website run smoother and faster?  Still need help?  Let me know!  Send your questions and knowlege to david@funkytower.com! I look forward to hearing from you :)

Continue on to Part 2 for more tips on how to make your website move fast and smooth.

]]> http://www.davidcrandall.com/2008/08/07/website-performance-tips-pt-1-templating/feed/ 1