Anda di halaman 1dari 10

Tutorial Membuat Upload dan Download File dengan PHP dan MySQLi-Saat ini, sudah

banyak website yang mempunyai fasilitas untuk mengirimkan file dari komputer lokal/client
ke komputer server atau biasa disebut upload file, lalu file tersebut bisa dengan mudah unduh
oleh pengunjung, sehingga mempermudah pendistribusian file. Misalnya website sekolah
yang mempunyai fasilitas e-learning atau website dealer mobil yang menyediakan free brosur
untuk di download oleh calon pembeli. File yang di upload dan download formatnya
bermacam-macam, ada foto, PDF ,word dan lainnya.
Karena itu, saya akan membuat tutorial upload dan download file.
Tutorialnya memang agak cukup panjang, tapi tenang saja saja karena pada akhir tulisan saya
akan membagikan Source Codenya
-Upload FilePertama kita buat database dan tabelnya, disini saya beri nama database adalah upload dan
tabelnya juga upload

Kedua buat Folder untuk menampung file-file yang di upload, misalnya folder files
Ketiga buat script untuk form uploadnya
script form upload.php
<html>
<title>Form Upload</title>
<body>
<form enctype="multipart/form-data" method="POST"
action="hasil_upload.php">
File yang di upload : <input type="file" name="fupload"><br>
Deskripsi File : <br>
<textarea name="deskripsi" rows="8" cols="40"></textarea><br>
<input type=submit value=Upload>
</form>
Keempat buat Script hasil upload
script hasil_upload.php
<?php
// Baca lokasi file sementar dan nama file dari form (fupload)
$lokasi_file = $_FILES['fupload']['tmp_name'];
$nama_file
= $_FILES['fupload']['name'];
// Tentukan folder untuk menyimpan file
$folder = "files/$nama_file";
// tanggal sekarang
$tgl_upload = date("Ymd");
// Apabila file berhasil di upload
if (move_uploaded_file($lokasi_file,"$folder")){

echo "Nama File : <b>$nama_file</b> sukses di upload";


// Masukkan informasi file ke database
$konek = mysqli_connect("localhost","root","","upload");
$query = "INSERT INTO upload (nama_file, deskripsi,
tgl_upload)
VALUES('$nama_file', '$_POST[deskripsi]',
'$tgl_upload')";
mysqli_query($konek, $query);
}
else{
echo "File gagal di upload";
}
?>
sekarang saya coba jalankan scriptnya pada localhost
Upload File dan deskripsi lalu klik upload

saat file berhasil di upload, maka tampilannya akan berubah seperti ini

untuk memastikan apakan file telah berhasil di upload, buka direktori files

-Download FileSaya telah berhasil membuat upload file, sekarang saya akan membuat kebalikannya, yaitu
download file.
Sederhanya, aplikasi download file menyediakan link terhadap file yang akan kita download,
dimana link itu di klik makan terjadilah proses download.
Pertama saya buat file berisi script untuk menampilkan files yang available untuk di
download
script download.php
<html>
<title>Aplikasi Download</title>
<body>
<?php
$konek = mysqli_connect("localhost","root","","upload");
$query = "SELECT * FROM upload ORDER BY id_upload DESC";
$hasil = mysqli_query($konek, $query);
while ($r = mysqli_fetch_array($hasil)){
echo "Nama File : <b>$r[nama_file]</b> <br>";
echo "Deskripsi : $r[deskripsi] <br>";
echo "<a href=\"simpan.php?file=$r[nama_file]\">Download
File</a><hr><br>";
}
?>
Kedua saya buat file berisi script untuk menyimpan file yang di download
script simpan.php
<?php
// Tentukan folder file yang boleh di download
$folder = "files/";
// Lalu cek menggunakan fungsi file_exist
if (!file_exists($folder.$_GET['file'])) {
echo "<h1>Access forbidden!</h1>
<p> Anda tidak diperbolehkan mendownload file ini.</p>";
exit;
}
// Apabila mendownload file di folder files
else {
header("Content-Type: octet/stream");
header("Content-Disposition: attachment;
filename=\"".$_GET['file']."\"");
$fp = fopen($folder.$_GET['file'], "r");
$data = fread($fp, filesize($folder.$_GET['file']));
fclose($fp);
print $data;

}
?>
apabila dijalankan scriptnya maka

Cara Membuat Upload Edit dan Hapus


Gambar dengan php
Sebelum memulai pengkodean silahkan buat folder didalam htdocs dengan nama upload dan
buat 1 folder lagi dengan nama gambar yang akan dibuat untuk menyimban file gambarnya
4. Silahkan buka editor kalian bisa memakai C++ DW dll buatlah page index dan simpan
kode dibawah ini diatas kode </head>

CSS DAN JQUERY


