Tutorial Codeigniter Lengkap Part 1 (Konfigurasi CI Dan Membuat Tampilan Dengan Bootstrap)

Tutorial Codeigniter Lengkap Part 1 (Konfigurasi CI Dan Membuat Tampilan Dengan Bootstrap) – Tutorial Codeigniter kali ini saya memulai dengan membuat settingan dasar codeigniter dan membuat tampilan web terlebih dahulu. Mari mengenal codeigniter dulu.

CodeIgniter merupakan aplikasi open source yang berupa kerangka kerja PHP dengan model MVC (Model-View-Controller) untuk membangun website dinamis dengan menggunakan PHP. CodeIgniter memudahkan pengembang web untuk membuat aplikasi web dengan cepat mudah dibandingkan dengan membuatnya dari awal. Saya kutip dari wikipedia.

Kali ini saya menggunakan code editor atom dan menggunakan link aktif dari bootstrap untuk mempermudah dalam mengatur tampilan halaman web. Saya sarankan untuk mencontoh tutorial yang saya berikan dengan baik.


Tutorial Codeigniter Lengkap Part 1 (Konfigurasi CI Dan Membuat Tampilan Dengan Bootstrap)

Jika settingan ci dan tampilan web pada tutorial ini sudah selesai baru anda dapat mempercantik tampilan web sesuka anda. Anda dapat membuat folder sendiri sendiri untuk menambahkan source code css dan javascript tambahan pada folder tersebut.

Langkah Instalasi Codeigniter

Kali ini saya akan melakukan instalasi codeigniter menggunakan aplikasi wampp sebagai server lokal. Anda boleh menggunakan aplikasi pengelola web server lainnya seperti contohnya Xampp yang banyak juga digunakan.

Pertama download dulu file zip codeigniter versi 3.1.10 di website resmi codeigniter.com. Kemudian extract file ke folder www (jika menggunakan wampp). Untuk anda pengguna xampp, telakkan di dalam folder htdocs.

Seletah proses extract file selesai, didalam folder CodeIgniter-3.1.10 akan terdapat beberapa folder dan file-file. Yaitu folder aplication, system, dan user_guide. Yang akan kita sering gunakan adalah folder aplication.

Walaupun begitu bukan berarti anda boleh menghapus folder dan file yang lain. biarkan saja folder dan file yang lain jangan kita ubah-ubah isinya. Di dalam folder aplication sendiri juga dibagi dalam beberapa folder.

Di dalam folder aplication yang akan sering kita gunakan yaitu pada folder config, controllers, models, dan folder views (PHP MVC). Folder config untuk melakukan pengaturan konfigurasi seperti database, routers, autoload, dll.

Pada folder controllers digunakan untuk meletakkan file yang berfungsi melakukan pengaturan fungsi control untuk views dengan models. Controllers bisa dibilang sebagai penghubung views dengan controllers.

Pada folder models digunakan untuk meletakkan file yang berfungsi melakukan pengaturan konfigurasi query. Pada folder views digunakan untuk meletakkan file file khusus tampilan web. Itulah sedikit penjelasan singkatnya.


Anda dapat mengganti nama folder CodeIgniter-3.1.10 menjadi nama yang lain. Pada tutorial kali ini saya mengganti nama folder tersebut menjadi CI-INPONOW. Sekarang coba aktifkan service wampp/xampp anda lalu ketikan localhost/CI-INPONOW.

Langkah Konfigurasi Codeigniter

Pertama kita mulai dengan melakukan konfigurasi pada folder config yang berada di folder aplication terlebih dahulu. Pilih application/config/config.php lalu pada bagian $config['base_url'] isikan alamat url CI anda. Seperti :

$config['base_url'] = 'http://localhost/CI-INPONOW';

Lalu terdapat konfigurasi $config['index_page'] = 'index.php'; maka hilangkan index.php, dan akan menjadi seperti ini $config['index_page'] = ''; jika sudah kita tutup saja halaman config.php.

Lanjut lagi kita akan konfigurasi pada file autoload.php yang terletak di application/config/autoload.php kemudian scroll kebawah. Cari konfigurasi seperti ini $autoload['helper'] = array(); kemudian tambahkan url di dalam array tsb.

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

Kemudian kita beralih ke file routers.php yang berada di application/config/routes.php kemudian scroll halaman paling bawah lalu cari konfigurasi $route['default_controller']. Nah, secara default akan terisi welcome, kemudian kita rubah menjadi C_inponow.

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

C_inponow adalah nama file yang akan kita buat di dalam folder controllers, anda dapat mengubahnya menjadi C_namaanda sendiri. Lanjut lagi ke langkah berikutnya, yaitu membuat file .htaccess di dalam folder CI-INPONOW. Lebih tepatnya di luar folder application, system, user_guide.

Caranya gini kita klik kanan pada folder CI-INPONOW->pilih new file-> beri nama dengan ( .htaccess ) jangan lupa diawali dengan titik. Langkah ini untuk menghilangkan penggunaan index.php pada url web kita.Kemudian di dalam file tersebut kita isikan konfigurasi dibawah ini.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

