HTML Directory Navigation

Discussion in 'Software' started by Mada_Milty, Apr 11, 2010.

  1. Mada_Milty

    Mada_Milty MajorGeek

    Good Day Fellow Geeks,

    I have a web project that I'm trying to complete on the double.

    My functional requirement is navigation of a directory of files (ie, lists of links to folders and files) in HTML. For example, I'd like to have the top-level directories listed as links, and following either link would "open" that folder, causing whatever files and subdirectories to be listed, also as HTML links, with the ability to navigate to the lowest-level directories.

    My technical requirement is that it must work on a LAMP stack, that is, I'm coding in HTML/CSS/Javascript/PHP/SQL on an Apache/MySQL backend.

    I've started by trying to upload a directory listing to a column of a SQL table, and I've been trying to use the right queries and PHP code to get functional navigation, but I've hit a wall. Here's my code for inspection:

    HTML

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <?php include('../includes/php/suntime.php');?> <!-- Script to categorize server time -->
    <html>
    	<head>
    		<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    		<title>Portfolio - davidlayzell.com</title>
    		<link rel="stylesheet" type="text/css" href="../includes/css/styles.css">
    		<link rel="stylesheet" type="text/css" href="../includes/css/portstyles.css">
    		<script src="../includes/js/menu_fader.js" type="text/javascript"></script>
    		<!-- Script containing functions for showing resumes menu, and fading menu after idle period -->
    		<script src="../includes/js/link_light.js" type="text/javascript"></script>
    		<!-- Script containting functions to highlight links on rollover, and reset on mouseout -->
    	</head>
    	<body id="<?php echo($style); ?>"> <!-- Sets the body's ID to a server time category, showing different backgrounds -->		
    		<div id="container">			
    			<div id="side">				
    				<script src="http://widgets.twimg.com/j/2/widget.js"></script>
    				<script src="../includes/js/twitter_settings.js"></script>
    				<!-- Script containing functions to embed an RSS feed of my twitter account. Twitter.com/dlayzell -->
    			</div>
    			<div id="main">
    				<div id="inner">
    					<a id="homelink" href="../"><div id="header">David Layzell's Portfolio</div></a>
    					<div id="chron">
    						<?php echo(date("l\, F dS\, Y h:i A")); ?> <!-- Command outputting current server date/time -->
    					</div>
    					<div id="formhead">Below, please find my portfolio, drawn from a directory of development and design work. Please note that your browser must have javascript enabled for this to function correctly.</div>
    					<?php include('../includes/php/testlinks.php');?>
    					<div id="menubar">
    						<a href="../" onmouseover="set_fader(100);" alt="Home">Home</a> -
    						<span id="resumewrap">
    							<a href="../resumes/dev" onmouseover="show_resume_menu ();" alt="Resumes">Resumes</a> - 
    							<span id="resumes" onmouseout="set_fader(100);">
    								<a href="../resumes/dev" onmouseover="set_opacity();" onmouseout="set_fader(5000);" alt="Developer">Developer</a><br><hr>
    								<a href="../resumes/sysadm" onmouseover="set_opacity();" onmouseout="set_fader(5000);" alt="Sys Admin">System Admin</a>
    							</span>
    						</span>												
    						<a href="../testimonials" onmouseover="set_fader(100);" alt="Testimonials">Testimonials</a> -
    						<a href="../projects" onmouseover="set_fader(100);" alt="Projects">Projects</a>	-
    						<a href="../contact" onmouseover="set_fader(100);" alt="Contact">Contact</a>
    					</div>					
    					<div id="footer">Hosted by <a href="http://www.bravenet.com/">Bravenet</a> | Contact <a href="mailto:david[underscore]layzell[at]hotmail[dot]com?subject=Web Contact">Webmaster</a> | Copyright © David Layzell</div>
    				</div>
    			</div>			
    		</div>
    	</body>
    </html>
    PHP

    Code:
    <?php
    	$sql_con = mysql_connect(localhost,root) or die('Could not connect: ' . mysql_error());
    	mysql_select_db("davidlayzelldotcom", $sql_con);
    	$sql_res = mysql_query("SELECT FILE_PATH FROM portfolio WHERE LOCATE('/',FILE_PATH,3) = 0") or die("Query failed with error: " . mysql_error());	
    	$formhead = "<form id=\"portform\" name=\"portform\" action=\"./index.php\" method=\"GET\"><input type=\"hidden\" id=\"sub_check\" name=\"_submit_check\" value=\"0\">";
    	$formfoot = "</form>";
    	$pre_link = "<a onclick=\"document.['portform'].submit();return false\" id=\"portlink\"><div id=\"box\"";	
    	$post_link = "</div></a>";
    	$count = 1;
    	echo $formhead;
    	while($row = mysql_fetch_array($sql_res)){
    		if ($count%2==0){$mid_link = $count . "\" class=\"evenlink\" onmouseover=\"highlight(this)\" onmouseout=\"reset(this)\">";}
    		else {$mid_link = $count . "\" class=\"oddlink\" onmouseover=\"highlight(this)\" onmouseout=\"reset(this)\">";}
    		$display = $pre_link . $mid_link . $row['FILE_PATH'] . $post_link;
    		echo $display;
    		$count++;
    	}
    	echo $formfoot;
    	mysql_close($sql_con);
    ?>
    I'm not so hung up on this work that I'm not willing to abandon it if I've completely overthought the problem. What I'd like for advice is either pointers on correcting my work above, or an altogether different direction to get the job done, hopefully with samples and/or tutorials.

    Thanks for any input,

    Milty
     
  2. Mada_Milty

    Mada_Milty MajorGeek

    I've got it!

    So, SQL, and javascript were not necessary. I had overlooked directory functions in PHP itself. I've trimmed this down considerably:

    Code:
    if(isset($_GET['dir']) && is_dir($_GET['dir'])){$path=$_GET['dir'];}
    else{$path="./";}
    if ($handle = opendir($path)){		
    	$count = 2;
    	while (false != ($file = readdir($handle))) { 			
    		if ($count%2==0){$class="evenlink";}
    		else {$class="oddlink";}
    		if($file != 'index.php' && $file != '.') {
    			if ($path != './' || $file != '..') {
    				if(is_dir($path . "/" . $file)){
    					$ref="index.php?dir=" . $path . "/" . $file;
    				}
    				else{$ref=$_GET['dir']. "/" . $file;}
    				echo "<a href=\"" . $ref . "\" id=\"portlink\"><div id=\"box" . $count . "\" class=\"" . $class . "\" onmouseover=\"highlight(this);\" onmouseout=\"reset(this);\">" . $file . "</div></a>";
    				$count++;
    			}
    		}									
    	}  
    	closedir($handle);			
    }
    else{echo "Error Opening Specified Directory: $path";}
     

MajorGeeks.Com Menu

Downloads All In One Tweaks \ Android \ Anti-Malware \ Anti-Virus \ Appearance \ Backup \ Browsers \ CD\DVD\Blu-Ray \ Covert Ops \ Drive Utilities \ Drivers \ Graphics \ Internet Tools \ Multimedia \ Networking \ Office Tools \ PC Games \ System Tools \ Mac/Apple/Ipad Downloads

Other News: Top Downloads \ News (Tech) \ Off Base (Other Websites News) \ Way Off Base (Offbeat Stories and Pics)

Social: Facebook \ YouTube \ Twitter \ Tumblr \ Pintrest \ RSS Feeds