RPP PWPB Xii RPL Wiryadi 2022

PERANGKAT PEMBELAJARAN
TAHUN PELAJARAN 2022/2023

SMK NEGERI 1 WONOSOBO
1. LEMBAR PENGESAHAN
2. SILABUS
3. KALENDER PENDIDIKAN
4. RINCIAN MINGGU/HARI EFEKTIF
5. PROGRAM TAHUNAN (PROTA)
6. PROGRAM SEMESTER (PROMES)
7. RENCANA PELAKSANAAN PEMBELAJARAN (RPP)
BIDANG KEAHLIAN : TIK
MATA PELAJARAN : Pemrograman Web dan Perangkat Bergerak

KELAS/SEMESTER : XII / 5, 6
NAMA : WIRYADI, S.Kom.
NIP : 19751023 200604 1 007
LEMBAR PENGESAHAN
Perangkat pembelajaran mata pelajaran Pemrograman Web dan Perangkat Bergerak Kelas XII
Tahun Pelajaran 2022/2023 yang terdiri dari :
1. SILABUS
2. KALENDER PENDIDIKAN
3. RINCIAN MINGGU/HARI EFEKTIF
4. PROGRAM TAHUNAN (PROTA)
5. PROGRAM SEMESTER (PROMES)
6. RENCANA PELAKSANAAN PEMBELAJARAN (RPP)
Disusun oleh Wiryadi, S.Kom. telah diperiksa dan disetujui oleh Kepala SMK NEGERI 1
WONOSOBO. Selanjutnya dokumen tersebut dapat dipergunakan untuk kegiatan
pembelajaran.
Ditetapkan di : Wonosobo
Pada tanggal : Juli 2022
Kepala SMKN 1 Wonosobo
Imam Tejo Marwoto, S.Pd., M.M.

NIP 19660309 199512 1 002
RENCANA PELAKSANAAN PEMBELAJARAN (RPP)
SEKOLAH : SMK N 1 WONOSOBO

KOMPETENSI KEAHLIAN : Rekayasa Perangkat Lunak
KELAS / SEMESTER : XII / 5
PERTEMUAN KE : 1-4
ALOKASI WAKTU : 24 JP
MATERI POKOK : KD. 3.18 4.18
 Konsep user interface dalam program aplikasi.
 Rancang bangun user interface.
 Program user interface sederhana.
 Aplikasi user interface untuk mengelola basis data.
1. Tujuan Pembelajaran
Pengetahuan
 Melalui tayangan yang disajikan oleh guru, peserta didik dapat menjelaskan konsep antar muka
pengguna (user interface) dalam aplikasi web dengan tepat
 Setelah menggali informasi dan berdiskusi, peserta didik dapat menjelaskan fungsi UI untuk
mengakses basis data dalam aplikasi web dengan benar
 Melalui diskusi kelompok, peserta didik dapat menerapkan UI dalam aplikasi web dengan teliti.
Ketrampilan
 Setelah menggali informasi dan berdiskusi, peserta didik dapat merancang program UI untuk
akses basis data dalam aplikasi web dengan benar.
 Melalui diskusi kelompok, peserta didik dapat membuat kode program aplikasi web
menggunakan frame work dengan teliti.
 Melalui diskusi kelompok, peserta didik dapat menguji program UI dalam aplikasi web dengan
teliti.
2. Langkah-Langkah Kegiatan Pembelajaran

Pendahuluan
 Guru menyampaikan salam, berdoa dan mengecek kesiapan belajar siswa.
 Guru bersama siswa menyanyikan salah satu lagu nasional.
 Guru menanyakan tentang Pemrograman Web dan Perangkat Bergerak.
 Guru menyampaikan tujuan pembelajaran atau kompetensi yang akan dicapai.
 Guru menyampaikan garis besar cakupan materi dan penjelasan tentang kegiatan yang akan
dilakukan
 siswa untuk menyelesaikan latihan-latihan dan tugas dalam pembelajaran.
Guru membentuk kelompok belajar yang beranggotakan 6-7 orang.
Inti
 Siswa mengamati tayangan tentang user interface basis data pada halaman web.
 Siswa merumuskan pertanyaan terkait tayangan tentang user interface basis data pada halaman
web.
 Siswa mengumpulkan informasi terkait user interface basis data pada halaman web.
 Siswa berdiskusi dan membuat bahan presentasi untuk mengolah informasi terkait user interface
basis data pada halaman web.
 Siswa menyajikan data terkait user interface basis data pada halaman web.
Siswa menyimpulkan terkait user interface basis data pada halaman web.
Penutup
 Siswa bersama guru menyimpulkan hasil pembelajaran
 Siswa merefleksikan materi yang telah dipelajari dengan membuat catatan penguasaan materi.
 Guru menyampaikan kesimpulan materi pembelajaran yang telah dipelajari.
3. Menyimpulkan dan Penilaian Pembelajaran

Teknik penilaian
a. Pengetahuan: tes tulis.
Rubrik/kriteria nilai pengetahuan
Nama Siswa/ Skor setiap nilai soal Nilai
No
Kelompok No 1 No 2 No 3 No 4 No 5
Pengolahan Nilai
Rumus pengolahan nilai adalah Nilai = jumlah skor yang diperoleh
Skor maksimal adalah 100
b. Keterampilan: membuat laporan tertulis dan presentasi.

Informasi-informasi penting yang harus dikoleksi saat membuat laporan adalah :
Indikator
Kompetensi Dasar Indikator Jenis Soal Soal
Soal
4.18. Membuat  Merancang program UI 1. Penugasan Buatlah kode
user interface untuk akses basis data dan praktik program UI
basis data pada dalam aplikasi web. akses basis
halaman web  Membuat kode program 2. data dalam
UI akses basis data dalam halaman web.
halaman web.
 Menguji program UI dalam 3.
aplikasi web.
Penilaian
jumlah skor yang diperoleh
Nilai ¿ x 4=…
jumlah skor maksimal
Wonosobo, 01 Juli 2022
Verifikator, Reviewer,
Wakasek Kurikulum Ketua Kompetensi Keahlian RPL Guru Mata Pelajaran
Hari Murni S. S.T, S. Kom, M.MPd Wiryadi, S. Kom. Wiryadi, S. Kom.

NIP. 19760524 200701 2 008 NIP. 19751023 200604 1 007 NIP. 19751023 200604 1 007

PERTEMUAN KE : 5-7
 konsep session, cookies dalam aplikasi web.
 Penggunaan session dalam program aplikasi web.
Pengetahuan
 Melalui tayangan yang disajikan oleh guru, peserta didik dapat menjelaskan prosedur konsep
statefull dalam pemrograman aplikasi web dengan tepat
 Setelah menggali informasi dan berdiskusi, peserta didik dapat menjelaskan statefull dalam
pemrograman aplikasi web dengan benar
Ketrampilan
 Merancang program aplikasi web yang menerapkan statefull.
 Membuat kode program aplikasi web menggunakan statefull.

Pendahuluan
 Guru menanyakan tentang UI untuk akses basis data dalam aplikasi web.
dilakukan siswa untuk menyelesaikan latihan-latihan dan tugas dalam pembelajaran.
 Guru membentuk kelompok belajar yang beranggotakan 6-7 orang.
