Welcome to WebmasterWorld Guest from 54.163.100.58

Forum Moderators: coopster & jatar k

Simple PHP Layout Tutorial?

Anyone know of one?

   
7:44 pm on Jan 23, 2004 (gmt 0)

10+ Year Member



Hey,

Does anyone know of a good (but easy to follow, I'm relatively new to PHP) PHP Layout tutorial? I'm looking for one similar to this one (http://www.free2code.net/tutorials/programming/php/4/PHP_Layouts.php), but easier to follow. I want to set my site up so it has like an index.php page, then when you click one of the navigation link it only loads the new content - not the whole layout (so the address bar would read like www.mydomain.com/index.php?id=links or whatever). Any ideas?

10:43 pm on Jan 23, 2004 (gmt 0)

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



First, a basic principle...


only loads the new content - not the whole layout

You can't do this with PHP in the sense that you mean. You can use PHP to generate HTML frames or Javascript that would do this. Remember, though, PHP is a server-side technology. Whether you load 17 files or one, PHP assembles a page to send to the browser and that is (almost) always true.

That said, there is still a HUGE advantage to using a template system. It won't save you anything in terms of bandwidth, but it will save you tons of time in terms of maintenance. It will be way easier to get a consistent look.

So, how could you go about it? Let's just make a really primitive, but nevertheless fairly effective template. Instead of urls like index.php?page=links, let's just go for the easiest case: links.php for your links, index.php for your index.

file: index.php
<?
$page_title = "My index page";
$content ="<h1>Main Headline</h1>";
$content .="<p>A bunch of stuff that I want to say</p>";

// now we include the default template and it expects (and requires)
// that the variables $page_title and $content be defined. It takes
// those values and plugs them into your template.

include("default_template.php");
?>

file: default_template.php
<html>
<head>
<title><?= $page_title;?></title>
</head>
<body>
<div class="header>
<?
include("header.php"); // header.php has the code that makes the top banner
?>
</div>
<div class="left_navigation_box">
<?
include ("left-nav.php"); // file that has your navigation links etc
?>
</div>
<div class="content">
<?= $content;?>
</div>
<div class="footer">
<? include("footer.php");?>
</div>
</body>
</html>

I think that will do what you want and should be fairly easy to follow.

Tom

11:20 pm on Jan 23, 2004 (gmt 0)

10+ Year Member



Tom,

Thanks for the reply. Currently I am using the include() command. For example I have a "top.php" with all the layout that appears above my content, and a "bottom.php" that contains all layout beneath my content. A sample page looks like

<?php include 'top.php';?>
All of my content of the page here
<?php include 'bottom.php';?>

Would you suggest using your way, or staying with mine? In yours, how often do I need to make a new line for $content?

2:06 am on Jan 24, 2004 (gmt 0)

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



Let's see. I would say my way is a small step up from yours on the way to building more flexible and robust templates. Other people might differ. The main difference with my version is this:

- no output occurs until the template file is included
- no processing except variable substitution in the template file.

Advantage - better separation of logic and presentation.

BTW, do you know that there are off-the-shelf templating systems? you might look into those.


how often do I need to make a new line for $content?

As often as you wish.

More often = more readable for debugging, but larger page size, since all those line feeds, tabs, and spaces end up getting sent to the user.

Tom

6:24 pm on Feb 22, 2004 (gmt 0)

10+ Year Member



Im a little confused with the:

<?
$content ="<h1>Main Headline</h1>";
$content .="<p>A bunch of stuff that I want to say</p>";
?>

Why did you use a dot in the second variable? Would the below do exactly the same or is there some advantage with the above?

<?
$content1 ="<h1>Main Headline</h1>";
$content2 ="<p>A bunch of stuff that I want to say</p>";
?>

<html>
<body>
<div class="content">
<h1><?= $content1;?></h1>
<p><?= $content2;?></p>
</div>
</body>
</html>

Thanks for your help.

Andy

7:41 pm on Feb 22, 2004 (gmt 0)

10+ Year Member



dj_lysuc,

The '.' before the = means that it is adding that line to the variable, in this case $content.

Lets see:

$content ="<h1>Main Headline</h1>";
$content .="<p>A bunch of stuff that I want to say</p>";

The .= means that it is added to the $content variable, meaning you can output everything at one, and don't have to worry about splitting it up.

I would use this in a database driven content management system, where you can output the content of the page, from fields in a database. So you can store page title, heading, content in 3 spearate fields, then on the page, it can just stick them all together and output them.

Whereas:

$content ="<h1>Main Headline</h1>";
$content2 ="<p>A bunch of stuff that I want to say</p>";

In your example, you have to output both $content and $content2 - you are having to deal with more variables.

Hope this answers your question.

wruk999.

8:02 pm on Feb 22, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Just throwin in my input, not saying it's better or worse.

I set up all my pages like so,

<?
include( 'includes/page_setup.php' );
include( 'includes/content/widgets/setup.php' );
include( 'includes/page_header.php' );
include( 'includes/content/widgets/content.php' );
include( 'includes/page_footer.php' );
?>

The includes folder has CHMOD settings to 700 so nobody can view it (600 might work also, don't remember)

  • The includes/page_setup.php file has database setup, gzip setup, nav setup, and a few functions and variables that I use from page to page.

  • The includes/content/widgets/setup.php file is where I setup all my info for my page. Including page title, description, database retrieval, and variables i'll be using on my page.

  • The includes/page_header.php file starts with doctype, nav setup and all the basic header stuff that I want to use on each page.

  • The includes/content/widgets/content.php file is just the look of the page. I just plug in the variables I created in the page setup.

  • The footer.php file is just the standard footer stuff.

    The reason widgets/page_setup.php is before the header.php file is so I can plug variables into the header also.

    The nice thing about doing it this way is that when I need to edit something it's easy to find. If I want to change the look of my content I just open up the widgets/content.php and edit there. If I want to change the logic of the page I open up widgets/setup.php and edit there.

    Another nice thing about doing it this way is that you can just plug in your include file. Just define which page you would like to use to show your content in your setup.php like so,

    <?
    include( 'includes/page_setup.php' );
    include( 'includes/content/widgets/setup.php' );
    include( 'includes/page_header.php' );
    include( 'includes/content/widgets/'. $dynamic .'.php' );
    include( 'includes/page_footer.php' );
    ?>

  • 4:17 am on Feb 26, 2004 (gmt 0)

    10+ Year Member



    Hi Twist,
    How about expanding on all this
    <?
    //Give us a this setup.php
    include( 'includes/page_setup.php' );
    //...and this one also.
    include( 'includes/content/widgets/setup.php' );
    include( 'includes/page_header.php' );
    include( 'includes/content/widgets/content.php' );
    include( 'includes/page_footer.php' );
    ?>

    in different folders I need to change to different css file
    and...
    diferent meta keywords and meta descriptions to enhance search engine results

    I have noticed var...$keywords, $meta descriptions.
    I have not captured control of vars...help!

    Where am I coming from?:
    Here is my index.php...
    <?php
    $title ='Home';
    $server = $_SERVER["DOCUMENT_ROOT"]."/";
    include $server."inc_header.php";
    ?>
    <body>
    <?php
    include $server."inc_logo.php";
    include $server."inc_topnav.php";
    include $server."inc_leftnav.php";
    include $server."inc_right.php";
    <div class="content">
    <em class="source"></em>
    <h1></h1>

    <div id="footer">
    <?php
    include $server."inc_footer.php";
    ?>
    How can I crunch it and include adding different components in the header?

    Russell Griechen

    8:19 pm on Feb 26, 2004 (gmt 0)

    WebmasterWorld Senior Member 10+ Year Member



    Here is another example. I hope it helps. Pretend widgets.php is your index.php, just replace the word widget with index.

  • widgets.php
    <?
    include( 'includes/widgets/setup.php' );
    include( 'includes/page_header.php' );
    include( 'includes/widgets/content.php' );
    include( 'includes/page_footer.php' );
    ?>

  • widgets/setup.php
    <?
    $page_title = 'Widget Central';
    $meta_keywords = 'keyword1 keyword2 keyword3';
    $meta_description = 'The worlds top widget website';
    $style_sheet = 'widget';
    $page_heading = 'Welcome to the Worlds No.1 Widget Page';
    $top_of_page = 'widgets.php';
    ?>

  • page_header.php
    <?
    echo'

    <html>
    <head>
    <title>'. $page_title .'</title>
    <meta name="Keywords" content="'. $meta_keywords .'" />
    <meta name="Description" content="'. $page_description .'" />
    <link rel="StyleSheet" href="'. $style_sheet .'.css" type="text/css" />
    </head>
    <body>
    <div class="heading"><h1>'. $page_heading .'</h1></div>
    <div class="content">

    ';
    ?>

  • widgets/content.php
    <?
    echo'

    This page is all about widgets.

    ';
    ?>

  • page_footer.php
    <?
    echo'

    </div>
    <div class="footer"><a href="http://example.com/'. $top_of_page .'">Return to top</a></div>

    ';
    ?>

    The above should produce a complete widgets page. The good part comes when you want to create another page. Lets say that next you want to create a page called sprockets.php. Just create a folder called sprockets and put 2 files in it, sprockets/setup.php and sprockets/content.php.

  • sprockets.php
    <?
    include( 'includes/sprockets/setup.php' );
    include( 'includes/page_header.php' );
    include( 'includes/sprockets/content.php' );
    include( 'includes/page_footer.php' );
    ?>
  • 1:21 pm on Feb 28, 2004 (gmt 0)

    10+ Year Member



    Thanks Twist.

    Just what I was looking for.

    8:19 pm on Feb 28, 2004 (gmt 0)

    10+ Year Member



    Thanks for the details Twist, I wanted URL's which directed to different pages as well and the title picture to change for different pages, and I have come up with this, will it work?!

    /index.php?page=page

    index.php
    <?
    if (!$page) $page = index;
    include( 'includes/'.$page.'/setup.php' );
    include( 'includes/page_header.php' );
    include( 'includes/'.$page.'/content.php' );
    include( 'includes/page_footer.php' );
    ?>

    index/setup.php
    <?
    $title_pic = 'main'
    $page_title = 'Welcome';
    $meta_keywords = 'keyword1 keyword2 keyword3';
    $meta_description = 'The worlds top website about me.';
    ?>

    page_header.php
    <?
    echo'
    <html>
    <head>
    <title>My Website - '. $page_title .'</title>
    <meta name="Keywords" content="Me, website, '. $meta_keywords .'" />
    <meta name="Description" content="'. $page_description .'" />
    <link rel="StyleSheet" href="http://domain.com/.css" type="text/css" />
    </head>
    <body>
    <img src="../images/'.$title_pic.'.jpg" width="700" height="60">
    ';
    ?>

    index/content.php
    <?
    echo'
    This page is all about me.
    ';
    ?>

    page_footer.php
    <?
    echo'
    </div>
    <div class="footer"><a href="http://domain.com/index.php">Return to top</a></div>
    ';
    ?>

    10:38 pm on Feb 29, 2004 (gmt 0)

    WebmasterWorld Senior Member 10+ Year Member



    if (!$page) $page = index;

    If index it text you should write it like this 'index' or if it is a variable like this $index. Thats the only thing that seems to stand out to me.

    Seems to look like it will work, tell me how it goes.

    11:49 pm on Feb 29, 2004 (gmt 0)

    10+ Year Member



    kool, thx. I will have a play shortly when I have setup some pages.
    9:18 pm on Mar 1, 2004 (gmt 0)

    10+ Year Member



    Hey Twist...

    widgets/setup.php
    <?
    $page_title = 'Widget Central';
    $meta_keywords = 'keyword1 keyword2 keyword3';
    $meta_description = 'The worlds top widget website';
    $style_sheet = 'widget';
    $page_heading = 'Welcome to the Worlds No.1 Widget Page';
    $top_of_page = 'widgets.php';
    ?>


    Should this setup.php be in:
    includes/widgets/setup.php
    or:
    /widgets/setup.php

    ?

    5:42 am on Mar 2, 2004 (gmt 0)

    10+ Year Member



    Another issue...
    Stylesheets.

    page_header.php
    <?
    echo'
    <html>
    <head>
    <title>'. $page_title .'</title>
    <meta name="Keywords" content="'. $meta_keywords .'" />
    <meta name="Description" content="'. $page_description .'" />
    <link rel="StyleSheet" href="'. $style_sheet .'.css" type="text/css" />
    </head>
    <body>
    <div class="heading"><h1>'. $page_heading .'</h1></div>
    <div class="content">

    ';
    ?>


    How would I handle import stylesheets.
    <style type="text/css" media="screen">@import "style.css";</style>
    syntax? in above quoted code.
    8:01 am on Mar 2, 2004 (gmt 0)

    WebmasterWorld Senior Member 10+ Year Member



    How would I handle import stylesheets.

    Not sure what you mean exactly. If you are asking if you can define what import stylesheet you would like to use and then echo in your php statement, it's the same as for regular style sheets.

    You add variables to a echo statement the same way for anything.


    $var1 = 'I ';
    $var2 = 'like ';
    $var3 = 'eating ';
    $var4 = 'cheese.';

    echo $var1 . $var2 . $var3 . $var4;


    would display, I like eating cheese.

    echo 'Sometimes '. $var1 . $var2 . $var3 .'chedder '. $cheese;

    would display, Sometimes I like eating chedder cheese

    Even this will work,

    $var1 = 'I ';
    $var1 .= 'like ';
    $var1 .= 'eating ';
    $var1 .= 'cheese.';

    echo $var1;

    would display, I like eating cheese.

     

    Featured Threads

    Hot Threads This Week

    Hot Threads This Month