Membuat Tampilan Login Menggunakan Codeigniter 3

 Membuat Tampilan Login Menggunakan Codeigniter 3

Dibawah ini merupakan langkah-langkah dalam membuat tampilan menu login menggunakan codeigniter 3 sebagai berikut :

1. Langkah pertama yaitu membuat file .htaccess pada folder belajarcodeigniter.test kemudian ketik dengan source code berkut ini :

RewriteEngine On

RewriteCone %{REQUEST_FILENAME} !-f

RewriteCone %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$index.php/$1 [L] 

2. Kemudian langkah yang kedua yaitu membuka file config.php pada folder config, lalu tambahkan "$config['base_url' ] = 'http://ayu.test';

3. Langkah ke tiga yaitu membuka file autoload.php yang terdapat pada folder config, lalu tambahkan seperti gambar di bawah ini.

4. Langkah ke empat yaitu membuat file M_user.hp yang terdapat pada foleder models, kemudian ketikkan source code seperti gambar di bawah ini.  

5. Langkah ke lima yaitu membuat file login.php pada folder views kemudian salin source code pada login.html yang

ada pada folder assets seperti gambar di bawah ini.

6. langkah keenam yaitu menambahkan src method seperti gambar di bawah ini :

     <form class="user" action="<?= base_url('auth/checklogin') ?>" method="POST">

7. Langkah ke tujuh yaitu menambahkan name pada baris email dan password
    
<div class="form-group">

    <input type="email" name="email" class="form-control form-control-user" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Enter Email Address...">

</div>

<div class="form-group">

    <input type="password" name="password" class="form-control form-control-user"

        id="exampleInputPassword" placeholder="Password">

</div>

8. Langkah ke delapan yaitu membuat button login.

 <!-- <a href="index.html" class="btn btn-primary btn-user btn-block">Login</a> -->

<button class="btn btn-primary btn-user btn-block">Login</button>

9. Langkah ke sembilan yaitu menambahkan file css dan js , pertama tambahkan <?= $base_url .

<link href="<?= $base_url ?>vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

10. Langkah ke sepuluh yaitu menambahkan <?= $base_url pada baris 99, 100, 103,106 atau pada baris script.

    <!-- Bootstrap core JavaScript-->

    <script src="<?= $base_url ?>vendor/jquery/jquery.min.js"></script>

    <script src="<?= $base_url ?>vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Core plugin JavaScript-->

    <script src="<?= $base_url ?>vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Custom scripts for all pages-->

    <script src="<?= $base_url ?>js/sb-admin-2.min.js"></script>

11. Langkah ke sebelas yaitu membuka file Auth.php pada folder controllers.

     public function checklogin()

  
12. Langkah ke duabelas yaitu membuka file autoload.php pada folder config.

    $autoload['helper'] = array('url');

Setelah itu buatlah sebuah database dengan nama kelas_tifa yang terdiri dari email, nama, password, dan aktif seperti gambar di bawah ini.

dan di bawah ini merupakan tampilan menu login setelah berashasil di buat.