there are quite a few image-sharing websites around at the moment. They all share roughly the same structure: the user uploads an image and that image can be shared, allowing others to view that image. Perhaps limits or constraints are placed on the viewing of an image, perhaps the image only remains viewable for a set period of time, or within set dates, but the general structure is the same. And I’m happy to announce that this project is exactly the same.
We’ll create an application allowing users to share pictures; these pictures are accessible from a unique URL. To make this app, we will create two controllers: one to process image uploading and one to process the viewing and displaying of images stored.
We’ll create a language file to store the text, allowing you to have support for multiple languages should it be needed.
We’ll create all the necessary view files and a model to interface with the database.
In this tutorial, we will cover:
- Design and wireframes
- Creating the database
- Creating the models
- Creating the views
- Creating the controllers
- Putting it all together
So without further ado, let’s get on with it.
Design and wireframes
As always, before we start building, we should take a look at what we plan to build.
First, a brief description of our intent: we plan to build an app to allow the user to upload an image. That image will be stored in a folder with a unique name. A URL will also be generated containing a unique code, and the URL and code will be assigned to that image. The image can be accessed via that URL.
The idea of using a unique URL to access that image is so that we can control access to that image, such as allowing an image to be viewed only a set number of times, or for a certain period of time only.
Anyway, to get a better idea of what’s happening, let’s take a look at the following site map:
So that’s the site map. The first thing to notice is how simple the site is. There are only three main areas to this project. Let’s go over each item and get a brief idea of what they do:
- create: Imagine this as the start point. The user will be shown a simple form allowing them to upload an image. Once the user presses the Upload button, they are directed to
- do_upload: The uploaded image is validated for size and file type. If it passes, then a unique eight-character string is generated. This string is then used as the name of a folder we will make. This folder is present in the main
uploadfolder and the uploaded image is saved in it. The image details (image name, folder name, and so on) are then passed to the database model, where another unique code is generated for the image URL. This unique code, image name, and folder name are then saved to the database.The user is then presented with a message informing them that their image has been uploaded and that a URL has been created. The user is also presented with the image they have uploaded.
- go: This will take a URL provided by someone typing into a browser’s address bar, or an
img srctag, or some other method. The
goitem will look at the unique code in the URL, query the database to see if that code exists, and if so, fetch the folder name and image name and deliver the image back to the method that called it.
Now that we have a fairly good idea of the structure and form of the site, let’s take a look at the wireframes of each page.
The create item
The following screenshot shows a wireframe for the
create item discussed in the previous section. The user is shown a simple form allowing them to upload an image.
The do_upload item
The following screenshot shows a wireframe from the
do_upload item discussed in the previous section. The user is shown the image they have uploaded and the URL that will direct other users to that image.
The go item
The following screenshot shows a wireframe from the go item described in the previous section. The
go controller takes the unique code in a URL, attempts to find it in the database table images, and if found, supplies the image associated with it. Only the image is supplied, not the actual HTML markup.
This is a relatively small project, and all in all we’re only going to create seven files, which are as follows:
/path/to/codeigniter/application/models/image_model.php: This provides read/write access to the
imagesdatabase table. This model also takes the upload information and unique folder name (which we store the uploaded image in) from the
createcontroller and stores this to the database.
/path/to/codeigniter/application/views/create/create.php: This provides us with an interface to display a form allowing the user to upload a file. This also displays any error messages to the user, such as wrong file type, file size too big, and so on.
/path/to/codeigniter/application/views/create/result.php: This displays the image to the user after it has been successfully uploaded, as well as the URL required to view that image.
/path/to/codeigniter/application/views/nav/top_nav.php: This provides a navigation bar at the top of the page.
/path/to/codeigniter/application/controllers/create.php: This performs validation checks on the image uploaded by the user, creates a uniquely named folder to store the uploaded image, and passes this information to the model.
/path/to/codeigniter/application/controllers/go.php: This performs validation checks on the URL input by the user, looks for the unique code in the URL and attempts to find this record in the database. If it is found, then it will display the image stored on disk.
/path/to/codeigniter/application/language/english/en_admin_lang.php: This provides language support for the application.
The file structure of the preceding seven files is as follows:
application/ ├── controllers/ │ ├── create.php │ ├── go.php ├── models/ │ ├── image_model.php ├── views/create/ │ ├── create.php │ ├── result.php ├── views/nav/ │ ├── top_nav.php ├── language/english/ │ ├── en_admin_lang.php