Inti
 Siswa mengamati tayangan tentang statefull dalam pemrograman aplikasi web.
 Siswa merumuskan pertanyaan terkait tayangan tentang statefull dalam pemrograman aplikasi
web.
 Siswa mengumpulkan informasi terkait statefull dalam pemrograman aplikasi web.
 Siswa berdiskusi dan membuat bahan presentasi untuk mengolah informasi terkait statefull
dalam pemrograman aplikasi web.
 Siswa menyajikan data terkait statefull dalam pemrograman aplikasi web.
 Siswa menyimpulkan terkait statefull dalam pemrograman aplikasi web.
Penutup
 Guru menyampaikan rencana pembelajaran untuk pertemuan selanjutnya.
 Siswa memperoleh apresiasi dari guru

Teknik penilaian
No
Pengolahan Nilai

Indikator
Soal
4.19. Membuat  Merancang program 1. Penugasan Membuat
aplikasi web aplikasi web yang dan praktik kode program
statefull menerapkan statefull. aplikasi web
 Membuat kode 2. menggunakan
program aplikasi web statefull
menggunakan statefull.
Penilaian
Nilai ¿ x 4=…

NIP. 19760524 200701 2 008 NIP. 19751023 200604 1 007 NIP. 19751023 200604 1 007

PERTEMUAN KE : 8-10
 Konsep kriptografi, plain text, chiper text, encrypted text.
 Konsep sistem pengamanan akses data.
 Konsep pengamanan program aplikasi.
 Password, hash, md5, Mcrypt, base64.
Pengetahuan
 Melalui tayangan yang disajikan oleh guru, peserta didik dapat menerapkan prosedur sistem
keamanan akses basis data dalam aplikasi web dengan tepat
 Setelah menggali informasi dan berdiskusi, peserta didik dapat menentukan jenis sistem
pengamanan akses data dalam aplikasi web dengan benar
Ketrampilan
 Melalui diskusi kelompok, peserta didik dapat menguji sistem keamanan akses basis data
dalam aplikasi web dengan teliti.
 Setelah menggali informasi dan berdiskusi, peserta didik dapat merevisi sistem pengamanan
akses basis data dalam pemrograman aplikasi web dengan benar.

Pendahuluan
 Guru menanyakan tentang kode program aplikasi web menggunakan statefull.
dilakukan
Inti
 Siswa mengamati tayangan tentang prosedur sistem keamanan akses basis data dalam aplikasi
web.
 Siswa merumuskan pertanyaan terkait tayangan tentang prosedur sistem keamanan akses basis
data dalam aplikasi web.
 Siswa mengumpulkan informasi terkait prosedur sistem keamanan akses basis data dalam
aplikasi web.
 Siswa berdiskusi dan membuat bahan presentasi untuk mengolah informasi terkait prosedur
sistem keamanan akses basis data dalam aplikasi web.
 Siswa menyajikan data terkait prosedur sistem keamanan akses basis data dalam aplikasi web.
 Siswa menyimpulkan terkait prosedur sistem keamanan akses basis data dalam aplikasi web.
Penutup

Teknik penilaian
No
Pengolahan Nilai

Indikator
Soal
4.20. Merevisi  Menguji sistem 1. Penugasan Ujikan sistem
pengamanan keamanan akses basis dan praktik keamanan
data pada data dalam aplikasi akses basis
aplikasi web web. data dalam
 Merevisi sistem 2. aplikasi web
pengamanan akses
basis data dalam
pemrograman aplikasi
web.
Penilaian
Nilai ¿ x 4=…

NIP. 19760524 200701 2 008 NIP. 19751023 200604 1 007 NIP. 19751023 200604 1 007

PERTEMUAN KE : 11-14
 Konsep pengembangan sistem informasi berbasis web.
 Prosedur perencanaan aplikasi sistem informasi berbasis web.
Pengetahuan
 Melalui tayangan yang disajikan oleh guru, peserta didik dapat menjelaskan konsep sistem
informasi dalam aplikasi web dengan tepat
 Setelah menggali informasi dan berdiskusi, peserta didik dapat menjelaskan prosedur
perancangan sistem informasi dalam pemrograman aplikasi web dengan benar
 Melalui diskusi kelompok, peserta didik dapat menerapkan rancangan sistem informasi dalam
pemrograman aplikasi berbasis web dengan teliti.
Ketrampilan
 Setelah menggali informasi dan berdiskusi, peserta didik dapat merancang program aplikasi
sistem informasi berbasis web benar.
 Melalui diskusi kelompok, peserta didik dapat membuat kode program aplikasi sistem informasi
berbasis web dengan teliti.
 Melalui diskusi kelompok, peserta didik dapat menguji program aplikasi sistem informasi
berbasis web dengan teliti.

Pendahuluan
 Guru menanyakan pengalaman siswa tentang sistem pengamanan akses basis data dalam
pemrograman aplikasi web
Inti
 Siswa mengamati tayangan tentang konsep sistem informasi dalam aplikasi web.
 Siswa merumuskan pertanyaan terkait tayangan tentang konsep sistem informasi dalam aplikasi
web.
 Siswa mengumpulkan informasi terkait konsep sistem informasi dalam aplikasi web.
 Siswa berdiskusi dan membuat bahan presentasi untuk mengolah informasi terkait konsep
sistem informasi dalam aplikasi web.
 Siswa menyajikan data terkait konsep sistem informasi dalam aplikasi web.
 Siswa menyimpulkan terkait konsep sistem informasi dalam aplikasi web.
Penutup

Teknik penilaian
No
Pengolahan Nilai

Indikator
Soal
4.21. Membangun  Merancang program 1. Penugasan Ujikan
aplikasi aplikasi sistem informasi dan praktik program
sistem berbasis web. aplikasi
informasi  Membuat kode 2. sistem
web program aplikasi sistem informasi
informasi berbasis web. berbasis web
 Menguji program 3.
aplikasi sistem informasi
berbasis web.
Penilaian
Nilai ¿ x 4=…

NIP. 19760524 200701 2 008 NIP. 19751023 200604 1 007 NIP. 19751023 200604 1 007
Lampiran :
Materi
Dalam teknologi informasi, user interface (UI) adalah segala sesuatu yang dirancang menjadi sebuah
perangkat informasi yang mana seseorang dapat melakukan sebuah interaksi dengan komputer dengan
mudah dan sederhana. Media yang dapat digunakan pengguna untuk berinteraksi dengan apliksi atau
situs web diantaranya dapat berupa tampilan layar, keyboard, mouse dan penampilan desktop.
User Interface mencakup perangkat keras dan perangkat lunak. User Interface hadir untuk
berbagai system dan menyediakan cara untuk :
 Input, memungkinkan pengguna untuk memanipulasi sebuah sistem

 Output, memungkinkan sistem untuk menunjukan efek dari manipulasi pengguna
DESAIN USER INTERFACE
Desain user interface (UI) atau rekayasa antarmuka pengguna adalah desain dari user interface untuk
mesin dan perangkat lunak, seperti ; komputer, peralatan rumah, perangkat mobile, dan perangkat
elektronik lainnya, dengan fokus pada memaksimalkan kegunaan dan pengalaman pengguna.
Tujuan dari desain antarmuka pengguna adalah membuat interaksi pengguna yang sederhana dan
seefisien mungkin, dalam hal mencapai tujuan pengguna.
Kualitas yang diperhatikan dalam desain user interface antara lain :
1. Kejelasan interface, menghindari ambiguitas dengan membuat segalanya jelas melalui bahasa,

