Creating a File Hosting Site With CodeIgniter _ Nettuts+

12
29/12/13 Creating a File Hosting Site with CodeIgniter | Nettuts+ net.tutsplus.com/tutorials/php/creating-a-file-hosting-site-with-codeigniter/ 1/12 Advertise Here Creating a File Hosting Site with CodeIgniter Henry Irish on Mar 11th 2009 with 152 Comments View post on Tuts+ BetaTuts+ Beta is an optimized, mobile-friendly and easy-to-read version of the Tuts+ network. I have seen a few introductory tutorials for Codeigniter, and was hoping to show you something a little more advanced. This tutorial will show you how to build a powerful web application for hosting images, using the flexibility of Codeigniter. This tutorial should teach you about the MVC coding philosophy, integral to producing serviceable applications. Step 1: Setup Before we go anywhere near the code, we need to do some setup. Fire up your favorite database editor (I’ll be using SQLBuddy ) and create a new database called ‘uploadr’. Inside this, create two tables: ‘users’ and ‘files’. Set up users to have a primary-key, auto-numbered ‘id’ column, along with two varchar columns: ‘password’ and ‘username’. The files table needs another ‘id’ column (again primary-key and auto-numbered), as well as an integer ‘owner’ column, and a varchar ‘name’ column.

Transcript of Creating a File Hosting Site With CodeIgniter _ Nettuts+

Page 1: Creating a File Hosting Site With CodeIgniter _ Nettuts+

29/12/13 Creating a File Hosting Site with CodeIgniter | Nettuts+

net.tutsplus.com/tutorials/php/creating-a-file-hosting-site-with-codeigniter/ 1/12

Advertise Here

Creating a File Hosting Site withCodeIgniterHenry Irish on Mar 11th 2009 with 152 CommentsView post on Tuts+ BetaTuts+ Beta is an optimized, mobile-friendly and easy-to-read version of the Tuts+ network.

I have seen a few introductory tutorials for Codeigniter, and was hoping to show you something a little more advanced.This tutorial will show you how to build a powerful web application for hosting images, using the flexibility ofCodeigniter. This tutorial should teach you about the MVC coding philosophy, integral to producing serviceableapplications.

Step 1: Setup

Before we go anywhere near the code, we need to do some setup. Fire up your favorite database editor (I’ll be usingSQLBuddy) and create a new database called ‘uploadr’. Inside this, create two tables: ‘users’ and ‘files’. Set up usersto have a primary-key, auto-numbered ‘id’ column, along with two varchar columns: ‘password’ and ‘username’. Thefiles table needs another ‘id’ column (again primary-key and auto-numbered), as well as an integer ‘owner’ column, anda varchar ‘name’ column.

Page 2: Creating a File Hosting Site With CodeIgniter _ Nettuts+

29/12/13 Creating a File Hosting Site with CodeIgniter | Nettuts+

net.tutsplus.com/tutorials/php/creating-a-file-hosting-site-with-codeigniter/ 2/12

Since this tutorial is focussed on learning Codeigniter programming and about MVC, we are going to forgo all of thestyling stuff (like CSS, photoshop). To this end, I’ve created a custom Codeigniter install for you, with all the filescreated, and the views (mostly) HTML-d and CSS-d. The two things you’ll need to change are the config and databasesettings. I even included a “Beta” stamp, so it’d feel even more like a web-startup!

Step 2: Registration

Now onto the first bit of meat! Open up the ‘login.php’ controller and create a function called ‘register’. This is going tocontrol the entire registration process. First, we need to check whether any POST requests have been sent to theserver. In this case, these will signify someone trying to register. We can do this by checking whether$_POST['username'] is set. If it is, then we know someone has tried to register, and can enter it into the DB.

view plaincopy to clipboardprint?

