Dynamic website using php – part 1

by krike in PHP & MYSQL / Tutorials on 31 Aug 2009


This entry is part 1 of 3 in the series Dynamic web tutorials

“Dynamic website tutorial serie” is a serie of tutorials that will teach you the basics in building a dynamic website using PHP and MySQL. We will be building a template system, membership system, and a lot more… each tutorial will handle a different topic.

It is recommended to have a little bit of knowledge about PHP and MySQL and even css. If you don’t it’s no big deal but make sure to do some research about the things you don’t understand. You can also ask questions by posting a comment, or post in our forum

W3C schools is also a very good place to start learning about PHP, MySQL, CSS, … and more W3C is no longer considered a reliable source as it badly explains the purpose of certain html tags and other programming languages.

Before we start…

Before we start there are a few things that need to be prepared for this tutorial. First you must choose an editor, I’ve chosen for dreamweaver and will also define a new site with the site manager’s wizard because it’s easier to manage the files for the site. If you have chosen for another editor you can skip the following steps to define a site within dreamweaver.

Define a new site in dreamweaver

local info

advanced_local_info

For local root folder you must first choose the map where you will save your files

For HTTP address you must specify the link dreamweaver should open when you press F12 (mostly http://localhost + the name of your map)

advanced_testing_server

For Server model choose PHP MySQL

For Access choose local/network, here you must retype the url dreamweaver should open. (just like in local info)

WAMP

wamp5_v2

It is very important that, if you work localy, you need to install WAMP server on your computer in order to run php files. My folder is dynamicweb and placed in the www folder of my wamp server

You can find more information about wamp at wampserver

Dynamic website part 1

Let’s start by creating our basic folder structure. Create following maps: css, js, images.

The reason for this is simple, always keep your files structured and consistent. Otherwise you will have a mixture of different files and you won’t make it out anymore

map_structure

Create 3 php files now and name them header.php, index.php and footer.php (next to the maps, not in one of them)

3_first_php_files

What we are about to do is really simple. We are going to copy/paste the doctype header tag and all the other open tags in header.php and al the closing tags in footer.php. With other words we are going to split a standard html document in 2. The only thing we need to do then is to include header.php at the top of index.php and footer.php at the bottom.

Copy paste the following code into header.php

<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;><br />
  <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;><br />
  <head><br />
  <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /><br />
  <title>Your site title here</title><br />
  </head><br />
  <body><br />
  <div id=&quot;wrap&quot;><br />
<div id=&quot;header&quot;></div><!-- end of div header <br />
<div id=&quot;container&quot; class=&quot;clearfix&quot;>

Nothing special here, only standard HTML code

headercode_toevoegen

Copy paste the following code into footer.php

</div><!-- end of div container --><br />
  </div><!-- end of div wrap --><br />
<div id=&quot;footer&quot;></p>
<p></div><!-- end of div footer --><br />
  </body><br />
</html>

footercode_toevoegen

Tip: Like you can see I always add comments when closing my div’s, this has the advantage that I never have to guess what div it’s closing.

Now open index.php en with the help of the include function we will include header.php and footer.php. You can add some text between the 2 includes to give it a bit of content

index_include_header_footer

When you open index.php with your browser (for me using the url http://localhost/dynamicweb/index.php) you should only see the content or text you added in index.php

But if you go to view -> page source (ctrl + U in firefox) you can see that (thanks to the includes) header.php, index.php and footer.php was merged to 1 html page

The huge advantage here is that we can include header.php and footer.php in any page we want to use the same html structure for every page. Also when you need to edit the layout you will only have to edit header.php and footer.php instead of copy pasting all the changes you make in each page.

view_page_source

Lets add a sidebar, create a new file called sidebar.php

create_sidebar

We are going to include the sidebar in header.php, just above the container div. We import it in the header cause the sidbar wil be the same on every page.

sidebar_includen

It’s now time to add the styles. Now this is one hell of a job so I allready made the styles for you. Let’s start by creating a new css file in the css folder and name it reset.css

tip: The problem with most browsers is that they never show the same elements the same way so it’s a good thing to hit the reset and set everything to 0. This is what will be doing with the reset.css. You can read more about reset styles here

Copy paste this code into the reset.css

  /****** Reset ******/
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0px;
padding:0px;
}
table {
border-collapse:collapse;
border-spacing:0px;
}
fieldset,img {
border:0px;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0px;
}

Create a new file in the css map and call it style.css and copy/paste the following code in the stylesheet

/* CSS Document */
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}

/****** CLEAR FIX (to push the footer to the bottom) ******/
 .clearfix:after
 {
 content: &quot;.&quot;;
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
 }
 .clearfix {display: inline-block;}
 /* Hides from IE-mac */
 * html .clearfix { height: 1%;}
 .clearfix {display: block;}
 /* End hide from IE-mac */

