Belajar Codeigniter #Part 7: Login and Session

Diposting oleh pada tanggal
0

Belajar Codeigniter #Part 3 : Templating Menggunakan Bootstrap

Diposting oleh pada tanggal
Logo Codeigniter, sumber cangkalinfo.blogspot.com

Assalamu alaikum warohmatullahi wabarokatuh

Templating Menggunakan Bootstrap - Kembali lagi dengan seri tutorial Codeigniter, kali ini kita memasuki part 3, dan di part 3 ini kita akan membahas templating menggunakan Bootstrap CSS Framework. Bagi kalian yang nyasar di tutorial ini kalian bisa membaca tutorial sebelumnya pada part 2 yaitu mengenai Koneksi Codeigniter dengan database MySQL.

Namun sebelum kita membahas tentang templating ada baiknya kita mengetahui terlebih dahulu mengenai konsep MVC (Model View Controller) yang digunakan oleh Codeigniter. Saya sengaja tidak membuat pembahasan tersendiri mengenai MVC agar seri tutorial ini tidak terlalu panjang namun tidak mengurangi tujuannya hehehe.

Langsung saja kita menuju road map apa saja yang akan kita bahas di artikel part 3 ini, kali ini kita akan membahas mengenai:

  1. Konsep MVC
  2. Memasang Bootstrap pada Project Codeigniter (AdminLTE)
  3. Template Inheritance
  4. Kesimpulan

1.    Konsep MVC (Model View Controller)

Konsep MVC digunakan dengan tujuan untuk mempermudah proses development dengan cara mengelompokkan dan memisahkan kode sesuai dengan kegunaan atau fungsinya, sehingga kode yang kita tulis tidak campur-campur. Manfaat lainnya supaya memudahkan kita dalam proses maintenance dan pengembangan di kemudian hari karena strukturnya kodenya jelas.

Yang dimaksud dengan memisahkan kode sesuai fungsinya adalah membagi menjadi tiga bagian yaitu model, view dan controller.

a.    Model

Kode yang terdapat di Model biasanya untuk menangani logic yang berhubungan dengan data, dengan kata lain Model adalah bagian yang langsung berhubungan dengan database. Sehingga akan banyak ditemukan query untuk manipulasi data seperti Create, Read, Update dan Delete pada bagian model, model tidak bisa langsung berhubungan dengan View (tampilan).

b.    View

View adalah bagian yang menangani tampilan atau UI/UX, user akan berinteraksi dengan aplikasi kita melalui view. Informasi, tabel, gambar maupun form diletakkan di view. Kebanyakan dari view berisi kode HTML dan Javascript namun tidak jarang juga kita menemukan script PHP di dalam view.

c.    Controller

Peran controller adalah mengatur hubungan antara model dan view, request dari user akan ditangani oleh controller, kemudian controller menentukan apakah requestnya memerlukan akses data dari database atau tidak, jika membutuhkan data maka controller akan mengambil data melalui model dan menampilkannya di view, jika tidak memerlukan data maka controller akan langsung memerintahkan view untuk menampilkan tampilan sesuai dengan request dari user.




2.       Memasang Bootstrap pada Project Codeigniter

Nah kali ini kita akan memasang Bootstrap, berarti kita akan banyak mengolah tampilan, berarti kita banyak bersinggungan dengan View. Sedikit mengenai Bootstrap, Bootstrap adalah framework CSS yang akan memudahkan kita dalam pembuatan tampilan.

Kenapa mudah ?

Karena Bootstrap menyediakan banyak fitur mulai dari grid layouting yang akan memudahkan pembagian penempatan komponen di layar (halaman) web, coloring, card dan masih banyak lainnya, yang mana ketika kita akan menggunakannya kita tinggal memanggil class-nya saja, dan yang paling penting adalah bootstrap membuat aplikasi kita responsive, artinya bisa menyesuaikan ukuran layar.

Di atas saya menyebutkan bahwa pada bagian 2 kita akan menggunakan AdminLTE, yaitu template halaman admin yang dibuat menggunakan bootstrap, jadi di dalam AdminLTE nanti kita akan mengguanakan class-classnya bootstrap. Jadi nanti tidak akan download bootstrap tapi langsung download AdminLTE, tapi kalau kalian ingin belajar bootstrap dan membaca dokumentasinya kalian bisa mengunjungi website resminya Bootstrap



Langkah untuk menggunakannya adalah seperti berikut:

a.    Download AdminLTE

Kalian bisa mendownload AdminLTE terlebih dahulu di link ini.



