Support Forums

Thats to Malik who requested this tutorial on my Request a Tutorial thread. I was thinking of calling this Simple-UP or SUP just for fun. If people decide to pursue a project or post tutorials with it, I guess this is the name you can use? :p

In this tutorial you will learn common uses of PHP and SQL. Today you will learn how to create a file-sharing website, by the end of this tutorial you will know how to write an upload script in PHP along with storing data in an SQL database.

This tutorial assumes you already know the basics of web design and how to use PHP along with limited knowledge of SQL. Let us begin.

[CENTER]Getting Started[/CENTER]

Let us begin with the index.php file. Here is what we are going to be using,
This should be obvious enough to void an explanation. The only thing worth mentioning is we are defining an XHTML Strict document using the !DOCTYPE tag.

Next off we will need another PHP file, we wil call it upload.php,


And while your at it lets start with a CSS stylesheet to define the basics of a simple template I made, and then create a new directory called images.

This is a basic template for you to use for this tutorial. I have included the logo at the bottom of this post, otherwise you can upload your image to the images directory and edit the img tag as such.

[CENTER]Writing the upload script[/CENTER]

Before we get to writing the index page, we should begin with the upload script. PHP has a very easy way of controlling how to upload files to the webserver, and all this access comes from the $_FILES super global array. The $_FILES array comes with a number of ways to handle different aspects of the file, here is a simple list of these different functions,

Quote:$_FILES["file"]["name"] - the name of the uploaded file
$_FILES["file"]["type"] - the type of the uploaded file
$_FILES["file"]["size"] - the size in bytes of the uploaded file
$_FILES["file"]["tmp_name"] - the name of the temporary copy of the file stored on the server
$_FILES["file"]["error"] - the error code resulting from the file upload

As you can see, there is an index named file in the array, you will learn why that is there later on.

So what are we waiting for? Lets begin scripting that upload page!

We are going to be going in the index.php file and adding a simple form submission box so we can input our files to be uploaded. Its as simple as including a couple tags,
In the div containing the id rightcontent. This is now what the page should look like,


If your unsure about the form tag, I will briefly go over this snippet.

• The action attribute handles which script the form will submit the data to. In this case we set the attribute to the upload script named upload.php. When the form is submitted, data will be sent to that script from the file input users will input themselves.
  
• The enctype attribute of the form tag specifies which content-type to use when submitting the form. This was a quote from W3Schools, in a nutshell this basically specifies how to transmit the data the upload script is going to receive, in this case, we are using multipart/form-data. This is to specify the form requires binary data.
  
• We use the post function so we can transmit data without being visible to others, and this method supports no boundaries on how much data we can send.
  

So now we have our simple template and a simple form. What the heck use is that? Lets begin writing the upload.php script.

Remember that $_FILES function which were discussed earlier? This is where it comes into play. We will be utilizing this function in the following snippets of code. To start off, lets start writing the basic script first.


This may look confusing, but with a couple explanations you will understand how this all works.

• Instead of specifying raw HTML tags on the page, we format our page using PHP echo. The reason I do this is to sort of provide a cleaner look at the page, instead of just focusing on the HTML and having to include PHP tags all the time, we can make this easier by echoing them. However its a better idea to do raw HTML when there is barely any PHP used in the page.
  
• We utilize the $_FILES function. As you can see above, we are using the $_FILES function specifying two-dimensions. Both file and error in this case. file corresponds to the form we made back in index.php when we specified the name attribute. Take a look,
  Code:

  Select File: <input type="file" name="file" />
  As shown here, we made name called: file. This must always be the first dimension of the $_FILES function if you plan on utilizing that file alone. error is used to indicate an error with the uploading process. If the value of $_FILES['file']['error'] is not 0, we throw an error message.
  
• We then show the statistics of the file we uploaded. Take a look at the snippet, most of this is pretty obvious stuff. However, $_FILES['file']['tmp_name'] is the temporary name of the file PHP stores the original file as. Its stored in PHP's temp folder (if I recall correctly).
  

Okay, so now we have a little script here to make sure everything works as planned. If it works correctly, when you submit the file of your choice you should be redirected to upload.php and statistics should show in a box at the top of your page, if all is well, good job so far.

Next we want to actually store the file on the web server, in the above example we arent storing the actual file on the web server. To make this happen, we will be making some changes to the script, and using some new functions to help us take care of the job.

• You set the directory to where the content is held. At the top of the script there is a variable called $upload_dir which sets the location to where all files will be kept when uploaded. Make sure you always add the backslash to the end of the path!
  
