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/[email protected]/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 : 

Post Your Questions on our forum

Post a question on Forum

Ajith Jojo Joseph

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

Share with your friends:

Comments are closed.

How to integrate Paypal API in Laravel

Are you looking to integrate Paypal API in your Laravel project for seamless payment processing? Look no further! In this […]

April 3, 2024

How to integrate Razorpay API in Laravel

Integrating payment gateways into web applications has become an essential part of e-commerce websites. In this tutorial, we will discuss […]

April 3, 2024

Laravel 11 Ajax CRUD Operation Tutorial Example

**Mastering CRUD Operations with Laravel 11 Ajax: A Comprehensive Tutorial** In the world of web development, interaction between the front-end […]

April 3, 2024

Login as Client in Laravel – Login with user id

**Unlock the Power of Laravel with Login as Client – Login with User ID** Laravel, the popular PHP framework, offers […]

April 3, 2024

Digital Marketing Toolkit

Get Free Access to Digital Marketing Toolkit. You can use all our tools without any limits

Get Free Access Now