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.
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:
Klik kanan pada file CodeIgniter_2.1.4.zip yang telah Anda unduh
Pilih Ekstract to CodeIgniter_2.1.4
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:
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:
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:
Buka folder tutorial_ci/application/views Anda
Buat dua buah folder baru dalam folder views tersebut, yaitu folder layout dan home
Konfigurasi base_url dalam fileconfig.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):
Buka file config.php yang ada dalam folder tutorial_ci/application/config
Cari kode $config[‘base_url’] = ”;
Dalam tanda petik satu tersebut ketik menjadi http://localhost/tutorial_ci/
Sehingg menjadi $config[‘base_url’] = ‘http://localhost/tutorial_ci/’;
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
Buka file autoload.php yang ada dalam folder tutorial_ci/application/config
Cari kode $autoload[‘helper’] = array();
Dalam tanda petik satu tersebut kurung tersebut, tambahkan sehingga menjadi (‘url’)
Sehingg menjadi $autoload[‘helper’] = array(‘url’);
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.
Buka folder tutorial_ci/application/views/layout
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:
Buka file index.html yang ada dalam folder tutorial_ci/assets/
Buka file head.php yang ada dalam folder tutorial_ci/application/views/layout/
Dari file index.html, copy / salinlah kode baris ke-1 sampai baris ke-10 (mulai dari <!doctype html> sampai dengan <div id=”wrapper”>)
Lalu Paste pada file head.php
Pada baris ke-5, ubah title yang semula Tutorial Code Igniter – Java Web Media menjadi <?php echo $title ?>.
Lalu pada kode href=”css/style.css” yang ada di baris ke-6,ubahlah menjadi“<?php echo base_url(); ?>assets/css/style.css”.
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:
Buka file header.php yang ada dalam folder tutorial_ci/application/views/layout
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/
Paste kode tersebut di file pada file header.php
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(); ?>"
File footer.php adalah tampilan paling bawah dari halaman home.
Web Design Course Java Web Media
Berikut langkah-langkahnya:
Buka file footer.php yang ada dalam folder tutorial_ci/application/views/layout
Copy kode baris ke-91 sampai dengan baris ke-94 dari file index.html yang ada dalam folder tutorial_ci/assets/
Paste kode tersebut di file pada file footer.php
Simpan file footer.php
File konten.php
File konten berfungsi untuk memanggil konten utama website.
Web Programming Course | Java Web Media
Berikut langkah-langkahnya:
Buka file konten.php yang ada dalam folder tutorial_ci/application/views/layout
Tambahkan kode di bawah ini.
<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
if($isi){
$this->load->view($isi);
}
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:
Buka file wrapper.php yang ada dalam folder tutorial_ci/application/views/layout
Tambahkan kode di bawah ini.
<?php
require_once('head.php');
require_once('header.php');
require_once('konten.php');
require_once('footer.php');
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:
Buat file PHP kosong baru dengan nama index_home.php di folder tutorial_ci/application/views/home/
Buka file index_home.php di folder tutorial_ci/application/views/home/ tersebut
Copy code baris ke-27 sampai baris ke-90 yang ada di file index.html yang ada dalam folder tutorial_ci/assets/
Paste kode tersebut ke file index_home.php
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:
Buka folder tutorial_ci/application/controller.
Buat file PHP baru (kosong) di folder tersebut, lalu beri nama home.php
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);
}
}
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:
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:
Buka file routes.php dalam folder tutorial_ci/application/config
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.
Simpan file routes.php
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.
Pada tutorial ini data dari combobox yang diambil dari database akan ditampilkan pada textfield. Buatlah database dengan nama: dbakademik Buat tabel dengan nama: tb_mhs Buat field yaitu: nim, nama, jurusan dan lalu isilah seperti contoh pada gambar di bawah ini. Buat file .php dan berikut ini adalah scriptnya: <?php mysql_connect("localhost","root",""); mysql_select_db("dbakademik"); ?> <title>Combobox</title> <p></p> <table width="451" border="0" align="center"> <tr> <td width="118">NIM</td> <td width="323"><select name="nim" id="nim" onchange="changeValue(this.value)" > <option value=0>-Pilih-...
Dalam artikel kali ini saya akan membahas tentang Bagaimana Cara Menampilkan Hasil Form HTML dengan JavaScript . Artikel ini ditulis berdasarkan pertanyaan dari rekan kita Doe, pada Tutorial Belajar JavaScript: Cara Menampilkan Hasil Program JavaScript . Berikut adalah pertanyaannya: Gan, misalnya kita tuh klik button pada sebuah form yang nantinya akan menghasilkan informasi sesuai pilihan yang di pilih pada form 1. Tampilnya itu di bawah form itu gan. (form id=tampil) select –option=jakarta –option=bandung input type=button onclick=klik() misal:dipilihnya bandung, dibawah form tersebut ada info seputar bandung gan. Saya coba pake document.write tapi css nya gak jalan. Saya pakai juga getElementById tetep belum jalan. mohon pencerahannya. Terima kasih Dari pertanyaan tersebut saya akan mencoba untuk membuat sebuah halaman HTML yang akan menampilkan hasil dari form pada halaman yang sama menggunakan JavaScript . Berikut adalah tampilan akhir kode pro...
< form method = "post" action = "aksi.php" onsubmit = "return validasi_input(this)" > < p > Username: < input name = "username" type = "text" > </ p > < p > < input name = "" type = "submit" value = "Submit" > </ p > </ form > Pada form tersebut terdapat kode onsubmit=”return validasi_input(this)” , dengan menggunakan fungsi onsumbit kita dapat membuat function javascript untuk validasi_input pada JavaScript sebelum ke action=” aksi.php ”, Berikut Kode JS nya, letakkan di atas Form ya.. < script type = "text/javascript" > function validasi_input (form) { if (form.username.value == "" ){ alert( "Username masih kosong!" ); form.username.focus(); return ( false ); } return ( true ); } </ script > 2. Membatasi Minimal Input dengan Javascipt Untuk Membatasi Jumlah Inputan , Kita dap...
Comments
Post a Comment