• We now physically upload the file to a certain directory on the web server. Here is the good part. We use an if statement to check if the file we uploaded is already in the directory you chose to keep all the content. If there is already the same file located, the script terminates and displays a message. However, if there isnt, the script moves the uploaded file from PHP's temporary location to the web server. The work is all done in the move_uploaded_file() function. It grabs that temporary file, and moves it to the directory you chose.
  

This is good and all, but what if we want to set restrictions such as maximum file size and/or type of file? Next off, we are going to set a size restriction and filter out files you do not want to specify. Here is the updated script,

And here is a slightly updated index.php,


Now its time to explain what we did in upload.php.

• We created the $MAX_FILE_SIZE constant. This constant is used to set the limit to the maximum size (in bytes) of an uploaded file. If its too large, it does not upload and the script terminates.
  
• We used an if statement to disallow certain MIME types. We used the if statement to filter out all files that have the MIME-type of application/octet-stream. Here is a list of all filetypes assosciated with different MIME-types, [URL="http://www.webmaster-toolkit.com/mime-types.shtml"]Webmaster Toolkit :: listing of mime types[/URL]
  

You can use these settings to disallow other types. This is called black-listing because instead of specifying wich file types are allowed, we instead specify which files to disallow so we dont have such a huge if statement.

[CENTER]Storing our Information[/CENTER]

Finally its time to get into some SQL. Storing information in a database is extremely useful, especially if your going to be storing lots of information for lots of data. Hence why SQL is included.

In this tutorial, I am going to be creating a configuration script which will just be used to hold fields that are used to login to the MySQL database. Here is the content of the script,


Call it config.php, fill those variables in, and your good to continue on.

Now, we will do some slight editting to both our index.php and upload.php files so we can connect to the database. Not only will we be connecting to the database, we also will connect and query. Here is how we are going to accomplish the connection, index.php (nothing except a connection so far),

upload.php,

And I have included a new file called query.sql which will be used for you to query your database before continuing on.


Make sure you query the database using the above SQL statements before continuing! THis is going to be a lot so put your thinking caps on. Index.php:

• We opened a connection to the MySQL server before anything else. This is to insure we always initiate a connection before the page loads. As you can see, we load our login credentials and database info in the config.php file using the include_once() function.
  
• Some text was added. We added text above the form to notify users of file restrictions. Nifty aint it.
  

Upload.php:

• We initiated a connection to the MySQL server. After doing so, we then proceeded to choose a database name which is specified in the configuration file. After doing so, we make sure all this data is correct. We use the die() function if that is not the case so we dont happen to lose data that should be in the database. Why go to such extreme measures? Well think of it like this: if the script couldnt select the database, how would the information about the uploaded file get stored in the database? It wouldnt which would become a problem.
  
• We execute a query on the database inserting data regarding information about the file. So far we are only filling in default values for show, I have provided a framework for you to work with and what I have provided is simply an example of how you can implement more functionality. The only data being automatically inserted is the file name, file size, file type and the path to where it is located.
  

Now that you have something to work with in index.php, hopefully you can figure out how to do some nifty tricks with it and edit the page to your liking.

Now its time we do some updating with the upload.php file so we can give the users a download link. Replace,
With,

• Another query is executed, this time using the SQL COUNT() function to determine the length of id of the next file. Basically, we use the count() function to get the next file id so every file has a unique file id.
  
• We then display the link of the current file's download URL. We will create the download.php page soon, so hang tight! We use $_SERVER['HTTP_HOST'] to get the domain, thus having no need for a user to manually specify the domain.
  

[CENTER]Downloading our files[/CENTER]



And finally, the last part of the tutorial! We will create a very simple download script because im very tired and am ready to sleep! Create a new file called download.php. Replace the content of whats inside your empty file with this,

Everything else here should be fairly obvious from what you gained from previous information.

EDIT: Add the following, call it file.php,

[CENTER]Conclusion[/CENTER]

Anyways, I hope you have learned a lot from this long tutorial. Im glad people requested tutorials that I have had time to make, I had fun and learned a lot myself. Thanks!

---

Some pictures of what you will get out of this tutorial,


[URL="http://img46.imageshack.us/i/upload1s.png/"][/URL]

[URL="http://img839.imageshack.us/i/upload2.png/"][/URL]

[URL="http://img716.imageshack.us/i/upload3q.png/"][/URL]

Nice tutorial, but you need to fix some of your tags up.

Great tutorial, but fix your tags.

WOw great guide mate Thanks