Tentu kita tidak asing lagi dengan istilah login dalam dunia website. Halaman login sendiri dibuat untuk memberikan akses kepada user agar bisa menikmati fitur/layanan pada website tersebut yang biasanya sering kita temui pada sosial media ataupun e-commerce. Melihat banyaknya ragam desain form login dari tiap website yang menarik, apakah kalian tidak tertarik untuk mencoba membuatnya sendiri? Disini kita akan belajar bagaimana mendesain form login yang simple seperti contoh gambar di halaman cover. Show Apa yang kita butuhkan?
Selanjutnya, kita bisa memulai dengan meng-klik salah satu link pada index berikut : INDEX
Membuat file HTML Pertama-tama, kita harus membuat file html terlebih dahulu yaitu dengan cara :
<!DOCTYPE html>
Bila kita perhatikan nama tab pada tampilan browser seperti gambar di atas, nama tersebut sesuai dengan tag #card { 0 pada file html yang kita buat. #card { 1 disini memang berfungsi untuk menentukan judul dari halaman web yang kita buat dan nantinya akan muncul pada tab browser.Membuat card Selanjutnya, kita akan membuat card atau kotak putih menyerupai kartu yang di depannya akan kita isi dengan tombol dan form
#card { Jangan lupa simpan file setiap kali selesai memperbarui isi file. Apabila kita ingin melihat hasilnya, refresh browser yang kalian gunakan maka akan muncul tampilan seperti berikut : Bila muncul tampilan di atas berarti kita telah berhasil membuat card. Kemungkinan tampilan di browser kalian bisa lebih besar atau lebih kecil dikarenakan resolusi setiap PC berbeda beda. Sekarang mari kita bedah satu per satu maksud dari tiap baris yang baru saja kita tambahkan:
Sekarang kita menentukan warna background dari halaman web untuk mempercantik tampilan.
body { Berikut adalah hasilnya : Teks tersebut merupakan CSS untuk mengubah warna background pada tag #card { 5atau sama dengan mengubah background halaman web kita. Sekarang mari kita pahami makna tiap barisnya :
Kini saatnya untuk memberi judul pada form yang akan kita buat, berikut adalah caranya :
<div id="card-content">
#card-content { Simpan file tersebut setelah menambahkan teks di atas kemudian lakukan refresh pada browser. Kita akan mendapatkan hasil seperti berikut : Selanjutnya kita akan analisa teks CSS baru saja ditambahkan, agar tidak bertele tele kita akan bahas bagian yang belum dijelaskan sebelumnya.
Sekarang kita mulai masuk ke elemen utama dari halaman login yaitu form. Pertama-tama kita akan menambahkan elemen sebelum #card-content { 1 terakhir seperti yang saya jelaskan . Tambahkan teks berikut ini:<form method="post" class="form"> </form> Perlu kalian ketahui, setiap kali kita ingin membuat form maka kita wajib untuk membuat tag <form method="post" class="form"> </form> 8 terlebih dahulu baru kemudian di dalamnya kita tambahkan <form method="post" class="form"> </form> 9 sesuai dengan kebutuhan. <label for="user-email" style="padding-top:13px"> Email</label>0disini menentukan untuk apa form tersebut dan berguna ketika kita telah menambahkan kode PHP dan SQL untuk proses validasi pada saat login, <label for="user-email" style="padding-top:13px"> Email</label>1 berarti form tersebut digunakan untuk mengirimkan data pada database. Dikarenakan tujuan tutorial ini untuk desain, maka kita cukup fokus membahas HTML dan CSS. (: Berikutnya, tambahkan teks berikut di dalam tag <form method="post" class="form"> </form> 8 :<label for="user-email" style="padding-top:13px"> Email</label> Maka kita akan mendapatkan hasil seperti berikut : Tentu saja kita akan mendapatkan tampilan yang sangat berantakan karena disini kita baru saja menambahkan HTML, selanjutnya kita rapikan dan percantik menggunakan CSS. Salin teks berikut ke dalam tag #card { 7:a { Sekarang coba simpan file setelah menambahkan teks tersebut dan lakukan refresh pada browser, maka kita akan mendapatkan tampilan seperti berikut Cantik bukan?
Finally, kita telah sampai pada bagian akhir yang tak kalah penting dalam mendesain halaman login yaitu tombol login itu sendiri. Berikut adalah caranya:
<input id="submit-btn" type="submit" name="submit" value="LOGIN" /><a href="#" id="signup">Don't have account yet?</a> Simpan file tersebut dan lakukan refresh pada browser, kita akan mendapatkan hasil seperti berikut : Apabila telah muncul tampilan tersebut selanjutnya kita lakukan styling menggunakan CSS, salin teks berikut ke dalam tag #card { 7#signup { Perhatikan baris a { 9, <input id="submit-btn" type="submit" name="submit" value="LOGIN" /><a href="#" id="signup">Don't have account yet?</a> 0 merupakan CSS selector yang berguna untuk menerapkan style ketika kita mengarahkan cursor mouse ke elemen tersebut.Bila kita ingin membuat sedikit animasi pada CSS, maka kita perlu membuat 2 style yang berbeda. Pada contoh di atas terdapat style pada <input id="submit-btn" type="submit" name="submit" value="LOGIN" /><a href="#" id="signup">Don't have account yet?</a> 1 dan adapula a { 9. Pada <input id="submit-btn" type="submit" name="submit" value="LOGIN" /><a href="#" id="signup">Don't have account yet?</a> 1 kita membuat style utama pada elemen dengan id tersebut, dan padaa { 9 kita membuat style tambahan ketika cursor mouse diarahkan pada elemen dengan id tersebut. Agar perubahan yang terjadi terlihat mulus maka di dalam <input id="submit-btn" type="submit" name="submit" value="LOGIN" /><a href="#" id="signup">Don't have account yet?</a> 1 kita menambahkan <input id="submit-btn" type="submit" name="submit" value="LOGIN" /><a href="#" id="signup">Don't have account yet?</a> 6yang maksudnya adalah ketika kita mengarahkan cursor mouse ke elemen tersebut akan terjadi transisi dengan durasi 250ms.Untuk memudahkan pemahaman, langsung saja simpan file setelah menyalin teks tersebut dan lakukan refresh pada browser. Coba arahkan cursor mouse kalian pada tombol Login dan perhatikan apa yang terjadi. Source Code Apabila masih ada error pada beberapa langkah tersebut, berikut saya berikan source code lengkap untuk mendesain Login Card. Apa yang dimaksud dengan form login?Form login adalah halaman yang di dalamnya terdapat sebuah inputan untuk memasukan username dan password sebagai akses untuk masuk ke dalam aplikasi.
Langkah langkah membuat Form password?Bagaimana cara membuatnya ?. Buat satu dokumen Google Form. Klik Baru --> Lainnya --> Google Form.. Ganti pertanyaan menjadi (a) Jawaban singkat, (b) Wajib diisikan setting enable, klik menu titik tiga dan klik (c) Validasi respon.. Isi bagian : (a) Pertanyaan dengan kata "Password", pilih (b) Teks, dan pilih (c) Berisi.. Untuk apa kita membuat fitur login?Login disebut juga “logon” atau “sign in” adalah istilah dalam hal keamanan komputer, yakni berupa proses pintu masuk bagi pengguna untuk mengakses sistem komputer. Login dimaksudkan untuk mengatur proses identifikasi. Proses Login minimal terdiri dari username/akun pengguna dan password untuk mendapatkan hak akses.
|