aliran, hirarki dan metafora untuk elemen visual.
2. Concision, Membuat antarmuka yang hebat adalah untuk membuatnya ringkas dan jelas pada
saat yang sama.
3. Familiarity, unsur-unsur tertentu dalam kehidupan sehari-hari masih sangat melekat pada
pengguna. metafora kehidupan nyata dapat digunakan untuk memudahkan pengguna dalam
menggunakan interface.
4. Responsivenes, antar muka harus bisa memberikan umpan balik yang baik kepada pengguna
tentang apa yang terjadi dan apakah masukan pengguna sedang berhasil diproses.
5. Consistency, Menjaga interface menjadi konsisten di seluruh aplikasi adalah suatu hal yang
penting karena memungkinkan pengguna untuk mengenali pola penggunaan.
6. Estetika, membuat interface terlihat bagus akan membuat waktu pengguna senang dan nyaman
dalam menggunakan interface.
7. Efficiency Time, interface yang baik harus bisa membuat pengguna lebih produktif melalui jalan
pintas dan desain yang baik.
8. Forgiveness, Sebuah interface yang baik tidak harus menghukum pengguna atas kesalahan
mereka lakukan, akan tetapi seharusnya menyediakan sarana untuk memperbaiki kesalahan
tersebut.
TIPE-TIPE USER INTERFACE

 Command-Line Interface (CLI): Pengguna memberikan input dengan mengetikkan perintah
berbasis teks dengan keyboard komputer dan sistem menyediakan output dengan mencetak
teks pada monitor komputer (Wikipedia).
 Graphical User Interface (GUI): Penggunaan gambar bukan hanya kata-kata untuk mewakili
input dan output dari program (Linuxjunkies). Masukan diterima melalui perangkat seperti
keyboard dan mouse.
 Direct manipulation interface: antarmuka pengguna yang memungkinkan pengguna untuk
memanipulasi objek yang disajikan kepada mereka
 Touchscreens : menerima masukan dengan sentuhan jari.
 Gesture interfaces : UI grafis yang menerima input dalam bentuk gerakan tangan, atau
gerakan mouse sketsa dengan mouse komputer.
 Search interface : bagaimana sebuah kotak pencarian situs ditampilkan, serta
merepresentasikan visual dari hasil pencarian.
 Natural-language interfaces : Digunakan pada mesin pencari dan pada halaman Web. jenis
penggunaan adalah dalam bentuk pertanyaan dan menunggu tanggapan.
 Voice user interfaces : yang menerima masukan dan memberikan output dengan
menghasilkan perintah suara. Input pengguna dibuat dengan menekan tombol atau tombol,
atau menanggapi secara lisan ke antarmuka.


 Konsep web housting
 Prosedur penggunaan dan penanganan web housting.
 Prosedur administrasi aplikasi web dengan web housting.
Pengetahuan
 Melalui tayangan yang disajikan oleh guru, peserta didik dapat menjelaskan konsep prosedur
aplikasi web hosting dengan tepat
 Setelah menggali informasi dan berdiskusi, peserta didik dapat menerapkan aplikasi web
kedalam web hosting dengan benar
 Melalui diskusi kelompok, peserta didik dapat merancangan program aplikasi kedalam web
hosting dengan teliti.
Ketrampilan
 Setelah menggali informasi dan berdiskusi, peserta didik dapat membuat kode program aplikasi
web hosting dengan benar.
 Melalui diskusi kelompok, peserta didik dapat membuat kode kode program aplikasi ke web
hosting dengan teliti.
 Melalui diskusi kelompok, peserta didik dapat menguji aplikasi web hosting melalui internet
dengan benar.

Pendahuluan
 Guru menanyakan pengalaman siswa tentang program aplikasi sistem informasi berbasis web.
Inti
 Siswa mengamati tayangan tentang konsep prosedur aplikasi web hosting.
 Siswa merumuskan pertanyaan terkait tayangan tentang konsep prosedur aplikasi web hosting.
 Siswa mengumpulkan informasi terkait konsep prosedur aplikasi web hosting.
prosedur aplikasi web hosting.
 Siswa menyajikan data terkait konsep prosedur aplikasi web hosting.
 Siswa menyimpulkan terkait konsep prosedur aplikasi web hosting.
Penutup

Teknik penilaian
c. Pengetahuan: tes tulis.
No
Pengolahan Nilai
d. Keterampilan: membuat laporan tertulis dan presentasi.

Indikator
Soal
4.22. Membuat  Merancang program 1. Penugasan Buatlah kode
aplikasi web aplikasi kedalam web dan praktik program
pada web hosting. aplikasi web
hosting  Membuat kode 2. hosting
program aplikasi web
hosting.
 Mengunggah kode 3.
program aplikasi ke web
hosting.
 Menguji aplikasi web 4
hosting melalui
internet.
Penilaian
Nilai ¿ x 4=…
NIP. 19760524 200701 2 008 NIP. 19751023 200604 1 007 NIP. 19751023 200604 1 007
Lampiran :
Materi
User Interface (UI) design atau rekayasa antarmuka pengguna adalah desain user interface untuk mesin
dan perangkat lunak, seperti komputer, peralatan rumah, perangkat mobile, dan perangkat elektronik
lainnya, dengan fokus pada memaksimalkan kegunaan dan pengalaman pengguna. Tujuan dari desain
antarmuka pengguna adalah membuat interaksi pengguna yang sederhana dan seefisien mungkin,
dalam hal mencapai tujuan pengguna (desain berfokus pada pengguna).
Desain antarmuka terlibat dalam berbagai proyek dari sistem komputer, untuk mobil, untuk pesawat
komersial; semua proyek ini melibatkan banyak interaksi manusia dan juga membutuhkan beberapa
keterampilan dan pengetahuan yang unik. Akibatnya, desainer cenderung mengkhususkan diri pada
jenis proyek tertentu dan memiliki keterampilan berpusat pada keahlian mereka, apakah itu desain
perangkat lunak, penelitian pengguna, desain web, atau desain industri.
User Interface (UI) Desain berfokus pada merencanakan apa yang mungkin sering user perlukan dan
memastikan bahwa antarmuka memiliki unsur-unsur yang mudah untuk diakses, dipahami, dan
digunakan. UI menyatukan konsep dari interaction design, visual design, dan information architecture.
PENELITIAN
Desain user interface telah menjadi topik penelitian yang cukup besar, termasuk pada
bidang estetika. Stkitar telah dikembangkan sejauh tahun 1980-an untuk menentukan kegunaan
dari produk perangkat lunak. Salah satu basis struktural telah menjadi model referensi antarmuka
pengguna IFIP. Model ini mengusulkan empat dimensi untuk struktur antarmuka pengguna:
 Input / output dimensi
 Dialog dimensi
 Dimensi teknis atau fungsional
 Dimensi organisasi
Model ini telah sangat mempengaruhi perkembangan stkitar internasional ISO 9241 yang menjelaskan

