Upload file dan menyimpan lokasi file di database (Basic Dynamic tutorial Dreamweaver) – Part 2

Tutorial ini adalah lanjutan dari tutorial sebelumnya (Silakan baca: Upload file dan menyimpan lokasi file di database (Basic Dynamic Tutorial Dreamweaver)).

Sebelum masuk ke tutorial ini, pastikan Anda telah mempelajari ketiga tutorial ini:

  1. Membuat Site Definition di Dreamweaver CS5, dan
  2. Membuat koneksi database PHP MySQL dengan Dreamweaver CS5
  3. Membaca tutorial seri sebelumnya: Upload file dan menyimpan lokasi file di database (Basic Dynamic tutorial Dreamweaver)

NOTE: DALAM TUTORIAL INI SEMUA FILE YANG DIUPLOAD DIASUMSIKAN SEBAGI GAMBAR.

Jika pada tutorial sebelumnya Anda belajar bagaimana mengupload file gambar, maka pada tutorial kali ini Anda akan belajar bagaimana menampilkan listing file yang telah diupload dan kemudian bisa mengedit dan menghapusnya.

Java Web Media: Web Design Course Depok

Java Web Media: Web Design Course Depok

Struktur file

Pada tutorial kali ini, Anda akan bekerja dengan 2 (dua) file PHP, yaitu:

  1. File upload_file.php yang telah Anda kerjakan pada tutorial sebelumnya (Silakan baca: Upload file dan menyimpan lokasi file di database (Basic Dynamic Tutorial Dreamweaver)).
  2. File style.css untuk membuat tampilan jadi lebih menarik.
  3. File edit_file.php yang akan kita buat dalam tutorial kali ini. Berfungsi untuk mengedit dan menghapus record file dan menyimpan datanya di database.

Menampilkan listing file yang telah diupload

Buka kembali file upload_file.php melalui Dreamweaver Anda. Melalui Design View, letakkan kursor Anda di samping tulisan Contact Us lalu tekan Enter.

  1. Klik Insert > Table
  2. Jendela Table akan muncul, lalu isi Rows: 3, Column: 4. Table width: 100, ubah ukuran pixels menjadi percent. Border thickness, Cell pading dan Cell spacingset menjadi 0 (nol). Lihat gambar.
    Java Web Media: Web Design Company in Depok

    Java Web Media: Web Design Company in Depok

  3. Klik OK. Table baru akan muncul di lembar kerja Anda.
  4. Lalu ketik Judul file, Deskripsi, Gambar dan Action pada masing-masing kolom table. Lihat gambar.
    Java Web Media: Web Design Company in Depok

    Java Web Media: Web Design Company in Depok

  5. Tambahkan tulisan Edit | Delete pada kolom terakhir baris dua.
  6. Simpan kembali hasil pekerjaan Anda
Menampilkan data

Langkah selanjutnya adalah menampilkan data file yang tersimpan dalam database MySQL. Pada tutorial sebelumnya, recordset (rsGalery) telah dibuat, dengan recordset ini Anda akan menampilkan data tersebut dan menampilkan gambarnya.

Java Web Media: Web Design Company in Depok

Java Web Media: Web Design Company in Depok

  1. Klik Windows > Bindings. Jendela Bindings akan muncul di sebelah kanan workspace Anda. Disana sudah ada recordset(rsGalery). Klik pada icon plus (+) untuk menampilkan semua kolom tabel database MySQL.
    Java Web Media: Web Design Company in Depok

    Java Web Media: Web Design Company in Depok

  2.  Drag/klik tahan kolom id ke tabel kolom pertama baris kedua. Lalu drag juga kolom deskripsi_file ke kolom kedua baris kedua. Lihat gambar.
  3. Lalu letakkan kursor Anda pada kolom gambar (baris ketiga kolom kedua).
  4. Klik Insert > Image Objects > Image Placeholder. Jendela Image place holder akan muncul.
    Java Web Media: Web Design Company in Depok

    Java Web Media: Web Design Company in Depok

  5. Pada menu Name: gambar. Lalu Width: 150 dan Height: 100. Klik OK
  6. Ubah lembar kerja Anda menjadi Code View, lalu cari kode berikut ini:
    Kode: <img src=”" alt=”" name=”gambar” width=”150″ height=”100″>
  7. Modifikasi kode tersebut menjadi:
    <img src=”upload/<?php echo $row_rsGalery['nama_file']; ?>” alt=”" name=”gambar” width=”150″ height=”100″>
  8. Simpan hasil pekerjaan Anda.

Menampilkan semua listing file:

Selanjutnya, cari kode di bawah ini:

<tr>
 <td><?php echo $row_rsGalery['judul_file']; ?></td>
 <td><?php echo $row_rsGalery['deskripsi_file']; ?></td>
 <td><img src="upload/<?php echo $row_rsGalery['nama_file']; ?>" alt="" name="gambar" width="150" height="100"></td>
 <td>Edit | Delete</td>
 </tr>

Lalu klik Insert > Data Objects > Repeat Region. Lalu pilih Recordset: rs(Galery) kemudian Show: 10. Klik Ok. Lalu pada kode: 

<?php echo $row_rsGalery['deskripsi_file']; ?>

Ubah menjadi:

<?php echo nl2br($row_rsGalery['deskripsi_file']); ?>

Hal ini akan mengubah kode di atas menjadi:

