Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Membuat Galeri Produk Responsif untuk Keranjang Belanja. Tampilan galeri memberi tampilan yang bagus ke halaman web dan menghabiskan lebih sedikit ruang untuk menampilkan lebih banyak data. Saya dapat mengumpulkan informasi ikonik dari penyimpanan data yang sangat besar dan menampilkannya di galeri. Sebagai contoh, di toko online, produk-produknya digabung dalam galeri untuk membiarkan pengguna melihat produk yang tersedia.
Dalam contoh ini, galeri produk untuk keranjang belanja PHP akan berisi ubin produk dengan informasi produk penting. Di setiap ubin produk, saya akan menampilkan nama produk, harga, opsi untuk ditambahkan ke keranjang dari galeri, kategori, dan peringkat bintang produk. Dengan menggunakan detail, pengguna keranjang belanja dapat memiliki ide tentang produk toko online kami dengan melihat galeri itu sendiri.
Galeri Produk HTML untuk Keranjang Belanja
Kode HTML ini digunakan untuk menampilkan galeri produk untuk aplikasi keranjang belanja. Setiap kartu di galeri ini mewakili produk dengan menunjukkan detail seperti nama produk, harga, kategori, dan lainnya. Dalam contoh ini, saya telah menyimpan detail produk dalam database. Saya telah menyematkan kode PHP dengan HTML galeri ini untuk menampilkan produk dari database. Hasil produk diambil dari database dan diulang dalam lingkaran PHP untuk menampilkan galeri.
<?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">Product Gallery for Shopping Cart</div>
<?php
$query = $db_handle->runQuery("SELECT * FROM tbl_products ORDER BY id ASC");
if (! empty($query)) {
foreach ($query as $key => $value) {
?>
<div class="image">
<img src="<?php echo $query[$key]["product_image"] ; ?>" />
<div class="product-info">
<div class="product-title"><?php echo $query[$key]["name"] ; ?></div>
<ul>
<?php
for($i=1;$i<=5;$i++) {
$selected = "";
if(!empty($query[$key]["average_rating"]) && $i<=$query[$key]["average_rating"]) {
$selected = "selected";
}
?>
<li class='<?php echo $selected; ?>'>★</li>
<?php } ?>
</ul>
<div class="product-category"><?php echo $query[$key]["category"] ; ?>
</div>
<div class="add-to-cart">
<div><?php echo $query[$key]["price"] ; ?> USD</div>
<div><img src="icon-cart.png" /></div>
</div>
</div>
</div>
<?php
}
}
?>
</div>
</body>
</html>
CSS Media Queries untuk Gallery Responsiveness
Ini adalah CSS media kueri yang digunakan untuk menampilkan galeri produk responsif untuk situs web keranjang belanja. Saya telah menambahkan css dengan CSS media kueri untuk berbagai rentang ukuran rentang tampilan. Ini akan membantu membuat galeri produk menjadi cair sehubungan dengan area pandang apa pun terlepas dari ukurannya.
body {
font-family: Arial;
}
#gridview {
text-align: center;
}
div.image {
margin: 10px;
display: inline-block;
position: relative;
}
div.image img {
width: 100%;
max-width: 300px;
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;
margin-bottom: 10px;
font-size: 1.2em;
}
#grid {
margin-bottom: 30px;
}
.product-info {
position: absolute;
bottom: 4px;
left: 0;
right: -1px;
padding: 15% .75rem .75rem .75rem;
background-color: transparent;
background-image: -webkit-linear-gradient(transparent,rgba(0,0,0,0.8));
background-image: linear-gradient(transparent,rgba(0,0,0,0.8));
background-position-y: -1px;
color: #FFF;
text-align: left;
}
div.image ul {
margin: 0;
padding: 0;
}
div.image li {
cursor: pointer;
list-style-type: none;
display: inline-block;
color: #F0F0F0;
text-shadow: 0 0 1px #666666;
font-size: 10px;
}
div.image .selected {
color: #ffdb7f;
text-shadow: 0 0 5px #fdc42c;
}
.product-title {
font-size: 1.1em;
}
.product-category {
margin-top: 10px;
font-size: 0.6em;
text-transform: uppercase;
color: #c4c4c5;
border-left: #c4c4c5 3px solid;
padding: 0px 5px 0px 5px;
}
div.image .product-info img {
width: 30px;
height: auto;
border: none;
}
.add-to-cart {
float:right;
text-align: right;
}
/* 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;
}
}
Skrip SQL Database Produk
Skrip SQL ini berisi pernyataan pembuatan tabel database produk dan dump data. Impor skrip ini menggunakan klien database Anda untuk mencoba contoh ini di lingkungan PHP Anda.
-- -- Table structure for table `tbl_products` -- CREATE TABLE `tbl_products` ( `id` int(8) NOT NULL, `name` varchar(255) NOT NULL, `price` double(10,2) NOT NULL, `category` varchar(255) NOT NULL, `product_image` text NOT NULL, `average_rating` float(3,1) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `tbl_products` -- INSERT INTO `tbl_products` (`id`, `name`, `price`, `category`, `product_image`, `average_rating`) VALUES (1, 'Tiny Handbags', 100.00, 'Fashion', 'gallery/handbag.jpeg', 5.0), (2, 'Men\'s Watch', 300.00, 'Generic', 'gallery/watch.jpeg', 4.0), (3, 'Trendy Watch', 550.00, 'Generic', 'gallery/trendy-watch.jpeg', 4.0), (4, 'Travel Bag', 820.00, 'Travel', 'gallery/travel-bag.jpeg', 5.0), (5, 'Plastic Ducklings', 200.00, 'Toys', 'gallery/ducklings.jpeg', 4.0), (6, 'Wooden Dolls', 290.00, 'Toys', 'gallery/wooden-dolls.jpeg', 5.0), (7, 'Advanced Camera', 600.00, 'Gadget', 'gallery/camera.jpeg', 4.0), (8, 'Jewel Box', 180.00, 'Fashion', 'gallery/jewel-box.jpeg', 5.0), (9, 'Perl Jewellery', 940.00, 'Fashion', 'gallery/perls.jpeg', 5.0); -- -- Indexes for dumped tables -- -- -- Indexes for table `tbl_products` -- ALTER TABLE `tbl_products` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `tbl_products` -- ALTER TABLE `tbl_products` MODIFY `id` int(8) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10; COMMIT;
Output Galeri Produk Responsif
Screenshot di bawah ini menunjukkan output dari galeri produk responsif untuk keranjang belanja. Dalam screenshot ini, ini menunjukkan kartu produk dalam tampilan galeri. Setiap kartu menampilkan detail produk penting dengan opsi tambahkan ke keranjang.
Oke itulah pembahasan saya tentang Membuat Galeri Produk Responsif untuk Keranjang Belanja, semoga bermanfaat.