Cara Membuat Galeri Responsif dengan CSS Media

Hallo sahabat Dumenity berjumpa lagi dalam tutorialÂ kursuswebprogramming, pada tutorial kali ini kita akan belajar tentang Cara Membuat Galeri Responsif dengan CSS Media. Galeri adalah cara yang bagus untuk menampilkan data dalam tampilan kisi sehingga menarik bagi pengguna. Ini salah satu cara terbaik untuk mempresentasikan produk. GaleriÂ dapat berisi gambar, video, atau kumpulan data teks dalam kartu.

Dalam contoh ini, saya telah menyimpan gambar galeri di dalam folder. Saya telah membuat tabel database untuk menyimpanÂ file dari gambar.Â Galeri ini akan responsif dan akan masuk ke dalam area pandang perangkat apa pun dengan mulus. Saya menggunakanÂ media queri CSS untuk membuat galeri responsif.

Cara Mengambil Data Dari Database

Kode berikut digunakan untuk mengambilÂ gambar dari tabel database MySQL. Hasil array dari database akan diulang dalam satu lingkaran untuk menampilkan gambar dalam tampilan galeri. Kode ini menampilkan kode HTML untuk kotak galeri untuk menampilkan gambar. Jika tidak ada file gambar seperti yang dibaca dari database, maka saya telah menunjukkan gambar default. Saya menggunakan fungsi file_exists PHP () untuk memeriksa keberadaan lokasi file gambar.

 <?php
include 'DBController.php';
$db_handle = new DBController();
?>
<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

    <div id="gridview">
        <div class="heading">Image Gallery</div>
<?php
$query = $db_handle->runQuery("SELECT * FROM tbl_image ORDER BY id ASC");
if (! empty($query)) {
    foreach ($query as $key => $value) {
        ?>  
            <div class="image">
            <?php 
                if(file_exists($query[$key]["path"])) 
                { 
            ?>
            <img src="<?php echo $query[$key]["path"] ; ?>" />
            <?php 
                } else { 
            ?>
            <img src="gallery/default.jpeg" />
            <?php
                }
            ?>
            </div>
<?php
    }
}
?>
    </div>
</body>
</html>

<?php

include 'DBController.php';

$db_handle = new DBController();

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div class="heading">Image Gallery</div>

<?php

$query = $db_handle->runQuery("SELECT * FROM tbl_image ORDER BY id ASC");

if (! empty($query)) {

foreach ($query as $key => $value) {

<?php

if(file_exists($query[$key]["path"]))

{

<?php

} else {

<?php

}

</div>

<?php

}

</div>

</body>

</html>

CSS Media Queries untuk Membuat Galeri Gambar Responsif

Dalam contoh sederhana ini, kita dapat memahami dengan jelas bagaimanaÂ media queriÂ digunakan dalam membuat tampilan responsif. Dalam CSS berikut, lebar gambar diubah berdasarkan ukuran viewport dengan menambahkan style berdasarkan rentang. Spesifikasi jangkauan untuk pengaturan ukuran layar viewport min-maks.

#gridview {
   text-align:center; 
}

div.image {
    margin: 10px;
    display: inline-block;
}

div.image img {
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
}

div.image img:hover {
    box-shadow: 0 5px 5px 0 rgba(0,0,0,0.32), 0 0 0 0px rgba(0,0,0,0.16);
}

.heading{    
    padding: 10px 10px;
    border-radius: 2px;
    color: #FFF;
    background: #6aadf1;
    margin-bottom:10px;
    font-size: 1.5em;
}
#grid{
    margin-bottom:30px;
}

/* Responsive Styles */

@media screen and (min-width: 1224px) {
    div.image {
        width: 300px;
    }
}

@media screen and (min-width: 1044px) and (max-width: 1224px) {
    div.image {
        width: 250px;
    }
}

@media screen and (min-width: 845px) and (max-width: 1044px) {
    div.image {
        width: 200px;
    }
}

#gridview {

text-align:center;

}

div.image {

margin: 10px;

display: inline-block;

}

div.image img {

width: 100%;

height: auto;

border: 1px solid #ccc;

}

div.image img:hover {

box-shadow: 0 5px 5px 0 rgba(0,0,0,0.32), 0 0 0 0px rgba(0,0,0,0.16);

}

.heading{

padding: 10px 10px;

border-radius: 2px;

color: #FFF;

background: #6aadf1;

margin-bottom:10px;

font-size: 1.5em;

}

#grid{

margin-bottom:30px;

}

/* Responsive Styles */

@media screen and (min-width: 1224px) {

div.image {

width: 300px;

}

@media screen and (min-width: 1044px) and (max-width: 1224px) {

div.image {

width: 250px;

}

@media screen and (min-width: 845px) and (max-width: 1044px) {

div.image {

width: 200px;

}

Kelas DBController untuk Membuat Koneksi Database dan Mengambil Gambar

Kelas DBController ini membangun koneksi dalam konstruktornya. Ini berisi fungsi runQuery () untuk mengambil hasil basis data dengan mengeksekusi kueri yang dilewatkan sebagai argumennya.

<?php
class DBController {
	private $host = "localhost";
	private $user = "root";
	private $password = "test";
	private $database = "phpsamples";
	private $conn;
	
        function __construct() {
        $this->conn = $this->connectDB();
	}	
	function connectDB() {
		$conn = mysqli_connect($this->host,$this->user,$this->password,$this->database);
		return $conn;
	}
    function runQuery($query) {
                $result = mysqli_query($this->conn,$query);
                while($row=mysqli_fetch_assoc($result)) {
                $resultset[] = $row;
                }		
                if(!empty($resultset))
                return $resultset;
	}
}
?>

<?php

class DBController {

private $host = "localhost";

private $user = "root";

private $password = "test";

private $database = "phpsamples";

private $conn;

function __construct() {

$this->conn = $this->connectDB();

}

function connectDB() {

$conn = mysqli_connect($this->host,$this->user,$this->password,$this->database);

return $conn;

}

function runQuery($query) {

$result = mysqli_query($this->conn,$query);

while($row=mysqli_fetch_assoc($result)) {

$resultset[] = $row;

}

if(!empty($resultset))

return $resultset;

}

MySQL DatabaseTable tbl_image Struktur dan Data

Ini skrip SQL untuk data tabel tbl_image, struktur dan indeks.

--
-- Table structure for table `tbl_image`
--

CREATE TABLE `tbl_image` (
  `id` int(8) NOT NULL,
  `name` varchar(255) NOT NULL,
  `path` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_image`
--

INSERT INTO `tbl_image` (`id`, `name`, `path`) VALUES
(1, 'Nature', 'gallery/photo1.jpeg'),
(2, 'water', 'gallery/photo8.jpeg'),
(3, 'water', 'gallery/photo2.jpeg'),
(4, 'sunny', 'gallery/photo3.jpeg'),
(5, 'Air', 'gallery/photo4.jpeg'),
(6, 'water', 'gallery/image9.jpg'),
(7, 'water', 'gallery/photo5.jpeg'),
(8, 'water', 'gallery/photo7.jpeg'),
(9, 'water', 'gallery/photo6.jpeg');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_image`
--
ALTER TABLE `tbl_image`
  ADD PRIMARY KEY (`id`);
COMMIT;

-- Table structure for table `tbl_image`

CREATE TABLE `tbl_image` (

`id` int(8) NOT NULL,

`name` varchar(255) NOT NULL,

`path` text NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- Dumping data for table `tbl_image`

INSERT INTO `tbl_image` (`id`, `name`, `path`) VALUES

(1, 'Nature', 'gallery/photo1.jpeg'),

(2, 'water', 'gallery/photo8.jpeg'),

(3, 'water', 'gallery/photo2.jpeg'),

(4, 'sunny', 'gallery/photo3.jpeg'),

(5, 'Air', 'gallery/photo4.jpeg'),

(6, 'water', 'gallery/image9.jpg'),

(7, 'water', 'gallery/photo5.jpeg'),

(8, 'water', 'gallery/photo7.jpeg'),

(9, 'water', 'gallery/photo6.jpeg');

-- Indexes for dumped tables

-- Indexes for table `tbl_image`

ALTER TABLE `tbl_image`

ADD PRIMARY KEY (`id`);

COMMIT;

Screenshot ini menunjukkan keluaran galeri gambar dalam tampilan desktop dan tampilan seluler

OKe itulah tadi pembahasan saya tentang Cara Membuat Galeri Responsif dengan CSS Media, semoga bermanfaat.

Cara Membuat Galeri Responsif dengan CSS Media

Facebook DUMET School

Konsultasi Gratis

Categories