• Contact Us
Tuesday, December 20, 2022
-18 °c
Teman Ngoding
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English
No Result
View All Result
Teman Ngoding
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English
No Result
View All Result
Plugin Install : Cart Icon need WooCommerce plugin to be installed.
Teman Ngoding
No Result
View All Result

Tutorial Codeigniter 4 ~ Login dan Register

admin by admin
May 30, 2022
in Codeigniter, Tutorial
0 0
5
Home Tutorial Codeigniter

This post is also available in: English

Halo teman teman semuanya, kali ini kita akan membahas cara membuat login dan register menggunakan CI4.

1. Install CodeIgniter 4

Untuk proses install codeigniter 4, teman semua dapat di lakukan dengan dua cara, dengan cara manual dan dengan cara menggunakan composer. saya sarakan menggunkaan cara comooser.

Install Dengan Cara manual

Silahkan download file CodeIgniter 4 pada link berikut:

https://codeigniter.com

Kemudian extract pada web server Anda.

Jika Anda menggunakan XAMPP, extract di folder: 

C:\xampp\htdocs

Jika Anda menggunakan WAMPSERVER, extract di folder: 

C:/wamp64/www

Rename nama foldernya, sesuaikan dengan nama project teman teman semua.

Install Dengan Composer

Di folder di atas root proyek Anda:

composer create-project codeigniter4/appstarter project-root

Perintah di atas akan membuat folder “project-root”.

Jika Anda menghilangkan argumen “project-root”, perintah akan membuat folder “appstarter”, yang dapat diganti namanya sesuai kebutuhan.

Jika Anda tidak membutuhkan atau ingin menginstal phpunit, dan semua dependensi penyusunnya, tambahkan opsi –no-dev ke akhir baris perintah di atas. Itu hanya akan menghasilkan kerangka kerja, dan tiga dependensi tepercaya yang kami bundel, yang diinstal oleh komposer.

Contoh perintah instalasi seperti itu, menggunakan “appstarter” project-root default:

komposer create-project codeigniter4/appstarter –no-dev

2. Buat Database dan Table

Sebelum membuat tabel teman teman di haruskan setting .env pada codeigniter 4.

Selanjutnya, temukan kode berikut:

1# CI_ENVIRONMENT = production

Kemudian ubah menjadi seperti berikut:

1CI_ENVIRONMENT = development

Teman semuanya, untuk buat database menggunakan codeigniter 4 dapat di lakukan dengan dua cara kembali. Dapat di lakukan dengan cara manual dengan membuat di phpmyadmin atau teman semua dapat membuat dengan migration. Saya rekomendasikan menggunakan migration.

Silahkan teman semua, buka terminalnya kita akan membuat data migration.

Kemudian ketik perintah berikut untuk membuat file migrasi:

php spark migrate:create users

Perintah tersebut akan membuat file dengan nama 2022-04-25-061811_Users.php, di dalam folder, app/Database/Migration.

Tanggal dan waktu di awal nama file menandakan versi dari migrasi.

Berikut ini adalah isi file 2022-04-25-061811_Users.php.

<?php

namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class Users extends Migration
{
    public function up()
    {
        //
    }

    public function down()
    {
        //
    }
}

Pada class Users terdapat dua method, yakni up() dan down(). Method ini nantinya akan dijalankan saat melakukan migrasi.

Method up() akan dijalankan saat melakukan migrasi, sedangkan down() saat melakukan rollback.

Silahkan ubah kode pada file 2022-04-25-061811_Users.php menjadi seperti ini:

<?php

namespace App\Database\Migrations;

use CodeIgniter\Database\Migration;

