PHP Image Album Gallery Script | Photo Gallery with Admin Panel

In the previous article about How to Create Dynamic Image gallery Using PHP and Bootstrap we have learned that how we create a dynamic gallery using PHP. Now in this tutorial we will see that how we create album based Image Gallery in PHP.

Its a very easy task to create PHP Image Album Gallery Script and does not involve too much efforts as we have already completed the tricky part about this series.

We will create another table which will hold the album id and Name of the album. We will also add one more column to our existing gallery table which will tell us that which image belongs to which album by using the id. You can checkout our previous article here




Album Table

We will create the Album Table so that we will able to create Album based gallery using php and mysql.

CREATE TABLE IF NOT EXISTS `album` (
  `AlbumId` int(4) NOT NULL AUTO_INCREMENT,
  `AlbumName` varchar(50) NOT NULL,
  PRIMARY KEY (`AlbumId`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

Now we will also update the our gallery table so that we will be able to save the album name with the image.  Or just run the below query it will add the album id column to the table.

alter table gallery add column AlbumId int(4)

Or you can use this table structure.

CREATE TABLE IF NOT EXISTS `gallery` (
  `ID` int(11) NOT NULL AUTO_INCREMENT,
  `ImageName` varchar(250) NOT NULL,
`AlbumId` int(4) NOT NULL,
  PRIMARY KEY (`ID`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

Now we will just update the code for saving the image to database with the album id. First of all we will create the functions for adding the album and getting the list of album.

Add Album Function

public function addAlbum($name){
        $insert="Insert into album (AlbumName) values ('$name')";
        $result=$this->query($insert);
        if($result){
            echo "Album created";
        }
        else
        {
            echo "Album not created";
        }
    }

List Album Function

public function listAlbum(){
        $select="select * from album";
        $result=$this->query($select);
        $count=$result->num_rows;
        if($count< 1){
            
        }
        else
        {
            while ($row = $result->fetch_array()) {
                $rows[]=$row;
            }
            return $rows;
        }
    }

By using both the function we can add and list the album. Now we will create the album dropdown in the add gallery page.

Add Album Dropdown to Image Upload Form

Getting the list of the added album.

$listAlbum=$galleryClass->listAlbum();

<div class="col-md-6">
          <form method="post" action="<?php echo $_SERVER["PHP_SELF"]; ?>" enctype="multipart/form-data">
              <div class="form-group">
                  <label>Choose Album</label>
                  <select id="AlbumId" name="AlbumId" class="form-control">
                  <?php
                    if(count($listAlbum)){
                        foreach ($listAlbum as $value) {
                            echo "<option value='$value[AlbumId]'>$value[AlbumName]</option>";
                        }
                    }
                  ?>
                  </select>
              </div>
              <div class="form-group">
                  <label>Choose Image</label>
                  <input type="file" name="Image" id="Image" value="" class="form-control">
              </div>
              <button id="submit" name="submit" type="Submit" class="btn btn-primary">Upload Image</button>
          </form>
      </div>

Now you can add the album to the image.

Gallery List.

include_once './inc/header.php';
include_once './gallery/galleryClass.php';
$galleryClass=new galleryClass();
$listAlbum=$galleryClass->listGallery();

<table class="table table-bordered table-striped">
              <thead>
                  <tr><th>Id</th><th>Name</th></tr>
              </thead>
              <tbody>
                  <?php
                    if(count($listAlbum)){
                        foreach ($listAlbum as $value) {
                            echo "<tr><td><img src='../galleryImage/$value[ImageName]' width='50px' height='50px'></td><td>$value[AlbumId]</td></tr>";
                        }
                    }
                  ?>
              </tbody>
          </table>

Now at final stage we will update the index page and add a new gallery page.

Index Page

<?php
include_once './manage/gallery/galleryClass.php';
$galleryClass=new galleryClass();
$albumList=$galleryClass->listAlbum();
?>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
    <link rel="stylesheet" href="//bootsnipp.com/dist/bootsnipp.min.css">
<style>
    body {
    padding: 30px 0px;
}
</style>
<div class="container">
    <?php
    if(count($albumList)){
    foreach ($albumList as $value) {
        echo '<div class="col-xs-6 col-sm-3"><h3><a href="gallery.php?id='.$value["AlbumId"].'">'.$value["AlbumName"].'</a></h3></div>';
    }
    }
    ?>
</div>

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

In the index page you will see only the name of the album and when you click over the name you will be redirected to the next page that is Gallery page and it will show the images according to the album id.
Gallery Page

<?php
include_once './manage/gallery/galleryClass.php';
$galleryClass=new galleryClass();
$galleryList=$galleryClass->listGallery("where AlbumId='$_GET[id]'");
?>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
    <link rel="stylesheet" href="//bootsnipp.com/dist/bootsnipp.min.css">
<div class="container">
    <?php
    if(count($galleryList)){
    foreach ($galleryList as $value) {
        echo '<div class="col-xs-6 col-sm-3">
        <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 
            <img src="galleryImage/'.$value["ImageName"].'" alt="...">
        </a>
    </div>';
    }
    }
    ?>
</div>

<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">X</button>
        <div class="modal-content">
            <div class="modal-body">
                <img src="" alt="" />
            </div>
        </div>
    </div>
</div>

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>

So we have completed our tutorial Album Based Image Gallery in PHP. Hope you like our tutorial i have also attached the complete project files which you can download form the bottom of the post. If you have any issues than please comment below. If you want any specific tutorial please comment below. Thank You.