#3 working with data stored in files && securing your application

This chapter reveals that you can use files and databases together to build PHP application that waash in binary data.

The application needs to store images.

Firstly, we should use the ALTER statement to change the structure of a database.

ALTER TABLE guitarwars
ADD COLUMN screeshot varchar(64)

Next step, we should understand how can we get an image from the user ?

<input type="file" id="screenshot" name="screenshot" />

This can use a file input field to allow image file uploads.

Then we should Insert the data posted from the form into the table, use the INSERT statment :

INSERT INTO guitarwars VALUES
(0, NOW(), '$name', '$score', '$screenshot')　

Here we just need to insert the filename into the table , so $screenshot represents the name of the file

the super variable $_FILES is where PHP stores infomation about an uploaded file.

$screenshot = $_FILES['screenshot']['name']
// some other attributes :
$_FILES['screenshot']['type']
$_FILES['screenshot']['size']
$_FILES['screenshot']['tmp_name']
$_FILES['screenshot']['error']

you may have a question why dont just store the image file into the database ?

Databases excel at storing text data, not raw binary data such as images. so its better to just store a reference to an image in the database .

This reference is the name of the image file.

Another reason is beacese it would be much harderto display them using HTML code. You can see that generating an image tag

in HTML involves using an image filename, not raw image data. just like :

<img src = "phizsscore.jpg" alt = "Score image" />

Here is another question, when we uploads the file, where did they go ?

The answer is the file is actually uploaded to a temporary folder on the server. The temporary folder is created automatically on the server

and usually has a weird name with a bunch of random letter and numbers.

If we want to use the files again, we should control the initial storage location of uploaded files in PHP.

You can move file from the temporary folder to a permanenet folder by using this function :

move_uploaded_file( $_FILES['screenshot']['name'], $target) ;

$target is the destination location where you want to put the file on server .

Every Application needs a image folder. so create a home for uploaded iamge files.

$target = GW_UPLOADPATH.$screenshot ;

There is another problem, if two users uploaded image file with the same filenames, it will overwrite the one before.

A simple way to solve this is to add current server time to the front of the filename:

$target = GW_UPLOADPATH. time() . $screenshot　　

Just a tips here : If your PHP App is hosted anywhere other than your local computer, you'll need to use FTP to

create the images folder on the server.

If the path changes, you have to change the code in all places, so you can use define() to avoid this :

define('GW_UPLOADPATH', 'images/')

and if you want to access the constants in other scripts, you may use the require_once()

require_once('appvars.php');

Just think of require_onece as "insert" . This statement inserts shared script code into other scripts.

We almost finish our application. But if this would be a real appliaction, is needs the VALIDATION .

Validation on the image file serves two vitial purposes. 1, it can beef up the prevention of large file uploads, providing users with notification that

a file cant be larger than 32kb. 2, it can stop people from uploading files that aren't images.　try the code below:　

if (
( ($screenshot_type == 'image/gif') || ($screenshot_type=='image/jpeg')
||($screenshot_type == 'image/pjpeg') || ($screenshot_type == 'image/png'))
&& ($screenshot_size > 0) && ($screenshot_size <= GW_MAXFILESIZE)
) {
...
}

IN the real application, we often need some function groups and pages which can only be used by the admin, so the administrator

can manage this application. We will add an admin model in this app too.　　

The project files are as follows :

/****　　　　　　index.php 　　　　　　**** /

.error {
font-weight: bold;
color: #FF0000;
}

.topscoreheader {
text-align: center;
font-size: 200%;
background-color: #36407F;
color: #FFFFFF;
}

.score {
font-size:150%;
color: #36407F;
}

.scoreinfo {
vertical-align: top;
padding-right:15px;
}

View Code