class Users extends Migration
{
    public function up()
    {
		$this->forge->addField([
			'id'          => [
				'type'           => 'INT',
				'constraint'     => 5,
				'unsigned'       => true,
				'auto_increment' => true
			],
			'name'       => [
				'type'           => 'VARCHAR',
				'constraint'     => '255'
			],
			'email'      => [
				'type'           => 'VARCHAR',
				'constraint'     => '255',
			],
			'password' => [
				'type'           => 'VARCHAR',
				'constraint'     => '255',
			],
			'created_at'      => [
				'type'           => 'TIMESTAMP',
				'null'           => true,
			],
		]);

		// primary key
		$this->forge->addKey('id', TRUE);

		// tabel users
		$this->forge->createTable('users', TRUE);
    }

    public function down()
    {
        $this->forge->dropTable('users');
    }
}

Oke, sekarang mari kita coba lakuka migrasi pertama.

Lakukan migrasi dengan perintah:

php spark migrate

Output :

3. Buat file Model

Pada tutorial ini, hanya dibutuhkan satu file model yaitu “UserModel.php”.

Buat sebuah file model bernama “UserModel.php” pada folder “app/Models”, kemudian ketikan kode berikut:

<?php namespace App\Models;
 
use CodeIgniter\Model;
 
class UserModel extends Model{
    protected $table = 'users';
    protected $allowedFields = ['name','email','password','created_at'];
}

4. Buat file Controller Register.php

Buat file controller dengan nama “Register.php” pada folder “app/Controllers”, kemudian ketikan kode berikut:

Pada controller “Register.php” diatas, terdapat dua function, yaitu: function index(), dan function save().

Function index(), berfungsi untuk menampilkan sebuah view benama “register”, sedangkan function save() berfungsi untuk menyimpan data ke table “users” yang ada di database sekaligus mengenkripsi password dengan fungsi password_hash().

5. Buat file View register.php

Buat sebuah file view bernama “register.php” pada folder “app/Views”, kemudian ketikan kode berikut:

Pada view “register.php”, kita memanggil Bootstrap 5 CDN, baik CSS dan juga JavaScript-nya.

Kunjungi URL berikut untuk info lebih lanjut tentang Bootstrap 5:

https://v5.getbootstrap.com/

Selain itu, juga terdapat sebuah form untuk register berupa: input name, email, password, dan Confirm password.

6. Buat file Controller Login.php

Buat sebuah file Controller lagi bernama “Login.php” pada folder “app/Controllers”, kemudian ketikan kode berikut:

<?php namespace App\Controllers;
 
use CodeIgniter\Controller;
use App\Models\UserModel;
 
class Login extends Controller
{
    public function index()
    {
        helper(['form']);
        echo view('login');
    } 
 
    public function auth()
    {
        $session = session();
        $model = new UserModel();
        $email = $this->request->getVar('email');
        $password = $this->request->getVar('password');
        $data = $model->where('email', $email)->first();
        if($data){
            $pass = $data['password'];
            $verify_pass = password_verify($password, $pass);
            if($verify_pass){
                $ses_data = [
                    'id'       => $data['id'],
                    'name'     => $data['name'],
                    'email'    => $data['email'],
                    'logged_in'     => TRUE
                ];
                $session->set($ses_data);
                return redirect()->to('/dashboard');
            }else{
                $session->setFlashdata('msg', 'Wrong Password');
                return redirect()->to('/login');
            }
        }else{
            $session->setFlashdata('msg', 'Email not Found');
            return redirect()->to('/login');
        }
    }
 
    public function logout()
    {
        $session = session();
        $session->destroy();
        return redirect()->to('/login');
    }
} 

Pada controller “Login.php” diatas terdapat tiga function, yaitu: function index(), function auth(), dan function logout().

Function index() berfungsi untuk menampilkan view bernama “login” yang akan menampilkan form login.

Function auth() berfungsi untuk melakukan autentikasi beserta meng-set variable session jika autentikasi valid.

Function logout() berfungsi untuk logout beserta menghancukan variable session. 

7. Buat file View login.php