persyaratan desain antarmuka untuk kegunaan terentu. Keinginan untuk memahami isu-isu UI khusus
aplikasi awal dalam pengembangan perangkat lunak, bahkan pada aplikasi yang masih sedang
dikembangkan, menyebabkan penelitian tentang GUI alat prototyping menjadi semakin intens yang
mungkin menawarkan simulasi dan solusi yang sangat meyakinkan dan tepat tentang bagaimana
pembuatan aplikasi yang benar-benar mengerti pengguna dan dapat meningkatkan produksi. Beberapa
penelitian telah menunjukkan bahwa berbagai tugas pemrograman untuk perangkat lunak berbasis GUI
ditentukan melalui cara lain selain menulis kode program.
Penelitian dalam beberapa tahun terakhir sangat termotivasi oleh meningkatnya berbagai perangkat
yang home interface nya sangat kompleks, berdasarkan hukum Moore
Penelitian juga telah dilakukan pada menghasilkan user interface secara otomatis, untuk mencocokkan
tingkat kemampuan pengguna untuk berbagai tingkat interaksi
PEMBUATAN DESAIN USER INTERFACE
Memilih Interface Elements
Pengguna telah lebih terbiasa dengan elemen interface yang bekerja dengan cara tertentu, jadi cobalah
untuk konsisten dan dapat diprediksi dalam membuat struktur pilihan dan tata letak interface.
Melakukan hal ini akan membantu penyelesaian tugas, efisiensi, dan menambah kepuasan user.
Beberapa contoh elemen interface:
 Input control: tombol, teks field, checkbox, radio button, daftar dropdown, daftar kotak,
toggles, date field
 Komponen navigasi: breadcrumb, slider, kolom pencarian, pagination, slider, tag, icons
 Komponen informasi: tooltips, ikon, progress bar, notifikasi, kotak pesan, modal windows
 Containers: accordion
Ada kalanya beberapa elemen sekaligus mungkin cocok untuk display konten. Ketika ini terjadi, penting
untuk mempertimbangkan trade-off. Misalnya, kadang-kadang elemen dapat membantu menghemat
space, namun menempatkan lebih banyak beban pada mental pengguna dengan memaksa mereka
untuk menebak apa yang dalam dropdown atau kemungkinan elemen apa yang akan keluar
Merancang Interface
Intinya adalah mengetahui sifat user, termasuk pemahaman mereka, tujuan, skill, preferensi, dan
kecenderungan pemilihan elemen secara umum. Setelah kita tahu tentang pengguna kita, pastikan
untuk mempertimbangkan hal berikut ketika merancang interface:
1. Menjaga antarmuka yang sederhana. Interface terbaik hampir tidak terlihat oleh pengguna.
Mereka menghindari elemen yang tidak perlu dan harus terstruktur dengan mahasa yang jelas
pada label dan di pesan interface.
2. Menciptakan konsistensi dan menggunakan elemen UI umum. Dengan menggunakan elemen
umum di UI, pengguna merasa lebih nyaman dan mampu menyelesaikan sesuatu lebih cepat.
Hal ini juga penting untuk membuat suatu pola dalam bahasa, tata letak dan desain di seluruh
situs untuk membantu memfasilitasi efisiensi. Setelah pengguna belajar bagaimana melakukan
sesuatu, mereka harus mampu mudah beradaptasi dan terbiasa dengan interface tersebut di
semua bagian site lainnya
3. Page layout harus dipertimbangkan berdasarkan suatu tujuan tertentu. Pertimbangkan spasi
antara item pada halaman dan struktur halaman berdasarkan kepentingan dan tujuan.
Penempatan item yang terencana dapat membantu menarik perhatian langsung ke bagian yang
paling penting dari informasi dan dapat membantu scanning dan mudah dibaca oleh user.
4. Strategi menggunakan warna dan tekstur. Kita dapat mengarahkan perhatian user dari dan ke
item tertentu, menggunakan warna, cahaya, kontras, dan tekstur untuk tujuan tertentu.
Gunakan tipografi untuk membuat penjernihan dan kejelasan. Hati-hati dalam memilih metode
membentuk sebuah bentuk gambaran tertentu. Berbagai ukuran, font, dan pengaturan teks
yang tepat dapat membantu meningkatkan scanability, dan mudah dibaca user.
5. Pastikan bahwa sistem berjalan sesuai dengan apa yang terjadi saat itu juga. Selalu
menginformasikan pengguna kita tentang misalnya lokasi, suatu tindakan sistem, perubahan
di negara bagian, atau kesalahan. Penggunaan berbagai elemen UI untuk menginfokan status
terkini dapat bermanfaat menambah informasi bagi user.
6. Pikirkan tentang default. Secara teliti pikirkan dan antisipasi adanya user yang kebingungan saat
tidak sengaja mengutak atik konfigurasi, kita dapat membuat default yang mengurangi
kepanikan pada user
Sumber :
 https://www.usability.gov/what-and-why/user-interface-design.html 52
 http://www.ambysoft.com/essays/userInterfaceDesign.html 22

PERTEMUAN KE : 20 - 22
 Konsep MVC
 Macam-macam MVC untuk aplikasi web (Code Igniter, Zend,
symphony dsb).
 Prosedur penggunaan MVC untuk aplikasi berbasis web.
Pengetahuan
 Melalui tayangan yang disajikan oleh guru, peserta didik dapat menjelaskan konsep MVC dalam
aplikasi web dengan tepat
pemrograman aplikasi web dengan MVC dengan benar
 Melalui diskusi kelompok, peserta didik dapat menerapkan MVC kedalam program aplikasi web
dengan teliti.
Ketrampilan
web dengan MVC dengan benar.
menggunakan MVC dengan teliti.
 Melalui diskusi kelompok, peserta didik dapat menguji program aplikasi web berbasis MVC
dengan benar.

Pendahuluan
 Guru menanyakan pengalaman siswa tentang Prosedur administrasi aplikasi web dengan web
housting.
Inti
 Siswa mengamati tayangan tentang Konsep MVC
 Siswa merumuskan pertanyaan terkait tayangan tentang prosedur pemrograman aplikasi web
dengan MVC.
 Siswa mengumpulkan informasi terkait MVC kedalam program aplikasi web.
 Siswa berdiskusi dan membuat bahan presentasi untuk mengolah informasi terkait program
aplikasi web dengan MVC.
 Siswa menyajikan data terkait konsep prosedur aplikasi web hosting.
 Siswa menyimpulkan terkait program aplikasi web berbasis MVC.
Penutup
Teknik penilaian
No
Pengolahan Nilai

Indikator
Soal
4.23. Membuat  Merancang 1. Penugasan Buatlah kode
aplikasi web program aplikasi dan praktik program
menggunakan web dengan MVC. aplikasi web
Model View  Membuat kode 2. menggunakan
Controler program aplikasi MVC
(MVC) web
menggunakan
MVC.
aplikasi web
berbasis MVC.
Penilaian
Nilai ¿ x 4=…


NIP. 19760524 200701 2 008 NIP. 19751023 200604 1 007 NIP. 19751023 200604 1 007
Lampiran
Materi
Apa itu MVC?
MVC atau Model View Controller adalah sebuah pola desain arsitektur dalam sistem
pengembangan website yang terdiri dari tiga bagian, yaitu:
 Model, bagian yang mengelola dan berhubungan langsung dengan database;

 View, bagian yang akan menyajikan tampilan informasi kepada pengguna;
 Controller, bagian yang menghubungkan model dan view dalam setiap proses request