1. 2. function register() 3. { 4. if(isset($_POST['username'])){ 5.

Page 3: Creating a File Hosting Site With CodeIgniter _ Nettuts+

29/12/13 Creating a File Hosting Site with CodeIgniter | Nettuts+

net.tutsplus.com/tutorials/php/creating-a-file-hosting-site-with-codeigniter/ 3/12

6. // User has tried registering, insert them into database. 7. 8. $username = $_POST['username']; 9. $password = $_POST['password'];

10. 11. $this->users->register($username, $password); 12. 13. redirect('login'); 14. 15. } 16. else{ 17. //User has not tried registering, bring up registration information.

18. $this->load->view('register'); 19. } 20. }

If the user has yet to try registering, it detects this and automatically sends them to the ‘register’ view that I’ve coded foryou. You’ll notice the line:

view plaincopy to clipboardprint?

1. $this->users->register($username,$password);

This is calling the function ‘register’ in the model ‘users’. At the moment this will not work, since we haven’t loaded themodel. We do this in the same way as loading views, but since we are going to be using this model extensivelythroughout this class, we will load it in the constructor function (the function with the same name as the class), so that it isalways loaded and available:

view plaincopy to clipboardprint?

1. function Login() 2. { 3. parent::Controller(); 4. $this->load->model('users');

5. }

You’re probably interested in what the registration function actually contains. Well, it simply uses a couple ofCodeigniter’s active record functions, which allow for DB manipulation. The big advantage of using Codeigniter’s builtin active record functions (besides the fact that they’re nice and simple) is that they’re database agnostic: you can easilyswitch in and out different database types (for example mySQL, SQLite) in the DB config file without affecting theapplication. In the case of our registration, we’re adding an entry to the users table. Create this function in the‘users.php’ model:

view plaincopy to clipboardprint?

1. function register($username, $password) 2. { 3. $new_user = array ( 4. 'username'=>$username, 5. 'password'=>$password 6. ); 7. 8. $this->db->insert('users', $new_user); 9.

10. return true;

Page 4: Creating a File Hosting Site With CodeIgniter _ Nettuts+

29/12/13 Creating a File Hosting Site with CodeIgniter | Nettuts+

net.tutsplus.com/tutorials/php/creating-a-file-hosting-site-with-codeigniter/ 4/12

11. }

The only thing worth noticing in the registration view are the site_url() and base_url() functions. These respectively giveyour site’s URL with and without the index.php/ suffix. The greatest advantage to them is that you can change yoursite’s URL structure without having to go through all the links: it just takes one change in your config file.

Once this is all setup, we can try registering an account. The function in our controller should redirect us to the loginpage again after our account is created.

Step 3: Login

Now that we have a few users set up, we need a way of actually letting them into the site. For this, we are going to useCodeigniter’s sessions class. Although this actually uses cookies, it works in a very similar way to normal PHP sessions,just with more options (I recommend you check the userguide).

To start with, we need to create the function that the login button currently points to, ‘go’. This function will need tocollect the information that the form has submitted, and then check it against the DB using a model. If all is correct, it’llstart a session, and redirect the user to their files. If they mistyped their information, they’ll be redirected to the loginpage.

view plaincopy to clipboardprint?

1. function go() 2. { 3. 4. $username = $_POST['username']; 5. $password = $_POST['password']; 6. 7. //Returns userid if successful, false if unsuccessful 8. $results = $this->users->login($username,$password); 9.

10. if ($results==false) redirect('login'); 11. else 12. { 13. $this->session->set_userdata(array('userid'=>$results)); 14. redirect('profile'); 15. } 16. 17. }

Parts of this function should look very familiar to you from the register function: it collects $username and $password,before submitting them to a model (this time ‘login’). After this however, the differences begin to occur.

It then checks to see if the login has failed; if it has, then the user is redirected back to the login page. However, if thelogin is successful then the script creates a session, setting ‘userid’ to the users id. All that we need now for the loginscript to work is the model. Add this function to the ‘users’ model we used earlier:

view plaincopy to clipboardprint?

