Belajar CodeIgniter Level Pemula dengan Mudah dan Lengkap (Artikel Bertahap)

Belajar CodeIgniter Level Pemula dengan Mudah dan Lengkap (Artikel Bertahap)
Di Posting Oleh : wandi
Kategori : CodeIgniter PHP Programming

Halo para pembaca Wildanie, sudah lama sekali (1 tahun) hehe tidak pernah berbagi ilmu seperti dulu. Namun pada saat itu saya banyak sekali Pengetahuan baru dan sangat tidak sabar untuk saya bagikan di blog ini untuk pembaca yang terhormat.


Di postingan kali ini kita akan membahas dan belajar tentang CodeIgniter. CodeIgniter sendiri adalah framework PHP yang sering sekali digunakan sampai sekarang. CodeIgniter menyediakan banyak bantuan berupa helper, library atau lainnya untuk mempercepat pekerjaan para programmer. Selain itu Framework ini juga dapat menata file pekerjaan anda, agar teroganisir. Hal ini, membuat CodeIgniter cocok digunakan untuk project berskala besar.

Saya sarankan anda membaca artikel ini secara lengkap dari atas sampai bawah, karena saya membuat tutorial ini sambil mempraktekannya, mohon maaf jika kalimatnya sangat panjang dan mendetail. Di setiap langkah, saya ungkapkan apa yang ada didalam pikiran, apa yang harus diketahui oleh seorang pemula pada umumnya.


Bagian Tutorial:

Bagian-bagian:

---

• Mengapa menggunakan CodeIgniter
• Mempersiapkan Project CodeIgniter
• Belajar membuat halaman web
• Melempar Data dari controller ke view
• Membuat link ke halaman lain

Mengapa menggunakan CodeIgniter

• Saat kita membuat Web dengan menggunakan bahasa pemrograman PHP secara Native/Murni kita sering menjumpai banyak pola perulangan. Serasa kita mengetikkan code yang sama berulang kali. dengan CodeIgniter anda dapat mengorganisir file dan alur logika yang anda buat dengan mudah, karena CodeIgniter sendiri menggunakan konsep Model View Controller (MVC). 

• Banyak Helper yang dapat digunakan
  Contohnya saat kita hendak membuat upload file, kita tinggal panggil fungsi / objeknya.

• Pengambilan data dari database yang lebih mudah
  di CodeIgniter juga sudah disediakan Query Builder. Misal kita hendak mengambil data tabel siswa dari database. kita cukup buat saja query buildernya di model. kemudian saat hendak melakukan INSERT INTO, di CodeIgniter cukup masukkan Array pada parameter fungsi saja.

• Penerimaan GET/POST lebih mudah dan aman

• Terorganisir, sehingga cocok untuk pengembangan aplikasi berskala besar.

• dan masih banyak lagi

Mempersiapkan Project CodeIgniter

• Menyiapkan Lembar Kerja

• Langkah awal, siapkan Text Editor favorit anda. Pada artikel ini, saya menggunakan Sublime Text 3. Jika anda belum menentukan text editor yang cocok, saya sarankan untuk menggunakan software ini.

• Download CodeIgniter terbaru, anda bisa klik link download dibawah

CodeIgniter, ~ 2,6 Mb

• CodeIgniter membutuhkan server seperti XAMPP/WAMP, pastikan anda sudah menginstallnya.
• Buat Folder Project anda (pada artikel kali ini: "belajar_ci"), letakkan didalam folder php di server anda (htdocs untuk XAMPP atau www untuk WAMP) .
• Extract isi dari CodeIgniter yang didownload tadi. 

• Hidupkan Server lalu coba akses project lewat browser, maka muncul tampilan seperti dibawah.

• Menghilangkan index.php pada URL

Pada kondisi default CodeIgniter, URL yang dimasukkan harus ada index.php, misalnya: localhost/belajarCI/index.php/welcome. Kita harus mengetikkan index.php pada kolom url untuk memanggil controller Welcome. Pada umumnya, URL suatu website berformat seperti ini: localhost/belajar_ci/welcome.

Sebenarnya masalah ini termasuk minor / hal kecil, namun bagi sebagian besar programmer, hal ini mengganggu saat kita mengakses halaman tertentu saat deploy, lagi pula cukup mudah untuk mengatasi hal ini.

