Hands-On Lab
Code Igniter 2.1.0
Created By
: Willy Achmat Fauzi
Lab version
: 1.0
Contents
OVERVIEW ... 4
BAB 1: KONFIGURASI CODEIGNITER ... 5
Task 1 – Konfigurasi CodeIgniter ... 5
Task 2 – Konfigurasi Tema ... 6
BAB 2: MEMBUAT LAYOUT UTAMA... 8
Task 1 – Membuat Controller ... 8
Task 2 – Membuat View Template ... 8
BAB 3: DATA MODELING ... 23
Task 1 – Membuat Conceptual Data Model ... 23
Task 2 – Relationship pada CDM ... 27
Task 3 – Phisical Data Model ... 31
Task 4 – Generate Script ... 33
Task 5 – Intellisense Pada Netbeans & CodeIgniter ... 36
BAB 4: MANAJEMEN CONTROLLER ... 38
Task 1 – Inhertiance Pada CodeIgniter Controller ... 38
Task 2 – Menampilkan menu secara dinamis ... 39
Task 3 – Clean URL pada XAMPP web server ... 48
BAB 5: PENGATURAN HAK AKSES ... 50
Task 1 – Pembuatan Desain Halaman Login... 50
Task 2 – Redirect ke halaman login ... 53
Task 3 – Mekanisme Login ... 54
Task 4 – Pembatasan Hak Akses (menu) ... 64
BAB 6: CRUD ... 68
Task 1 – Menampilkan Data ... 68
Task 2 – Menambahkan Fitur Pagging ... 73
Task 3 – Insert Data ... 80
Task 4 – Edit Data ... 93
Task 5 – Delete Data ... 99
BAB 7: BULK ACTION ... 109
BAB 8: PATTERN IMPLEMENTATION ... 110
BAB 9: CODE GENERATION ... 111
Overview
Pada pelatihan ini difokuskan untuk dapat membuat aplikasi sederhana dengan codeigniter dan power
designer 15 sebagai database modeler.
Objectives
Pada pelatihan ini akan dibahas tentang :
Code Igniter
◦ MVC
◦ Session
◦ Pagging
◦ Authentication
◦ Menu Management
Power Designer
◦ Data Modeling (CDM, PDM)
◦ Code Generation
System Requirements
Perlu disiapkan software berikut untuk dapat mengikuti lab ini:
XAMPP
Power Designer 15
Netbeans 7.1
Code Igniter 2.1
BAB 1: Konfigurasi CodeIgniter
Pada bab ini akan dibahas bagaimana konfigurasi CodeIgniter yang akan berjalan di web server Apache.
Sebelumnya install terlebih dahulu XAMPP, Power Designer 15 dan Netbeans 7.1.
Task 1 – Konfigurasi CodeIgniter
Download CodeIgniter versi 2.1 pada alamat web:
http://codeigniter.com/downloads/
Setelah itu extract dan pindahkan ke web server pada folder :
C:\xampp\htdocs\training
Buat project baru pada Netbeans :
File -> New Project -> PHP -> PHP Application From Exsisting Source.
Kemudian arahkan source folder ke folder yang telah di-copy-kan source code CodeIgniter.
Setelah membuat project kita akan melakukan konfigurasi awal untuk CodeIgniter.
File yang harus kita konfigurasi:
config.php, database.php, autoload.php
dan
route.php
,
semua file ini berada di dalam folder yang sama "application/system/config".
config.php
$config['base_url'] = "http://localhost/training/"; $config['encryption_key'] = 'codeignitertraining';database.php
$db['default']['hostname'] = "localhost"; $db['default']['username'] = "root"; $db['default']['password'] = ""; $db['default']['database'] = "training"; $db['default']['dbdriver'] = "mysql";autoload.php
$autoload['libraries'] = array('database', 'session'); $autoload['helper'] = array('url', 'form');
route.php
$route['default_controller'] = "dashboard";
Dari setting-setting di atas ‘base url’ adalah dimana halaman utama berada, kemudian database adalah
pengaturan koneksi ke database, sedangkan autoload adalah modul-modul apa saja yang
diinisialisasikan di awal program, sehingga tidak perlu tiap kali dibutuhkan dipanggil secara
berulang-ulang. Terakhir adalah ‘default controller’ yaitu fungsi yang pertama dipanggil bila alamat ‘base url’ yang
di set sebelumnya dipanggil.
Task 2 – Konfigurasi Tema
Download tema pada alamat web :
Buat folder assets pada direktori training.
C:\xampp\htdocs\training\assets
Extract file admin-xhtml, dan pindahkan beberapa direktori ke direktori asset antara lain :
-
css
-
images
-
js
BAB 2: Membuat Layout Utama
Pada bab ini akan difokuskan untuk membuat layout utama dengan tema yang telah disiapkan
sebelumnya, dan cara mengatur view agar lebih hemat kode dan mudah untuk di maintenance.
Task 1 – Membuat Controller
Sebelumnya kita telah mengatur default_controller pada file route.php. Sehingga controller inilah yang
pertama akan dijalankan saat kita membuka base uri dari web site yang telah kita konfigurasi. Controller
tersebut sebelumnya kita set dengan nama “dashboard”.
Untuk membuat controller sesuai dengan konfigurasi tersebut ikuti langkah-langkah berikut ini :
1. Buat file dengan nama dashboard.php pada direktori “training/applications/controllers/”.
2. Isi file tersebut dengan source code berikut :
dashboard.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class dashboard extends CI_Controller
{ function index(){ echo “Dashboard”; } } ?>
3. Buka halaman http://localhost/training/
Setelah menjalankan langkah tersebut maka pada layar web browser akan di tampilkan teks
“Dashboard” sesuai dengan yang kita tuliskan pada function index di class dashboard.
Task 2 – Membuat View Template
Pada kali kita akan membuat view lebih terorganisasi dengan baik, kode tidak perlu dituliskan secara
berulang-ulang pada controller pada beberapa view yang dipisahkan.
Berikut adalah contoh bila kita load view pada controller bila tema header, content, footer dan menu
dipisahkan.
Bila ada banyak halaman maka tentunya kita akan menuliskan ulang kode-kode yang sama, seperti
halnya yang terlihat seperti diatas, untuk mengurangi penulisan ulang kode-kode tersebut kita dapat
membuat sebuah Template View yang mengorganisasi semua view yang akan dipanggil. Contoh seperti
pada gambar berikut :
Seperti yang telah kita ketahui bahwa pada MVC pattern View digunakan sebagai User Interface
(Tampilan) yang terpisah dengan alur proses (rule). Untuk membuat Template View dapat dilakukan
dengan cara:
1. Buat file dengan nama container.php pada direktori “training/applications/views/”.
2. Isi file tersebut dengan source code berikut :
container.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"> <head> <?php $this->load->view('part/meta'); $this->load->view('part/script'); ?> </head> <body> <?php $this->load->view('part/header'); $this->load->view('part/menu'); $this->load->view($page); $this->load->view('part/footer'); ?> </body> </html>
3. Kemudian buat direktori part pada direktori “training/applications/views/”. Setelah itu buat 5 file
sebagai berikut :
meta.php
script.php
header.php
menu.php
footer.php
4. Dari tema yang telah kita download terdapat file text.html yang berisi satu halaman penuh halaman
web yang telah tertata rapi, seperti pada gambar berikut :
Buka source code dan kita pisahkan menjadi 5 bagian seperti yang telah kita atur sebelumnya.
Setelah kita pisahkan maka masing-masing file menjadi seperti berikut :
meta.php
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>{{title}}</title>
script.php
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/screen.css" type="text/css" media="screen" title="default" />
<!--[if IE]>
<link rel="stylesheet" media="all" type="text/css" href="<?php echo base_url(); ?>assets/css/pro_dropline_ie.css" />
<![endif]-->
<!-- jquery core -->
<script src="<?php echo base_url(); ?>assets/js/jquery/jquery-1.4.1.min.js" type="text/javascript"></script>
<!-- checkbox styling script -->
<script src="<?php echo base_url(); ?>assets/js/jquery/ui.core.js" type="text/javascript"></script> <script src="<?php echo base_url(); ?>assets/js/jquery/ui.checkbox.js"
type="text/javascript"></script>
<script src="<?php echo base_url(); ?>assets/js/jquery/jquery.bind.js" type="text/javascript"></script>
<script type="text/javascript"> $(function(){
$('input').checkBox(); $('#toggle-all').click(function(){ $('#toggle-all').toggleClass('toggle-checked'); $('#mainform input[type=checkbox]').checkBox('toggle'); return false; }); }); </script> <![if !IE 7]>
<!-- styled select box script version 1 -->
<script src="<?php echo base_url(); ?>assets/js/jquery/jquery.selectbox-0.5.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function() {
$('.styledselect').selectbox({ inputClass: "selectbox_styled" }); });
</script> <![endif]>
<!-- styled select box script version 2 -->
<script src="<?php echo base_url(); ?>assets/js/jquery/jquery.selectbox-0.5_style_2.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function() {
$('.styledselect_form_1').selectbox({ inputClass: "styledselect_form_1" }); $('.styledselect_form_2').selectbox({ inputClass: "styledselect_form_2" }); });
</script>
<!-- styled select box script version 3 -->
<script src="<?php echo base_url(); ?>assets/js/jquery/jquery.selectbox-0.5_style_2.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function() {
$('.styledselect_pages').selectbox({ inputClass: "styledselect_pages" }); });
</script>
<!-- styled file upload script -->
<script src="<?php echo base_url(); ?>assets/js/jquery/jquery.filestyle.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8"> $(function() {
image: "images/forms/upload_file.gif", imageheight : 29, imagewidth : 78, width : 300 }); }); </script>
<!-- Custom jquery scripts -->
<script src="<?php echo base_url(); ?>assets/js/jquery/custom_jquery.js" type="text/javascript"></script>
<!-- Tooltips -->
<script src="<?php echo base_url(); ?>assets/js/jquery/jquery.tooltip.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>assets/js/jquery/jquery.dimensions.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('a.info-tooltip ').tooltip({ track: true, delay: 0, fixPNG: true, showURL: false, showBody: " - ", top: -35, left: 5 }); }); </script>
<!-- date picker script -->
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/datePicker.css" type="text/css" /> <script src="<?php echo base_url(); ?>assets/js/jquery/date.js" type="text/javascript"></script> <script src="<?php echo base_url(); ?>assets/js/jquery/jquery.datePicker.js"
type="text/javascript"></script>
<script type="text/javascript" charset="utf-8"> $(function()
{
// initialise the "Select date" link $('#date-pick')
.datePicker(
// associate the link with a date picker {
createButton:false, startDate:'01/01/2005', endDate:'31/12/2020'
} ).bind(
// when the link is clicked display the date picker 'click', function() { updateSelects($(this).dpGetSelected()[0]); $(this).dpDisplay(); return false; } ).bind(
// when a date is selected update the SELECTs 'dateSelected',
function(e, selectedDate, $td, state) { updateSelects(selectedDate); } ).bind( 'dpClosed', function(e, selected) { updateSelects(selected[0]); } );
var updateSelects = function (selectedDate) {
var selectedDate = new Date(selectedDate);
$('#d option[value=' + selectedDate.getDate() + ']').attr('selected', 'selected'); $('#m option[value=' + (selectedDate.getMonth()+1) + ']').attr('selected', 'selected'); $('#y option[value=' + (selectedDate.getFullYear()) + ']').attr('selected', 'selected'); }
// listen for when the selects are changed and update the picker $('#d, #m, #y')
.bind( 'change', function() {
var d = new Date( $('#y').val(), $('#m').val()-1, $('#d').val() ); $('#date-pick').dpSetSelected(d.asString()); } );
// default the position of the selects to today var today = new Date();
updateSelects(today.getTime());
// and update the datePicker to reflect it... $('#d').trigger('change');
}); </script>
<!-- MUST BE THE LAST SCRIPT IN <HEAD></HEAD></HEAD> png fix -->
<script src="<?php echo base_url(); ?>assets/js/jquery/jquery.pngFix.pack.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $(document).pngFix( ); }); </script>
Untuk link kita tambahkan source code :
<?php echo base_url(); ?>assets/
Hal ini karena css, js dan image kita pindahkan ke direktori assets pada awal konfigurasi, dan
base_url() akan berisi http://localhost/training sehingga kita mendapatkan alamat style dan script
yang benar.
header.php
<div id="page-top-outer"> <!-- Start: page-top --> <div id="page-top"> <!-- start logo --> <div id="logo"><a href=""><img width="156" height="40" alt="" src="<?php echo base_url(); ?>assets/images/shared/logo.png"></a>
</div>
<!-- end logo -->
<!-- start top-search --> <div id="top-search">
<table border="0" cellpadding="0" cellspacing="0"> <tr>
<td><input type="text" value="Search" onblur="if (this.value=='') { this.value='Search'; }" onfocus="if (this.value=='Search') { this.value=''; }" class="top-search-inp" /></td>
<td>
<select class="styledselect">
<option value=""> All</option> <option value=""> Products</option> <option value=""> Categories</option> <option value="">Clients</option> <option value="">News</option>
</select> </td> <td>
<input type="image" src="<?php echo base_url(); ?>assets/images/shared/top_search_btn.gif" /> </td> </tr> </table> </div> <!-- end top-search --> <div class="clear"></div> </div> <!-- End: page-top --> </div> <div class="clear"> </div>
menu.php
<div class="nav-outer-repeat"> <!-- start nav-outer --> <div class="nav-outer"> <!-- start nav-right --> <div id="nav-right"> <div class="nav-divider"> </div><div class="showhide-account active"><img width="93" height="14" alt="" src="<?php echo base_url(); ?>assets/images/shared/nav/nav_myaccount.gif"></div>
<div class="nav-divider"> </div>
<a id="logout" href=""><img width="64" height="14" alt="" src="<?php echo base_url(); ?>assets/images/shared/nav/nav_logout.gif"></a>
<div class="clear"> </div> <!-- start account-content -->
<div class="account-content" style="display: none;"> <div class="account-drop-inner">
<a id="acc-settings" href="">Settings</a> <div class="clear"> </div>
<div class="acc-line"> </div>
<a id="acc-details" href="">Personal details </a> <div class="clear"> </div>
<div class="acc-line"> </div>
<a id="acc-project" href="">Project details</a> <div class="clear"> </div>
<div class="acc-line"> </div> <a id="acc-inbox" href="">Inbox</a> <div class="clear"> </div> <div class="acc-line"> </div>
<a id="acc-stats" href="">Statistics</a> </div> </div> <!-- end account-content --> </div> <!-- end nav-right --> <!-- start nav --> <div class="nav"> <div class="table">
<ul class="select"><li><a href="#nogo"><b>Dashboard</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--> <div class="select_sub">
<ul class="sub">
<li><a href="#nogo">Dashboard Details 1</a></li> <li><a href="#nogo">Dashboard Details 2</a></li> <li><a href="#nogo">Dashboard Details 3</a></li> </ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]--> </li>
</ul>
<div class="nav-divider"> </div>
<ul class="current"><li><a href="#nogo"><b>Products</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--> <div class="select_sub show">
<ul class="sub">
<li><a href="#nogo">View all products</a></li>
<li class="sub_show"><a href="#nogo">Add product</a></li> <li><a href="#nogo">Delete products</a></li>
</ul> </div>
<!--[if lte IE 6]></td></tr></table></a><![endif]--> </li>
</ul>
<div class="nav-divider"> </div>
<ul class="select"><li><a href="#nogo"><b>Categories</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--> <div class="select_sub">
<li><a href="#nogo">Categories Details 1</a></li> <li><a href="#nogo">Categories Details 2</a></li> <li><a href="#nogo">Categories Details 3</a></li> </ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]--> </li>
</ul>
<div class="nav-divider"> </div>
<ul class="select"><li><a href="#nogo"><b>Clients</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--> <div class="select_sub">
<ul class="sub">
<li><a href="#nogo">Clients Details 1</a></li> <li><a href="#nogo">Clients Details 2</a></li> <li><a href="#nogo">Clients Details 3</a></li> </ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]--> </li>
</ul>
<div class="nav-divider"> </div>
<ul class="select"><li><a href="#nogo"><b>News</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--> <div class="select_sub">
<ul class="sub">
<li><a href="#nogo">News details 1</a></li> <li><a href="#nogo">News details 2</a></li> <li><a href="#nogo">News details 3</a></li> </ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <div class="clear"></div> </div> <div class="clear"></div> </div> <!-- start nav --> </div> <div class="clear"></div>
<!-- start nav-outer --> </div> <div class="clear"></div>
footer.php
<div id="footer"> <!-- start footer-left --> <div id="footer-left">Admin Skin © Copyright Internet Dreams Ltd. <span id="spanYear"></span> <a href="">www.netdreams.co.uk</a>. All rights reserved.</div>
<!-- end footer-left --> <div class="clear"> </div> </div>
5. Setelah dipisahkan buat satu buah view kembali dengan nama dashboard_view.php pada direktori
“training/application/views”:
Kemudian isi file dengan source code berikut :
dashboard_view.php
<div id="content-outer"> <!-- start content --> <div id="content"> <!-- start page-heading --> <div id="page-heading"> <h1>Add product</h1> </div> <!-- end page-heading --><table width="100%" cellspacing="0" cellpadding="0" border="0" id="content-table"> <tbody><tr>
<th class="sized" rowspan="3"><img width="20" height="300" alt="" src="<?php echo base_url(); ?>assets/images/shared/side_shadowleft.jpg"></th>
<th class="topleft"></th>
<td id="tbl-border-top"> </td> <th class="topright"></th>
<th class="sized" rowspan="3"><img width="20" height="300" alt="" src="<?php echo base_url(); ?>assets/images/shared/side_shadowright.jpg"></th> </tr> <tr> <td id="tbl-border-left"></td> <td> <!-- start content-table-inner ... START --> <div id="content-table-inner"> <!-- start table-content --> <div id="table-content"> <h2>Sub Heading </h2>
<h3>Local Heading</h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor sit amet consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. dolore magna aliqua. Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor sit amet consectetur
<br> <br>
Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor sit amet consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. dolore magna aliqua. Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor sit amet consectetur
<br> <br>
Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor sit amet consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. dolore magna aliqua. Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor sit amet consectetur
</div>
<!-- end table-content --> <div class="clear"></div> </div>
<!-- end content-table-inner ...END --> </td> <td id="tbl-border-right"></td> </tr> <tr> <th class="sized bottomleft"></th> <td id="tbl-border-bottom"> </td> <th class="sized bottomright"></th> </tr> </tbody></table> <div class="clear"> </div> </div> <!-- end content --> <div class="clear"> </div> </div> <div class="clear"> </div>
6. Maka proses selanjutnya adalah membuat Controller yang memanggil view-view yang telah kita
buat sebelumnya.
Ubah file dashboard.php pada direktori controllers menjadi seperti berikut :
dashboard.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class dashboard extends CI_Controller {
function index() { $data['page'] = 'dashboard_view'; $this->load->view('container', $data); } } ?>
7. Silahkan akses halaman
http://localhost/training/ maka output pada browser akan terlihat seperti
berikut :
BAB 3: Data Modeling
Pada bab ini akan difokuskan untuk membuat database user, role dan menu dengan menggunakan
editor power designer, mulai dari CDM, PDM hingga export ke MySQL database serta membuat
class-class Model pada CodeIgniter.
Task 1 – Membuat Conceptual Data Model
CDM adalah model yang dibuat berdasarkan anggapan bahwa dunia nyata terdiri dari koleksi
obyek-obyek dasar yang dinamakan entitas (entity) serta hubungan (relationship) antara entitas-entitas itu.
Manfaat Penggunaan CDM dalam perancangan database :
Memberikan gambaran yang lengkap dari struktur basis data yaitu arti, hubungan, dan
batasan-batasan.
Alat komunikasi antar pemakai basis data, designer, dan analis.
1. Buka power designer 15, dan buat project baru dengan cara klik pada menu “File” -> “New Project”
beri nama ‘trainingci’.
2. Setelah itu buat Conceptual Data Model diagram, klik pada menu “File” -> “New Model”, maka
akan muncul dialog seperti berikut :
Pilih tab “Categories” -> “Information” -> “Conceptual Data” dan beri nama model “CDM Training”,
kemudian klik tombol “OK”, seperti yang terlihat pada gambar diatas.
3. Setelah CDM ditambahkan pada project simpan data, “File” -> “Save”. Kemudian aktifkan
Diagram_1 di dalam CDM Training.
4. Buat Entity (entitas), dengan menggunakan toolbox disebelah kanan diagram, entitas terlihat seperti
pada gambar di bawah.
Klik pada diagram, buat tiga entitas, seperti terlihat pada gambar berikut :
Name
: m_user
Attributes :
No
Name
Code
Data Type
Length
M
P
D
1
userid
USERID
Long integer
v
v
v
2
user_name
USER_NAME
Variable characters (30)
30
v
v
3
user_password
USER_PASSWORD
Variable characters
(100)
100
v
v
4
user_active
USER_ACTIVE
Boolean
v
v
Sehingga terlihat seperti pada gambar berikut :
Saat userid kita pilih sebagai (P) Primary maka akan pada tab Identifier akan ditambahkan record
dengan nama Identifier_1. Agar tidak membingungkan nantinya maka nama kita ubah dengan
pk_userid.
6. Setelah selesai maka pada diagram akan terlihat seperti berikut :
7. Langkah selanjutnya adalah mengubah dua entitas lainnya dengan nilai sebagai berikut :
Untuk Entity_2
Name
: m_role
Attributes
:
No Name
Code
Data Type
Length
M P D
1
roleid
ROLEID
Long integer
v
v v
2
role_name
ROLE_NAME
Variable characters (30)
30
v
v
3
role_description ROLE_DESCRIPTION Variable characters (120)
120
v
Identity
: pk_menuid
Name
: m_menu
Attributes
:
No
Name
Code
Data Type
Length
M P D
1
menuid
MENUID
Long integer
v
v v
2
menu_name
MENU_NAME
Variable characters (30)
30
v
v
3
menu_descripti
on
MENU_DESCRIPTIO
N
Variable characters (120)
120
v
4
menu_active
MENU_ACTIVE
Boolean
v
v
Identity
: pk_menuid
8. Setelah selesai maka pada diagram akan terlihat seperti berikut :
Task 2 – Relationship pada CDM
1. Untuk membuat relasi antara entitas klik pada notasi relationship yang ditunjukkan pada gambar
berikut :
2. Drag dari entitas satu ke entitas yang lain, hingga membentuk sebuah garis penghubung. Kali ini
yang direlasikan adalah :
Menu -> Role
Role -> User
3. Maka hasil outputnya akan terlihat seperti berikut :
4. Klik 2x pada Relationship_1, Ubah relasi m_menu dengan m_role menjadi seperti berikut :
Ubah Name menjadi m_role2menu dan Cardinalities menjadi Many to Many seperti terlihat pada
gambar berikut :
Kemudian klik OK.
5. Langkah selanjutnya hampir sama dengan langkah sebelumnya yaitu mengubah relasi dari m_user
ke m_role. Klik 2x pada Relationship_2, Ubah relasi m_user dengan m_role menjadi seperti
berikut :
Ubah Name menjadi m_user2role dan Cardinalities menjadi One to Many seperti terlihat pada
gambar berikut :
Kemudian klik OK.
Task 3 – Phisical Data Model
PDM Merupakan model yang menggunakan sejumlah tabel untuk menggambarkan data serta hubungan
antara data-data tersebut. Setiap tabel mempunyai sejumlah kolom di mana setiap kolom memiliki
nama yang unik.
Phisical Data Model sangat erat hubungannya dengan perancangan database secara fisik. Dalam
permodelan PDM dapat diturunkan dari CDM, karena sebenarnya dimana tabel-tabel dapat didapatkan
dari logika analisis pada Conceptual Data Model.
Pada power designer untuk membuat Phisical Data Model dari Conceptual Data Model adalah sebagai
berikut :
1. Klik pada Tools -> Generate Phisical Data Model …
2. Setelah muncul window silahkan ubah DBMS menjadi MySQL 5.0 dan Name menjadi PDM Training,
yang terlihat seperti berikut :
Kemudian klik tombol OK.
Kenapa muncul tabel baru? Hal tersebut dikarenakan Relationship pada Conceptual Data Model kita
buat Many to Many. Seperti yang saya jelaskan sebelumnya bahwa Conceptual Data Model adalah
objek dasar yang berdasarkan analisis. Bagaimana implementasi untuk Many to Many di database
sebenarnya adalah membuat tabel diantara dua tabel yang dihubungkan.
4. Auto Increment hanya ada pada Phisical Data Model dengan Jenis database tertentu, sehingga
karena kita tidak bisa mendefinisikan Auto Increment pada CDM, Sehingga kita definiskan saat
model telah menjadi PDM.
Untuk kali ini kita ubah primary key pada 3 tabel m_user, m_role, dan m_menu menjadi auto
increment.
Untuk tabel m_user, klik 2x pada tabel m_user kemudian klik pada tab Column. Pilih column dengan
atribut P (Primary) untuk tabel m_user columnnya adalah userid. setelah itu klik 2x lagi. Maka akan
muncul window baru untuk column properties, check identity seperti pada gambar berikut :
5. Lakukan proses yang sama seperti pada Task 3, No 4 untuk m_role dan m_menu.
Task 4 – Generate Script
Setelah PDM selesai kita akan memindahkan diagram tersebut ke database yang sesungguhnya yaitu
MySQL 5.0.
1. Untuk membuat script dari diagram tersebut adalah dengan klik pada menu Database -> Generate
Database. Sehingga tampil seperti pada diagram berikut :
2. Untuk penstandaran penamaan tabel, untuk training kali ini kita akan menggunakan “lowercase”
(huruf kecil), untuk pengaturannya dapat dilihat pada menu Format pada Database Generation.
3. Untuk melihat hasilnya dapat dilihat pada tab Preview, seperti pada gambar berikut :
4. Setelah itu klik OK.
5. Buka phpmyadmin pada alamat :
http://localhost/phpmyadmin/
6. Bila anda pertama kali install, atau tidak melakukan perubahan account sama sekali pada XAMPP
maka defaultnya username = “root”, dan password = “”
7. Klik pada tab Database , buat database baru dengan nama “training” seperti terlihat pada gambar
berikut :
Kemudian tekan tombol Create
8. Aktifkan database training, dengan klik pada menu sebelah kiri dengan nama “training” seperti pada
gambar berikut :
9. Masuk ke tab Import, kemudian browse file hasil output dari PDM tadi. Setelah itu klik “GO”.
Gambar terlihat seperti berikut :
10. Jika berhasil maka akan tampil output seperti berikut :
Task 5 – Intellisense Pada Netbeans & CodeIgniter
Tambahkan baris kode berikut agar netbeans dapat mengetahui atribut-atribut dari kelasnya
(menyalakan intellisense).
Buat file dengan nama helper.php pada folder training yang terletak paling luar dan isikan dengan baris
kode berikut :
helper.php
<?php /*** @property CI_DB_active_record $db * @property CI_DB_forge $dbforge * @property CI_Benchmark $benchmark * @property CI_Calendar $calendar * @property CI_Cart $cart
* @property CI_Config $config
* @property CI_Controller $controller * @property CI_Email $email
* @property CI_Encrypt $encrypt * @property CI_Exceptions $exceptions
* @property CI_Form_validation $form_validation * @property CI_Ftp $ftp
* @property CI_Hooks $hooks
* @property CI_Image_lib $image_lib * @property CI_Input $input
* @property CI_Language $language * @property CI_Loader $load * @property CI_Log $log * @property CI_Model $model * @property CI_Output $output
* @property CI_Parser $parser * @property CI_Profiler $profiler * @property CI_Router $router * @property CI_Session $session * @property CI_Sha1 $sha1 * @property CI_Table $table
* @property CI_Trackback $trackback * @property CI_Typography $typography * @property CI_Unit_test $unit_test * @property CI_Upload $upload * @property CI_URI $uri
* @property CI_User_agent $user_agent * @property CI_Validation $validation * @property CI_Xmlrpc $xmlrpc
* @property CI_Xmlrpcs $xmlrpcs * @property CI_Zip $zip
*/
class CI_Controller {}; /**
* @property CI_DB_active_record $db * @property CI_DB_forge $dbforge * @property CI_Config $config * @property CI_Loader $load * @property CI_Session $session */
class CI_Model {}; ?>
BAB 4: Manajemen Controller
Pada kali ini lebih difokuskan untuk mengatur controller agar tidak melakukan coding berulang-ulang,
penerapan inheritance pada controller dan pengaturan menu.
Task 1 – Inhertiance Pada CodeIgniter Controller
1. Untuk menurunkan class CI_Controller, CodeIgniter memiliki aturan yang harus dipenuhi sebelum
kita melakukan penurunan class. Penurunan untuk core library CodeIgniter adalah dengan
menambahkan file pada direktori “application/core” dengan nama file diawali dengan prefik
tertentu sesuai dengan configurasi pada file application/config/config.php, seperti terlihat sebagai
berikut :
config.php
$config['subclass_prefix'] = 'MY_';
Sehingga nama file yang akan dibuat diawali dengan prefix “MY_”.
2. Buat file “MY_Controller.php” pada direktori “application/core” setelah itu isikan dengan kode
berikut untuk menurunkan dari class CI_Controller.
MY_Controller.php
<?phpclass MY_Controller extends CI_Controller { public function __construct() {
parent::__construct(); }
} ?>
3. Ubah file dashboard.php pada direktori “application/controller” yang sebelumnya extend dari class
CI_Controller menjadi MY_Controller.
dashboard.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class dashboard extends MY_Controller {
function index() { $data['page'] = 'dashboard_view'; $this->load->view('container', $data); } } ?>
4. Saat ini kita telah menurunkan class CI_Controller, pastikan anda tetap dapat mengakses halaman
http://localhost/training/ tanpa error.
Task 2 – Menampilkan menu secara dinamis
1. Kita buat terlebih dahulu data sample menu, seperti terlihat sebagai berikut :
INSERT INTO `m_menu` (`menu_id`, `menu_name`, `menu_description`, `menu_active`) VALUES (1, 'Dashboard', 'Dashboard', 1),
(2, 'Client', 'Client', 1), (3, 'Product', 'Product', 1), (4, 'User', 'User', 1);
2. Jalankan script tersebut pada phpmyadmin, dengan klik pada database training, kemudian pilih
menu SQL, setelah itu ketikkan kode tersebut pada text area query, kemudian tekan GO, seperti
pada gambar berikut :
3. Setelah itu kita buat class Model untuk pengaturan menu tersebut. Kita buat file dengan nama
menu_model.php pada direktori “application/models”.
menu_model.php
<?phpclass Menu_model extends CI_Model { function get_all_menu(){ $all_menu = $this->db->get('m_menu'); return $all_menu->result_object(); } } ?>
Sintaks query diatas mungkin kurang familiar dipakai, sintaks seperti diatas dinamakan ActiveRecord
dengan tujuan untuk menyederhanakan penulisan kode untuk berinteraksi dengan database, dan
tentunya untuk dapat digunakan pada beberapa database (standarisasi penulisan sintaks). Untuk
lebih detilnya silahkan baca pada halaman : http://en.wikipedia.org/wiki/Active_record_pattern.
Untuk detil fungsi dan cara penggunaan model pada CodeIgniter silahkan baca pada halaman :
http://codeigniter.com/user_guide/general/models.html.
$this->db->get('m_menu');
Akan menghasilkan output query :
select * from m_menu4. Setelah membuat model, maka kita akan integrasikan dengan file dashboard.php pada direktori
“application/controllers/”, sehingga file menjadi seperti berikut :
dashboard.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class dashboard extends MY_Controller {
function index() { $this->load->model('Menu_model'); $this->menus = $this->Menu_model->get_all_menu(); $data['page'] = 'dashboard_view'; $this->load->view('container', $data); } } ?>
5. Setelah controller, kita akan mengubah view. Untuk itu buka file menu.php pada direktori
“application/views/part/”. Ubah script yang sebelumnya menjadi seperti berikut :
menu.php
<div class="nav-outer-repeat"> <!-- start nav-outer --> <div class="nav-outer"> <!-- start nav-right --> <div id="nav-right"> <div class="nav-divider"> </div><div class="showhide-account active"><img width="93" height="14" alt="" src="<?php echo base_url(); ?>assets/images/shared/nav/nav_myaccount.gif"></div>
<div class="nav-divider"> </div>
<a id="logout" href=""><img width="64" height="14" alt="" src="<?php echo base_url(); ?>assets/images/shared/nav/nav_logout.gif"></a>
<div class="clear"> </div> <!-- start account-content -->
<div class="account-content" style="display: none;"> <div class="account-drop-inner">
<a id="acc-settings" href="">Settings</a> <div class="clear"> </div>
<div class="acc-line"> </div>
<a id="acc-details" href="">Personal details </a> <div class="clear"> </div>
<div class="acc-line"> </div>
<a id="acc-project" href="">Project details</a> <div class="clear"> </div>
<div class="acc-line"> </div> <a id="acc-inbox" href="">Inbox</a> <div class="clear"> </div> <div class="acc-line"> </div> <a id="acc-stats" href="">Statistics</a> </div> </div> <!-- end account-content --> </div> <!-- end nav-right --> <!-- start nav --> <div class="nav"> <div class="table">
<?php foreach ($this->menus as $menu){ ?>
<ul class="select"><li><a href="#nogo"><b><?php echo $menu->menu_name; ?></b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--> <div class="select_sub">
<ul class="sub">
<li><a href="<?php echo site_url($menu->menu_name); ?>">View All <?php echo $menu->menu_name; ?></a></li>
<li><a href="<?php echo site_url($menu->menu_name . "/insert"); ?>">Add <?php echo $menu->menu_name; ?></a></li>
</ul> </div>
<!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <div class="nav-divider"> </div> <?php } ?> <div class="clear"></div> </div> <div class="clear"></div> </div> <!-- start nav -->
</div>
<div class="clear"></div> <!-- start nav-outer --> </div>
<div class="clear"></div>
6. Akses halaman http://localhost/training/ maka menu akan berubah seperti berikut :
7. Ketika kita klik pada link View All User, maka akan tampil error seperti gambar berikut :
Karena kita belum membuat controller untuk meng-handle request uri :
http://localhost/training/index.php/User
Langkah selanjutnya kita coba untuk membuat controller untuk menu user, buat file dengan nama
user.php
<?phpif (!defined('BASEPATH')) exit('No direct script access allowed'); class user extends MY_Controller {
function index () { $this->load->model('Menu_model'); $this->menus = $this->Menu_model->get_all_menu(); $data['page'] = 'user_view'; $this->load->view('container', $data); } } ?>
Kemudian kita buat user_view.php pada direktori “application/views/” yang berisi template grid
dari tema yang telah kita download sebelumnya dengan nama file “table.html”.
user_view.php
<div id="content-outer"> <!-- start content --> <div id="content"> <!-- start page-heading --> <div id="page-heading"> <h1>Add product</h1> </div> <!-- end page-heading --><table border="0" width="100%" cellpadding="0" cellspacing="0" id="content-table"> <tr>
<th rowspan="3" class="sized"><img src="<?php echo base_url(); ?>assets/images/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th> <th class="topleft"></th>
<td id="tbl-border-top"> </td> <th class="topright"></th>
<th rowspan="3" class="sized"><img src="<?php echo base_url(); ?>assets/images/shared/side_shadowright.jpg" width="20" height="300" alt="" /></th> </tr>
<tr>
<td id="tbl-border-left"></td> <td>
<!-- start content-table-inner ... START --> <div id="content-table-inner"> <!-- start table-content --> <div id="table-content"> <!-- start product-table ... --> <form id="mainform" action="">
<table border="0" width="100%" cellpadding="0" cellspacing="0" id="product-table">
<tr>
<th class="table-header-check"><a id="toggle-all" ></a> </th> <th class="table-header-repeat line-left minwidth-1"><a href="">Last Name</a> </th>
<th class="table-header-repeat line-left minwidth-1"><a href="">First Name</a></th> <th class="table-header-repeat line-left"><a href="">Email</a></th> <th class="table-header-repeat line-left"><a href="">Due</a></th> <th class="table-header-repeat line-left"><a href="">Website</a></th> <th class="table-header-options line-left"><a href="">Options</a></th> </tr> <tr> <td><input type="checkbox"/></td> <td>Sabev</td> <td>George</td> <td><a href="">[email protected]</a></td> <td>R250</td> <td><a href="">www.mainevent.co.za</a></td> <td class="options-width">
<a href="" title="Edit" class="icon-1 info-tooltip"></a> <a href="" title="Edit" class="icon-2 info-tooltip"></a> <a href="" title="Edit" class="icon-3 info-tooltip"></a> <a href="" title="Edit" class="icon-4 info-tooltip"></a> <a href="" title="Edit" class="icon-5 info-tooltip"></a> </td>
</tr>
<tr class="alternate-row">
<td><input type="checkbox"/></td> <td>Sabev</td>
<td>George</td>
<td><a href="">[email protected]</a></td> <td>R250</td>
<td><a href="">www.mainevent.co.za</a></td> <td class="options-width">
<a href="" title="Edit" class="icon-1 info-tooltip"></a> <a href="" title="Edit" class="icon-2 info-tooltip"></a> <a href="" title="Edit" class="icon-3 info-tooltip"></a> <a href="" title="Edit" class="icon-4 info-tooltip"></a> <a href="" title="Edit" class="icon-5 info-tooltip"></a> </td> </tr> <tr> <td><input type="checkbox"/></td> <td>Sabev</td> <td>George</td> <td><a href="">[email protected]</a></td> <td>R250</td> <td><a href="">www.mainevent.co.za</a></td> <td class="options-width">
<a href="" title="Edit" class="icon-1 info-tooltip"></a> <a href="" title="Edit" class="icon-2 info-tooltip"></a> <a href="" title="Edit" class="icon-3 info-tooltip"></a> <a href="" title="Edit" class="icon-4 info-tooltip"></a> <a href="" title="Edit" class="icon-5 info-tooltip"></a> </td> </tr> <tr class="alternate-row"> <td><input type="checkbox"/></td> <td>Sabev</td> <td>George</td> <td><a href="">[email protected]</a></td> <td>R250</td> <td><a href="">www.mainevent.co.za</a></td> <td class="options-width">
<a href="" title="Edit" class="icon-1 info-tooltip"></a> <a href="" title="Edit" class="icon-2 info-tooltip"></a> <a href="" title="Edit" class="icon-3 info-tooltip"></a> <a href="" title="Edit" class="icon-4 info-tooltip"></a> <a href="" title="Edit" class="icon-5 info-tooltip"></a> </td>
</tr> </table>
</form> </div>
<!-- end content-table -->
<!-- start actions-box ... --> <div id="actions-box">
<a href="" class="action-slider"></a> <div id="actions-box-slider">
<a href="" class="action-edit">Edit</a> <a href="" class="action-delete">Delete</a> </div>
<div class="clear"></div> </div>
<!-- end actions-box... -->
<!-- start paging... --> <table border="0" cellpadding="0" cellspacing="0" id="paging-table"> <tr>
<td>
<a href="" class="page-far-left"></a> <a href="" class="page-left"></a>
<div id="page-info">Page <strong>1</strong> / 15</div> <a href="" class="page-right"></a>
<a href="" class="page-far-right"></a> </td>
<td>
<select class="styledselect_pages">
<option value="">Number of rows</option> <option value="">1</option> <option value="">2</option> <option value="">3</option> </select> </td> </tr> </table> <!-- end paging... --> <div class="clear"></div> </div>
<!-- end content-table-inner ...END --> </td>
<td id="tbl-border-right"></td> </tr>
<tr> <th class="sized bottomleft"></th> <td id="tbl-border-bottom"> </td> <th class="sized bottomright"></th> </tr> </table> <div class="clear"> </div> </div> <!-- end content --> <div class="clear"> </div> </div> <div class="clear"> </div>
8. Klik link View All User pada http://localhost/training/
, maka akan tampil seperti berikut :
9. Untuk saat ini tentunya ada beberapa kode yang selalu di tuliskan pada tiap-tiap halaman, yaitu
fungsi untuk mendapatkan semua halaman,
$this->load->model('Menu_model');
$this->menus = $this->Menu_model->get_all_menu();
Kita pindahkan kode-kode tersebut ke dalam MY_Controller class, sehingga kita tidak perlu menulis
pada tiap-tiap fungsi untuk mendapatkan menu.
MY_Controller.php
<?phpclass MY_Controller extends CI_Controller { public function __construct() {
parent::__construct(); $this->loadmenu(); }
private function loadmenu() {
$this->load->model('Menu_model');
$this->menus = $this->Menu_model->get_all_menu(); }
} ?>
Jangan lupa untuk menghapus baris kode berikut pada dashboard.php dan user.php
$this->load->model('Menu_model');$this->menus = $this->Menu_model->get_all_menu();
Task 3 – Clean URL pada XAMPP web server
Alamat untuk mengakses menu adalah pada
http://localhost/training/index.php/User/ kita bisa
hilangkan index.php dalam url tersebut dengan cara berikut :
1. Buka command prompt (cmd)
2. Masuk ke folder dimana CodeIgniter ter-install, misal pada komputer ada pada drive C, sehingga
kode akan terlihat sebagai berikut :
cd C:\xampp\htdocs\training
3. Buat file .htaccess pada folder tersebut dengan sintaks copy con
C:\xampp\htdocs\training>copy con .htaccess
4. Setelah itu klik [enter] layar akan blank, kemudian ketikkan kode berikut :
RewriteEngine OnRewriteBase /training/
RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php/$1 [PT,L]
5. Klik [ctrl+z] maka akan muncul kode ^Z pada layar, kemudian tekan [enter] kembali.
6. Maka file .htaccess akan ada pada folder training, silahkan cek terlebih dahulu.
7. Konfigurasi selanjutnya adalah untuk apache, cari file httpd.conf misal xampp berada pada drive C:
C:\xampp\apache\conf\httpd.conf8. Buka file tersebut dan cari sintaks seperti berikut :
#LoadModule rewrite_module modules/mod_rewrite.so9. Hilangkan tanda (#) dan simpan perubahan, sehingga kode akan tampak sebagai berikut :
LoadModule rewrite_module modules/mod_rewrite.so10. Buka file config.php pada direktori C:\xampp\htdocs\training\system\application\config.
11. Ubah kode
$config['index_page'] = "index.php";
Menjadi
$config['index_page'] = "";
12. Jangan lupa restart xampp untuk Apache module
13. Buka halaman berikut :
http://localhost/training/User/
BAB 5: Pengaturan Hak Akses
Pada bab ini akan dijelaskan bagaimana metode autentikasi yang sebaiknya dilakukan, tidak hanya
pembatasan pada hak masuk aplikasi, namun pembatasan pada tiap-tiap halaman.
Task 1 – Pembuatan Desain Halaman Login
1. Buat file controller dengan nama “login.php” pada direktori “application/controllers” isikan dengan
kode berikut :
login.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class login extends CI_Controller {
function index() {
$this->load->view('login_view'); }
} ?>
2. Buat file view dengan nama “login_view.php” pada direktori “application/controllers” isikan
dengan kode berikut :
login_view.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"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Internet Dreams</title>
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/screen.css" type="text/css" media="screen" title="default" />
<!-- jquery core -->
<script src="<?php echo base_url(); ?>assets/js/jquery/jquery-1.4.1.min.js" type="text/javascript"></script>
<!-- Custom jquery scripts -->
<script src="<?php echo base_url(); ?>assets/js/jquery/custom_jquery.js" type="text/javascript"></script>
<!-- MUST BE THE LAST SCRIPT IN <HEAD></HEAD></HEAD> png fix -->
<script src="<?php echo base_url(); ?>assets/js/jquery/jquery.pngFix.pack.js" type="text/javascript"></script>
$(document).ready(function(){ $(document).pngFix( ); }); </script> </head> <body id="login-bg"> <!-- Start: login-holder --> <div id="login-holder"> <!-- start logo --> <div id="logo-login"> <a href="index.html">
<img src="<?php echo base_url(); ?>assets/images/shared/logo.png" width="156" height="40" alt="" /> </a> </div> <!-- end logo --> <div class="clear"></div> <!-- start loginbox ... --> <div id="loginbox"> <!-- start login-inner --> <div id="login-inner">
<table border="0" cellpadding="0" cellspacing="0"> <tr>
<th>Username</th> <td>
<input type="text" class="login-inp" /> </td>
</tr> <tr>
<th>Password</th> <td>
<input type="password" value="" onfocus="this.value=''" class="login-inp" /> </td> </tr> <tr> <th></th> <td valign="top">
<input type="checkbox" class="checkbox-size" id="login-check" /> <label for="login-check">Remember me</label></td>
</tr> <tr>
<th></th>
<td><input type="button" class="submit-login" /></td> </tr>
</table> </div>
<!-- end login-inner --> <div class="clear"></div>
<a href="" class="forgot-pwd">Forgot Password?</a> </div>
<!-- end loginbox -->
<!-- start forgotbox ... --> <div id="forgotbox">
<div id="forgotbox-text">Please send us your email and we'll reset your password.</div>
<!-- start forgot-inner --> <div id="forgot-inner">
<table border="0" cellpadding="0" cellspacing="0"> <tr>
<th>Email address:</th>
<td><input type="text" value="" class="login-inp" /></td> </tr>
<tr>
<th></th>
<td><input type="button" class="submit-login" /></td> </tr>
</table> </div>
<!-- end forgot-inner --> <div class="clear"></div>
<a href="" class="back-login">Back to login</a> </div> <!-- end forgotbox --> </div> <!-- End: login-holder --> </body> </html>
Untuk saat ini kita masih gunakan script statis, halaman hanya untuk display saja. Untuk mekanisme
login akan dibahas pada Task selanjutnya.
3. Saat kita akses halaman
http://localhost/training/login/ maka output pada browser akan terlihat
seperti berikut :
Task 2 – Redirect ke halaman login
Saat kita mengakses halaman
http://localhost/training/ halaman utama dapat tampil tanpa ada
mekanisme login. Kita ubah menjadi halaman dashboard hanya boleh diakses oleh user yang telah login
saja, bagi yang belum akan di-arahkan ke halaman login.
1. Tambahkan baris kode ke dalam file “MY_Controller.php” pada direktori “application/core” untuk
pengecekan user melalui session, sehingga baris kode menjadi seperti berikut :
MY_Controller.php
<?phpclass MY_Controller extends CI_Controller { public function __construct() {
parent::__construct(); $this->checkauth(); $this->loadmenu(); }
private function loadmenu() {
$this->load->model('Menu_model');
$this->menus = $this->Menu_model->get_all_menu(); }
private function checkauth() {
if (!$this->session->userdata('is_login')) { redirect('/login', 'refresh');
} } }
?>
2. Coba kembali mengakses halaman pada alamat url
http://localhost/training/, maka kita akan di
alihkan (redirect) ke halaman login. Saat ini kita telah berhasil memproteksi halaman-halaman
backend yang telah kita buat.
Task 3 – Mekanisme Login
1. Sebelum kita mulai untuk membuat mekanisme login, yang pertama adalah menambahkan data
user dan role terlebih dahulu untuk mencoba.
INSERT INTO `training`.`m_role` (`role_id`, `role_name`, `role_description`) VALUES (1, 'admin', 'admin');
INSERT INTO `training`.`m_user` (`userid`, `role_id`, `user_name`, `user_password`, `user_active`) VALUES (1, 1, 'admin', '7c4a8d09ca3762af61e59520943dc26494f8941b', 1);
Kita melakukan hashing dengan metode sha1 untuk password, sebelum di hash passwordnya adalah
“123456”.
2. Kita buat dulu model yang digunakan untuk pengecekan user pada database, kita buat file dengan
nama “user_model.php” pada direktori “application/models”. Isikan dengan kode berikut :
user_model.php
<?php
class User_model extends CI_Model { function login($username, $password){ $this->db->select('*'); $this->db->from('m_user'); $this->db->where('user_name', $username); $this->db->where('user_password', sha1($password)); $this->db->where('user_active', 1); $objUsers = $this->db->get()->result_object(); if (count($objUsers) == 1){ return $objUsers[0]; } else{ return FALSE; } } } ?>