<style>
input {width:95%;border:solid 1px #eeeeee;padding:6px 5px;}
input:hover {border:solid 1px #0099FF}
.group { margin:10px;}
.label2{ display:table}
.button {text-align:center;background:#0099FF;color:#ffffff; padding:5px; border:0px;
width:100px; cursor:pointer; border: solid 3px #eeeeee;}
.button:hover{border: solid 3px #0099FF;}
.gambar-container { width:980px;margin:auto;}
.gambar-container h3 { text-align:center;font-family:Arial, Helvetica, sans-serif;font-

size:20px;color:#999999}
.gambar {float:left;width:190px;height:200px; padding:1px;border: dotted 1px #eeeeee;}
.gambar h3 {text-align:center;font-family:Arial, Helvetica, sans-serif;fontsize:14px;color:#333333; margin:0px; padding:4px;}
.gambar img { width:100%;height:170px;}
.img-thumbnail {border: solid 1px #eeeeee; padding:3px; margin:10px;}
#tampil {background:#eeeeee; padding:5px; color:#333333;left:0px;}
.edit{float:left; text-align:center;font-size:14px; color:#fff; font-family:Arial, Helvetica, sansserif; background:#0066FF; padding:4px; display:block}
.hapus {float:right;text-align:center;font-size:14px; color:#ffffff; font-family:Arial, Helvetica,
sans-serif; background:#FF0000; padding:4px; display:block; width:80px;}
a{text-decoration:none;}
.container {width:400px; margin:auto;padding:10px;border:dotted 1px #cccccc;}
</style>
<script language="javascript">
function toggle() {
var ele = document.getElementById("sembunyi");
var gmbr = document.getElementById("gmbr");
var text = document.getElementById("tampil");
if(ele.style.display == "block") {
ele.style.display = "none";
gmbr.style.display = "block";
text.innerHTML = "Change Image";
}
else {
ele.style.display = "block";
gmbr.style.display = "none";
text.innerHTML = "Cancel";
}
}
</script>

5. dan buatlah sebuah koneksi terapkan dipaling atas

PHP
<?php error_reporting(E_ALL ^ (E_NOTICE | E_WARNING));
$host="localhost";
$user="root";
$pass="";
$db="dbupload";//nama database

$koneksi=mysql_connect($host,$user,$pass);
mysql_select_db($db,$koneksi);
if($koneksi){
//echo "Berhasil koneksi";
}else{
echo'KONEKSI GAGAL';// jika koneksi salah
}
?>

6. Buatlah sebuah form seperti dibawah ini


Nama : *

Gambar : *

lebih lengkapnya form insert dan form edit lihat dibawah ini

HTML / PHP
<?PHP $id=abs((int)$_GET['id']);if($id!= ''){
$sql=mysql_query("select * from tb_upload where id='$id'");
while($post=mysql_fetch_array($sql)){?>
<form name="form1" action="" method="post" enctype="multipart/form-data">
<div class="group">
<label class="label2">Nama Gambar :</label><input type="text" name="nama" value="<?
PHP echo $post['nama'];?>" required>
</div>
<div class="group">
<label class="label2">Gambar :</label>
<img id="gmbr" class="img-thumbnail" src="gambar/<?PHP echo $post['gambar'];?>"
width="70" height="70"/>
<br>
<span><div id="sembunyi" style="display: none;">
<label for="reg_input_name" class="req">Images</label>
<input name="gambar" type="file" id="gambar" accept="image/*" style="width:65%">
</div><br>
</span>
<span><a id="tampil" href="javascript:toggle();" rel="nofollow">Change Image</a></span>
</div>
<div class="group">

<input name="edituploadgambar" class="button" type="submit" value="UPDATE">


</div>
</form>
<?PHP }} else { ?>
<form name="form1" action="" method="post" enctype="multipart/form-data">
<div class="group">
<label class="label2">Nama Gambar :</label><input type="text" name="nama" required>
</div>
<div class="group">
<label class="label2">Gambar :</label><input name="gambar" type="file" required>
</div>
<div class="group">
<input name="uploadgambar" class="button" type="submit" value="SIMPAN">
</div>
</form><?PHP }?>

7. Sekrang kita mulai membuat script insert gambar dan terapkan diatas form yang baru kita
buat tadi

PHP
<?PHP if (isset($_POST['uploadgambar'])) {//// UNTUK MENAMBAH
$nama=strip_tags($_POST['nama']);
$gambar=$_FILES['gambar']['name'];
$tgl=date("h:i:s-j-m-Y");
$fileError = $_FILES['gambar']['error'];
$typeGambar = array('image/bmp', 'image/gif', 'image/jpg', 'image/jpeg', 'image/png');
if(!in_array($_FILES['gambar']['type'],$typeGambar)){
echo' <ecnter>FORMAT GAMBAR SALAH</center>';//gambar sallah
}elseif($fileSize=$_FILES['gambar']['size']< 20000 || $fileError < 20000){
$sql=mysql_query("insert into tb_upload values('','$nama','$gambar')");
$move = move_uploaded_file($_FILES['gambar']['tmp_name'],'gambar/'.$gambar);
if(!$sql)
{ echo '<script language="javascript" type="text/javascript">
alert("upload gambar gagal !");</script>';
echo "<meta http-equiv='refresh' content='0; url=./'>";
} else
{
echo '<script language="javascript" type="text/javascript">
alert("upload gambar berhasil !");</script>';
echo "<meta http-equiv='refresh' content='0; url=./'>";
}
}

}
?>

Perhatikan baik-baik script yang berwarna if (isset($_POST[' uploadgambar'])) {,


script ini diambil dari nama button bukan nama form.

8. Setelah selai membuat script insert sekarang kita membuat sebuah script Update
gambar/edit gambar

PHP
<?PHP if (isset($_POST['edituploadgambar'])) {// UNTUK MENGEDIT
$id=$_GET['id'];
$nama=strip_tags($_POST['nama']);
$gambar=$_FILES['gambar']['name'];
$tgl=date("h:i:s-j-m-Y");
if($gambar == ""){
$edit=mysql_query("UPDATE tb_upload SET nama='$nama' WHERE id='$id'");
if(!$edit-portofolio){ echo '<script language="javascript" type="text/javascript">
alert("edit gambar berhasil !");</script>';
echo "<meta http-equiv='refresh' content='0; url=./'>";
} else
{ echo '<script language="javascript" type="text/javascript">
alert("edit berhasil !");</script>';
echo "<meta http-equiv='refresh' content='0; url=./'>";
}
}
else{
$cari=mysql_query("select * from tb_upload where id='$id'");
$dt=mysql_fetch_array($cari);
$gambar=$dt['gambar'];
$tmpfile = "./gambar/$gambar";
$typeGambar = array('image/bmp', 'image/gif', 'image/jpg', 'image/jpeg', 'image/png');
if(!in_array($_FILES['gambar']['type'],$typeGambar)){
echo' FORMAT GAMBAR SALAH';
}elseif($fileSize=$_FILES['gambar']['size']< 20000 || $fileError < 20000){
unlink ($tmpfile);
$edit2=mysql_query("UPDATE tb_upload SET nama='$nama',gambar='$gambar' WHERE
id='$id'");

$move = move_uploaded_file($_FILES['gambar']['tmp_name'],'./gambar/'.$gambar);
if(!$edit2)
{ echo '<script language="javascript" type="text/javascript">
alert("edit gambar gagal !");</script>';
echo "<meta http-equiv='refresh' content='0; url=./'>";
} else
{ echo '<script language="javascript" type="text/javascript">
alert("edit gambar berhasil !");</script>';
echo "<meta http-equiv='refresh' content='0; url=./'>";
}
}
}
}
?>
9. Proses pengerjaan hampir selesai, sekarang kita buat script untuk menghapus data/gambar

PHP
<?PHP $act=$_GET['act'];//UNTUK MENHAPUS
$id=abs((int)$_GET['id']);
if ($act=='del'){
$cari=mysql_query("select * from tb_upload where id='$id'");
$dt=mysql_fetch_array($cari);
$gmbr=$dt['gambar'];
$tmpfile = "./gambar/$gmbr";
$sql=mysql_query("delete from tb_upload where id='$id'");
if(!$sql){
echo '<script language="javascript" type="text/javascript">
alert("delete gambar gagal !");</script>';
echo "<meta http-equiv='refresh' content='0; url=./'>";
}else{
unlink ($tmpfile);
echo '<script language="javascript" type="text/javascript">
alert("delete gambar berhasil !");</script>';
echo "<meta http-equiv='refresh' content='0; url=./'>";
}
}
?>

Perhatikan baik-baik proses penghapusan ini berdasarkan id yang ditemukan dan


lihat script unlink ($tmpfile); script ini berfungsi untuk menghapus gambar yang
berada didalam direktori gambar

10. Yang terakhir sekarang membuat script untuk menampilkan gambar lihat dibawah ini

HTML DAN PHP


<div class="gambar-container"><h3>GALERY GAMBAR</h3>
<?php $sql=mysql_query("select * from tb_upload order by id desc");$no=0;
while($datapost=mysql_fetch_array($sql)){$no++?>
<div class="gambar"><h3><?PHP echo $datapost ['nama'];?></h3>
<img src="gambar/<?PHP echo $datapost['gambar'];?>"/>
<a class="edit" href="./?id=<?PHP echo $datapost['id'];?>">EDIT GAMBAR</a>
<a class="hapus" href="./?id=<?PHP echo $datapost['id'];?
>&act=del">HAPUS</a>
</div>
<?php }?>

Menampilkan Notif Ketika Refresh & Back Button


Mungkin anda pernah ketika mengunjungi facebook lalu mengetik status, dan
ketika belum di post lalu anda merefresh page maka akan ada notifikasi, akan
meninggalkan halaman ini atau tidak, pada bahasan kali ini akan dibahas
bagaimana cara membuat notif seperti itu.
Cukup dengan menggunakan code berikut
window.onbeforeunload = function() {
return "Apakah anda akan meninggalkan halaman ini ?";
};
Silahkan tempelkan script tersebut pada page website anda, selamat mencoba
dan semoga bermanfaat .