Embed Size (px)
DESCRIPTION
website
Citation preview
coding membuat halaman LOGIN menggunakan MX dreamweaver
Dalam aplikasi website, misalnya Facebook.com, ketika Anda berhasil
melakukan log in, maka data diri Anda akan ditampilkan di halaman profil.
Di halaman tersebut, Anda juga dapat melakukan editing profil yang Anda
miliki.
Lalu bagaimanakah caranya kita membuat halaman log in yang setelah kita
berhasil melakukan log in, maka data diri Anda ditampilkan dan dapat
mengubah profil kita seperti contoh Facebook di atas?
Pada tutorial kali ini, Anda akan mempelajarinya.
Sebelum memasuki tutorial ini, pastikan Anda telah:
Membuat Site Definition atau Site Setup untuk Server Model: PHP
MySQL
Anda mampu dan bisa membuat, mengimport, mengeksport database
dan tabel data MySQL. Ini artinya Anda dapat menggunakan
phpMyAdmin
Telah membuat koneksi database MySQL
Ada empat (4) file dan satu (1) tabel data yang akan kita gunakan dalam
tutorial ini. Keempat file tersebut adalah:
1. login.php, sebagai halaman untuk log in
2. login_sukses.php, halaman yang akan terbuka setelah log in berhasil
dilakukan. Di halaman ini juga terdapat link dinamis untuk edit profil
orang yang melakukan log in.
3. login_gagal.php, halaman yang akan terbuka jika proses log in
mengalami kegagalan, misalnya username dan passwordnya salah
4. edit_profil.php, adalah halaman untuk edit profil orang yang log in
Dan berikut adalah tabel data MySQL yang selanjutnya kita sebut
tabel users:
CREATE TABLE IF NOT EXISTS `users` ( `id` int(5) NOT NULL AUTO_INCREMENT, `nama` varchar(50) NOT NULL, `email` varchar(50) NOT NULL,
`username` varchar(32) NOT NULL, `password` varchar(32) NOT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;INSERT INTO `users` (`id`, `nama`, `email`, `username`, `password`) VALUES
(1, 'Andoyo', '[email protected]', 'reghy', 'reghy');
Berikut source code awal dari keempat file di atas dan proses aktivasinya:
login.php<html><head><title>Form Log In</title></head><body><h1>Form Log
In Member: </h1><form name=”form1″ method=”post”
action=”"><p><strong><label>Username: <input type=”text”
name=”username”
id=”username”></label></strong></p><p><label><strong>Password</
strong>:<input type=”password” name=”password”
id=”password”></label></p><p><input type=”submit” name=”submit”
id=”submit” value=”Log
In”></p></form><p> </p></body></html>
Java Web Media
Berikut adalah proses aktivasinya:
1. Buka file login.php melalui Dreamweaver Anda
2. Klik Insert > Data Objects > User Authentication > Log In
User. Window Log In akan keluar. Isikan beberapa parameter berikut
ini.
3. Get input form form: form1
4. Username field: username
5. Password field: password
6. Validate using connection: search_engine (hal ini tergantung dari
nama file connection yang Anda buat)
7. Table: users
8. Username column: username (pilih dengan mengklik pop-up menu)
9. Password column: password (pilih dengan mengklik pop-up menu)
10. If login succed go to: login_sukses.php (pilih dengan
mengklik Browse lalu pilih file login_sukses.php)
11. Beri tanda CHECK pada pilihan Go to previous URL if exist. Menu
ini adalah menu dimana jika Anda membuka sebuah halaman yang
diproteksi password, maka Anda akan dialihkan ke halaman untuk log in.
Setelah Anda melakukan log in, maka Anda akan dialihkan kembali ke
halaman yang diproteksi password sebelumnya Anda buka.’
12. If login failedd go to: login_gagal.php (pilih dengan
mengklik Browse lalu pilih file login_gagal.php)
13. Klik OK jika sudah selesai
14. Simpan kembali file login.php. Lakukan percobaan melalui browser
Anda dengan melakukan log in (ketik alamat
URL http://localhost/search_engine/login.php). Cobalah dengan
melakukan login dengan username: andoyo dan password: andoyo.
Java Web Media
Jika Anda lihat pada Code View maka Anda akan menemukan dua variable
session yang akan digenerate ketika kita melakukan log in. Variable session
tersebut adalah:
1. $_SESSION['MM_Username'] = $loginUsername; (Ini adalah variabel
session untuk menampilkan nama dan profil yang lain)
2. $_SESSION['MM_UserGroup'] = $loginStrGroup; (Ini adalah variabel
session untuk proteksi halaman berdasarkan hak akses)
NOTE: Awalan huruf MM pada kedua variable di atas sebenarnya
adalah singkatan Macromedia (nama pembuat program Dremweaver
sebelum diakuisisi oleh Adobe).
login_sukses.phpLogin_sukses.php adalah halaman yang akan menampilkan nama user yang
melakukan log in dan sekaligus memberi link dinamis yang memungkinkan
user yang melakukan log in untuk mengedit profilnya sendiri.
Berikut source code awalnya:
<html><head><title>Halaman Dashboard</title></head><body><p>Hi
<em><strong>NAMA ANDA</strong></em>, Anda telah berhasil Log In |
<a href=”edit_profil.php”>Edit Profil Anda</a> | <em><strong>Log
Out</strong></em><strong></strong></p><p>Bagian Administrator di
sini</p></body></html>
Berikut adalah langkah-langkahnya.
Membuat Recordset (SessionUser), menampilkan data user dan
menambah link dinamis
1. Buka file login_sukses.php melalui Dreamweaver Anda
2. Klik Insert > Data Objects > Recordset. Window Recordset akan
muncul. Isi beberapa parameter berikut ini.
3. Name: SessionUser, ketik secara manual.
4. Connection: search_engine, bisa jadi berbeda, tergantung dari nama
file connection yang Anda buat.
5. Table: users, pilih dengan mengklik pop-up menu.
6. Columns: All
7. Filter: username, sebelumnya adalah None, pilih dengan mengklik
pop-up menu.
8. URL Parameter, ubahlah menjadi Session Variable, pilih dengan
mengklik pop-up menu. Biarkan tanda sama dengan (=) tetap seperti
semula. Anda tidak harus melakukan perubahan pada bagian ini.
9. username, ubahlah menjadi MM_Username, lakukan dengan
mengetikkannya secara manual (Lihat penjelasan variable session
dalam login.php di atas). Pastikan besar kecilnya huruf sesuai dengan
contoh di atas.
10. Klik OK jika sudah selesai.
11. Klik Bindings > tanda plus (+) pada Recordset (SessionUser)
12. Melalui Design View, seleksi tulisan “NAMA ANDA”
13. Dari Bindings panel, klik dan tahan field/kolom nama (yang
bergambar petir), lalu drag menuju tulisan “NAMA ANDA” tadi. Ini
artinya Anda mengubah static text menjadi dynamic text.
14. Melalui Design View, seleksi tulisan “Edit profil Anda”, lalu klik
kanan > Change Link. Window Select File akan keluar. Cari
pilihan URL dan Parametersyang berada pada bagian bawah dari
Window tersebut.
15. Klik Parameters, maka window Parameters akan muncul. Secara
otomatis muncul menu Name akan berisi teks field.
16. Pada menu Name, ketik id, lalu pada menu Value, klik area putih
segaris dengan tulisan id.
Java Web Media
17. Klik Tanda Petir, maka windowDynamic Data akan keluar.
18. Expand Recordset (SessionUser)dengan mengklik tanda plus (jika
belum diexpand). Lalu pilih id(yang ada tanda petirnya).
19. Klik OK sebanyak tiga (3) kali untuk menyelesaikan proses
pembuatan dynamic link tersebut.
20. Dynamic Link dan menampilkan data user yang log in telah berhasil
Anda lakukan.
21. Simpan kembali file login_sukses.php.
Java Web Media
Menambahkan proteksi halaman dan link log out
1. Buka file login_sukses.php lagi
2. Klik Insert > Data Objects > User Authentication > Restrict Access
To Page.Window Restric Access To Page akan keluar.
3. Restrict access based on: Username and password
4. If access denied, go to: login_gagal.php, klik Browse lalu pilih
filelogin_gagal.php.
5. Klik OK jika sudah selesai
6. Selanjutnya seleksi tulisan “Log Out” ,
7. Klik Insert > Data Objects > User Authentication > Log Out
User. WindowLog Out User akan keluar.
8. Log out when: Link clicked
9. When done, go to: login.php, klik Browse lalu pilih file login.php.
10. Klik OK. Halaman ini telah diproteksi dengan password dan telah
diberi link untuk log out.
11. Simpan file login_sukses.php kembali
edit_profil.phpPada halaman ini, orang yang melakukan log in dapat melakukan
pengeditan profilnya. Berikut adalah basic source code awalnya.
<html><head><title>Edit Profil</title></head>
<body><h1><strong>Edit Profil Anda:</strong></h1><p>Form edit
profil Ada di sini</p><hr/><a href=”login_sukses.php”>Kembali ke
dashboard </a></body></html>
Java Web Media
Berikut langkah-langkah selanjutnya:
1. Buka file edit_profil.php melalui Dreamweaver Anda
2. Buatlah Recordset (SessionUser)seperti pada
halaman login_sukses.php di atas.
3. Proteksi halaman dengan Restrict Access To Page seperti yang telah
dijelaskan pada halaman login_sukses.php di atas
4. Seleksi tulisan “Form edit profil Ada di sini”, lalu hapus.
5. Klik Insert > Data Objects > Update Record > Record Update Form
Wizard. Window Record Update Form akan keluar.
6. Connection: search_engine, klik pop-up menu untuk memilih
7. Table: users, klik pop-up menu untuk memilih
8. Select record from: SessionUser, klik pop-up menu untuk memilih. Ini
adalah Recordset yang telah Anda buat sebelumnya.
9. Unique key column: id, numeric
10. After updating, go to: login_sukses.php, klik Browse untuk
mencari file tersebut.
11. Pada menu Form fields, maka Anda akan melihat Column, Label,
Display As, danSubmit As.
12. Pilih Column yang berisi id, klik id tersebut, lalu klik tanda minus
(-) yang ada di atasnya.
13. Selanjutnya, seleksilah Column yang berisi password, pada Display
as: Password field. Lakukan perubahan tersebut dengan mengklik pop-
up menu yang semula berisiText field. Lalu pada Default value:, klik
tanda petir, jendela Dynamic data akan keluar. Pilihlah Recordset
(SessionUser), lalu pilih field password.
14. Klik OK jika sudah selesai
15. Simpan kembali file edit_profile.php
Java Web Media
Berikut ini adalah hasil pembuatan form edit_profil.php
Java Web Media
login_gagal.phpFile ini hanya berisi link untuk kembali ke halaman log in. Berikut source
code-nya:
<html><head><title>Log In Gagal</title></head>
<body><h1><strong>Anda mengalami kegagalan log
in:</strong></h1><p><a href=”login.php”>Kembali ke halaman log
in</a></p></body></html>
Anda telah berhasil menyelesaikan tutorial ini.
Problem
I want to upload images directly into my MySQL database, rather than into a folder on my website.
Solution
It's normally recommended to store images in the website's file system, rather than in a database, because images bloat the size of database tables and require a proxy script to be displayed. However, if you do want to store images in a database, use the PHP function, file_get_contents(), to store the image data temporarily in a variable, and pass the variable to the SQL query to insert the data into the database.
Detailed explanation
Dreamweaver's PHP server behaviors don't handle file uploads, so you need to do most of the coding yourself. However, to make the SQL query easier to handle, you can create a form with hidden fields representing the columns in your database. There's no need to assign any values to the hidden fields. They're used simply to build the Insert Record server behavior code.
The attached zip file (upload_to_db.zip) contains the code at different stages of development.
Getting ready
This recipe assumes that you have a database table called images with the following columns: image_id (primary key), filename, mimetype, caption, image, width, and height.
The filename and caption columns should be of the VARCHAR data type.
The mimetype column should be an ENUM data type with the following values: 'image/png','image/jpeg','image/gif'. You need to store this value so the browser knows how to display the image when it's retrieved from the database.
The image column should be a BLOB (binary large object) data type.
The width and height columns should both be an INT data type.
Create a form in Dreamweaver with a file field, a text input field for the caption, and hidden fields for filename, mimetype, width, and height (see upload_to_db1.php). Also add the following code inside the form in Code view anywhere before the file field:
<input type="hidden" name="MAX_FILE_SIZE"value="<?php echo MAX_FILE_SIZE; ?>" />
Apply an Insert Record server behavior to the page. As long as you have created the hidden fields, Dreamweaver should automatically create the necessary code for you to adapt. See upload_to_db2.php.
Adapting the Dreamweaver code
The first task is to define the constant MAX_FILE_SIZE to limit the maximum size of files being uploaded. The value needs to be in bytes (1KB = 1024 bytes). To limit the maximum to 50KB, add the following code right at the top of the page (adjust the value to your own requirements):
<?php define ('MAX_FILE_SIZE', 1024 * 50); ?>
Now scroll down to the main part of the Insert Record server behavior code, which looks like this:
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] =="uploadImage")) { $insertSQL = sprintf("INSERT INTO images (filename, mimetype,caption, image, width, height) VALUES (%s, %s, %s, %s, %s, %s)", GetSQLValueString($_POST['filename'], "text"), GetSQLValueString($_POST['mimetype'], "text"), GetSQLValueString($_POST['caption'], "text"), GetSQLValueString($_POST['image'], "text"), GetSQLValueString($_POST['width'], "int"), GetSQLValueString($_POST['height'], "int"));
mysql_select_db($database_testConn, $testConn); $Result1 = mysql_query($insertSQL, $testConn) ordie(mysql_error());}
This is the section that needs to be adapted. Create some blank lines before the line that begins with $insertSQL, and insert the following code:
// make sure it's a genuine file uploadif (is_uploaded_file($_FILES['image']['tmp_name'])) { // replace any spaces in original filename with underscores $filename = str_replace(' ', '_', $_FILES['image']['name']); // get the MIME type $mimetype = $_FILES['image']['type']; if ($mimetype == 'image/pjpeg') { $mimetype= 'image/jpeg'; } // create an array of permitted MIME types $permitted = array('image/gif', 'image/jpeg', 'image/png');
// upload if file is OK if (in_array($mimetype, $permitted) && $_FILES['image']['size'] > 0 && $_FILES['image']['size'] <= MAX_FILE_SIZE) { switch ($_FILES['image']['error']) { case 0: // get the file contents $image = file_get_contents($_FILES['image']['tmp_name']); // get the width and height $size = getimagesize($_FILES['image']['tmp_name']); $width = $size[0]; $height = $size[1]
This checks that the file is a genuine file upload, replaces any spaces in the file name with underscores, gets the MIME type, width and height, and stores the image data in $image. With the exception of the caption, all the values are now stored in ordinary variables, not the $_POST array. So, you need to modify the SQL query created by Dreamweaver like this:
$insertSQL = sprintf("INSERT INTO images (filename, mimetype,caption, image, width, height) VALUES (%s, %s, %s, %s, %s, %s)", GetSQLValueString($filename, "text"), GetSQLValueString($mimetype, "text"), GetSQLValueString($_POST['caption'], "text"), GetSQLValueString($image, "text"), GetSQLValueString($width, "int"), GetSQLValueString($height, "int"));
The rest of the script goes after the line beginning with $Result1. It's important to make sure all the curly braces balance correctly, so the following code extract shows the closing PHP tag immediately above the DOCTYPE declaration:
if ($Result1) { $result = "$filename uploaded successfully."; } else { $result = "Error uploading $filename. Please tryagain."; } break; case 3: case 6: case 7: case 8: $result = "Error uploading $filename. Please try again."; break; case 4: $result = "You didn't select a file to be uploaded."; } } else { $result = "$filename is either too big or not an image."; } }}?>
Finally, add the following code block to the body of the page to display the result of the upload operation:
<?php// if the form has been submitted, display resultif (isset($result)) { echo "<p><strong>$result</strong></p>";}?>
You can also remove the hidden fields for filename, mimetype, width, and height. The final code is in upload_to_db3.php.
For details of how to display your images when they are stored like this, see Display an image stored in a database (PHP).
Pembuatan Form Pendaftaran Dilengkapi Upload File Image/Foto Ke Database Dengan Dreamweaver
Dalam Menampilkan Data Member, terkadang banyak sekali nama yang sama. Untuk membedakan dan mengenalinya kita memerlukan sebuah foto profil yang dapat ditampilkan. Untuk itu maka saya akan membahas cara mengupload file melalui Form Pendaftaran. Contoh tampilan form pendaftaran seperti yang terlihat di samping:
1. Langkah pertama buatlah database dengan nama SCC.2. Sintak SQL nya :
CREATE TABLE IF NOT EXISTS `user` (
`no` int(5) NOT NULL AUTO_INCREMENT,
`nama` varchar(30) DEFAULT NULL,
`email` varchar(40) DEFAULT NULL,
`username` varchar(40) NOT NULL,
`password` varchar(30) NOT NULL,
`id_member` int(3) NOT NULL,
`foto` longblob,
PRIMARY KEY (`no`),
KEY `no` (`no`),
KEY `no_2` (`no`),
KEY `no_3` (`no`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=56 ;
3. Buatlah dua file Php, dengan nama upload.php dan tampil.php. Dan buat pula skript koneksi.4. Buat halaman upload.php, kemudian buatlah recordset dengan nama rsUser. Kemudian buatlah insert record melalui Dreamweaver caranya : Insert -> application Objects -> Insert
record -> Record Insertion Form wizard.5. Cari dan ubah sintak CODE pada file upload.php:if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) {
$insertSQL = sprintf("INSERT INTO user (`no`, nama, email, username, password, id_member, foto) VALUES (%s, %s, %s, %s, %s, %s, %s)",
GetSQLValueString($_POST['no'], "int"),
GetSQLValueString($_POST['nama'], "text"),
GetSQLValueString($_POST['email'], "text"),
GetSQLValueString($_POST['username'], "text"),
GetSQLValueString($_POST['password'], "text"),
GetSQLValueString($_POST['id_member'], "int"),
//GetSQLValueString($_POST['foto'], "text"));
//beri garis miring dua kali atau hapus skript " //GetSQLValueString($_POST['foto'], "text"));" diatas. Kemudian tambahkan Skript berikut: GetSQLValueString($foto = $_FILES['foto']['name'], "text"));
if (strlen($foto)>0) {
//skript upload file:
if (is_uploaded_file($_FILES['foto']['tmp_name'])) {
// posisi folder penampung foto terletak di dalam folder avatar "avatar/"
move_uploaded_file($_FILES['foto']['tmp_name'], "avatar/" . $foto);
}
}
//Skrift Upload Foto Sampai Sini.
6. Buat file Tampil.php, caranya buat recordset dengan nama "rsUser", kemudian buat dinamik tabel dengan dreamweaver. caranya: insert ->application object ->Dinamic Data -> Dinamic table.
7. Jadi struktur file dalam Xampp:htdocs/SCC L Avatar (folder) Upload.php Tampil.php
Tampilan Form Upload File:
.Sekian, semoga bermanfaat. Abstrak
PHP atau PHP: Hypertext Preprocessor merupakan suatu bahasa pemograman yang digunakan dalam membuat suatu website. Cara kerja program php yaitu program ini harus diterjemahkan oleh web-server dahulu sehingga menghasilkan kode html yang dikirim ke browser agar dapat ditampilkan. PHP seringkali digunakan dalam membuat suatu website dinamis, dimana data dapat ditambah, diperbarui, maupun dihapus dengan cepat dan mudah. Selain itu, dengan php ukuran file dari websie cenderung lebih kecil sehingga lebih efisien. Dengan menggunakanscript php, kita dapat membuat suatu form yang dapat mengupload file, baik satu hingga banyak. Dalam artikel ini, akan membahas tentang contoh upload file dan multiple file dengan php.
Latar belakangSeiring dengan majunya zaman, teknologi informasi pun terus maju. Hal ini ditandai dengan mulai merakyatnya “internet” dimasyarakat. Bila dulu orang membuat tugas atau mencari internet biasanya pergi keperpustakaan mencari buku, sekarang kebanyakan orang pergi ketempat yang menyediakan sarana untuk mengakses internet dalam mencari informasi. Hal ini dapat dilihat dari makin menjamurnya warnet maupun tempat – tempat yang menyediakan akses wi-fi gratis. Dan ditempat – tempat itu, bukan hanya orang dewasa namun anak kecil pun sudah dapat menggunakan fasilitas yang ada. Hal ini menunjukkan bahwa kemajuan teknologi tidak hanya berdampak pada orang dewasa namun hingga anak – anak Informasi yang didapat orang melalui internet itu tertulis di suatu website. Website merupakan kumpulan halaman yang menampilkan informasi data teks, data gambar diam atau gerak, data animasi, suara, video dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan halaman (hyperlink).
Website ada 2 yaitu, website dinamin dan website statis. Situs web dinamis merupakan situs web yang secara spesifik didisain agar isi yang terdapat dalam situs tersebut dapat diperbarui secara berkala dengan mudah. Sesuai dengan namanya, isi yang terkadung dalam situs web ini umumnya akan berubah setelah melewati satu periode tertentu. Situs berita adalah salah satu contoh jenis situs yang umumnya mengimplementasikan situs web dinamis. Tidak seperti halnya situs web statis, pengimplementasian situs web dinamis umumnya membutuhkan keberadaan infrastruktur yang lebih kompleks dibandingkan situs web statis. Hal ini disebabkan karena pada situs web dinamis halaman web umumnya baru akan dibuat saat ada pengguna yang mengaksesnya, berbeda dengan situs web statis yang umumnya telah membentuk sejumlah halaman web saat diunggah di server web sehingga saat pengguna mengaksesnya server web hanya tinggal memberikan halaman tersebut tanpa perlu membuatnya terlebih dulu. Untuk memungkinkan server web menciptakan halaman web pada saat pengguna mengaksesnya, umumnya pada server web dilengkapi dengan mesin penerjemah bahasa skrip (PHP, ASP, ColdFusion, atau lainnya), serta perangkat lunak sistem manajemen basisdata relasional seperti MySQL. Struktur berkas sebuah situs web dinamis umumnya berbeda dengan situs web statis, berkas-berkas pada situs web statis umumnya merupakan sekumpulan berkas yang membentuk sebuah situs web. Berbeda halnya dengan situs web dinamis, berkas-berkas pada situs web dinamis umumnya merupakan sekumpulan berkas yang membentuk perangkat lunak aplikasi web yang akan dijalankan oleh mesin penerjemah server web, berfungsi memanajemen pembuatan halaman web saat halaman tersebut diminta oleh pengguna.Oleh karena itu, dalam memperbarui website dibuatlah form – form yan berfungsi sesuai dengan tujuan pembuatannya. Seperti dalam artikel ini akan membahas tentang form upload foto dan multiple file yang digunakan user dalam mengupload atau mengunggah atau menampilkan foto atau file ke website.
Pembahasan 1.Upload foto Sebenarnya dalam upload file sendiri terdapat dua jenis yaitu menyimpan file ke direktori kita dan yang kedua adalah menyimpan file ke database MySQL. Kali ini saya akan menerangkan bagaimana caranya upload dan
download file dan menyimpannya ke direktori kita. Dan pada artikel ini, saya menggunakan macromedia dreamweaver 8. Langkah pertama kita akan membuat table yang berfungsi untuk menyimpan data dari file yang akan di upload. Kenapa data dari file tersebut harus disimpan? tujuannya adalah agar memudahkan dalam melakukan download.
Buatlah tabel dengan nama tabel_foto
CREATE TABLE "tabel_foto" ( "id" int(11) NOT NULL auto_increment, "name" varchar(30), "type" varchar(40), "size" int(11), "path" varchar(20),
PRIMARY KEY ("fileid"));
Selanjutnya kita akan membuat file koneksi.php untuk koneksi ke database MySQL <?php $db_hostname=”localhost”; $db_username=”root”; // username anda $db_password=””; // password anda $db_name=”foto”; // nama database anda function connect_db(){ global $db_hostname, $db_username, $db_password, $db_name; $conn = mysql_connect($db_hostname, $db_username, $db_password) or die ("Sorry cannot connect to the database because: " . mysql_error());; mysql_select_db($db_name); } ?> Kemudian kita buat form untuk upload file. Simpan file tersebut dengan nama form_upload.php <html>
<head><title>Upload</title></head> <body><font align=center><h2>Form Upload</h2></font> <form action=”upload.php” method=”post” enctype=”multipart/form-data” name=”uploadform”><table align=center><tr> <td>File</td><td><input name=”userfile” type=”file”></td></tr><tr><td></td><td><input name=”tombol” type=”submit” value=”Upload”></td></tr></table></form> </body> </html> Selanjutnya buatlah file upload.php untuk menyimpan data file ke tabel upload. Di dalam file upload.php terdapat variable $uploadDir, variable ini berisi path / folder yang berfungsi untuk menyimpan file yang telah di upload. Untuk itu ubah hak akses folder tersebut agar bisa di isi file. <?php
require_once(”koneksi.php”); //memanggil file database.php
connect_db(); // memanggil fungsi connect_db yang ada di file koneksi.php
if($_POST[”tombol”]) {
$fileName = $_FILES['userfile']['name']; $tmpName = $_FILES['userfile']['tmp_name']; $fileSize = $_FILES['userfile']['size']; $fileType = $_FILES['userfile']['type'];
$uploadDir = 'C:/apache2triad/htdocs/upload/'; $filePath = $uploadDir . $fileName; $result = move_uploaded_file($tmpName, $filePath); if (!$result) { $error_message=”Error uploading file”; include(”admin_error.php”); } if(!get_magic_quotes_gpc()) { $fileName = addslashes($fileName); $filePath = addslashes($filePath); } $query = ”INSERT INTO tabel_foto(nama,type,size,path) VALUES ('$fileName', '$fileType', '$fileSize', '$fileName')”; $result=mysql_query($query); if($result){ echo ”upload file berhasil dilakukan <br> <a href='daftar_file.php'>Daftar File</a>”; } else{
echo ”<br>File can } }
?>
Selanjutnya kita akan membuat file dengan nama daftar_file.php. File ini digunakan untuk menampilkan data yang di inputkan oleh user. <html> <head><title>Daftar File</title></head> <body> <?php require_once(”koneksi.php”); connect_db(); $query=mysql_query(”SELECT * FROM tabel_foto”);
$row=mysql_fetch_row($query);
if(!$row) echo ”tabel upload kosong”; else { echo ”<h2>Daftar File</h2>”; echo ”<table border=1>”; echo ”<tr>”; echo ”<td>Nama File</td>”; echo ”<td>Type</td>”; echo ”<td>Size</td>”; echo ”<td>Download</td>”; echo ”</tr>”;
do { list($fileid,$filename,$type,$size,$path)=$row; echo ”<tr>”; echo ”<td>$nama</td>”; echo ”<td>$type</td>”; echo ”<td>$size</td>”; echo ”<td><a href=download.php?fileid=$fileid>Download</a></td>”; echo ”</tr>”; } while($row=mysql_fetch_row($query)); }
?> </body></html>
Selanjutnya kita akan membuat file download.php untuk melakukan download. <?php require_once("koneksi.php");connect_db();if(isset($_GET[fileid])) { $id = $_GET[fileid]; $query = "SELECT * FROM tabel_foto WHERE fileid = $id"; $result = mysql_query($query) or die(Error, query failed); list($fileid,$filename,$type,$size,$path)=mysql_fetch_array($result); header("Content-Disposition: attachment; filename=$filename"); header("Content-length: $size"); header("Content-type: $type"); readfile("upload/$path"); } ?> Selanjutkan kita akan membuat file delete.php untuk menghapus file <? require_once("koneksi.php"); connect_db(); if(isset($_GET[fileid]))
{ $id = $_GET[fileid];
$query = "SELECT * FROM tabel_foto WHERE fileid = $id"; $result = mysql_query($query) or die(Error, query failed); list($fileid,$filename,$type,$size,$path)=mysql_fetch_array($result); unlink("upload/$path"); mysql_query("delete from upload where fileid=$id"); header("location:./daftar_file.php");
} ?>
2. Upload Multiple File
Bila kita ingin mengupload banyak file dengan aplikasi upload untuk satu file seperti contoh pertama tentu saja cukup menyulitkan. Oleh karena itu kita perlu memodifikasi aplikasi tersebut agar bisa mengirimkan banyak file dalam satu kali upload. Tentu pekerjaan kita akan lebih ringan apabila kita bisa mengupload banyak dokumen sekaligus dengan sekali klik saja. Disamping lebih praktis, cara ini juga bisa menghemat bandwidth Internet. Kita bisa membuat aplikasi web untuk mengupload multiple file dengan cara menyimpan informasi file yang akan kita upload tersebut dalam suatu variabel array. Tekniknya cukup mudah, yaitu dengan menambahkan tanda kurung siku atau [] di belakang nama tag input pada form yang kita buat.
Contohnya bisa kita lihat pada cuplikan kode program di bawah ini. <form action="upload.php" method="post" enctype="multipart/form-data"> <p><input name="userfile[]" type="file" /></p> <p><input name="userfile[]" type="file" /></p> <p><input name="submit" type="submit" value="Upload" /></form>
Ketika kita mengklik tombol Upload, secara otomatis semua file yang kita kirimkan akan disimpan dalam variabel array $_FILES['userfile']. Hampir sama dengan aplikasi sebelumnya bukan? Bedanya cuma terletak pada nama tag input saja.
Lalu sekarang bagaimana cara menangani data di sisi server? Tidak jauh beda dengan aplikasi sebelumnya. Hanya saja, pada kasus ini data yang dikirimkan tidak hanya satu tapi ada beberapa buah data (pada contoh ini ada dua) yang semuanya disimpan dalam variabel $_FILES['userfile'].
Tentu Anda masih ingat bahwa array $_FILES itu sendiri sebenarnya berisi beberapa informasi terkait dengan file atau dokumen yang kita upload. Array $_FILES tersebut merupakan array majemuk yang terdiri dari: $_FILES['userfile']['name'] Array ini berisi nama sebenarnya (asli) dari file atau dokumen yang tersimpan di komputer user sebelum file tersebut diupload ke server.
$_FILES['userfile']['tmp_name']
Array ini berisi nama file temporer dari file atau dokumen yang diupload. Lokasi file ini ada di direktori temporer pada web server.
$_FILES['userfile']['size']
Array ini berisi informasi berapa ukuran (dalam byte) file atau dokumen yang diupload.
$_FILES['userfile']['type']
Array ini berisi MIME type dari file atau dokumen yang diupload, misalnya image/jpeg, image/png, image/gif, text/plain, dan sebagainya.
Untuk kasus aplikasi upload multiple file seperti yang kita buat ini, array $_FILES di atas bisa kita akses dengan menggunakan indeks bilangan yang menunjukkan urutan dari file yang kita upload. Sebagai contoh, jika file yang kita upload tersebut adalah foto1.jpg dan foto2.jpg maka informasi nama file tersebut akan tersimpan di array $_FILES dengan struktur sebagai berikut.
$_FILES['userfile']['name'][0] = 'foto1.jpg';$_FILES['userfile']['name'][1] = 'foto2.jpg';
Selanjutnya, kita bisa menyimpan file tersebut dengan cara yang sama seperti pada aplikasi sebelumnya. Berikut ini adalah contohnya. $jumlah_file = count ($_FILES['userfile']['name']);$path = pathinfo($_SERVER['PHP_SELF']);for ($i = 0; $i < $jumlah_file; $i++){ $tmp_file = $_FILES['userfile']['tmp_name'][$i]; $filetype = $_FILES['userfile']['type'][$i]; $filesize = $_FILES['userfile']['size'][$i];
$filename = $_FILES['userfile']['name'][$i]; $destination = $path['dirname'] . '/data/' . $filename; move_uploaded_file($tmp_file, $_SERVER['DOCUMENT_ROOT'] . $destination);}
