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,
29
Embed
Coding Membuat Halaman LOGIN Menggunakan MX Dreamweaver
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
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:
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:
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:
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 :
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/"
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.
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
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”);
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.
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];