Imgur-Clone/backend/php/gallery.php
2024-04-30 13:41:10 -07:00

60 lines
1.6 KiB
PHP

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/gallery.css">
</head>
<body>
<!-- Navigation Bar -->
<nav>
<div class="nav-container">
<a href="index.php" class="nav-logo">Image Upload</a>
<ul class="nav-menu">
<li><a href="index.php">Home</a></li>
<li><a href="gallery.php" class="active">Gallery</a></li>
</ul>
</div>
</nav>
<!-- Gallery Page -->
<div class="container">
<h2 class="heading-text"><span>Image</span> Gallery</h2>
<ul class="image-gallery">
<?php
$servername = "172.20.0.5";
$username = "root";
$password = "root";
$mysqli = new mysqli($servername, $username, $password);
if ($mysqli->connect_error) {
die("Connection failed: " . $mysqli->connect_error);
}
$sql = "SELECT * FROM image_database.image_table";
$result = $mysqli->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "<li>";
echo "<img src='data:image/jpeg;base64," . base64_encode($row['image_file']) . "' alt='" . $row['image_name'] . "' />";
echo "<div class='overlay'><span>" . $row['image_name'] . "</span></div>";
echo "</li>";
}
} else {
echo "<li><p>No images uploaded yet.</p></li>";
}
$mysqli->close();
?>
</ul>
</div>
<script src="gallery.js"></script>
</body>
</html>