Membuat form Login dengan Codeigniter 4 dan Database - adeliaputri/TekwebLanjut4_1800016056 GitHub Wiki

Membuat Aplikasi Form Login Menggunakan CI, Bootstrap, dan Database

Kali ini saya akan membagikan cara membuat sistem login menggunakan PHP framework yaitu CodeIgniter atau yang biasa disebut CI.

Sebelumnya ada baiknya kita mengetahui terlebih dahulu apa itu Framework codeigniter ?

 CodeIgniter adalah Framework yang dikembangkan pada Bahasa Pemrograman PHP. Code Igniter bersifat Open-Source yang banyak digunakan oleh para 
 developer dalam mengembangkan website yang dinamis. Code Igniter mengikuti pola kode MVC, sehingga kamu dapat membagi kode kode menjadi 3 
 bagian yang diberikan di bawah ini:

M => Model // Semua panggilan yang berhubungan dengan Database akan ditentukan di sini, seperti pengambilan data, Insert, Delete dan Update Data.

V => View // Sesuai Namanya, View hanya tampilan yang biasa disebut HTML. Semua data terkait dengan View (html) akan ditentukan di sini.

C => Controller // Merupakan jembatan antara model dan view. Ketika kamu mencari sesuatu di browser web. Hal tersebut akan langsung menuju ke controller dan controller menggunakan Model dan view untuk menampilkan hasil yang sesuai.

Keuntungan Code Igniter

- Cepat, Ringan, dan dapat diandalkan
- Codeigniter adalah cara paling mudah untuk memanfaatkan program modular
- PHP Codeigniter kompatibel dengan sebagian besar server web, berbagai 
  sistem operasi dan platform.
- Dapat digunakan di banyak sistem manajemen database
- Code Igniter memiliki bahasa program yang sama dengan yang digunakan 
  pada website
- Memiliki komunitas besar, jadi kamu bisa dengan mudah mencari informasi 
  ketika mengalami kesulitan di Code Igniter
- Kompatible dengan berbagai jenis database
- Ramah pemula dengan menghadirkan dokumentasi User_Guide

Nah Sekarang Sudah tau kan Kenapa kita menggunakan framework codeigniter.

Baiklah Langsung saja Bagaimana Tutorial Membuat login form yang tersambung dengan codeigniter.

Pastikan Laptop Memiliki :

Xampp
Apk Text Editor, disini saya menggunakan Sublime Text
Membuat Table Database di MYSQL
Download Codeigniter 4 atau kunjungi website https://codeigniter.com/download

Langkah-langkah sebagai berikut :

###Mengatur Konfigurasi dan Membuat file baru yang diperlukan

Masukkan Codeigniter yang telah di download pada folder xampp-htdocs, kemudian simpan dengan nama sesuai keinginan

Nyalakan Xampp, kemudian Cek apakah Codeigniter dapat dijalankan dengan mengetikkan Localhost/namafoldercodeigniter. Jika berhasil maka akan muncul gambar seperti dibawah ini.

Cara menjalankan codeigniter juga dapat dilakukan dengan menggunakan Commad Prompt, dengan mengetikkan perintah php spark serve. contohnya dapat dilihat pada gambar dibawah ini. kemudian cek dengan mengetikkan localhost:8080 di mesin pencarian.
Buatlah File baru dengan nama login.php pada folder Controllers. Hal ini bertujuan untuk pemanggilan pada localhost . Ketikkan Codingan seperti pada gambar dibawah ini.

ubahlah codingan menjadi gambar dibawah ini

6(1)

Jika telah berhasil maka tampilannya seperti ini. Karna file login_view.php belum ada jadi tidak bisa terpanggil.

Buatlah File baru dengan nama login_view.php pada folder view yang bertujuan sebagai tampilan awal dari halaman form login yang akan dibuat. Tampilan Ketika file login_view.php telah dibuat. Tampilannya kosong karna memang belum ada script yang dituliskan pada file tersebut

Kemudian Buat File baru dengan nama model_login.php pada folder models . file ini berfungsi untuk mensinkronkan dengan database yang dibuat pada pemasukkan usernama dan password di form login.