dari user.
Dengan konsep MVC ini, website seakan memiliki bagian yang terpisah dan bisa
dikembangkan masing-masing. Maka, proses pembuatan website bisa dilakukan lebih cepat
karena developer akan lebih fokus pada pengerjaan salah satu bagian saja.
Karena dianggap efektif, konsep MVC banyak diterapkan di berbagai framework. Sebagai
contoh, di framework PHP, Laravel, CodeIgniter, Symfony, Yii, dan Zend sudah
menggunakan konsep ini.
Alur Kerja MVC pada Sistem Pengembangan Website
Oke, setelah mempelajari apa itu MVC, sekarang saatnya memahami bagaimana alur kerja dari
MVC. Mari lihat bagan berikut ini:
1. Bagian view akan merequest informasi untuk bisa ditampilkan kepada pengguna.

2. Request tersebut kemudian diambil oleh controller dan diserahkan bagian model untuk
diproses;
3. Model akan mengolah dan mencari data informasi tersebut di dalam database;
4. Model memberikan kembali pada controller untuk ditampilkan hasilnya di view;
5. Controller mengambil hasil olahan yang dilakukan di bagian model dan menatanya di
bagian view.
Alur kerja MVC dalam sistem website sebenarnya cukup sederhana seperti ditunjukkan pada
bagan di atas. Namun, kalau penjelasannya masih terlalu teknis, begini analoginya:
Sekarang, anggaplah Kita sedang berada di sebuah restoran. Dalam konsep MVC ini, Kita
adalah view, pelayan adalah controller, dan chef adalah model.
Ketika Kita memesan salah satu menu, pelayan akan mencatat pesanan Kita dan
memberikannya pada chef. Setelah itu, chef akan mencari bahan yang diperlukan di kulkas
(database) dan mulai memasaknya untuk Kita.
Setelah selesai dimasak, chef akan memberikan pada pelayan untuk diantarkan pada Kita.
Nah, seperti itulah cara kerja MVC pada setiap bagiannya. Lebih mudah dipahami?
Manfaat MVC
Ada banyak keuntungan menggunakan framework MVC dalam pembuatan website seperti
berikut ini:
1. Proses Pengembangan Website Lebih Efisien
Konsep MVC bisa membuat proses pengembangan website lebih cepat. Sebab, MVC membagi
website menjadi tiga bagian terpisah. Bagian model dan controller bisa dikerjakan oleh back
end developer sementara view bisa dilakukan oleh front end developer dan UI UX tim.
Sebagai contoh, setelah tim UI UX menyelesaikan rancangan desain halaman depan, tim back
end dan front end bisa mulai membuat kode pemrograman untuk desain itu. Tim UI UX bisa
beralih merancang desain halaman lain misalnya halaman produk.
2. Testing Jadi lebih Mudah
Untuk memastikan website berfungsi dengan baik, langkah testing perlu dilakukan. Nah,
dengan menggunakan kerangka MVC, proses testing bisa dilakukan per bagian yang telah
siap, alih-alih menunggu keseluruhan website jadi.
Selain itu, pembuatan dokumentasi dari setiap fitur bisa lebih efisien dan rapi karena proses
testing bisa dilakukan per bagian.
3. Error atau Bug Lebih Cepat dan Mudah Ditangani
Pembagian website oleh MVC membuat developer bisa lebih fokus pada bagian
pengembangannya masing-masing. Jadi, mereka bisa lebih cepat menemukan bug dan
memperbaikinya.
Semisal, ketika fungsi keranjang pada website toko online tidak berfungsi, kemungkinan
kendalanya terletak pada data atau tombol. Nah, kalau ternyata error ditemukan pada tombol
(view), bagian front end bisa langsung memperbaiki error tersebut.
4. Pemeliharaan atau Maintenance Lebih Mudah
Konsep MVC memungkinkan penggunaan script yang lebih terstruktur dan rapi. Hal ini dapat
memudahkan tim developer dalam proses pengembangan dan maintenance website.
Anggaplah Kita ingin menambahkan fitur “tambahkan voucher diskon” pada website toko online
Kita. Tim developer baik back end maupun front end akan lebih mudah menemukan kode script
yang perlu ditambahkan dan diperbaharui.
Contoh Penggunaan Konsep MVC
Rasanya kurang afdol jika pembahasan konsep MVC ini tidak disertai dengan contoh, ya? Nah,
ini dia contoh pembuatan form data user di website dengan menggunakan CodeIgniter:
1. Download CodeIgniter dan ekstrak file tersebut ke web server Kita.

2. Buat folder model terlebih dulu supaya data pengguna bisa masuk ke database. Lalu,
tambahkan kode berikut:
1<?php
2class M_user extends CI_Model
3{
4 public function insert_data($table, $data)
5 {
6 return $this->db->insert($table, $data);
7 }
8}
1. Selanjutnya, untuk controller buat folder baru lagi dengan nama yang berbeda dari
folder model. Lalu tambahkan kode berikut:
1<?php
2class User extends CI_Controller
3{
4 public function add()
5 {
6 $this->load->view('user_add');
7 }
8}
1. Kemudian untuk tampilan (view) formnya, buat lagi folder baru dan isikan kode berikut:
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Membuat Form Tambah User</title>
5 </head>
6 <body>
7 <center>
8 <h2>Form Tambah Data User</h2>
9 <form method="post" action="<?= base_url('user/save'); ?>">
10 <table border="1">
11 <tr>
12 <td>Email</td>
13 <td><input type="text" name="email"></td>
14 </tr>
15 <tr>
16 <td>Password</td>
17 <td><input type="password" name="password"></td>
18 </tr>
19 <tr>
20 <td>Nama</td>
21 <td><input type="text" name="nama"></td>
22 </tr>
23 <tr>
24 <td colspan="2"><input type="submit" name="kirim" value="Masukkan Data"></td>
25 </tr>
26 </table>
27 </form>
28 </center>
29 </body>
30</html>
1. Setelah itu, cobalah akses di localhost untuk menguji hasilnya. Hasilnya akan muncul
seperti ini:
Kembangkan Website Lebih Efektif pakai Konsep MVC!
M MVC adalah konsep arsitektur dalam sistem pengembangan website yang terbagi menjadi
tiga bagian, yaitu model, view, dan controller.
Model berfungsi untuk berhubungan dengan database agar dapat mengelola, memperbarui,

dan menginput data. Lalu, View akan mengatur tampilan supaya lebih mudah dipahami
pengguna. Sementara Controller bertugas menghubungkan model dan view.
Dengan konsep MVC ini, ada banyak manfaat yang bisa Kita dapatkan lho! Seperti:
1. Proses pengembangan website lebih efisien

2. Testing jadi lebih mudah
3. Error atau bug lebih cepat diatasi
4. Pemeliharaan atau maintenance lebih mudah

 Konsep frame work dalam aplikasi berbasis frame work.
 Prosedur penggunaan frame work dalam aplikasi berbasis web.
Pengetahuan
 Melalui tayangan yang disajikan oleh guru, peserta didik dapat menjelaskan konsep teknologi
framework dalam aplikasi web dengan tepat
penggunaan framework dalam aplikasi web dengan benar
 Melalui diskusi kelompok, peserta didik dapat mempresentasikan dan menerapkan teknologi