1. function login($username, $password) 2. { 3. 4. $query = $this->db->get_where('users', array('username'=>$username, 'password'=>$password));

Page 5: Creating a File Hosting Site With CodeIgniter _ Nettuts+

29/12/13 Creating a File Hosting Site with CodeIgniter | Nettuts+

net.tutsplus.com/tutorials/php/creating-a-file-hosting-site-with-codeigniter/ 5/12

5. 6. if ($query->num_rows()==0) return false; 7. else{ 8. $result = $query->result(); 9. $first_row = $result[0];

10. $userid = $first_row->id; 11. 12. return $userid; 13. } 14. 15. }

A quick rundown: first, it queries the database looking for any users with exactly the same username and password. If itdoesn’t find any, then the number of rows will be 0, and the function returns false. If somebody was found, then it usesanother of Codeigniter’s active record functions to load it as an object. This objects comes as an array of DB rows,each containing an object with that rows information. Since we want the first and only row, we take it out of $result, andthen return the id from it.

We will need to check whether the user is logged in whilst on the profile page. To do this, we simply insert two lines ofcode into the constructor of the profile controller. This will check that the session contains a userid. If it doesn’t, thenredirect to the login page. If it does, then all is fine, and it gets turned into a public variable. Whilst we’re changing theconstructor, we will load the two models that we will need for the profile page:

view plaincopy to clipboardprint?

1. function Profile() 2. { 3. parent::Controller(); 4. 5. $this->load->model('users'); 6. $this->load->model('files'); 7. 8. $this->userid = $this->session->userdata('userid'); 9. if (!isset($this->userid) or $this->userid=='') redirect('login');

10. }

The final thing we need to do is make it possible to logout. This is achieved by simply setting the userid to nothing,deleting it. All it requires is one simple function:

view plaincopy to clipboardprint?

1. function logout() 2. { 3. $this->session->set_userdata(array('userid'=>'')); 4. redirect('login'); 5. }

Step 4: Viewing and Uploading Files

Right then, we’ve just logged in for the first time. What are we greeted with?

Page 6: Creating a File Hosting Site With CodeIgniter _ Nettuts+

29/12/13 Creating a File Hosting Site with CodeIgniter | Nettuts+

net.tutsplus.com/tutorials/php/creating-a-file-hosting-site-with-codeigniter/ 6/12

Not bad, not bad, although that ‘sample file’ isn’t being generated from our database, it’s static. We’ll rectify that soon,but first we need to change the permissions of the ‘file’ folder so that Codeigniter can read and write on it. I changed itto 777 Permissions:

Now that that’s out of the way, let’s get back to some coding! We need to load all the users files out of the database,and to do that we’re going to need…

… a model! This time however, we’re going to create it in the ‘files.php’ model, so we keep our user table and file tableseparate. Insert this function:

view plaincopy to clipboardprint?

1. function get($userid) 2. { 3. $query = $this->db->get_where('files', array('owner'=>$userid)); 4. return $query->result(); 5. }

This again draws from earlier sections of this tutorial, so you should be able to understand it. Basically, it gets all therows where the owner = the user’s id, and returns them in a nice array of objects. Let’s create something in the‘profiles’ controller to interface with it, and to pass the info onto the view. Amend the index function with this:

Page 7: Creating a File Hosting Site With CodeIgniter _ Nettuts+

29/12/13 Creating a File Hosting Site with CodeIgniter | Nettuts+

net.tutsplus.com/tutorials/php/creating-a-file-hosting-site-with-codeigniter/ 7/12

view plaincopy to clipboardprint?

1. function index() 2. { 3. $data['files'] = $this->files->get($this->userid); 4. $this->load->view('profile', $data); 5. }

Again, a very simple function. It takes the results passed to it from the files model, and packages them to the view.Codeigniter passes data to the view usually through an array (in this case data). It will then automatically explode thearray into lots of variables, so when we go to the view, it will be able to access the database results through $file, ratherthan $data['file']. Let’s put this lovely database result into the view! Stick this into ‘profile.php’, replacing the code thatthe HTML comment tells you to.

view plaincopy to clipboardprint?

