1. Chapter 7: Pratical Example – Implementation of Web File Sharer

2. Training Course, CS, NCTU 2 Overview  Introduction  Feature List  Database Schema  Implementation  Advanced Implementation

3. Training Course, CS, NCTU 3 Introduction  In this chapter, we are going to implement a “File Sharer”, which includes some simple functions such as File list Upload/Download file File info edit User login/logout.

4. Training Course, CS, NCTU 4 Feature List  Following features are wanted User register/login/logout  Provide simple authentication  Allow free registering Upload:  Simple uploading  Permission (public/private) setting List:  List files depend on permission setting. Download  Download the listed file. Edit & Delete  Allowing owner to modify file name & public/private setting.  Allowing owner to delete his files.

5. Training Course, CS, NCTU 5 Database Schema (1)  One database, with 2 tables are needed. DB name: filesharer Tables: user, file  ‘user’ table used to record user registration info.  ‘file’ table used to record uploaded file info.  ‘user’ table uid  Uniq number of a user name  User name password  His password FieldTypeAttributeNullDefaultComment uidint(32) Unsigned, Primary Key NoUser ID namevarchar(256)No passwordvarchar(256)No

6. Training Course, CS, NCTU 6 Database Schema (2)  ‘file’ table fid  Uniq number of the uploaded file uid  File owner origFileName  Original filename of the uploaded file hashFileName  Filename saved in server fileType  The type of uploaded file. uploadTime  When the file uploaded. isPublic  Permission of the uploaded file, 1 for public, and 0 for private

7. Training Course, CS, NCTU 7 Database Schema (3) FieldTypeAttributeNullDefaultComment fidint(32) Unsigned, Primary Key No uidint(32) Unsigned, Foreign Key No origFileNamevarchar(256)No hashFileNamevarchar(256)No fileTypevarchar(256)No uploadTimedatetimeNo isPublictinyint(1)No0

8. Training Course, CS, NCTU 8 Implementation – Upload (1)  Designed Flow 1.Show upload form 2.Show uploaded file info, and upload link for next file.

9. Training Course, CS, NCTU 9 Implementation – Upload (2)  Upload form Filename: Public?

