PHP MySQL Image Gallery
PHP MySQL Image Gallery
On the previous tutorial you already know how to upload and download files to the server. Now we’re gonna reuse the codes to build an image gallery. It’s a simple image gallery where the admin ( that’s you ) is the only one who can add/modify/delete the album and images. The “normal folks” can only browse around the image gallery checking out the images from one album to another
The admin section contain the following :
* Add New Album
* Album List
* Edit & Delete Album
* Add Image
* Image List
* Edit & Delete Image
And the visitor page contain these :
* Display Album List
* Display Image List
* Display Image Detail
Now, before we go straight to the codes we need to talk about the database design, directory layout, and configurations.
Database Design
For a simple image gallery like this we only need two tables, tbl_album and tbl_image. Here is the SQL to create these tables
Source code : image-gallery.sql
CREATE TABLE tbl_album (
al_id INT NOT NULL AUTO_INCREMENT,
al_name VARCHAR(64) NOT NULL,
al_description TEXT NOT NULL,
al_image VARCHAR(64) NOT NULL,
al_date DATETIME NOT NULL,
PRIMARY KEY(al_id)
);
CREATE TABLE tbl_image (
im_id INT NOT NULL AUTO_INCREMENT,
im_album_id INT NOT NULL,
im_title VARCHAR(64) NOT NULL,
im_description TEXT NOT NULL,
im_type VARCHAR(30) NOT NULL,
im_image VARCHAR(60) NOT NULL,
im_thumbnail VARCHAR(60) NOT NULL,
im_date DATETIME NOT NULL,
PRIMARY KEY(im_id)
);
Directory Layout
The image below show the file organization for the image gallery
The images directory is where we kept all of the images. The image icons are stored in the thumbnail sub-directory uder the gallery. Please remember to set write access to the album, gallery, and thumbnail directories otherwise the gallery script will not be able to save the images.
Configurations
There are some constants in the config file that you should change :
1. ALBUM_IMG_DIR, GALLERY_IMG_DIR
These are the absolute path to the images directories
2. THUMBNAIL_WIDTH
The PHP script will create a thumbnail ( icons ) for each image that you upload. In addition when you add an album image that image will also resized automatically.
One more note. If you want to test this gallery on your own computer please make sure you already have GD library installed. To check if GD library is installed on your system save the following code and run it.
After taking care of the configurations we’ll take a quick tour on the admin page
On the previous tutorial you already know how to upload and download files to the server. Now we’re gonna reuse the codes to build an image gallery. It’s a simple image gallery where the admin ( that’s you ) is the only one who can add/modify/delete the album and images. The “normal folks” can only browse around the image gallery checking out the images from one album to another
The admin section contain the following :
* Add New Album
* Album List
* Edit & Delete Album
* Add Image
* Image List
* Edit & Delete Image
And the visitor page contain these :
* Display Album List
* Display Image List
* Display Image Detail
Now, before we go straight to the codes we need to talk about the database design, directory layout, and configurations.
Database Design
For a simple image gallery like this we only need two tables, tbl_album and tbl_image. Here is the SQL to create these tables
Source code : image-gallery.sql
CREATE TABLE tbl_album (
al_id INT NOT NULL AUTO_INCREMENT,
al_name VARCHAR(64) NOT NULL,
al_description TEXT NOT NULL,
al_image VARCHAR(64) NOT NULL,
al_date DATETIME NOT NULL,
PRIMARY KEY(al_id)
);
CREATE TABLE tbl_image (
im_id INT NOT NULL AUTO_INCREMENT,
im_album_id INT NOT NULL,
im_title VARCHAR(64) NOT NULL,
im_description TEXT NOT NULL,
im_type VARCHAR(30) NOT NULL,
im_image VARCHAR(60) NOT NULL,
im_thumbnail VARCHAR(60) NOT NULL,
im_date DATETIME NOT NULL,
PRIMARY KEY(im_id)
);
Directory Layout
The image below show the file organization for the image gallery
The images directory is where we kept all of the images. The image icons are stored in the thumbnail sub-directory uder the gallery. Please remember to set write access to the album, gallery, and thumbnail directories otherwise the gallery script will not be able to save the images.
Configurations
There are some constants in the config file that you should change :
1. ALBUM_IMG_DIR, GALLERY_IMG_DIR
These are the absolute path to the images directories
2. THUMBNAIL_WIDTH
The PHP script will create a thumbnail ( icons ) for each image that you upload. In addition when you add an album image that image will also resized automatically.
One more note. If you want to test this gallery on your own computer please make sure you already have GD library installed. To check if GD library is installed on your system save the following code and run it.
After taking care of the configurations we’ll take a quick tour on the admin page