Install Code Igniter 4 dan Memulai Membuat Web Sederhana (P.1)

Install Code Igniter 4 dan Memulai Membuat Web Sederhana - Halo sobat Sidat.ID, bagaimana kabar sobat semua ? semoga selalu dalam keadaan sehat dan sukses ya. Kali ini kita akan belajar membuat web yaitu dengan menggunakan Code Igniter 4. Jadi sesi ini akan kita buat bertahap ya sobat, semoga apa yang disampaikan dalam sesi ini dapat membantu sobat nantinya dalam membuat sebuah website sederhana dengan Code Igniter 4. Oke, yuk kita mulai saja tutorialnya.

Installasi Kebutuhan

Pertama, untuk tahap instalasi kebutuhan, disini kita memerlukan XAMPP dengan versi PHP 7++. Karena itu adalah kebutuhan dasar kita untuk code igniter versi 4 ini. Bagi sobat yang menggunakan WAMP, dll tolong disesuaikan ya.

Kedua, kita membutuhkan Composer, untuk menginstall code igniter 4 nantinya. Karena saat ini kita bisa menginstall code igniter 4 dengan composer. Sobat bisa melihat juga pada dokumentasi website code igniter 4. Sobat bisa menuju ke website composer.org , dan nanti sobat klik Download, seperti gambar berikut ini.

Selanjutnya, kalau sobat menggunakan OS windows , bisa download aplikasinya (pada gambar berikut - dengan kotak merah) dan kemudian di install seperti biasa di windows sobat.

Kalau sobat menggunakan MAC OS, sobat bisa menginstallnya menggunakan terminal. Dan caranya pun sudah ada di composer.org

Ketiga, kita akan menginstall GIT, sebenarnya untuk git ini sifatnya opsional, namun kali ini sebaiknya diinstall dulu karena ini juga penting untuk programmer handal seperti sobat semua. GIT adalah sejenis terminal yang memang sedang banyak digunakan utnuk menginstall code igniter. Dan cara penggunaanya juga sangatlah mudah.

Jadi cara install GIT, silahkan sobat ke alamat git-scm . nanti sobat bisa klik download seperti gambar di bawah ini.

Kalau sudah di klik download, kita akan diarahkan ke halaman berikutnya. Disini ada beberapa versi GIT untuk OS Windows, MAC, dan juga Linux. Jadi sobat silahkan pilih, dan install sesuai kebutuhan ya.

Keempat, sobat juga perlu code editor ya. Ada banyak versi kode editor dan sobat bisa menggunakan salah satunya. Pada contoh yang akan kita gunakan disini, kita menggunakan Visual Studio Code. Kalau sudah kita install semuanya, sekarang kita akan mulai install Code Igniter 4.

Installasi Code Igniter 4

Untuk memulai menginstall Code Igniter 4, ada beberapa versi yang bisa sobat baca pada dokumentasi Code Igniter 4 pada halaman websitenya. Dan untuk kali ini, kita akan install menggunakan composer, karena pada tahap pertama kita sudah menginstall semua kebutuhannya.

Pertama, kita akses direktori XAMPP (bagi yang menggunakan XAMPP). yaitu pada C:\xampp\htdocs. jadi di direktori ini, sobat klik kanan kemudian pilih Git Bash Here (ini contoh untuk pengguna windows ya sobat).

Kedua, muncul tampilan dari git bash. Kita sudah berada di direktori xampp. Selanjutnya ketikkan script berikut dan tekan enter untuk memulai instalasi.

codenya yaitu :

composer create-project codeigniter4/appstarter nama_project --no-dev

Pada code diatas, sobat berikan nama_project yang akan sobat buat, jadi sesuaikan sendiri ya sob. Setelah itu tekan enter dan akan memulai proses instalasinya.

Kalau sudah selesai, maka akan muncul folder nama_project kita di direktori C:\xampp\htdocs. Dan itu artinya kita sudah berhasil untuk proses instalasi Code Igniter 4 (pada contoh itu nama projeknya ci4web).  Sekarang kita bisa lanjut unutk proses codingnya.

Memulai Code Igniter 4