framework kedalam aplikasi web dengan teliti.
Ketrampilan
web menggunakan teknologi framework dengan benar.
menggunakan frame workdengan teliti.
 Melalui diskusi kelompok, peserta didik dapat menguji program aplikasi web menggunakan
teknologi framework sebaliknya dengan teliti.

Pendahuluan
 Guru menanyakan pengalaman siswa tentang program aplikasi web berbasis MVC.
Inti
 Siswa mengamati tayangan tentang konsep teknologi framework dalam aplikasi web.
 Siswa merumuskan pertanyaan terkait tayangan tentang konsep teknologi framework dalam
aplikasi web.
 Siswa mengumpulkan informasi terkait konsep teknologi framework dalam aplikasi web.
teknologi framework dalam aplikasi web.
 Siswa menyajikan data terkait konsep teknologi framework dalam aplikasi web.
 Siswa menyimpulkan terkait konsep teknologi framework dalam aplikasi web.
Penutup

Teknik penilaian
No
Pengolahan Nilai

Indikator
Soal
4.24. Membuat  Merancang program 1. Penugasan Buatlah
aplikasi web aplikasi web dan praktik program
menggunaka menggunakan teknologi aplikasi web
n teknologi framework. menggunakan
framework  Membuat kode 2. teknologi
program aplikasi web framework
menggunakan frame
work.
aplikasi web
menggunakan teknologi
framework.
Penilaian
Nilai ¿ x 4=…


NIP. 19760524 200701 2 008 NIP. 19751023 200604 1 007 NIP. 19751023 200604 1 007
Lampiran
Materi
Apa Itu Framework? Pengertian, Manfaat, & Jenisnya
Jika Anda baru pertama kali terjun ke dunia programming dan developing, pastinya Anda
pernah mendengar dan bertanya-tanya apa itu framework?
Secara singkat, framework adalah sebuah software yang menyediakan landasan dan kerangka
dasar untuk mengembangkan berbagai macam aplikasi perangkat lunak.
Dengan menggunakan sebuah framework, para programmer dan developer tidak perlu lagi
merancang sebuah program dari awal saat memulai sebuah proyek.
Framework berfungsi sebagai template dan kerangka kerja dasar yang dapat diubah sesuai
kebutuhan dengan menambahkan kode dan modifikasi lainnya.
Nah agar Golden friends punyai gambaran yang lebih lengkap dan jelas, kami akan membahas
semua yang perlu Anda ketahui tentang framework di artikel kali ini.
Mulai dari pengertian, jenis-jenis, dan juga fungsi dari framework itu sendiri. Yuk langsung saja
kita mulai!
Seperti yang sudah dijelaskan dengan singkat di pembukaan tadi, framework adalah sebuah
kerangka kerja yang digunakan untuk mengembangkan berbagai macam aplikasi.
Aplikasi yang bisa dikembangan sebuah framework bisa berupa aplikasi berbasis desktop
(perangkat lunak) maupun aplikasi berbasis website.
Framework sendiri terdiri dari beberapa susunan fungsi dan variabel yang bisa dimodifikasi oleh
para programmer dan developer.
Umumnya, framework menggunakan shared resources — seperti library, file gambar, dokumen
referensi dan menyatukannya dalam satu paket.
Nah paket tersebut dapat diubah sesuai dengan kebutuhan spesifik proyek. Developer bisa
dengan mudah memodifikasi fitur-fitur tersebut untuk memberikan fungsi baru pada aplikasi.
Dengan menggunakan framework, para programmer dan developer bisa mengembangkan

sebuah aplikasi atau website dengan lebih cepat, efisien, dan lebih juga terstruktur.
Manfaat Menggunakan Framework

Setelah membaca tentang pengertian dan fungsi framework di atas, tentunya Anda sudah
mengerti bahwa framework mempunyai banyak manfaat untuk developer.
Namun sebenarnya keunggulan dari framework tidak berhenti disitu loh Golden friends! Berikut
adalah beberapa manfaat dari menggunakan kerangka dasar kerja:
Keamanan yang lebih terjamin
Dengan menggunakan framework, keamanan kode dan aplikasi Anda lebih terjamin. Setiap
celah keamanan yang ada pada framework tersebut akan langsung ditinjau dan diperbaiki.
Selain itu, framework populer yang bersifat open-source biasanya cukup rutin menerima
upgrade dari komunitas. Tentunya hal ini mengurangi celah keamanan dan juga bug yang ada.
Menghemat waktu & biaya
Salah satu fitur terbaik dari framework adalah library yang menyediakan ratusan bahkan ribuan
fungsi Developer bisa menambahkannya ke proyek tanpa harus menulis kode dari awal.
Tentunya hal ini membuat kerja programmer dan developer menjadi lebih cepat dan efektif.
Selain itu, framework juga membantu mencegah kode duplikat dan berulang.
Proses coding yang lebih cepat akan menghemat waktu yang dibutuhkan untuk
pengembangkan aplikasi. Pastinya hal ini akan mengurangi biaya proyek tersebut.
Mendukung kolaborasi
Jika Anda mempunyai proyek yang menuntut kolaborasi, tenang saja! Berkat standarisasi
kodenya, framework sangat mendukung pengembangan aplikasi kolaboratif.
Dengan standar kode yang sama, para developer bisa bekerja sama dengan lebih efektif.
Proses coding akan menjadi lebih konsisten dan tentunya bug kode program akan berkurang.
Standarisasi kode juga akan memudahkan proses pengujian. Semua programmer dan
developer yang terlibat bisa melakukan pengujian dan juga debug dengan mudah.
Dokumentasi yang terstruktur
Dengan sebuah framework, dokumentasi program memang sudah tersusun dan terstruktur
dengan rapi di dalamnya.
Setiap fungsi yang ada akan disusun dan dimasukan ke dalam kategori yang berisi dengan
komponen yang sama.
Tentunya hal ini akan memudahkan proses maintenance dan juga saat debugging. Anda bisa
dengan mudah menemukan kode yang perlu diperbaiki.
Bahkan saat ini ada beberapa jenis framework yang menerapkan konsep MVC (model, view,
controller) yang membuat proses coding semakin terstruktur dan rapi.
Jenis-Jenis Framework
Nah setelah tahu banyak manfaat yang bisa didapatkan dari sebuah framework, pastinya Anda
penasaran jenis-jenis framework yang tersedia bukan?
Saat ini ada banyak framework yang bisa Anda pilih untuk membantu mengembangkan sebuah
aplikasi desktop maupun web development.
Nah berikut adalah beberapa jenis framework terpopuler berdasarkan bahasa

pemrogramannya:
Framework PHP
Salah satu bahasa pemrograman terpopuler adalah PHP atau Hypertext Preprocessor. PHP
adalah bahasa pemrograman scripting yang biasa digunakan pada server-side.
Berikut adalah beberapa framework populer berbasis PHP:
1. CodeIgniter
2. Laravel
3. CakePHP
4. Aura
5. Zend
6. FuelPHP
Framework JavaScript
Javascript merupakan salah satu bahasa pemrograman terpopuler dalam web development.
Bahasa ini digunakan untuk membuat tampilan halaman web menjadi lebih interaktif.
Berikut adalah beberapa framework berbasis JavaScript yang bisa Anda coba:
1. React.js
2. Angular.js
3. Backbone.js
4. Node.js
5. Ember.js
Framework CSS
CSS atau cascading style sheet adalah bahasa pemrograman yang digunakan untuk
menentukan dan memodifikasi tampilan sebuah halaman website.
Berikut adalah beberapa framework berbasis CSS yang bisa Anda coba untuk proyek Anda:
1. Bootstrap
2. Bulma
3. UIkit
4. Miligram
5. Semantic UI
6. Skeleton