Ok jika sudah, kita tutup saja halaman (.htaccess) dan kita beralih ke step selanjutnya. Langkah selanjutnya, kita buka file database.php yang terletak di application\config\database.php, kemudian scroll paling bawah. Temukan konfigurasi $db['default'] lalu ubah 5 bagian penting ini saja, yaitu :

'hostname' => 'localhost',
'username' => 'root',
'password' => 'passwordanda',
'database' => 'namadatabase',
'dbdriver' => 'mysqli',

Langkah diatas mengatur agar web kita terkoneksi dengan database local kita. Bagaimana mudah bukan? Lanjut kita akan mulai beralih ke folder Views, dan jangan lupa untuk save setiap perubahan yang kita konfigurasikan sebelumnya.

Kita akan buat 2 folder baru di dalam folder views ini. Pertama yaitu folder template untuk menyimpan file (header.php) dan (footer.php). Kedua yaitu folder section untuk menyimpan file (index.php) dan file halaman lainnya yang akan kita buat pada tutorial selanjutnya.

Pastikan anda sudah membuat folder dan file yang telah saya sebutkan. Saya mulai dari (header.php), dimana file tersebut berisi tampilan bagian header seperti navigasi, sedikit style css, dan link css eksternal yang saya ambil dari framework bootstrap. Isikan seperti yang saya contohkan dibawah ini :

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!—CSS LINK Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- CSS -->
    <title><?php echo $judul; ?></title>
</head>
<style media="screen">
  a {
    color: #fff;
  }
</style>

<body>
  <nav class="navbar navbar-expand-lg bg-primary">
    <div class="container"> <a class="navbar-brand" href="<?= base_url(); ?>">CodeIgniter-Inponow</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
        aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav"> <a class="nav-item nav-link active" href="<?= base_url(); ?>">Home <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="<?= base_url();?>">Data</a> <a class="nav-item nav-link"
            href="<?php base_url(); ?>">About</a> </div>
      </div>
    </div>
  </nav>

Ok lanjut lagi, kita beralih untuk mengkoding bagian (footer.php). Bagian ini berisi tampilan footer (bagian terbawah pada sebuah website). Pada file ini anda cukup mengkoding bagian footer saja, kita tidak perlu menulis ulang script header lagi. Source codenya seperti yang saya contohkan dibawah ini.

Lihat juga : Tutorial NodeJS (Membuat CRUD di nodejs dan mysql)

Ok kita lanjut untuk membuat file (index.php) yang ada di folder section. Pada folder ini kita akan sering gunakan karena pada folder ini merupakan tempat penyimpanan semua isi tampilan web (home page, content page, dll).

Kali ini kita buat tampilan home page terlebih dahulu, untuk halaman isi web yang lain, admin akan buat di artikel tutorial codeigniter selanjutnya. Ok, untuk source code (index.php) seperti yang saya contohkan dibawah ini (saya hanya buat yang simple, buat beda juga boleh hehe).

<div class="container mt-4"> <br>
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1>WELCOME Ke CodeIgniter mu...,</h1>
      <p class="lead">Sinau CI...</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <center><a href="" class="btn btn-primary mt-4">Mulai Kelola Data</a></center>
    </div>
  </div> <br><br>
</div>

Ok jika sudah,kita beralih ke folder controllers pada folder Controllers kita buat file baru dengan cara klik kanan pada folder tersebut->pilih new file->berikan nama (C_inponow.php). Pada source code controller (C_inponow.php) terdapat public function index yang dapat di artikan sebagai alamat home page default anda.


Cara pemanggilannyapun kita cukup panggil dengan alamat seperti ini http://localhost/CI-INPONOW/ tanpa harus mendeklarasikan alamat lengkapnya. Dalam file C_inponow.php isikan seperti contoh di bawah ini.

<?php
class C_inponow extends CI_Controller {
  public function index() {
    $data['judul'] = 'Inponow Home';
    $this->load->view('template/header', $data);
    $this->load->view('section/index', $data);
    $this->load->view('template/footer'); 
  }
} 
?>

Kesimpulan

Jadi, dalam penggunaan framework codeigniter keuntungan salah satunya yaitu kita dapat membagi bagian header, footer, sidebar, dan bagian body (isi web) secara terpisah. Dan itu dapat mempercepat kita dalam proses membuat website.


Jadi kita tidak perlu mengetik ulang bagian header, footer, dan sitebar ke dalam halaman masing-masing. Semua bagian bagian tersebut dapat kita satukan/gabung dengan melakukan sedikit konfigurasi di controllers. Jika semua sudah maka tampilannya akan menjadi seperti contoh dibawah ini.

Hasil Akhir

Untuk pengaturan pada folder models akan saya jelaskan pada tutorial selanjutnya. Karena pada tutorial ini kita belum membutuhkan pengaturan query pada models. Ok sekian dari artikel Tutorial Codeigniter Lengkap Part 1. Kurang lebihnya mohon maaf dan semoga dapat bermanfaat.