Membuat Web Simple Upload dan Download File dengan PHP MySQL. Oke, pada kesempatan kali ini saya akan membuat sebuah website untuk Upload dan Download File dengan PHP dan MySQL. Dimana nantinya User bisa melakukan Upload file di menu Upload, dan kemudian file yang di Upload bisa di Download pada menu Download.
Beberapa fitur yang akan dibuat adalah:
- User bisa Upload
- User bisa Download
- Pembatasan pada ektensi file yang bisa di Upload, hanya bisa Upload file dengan ekstensi doc, docx, xls, xlsx, ppt, pptx, pdf, rar, zip (bisa dirubah)
- Pembatasan file size 1 MB (bisa dirubah)
Dan berikut ini adalah screenshot dari file-file yang akan dibuat
Oke, langsung saja mulai ke tutorialnya.
Pertama seperti biasanya buat dahulu sebuah database di phpMyAdmin. Disini saya membuat database dengan nama tutorial, kemudian Dumping kode SQL di bawah ini
DROP TABLE IF EXISTS `download`;
CREATE TABLE `download` (
`id` int(11) NOT NULL auto_increment,
`tanggal_upload` date NOT NULL,
`nama_file` varchar(100) NOT NULL,
`tipe_file` varchar(10) NOT NULL,
`ukuran_file` varchar(20) NOT NULL,
`file` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
);
Atau bisa juga dengan meng-Import file database.sql yang sudah disertakan pada file download di bawah halaman ini.
Database dan Table sudah dibuat, sekarang kita buat dahulu script untuk melakukan koneksi ke database.
Buat file baru dan beri nama config.php, dan kodenya seperti di bawah ini:
<?php
//koneksi ke database
mysql_connect("localhost", "root", "root");
mysql_select_db("tutorial");
//fungsi untuk mengkonversi size file
function formatBytes($bytes, $precision = 2) {
$units = array('B', 'KB', 'MB', 'GB', 'TB');
$bytes = max($bytes, 0);
$pow = floor(($bytes ? log($bytes) : 0) / log(1024));
$pow = min($pow, count($units) - 1);
$bytes /= pow(1024, $pow);
return round($bytes, $precision) . ' ' . $units[$pow];
}
?>
Nah, dari kode di atas kita sudah bisa melakukan koneksi ke database, jangan lupa mengedit detail koneksi ke database milik anda sendiri.
Dan juga dari kode di atas, dibuat sebuah fungsi untuk mengkonversi file size dari file yang di upload nantinya.
Sekarang saatnya buat file yang pertama yaitu index.php. dan berikut ini isi kodenya:
<!DOCTYPE html>
<html>
<head>
<title>Simple Upload dan Download File</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>Simple Upload dan Download File</h1>
<span>Dibuat oleh Pino @tutorialweb.net</span>
</div>
<div id="menu">
<a href="index.php" class="active">Home</a>
<a href="upload.php">Upload</a>
<a href="download.php">Download</a>
</div>
<div id="content">
<h2>Home</h2>
<p>Selamat Datang!</p>
<p>Web Simple Download dan Upload File ini dibuat oleh <strong>TUTORIALWEB.NET</strong>. Anda bisa mempublikasikan ulang, atau merubah Source Code web ini. Jangan lupa untuk mengunjungi <a href="http://www.tutorialweb.net/" target="_blank">TUTORIALWEB.NET</a> untuk tutorial-tutorial pemrograman lainnya.</p>
</div>
</div>
</body>
</html>
Dalam file index.php ini tidak ada yang spesial, hanya salam perkenalan saja 
Selanjutnya buat file baru dengan nama upload.php, dan isi kodenya seperti di bawah ini
<head>
<title>Simple Upload dan Download File</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>Simple Upload dan Download File</h1>
<span>Dibuat oleh Pino @tutorialweb.net</span>
</div>
<div id="menu">
<a href="index.php">Home</a>
<a href="upload.php" class="active">Upload</a>
<a href="download.php">Download</a>
</div>
<div id="content">
<h2>Upload</h2>
<p>Upload file Anda dengan melengkapi form di bawah ini. File yang bisa di Upload hanya file dengan ekstensi <b>.doc, .docx, .xls, .xlsx, .ppt, .pptx, .pdf, .rar, .zip</b> dan besar file (file size) maksimal hanya 1 MB.</p>
<?php
include('config.php');
if($_POST['upload']){
$allowed_ext = array('doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'rar', 'zip');
$file_name = $_FILES['file']['name'];
$file_ext = strtolower(end(explode('.', $file_name)));
$file_size = $_FILES['file']['size'];
$file_tmp = $_FILES['file']['tmp_name'];
$nama = $_POST['nama'];
$tgl = date("Y-m-d");
if(in_array($file_ext, $allowed_ext) === true){
if($file_size < 1044070){
$lokasi = 'files/'.$nama.'.'.$file_ext;
move_uploaded_file($file_tmp, $lokasi);
$in = mysql_query("INSERT INTO download VALUES(NULL, '$tgl', '$nama', '$file_ext', '$file_size', '$lokasi')");
if($in){
echo '<div class="ok">SUCCESS: File berhasil di Upload!</div>';
}else{
echo '<div class="error">ERROR: Gagal upload file!</div>';
}
}else{
echo '<div class="error">ERROR: Besar ukuran file (file size) maksimal 1 Mb!</div>';
}
}else{
echo '<div class="error">ERROR: Ekstensi file tidak di izinkan!</div>';
}
}
?>
<p>
<form action="" method="post" enctype="multipart/form-data">
<table width="100%" align="center" border="0" bgcolor="#eee" cellpadding="2" cellspacing="0">
<tr>
<td width="40%" align="right"><b>Nama File</b></td><td><b>:</b></td><td><input type="text" name="nama" size="40" required /></td>
</tr>
<tr>
<td width="40%" align="right"><b>Pilih File</b></td><td><b>:</b></td><td><input type="file" name="file" required /></td>
</tr>
<tr>
<td> </td><td> </td><td><input type="submit" name="upload" value="Upload" /></td>
</tr>
</table>
</form>
</p>
</div>
</div>
</body>
</html>
File ini akan membuat Form untuk Upload File dan juga Proses untuk Upload File.
Berikut ini sedikit penjelasan Kode dari file upload.php
| Line | Penjelasan Kode |
|---|---|
| 57-69 | Membuat form yang berisi inputan judul, inputan pemilihan file, dan tombol untuk upload |
| 26 | meng-include-kan file config.php yang berisikan koneksi ke database |
| 28 | membuat array yang berisikan file ber-ekstensi apa saja yang bisa di upload |
| 29-32 | mendeklarasikan beberapa properti dari inputan file, seperti nama file, file ekstensi, file size, dan file tmp |
| 34-35 | mendeklarasikan judul dan tanggal sekarang |
| 37 | pengecekan apakah file ekstensi ada dalam array ekstensi yang di izinkan, jika ada (true) maka berhasil |
| 38 | pengecekan apakah file size tidak lebih besar dari 1044070 (1Mb), jika lebih kecil, maka berhasil |
| 39 | menentukan lokasi menyimpanan/upload file, yaitu file akan di upload didalam folder files, dan merubah nama file yang diupload menjadi judul yang di inputkan tadi. |
| 40 | melakukan proses upload dengan fungsi move_uploaded_file() |
| 41 | melakukan query ke database untuk melakukan perintah INSERT data |
| 43 | pesan jika file berhasil di upload dan data tersimpan ke database |
Dan sekarang buat file lagi dan beri nama download.php, dan isi kodenya seperti di bawah ini
<!DOCTYPE html>
<html>
<head>
<title>Simple Upload dan Download File</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>Simple Upload dan Download File</h1>
<span>Dibuat oleh Pino @tutorialweb.net</span>
</div>
<div id="menu">
<a href="index.php">Home</a>
<a href="upload.php">Upload</a>
<a href="download.php" class="active">Download</a>
</div>
<div id="content">
<h2>Download</h2>
<p>Silahkan download file yang sudah di Upload di website ini. Untuk men-Download Anda bisa mengklik Judul file yang di inginkan.</p>
<p>
<table class="table" width="100%" cellpadding="3" cellspacing="0">
<tr>
<th width="30">No.</th>
<th width="80">Tgl. Upload</th>
<th>Nama File</th>
<th width="70">Tipe</th>
<th width="70">Ukuran</th>
</tr>
<?php
include('config.php');
$sql = mysql_query("SELECT * FROM download ORDER BY id DESC");
if(mysql_num_rows($sql) > 0){
$no = 1;
while($data = mysql_fetch_assoc($sql)){
echo '
<tr bgcolor="#fff">
<td align="center">'.$no.'</td>
<td align="center">'.$data['tanggal_upload'].'</td>
<td><a href="'.$data['file'].'">'.$data['nama_file'].'</a></td>
<td align="center">'.$data['tipe_file'].'</td>
<td align="center">'.formatBytes($data['ukuran_file']).'</td>
</tr>
';
$no++;
}
}else{
echo '
<tr bgcolor="#fff">
<td align="center" colspan="4" align="center">Tidak ada data!</td>
</tr>
';
}
?>
</table>
</p>
</div>
</div>
</body>
</html>
Dalam file download ini akan menampilkan sebuah Table yang berisi file-file yang telah di upload, dan akan ada link untuk men-Download file tersebut.
Berikut ini sedikit penjelasan dari file download.php
| Line | Penjelasan Kode |
|---|---|
| 26-59 | membuat table seperti biasa |
| 35 | meng-include-kan file config.php yang berisi kode untuk melakukan koneksi ke database |
| 36 | melakukan query ke database dengan perintah SELECT dari table download dan di urutkan berdasarkan id yang paling besar |
| 37 | jika query diatas menghasilkan nilai > 0 (terdapat data di dalam tabel) maka akan melakukan perintah dibawahnya |
| 38 | membuat variabel untuk nomor urut |
| 39 | melakukan perulangan while dari query SELECT pada line 37 |
| 40-49 | menampilkan data dari perulangan yang mengambil dari table download |
| 51-57 | jika query pada line 37 menghasilkan nilai 0 (tidak ada data di database) maka akan menuliskan “pesan tidak ada data” |
Untuk mempercantik tampilannya, di bawah ini adalah kode CSS-nya, dan simpan dengan nama style.css.
@charset "utf-8";
/* CSS Document */
body {
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
background-color:#eee;
margin:0;
padding:0;
}
h1, h2, h3 {
margin:0;
padding:0;
}
#container {
width:500px;
margin:20px auto;
padding:10px;
background-color:#fff;
box-shadow:0px 0px 3px #000;
}
#header {
text-align:center;
}
#menu {
text-align:center;
margin:15px 0px;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
}
#menu a {
display:inline-block;
padding:5px 10px;
text-decoration:none;
color:#000;
font-weight:bold;
}
#menu a:hover {
background-color:#CCC;
}
#menu a.active {
background-color:#CCC;
}
.table, th, td {
border-collapse:collapse;
border:1px solid #ccc;
}
.table th {
background-color:#CCC;
}
.error {
border:1px solid #FF8080;
background-color:#FFCECE;
padding:3px;
margin:5px 0px;
text-align:center;
}
.ok {
border:1px solid #80FF80;
background-color:#CFC;
padding:3px;
margin:5px 0px;
text-align:center;
}
Nah, sudah selesai. Silahkan mencoba :)
