CMS View Website Directory Tables Order by Category Demo—Code
To pull off a decent simulation of going to a MySQL database via PHP and grabbing the needed data from tables, we needed the data pre-stored in JavaScript arrays, and to that end we loaded a links.js file containing the stored data in arrays. The arrays could easily be displayed so that they were sorted by category, since each array of URLs is only about a single category. In the MySQL tables there is 1 table with nothing but 10 categories and another table with around 120 URLS in records that also have category fields.
Next we use document.write to display the Categories in a FOR loop in which we used the toUpperCase() function on each value since most of the words (i.e., PHP, HTML, etc.) look better that way. Then we displayed the 120 URLs, but it was necessary to display these arrays one at a time, with their category in the first column and the URL in the second:
We could have pulled off this simulation with a 2-dimensional array with the category in the second dimension with each array value in the first dimension, but this would be less space efficient and less fun. Why simulate? It's always more secure to avoid accessing databases on a server on a public site if it's not really necessary.
cms-view-website-directory-tables-order-by-url-demo.html
cms-view-website-directory-tables-order-by-url-demo-code.html
cms-view-website-directory-tables-order-by-category-demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE>View Website Directory Database Tables—Order by Category (CMS) DEMO</TITLE>
<meta name="description" content="View Website Directory Database Tables—Order by Category (CMS) DEMO">
<meta name="keywords" content="View Website Directory Database Tables,Website Directory Database Tables,View Website Directory DB Tables,Content Management System,Content Management System Articles,php,CMS,javascript, dhtml, DHTML">
<script type="text/javascript">
mactest=(navigator.userAgent.indexOf("Mac")!=-1) //My browser sniffers
is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1
Netscape=(navigator.appName.indexOf("Netscape") != -1)
msafari=(navigator.userAgent.indexOf("Safari")!= -1)
wsafari=0; if(!mactest&&msafari){wsafari=1;msafari=0}
is_opera = 0; if(window.opera){is_opera=1}
is_ie_mac = 0; is_ie=0;if(document.all){is_ie=1}
if(is_ie&&mactest){is_ie_mac=1}
function fix(){if(Netscape||is_opera){e=document.getElementById('top');e.style.marginTop='1px';e=document.getElementById('info');e.style.marginTop='1px';}}
</script>
<style type="text/css">
BODY {margin-left:0; margin-right:0; margin-top:0;text-align:left;background-color:#bbb}
p, li {font:13px Verdana; color:black;text-align:left}
h1 {font:bold 20px Verdana; color:black;text-align:center}
h2 {font:bold 24px Verdana;text-align:center}
.url {background-color:#eee}
.cat {background-color:#ccc}
.top {position:absolute;top:0px;left:10px;width:989px}
.tables {position:absolute;top:80px;left:150px;width:700px;border:3px solid black;padding:6px;background-color:#88f}
</style>
<script type="text/javascript" src="links.js"></script>
</head>
<body onload='fix()'>
<div id='top' class='top'>
<h1>View Website Directory Database Tables—Order by Category (CMS) DEMO</h1>
</div>
<script type="text/javascript">
<!--
document.write("<div class='tables'><br><div class='cat'><table border='1' width='700'>");
document.write("<tr><th>Category</th></tr>");
for (i=0;i<cat.length;i++){
document.write("<tr><td>"+cat[i].toUpperCase()+"</td></tr>");
}
document.write("</table></div><br>");
document.write("<div class='url'><table border='1' width='700'>");
document.write("<tr><th>Category</th><th>URL</th></tr>");
for (i=0;i<ajax.length;i++){
document.write("<tr><td>");
document.write("AJAX");
document.write("</td><td>");
document.write(""+ajax[i]+"");
document.write("</td></tr>");
}
for (i=0;i<asp.length;i++){
document.write("<tr><td>");
document.write("ASP");
document.write("</td><td>");
document.write(""+asp[i]+"");
document.write("</td></tr>");
}
for (i=0;i<css.length;i++){
document.write("<tr><td>");
document.write("CSS");
document.write("</td><td>");
document.write(""+css[i]+"");
document.write("</td></tr>");
}
for (i=0;i<dhtml.length;i++){
document.write("<tr><td>");
document.write("DHTML");
document.write("</td><td>");
document.write(""+dhtml[i]+"");
document.write("</td></tr>");
}
for (i=0;i<html.length;i++){
document.write("<tr><td>");
document.write("HTML");
document.write("</td><td>");
document.write(""+html[i]+"");
document.write("</td></tr>");
}
for (i=0;i<javascript.length;i++){
document.write("<tr><td>");
document.write("JavaScript");
document.write("</td><td>");
document.write(""+javascript[i]+"");
document.write("</td></tr>");
}
for (i=0;i<mysql.length;i++){
document.write("<tr><td>");
document.write("MySQL");
document.write("</td><td>");
document.write(""+mysql[i]+"");
document.write("</td></tr>");
}
for (i=0;i<php.length;i++){
document.write("<tr><td>");
document.write("PHP");
document.write("</td><td>");
document.write(""+php[i]+"");
document.write("</td></tr>");
}
for (i=0;i<xhtml.length;i++){
document.write("<tr><td>");
document.write("XHTML");
document.write("</td><td>");
document.write(""+xhtml[i]+"");
document.write("</td></tr>");
}
for (i=0;i<xml.length;i++){
document.write("<tr><td>");
document.write("XML");
document.write("</td><td>");
document.write(""+xml[i]+"");
document.write("</td></tr>");
}
document.write("</table></div></div>");
// -->
</script>
</body>
</html>
Now here is the code for order by category that is NOT a demo:
SAVE THIS PAGE FROM HERE DOWN AS: cms-view-website-directory-tables-order-by-category.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>View Website Directory Database Tables—Order by Category (CMS)</TITLE>
<meta name="description" content="View Website Directory Database Tables—Order by Category (CMS)">
<meta name="keywords" content="View Website Directory Database Tables,Website Directory Database Tables,View Website Directory DB Tables,Content Management System,Content Management System Articles,php,CMS,javascript, dhtml, DHTML">
<script language="javascript">
mactest=(navigator.userAgent.indexOf("Mac")!=-1) //My browser sniffers
is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1
Netscape=(navigator.appName.indexOf("Netscape") != -1)
msafari=(navigator.userAgent.indexOf("Safari")!= -1)
wsafari=0; if(!mactest&&msafari){wsafari=1;msafari=0}
is_opera = 0; if(window.opera){is_opera=1}
is_ie_mac = 0; is_ie=0;if(document.all){is_ie=1}
if(is_ie&&mactest){is_ie_mac=1}
function fix(){if(Netscape||is_opera){e=document.getElementById('top');e.style.marginTop='1px';e=document.getElementById('info');e.style.marginTop='1px';}}
</script>
<style type="text/css">
BODY {margin-left:0; margin-right:0; margin-top:0;text-align:left;background-color:#bbb}
p, li {font:13px Verdana; color:black;text-align:left}
h1 {font:bold 20px Verdana; color:black;text-align:center}
h2 {font:bold 24px Verdana;text-align:center}
.url {background-color:#eee}
.cat {background-color:#ccc}
.top {position:absolute;top:0px;left:10px;width:989px}
.tables {position:absolute;top:80px;left:150px;width:700px;border:3px solid black;padding:6px;background-color:#88f}
</style>
</head>
<body onload='fix()'>
<div class='tables'>
<?php
include_once"config.php";
$result = mysql_query("SELECT * FROM categories ORDER BY category") or die(mysql_error());
echo "<br><div class='cat'><table border='1' width='700'>";
echo "<tr><th>Category</th></tr>";
while($row = mysql_fetch_array($result)) {
echo "<tr><td>";
echo $row['category'];
echo "</td></tr>";
}
echo "</table></div><br><div class='url'>";
$result = mysql_query("SELECT * FROM urls ORDER BY category") or die(mysql_error());
echo "<table border='1' width='700'>";
echo "<tr><th>Category</th><th>URL</th></tr>";
while($row = mysql_fetch_array($result)) {
echo "<tr><td>";
echo $row['category'];
echo "</td><td>";
echo $row['url'];
echo "</td></tr>";
}
echo "</table></div>";
mysql_close();
?>
</div>
<div id='top' class='top'>
<h1>View Website Directory Database Tables—Order by Category (CMS)</h1>
</div>
<?php include("nav.html"); ?>
</body>
</html>