PHP Image Album Gallery Script | Photo Gallery with Admin Panel

By | January 7, 2018
Album Based Image Gallery



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.



Gallery Based PHP Gallery
13.2 KiB
1785 Downloads
Details...

15 thoughts on “PHP Image Album Gallery Script | Photo Gallery with Admin Panel

  1. Jayanath

    Hello sir how to connect my SQL database using this script your coding

    connect_error) {
    die(“Connection failed: ” . $db->connect_error);
    }
    ?>

    Reply
  2. Pingback: Dynamic Photo Gallery - Album Based Image Gallery PHP Script - Part 2 – PHP Script For Us

  3. Pingback: Dynamic Photo Gallery - Album Based Image Gallery PHP Script - Part 1 – PHP Scripts Complete Collection Downloads

  4. ss ss

    Fatal error: Uncaught TypeError: count(): Argument #1 ($var) must be of type Countable|array, null given in C:\xampp\htdocs\gallery\index.php:16 Stack trace: #0 {main} thrown in C:\xampp\htdocs\gallery\index.php on line 16

    Reply
    1. Vivek Moyal Post author

      Your not not providing the array to the count function.

      Reply
  5. Kavya

    Sir in login I changed to my login credentials but when I excited it shows access denied why sir

    Reply
    1. Vivek Moyal Post author

      I think the password is wrong. please check that i have used the simple password or the encrepted one

      Reply
  6. jithesh

    Warning: count(): Parameter must be an array or an object that implements Countable in F:\Sanju\Projects\htdocs\ga\index.php on line 16

    Reply
    1. Vivek Moyal Post author

      You are not passing the array in the count function. You might be passing just the string

      Reply
  7. sanju

    Warning: count(): Parameter must be an array or an object that implements Countable in F:\Sanju\Projects\htdocs\ga\index.php on line 16

    Reply
    1. Vivek Moyal Post author

      Under the count function you should put only array element otherwise it will fail

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *