JOBSHEET

PEMBUATAN WEB CATATAN PERJALANAN

Diajukan sebagai syarat untuk mengikuti Uji Kompetensi Keahlian

Disusun oleh:

NIPD : 1920100326

Nama : Kusuma Wecitra

Kelas : XII RPL 3

YAYASAN SETYA BHAKTI

SMK TARUNA BHAKTI
TERAKREDITASI: “A” No: 02.00/203/BAN-SM/XII/2018
PAKET KEAHLIAN:
Broadcasting | Teknik Elektronika Industri | Teknik Komputer dan Jaringan | Multimedia |
Rekayasa Perangkat Lunak
Jln. Pekapuran Kel. Curug - Kec Cimanggis Depok Kode Pos 16953
Telp. (021)87449810
Website: http://www.smktarunabhakti.net / E–mail: taruna@smktarunabhakti.net

2022
 Lembar Pengesahan

Jobsheet ini telah disetujui dan disahkan

Pada tanggal ………..………..…………… Tahun ………....…..

Oleh

Penguji Peserta Uji Praktik

……………………. Kusuma Wecitra

Kepala Program RPL

Puguh Rismadi Ismail, S.Kom

 Kata Pengantar

Pertama-tama penulis mengucapkan rasa syukur kepada Tuhan Yang Maha Esa, karena
dapat menyelesaikan jobsheet ini. Penulis juga berterima kasih kepada semua pihak yang telah
membantu selama proses pengerjaan proyek kali ini.

Semoga laporan kegiatan ini menambah wawasan dan memberi manfaat bagi pembaca.

Depok, 24 Maret
 Daftar Isi

Lembar Pengesahan .......................................................................................... 2

Kata Pengantar ................................................................................................. 3
Daftar Isi............................................................................................................ 4
Tujuan Pembuatan Jobsheet ............................................................................. 5
Keselamatan Kerja ............................................................................................ 6
Spesifikasi Software Yang Dibutuhkan ............................................................. 7
1.1. Visual Studio Code ........................................................................................................................... 7
1.2. XAMPP ............................................................................................................................................ 7
1.3. Git ...................................................................................................................................................... 7
1.4. Figma................................................................................................................................................. 8

Rancangan Sistem ............................................................................................. 9

2.1. Level User ......................................................................................................................................... 9
2.2. Flowchart .......................................................................................................................................... 9
2.3. Diagram Alur Level 0 .................................................................................................................... 10
2.4. Diagram Alur Pengisian Catatan ................................................................................................. 10
2.4. Struktur Tabel Database ............................................................................................................... 10
2.5. Struktur Navigasi ........................................................................................................................... 10
2.6. Mockup ........................................................................................................................................... 11

Tahap Pembuatan CRUD Catatan.................................................................. 14

3.1. Instalasi Proyek CodeIgniter dengan Composer ........................................................................ 14
3.2. Konfigurasi Database .................................................................................................................... 14
3.3. Migration ........................................................................................................................................ 15
3.4. Model............................................................................................................................................... 16
3.5. Route dan Controller ..................................................................................................................... 17
3.6. Read Catatan .................................................................................................................................. 18
3.7. Create Catatan ............................................................................................................................... 19
3.7. Update Catatan .............................................................................................................................. 20
3.8. Delete Catatan ................................................................................................................................ 21

Penutup............................................................................................................ 22
Tujuan Pembuatan Jobsheet

Adapun tujuan dibuatnya Jobsheet ini adalah:

1. Sebagai syarat untuk mengikuti Uji Kompetensi Keahlian;

2. Sebagai landasan bagi penguji mengenai keputusan untuk mengikuti Uji Kompetensi
Keahlian;
3. Menguji kemampuan dan keterampilan peserta didik dalam mengembangkan kompetensi
yang dimilikinya;
4. Mendapatkan ilmu yang bisa menjadi bekal untuk bekerja di dunia kerja.
Keselamatan Kerja

1. Ingat dan pahami peraturan dalam penggunaan komponen kerja agar tidak terjadi kerusakan
atau kehilangan;
2. Hindari penyimpanan benda cair di sekitar laptop;
3. Perhitungan waktu yang harus disesuaikan;
4. Saat mata mulai lelah, usahakan untuk melihat benda atau objek berwarna hijau;
5. Menguji kemampuan dan keterampilan peserta didik dalam mengembangkan kompetensi
yang dimilikinya.
Spesifikasi Software Yang Dibutuhkan

1.1. Visual Studio Code