1. <?php foreach($files as $file): ?> 2. 3. <div class="section"> 4. <span><?=$file->name?></span> 5. <div style="float: right;"> 6. <span><a href="<?=base_url()?>files/<?=$file->name?>">View</a></span> 7. <span><a href="<?=site_url("profile/delete/".$file->id)?>">Delete</a></span> 8. </div> 9. </div>

10. 11. <?php endforeach; ?>

The foreach loop loads each row of the array in turn, and makes it accessible via the $file object. We then, using thesample “section” as a template, fill in all the links and the name with information for the new $file object. We will howthe delete function works later, and how the view link works after we’ve uploaded something.

If you open this in your browser now, you won’t see anything. This is because we haven’t got any files uploaded! Well,we need to rectify that, so we’ll need to make an uploading form. Let’s do the controller first; open ‘profile.php’ andadd this function:

view plaincopy to clipboardprint?

1. function upload() 2. { 3. if(isset($_FILES['file'])){ 4. $file = read_file($_FILES['file']['tmp_name']);

Page 8: Creating a File Hosting Site With CodeIgniter _ Nettuts+

29/12/13 Creating a File Hosting Site with CodeIgniter | Nettuts+

net.tutsplus.com/tutorials/php/creating-a-file-hosting-site-with-codeigniter/ 8/12

5. $name = basename($_FILES['file']['name']); 6. 7. write_file('files/'.$name, $file); 8. 9. $this->files->add($name);

10. redirect('profile'); 11. } 12. 13. else $this->load->view('upload'); 14. }

This function adds quite a few new things: especially Codeigniter’s file handling. It starts off fairly simply, checking to seewhether a form has been submitted by looking for a file. If the file doesn’t exist, it simply shows the upload view (whichwe’ll be updating next). If the file does exist, then it extracts reads the temporary file that the server has generated. Thedirectory of the temporary file can be found at $_FILES['your_file']['tmp_name'], and the file can be read from thisdirectory by Codeigniter’s read_file. This loads all of the files information into the $file variable.

The next line gets the file’s name from the global $_FILES in a similar way to getting the temporary directory. Armedwith these two pieces of information, codeigniter writes the file to the files folder in the same directory as it’s index file.Lastly, the file needs to be added to the database. Again, we’re going this with a model, this time the ‘add’ function in‘files’. We’ll see how that works in a minutes, but we now need to create the uploading form in the view. Add thiswhere the ‘upload.php’s HTML comment tells you to:

view plaincopy to clipboardprint?

1. <form enctype="multipart/form-data" action="<?=site_url('profile/upload')?>" method="post"> 2. 3. <div id="boxtop"></div><div id="boxmid"> 4. 5. <div class="section"> 6. <span>File:</span> 7. <input type="file" name="file" /> 8. </div> 9.

10. </div><div id="boxbot"></div> 11. 12. <div class="text" style="float: left;"><p>Before uploading, check out</p>

<p>the <a href=#>Terms of Service</a>.</p></div> 13. <div class="text" style="float: right;"> 14. 15. <input type="submit" value="Upload" name="upload" class="submit" /> 16. </div> 17. <br style="clear:both; height: 0px;" /> 18. 19. </form>

Replace the current HTML with this. The important thing to note here is that when we’re uploading files, we use aninput type=file, which allows us to pick a file to upload. Also, we have to specify an enctype in our form tag, so that theserver knows that it’s recieving a file and to save it. Not too interesting to us back-end coders, but still crucial! Let’shave a quick look at what we’ve created:

Page 9: Creating a File Hosting Site With CodeIgniter _ Nettuts+

29/12/13 Creating a File Hosting Site with CodeIgniter | Nettuts+

net.tutsplus.com/tutorials/php/creating-a-file-hosting-site-with-codeigniter/ 9/12

Now we move onto the final bit of the file uploading script, the model. This adds the file to the database, with it’s nameand owner, so the server knows which files belong to whom. Let’s take a look; add this to your ‘files’ model:

view plaincopy to clipboardprint?

