Tutorial Membuat Program Sederhana pada Framework CodeIgniter

Tutorial Membuat Program Sederhana pada CodeIgniter

Pada contoh program di bawah ini akan ditunjukkan bagaimana membuat program apotik disertakan pembuatan database, login, validation form dan Create, Read, Update, Delete (CRUD).

 

Persiapan Database

Langkah pertama adalah mendesain dan membuat database. Mengapa? Karena database akan sangat berhubungan dengan jalannya data program yang akan dibuat. Pada tutorial berikut ini akan digunakan aplikasi server XAMPP.

Buat database dengan nama db_apotik atau yang lain, lalu copy-kan code di bawah dengan intruksi seperti di bawah ini :

Tutorial Membuat Program Sederhana pada CodeIgniter

Tutorial Membuat Program Sederhana pada CodeIgniter

Tutorial Membuat Program Sederhana pada CodeIgniter

Tutorial Membuat Program Sederhana pada CodeIgniter

Tutorial Membuat Program Sederhana pada CodeIgniter

Tutorial Membuat Program Sederhana pada CodeIgniter

Setelah Anda copy dan klik GO maka table yang terbuat seperti berikut :

Tutorial Membuat Program Sederhana pada CodeIgniter

Templating

Pada tutorial ini akan digunakan template sb admin 2. Untuk mendapatkan template sb admin 2 dapat di download pada link berikut, https://startbootstrap.com/template-overviews/sb-admin-2/.

  1. Siapkan paket CodeIgniter, lalu ekstrak dan copy-kan kedalam folder C:\xampp\htdocs atau sesuai tempat Anda menginstall XAMPP-nya. (Anda dapat mengganti nama foldernya). Disini saya memberi nama codeigniter.

    Tutorial Membuat Program Sederhana pada CodeIgniter

  2. Ekstrak juga paket sb admin 2 yang telah Anda download. Copy-kan ke dalam folder codeigniter pada folder htdocs yang tadi.
  3. Buka folder codeigniter di sublime.

    Tutorial Membuat Program Sederhana pada CodeIgniter

  4. Konfigurasi 4 file CodeIgniter. Anda dapat lihat pada bab 3 poin 3.2,untuk database sesuaikan dengan nama database yang Anda buat.
  5. Buat file baru dengan nama template.php pada folder application/views/.

    Tutorial Membuat Program Sederhana pada CodeIgniter

  6. Sekarang buka file blank.html pada folder sbadmin2/pages/. Dan copy-kan semua code kedalam file template.php.
  7. Pada file template.php cari tag div yang berada pada komentar . Hapus 1 tag div tersebut.

    Tutorial Membuat Program Sederhana pada CodeIgniter

    Ganti codingan diatas dengan coding dibawah ini :

    Tutorial Membuat Program Sederhana pada CodeIgniter

    main_view nantinya akan dipanggil dengan file view lainnya yang berisi sebagai content dari halaman web-nya. Sehingga kita tidak perlu membuat header dan footer di setiap view yang dibuat.

 

Login

Setelah melakukan templating, selanjutnya kita coba untuk membuat halaman login untuk masuk ke dalam aplikasi. Untuk template halaman login dapat Anda download sendiri sesuai yang Anda inginkan.

Setelah download template untuk halaman login Anda dapat membuat content-nya seperti pada sintaks di bawah ini. Yang perlu diperhatikan pada tag form. Placeholder digunakan untuk nama bayangan pada form inputan. Dan perhatikan pula name pada setiap tag input.Untuk pengecekan nantinya Anda dapat memasukan manual pada databasenya (table Admin) dan berikan MD5 untuk passwordnya.

Tutorial Membuat Program Sederhana pada CodeIgniter

Kita juga perlu membuat file Controller dari halaman login ini. Buat file pada folder controllers dengan nama Login.php. Adapun sintaks yang perlu dituliskan pada file Login.php sebagai berikut :

Tutorial Membuat Program Sederhana pada CodeIgniter

