Creating basic php website template

No picture

About this article: Posted in: Blog / Learned along the way
By: Blockcoder ( Admin ) / 12.09.2012
Stats: no comments / Views: 1,128
Tags: , , ,

Hi again!

This tutorial is about creating a basic html and PHP website template. What you need here is (I suggest you to have):

  • A great text editor, Notepad++
  • A great ftp software, WinSCP
  • Basic knowledge about HTML & PHP (not much)

What is PHP?

“PHP is a general-purpose server-side scripting language originally designed for Web development to produce dynamic Web pages. It is one of the first developed server-side scripting languages to be embedded into an HTML source document rather than calling an external file to process data.” -Wikipedia

The code is interpreted by a Web server with a PHP processor module which generates the resulting Web page.

PHP is installed on more than 20 million Web sites and 1 million Web servers. Software that uses PHP includes MediaWiki, Joomla, WordPress, Concrete5, MyBB, and Drupal.

So, as a web designer, I think it is a necessity to understand even the basics of PHP programming. What are we waiting for?


Basics of basics of PHP

First you need to understand how, when and where to write it. You can only write PHP to its own file; “.php”. You also need the magical “<?php ?>” tags where to write php within.

Okay, now please create a file named index.php and upload it to your domain where you have an access. Go there with your browser.

Before you can see anything there, let’s write a little bit of php into the index.php file:


<?php
   echo "Hello world!";
?>

And that will “echo” the text hello world! to your page. Now you know how to write php in to your .php files. Please continue to the next step.


First php template

Let’s do something great; create these three files into your domain in a same folder:

  • header.php
  • footer.php
  • index.php

Basicly, this is the simpliest structure of a php template. You need three files: header.php, footer.php and index.php. What the hell are we gonna do with these files?


Why template files?

Again, a moment ago we made the three files. You are thinking what we are gonna do with these? Here’s propably the main reason: it saves time! — A LOT!

Why? Because normally you build websites like this: index.html, contactus.html, about.html etc. AND – You write all code which is in like “head” -tag, or “footer” -tag in every .html file you have there — you are duplicating the same code many times — which is bad. DO NOT DUPLICATE YOUR CODE.

Wouldn’t you want a to have a ONE FILE, like “header.html” -file and when you write something in the file, it changes in every .html (contactus.html, about.html etc…) files at once? Wouldn’t be great? Yeah — I think so too.

I have a solution for you – the files you just made and some php -code:

  • header.php: all code what is within the html -tag and head -tag, usually it starts the body -tag too.
  • footer.php: all code what is included in every page or sub page in the footer section, like contact information and about the page information. This ends the body -tag and other possible “container” -tags.
  • index.php: website’s content.

The header.php:


<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>

As you can see, it contains the basic information about the website. And it starts the body -tag.

The footer.php:


</body>
</html>

This file ends the body -tag and html -tag. Nothing more.

The index.php


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

<h1>Main heading</h1>
<p>This is your first php template.</p>

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

We have something special here. The include -functions. The include -function includes all contents of a file (file’s url) you write in it. In this case, it includes all contents of the header.php and footer.php -files.

Why do we do this? Because, when you start making sub pages like about-us.php, contact.php etc. and write these include -functions in every sub page you create so you don’t need to change for example only but header.php if you want to change header information in every page you create. Do you get it?


Creating a sub page

Okay, after this you will figure it out if earlier you didn’t. Let’s create about-us.php.

about-us.php


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

<h1>About us</h1>
<p>Here is the company information and why are we doing this bla bla...</p>

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

You see, we are including the header.php and the footer.php again. Because, if we change the footer.php information now, the changes will affect in the index.php and about-us.php because we are including the same footer.php file in both of these. Beautiful.


End conclusion

Yes, now you know the basics of how to make the php template. When you internalize this tutorial, it will one the best things you know when fighting with websites.


Leave a Reply

Your email address will not be published. Required fields are marked *

*

9,787 Spam Comments Blocked so far by Spam Free Wordpress

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>