Pada artikel ke 2 ini akan dibahas bagaimana cara membuat tampilan login dan prosesnya, setelah sebelumnya sudah dibahas bagaimana cara membuat struktur tabel pada database aplikasi absensi online sederhana. Baik, langsung saja ke pembahasan,

1. Struktur Folder Project

Untuk struktur folder project, bagi anda pengguna windows dapat membuat folder bernama absensi di dalam folder htdocs. sebelumnya, pastikan anda menginstal enviroment yang dibutuhkan seperti ini,
– PHP 7 (Bukan PHP 5)
– MariaDB sebagai database yang sebelumnya adalah MySQL
– Apache sebagai Web Server

Semua sudah satu paket dalam aplikasi XAMPP.

2. Membuat Tampilan Login Menggunakan Bootstrap 4

Untuk membuat Tampilan Login kita menggunakan Bootstrap 4, versi Bootstrap yang terbaru. Apa itu bootstrap? Bootstrap adalah framework atau kerangka kerja yang sudah dibuat dalam bentuk css yang berfungsi untuk membuat tampilan web menjadi lebih baik dan efisien tanpa memikirkan membuat css sendiri.

Nah untuk desain halaman login, kita akan membuat seperti ini.

Tampilan Login Aplikasi Absensi Sederhana Bootstrap 4

Tampilan Login Aplikasi Absensi Sederhana Bootstrap 4

Bagaimana cara membuat halaman login tersebut?

Buat file dengan nama login.php di folder project kita, yaitu folder absensi

Buat folder bernama assets juga di folder project tersebut dan isi folder assets adalah folder css dan isi folder css adalah file css, namanya login.css, strukturnya seperti berikut.

Struktur Folder Projek Login

Struktur Folder Projek Login

Kemudian, isi dari masing-masing file login.php dan login.css adalah sebagai berikut:

1. Login.php

Membuat Tampilan Login Sederhana Menggunakan Bootstrap 4

Membuat Tampilan Login Sederhana Menggunakan Bootstrap 4

Diatas adalah kode untuk tampilan halaman login, tag adalah bawaan dari html yang berfungsi untuk mengatur web itu seperti apa. contoh tag adalah div, button, label, input, form yang masing masing mempunyai fungsi yang berbeda.  attribut class didalam tag mempunyai fungsi memberikan tampilan yang sebelumnya sudah dibuat di css, contohnya adalah class form-group yang sebelumnya sudah dibuat oleh bootstrap. jika anda mempunyai web browser seperti chrome/firefox bisa mencobanya, caranya arahkan kursor ke elemen yang akan dicari, misalnya input. disana ada class bernama form-control. setelah diarahkan, klik kanan lalu inspect elemen. lalu sifat-sifat dari class form-control tersebut akan muncul seperti ini.

 

Cara Kerja CSS

 Cara Kerja CSS

Terlihat disisi kanan sudah ada sifat-sifat dari css tersebut.

 

2. Login.css

CSS Login

CSS Login

Untuk css, berfungsi mengatur tampilan web. Seperti memberikan warna, mengatur panjang atau lebar dan sebagainya.

 

Jika sudah menambahkan kode kode seperti diatas, sekarang bisa menjalankan apakah tampilannya sesuai atau tidak, caranya akses browser anda dan ketikan http://localhost/absensi/login.php jika berhasil, maka tampilannya akan seperti ini

Tampilan Login dengan Boostrrap 4

Tampilan Login dengan Boostrrap 4

 

jika anda isikan username,password dan di submit pada form login tersebut maka tidak akan berjalan dan mengarah ke halaman localhost/absensi/system/login.php, karena kita belum membuat proses selanjutnya dari tampilan login . untuk selanjutnya, kita akan belajar membuat  koneksi ke database dan proses login itu seperti apa.

Caranya adalah,

  1. Membuat Koneksi ke Database Studi Kasus Aplikasi Absensi Sederhana
  2. Membuat Proses Login Studi Kasus Aplikasi Absensi Sederhana.

Untuk masing-masing cara saya akan membahasnya di lain kesempatan, supaya pembahasannya agak ringan. mungkin itu dulu yang bisa saya sampaikan, sampai jumpa di kesempatan lain dan tetap mengunjungi blog ini ya.