Selanjutnya, buat file Model pada folder models dengan nama Login_model.php . Model pada login ini digunakan untuk memeriksa user di database. Adapun sintaks yang perlu dituliskan pada file Login_model.php sebagai berikut :

Tutorial Membuat Program Sederhana pada CodeIgniter

Setelah selesai membuat file view, controller dan model maka kode program siap untuk dijalankan. Buka browser Anda, dan jangan lupa untuk mengaktifkan XAMPP (Apache dan MySQL).

Hasil :
Tampilan awal saat mengakses halaman login. Ada 2 inputan yaitu Username dan Password.

Tutorial Membuat Program Sederhana pada CodeIgniter

Terdapat validasi form pada halaman login ini. Saat mengklik button Login tersebut, tanpa anda mengisikan Username dan Password (kosong), validasi form tersebut akan muncul, seperti gambar di bawah ini.

Tutorial Membuat Program Sederhana pada CodeIgniter

 

CRUD

Langkah selanjutnya kita akan membuat CRUD pada aplikasi apotiknya. Disini akan dicontohkan CRUD pada data-data obat saja, sehingga untuk data supplier dapat Anda gunakan untuk latihan mandiri.

  1. File views, dengan nama add_obat_view.php
    File ini digunakan untuk form inputan data obat yang juga menggunakan fasilitas upload gambar.

    Tutorial Membuat Program Sederhana pada CodeIgniter

    Tutorial Membuat Program Sederhana pada CodeIgniter

  2. File view, data_obat_view.php.
    File ini digunakan untuk menampilkan data-data yang telah di inputkan pada database biasanya juga disebut select data.

    Tutorial Membuat Program Sederhana pada CodeIgniter

    Tutorial Membuat Program Sederhana pada CodeIgniter

  3. File edit_obat_view.php
    File ini digunakan untuk menampilkan halaman edit data obat atau update data obat.

    Tutorial Membuat Program Sederhana pada CodeIgniter

    Tutorial Membuat Program Sederhana pada CodeIgniter

    Tutorial Membuat Program Sederhana pada CodeIgniter

  4. File controller Obat.php
    File ini digunakan sebagai pengendali terhadap desain dan juga kontruksi dari penggunaan database. Kadang dibutuhkan controller lain untuk digunakan pada salah satu controller lainnya.

    Tutorial Membuat Program Sederhana pada CodeIgniter

    Tutorial Membuat Program Sederhana pada CodeIgniter

    Tutorial Membuat Program Sederhana pada CodeIgniter

    Tutorial Membuat Program Sederhana pada CodeIgniter

    Untuk fungsi upload gambar, dibutuhkan folder untuk penyimpanan gambar-gambar yang diupload. Maka dari itu sesuai path yang telah decoding di atas buat folder di xampp/htdocs/nama_foler_projek/image/.

  5. File Models Obat_model.php
    File model ini digunakan untuk berhubungan dengan data dan interaksi ke database yang terhubung dengan projek yang dibuat.

    Tutorial Membuat Program Sederhana pada CodeIgniter

    Tutorial Membuat Program Sederhana pada CodeIgniter

Setelah selesai semua, file-file di atas siap untuk di eksekusi. Berikut adalah tampilan dari kode program diatas :

Tutorial Membuat Program Sederhana pada CodeIgniter

Tutorial Membuat Program Sederhana pada CodeIgniter

Tutorial Membuat Program Sederhana pada CodeIgniter

Tutorial Membuat Program Sederhana pada CodeIgniter

Ebook Panduan lengkap Framework CodeIgniter IDCloudHost

Related Articles

Daftar Domain ID Premium (Terlengkap dan Termurah) – IDCloudHost
Cara Menggunakan Promo TRAVELOKA-POINTS di IDCloudHost
Formulir Berhenti Berlangganan Email IDCloudHost
Cara Menggunakan Promo GO-POINTS di IDCloudHost
Cara Membuat Tabel Dengan Menggunakan Plugin Tablepress Pada WordPress
popup image