PERTEMUAN KE : 1-4
 Konsep user interface dalam program aplikasi.
 Rancang bangun user interface.
 Program user interface sederhana.
 Aplikasi user interface untuk mengelola basis data.
Pengetahuan
 Melalui tayangan yang disajikan oleh guru, peserta didik dapat menjelaskan konsep antar muka
pengguna (user interface) dalam aplikasi web dengan tepat
 Setelah menggali informasi dan berdiskusi, peserta didik dapat menjelaskan fungsi UI untuk
mengakses basis data dalam aplikasi web dengan benar
 Melalui diskusi kelompok, peserta didik dapat menerapkan UI dalam aplikasi web dengan teliti.
Ketrampilan
 Setelah menggali informasi dan berdiskusi, peserta didik dapat merancang program UI untuk
akses basis data dalam aplikasi web dengan benar.
menggunakan frame work dengan teliti.
 Melalui diskusi kelompok, peserta didik dapat menguji program UI dalam aplikasi web dengan
teliti.

Pendahuluan
 Guru menanyakan tentang Pemrograman Web dan Perangkat Bergerak.
dilakukan
Guru membentuk kelompok belajar yang beranggotakan 6-7 orang.
Inti
 Siswa mengamati tayangan tentang user interface basis data pada halaman web.
 Siswa merumuskan pertanyaan terkait tayangan tentang user interface basis data pada halaman
web.
 Siswa mengumpulkan informasi terkait user interface basis data pada halaman web.
 Siswa berdiskusi dan membuat bahan presentasi untuk mengolah informasi terkait user interface
basis data pada halaman web.
 Siswa menyajikan data terkait user interface basis data pada halaman web.
Siswa menyimpulkan terkait user interface basis data pada halaman web.
Penutup

Teknik penilaian
No
Pengolahan Nilai

Indikator
Soal
4.25. Membuat  Merancang program UI 4. Penugasan Buatlah kode
user interface untuk akses basis data dan praktik program UI
basis data pada dalam aplikasi web. akses basis
halaman web  Membuat kode program 5. data dalam
UI akses basis data dalam halaman web.
halaman web.
 Menguji program UI dalam 6.
aplikasi web.
Penilaian
Nilai ¿ x 4=…

NIP. 19760524 200701 2 008 NIP. 19751023 200604 1 007 NIP. 19751023 200604 1 007
Lampiran
Materi
Prinsip Desain User Interface

Prinsip desain user interface (Sumber: unsplash -Sigmund)
Karena membuat desain user interface bukanlah pekerjaan yang mudah dan sepele,
pembuatannya harus berdasarkan pada beberapa prinsip agar hasilnya sesuai dengan
harapan. Untuk membantu proses pengerjaan desain UI tersebut, kamu bisa memanfaatkan
teknologi pada aplikasi UI UX terbaik.
Desain ini juga bukan hanya sebuah keberuntungan dan hasil dari tebak tebakan saja. Adapun
prinsip dari desain UI ini adalah sebagai berikut.
Visibilitas
Kedengarannya terlalu terus terang, namun pengguna harus bisa dengan jelas melihatnya di
awal agar bisa berinteraksi dengan sesuatu. Inilah prinsip dari visibilitas sebuah desain UI.
Penerapan prinsip yang satu ini membutuhkan optimasi dari elemen desain yang akan
membantu pengguna memenuhi tujuan mereka. Apabila mereka tidak bisa mengerti cara
menggunakan dan melakukan navigasi website atau software lain, mereka pasti akan
kebingungan, bukan?
Konsistensi
Prinsip konsistensi ini mengacu pada semudah apa sesuatu untuk para penggunanya sehingga
apa yang mereka lihat pada interface memang masuk akal. Coba ulangi beberapa elemen
desain yang sama seperti fungsi, warna, dan lokasi.
Learnability
Para pengguna harus bisa memahami produk dan sistem dengan cepat dan mudah. Tugas
desainer adalah membuat interface yang bisa memfasilitasi hal tersebut sehingga pengguna
bisa mencapai tujuan mereka tanpa perlu bantuan lebih lanjut.
Predictability
Ini mengacu pada kemampuan pengguna untuk meramalkan atau memprediksi apa yang
selanjutnya akan terjadi. Saat pengguna bisa melakukannya, itu berarti desainer sudah
mengaplikasikan prinsip UI ini dengan baik.
Feedback
Designer harus berkomunikasi terlepas dari apakah pengguna sudah menyelesaikan aksi
secara benar ataupun tidak karena feedback itu penting. Pengguna harus tahu apakah mereka
sudah semakin dekat dengan tujuannya. Desainer bisa membantu pengguna melalui
pengalaman mereka dengan interface menggunakan sinyal visual.
Hal terpenting adalah feedback harus jelas dan bermakna sehingga pengguna bisa
mengartikannya dengan cara yang mereka mau. Untuk mendesain UI dengan feedback,
desainer harus bisa membantu menjawab beberapa pertanyaan pengguna, seperti:
 Saya ada dimana?
 Apa status terkini sistem ini?
 Apa yang akan terjadi selanjutnya?
 Apa yang barusan terjadi?
Tipe-Tipe User Interface
Tipe-tipe user interface (Sumber: pexels – cottonbro)
Meningkatnya ketergantungan bisnis pada penggunaan website dan aplikasi seluler mampu
membawa desain yang bagus menjadi sebuah prioritas. Apabila bisnis kamu mulai merambah
dunia digital dimana kamu harus memiliki website dengan tampilan yang keren, ada beberapa
tipe dari UI yang harus terlebih dahulu kamu tahu. Berikut adalah 5 tipe user interface yang
harus kamu tahu.
Command Line Interface
Command line interface tidak lagi umum sebagai bentuk user interface dasar dalam produk
yang konsumen gunakan sehari-hari, namun masih digunakan dalam keadaan tertentu. Tipe UI
ini mengharuskan pengguna untuk menginput instruksi pada baris perintah.
Untuk bisa menggunakannya, pengguna harus masuk ke file atau direktori yang diperlukan.
Dari sana, host perintah akan tersedia mulai dari mengambil file sampai menjalankan program.
Kelebihan:
 Struktur yang simpel
 Penggunaan memori yang minim
 Bagus untuk komputer yang berjalan lambat atau memorinya hampir penuh
 Pengguna yang sudah ahli bisa memberikan perindah dan menjalankan tugas lebih
cepat saat menggunakan tipe UI alternatif
Kekurangan:
 Sulit untuk mempelajari bahasa perintah
 Kompleks untuk pengguna pemula
 Informasi pesan error yang minim
Menu-Driven Interface
Menu-driven interface menyediakan berbagai perintah atau pilihan pada daftar form atau menu
yang ditampilkan di layar penuh, pop-up, atau drop-down. Salah satu contoh penggunaan tipe
UI ini adalah Automatic Teller Machine (ATM) atau pengaturan pada ponsel.
Kelebihan:
 Tidak perlu mengingat perintah manual yang panjang
 Antarmuka sederhana untuk pemula
 Mudah digunakan di berbagai perangkat
