Help with managing dynamic content

PHP
1

I am building a website that will have tons and tons of content. (e.g. NY Times, CNN, Yahoo, etc.)

I’ve got a couple of pretty good templates to work with, however, everything is static because it is hard-coded in HTML/CSS.

My home page is a 3-column layout with the left and right columns fixed-width, and the middle column “fluid”. And most other pages will be a 2-column layout with the right column being fixed-width, and the main column being “fluid”.

I would like to find an easy way to change the content of the middle content, and I believe PHP is the way to do this, but I’m very very rusty on PHP. (Started studying it in the past, but haven’t cracked a book in ages!)

I’m probably not ready for anything fancy like using a database, but just want an easy way to swap in and out 15-20 articles in the templates mentioned above.

Can someone help me to better understand how I go from a “static” website to a “dynamic” website?

Thanks,

Debbie

2

Honestly a database isn’t as complicated as you think, and for what you’re looking to do it would make it A LOT easier. If you’re dealing with a website with as much content as comparable to nytimes like you say, you’ll want to do something other than having static HTML pages.

Have you looked into content management systems? Drupal, Joomla, Wordpress (though technically considered a blogging platform can be easily modified to your needs). They use databases, but have an administration panel, so it’s a one time setup from then you can add articles in an easy to use WYSIWYG editor.

All in all, if it as simple as using your templates, I would just setup a very simple database, and a back-end where you could put the text of an article into a new record. It would simplify things immensely.

3

I would consider using a database if it isn’t a lot of extra work, but my #1 priority s getting my site up. (I can always add in database functionality if and when my business takes off.)

If you’re dealing with a website with as much content as comparable to nytimes like you say, you’ll want to do something other than having static HTML pages.

That is why I made this thread! :wink:

Have you looked into content management systems? Drupal, Joomla, Wordpress (though technically considered a blogging platform can be easily modified to your needs). They use databases, but have an administration panel, so it’s a one time setup from then you can add articles in an easy to use WYSIWYG editor.

Thanks, but totally not interested.

All in all, if it as simple as using your templates, I would just setup a very simple database, and a back-end where you could put the text of an article into a new record. It would simplify things immensely.

Okay, but let’s focus on my original question first…

What I have:
I have a template page (“layout_2col.html”) that has a Header, Middle Column, Right Column, and Footer.

Any content (e.g. an article) is currently hard-coded into the HTML. So if I have 15 articles, I would need 15 pages?! :eek:

Yet, ironically, the Header, Right Column, and Footer will not change.

What I want:
When a user selects an Item (or Sub-Item) from my drop-down Top Menu, I want that middle column to populate with an appropriate article/page.

For instance, you choose Business>>Small Business from the Top Menu, then I’d like the middle column to load with my “Small Business landing page”. (The Header, Right Column, and Footer remain the same.)

Then lets say you are on my “Small Business landing page”, and you see a link to the article “The Entrepreneur Whiz-Kid Myth” and click on it. Then I would like the middle column to load with the business article “The Entrepreneur Whiz-Kid Myth”. (Again, the Header, Right Column, and Footer remain the same.)

Next, you go back to the Top Menu (or possibly click on some other link) to read the article “Employees from Hell!!!” Again, the middle column should load the appropriate article, this time being “Employees from Hell!!!”. (The Header, Right Column, and Footer always remaining the same. Thus why I call it a “template”!)

Follow me?

This is pretty much how any interactive website works - including SitePoint - but I just don’t have a good handle of how to do that with PHP.

(If you can help me figure out how to dissect my HTML pages and do this with “includes” or whatever, then maybe as I get more comfortable, I can look into pulling information from a database.)

Am I making any sense? :-/

Thanks,

Debbie

4

I have just modified a page that I wrote for another thread. The other thread just had a single page with header, left margin, middle content, right margin and footer.

I included five extra “middle content articles” which you can check out here:

Green Forest Resort

The page displays different content but the images are distorted and require the dimensions setting correctly.

<snip />

5

Anyone else?

Debbie

6

Here’s a pretty lightweight way of having reusable elements to a page, but not the only way; you could just simply use ‘includes’.

index.php

<?php
error_reporting(-1);
ini_set('display_errors', true);
require_once 'lib/Template.php';

#base template
$page = new Template('lib/views/page.tpl');
$page->bind('title', 'Our Gallery');

#create a header
$header = new Template('lib/views/page.header.tpl');

#create the content
$content = new Template('lib/views/page.content.tpl');
$content->bind('name', 'Gallery');

#create the footer
$footer = new Template('lib/views/page.footer.tpl');

#assign the header, content and footer to the base template
$page->bind('header', $header);
$page->bind('content', $content);
$page->bind('footer', $footer);

#display it
echo $page;

lib/Template.php

<?php
class Template
{
  protected
    $file;

  protected
    $data = array();

  public function __construct($file){
    $this->file = $file;
  }

  public function bind($key, $value){
    $this->data[$key] = $value;
    return $this;
  }