• Buat File .htaccess didalam folder project, jadi untuk saya file ini berlokasi di belajarci/.htaccess

• didalam file .htaccess tersebut, copy-paste kode berikut ini

RewriteCond $1 !^(index\.php|resources|robots\.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]

• Buka config.php pada folder belajar_ci/application/config/. 
• Rubah isi dari elemen base_url ke alamat project anda. untuk saya berarti "http://localhost/belajarci"
• kosongkan elemen index_page
• dan pastikan elemen uri_protocol berisi "REQUEST_URI"

• akses melalui browser anda tanpa menuliskan index.php. untuk saya localhost/belajar_ci/welcome

Belajar membuat halaman web

• Membuat controller

Konsep Dasar

Controller pada CodeIgniter berfungsi sebagai Router, artinya:

1. jika kita mengakses "localhost/belajar_ci/data/buku", maka yang dieksekusi adalah fungsi buku() didalam controller Data.php. namun 
2. jika mengakses "localhost/belajar_ci/data" saja, maka yang dieksekusi adalah fungsi index() pada controller Welcome.php. 
3. Secara singkat formatnya seperti dibawah
   "localhost/belajar_ci/nama_controller/fungsi". fungsi ini disebut juga dengan method. jika method tidak diisikan pada url, maka yang dieksekusi adalah method/fungsi index().

• untuk membuat controller, masuk ke folder belajar_ci/application/controllers. buat file baru beri nama sesuai nama controllernya dengan huruf kapital. 
• Untuk sekarang, buat file Data.php. kemudian buka menggunakan text editor, tuliskan kode php seperti dibawah.

<?php
class Data extends CI_Controller {
 public function buku()
 {
  echo "<h1>Ini Data Buku</h1>";
 }
}
?>

Penjelasan

1. Controller harus berupa class yang extends ke CI_Controller
2. Pada kode diatas, terdapat method buku() dengan kode PHP untuk menampilkan teks didalamnya.
   Jika anda belum familiar dengan kode PHP,

• Kemudian, coba akses url "localhost/belajar_ci/data/buku". lihat apa yang terjadi

• Maka muncul tampilan seperti diatas. 
• Ok, kita masuk ke penjelasan.
• Saat kita mengakses belajar_ci/data/buku berarti sama dengan menjalankan method buku() di controller Data
• Dalam kode diatas, method tersebut berisi statement menampilkan heading 1 yang berisi "Ini Data Buku".

• Membuat View

Konsep Dasar

View pada dasarnya adalah file yang berisi html bertujuan untuk menampilkan tampilan kepada pengguna. kita tidak mungkin menuliskan html / css pada controller yang sejatinya adalah file khusus PHP (method dan logika).

• Untuk membuat View, masuk ke folder belajar_ci/application/views/ , anda dapat membuat file dan folder disini. 
• Saya sarankan untuk membuat folder di setiap konteks halaman agar filenya terorganisir secara rapi. contohnya: saat anda mau membuat file view data buku, ada baiknya anda letakkan file view buku tadi didalam folder "Data" karena ada kemungkinan untuk membuat file lain yang konteksnya sama, misalnya: file view data siswa, data pegawai yang juga termasuk Data

• Ok. kita kerjakan view buku (buku.php). Mari buat tampilan sederhana, anda bisa copy-paste kode berikut

<!DOCTYPE html>
<html>
<head>
 <title>Perpustakaan - Data Buku</title>
</head>
<body>
 <h1>Perpustakaan</h1>
 <hr>
 <h4>Data Buku</h4>
</body>
</html>

• kemudian panggil file view buku.php ini di controller Data tadi (belajar_ci/application/controllers/data.php). kodenya tampak seperti dibawah (penjelasan dibawahnya)

<?php 
class Data extends CI_Controller {
 public function buku()
 {
  $this->load->view('data/buku');
 }
}
?>

Penjelasan

1. Memanggil view, menggunakan $this->load->view('alamat_view')
2. Alamat view, berawal dari folder data dan tanpa menuliskan ekstensi ".php".
   Misal: jika view ada di view/data/barang.php, anda cukup menuliskan 'data/barang'

• Lihat hasilnya melalui browser dengan url localhost/belajar_ci/data/buku. 

Melempar data dari controller ke view

