TUGAS PRAKTIK REKAYASA PERANGKAT LUNAK

SMK NEGERI 5 KOTA BEKASI

JOB SHEET
Pemrograman Berbasis Web
Semester VI Materi / Pokok Bahasan
Kelas XII RPL  Framework Codeigniter Versi 4
Waktu 6 x 30 Menit Part 1.
Nama Guru Nursin Irham, S.Kom Instalasi CI4 dan setting Views

Alat dan Baha Yang Digunakan

 Pc/Laptop Minimal Core I3/4GB RAM
 XAMPP Minimal Versi 7.4 (Terbaru Lebih Baik)
https://www.apachefriends.org/download.html
 Composer
https://getcomposer.org/
 Gist-Bash
https://git-scm.com/downloads
 Teks Editor
 Notepad ++
https://notepad-plus-plus.org/downloads/
 Sublime
https://www.sublimetext.com/
 Visual Studio Code
https://code.visualstudio.com/
 Framework Codeigniter4
https://codeigniter.com/
 Template Admin Boostraf
https://startbootstrap.com/theme/sb-admin-2
 Web Browser
Tujuan
 Siswa/I mampu memahami jenis-jenis famework
 Siswa/I mampu menginstalasi framework codeigniter menggunakan composer
 Siswa/I mampu membuat view dengan bantuan template boostraf

Overview
Apa Itu CodeIgniter 4?
CodeIgniter adalah salah satu framework PHP yang ringan dan bersifat open-source. Framework
ini memungkinkan Anda untuk mengembangkan aplikasi web dengan fitur lengkap secara lebih
cepat. Hal itu berkat dukungan library yang beragam.
CodeIgniter 4 merupakan pengembangan dari versi sebelumnya, yaitu CodeIgniter 3. Versi
terbaru ini hanya mendukung PHP versi 7.4 ke atas. Jadi, Anda perlu menggunakan versi PHP
yang sesuai sebelum mencoba CodeIgniter 4.
Masih dengan konsep Model-View-Controller (MVC) , CodeIgniter 4 menawarkan antarmuka
dan struktur project yang sederhana. Sehingga, penulisan kode pemrograman bisa lebih
konsisten dan terstruktur. Selain itu, performanya yang cepat dan konfigurasi yang minim juga
menjadi alasan CodeIgniter 4 populer di kalangan web developer.
Sebelum melakukan instalasi CodeIgniter 4, ada beberapa hal yang perlu Anda persiapkan, yaitu
:
 XAMPP
Aplikasi server yang mendukung proses pengembangan aplikasi website pada server lokal
(localhost) sebelum di hosting.
 Composer
Tool pengelola package library PHP yang memudahkan Anda untuk menginstall dan
melakukan update library yang digunakan.
 Code Editor
Aplikasi yang digunakan untuk menulis kode pemrograman. Di tutorial ini, kami
menggunakan Visual Studio Code (VS Code).

Langkah Kerja Praktik :

A. Persiapan Instalasi dan Set Up
1. Lakukan instalasi software yang dibutuhkan : (Lewati langkah ini jika sudah ada)
 XAMPP Minimal Versi 7.4 (Terbaru Lebih Baik)
https://www.apachefriends.org/download.html
 Composer
https://getcomposer.org/
 Gist-Bash
https://git-scm.com/downloads
 Teks Editor
 Notepad ++
https://notepad-plus-plus.org/downloads/
 Sublime
https://www.sublimetext.com/
 Visual Studio Code
https://code.visualstudio.com/
2. Buka folder htdocs yang berada di folder xampp
C:\xampp\htdocs
3. Kemudian didalam folder htdocs, klik kanan kemudian klik git-bash here
 Sampai terbuka seperti ini :

4. Ketikan perintah :
composer create-project codeigniter4/appstarter project-root
#Ganti tulisan project-root menjadi nama “multiuserci4”
Tekan Tombol ENTER

5. Jika sudah berhasil , cek di folder htdocs, apakah nama project sudah ada

6. Buka folder “multiuserci4”, kemudian klik kanan pilih dan klik git-bash here
7. Aktifkan server framework dengan cara mengetikan perintah :
php spark serve

Jika sudah seperti ini, biarkan saja minimize saja, copy terlebih dahulu url
http://localhost:8080
8. Buka web browser kemudian ketikan url tersebut http://localhost:8080
Jika muncul seperti di bawah ini berarti sudah berhasil proses instalasinya.

9. Rename file env menjadi .env

10. Rubah environment menjadi “development”
Buka file .env, cari tulisan
# CI_ENVIRONMENT = production
Hilangkan tanda #, kemudian rubah menjadi :
CI_ENVIRONMENT = development
Buka file .env, cari tulisan
# app.baseURL = ''
Hilangkan tanda #, kemudian rubah menjadi :
app.baseURL = 'http://localhost:8080/'
 11. Kemudian buka web browser kembali kemudian refresh, pastikan dibagian bawah nya
sudah berubah menjadi development.

B. Costum Views
1. Install / download template adminsb2
Buka website berikut ini :
https://startbootstrap.com/theme/sb-admin-2

Download, exktrak dan rename menjadi template.

Letakan di folder multiuserci44\public
2. Silahkan buka folder template tersebut :

3. Buat folder di dalam folder app\Views dengan nama “auth”, kemudian di dalam folder
auth tersebut buat file login.php dan register.php

4. Selanjutnya kita design views untuk halaman login. Copy kan script login dari file
login.html yang ada di folder template ke dalam file login.php
5. Selanjutnya buka controller Home yang ada di direktori \multiuserci4\app\Controllers
Kemudian tambahkan function seperti berikut ini :
6. Kemudian lakukan testing di web browser dengan mengetikan url
http://localhost:8080/

Tampilan ini css dari template belum terpanggil semuanya, untuk itu harus di
modifikasi. Buka file login.php
Sebelum di modifikasi

Sesudah di modifikasi
#Header
#Footer

#Image

Hapus tulisan bg-login-image

Setelah itu silahkan di simpan, kemudian di refresh kembali sehingga tampilannya
seperti ini :
 Kemudian modifikasi dan ganti dengan foto kalian masing-masing sehingga menjadi
seperti contoh berikut ini :

7. Selanjutnya kita design views untuk halaman register. Copy kan script register dari file
register.html yang ada di folder template ke dalam file register.php
8. Kemudian lakukan testing di web browser dengan mengetikan url
http://localhost:8080/home/register

Tampilan ini css dari template belum terpanggil semuanya, untuk itu harus di
modifikasi. Buka file register.php
Sebelum di modifikasi

Sesudah di modifikasi
#Header

#Footer
#Foto / Image

Hilangkan tulisan bg-register-image

Setelah itu silahkan di simpan, kemudian di refresh kembali sehingga tampilannya
seperti ini :

Kemudian modifikasi dan ganti dengan foto kalian masing-masing sehingga menjadi
seperti contoh berikut ini :