/****** Basic elements ******/
 body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #000;
 text-align:center; /*TO MAKE SURE EVERYTHING IS CENTERED IN INTERNET EXPLORER*/
 }
a:link, a:visited
 {
 color:#303123;
 font-weight:bold;
 text-decoration:none;
 }
a:link, a:hover
 {
 color:#505332;
 font-weight:bold;
 text-decoration:underline;
 }
img
 {
 padding: 0px;
 margin: 0px;
 border: none;
 }
h1
 {
 font-size: 26px;
 font-weight: bold;
 margin: 10px 0px;
 padding: 3px;
 }
h2
 {
 font-size: 22px;
 font-weight: bold;
 margin: 10px 0px;
 padding: 3px;
 }
h3
 {
 font-size: 20px;
 font-weight: bold;
 margin: 10px 0px;
 padding: 3px;
 }
h4
 {
 font-size: 18px;
 font-weight: bold;
 margin: 6px 0px;
 padding: 2px;
 }
h5
 {
 font-size: 16px;
 font-weight: bold;
 margin: 6px 0px;
 padding: 2px;
 }
h6
 {
 font-size: 14px;
 font-weight: bold;
 margin: 6px 0px;
 padding: 2px;
 }
p
 {
 margin: 5px 0px;
 padding: 3px;
 }

/********* Basic layout *********/
 /****** Header ******/
 #header {
 padding: 0px;
 height: 200px;
 width: 960px;
 background-color:#999999;
 position: relative;
 text-align:left;
 }
#header a:link, #header a:visited
 {
 color: #FFFFFF;
 text-decoration: none;
 }

#header a:hover, #header a:active
 {
 color: #FFFFFF;
 text-decoration: underline;
 }

/***** Navigation *****/
 #navigation
 {
 position: absolute;
 left: 3px;
 top: 106px;
 width: 619px;
 height: 86px;
 }

/****** Footer ******/
 #footer{
 padding: 0px;
 width: 960px;
 background-color:#999999;
 text-align:left;

 /*Important to use for the clearfix (pust footer to bottom)*/
 position: relative;
 margin: -150px auto 0px auto; /* negative value of footer height */
 height: 150px;
 clear:both;
 }

/****** Container ******/
 #container {

 width: 654px;
 position: relative;
 margin: 0px;
 text-align:left;
 clear:both;

 /***** needed for the clearfix *****/
 padding: 0px 4px 150px 0px;
 }

/***** Wrap *****/
 #wrap
 {
 margin: 0px auto;
 width: 960px;
 padding: 0px;
 }

/****** Sidebar******/
 #sidebar
 {
 float: right;
 width: 280px;
}

As you can see I’ve seperated each main part to be more structured. This is a must if you want to keep everything organised, it is very important to have a good structure in your css to find your way through all the styles.

tip: To make it simple, all the styles that’s a child of containr should be added under /***** Container *****/

Now we just need to import the 2 stylesheets in header.php, so open header.php and add the following code below the title tag.

<link rel="stylesheet" type="text/css" href="css/reset.css">
 <link rel="stylesheet" type="text/css" href="css/style.css">

The result

result

I also added the stickyfooter css hack to stick the footer at the bottom even if there is not much content in the page.

Let’s refresh!

1) We have split an HTML file in 2, the first part we added in the header.php and the second part in footer.php. We did this to create a dynamic

2) template system so that we only have to edit 2 files if we would like to make changes to our theme.

3) It’s important to be consistent. You have to always add comments when closing your div’s or any other element and organise and structure your css style.

Conclusion!

I hope you have learned from this tutorial how to create a simple file structure so that you would only have to edit 2 files when editing your style. If you have any question or suggestion for the comming tutorials from the series you are always welcome to leave a comment or post a new topic in our forums.

Series Navigation

Dynamic website part 2 >>

Written by krike

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet nisl nisl. Ut interdum libero vitae quam ultricies et lacinia elit aliquet. Praesent tincidunt, sem tempus feugiat feugiat, turpis tellus scelerisque erat, sit amet feugiat neque arcu ac lectus. Sed at mi et elit interdum scelerisque vitae eu felis.

krike has written 77 posts.

  • Rajan

    Hey it was a good tutorial. It helps when we have to create more than 20 pages. Thanks a lot.
    can you please sen dme the link for table less designs. I dont know how to arrange divs. It will be helpful.

    Thanks.

    • http://blog.cmstutorials.org krike

      @Rajan: you are welcome :)

      do you need a tutorial on how to create your design with tables? if that’s what you are searching for you can go to http://www.slicingguide.com
      that website is a complete tutorial on it’s own how to slice your design and tables.

  • http://graphicbeacon.com graphicbeacon

    @Rajan…check nettuts.com. There are countless written tuts and screencasts on how to create tableless web layouts

    http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

    http://net.tutsplus.com/videos/screencasts/slice-and-dice-that-psd/

  • http://blog.cmstutorials.org krike

    yep those are excellent tutorials, make sure you read throught them :D

  • http://www.invictatrader.com Ed

    Excellent tutorial. Is it possible to control the font style in the header.php file itself?
    Thank you.

  • http://cmstutorials.org krike

    yes you can

    just make sure the following code is between the head tags (< head>< /head>) I added some space to the open tag otherwise it wouldn’t show up in the comment

    < style type="text/css">
    body
    {
    //some font style for the body
    }
    < /style>

    however I do not recommend this approach unless you have a specific reason

  • http://graphicbeacon.com graphicbeacon

    @Ed – yeh just set the ‘font-family’ property with a value of course and youre good to go :)

    nettuts.com, w3schools for extensive tutorials on CSS if you have not bookmarked this. Wish you the best.

  • http://www.invictatrader.com Ed

    Will this apply to all the links in the header.php file? I only want a specific couple of links sized as the rest are controlled in the CSS>
    Thank you.

    • http://cmstutorials.org krike

      @Ed: no, it will apply that to all the links in your page because you include header.php footer.php in index.php.
      if you want specific links to be handled differently you need to put them in a div with a class or id, eg:
      note* I added some spaces to the div and a tag so it could be displayed in this comment but you should remove those spaces

      < div class=" links">
      < a href="" rel="nofollow">your link
      < /div>

      and in you css file (not header) you add the following

      .links a:link, .links a:visited
      {
      //styles for this special links when inactive (not hovered)
      }

      .links a:active, .links a:hover
      {
      //styles for this special links when active (hovered)
      }

  • http://www.graphicbeacon.com graphicbeacon

    @Ed..if the links are spread across the page, the it will be good to add the class to the anchors or hyperlinks themselves like this

    < a href="http://www.site.com" class="green" title="" rel="nofollow">link text< /a>

    And reference it between the style tags like this

    a.green {color: green}

    Check the prev links i gave. Also go to alistapart.com

    • http://cmstutorials.org krike

      @graphicbeacon: I modified the code of the link as it would not appear, and there was no class in your link ;)

  • http://graphicbeacon.com graphicbeacon

    @krike – i did add a class to the link (class=’green’) except i did not have a ‘rel’ attribute.

    • http://cmstutorials.org krike

      @graphicbeacon: yes I know but probably wordpress who removed it.. and I did not add the rel attribute :D that’s the only thing I don’t like about wordpress it changes your code and mess things up sometimes

  • http://www.invictatrader.com Ed

    Thank you guys. Appreciate the help.

    • http://cmstutorials.org krike

      @Ed: you are welcome

  • http://graphicbeacon.com graphicbeacon

    @Ed: No problem. Was great helping.
    @krike: hopefully wordpress will sort it out in future :)

    • http://cmstutorials.org krike

      @graphicbeacon: yes I really hope so :)

  • Tuff

    Thanks, it hope so

  • Rubi Gayer

    Dreamweaver has been for a while my goto program for a long time. I really do not know what I would do with out it. There were moments when I initially started working with the program, and I thought it was way too complex. Now I fly around it, and it has become a strong asset in my tool box. Anyways thanks for the posting.

    • http://cmstutorials.org krike

      @Rubi Gayer: thank you :)

  • http://invictatrader.com Ed

    WordPress is definitely the best out there.

  • http://www.w3graphix.com fazilvn

    This tutorial was really helpfull

    • http://cmstutorials.org krike

      #fazilvn: glad it helped you :)

  • prakash

    is it a dynamic web site it dont need some things like session coockie etc

    • http://cmstutorials.org krike

      @prakash: yes but it’s just not covered in this tutorial. This is part one of this tutorial serie.

  • dwwgosport

    Thanks for the tutorial I am wogrking through it…
    what goes in the sidebar.php file???

    • http://cmstutorials.org krike

      @dwwgosport: You are welcome. And you can put in the sidebar whatever you want :)

  • sriram

    Nice tutorial, its helps a lot…
    Keep up your good work…

  • Shyman

    I want to design a comment box like this to append to a page on the site am developing how can i do this? Pls refer me to any tutorial on this or mail one to me on seyeadeniyi@gmail.com if you have.

    urgent for me pls.

  • http://www.jaintigers.com robin

    plz sent me how can i desined my master page and giv me some professional templete page

    thanks

  • Rafael Silva

    First of thanks for the awsome tutorials so my question is on a tutorial you did a while title was dynamic website using php part 1 I have a javascript custom lib that handle a lot of the ui in my pages so it was working before where my content will scroll y axis to the left and my sidebar will magically apear not real just over lap content and hide sidebar with css but anyways of topic well now i push the button i have that makes all this happen now it doesnt work is that because it looks for two ids when button is pushed one is in the header.php and the other is the sidebar.php so hopefully i was specific but if you have problems email me asap ill keep working on my bug in the mean time thanks again and keep up the great work.