• This is a read only backup of the old Emudevs forum. If you want to have anything removed, please message me on Discord: KittyKaev

[Tutorial] Simple PHP template framework

Hyperion

Hyperion

Founder
PHP Template
E-Z Framework​


I hope you enjoy this tutorial as much as I did writing it. I got tired of fixing my
epic space bar typos, but the code should be clean of it. Hence the demo..

Shall we begin?

First of all, make a folder somewhere and name it "Faded_is_awesome" and
then in that folder, make the following subfolders:
\include
\pages
\vars

Instead of starting with the usual index file, let's jump to the header. This
is where it begins anyway right? So let's put in our basic default HTML header info.
(save this as header.php and place in the include\ folder)
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>EmuDevs</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="title" content="EmuDevs">
    <meta name="keywords" content="php,theme,layout">
    <meta name="description" content="This is a simple php layout">
    <meta name="author" content="Nomsoft">
    <link rel="stylesheet" type="text/css" href="./style.css" media="screen" />
</head>
<body>

Do you need an explanation for everything? Gawd, use google. ^.^
If you're coding a website, most of the html should be obvious.
You have your basic header with a selected language, a site title and
some meta tags. The keywords, description and author tags are helpful
for SEO. Then we have your link to the CSS file you will be using
to help create your template.

Let's finish this page off with a footer, we will just put this in it for now:
(save this as footer.php and place in the include\ folder)
Code: 
</body>
</html>

Hey, now it's a web page. Good job! But let's do some more ;D

Let's put in the style.css we have linked in the header file.
(save this as style.css and place in the root \ folder)
Code: 
body {
    background-color: #303030;
    font-family: Verdana;
    font-size: 14px;
    color: #dcdcdc;
    margin: 0;
    padding: 0;
}

#wrapper {
    width: 1000px;
    background-color: #212121;
    margin: 0 auto;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

#header {
    width: 1000px;
    height: 150px;
    margin: 0 auto;
    margin-bottom: 25px;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    background-image:url('images/header.png');
	text-align: center;
}

    #header h2 {
        padding: 10px;
    }

#nav {
    width: 1000px;
    height: 40px;
    border-bottom: 1px solid #ccc;
}

    #nav a {
        display: inline;
        padding: 10px;
        text-decoration: none;
        background-color: #2a2a2a;
        color: #ffffff;
    }

        #nav a:hover {
            background-color: #d4d4d4;
            height: 80px;
            color: #000000;
        }

#content {
    width: 675px;
    float: right;
    margin-bottom: 25px;
}

    #content a {
        text-decoration: none;
        color: #ffffff;
    }

        #content a:hover {
            text-decoration: none;
            color: #3377d7;
        }

#sidebar {
    width: 180px;
    float: left;
    margin-bottom: 25px;
}

    #sidebar a {
        text-decoration: none;
        color: #ffffff;
    }

        #sidebar a:hover {
            text-decoration: none;
            color: #3377d7;
        }

    #sidebar li {
        list-style: none;
    }

#footer {
    clear: both;
    width: 960px;
    height: 120px;
    border-top: 1px solid #ccc;
	text-align: center;
}

    #footer p {
        padding: 10px;
    }

Now we will get into the PHP, starting with a variables file. This file will
contain any information you need it to, so you may call them from another php.
(save this as var.php and place in the vars\ folder)
Code: 
<?php 
$header='<h2>My PHP Template</h2>';
$footer='<p>&copy 2013 EmuDevs.com</p>';
$sidebar='<p>Text or Links here.</p>';
$maincontent='<h2>Welcome!</h2><br /><p>text, links, pics, forums, iframes, whatever... Just put something here ;)</p>';
?>

This is useful mostly for titles, headers, short descriptions and
even some functions. You are able to use HTML code inside the '' tags.

I only put 'maincontent' in there as an example. If anything, put your large content in the php page itself.


We will now make the sidebar and navigation files real quick.
(save this as sidebar.php and place in your include\ folder)
Code: 
<div id="sidebar">
    <?php echo $sidebar ?>
</div>

(save this as nav.php and place in your include\ folder)
Code: 
<div id="nav">
<center>
    <a href="?p=main">Home</a>
    <a href="?p=about">About Us</a>
    <a href="?p=contact">Contact</a>
    <a href="?p=faq">FAQ</a>
</center>
</div>

Now go back into your header.php file and add to the top:
Code: 
<?php include('./vars/var.php'); ?>

and add this after <body>:
Code: 
<div id="wrapper">
<div id="header">
	<?php echo $header ?>
</div>

Also in your footer.php, add above </body>:
Code: 
<div id="footer">
    <p><?php echo $footer ?></p>
</div>
</div>

Now let's make an example page with the 'maincontent' in variables.
(save this as main.php and place in pages\ folder)
Code: 
<div id="content">
	<?php echo $maincontent ?>
</div>

Okay, now we should have a working template seperated in multiple files. Seems pointless
right? Kinda, but it's also the most organized and more professional.

It's time to bring it all together with the index.
(save this as index.php and place in root \ folder)
Code: 
<?php
$page = $_GET['p'];

@include('include/header.php');
@include('include/nav.php');

if ($page == "")
{
    @include('pages/main.php');
}

switch($page)
{    
    case "main":
        @include('pages/main.php');
        break;
}

@include('include/sidebar.php');
@include('include/footer.php');
?>

Let's explain this. Your page $_GET 'p' is for displaying the multiple pages
on the same index.php file. (eg: /index.php?p=main) This is controlled by
the case switching which is explained below.

Then you have your @includes displaying your included header, nav, sidebar and footer templates.
Once you've tweaked these php files to your liking, you should never need to edit them again unless updating.

The 'if' condition is for 'if' the ?=p is blank or unknown, it will return the main.php or if you'd like, a 404 page.

Your case switching you need to update when you add/remove pages. Works like the 'if' condition, so
'if' ?p=main, it will return main.php or whatever other case you make. This needs to be added for
each new page or it will return the default!

You now have a simple working php template that is extremely easy to customize.

Here is a working demo of this tutorial: Click meh


If you're just lazy and want to download the template without reading this tutorial then you can just click on lazy.

This tutorial has been brought to you by me, the cool admin :whoo:
Thanks for reading EmuDevs Community \o/
 
Rochet2

Rochet2

Moderator / Eluna Dev
Uh, nothing, looked wrong and didint test.
Also, the guide was somehow messed.

Would love to fix my bad coding on my site :|
 
Last edited:
Hyperion

Hyperion

Founder
Rochet2 said:
Uh, nothing, looked wrong and didint test.
Also, the guide was somehow messed.

Would love to fix my bad coding on my site :|
Click to expand...

Yeah. Randomly the
Code: 
 wont show in the posts unless I edit+save the post. Still trying to find out why it does that
 
ExonatioN

ExonatioN

Noble Member
Great job Faded, currently learning php, well i want to atleast know the basics of php so it's really useful.
 
You must log in or register to reply here.
Top