Kekurangan:
 Terlalu lambat untuk pengguna yang sudah ahli
 Pilihan menu terbatas
 Memerlukan akses ke berbagai menu layar untuk melakukan fungsi sederhana
Graphical User Interface
Graphical User Interface atau GUI merupakan tipe interface yang paling familiar bagi banyak
orang atau pengguna. Pengguna bisa berinteraksi dengan interface ini dengan
menggunakan mouse atau lainnya untuk menunjuk dan mengklik pada grafik atau ikon.
Kelebihan:
 Mudah digunakan
 Tidak perlu mengingat daftar perintah
 Memungkinkan untuk menjalankan banyak tugas, program, dan aplikasi secara
bersamaan
 Format yang sama di beberapa program berbeda
Kekurangan:
 Menggunakan memori yang cukup besar
Touchscreen Graphical User Interface
Touchscreen graphical user interface sangat mirip dengan GUI biasa kecuali jika kamu
menggunakan jari atau stylus untuk memilih ikon juga menjalankan tugas dibandingkan
menggunakan mouse atau trackpad.
Kelebihan:
 Lebih mudah dan cepat dibandingkan memanipulasi ketikan
 Tidak perlu device eksternal seperti mouse dan keyboard
 Bisa digunakan anak-anak dan orang tua
Kekurangan:
 Ukuran dibatasi oleh ukuran tampilan ponsel
 Motion tambahan sulit untuk ditemukan
Conversational User Interface
Tipe UI yang kelima ini memungkinkan pengguna untuk berinteraksi dengan komputer hanya
dengan memberitahu perangkat tersebut apa yang harus dilakukan. Interaksi tersebut bisa
dilakukan secara verbal dan tertulis.
Agar tipe UI ini bekerja dengan baik, maka software harus memiliki kemampuan pengenalan
suara.
Kelebihan:
 Tidak perlu belajar skill baru
 Terhubung dengan pengguna secara personal
 Bisa terintegrasi dengan aplikasi yang ada
 Merespon dengan konteks untuk berinteraksi
 Beradaptasi dengan jenis kelamin, aksen, nada, dan kecepatan bicara
Kekurangan:
 Petunjuk visual dan tekstual terbatas
 Rumit untuk mengartikulasikan perintah
Contoh User Interface
User interface ATM dibuat sederhana untuk kemudahan transaksi (Sumber: pixabay –
Mrganso)
Teknologi termasuk user interface begitu lekat dengan keseharian manusia. User interface itu
sendiri memberikan cara yang lebih mudah dan sederhana dalam berinteraksi dengan
teknologi.
Contoh sederhana dari user interface adalah mouse pada komputer, remote, ATM,
speedometer, pencarian suara, e-toll, GPS, dan masih banyak lagi. Ada juga penerapan user
interface yang inovatif dan tidak sulit untuk kita jumpai seperti iOS dan windows 8 mobile.

RPP PWPB Xii RPL Wiryadi 2022

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

RPP PWPB Xii RPL Wiryadi 2022

Diunggah oleh

Hak Cipta:

Format Tersedia

PERANGKAT PEMBELAJARAN

TAHUN PELAJARAN 2022/2023

BIDANG KEAHLIAN : TIK

MATA PELAJARAN : Pemrograman Web dan Perangkat Bergerak

Kepala SMKN 1 Wonosobo

Imam Tejo Marwoto, S.Pd., M.M.

SEKOLAH : SMK N 1 WONOSOBO

2. Langkah-Langkah Kegiatan Pembelajaran

3. Menyimpulkan dan Penilaian Pembelajaran

b. Keterampilan: membuat laporan tertulis dan presentasi.

Wonosobo, 01 Juli 2022

Hari Murni S. S.T, S. Kom, M.MPd Wiryadi, S. Kom. Wiryadi, S. Kom.

SEKOLAH : SMK N 1 WONOSOBO

2. Langkah-Langkah Kegiatan Pembelajaran

3. Menyimpulkan dan Penilaian Pembelajaran

b. Keterampilan: membuat laporan tertulis dan presentasi.

Wonosobo, 01 Juli 2022

Hari Murni S. S.T, S. Kom, M.MPd Wiryadi, S. Kom. Wiryadi, S. Kom.

SEKOLAH : SMK N 1 WONOSOBO

2. Langkah-Langkah Kegiatan Pembelajaran

3. Menyimpulkan dan Penilaian Pembelajaran

b. Keterampilan: membuat laporan tertulis dan presentasi.

Wonosobo, 01 Juli 2022

Hari Murni S. S.T, S. Kom, M.MPd Wiryadi, S. Kom. Wiryadi, S. Kom.

SEKOLAH : SMK N 1 WONOSOBO

2. Langkah-Langkah Kegiatan Pembelajaran

3. Menyimpulkan dan Penilaian Pembelajaran

b. Keterampilan: membuat laporan tertulis dan presentasi.

Wonosobo, 01 Juli 2022

Hari Murni S. S.T, S. Kom, M.MPd Wiryadi, S. Kom. Wiryadi, S. Kom.

 Input, memungkinkan pengguna untuk memanipulasi sebuah sistem

DESAIN USER INTERFACE

Kualitas yang diperhatikan dalam desain user interface antara lain :

1. Kejelasan interface, menghindari ambiguitas dengan membuat segalanya jelas melalui bahasa,

TIPE-TIPE USER INTERFACE

SEKOLAH : SMK N 1 WONOSOBO

2. Langkah-Langkah Kegiatan Pembelajaran

3. Menyimpulkan dan Penilaian Pembelajaran

d. Keterampilan: membuat laporan tertulis dan presentasi.

Wonosobo, 01 Juli 2022

Model ini telah sangat mempengaruhi perkembangan stkitar internasional ISO 9241 yang menjelaskan

PEMBUATAN DESAIN USER INTERFACE

Memilih Interface Elements

Beberapa contoh elemen interface:

SEKOLAH : SMK N 1 WONOSOBO

2. Langkah-Langkah Kegiatan Pembelajaran

b. Keterampilan: membuat laporan tertulis dan presentasi.

Wonosobo, 01 Juli 2022

Hari Murni S. S.T, S. Kom, M.MPd Wiryadi, S. Kom. Wiryadi, S. Kom.

 Model, bagian yang mengelola dan berhubungan langsung dengan database;

Alur Kerja MVC pada Sistem Pengembangan Website

1. Bagian view akan merequest informasi untuk bisa ditampilkan kepada pengguna.

1. Proses Pengembangan Website Lebih Efisien

2. Testing Jadi lebih Mudah

3. Error atau Bug Lebih Cepat dan Mudah Ditangani

4. Pemeliharaan atau Maintenance Lebih Mudah

1. Download CodeIgniter dan ekstrak file tersebut ke web server Kita.

Kembangkan Website Lebih Efektif pakai Konsep MVC!

Model berfungsi untuk berhubungan dengan database agar dapat mengelola, memperbarui,

1. Proses pengembangan website lebih efisien

SEKOLAH : SMK N 1 WONOSOBO

2. Langkah-Langkah Kegiatan Pembelajaran

3. Menyimpulkan dan Penilaian Pembelajaran