Sesudah kita instalasi semua kebutuhan, termasuk sudah membuat projek ci4. Sekarang kita akan memulai dengan mengakses halaman pertama pada Code Igniter 4. 

Pertama, kita nyalakan dulu localhostnya melalui Git Bash. Pertama sobat masuk ke direktori ci4web (direktori projek) kemudian klik kanan disana, dan klik Git Bash Here. Atau kalau sobat masih pada direktori xampp\htdocs bisa ketikkan saja cd ci4web pada terminal git.

Kedua, kita jalankan localhostnya dengan mengetikkan php spark serve pada git terminal, sobat bisa liha gambar dibawah ini, dan kemudian tekan enter untuk menjalankan servicenya.

Untuk lebih jelasnya, sobat bisa lihat pada gamabr diatas. Jadi ketika servicenya sudah berjalan, jangan di close gitnya, karena kalau di close nanti kita tidak bisa akses localhostnya untuk menjalankan webnya di browser.

Ketiga, kita akses webnya dengan mengetikkan localhost di browser, dan nanti secara otomatis akan menjadi localhost:8080 (port 8080) karena kita menggunakan php spark serve. Kalau sudah muncul tampilan seperti berikut ini, berarti kita sudah berhasil install Code Igniter degan menjalankan servicenya.

Keempat, kita akan menuju codinya. Jadi persiapkan code editor sobat. Kita akan mulai dari merubah enviroment untuk code. Coba sobat buka pada direktori ci4web (sesuaikan dengan project), disana ada file env, kita copy filenya kemudian di rename menjadi .env sehingga nanti iconya berubah menjadi gerigi. seperti gamber berikut. 

Dan kalau sudah, kita ubah #CI_ENVIRONMENT = production menjadi CI_ENVIRONMENT = development jangan lupa tanda # (comment) dihilangkan. Gunanya adalah, ketika dalam proses coding ada error code makan errornya akan muncul dan memudahkan kita untuk memperbaikinya. Dapat dilihat pada contoh berikut.

Nah di file .env, ada lagi yang perlu kita ubah. Yaitu pada #app.BaseURL , kita berikan app.BaseURL = 'http://localhost:8080/' dan jangan lupa di # juga dihilankan. Setelah itu, sobat bisa save.

Kelima, kita menuju ke file Routes , lokasi ada di App\Routes. Sobat cari pada Route Definition dan akan menemukan $routes->get('/', 'Home::index');. Ini makdusnya, Apabila ada yang mengakses ke halaman root (localhost:8080) maka akan diarahkan ke Controller Home dengan method Index. Sobat bisa menambahkan routes yang lainnya.

Filenya ada di App\Controller\Home.php. Jadi Home.php ini adalah controller, jado routesnya mengarah ke cotroller home dan methodnya index.

Ketika method ini dipanggil, maka akan memanggil view welcome_message. filenya sobat bisa temukan di folder app kemudian cari folder Views\welcome_message.php. 

Jadi penjelasanya secara sederhana, semoga sobat dapat mengerti ya. Kalau masih ada yang ingin ditanyakan, silahkan tuliskan di kolom komentar dibawah ini ya sob.

Keenam, kita lanjutkan sekarang. Kita akan membuat sebuah tampilan sederhana. Misalnya kita akan membuat tampilan Home, About dan Contact. Jadi ketika user mengakses pertama kali atau mengakses root, akan muncul tampilan Home.

Kita juga akan membuat Navbar sederhana untuk navigasi pada Home, About dan Contact. Untuk coding nantinya, kita akan membagi Header, Navbar, Content dan Footer kedalam beberapa bagian. Jadi  struktur yang akan kita buat adalah :

• template = terdapat bagian header dan footer
• navbar =  menjadi bagian tersendiri untuk navgasi
• content = adalah bagian content isi yang akan kita ubah-ubah sesuai dengan home, about dan contact.

Template, akan kita buatkan folder tersediri pada folder Views\template. Kita buat 2 file.php di template yaitu v_navbar.php sebagai view untuk navbar dan v_template.php sebagai view untuk header dan footer.

 

Selanjutnya kita akan membuat sebuah controller Home (kita gunakan controller yang sudah ada). Kalau sobat mau buat controller baru, silahkan bisa dibuatkan ya.