Buat sebuah file view lagi bernama “login.php” pada folder “app/Views”, kemudian ketikan kode berikut:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
 
    <title>Login</title>
  </head>
  <body>
    <div class="container">
        <div class="row justify-content-md-center">
 
            <div class="col-6">
                <h1>Sign In</h1>
                <?php if(session()->getFlashdata('msg')):?>
                    <div class="alert alert-danger"><?= session()->getFlashdata('msg') ?></div>
                <?php endif;?>
                <form action="/login/auth" method="post">
                    <div class="mb-3">
                        <label for="InputForEmail" class="form-label">Email address</label>
                        <input type="email" name="email" class="form-control" id="InputForEmail" value="<?= set_value('email') ?>">
                    </div>
                    <div class="mb-3">
                        <label for="InputForPassword" class="form-label">Password</label>
                        <input type="password" name="password" class="form-control" id="InputForPassword">
                    </div>
                    <button type="submit" class="btn btn-primary">Login</button>
                </form>
            </div>
             
        </div>
    </div>
     
    <!-- Popper.js first, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
  </body>
</html>

Pada view “login.php”, kita juga memanggil Bootstrap 5 CDN, baik CSS maupun JavaScript-nya.

Selain itu, juga terdapat sebuah form untuk login berupa: input email dan password.

8. Buat file Controller Dashboard.php

Selain Controller Register.php dan Login.php, buat sebuah file Controller lagi bernama “Dashboard.php” pada folder “app/Controllers”.

Kemudian ketikan kode berikut:

<?php namespace App\Controllers;
 
use CodeIgniter\Controller;
 
class Dashboard extends Controller
{
    public function index()
    {
        $session = session();
        echo "Welcome back, ".$session->get('name');
    }
}

Pada Controller “Dashboard.php” hanya terdapat satu function, yaitu function index() yang berfungsi untuk menampilkan text “Welcome Back [username yang login]”.

Tujuan dari Controller ini nantinya untuk di proteksi agar user tidak dapat mengakses Dashboard tanpa login.

9. Buat file Filters Auth.php

CodeIgniter 4 menyediakan fitur Filter yang berfungsi untuk menghandle Before Request ataupun After Request.

Fitur ini sangat bermanfaat untuk menangani pengecekan atau memvalidasi setiap request atau beberapa request yang di tulis dengan kode yang sama.

Mungkin terdengar rumit, tapi sebenarnya tidak.

Pada kasus ini, kita akan mem-proteksi function index() pada Controller Dashboard.php dari users yang belum login menggunakan Filter.

Dengan demikian, Anda akan memiliki gambaran secara umum seperti apa cara kerja Filter pada CodeIgniter 4.

Buat sebuah file Filter bernama “Auth.php” pada folder “app/Filters”, kemudian ketikan kode berikut:

Pada Filter “Auth.php” diatas, terdapat 2 function yaitu: function before() dan function after().

Pada kasus ini, kita hanya bermain di function before().

Function before, berfungsi untuk memvalidasi request sebelum request itu sendiri dilakukan.

Pada filter “Auth.php” diatas, kita me-redirect users ke halaman login jika mengakses suatu halaman sebelum login.

Hal ini bisa berlaku secara global, dengan kata lain berlaku untuk setiap request, atau bisa juga untuk beberapa request saja.

Pada kasus ini, kita hanya menggunakannya untuk mem-proteksi Controller “Dashboard.php”.

Jadi, kita tidak memberlakukannya secara global, karena kita ingin Controller Login.php dan Register.php tetap dapat diakses tanpa login.

Selanjutnya buka file “Filters.php” yang terdapat pada Folder “app/Config”, kemudian temukan kode berikut:

$routes->get('/', 'Home::index');
$routes->get('/', 'Home::index');
$routes->get('/dashboard', 'Dashboard::index',['filter' => 'auth']);

10. Testing

php spark serve

Baca juga tutorial lainnya di sini:

Cara Menghilangkan Index.php di CodeIgniter

Cara Mengirim permintaan AJAX dengan token CSRF di CodeIgniter 3

Demikian tutorial pembahasan Codeigniter kali ini, semoga bermanfaat, jika ada pertanyaan silahkan tinggalkan komentarnya.

