 |
| Cara Mudah Membuat Dialog Box dan Upload Image seperti Facebook Uploader |
Modal Like Facebook - Saat ini sangat banyak sekali plugin atau widget modal box yang berkembang untuk blog maupun untuk website. Pada kesempatan kali ini RIANC akan memberikan script bagaimana kita membuat Modal Box atau Pop Up Window seperti yang ada di facebook.
Popup Window ini penulis implementasikan di skripsi saya yang berjudul Pencarian Citra Berbasis Isi Menggunakan Transformasi Wavelet Haar, sehingga tampilannya seperti pada gambar di atas. Saya pasang saat akan melakukan upload image di sistem tersebut.
Perlengkapan yang harus sahabat persiapkan yaitu :
1. Twitter Bootstrap yang dapat saudara download di http://getbootstrap.com/getting-started/
2. Source Code berikut ini
a. File Index.html atau layout home (awal) yang akan menjadi tempat Tombol yang akan menampilkan Popup Modal Window. Kemudian pasang source code berikut ini.
<div class="logo" title="GOImages : pencarian citra berdasarkan isi">
<a href="./"><img src="./images/layouts/go-image.png" height="73px" width="175px" /></a>
</div>
untuk yang berwarna merah, silahkan ganti dengan gambar tombol yang sahabat simpan
b. include file js dan css dari Bootstrap yang sahabat download, seperti berikut ini:
<script type="text/javascript" src="./js/jquery-2.0.3.min.js"></script>
<script src="./js/bootstrap/js/bootstrap.js"></script>
<link href="./js/bootstrap/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./css/modalUp.css" />
c. Untuk file css/modalUp.css berikut ini isi dari kode css nya.
.modalUp{
font-size:33px;
height:100px;
opacity:0.0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=0);
-moz-opacity:0.0;
-khtml-opacity: 0.0;
}
.browse{
width:95%;
height:100px;
position:absolute;
}
.browse .p{
margin:40px 0px 0px 40%;
}
d. Untuk Class-classnya yang terdapat pada css tersebut terdapat pada file modalUp.php
3. Buatlah file PHP atau HTML dengan kode berisi seperti kode berikut ini, dalam percobaan ini penulis menggunakan file dengan nama modalUp.php, dengan source code :
<form method="post" action="./home.php?pencarianId=<?php echo md5("pencarian").md5("pencarianImage")."&token=".md5("pencarianImageToken").md5("iMageP"); ?>" enctype="multipart/form-data">
<div class="modal fade" id="uploadCitra" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Upload Citra Latih</h4>
</div>
<div class="modal-body">
<div class="input-gambar">
<div class="browse">
<div class="p">Pilih Gambar Disini</div>
</div>
<input id="gambar" class="modalUp" maxlength="2048" name="image" autocomplete="off" type="file" title="Pencarian Gambar" />
<input type="hidden" value="citraUji" name="jenis" />
<input type="hidden" id="x" name="x" /><input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" /><input type="hidden" id="h" name="h" />
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Simpan Citra</button>
</div>
</div>
</div>
</div>
</form>
4. Selesai dech, hasilnya seperti pada gambar diatas.
Pencarian Lain :
1. Membuat Upload Image seperti Facebook Uploader
2. Cara Mudah Membuat Dialog Box atau Popup Window seperti di facebook
3. Modal Box keren seperti facebook
4. Upload Multiple file Image like facebook profile
5. Cara membuat upload gambar seperti di facebook
6. Upload Image using Ajax Uploader facebook
7. Menonaktifkan Closed Modal di luar area
8. Membuat Modal Box keren seperti di facebook sengan Bootstrap
9. Popup Window dengan CSS3 dan HTML5 seperti facebook
10. Membuat Opacity File Upload (Hidden filetype file uploader) dengan CSS
Post a Comment