Membuat Form Register Codeigniter Encrypt MySQL & Bootstrap

Hallo semua, terima kasih sebelumnya telah mengklik artikel ini. Kali ini kita sama – sama akan belajar bagaimana cara membuat form register codeigniter.

Membuat Form Register Codeigniter

Di artikel sebelumnya tentang membuat form login codeigniter multi-level kita telah membahas bagaimana membuat form login codeigniter dengan multi-level.

Kita akan melanjutkan pembelajaran kita membuat form register/pendaftaran codeigniter.

Sebelumnya, enkripsi password pada tutorial kali ini menggunakan enkripsi MD5, ya memang sekarang menggunakan enkripsi ini tidak lah seaman dulu, tapi sebagai bahan pembelajaran tidak ada masalahnya menurut saya. Nanti Konsepnya tetap akan sama saja.

1. Persiapan

Pertama, sebelum melakukan tutorial membuat halaman register ini, hal yang wajib kamu lakukan adalah mendownload bahan – bahannya.

  • Framework codeigniter, Silahkan download di link berikut www.codeigniter.com
  • Bootsrap, karena saya menggunakan template bootstrap adminLTE, silahkan kamu download di link berikut www.adminlte.io.

Note: kenapa tidak men-download javascript atau menggunakan template lain? menurut saya template ini sudah sangat user friendly dan mana tau saya tetap bersemangat, jadi progres pembuatan web nantinya bisa secara continue.

2. Struktur Database

Untuk struktur databasenya saya menggunakan database pada tutorial pertama, yaitu db_kampus.

membuat halaman login codeigniter

Jika kamu sudah pernah ke tutorial sebelumnya, langsung saja skip ke langkah 3. Tapi jika kamu baru pertama disini, tidak masalah, saya tetap akan menjelaskan dari awal.

Buatlah database db_kampus atau copy syntax di bawah ini.

CREATE DATABASE db_kampus;

Buatlah tabel bernama tb_user seperti syntax dibawah ini.

