1
TUTORIAL
CODEIGNITER
Langkah Tepat menjadi Web Developer Handal,
menguasai CodeIgniter, jalan membuat aplikasi
berbasis website lebih mudah
www.
ilmuwebsite.com
Bagian 5. Membuat Form Login
Pada CodeIgniter
2
Bagian 5. Membuat Form
Login Pada CodeIgniter
Kali ini kita akan mempelejari tutorial code igniter tentang bagaimana membuat form login di codeigniter 2.1.3. Hasil akhir dari aplikasi ini adalah Anda akan disuguhi tampilan login (jika belum login) ada 2 pilihan Login atau SignUp (daftar sebagai member). Dalam Form signup akan ada validasi, ketika sobat berhasil akan di arahkan ke halaman pemberitahuan untuk login. Setelah berhasil login Anda akan di redirect ke halaman member_area. Ok langsung saja menuju ke praktiknya.
1. Konfigurasi CodeIgniter
Karena setiap bagian file codeigniternya di bedakan file-filenya maka perlu kita lakukan penyesuaian yakni mulai dari konfigurasinya.
Buka file di folder xampp\htdocs Anda yakni
codeigniterlabz5\application\config\config.php rubah isinya menjadi $config['base_url'] = 'http://localhost/codeigniterlabz5/';
//email adalah nama folder dalam localhost
Lalu buka file codeigniterlabz5\application\config\autoload.php dan load otomatis library database, helper form dan url , serta model membership_model dengan merubah.
$autoload['libraries'] = array('database', 'session'); $autoload['helper'] = array('url','form');
$autoload['model'] = array(membership_model');
Dan silahkan buka file codeigniterlabz5\application\config\database.php dan rubah pengaturan database :
3 $db['default']['hostname'] = 'localhost'; $db['default']['username'] = 'root'; $db['default']['password'] = 'root'; $db['default']['database'] = 'ciseries'; $db['default']['dbdriver'] = 'mysql';
Selanjutnya adalah merubah routes dari default_controller, tadinya adalah welcome kemudian kita rubah menjadi site, silahkan buka
codeigniterlabz5\application\config\routes.php , silahkan rubah menjadi $route['default_controller'] = "site";
Yang terakhir adalah konfigurasi session , silahkan buka
codeigniterlabz5\application\config\config.php , silahkan rubah menjadi $config['encryption_key'] = '1234567';
2. Membuat Database
Buatlah database bernama ciseries dengan tabel bernama data yang mempunyai 6 id, nama_depan, nama_belakang, username, password, email_address.
CREATE TABLE IF NOT EXISTS membership ( id int(32) NOT NULL AUTO_INCREMENT, nama_depan varchar(75) NOT NULL, nama_belakang varchar(75) NOT NULL, username varchar(75) NOT NULL, password varchar(40) NOT NULL, email_address varchar(75) NOT NULL, PRIMARY KEY (id)
4
3. Membuat Model membership_model
Silahkan buat site_model di folder xampp\htdocs Anda yakni di
codeigniterlabz5\application\models\membership_model.php isikan dengan <?php
class Membership_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('membership'); if($query->num_rows == 1) { return true; } } function create_member() { $new_member_insert_data = array( 'nama_depan' => $this->input->post('first_name'), 'nama_belakang' => $this->input->post('last_name'), 'email_address' => $this->input->post('email_address'), 'username' => $this->input->post('username'), 'password' => md5($this->input->post('password')) );
$insert = $this->db->insert('membership', $new_member_insert_data); return $insert;
} }
function validate digunakan untuk memvalidasi hasil login Anda, jika username dan password yang dimasukkan cocok maka akan menghasilkan nilai true (benar). Dan untuk function create member digunakan untuk membuat member baru dengan memasukkan semua data ke field masing-masing..
5
4. Membuat Controller
Disini saya akan membuat 2 controller yaitu login.php dan site.php untuk yang pertama yaitu saya akan membuat
codeigniterlabz5\application\controllers\login.php sebagai berikut : <?php
class Login extends CI_Controller { function index() { $data['main_content'] = 'login_form'; $this->load->view('includes/template', $data); } function validate_credentials() { $this->load->model('membership_model'); $query = $this->membership_model->validate();
if($query) // jika data user benar { $data = array( 'username' => $this->input->post('username'), 'is_logged_in' => true ); $this->session->set_userdata($data); redirect('site/members_area'); }
else // username atau password salah { $this->index(); } } function signup() { $data['main_content'] = 'signup_form'; $this->load->view('includes/template', $data);
6 } function create_member() { $this->load->library('form_validation');
// field name, error message, validation rules
$this->form_validation->set_rules('first_name', 'Name', 'trim|required'); $this->form_validation->set_rules('last_name', 'Last Name', 'trim|required'); $this->form_validation->set_rules('email_address', 'Email Address', 'trim|required|valid_email');
$this->form_validation->set_rules('username', 'Username', 'trim|required|min_length[4]');
$this->form_validation->set_rules('password', 'Password', 'trim|required|min_length[4]|max_length[32]');
$this->form_validation->set_rules('password2', 'Password Confirmation', 'trim|required|matches[password]'); if($this->form_validation->run() == FALSE) { $this->load->view('signup_form'); } else { $this->load->model('membership_model'); if($query = $this->membership_model->create_member()) { $data['main_content'] = 'signup_successful'; $this->load->view('includes/template', $data); } else { $this->load->view('signup_form'); } } } function logout() { $this->session->sess_destroy();
7 $this->index();
} }
Selanjutnya adalah codeigniterlabz5\application\controllers\site.php sebagai berikut :
<?php
class Site extends CI_Controller { function __construct() { parent::__construct(); $this->is_logged_in(); } function members_area() { $this->load->view('logged_in_area'); }
function another_page() // just for sample {
echo 'good. you\'re logged in.'; }
function is_logged_in() {
$is_logged_in = $this->session->userdata('is_logged_in'); if(!isset($is_logged_in) || $is_logged_in != true)
{
echo 'You don\'t have permission to access this page. <a href="../login">Login</a>'; die(); //$this->load->view('login_form'); } } }
8
5. Membuat View
Di sini kita akan membuat view yang sudah support sistem templating, yakni ada header, ada footer, dan ada bodynya. Diwakili dengan
1. application/view/includes/header.php 2. application/view/includes/footer.php 3. application/view/includes/template.php
Silahkan membuat folder includes di dalam folder view yang ada di bawah folder application
Sehingga struktur direktorinya nanti adalah codeigniterlabz5\application\view\includes
Kemudian kita akan membuat file header.php yang di letakkan di dalam folder includes tersebut, menjadi
codeigniterlabz5\application\view\includes\header.php Berisi <!DOCTYPE html> <html lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Sign Up!</title>
<link rel="stylesheet" href="<?php echo base_url();?>/css/style.css" type="text/css" media="screen" />
</head> <body>
Kemudian kita akan membuat file header.php yang di letakkan di dalam folder includes tersebut, menjadi
codeigniterlabz5\application\view\includes\footer.php Berisi
9 </body>
</html>
Kemudian kita akan membuat file template.php yang di letakkan di dalam folder includes tersebut, menjadi
codeigniterlabz5\application\view\includes\template.php Berisi <?php $this->load->view('includes/header'); ?> <?php $this->load->view($main_content); ?> <?php $this->load->view('includes/footer'); ?>
6. Membuat View Utama
Setelah membuat view yang berada dalam directory /application/view/includes maka kita akan membuat view utamanya di letakkan di /application/view saja View pertama login form letakkan di
codeigniterlabz5\application\view\login_form.php <?php $this->load->view('includes/header'); ?> <div id="login_form"> <h1>Login, Fool!</h1> <?php echo form_open('login/validate_credentials'); echo form_input('username', 'Username'); echo form_password('password', 'Password'); echo form_submit('submit', 'Login');
echo anchor('login/signup', 'Create Account'); echo form_close();
10 ?>
</div><!-- end login_form-->
<?php $this->load->view('includes/footer'); ?>
View yang selanjutnya adalah signup form letakkan di codeigniterlabz5\application\view\signup_form.php Berisi <?php $this->load->view('includes/header'); ?> <h1>Create an Account!</h1> <fieldset> <legend>Personal Information</legend> <?php echo form_open('login/create_member');
echo form_input('first_name', set_value('first_name', 'First Name')); echo form_input('last_name', set_value('last_name', 'Last Name'));
echo form_input('email_address', set_value('email_address', 'Email Address')); ?> </fieldset> <fieldset> <legend>Login Info</legend> <?php
echo form_input('username', set_value('username', 'Username')); echo form_input('password', set_value('password', 'Password')); echo form_input('password2', 'Password Confirm');
echo form_submit('submit', 'Create Acccount'); ?>
<?php echo validation_errors('<p class="error">'); ?> </fieldset>
11 View yang selanjutnya adalah signup successfull letakkan di
codeigniterlabz5\application\view\ signup_successful.php Berisi
<h1>Congrats!</h1>
<p>Your account has not been created. <?php echo anchor('login', 'Login Now');?></p>
View yang selanjutnya adalah signup successfull letakkan di codeigniterlabz5\application\view\logged_in_area.php Berisi <!DOCTYPE html> <html lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>untitled</title>
</head> <body>
<h2>Selamat datang kembali, <?php echo $this->session->userdata('username'); ?>!</h2>
<p>This section represents the area that only logged in members can access.</p>
<h4><?php echo anchor('login/logout', 'Logout'); ?></h4> </body>
</html>
Dan selanjutnya adalah file css yang di letakkan di luar system letakkan di xampp\htdocs\codeigniterlabz5\
12 body { background: #b6b6b6; margin: 0; padding: 0; font-family: arial; } #login_form { width: 300px;
background: #f0f0f0 url(../img/login_bg.jpg) repeat-x 0 0; border: 1px solid white;
margin: 250px auto 0; padding: 1em; -moz-border-radius: 3px; } h1,h2,h3,h4,h5 { margin-top: 0;
font-family: arial black, arial; text-align: center; } input[type=text], input[type=password] { display: block; margin: 0 0 1em 0; width: 280px; border: 5px; -moz-border-radius: 1px; -webkit-border-radius: 1px; padding: 1em; } input[type=submit], form a { border: none; margin-right: 1em; padding: 6px; text-decoration: none; font-size: 12px; -moz-border-radius: 4px; background: #348075; color: white; box-shadow: 0 1px 0 white; -moz-box-shadow: 0 1px 0 white; -webkit-box-shadow: 0 1px 0 white; }
13
input[type=submit]:hover, form a:hover { background: #287368; cursor: pointer; }
/* Validation error messages */ .error { color: #393939; font-size: 15px; } fieldset { width: 300px; margin: auto; margin-bottom: 2em; display: block; } /* FOR FUN */ h1 { text-shadow: 0 1px 0 white; }
/* Not necessary. Just the "tutorial created by" stuff at the bottom */
#tutInfo {
background: #e3e3e3; border-top: 1px solid white; position: absolute;
bottom: 0; width: 100%;
padding: .7em .7em .7em 2em; }