Pengontrol CodeIgniter, Perutean Tampilan: Belajar dengan Aplikasi Contoh

Oleh: Fiona Coklat Fiona Coklat
Hours Updated

Dalam tutorial ini, Anda akan mempelajari topik-topik berikut.

  • Rute – perutean bertanggung jawab untuk menanggapi permintaan URL. Perutean mencocokkan URL dengan rute yang telah ditentukan sebelumnya. Jika tidak ditemukan kecocokan rute, CodeIgniter menampilkan halaman tidak ditemukan pengecualian.
  • controller – rute ditautkan ke pengontrol. Pengontrol merekatkan model dan tampilan menjadi satu. Permintaan data/logika bisnis dari model dan mengembalikan hasilnya dalam presentasi tampilan. Setelah URL dicocokkan dengan rute, URL tersebut diteruskan ke fungsi publik pengontrol. Fungsi ini berinteraksi dengan sumber data, logika bisnis, dan mengembalikan tampilan yang menampilkan hasilnya.
  • views – pandangan bertanggung jawab untuk presentasi. Tampilan biasanya merupakan kombinasi HTML, CSS, dan JavaScript. Bagian ini bertanggung jawab untuk menampilkan halaman web kepada pengguna. Biasanya, data yang ditampilkan diambil dari database atau sumber data lain yang tersedia.

Cara membuat proyek CodeIgniter baru

Kami akan menggunakan Komposer untuk membuat proyek baru. Saya akan menggunakan server bawaan PHP, jadi tidak perlu memiliki software tambahan seperti Apache. Dalam tutorial ini, kami menggunakan Windows sistem operasi. Oleh karena itu, kami telah membuat folder Sites di drive C. Anda dapat menggunakan direktori mana pun yang sesuai untuk Anda.

Buka baris perintah/terminal dan jalankan perintah berikut

cd C:\Sites

Sekarang kita akan membuat proyek CodeIgniter menggunakan Composer. Jalankan perintah berikut

composer create-project CodeIgniter/framework ci-app

SINI,

  • Perintah di atas membuat proyek CodeIgniter baru versi 3 menggunakan rilis stabil terbaru yaitu 3.1.9 ke dalam direktori ci-app.

Ketika perintah di atas selesai dijalankan, Anda akan mendapatkan hasil yang mirip dengan berikut ini di terminal

Buat proyek CodeIgniter Baru

Jalankan perintah berikut untuk menelusuri direktori proyek yang baru dibuat ci-app

cd ci-app

Sekarang mari kita mulai server web bawaan PHP

 php -S localhost:3000

SINI,

  • Perintah di atas memulai server PHP bawaan yang berjalan pada port 3000.

Buka peramban web dan telusuri URL berikut: http://localhost:3000/

Anda akan mendapatkan halaman berikut

Buat proyek CodeIgniter Baru

Jika sudah terlihat halaman diatas maka selamat anda sudah berhasil melakukan instalasi CodeIgniter.

Seperti yang dapat Anda baca dari halaman web di atas, halaman yang ditampilkan di atas dirender oleh tampilan yang terletak di application/views/welcome_message.php dan pengontrol yang bertanggung jawab terletak di application/controllers/Welcome.php

Perutean CodeIgniter

Untuk saat ini, aplikasi kita hanya memiliki satu URL yaitu halaman beranda. Di bagian ini, kami akan menyesuaikan bagian beranda. Kami akan membuat beberapa URL baru yang akan menanggapi permintaan berbeda.

Mari kita mulai dengan rute halaman beranda

Buka file rute seperti yang ditunjukkan oleh jalur di bawah ini

application/config/routes.php

Anda seharusnya dapat melihat konten berikut

$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

SINI,

  • $route['default_controller'] = 'selamat datang'; mendefinisikan pengontrol default yang merespons permintaan URI
  • $rute['404_override'] = ”; rute ini memungkinkan Anda menentukan rute khusus untuk kesalahan 404. Kesalahan 404 terjadi ketika halaman tidak ditemukan. CodeIgniter memiliki pengendali default untuk kesalahan tersebut tetapi Anda dapat mendefinisikannya sendiri jika diinginkan.
  • $route['translate_uri_dashes'] = SALAH; opsi ini memungkinkan Anda menerjemahkan tanda hubung menjadi garis bawah. Kita akan membicarakan opsi ini ketika kita melihat bagaimana rute bekerja di CodeIgniter.

