CMS View Website Directory Tables Order by URL 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 some fancy manipulation of that data. We loaded a links.js file containing the stored data in arrays. Next, we went through each of the 10 arrays full of URLs and appended "|" and its category name (which is also the array's name) to each value in each array. This substitutes for what we did with the MySQL tables which is to have 1 table with nothing but 10 categories and another table with around 120 URLS in records that also had category fields. Then we used urls=ajax.concat(asp,css,dhtml,html,javascript,mysql,php,xhtml,xml);urls=urls.sort(); to merge all the arrays into one big array called urls[], after which we sorted this big array alphabetically.
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 sorted URLs, but it was necessary to process these values because of the appended "|" and category name. We used these processing functions to separate the appended category from the URL and dump the |, and display the category in the first column and the URL in the second:
- var p=urls[i].indexOf("|"); which gets the string position number of character |
- var s=urls[i].slice(p); which determines where to begin a substring extraction and returns all from p to end
- s=s.substr(1); which knocks off the 1st char (which is |) and returns the rest
- urls[i]=urls[i].slice(0,p); which extracts from 0 to p and returns it; 0 = start
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-category-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 URL (CMS) DEMO</TITLE>
<meta name="description" content="View Website Directory Database Tables—Order by URL (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 URL (CMS) DEMO</h1>
</div>
<script type="text/javascript">
<!--
for (i=0;i<ajax.length;i++){ajax[i]=ajax[i]+"|AJAX";}
for (i=0;i<asp.length;i++){asp[i]=asp[i]+"|ASP";}
for (i=0;i<css.length;i++){css[i]=css[i]+"|CSS";}
for (i=0;i<dhtml.length;i++){dhtml[i]=dhtml[i]+"|DHTML";}
for (i=0;i<html.length;i++){html[i]=html[i]+"|HTML";}
for (i=0;i<javascript.length;i++){javascript[i]=javascript[i]+"|JavaScript";}
for (i=0;i<mysql.length;i++){mysql[i]=mysql[i]+"|MySQL";}
for (i=0;i<php.length;i++){php[i]=php[i]+"|PHP";}
for (i=0;i<xhtml.length;i++){xhtml[i]=xhtml[i]+"|XHTML";}
for (i=0;i<xml.length;i++){xml[i]=xml[i]+"|XML";}
var urls=ajax.concat(asp,css,dhtml,html,javascript,mysql,php,xhtml,xml);urls=urls.sort();
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<urls.length;i++){
document.write("<tr><td>");
var p=urls[i].indexOf("|");// 1st position of character |.
var s=urls[i].slice(p);// where to begin the extraction—returns all from p to end.
s=s.substr(1);// knock off 1st char (which is |) and return the rest.
urls[i]=urls[i].slice(0,p);// extract from 0 to p and return it. 0 = start.
document.write(""+s+"");
document.write("</td><td>");
document.write(""+urls[i]+"");
document.write("</td></tr>");
}
document.write("</table></div></div>");
// -->
</script>
</body>
</html>
Now here is the code for order by URL that is NOT a demo:
SAVE THIS PAGE FROM HERE DOWN AS: cms-view-website-directory-tables-order-by-url.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 URL (CMS)</TITLE>
<meta name="description" content="View Website Directory Database Tables-Order by URL (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 url") 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 URL (CMS)</h1>
</div>
<?php include("nav.html"); ?>
</body>
</html>