CodePengontrol dan Perutean Tampilan Igniter: Pelajari dengan Aplikasi Contoh

Oleh: Fiona Coklat Fiona Coklat
Hours Updated

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

  • Rute – routing bertanggung jawab untuk menanggapi URL permintaan. Perutean cocok dengan URL ke rute yang telah ditentukan sebelumnya. Jika tidak ditemukan rute yang cocok, maka, CodeIgniter melempar pengecualian "halaman tidak ditemukan".
  • controller – Rute dihubungkan ke controller. Controller menghubungkan model dan view. Controller meminta data/logika bisnis dari model dan mengembalikan hasilnya dalam tampilan view. Setelah itu, URL Setelah dicocokkan dengan sebuah rute, data 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 yang baru CodeProyek Igniter

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 sebuah CodeBuat proyek Igniter menggunakan Composer. Jalankan perintah berikut.

composer create-project CodeIgniter/framework ci-app

SINI,

  • Perintah di atas membuat yang baru CodeProyek Igniter 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 yang Baru CodeProyek Igniter

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 yang berikut ini URL: http://localhost:3000/

Anda akan mendapatkan halaman berikut

Buat yang Baru CodeProyek Igniter

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

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

CodePerutean Igniter

Untuk saat ini, aplikasi kami hanya memiliki satu URL yaitu halaman beranda. Di bagian ini, kita akan menyesuaikan bagian beranda. Kita akan membuat beberapa hal baru. URLyang akan menanggapi berbagai permintaan.

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
  • $route['404_override'] = ”; rute ini memungkinkan Anda untuk menentukan rute khusus untuk kesalahan 404. Kesalahan 404 terjadi ketika halaman tidak ditemukan. CodeIgniter memiliki penanganan kesalahan bawaan, tetapi Anda dapat menentukan sendiri jika Anda mau.
  • $route['translate_uri_dashes'] = FALSE; Opsi ini memungkinkan Anda untuk menerjemahkan tanda hubung menjadi garis bawah. Kita akan membahas opsi ini ketika kita melihat cara kerja rute di CodeAlat penyala.

Sekarang mari kita lihat metode controller yang bertanggung jawab untuk menampilkan halaman beranda yang kita lihat saat membuka aplikasi. 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('No direct script access allowed'); melindungi dari akses langsung ke kelas controller tanpa melalui file index.php. Ingat, dalam paradigma MVC semua permintaan memiliki satu titik masuk, dan untuk CodeIgniter, file index.php-nya. Kode ini memblokir semua permintaan yang tidak berasal dari 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 hanya mengeksplorasi apa yang tersedia secara langsung. CodeIgniter, sekarang mari kita coba melakukan beberapa perubahan. Kita akan membuat halaman beranda kita 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 yang berikut ini URL di peramban Anda: http://localhost:3000/

Anda seharusnya dapat melihat hal berikut ini

CodePerutean Igniter

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 seorang pengunjung datang berkunjung ke URL /about-us, kami sedang memberikan instruksi CodeIgniter akan mencari controller Welcome dan menjalankan 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, silakan buka yang berikut ini. URL di peramban web Anda: http://localhost:3000/index.php/about-us

Anda akan melihat halaman berikut

Buat Tampilan di CodeAlat penyala

Jika Anda dapat melihat halaman di atas, selamat, Anda telah berhasil membuat aplikasi sederhana di CodeAlat penyala.

Ringkasan

Dalam tutorial ini, kita telah membahas tiga (3) komponen utama yang membentuk sebuah CodeAplikasi Igniter. Kita telah mempelajari rute dan cara mendefinisikannya, controller dan cara membuat metode yang merespons permintaan rute, serta membuat view sederhana yang dikembalikan kepada pengguna ketika mereka meminta suatu sumber daya.

Ringkaslah postingan ini dengan: