Assalamu’alaykum
warahmatullahi wabarakatuh
Saya akan memberikan tutorial bagaimana cara membuat BUKU TAMU dan DATA KOMENTAR dengan menggunakan Form input
dan output pada SCRIPT HTML
Sebelumnya saya
akan memberi penjelasan sedikit tentang PENGENALAN FORM
A. Komponen Form
Sebuah website dinamis seringkali
memerlukan interaksi antara browser client dan server bisa berupa pemasukan
data teks, angka, atau upload file untuk diproses oleh server. Untuk mewadahi
suatu data yang dikirimkan oleh browser client, dibutuhkan adanya FORM HTML.
Penggunaan
form misalnya untuk pendaftaran keanggotaan, pemasukan kode kartu kredit, login
user, transaksi perbelanjaan, dan upload file.
Dalam
FORM HTML, terdapat beberapa komponen yang bisa digunakan, antara lain :
B. Pengolahan Data Dari Form
Form di HTML
dikenal dengan adanya tag <FORM> dan ditutup dengan tag </FORM>. Di
dalam tag pembuka <FORM> diikuti dengan atribut action dan method. Action
menjelaskan ke h alaman yang digunakan untuk memproses input, sementara method
digunakan untuk mengatur cara mem-parsing konten.
Web menerima input
dari user atau pengunjung menggunakan metode GET dan POST. GET akan mengirimkan
data bersama dengan URL, sedangkan POST akan mengirimkannya secara terpisah.
User mengirimkan data input dengan mengisi teks atau pilihan pada attibut form
html.
Berikut cara membuat Form INPUT dan OUTPUT pada SCRIPT HTML
1.
Buka aplikasi XAMPP, lalu aktifkan.
2. Dan juga buka aplikasi Editor Teks nya. (disini
saya pakai Aplikasi Sublime Text 3)
Untuk download Sublime Text 3 nya silahkan
klik DISINI
Dan muncul seperti ini
Sebelum membuat nya, terlebih
dahulu buat folder yang terletak di :
Local Disk (C: ) > xampp
>htdocs .
Buatlah folder baru bernama
“tugas” pada file folder “htdocs”
3. Setelah itu, untuk memudahkan pengerjaan codingan nya, simpan terdahulu dengan nama file forminputkomentar.php
4. Setelah itu, klik Enter. Maka akan muncul seperti ini.
Mudah
kan? Jadi tidak perlu mengetik manual seperti pada aplikasi Notepad atau
Notepad++
5. Setelah itu, buatlah codingan Form INPUT seperti
ini :
<!DOCTYPE
html>
<<!DOCTYPE html>
<html>
<head>
<title>Input Komentar</title>
</head>
<body>
<form action="tampilkomentar.php"method="post">
<h1>BUKU TAMU</h1>
Komentar dan Saran Anda Sangat Kami Butuhkan<br>
Untuk Meningkatkan Kualitas Situs Kami.
<hr>
<pre>
Nama Anda : <input type="text" name="Nama" size="25" maxlength="50">
Email Anda : <input type="text" name="Email" size="25" maxlength="50">
Komentar : <textarea name="Komentar" cols="50" rows="5"></textarea>
<input type="submit" value="Kirim"><input type="reset" value="Batal">
</pre>
</form>
</body>
</html>
Setelah sudah selesai, Save kembali.
6. Sesudah
buat form input nya. Buatlah form Output nya dengan klik “File” lalu klik “New
File”.
Setelah
itu, save terlebih dahulu dengan nama File tampilkomentar.php
Lalu,
buatlah codingan form OUTPUT seperti ini :
<!DOCTYPE html>
<html>
<head>
<title>Data Komentar</title>
</head>
<body>
<?php
$nama=$_POST['Nama'];
$email=$_POST['Email'];
$komentar=$_POST['Komentar'];
?>
<h1>Data Komentar Anda</h1>
<hr>
Nama Anda : <?php echo $nama; ?> <br>
Email Anda : <?php echo $email; ?> <br>
Komentar : <?php echo $komentar; ?> <br>
<a href="forminputkomentar.php">INPUT DATA LAGI</a>
</body>
</html>
Setelah sudah selesai,
Save kembali.
7. Buka salah
satu web browser seperti Google Chrome, Mozilla Firefox, Internet Explorer
8. Setelah
itu ketik di alamat URL seperti ini
9. Hasilnya
seperti ini :
Form INPUT :
Form input nya saya
kasih contoh isi seperti ini :
Setelah isi FORM nya, lalu klik “Kirim”
Form OUTPUT :
Setelah isi input
an nya, maka output nya akan muncul seperti ini :
Sekian tutorial cara membuat BUKU TAMU dan DATA KOMENTAR
dengan menggunakan Form INPUT dan OUTPUT dengan
menggunakan FORM HTML.
Mohon maaf jika
ada kesalahan kata.
Semoga bermanfaat untuk kalian :)
Semoga bermanfaat untuk kalian :)
Wassalamu’alaykum
warahmatullahi wabarakatuh
Tidak ada komentar:
Posting Komentar