Chapter 7: Pratical Example – Implementation of Web File Sharer

Chapter 7: Pratical ExampleChapter 7: Pratical Example– Implementation of Web File Sharer– Implementation of Web File Sharer

Tra

inin

g C

ou

rse, C

S, N

CTU

2

OverviewOverview

Introduction Feature List Database Schema Implementation Advanced Implementation

Tra

inin

g C

ou

rse, C

S, N

CTU

3

IntroductionIntroduction

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.

Tra

inin

g C

ou

rse, C

S, N

CTU

4

Feature ListFeature 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.

Tra

inin

g C

ou

rse, C

S, N

CTU

5

Database Schema (1)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

Field Type Attribute Null Default Comment

uid int(32)Unsigned,

Primary KeyNo User ID

namevarchar(256

)No

passwordvarchar(256

)No

Tra

inin

g C

ou

rse, C

S, N

CTU

6


‘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

Tra

inin

g C

ou

rse, C

S, N

CTU

7


Field Type Attribute Null Default Comment

fid int(32)Unsigned,

Primary KeyNo

uid int(32)Unsigned,

Foreign KeyNo

origFileName varchar(256) No

hashFileName varchar(256) No

fileType varchar(256) No

uploadTime datetime No

isPublic tinyint(1) No 0

Tra

inin

g C

ou

rse, C

S, N

CTU

8

Implementation – Upload (1)Implementation – Upload (1)

Designed Flow1. Show upload form

2. Show uploaded file info, and upload link for next file.

Tra

inin

g C

ou

rse, C

S, N

CTU

9


Upload form<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body>

<form action=“do_upload.php" method="post" enctype="multipart/form-data"> <label for="file">Filename:</label> <input type="file" name="file" id="file" /> <input type="checkbox" name="public" />Public?<br /> <input type="submit" name="submit" value="Submit" /></form>

</body></html>

Tra

inin

g C

ou

rse, C

S, N

CTU

10