<?php do { ?>
 <tr>
 <td><?php echo $row_rsGalery['judul_file']; ?></td>
 <td><?php echo nl2br($row_rsGalery['deskripsi_file']); ?></td>
 <td><img src="upload/<?php echo $row_rsGalery['nama_file']; ?>" alt="" name="gambar" width="150" height="100"></td>
 <td>Edit | Delete</td>
 </tr>
 <?php } while ($row_rsGalery = mysql_fetch_assoc($rsGalery)); ?>

Mengubah tampilan tabel

Tampilan tabel Anda mungkin akan sedikit kacau dan berantakan. Langkah terbaik adalah dengan mengubah tampilan tabel melalui CSS. Buka file style.css yang tersimpan dalam folder css. Tambah kode di bawah ini:

table {
 border: solid thin #090;
 font-size: 12px;
}
th, td {
 text-align: left;
 vertical-align: top;
 border-bottom: solid thin #090;
 padding: 10px;
}
th {
 background-color: #060;
 color: #fff;
 font-weight: bold;
 font-size: 14px;
}

Hal ini akan mengubah tampilan menjadi lebih baik.

Java Web Media: Web Design Company in Depok

Java Web Media: Web Design Company in Depok

Menambahkan link Edit dan Delete

Ubah workspace Anda menjadi Design View. Seleksi tulisan Edit lalu tambahkan link:

edit_file.php?edit=<?php echo $row_rsGalery['id']; ?>

Dan seleksi tulisan Delete, lalu tambahkan link:

edit_file.php?delete=<?php echo $row_rsGalery['id']; ?>

Hal ini akan menghasilkan kode:

<a href="edit_file.php?edit=<?php echo $row_rsGalery['id']; ?>">Edit</a> | <a href="edit_file.php?delete=<?php echo $row_rsGalery['id']; ?>">Delete</a>

Simpan kembali hasil pekerjaan Anda.

Membuat form untuk mengedit file gambar (edit_file.php)

Berikut ini adalah kode dasar dari file edit_file.php.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial Upload File</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
 <h1><a href="http://www.javawebmedia.com">Home</a> | <a href="http://www.javawebmedia.com">Java Web Media</a> | <a href="http://www.javawebmedia.com/course.php">Course</a> | <a href="http://www.javawebmedia.com/contact.php">Contact Us</a></h1>
 <h2>Mengupdate gambar</h2>
 <form action="" method="post" enctype="multipart/form-data" name="form1">
 <p>
 <label for="judul_file">Judul file:</label>
 <input name="judul_file" type="text" id="judul_file" size="50">
 </p>
 <p>
 <label for="deskripsi_file">Deskripsi file:</label>
 <textarea name="deskripsi_file" id="deskripsi_file" cols="50" rows="5"></textarea>
 </p>
 <p>
 <label for="nama_file">Upload file (Biarkan kosong jika tidak ingin mengubah gambar):</label>
 <input name="nama_file" type="file" id="nama_file" size="40">
 </p>
 <p>
 <input type="submit" name="submit" id="submit" value="Update">
 <input type="hidden" name="id" id="id">
 <a href="upload_file.php">Cancel</a></p>
 </form>
 <h2>Menghapus gambar</h2>
 <p class="warning">Yakin ingin menghapus gambar ini?</p>

 <form name="form2" method="post" action="">
 <p>
 <label for="judul_file">Judul gambar:</label>
 <input name="judul_file" type="text" id="judul_file" size="50" readonly="readonly">
 </p>
 <p>
 <input type="submit" name="submit" id="submit" value="Hapus gambar">
 <input type="hidden" name="hapus" id="hapus">
 <input type="hidden" name="nama_file" id="nama_file">
 <a href="upload_file.php">Cancel</a></p>
 </form>
</div>
</body>
</html>

Ada beberapa penambahan hidden field, antara lain:

  1. <input type=”hidden” name=”id” id=”id”>: adalah primary key yang akan diupdate. Terdapat dalam form Update gambar.
  2. <input type=”hidden” name=”hapus” id=”hapus”>: adalah primary key data yang akan dihapus. Terdapat dalam form Hapus gambar.
  3. <input type=”hidden” name=”nama_file” id=”nama_file”>: adalah nama file yang akan dihapus dari folder upload.  Terdapat dalam form Hapus gambar

Menampilkan form sesuai dengan kegunaannya

Seperti dijelaskan di halaman upload_file.php, link Edit file adalah edit_file.php?edit=1 dan link hapus file atau Delete akan menghasilkan link: edit_file.php?delete=1. Dengan menggunakan logika IF yang ada di PHP, kita akan menampilkan form sesuai dengan kebutuhannya.

Java Web Media: Web Design Company in Depok

Java Web Media: Web Design Company in Depok

Java Web Media: Web Design Company in Depok

Java Web Media: Web Design Company in Depok

Cari kode di bawah ini:

<h2>Mengupdate gambar</h2>

Ubah kode di atas sehingga menjadi:

<?php if(isset($_GET['edit'])) { ?>
 <h2>Mengupdate gambar</h2>

Lalu cari kode di bawah ini:

 <h2>Menghapus gambar</h2>

Kemudian ubah menjadi:

<?php }else{ ?>
 <h2>Menghapus gambar</h2>

Selanjutnya cari kode di bawah ini:

</form>
</div>
</body>
</html>

Lalu ubah menjadi:

</form>
 <?php } ?>
