Cara Membuat Form Login dan Register

-


 

#Cara Membuat Form Login dan Register

Pada kesempatan ini kita akan belajar Cara Membuat Form Login dan Register. Form atau formulir adalah bagian yang sangat penting dari sebuah aplikasi. dimana formulir berfungsi sebagai antarmuka pengguna untuk berinteraksi dengan aplikasi atau sistem informasi. Formulir mempunyai elemen-elemen yang dapat di isi atau di klik. Elemen tersebut sering disebut widget atau screen control. Contoh elemen formulir seperti input text (textBox) select (comboBox), radio button, button, text atrea dan lain-lain.

#Form Login

Form login atau sering disebut halaman berfungsi untuk memastikan pengguna yang mengakses sistem adalah orang yang memiliki hak akses sah saja.




// login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
</head>
<body>
<form method="GET" action="login.html">
<table align="center" style="background-color: gold; padding: 10px">
<caption><h4>LOGIN</h4></caption>
<tr>
<td><label>Username:</label></td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td><label>Password:</label></td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td><button type="submit">Login</button></td>
<td><a href="register.html"><button type="button">Register</button></a></td>
</tr>
</table>
</form>

</body>
</html>

Pada kode html di atas. tag <form> membungkus tag-tag elemen form. pada tag form terdapat dua atribut penting yaitu:
  1. method
  2. action
Atribut method berguna untuk menentukan method yang digunakan. Contoh method tersebut adalah GET atau POST. Sedangkan atribut action berisi alamat tujuan formulir dikirimkan (URL).

Tag <input> adalah elemen form yang bentuk nya sesuai dengan atribut type. jika atribut type adalah text. maka hasil nya nanti adalah sebuah textbox yang dapat di input text. Sedangkan jika typenya adalah password maka hasilnya nanti adalah sebuah textbox berjenis password. Value dari type lainya adalah email, number, radio, checkbox dan lain-lain.

Tag <button> adalah elemen form yang menghasilkan tampilan tombol. Ada dua jenis tombol yang biasanya ada pada formulir. Tombol tersebut yakni type submit dan type button. Untuk tombol berjenis submit merupakan tombol spesial. Tombol tersebut berfungsi menjalankan aksi pengiriman formulir. Sedangkan tombol bertipe button adalah tombol yang sering dijadikan link.

#Form Register

Form register merupakan formulir yang digunakan untuk mendaftarkan diri menjadi anggota di dalam sebuah sistem. Nantinya jika disetujui maka pengguna tersebut memiliki hak untuk mengakses sistem.


// register.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Register</title>
</head>
<body>
<form method="GET" action="register.html">
<table align="center" style="background-color: gold; padding: 10px">
<caption><h4>REGISTER</h4></caption>
<tr>
<td><label>Nama:</label></td>
<td><input type="text" name="nama"></td>
</tr>
<tr>
<td><label>Alamat:</label></td>
<td><textarea name="alamat"></textarea></td>
</tr>
<tr>
<td><label>Jenis Kelamin:</label></td>
<td><input type="radio" name="gender" value="L">Laki-Laki
<input type="radio" name="gender" value="P">Perempuan
</td>
</tr>
<tr>
<td>Negara</td>
<td>
<select>
<option value="0">Pilih</option>
<option value="Indonesia">Indonesia</option>
<option value="Malaysia">Malaysia</option>
<option value="99">dll</option>
</select>
</td>
</tr>
<tr>
<td><label>Email:</label></td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td><label>Username:</label></td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td><label>Password:</label></td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td><button type="submit">Simpan</button></td>
<td><a href="login.html"><button type="button">Kembali</button></a></td>
</tr>
</table>
</form>

</body>
</html>

Secara umum form ini mirip dengan sebelumnya. kaidah yang harus dipahami pemula adalah:
  1. Bungkus semua tag elemen form ke dalam tag <form> dan </form>
  2. Sebuah form minimal memiliki satu button berjenis submit
  3. Atribut penting tag form yaitu method dan action
  4. Atribut penting elemen form yaitu type, name dan value (jika jenis input pilihan seperti radio dll)