Visual Studio Code adalah teks editor yang dikembangkan oleh Microsoft yang
memungkinkan kita untuk mengedit kode dalam berbagai bahasa pemrograman, salah
satunya adalah PHP. Untuk versi Visual Studio Code yang digunakan adalah 1.65.2.

1.2. XAMPP

Keterangan gambar:
1. Apache = Sebagai aplikasi web server default
2. PHP = Sebagai server side scripting untuk membuat aplikasi berbasis web
3. phpMyAdmin = Sebagai tools untuk menggunakan MySQL berbasis web
4. XAMPP Control Panel = Untuk mengatur komponen berbeda pada XAMPP
5. FileZilla FTP Server = Untuk melakukan transfer file

1.3. Git
Pengembangan website ini menggunakan Git versi 2.34.1. Git adalah sistem yang
merekam perubahan pada file ataupun kumpulan file dari waktu ke waktu sehingga dapat
memanggil kembali atau memodifikasi versi tertentu di kemudian hari (Ben Straub, Scott
Chacon, 2014:2)
1.4. Figma
Figma digunakan untuk membuat sebuah desain UI dan UX. Terdapat beberapa tools
dalam Figma yang digunakan dan memudahkan dalam pengembangan desain, salah satunya
dalam pembuatan prototype untuk pengembangan website catatan perjalanan.
Rancangan Sistem

Rancangan sistem ini digunakan untuk memenuhi kebutuhan para user serta memberikan
gambaran yang jelas kepada programmer.

2.1. Level User

Terdapat dua user dalam website catatan perjalanan, yaitu user admin dan user general
dengan pembagian privileges sebagai berikut:

2.2. Flowchart
2.3. Diagram Alur Level 0

2.4. Diagram Alur Pengisian Catatan

2.4. Struktur Tabel Database

2.5. Struktur Navigasi

Pada struktur navigasi ini, user akan memasuki halaman home ketika pertama kali
mengakses halaman website, pada halaman home akan ditampilkan sekilas informasi catatan
perjalanan dengan bentuk diagram, pada halaman logs akan ditampilkan informasi catatan
perjalanan dan ada menu login untuk mengakses halaman website sebagai user admin atau
user general. User dapat langsung berpindah ke menu lain tanpa harus kembali ke home
terlebih dahulu.
2.6. Mockup
Berikut merupakan rancangan atau mockup tampilan pada setiap halaman di website ini.
Mockup yang dibuat terdiri dari halaman sign up dan sign in, halaman home, halaman logs
yang berisi data catatan perjalanan berbentuk tabel, halaman new log untuk menambah
catatan dan halaman edit log untuk mengubah catatan. Mockup ini dibuat dengan bantuan
aplikasi Figma.

Halaman Sign Up

Halaman Sign In
 Halaman Home

Halaman Tambah Catatan

Halaman Catatan
Gambar Halaman Edit Catatan
Tahap Pembuatan CRUD Catatan

3.1. Instalasi Proyek CodeIgniter dengan Composer

Tahapan pembuatan website ini dimulai dari penginstalan proyek CodeIgniter dengan
mengetikan perintah di bawah ini di terminal atau command prompt.
> composer create-project codeigniter4/appstarter pande.log --no-dev

Keterangan:
 pande.log = nama folder dari proyek yang akan dibuat
 --no-dev = menginstall proyek tanpa phpunit

3.2. Konfigurasi Database

Agar dapat melakukan koneksi dengan database, yang harus dilakukan adalah
konfigurasi database pada file application/config/database.php seperti berikut:

Keterangan gambar:
 DSN = string koneksi DSN
 Hostname = nama server host database
 username = nama pengguna yang digunakan untuk terhubung ke database
 password = kata sandi yang digunakan untuk terhubung ke database
 database = nama database yang ingin dihubungkan
 DBDriver = tipe database, yaitu: mysqli, postgre, odbc, dll
 Setelah itu, buat database baru dengan nama pande-log. Ini bisa dilakukan melalui
command line atau Phpmyadmin.

A. Membuat database baru melalui Phpmyadmin:

B. Membuat database dari command line:

Buka shell MySQL, lalu ketik perintah: CREATE DATABASE pande-log

3.3. Migration
Untuk membuat migration dapat mengetikan perintah di bawah ini di terminal atau
command prompt:
> php spark make:migration Logs

Perintah di atas akan membuat file baru dengan nama 2022-03-13-

053942_Logs.php di dalam folder app/Database/Migration.

Kemudian membuat field tabel, menambahkan id dan menambahkan foreign key pada
method up()di dalam file migration seperti berikut ini:
 Keterangan gambar:
 Field dibuat dengan fungsi $this->forge->addField() dan memberikan