</div>
</body>
</html>

Membuat Recordset untuk Mengupdate dan Menghapus data file

Akan ada 2 (dua) recordset yang akan kita buat, sebut saja Recordset (rsEdit) untuk menampilkan data yang akan diedit dan Recordset (rsDelete) untuk menampilkan data yang akan dihapus. Berikut langkah-langkahnya:

Membuat Recordset (rsEdit):

Java Web Media: Web Design Course Depok

Java Web Media: Web Design Course Depok

  1. Klik Insert > Data Objects > Recordset. Jendela Recordset akan muncul.
  2. Name: rsEdit
  3. Connection: koneksi
  4. Table: myfile
  5. Columns: All
  6. Filter: id. Lalu pada tulisan id, ubah menjadi edit.
  7. Klik OK

Membuat Recordset (rsDelete):

  1. Klik Insert > Data Objects > Recordset. Jendela Recordset akan muncul.
  2. Name: rsDelete
  3. Connection: koneksi
  4. Table: myfile
  5. Columns: All
  6. Filter: id. Lalu pada tulisan id, ubah menjadi delete. PERHATIKAN BAGIAN INI
  7. Klik OK
Menampilkan data yang akan diupdate di formulir update file

Langkah selanjutnya adalah menampilkan data yang akan diedit ke dalam form update. Berikut langkah-langkahnya:

  1. Ubah workspace Anda menjadi Design View. Lalu fokuskan pada form update.
  2. Klik pada input Judul file sampai di menu Properties muncul tanda petir. Lihat Gambar.
  3. Klik gambar petir tersebut. Lalu expand recordset (rsEdit) dengan mengklik ikon plus (+).
  4. Klik kolom judul_file dari Recordset (rsEdit).
    Java Web Media: Web Design Course Depok

    Java Web Media: Web Design Course Depok

  5. Klik OK. Lakukan langkah yang sama pada input Deskripsi file.
  6. Biarkan kosong pada form/input Upload file.
    Java Web Media: Web Design Course Depok

    Java Web Media: Web Design Course Depok

  7. Klik pada input hiddenfield yang bernama id. Lalu klik tanda petir pada menu Properties. Pilih kolom id dari Recordset (rsEdit). Klik OK
  8. Simpan hasil pekerjaan Anda.

Menampilkan data yang akan dihapus di formulir hapus file

Langkah pengerjaannya sama dengan pada saat menampilkan data pada form update file. Hanya saja data yang diambil diambilkan dari Recordset (rsDelete).

  1. Arahkan workspace Anda pada form hapus file
  2. Klik pada input Judul file, klik tanda petir yang ada di panel Properties. Lalu expand Recordset (rsDelete) dengan mengklik ikon plus (+) lalu pilih kolom judul_file.
  3. Klik input hiddenfield hapus, klik tanda petir yang ada di panel Properties. Lalu  lalu pilih kolom id.
    Java Web Media: Web Design Course Depok

    Java Web Media: Web Design Course Depok

  4. Klik pada input hiddenfield nama_file, klik tanda petir yang ada di panel Properties. Lalu pilih kolom nama_file.
  5. Ubah workspace Anda menjadi Code View. Lalu cari kode ini:<input name=”nama_file” type=”hidden” id=”nama_file” value=”<?php echo $row_rsDelete['nama_file']; ?>”>
  6. Kemudian tambahkan kode upload/ sebelum kode PHP sehingga berubah menjadi:<input name=”nama_file” type=”hidden” id=”nama_file” value=”upload/<?php echo $row_rsDelete['nama_file']; ?>”>
  7. Simpan kembali hasil pekerjaan Anda.

Mengaktifkan form update data

Langkah berikut ini adalah untuk mengaktifkan update data file, tetapi belum bisa untuk mengubah file yang sudah diupload.

Java Web Media: Web Design Course Depok

Java Web Media: Web Design Course Depok

  1. Klik Insert > Data Objects > Update Record > Update Record. Jendela Update Record akan muncul.
  2. Submit value from form: form1
  3. Connection: koneksi
  4. Update table: myfile
  5. Columns:, pastikan semua kolom GETS VALUE
  6. After updating, go to: upload_file.php
  7. Klik OK.
  8. Simpan hasil pekerjaan Anda.

 Mengaktifkan form delete/hapus data

Langkah ini adalah untuk menghapus data file, tapi tidak menghapus file yang sudah diupload yang terkait dengan data yang dihapus.

Java Web Media: Web Design Course Depok

Java Web Media: Web Design Course Depok

  1. Klik Insert > Data Objects > Delete Record. Jendele Delete record akan keluar.
  2. First check if variable is defined: Primary key value
  3. Ketik form2 pada textfield/input yang ada di sampingnya
  4. Pastikan data yang akan dihapus adalah dalam tabel myfile
  5. Table: myfile
  6. Primary key column: id
  7. Primary key value: form variable (secara default adalah URL Parameter, ubah menjadi form variable).
  8. Ubah tulisan id menjadi hapus.
  9. After deleting, go to: upload_file.php
  10. Klik OK
  11. Simpan hasil pekerjaan Anda.

Menghapus file lama jika update file baru atau membiarkan file lama jika tidak ingin diupdate

Ini adalah langkah yang membutuhkan ketelitian Anda dalam menulis kode.

Cari kode di bawah ini:

$colname_rsEdit = "-1";
if (isset($_GET['edit'])) {
 $colname_rsEdit = $_GET['edit'];
}
mysql_select_db($database_koneksi, $koneksi);
$query_rsEdit = sprintf("SELECT * FROM myfile WHERE id = %s", GetSQLValueString($colname_rsEdit, "int"));
$rsEdit = mysql_query($query_rsEdit, $koneksi) or die(mysql_error());
$row_rsEdit = mysql_fetch_assoc($rsEdit);
$totalRows_rsEdit = mysql_num_rows($rsEdit);
$colname_rsDelete = "-1";
if (isset($_GET['delete'])) {
 $colname_rsDelete = $_GET['delete'];
}
mysql_select_db($database_koneksi, $koneksi);
$query_rsDelete = sprintf("SELECT * FROM myfile WHERE id = %s", GetSQLValueString($colname_rsDelete, "int"));
$rsDelete = mysql_query($query_rsDelete, $koneksi) or die(mysql_error());
$row_rsDelete = mysql_fetch_assoc($rsDelete);
$totalRows_rsDelete = mysql_num_rows($rsDelete);

Pindahkan kode tersebut tepat di atas kode ini:

$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
 $editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}

Cari kode di bawah ini:

if ((isset($_POST["MM_update"])) && ($_POST["MM_update"] == "form1")) {

Setelah kode tersebut tekan Enter, kemudian tambahkan kode sehingga berubah menjadi seperti ini:

if ((isset($_POST["MM_update"])) && ($_POST["MM_update"] == "form1")) {
 //Jika gambar tidak diupdate, maka data gambar tidak diganti
 if(empty($_FILES['nama_file']['name'])) {
 // Kode update data tanpa upload file
 $updateSQL = sprintf("UPDATE myfile SET judul_file=%s, deskripsi_file=%s WHERE id=%s",
 GetSQLValueString($_POST['judul_file'], "text"),
 GetSQLValueString($_POST['deskripsi_file'], "text"),
 GetSQLValueString($_POST['id'], "int"));
 }else{

Kemudian setelah }else{, tambahkan kode lagi sehingga menjadi:

}else{
 // Jika file baru diupload, maka file akan diupload dan database akan diganti dengan file baru
 // File lama juga akan dihapus
 $target = "upload/";
 $hapusfile = unlink($target.$row_rsEdit['nama_file']);
 // Jika proses upload file gagal
 if(!$hapusfile) {
 header("Location: edit_file.php?file=error");
 }
 // File baru diupload
 $target = $target . basename( $_FILES['nama_file']['name']);

Lalu setelah kode tersebut, ubah kode berikut:

 GetSQLValueString($_POST['nama_file'], "text"),

Ubah menjadi:

GetSQLValueString($_FILES['nama_file']['name'], "text"),

Kemudian di atas kode mysql_select_db($database_koneksi, $koneksi);, tambahkan kode berikut, sehingga menjadi:

// Upload file baru 
 move_uploaded_file($_FILES['nama_file']['tmp_name'], $target);
 } // Akhir dari upload file baru
 mysql_select_db($database_koneksi, $koneksi);

Simpan kembali hasil pekerjaan Anda. Lakukan uji coba untuk mengedit data dan mengupload file baru atau hanya mengedit data tanpa mengupload file baru.

Menghapus data sekaligus menghapus file

Langkah selanjutnya adalah mengaktifkan form hapus data dan sekaligus akan menghapus file/gambar yang berkaitan dengan data tersebut

Cari kode di bawah ini:

if ((isset($_POST['hapus'])) && ($_POST['hapus'] != "")) {
 $deleteSQL = sprintf("DELETE FROM myfile WHERE id=%s",
 GetSQLValueString($_POST['hapus'], "int"));

Tekan Enter setelah kode di atas, lalu tambahkan kode baru sehingga berubah menjadi seperti berikut ini:

if ((isset($_POST['hapus'])) && ($_POST['hapus'] != "")) {
 $deleteSQL = sprintf("DELETE FROM myfile WHERE id=%s",
 GetSQLValueString($_POST['hapus'], "int"));
// Hapus gambar dan data sekaligus
 $hapus = unlink($_POST['nama_file']);
 // Jika proses hapus gagal, alihkan ke halaman error
 if(!$hapus) {
 header("Location: edit_file.php?file=error");
 }

Simpan kembali hasil pekerjaan Anda.

Lakukan uji coba untuk menghapus data di database, maka otomatis juga akan menghapus file terkait dengan data yang Anda hapus.

 Menampilkan pesan error jika terjadi error

Jika dalam proses penghapusan file gagal, Anda akan dialihkan ke halaman error. Lihat kode:

if(!$hapus) {
 header("Location: edit_file.php?file=error");
 }

Anda perlu menampilkan pesan error sehingga tidak membingungkan pengguna website. Cari kode di bawah ini:

<a href="upload_file.php">Cancel</a></p>
 <input type="hidden" name="MM_update" value="form1">
 </form>

 <?php }else{ ?>
 <h2>Menghapus gambar</h2>

 <p class="warning">Yakin ingin menghapus gambar ini?</p>

Lalu tambahkan kode untuk pesan error sehingga berubah menjadi:

<a href="upload_file.php">Cancel</a></p>
 <input type="hidden" name="MM_update" value="form1">
 </form>

 <?php }elseif(isset($_GET['file']) && ($_GET['file']=="error")) { ?>
 <h2 class="warning">Oopss... Terjadi error dalam proses upload file. <a href="upload_file.php">Kembali ke halaman file</a></h2>

 <?php }else{ ?>
 <h2>Menghapus gambar</h2>

 <p class="warning">Yakin ingin menghapus gambar ini?</p>
Java Web Media: Web Design Course Depok

Java Web Media: Web Design Course Depok

SOURCE CODE AKHIR:

upload_file.php

<?php require_once('Connections/koneksi.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
 if (PHP_VERSION < 6) {
 $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
 }
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
 case "text":
 $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
 break; 
 case "long":
 case "int":
 $theValue = ($theValue != "") ? intval($theValue) : "NULL";
 break;
 case "double":
 $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
 break;
 case "date":
 $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
 break;
 case "defined":
 $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
 break;
 }
 return $theValue;
}
}
$maxRows_rsGalery = 10;
$pageNum_rsGalery = 0;
if (isset($_GET['pageNum_rsGalery'])) {
 $pageNum_rsGalery = $_GET['pageNum_rsGalery'];
}
$startRow_rsGalery = $pageNum_rsGalery * $maxRows_rsGalery;
mysql_select_db($database_koneksi, $koneksi);
$query_rsGalery = "SELECT * FROM myfile ORDER BY id DESC";
$query_limit_rsGalery = sprintf("%s LIMIT %d, %d", $query_rsGalery, $startRow_rsGalery, $maxRows_rsGalery);
$rsGalery = mysql_query($query_limit_rsGalery, $koneksi) or die(mysql_error());
$row_rsGalery = mysql_fetch_assoc($rsGalery);
if (isset($_GET['totalRows_rsGalery'])) {
 $totalRows_rsGalery = $_GET['totalRows_rsGalery'];
} else {
 $all_rsGalery = mysql_query($query_rsGalery);
 $totalRows_rsGalery = mysql_num_rows($all_rsGalery);
}
$totalPages_rsGalery = ceil($totalRows_rsGalery/$maxRows_rsGalery)-1;
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
 $editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) {
 // Upload file code goes here
 $target = "upload/"; //This is the directory where file will be uploaded//
 $target = $target . basename( $_FILES['nama_file']['name']); //change the image and name to whatever your database fields are called//
 $insertSQL = sprintf("INSERT INTO myfile (judul_file, deskripsi_file, nama_file) VALUES (%s, %s, %s)",
 GetSQLValueString($_POST['judul_file'], "text"),
 GetSQLValueString($_POST['deskripsi_file'], "text"),
 GetSQLValueString($_FILES['nama_file']['name'], "text"));

 //This code writes the photo to the server// 
 if(move_uploaded_file($_FILES['nama_file']['tmp_name'], $target)) 
 { 

 mysql_select_db($database_koneksi, $koneksi);
 $Result1 = mysql_query($insertSQL, $koneksi) or die(mysql_error());
$insertGoTo = "upload_file.php?file=uploaded";
 if (isset($_SERVER['QUERY_STRING'])) {
 $insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?";
 $insertGoTo .= $_SERVER['QUERY_STRING'];
 }
 header(sprintf("Location: %s", $insertGoTo));
 }else{
 header(sprintf("Location: upload_file.php?file=error"));
 }
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial Upload File</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<?php if(isset($_GET['file']) && ($_GET['file']=="uploaded")) { ?>
<h1>Terimakasih, file Anda berhasil diupload</h1>
<h3><strong><?php echo $row_rsGalery['judul_file']; ?></strong></h3>
<p><?php echo nl2br($row_rsGalery['deskripsi_file']); ?></p>
<img src="upload/<?php echo $row_rsGalery['nama_file']; ?>">
<?php }elseif(isset($_GET['file']) && ($_GET['file']=="error")) { ?>
<h1>Mohon maaf, terjadi error dalam proses upload file</h1>
<p><a href="upload_file.php">Ulangi upload file</a></p>
<?php }else{ ?>
<h1><a href="http://www.javawebmedia.com">Home</a> | <a href="http://www.javawebmedia.com">Java Web Media</a> | <a href="http://www.javawebmedia.com/course.php">Course</a> | <a href="http://www.javawebmedia.com/contact.php">Contact Us</a></h1>

 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <th scope="col">Judul File</th>
 <th width="40%" scope="col">Deskripsi</th>
 <th scope="col">Gambar</th>
 <th scope="col">Action</th>
 </tr>
 <?php do { ?>
 <tr>
 <td><?php echo $row_rsGalery['judul_file']; ?></td>
 <td width="40%"><?php echo nl2br($row_rsGalery['deskripsi_file']); ?></td>
 <td><img src="upload/<?php echo $row_rsGalery['nama_file']; ?>" alt="" name="gambar" width="150" height="100"></td>
 <td><a href="edit_file.php?edit=<?php echo $row_rsGalery['id']; ?>">Edit</a> | <a href="edit_file.php?delete=<?php echo $row_rsGalery['id']; ?>">Delete</a></td>
 </tr>
 <?php } while ($row_rsGalery = mysql_fetch_assoc($rsGalery)); ?>
 <tr>
 <th>Judul File</th>
 <th width="40%">Deskrispsi</th>
 <th>Gambar</th>
 <th>Action</th>
 </tr>
 </table>

<p>&nbsp;</p>
 <form action="<?php echo $editFormAction; ?>" method="POST" enctype="multipart/form-data" name="form1">
 <p>
 <label for="judul_file">Judul file:</label>
 <input name="judul_file" type="text" id="judul_file" size="50">
 </p>
 <p>
 <label for="deskripsi_file">Deskripsi file:</label>
 <textarea name="deskripsi_file" id="deskripsi_file" cols="50" rows="5"></textarea>
 </p>
 <p>
 <label for="nama_file">Upload file:</label>
 <input name="nama_file" type="file" id="nama_file" size="40">
 </p>
 <p>
 <input type="submit" name="submit" id="submit" value="Submit">
 <input type="reset" name="submit2" id="submit2" value="Reset">
 </p>
 <input type="hidden" name="MM_insert" value="form1">
 </form>
<?php } ?>
</div>
</body>
</html>
<?php
mysql_free_result($rsGalery);
?>

edit_file.php

<?php require_once('Connections/koneksi.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
 if (PHP_VERSION < 6) {
 $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
 }
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
 case "text":
 $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
 break; 
 case "long":
 case "int":
 $theValue = ($theValue != "") ? intval($theValue) : "NULL";
 break;
 case "double":
 $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
 break;
 case "date":
 $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
 break;
 case "defined":
 $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
 break;
 }
 return $theValue;
}
}
$colname_rsEdit = "-1";
if (isset($_GET['edit'])) {
 $colname_rsEdit = $_GET['edit'];
}
mysql_select_db($database_koneksi, $koneksi);
$query_rsEdit = sprintf("SELECT * FROM myfile WHERE id = %s", GetSQLValueString($colname_rsEdit, "int"));
$rsEdit = mysql_query($query_rsEdit, $koneksi) or die(mysql_error());
$row_rsEdit = mysql_fetch_assoc($rsEdit);
$totalRows_rsEdit = mysql_num_rows($rsEdit);
$colname_rsDelete = "-1";
if (isset($_GET['delete'])) {
 $colname_rsDelete = $_GET['delete'];
}
mysql_select_db($database_koneksi, $koneksi);
$query_rsDelete = sprintf("SELECT * FROM myfile WHERE id = %s", GetSQLValueString($colname_rsDelete, "int"));
$rsDelete = mysql_query($query_rsDelete, $koneksi) or die(mysql_error());
$row_rsDelete = mysql_fetch_assoc($rsDelete);
$totalRows_rsDelete = mysql_num_rows($rsDelete);
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
 $editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}