<?phpif ($_FILES['file']) { if ($_FILES['file']['error'] > 0) { echo 'Error: ' . $_FILES['file']['error'] . '<br />'; } else { // 顯示檔案資訊 echo 'File Name: ' . $_FILES['file']['name'] . '<br />'; echo 'File Type: ' . $_FILES['file']['type'] . '<br />'; echo 'Size: ' . ($_FILES['file']['size'] / 1024) . ' Kb<br />'; echo 'Stored in: ' . $_FILES['file']['tmp_name'] . ' <br />'; echo 'Public: ' . ($_POST['public'] ? 'yes' : 'no') . ' <br />'; 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` (òrigFileName`, `hashFileName`, `fileType`, ùploadTime`, ìsPublic`) VALUES ('$origFileName', '$hashFileName', '$fileType', NOW(), '$isPublic')"); mysql_close($connect); }}?><br /><a href="upload.php">Upload another?</a>

Tra

inin

g C

ou

rse, C

S, N

CTU

11

Implementation – List (1)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.

Tra

inin

g C

ou

rse, C

S, N

CTU

12

Implementation – List (2)Implementation – List (2)

<table border="1" cellpadding="2" cellspacing="0"> <tr> <th>File ID</th> <th>File Name</th> <th>File Type</th> <th>Public</th> <th>Upload Time</th> <th>Command</th> </tr><?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 ùploadTime` DESC");while ($f = mysql_fetch_array($files)) { echo '<tr>'; echo '<td>' . $f['fid'] . '</td>'; echo '<td>' . $f['origFileName'] . '</td>'; echo '<td>' . $f['fileType'] . '</td>'; echo '<td>' . ($f['isPublic'] ? 'yes' : 'no') . '</td>'; echo '<td>' . $f['uploadTime'] . '</td>'; echo '<td>Edit Delete</td>'; echo '</tr>';}mysql_close($connect);?></table>

Tra

inin

g C

ou

rse, C

S, N

CTU

13

Implementation – Edit (1)Implementation – Edit (1)

To edit following uploaded file setting• Filename

• Permission (public or not)

Designed Flow1. Click ‘Edit’ Link from File List

2. Fill in settings of modified file.

3. Commit changes

Tra

inin

g C

ou

rse, C

S, N

CTU

14


Add links to File List<table border="1" cellpadding="2" cellspacing="0"> <tr> <th>File ID</th> <th>File Name</th> <th>File Type</th> <th>Public</th> <th>Upload Time</th> <th>Command</th> </tr><?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 ùploadTime` DESC");while ($f = mysql_fetch_array($files)) { echo '<tr>'; echo '<td>' . $f['fid'] . '</td>'; echo '<td>' . $f['origFileName'] . '</td>'; echo '<td>' . $f['fileType'] . '</td>'; echo '<td>' . ($f['isPublic'] ? 'yes' : 'no') . '</td>'; echo '<td>' . $f['uploadTime'] . '</td>'; echo '<td><a href="edit.php?fid=' . $f['fid'] . '">Edit</a> Delete</td>'; echo '</tr>';}mysql_close($connect);?></table>

Tra

inin

g C

ou

rse, C

S, N

CTU

15

Modify Form


<?phpecho '<a href="list.php">File List</a> <br /><br />';$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 òrigFileName`, ìsPublic` FROM `file` WHERE `fid` = '$fid'"); if (!$file) { echo 'Could not query: ' . mysql_error() . '<br />'; } else if (mysql_num_rows($file) == 0) { echo "Error: fid#$fid not exist<br />"; } else { $file = mysql_fetch_array($file); // 顯示檔案資訊 echo 'File Name: ' . $file['origFileName'] . '<br />'; echo 'Public: ' . ($file['isPublic'] ? 'yes' : 'no') . ' <br />';?><form action=“do_edit.php" method="post" enctype="multipart/form-data"> <label for="file">Filename:</label> <input type="hidden" name="fid" value="<?=$fid ?>" /> <input type="text" name="origFileName" id="file" value="<?=$file['origFileName'] ?>" /> <input type="checkbox" name="isPublic" <? echo $file['isPublic'] ? 'checked' : '';?> />Public?<br /> <input type="submit" name="submit" value="Submit" /></form><?php }}mysql_close($connect);?>

Tra

inin

g C

ou

rse, C

S, N

CTU

16

Commit changes<?phpecho '<a href="list.php">File List</a> <br /><br />';$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 òrigFileName` = '$origFileName', ìsPublic` = '$isPublic‘ " . "WHERE `fid` = '$fid'"); // 顯示檔案資訊 echo "File Name: $origFileName<br />"; echo 'Public: ' . ($isPublic ? 'yes' : 'no') . ' <br />';}mysql_close($connect);?>


Tra

inin

g C

ou

rse, C

S, N

CTU

17

Implementation – Delete (1)Implementation – Delete (1)

To Delete file

Designed Flow1. Click ‘Delete’ Link from File List

2. Confirm Delete

3. Delete file

Tra

inin

g C

ou

rse, C

S, N

CTU

18

Add links to File List<table border="1" cellpadding="2" cellspacing="0"> <tr> <th>File ID</th> <th>File Name</th> <th>File Type</th> <th>Public</th> <th>Upload Time</th> <th>Command</th> </tr><?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 ùploadTime` DESC");while ($f = mysql_fetch_array($files)) { echo '<tr>'; echo '<td>' . $f['fid'] . '</td>'; echo '<td>' . $f['origFileName'] . '</td>'; echo '<td>' . $f['fileType'] . '</td>'; echo '<td>' . ($f['isPublic'] ? 'yes' : 'no') . '</td>'; echo '<td>' . $f['uploadTime'] . '</td>'; echo '<td><a href="edit.php?fid=' . $f['fid'] . '">Edit</a> ' . '<a href="delete.php?fid=' . $f['fid'] . '">Delete</a></td>'; echo '</tr>';}mysql_close($connect);?></table>


Tra

inin

g C

ou

rse, C

S, N

CTU

19

Confirm delete<?phpecho '<a href="list.php">File List</a> <br /><br />';$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 òrigFileName`, `hashFileName`, ìsPublic` " . "FROM `file` WHERE `fid` = '$fid'"); if (!$file) { echo 'Could not query: ' . mysql_error() . '<br />'; } else if (mysql_num_rows($file) == 0) { echo "Error: fid#$fid not exist<br />"; } else { $file = mysql_fetch_array($file); echo "delete file #$fid<br />"; // 顯示檔案資訊 echo 'File Name: ' . $file['origFileName'] . '<br />'; echo 'Public: ' . ($file['isPublic'] ? 'yes' : 'no') . ' <br />'; echo 'Are you sure? '; echo '<a href="do_delete.php?fid=' . $fid . '">Yes</a>'; }}mysql_close($connect);?>


Tra

inin

g C

ou

rse, C

S, N

CTU

20

Delete file<?phpecho '<a href="list.php">File List</a> <br /><br />';$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 òrigFileName`, `hashFileName`, ìsPublic` " . "FROM `file` WHERE `fid` = '$fid'"); if (!$file) { echo 'Could not query: ' . mysql_error() . '<br />'; } else if (mysql_num_rows($file) == 0) { echo "Error: fid#$fid not exist<br />"; } else { $file = mysql_fetch_array($file); echo "file #$fid has been deleted<br />"; // 顯示檔案資訊 echo 'File Name: ' . $file['origFileName'] . '<br />'; echo 'Public: ' . ($file['isPublic'] ? 'yes' : 'no') . ' <br />';

// 從 Table 中刪除 mysql_query("DELETE FROM `file` WHERE `fid` = '$fid'");

// 將 hash file 刪除 exec('/bin/rm -f file/' . $file['hashFileName']); }}mysql_close($connect);?>


Tra

inin

g C

ou

rse, C

S, N

CTU

21

Implementation – Download (1)Implementation – Download (1)

To download file

Click!

Tra

inin

g C

ou

rse, C

S, N

CTU

22

<table border="1" cellpadding="2" cellspacing="0"> <tr> <th>File ID</th> <th>File Name</th> <th>File Type</th> <th>Public</th> <th>Upload Time</th> <th>Command</th> </tr><?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 ùploadTime` DESC");while ($f = mysql_fetch_array($files)) { echo '<tr>'; echo '<td>' . $f['fid'] . '</td>'; echo '<td><a href="download.php?fid=' . $f['fid'] . '">' . $f['origFileName'] . '</a></td>'; echo '<td>' . $f['fileType'] . '</td>'; echo '<td>' . ($f['isPublic'] ? 'yes' : 'no') . '</td>'; echo '<td>' . $f['uploadTime'] . '</td>'; echo '<td><a href="edit.php?fid=' . $f['fid'] . '">Edit</a> ' . '<a href="delete.php?fid=' . $f['fid'] . '">Delete</a></td>'; echo '</tr>';}mysql_close($connect);?></table>


Add links to File List

Tra

inin

g C

ou

rse, C

S, N

CTU

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 òrigFileName`, `hashFileName`, `fileType`, ìsPublic` " . "FROM `file` WHERE `fid` = '$fid'");if (!$file) { echo 'Could not query: ' . mysql_error() . '<br />';} else if (mysql_num_rows($file) == 0) { echo "Error: fid#$fid not exist<br />";} 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 = '') { … }


Click!

Tra

inin

g C

ou

rse, C

S, N

CTU

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.


Tra

inin

g C

ou

rse, C

S, N

CTU

25

Implementation – Register (1)Implementation – Register (1)

To register user• Info are required: username, password• Check whether username conflict or not, loop back if conflict.

Designed Flow1. Click ‘Register’ Link from File List

2. Fill in Register Form (username, password)

3. Register user.• Success (saved in database)• Fail

Tra

inin

g C

ou

rse, C

S, N

CTU

26


<a href="register.php">Register</a><br /><br /><table border="1" cellpadding="2" cellspacing="0"> <tr> <th>File ID</th> <th>File Name</th> <th>File Type</th>. . .


Tra

inin

g C

ou

rse, C

S, N

CTU

27

Register Form (register.php)

Success Info (do_register.php)

Fail Info (do_register.php)

<a href="list.php">File List</a> <br /><br /><form action=“do_register.php" method="post"> <label for="name">Username:</label> <input type="input" name="name" id="name" /><br /> <label for="password">Password:</label> <input type="password" name="password" id="password" /><br /> <input type="submit" name="submit" value="Submit" /></form>


<a href="list.php">File List</a> <br /><br />Account <?=$_POST['name'] ?> Registered Successfully.echo '<a href="login.php">Login</a>';

<a href="list.php">File List</a><a href="register.php">Register Again!</a> <br /><br />Username <?=$_POST['name'] ?> has been used.

<a href="list.php">File List</a><a href="register.php">Register Again!</a> <br /><br />Password cannot be empty.

Tra

inin

g C

ou

rse, C

S, N

CTU

28


<a href="list.php">File List</a><?phpif (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 ùser` WHERE `name` = '$name'"); if (mysql_num_rows($user) > 0) { echo '<a href="register.php">Register Again!</a> <br /><br />'; echo 'Username "' . $name . '" has been used.'; } else if (!$password) { echo '<a href="register.php">Register Again!</a> <br /><br />'; echo 'Password cannot be empty.'; } else { mysql_query("INSERT INTO ùser` (`name`, `password`) VALUES ('$name', '$password')"); echo "<br /><br />"; echo "Account $name Registered Successfully."; echo '<a href="login.php">Login</a>'; } mysql_close($connect);}?>

do_register.php

Tra

inin

g C

ou

rse, C

S, N

CTU

29

Implementation – Login (1)Implementation – Login (1)

To login user• Info are required: username, password

Designed Flow1. Click ‘Login’ Link from File List

2. Fill in Login Form (username, password)

3. Regist user.• Success (keep in session)• Fail

Tra

inin

g C

ou

rse, C

S, N

CTU

30



<a href=“login.php">Login</a><a href="register.php">Register</a><br /><br /><table border="1" cellpadding="2" cellspacing="0"> <tr> <th>File ID</th> <th>File Name</th>. . .

Tra

inin

g C

ou

rse, C

S, N

CTU

31

Login Form (login.php)

Success Info (do_login.php)

Fail Info (do_login.php)

<a href="list.php">File List</a><a href="register.php">Register</a> <br /><br /><form action=“do_login.php" method="post"> <label for="name">Username:</label> <input type="input" name="name" id="name" /><br /> <label for="password">Password:</label> <input type="password" name="password" id="password" /><br /> <input type="submit" name="submit" value="Submit" /></form>


<a href="list.php">File List</a> <br /><br />Account <?=$_POST['name'] ?> Login Successfully.

<a href="list.php">File List</a> <a href="register.php">Register</a><a href=“login.php">Login Again!</a> <br /><br />Wrong Password!

<a href="list.php">File List</a> <a href="register.php">Register</a><a href=“login.php">Login Again!</a> <br /><br />Password cannot be empty.

<a href="list.php">File List</a> <a href="register.php">Register</a><a href=“login.php">Login Again!</a> <br /><br />Username <?=$_POST['name'] ?> does not exist.

Tra

inin

g C

ou

rse, C

S, N

CTU

32


<?php session_start(); ?><a href="list.php">File List</a><?phpif (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 ùser` WHERE `name` = '$name'"); if (mysql_num_rows($user) == 0) { echo '<a href="register.php">Register</a>'; echo '<a href=“login.php">Login Again!</a> <br /><br />'; echo "Username $name does not exist."; } else if (empty($password)) { echo '<a href="register.php">Register</a>'; echo '<a href=“login.php">Login Again!</a> <br /><br />'; echo 'Password cannot be empty.'; } else { $user = mysql_fetch_array($user); if ($password == $user['password']) { echo ‘<br /><br />Login successfully!'; $_SESSION['uid'] = $user['uid']; } else { echo '<a href="register.php">Register</a>'; echo '<a href=“login.php">Login Again!</a> <br /><br />'; echo 'Wrong Password!'; } } mysql_close($connect);}?>

do_login.php

Tra

inin

g C

ou

rse, C

S, N

CTU

33

<?phpsession_start();isset($_SESSION['uid'])or die('You should <a href="login.php">login</a> first!!<br />‘);?>


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”.

Tra

inin

g C

ou

rse, C

S, N

CTU

34

<?php$connect = mysql_connect('DBHOST', 'DBUSER', 'DBPASSWD') or die('Connection failed: ' . mysql_error());mysql_select_db('filesharer', $connect);$users = mysql_query("SELECT ùid`, `name` FROM ùser`");$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 ìsPublic` = 1 ORDER BY ùploadTime` DESC");}else { $uid = $_SESSION['uid']; $files = mysql_query("SELECT * FROM `file` WHERE ìsPublic` = 1 OR ùid` = $uid ORDER BY ùploadTime` DESC");}while ($f = mysql_fetch_array($files)) { $key = $f['uid']; echo '<tr>'; echo '<td>' . $f['fid'] . '</td>'; echo '<td>' . $usermap["$key"] . '</td>'; echo '<td><a href="download.php?fid=' . $f['fid'] . '">' . $f['origFileName'] . '</a></td>'; echo '<td>' . $f['fileType'] . '</td>'; echo '<td>' . ($f['isPublic'] ? 'yes' : 'no') . '</td>'; echo '<td>' . $f['uploadTime'] . '</td>'; if (isset($uid) && $f['uid'] == $uid) { echo '<td><a href="edit.php?fid=' . $f['fid'] . '">Edit</a> <a href="delete.php?fid=' . $f['fid'] . '">Delete</a></td>'; } else { echo '<td>Edit Delete</td>'; } echo '</tr>';}mysql_close($connect);?>


Modify File List

Tra

inin

g C

ou

rse, C

S, N

CTU

35

Implementation(7) – Login/LogoutImplementation(7) – Login/Logout

Not login!

Login!

Tra

inin

g C

ou

rse, C

S, N

CTU

36

<?phpif (isset($_SESSION['uid'])) { session_destroy();?>

<a href="list.php">File List</a><a href="register.php">Register</a> <br /><br />Logout!! <a href="loging.php">Relogin</a>?<br />

<?php} else {?><a href="list.php">File List</a><a href="register.php">Register</a> <br /><br />Not <a href="login.php">login</a> yet!<br /><?php}?>

Implementation – LogoutImplementation – Logout

To logout user, just add ‘Logout’ link everywhere<a href=“logout.php”> Logout </a>

• logout.php

Tra

inin

g C

ou

rse, C

S, N

CTU

37

Further (Advanced) FunctionsFurther (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, ...

Tra

inin

g C

ou

rse, C

S, N

CTU

38

Q&AQ&A

Documents

Chapter 7: Pratical Example – Implementation of Web File Sharer