10. Training Course, CS, NCTU 10 Implementation – Upload (3) 0) { echo 'Error: '. $_FILES['file']['error']. ' '; } else { // 顯示檔案資訊 echo 'File Name: '. $_FILES['file']['name']. ' '; echo 'File Type: '. $_FILES['file']['type']. ' '; echo 'Size: '. ($_FILES['file']['size'] / 1024). ' Kb '; echo 'Stored in: '. $_FILES['file']['tmp_name']. ' '; echo 'Public: '. ($_POST['public'] ? 'yes' : 'no'). ' '; echo 'Upload Time: '. date("l, jS F Y, H:i", time()); // 擷取記錄資訊 $origFileName = $_FILES['file']['name']; $hashFileName = time(); $fileType = $_FILES['file']['type']; $isPublic = (isset($_POST['public']) && $_POST['public']) ? '1' : '0'; $tmpFileName = $_FILES['file']['tmp_name']; // 搬移檔案到 file/ move_uploaded_file($tmpFileName, "file/$hashFileName"); // 存入 DB $connect = mysql_connect('DBHOST', 'DBUSER', 'DBPASSWD') or die('Connection failed: '. mysql_error()); mysql_select_db('filesharer', $connect); mysql_query("INSERT INTO `file` (`origFileName`, `hashFileName`, `fileType`, `uploadTime`, `isPublic`) VALUES ('$origFileName', '$hashFileName', '$fileType', NOW(), '$isPublic')"); mysql_close($connect); } } ?> Upload another?

11. Training Course, CS, NCTU 11 Implementation – List (1)  To list uploaded file info File ID File Name File Type Public Upload Time Commands (Edit / Delete)  After that, remember to add File List link to the upload pages.

12. Training Course, CS, NCTU 12 Implementation – List (2) File ID File Name File Type Public Upload Time Command <?php $connect = mysql_connect('DBHOST', 'DBUSER', 'DBPASSWD') or die('Connection failed: '. mysql_error()); mysql_select_db('filesharer', $connect); $files = mysql_query("SELECT * FROM `file` ORDER BY `uploadTime` DESC"); while ($f = mysql_fetch_array($files)) { echo ' '; echo ' '. $f['fid']. ' '; echo ' '. $f['origFileName']. ' '; echo ' '. $f['fileType']. ' '; echo ' '. ($f['isPublic'] ? 'yes' : 'no'). ' '; echo ' '. $f['uploadTime']. ' '; echo ' Edit Delete '; echo ' '; } mysql_close($connect); ?>

13. Training Course, CS, NCTU 13 Implementation – Edit (1)  To edit following uploaded file setting Filename Permission (public or not)  Designed Flow 1.Click ‘Edit’ Link from File List 2.Fill in settings of modified file. 3.Commit changes

14. Training Course, CS, NCTU 14 Implementation – Edit (2)  Add links to File List File ID File Name File Type Public Upload Time Command <?php $connect = mysql_connect('DBHOST', 'DBUSER', 'DBPASSWD') or die('Connection failed: '. mysql_error()); mysql_select_db('filesharer', $connect); $files = mysql_query("SELECT * FROM `file` ORDER BY `uploadTime` DESC"); while ($f = mysql_fetch_array($files)) { echo ' '; echo ' '. $f['fid']. ' '; echo ' '. $f['origFileName']. ' '; echo ' '. $f['fileType']. ' '; echo ' '. ($f['isPublic'] ? 'yes' : 'no'). ' '; echo ' '. $f['uploadTime']. ' '; echo ' Edit Delete '; echo ' '; } mysql_close($connect); ?>

15. Training Course, CS, NCTU 15  Modify Form Implementation – Edit (3) File List '; $connect = mysql_connect('DBHOST', 'DBUSER', 'DBPASSWD') or die('Connection failed:'. mysql_error()); mysql_select_db('filesharer', $connect); if (isset($_GET['fid'])) { $fid = $_GET['fid']; $file = mysql_query("SELECT `origFileName`, `isPublic` FROM `file` WHERE `fid` = '$fid'"); if (!$file) { echo 'Could not query: '. mysql_error(). ' '; } else if (mysql_num_rows($file) == 0) { echo "Error: fid#$fid not exist "; } else { $file = mysql_fetch_array($file); // 顯示檔案資訊 echo 'File Name: '. $file['origFileName']. ' '; echo 'Public: '. ($file['isPublic'] ? 'yes' : 'no'). ' '; ?> Filename: " /> " /> />Public?

16. Training Course, CS, NCTU 16  Commit changes <?php echo ' File List '; $connect = mysql_connect('localhost', 'filesharer', 'notexist') or die('Connection failed: '. mysql_error()); mysql_select_db('filesharer', $connect); if (isset($_POST['fid']) && isset($_POST['origFileName'])) { $fid = $_POST['fid']; $origFileName = $_POST['origFileName']; $isPublic = $_POST['isPublic'] ? '1' : '0'; mysql_query("UPDATE `file` SET `origFileName` = '$origFileName', `isPublic` = '$isPublic‘ ". "WHERE `fid` = '$fid'"); // 顯示檔案資訊 echo "File Name: $origFileName "; echo 'Public: '. ($isPublic ? 'yes' : 'no'). ' '; } mysql_close($connect); ?> Implementation – Edit (4)

17. Training Course, CS, NCTU 17 Implementation – Delete (1)  To Delete file  Designed Flow 1.Click ‘Delete’ Link from File List 2.Confirm Delete 3.Delete file

18. Training Course, CS, NCTU 18  Add links to File List File ID File Name File Type Public Upload Time Command '; echo ' '. $f['fid']. ' '; echo ' '. $f['origFileName']. ' '; echo ' '. $f['fileType']. ' '; echo ' '. ($f['isPublic'] ? 'yes' : 'no'). ' '; echo ' '. $f['uploadTime']. ' '; echo ' Edit '. ' Delete '; echo ' '; } mysql_close($connect); ?> Implementation – Delete (2)

19. Training Course, CS, NCTU 19  Confirm delete File List '; $connect = mysql_connect('DBHOST', 'DBUSER', 'DBPASSWD') or die('Connection failed: '. mysql_error()); mysql_select_db('filesharer', $connect); if (isset($_GET['fid'])) { $fid = $_GET['fid']; $file = mysql_query("SELECT `origFileName`, `hashFileName`, `isPublic` ". "FROM `file` WHERE `fid` = '$fid'"); if (!$file) { echo 'Could not query: '. mysql_error(). ' '; } else if (mysql_num_rows($file) == 0) { echo "Error: fid#$fid not exist "; } else { $file = mysql_fetch_array($file); echo "delete file #$fid "; // 顯示檔案資訊 echo 'File Name: '. $file['origFileName']. ' '; echo 'Public: '. ($file['isPublic'] ? 'yes' : 'no'). ' '; echo 'Are you sure? '; echo ' Yes '; } } mysql_close($connect); ?> Implementation – Delete (3)

20. Training Course, CS, NCTU 20  Delete file File List '; $connect = mysql_connect('DBHOST', 'DBUSER', 'DBPASSWD') or die('Connection failed: '. mysql_error()); mysql_select_db('filesharer', $connect); if (isset($_GET['fid'])) { $fid = $_GET['fid']; $file = mysql_query("SELECT `origFileName`, `hashFileName`, `isPublic` ". "FROM `file` WHERE `fid` = '$fid'"); if (!$file) { echo 'Could not query: '. mysql_error(). ' '; } else if (mysql_num_rows($file) == 0) { echo "Error: fid#$fid not exist "; } else { $file = mysql_fetch_array($file); echo "file #$fid has been deleted "; // 顯示檔案資訊 echo 'File Name: '. $file['origFileName']. ' '; echo 'Public: '. ($file['isPublic'] ? 'yes' : 'no'). ' '; // 從 Table 中刪除 mysql_query("DELETE FROM `file` WHERE `fid` = '$fid'"); // 將 hash file 刪除 exec('/bin/rm -f file/'. $file['hashFileName']); } } mysql_close($connect); ?> Implementation – Delete (4)

21. Training Course, CS, NCTU 21 Implementation – Download (1)  To download file Click!

22. Training Course, CS, NCTU 22 File ID File Name File Type Public Upload Time Command '; echo ' '. $f['fid']. ' '; echo ' '. $f['origFileName']. ' '; echo ' '. $f['fileType']. ' '; echo ' '. ($f['isPublic'] ? 'yes' : 'no'). ' '; echo ' '. $f['uploadTime']. ' '; echo ' Edit '. ' Delete '; echo ' '; } mysql_close($connect); ?> Implementation – Download (2)  Add links to File List

23. Training Course, CS, NCTU 23  Download File <?php $connect = mysql_connect('DBHOST', 'DBUSER', 'DBPASSWD') or die('Connection failed: '. mysql_error()); mysql_select_db('filesharer', $connect); $fid = $_GET['fid']; $file = mysql_query("SELECT `origFileName`, `hashFileName`, `fileType`, `isPublic` ". "FROM `file` WHERE `fid` = '$fid'"); if (!$file) { echo 'Could not query: '. mysql_error(). ' '; } else if (mysql_num_rows($file) == 0) { echo "Error: fid#$fid not exist "; } else { $file = mysql_fetch_array($file); mysql_close($connect); output_file('file/'. $file['hashFileName'], $file['origFileName'], $file['fileType']); } function output_file($file, $name, $mime_type = '') { … } Implementation – Download (3) Click!

24. Training Course, CS, NCTU 24  output_file() Modify header to change the filename & mime type  header('Content-Type: '. $mime_type);  header('Content-Disposition: attachment; filename="'.$name.'"'); Mime type is the “File Type” stored in DB. We have to change filename from hash name to original name. Implementation – Download (3)

25. Training Course, CS, NCTU 25 Implementation – Register (1)  To register user Info are required: username, password Check whether username conflict or not, loop back if conflict.  Designed Flow 1.Click ‘Register’ Link from File List 2.Fill in Register Form (username, password) 3.Register user. Success (saved in database) Fail

26. Training Course, CS, NCTU 26  Add links to File List Register File ID File Name File Type... Implementation – Register (2)

27. Training Course, CS, NCTU 27  Register Form (register.php)  Success Info (do_register.php)  Fail Info (do_register.php) File List Username: Password: Implementation – Register (3) File List Account Registered Successfully. echo ' Login '; File List Register Again! Username has been used. File List Register Again! Password cannot be empty.

28. Training Course, CS, NCTU 28 Implementation – Register (4) File List <?php if (isset($_POST['name'])) { $name = trim($_POST['name']); $password = trim($_POST['password']); // check 是否有重複 $connect = mysql_connect('DBHOST', 'DBUSER', 'DBPASSWD') or die('Connection failed: '. mysql_error()); mysql_select_db('filesharer', $connect); $user = mysql_query("SELECT * FROM `user` WHERE `name` = '$name'"); if (mysql_num_rows($user) > 0) { echo ' Register Again! '; echo 'Username "'. $name. '" has been used.'; } else if (!$password) { echo ' Register Again! '; echo 'Password cannot be empty.'; } else { mysql_query("INSERT INTO `user` (`name`, `password`) VALUES ('$name', '$password')"); echo " "; echo "Account $name Registered Successfully."; echo ' Login '; } mysql_close($connect); } ?> do_register.php

29. Training Course, CS, NCTU 29 Implementation – Login (1)  To login user Info are required: username, password  Designed Flow 1.Click ‘Login’ Link from File List 2.Fill in Login Form (username, password) 3.Regist user. Success (keep in session) Fail

30. Training Course, CS, NCTU 30 Implementation – Login (2)  Add links to File List Login Register File ID File Name...

31. Training Course, CS, NCTU 31  Login Form (login.php)  Success Info (do_login.php)  Fail Info (do_login.php) File List Register Username: Password: Implementation – Login (3) File List Account Login Successfully. File List Register Login Again! Wrong Password! File List Register Login Again! Password cannot be empty. File List Register Login Again! Username does not exist.

32. Training Course, CS, NCTU 32 Implementation – Login (4) File List <?php if (isset($_POST['name'])) { $name = trim($_POST['name']); $password = trim($_POST['password']); // check 是否存在 $connect = mysql_connect('DBHOST', 'DBUSER', 'DBPASSWD') or die('Connection failed: '. mysql_error()); mysql_select_db('filesharer', $connect); $user = mysql_query("SELECT * FROM `user` WHERE `name` = '$name'"); if (mysql_num_rows($user) == 0) { echo ' Register '; echo ' Login Again! '; echo "Username $name does not exist."; } else if (empty($password)) { echo ' Register '; echo ' Login Again! '; echo 'Password cannot be empty.'; } else { $user = mysql_fetch_array($user); if ($password == $user['password']) { echo ‘ Login successfully!'; $_SESSION['uid'] = $user['uid']; } else { echo ' Register '; echo ' Login Again! '; echo 'Wrong Password!'; } } mysql_close($connect); } ?> do_login.php

33. Training Course, CS, NCTU 33 <?php session_start(); isset($_SESSION['uid']) or die('You should login first!! ‘); ?> Implementation – Login (5)  Add following code section into the beginning of code files need user auth: (upload|edit|delete).php  (download|list.php) also needs user auth, but it should also allow accesses without auth. Because we have a feature “Public Sharing”.

34. Training Course, CS, NCTU 34 <?php $connect = mysql_connect('DBHOST', 'DBUSER', 'DBPASSWD') or die('Connection failed: '. mysql_error()); mysql_select_db('filesharer', $connect); $users = mysql_query("SELECT `uid`, `name` FROM `user`"); $usermap = array(); while ($u = mysql_fetch_array($users)) { $key = $u['uid']; if (!isset($usermap["$key"])) { $usermap["$key"] = $u['name']; } if (!isset($_SESSION['uid'])) { $files = mysql_query("SELECT * FROM `file` WHERE `isPublic` = 1 ORDER BY `uploadTime` DESC"); } else { $uid = $_SESSION['uid']; $files = mysql_query("SELECT * FROM `file` WHERE `isPublic` = 1 OR `uid` = $uid ORDER BY `uploadTime` DESC"); } while ($f = mysql_fetch_array($files)) { $key = $f['uid']; echo ' '; echo ' '. $f['fid']. ' '; echo ' '. $usermap["$key"]. ' '; echo ' '. $f['origFileName']. ' '; echo ' '. $f['fileType']. ' '; echo ' '. ($f['isPublic'] ? 'yes' : 'no'). ' '; echo ' '. $f['uploadTime']. ' '; if (isset($uid) && $f['uid'] == $uid) { echo ' Edit Delete '; } else { echo ' Edit Delete '; } echo ' '; } mysql_close($connect); ?> Implementation – Login (6)  Modify File List

35. Training Course, CS, NCTU 35 Implementation(7) – Login/Logout Not login! Login!

36. Training Course, CS, NCTU 36 File List Register Logout!! Relogin ? File List Register Not login yet! <?php } ?> Implementation – Logout  To logout user, just add ‘Logout’ link everywhere Logout logout.php

37. Training Course, CS, NCTU 37 Further (Advanced) Functions  Security Issues? Magic quote, password encryption, directly inputed URL,...  Web UI Better color/theme, more confirm before applying action, AJAX for faster interactive,...  User Comfortability Auto page redirection, keep login for longer time,...  New Feature Download counting, file type rewriting, quota, share file to specific user, protect from bots, limitation of link from other-site,...

38. Training Course, CS, NCTU 38 Q&A