Tutorial Code Igniter Part 1: Installasi Code Igniter dan Tutorial Code Igniter Part 2: Membuat halaman home

 April 11, 2014  Java Web Media: Web Design di Kota Depok  Code Igniter Depok, Dynamic Website, Kursus Web Design di Depok, PHP MySQL, PHP MySQL, Tutorial Code Igniter

Sekilas tentang Code Igniter

Code Iginiter (CI) adalah framework untuk aplikasi web berbasis PHP yang memiliki sifat kode terbuka (open sourceI). Versi pertama CI dipublikasikan pada 28 Februari 2006 dan versi terakhir saat tutorial ini ditulis adalah versi 2.1.4 yang dipublikasikan pada 8 Juli 2014.

Framework ini dikembangkan oleh Ellislab dan bisa diunduh secara langsung melalui websitenya, yaitu http://ellislab.com/codeigniter.

Model-View-Controller (MVC)

CI dibangun dengan dasar pola MVC (Model View Controller), dimana view dan controller adalah bagian yang harus ada dalam proses pengembangan aplikasi berbasis web, sedangkan modelsadalah pilihan (tidak wajib). CI dikenal karena kecepatannya, ringan dan mudah digunakan.

Konsep MVC adalah memisahkan fungsi logika aplikasi dengan tampilan (view), sehingga kode PHP akan lebih singkat karena tampilan dipisahkan dengan kode (logika) PHP-nya.

• Model, merupakan representasi struktur data. Biasanya class-class yang ada dalam model berisi fungsi untuk menampilkan (retrieve), memasukkan data (insert), memperbarui dan menghapus database.
• View, adalah informasi yang ditampilkan kepada user/pengunjung website. View biasanya adalah berupa halaman web, tapi di CI view juga merepresentasikan potongan-potongan dari halaman web, misalnya header atau footer. Bisa juga berupa halaman RSS atau halaman web biasa.
• Controller, menjadi pelayanan/perantara antara model dan view serta bagian-bagian lain dari fungsi web yang ada di CI dan akhirnya menghasilkan tampilan halaman web.

Konsep MVC ini dirasa cukup mempermudahkan programmer karena masing-masing fungsi dipisahkan, sehingga bisa fokus pada logika pemrograman atau fokus pada tampilan lebih dahulu.

Mengunduh Framework CI

Anda dapat mengunduh langsung kode framework CI melalui websitenya dihttp://ellislab.com/codeigniter.

Java Web Media | Web Design Course Depok

Installasi web server, PHP dan MySQL

CI membutuhkan web server, PHP dan database MySQL dalam proses installasinya. Ketiga program tersebut (Apache, PHP dan MySQL) bisa Anda dapatkan sekaligus dalam satu paket aplikasi, misalnya XAMPP atau WAMP. Pastikan Anda telah melakukan installasi salah satu program tersebut.

Tutorial ini dibuat dengan menggunakan aplikasi XAMPP. Pastikan juga program-program tersebut dapat berjalan dengan normal dengan cara membuka http://localhost melalui browser web. Gambar di bawah ini adalah contoh program XAMPP yang telah terinstall dengan benar.

Java Web Media | Web Programming Course Depok

Installasi Code Igniter

Mengesktrak file yang telah diunduh

Anda harus mengesktrak file yang telah diunduh terlebih dahulu. Berikut langkah-langkahnya:

1. Klik kanan pada file CodeIgniter_2.1.4.zip yang telah Anda unduh
2. Pilih Ekstract to CodeIgniter_2.1.4
3. Anda telah selesai mengekstraknya

Membuat folder webroot

Saat membangun aplikasi berbasis web dengan CI, maka Anda harus membuat folder di dalam webroot. Jika Anda menggunakan XAMPP, maka lokasi folder adalah di htdocs, jika Anda menggunakan WAMP, maka foldernya adalah www.

Buka folder web root tersebut, lalu buat folder baru dengan nama ci.

Kursus Code Igniter di Depok | Java Web Media

Menyalin file framework CI ke dalam folder ci

Langkah selanjutnya adalah adalah menyalin file-file framework CI yang telah Anda ekstrak pada langkah sebelumnya ke dalam folder webroot, yaitu folder ci.

