Casino Games Design Theory

Newsletter Subscribe

Subscribe to our newsletter today to receive updates on the latest news and tutorials.

Basic Programming Tutorials

PHP Template Design

Welcome to the php tutorial, and today we will learn how to design php template from scratch. If you are a new to php, then make sure your basics are clear before getting into php template design.

Look at the below image, we will create simple, but effective looking php template for blogger or a small business people. We assumed that you have good knowledge of Html and CSS, and let me remind you “ We have made this php template design tutorial very simple” . This tutorial purpose is to let you understand the use of php into a html layout

 

Steps in Php template design

Step1 – What is in your mind?

We already designed html template, and applied same steps, but the design was different. Collect the information required to design php template.

  • Create a rough layout of above image to create php template.
  • Now divide that layout into parts.

Step2- Requirement for Php template design

  • Simple text editor
  • Html knowledge ( basics)
  • CSS knowledge (basics)
  • Php knowledge(basics)

Step3 – How to Implement

  • Html code
  • CSS code
  • Php code

Step4 – View your php template

  • View your designed php template
  • Source code
  • Tutorial( on request)

Let us start with the first step, and it is a rough php template layout, because we need to implement what we have planned, for that we have to make rough sketch or design to go solid.

Step1

Look at the picture below, we have created a rough layout for php template. Now what we will do is, will work on this php template layout. In our php template design we will work on parts, and then put everything intact to make it perfect design.

Let’s see what we have in our php template design:

  • Header
  • Navigation (Menu)
  • Content
  • Side-bar
  • Footer

Now we will take layouts part one by one, and will clear doubts regarding php template design.

Step2

In our PHP template tutorial, this is the easiest step, just check the requirement, and if you lack anything then make it available for you.

Step3 – Code for php template Design

This step has three parts ( Html code, CSS Code, and  Php Code), we will go for Html code first.

Html code for php template

First,we will create an html code layout, and will fill the parts in steps.

<html>

<head>  </head>

<body>

<div id="template">

<div id="header">

</div> <!-- end #header -->

<div id="menu">

</div> <!-- end #menu-->

<div id="content">

</div> <!-- end #content -->

<div id="sidebar">

</div> <!-- end #sidebar -->

<div id="footer">

</div> <!-- end #footer -->

</div> <!-- End #template -->

</body>

</html>

You can clearly see that our main container is “template”, which will wrap four more div tags ( header, menu, content, sidebar and footer). Now we will create the html code for each container( div tag) and will put it in the Html code layout.

Header

Simply put below code in your header container in the html code layout, which is in brown, and your job is done.

<h1>SharpLesson</h1>

In  php template, above code will work as heading.

Navigation

In navigation part we have home,buy,services, and about, simply paste it in html code layout’s menu container, which is in Green.

<a href="#">Buy</a>

<a href="#">About</a>

<a href="#">Services</a>

<a href="#">Home</a>

Content

This is the body of your page, you can write relevant content, and I wrote regarding php template design,  just copy and paste in the content container in html code layout, which is in orange.

<h2>Sharplesson</h2>

<h3>Content</h3>

<p>

Welcome to a php template design tutorial, here we will learn how to create a one page website from scratch. It will help you to understand the basics of template design, and will clear your basics on Html and CSS as well. If you are not familiar with Html or CSS, then some knowledge or learn along with this tutorial.

</p>

<h3>Steps in Php Template Design</h3>

<p>

Look at the picture below and tell me, did you get a rough idea on how we will plan our work?, if not then I am here to explain you in more detail. If you could see the image, then see numbers and value associated with them. In our php template design we will put everything intact to make it perfect design. Let’s see what we have at the numbers:

</p>

Sidebar

Now we will paste below code in the sidebar container of the html code layout, which is in blue.

<h3>Pages</h3>

<li><a href="#">Home</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Services</a></li>

<h3>Categories</h3>

<li><a href="#">Webhosting</a></li>

<li><a href="#">Blogging</a></li>

<li><a href="#">Template</a></li>

<h3>New post</h3>

<li><a href="#">what is post?</a></li>

<li><a href="#">How i made money?</a></li>

<li><a href="#">Never say no to SEO</a></li>

Footer

Now last is our footer, just paste the below code to the footer container in the html code layout, which is in purple.

<p>Copyright &copy 2015 <a href="/">Learn php at SharpLesson</a></p>

Now we are done with html code for our today’s topic php template design, and if you wish can test your result, but you will not get the expected result, because we have not written a CSS code for our php template design topic.

CSS code for php template Design

Let’s create a CSS code layout, and fill it in steps. The CSS code will give final look to our php template design .

body {

}

#template {

}

#header {

}

#header h1 {

}

#menu {

}

#menu a {

}

#menu a:hover {

}

#content {

}

#sidebar {

}

#sidebar a {

}

#sidebar li {

}

#footer {

}

#footer p {

}

Body

Let’s code for the body of our php template, just paste below code to CSS code layout.

background-color:#f1f1f1;

font-family: georgia,sans-serif;

color:#333;

margin:0;

padding:0;

Template

Now we will write CSS code for main container “ template”, again paste below code to CSS code layout.

width:960px;

background-color:#f8f8f8;

margin:0 auto;

border-left:1px solid #ccc;

