design tips?

allworknoplay · 04-26-2009, 08:25 PM

I don't use Smarty templating engine or any other template framework...perhaps I should...but anyways...here's how I normally design my sites, I know it's kinda "old school" but would like to hear your thoughts and perhaps get ideas on how you guys go about designing sites....

My design, whether it's based on dynamic or fixed width is usually as follows:

header.html
index.html
footer.html

The index.html is where all my pages are and the header/footer almost rarely changes. If I do need to make a change, then it affects all other pages since they all call the header/footer pages.

There are 2 issues I have with this design though.

1) Since I use Dreamweaver as my WYSWIG, the CSS is called from the header.html file. This means that when I am working on the (main body) page, I don't actually get to see the CSS affects since the page doesn't know about it. Only when I upload the page does it call the "header.html" file and the CSS is used.

I can though call the CSS temporarily within the file while working on it, but then I'd have to remove it so I don't call it twice...it's just a pain though.

2) If I want to change the overall design of the (body), this is where it causes a problem, because I would have to go through ALL the pages to change the whatever new style I come up with...

Anyways, this was my method and has always been my method to avoid using frames. I'm not sure if "frames" is even used anymore in today's designs??

Is it taboo??

So my question to you guys is, what are your techniques when it comes to overall design of a website? How do you design a site in which, if you come up with a new design, you don't have to go through numerous pages to update them?

Sam Granger · 04-26-2009, 08:35 PM

I use a Template Class - basically, I can have an index.html file with php include for header and footer inside, parse variables to it, have while loops if needed. I always design a page in html, once it's complete, slide header, index and footer up. Frames - I never use them, but iframes come in handy :)

Anyway, hope my class will help you:

PHP Code:


			
<?php

/**
 * @package PHPSauce Store
 * @author Sam Granger
 * @version 1.0
 * @copyright 2009, PHPSauce
 */

class tplClass {

    private $vars = array(),
            $core;

    public function _construct($core) {
        $this->core = &$core;
    }

    public function set($var = '', $data = NULL, $reset = false) {
        if ($reset) $this->vars = array();
        $this->vars[$var] = $data;
    }

    public function set_vars($vars = array(), $reset = false) {
        if ($reset) {
            $this->vars = (is_array($vars))? $vars: array();
        } else {
            if (is_array($vars)) $this->vars = array_merge($this->vars, $vars);
        }
    }

    private function displayBlock($block = '') {
        $this->render($block . '.html', VIEW_PATH, true);
    }

    public function render($tpl_file = '', $tpl_path = null, $direct_output = false) {
        extract($this->vars);
        ob_start();

        if (include $tpl_path . $tpl_file) {
            $contents = ob_get_contents();
        } else {
            return false;
        }

        ob_end_clean();

        if ($direct_output) echo $contents;

        return $contents;
    }
}

?>

PHP Code:


			
$connect = new dbClass(); // lets get some content from db!
$connect->dbConnect( DBHOST, DBUSER, DBPSWD, DBNAME );

$template = new tplClass(); // start tplClass

$query = 'SELECT * FROM products ORDER BY product_id DESC';
$result = $connect->executeQuery($query);
while($fetchproducts = mysqli_fetch_assoc($result)) {
    $products[] = $fetchproducts;
}

$variables = array
(
    'username' => $username,
    'products' => $products
);

$template->set_vars($variables);
$template->render('idx.html', VIEW_PATH, true);

VIEW_PATH is defined in this example but you can have 'templates' instead to let the class know, where the file is.

idx.html is the template file.

Example:

HTML Code:

<?php
$this->displayBlock('header');
?>
	<h2>Welcome to PHPSauce.com</h2>
	<p>Slogan goes here!</p>
	<p>PHPSauce.com offers top of the range scripts for your website needs. Prices are very affordable.</p>
     <?php if (count($products) > 0) { foreach ($products as $product) { ?>
        <div class="product">
			<h2><a href="<?php echo 'product/' . $product['product_slug']; ?>"><?php echo $product['product_title']; ?></a></h2>
		</div>
    <?php } } else { ?>
    <div>No Products found</div>
    <?php } ?>

<?php
$this->displayBlock('footer'); // show the footer.html file in tpl dir
?>

allworknoplay · 04-26-2009, 08:58 PM

Thank you Sam,

I will take a look, I'm a newbie when it comes to OO so it might be a little tough for me to understand how to fully use it...

So really, your design is kinda like mine but taken to another level, where the header/body/footer is all within the class and then you just call that class for any page you make right?

So let's say you had these 5 pages..

index.html, support.html, about.html, contact.html, services.html

They would just somehow call that one class and they inherit whatever style you initially designed?

Sam Granger · 04-26-2009, 09:10 PM

Well, lets say I have index.php - I define some variables (template filename and content) and send that to the class - class handles it from there, if I want to include a header file, I define that in the template class.

In my header I can also define variables the same way I do in the page that includes it does. CSS link is in the header.

Sam Granger · 04-26-2009, 09:11 PM

PS. VIEW_PATH is a define in the class - so you;d need to change that to the dir that contains the files.

