How to create a photo gallery in php without a database

Today we are going  to create a gallery without a database using PHP

Actually, we are fetching images from a folder and display it on a webpage, and also we are going to make a simple admin panel to upload the images.  so lets write the code

First, we making an index page to show all images in a folder

<?php
    $dir ="gallery/"; // image folder name
      if (is_dir($dir)){
         if ($dh = opendir($dir)){
                 while (($file = readdir($dh)) !== false){
                    if($file=="." OR $file==".."){} else { 

              ?>   <!---- its a loop [change the folder name on img path]----->                
                         <img  style="width: 260px;" src="gallery/<?php echo $file; ?>"> 
             <?php
              }
             }
         closedir($dh);
         }
      } ?>

Now we can make an admin panel for uploading and deleting the images

<?php
    session_start();
    error_reporting(0);

    $dir = "gallery/";  // set your gallery folder name

    $username = 'admin';   //set ur username
    $password = 'admin';   //set ur password

    if(isset($_POST['username']))
    {
        $fromuser = $_POST['username']; 
        $frompass = $_POST['password']; 
        if($fromuser==$username || $frompass==$password)
        {
            $_SESSION["access"] = 1;
        }
        else
        {
            echo "Invalid Username or Password";
        }
    }

    if(isset($_GET['del']))
    {
        unlink($dir.'/'.$_GET['del']);
    }

    if(isset($_GET['logout']))
    {
        session_destroy();
    }

    if(isset($_POST['fileupload']))
    {
        $dirfile = $dir.basename( $_FILES['file']['name']);     
        if(move_uploaded_file($_FILES['file']['tmp_name'], $dirfile)) {  
            echo "File uploaded successfully!";  
        } else{  
            echo "Sorry, file not uploaded, please try again!";  
        }  
    }

    $useraccess = $_SESSION["access"];

?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Admin - Albums</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
</head>
<body>

<?php if($useraccess!=1){  ?>

<main class="login-form" style="margin-top: 150px;">
    <div class="cotainer">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Login to Admin Panel</div>
                    <div class="card-body">
                        <form action="" method="post">
                            <div class="form-group row">
                                <label  class="col-md-4 col-form-label text-md-right">Username</label>
                                <div class="col-md-6">
                                    <input type="text" class="form-control" name="username" required autofocus>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
                                <div class="col-md-6">
                                    <input type="password" id="password" class="form-control" name="password" required>
                                </div>
                            </div>

                            

                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    Login
                                </button>
                               
                            </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>

</main>

<?php } else { ?>


<main class="login-form" style="margin-top: 50px;">
    <div class="cotainer">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Upload Images</div>
                    <div class="card-body">
                        <form action="" method="post" enctype="multipart/form-data">
                        	<input type="hidden" value="1" name="fileupload">
                            <div class="form-group row">
                                <label  class="col-md-4 col-form-label text-md-right">Select a File</label>
                                <div class="col-md-6">
                                    <input type="file" class="form-control" name="file" required autofocus>
                                </div>
                            </div>  
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-success">
                                    Upload
                                </button>
                               
                            </div>
                    </div>
                    </form>
                </div>
            </div>

            <div class="col-md-8" style="margin-top:15px;">
                <div class="card">
                    <div class="card-header">My Gallery</div>
                    <div class="card-body">
                    	 <div class="row">
                           <?php
                            
                            if (is_dir($dir)){
                              if ($dh = opendir($dir)){
                                while (($file = readdir($dh)) !== false){
                                   if($file=="." OR $file==".."){} else { 

                                  ?>
                                 
                                  	<div class="col-md-3">
                                      <img src="<?php echo $dir; ?>/<?php echo $file; ?>" width="100%" class="img-thumbnail">
                                      <a href="?del=<?php echo $file; ?>" onclick="return confirm('Are you sure you want to delete this item?');"> Delete </a>
                              		</div>
                                	
                                 <?php
                                  }
                                }
                                closedir($dh);
                              }
                            } ?>
       					</div>

                    </div>
                </div>
            </div>

        </div>

        </div>

</main>
 <center> <br> <a href="?logout=1" > Logout From Admin </a> </center>

<? } ?>

</body>
</html>

Okay, here we created a login form and hard-coded the login details. thn we created an upload form also displaying all images. also we made a delete image option and logout option. will explain everything in the video

Download Source Code : 

Share with your friends:

Ajith Jojo Joseph

Self taught, dedicated young entrepreneur with many licensed products under his sleeve. Passionate about technology, business and excellence in general.

HTML Form to Email Using JavaScript and SMTP server 🚀

Hello Everyone, 🙋‍♂️ In this tutorial, we are going to look at how to send emails from HTML Form to […]

22 September, 2021

How to make pretty URL in PHP using .htaccess

Hello Everyone, Here in this tutorial, you will learn How to make a pretty URL in PHP using .htaccess. and […]

18 September, 2021

Submit Form Without Refreshing Page PHP and Javascript

Hello Everyone, In this tutorial, we are going to learn, How to submit a form without reloading. yeah, that’s so […]

HTML from to Email using SMTP in PHP with Source code

Hello Everyone, In this tutorial, I am going to teach you how to send an email from an HTML form […]

16 September, 2021

Newsletter

Subscribe to our weekly Newsletter and stay tuned.


Free PHP Invoicing Software

Gmax CRM Lite is an Invoicing and project management tool for small businesses, features including client management , invoicing , quotation and project management

Download for free