Membuat Galery Foto Bagian FrontEnd HTML dan CSS
Assalamu'alaikum Wr.Wb
Salam Dan Bahagia
Pendahuluan
Pada kali ini saya akan membuat salah satu project lagi yaitu saya membuat sistem galery foto Yang dibuat menggunakan HTML,CSS,PHP dan MYSQL, Oke langsung saja dibaca dan dipahami
Latar Belakang
Agar Setiap ada kegiatan disekolah dokumetasinya dapat diupload di sistem ini, agar siswa atau warga sekitar dapat melihat secara detail dokumentasi kegiatan sekolah
Maksud Dan Tujuan
Tujuan saya membuat aplikasi ini adalah agar Setiap kegiatan disekolah hasil dokumentasi dapat dilihat oleh siswa atau warga sekolah dan juga sebagai ajang promosi agar
Alat Dan Bahan
Teks Editor ( Sublime Text )
Chrome
jangka Waktu Yang Digunakan
1 Jam
Langkah Kerja
nah pada kali ini saya akan membuat bagian front end nya terlebih dahulu, frontend ini saya buat hanya menggunakan html dan css saja, kenapa? Karena galery ini akan saya buat secara sederhana saja tanpa ada campuran Javascript dan Jquery langsung saja dalam pembuatannya, langkah pertama yang saya lakukan adalah membuat folder baru dan difolder tersebut saya buat 2 file yaitu file index dan file css nya, untuk file indexnya saya buat dan isi code HTML seperti Berikut :
Nah Setelah Itu save dan beri CSS agar Tampilan lebih menarik dan tertata, untuk file css nya seperti berikut, Oya Simpan difile Css ya :)
Setelah Selesai Silahkan Save dan Lihat hasilnya maka akan seperti ini :
Nah Gimana? Lumayan Kan :)
dalam pembuatan bagian front end ini kalian harus mengerti tentang html dan css :)
Sekian yang dapat saya sampaikan mohon maaf bila ada kesalahan dalam penulisan maupun tatabahasa sekian dan terimakasih
Wassalamu'alaikum Wr.Wb
Salam Dan Bahagia
Pendahuluan
Pada kali ini saya akan membuat salah satu project lagi yaitu saya membuat sistem galery foto Yang dibuat menggunakan HTML,CSS,PHP dan MYSQL, Oke langsung saja dibaca dan dipahami
Latar Belakang
Agar Setiap ada kegiatan disekolah dokumetasinya dapat diupload di sistem ini, agar siswa atau warga sekitar dapat melihat secara detail dokumentasi kegiatan sekolah
Maksud Dan Tujuan
Tujuan saya membuat aplikasi ini adalah agar Setiap kegiatan disekolah hasil dokumentasi dapat dilihat oleh siswa atau warga sekolah dan juga sebagai ajang promosi agar
Alat Dan Bahan
Teks Editor ( Sublime Text )
Chrome
jangka Waktu Yang Digunakan
1 Jam
Langkah Kerja
nah pada kali ini saya akan membuat bagian front end nya terlebih dahulu, frontend ini saya buat hanya menggunakan html dan css saja, kenapa? Karena galery ini akan saya buat secara sederhana saja tanpa ada campuran Javascript dan Jquery langsung saja dalam pembuatannya, langkah pertama yang saya lakukan adalah membuat folder baru dan difolder tersebut saya buat 2 file yaitu file index dan file css nya, untuk file indexnya saya buat dan isi code HTML seperti Berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="asset/style.css">
<title>Gallery || SMK TAMANSISWA MOJOAGUNG</title>
</head>
<body>
<div class="navbar">
<img class="img" src="../img/tamsis.png" alt="">
<h1 class="titl">SMK TAMANSISWA</h1>
<a href="../index.php"><h3 class="h3">Kembali</h3></a>
</div>
<div class="head">
<h1 class="title-1">Galery Foto Kegiatan</h1>
<h1 class="title-2">SMK TAMANSISWA MOJOAGUNG</h1>
<center>
<p class="title-4">Perguruan Tamansiswa Cabang Mojokerto<br/>
BAGIAN TAMAN KARYA MADYA TEKNIK</p>
<h3 class="title-3"> ( SMK TAMANSISWA ) </h3>
<h4 class="title-3">Jl. Tamansiswa No.6 Telp. (0321)495358;085101211908</h4>
</center>
</div>
BAGIAN TAMAN KARYA MADYA TEKNIK</p>
<div class="nav"><marquee class="jalan">Selamat Datang Di Galery Foto Kegiatan SMK TAMANSISWA MOJOAGUNG, Jl. Tamansiswa No.6 Telp. (0321)495358;085101211908 || Selamat Datang Di Galery Foto Kegiatan SMK TAMANSISWA MOJOAGUNG, Jl. Tamansiswa No.6 Telp. (0321)495358;085101211908 || Selamat Datang Di Galery Foto Kegiatan SMK TAMANSISWA MOJOAGUNG, Jl. Tamansiswa No.6 Telp. (0321)495358;085101211908 </marquee></div>
<div class="wrapper">
<?php
include "../data/config.php";
$sql = "SELECT * FROM galery";
$query = mysqli_query($conn, $sql);
while ($gmbr = mysqli_fetch_array($query)) {
echo "<div class='box1'>
<img class='imgg' src=".$gmbr['nama'].">
</div>";
}
?>
</div>
<div class="footer">
<center>
<p class="foo">Copyright © 2018 SMK TAMANSISWA MOJOAGUNG <br>Developed by Ahmad Zaenuri Ferdiansyah</p>
</center>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="asset/style.css">
<title>Gallery || SMK TAMANSISWA MOJOAGUNG</title>
</head>
<body>
<div class="navbar">
<img class="img" src="../img/tamsis.png" alt="">
<h1 class="titl">SMK TAMANSISWA</h1>
<a href="../index.php"><h3 class="h3">Kembali</h3></a>
</div>
<div class="head">
<h1 class="title-1">Galery Foto Kegiatan</h1>
<h1 class="title-2">SMK TAMANSISWA MOJOAGUNG</h1>
<center>
<p class="title-4">Perguruan Tamansiswa Cabang Mojokerto<br/>
BAGIAN TAMAN KARYA MADYA TEKNIK</p>
<h3 class="title-3"> ( SMK TAMANSISWA ) </h3>
<h4 class="title-3">Jl. Tamansiswa No.6 Telp. (0321)495358;085101211908</h4>
</center>
</div>
BAGIAN TAMAN KARYA MADYA TEKNIK</p>
<div class="nav"><marquee class="jalan">Selamat Datang Di Galery Foto Kegiatan SMK TAMANSISWA MOJOAGUNG, Jl. Tamansiswa No.6 Telp. (0321)495358;085101211908 || Selamat Datang Di Galery Foto Kegiatan SMK TAMANSISWA MOJOAGUNG, Jl. Tamansiswa No.6 Telp. (0321)495358;085101211908 || Selamat Datang Di Galery Foto Kegiatan SMK TAMANSISWA MOJOAGUNG, Jl. Tamansiswa No.6 Telp. (0321)495358;085101211908 </marquee></div>
<div class="wrapper">
<?php
include "../data/config.php";
$sql = "SELECT * FROM galery";
$query = mysqli_query($conn, $sql);
while ($gmbr = mysqli_fetch_array($query)) {
echo "<div class='box1'>
<img class='imgg' src=".$gmbr['nama'].">
</div>";
}
?>
</div>
<div class="footer">
<center>
<p class="foo">Copyright © 2018 SMK TAMANSISWA MOJOAGUNG <br>Developed by Ahmad Zaenuri Ferdiansyah</p>
</center>
</div>
</body>
</html>
Nah Setelah Itu save dan beri CSS agar Tampilan lebih menarik dan tertata, untuk file css nya seperti berikut, Oya Simpan difile Css ya :)
* {
padding: 0;
margin: 0;
}
.navbar {
width: 100%;
height: 65px;
background: #70D46BFF;
position: fixed;
z-index: 9999;
box-shadow: 2px 2px 2px grey;
}
.head {
width: 100%;
height: 200px;
background: #4F4F4FFF;
position: relative;
top: 65px;
}
.title-1 {
color: white;
text-align: center;
font-family: sans-serif;
position: relative;
top: 20px;
text-shadow: 2px 2px 2px black;
}
.title-2 {
color: white;
text-align: center;
position: relative;
top: 20px;
text-shadow: 2px 2px 2px black;
}
.title-3 {
color: white;
position: relative;
top: 20px;
text-shadow: 2px 2px 2px black;
}
.title-4 {
position: relative;
top: 20px;
color: white;
text-shadow: 2px 2px 2px black;
}
.nav {
width: 100%;
height: 30px;
background: #393939FF;
position: relative;
top: 60px;
}
.po {
line-height: 30px;
color: white;
font-weight: inherit;
}
.nav {
line-height: 30px;
color: white;
position: relative;
top: 40px;
}
.img {
width: 70px;
position: relative;
top: -5px;
float: left;
}
.titl {
float: left;
color: white;
line-height: 65px;
margin-left: 10px;
text-shadow: 2px 2px 2px black;
}
.wrapper {
width: 1100px;
height: auto;
margin: auto;
overflow: hidden;
}
.box1 {
width: 250px;
height: 200px;
background: white;
position: relative;
top: 50px;
float: left;
margin-left: 20px;
margin-top: 20px;
box-shadow: 1px 1px 10px grey;
}
.imgg {
width: 250px;
height: 200px;
}
.footer {
width: 100%;
height: 40px;
background: #262626FF;
position: relative;
top: 70px;
border-top: 6px solid black;
}
.foo {
color: white;
}
.h3 {
float: right;
color: white;
line-height: 60px;
margin-right: 40px;
font-weight: bold;
}
padding: 0;
margin: 0;
}
.navbar {
width: 100%;
height: 65px;
background: #70D46BFF;
position: fixed;
z-index: 9999;
box-shadow: 2px 2px 2px grey;
}
.head {
width: 100%;
height: 200px;
background: #4F4F4FFF;
position: relative;
top: 65px;
}
.title-1 {
color: white;
text-align: center;
font-family: sans-serif;
position: relative;
top: 20px;
text-shadow: 2px 2px 2px black;
}
.title-2 {
color: white;
text-align: center;
position: relative;
top: 20px;
text-shadow: 2px 2px 2px black;
}
.title-3 {
color: white;
position: relative;
top: 20px;
text-shadow: 2px 2px 2px black;
}
.title-4 {
position: relative;
top: 20px;
color: white;
text-shadow: 2px 2px 2px black;
}
.nav {
width: 100%;
height: 30px;
background: #393939FF;
position: relative;
top: 60px;
}
.po {
line-height: 30px;
color: white;
font-weight: inherit;
}
.nav {
line-height: 30px;
color: white;
position: relative;
top: 40px;
}
.img {
width: 70px;
position: relative;
top: -5px;
float: left;
}
.titl {
float: left;
color: white;
line-height: 65px;
margin-left: 10px;
text-shadow: 2px 2px 2px black;
}
.wrapper {
width: 1100px;
height: auto;
margin: auto;
overflow: hidden;
}
.box1 {
width: 250px;
height: 200px;
background: white;
position: relative;
top: 50px;
float: left;
margin-left: 20px;
margin-top: 20px;
box-shadow: 1px 1px 10px grey;
}
.imgg {
width: 250px;
height: 200px;
}
.footer {
width: 100%;
height: 40px;
background: #262626FF;
position: relative;
top: 70px;
border-top: 6px solid black;
}
.foo {
color: white;
}
.h3 {
float: right;
color: white;
line-height: 60px;
margin-right: 40px;
font-weight: bold;
}
Setelah Selesai Silahkan Save dan Lihat hasilnya maka akan seperti ini :
Nah Gimana? Lumayan Kan :)
dalam pembuatan bagian front end ini kalian harus mengerti tentang html dan css :)
Sekian yang dapat saya sampaikan mohon maaf bila ada kesalahan dalam penulisan maupun tatabahasa sekian dan terimakasih
Wassalamu'alaikum Wr.Wb
