Introduction
After following some PHP lessons, the coursework's time was up. The task consisted of a simple web based file manager coded with PHP,MySql, HTML,CSS & javascript which concludes the subjects we've been learning for the past 10 weeks. The program allows users with an account to login, upload/delete files, Create & delete new directories & move through these directories while they comply to a space limit. This is the quota every user has on the hard disk.
Development
Firstly I created a simple database with one table, which will store any user that registers in order to use the web based application. Once that was ready, the actual application started to be developed. Now there's 3 simple pages that this system needed,
- Login - User logs in the system
- Application Page(index) - User uses the system
- Register Page - user registers to use the system
For easier database access a database class was created which helps with the connection/disconnection of the database itself & other necessary queries. For other important functions there was not enough time to develop a well structured class that does all the dirty work. So if you happen to open the index.php(Main Application page) page you'll notice that everything is mashed up together and the code is not so readable. At a later stage this could be fixed by putting all the necessary functions in a separate class and use the index.php only to combine everything with each other.
The main features that have been developed are:
- Login/Register/Logout
- Upload/Download Files
- Quota / Disk limit of 50mb
- Creation of new folders
- Deletion of folders & files
- Design using css
These tasks where rather simple to impliment & were completed without any problems(sort of). There was only one of these features which resulted problematic.
I’m talking about the deletion of folders & files. I used the unlink() function to remove files & the rmdir() function to remove the directories. I thought I got everything working but after some testing I noticed that the deletion of folders which included other files wouldn’t work because recursive deletion is not a function of rmdir(). So I set myself to research some examples of functions which could be used to recursively delete a folder. Here’s the function I came up with:
//Actual Function
function remove_directory($dirname) {
if (is_dir($dirname))
$dir_handle = opendir($dirname);
if (!$dir_handle)
return false;
while($file = readdir($dir_handle)) {
if ($file != "." && $file != "..") {
if (!is_dir($dirname."/".$file))
unlink($dirname."/".$file);
else
remove_directory($dirname.'/'.$file);
}
}
closedir($dir_handle);
rmdir($dirname);
return true;
}
//Example Usage
remove_directory($path);
Special Features
After implementing the main tasks I researched some of the popular file managers for cool features that I could implement as special features. One that got my eye was the
dragging & dropping of files & folders into other directories in order to move these elements. I already knew that the popular javascript framework
Jquery had some UI elements (mainly the draggable & droppable) which could make this possible.
So after downloading the Jquery Libraries I implemented this using javascript which can be found in the index.php file.
Basically the Jquery libraries allow you to set a source which can be dragged and a container which can hold a dropped element. After that, you can also retrieve the properties of these elements which is where there ID comes into place. In the html markup an ID on each row was setup & the directory of the file or folder was set. So when a row is dragged onto a folder I know which file wants to be moved in which directory right?
Now here’s where the magic happens, Ajax is a powerful way to transfer data between the client & the server without refreshing the page. So what I did was to pass the source file & the destination folder as a variable to move.php through AJAX which will in turn simply move the source file in the destination folder using php’s rename() function.
Another Feature which I tried to implement was a
multiple file uploader. The native html file chooser does not support this kind of function so I researched some Jquery libraries that could make this possible. After about a half an hour of research I stumbled upon one of the best plugins which comes with a cool name as well -
Uploadify. It’s rather easy to implement but as soon as the testing started one particular problem came up. I could not find any way to check the file sizes that were being uploaded (In order to restrict to the user’s file disk quota) through javascript & didn’t have the time to research much into it either so I decided to abandon it altogether. Other than that one problem , it did work flawlessly and it also comes with quite a nice user interface by default.
Future Improvement
This application is just a core basic to its potential. It can be furthur developed into a much more sophisticated & secure file manager where more features can be included. Here are some features on the top of my mind that could be developed:
- Rename Files & Folders
- Check for files/folders with same name before moving/creating/uploading.
- Better User Interface & prompts
- Account section where users can modify there account information
- Undelete files
- Share folders
- Download Whole Folders
- Mobile support
Conclusion
That’s all I have to say for this post, here are a few screenshots of the application & the source files. See you next time!
1. Login Page
2. The main page after logging in. On the left under the logo we can see the quota & a logout link. On the right hand side all the folders & files are listed together with the upload & create directory sections.
3. Navigating in a Sub Folder, We can see the Up - Directory button on top.
4. Dragging a file into a folder in order to move it into that directory.
Finally heres a link to download the source files.