Jika method nya adalah GET maka data yang dikirim bisa terlihat di url. Atribut GET pada tag  <form> akan menjadi variabel array sehingga sifatnya case sensitive. Sedangkan atribut name pada elemen form akan menjadi index variabel GET tersebut. Sehingga keduanya case sensitive. Contoh mengambil data tersebut dalam php.

<?php
echo $_GET['nama'];
?>

Kode php di atas menampilkan apa yang diinputkan pengguna pada inputan nama menggunakan perintah echo. Dalam hal ini kita sudah belajar konsep input proses dan output. Terima kasih sudah membaca sampai selesai. Jangan lupa dukung channel youtube kami dengan klik tombol subscribe.

Popular posts from this blog

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman

-
Image
Link adalah bagian dari HTML yang fungsinya untuk menghubungkan satu halaman dengan halaman lain. Link juga bisa diartikan sebagai cara berpindah dari satu halaman ke halaman lain. 1. Link ke Halaman Lain Tag yang digunakan untuk membuat link adalah tag anchor atau tag <a> , yang berpasangan dengan </a> . Link biasanya menggunakan objek untuk di klik yang di letakkan diatara tag buka dan tag tutup. Teks Tombol (Button) Gambar Ketiga objek di atas sering dijadikan link, dan tidak ada kategori yang paling sering digunakan. Mimilih teks, tombol, atau gambar sebagai link sangat opsional atau tidak ada keharusan. Format link <a href="url" name="nama_link"> Objek Link </a> 1.1. Contoh Link Dengan Objek Teks <!--nama file link.html--> Untuk ke halaman selanjutnya <a href="link2.html">Klik disini</a> Teks klik disini jika di klik halaman akan berpindah ke link2.html. Pada conto
Read more

Cara Menggunakan Template Admin LTE Sebagai Template Web Dinamis

-
Image
Kali ini saya akan membuat tutorial bagaimana menggunakan template gratis sebagai template web dinamis. Pertama anda download terlebih dulu templatenya disini . Pada tutorial ini saya menggunakan template admin LTE 2. Pada template ini saya memecah bagian index.php dan menyatukan kembali dengan include, tujuannya agar template terbagi-bagi dan mudah dipahami. Selain itu, pembagian ini lah yang membuat web menjadi dinamis. Perlu diingat cara saya ini bukanlah cara satu-satu nya Cara Menggunakan template Admin LTE Sebagai Template Web Dinamis . Cara ini saya sharing karena menurut saya adalah cara yang cukup efisien dan mampu menangani semua halaman yang akan kita buat. Bagian terpenting nya adalah mampu menghasilkan program sesuai yang kita harapkan dengan cara yang lebih mudah dibuat. Pertama kita buat folder di htdocs template kemudian ekstrak file zip nya di folder tersebut. Selanjutnya buka folder template dan rename file index.html menjadi index.php  . Buka file
Read more

Cara Membuat Kalkulator Dengan Java Script

-
Image
Kali ini saya akan membagikan tutorial cara membuat kalkulator sederhana dengan java script. Kita ketahui java script adalah bahasa pemrograman klien. Artinya kode program dapat dilihat dari web browser. Kelebihan bahasa java script ini halaman tidak perlu reload. <!--nama file calc.php--> <!DOCTYPE html> <html> <head> <title>Calculator</title> <style type="text/css"> .tombol{ background-color: deepskyblue; } .tabel{ background-color: gold; margin: 10px; padding: 10px; } </style> </head> <body> <form name="calculator"> <table style="background-color: " class="tabel"> <caption>Calculator</caption> <tr> <td>Angka 1</td><td>:</td><td><input type="number" name="angka1"></td> </tr> <tr> <td>Angka 2</td&
Read more