Sekarang mari kita lihat metode pengontrol yang bertanggung jawab untuk menampilkan halaman beranda yang kita lihat saat kita membuka URL http://localhost:3000/ di browser web.

Buka file berikut ini

application/controllers/Welcome.php

Anda seharusnya dapat melihat kode berikut

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

class Welcome extends CI_Controller {

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

SINI,

  • Defined ('BASEPATH') OR exit('Tidak ada akses skrip langsung yang diperbolehkan'); melindungi terhadap akses langsung ke kelas pengontrol tanpa melalui file index.php. Ingat, dalam paradigma MVC semua permintaan memiliki satu titik masuk, dan untuk CodeIgniter, index.php-nya. Kode ini memblokir semua permintaan yang tidak datang melalui index.php
  • class Welcome extends CI_Controller {…} mendefinisikan kelas Welcome yang memperluas kelas induk CI_Controller
  • public function index() mendefinisikan fungsi publik yang dipanggil secara default saat Anda membuka beranda
  • $ini->muat->lihat('pesan_selamat datang'); baris ini memuat tampilan pesan_selamat datang. File selamat datang_message terletak di direktori application/views/welcome_message.php

Sejauh ini, kita baru menjelajahi apa yang ada di CodeIgniter, sekarang mari kita coba membuat beberapa perubahan. Kita akan membuat halaman beranda dan mengganti halaman default

Buat file baru di application/views/home.php

Tambahkan kode berikut ke home.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Hello CodeIgniter!</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
        <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    </head>
    <body>
        <section class="section">
            <div class="container">
                <h1 class="title">
                    CodeIgniter Hello World
                </h1>
            </div>
        </section>
    </body>
</html>

SINI,

Kode HTML di atas memuat kerangka SSS Burma dan font dari jaringan CDN untuk membuat dokumen HTML yang sangat mendasar. Ini menerapkan aturan CSS yang sangat sederhana dari kerangka Burma CSS.

Buka URL berikut di peramban Anda: http://localhost:3000/

Anda seharusnya dapat melihat hal berikut ini

Perutean CodeIgniter

Hebat, kita baru saja berhasil memodifikasi halaman beranda. Selanjutnya, mari kita tentukan rute kita. Anggap saja aplikasi kita juga harus mampu menampilkan halaman tentang kami.

Buat Rute

Buka file rute application/config.routes.php

Tambahkan rute berikut

$route['about-us'] = 'welcome/about_us';

SINI,

  • Ketika pengunjung mengunjungi URL /about-us, kami menginstruksikan CodeIgniter untuk mencari controller Welcome dan mengeksekusi metode about_us.

Buat Pengontrol

Sekarang mari kita tentukan metode pengontrol tentang kita

Buka aplikasi/controllers/Welcome.php

Tambahkan metode berikut

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

SINI,

  • Kode di atas mendefinisikan fungsi about_us dan memuat tampilan about_us.

Buat Tampilan

Sekarang mari kita buat tampilan yang baru saja kita referensikan di bagian atas

Buat file baru about_us.php di application/views/about_us.php

Tambahkan kode berikut

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>About CodeIgniter!</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
        <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    </head>
    <body>
        <section class="section">
            <div class="container">
                <h1 class="title">
                    About us yap...                
                </h1>
            </div>
        </section>
    </body>
</html>

Kita sudah siap, buka URL berikut di peramban web Anda: http://localhost:3000/index.php/about-us

Anda akan melihat halaman berikut

Buat Tampilan di CodeIgniter

Jika Anda sudah bisa melihat halaman diatas maka selamat, Anda telah berhasil membuat aplikasi sederhana di CodeIgniter.

Ringkasan

Dalam tutorial ini, kita membahas tiga (3) komponen utama yang membentuk aplikasi CodeIgniter. Kami melihat rute dan cara mendefinisikannya, pengontrol dan cara membuat metode yang merespons permintaan rute dan membuat tampilan sederhana yang dikembalikan ke pengguna saat mereka meminta sumber daya.