Upload file dan menyimpan lokasi file di database (Basic Dynamic tutorial Dreamweaver) ~ Viscount

Jika Anda menggunakan Dreamweaver Anda mungkin sering stres bagaimana dapat mengupload file lalu menyimpannya ke dalam database sehingga dapat Anda gunakan secara dinamis di web, katakanlah untuk galeri slide show.
Tutorial ini akan membahas bagaimana mengkombinasikan script yang digenerate oleh Dreamweaver lalu mengkombinasikannya dengan script upload file, lalu menyimpan datanya dalam database.
Sebelum masuk ke tutorial ini, pastikan Anda telah mempelajari kedua tutorial ini:

Hal pertama yang Anda butuhkan adalah database MySQL untuk menyimpan data file dan folder untuk menyimpan file yang Anda upload. Folder upload dipilih untuk digunakan sebagai tempat penyimpanan file. Berikut struktur folder penyimpanan file.

Java Web Media: Web Design Company in Depok

Berikut ini adalah tabel MySQL sederhana yang akan digunakan. Sebut saja tabel myfile.

CREATE TABLE IF NOT EXISTS `myfile` (
 `id` int(10) NOT NULL AUTO_INCREMENT,
 `judul_file` varchar(150) NOT NULL,
 `deskripsi_file` varchar(250) NOT NULL,
 `nama_file` text NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Lalu file PHP yang akan Anda gunakan untuk mengupload file, dalam tutorial ini, file disimpan dengan nama upload_file.php. File ini telah dilengkapi dengan form dengan enctype=”multipart/form-data”, form jenis ini mengijinkan Anda untuk mengupload file.

<!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>
 <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:</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>
 </form>
</div>
</body>
</html>

Lalu file CSS yang disimpan dalam folder css, dengan nama 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;
 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;
}

Pastikan Anda telah membuat koneksi database, sehingga folder akan berubah seperti gambar di bawah. File koneksi koneksi.php disimpan dalam folder Connections.

Web Programming Course in Depok

Berikut ini adalah file koneksi.php.

<?php
# FileName="Connection_php_mysql.htm"
# Type="MYSQL"
# HTTP="true"
$hostname_koneksi = "localhost";
$database_koneksi = "tutorial_blog";
$username_koneksi = "root";
$password_koneksi = "";
$koneksi = mysql_pconnect($hostname_koneksi, $username_koneksi, $password_koneksi) or trigger_error(mysql_error(),E_USER_ERROR);
?>

Menyimpan data form ke dalam database

Langkah selanjutnya adalah sebagai berikut:

Java Web Media: A web design company in Depok

Klik menu Windows
Klik Server Behaviors, maka panel Server Behaviors akan muncul di workspace sebelah kanan Anda.
Di bawah panel Server Behaviors Anda akan melihat tombol/icon plus (+). Klik icon tersebut, lalu pilih Insert Record. Jendela Insert Record akan muncul. Jika icon plus tidak muncul, silakan periksa pembuatan site definition dan koneksi database Anda.
Submit values from: form1
Connections: koneksi
Insert table: myfile
Columns, pastikan hanya kolom id yang ‘id’ is unused Primary Key dan lainnya gets value.
After inserting, go to: upload_file.php?file=uploaded
Klik OK untuk menyelesaikannya

Membuat script upload file

Langkah selanjutnya adalah mengkombinasikan script yang digenerate oleh Dreamweaver dengan script upload file.
Ubah workspace Anda ke dalam mode Code View. Anda akan melakukan perubahan kode Insert record yang digenerate oleh Dreamweaver. Ingat dengan perubahan kode, maka Dreamweaver sudah tidak mengenali lagi kode yang digeneratenya.
Cari kode di bawah ini (terletak kurang lebih di baris ke 39).

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

Tekan Enter sebanyak dua kali setelah kode tersebut:
Kode lokasi upload file (yaitu folder upload/) akan diletakkan di bawah kode tersebut. Tambah kode berikut ini

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//

Lalu setelah Query SQL yang semua adalah seperti ini:

$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($_POST['nama_file'], "text"));

Lakukan perubahan pada kode tersebut (pada variable $_POST['nama_file']) dan tambahkan kode untuk mengupload file ke lokasi file yang telah Anda definisikan sebelumnya:

$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)) 
 {

Lalu cari kode di bawah ini (sekitar baris ke-60) yang merupakan halaman pengalihan jika proses sukses:

header(sprintf("Location: %s", $insertGoTo));

Kemudian tekan Enter lalu tambahkan di bawahnya kode berikut ini sehingga menjadi:

header(sprintf("Location: %s", $insertGoTo));
 }else{
 header(sprintf("Location: upload_file.php?file=error"));
 }

Menguji coba script yang Anda buat

Lalu simpan kembali file Anda. Lakukan uji coba upload file. Jika kode Anda benar, maka file yang Anda upload akan masuk ke folder upload dan data tersimpan dalam database MySQL.

Java Web Media: A Web Design Company Depok

File tersimpan dalam folder upload dan data tersimpan dalam database.

Depok

Menampilkan gambar setelah proses upload selesai dan menampilkan pesan error jika terjadi error

Untuk masuk ke tahap ini, Anda harus membuat recordset untuk menampikan data gambar yang baru saja Anda upload. Anda hanya perlu menggunakan logik IF dikombinasikan dengan fungsi $_GET.
Berikut adalah kode query/Recordset (rsGalery).

mysql_select_db($database_koneksi, $koneksi);
$query_rsGalery = "SELECT * FROM myfile ORDER BY id DESC";
$rsGalery = mysql_query($query_rsGalery, $koneksi) or die(mysql_error());
$row_rsGalery = mysql_fetch_assoc($rsGalery);
$totalRows_rsGalery = mysql_num_rows($rsGalery);

Tambahkan kode Recordset (rsGalery) tersebut di atas kode ini:

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

Selanjutnya, ubah kode di area body yang semula seperti di bawah ini:

<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>
 <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>
 </div>

Menjadi seperti di bawah ini:

<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>
 <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 } ?>

Jika gambar muncul

Jika terjadi error

Java Web Media: A web programming course in Depok

Full script:

Java Web Media: Web Design Course Depok

Note: Tutorial ini tidak dilengkapi dengan pembatasan ukuran dan ekstensi file. Anda dapat mengembangkan tutorial ini menjadi lebih advanced.

sumber

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Viscount

Thursday 31 May 2012