PERTEMUAN KE-6 dan 7 Registrasi, LogIn, LogOut

Capaian Pembelajaran
Mahasiswa mampu memahami dan mendemontsrasikan cara membuat registrasi, LogIn dan LogOut pada Website menggunakan Bahasa pemrogramanan PHP

Bahan Pokok Pembelajaran
1. Registrasi

2. LogIn

3. LogOut

4. Demo Proyek

5. Tugas

Indikator Penilaian

Ketetapan mahasiswa dalam menangani bahan dari pokok pemebelajaran

1. Pengertian Registrasi

Menurut Kamus Besar Bahasa Indonesia (Registrasi, KBBI), registrasi merupakan sebuah pencatatan atau pendaftaran. Dari dua definisi di atas, dapat diartikan bahwa sistem registrasi merupakan suatu jaringan kerja atau prosedur yang saling berinteraksi untuk dapat melakukan pencatatan atau pendaftaran.

Registrasi pada pembahasan ini merupakan registarasi admin dari sebuah website. Registrasi ini nanti yang akan di gunakan oleh admin website ketika ingin login dari sebuah sistem Informasi.

Berikut ini adalah Langkah-langlah dalam pembuatan halaman registrasi admin pada pembahasan ini:

a. Membuat File Registrasi

Langkah pertama adalah kita membuat file registrasi.php dan simpan pada folder Proyek_CRUD yang sudah kita buat sebelumnya. Berikut ini merupakan tampilan dari folder Proyek_CRUD ketika sudah membuat file registrasi.php:

Gambar 6.1. Folder Proyek CRUD

b. Merancangan Form Registrasi

Setelah membuat dan menyimpan file registrasi pada folder Proyek_CRUD maka selanjutnya kita akan merancang form registrasi.

Silahkan tulis skrip berikut pada file registrasi.php:

<!DOCTYPE html>

<html>

<head>

<title>Halaman Registrasi Admin</title>

</head>

<body>

</body>

</html>

Berikut ini merupakan tampilan file registrasi.php setelah menulis skrip diatas:

Gambar 6.2. File Registrasi

Setelah membuat struktur HTML pada tahapan diatas, selanjutnya adalah membuat tampilan halaman registrasi.

Silahkan tulis skrip berikut ini di dalam “Body” pada skrip sebelumnya di file registrasi.php:

<H1>Halaman Registrasi Admin</H1>

<table>

<tr>

<td>Username</td>

</tr>

<tr>

<td>Password</td>

</tr>

<tr>

<td>konfirmasi password</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</form>

Berikut ini merupakan tampilan halaman text editor poda file registrasi.php (di dalam kotak warna hijau):

Gambar 6.3. File Registrasi

Berikut ini adalah bentuk tampilan pada halaman form registrasi pada web browser:

Gambar 6.4. Halaman Registrasi

c. Membuat Tabel Pada Pada Database

Pada bab sebelumnya kita sudah membuat database dengan nama “db_karyawan”. Selanjutnya adalah membuat tabel “tb_admin” pada database karyawan tersebut.

Berikut ini adalah contoh dari database yang sudah ada sebelumnya:

Gambar 6.5. Database

Pada gambar diatas sudah terlihat sebuah tabel yang sudah dibuat sebelumnya yaitu “tb_karyawan” selanjutnya kita akan membuat tabel pada pada database yang sama. Adapun nama dari tabel yang akan dibuat adalah ”tb_admin”.

Berikut ini adalah ketentuan truktur dari tabel admin:

Gambar 6.6. Struktur tb_admin

Setelah membuat tabel admin seperti gambar diatas maka seperti gambar berikut ini bentuk tampilan terbaru dari database “db_karyawan”:

Gambar 6.7. Database db karyawan

d. Buka Kembali File Function.php

Setelah file function.php ini dibuka, maka kita akan buat fungsi baru pada file ini dengan nama fungsi Registrasi. Silahkan tulis skrip fungsi baru berikut ini di bawah skrip sebelumnya diatas “?>”:

