Widodo

Galery Simple PHP

Didalam artikel kali ini saya akan memberi tutorial tentang pembuatan sistem galery dalam sebuah pemograman PHP dan tutorial ini juga menjawab dari pertanya sobat developer mas Pragev Pralistyaputra untuk itu kita pelajari bersama. Ingat tutorial ini tidak bersama cara penguplodtan gambar tetapi langsung ke querynya untuk tutorial cara upload sebuah gambar silahkan bisa dilihaat di artikel-artikel sebelumnya..

1. Buatlah sebuah databases dengan nama tutorial

2. Silahkan buat tabel dengan nama galery

Column Type
Id Int (8)
Nama varchar(50)
gambar varchar(50)
PRIMARY : id

3. Setelah berhasil membuat tabel galery sekarang buat foldergalery dan gambar pastikan sudah menyediakan gambar yang ada difolder gambar setelah itu insert tabel galerynya dan masukkan nama2 gambarnya di row gambar

4. Sekarang kita buat dulu layout galery dengan menggunakan CSS

CSS

.main-post {width:980px; margin:auto; background:#eeeeee;margin-top:20px; display:table}

.pull-left {margin:1.5%;
float: left;
height:180px;
width:22%;
text-align: center;
margin-bottom:5em;
}

.hover-box {
position: relative;
overflow: hidden;
width: 100%;
height:170px;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: left top;
}
.hover-box:before{content: '';position: absolute;border-style: solid;border-width: 0 15px 15px;border-color: #16BF98 transparent;
display: block;width: 0;z-index: 9;bottom:0px;left:45%;
}

.hover-box span,
.hover-box p {
display: block;
position: absolute;
right:100%;
top: 0;
padding: 1em;
width:77%;
height: 100%;
background: rgba(0,0, 0,.5);
font-size: 2rem;
letter-spacing: -.05rem;
color: #fff;
text-align: center;
transition:
right .5s ease,
opacity .5s ease,
left .5s ease;
opacity: 0;
}
.hover-box img {background-size:100%;width:100%;height:170px;}
.hover-box p {
left: 0;
opacity: 1;
background: rgba(62,178, 226,.0);
}

.hover-box:hover span {
right: 0px;
opacity: 1;
}

.description {background:#16BF98;color:#fff;font-family:Arial, Helvetica, sans-serif;font-size:17px;
text-align:center;font-weight:normal;display: block;padding: 10px;height:30px;font-weight:bold;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.button-hasil{width:100%;margin:auto;margin-top:10%;display:table;height:60px;padding-left:10px;padding-top:10px;}
.button-hasil a{background:#16BF98;margin:auto;list-style:none;text-decoration:none;
padding:7px 13px 7px 13px;color:#ffffff;}
.button-hasil a:hover{background:#cccccc;-webkit-transition:All 0.5s ease-in-out;-moz-transition:All 0.5s ease-in-out;}

5. Setelah pembuatan Layout sudah selesai sekarang kita tinggal menulis script PHPnya seperti dibawah ini .

 

PHP

<!-- main-post -->
<div class="main-post">
<!-- start:post 1 -->
<?PHP $sql=mysql_query("select * from galery order by galery.id desc LIMIT 8");
while($row=mysql_fetch_array($sql)){
$nama = strip_tags($row ['nama']);
$gambar = strip_tags($row['gambar']);?>
<div class="pull-left"><div class="hover-box">
<?PHP if($gambar == ''){?><img src="./gambar/thumbnail.png" /><?PHP } else{ ?>
<img src="./gambar/<?PHP echo $gambar;?>" /><?PHP }?>
<span><div class="button-hasil">
<?PHP if($gambar == ''){?>
<a href="./gambar/thumbnail.png" rel="gallery" class="pirobox_gall" title="<?PHP echo $nama;?>">+</a><?PHP } else{ ?>
<a href="./gambar/<?PHP echo $gambar;?>" rel="gallery" class="pirobox_gall" title="<?PHP echo $nama;?>">+</a><?PHP }?>
</div>
</span></div><span class="description"><?PHP echo $nama;?></span>
</div><?PHP }?>
<!-- end:post 1 -->
</div>

 

6. Selesai.

 

Catatan : silahkan download plugin pirobox untuk mejalankan modalnya atau download completnya diwah ini

 

DOWNLOAD



0 Komentar