CMS View Website Directory with Dynamic Descriptions and Thumbnails

This page has a demo page that does not go to MySQL tables but instead uses JavaScript arrays to simulate it.

What do CMS, View Website Directory, and Dynamic Descriptions and Thumbnails actually mean? Content Management System and CMS mean the same thing. A website directory is a list of links. Real-world website directories can be lists of categorized links or that in addition to thumbnails and descriptions. Here are the advantages of their method as compared to our method: Faster info, and faster thumbnails (usually). The disadvantages are: more storage capacity is needed with their method and their info tends to get obsolete.

So what IS our method? Our Website Directory CMS code is set up to store only category names and website links. The info and thumbnails are all gotten on the spot dynamically from the Web. So NO info needs to be stored and NO thumbnails need to be stored.

We use Websnapr for the thumbnails. You get to add 100 thumbnails per month, and when you put class='websnapr' in your links and load two external files in the head tag with <style type="text/css" media="screen">@import "websnapr.css";</style> and <script type="text/javascript" src="websnapr.js"></script>, you get to use their service for free, as long as you give the correct people and companies credit, which we do as you can see near the end of this page. The Websnapr link above explain their service options—there are paid options with fewer limits. Feel free to choose these. (But please read cms-view-website-directory-without-websnapr.html before signing up, if you are considering the free version.) By the way, if you think you know JavaScript, check out the websnapr.js file you get when you sign up. Some of it, like the mouse cursor capturing, is quite familiar, but some of it is "what the heck?!" and one wonders how it works so nicely. We think they must be C programmers. We come from normal JavaScript and PHP with a pinch of Ajax thrown in for good measure. When you put class='websnapr' in your links and hover over them (clicking sends you to the link's actual site), you get a thumbnail from Websnapr at first saying it's been queued and usually you will receive your snapshot in a couple of seconds. If not, try again in a few minutes.

We use a cool PHP routine to read the metatags and take advantage of the PHP file_get_contents() function and get_meta_tags() function in order to get dynamic info from websites on the fly. If the actual site takes a while to load, this script takes a while to show a description. If a site is fast, so is this script. You can't "push" the Internet! Demo this idea: get-meta-tag-content.php.

By that same token, when you are using a website directory, delays can happen during their retrieval process, and surfing the Net often gets you slow-loading links. This is sometimes due to overburdened servers or connections between you and them, but other times it's a PHP or ASP Content Management System that is creating pages on the fly and the content is coming from a MySQL file.

It's certainly true that storing thumbnails of sites you create yourself with the PrintScreen key and Irfanview or ImageForge gives you a quick and reliable source of website images and a CMS system merely needs a link to this image (the link is stored in the database) to give a quick picture, and the info about the site can be similarly retreived fast from the MySQL tables. So is a dynamic on-the-fly system like we're showing here really worth it? It's your call. It's sure a great way to be efficient about server space and a great way to make sure that the description you present is up to date—which database-stored descriptions cannot compete with even on a good day.

The code itself is interesting, using PHP, JavaScript and Ajax. After the CSS styles and browser sniffing, below, we get to the newcategory() function, which gets the array element number of the cat[] array and turns it into a word like "ASP" or "PHP" or "Ajax." These are categories. The script puts the value into a hidden form field and submits the form to this same page. The PHP on the page knows what to do with the category POSTed to it: get the records of URLs that have that category in their category field. These will be transmitted to JavaScript via JSON.

The fix() function repairs browser inconsistencies, the metano() function makes any dynamically produced description box (from hovering over a link) disappear, and metayes() makes it appear. When your cursor is not on a link, we want no display box, and when it is, we want to see the display box. Note that the browser sniffers are there twice—notice the difference? The first code block detects Chrome but the second does not. It's a reminder to not forget Google's Chrome browser in your code.

Next, the mouse cursor position detection script startmouse() is launched and it keeps running the getCoords() script while you're on the page. Depending on which link your cursor hovers (or doesn't), the Ajax getmeta() function is either run or not run. It would be nice to trust a link hovering script that relied on mouseover and mouseout, but these functions cannot be trusted to work flawlessly, which is why no good webmaster relies on them for navigation systems of pulldown menus, etc. A fast-moving cursor will quickly outpace these mouseover and mouseout events' capacity to keep up, thereby leaving menus open or missing menus, so mouse cursor detection is used instead, as it works flawlessly.

The urls.length statement and url=urls[q] are there because the urls[] array is created in PHP as $urls[] and encoded into JavaScript via JSON. It holds the array of URLs in the category POSTed to PHP. The url value holds the URL being hovered. Studying the script, we see that getmeta(url,f) is run whether or not we are on a link. If not, the getmeta(url,f) function just empties the display box after the getCoords() function turns off its display with metano(). If so, the getmeta(url,f) function fills the display box after the getCoords() function turns on its display with metayes().