  public function render(){
    ob_start();
    extract($this->data);
    include $this->file;
    return ob_get_clean();
  }

  public function __toString(){
    return $this->render();
  }
}

lib/views/page.tpl

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://yui.yahooapis.com/3.3.0/build/cssbase/base-min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <title>
      <?php echo $title; ?>
    </title>
  </head>
  <body>
    <div id="site-container">
      <?php echo $header; ?>
      <?php echo $content; ?>
      <?php echo $footer; ?>
    </div>
  </body>
</html>

lib/views/page.header.tpl

<div id="site-header">
  Header
</div>

lib/views/page.content.tpl

<div id="site-content">
  <h1>
    This is the <?php echo $name; ?> page.
  </h1>
</div>

lib/views/page.footer.tpl

<div id="site-footer">
  Footer
</div>
7

Thanks for the reply, Anthony, but I think using object-oriented programming is a bit much for me. :eek:

It would help to just talk out what I’m trying to do and get some suggestions on “a better mouse-trap” if you follow?!

There is definitely a need for a dialogue here!

Thanks,

Debbie

8

If anyone is interested and wants to help, I can take the time to explain what I trying to do and where I’m confused…

Debbie

9

If you supply the B[/B] I am sure that with the additional information someone with spare time on their hands will produce what you want.

Without further information I don’t think anyone’s guesses will be getting any warmer :slight_smile:

10

I can post a sample online after supper… :wink:

Debbie

11

Feeling really exhausted tonight. :frowning:

Okay, so here is a URL to a simple mock-up…

Debbie’s Test Site

So let’s you go to the menu and choose Business>>Jobs, then I’d like to have a “sub-page” dynamically loaded in the Middle Column.

After that, maybe you’d choose, Business>>Markets and a page with Stock Market Reports would appear in the Middle Column.

The goal is to avoid having to hard-code one page that is my 3-column layout PLUS “Job Listings” in the middle column. And then having to hard-code another 3-column layout PLUS “Stock Market Reports” in the middle column and so on.

Of course my website will be more complex than this, but I figure this is a good drill.

Hope that makes sense?!

Debbie

12

Here we go:

3 equalising column min-max with sticky footer

13

Hi John, I’m pretty sure that’s not what Debbie is looking for. :wink:

Debbie, take a read over this and let me know if you have any questions.

index.php

<?php
error_reporting(-1);
ini_set('display_errors', true);

function render($file){
  if(is_readable($file)){
    return file_get_contents($file);
  }
  return '';
}

$pages = array(
  'default'   => 'home.tpl',
  'about-us'  => 'about-us.tpl'
);

$content = $pages['default'];

if(!empty($_GET['page']) && array_key_exists($_GET['page'], $pages)){
  $content = $_GET['page'];
}

include 'lib/views/page.tpl' ;

lib/views/page.tpl

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://yui.yahooapis.com/3.3.0/build/cssbase/base-min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <title>
      Demo
    </title>
  </head>
  <body>
    <div id="site-container">
      
      <div id="site-header">
        <?php echo render('lib/views/page.header.tpl'); ?>
      </div>
      
      <div id="site-content">
        <?php echo render('lib/content/' . $content); ?>
      </div>
      
      <div id="site-footer">
        <?php echo render('lib/views/page.footer.tpl'); ?>
      </div>
      
    </div>
  </body>
</html>

lib/views/page.header.tpl

Header

lib/views/page.footer.tpl

Footer

lib/content/home.tpl

<h1>
  Welcome to our site!
</h1>

You would access the unique content using the following syntax in the URL:-

index.php?page=default
index.php?page=about-us

14

Originally Posted by John_Betong
Here we go:

Hi John, I’m pretty sure that’s not what Debbie is looking for.

Hi Anthony,

Did you try the link and any of the drop-down menu items?

I split Debbie’s script and included separate top menu, left, right middle and footer sections.

The middle section has a default and checks for a $_GET page parameter. If a page parameter is passed from the exiting menu then a different thumbnail is shown otherwise a default thumbnail is shown.

The code I used is very similar to the scripts you supplied.

15

I’d like to know, John, why your code has this in it…

…/…/…/subdomain/thumb/before-i-screw-you-are-you-over-18-cutie-pie_thumb.jpg

If you’re trying to “screw me over” then you came to the wrong place!

(I also didn’t appreciate the picture of a topless woman in your code!)

Welcome to my Ignore List!

Debbie

16

yes John, please sort out (remove) the rotating ads and the dodgy pictures and I will let the link stay.

17

No offence intended.

Changes made as requested.

To demonstrate page changes the first 50 thumbnail JPGs were selected from an existing path and without checking, numerically hard-coded a default image.

Lesson learnt to check all eventualities.

.

18

You need to use JavaScript for such a thing.

19

Wrong!

And, ahem, you’re in a PHP forum. (No JavaScript!)

Debbie

20

…

Am I going have to explain why you cannot do this with PHP?
Some how did all my years of working with PHP become null and void?