Kursus Code Igniter Depok | Java Web media

Berikut ini adalah file-file yang telah disalin

Kursus Code Igniter Depok | Java Web media

Uji coba hasil installasi CI

Untuk menguji hasil installasi CI, berikut langkah-langkahnya:

1. Buka browser web Anda
2. Buka alamat http://localhost/ci
3. Jika tampilannya seperti gambar di bawah, maka Anda berhasil melakukan installasi framework CI.

Kursus Web Design Depok | Java Web Media

Anda telah berhasil menginstall Code Igniter

Tutorial Code Igniter – Java Web Media Depok

Tutorial Code Igniter Part 2 ini akan membahas tentang bagaimana membuat sebuah halaman website berdasarkan template yang telah Anda buat. Template website dasar telah disediakan dalam tutorial ini.

Sebelum memulai tutorial ini, pastikan Anda telah mengikuti dan mendownload file-file berikut ini:

1. Mengikuti Tutorial Code Igniter Part 1: Installasi Code Igniter
2. Mengunduh framework Code Igniter (versi 2.2.0) di https://ellislab.com/
3. Mengunduh file: assets.zip di link ini: https://drive.google.com/file/d/0B5BhV6c89_2YRVhYUzVDaVVyc1k/edit?usp=sharing
4. Hasil akhir tutorial bisa didownload di sini: https://drive.google.com/file/d/0B5BhV6c89_2YVHdiYm9Wa1BwQjA/edit?usp=sharing

Note: Code Editor yang digunakan dalam tutorial ini adalah Dreamweaver CS6, Anda bisa memakai code editor yang Anda sukai.

Langkah persiapan framework Code Igniter

Silakan download file framework Code Igniter 2.2.0 terlebih dahulu, kemudian ekstrak ke dalam folder webroot Anda. Dalam tutorial ini menggunakan aplikasi XAMPP sehingga webroot ada di folder htdocs. Folder webroot tutorial ini adalah tutorial_ci.

Web Design Course Depok Java Web Media | Code Igniter

Persiapan folder assets

Pastikan Anda telah mengunduh file assets.zip. Lalu dalam folder tutorial_ci, buat folder baru dengan nama assets. Ektrak file assets.zip ke dalam folder assets tersebut.

Tutorial Code Igniter | Java Web Media Depok

Membuat folder di folder tutorial_ci/application/views

Selanjutnya adalah mempersiapkan folder-folder yang akan digunakan untuk menampung file template di folder assets untuk diintegrasikan dengan framework Code Igniter.

Tutorial Code Igniter Java Web Media Depok

Berikut langkah-langkahnya:

1. Buka folder tutorial_ci/application/views Anda
2. Buat dua buah folder baru dalam folder views tersebut, yaitu folder layout dan home

Konfigurasi base_url dalam file config.php (Dalam foldertutorial_ci/application/config)

Langkah selanjutnya adalah konfigurasi base_url dari website yang sedang Anda bangun. Dalam contoh ini digunakan localhost, dalam aplikasi sesungguhnya, nanti diubah menjadi alamat website.

Konfigurasi base_url Code Igniter | Java Web Media

Dengan menggunakan code editor Anda (tutorial ini memakai Dreamweaver CS6):

1. Buka file config.php yang ada dalam folder tutorial_ci/application/config
2. Cari kode $config[‘base_url’] = ”;
3. Dalam tanda petik satu tersebut ketik menjadi http://localhost/tutorial_ci/
4. Sehingg menjadi $config[‘base_url’] = ‘http://localhost/tutorial_ci/’;
5. Simpan kembali file config.php

Mengaktifkan helper url dalam file autoload (dalam folder tutorial_ci/application/config)

Langkah selanjutnya adalah mengaktifkan helper yang akan meng-handle url dalam CI.

Mengaktifkan url dalam helper | Java Web Media Depok

1. Buka file autoload.php yang ada dalam folder tutorial_ci/application/config
2. Cari kode $autoload[‘helper’] = array();
3. Dalam tanda petik satu tersebut kurung tersebut, tambahkan sehingga menjadi (‘url’)
4. Sehingg menjadi $autoload[‘helper’] = array(‘url’);
5. Simpan kembali file autoload.php

