Setting up PHP project from HTML Template

php project from html templateThis is the first step for setting up PHP project from HTML Template.For this you must have an HTML Template, if you do not have any HTML template ,download it from online resources, you can search lots of free css template from google.

I have download a sample HTML/CSS template for this tutorial.download link http://www.free-css.com/free-css-templates/page87/electronix#shout

After downloaded put it under your server root folder .in xampp ‘htdocs’ or in wampp ‘www’ folder.
extract it and rename ‘index.html’ to ‘index.php’ file .

Now create a folder i.e ‘includes’ and blank php files :
– header.php

– footer.php

– left.php

– right.php

After open the index.php file in your favourite php editor . I used dreamweaver 8. Then find header codes.It contains logo,menu etc. Mainly top common area of template above container.So cut the selected header area and paste to header.php inside ‘includes’ folder.

Similarly , you have to find left,right,footer area and paste to the files under includes folder.
Do not forget to write below php code when you cut header area in index.php

  1. <!–?php include “includes/header.php”; ?–>

Similar for all left,right,footer area.
That’s it ,we have set up a small process for creating PHP project.

Let’s talk about creating other pages in the project supposed ‘about.php’.
create a new file about.php by copying index.php file.
Open it in dreamweaver in remove extra container data .now open header.php and create a new link about.php in menu .
Access the project on your local server like http://loocalhost/project
there you can access about.php to by clicking on the top menu.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s