if ((isset($_POST["MM_update"])) && ($_POST["MM_update"] == "form1")) {
 //Jika gambar tidak diupdate, maka data gambar tidak diganti
 if(empty($_FILES['nama_file']['name'])) {
 // Kode update data tanpa upload file
 $updateSQL = sprintf("UPDATE myfile SET judul_file=%s, deskripsi_file=%s WHERE id=%s",
 GetSQLValueString($_POST['judul_file'], "text"),
 GetSQLValueString($_POST['deskripsi_file'], "text"),
 GetSQLValueString($_POST['id'], "int"));
 }else{
 // Jika file baru diupload, maka file akan diupload dan database akan diganti dengan file baru
 // File lama juga akan dihapus
 $target = "upload/";
 $hapusfile = unlink($target.$row_rsEdit['nama_file']);
 // Jika proses upload file gagal
 if(!$hapusfile) {
 header("Location: edit_file.php?file=error");
 }
 // File baru diupload
 $target = $target . basename( $_FILES['nama_file']['name']); 
 $updateSQL = sprintf("UPDATE myfile SET judul_file=%s, deskripsi_file=%s, nama_file=%s WHERE id=%s",
 GetSQLValueString($_POST['judul_file'], "text"),
 GetSQLValueString($_POST['deskripsi_file'], "text"),
 GetSQLValueString($_FILES['nama_file']['name'], "text"),
 GetSQLValueString($_POST['id'], "int"));
 // Upload file baru 
 move_uploaded_file($_FILES['nama_file']['tmp_name'], $target);
 } // Akhir dari upload file baru
 mysql_select_db($database_koneksi, $koneksi);
 $Result1 = mysql_query($updateSQL, $koneksi) or die(mysql_error());
$updateGoTo = "upload_file.php";
 if (isset($_SERVER['QUERY_STRING'])) {
 $updateGoTo .= (strpos($updateGoTo, '?')) ? "&" : "?";
 $updateGoTo .= $_SERVER['QUERY_STRING'];
 }
 header(sprintf("Location: %s", $updateGoTo));
}
if ((isset($_POST['hapus'])) && ($_POST['hapus'] != "")) {
 $deleteSQL = sprintf("DELETE FROM myfile WHERE id=%s",
 GetSQLValueString($_POST['hapus'], "int"));
// Hapus gambar dan data sekaligus
 $hapus = unlink($_POST['nama_file']);
 // Jika proses hapus gagal, alihkan ke halaman error
 if(!$hapus) {
 header("Location: edit_file.php?file=error");
 }
 mysql_select_db($database_koneksi, $koneksi);
 $Result1 = mysql_query($deleteSQL, $koneksi) or die(mysql_error());
$deleteGoTo = "upload_file.php";
 if (isset($_SERVER['QUERY_STRING'])) {
 $deleteGoTo .= (strpos($deleteGoTo, '?')) ? "&" : "?";
 $deleteGoTo .= $_SERVER['QUERY_STRING'];
 }
 header(sprintf("Location: %s", $deleteGoTo));
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial Upload File</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
 <h1><a href="http://www.javawebmedia.com">Home</a> | <a href="http://www.javawebmedia.com">Java Web Media</a> | <a href="http://www.javawebmedia.com/course.php">Course</a> | <a href="http://www.javawebmedia.com/contact.php">Contact Us</a></h1>

 <?php if(isset($_GET['edit'])) { ?>
 <h2>Mengupdate gambar</h2>

 <form action="<?php echo $editFormAction; ?>" method="POST" enctype="multipart/form-data" name="form1">
 <p>
 <label for="judul_file">Judul file:</label>
 <input name="judul_file" type="text" id="judul_file" value="<?php echo $row_rsEdit['judul_file']; ?>" size="50">
 </p>
 <p>
 <label for="deskripsi_file">Deskripsi file:</label>
 <textarea name="deskripsi_file" id="deskripsi_file" cols="50" rows="5"><?php echo $row_rsEdit['deskripsi_file']; ?></textarea>
 </p>
 <p>
 <label for="nama_file">Upload file (Biarkan kosong jika tidak ingin mengubah gambar):</label>
 <input name="nama_file" type="file" id="nama_file" size="40">
 </p>
 <p>
 <input type="submit" name="submit" id="submit" value="Update">
 <input name="id" type="hidden" id="id" value="<?php echo $row_rsEdit['id']; ?>">
 <a href="upload_file.php">Cancel</a></p>
 <input type="hidden" name="MM_update" value="form1">
 </form>

 <?php }elseif(isset($_GET['file']) && ($_GET['file']=="error")) { ?>
 <h2 class="warning">Oopss... Terjadi error dalam proses upload file. <a href="upload_file.php">Kembali ke halaman file</a></h2>

 <?php }else{ ?>
 <h2>Menghapus gambar</h2>

 <p class="warning">Yakin ingin menghapus gambar ini?</p>

 <form name="form2" method="post" action="">
 <p>
 <label for="judul_file">Judul gambar:</label>
 <input name="judul_file" type="text" id="judul_file" value="<?php echo $row_rsDelete['judul_file']; ?>" size="50" readonly="readonly">
 </p>
 <p>
 <input type="submit" name="submit" id="submit" value="Hapus gambar">
 <input name="hapus" type="hidden" id="hapus" value="<?php echo $row_rsDelete['id']; ?>">
 <input name="nama_file" type="hidden" id="nama_file" value="upload/<?php echo $row_rsDelete['nama_file']; ?>">
 <a href="upload_file.php">Cancel</a></p>
 </form>
 <?php } ?>
</div>
</body>
</html>
<?php
mysql_free_result($rsEdit);
mysql_free_result($rsDelete);
?>

style.css

body {
 background-color: #063;
 margin: 0px;
 padding: 0px;
}
form {
 background-color: #E7E7E7;
 padding: 20px;
 border: thin solid #CECECE;
 border-radius: 5px;
}
label {
 font-size: 14px;
 font-weight: bold;
 text-transform: capitalize;
 display: block;
}
input {
 padding: 5px 10px;
}
h1 {
 padding-bottom: 10px;
 border-bottom: solid thin #D4D4D4;
 font-size: 18px;
}
a, a:visited {
 text-decoration: none;
}
a:hover {
 color: #900;
}
#wrapper {
 font-family: Tahoma, Geneva, sans-serif;
 background-color: #FFF;
 margin: auto;
 padding: 20px 30px;
 height: auto;
 width: 960px;
 border-right-width: 5px;
 border-right-style: solid;
 border-right-color: #CCC;
 border-bottom-width: 5px;
 border-left-width: 5px;
 border-bottom-style: solid;
 border-left-style: solid;
 border-bottom-color: #CCC;
 border-left-color: #CCC;
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;
}
img {
 max-width: 900px;
 padding: 10px;
 border: solid thin #F9F;
 background-color: #FFC;
 height: auto;
}
.warning {
 background-color: #FCF;
 color: #900;
 padding: 5px 10px;
 border: solid thin #900;
 border-radius: 5px;
}
#header {
 width: 960px;
 height: 100px;
 float: left;
 font-size: 16px;
 padding: 10px 0px;
 margin-bottom: 10px;
}
#header h1 {
 font-size: 20px;
 color: #060;
 border-bottom: none;
}
#navigasi {
 float: left;
 width: 960px;
 height: 40px;
 color: #FFF;
 background-color: #333;
 margin-bottom: 10px;
}
#konten {
 width: 960px;
 height: auto;
 float: left;
 padding-bottom: 20px;
 margin-bottom: 10px;
 border-bottom: solid thin #CCC;
}
#footer {
 text-align: center;
 font-size: 11px;
}
table {
 border: solid thin #090;
 font-size: 12px;
}
th, td {
 text-align: left;
 vertical-align: top;
 border-bottom: solid thin #090;
 padding: 10px;
}
th {
 background-color: #060;
 color: #fff;
 font-weight: bold;
 font-size: 14px;
}

