Jump to content


Photo
- - - - -

Alternating row colors and directory listing


  • Please log in to reply
4 replies to this topic

#1 Indigo

Indigo

    Official Alien

  • Members
  • PipPipPip
  • 617 posts
  • Gender:Male
  • Location:Trondheim, Norway
  • Interests:Computing in general, especially design and programming of all kinds.

Posted 23 June 2006 - 06:11 PM

In this tutorial, I will show you how to list the files and directories in a directory. I will also show you how to change the row colors using loops and some basic css. I hope you'll enjoy it :o
Here it goes:

<style type="text/css">
body { text-size: 9px; font-family: arial, helvetica, tahoma, times, sans-serif;}
.1 a, .2 a, .3 a { border-bottom: 1px solid #fff; width: 500px; padding-left: 2px; text-decoration: none;}
.1 a:hover, .2 a:hover, .3 a:hover { text-decoration: line-through;}
.1 a{ background-color: #222222; color: #ffffff;}
.2 a{ background-color: #ab0000; color: #ffffff;}
.3 a{ background-color: #e3e3e3; color: #222222;}
</style>

This is our CSS-code, the style we'll implement on the different rows. .1 is the class for the first row, .2 is the class for the second row, and .3 is the class for the third row. This css can be saved in a .css-document, and then included in our php-document, but I'm not going to do that in this tutorial. If you do want to do this, just paste this code at the top in your .php-document:

<link rel="stylesheet" href="urltoyourcss.css" />

Now on to the php:

<?php
$directory = "blah";
$opendirectory = opendir($directory);
$num = 1;
				
while ($file = readdir($opendirectory))
{
	if ($file != "." && $file != "..")
	{
		$num = ($num > 3 ? '1' : $num );
		print ("<div class=\"$num\"><a href=\"$directory/$file\">$file</a></div>");
		$num++;
	}
}
closedir($opendirectory);
?>

This is a short code, but I'll explain it anyway.
$directory and $opendirectory: The first variable just sets the directory to be opened, in this case "blah". Just replace "blah" with the name of the directory you want the contens of. The $opendirectory basicly opens the directory using the opendir-function, and the directory will later on be closed by the closedir-function. Easy, or what?

$num: Just a variable that contains a number. The standard value of number is set to 1, and when a file has been listed it adds 1 to the number like this: $num++.

while ($file = readdir($opendirectory)): This is quite simple too, the readdir-function reads the content of our opened directory as long as there are files in it.

if ($file != "." && $file != ".."): These two are basic folders, and don't need to be listed. If you do want them to be listed, just remove this if. Then, our code would be:
while ($file = readdir($opendirectory))
{
	$num = ($num > 3 ? '1' : $num );
	print ("<div class=\"$num\"><a href=\"$directory/$file\">$file</a></div>");
	$num++;
}

$num = ($num > 3 ? '1' : $num );: This one might be a bit tricky, but I'll try to explain it properly. If the value of the variable is greater than 3, set it back to 1. If it's not greater than 3 (in this example, 1, 2 or 3), don't change it. Ex: If the variable is set to 2, this command checks if the number 2 is greater than 3. Since it's not, the varibles value remains 2.

print ("<div class=\"$num\"><a href=\"$directory/$file\">$file</a></div>");: The last line I'll explain. This prints the style of the div, which is a number. If the variable $num is set to 1, then assign the class .1, and so on. Then, it produces a link to the file, so the file can be opened. If the name listed is a directory, you wont see a file extension.

Final code:
<style type="text/css">
body { text-size: 9px; font-family: arial, helvetica, tahoma, times, sans-serif;}
.1 a, .2 a, .3 a { border-bottom: 1px solid #fff; width: 500px; padding-left: 2px; text-decoration: none;}
.1 a:hover, .2 a:hover, .3 a:hover { text-decoration: line-through;}
.1 a{ background-color: #222222; color: #ffffff;}
.2 a{ background-color: #ab0000; color: #ffffff;}
.3 a{ background-color: #e3e3e3; color: #222222;}
</style>

<?php
$directory = "backstage";
$opendirectory = opendir($directory);
$num = 1;
				
while ($file = readdir($opendirectory))
{
	if ($file != "." && $file != "..")
	{
		$num = ($num > 3 ? '1' : $num );
		print ("<div class=\"$num\"><a href=\"$directory/$file\">$file</a></div>");
		$num++;
	}
}
closedir($opendirectory);
?>

If you test this out, you'll get a directory listing with some nice grey and red squares, not just boring text.
If you want more or less different styles, then just change the number 3 to something else. Just make sure that if you for example change the number to 5, make two more classes to, named .4 and .5.

I hope this tutorial might come in handy for somebody out there, just let me know if you find any ways to improve it or if you need any help :D

#2 Ruben K

Ruben K

    Cliff

  • Twodded Staff
  • PipPip
  • 438 posts

Posted 25 June 2006 - 12:13 PM

I really hope CSS3 gets widely accepted and implented!
It allows you to alternate row colors without PHP, much easier.

#3 Indigo

Indigo

    Official Alien

  • Members
  • PipPipPip
  • 617 posts
  • Gender:Male
  • Location:Trondheim, Norway
  • Interests:Computing in general, especially design and programming of all kinds.

Posted 26 June 2006 - 08:33 AM

Yeah, but this ain't really hard either, is it? :P

#4 Hit3k

Hit3k

    Young Padawan

  • Members
  • Pip
  • 120 posts
  • Gender:Male
  • Location:Australia

Posted 03 July 2006 - 03:55 AM

Great this was helpful :) CSS3 sounds like fun and I cant wait

#5 Indigo

Indigo

    Official Alien

  • Members
  • PipPipPip
  • 617 posts
  • Gender:Male
  • Location:Trondheim, Norway
  • Interests:Computing in general, especially design and programming of all kinds.

Posted 05 July 2006 - 09:42 AM

I'm glad to hear it was helpful :)




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users