LAPORAN

PEMROGRAMAN WEB DAN PERANGKAT BERGERAK

KOMPETENSI KEAHLIAN : REKAYASA PERANGKAT LUNAK

Oleh :
Nama : Antonio Komang Yudistira
NIS : 27235
No. Absen : 02
Kelas : XII RPL 1

SEKOLAH MENENGAH KEJURUAN (SMK) NEGERI 1

DENPASAR
2019/2020

i
 KATA PENGANTAR
Puji syukur saya panjatkan ke hadapan Tuhan Yang Maha Esa, karena berkat anugerah-
Nya, penulis dapat melaksanakan Tugas 1 - 9 dengan baik dan dapat menyusun serta
menyelesaikan laporan ini secara maksimal. Pada kesempatan kali ini, penulis mengucapkan
banyak terima kasih kepada Ibu Ni Komang Dian Dianasari, ST selaku guru Pemrograman Web
dan Perangkat Bergerak di kelas XII RPL 1.
Penulis menyadari bahwa dalam laporan ini masih banyak terdapat
kekurangan, sehingga dengan segala kerendahan hati penulis mengharapkan saran
dan kritik yang bersifat membangun sebagai perbaikan untuk kedepannya.
Semoga laporan ini dapat menambah wawasan serta informasi yang bermanfaat
bagi pembaca. Sekali lagi, penulis mengucapkan banyak terima kasih kepada
semua pihak yang telah terlibat dalam pembuatan Tugas 1 – 9 ini.

Denpasar, 27 Oktober 2020

Penulis

ii
 DAFTAR ISI
LAPORAN TUGAS SATU SAMPAI SEMBILAN .....................................................................i
PEMROGRAMAN WEB DAN PERANGKAT BERGERAK…………...................................i
KATA PENGANTAR ...................................................................................................................ii
BAB I ...........................................................................................................................................4
KAJIAN TEORITIS......................................................................................................................4
1.1. Tinjauan Umum.............................................................................................................4
1.1.1 PHP .................................................................................................................4
1.1.3 Laravel ............................................................................................................4
1.1.4Bootstrap..........................................................................................................5
1.1.5 Hardware.........................................................................................................5
1.1.6 Software ..........................................................................................................5
BAB II ............................................................................................................................................8
RANGKUMAN TUGAS 1-9.........................................................................................................8
2.1 Tugas 1...........................................................................................................................8
2.2 Tugas 2...........................................................................................................................9
2.3 Tugas 3……………….................................................................................................10
2.4 Tugas 4…………………….........................................................................................11
2.5 Tugas 5 ………………....................................................................…………………12
2.6 Tugas 6 ………………....................................................................…………………13
2.7 Tugas 7 ………………....................................................................…………………23
2.8 Tugas 8 ………………....................................................................…………………33
2.9 Tugas 9 ………………....................................................................…………………42
BAB III .......................................................................................................................................43
Kesimpulan.………….................................................................................................................43
3.1 Kesimpulan ..................................................................................................................43

iii
 BAB I
KAJIAN TEORITIS

1.1 Tinjauan Umum

Pada tinjauan umum ini, penulis akan menjelaskan software-software/tool dan

hardware yang digunakan saat menjalani Tugas 1 – 9.

1.1.1 PHP

PHP disebut bahasa pemrograman server side karena PHP diproses pada komputer
server. Hal ini berbeda dibandingkan dengan bahasa pemrograman client-side seperti
JavaScript yang diproses pada web browser (client).

1.1.2 Laravel

Laravel adalah sebuah framework PHP yang dirilis dibawah lisensi MIT,
dibangun dengan konsep MVC (model view controller).

4
1.1.3 Bootstrap

Bootstrap merupakan salah satu framework atau kerangka kerja untuk

membuat tampilan pada website dimana sering digunakan untuk front-end.

1.1.4 Hardware
Perangkat yang penulis gunakan selama mengerjakan tugas ini adalah Laptop Asus
X441Ba dengan spesifikasi sebagai berikut :
 Processor : AMD A9 - 9320 3.3 GHZ
 RAM : 8 GB
 Resolusi layar : 1920 x 1080 (64 bit) (60 Hz).
 Sistem Operasi : Windows 10 Home Single Language 64-bit.
 Keyboard : Keyboard bawaan laptop