parameter berupa array yang berisi data dari field.
 Selanjutnya membuat primary key dengan $this->forge->addKey().
Paramater TRUE berfungsi untuk menyatakan key yang dibuat adalah Primary Key.
Jika tidak diberikan TRUE, maka akan dibuat menjadi key biasa atau foreign key.
 Selanjutnya membuat foreign key untuk field user_id dengan $this->forge-
>addForeignKey() dari tabel users dengan field id

Terakhir menambahkan baris untuk menghapus tabel dengan fungsi:

Lalu lakukan migrasi dengan perintah: php spark migrate

3.4. Model
Model merupakan class yang berfungsi untuk operasi database seperti insert data,
read data, update dan delete.
 Buka terminal atau command prompt dan ketik perintah: php spark make:model
LogModel, lalu file baru bernama LogModel akan terbuat di folder app/Model.

Pada class LogModel terdapat beberapa konfigurasi:

 $table = nama tabel yang akan digunakan oleh model

 $primaryKey = nama kolom primary key dari tabel
 $allowedFields = berisi nama dari kolom-kolom yang diizinkan untuk diisi

3.5. Route dan Controller

Routing bertujuan untuk menentukan Controller mana yang harus merespon sebuah
request. Pada file app/config/Routes.php, kita bisa mendefinisikan rute untuk
website catatan perjalanan seperti di bawah ini:

Controller berisi method-method yang menerima request dari route, nantinya method
tersebut akan mengembalikan nilai atau tujuan url yang akan dituju. Terdapat lima
controller yang dibutuhkan dalam pembuatan website catatan perjalanan.

Keterangan gambar:
  Controller BaseController merupakan controller inti CodeIgniter yang tidak
dianjurkan untuk diubah. Controller ini merupakan parent bagi controller lain.
 Controller Auth dibuat untuk mengatur request saat user melakukan sign in, sign up
hingga sign out.
 Controller Home dibuat untuk mengambil beberapa data untuk kemudian dikirimkan
ke halaman home.
 Controller Logs dibuat untuk mengelola request untuk melakukan insert, read, edit
dan delete catatan.
 Controller PDFController yang akan mengatur semua request untuk generate
laporan dalam bentuk PDF.
 Controller Users dibuat untuk mengelola request untuk melakukan insert, read, edit
dan delete data user.

Berikut perintah untuk membuat controller Logs di command prompt:

php spark make:controller Logs

3.6. Read Catatan

Buat folder bernama logs di dalam app/Views, lalu buat file dengan nama
index.php di dalam folder logs.

File index.php ini nantinya akan berisi tabel catatan dan dapat diakses jika user
membuka halaman /logs.

Berikut isi dari index.php:

 Tambahkan baris kode berikut ini ke dalam Controller Logs:

3.7. Create Catatan

Buat baris kode untuk membuat link yang mengarah ke /logs/create di dalam
app/Views/logs/index.php.

Lalu buat method create yang mengarah ke view logs/add di Controller logs.

Selanjutnya membuat file add di dalam folder view logs yang di dalamnya terdapat form
untuk menambah catatan baru.

Nantinya form tersebut akan mengirimkan data yang telah ditambahkan oleh user ke method
store di Controller Logs.

Berikut adalah method store:

 Method store berfungsi untuk menyimpan data yang di POST dari form create logs.
Sebelum menyimpan data ke database, pastikan sudah lolos validasi. Karena bisa saja data
yang dimasukan user tidak valid.
3.7. Update Catatan
Di dalam view logs/index.php, sudah terdapat button yang mengarah ke Controller
Logs, dengan method edit.

Jadi sekarang cukup membuat membuat method edit yang mengarah ke view logs/edit.

Terakhir buat file edit.php di dalam folder view logs.

 Nantinya data yang telah diubah akan dikirimkan ke method update di Controller Logs.

3.8. Delete Catatan

Menambahkan method destroy untuk menghapus catatan.
Penutup

Setelah dipaparkannya penjelasan demi penjelasan seperti di atas tadi, saya selaku penulis
menyimpulkan bahwasannya suatu kegiatan Uji Kompetensi Keahlian ini sangatlah bermanfaat
bagi para siswa dan siswi terkhusus untuk sekolah menengah kejuruan.

Selain itu juga, kegiatan ini menjadi salah satu sarana sebagai tempat untuk mengasah
keterampilan para siswa dan siswi khususnya bagian hal praktik, dimana mereka dapat belajar
lebih mengenai pembuatan sebuah website.