Membuat Program Sederhana dengan Codeigniter dan MySQL [FULL TUTORIAL]

Pada kesempatan kali ini saya ingin membagikan sebuah artikel yang membahas tentang bagaimana cara membuat program yang sangat sederhana dengan menggunakan Codeigniter.

Codeigniter ?

Codeigniter adalah sebuah kerangka kerja atau Framework yang dibangun menggunakan bahasa pemograman PHP. Sebenarnya ada banyak sekali artikel di luar sana yang membahas tentang Codeigniter. Jika teman-teman sekalian merupakan orang yang telah memiliki kemampuan ataupun memiliki pengalaman membuat aplikasi menggunakan Codeigniter dan berkeinginan untuk belajar lebih lanjut tentang Framework ini, saya merekomendasikan salah satu website milik dari senior saya dahulu ketika masih kuliah. Yaitu website www.mfikri.com 

Disana tersedia banyak sekali artikel yang membahas Codeigniter tingkat lanjut (expert). Beliau juga banyak membagikan Source Code secara gratis di website tersebut.

Persiapan

Sebelum mengikuti artikel ini, pastikan dulu teman-teman telah menyiapkan beberapa kelengkapan yang akan saya sebutkan di bawah ini.

• Codeigniter (Saya menggunakan versi 3.1.10)
• Xampp / Wamp (Saya menggunakan Xampp versi 3.2.1)
• Text Editor (Saya menggunakan Visual Studio Code)

Bagi teman-teman yang belum memiliki Codeigniter silahkan download dulu di situs resminya www.codeigniter.com/download

Setelah itu buatlah sebuah folder project baru kita dengan nama "program-sederhana" pada direktori C:/xampp/htdocs. Setelah itu ekstrak Codeigniter yang telah kita download tadi kedalam folder tersebut seperti gambar dibawah ini :

Sampai di tahap ini, teman-teman telah selesai menginstal Codeigniter. Untuk menjalankannya silahkan buka browser kesayangan teman-teman dan akses halaman http://localhost/program-sederhana/ 

Berikut tampilan default Codeigniter :

Membuat Database

Ada banyak cara untuk membuat database MySQL, tergantung dari kenyamanan teman-teman sendiri. Untuk kali ini saya akan membuat database dengan bantuan SQLyog

Buatlah sebuah Database dengan nama "db_program_sederhana"

Kemudian buat tabel dengan nama "tbl_mahasiswa". Berikut susunan fields nya :

Konfigurasi Codeigniter

Ada beberapa hal yang harus dikonfigurasi sebelum menggunakan Codeigniter. Namun untuk program sederhana ini kita akan mengkonfigurasi empat file penting saja yaitu autoload.php, config.php, database.php, routes.php

# autoload.php

Silahkan buka file autoload.php yang berada pada folder application/config

Cari koding berikut :

$autoload['libraries'] = array('');

$autoload['helper'] = array('');

Kemudian rubah menjadi :

$autoload['libraries'] = array('database');

$autoload['helper'] = array('url');

# config.php
Silahkan buka file config.php yang berada didalam folder application/config

Cari koding berikut :

$config['base_url'] = '';

Kemudian rubah menjadi :

$config['base_url'] = 'http://localhost/dasar-ci/';

NB : Base URL didapatkan dari URL Aplikasi yang telah kita coba jalankan dengan browser tadi.

# database.php
Silahkan buka file database.php yang ada didalam folder application/config

Cari koding berikut :

'hostname' => '',
'username' => '',
'password' => '',
'database' => '',

Kemudian rubah menjadi :

'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'db_latihan_ci',

NB : Database diisi dengan Nama Database yang telah kita buat pada langkah sebelumnya.

# routes.php
Silahkan buka file router.php yang ada didalam folder application/config

Cari koding berikut :

$route['default_controller'] = '';

Kemudian rubah menjadi :

$route['default_controller'] = 'welcome';

default_controller bertugas untuk menentukan Controller mana yang akan dijalankan pertama kali ketika kita mengakses website. Untuk contoh disini saya akan menggunakan controller 'welcome'. Yang artinya saya ingin menjalankan Controller Welcome untuk pertama kali ketika website di jalankan. File ini terletak di folder application/controllers

Edit Controller Welcome.php

Dikarenakan saya memilih Controller welcome untuk yang dijalankan pertama kali, maka kita perlu mengedit file controller ini.

Silahkan teman-teman buka file Welcome.php yang terdapat didalam folder application/controllers. Secara default, koding nya kurang lebih akan terlihat seperti berikut :

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

class Welcome extends CI_Controller {

 public function index()
 {
  $this->load->view('welcome_message');
 }
}

Seperti yang kita lihat bahwa di dalam controller welcome ini terdapat satu buah function yang bernama index.
Function index ini merupakan function yang pertama kali dijalankan ketika kita mengakses sebuah controller.

Dalam contoh kasus pembuatan Program Sederhana ini, kita menjadikan Controller Welcome sebagai Controller yang dijalankan pertama kali ketika website di akses. Sementara Function Index yang terdapat didalam Controller Welcome merupakan Function yang pertama kali dijalankan ketika kita mengakses Controller Welcome.

Saya harap sampai disini teman-teman sudah mulai paham ya.

Selanjutnya, silahkan tambahkan dua buah function lagi yang kita butuhkan untuk Controller Welcome. Kodingnya seperti berikut :

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

class Welcome extends CI_Controller {

 public function index()
 {
  $this->load->view('welcome_message');
 }

 public function simpan()
 {
  $nobp = $this->input->post('nobp');
  $nama = $this->input->post('nama');
  $jurusan = $this->input->post('jurusan');
  $alamat = $this->input->post('alamat');
  $this->db->query("insert into tbl_mahasiswa values('$nobp','$nama','$jurusan','$alamat')");
  redirect('','refresh');
 }
 