Setelah selesai mendownload kalian akan mendapat file dengan format .zip, lalu extract file tersebut.



b.    Memasang AdminLTE pada Codeigniter

Buka folder project Codeigniter kita, yaitu folder belajarci yang sudah kita buat pada tutorial part 1, kemudian buat folder baru dengan nama assets di dalam folder belajarci.


Kemudian buka lagi folder AdminLTE yang baru saja kalian extract, lalu copy folder bower_components, dist dan plugins kemudian pastekan ke dalam folder assets yang baru saja kita buat di dalam project Codeigniter kita.



Sehingga susunan folder kita menjadi seperti berikut:



Kenapa kita meng copy semua folder di atas?

Karena di dalam folder tersebut terdapat file CSS maupun Javascript yang akan kita panggil dan akan kita gunakan, memang ukurannya agak besar. Sebenarnya kita bisa saja hanya mengambil file-file yang akan kita gunakan saja seperti jquery.js , bootstrap.css, bootstrap.js dan lain-lain. Tapi untuk keperluan belajar kali ini kita copy semuanya saja biar cepet wkwkwk.


3.    Template Inheritance

Pada bagian ini kita akan membahas bagaimana cara membuat templating atau layouting. Sebagai gambaran, biasanya halaman website memiliki navigasi di bagian atasnya atau sidebar di bagian samping dan konten di bagian tengan, nah biasanya yang berubah-ubah hanya bagian content saja, sedangkan bagian navigasi dan sidebar akan tetap.

Sebenarnya bisa saja kita menulis semua mulai dari navbar, sidebar dan content pada masing-masing halaman, tapi itu bukan cara yang bagus dan akan sulit untuk dikembangkan ataupun dimaintenance.

Langsung saja, berikut adalah langkah langkahnya:

a.    Buka folder project Codeigniter kalian “belajarci”, dan buatlah folder dengan nama layout di dalam folder application/view kemudian buatlah file dengan nama head.php , header.php , content.php , sidebar.php , js.php , modal.php , wrapper.php , footer.php . Sehingga struktur folder kita menjadi seperti berikut:



b.    Buka file index.html yang terdapat pada folder AdminLTE di teks editor, disini saya menggunakan SublimeText. Dari file ini kita akan melakukan templating, kita hanya akan menggunakan beberapa bagian dari keseluruhan kode yang ada di file index.html.

Jika kalian buka di browser maka kalian akan melihat halaman admin yang lengkap dengan berbagai fitur, tapi kita hanya akan menggunakan seperlunya saja.

Kita akan mengambil bagian-bagian tertentu saja kemudian nanti akan kita pindahkan ke dalam file yang sudah kita buat di dalam folder layout tadi, misalkan file js.php hanya berisi kode Javascript, kemudian file modal.php hanya berisi modal dst.

c.     Mulai memotong-motong bagian, pertama copy mulai dari baris pertama sampai tag penutup </head> kemudian pindahkan ke file head.php yang sudah kita buat tadi.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title><?php echo $title ?></title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="<?php echo base_url('assets/bower_components/bootstrap/dist/css/bootstrap.min.css')?>">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="<?php echo base_url('assets/bower_components/font-awesome/css/font-awesome.min.css')?>">
  <!-- Ionicons -->
  <link rel="stylesheet" href="<?php echo base_url('assets/bower_components/Ionicons/css/ionicons.min.css')?>">
  <!-- Theme style -->
  <link rel="stylesheet" href="<?php echo base_url('assets/dist/css/AdminLTE.min.css')?>">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="<?php echo base_url('assets/dist/css/skins/_all-skins.min.css')?>">
  <!-- Morris chart -->
  <link rel="stylesheet" href="<?php echo base_url('assets/bower_components/morris.js/morris.css')?>">
  <!-- jvectormap -->
  <link rel="stylesheet" href="<?php echo base_url('assets/bower_components/jvectormap/jquery-jvectormap.css')?>">
  <!-- Date Picker -->
  <link rel="stylesheet" href="<?php echo base_url('assets/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css')?>">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="<?php echo base_url('assets/bower_components/bootstrap-daterangepicker/daterangepicker.css')?>">
  <!-- bootstrap wysihtml5 - text editor -->
  <link rel="stylesheet" href="<?php echo base_url('assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css')?>">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>