The getmeta() Ajax function uses the standard XMLHttpRequest function. Note that the page is merely a simple PHP page with a simple HTML DOCTYPE. It is NOT XML or XHTML. It's just the server requests that use XML communication. So the main thing to know about Ajax is that it allows exchange of info between browser and server without the need for page reloads, which is exactly what WE needed to happen. You can see in our test files test1.php, test2.php, test3.php, and test4.php that without Ajax, the constant page reloads are very unattractive and disconcerting, whereas in test5.php and test6.php, which use Ajax, the pages operate smoothly and nicely—as we wanted. This is what sold us on learning to do Ajax. Anyway, the Ajax script sneaks off to run a meta.php script (the code is at the end of this page) armed only with the URL gotten in the getCoords() function and a flag. The statement document.getElementById("k").innerHTML=xmlhttp.responseText means that the response from the PHP script is stuck into the div element with the id of k via the innerHTML method.

Next comes the onLoad method in the body tag starting up the mouse coordinate reader. Then <div id='k' class='d'></div> puts the empty k div on the page but the onLoad running of metano() makes sure it's invisible. Then the hidden field in the input of the form is shown to be named catalog. The sole purpose of this form is to allow the choosing of a category from the category links which gets POSTed to itself so the PHP can read the data from the MySQL table. Note that the PHP script gets data from both the urls table and the categories table. Then the json_encode() function converts PHP to JavaScript. Next, document.write("<a HREF='#' onclick='c="+i+",newcategory(c)'>"+cat[i]+"</a><br>"); is done in a loop for each of the 10 categories. Note that c is everything from 0 to 9 and one of these numbers get sent to newcategory(c) as a parameter which that function turns into a category named whatever cat[c] is. Finally, the urls[] array converted from PHP to JavaScript is written onto the screen as links in a loop twice, the first time using the word Thumbnail as link text and the second time using the URL itself. The former gets the class='websnapr' attribute so it can produce Websnapr thumbnails and the latter become links whose screen coordinates are recognized in the getCoords() function so the Ajax-run description boxes can be displayed.

Download the files: cms-directory.zip

SAVE THIS PAGE AS: cms-view-website-directory.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE>Viewing Website Directories—Content Management System (CMS)</TITLE>
<meta name="description" content="Viewing Website Directories—Content Management System (CMS)">
<meta name="keywords" content="View Website Directories,View Web Site Directories,Viewing Website Directories,Content Management System,Content Management System Articles,php,CMS,javascript, dhtml, DHTML">