Selanjutnya kita merubah default-controllernya menjadi login. Hal tersebut dilakukan agar Ketika kita membuka localhost maka akan langsung terarah ke bagian file login.php tempat tampilan dari form kita

Ketika default-controllernya telah diubah ke login.php

`Menambahkan Template dengan menggunakan Bootstrap untuk memperbagus tampilan Form Login yang dibuat.`

Download terlebih dahulu template bootstrap. Sebelumnya Buat folder baru dengan Nama assets . Kemudian Masukkan File dari bootstrap ke dalam folder assets tersebut.

Menambahkan 'url' pada folder config/autoload.php agar form login yang kita dpat di bootstrap dapat terpanggil. lihat pada gambar dibawah ini pada baris ke-92

Hanya untuk memastikan saja, silahkan buka file autoload.php di dalam application -> config pada project CI lalu cari autoload[libraries] dan isi dengan session & database. $autoload['libraries'] = array('session', 'database');karena pada sistem login akan bermain dengan session dan database. terletak pada baris ke 61 agar dapat menghubungkan dengan database yang dibuat.

Lakukan Konfigurasi database. Buka file database.php di dalam folder application/config pada folder project CI. Hanya memastikan saja, konfigurasi database nya sudah benar. Cari bagian hostname dan isi dengan “localhost“, username di isi dengan “root“, password biarkan kosong, database di isi dengan nama database. lihat pada gambar dibawah ini.

Copy paste index.html yang kita dapat dari mendowload bootstrap ke file login_view.php hal tersebut bertujuan untuk menampilkan dari bootstrap yang telah didownload. Kemudian tambahankan assets/ pada setiap awal pemanggilan href atau href="assets.....">. Agar file tersebut terdeteksi.

Berikut adalah tampilan dari form loginnya.

18 (2)

Penambahan codingan pada controllers/login.php di baris 13-15 ini berfungsi untuk menghubungkan dengan database dengan metode post.

Buatlah Database dan isikan sesuai dengan kebutuhan. lihat contohnya pada gambar dibawah ini.

Menghubungkan dengan databases yang telah dibuat pada config/databases.php

Kemudian Tambah Fungsi action pada view/login_view.php agar button submit dapat berfungsi denga database yang di koneksikan. lihat pada gambar dibawah ini. <form action="<?php echo site_url('login/ceklogin')?>" method="post" name="Login_form" class="login100-form validate-form">

Redirect -> kondisi yang akan mengarahkan user yang berhasil login dan yang gagal login

Penambahan codingan pada models/model_login.php agar dapat memasukkan data yang telah dimasukkan dengan database. Sehingga Ketika data berhasil di submit akan terhubung ke halaman selanjutnya

codinganya

$this->session->set_userdata($sess);
redirect('welcome');

Percobaan memasukkan password dan username. Masukkan Username dan password seperti yang tertera pada data di database bawah ini.

Codingannya :

Ketika berhasil akan terarah ke halaman welcome.php seperti pada codingan diatas apabila berhasil atau bernilai trus maka akan redirect ke halaman welcome.php

Tambahkan code <?php $info = $this->session->flashdata('info'); if (!empty($info)) { echo $info; } ?>

pada view/login_view.php seperti pada gambar dibawah ini , bertujuan memberikan info kosong ketika kita tidak memasukkan username atau password

27_LI

Membuat Warning Ketika Terjadi Kesalahan Input Username atau password

$this->session->set_flashdata('info','Maaf Username dan password Anda Salah!'); redirect('login');

Codingan diatas dapat kita gunakana sebagai warning/ peringatan jika username atau password yang dimasukkan tidak sama dengan yang ada di database. contohnya warningnya lihat pada gambar dibawah ini.

Berikut adalah hasil Dari codingan akhir dari

Model_login.php

Welcome.php syntax dibawah ini bertindak jika berhasil login maka halaman akan terarah ke file welcome_message.php public function index() { $this->load->model('model_login'); $this->model_login->keamanan(); $this->load->view('welcome_message'); }

Halaman dari Welcome_message.php

Kesimpulan :

Dalam project ini yang paling tersulit ketika melakukan konfigurasi dengan database dan memberikan alert atau peringatan ketika terjadi kesalahan penginputan

Berikut refrensi dari pembuatan login form