31

AUG

Dynamic website using php – part 1

by krike in PHP, Tutorials

Author: krike

I'm an enthousiast web designer/developer who's trying to learn as much as possible and likes to share his knowledge with others.

“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

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.

Follow us on Twitter, or subscribe to our rss feed.

Related posts

21 Comments

  1. Rajan on 23 Sep 2009

    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.

  2. krike on 23 Sep 2009

    @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.

  3. graphicbeacon on 29 Sep 2009

    @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/

  4. krike on 04 Oct 2009

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

  5. Ed on 19 Oct 2009

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

  6. krike on 19 Oct 2009

    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

  7. graphicbeacon on 20 Oct 2009

    @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.

  8. Ed on 20 Oct 2009

    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.

  9. krike on 20 Oct 2009

    @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)
    }

  10. graphicbeacon on 20 Oct 2009

    @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

  11. krike on 21 Oct 2009

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

  12. graphicbeacon on 21 Oct 2009

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

  13. Ed on 21 Oct 2009

    Thank you guys. Appreciate the help.

  14. krike on 21 Oct 2009

    @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

  15. krike on 21 Oct 2009

    @Ed: you are welcome

  16. graphicbeacon on 22 Oct 2009

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

  17. krike on 22 Oct 2009

    @graphicbeacon: yes I really hope so :)

  18. Tuff on 04 Dec 2009

    Thanks, it hope so

  19. Rubi Gayer on 05 Mar 2010

    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.

  20. krike on 06 Mar 2010

    @Rubi Gayer: thank you :)

  21. Ed on 08 Mar 2010

    Wordpress is definitely the best out there.

Drop us a word

AudioJungle