In this blog post, I will be discussing about my experience in building a web space management system where the user can register, login, upload files, delete files, create directories and delete directories.
SQL Injection
SQL injection is a security vulnerability which occurs in the database. An SQL injection may occur when the input of the user is not for filtered escape characters. A method to avoid SQL injection is by using the
mysql_real_escape_string()
function, as shown in lines 25-26. For more details on SQL injection one can look at
http://php.net/manual/en/security.database.sql-injection.php
23: $user = $_POST["username"];
24: $pass = $_POST["password"];
25: $user = mysql_real_escape_string($user);
26: $pass = mysql_real_escape_string($pass);
Registration
This page is used so that a user can register to create an account by inserting the username, email and password into a form. The user will retype the password to confirm the password created. When the user presses the ‘Register’ button, the username, email and password will be inserted into the database. The code to insert into the database is inserted into another file ‘register.php’. In this page, a connection to the database was done, as described in the previous post and an insert statement have been created.
42: $sql="insert into users (name,email,password)values('$rname', '$remail', '$rpass1')";
If the data is invalid or the passwords do not match, it will be redirected to the registration page.
Login
The login page consists of a form 'login.php' where the user will insert the username and password. The data of the form will be submitted to 'loggedin.php'.
22: <form action="loggedin.php" method=post>
An explanation about the login page has been written in the previous three posts. Once the user is logged in, the user can create and delete directories, upload files and delete files. This is how the logged in page looks like:
Logged in Page
Creating Directories
To create a directory, a form has been created where it will be submitted to the php file 'dir.php'. The form consists of a text field and a submit button, whereas the php file consists of the function
mkdir()
, to create the directory.
41: if (!mkdir($create)) {
42: die('Failed to create directory');
43: } else {
44: echo "Directory Successfully Created";
45: }
Lines 41-45 shows that if the directory cannot be created
(!mkdir($created))
, a message that the creation of the folder is failed will appear, otherwise a message that the directory is created will appear, and the directory will be created.
Uploading Files
The page loggedin.php, also consists of a form where the user can upload files. Once the files is uploaded, the details of the files (the file name, file type and file size) will be appeared on the page, using the following code:
69: move_uploaded_file($_FILES["fileToUpload"]["tmp_name"],
70: "C:/xampp/htdocs/assignment/$user/" . $_FILES["fileToUpload"]["name"]);
71: echo "File Uploaded:" . $_FILES["fileToUpload"]["name"]."<br>";
72: echo "File Type:" . $_FILES["fileToUpload"]["type"]."<br>";
73: echo "Total size : ".$s."<br>";
The files uploaded will be saved in a temporary folder, but the file can be moved into another folder using the function
move_upload_file()
, where the file to be moved and the new location will be specified, as shown in line 30.
Delete Files and Directories
The 'loggedin' file also contains a list of files and directories inside a particular folder. Near each item (file and directory), a checkbox have been created so that when the checkbox is ticked and the delete button is clicked, the file or directory will be deleted. This was done using the
unlink()
function to delete files and using
rmdir()
function to delete directories.
1: if (is_file($myFile)){
2: unlink($myFile);
3: echo "File $myFile successfully deleted <br>";
4: } elseif (is_dir($myFile)) {
5: rmdir($myFile);
6: echo "Directory $myFile successfully deleted <br>";
7: }
Users only able to access their Own Space
For users to access only their space, a directory (folder) was created for each user, where the name of the folder is the same as the username, and the username is unique for each user. In this case, the usernames are all different, and a folder is created manually.
88: if ($handle = opendir("./$user")) {
89: //code
98: }
Line 88 shows that when the user logs in, a folder will be opened depending who the user is. As a future improvement, I thought that when the user registers, if the name already exists, the user will have to register with another name. Also, when the user registers, a folder will be created automatically, according to the user's username using the
mkdir()
function.
mkdir($user);
Space Limits
The code below shows what it should do when the size exceeds. The
getDirectorySize()
function is a function which was created to get the size of the directory. If the size of the directory is larger than 52428800 bytes, a message that the size have exceeded will be displayed.
46: $path="C:/xampp/htdocs/assignment/$user/";
47: $dirsize=getDirectorySize($path);
48: $s1=$_FILES["fileToUpload"]["size"] ;
49: $s=$dirsize['size'];
50: $s2= $s+$s1;
51: if ($s2 > 52428800){
52: echo "Size exceeded";
53: }
When I tested it I found out that the size of the uploaded file will be incremented after uploading the next file or else after refreshing the page. That is, if the size will be exceeded in the previous file, that file will be uploaded, but for the next file it will display that the size have exceeded and the file will not be uploaded. To overcome this, I had to add the code found in lines 48 and 50. The following line of code is found inside the
getDirectorySize()
function.
38: $totalsize = filesize($nextpath) + $totalsize;
When Size Exceeds
Problems Encountered
One problem which I had when creating this system is when I used the
unlink()
function to delete files. When I clicked on the delete button, all the files inside that folder were deleted, both when ticking on the checkboxes and when leaving them unticked.
The problem was when creating the form to include the checkboxes in the list. At first, I created a form using html, but in order for this to work, this has to be created using php.
88: if ($handle = opendir('./$user')) {
89: $i=0;
90: while (false !== ($file = readdir($handle))) {
91: if ($file != "." && $file != ".." && $file != "delete.php") {
92: echo "<input type=\"checkbox\" name=\"deletefile[$i]\" value=\"$file\" />";
93: echo "<a class=\"alog\" href=\"upload/\".$file>$file</a><br>\r\n";
94: $i++;
95: }
96: }
97: closedir($handle);
98: }
A variable 'i' is declared, with the value of 0 assigned to it as shown in line 89. In the input tag of the form (where the type is checkbox), the name consists of an array (
deletefile[$i]
), where the value of
$i
is incremented, each time an item is added, to add a checkbox using the while loop. More details on
http://www.hotscripts.com/forums/php/31146-deleting-multiple-files-using-checkboxes.html
The
opendir()
function (line 88) is used to open a directory handle. The
readdir()
function (line 90) is used to read from a directory handle. The
closedir()
function (line 97) is used to close a directory handle.
Another problem which I had was when deleting a directory. When I deleted a file, the file was successfully deleted, but when I tried to delete a directory, it gives me an error that the permission is denied. This was because I was using the
unlink()
function, both to delete a file and also to delete a directory. To delete a directory, the function
rmdir()
should be used.
Some of the files contain a "Back to previous page" button, where the user can go back to the previous page. Every time the user has to click on this button, the page should be reloaded.
Testing on a mobile
The system have also been tested on my mobile (Nokia 5800), which supports wifi. Since the webspace management system is hosted locally, it can be viewed from another computer (in this case my mobile), by using the IP address. When I styled this, I gave the div container a width of 700px , but when I looked on my mobile, I had to scroll from left to right. Therefore, I changed the width of the container to percentage (%) instead of pixels, to fit to screen as shown in line 35:
34: #container {
35: width: 80%;
36: margin: 0px auto;
From my mobile, I also registered, logged in, uploaded files, created directories, deleted directories and deleted files. One thing I found out when testing on my mobile is that the alert box 'Invalid Username/password combination' will appear when the 'Back to Previous Page' button is clicked. This might be because the mobile phone does not support javascript. Instead, the browser's back button can be used.
Uploading files from mobile to computer is another alternative to transfer files, instead of using Bluetooth or a USB cable.
References
http://www.hotscripts.com/forums/php/31146-deleting-multiple-files-using-checkboxes.html
http://php.net/manual/en/security.database.sql-injection.php
http://www.go4expert.com/forums/showthread.php?t=290