Tutorial CodeIgniter untuk pemula

Penulis
Codingan
-
5
Tutorial CodeIgniter untuk pemula

Apa itu CodeIgniter? CodeIgniter adalah framework PHP yang sangat ringan & open source yang didasarkan pada pola MVC (Mode View Controller). Framework PHP yang paling sederhana dan mudah dipelajari. Apa itu framework? framework adalah alat untuk membantu kita mengembangkan aplikasi menjadi lebih cepat dan lebih baik. Itu merupakan seperangkat library dan/atau class yang dapat digunakan kembali. CodeIgniter dikenal karena kecepatannya yang ringan dibangingkan framework lainnya di PHP.

MVC singkatan dari Model View Controller. Pola MVC adalah pola yang paling sering digunakan untuk aplikasi web saat ini. Saat ini, terdapat banyak framework PHP yang berbasis pada pola MVC. Pola MVC memisahkan aplikasi dalam 3 modul: Model, View, Controller. Model berfungsi untuk mengelola data. View berfungsi untuk menampilkan data yang disediakan oleh model dalam format tertentu. Controller yang akan menangani model dan melihat lapisan/layer untuk bekerja sama.

Dengan menggunakan CodeIgniter, Web Developer dapat dapat membangun aplikasi web dengan fitur yang lengkap.

Hari ini saya akan menguraikan proses setup CodeIgniter untuk pemula. Dalam tutorial CodeIgniter untuk pemula ini, kaliaan akan dapat mempelajari proses pengembangan CodeIgniter dari awal. Tutorial langkah demi langkah ini akan membantu pengembang web untuk belajar CodeIgniter dengan cepat dan mudah.

Juga, kamu dapat men-download file latihan demo CodeIgniter yang telah saya buat pada saat menguraikan tutorial ini. Kamu hanya perlu mengekstrak file zip dan mengikuti instruksi yang diberikan dalam file Baca.txt.

