User Rating
( vote)
Problem Scenario:
Write a Perl script which will search all sub directories and its files under a given sub-directory and would do the following:
- Display all directories on a web page
- When user clicks on any of the list directories show files under it (toggle things)
- When user clicks on file, it should play that song using yahoo media player
- You should use CSS3, JavaScript and Perl only
Solution:
I wrote a Perl script for this which will do whatever is pointed out in the problem. Here is the fully working code and you can check the live demo here.
Here is the step by step explanation of the script.
- I wrote CSS code which will take care of background color, anchor tag , dir id and file class.
- It makes background color black and any text font color as white.
- Anchor tag’s color is kept light violet-blue mix colored.
- Directory’s color is kept green under dir id
Code:
<br />
<style type='text/css'><br />
body {<br />
background-color: black;<br />
color: #FFFFFF;<br />
}<br />
<br />
a {<br />
color: #88AAEE;<br />
}<br />
<br />
.file {<br />
display:none;<br />
}<br />
<br />
#dir a{<br />
color:#00FF00;<br />
}<br />
</style><br />
- Then I wrote one JavaScript code to make toggling things work out while clicking on directory. This script will take the id name and will check for the class name “file”. If it exists then while clicking, remove that class else add that class. By default it is made to display nothing using css.
Code:
<br />
<script type='text/javascript'><br />
function showFiles(dirname) {<br />
var el = document.getElementById(dirname);<br />
el.className = (el.className == 'file') ? '' : 'file';<br />
}<br />
</script><br />
- Next I added javascript to make yahoo media work with our script.
Code:
<br /> <script type='text/javascript' src='http://webplayer.yahooapis.com/player.js'></script><br />
- Then finally wrote a Perl script to do the main work associated with all the above steps. Our Perl code should do few things:
- Open the main song directory to read files and directories under it
- Browse through each directory and files under it and save it in a hash having directory name as key and files name as value
- While displaying, display the keys of hash i.e. directory names using div tag
- And display the values associated with eack key when user clicks on directory list
- It should show the count (no of songs under each directory) adjacent to directory name
To browse through the given directory and store sub directory names as key and its files as values in a hash.
Code:
<br />
opendir(DIR, $dirtoget) || die("Cannot open directory");<br />
for(readdir DIR) {<br />
next if /^\.{1,2}$/;<br />
my $path = "$dirtoget/$_";<br />
if (-f $path){<br />
if (exists $songs_list->{$dirtoget}) { push @{ $songs_list->{$dirtoget} }, $_; }<br />
else { $songs_list->{$dirtoget} = ["$_"]; }<br />
} <br />
if (-d $path){<br />
printFile($path);<br />
}<br />
}<br />
closedir(DIR); <br />
Now, to display the directory with songs count, we need to write below code snippets. It will even fetch the files related to directories at the same time. If you wish to avoid it and wish to fetch the songs detail only after clicking on specific directory, then you need to use AJAX call here. I leave it up to you to modify and make it working according to your requirements.
Code:
<br />
foreach my $dir (keys %{$songs_list}){<br />
$dir =~ m /(.*)?\/(.*)$/;<br />
$count++;<br />
print "<div id='dir'><a href=\"javascript:showFiles($count);\">$2 ( ".scalar @{$songs_list->{$dir}}." )</a></div>\n";<br />
print "<div id='$count' class='file'>";<br />
getFiles($dir);<br />
print "</div>\n";<br />
}<br />
And code subroutine getFiles:
<br />
sub getFiles{<br />
my $dir = shift;<br />
my @song_lists = @{$songs_list->{$dir}};<br />
foreach (@song_lists){<br />
print "<a href =\"$dir/$_\">$_</a><br />\n"; <br />
}<br />
}<br />
Now, you can assemble all pieces of code and can run as a Perl script to make it happening. Here is the fully working code for it. If you have any ideas or suggestions to ponder, please post as comment.
Note: I used CSS , JavaScript codes altogether in the same script with Perl. If you wish you can write separate file for CSS and JavaScript and even use jQuery to do all these things but this script is not dependent on anything and it is at the simplest way to make it working.