d.    Kemudian copy lagi dari tag <body> sampai akhir tag penutup </header> dan pindahkan ke file header.php. Kode di bawah sudah bukan kode full lagi, karena saya hanya mengambil sebagian menu saja, tidak semuanya saya copas.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <header class="main-header">
    <!-- Logo -->
    <a href="index2.html" class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->
      <span class="logo-mini"><b>A</b>LT</span>
      <!-- logo for regular state and mobile devices -->
      <span class="logo-lg"><b>Admin</b>LTE</span>
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>

      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <li class="dropdown user user-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
              <span class="hidden-xs">Alexander Pierce</span>
            </a>
            <ul class="dropdown-menu">
              <!-- User image -->
              <li class="user-header">
                <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">

                <p>
                  Alexander Pierce - Web Developer
                  <small>Member since Nov. 2012</small>
                </p>
              </li>
              <li class="user-footer">
                <div class="pull-left">
                  <a href="#" class="btn btn-default btn-flat">Profile</a>
                </div>
                <div class="pull-right">
                  <a href="#" class="btn btn-default btn-flat">Sign out</a>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </header>


e.    Kemudian copy mulai dari tag <aside> sampai tag penutup </aside> dan pindahkan ke dalam file sidebar.php, cari tag aside yang paling atas setelah header, karena nanti di bawah juga ada tag aside tapi kita tidak menggunakan itu. Kode di bawah sudah bukan kode full lagi, karena saya hanya mengambil sebagian menu saja, tidak semuanya saya copas.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
  <aside class="main-sidebar">
    <section class="sidebar">
      <div class="user-panel">
        <div class="pull-left image">
          <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
        </div>
        <div class="pull-left info">
          <p>Alexander Pierce</p>
          <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
        </div>
      </div>
      <form action="#" method="get" class="sidebar-form">
        <div class="input-group">
          <input type="text" name="q" class="form-control" placeholder="Search...">
          <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
                </button>
              </span>
        </div>
      </form>
      <ul class="sidebar-menu" data-widget="tree">
        <li class="header">MAIN NAVIGATION</li>
        <li class="active treeview">
          <a href="#">
            <i class="fa fa-dashboard"></i> <span>Dashboard</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li class="active"><a href="index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
            <li><a href="index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
          </ul>
        </li>
      </ul>
    </section>
  </aside>


f.     Kemudian cari tag <footer> dan copy sampai akhir tag </footer> kemudian pindahkan ke file footer.php

1
2
3
4
5
6
7
  <footer class="main-footer">
    <div class="pull-right hidden-xs">
      <b>Version</b> 2.4.0
    </div>
    <strong>Copyright &copy; 2014-2016 <a href="https://adminlte.io">Almsaeed Studio</a>.</strong> All rights
    reserved.
  </footer>

g.    Selanjutnya copy semua Javascript, semua tag <script> sampai tag penutup </html> dan pastekan ke file js.php.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script src="<?php echo base_url('assets/bower_components/jquery/dist/jquery.min.js')?>"></script>
<script src="<?php echo base_url('assets/bower_components/jquery-ui/jquery-ui.min.js')?>"></script>
<script>
  $.widget.bridge('uibutton', $.ui.button);
</script>
<script src="<?php echo base_url('assets/bower_components/bootstrap/dist/js/bootstrap.min.js')?>"></script>
<script src="<?php echo base_url('assets/bower_components/raphael/raphael.min.js')?>"></script>
<script src="<?php echo base_url('assets/bower_components/morris.js/morris.min.js')?>"></script>
<script src="<?php echo base_url('assets/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js')?>"></script>
<script src="<?php echo base_url('assets/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js')?>"></script>
<script src="<?php echo base_url('assets/plugins/jvectormap/jquery-jvectormap-world-mill-en.js')?>"></script>
<script src="<?php echo base_url('assets/bower_components/jquery-knob/dist/jquery.knob.min.js')?>"></script>
<script src="<?php echo base_url('assets/bower_components/moment/min/moment.min.js')?>"></script>
<script src="<?php echo base_url('assets/bower_components/bootstrap-daterangepicker/daterangepicker.js')?>"></script>
<script src="<?php echo base_url('assets/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js')?>"></script>
<script src="<?php echo base_url('assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js')?>"></script>
<script src="<?php echo base_url('assets/bower_components/jquery-slimscroll/jquery.slimscroll.min.js')?>"></script>
<script src="<?php echo base_url('assets/bower_components/fastclick/lib/fastclick.js')?>"></script>
<script src="<?php echo base_url('assets/dist/js/adminlte.min.js')?>"></script>
<script src="<?php echo base_url('assets/dist/js/pages/dashboard.js')?>"></script>
<script src="<?php echo base_url('assets/dist/js/demo.js')?>"></script>
</body>
</html>