 public function tampil()
 {
  $d['data'] = $this->db->query("select* from tbl_mahasiswa");
  $this->load->view('tampil',$d);
 }   

}

Nah seperti yang kita lihat pada codebox diatas terdapat dua function yang kita tambahkan, yaitu function simpan dan function tampil. Berikut pernjelasannya secara lengkap :

#Function Index
Pada function ini kita memanggil salah satu view bernama welcome_message.php yang berada di folder application/views.  Namun aturan dalam penulisannya kita tidak boleh mengikut sertakan .php. Jadi yang kita buat hanya nama file nya saja.

#Function Simpan
Pada function ini kita mendeklarasikan inputan dari Form kedalam bentuk variabel kemudian memasukkan variabel tersebut kedalam Query insert yang berfungsi sebagai query simpan data di SQL.

$nobp = $this->input->post('nobp');

$nobp adalah sebuah variabel yang kita buat untuk menampung inputan kita terhadap elemen HTML yang diberi nama 'nobp'

Sebagai contoh misalnya di sebuah form kita membuat sebuah inputan seperti berikut :

<input type="text" name="nobp">

Karena inputan diatas kita set name="nobp" maka hasil inputan dari sini lah yang akan masuk ke variabel $nobp yang kita buat tadi.

#Function Tampil
Pada function ini kita membuat sebuah variabel dengan nama $d['data']. Dimana variabel ini berisi Query untuk menampilkan data dari SQL.

$d['data'] = $this->db->query("select* from tbl_mahasiswa");

Kemudian kita memanggil salah satu view yang bernama tampil.php dengan membawa data dari variabel $d['data'] tadi.

$this->load->view('tampil',$d);

'tampil' adalah file tampil.php yang berada didalam folder application/views. Namun .php nya tidak kita sertakan. Yang kita tulis hanya nama file nya saja.

Tidak lupa, kita sertakan $d yang menandakan bahwa file tampil.php membawa data yang diambil dari variabel $d.

Membuat Form Input Data

Nah, untuk langkah yang satu ini sebenarnya teman-teman bisa membuat sebuah form sendiri dengan cara membuat sebuah file baru di folder application/views. Namun untuk contoh kali ini, saya tidak membuat file baru, melainkan hanya mengedit file yang bernama welcome_message.php yang terdapat didalam folder application/views

Kenapa ?

Karena pada Function Index yang terdapat dalam Controller Welcome di atas kita sudah membuat file welcome_message.php untuk ditampilkan pertama kali.

Untuk itu silahkan buka file welcome_message.php pada folder application/views

Hapus semua koding yang ada di dalamnya.

Kemudian ketikkan koding untuk membuat form di bawah ini :

<h2>Form Data Mahasiswa</h2>
<form method="POST" action="<?php echo site_url('Welcome/simpan') ?>">
 <input type="text" name="nobp" placeholder="nobp">
 <br>
 <input type="text" name="nama" placeholder="nama">
 <br>
 <select name="jurusan">
  <option value="Sistem Informasi">Sistem Informasi</option>
  <option value="Sistem Komputer">Sistem Komputer</option>
 </select>
 <br>
 <input type="text" name="alamat" placeholder="alamat">
 <br><br>
 <button type="submit">Simpan Data</button>
 &nbsp;
 <a href="<?php echo site_url('Welcome/cetak') ?>">Cetak Data</a>
</form>

Penting !!!

action="<?php echo site_url('Welcome/simpan') ?>"

Pada koding action di atas harus ada pada tag Form. Ini bertujuan sebagai link mana yang kita tuju setelah menekan tombol submit.

Welcome adalah nama Controller yang kita panggil.
Simpan adalah nama function yang kita panggil dan terdapat di controller Welcome.

Jika teman-teman salah dalam mengisi link diatas, maka program tidak akan jalan seperti yang diharapkan. Dan sudah dapat dipastikan teman-teman akan mendapatkan berbagai macam pesan error.

Sekarang, jika teman-teman jalankan dengan mengakses url http://localhost/program-sederhana/
maka tampilannya akan seperti berikut :

Silahkan coba input data melalui halaman tersebut. Untuk melihat datanya sudah tersimpan atau tidak, teman-teman bisa melihat di software SQLyog atau di phpMyAdmin.

Membuat View Tampil Data

Jika data sudah berhasil tersimpan di SQL, maka langkah terakhir yang harus kita selesai kan adalah membuat sebuah view baru yang berfungsi untuk menampilkan data yang telah kita inputkan tadi.

Buat sebuah file bernama tampil.php di dalam folder application/views,

Kemudian ketikkan koding berikut :

<h2>Tampil Data Mahasiswa</h2>
<table border="1" width="80%">
    <tr>
        <th>NOBP</th>
        <th>NAMA</th>
        <th>JURUSAN</th>
        <th>ALAMAT</th>
    </tr>
    <?php foreach ($data->result_array() as $d) { ?>
    <tr>
        <td align="center"><?php echo $d['nobp'] ?></td>
        <td align="center"><?php echo $d['nama'] ?></td>
        <td align="center"><?php echo $d['jurusan'] ?></td>
        <td align="center"><?php echo $d['alamat'] ?></td>
    </tr>
    <?php } ?>
</table>

Sekarang, coba jalankan dengan meng-klik link Tampil Data yang ada pada Form Input Data

Maka akan tampil sebagai berikut :

Sampai disini dulu artikel kali ini, semoga apa yang saya tulis disini bisa bermanfaat untuk teman-teman pembaca. Silahkan bagikan dan tinggalkan jejak di kolom komentar. Terimakasih.