Site design

It doesn't matter if you do all the error checking in the world, or if you have the most beautiful graphics, if your site or application design isn't usable, it's not going to do well. Get input and advice on usability and user interface issues here.

Moderator: General Moderators

Post Reply
Yanger
Forum Newbie
Posts: 2
Joined: Fri Jul 16, 2004 2:30 pm
Location: Latvia

Site design

Post by Yanger »

Hello everyone. I am a not quite a nocie to PHP, but a novice to design with PHP, so I have the following question:

How do I make a site's design using PHP (I wish to have a navigational bar at the top, bottom, and side [slightly different, but nevertheless]). And I do not want this to change - only the middle part (where I will place the corresponding texts/chrats/pics/setc.

How exactly do i do that? I have been told to use 'incclude', but something seems wring with that.

Thanx in advance, :wink:
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

This is a thread more for the UI section..

Moving to UI
kettle_drum
DevNet Resident
Posts: 1150
Joined: Sun Jul 20, 2003 9:25 pm
Location: West Yorkshire, England

Post by kettle_drum »

You make your site template using html/xhtml/css etc and then where you want the main content to change on each page include the required page like so:

Code: Select all

include("some/path/to/files/".$_GET['page'].".php");
And then you link to the pages on your site like:

Code: Select all

<a href="index.php?page=contact">Contact Me</a>
And when the user clicks that it will show your template plus th content of: "some/path/to/files/contact.php". You should of course check the value in the url so that people dont traverse the directories and read files there not ment to.
d3ad1ysp0rk
Forum Donator
Posts: 1661
Joined: Mon Oct 20, 2003 8:31 pm
Location: Maine, USA

Post by d3ad1ysp0rk »

in addition to kettledrums code:

Code: Select all

$safe_files = array("home","news","contact","programs");
if(!in_array($_GET['page'],$safe_files)){
die("Cannot access the file you specified");
}
else {
include("some/path/to/files/".$_GET['page'].".php");
}
lolpix
Forum Commoner
Posts: 41
Joined: Sat Jul 17, 2004 2:20 am

Post by lolpix »

I typically approach it something like this...

Code: Select all

<?php

// Initializing variables

$this_page = 'index.php';

$page_title = 'Page Title';


include 'page_open.php';        // Opens <html>, 
                                           // declares <title> = $page_title;</title>,
                                           // and stops after opening <body> tag.

include 'top_nav.php';           // Includes top navigation <div>.


include 'left_nav.php';          // Includes left navigation <div>.


include $this_page;             // Includes and displays $this_page content <div>.


include 'bottom_nav.php';    // Includes bottom navigation div.


include 'page_close.php';     // Closes </body> and </html>.

?>
How you pass the $this_page, $page_title, etc., variables is a matter of preference and need. In this case I coded them into the page because I generally do not like to allow the user inside the script any more than absolutely necessary. I can easily enough change my mind about that in the future since the $this_page (etc.) variables are already in the architecture.

P.S. I really like that $safe_files array technique, LiLpunkSkateR. (Got the author wrong on my first pass, sorry.)
Last edited by lolpix on Sat Jul 17, 2004 12:35 pm, edited 1 time in total.
lolpix
Forum Commoner
Posts: 41
Joined: Sat Jul 17, 2004 2:20 am

Post by lolpix »

Addendum: You must always include() any code that intends to use header(), setcookie(), etc., before you inlcude page_open.php or they will not work.
lolpix
Forum Commoner
Posts: 41
Joined: Sat Jul 17, 2004 2:20 am

Post by lolpix »

:idea: Come to think of it, it would probably be better to make all those includes objects instead!
d3ad1ysp0rk
Forum Donator
Posts: 1661
Joined: Mon Oct 20, 2003 8:31 pm
Location: Maine, USA

Post by d3ad1ysp0rk »

Why not have the whole thing one big included file, ie:

Code: Select all

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&#123;this_page&#125;&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;td colspan="2"&gt;Navigation links&lt;/td&gt;
&lt;/tr&gt;&lt;tr&gt;
&lt;td&gt;left nav&lt;/td&gt;
&lt;td&gt;&#123;content&#125;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;&lt;td colspan="2"&gt;bottom stuff&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
Then just replace {this_page} and {content} using [php_man]str_replace[/php_man]

