[RESOLVED] Use Include to load web page into <div> section

php_beginner_83

Hi All

I'm a beginner to php and hoping some of you can help me.
I'm building my own website and have created the layout of it using html <div> sections. I have a navigation panel
<div id="navigation">
and in this I have several links. I would like to be able to click on one of these links and depending on what has been selected, a web page is loaded into another <div> section, eg. <div id="content">
I've read that this can be done but I can't figure out how to do it. I've been looking online for code samples coz that's how I learn best but can find any.

If someone could explain how to do it or include some code samples, I'd be eternally gratefully.

Thanks much! 🙂

djjjozsi

you have links in index.php:

<a href="index.php?page=main"> Main Page</a>
<a href="index.php?page=news"> News</a>

main.php:

this is a text in main.php...(Main)

news.php:

this is a text in news...(news)

index.php:

<?php 
// you build an array for the pages you have.
$index = array( "main" => "main.php" , "news" => "news.php" );

if ( !empty( $_GET["page"] ) ) {
	$page = $_GET["page"];

if ( array_key_exists( $page , $index ) )
	include( $index[$page] );
} else
	include( $index["main"] ); //if there isn't a selected page...


?>

this is a basic method, becouse you need to write too much.

store your pages in database, and then you can generate the links dynamically.

php_beginner_83

Hey

Thanks for the reply and I got it working however, I need my link to load the web page into a <div> section on the current page.

When I use that code and click the link it opens the new web page at the top of the current page. I have defined a <div> section called 'content' and I would like to be able to load the web page into this section.
Is this possible??

Thanks much!

big_nerd

php_beginner,

If you want to have it so that you click a link on a page and the page doesn't refresh, effectively filling the DIV tag with the content, you will need to use either an iframe or AJAX.

If you don't mind the page refreshing (most times this doesnt matter):

<div id="content_area">
<?php
// you build an array for the pages you have.
$index = array( "main" => "main.php" , "news" => "news.php" );

if ( !empty( $_GET["page"] ) ) {
    $page = $_GET["page"];

if ( array_key_exists( $page , $index ) )
    include( $index[$page] );
} else
    include( $index["main"] ); //if there isn't a selected page...

?> 
</div>

You are effectively placing the code provided by djjjozsi into the DIV area that you wish to fill.

Ensure that the pages that you include are just content, and don't include a <html></html> or <body></body>, etc..

php_beginner_83

Hey Big Nerd

Thanks for that, however, when I click on my link the content appears where it's supposed to but everything else disappears. The logo/banner disappears, the navigation panel disappears the background for the content section disappears. The whole screen is white, except for the text that is displayed as a result of clicking the link.
From what I've read what other people have said, they made this sound simple, but I'm finding it more complicated :queasy:

Thanks 🙂

big_nerd

php_beginner83,

Well it seems you are on the right track either way. If you can post your code, as well as a URL if possible so that we can see what is happening.

I will be happy to try to point out what is going on.

djjjozsi

big.nerd: thanks for the explanation.

i'm sure that this link selector is working.

this code assumes that you have a link: main
and have a main.php to include.

but in this context main.php should not be your Index page (where you take this code director...)

php_beginner_83

Sorry I don't have url coz it's not up on the web yet but here's the code. I have only used this on one link (Washington DC) till I can get it working. If it helps I can send screen shots of whats happening.
I hope this makes sense and thanks so much for your help 🙂

<html>

<head>
<title>yourweb</title>
<style type="text/css">
// my css styles go here.
// I have set the background of <div> 'navigation' and 'content' as an image

</style>
</head>

<body>

<div id="header"><img src="Banner_USA.jpg"></div>
<div id="navigation">
<ul id="navList">
<li><a href="Home Page.php/?page=main">Washington DC</a></li>
<li><a href="#">New York</a></li>
<li><a href="#">Memphis</a></li>
<li><a href="#">Nashville</a></li>
<li><a href="#">San Francisco</a></li>
</ul>
</div>

<div id="content">
<?php
// you build an array for the pages you have.
$index = array( "main" => "Sights_text.php" , "news" => "news.php" );

if ( !empty( $GET["page"] ) ) {
$page = $GET["page"];

if ( array_key_exists( $page , $index ) ) 
    include( $index[$page] );

} else
include( $index["main"] ); //if there isn't a selected page...

?>
</div>
</body>

</html>

djjjozsi

change this:
Home Page.php/
into:
Home Page.php
but you should rename your website's filename into a website-standard format.
do not use special characters, use lowercase only, not too long ect..,

notice that using spaces in url's is not suggested...

if you haven't upload it, where are you testing ?

send us screenshot, please.

php_beginner_83

Hey

Removing that '/' helped. I had put that in earlier and forgotten to remove it..opps!

Here's two screen shots...one before I click the link, and the other after I click.
Oh, I'm using Apache as my test server.

big_nerd

php_beginner,

This seems to be a CSS issue, rather than a PHP issue. If you look at the 2nd screenshot where the text is actually going beyond the page.

Did you set a width on the content div? What display Type? (Block, etc) and what did you set for the overflow property?

I could be mistaken but thats just what it seems to be to me.

php_beginner_83

Hey Big Nerd & djjjozsi

Yeah I think my php problem has been resolved. It seems that simply removing the '/' solved the problem. Now I'm back to playing around with the css to get it looking right.
Thank you so much for your help.
Since you've been such a great help, I was wondering if you could give me some advice on a non php topic. I'm building my first website and I'm confused about the best way to go about designing and how to lay out the web site. I've read online about this and everyone seems to recommend different ways of doing it. Some say to use tables, others say frames, iframes, some suggest using <div>'s and php include. I keep changing my mind. I started with tables, then used frames, now I'm trying the <div> and it's really holding me back from actually getting anywhere with my website.
Any advice would be greatly appreciated.

Thank you.

big_nerd

php_beginner83,

Tables are much easier to use than getting the same result using DIVs, however you can do a lot more by using CSS Design.

Tables were designed for a displaying tabled data, much like a datagrid.

See Here for an article on CSS vs. Tables.

I try to avoid iframes and frames all together, personally.

If you are new to Website Design I would recommend trying to follow the most current standards, as you don't have any bad habits just yet.

An excellent resource for layout ideas is Stu Nicholls CSS Playground.

My personal favorite thing to do is design the site you like in Photoshop or The Gimp, and, while you are learning look for layouts on sites like Stu's to see if it can fit with your design.

Once you get the hang of it you will be doing everything on your own.

Also, please be sure to Mark the Thread Resolved (under Thread Tools) if you feel that the issue has been resolved.

php_beginner_83

Thanks Big Nerd for your advice and those links.
🙂