Membuat Halaman Login CodeIgniter

Posted in CodeIgniter, Saturday, December 29th, 2012, by Muhammad Fahmi Al Azhar

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.

Leave a Reply

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