Sam Granger · 04-26-2009, 09:13 PM

Example of header.html - also placed in the template dir.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta name="author" content="">

	<title>PHPSauce <?php echo $title; ?> (Powered by PHPSauce Store)</title>
	<link rel="stylesheet" href="<?php echo ROOT_URL; ?>screen.css" type="text/css" />
	<script type="text/javascript" src="<?php echo ROOT_URL; ?>js/jquery.min.js"></script>
	<script type="text/javascript" src="<?php echo ROOT_URL; ?>js/jquery.cart.js"></script>
</head>

<body>
<div id="wrapper">
	<div id="header">
		<div class="cart">
			<span>your cart has 0 items</span>
			<a href="#" id="modal">shopping cart</a> | <a href="/account/create">create account</a> | <a href="/account/login">log in</a>
		</div>
		<h1><a href="<? echo ROOT_URL; ?>" title="<? echo STORE_NAME; ?> Homepage"><? echo STORE_NAME; ?></a></h1>
	</div>
	
	<div id="nav">
		<ul>
			<li<? if($module == null || $module == 'idx') { ?> id="selected"<? } ?>><a href="<? echo ROOT_URL; ?>"><span>home</span></a></li>
			<li<? if($module == 'about') { ?> id="selected"<? } ?>><a href="<? echo ROOT_URL; ?>about"><span>about</span></a></li>
			<li<? if($module == 'product') { ?> id="selected"<? } ?>><a href="#"><span>category</span></a></li>
			<li<? if($module == 'faq') { ?> id="selected"<? } ?>><a href="<? echo ROOT_URL; ?>faq"><span>f.a.q.</span></a></li>
			<li<? if($module == 'clienthome') { ?> id="selected"<? } ?>><a href="<? echo ROOT_URL; ?>account"><span>client area</span></a></li>
			<li<? if($module == 'contact') { ?> id="selected"<? } ?>><a href="<? echo ROOT_URL; ?>contact"><span>contact</span></a></li>
		</ul>
		<br class="clear" />
	</div>

allworknoplay · 04-26-2009, 09:20 PM

Interesting.....

Do you think Smarty and those other templating engines work relatively the same process?

I'll play around with your code and put something up for you to see....

Thanks again!

Sam Granger · 04-26-2009, 09:22 PM

Yep, but smarty is quite large, has lots of functionality that I don't need. But it has some nice addons. This is just nice and simple.

allworknoplay · 04-26-2009, 09:25 PM

Quote:

Originally Posted by Sam Granger

Yep, but smarty is quite large, has lots of functionality that I don't need. But it has some nice addons. This is just nice and simple.

That's what I like....I think I understand your PHP class code..

Hopefully I can whip something up real quick in the next few hours.....

I'll just leave out the DB part since I don't need to connect to anything right now....

My current method must really be old school!!!!!!!!!

Sam Granger · 04-26-2009, 09:29 PM

Old school you might say - template files are easier to work with, but PHP in itself is a templating script. There's nothing wrong with your method, and it's the 'fastest'. But this just makes it a tad easier.

allworknoplay · 04-26-2009, 09:43 PM

Quote:

Originally Posted by Sam Granger

Old school you might say - template files are easier to work with, but PHP in itself is a templating script. There's nothing wrong with your method, and it's the 'fastest'. But this just makes it a tad easier.

No, I'm tired of my method. I want something new to do..

Would you say this is how you are setup?

Path Info:

/www/ = main www directory that holds your calling pages
/www/images = images directory
/www/template = template files and php class files
--------------------
/www/template/header.html
/www/template/main_body.html
/www/template/footer.html

non-public folder
/whatever_directory/db.php = file to connect to DB

Sam Granger · 04-26-2009, 09:54 PM

Exactly :)

xenon · 04-30-2009, 09:39 PM

A template doesn't need to connect to the database. As it doesn't require ANY resources to parse and display it (I am here referring to CSS - which is the presentational part of an application or a website, but not tied to the template files themselves - and JavaScript - which is the functionality given to the client by the application as a whole, not by the template files). So, I'd suggest you stick to the purpose, and that's all. Make a connector between a template file and the database (that would be the Controller in an MVC oriented system), and use that to perform operations on the DB, and do other stuff like that which doesn't have anything at all to do with the purpose of templating an application/web site/etc.

allworknoplay · 05-01-2009, 01:48 AM

Quote:

Originally Posted by xenon

A template doesn't need to connect to the database. As it doesn't require ANY resources to parse and display it (I am here referring to CSS - which is the presentational part of an application or a website, but not tied to the template files themselves - and JavaScript - which is the functionality given to the client by the application as a whole, not by the template files). So, I'd suggest you stick to the purpose, and that's all. Make a connector between a template file and the database (that would be the Controller in an MVC oriented system), and use that to perform operations on the DB, and do other stuff like that which doesn't have anything at all to do with the purpose of templating an application/web site/etc.

Thanks for the tips. I'll see if I can come up with a very very simple design and you guys can nitpick it...