Uniknya jika bekerja dengan konsep MVC, kita bisa pisahkan script khusus PHP dengan UI / HTML, di framework ini kode PHP diletakkan di controller, sementara view menangani tampilan. Alurnya View mendapatkan data dari controller melalui load view tadi. Data tersebut dapat berupa teks, array atau yang lainnya

Skenario

Kita akan membuat data buku berupa array yang ditulis di controller, kemudian ditampilkan di view

• Buka controller (Data.php). buat data array seperti dibawah (penjelasan ada dibawahnya)

<?php 
class Data extends CI_Controller {
 public function buku()
 {
  $data['data_buku'] = array(
   'Memasak untuk pemula', 
   'Dasar-dasar HTML', 
   'Cara merakit komputer', 
   'Framework Laravel untuk pemula'
  );
  $this->load->view('data/buku', $data);
 }
}
?>

Penjelasan

1. Untuk melempar data, data tersebut harus berada didalam array. Pada kode diatas, data berada pada array $data dengan nama indeks data_buku. 
2. kemudian indeks tersebut di isi dengan array berisi kumpulan judul buku.
3. untuk mengirimkan ke view, array yang berisi data tersebut ($data) ditambahkan di parameter kedua pada fungsi view()

• Kemudian, di file view (Buku.php). kita bisa terima dan tampilkan data tersebut, kodenya tampak seperti dibawah

<!DOCTYPE html>
<html>
<head>
 <title>Perpustakaan - Data Buku</title>
</head>
<body>
 <h1>Perpustakaan</h1>
 <hr>
 <h4>Data Buku</h4>
 <ol>
  <?php 
   foreach ($data_buku as $buku) {
  ?>
  <li><?=$buku?></li>
  <?php
   }
  ?>
 </ol>
</body>
</html>

1. untuk mengambil data, anda cukup menuliskan nama indeks tadi sebagai variabel. contoh jika tadi kita menuliskan $data['data_buku'] , maka di view cukup menuliskan $data_buku.
2. karena data berupa array yang berisi lebih dari 1 data. untuk menampilkannya harus menggunakan perulangan foreach()

• Kemudian silahkan lihat di browser, hasilnya data dari controller sudah muncul di view

Membuat Link ke halaman lain

Pada native coding, sangat mudah untuk membuat link ke halaman lain, tinggal buat tag <a> kemudian tulis atribut href ke alamat file yang dituju. Berbeda dengan CodeIgniter, pada CodeIgniter kita tidak bisa memanggil file php secara langsung. Untuk itu CodeIgniter sudah menyediakan helper "url". Kemudian kita hanya memanggil fungsi site_url(), fungsi ini bawaan dari helper url CodeIgniter.

Skenario

Kita akan menambahkan navigasi pada tampilan yang telah dibuat.

• Tambahkan helper url pada CodeIgniter, caranya buka file belajar_ci/application/config/autoload.php. 

• pada view anda (buku.php) anda bisa buat navigasi,  seperti dibawah

<!DOCTYPE html>
<html>
<head>
 <title>Perpustakaan - Data Buku</title>
</head>
<body>
 <h1>Perpustakaan</h1>
 <ul>
  <li><a href="<?=site_url('data/buku')?>">Data Buku</a></li>
  <li><a href="<?=site_url('data/pegawai')?>">Data Pegawai</a></li>
  <li><a href="<?=site_url('data/siswa')?>">Data Siswa</a></li>
 </ul>
 <hr>
 <h4>Data Buku</h4>
 <ol>
  <?php 
   foreach ($data_buku as $buku) {
  ?>
  <li><?=$buku?></li>
  <?php
   }
  ?>
 </ol>
</body>
</html>

• pada kode diatas, kode navigasi berada dibawah h1 perpustakaan. pada href kita menggunakan fungsi php site_url(alamat).
• Akses menggunakan browser lagi untuk melihat hasilnya. 

 

Jika anda mengklik data pegawai atau pun data siswa, akan muncul error 404 karena kita belum membuat methodnya. anda bisa membuat halaman untuk pegawai dan siswa dengan cara yang sama seperti diatas sebagai evaluasi dari tutorial diatas.

Saya harap anda dapat memahami tutorial diatas. Jika anda berhasil, berarti anda sudah mengetahui dasar pokok pemrograman web menggunakan CodeIgniter.

Mau liat atau download source code aplikasi premium bisa disini.

Tweet