h.    Kemudian pada file wrapper.php tuliskan kode berikut ini, kode ini memanggil sekaligus me wrap atau menjadikan satu file penyusun halaman web yang sudah kita buat tadi.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<?php 
require_once('head.php');
require_once('header.php');
require_once('sidebar.php');
require_once('content.php');
require_once('footer.php');
require_once('modal.php');
require_once('js.php');

 ?>

Selanjutnya kita akan mencoba apakah template yang kita buat sudah berhasil atau belum, tapi ada beberapa langkah yang harus kita lakukan dan sedikit konfigurasi, langsung saja berikut ini langkah-langkahnya:

a.    Buat folder lagi dengan nama siswa di dalam folder views sejajar dengan folder layout, kemudian buat sebuah file dengan nama list.php yang akan kita gunakan untuk meletakkan konten, dalam file list.php ketikan kode  berikut:



b.    Kemudian buka file routes.php yang terletak di application/config/routes.php dan ubah default route ke ‘admin’.



Artinya ketika pertama kali kita membuka website di http://localhost/belajarci/ akan langsung diarahkan ke controller ‘admin’ (yang akan kita buat nanti).
Untuk informasi, file routes.php ini untuk mengatur route url.


c.     Kemudian buka file config.php yang berada di application/config/config.php kemudian ubah base_url dengan url root kita, sehingga kodenya menjadi seperti ini:

1
$config['base_url'] = 'http://localhost/belajarci/';

d.    Kemudian atur juga konfigurasi di file autoload.php yang berada di application/config/autoload.php , setting beberapa library dan helper di autoload agar di load secara otomatis, adapun yang perlu kita ubah konfigurasinya adalah:

1
2
$autoload['libraries'] = array('database', 'email', 'session');
$autoload['helper'] = array('url', 'file');

e.    Lalu buatlah file dengan nama Admin.php di dalam folder application/controllers, dan tuliskan kode seperti berikut ini:



Dari kode diatas kita membuat Class yang bernama Admin, dan class Admin meng extends Class CI_Controller, kemudian pada function index saya membuat variable array dengan nama $data dengan index title dan isi.

Pada title kita isikan ‘Daftar Siswa’ yang nanti akan kita panggil di dalam template untuk mengisi tag <title></title>, kemudian isinya kita beri value ‘admin/list’ yang mana itu adalah alamat file list.php

f.     Kemudian isikan file content.php dalam folder application/view/layout/content.php dengan kode berikut ini:



Penjelasannya kita membuat syarat jika variable $isi ada, maka akan meload view yang ada di dalam variable $isi, sedangkan variable $isi tadi sudah kita isi dengan alamat file ‘admin/list’ artinya file content.php akan me load list.php dalam kasus ini, namun value dari variable $isi bisa berubah-ubah sehingga penggunaan template lebih dinamis. Dan file content.php ini dipanggil dalam file wrapper.php.

g.    Kemudian agar file css dan javascript bisa dimuat maka ubah pemanggilan filenya menggunakan fungsi base_url() dan tambahkan ‘assets/’ dalam pemanggilan pathnya karena semua file css dan javascript tersebut berada di dalam folder assets, sekalian panggil variable $title ke dalam tag <title ></title>, kalian buka file head.php dan js.php yang berada di application/views/layout sehingga kodenya akan menjadi seperti berikut:




h.    Selanjutnya coba buka browser dan ketikkan http://localhost/belajarci/ , jangan lupa untuk menghidupkan XAMPP control panel terlebih dahulu, maka hasilnya adalah seperti berikut ini:




4.    Kesimpulan

Hmm, lumayan Panjang ya tutorialnya, dapat kita simpulkan bahwa Codeigniter menggunakan konsep MVC sehingga memudahkan kita untuk mengembangkan dan memaintenance, dan juga dalam pemasangan template AdminLTE sangat mudah, kita tinggal download, dan memasukkan file yang kita butuhkan ke dalam folder project kita, setting routes, dan jangan lupa untuk menggunakan base url dalam pemanggilan file css dan javascript.

Oya fungsi base url ini bisa juga digunakan untuk memanggil foto dll.
Terima kasih sudah membaca tutorial kami, semoga bermanfaat.

Pada tutorial selanjutnya kita akan membahas CRUD, di Belajar Codeigniter #4: CRUD-Create ReadUpdate Delete (Create-Read).

Wassalamualaikum wrwb..


Lokasi: Indonesia
Web Developer, passionate in PHP, Python and NodeJS

Komentar

Posting Komentar