1. function add($file) 2. { 3. $this->db->insert('files', array('owner'=>$this->session->userdata('userid'),'name'=>$file )); 4. }

Again leveraging Codeigniter’s active record functionality, we add a row to the database with the name of the file andthe owner. We get the owner by finding the users id from the session data that we saved earlier when logging on. All inall, a very simple function. Let’s trying uploading a nice photo, eh?

Et, Voila!

Page 10: Creating a File Hosting Site With CodeIgniter _ Nettuts+

29/12/13 Creating a File Hosting Site with CodeIgniter | Nettuts+

net.tutsplus.com/tutorials/php/creating-a-file-hosting-site-with-codeigniter/ 10/12

Looking into the ‘files’ folder, we see that the file that we uploaded has appeared there, as if by magic (Codeignitermagic!), and we see why the view link works, since it simply points directly to the file in the directory. With this done, allthat remains for this tutorial is deleting files.

Step 5: Deleting Files

Ok, the last bit. This shouldn’t take so long, since you’ll be able to utilize the ideas that you learnt earlier to understandthis. First we’ll add this code to our ‘profiles’ controller:

view plaincopy to clipboardprint?

1. function delete($id) 2. { 3. //This deletes the file from the database, before returning the name of the file. 4. $name = $this->files->delete($id); 5. unlink('files/'.$name); 6. redirect('profile'); 7. }

And this code to our ‘files’ model:

view plaincopy to clipboardprint?

1. function delete($fileid) 2. { 3. $query = $this->db->get_where('files',array('id'=>$fileid)); 4. $result = $query->result(); 5. $query = $this->db->delete('files', array('id'=>$fileid)); 6. return $result[0]->name; 7. }

The first controller should be very easy to understand. It calls the delete function from the files model (which we definedat the same time), which generates the name of the file. It then uses a basic PHP function to delete the file with that namein the files directory. Finally, it sends back to the users profile (which is now minus one file).

Page 11: Creating a File Hosting Site With CodeIgniter _ Nettuts+

29/12/13 Creating a File Hosting Site with CodeIgniter | Nettuts+

net.tutsplus.com/tutorials/php/creating-a-file-hosting-site-with-codeigniter/ 11/12

Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

The model is slightly more complex. It needs to return the name of the file as well as deleting it, so first it queries thedatabase to get the files details. It loads this into the $result variable, and then goes on to delete the file. It then returnsthe ‘name’ column of the first row of the array (the only row that the query returned), which is then used in the abovecontroller.

Let’s try to delete a function:

And click delete…

Hooray! It worked. I guess we’re all done then!

Final Thoughts

Delete Files

Of course, this code should not be run on a server without some serious improvements. Here are a few major problemswith it:

The passwords are all unencrypted. This means that if anyone should break into your database, they will be ableto steal all of your users data with minimal effort. As I’m sure you’ll all agree: not good. This could easily besolved by adding some simple hashing to the passwords.

The files are not private. A user may want to ensure that the files they upload are only visible by them, and not bysomeone who just guesses a bunch of urls. This would probably require another controller for serving the files

(which checks for session data).The script does not check that files exist before writing files. This could cause conflicts with your files, or it could

result in file data being overwritten. Whichever: not good. This could be solved with a simple DB check to ensurethat the file has not been taken, and could be minimized by giving users their own directories within the files

folder.No errors are being generated. This doesn’t exactly help the user find out what they’re doing wrong, and

although this isn’t (too) much of a problem on such a small site with such limited actions, it still could beimproved.

All in all, you’ve created quite a powerful little web application, especially due to the small amount of code that you hadto write. Due to Codeigniter’s nature, it’s quite easily extended, both to resolve the above problems, and to add new

features, like renaming files. I also hope that this tutorial taught you a bit about using MVC concepts, and the power thatthey bring: by simply adjusted the models on our application, we can swap our the DB for text files, XML or anything,

and by changing the views, we can completely re-theme without breaking functionality. Amazing!

66 people like this. Be the first of your friends.Like