Dalam controller Home, kita buatkan method :

• index() = untuk memanggil halaman home (sebagai root)
• about() = untuk memanggil halaman about
• contact() = untuk memanggil halaman contact

dan berikut adalah codenya :

<?php

namespace AppControllers;

class Home extends BaseController
{
	public function index()
	{
		$data = [
			'title' => 'BOOKLIB'
		];
		return view('pages/v_home', $data);
	}

	public function about()
	{
		$data = [
			'title' => 'About BOOKLIB'
		];
		return view('pages/v_about', $data);
	}

	public function contact()
	{
		$data = [
			'title' => 'Contact BOOKLIB'
		];
		return view('pages/v_contact', $data);
	}
}

Kemudian kita perlukan view home, about dan contact. Kita juga buat folder pages di view. dan didalamnya kita buat file.php dengan nama v_home.php (sebagai contet home), v_about.php, dan v_contact.php. 

Kita mulai dari bagian v_template.php. Di bagian ini kita akan membuat struktur HTML dengan hanya menyertakan Head, dan Footer. Jadi bagian Navbar kita akan panggil setelahanya, begitu juga bagian content kita akan berikan section content. Jadi berikut ini adalah codenya : 

<!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">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <!-- my style -->
    <link rel="stylesheet" href="/css/style.css">

    <title><?= $title; ?></title>
</head>

<body>

    <?php
    echo $this->include('template/v_navbar'); //memanggil navbar
    echo $this->renderSection('content'); //memanggil content
    ?>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    -->
</body>

</html>

Sobat perhatikan pada code :

<?php
echo $this->include('template/v_navbar'); //memanggil navbar
echo $this->renderSection('content'); //memanggil content
?>

Code tersebut adalah cara memanggil navbar dan juga memanggil content. Jadi ketika v_template dipanggil, maka sesudah bagian <head> , maka akan dipanggil v_navbar untuk dimunculkan. Selanjutnya, renderSection('content') digunakan untuk mencetak halaman sesuai dengan section yang dipanggil (dalam contoh adalah section('content').

Yang mana, alurnya. Pertama ketika user mengakses controller home - method index() , maka akan memunculkan v_home.php . Dari v_home.php ini sebagai content. di dalam v_home.php akan ada code yang memberitahuan CI kalau halaman v_home akan menggunakan v_template dan tuliskan code yang memberitahuan bagian mana yang dimaksud content di v_home.php.

Sobat bisa perhatikan pada contoh berikut :

<?php echo $this->extend('template/v_template'); ?>

<?php echo $this->section('content'); ?>
<div class="container">
    <div class="row">
        <div class="col">
            <h1>Welcome to BOOKLIB (Book Library)</h1>
            <hr>
            <p>This is Home where you can know about aour web. In this Page you can read information of all function about this web. So you can use this web very well. Thanks</p>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut nostrum error veritatis quidem aliquam dignissimos ullam cum, necessitatibus veniam id. Alias architecto odit aut esse, est eligendi commodi ullam. Eius.</p>
        </div>
    </div>
</div>
<?php echo $this->endSection('content'); ?>

Dengan code $this->extend , kita memberitahukan kalau halaman v_home menggunakan template dari v_template. Selanjutnya kita berikan tanda $this->section('content') yang nantiya akan dibaca oleh v_template sebagai bagian dari content. Dan jangan lupa untuk menutup section content dengan $this->endSection('contetn').

Oke, sekarang kita bisa ikuti lagi langkah diatas untuk membuat tampilan v_about.php dan v_contact.php . Setelahnya kita coba untuk akses localhost:8080 di web browser. Dan berikut ini adalah tampilannya.

Jadi untuk sobat semua, sesi berikutnya akan kita lanjutkan di Sidat.ID , jadi kita akan semakin komplit untuk belajar Code Igniter 4 dalam membuat website sederhana. Sampai jumpa di sesi Cara Install Code Igniter 4 dan Memulai Membuat Web Sederhana berikutnya, terimakasih. Salam ketutarre.com

DOWNLOAD SESI I / P.1