Membuat file  footer.php, head.php, header.php, konten.php, dan wrapper.php(dalam folder application/views/layout)

Langkah selanjutnya adalah membuat potongan-potongan kecil file PHP yang nantinya akan dipanggil sebagai halaman home dari website yang akan dibangun. Rancangan halaman home ini contoh desainnya seperti file index.html yang ada dalam folder assets.

Kursus Web Code Igniter | Java Web Media

Kelima file yang akan dibuat ini nanti adalah file-file yang akan menjadi template utama dari halaman home.

1. Buka folder tutorial_ci/application/views/layout
2. Buat lima (5) file PHP kosong di dalam folder layout tersebut, yaitu file head.php, header.php, konten.php, footer.php dan wrapper.php

Mulai membuat template halaman home

Langkah berikutnya adalah membuat template utama yang nantinya akan digunakan untuk menampilkan halaman home (halaman utama website).

File head.php

File ini berisi informasi awal kode HTML, mulai versi, CSS, title dll.

Tutorial Code Igniter Java Web Media

Berikut langkah-langkahnya:

1. Buka file index.html yang ada dalam folder tutorial_ci/assets/
2. Buka file head.php yang ada dalam folder tutorial_ci/application/views/layout/
3. Dari file index.html, copy / salinlah kode baris ke-1 sampai baris ke-10 (mulai dari <!doctype html> sampai dengan <div id=”wrapper”>)
4. Lalu Paste pada file head.php
5. Pada baris ke-5, ubah title yang semula Tutorial Code Igniter – Java Web Media menjadi <?php echo $title ?>.
6. Lalu pada kode href=”css/style.css” yang ada di baris ke-6, ubahlah menjadi “<?php echo base_url(); ?>assets/css/style.css”.
7. Simpan kembali file head.php

File header.php

File header.php berisi tampilan bagian atas website, yaitu area header.

Kursus Code Igniter Java Web Media

Langkah-langkahnya:

1. Buka file header.php yang ada dalam folder tutorial_ci/application/views/layout
2. Copy kode baris ke-12 sampai dengan baris ke-25 (<header> s/d </nav>) dari file index.html yang ada dalam folder tutorial_ci/assets/
3. Paste kode tersebut di file pada file header.php
4. Pada baris ke-1 dalam file header.php, ubah link yang awalnya adalah

   <a href="index.php" menjadi <a href="<?php echo base_url(); ?>". 

   Lakukan juga pada link Home yang awalnya

   <a href="#" menjadi <a href="<?php echo base_url(); ?>"

5. Ubah kode

   <img src="images/javawebmedia.png"

   menjadi

   <img src="<?php echo base_url(); ?>assets/images/javawebmedia.png"

6. Ubah kode

   <li><a href="#">Login</a></li> 

   menjadi

     <li><a href="<?php echo base_url(); ?>admin/login">Login</a></li>.

7. Ubah kode

   <li><a href="#">Kontak</a></li> 

   menjadi

     <li><a href="<?php echo base_url(); ?>kontak">Kontak</a></li>.

8. Simpan file header.php

File footer.php

File footer.php adalah tampilan paling bawah dari halaman home.

Web Design Course Java Web Media

Berikut langkah-langkahnya:

1. Buka file footer.php yang ada dalam folder tutorial_ci/application/views/layout
2. Copy kode baris ke-91 sampai dengan baris ke-94 dari file index.html yang ada dalam folder tutorial_ci/assets/
3. Paste kode tersebut di file pada file footer.php
4. Simpan file footer.php

 File konten.php

File konten berfungsi untuk memanggil konten utama website.

Web Programming Course | Java Web Media

Berikut langkah-langkahnya:

1. Buka file konten.php yang ada dalam folder tutorial_ci/application/views/layout
2. Tambahkan kode di bawah ini.

   <?php

   if ( ! defined('BASEPATH')) exit('No direct script access allowed');

   if($isi){

    $this->load->view($isi);

   }

3. Simpan file konten.php

File wrapper.php

File wrapper.php berfungsi untuk menyatukan seluruh halaman template dan halaman utama.

Tutorial Code Igniter Java Web Media

Berikut langkah-langkahnya:

1. Buka file wrapper.php yang ada dalam folder tutorial_ci/application/views/layout
2. Tambahkan kode di bawah ini.

   <?php

   require_once('head.php');

   require_once('header.php');

   require_once('konten.php');

   require_once('footer.php');

3. Simpan file wrapper.php

Membua halaman utama index_home.php di folder application/views/home/

Langkah selanjutnya adalah membuat halaman utama yang akan ditampilkan di halaman home/index.

Kursus Code Igniter Depok | Java Web Media

Berikut langkah-langkahnya:

1. Buat file PHP kosong baru dengan nama index_home.php di folder tutorial_ci/application/views/home/
2. Buka file  index_home.php di folder tutorial_ci/application/views/home/ tersebut
3. Copy code baris ke-27 sampai baris ke-90 yang ada di file index.html yang ada dalam folder tutorial_ci/assets/
4. Paste kode tersebut ke file index_home.php
5. Simpan file tersebut

Membuat Controller untuk menampilkan halaman utama website

Selanjutnya Anda harus membuat controller untuk mengelola tampilan mana yang akan ditampilkan.

Kursus Code Igniter Java Web Media

Berikut langkah-langkahnya:

1. Buka folder tutorial_ci/application/controller. 
2. Buat file PHP baru (kosong) di folder tersebut, lalu beri nama home.php
3. Tambahkan kode di bawah ini:

   <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

   class Home extends CI_Controller {
    public function index() {
    $data=array('title'=>'Tutorial Code Igniter - Java Web Media',
    'isi' =>'home/index_home'
    );
    $this->load->view('layout/wrapper',$data); 
    }
   }

4. Simpan file home.php

Melakukan pengetesan hasil

Anda telah membuat template dan controller, sekarang saatnya untuk mengetes hasil pekerjaan Anda. Caranya adalah dengan membuka browser, lalu masukkan alamathttp://localhost/tutorial_ci/index.php/home.

Kursus Web Design Java Web Media

Menampilkan gambar yang tidak tampil

Seperti terlihat pada gambar di atas, gambar banner utama website ternyata tidak tampil. Untuk menampilkannya, buka file index_home.php yang ada dalam folder tutorial_ci/application/home/. Lalu ubah kode berikut ini:

<img src="images/web-development.png" width="624" height="326">

Menjadi:

<img src="<?php echo base_url(); ?>assets/images/web-development.png" width="624" height="326">

Mengubah routing halaman

Secara default, Code Igniter akan menampilkan halaman welcome.php sebagai halaman home dan Anda tidak harus memasukkan alamat http://localhost/tutorial_ci/index.php/home, tetapi cukup dengan http://localhost/tutorial_ci.

Kursus Web Design Java Web Media

Untuk melakukan perubahan hal tersebut sehingga halaman utama adalah yang telah kita buat, maka berikut langkah-langkahnya:

1. Buka file routes.php dalam folder tutorial_ci/application/config
2. Lakukan perubahan kode ini:$route[‘default_controller’] = “welcome”;menjadi$route[‘default_controller’] = “home”;.Ini artinya controller utama yang akan menghandle halaman utama adalah controller home.
3. Simpan file routes.php
4. Lakukan pengetesan dengan mengetikkan alamat http://localhost/tutorial_ci pada browser Anda.

Kursus Web Design Java Web Media

Source kode akhir dari tutorial ini:

Note: Tutorial lebih advanced dapat Anda ikutia dengan mengikuti kursus di Java Web Media.

Our office

Perumahan FerarI Tirtajaya Indah No. 36 Jl. Romo Tirtajaya, Kota Kembang – Depok, Jawa Barat Phone: 021-37830602, Mobile: 085715100485 Email: contact@javawebmedia.com, andoyoandoyo@gmail.com Website: www.javawebmedia.com

Course place

Jl. Beringin, Pondok Cina – Depok, Jawa Barat (Belakang Mall Depok Town Square dan dekat dengan Stasiun Pondok Cina Depok) Phone: 021-34135720, Mobile: 085715100485 Email:contact@javawebmedia.com, andoyoandoyo@gmail.com Website: www.javawebmedia.com