36 comments on “Upload file dan menyimpan lokasi file di database (Basic Dynamic tutorial Dreamweaver) – Part 2

  1. [...] Anda dapat membaca lanjutan dari tutorial ini di: Upload file dan menyimpan lokasi file di database (Basic Dynamic tutorial Dreamweaver) – Part … [...]

  2. Astha says:

    Makasih mas..
    Ini yang saya cari…
    luar biasa sharing nya..

  3. abdullah says:

    Mas bisa bikinkan tutorial poling dengan dreamweaver, soalnya udah nyari di google ketemunya dengan script php, ketika di coba error… Trims

  4. nisri says:

    Om bisa buatin tutorial, leave a reply seperti di atas, karena yang ada biasanya hanya, memberi koment tanpa ada tombol untuk reply atau membalas. Trims

  5. mei prabowo says:

    mas.,.,.,.,
    semisal kalau buat input an ke mysql secara simultan / bersamaan gmn mas .,., ?
    mungkin dalam salah satu kasus di form input nilai siswa berdasarkan kelas.,.,
    saya sering coba tapi gagal mas.,.,.,
    yang bisa ke input cuma satu record saja. ,. , .,
    gmn ya mas.,.,.,.,

  6. yoss says:

    Mas, kalau di form edit ada data dinamis lain yang tidak ingin dirubah gimana geh? Misalnya ada select menu. Dicodingnya if(empty($_FILES['nama_file']['name'])) else if(empty($_POST['jabatan']['text'])) ..dst bisa ga mas..hehe Mohon petunjuknya.. ^^b

  7. yoss says:

    Udah bisa mas,,udah tak coba2 n berhasil..Horee!!!
    Kalau mau menampilkan data di tabel dengan relasi ke tabel lain gimana geh mas?
    Yang mau saya tampilkan tabel karyawan, nah disitu kan ada field id_jabatan. Waktu saya tampilkan tabel karyawan yang muncul tuh id_jab-nya mas, bukan nama jabatannya. Caranya biar bisa memunculkan nama jabatan dari tabel lain gimana ya mas? Trus nnt pakai repeat region juga.. Bingung niee.hhehehe
    Makasih Mas… ^^b

    • Ada beberapa opsi yang bisa dilakukan dalam membuat query SQL. Pertama dengan menggunakan logika WHERE dan yang kedua menggunakan LEFT JOIN. Jika Anda menggunakan recordset dalam membuat query SQL, maka ubah menjadi advanced.

      1. MENGGUNAKAN WHERE
      SELECT karyawan.nama, jabatan.nama_jabatan
      FROM karyawan, jabatan
      WHERE karyawan.id_jabatan = jabatan.id_jabatan
      ORDER BY karyawan.id DESC

      2. MENGGUNAKAN LEFT JOIN
      SELECT karyawan.nama, jabatan.nama_jabatan
      FROM karyawan LEFT JOIN jabatan ON karyawan.id_jabatan = jabatan.id_jabatan
      ORDER BY karyawan.id DESC

  8. yoss says:

    Makasih mas..
    Saya coba Tok Cerrr!!!
    Javawebmedia the best lah..^^b

  9. FIKI says:

    mas,, kenapa ga’ sekalian ngeluarin E-Book aja??

  10. anton says:

    mas, gimana ngebuat postingan menggunakan ckeditor.. tp pas masukin gambarnya, gambarnya langsung bisa otomatis diperkecil agar pas di layar.. soalnya kalo saya masukin gambar yang besar, gambarnya ngelebihi batas postingannya.. jadii hancur..
    tolong dong mass bantuannya.. makasih..

  11. imer says:

    berhasil mas.. tinggal bikin menu galery/album…. ada g tutorx mas

  12. boim says:

    bang, kalo bisa tutorial buat slideshow foto/postingan pakai jquery jg ya..
    soalnya kalo tutorial dari abang, ane lebih mudah ngertinya…
    trims…

  13. akbar says:

    pak.. thank’s atas tutorial dreamweavernya.

    Sy belum lihat, bagaimana untuk membuat deleting/updating multiple records via checkbox di dreamweaver.

    Thank’s

  14. Rama says:

    mas mau tanya nih..
    kalo ngatasin erorr kya gini..
    di Upload file dan menyimpan lokasi file di database (Basic Dynamic tutorial Dreamweaver) – Part 1
    Gmn ya..?! bingung bgt nih..
    Warning: mysql_real_escape_string() expects parameter 1 to be string, array given in C:\xampp\htdocs\project1\controlpanels\galeri.php on line 10
    Column ‘nama_file’ cannot be null

  15. prabowo says:

    ada yang butuh tutorial input record multiple gk.,.?
    ane punya tutorial e ki..,.,.
    hahahhhaha
    input & edit & hapus with checkbox………….
    PM Ane kl pengen……..
    FB : Mei Prabowo

  16. Sulaiman says:

    Mas mau nanya nih, saat proses uploadnya yang part 1 muncul pesan error

    Column ‘nama_file’ cannot be null

    Apa ya solusinya ??

  17. tini says:

    tutorialnya toooop deh.

  18. Irfan says:

    Assalamu’alaikum…

    jujur, saya sangat bertrimakasih banget kpd Mas,berkat tutorial2nya saya jadi bersemangat lagi dech..
    pokoknya tutorialnya sangat bermanfaat dan sangat bagus.. bagus..
    Top markotop … hehe.

    minta izin yah mas untuk download tutorialnya,trimakasih

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Social Widgets powered by AB-WebLog.com.