PHP Project (Intermediate) – Photo Gallery with MySQL Backend

This class shows you how to create a picture gallery app that stores its data in a MySQL database. This allows you to do things such as adding Tags, Description, and even User Ownership so that you can then show images in your gallery based off of this data. You can then create search scripts based on Tags, or can show “walls” of pictures uploaded by a specific user.

Previous Classes in Series:

  1. PHP Project (Simple) – Dynamic Photo Gallery Stream
  2. PHP Project (Simple) – Dynamic Photo Gallery
  3. PHP Project (Simple) – Image Upload App

Prerequisites:

  • Basic LAMP, or Web Server Administration 
    • Verify pictures and folder have READ/WRITE permission for OTHER
  • Basic PHP
  • Basic HTML
  • Basic MySQL

mysqli()

basename()

move_file_upload()

$_FILE

LAMP Server

  • Create a “pics” directory in the Public Web Directory (/var/www/html)
  • Verify pictures and folder have at least a rw- permission.

PHP.ini

  • Location on demo system: /etc/php/7.2/apache2/php.ini
  • Set File Uploads to: file_uploads = On

SQL

create database gallery;

use database gallery;

create table picture (
pic_id int auto_increment primary key;
pic_name text;
pic_description text;
pic_tags text;
pic_added_time timestamp
);

create user pic_user identified by '123456';

grant all privileges on gallery.* to pic_user;

uploadFormDB.html

<html>
<head>
</head>
<body>

<form action="uploadDB.php" method="post" enctype="multipart/form-data">

Image you want to upload:
<br>
<input type="file" name="fileToUpload" id="fileToUpload">
<br>
Picture Description:<input type="text" name="pic_description"><br>
Picture Tags: <input type="text" name="pic_tags"><br>
<input type="submit">
</form>

</body>
</html>

uploadDB.php

<?php

$tags = $_POST['pic_tags'];
$description = $_POST['pic_description'];

$saveDir = "./pics/";
$saveFile = $saveDir.basename($_FILES['fileToUpload']['name']);

$servername = "localhost";
$username = "pic_user";
$password = "123456";
$db = "gallery";

$conn = new mysqli($servername, $username, $password, $db);

if (move_uploaded_file($_FILES['fileToUpload']['tmp_name'], $saveFile)){
	echo "<h1>Picture Uploaded</h1><br>".$_FILES['fileToUpload']['name']." was saved<br>";
	echo "<img src='".$saveFile."'><br>";
	echo "Picture Description: ".$description."<br>";
	echo "Picture Tags: ".$tags."<br>";
} else {
	echo "Upload Did Not Work<a href='./index.php'> Go Back</a>";
}

if ($conn->connect_error){
	die("Connection Failed: ".$conn->connect_error);
}	

$sql = "insert into pictures(pic_name, pic_description, pic_tags)values('$saveFile','$description','$tags')";

if ($conn->query($sql)=== TRUE){	
	echo "Database Worked";
} else {
	echo "error";
}

echo "<h3>Diagnostic Info:</h3>";
echo "<br>Tmp File Name: ".$_FILES['fileToUpload']['tmp_name']."<br>";
echo "saveFile Variable Valuable: ".$saveFile;
?>

<h1><a href="./galleryDB.php">Back to Gallery</a></h1> 

galleryDB.php

<a href="./uploadFormDB.html">Upload Pictures for Database</a><br>

<?php

$servername = "localhost";
$username = "pic_user";
$password = "123456";
$db = "gallery";

$conn = new mysqli($servername,$username,$password,$db);

if ($conn->connect_error) {
    die("Connection Error: ").$conn->connect_error;
}

$sql = "select pic_id, pic_name, pic_description, pic_tags FROM pictures";

$result = $conn->query($sql);

if ($result->num_rows > 0 ){
    while($row = $result->fetch_assoc()) {
        $imgNumber = $row['pic_id'];
        $imgSrc = $row['pic_name'];
        $imgDescription =$row['pic_description'];
        $imgTags = $row['pic_tags'];
        echo $imgNumber." -- ".$imgSrc." -- ".$imgDescription." -- ".$imgTags."<br>";
    }
} else {
    echo "0 Results";
}

$conn->close();

Be the first to comment

Leave a Reply