If you're like me, you tend to create your websites using templates to make updates easier across your sites, right? Wouldn't it be nice to have dynamic information within those templates once in a while?
I tried for years, and always got that "codeOutsideHTMLIsLocked" message. I had given up on it altogether for a really long time.
This may not be news for everyone, but recently I figured it out and it made a huge impact on my designs and options.
It's all about "includes"! Let's go through it in an easy to understand manner, shall we?
I have to assume you know how to create a recordset in Dreamweaver and how to pull and display that information. If not...start learning that first.
You probably already have a template or two and have it broken into areas either via css or maybe tables. Since I am still learning css layouts, I use tables...I know I know..."Get With The Times Bobby!" I digress...
Perhaps you want to display information on every page like "Newest Member" or "New Lower Prices" or whatever your particular site is about. You go to add a recordset to the template, all looks good, and then suddenly "codeOutsideHTMLIsLocked" meaning that the recordset will not be included in your template based pages. Bummer...
There's actually a fairly simple solution.
Create a new page that displays the information. Add the recordset to that page and build your layout as you would like it to show on each of your pages. If you wish to have content displayed in a little 150x150 table within your template, just put a 150x150 table on your new page and create in it. Keep in mind...it's best, if your site uses a css file throughout, to link that css file to your new include page so you'll know exactly what it will look like.
Save your file in a seperate folder ie: "includes" if you wish. When you do include your page within the template, you may have to change the paths to some aspects of your include page, because the new location of the code in the template may be looking for js files or additonal PHP files for extensions relative to the template and not the original include page you create. You'll have to play around with this a bit. Don't worry though...you'll get it.
Now here comes the important part:
Go on back to your template, place the cursor where you want to display this dynamic info and go up to Insert/PHP Objects/Include
DW will open a split view of your page in design and code.
You'll see <?php include(); ?>
Go in and manually add the path to your dynamic file.
Like this <?php include('../includes/template_data.php'); ?>
Notice the Hash Marks before and after the path info. VERY IMPORTANT TO PUT THESE!
Now click in your design view and see the changes....OH NO! It looks horrible and screwed up my template!
No worries...you just need to do some cleanup on your dynamic include page. You have to remove all head,body,html, and CSS tags. Remember...your template already has this information. Adding it twice is a disaster. Look at it this way. When you include an external file...you're only including it's code. You're not "adding the physical file".
Here's what my dynamic page code looked like originally:
<?php require_once('HIDDEN DB CONNECTION INFO); ?>
<?php
$maxRows_rsDemo = 10;
$pageNum_rsDemo = 0;
if (isset($_GET['pageNum_rsDemo'])) {
$pageNum_rsDemo = $_GET['pageNum_rsDemo'];
}
$startRow_rsDemo = $pageNum_rsDemo * $maxRows_rsDemo;
mysql_select_db($database_StageJobs, $StageJobs);
$query_rsDemo = "SELECT * FROM zipdata";
$query_limit_rsDemo = sprintf("%s LIMIT %d, %d", $query_rsDemo, $startRow_rsDemo, $maxRows_rsDemo);
$rsDemo = mysql_query($query_limit_rsDemo, $StageJobs) or die(mysql_error());
$row_rsDemo = mysql_fetch_assoc($rsDemo);
if (isset($_GET['totalRows_rsDemo'])) {
$totalRows_rsDemo = $_GET['totalRows_rsDemo'];
} else {
$all_rsDemo = mysql_query($query_rsDemo);
$totalRows_rsDemo = mysql_num_rows($all_rsDemo);
}
$totalPages_rsDemo = ceil($totalRows_rsDemo/$maxRows_rsDemo)-1;
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset="iso-8859-1"" />
<title>Untitled Document</title>
<link href="../stylenew.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><?php do { ?>
<?php echo $row_rsDemo['zipcode']; ?>
<?php } while ($row_rsDemo = mysql_fetch_assoc($rsDemo)); ?></td>
</tr>
</table>
</body>
</html>
<?php
mysql_free_result($rsDemo);
?>
We need to strip it down to this:
<?php require_once(''HIDDEN DB CONNECTION INFO"); ?>
<?php
$maxRows_rsDemo = 10;
$pageNum_rsDemo = 0;
if (isset($_GET['pageNum_rsDemo'])) {
$pageNum_rsDemo = $_GET['pageNum_rsDemo'];
}
$startRow_rsDemo = $pageNum_rsDemo * $maxRows_rsDemo;
mysql_select_db($database_StageJobs, $StageJobs);
$query_rsDemo = "SELECT * FROM zipdata";
$query_limit_rsDemo = sprintf("%s LIMIT %d, %d", $query_rsDemo, $startRow_rsDemo, $maxRows_rsDemo);
$rsDemo = mysql_query($query_limit_rsDemo, $StageJobs) or die(mysql_error());
$row_rsDemo = mysql_fetch_assoc($rsDemo);
if (isset($_GET['totalRows_rsDemo'])) {
$totalRows_rsDemo = $_GET['totalRows_rsDemo'];
} else {
$all_rsDemo = mysql_query($query_rsDemo);
$totalRows_rsDemo = mysql_num_rows($all_rsDemo);
}
$totalPages_rsDemo = ceil($totalRows_rsDemo/$maxRows_rsDemo)-1;
?>
<table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><?php do { ?>
<?php echo $row_rsDemo['zipcode']; ?>
<?php } while ($row_rsDemo = mysql_fetch_assoc($rsDemo)); ?></td>
</tr>
</table>
<?php
mysql_free_result($rsDemo);
?>
Remove These Lines From The Code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset="iso-8859-1"" />
<title>Untitled Document</title>
<link href="../stylenew.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
That should do it! Now you can display dynamic information from your mysql database via PHP on every page you have based on a template. I'm not new to design and I've got several tips and ticks I've discovered over the years to share. I hope this tutorial was easy to understand and helps some of you out.
I can't say I studied design, programming,or coding in a school. I can say that I do remember how to...or do I really?...make a stick look like a jumping jack on my Vic20.
Comments
Be the first to write a comment
You must me logged in to write a comment.