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:
- Membuat Site Definition di Dreamweaver CS5, dan
- Membuat koneksi database PHP MySQL dengan Dreamweaver CS5
- 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.
Struktur file
Pada tutorial kali ini, Anda akan bekerja dengan 2 (dua) file PHP, yaitu:
- 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)).
- File style.css untuk membuat tampilan jadi lebih menarik.
- 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.
- Klik Insert > Table
- 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.
- Klik OK. Table baru akan muncul di lembar kerja Anda.
- Lalu ketik Judul file, Deskripsi, Gambar dan Action pada masing-masing kolom table. Lihat gambar.
- Tambahkan tulisan Edit | Delete pada kolom terakhir baris dua.
- Simpan kembali hasil pekerjaan Anda
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.
- 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.
- Drag/klik tahan kolom id ke tabel kolom pertama baris kedua. Lalu drag juga kolom deskripsi_file ke kolom kedua baris kedua. Lihat gambar.
- Lalu letakkan kursor Anda pada kolom gambar (baris ketiga kolom kedua).
- Klik Insert > Image Objects > Image Placeholder. Jendela Image place holder akan muncul.
- Pada menu Name: gambar. Lalu Width: 150 dan Height: 100. Klik OK
- Ubah lembar kerja Anda menjadi Code View, lalu cari kode berikut ini:
Kode: <img src=”” alt=”” name=”gambar” width=”150″ height=”100″> - Modifikasi kode tersebut menjadi:
<img src=”upload/<?php echo $row_rsGalery[‘nama_file’]; ?>” alt=”” name=”gambar” width=”150″ height=”100″> - 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.
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:
- <input type=”hidden” name=”id” id=”id”>: adalah primary key yang akan diupdate. Terdapat dalam form Update gambar.
- <input type=”hidden” name=”hapus” id=”hapus”>: adalah primary key data yang akan dihapus. Terdapat dalam form Hapus gambar.
- <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.
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):
- Klik Insert > Data Objects > Recordset. Jendela Recordset akan muncul.
- Name: rsEdit
- Connection: koneksi
- Table: myfile
- Columns: All
- Filter: id. Lalu pada tulisan id, ubah menjadi edit.
- Klik OK
Membuat Recordset (rsDelete):
- Klik Insert > Data Objects > Recordset. Jendela Recordset akan muncul.
- Name: rsDelete
- Connection: koneksi
- Table: myfile
- Columns: All
- Filter: id. Lalu pada tulisan id, ubah menjadi delete. PERHATIKAN BAGIAN INI
- Klik OK
Langkah selanjutnya adalah menampilkan data yang akan diedit ke dalam form update. Berikut langkah-langkahnya:
- Ubah workspace Anda menjadi Design View. Lalu fokuskan pada form update.
- Klik pada input Judul file sampai di menu Properties muncul tanda petir. Lihat Gambar.
- Klik gambar petir tersebut. Lalu expand recordset (rsEdit) dengan mengklik ikon plus (+).
- Klik kolom judul_file dari Recordset (rsEdit).
- Klik OK. Lakukan langkah yang sama pada input Deskripsi file.
- Biarkan kosong pada form/input Upload file.
- Klik pada input hiddenfield yang bernama id. Lalu klik tanda petir pada menu Properties. Pilih kolom id dari Recordset (rsEdit). Klik OK
- 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).
- Arahkan workspace Anda pada form hapus file
- 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.
- Klik input hiddenfield hapus, klik tanda petir yang ada di panel Properties. Lalu lalu pilih kolom id.
- Klik pada input hiddenfield nama_file, klik tanda petir yang ada di panel Properties. Lalu pilih kolom nama_file.
- 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’]; ?>”>
- 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’]; ?>”>
- 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.
- Klik Insert > Data Objects > Update Record > Update Record. Jendela Update Record akan muncul.
- Submit value from form: form1
- Connection: koneksi
- Update table: myfile
- Columns:, pastikan semua kolom GETS VALUE
- After updating, go to: upload_file.php
- Klik OK.
- 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.
- Klik Insert > Data Objects > Delete Record. Jendele Delete record akan keluar.
- First check if variable is defined: Primary key value
- Ketik form2 pada textfield/input yang ada di sampingnya
- Pastikan data yang akan dihapus adalah dalam tabel myfile
- Table: myfile
- Primary key column: id
- Primary key value: form variable (secara default adalah URL Parameter, ubah menjadi form variable).
- Ubah tulisan id menjadi hapus.
- After deleting, go to: upload_file.php
- Klik OK
- 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>
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> </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; }
Makasih mas..
Ini yang saya cari…
luar biasa sharing nya..
Sama-sama. Semoga menjadi manfaat.
Mas bisa bikinkan tutorial poling dengan dreamweaver, soalnya udah nyari di google ketemunya dengan script php, ketika di coba error… Trims
Hehehe… Mudah-mudahan jika nanti ada banyak waktu luang
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
Haha…. Kenapa ga pake engine blog aja mas? Mudah2an jika ada waktu luang saya buat tutorialnya.
soalnya mau tau caranya buat step by step dengan dreamweaver. Trims
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.,.,.,.,
menggunakan fuction wizard
// orang jawa bilang //
“ngakali li ne”
menyettingnya supaya recordnya bisa masuk semua
mohon pencerahan nipun.,.,.,.,.,
_^
Haha… Harus gunakan array() mas untuk proses inputnya. Mudah-mudahan nanti bisa ditampilkan dalam satu tutorial sendiri…
saya tunggu mas.,.,.,.
hheheheheh
^_^
mksih sebelum e.,.,.,.,
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
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
Makasih mas..
Saya coba Tok Cerrr!!!
Javawebmedia the best lah..^^b
mas,, kenapa ga’ sekalian ngeluarin E-Book aja??
Hihi… Belum sempat nulis seriusnya mas. Sibuk banget… Dipanggil ngisi pelatihan di sana-sini…
okelah mas klo kayak gitu..
tetap semangat aja n tetap derwawan… :-)
dtunggu ilmu2 selanjutnya…
okelah mas klo kayak gitu..
tetap semangat aja n tetap dermawan… :-)
dtunggu ilmu2 selanjutnya…
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..
Silakan baca di tutorial Aplikasi Form Berita: Installasi CKEditor dan KCFinder (Text Editor WYSIWYG dan File Manager): http://javawebmedia.com/blog/wp-admin/post.php?post=348&action=edit
berhasil mas.. tinggal bikin menu galery/album…. ada g tutorx mas
Hehe… sabar yah. Rencana mau dibuat juga tutorialnya…
bang, kalo bisa tutorial buat slideshow foto/postingan pakai jquery jg ya..
soalnya kalo tutorial dari abang, ane lebih mudah ngertinya…
trims…
pak.. thank’s atas tutorial dreamweavernya.
Sy belum lihat, bagaimana untuk membuat deleting/updating multiple records via checkbox di dreamweaver.
Thank’s
Belum sempat bikin tutprialnya… Perlu customisasi yg lumayan banyak dengan hand coded/
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
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
tapi ya……………..
tutorail minimalis.,.,.,.,
hahahaa
^_^
tapi yang penting bisa di eksekusi lah.,.,.,
kl banyak kekurangan tlng di perbaiki lah….
http://www.4shared.com/file/yYqs8j-T/multiple.html
jangan lupa baca read me nya ya………
^_^
http://www.4shared.com/office/Mana5Fjn/read_me.html
Mas mau nanya nih, saat proses uploadnya yang part 1 muncul pesan error
Column ‘nama_file’ cannot be null
Apa ya solusinya ??
Anda belum mengupload file mas. Kemungkinan kedua, nama input file Anda salah
tutorialnya toooop deh.
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
mas mau tanya ni
kalau mau menyimpan verifikasi captcha ke dalam database itu gimna yaa?
Malam mas,mau tanya ni… di saat pemanggilan gambar. terjadi eror cannot be null… kalau salah nama inputan filenya? dong solusinya?? terima kasih mas…
Mas saya suddah praktekan ini , dan berhasil,,
yang jd pertanyaan bagaimana cara mendonlod hasil uploadnya,, mohon bantuaanya mas,, klo memang berkenan sekalian source code nya kirim ke email juga ya,,,
your are the best…..
makasih…
Permisi Pak guru & kawan2 semua. ane mau tanya kok pas proses edit keluar tulisan ini ya
You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ‘WHERE id=1’ at line 1
Kira2 apanya yang salah.?
Jadi kalo mau edit Judul gambar dan deskripsi gambar mesti di upload juga gambarnya.
Kalo proses tambah dan hapus udah beres cuma kendala di edit saja. apakah ada yg salah pada script nya
atau SQL ane yg bermasalah.?
Mohon petunjuknya pak.
Upload file dan menyimpan lokasi file di database (Basic Dynamic tutorial Dreamweaver) – Part 2 – Blog Java Web Media
agiwdmigs
giwdmigs http://www.gn868nd6z8qjk1v3wwnh00l2359s93q0s.org/
[url=http://www.gn868nd6z8qjk1v3wwnh00l2359s93q0s.org/]ugiwdmigs[/url]