CREATE TABLE `tb_user` (
  `user_id` int(11) PRIMARY KEY AUTO_INCREMENT NOT NULL,
  `nama` varchar(100) NOT NULL,
  `username` varchar(100) NOT NULL,
  `password` varchar(100) NOT NULL,
  `level_id` int(11) NOT NULL,
  `create_at` datetime NOT NULL,
  `update_at` datetime NOT NULL,
  `last_login` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Buat juga tabel bernama tb_level, ini nanti berguna sebagai level dari user tersebut.

CREATE TABLE `tb_level` (
  `level_id` int(11) PRIMARY KEY AUTO_INCREMENT NOT NULL,
  `nama` varchar(50) NOT NULL,
  `keterangan` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

insert data pada tabel level seperti dibawah ini:

INSERT INTO `tb_level` (`level_id`, `nama`, `keterangan`) VALUES
(1, 'Administrator', 'Administrator'),
(2, 'Mahasiswa', 'Mahasiswa');

Setelah proses persiapan selesai, kita lanjut ke instalasi codeingiter

3. Instalasi Codeingiter

Langkah selanjutnya adalah instalasi codeingiter, ini merupakan langkah penting, jika ingin mebuat sebuah website.

Setelah kamu selesai mendownload framework codeigniter tadi, silahkan kamu ekstrak menggunakan winrar ke folder www (jika menggunakan wampserver) atau ke folder htdocs (jika menggunakan XAMPP).

Setelah proses ekstrak selesai, silahkan kamu rename folder tersebut dengan project name yang kamu inginkan, disini saya mengganti nama menjadi ci_register.

Setelah rename folder, buatlah folder assets untuk meletakkan css, javascript dan file pendukung lainnya dari AdminLTE.

4. Konfigurasi Dasar Codeigniter

Hal pertama yang harus kamu lakukan untuk membuat form register codeigniter adalah membuat file .htaccess copy dan save dengan nama .htaccess di folder setara application.

<IfModule mod_rewrite.c>
  Options -Indexes

  RewriteEngine On
  RewriteCond $1 !^(index\\.php|resources|robots\\.txt)
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.+)$ index.php?/$1 [L,QSA]
</IfModule>

Hal kedua yang harus kamu lakukan adalah membuka application/config/config.php.

Lalu ganti/ copy syntax dibawah ini agar nantinya css, javascript dan file lainnya dapat terload.

$config['base_url'] = "http://".$_SERVER['HTTP_HOST'];
$config['base_url'] .= preg_replace('@/+$@','',dirname($_SERVER['SCRIPT_NAME'])).'/';

Kelebihan dari syntax ini, kita dapat melakukan memuat halaman web apapun nantinya yang terdapat di web kamu pastinya.

Selanjutnya, buka application/config/autoload.php copy aja, tapi perhatikan baik baik!

$autoload['libraries'] = array('database','session','form_validation','pagination');
$autoload['helper'] = array('url','file','form');
$autoload['model'] = array('Login_model');

Disini saya menset libraries, helper, model, agar nantinya mempermudah proses pengerjaan. sebenarnya kalau diarkan secara default tidak masalah, tapi agar saat menjalan program nantinya, model, helper dan libraries inilah yang akan di kerjakan pertama kali.

Buka application/config/database.php

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'db_kampus',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

Ganti database dengan database yang ingin kamu gunakan (db_kampus). username ganti menjadi root dan password biarkan saja secara default.

Hal terakhir dalam membuat halaman login codeigniter adalah mengganti routes kamu, yaitu masuk ke application/config/routes.php

$route['default_controller'] = 'login';

Yap, Konfigurasi dasar membuat form register codeiniger cukup!

5. Buat Model Register (Register_model)

Buatlah file baru dan beri nama Register_model dan letakkan di application/model, lalu copykan syntax/coding dibawah ini.

<?php

class Register_model extends CI_Model{
    
    public function save_register_info($data){
        return $this->db->insert('tb_user', $data);
    }

    public function get_all_level(){
        return $this->db->get('tb_level')->result(); // Tampilkan semua data yang ada di tabel level
    }
}

6. Buat View Register

Langkah selanjutnya untuk membuat halaman register codeigniter multilevel adalah membuat view registernya. beri nama file register.php dan letakkan di application/view lalu copy syntax/coding dibawah ini.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>membuat form register codeigniter | Log in</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" sizes="16x16" href="<?=base_url().'assets/' ?>dist/img/favicon-16x16.png">
  <link rel="stylesheet" href="<?=base_url().'assets/' ?>plugins/fontawesome-free/css/all.min.css">
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <link rel="stylesheet" href="<?=base_url().'assets/' ?>plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <link rel="stylesheet" href="<?=base_url().'assets/' ?>dist/css/adminlte.min.css">
  <link rel="stylesheet" href="<?=base_url().'assets/' ?>dist/css/adminlte.css">
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition login-page">
  <div class="register-box">
  <div class="register-logo">
    <a href="../../index2.html"><b>Register</b> Multilevel</a>
  </div>

  <div class="card">
    <div class="card-body register-card-body">
      <center><img width="170px" src="<?php echo base_url();?>assets/dist/img/Logo.png"></center>
      <p class="login-box-msg">Daftar Pengguna Baru</p>

      <form class="form-horizontal" action="<?php echo base_url('register/save');?>" method="post" enctype="multipart/form-data">
        <div class="input-group mb-3">
          <input type="text" class="form-control" placeholder="Nama Lengkap" name="nama">
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-user"></span>
            </div>
          </div>
        </div>
        <div class="input-group mb-3">
          <input type="text" class="form-control" placeholder="Username" name="username">
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-envelope"></span>
            </div>
          </div>
        </div>
        <div class="input-group mb-3">
          <input type="password" class="form-control" placeholder="Password" name="password">
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-lock"></span>
            </div>
          </div>
        </div>
          <div class="form-group">
              <select class="form-control" style="width: 100%;"  name="level_id">
                <option value="">-- Pilih Level --</option>
                  <?php
                foreach($get_level as $data){ // Lakukan looping pada variabel level dari controller
                echo "<option value='".$data->level_id."'>".$data->nama."</option>";
                  }
                ?>
              </select>
            </div>
        <div class="row">
          <div class="col-8">
            <div class="icheck-primary">
              <input type="checkbox" id="agreeTerms" name="terms" value="agree">
              <label for="agreeTerms">
               I agree to the <a href="#">terms</a>
              </label>
            </div>
          </div>
          <!-- /.col -->
          <div class="col-4">
            <button type="submit" class="btn btn-primary btn-block">Register</button>
          </div>
          <!-- /.col -->
        </div>
      </form>

      <a href="<?php echo base_url('login')?>" class="text-center">Sudah punya akun ? silahkan login...</a>
    </div>
    <!-- /.form-box -->
  </div><!-- /.card -->
</div>
<script src="<?=base_url().'assets/' ?>plugins/jquery/jquery.min.js"></script>
<script src="<?=base_url().'assets/' ?>plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="<?=base_url().'assets/' ?>dist/js/adminlte.min.js"></script>
</body>
</html>

7. Buat Controller Register

Selanjutnya buatlah controller register dengan nama Register lalu letakkan di application/controller lalu copy syntax/coding dibawah ini.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Register extends CI_Controller {
    
    public function __construct() {
        parent::__construct();
        $this->load->model('Register_model');
    }    

 	public function index() {
      $data = array();
      $data['get_level']=$this->Register_model->get_all_level();
      $this->load->view('register', $data);

    }

  public function save() {

        $data = array();
        $data['nama'] = $this->input->post('nama');
        $data['username'] = $this->input->post('username');
        $data['password'] = MD5($this->input->post('password'));
        $data['level_id'] = $this->input->post('level_id');
        $data['create_at'] = date('Y-m-d H:i:s');
        $data['update_at'] = date('Y-m-d H:i:s');
        $data['last_login'] = date('Y-m-d H:i:s');

        $this->form_validation->set_rules('nama', 'Nama', 'trim|required');
        $this->form_validation->set_rules('username', 'Username', 'trim|required');
        $this->form_validation->set_rules('password', 'password', 'trim|required');
        $this->form_validation->set_rules('level_id', 'level', 'trim|required');

        if ($this->form_validation->run() == true) {
                    
            
            $result = $this->Register_model->save_register_info($data);

            if ($result) {
                $this->session->set_flashdata('message', '<div class="alert alert-success" role="alert"> Data Berhasil disimpan Silahkan login... <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>');
                redirect('login');
            } else {
                $this->session->set_flashdata('message', 'Data Kamu Galat !');
                redirect('login');
            }
        } else {
            $this->session->set_flashdata('message', validation_errors());
            redirect('login');
        }
    }

}

Setelah proses pembuatan form register codeigniter selesai, baik itu model, view dan controller.

8. Buat Controller Login

Kita akan membuat halaman login. Untuk lebih jelas tanpa memperpanjang tutorial, ada baiknya kamu mengakses link tersebut.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Login_model extends CI_Model {


	public function getLoginData($data)

	{

		$login['username'] = $data['username'];
		$login['password'] = md5($data['password']);

		$cek = $this->db->get_where('tb_user', $login);
		if($cek->num_rows()>0)
		{
			foreach($cek->result() as $qad)
			{
				$sess_data['logged_in'] 	= 'yeslogin';
				$sess_data['user_id'] 		= $qad->user_id; //mengambil user id
				$sess_data['username'] 		=$qad->username;
				$sess_data['nama'] 			= $qad->nama; // mengambil nama
				$sess_data['level_id'] 		= $qad->level_id;

				$this->session->set_userdata($sess_data);
				$this->db->where('user_id',$qad->user_id);
                $this->db->update('tb_user', array('last_login'=> date('Y-m-d H:i:s')));
			
			}
			if($this->session->userdata('logged_in')!="" && $this->session->userdata('level_id')=="1")
			{
				redirect('dosen');
			} 
			else if($this->session->userdata('logged_in')!="" && $this->session->userdata('level_id')=="2")
			{
				redirect('mahasiswa');
			}
		}
		else
		{	

			$this->session->set_flashdata('message', '<div class="alert alert-danger" role="alert"> Maaf, kombinasi username dan password yang anda masukkan tidak valid dengan database kami.<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>');

			// $this->session->set_flashdata('result_login', "Maaf, kombinasi username dan password yang anda masukkan tidak valid dengan database kami.");
			redirect('login');
		}
	}

}

9. Buat View Login

Selanjutnya buat view login

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>membuat form register codeigniter | Log in</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" sizes="16x16" href="<?=base_url().'assets/' ?>dist/img/favicon-16x16.png">

  <!-- Font Awesome -->
  <link rel="stylesheet" href="<?=base_url().'assets/' ?>plugins/fontawesome-free/css/all.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- icheck bootstrap -->
  <link rel="stylesheet" href="<?=base_url().'assets/' ?>plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="<?=base_url().'assets/' ?>dist/css/adminlte.min.css">
  <link rel="stylesheet" href="<?=base_url().'assets/' ?>dist/css/adminlte.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition login-page">
<div class="login-box">
  <div class="login-logo">
    <a href="https://trenpedia.com/"><b>Login</b> Multilevel</a>
  </div>
  <!-- /.login-logo -->
  <div class="card">
    <div class="card-body login-card-body">
      <center><img width="170px" src="<?php echo base_url();?>assets/dist/img/Logo.png"></center>
      <h1></h1>
        <?php echo form_open('login'); ?>

        <?php echo $this->session->userdata('message');?>
        <div class="input-group mb-3">
          <input type="text" class="form-control" placeholder="Username" name="username">
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-envelope"></span>
            </div>
          </div>
        </div>
        <div class="input-group mb-3">
          <input type="password" class="form-control" placeholder="Password" name="password">
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-lock"></span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-8">
          </div>
          <!-- /.col -->
          <div class="col-4">
            <button type="submit" class="btn btn-primary btn-block">Sign In</button>
          </div>
          <!-- /.col -->
        </div>
         <?php echo form_close(); ?>


    </div>
    <!-- /.login-card-body -->
  </div>
</div>
<!-- /.login-box -->

<!-- jQuery -->
<script src="<?=base_url().'assets/' ?>plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="<?=base_url().'assets/' ?>plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="<?=base_url().'assets/' ?>dist/js/adminlte.min.js"></script>

</body>
</html>

10. Buat Controller Login

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Login extends CI_Controller {

	public function __construct()
	{
		parent::__construct();
		
		$this->load->library('form_validation');
	}

	public function index()
	{
		if($this->session->userdata('logged_in')=="")
		{
		
			
			$this->form_validation->set_rules('username', 'username', 'trim|required');
			$this->form_validation->set_rules('password', 'Password', 'trim|required');
			
			
			if ($this->form_validation->run() == FALSE)
			{
				$this->load->view('login');
			}
			else
			{
				$dt['username'] 	= $this->input->post('username');
				$dt['password'] 	= $this->input->post('password');
				$dt['password'] 	= $this->input->post('password');
				$dt['last_login'] = date('Y-m-d H:i:s');

				

				$this->Login_model->getLoginData($dt);

			}
		}
		else if($this->session->userdata('logged_in')!="" && $this->session->userdata('level_id')=="1")
		{
			redirect('dosen');
		}
	}


	public function logout(){
        $this->session->sess_destroy();
        redirect('login');
    }

}

11. Testing Aplikasi Register dan Login Codeingiter

Sekarang adalah tahap terakhir, yaitu testing. kamu dapat melakukan testing dengan mengunjungi http://localhost/ci_register/register

membuat form register codeigniter
tampilan register

Setelah kamu melakukan register, maka akan tampil seperti ini

membuat form register codeigniter
Akan tampil pemberitahuan data berhasil disimpan, silahkan login

Lakukan login seperti biasa

membuat form register codeigniter

Sekian tutorial kali ini, membuat halaman login codeigniter multilevel, Semoga bermanfaat!

Download Source : bagi yang benar berminat sourcenya silahkan berkomentar ya… gratisssss (cuma ingin melihat seberapa respon dari tutorial ini)

membuat form register codeigniter

Alasan saya menggunakan logo kampus saya adalah sebagai bahan promosi kepada kampus saya.

8 thoughts on “Membuat Form Register Codeigniter Encrypt MySQL & Bootstrap”

Leave a Comment