1.1.5 Software

Software yang saya gunakan pada project ini, yaitu :

1. Visual Studio Code (Text Editor)

Visual Studio Code (VS Code) ini adalah sebuah teks editor ringan dan
handal yang dibuat oleh Microsoft untuk sistem operasi multiplatform, artinya
tersedia juga untuk versi Linux, Mac, dan Windows. Teks editor ini secara langsung
mendukung bahasa pemrograman JavaScript, Typescript, dan Node.js, serta bahasa
pemrograman lainnya dengan bantuan plugin yang dapat dipasang via marketplace
Visual Studio Code (seperti C++, C#, Python, Go, Java, dst).

5
2. Google Chrome

Pengertian browser adalah aplikasi atau perangkat lunak yang digunakan

untuk melihat konten atau dokumen yang tersedia pada web server, proses
menampilkan berbagai dokumen ini melewati sebuah interaksi antara browser
dengan web server. Pada laporan ini penulis menggunakan Google Chrome
versi 80.0.3987.132

3. Microsoft Word
Microsoft Word atau Microsoft Office Word atau Word adalah aplikasi
pengolah kata (word processor) yang dapat membantu pengguna untuk menyelesaikan
berbagai pekerjaan yang berhubungan dengan dokumen, teks atau tulisan. Contohnya
seperti pembuatan laporan.

6
4. StarUML
StarUML adalah software permodelan yang mendukung UML (Unified
Modeling Language). Berdasarkan pada UML version 1.4 dan dilengkapi 11 macam
diagram yang berbeda, mendukung notasi UML 2.0 dan juga mendukung pendekatan
MDA (Model Driven Architecture) dengan dukungan konsep UML.

7
 BAB II
RANGKUMAN TUGAS 1 – 9

2.1 Tugas 1 (User Interface)

 Apa itu User interface?
User Interface adahal hal yang user lihat secara kasat mata pada sebuah aplikasi,
dimana user interface ini memberikan pengguna visual atau animasi pada suatu
aplikasi.
 Mengapa User Interface itu Penting?
Karena tanpa user interface, pengguna aplikasi / user tidak akan merasa nyaman
untuk menggunakan aplikasi kita. User interface yang baik dari serbuah aplikasi akan
membuat user betah..
 Menurut kalian Karakteristik User Interface yang Baik itu seperti apa?
Karakteristik penggunaan User interface yang baik yaitu : pemilihan warna yang
tepat, penggunaan animasi yang sesuai, ukuran font yang sesuai ( seperti judul ukuran
font judul lebih besar dibanding isinya ).

8
2.2 Tugas 2 (Konsep Wireframe pada Website)

Yang ditugaskan di tugas ini adalah membuat gambaran tampilan website tentang
ilustrasi Katalog Buku di kertas A4. Halaman awal untuk user (pengguna) dan halaman untuk
admin/petugas.

 HALAMAN USER

9
  HALAMAN ADMIN/ PETUGAS

2.3 Tugas 3 (Session & Cookies)

 Apa itu Session & Cookies ?

Session dan Cookie adalah suatu cara menyimpan data.

 Apa fungsi dan perbedaan dari Session & Cookies

Session disimpan dalam server dan akan hilang bila user menutup halaman
kita, user tidak bisa melihat dan mengotak atik session. Sedangkan Cookie
disimpan dalam browser user dan user bisa melihat dan mengotak atik cookie
yang ada di browser mereka.

10
2.4 Tugas 4 (Konsep pengembangan sistem informasi berbasis web)

saya akan membuat aliran data project yang akan saya buat yaitu katalog buku dengan
menggunakan use case diagram dan class diagram.
 Use Case Diagram

11
  Class Diagram

2.5 Tugas 5 (Perancangan Database dan Relationship)

Disini saya membuat database dan relationship menggunakan analisisis project dari tugas
sebelumnya...
- Nama database : “db_katalog_buku”
Screenshot gambar desain relasi dan struktur data pada database (di
PHPMYADMIN) :

12
 Tambahan :
Saya menambahkan atribut url_gambar pada tabel tb_buku untuk
menyimpan url gambar buku.
saya menambahkan atribut password pada tabel tb_author dan tb_admin
untuk keamanan saat melakukan autentikasi

2.6 Tugas 6 (Function dan Framework)

- Komponen :

o Database yang digunakan sama seperti tugas sebelumnya

o Tabel yang digunakan sama seperti sebelumnya

o Framework yang digunakan : Laravel

o Versi Laravel = 7.24

o Versi PHP = 7.2.5

- UI

o Halaman Login :

13
- Kode

1. Web.php ( tempat mengatur route di laravel)

14
2. Model Admin

3. Model Author

15
4. Model Buku

5. AuthenticationController

16
17
6. Kode Ui login.blade.php

18
19
- Case Login Sebagai Author

20
Menekan tombol submit (dengan isian form yang benar)

Jika isi form salah

21
- Sama seperti author bedanya saat setelah button
submit ditekan dengan form yang benar

22
2.7 Tugas 7 (CRUD)
- Komponen :
o Database yang digunakan sama seperti tugas
sebelumnya
o Tabel yang digunakan sama seperti sebelumnya
o Framework yang digunakan : Laravel
o Versi Laravel = 7.24
o Versi PHP = 7.2.5
o Versi Bootstrap : 4.5.2
o Versi FontAwesome : 5.15.1
o Versi SweetAlert : 2.1.2

23
- Kode
1. BukuController.php ( Controller untuk CRUD Buku)

24
25
- function index untuk menampilkan halaman index buku
- function create untuk menampilkan halaman create buku
- function store untuk menyimpan data buku dari create
- function show untuk menampilkan halaman detail buku
- function edit untuk menampilkan halaman update buku
- function update untuk mengupdate data buku dari edit
- function delete untuk mendelete data buku dari index

26
2. Buku (halaman index buku)

- Kode index

27
3. Create buku

28
Kode :

29
4. Edit Buku

30
Kode :

31
5. Untuk Delete buku langsung dari index

32
2.8 Tugas 8 (Pagination & Search)
UI pada Pagination - page 1 :

33
34
UI pada Pagination - page 2 :

35
UI pada halaman Search :

36
UI Hasil Search :

Kode Index ( Pagination dan Hasil Search) :

37
 - Note : Jika ada query search yang dikirimkan
dari halaman search, berarti cari data sesuai
dengan query lalu di paginate sebanyak 5 per
halaman. jika tidak tampilkan semua data buku
dan di paginate sebanyak 5 per halaman.

Kode UI index :

38
39
Kode Search :

Kode UI Search :

40
41
2.9 Tugas 9 (Web Hosting)

1. Internet (Jalan), adalah penghubung kita dengan rumah rumah (situs web).
2. Nama Domain (Alamat), adalah alamat / lokasi unik dimana suatu rumah ada.
3. Situs Web (Rumah), adalah tempat kumpulan halaman yang saling berhubungan ada disuatu
domain di internet.
4. Hosting Web (Tanah), adalah tempat dimana Rumah (Situs Web) itu didirikan, pemilik tanah
ini bisa menyewakan tanah nya untuk dikontrak oleh orang lain yang ingin membangun Rumah
(Situs Web) atas izin dari pemilik tanah. bahkan pemilik tanah bisa menggunakan tanahnya
untuk membangun Rumah (Situs Web) nya sendiri...

42
 BAB III
KESIMPULAN

3.1 Kesimpulan
Kesimpulan laporan ini adalah membuat projek dari dasar bukanlah hal mudah, apalagi
kalau tidak dikerjakandengan perancangan yang tepat akan membuat sistem kita semakin ribet dan
tidak cocok untuk di scale. Penggunaan framework sangat membantu karena dapat mebuat hasil
yang kita inginkan lebih cepat dan lebih efisien.

43
1