Membuat Halaman Login CodeIgniter

Melanjutkan tutorial sebelumnya, kali ini kita akan mulai berurusan dengan coding.

Post kali ini membahas mengenai bagaimana membuat halaman form login.

Catatan: pada tutorial kali ini dan selanjutnya, minimal anda harus mengetahui konsep dasar MVC di CodeIgniter dan setidaknya anda telah membaca User Guide dari CodeIgniter supaya tidak terlalu kebingungan ketika membaca dokumentasi berikut ini. Di sarankan anda juga mengerti atau minimal mengetahui sedikit tentang PHP, HTML dan CSS.

Untuk membuat halaman login, anda dapat melihat code berikut sebagai referensi:

untuk CSS tidak ditampilkan, tetapi anda dapat melihat tutorial saya sebelumnya di Membuat Form Login HTML dan CSS

C:\xampp\htdocs\simatik\application\controllers\login.php

<?php
class Login extends CI_Controller{

    public function index()
    {
		$data['judul'] = 'Web Portal › SIMATIK';
        $this->load->view('login', $data);    
    }

	function validate_login(){

		$this->load->model('user_model');
		$query = $this->user_model->validate();

		if($query){

			$data = array(
				'username' => $this->input->post('username'),
				'is_logged_in' => TRUE			
			);

			$this->session->set_userdata($data);
			redirect('site/home');		
		}else{

			$this->index();					
		}	
	}
}

Bagian view untuk tampilan form login adalah sebagai berikut

C:\xampp\htdocs\simatik\application\views\login.php

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title><?php echo $judul;?></title>
        <link href="<?php echo base_url();?>css/login.css" rel="stylesheet" type="text/css"/>
        <link href="<?php echo base_url();?>favicon.ico" rel="icon"/>
    </head>
        <body>
        <div id="wrapper">
            <div id="spacer">  
            </div>
            <div id="konten">
                <div id="left-side">
                    <?php $this->load->view('includes/left-side-login');?>
                </div>

                <div id="right-side">
                        <h1>SEKOLAH MENENGAH ATAS STATISTIK</h1>
                        <br/><br/><br/>
                        <h2>Login</h2>
                        <p><?php if(isset($notifikasi)) echo $notifikasi;?></p>
						<?php
						$attributes = array('id' => 'login-form');
						echo form_open('login/validate_login', $attributes);
						?>

                            <table id="log-tabel">
                                <tr>
                                    <td>Username</td>
                                    <td><input type="text" name="username" class="log-form" value="" maxlength="1024"/></td>
                                </tr>
                                <tr>
                                    <td>Password</td>
                                    <td><input type="password" name="password" class="log-form" value="" maxlength="1024"/></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td><input type="submit" value="" class="login-button"/></td>
                                </tr>
                            </table>
                        <?php
						echo form_close();
						?>

                        <p>Jika anda belum mempunyai username dan password silahkan aktifkan akun anda terlebih dahulu dengan menghubungi admin</p>           
                </div>  
            <div id="footer">
                <div id="footer-p">
                    <?php $this->load->view('includes/footer-login');?>
                </div>
            </div>
        </div>
        </div>        
    </body>
</html>

Selanjutnya untuk bagian model C:\xampp\htdocs\simatik\application\models\user_model.php

<?php
class User_model extends CI_Model{

	function validate()
        { 
            $this->db->where('username', $this->input->post('username'));
            $this->db->where('password', md5($this->input->post('password')));
            $query = $this->db->get('user');

            if($query->num_rows == 1)
            {
                return TRUE;
            }
	}
}

Dari model tersebut akan diarahkan ke controller lain yaitu site.php dengan fungsi home C:\xampp\htdocs\simatik\application\controllers\site.php

<?php
class Site extends CI_Controller{
	function home()
	{
		$data['judul'] = 'SIMATIK › Home';
		$data['main_content'] = 'main_content/home';
		$this->load->view('template', $data);
	}
}

Dan terakhir adalah bagian view C:\xampp\htdocs\simatik\application\view\main_content\home.php

Halaman home.php dapat anda buat halaman dummy terlebih dahulu.

Selamat mencoba.

11 Comments


  1. terlalu sederhana. hashes password.cuman md5

    Reply

    1. prototype tidak perlu kompleks, lagi pula ini hanya tugas kuliah
      kalau mau diperkuat, silakan saja saat implementasi

      Reply

  2. jadi system out print nya kaya apa ya?

    Reply

  3. home dummi nya kya gimana gan.. jangan di buat bingung dg gan!

    Reply

  4. maaf bang mau tanya, kalau errornya kaya gini gimana cara betulinnya?

    An Error Was Encountered

    Unable to load the requested file: includes/left-side-login.php

    Reply

      1. nah itu pembahasana left-side-login ada dimana?

        Reply

      2. Gimana om, blum selesai nih file: includes/left-side-login.php kayak apa, sama Halaman dummy nya ?

        Reply

        1. itu untuk bagian kirinya, bikin aja halaman dummy left-side-login.php
          soalnya saya udah lupa hehe

          Reply

  5. wah saya kok gagal ya, padahal sudah mengikuti petunjuk….

    Reply

Leave a Reply

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