//buat fuanction registrasi

function registrasi($data){

global $koneksi;

$username = strtolower(stripcslashes($data["username"]));

$password = mysqli_real_escape_string($koneksi,$data["password"]);

$password2 = mysqli_real_escape_string($koneksi,$data["password2"]);

//cek apakah username sudah ada atau belum

$result = mysqli_query($koneksi, "SELECT username FROM tb_admin WHERE username = '$username'");

if (mysqli_fetch_assoc($result)) {

echo "

alert('username sudah terdaftar, Silahkan Coba lagi.');

</script>

return false;

}

//cek konfirmasi password

if ($password !== $password2) {

echo "<script>

alert('Konfirmasi password tidak sesuai, Cobalagi');

</script>";

return false;

}

//enkripsi password (ada dua yaitu md5 dan hash )

$password = password_hash($password, PASSWORD_DEFAULT);

//tambahkan user baru ke data base

mysqli_query($koneksi, "INSERT INTO tb_admin values

('','$username','$password')");

return mysqli_affected_rows($koneksi);

Berikut ini adalah bentuk file function.php pada text editor:

Gambar 6.8. Text Editor

e. Buka Kembali File Registrasi

Setelah menulis skrip sebelumnya pada function.php sekarang kita kembali membuka file Registrasi.php yang sudah dibuat sebelumnnya. Langkah kita pada file Registrasi.php ini adalah membuat koneksi ke file function.php dan membuat kondisi jika tombol register di tekan. Silahkan sisipkan skrip berikut di bagian paling atas halaman file registrasi.php.

<?php

include 'function.php';

if (isset($_POST["register"])) {

if (registrasi ($_POST) > 0) {

echo "

alert('Admin berhasil di tambahkan');

</script>

} else {

echo mysqli_error($koneksi);

}

Selanjutnya silahakan di running di browser dan coba daftarkan data admin baru, jika admin sudah di daftarkan maka akan keluar perintah “admin sudah terdaftar, silahkan coba lagi” dan jika password tidak sama dengan konfirmasi password maka akan keluar perintah “Konfirmasi password tidak sesuai”, kemudian jika semua nya sesuai maka akan keluar perintah “Admin berhasil di tambahkan”.

Berikut ini adalah contoh dari admin berhasil di daftarkan pada form registrasi admin:

Gambar 6.9. Halaman Daftar Admin

2. LogIn

Setelah pada tahapan sebelumnya sudah selesai mendaftarkan admin pada database melalui form registrasi. Selanjutnya kita akan membuat form login.

Berikut ini adalah Langkah-langkah dalam membuat form login:

a. Buat File Login

Silahkan buat terlebih dahlu file baru dengan nama Login.php dan simpan pada folder Proyek_CRUD. Kemudian silahkan buat struktur html halaman login.

Gambar 6.10. Folder Proyek CRUD

Berikut ini merupakan tampilan text editor pada file login.php:

Gambar 6.11. Text Editor Login

Selanjutnya silahkan tulis skrip dibawah ini pada file login.php di dalam “Body”:

</table>

</form>

Berikut ini merupakan bentuk dari tampilan text editor pada file login.php:

Gambar 6.12. Text Editor Login

Selanjutnya silahkan tulis skrip dibawah ini pada file login.php di dalam “<table>”:

<th colspan="3" align="center">Silahkan Login</th>

<tr>

<td>Username</td>

</tr>

<tr>

<td>Password</td>

</tr>

<tr>

<td>

</td>

</tr>

Berikut ini merupakan bentuk dari tampilan text editor pada file login.php:

Gambar 6.13. Text Editor Login

Selanjutnya sisipkan skrip berikut ini di dalam body di atas form sebelumnya pada file Login.php:

<?php if( isset($error)): ?>

<p> username / Password Anda Salah, Silahkan Coba Lagi..!</p>

<?php endif; ?>

Berikut ini merupakan bentuk dari tampilan text editor pada file login.php:

Gambar 6.14. Text Editor Login

Kemudian silahkan tulis skrip berikut pada bagian paling atas file Login.php.

<?php

session_start();

if (isset($_SESSION["login"])) {

header("location: index.php");

exit;

}

//buat koneksi terlebihdahlu

include 'function.php';

//kondisi jika tombol login di tekan user

if (isset($_POST["login"])) {

$username = $_POST["username"];

$password = $_POST["password"];

$result = mysqli_query($koneksi, "SELECT * FROM tb_admin WHERE username = '$username'");

// cek username

if (mysqli_num_rows($result) === 1) {

$row = mysqli_fetch_assoc($result);

if (password_verify($password, $row["password"])){

//SET SESSION

$_SESSION["login"]=true;

header("location:index.php");

exit;

}

$error = true;

}

Silahkan buka file index.php dan kemudian silahkan tulis skrip berikut di atas skrip koneksi pada index.php sebelumnya.

//star dulu session nya

session_start();

//cek session login

if (!isset($_SESSION ["login"])) {

header("location: login.php");

exit;

}

Berikut ini adalah tampilan text editor pada file index.php :

Gambar 6.15. Text Editor Login

3. LogOut

Selanjutnya kita akan buat file logout.php untuk bisa keluar dari halaman index.php sebelumnya.

Untuk membuat logout berikut adalah Langkah-langkahnya:

a. Membuat File Logout

Silahkan buat file baru dengan nama logout.php dan simpan pada folder Proyek_CRUD. Berikut ini adalah tampilan dari folder “Proyek_CRUD”:

Gambar 6.16. Folder Proyek_CRUD

b. Membuat Skrip Logout

Tulis skrip berikut pada file logout.php:

<?php

session_start();

$_SESSION = [];

session_destroy();

session_unset();

header("location: login.php");

exit;

Berikut ini adalah tampilan text editor pada file logout.php :

Gambar 6.17. Text Editor Logout

c. Buka File Index.Php

Selanjutnya silahkan tambah skrip berikut pada bagian “Body” di file index.php:

<br>

<a href="Logout.php">logOut</a>

<br>

Berikut ini adalah tampilan text editor pada file index.php (di dalam kotak hijau):

Gambar 6.18. Text File Index

4. Demo Proyek

Setelah menyelesaikan semua tahapan materi CRUD, selanjutnya adalah mencoba menjalankan program yang sudah selesai dibahas pada buku ini.

Berikut ini merupakan Langkah-langkah saat menjalan Proyek_CRUD:

a. Memanggil Proyek_CRUD

Silahkan buka web browser yang dimiliki kemudian tuliskan pada URL (http://localhost/Proyek_crud/login.php), maka akan tampil halaman web seperti gambar dibawah ini:

Gambar 6.19. Memanggil Proyek CRUD

b. Login

Setelah bisa menampilkan halaman seperti gambar di atas yaitu form login, selanjutnya adalah mencoba login menggunakan username dan password yang sudah kita buat sebelumnya. Adapun contohnya seperti gambar dibawah ini:

Gambar 6.20. Login

c. Behasil Masuk Ke Halaman Index

Setelah melakukan tahapan diatas, maka kita akan masuk ke halaman index ketika menekan tombol “login”.

Berikut ini adalah tampilan halaman index ketika kita berhasil login:

Gambar 6.21. Halaman Index

d. Logout

Setelah masuk ke halaman index, untuk keluar dari halaman tersebut maka tinggal “Klik tombol LogOut” sistem akan menampilkan Kembali halaman login.

5. TUGAS

Rancangan lah sebuah program sistem infomasi berbasis website menggunakan PHP dan HTML yang bisa melakukan perintah CRUD. Kemudian sistem Informasi tersebut juga memiliki hak akses adminnya. (TUGAS INDIVIDU)