<style type="text/css">
BODY {margin-left:0; margin-right:0; margin-top:0;text-align:left}
p, li {font:13px Verdana; color:black;text-align:left;margin-top:0.2em;margin-bottom:0}
h1 {font:bold 24px Verdana; color:black;text-align:center}
h2 {font:bold 24px Verdana;text-align:center}
.d {position:absolute; left:700px; width:300px; margin:0; padding:10px; background-color:#ddd; border:1px solid #000; font: 11px Verdana;top:70px;z-index:99;}
.e {position:absolute; left:700px; width:300px; margin:0; padding:10px; background-color:transparent; border:none; font: 11px Verdana;}
.f {position:absolute; left:330px;z-index:0; top:70px; padding:10px; background-color:#eee; border:1px solid black; font: 13px Verdana;}
.b {font:bold 13px Verdana;}
.g {position:absolute; left:228px; width:101px; top:70px; padding:10px; background-color:#bbb; border:1px solid black; font: 13px Verdana;}
.c {position:absolute; left:2px; width:224px; top:70px; padding:5px; background-color:#ddd; border:1px solid black; font:bold 15px Verdana;}
.l {position:absolute; left:2px; width:224px; top:44px; padding:3px; background-color:#aaa; border:1px solid black; font:bold 15px Verdana;text-align:center}
.t {position:absolute; left:228px; width:463px; top:44px; padding:3px; background-color:#bbb; border:1px solid black; font:bold 15px Verdana;text-align:left}
.z {position:absolute; left:700px; width:280px; top:44px; padding:3px; background-color:#ccf; border:1px solid black; font:bold 11px Verdana;text-align:left}
.url {position:absolute;top:0px;left:10px;width:998px}
</style>
<style type="text/css" media="screen">@import "websnapr.css";</style>
<script type="text/javascript" src="websnapr.js"></script>
<SCRIPT LANGUAGE="JavaScript">

</script>
</head>

<body onLoad="startmouse(),metano(),fix()">

<div id='top' class='url'><h1>Viewing Website Directories—Content Management System (CMS)</h1></div>

<div id='k' class='d'></div>

<form name="MyForm" method="POST" action="cms-view-website-directory.php">
<input type="hidden" name="category" value=" ">
</form>

<?php

include_once"config.php";

$C=$_POST['category'];
if (strlen($C)>0){echo "<div class='l'>".$C."</div>";

$urls=array();

$result = mysql_query("SELECT url FROM urls WHERE category='$C' order by url") or die(mysql_error());
while($row = mysql_fetch_array($result)){
array_push ($urls, $row[0]);
}
$num_urls_in_table=mysql_num_rows($result);
}

$cat=array();

$res = mysql_query("SELECT category FROM categories order by category") or die(mysql_error());
while ($row = mysql_fetch_row($res)) {
array_push ($cat, $row[0]);
}

$num_cats_in_table=mysql_num_rows($res);

mysql_close();

?>

<SCRIPT LANGUAGE="JavaScript">

var cat = <?php echo json_encode($cat); ?>;

var urls = <?php echo json_encode($urls); ?>;

var num_cats_in_table = <?php echo json_encode($num_cats_in_table); ?>;

var num_urls_in_table = <?php echo json_encode($num_urls_in_table); ?>;

document.write("<div class='c'>");
for (i=0;i<num_cats_in_table;i++) {
document.write("<a HREF='#' onclick='c="+i+",newcategory(c)'>"+cat[i]+"</a><br>");
}
document.write("</div>");

if (urls.length>0) {
document.write("<div class='t'>Thumbnail      
         
         
      Info</div><div class='z'>Use down arrow if anything is too low</div><div class='g'>");

for (i=0;i<num_urls_in_table;i++) {
document.write("<a HREF='"+urls[i]+"' target='_blank' class='websnapr'>Thumbnail</a><br><br>");}

document.write("</div><div class='f'>");

for (i=0;i<num_urls_in_table;i++) {
document.write("<a HREF='"+urls[i]+"' target='_blank'>"+urls[i]+"</a><br><br>");}

document.write("</div>");}

</script>



<?php include("nav.html"); ?>

</body>
</html>

The get-meta-tag-content.php script extracts and formats description meta tag content for one particular site as an example. The code is below:

<?

$url="http://www.theliquidateher.com/";
$t = file_get_contents($url);
preg_match('/<title>([^>]*)<\/title>/si',($t), $m);
echo "<B>"; echo $m[1]; echo "<BR></B>";
$a = get_meta_tags($url);$d=$a['description'];
if(mb_detect_encoding($d, 'UTF-8, ISO-8859-1', true) != 'ISO-8859-1'){$d = utf8_decode($d);}
$d = strtr($d, get_html_translation_table(HTML_ENTITIES));
echo $d; echo "<BR>";$o = html_entity_decode($t);$w = array();
preg_match_all("|<[^>]+>(.*)</[^>]+>|", $o, $v, PREG_PATTERN_ORDER);
for ($x = 0; $x < 10; $x++) {
if (preg_match('<p>i', $v[0][$x])) {$g = strip_tags($v[0][$x]);
if (preg_match("/\./", $g)){$w[] = $g;}}
if (isset($w[0])){preg_match("/([^.]+.)/", $g,$e);
$z=$e[1]; echo $z;}}
?>

The meta.php script below is the one we actually use to extract and format description meta tag content for any site. The code is below:

<?php
$f = $_GET['f'];
$url = $_GET['url'];
if($f=="0"){echo " ";} else {
$t = file_get_contents($url);
preg_match('/<title>([^>]*)<\/title>/si',($t), $m);
echo "<b>"; echo $m[1]; echo "<BR></b>";
$a = get_meta_tags($url);$d=$a['description'];
if(mb_detect_encoding($d, 'UTF-8, ISO-8859-1', true) != 'ISO-8859-1'){$d = utf8_decode($d);}
$d = strtr($d, get_html_translation_table(HTML_ENTITIES));
echo $d; echo "<BR>";$o = html_entity_decode($t);$w = array();
preg_match_all("|<[^>]+>(.*)</[^>]+>|", $o, $v, PREG_PATTERN_ORDER);
for ($x = 0; $x < 10; $x++) {
if (preg_match('<p>i', $v[0][$x])) {$g = strip_tags($v[0][$x]);
if (preg_match("/\./", $g)){$w[] = $g;}}
if (isset($w[0])){preg_match("/([^.]+.)/", $g,$e);
$z=$e[1]; echo $z;}}}
?>

Free Personal Status Boards (PSB™)

CMS View Website Directory with Dynamic Descriptions and Thumbnails