Code: Select all

$safe_files = array("home","news","contact","programs");
if(!in_array($_GET['page'],$safe_files)){
  $page = "error";
}
else {
  $page = $_GET['page'];
}
$page = file_get_contents("layout.html");
$content = file_get_contents($id . ".html");
$page = str_replace("{this_page}","My site - " .$id,$page);
$page = str_replace("{content}",$content,$page);
echo $page;
Your way works also, but I'm just throwing ideas out there.
lolpix
Forum Commoner
Posts: 41
Joined: Sat Jul 17, 2004 2:20 am

Post by lolpix »

That works nicely as well. The only thing I do not like about it is the use of a big table to lay out the page. I am trying to move towards formatting layout using CSS as much as possible. However, that is my own pet idea, and tables have worked well for formatting pages for a long time.

I also think it would be better to have a nav class with subclasses top_nav, left_nav, and bottom_nav which extend nav. That way you could format their display a little differently but maintiaining the links themselves can be handled in the superclass for better integrity.
d3ad1ysp0rk
Forum Donator
Posts: 1661
Joined: Mon Oct 20, 2003 8:31 pm
Location: Maine, USA

Post by d3ad1ysp0rk »

Oh, I didn't mean to use tables really, it was just to show layout. I use divs for layout in my pages, but that is all code i typed up in 2 minutes.
The HTML can be whatever you want, thats the point, but now you have variables to work with (ie. {content}).
kettle_drum
DevNet Resident
Posts: 1150
Joined: Sun Jul 20, 2003 9:25 pm
Location: West Yorkshire, England

Post by kettle_drum »

Think we maybe going slightly over the top if Yanger is only new to php though :P Although by all means try and use these more complicated methods as you will learn more and probably have a slightly better system in the end.

Happy coding!
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post by malcolmboston »

i generally use something like

Code: Select all

require ("../includes/generic_content.inc.php");
then fgor the actual standard content to be displayed

Code: Select all

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;?php print $site_title; ?&gt;&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;?php
// include a header
print $site_header
?&gt;
&lt;p&gt; a paragraph here&lt;/p&gt;
&lt;?php
// a footer here
print $site_footerl
?&gt;
&lt;/body&gt;
&lt;/html&gt;
This way i find is very customisable and makes sites easier to maintain as making broad changes requries little to no effort whatsoever
d3ad1ysp0rk
Forum Donator
Posts: 1661
Joined: Mon Oct 20, 2003 8:31 pm
Location: Maine, USA

Post by d3ad1ysp0rk »

I just like keeping the html as neat as possible.

Code: Select all

<a href="print.php?id=&#123;id&#125;">Print Friendly Version</a>
vs

Code: Select all

<a href="print.php?id=<?php echo $id;?>">Printer Friendly Version</a>
User avatar
Zoram
Forum Contributor
Posts: 166
Joined: Sun Aug 18, 2002 3:28 pm
Location: Utah
Contact:

Include Most

Post by Zoram »

It would be a little more complex, but I was wondering what disadvantages and advantages there would be to haveing as much of the page as possible included.

Ex: All of your header is in one file down to the point of the actual content that is going to be vastly different. Then At the end there would be another include with all the code until the end of the <html> tag. Then the first of your page would just be setting variables that would be used in the page, probably as part of a page object.

Ex:

Code: Select all

<?php

// Set Page Variables <--- also get from different sources

$page_title = "An Exciting Page";

$page_selected = "home";

// etc.. other page variables that you feel are important that change and aren't a neccesarily part of your content.

require("header.php");

// Do all your design of the page content here
// This is where all of your indivual page design comes in, the rest is the usual standard stuff.

require("footer.php");

?>
It seems that this would make it so that you when you want to change things on your header and footer all the code is in the two files so you don't have to change a lot of the individual pages later.

Are there some major flaws to this UI design or is that pretty much what you were saying only in different words that make sense only to me?

edit: I guess that this is pretty much what lolpix was saying, sorry for the repetition. :oops:
Post Reply