CodeIgniter Dasar

  1. Download versi terbaru dari CodeIgniter dari sini: www.codeigniter.com
  2. Ekstrak file zip dan ganti nama foldernya. Misalnya diganti menjadi codeigniterku.
  3. Pindahkan folder tersebut di localhost.
  4. Saat kamu membuka URL home page codeigniter (http://localhost/codeigniterku/), kamu akan melihat tampilan seperti berikut ini di browser.
    • Tutorial CodeIgniter untuk pemula
  5. Buka file application/config/config.php dan ikuti intruksi di bawah ini:
    • Atur nilai variabel $config['base_url'] dengan URL codeigniter kamu (http://localhost/codeigniterku/)
  6. Jika kamu ingin menggunakan tabel database, buka application/config/database.php dan ikuti intruksi di bawah ini:
    • Atur nilai variabel $db['default']['hostname'] dengan nama host database kamu.
    • Atur nilai variabel $db['default']['username'] dengan username database kamu.
    • Atur nilai variabel $db['default']['password'] dengan password database kamu.
    • Atur nilai variabel $db['default']['database'] dengan nama database kamu.
    • Seperti ini contohnya:
    • $db['default'] = array(
 'dsn'	=> '',
 'hostname' => 'localhost',
 'username' => 'root',
 'password' => '',
 'database' => 'test',
  7. Buka file application/config/routes.php dan ikuti instruksi di bawah ini:
    • Ganti nilai variabel $route['default_controller'] dari “welcome” menjadi “home” atau yang kamu inginkan untuk memuat controller secara default. Agar dapat mengikuti tutorial ini, ganti saja menjadi “home”.
  8. Buka direktori application/controllers/ dan buat file PHP baru yang bernama Home.php. Buka file Home.php ini dan ikuti instruksi di bawah ini:
    • Pertama tambahkan kode berikut ini untuk mencegah orang lain mengakses script secara langsung.
    • <?php defined('BASEPATH')) OR exit('Tidak diperbolehkan untuk mengakses script secara langsung');
    • Buat class bernama Home dan memperluas class ini dari CI_Controller. Juga, perlu diingat bahwa nama class dan nama file harus sama.
    • class Home extends CI_Controller{

}
  9. Buka direktori application/views/ dan buat file view (home_view.php) untuk Controller Home. Buka file home_view.php ini dan tulis kode HTML untuk tujuan pengujian.
    • Contoh isi dari file home_view.php seperti ini:
    • <?php
defined('BASEPATH') OR exit('Tidak diperbolehkan untuk mengakses script secara langsung');
?>
<!DOCTYPE html>
<html lang="id">
<head>
 <meta charset="utf-8">
 <title>Selamat datang di CodeIgniterku</title>

 <style type="text/css">

 ::selection { background-color: #E13300; color: white; }
 ::-moz-selection { background-color: #E13300; color: white; }

 body {
  background-color: #fff;
  margin: 40px;
  font: 13px/20px normal Helvetica, Arial, sans-serif;
  color: #4F5155;
 }

 a {
  color: #003399;
  background-color: transparent;
  font-weight: normal;
 }

 h1 {
  color: #444;
  background-color: transparent;
  border-bottom: 1px solid #D0D0D0;
  font-size: 19px;
  font-weight: normal;
  margin: 0 0 14px 0;
  padding: 14px 15px 10px 15px;
 }

 code {
  font-family: Consolas, Monaco, Courier New, Courier, monospace;
  font-size: 12px;
  background-color: #f9f9f9;
  border: 1px solid #D0D0D0;
  color: #002166;
  display: block;
  margin: 14px 0 14px 0;
  padding: 12px 10px 12px 10px;
 }

 #body {
  margin: 0 15px 0 15px;
 }

 p.footer {
  text-align: right;
  font-size: 11px;
  border-top: 1px solid #D0D0D0;
  line-height: 32px;
  padding: 0 10px 0 10px;
  margin: 20px 0 0 0;
 }

 #container {
  margin: 10px;
  border: 1px solid #D0D0D0;
  box-shadow: 0 0 8px #D0D0D0;
 }
 </style>
</head>
<body>

<div id="container">
 <h1>Selamat datang di CodeIgniterku!</h1>

 <div id="body">
  <p>Sinau CodeIgniter.</p>
 </div>

 <p class="footer">Halaman dirender dalam <strong>{elapsed_time}</strong> detik. <?php echo  (ENVIRONMENT === 'development') ?  'CodeIgniter Versi <strong>' . CI_VERSION . '</strong>' : '' ?></p>
</div>

</body>
</html>
  10. Buka controller home (application/controllers/Home.php) dan tambahkan perubahan berikut ini:
    • Buat fungsi index().
    • Muat file view ke dalam fungsi index() . Statement $this->load->view() digunakan untuk membuat view.
    • $this->load->view('home_view');
    • Keseluruhan isi file Home.php menjadi seperti ini:
    • <?php
defined('BASEPATH') OR exit('Tidak diperbolehkan untuk mengakses script secara langsung');

class Home extends CI_Controller {
    public function index()
    {
        $this->load->view('home_view');
    }
}
  11. Refresh homepage (http://localhost/codeigniterku/) di browser, kamu akan melihat tampilan halaman sesuai dengan kode HTML yang diberikan.
    • Tutorial CodeIgniter untuk pemula

CodeIgniter dengan database

Sekarang kita akan menggunakan database dengan aplikasi CodeIgniter. Dalam tutorial ini kita akan mengambil gambar dari database dan menampilkan gambar ke CodeIgniter. Ikuti langkah-langkah di bawah ini.

  1. Buat database di PHPMyAdmin. Buat database dengan nama “test” (agar dapat mengikuti tutorial ini). Setelah database dibuat, kemudian buat tabel bernama “tb_gambar”. Atau kamu juga dapat menyalin script SQL di bawah dan menjalankan script SQL ini untuk membuat tabel dan kolom. 
    • CREATE TABLE `tb_gambar` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `gambar` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
    `dibuat` datetime NOT NULL,
    `diubah` datetime NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_general_ci;
  2. Buat direktori upload/ ke dalam direktori root CodeIgniter dan masukkan beberapa gambar ke dalam direktori ini. Sekarang masukkan nama gambar di tabel “tb_gambar” ke database dengan menjalankan script SQL berikut ini. Catatan, nama file gambar sesuai dengan yang ada pada direktori upload/. Gambar-gambar ini didapat dari www.pexels.com 
    • INSERT INTO `tb_gambar` (`id`, `gambar`, `dibuat`, `diubah`) VALUES
(1, 'pexels-photo-248386.jpeg', '2017-02-20 00:00:00', '2017-02-20 00:00:00'),
(2, 'delicate-arch-night-stars-landscape.jpg', '2017-02-20 00:00:00', '2017-02-20 00:00:00'),
(3, 'sky-earth-space-working.jpg', '2017-02-20 00:00:00', '2017-02-20 00:00:00'),
(4, 'pexels-photo-300940.jpeg', '2017-02-20 00:00:00', '2017-02-20 00:00:00'),
(5, 'pexels-photo-307008.jpeg', '2017-02-20 00:00:00', '2017-02-20 00:00:00');
  3. Agar dapat mengakses database kita harus mendefinisikan hostname database, username database, password database dan nama database di file database.php. Buka file application/config/database.php dan beri nilai berikut. 
    • $db['default'] = array(
 'dsn'	=> '',
 'hostname' => 'localhost',
 'username' => 'root',
 'password' => '',
 'database' => 'test',
  4. Untuk menggunakan fungsi database, kita harus memuat library database CodeIgniter. Kita perlu memberitahu Codeigniter untuk secara otomatis memuat library database sehingga kita tidak perlu meminta itu setiap kali kita ingin melakukan query database. Buka file application/config/autoload.php:
    • cari variabel $autoload['libraries'] = array(); dan beri nilai array('database'); pada variabel ini.
    • $autoload['libraries'] = array('database');
  5. Buat model ke dalam direktori models. Ikuti langkah-langkah di bawah ini:
    • Buka direktori application/models/ dan buat file Home_model.php.
    • Buat class dan memperluas class ini dari class CI_Model. Nama class harus sama dengan nama file, berarti nama classnya adalah Home_model.
    • Buat fungsi untuk mengambil data dari database. Untuk tujuan tutorial ini saya mendeklarasikan fungsi get_images(), fungsi ini digunakan untuk mengambil gambar dari database.
    • Isi file Home_model.php seperti di bawah ini:
    • <?php
defined('BASEPATH') OR exit('Tidak diperbolehkan untuk mengakses script secara langsung');

class Home_model extends CI_Model {
    function get_images()
    {
        $query = $this->db->get('tb_gambar');
        if($query->num_rows() > 0){
            $result = $query->result_array();
            return $result;
        }else{
            return false;
        }
    }
}
  6. Buka file application/controllers/Home.php yang dibuat sebelumnya dan buat perubahan berikut.
    • Memuat model: $this->load->model('home_model')
    • Mengambil data gambar dari model: $this->home_model->get_images()
    • Menyimpan data gambar ke dalam associative array: $data[‘images’] = $this->home_model->get_images();
    • Meneruskan data gambar ke view: $this->load->view('home_view', $data)
    • Keseluruhan isi file Home.php menjadi seperti ini:
    • <?php
defined('BASEPATH') OR exit('Tidak diperbolehkan untuk mengakses script secara langsung');

class Home extends CI_Controller {
    public function index()
    {
        //memuat model
        $this->load->model('home_model');

        //mengambil data dari database
        $data['tb_gambar'] = $this->home_model->get_images();

        //memuat view dan meneruskan data
        $this->load->view('home_view', $data);
    }
}
  7. Buka file application/views/home_view.php yang dibuat sebelumnya dan isi kode berikut untuk menampilkan semua gambar yang diteruskan dari controller. 
    • <?php if(!empty($tb_gambar)): foreach($tb_gambar as $gbr): ?>
    <li><img src="upload/<?php echo $gbr['gambar']; ?>" alt=""></li>
<?php endforeach; endif; ?>
  8. Keseluruhan isi file home_view.php menjadi seperti ini: 
    • <?php
defined('BASEPATH') OR exit('Tidak diperbolehkan untuk mengakses script secara langsung');
?>
<!DOCTYPE html>
<html lang="id">
<head>
 <meta charset="utf-8">
 <title>Selamat datang di CodeIgniterku</title>
 <style type="text/css">
 ::selection { background-color: #E13300; color: white; }
 ::-moz-selection { background-color: #E13300; color: white; }
 body {
  background-color: #fff;
  margin: 40px;
  font: 13px/20px normal Helvetica, Arial, sans-serif;
  color: #4F5155;
 }
 h1 {
  color: #444;
  background-color: transparent;
  border-bottom: 1px solid #D0D0D0;
  font-size: 19px;
  font-weight: normal;
  margin: 0 0 14px 0;
  padding: 14px 15px 10px 15px;
 }
 #body {
  margin: 0 15px 0 15px;
 }
 p.footer {
  text-align: right;
  font-size: 11px;
  border-top: 1px solid #D0D0D0;
  line-height: 32px;
  padding: 0 10px 0 10px;
  margin: 20px 0 0 0;
 }
 #container {
  margin: 10px;
  border: 1px solid #D0D0D0;
  box-shadow: 0 0 8px #D0D0D0;
 }
 .galeri{ width:100%; float:left; padding-top: 20px;}
 .galeri ul{ margin:0; padding:0; list-style-type:none;}
 .galeri ul li{ padding:7px; border:2px solid #ccc; float:left; margin:10px 7px; background:none; width:auto; height:auto;}
 </style>
</head>
<body>
<div id="container">
 <h1>Selamat datang di CodeIgniterku!</h1>

 <div id="body">
  <div class="galeri">
     <ul>
     <?php if(!empty($tb_gambar)): foreach($tb_gambar as $gbr): ?>
         <li><img src="upload/<?php echo $gbr['gambar']; ?>" alt=""></li>
     <?php endforeach; endif; ?>
     </ul>
  </div>
 </div>
 <p style="border-top:none;" class="footer">Halaman dirender dalam <strong>{elapsed_time}</strong> detik. <?php echo  (ENVIRONMENT === 'development') ?  'CodeIgniter Versi <strong>' . CI_VERSION . '</strong>' : '' ?></p>
</div>
</body>
</html>
  9. Refresh browser kamu sekali lagi, URL homepage akan menampilkan layar berikut ini.
    • Tutorial CodeIgniter untuk pemula

Dalam tutorial di atas telah menjelaskan panduan dasar mengenai aplikasi CodeIgniter. Saya akan membahas tutorial CodeIgniter lebih lanjut pada postingan berikutnya. Jika ada pertanyaan tentang tutorial ini, silakan berkomentar dan silahkan share agar temen-temenmu tahu.

Codingan
BAGIKAN

ARTIKEL TERKAITDARI PENULIS

Subscribe
Beritahu
guest
5 Comments
terlama
terbaru vote teratas
Inline Feedbacks
View all comments
fadhil
fadhil
Maret 12, 2018 19:35

sangat membantu, thanks

0
0
Balas
miko
miko
Mei 19, 2018 20:39

gan jual vidio tutorial kumplitna ga sama file latihanya?terus terang ane faham php cuma masih rada kesulitan memahami konsep code igniter mvc klo ada mungkin bisa kasi info ke [email protected]

0
0
Balas
lawliet
lawliet
September 5, 2018 11:07

mantap gan…bermanfaat sekali

0
0
Balas
airin
airin
Oktober 9, 2018 08:38

Terimakasih kak,artikelnya sangat membantu kami yang baru pemula
wassalam…

0
0
Balas
BARA
BARA
Januari 22, 2021 09:52

MAKASIH OM..UPSS CAPLOK

0
0
Balas