border-right:1px solid #ccc;

Header

Below is the code for header container, just copy and paste it in a CSS code layout.

width:960px;

height:85px;

margin:0 auto;

margin-bottom:25px;

border-bottom:1px solid #ccc;

border-top:1px solid #ccc;

Header h1

Below is the simple code for h1 used in header container. Just paste it below header in CSS code layout.

padding:10px;

Menu

Now we will write code for navigation, paste the below code to the #menu in CSS code layout.

width:960px;

height:40px;

border-bottom:1px solid #ccc;

Menu a

This CSS code is for links and how they are arranged, paste it to #menu a in CSS code layout.

float:right;

display:inline;

padding:10px;

text-decoration:none;

background-color:#f1f1f1;

Menu a:hover

This CSS code will play when you will put mouse coursor to the menu items, paste it to #menu a:hover in CSS code layout.

background-color:#bababa;

height:10px;

Content

Below is the code for content part in html, just paste it in the #content of CSS code layout.

margin: 0;

border-left:1px solid #ccc;

width:675px;

float:right;

padding:10px;

Sidebar

Below is the code for Sidebar elements, just paste it to the #sidebar in CSS code layout.

width:260px;

float:left;

margin-bottom:25px;

border-bottom:1px solid #ccc;

Sidebar a

This code is for links, just paste it to the #sidebar a in CSS code layout

text-decoration:none;

border-bottom:1px solid #ccc;

Sidebar li

This code will describe the style of the list in sidebar, paste it to the #sidebar li in CSS code layout.

list-style:none;

Footer

Below is the CSS code for footer, just place it in #footer of the CSS code layout.

clear:both;

width:960px;

height:65px;

border-top:1px solid #ccc;

footer p

Below code is for the paragraph used in the footer, place it in #footer p of CSS code layout

float:  right;

padding:10px;

Now we are done with the CSS code for php template design, and now you can check your result. Which is the same as above shown picture( first image).

The last section is converting html template to php template, and we will do that using php code. Let’s see how to do that:

Php code for php template design

We will do this in the series of steps, but before that let’s create the folders and files required for php template conversion.

  • Let’s first create a folder named it php template or php_template.
  • Change the index.html to index.php.
  • Create includes folder inside the php_template folder.
  • Inside includes folder, create empty files with the names: header.php, nav.php, sidebar.php and footer.php.

Now it is a time to convert html template to php template, we will remove the containers from the html code layout, and replace it with the appropriate php code.

Note: you have to remove containers from your main index.php( we renamed index.html to index.php).

Let’s see how to replace the containers one by one, and what php code to put in place of it.

Replace – Header

We will replace html code from index.php with php code in three steps:

Step1 – let’s copy and cut the header div from the index.php.

Step2 – Go to includes folder, and open the header.php and paste the header div to it.

Header.php

<div id="header">

h1>SharpLesson</h1>

</div>

Step3- Remember, We have removed the header div from index.php in first step? We have to add a code in index.php  to call the header.php.

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

Replace – Menu div

Step1 – let’s copy and cut the menu div from the index.php.

Step2 – Go to the includes folder, and open the menu.php and paste the menu div to it.

Menu.php

<div id="menu">

<a href="#">Buy</a>

<a href="#">About</a>

<a href="#">Services</a>

<a href="#">Home</a>

</div> <!-- end #menu-->

Step3 –  Remember, We have removed the menu div from index.php in first step? We  have to  add a code in index.php  to call this menu.php.

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

Replace – Sidebar

Step1 – let’s copy and cut the menu div from the index.php.

Step2 – Go to the includes folder, and open the sidebar.php and paste the sidebar div to it.

Sidebar.php

<div id="sidebar">

<h3>Pages</h3>

<li><a href="#">Home</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Services</a></li>

<h3>Categories</h3>

<li><a href="#">Webhosting</a></li>

<li><a href="#">Blogging</a></li>

<li><a href="#">Template</a></li>

<h3>New post</h3>

<li><a href="#">what is post?</a></li>

<li><a href="#">How i made money?</a></li>

<li><a href="#">Never say no to SEO</a></li>

 </div> <!-- end #sidebar -->

Step3 –  Remember, We have removed the sidebar div from index.php in first step? We have to add a code in index.php  to call this sidebar.php .

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

Replace – Footer

Step1 – let’s copy and cut the footer div from the index.php.

Step2 – Go to the includes folder, and open the footer.php and paste the footer div to it.

Footer.php

<div id="footer">

<p>Copyright &copy 2015 <a href="/">Learn php at SharpLesson</a></p>

</div> <!-- end #footer -->

Step3 –  Remember, We have removed the footer div from index.php in first step? We have to add a code in index.php  to call this footer.php .

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

Now we are done with php template design, run your php template, you will get the same result as it was before applying php. The only difference is the php code, which we implemented in our final php template.

Note: We have just used simple php code, and we assumed that you are familiar with php as well.

Conclusion

We have just covered php template design tutorial, and hope you learned with ease. What we did in our php template design is:

  • First, create html code.
  • Second, create CSS code.
  • Finally replaced few html code with relevant php code.

Related Posts

Template Design

Welcome to a template design tutorial, here we will learn how to create a one page website from scratch. It…

Read More