Terimakashi……………

Tags: ci4codeigniter 4login ci4login codeigniter 4register ci4tutorial codeigniter 4
ShareTweetShare
admin

admin

Next Post
Menghilangkan Public dan Index.php dari URL Codeigniter 4

Menghilangkan Public dan Index.php dari URL Codeigniter 4

Comments 5

  1. Jasa SEO Purwokerto says:
    6 months ago

    It is in point of fact a great and useful piece of information. I’m
    glad that you simply shared this helpful info with us. Please keep us up to date like
    this. Thanks for sharing.

    my page :: Jasa SEO Purwokerto

    Reply
    • admin says:
      6 months ago

      you’re welcome, thank you for visiting my site

      Reply
  2. Lapak Satria says:
    6 months ago

    Hi, I do think this is a great site. I stumbledupon it 😉 I will revisit once again since i have
    book marked it. Money and freedom is the greatest way to change, may you be rich
    and continue to help others.

    Here is my web page; Lapak Satria

    Reply
    • admin says:
      6 months ago

      Amen, thank you friend

      Reply
  3. slot says:
    5 months ago

    Hello mates, its great article about teachingand completely defined, keep it up
    all the time.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Trending
  • Comments
  • Latest
Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

June 2, 2022
Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

June 8, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

May 30, 2022
REST API Login dan Register Node.js dengan JWT

REST API Login dan Register Node.js dengan JWT

July 28, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

5
Rekomendasi tempat belajar pemrograman

Rekomendasi tempat belajar pemrograman

3
Menghilangkan Public dan Index.php dari URL Codeigniter 4

Menghilangkan Public dan Index.php dari URL Codeigniter 4

2
Membuat Sitemap Otomatis Codeigniter 4

Membuat Sitemap Otomatis Codeigniter 4

1
Access MongoDB With Node.JS

Akses MongoDB Dengan Node.JS

September 26, 2022
Teorema Structured Control

Basic Programming – Structured Control Theorem

September 23, 2022
WEB CRUD LocalStorage Menggunakan JavaScript

WEB CRUD LocalStorage Menggunakan JavaScript

September 22, 2022
DOM dan GOM Javascript

Perbedaan BOM Dan DOM Pada JavaScript

September 20, 2022
Teman Ngoding

Teman Ngoding tempat berbagi tutorial pemrograman
Read more

Categories

  • Berita
  • C++
  • Codeigniter
  • Events
  • Flutter
  • Golang
  • Java
  • Javascript
  • Laravel
  • MongoDB
  • News
  • Node JS
  • Pemrograman
  • PHP
  • Problem Solution
  • React JS
  • SQL
  • Tutorial
  • TypeScript
  • TypeScript
  • Video Codeigniter
  • Video Git
  • Video Laravel
  • Video Tutorial

Tags

ajax belajar golang belajar reactjs blog browser seluler Cara mendapatkan Uang dari Blog codeigniter codeigniter 3 codeigniter 4 codeigniter4 embed html Error Handling flutter flutter vs react native golang golang dasar html infinite scroll javascript javascript tutorial laravel laravel 8 laravel9 laravel 9 load more ajax Menggunakan Multiple select2 dan menyimpan dengan format json mongodb nodejs pdf pemrograman ajax pemrograman golang pemrograman php reactjs reactjs tutorial reactjs vs react native rest api rest api codeigniter 4 tutorial codeigniter 4 tutorial golang tutorial javascript tutorial laravel tutorial laravel 8 tutorial nodejs tutorial reactjs uang dari blog

Recent News

Access MongoDB With Node.JS

Akses MongoDB Dengan Node.JS

September 26, 2022
Teorema Structured Control

Basic Programming – Structured Control Theorem

September 23, 2022

© 2022 Teman Ngoding.

No Result
View All Result
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English

© 2022 Teman Ngoding.

Login to your account below

Forgotten Password?

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
  • English
  • Indonesia