Pemodelan Aplikasi Web

1. MATA KULIAH REKAYASA WEB
Fauzan Dika, S.Kom., M.Kom.
MODELLING WEB APLICATION

2. Perkembangan Aplikasi Web
• Pengembangan aplikasi web adalah proses penting untuk membuat aplikasi perangkat lunak yang
berfungsi melalui browser web, menawarkan kompatibilitas lintas platform kepada pengguna dan
beradaptasi dengan aplikasi seluler untuk akses tanpa batas di seluruh perangkat. Transformasi
digital ini memberdayakan organisasi untuk membangun aplikasi web, meningkatkan kehadiran
online dan keterlibatan pelanggan mereka.
• Pengembang web fokus pada pengembangan aplikasi web, memanfaatkan bahasa pemrograman
dan kerangka aplikasi web untuk membuat aplikasi web yang melayani berbagai industri.
Pengembangan web memerlukan keahlian dalam memilih kerangka aplikasi web yang tepat dan
menciptakan pengalaman pengguna yang aman dan menarik

3. Perbedaan Antara Aplikasi Web & Situs Web

4. KEUNTUNGAN APLIKASI WEB
Kompatibilitas lintas platform
Biaya pemasangan dan pemeliharaan rendah
Skalabilitas yang mudah
Pembaruan waktu nyata
Peningkatan kolaborasi
KEKURANGAN APLIKASI WEB
Ketergantungan internet
Risiko keamanan
Keterbatasan kinerja
Fungsionalitas terbatas
Masalah kompatibilitas browser

5. Aplikasi web progresif
(PWA)
(PWA) adalah aplikasi web yang
menggunakan teknologi web modern untuk
memberikan pengalaman seperti aplikasi
asli kepada pengguna, termasuk
fungsionalitas offline, pemberitahuan push,
dan akses ke perangkat keras perangkat,
tanpa perlu mengunduh dan
menginstal aplikasi asli dari toko aplikasi.
PWA dirancang untuk
memberikan pengalaman yang
lancar di semua perangkat dan
platform, apa pun sistem
operasi atau ukuran layarnya.
Mereka menggunakan prinsip
desain responsif untuk
beradaptasi dengan berbagai
ukuran layar dan jenis
masukan, dan dapat diakses
melalui browser web modern

6. PWA dibuat menggunakan
kombinasi teknologi web,
termasuk HTML, CSS,
JavaScript, dan Service Worker,
yang memungkinkan PWA
berjalan secara offline dan
memuat dengan cepat, bahkan
pada jaringan yang lambat atau
tidak dapat diandalkan
Mereka juga menggunakan file
Manifes Aplikasi Web, yang
memberikan informasi tentang
metadata aplikasi, seperti
nama, ikon, dan warna tema.

7. Jenis Model Aplikasi Web
• Aplikasi Web Statis
• Aplikasi Web Dinamis
• Aplikasi Satu Halaman
(SPA)
• Aplikasi Web Progresif
(PWA)
• Layanan Web
• Aplikasi Web Portal
• Aplikasi Web E-
commerce

8. Aplikasi Web Sisi Klien Aplikasi web sisi klien
adalah jenis aplikasi
web yang sebagian
besar pemrosesannya
dilakukan di sisi klien,
biasanya di browser
web pengguna.
Aplikasi ini sangat
bergantung pada
JavaScript, HTML,
dan CSS untuk
menyediakan
antarmuka pengguna
yang interaktif dan

9. Aplikasi Web Sisi Server Aplikasi web sisi server
adalah jenis aplikasi web
yang sebagian besar
pemrosesannya dilakukan di
sisi server, biasanya
menggunakan bahasa
pemrograman sisi server
seperti PHP, Python, atau
Ruby. Aplikasi ini
menghasilkan konten
dinamis yang dikirim ke sisi
klien sebagai HTML, CSS,
dan JavaScript, dan
bergantung pada

10. Aplikasi Satu Halaman
• Aplikasi satu halaman (SPA) adalah jenis aplikasi web yang memuat satu halaman HTML dan
memperbarui konten secara dinamis saat pengguna berinteraksi dengan aplikasi. SPA
menggunakan JavaScript untuk memanipulasi Model Objek Dokumen (DOM) dan memperbarui
halaman tanpa memerlukan penyegaran halaman penuh. Hal ini menciptakan pengalaman
pengguna yang lebih lancar dan responsif, karena pengguna tidak perlu menunggu server memuat
ulang halaman pada setiap interaksi.
• SPA biasanya dibangun menggunakan kerangka JavaScript seperti React, Angular, atau Vue.js,
menyediakan alat dan komponen untuk menyederhanakan proses pengembangan.

11. Aplikasi Satu Halaman
• Aplikasi satu halaman (SPA) adalah jenis aplikasi web yang memuat satu halaman HTML dan
memperbarui konten secara dinamis saat pengguna berinteraksi dengan aplikasi. SPA
menggunakan JavaScript untuk memanipulasi Model Objek Dokumen (DOM) dan memperbarui
halaman tanpa memerlukan penyegaran halaman penuh. Hal ini menciptakan pengalaman
pengguna yang lebih lancar dan responsif, karena pengguna tidak perlu menunggu server memuat
ulang halaman pada setiap interaksi.
• SPA biasanya dibangun menggunakan kerangka JavaScript seperti React, Angular, atau Vue.js,
menyediakan alat dan komponen untuk menyederhanakan proses pengembangan.

13. SPA biasanya dibangun menggunakan kerangka JavaScript seperti React, Angular, atau Vue.js,
menyediakan alat dan komponen untuk menyederhanakan proses pengembangan. Kerangka kerja ini
sering kali menawarkan fitur seperti perutean sisi klien, manajemen status, dan pengikatan data, yang
dapat membantu pengembang membuat aplikasi kompleks dengan mudah.
Salah satu keunggulan utama SPA adalah
kecepatan dan daya tanggapnya, karena SPA
hanya perlu mengambil data dari server bila
diperlukan, sehingga mengurangi jumlah lalu
lintas jaringan dan meningkatkan kinerja.
Mereka juga menawarkan pengalaman
pengguna yang lebih mulus dan seperti aslinya,
karena mereka dapat berperilaku seperti aplikasi
desktop atau seluler, dengan transisi dan
animasi yang mulus.
Namun, SPA dapat memiliki beberapa
kelemahan, seperti berkurangnya optimasi
mesin pencari (SEO) karena kurangnya banyak
halaman dan URL unik serta potensi masalah
aksesibilitas bagi pengguna dengan pembaca
layar atau teknologi bantu lainnya. Selain itu,
SPA memerlukan lebih banyak daya
pemrosesan klien dan mungkin tidak cocok
untuk perangkat yang lebih lama atau kurang
bertenaga.

14. KERANGKA KERJA APLIKASI WEB &
TEKNOLOGI
Paling Depan
Front-end
bagian di mana pengguna berinteraksi langsung melalui
browser mereka. Ini mencakup antarmuka pengguna, tata
letak, dan desain aplikasi secara keseluruhan.
JavaScript
memungkinkan pengembang untuk menambahkan
interaktivitas, animasi, dan fitur dinamis lainnya ke
halaman web
HTML
Bahasa markup standar yang digunakan untuk membuat
halaman web
CSS
digunakan untuk menentukan gaya visual dan tata letak
halaman web

15. KERANGKA KERJA APLIKASI WEB &
TEKNOLOGI
Bagian Belakang
Backend
berkomunikasi dengan layanan eksternal dan API
Bahasa Pemograman
PHP, Python, Ruby & Java
Basis Data
MySQL, PostgreSQL, MongoDB
API
Berintergrasi dengan layanan eksternal, misl. Gateway
pembayaran, platform medsos, & alat analisis data.

16. Solusi No-code
• Platform tanpa kode muncul sebagai solusi populer untuk
pengembangan aplikasi web. Platform ini memungkinkan pengguna
untuk membuat aplikasi web tanpa harus memiliki keterampilan atau
pengetahuan pengkodean apa pun. Platform ini
menggunakan antarmuka drag and drop visual untuk membantu
pengguna merancang antarmuka pengguna aplikasi dan
menentukan perilakunya. Metode ini menghilangkan kebutuhan
untuk menulis kode dari awal, sehingga waktu pengembangan
lebih cepat dan biaya pengembangan lebih rendah.

18. SEKIAN . . .
SEKIAN . . . SEKIAN . . .
SEKIAN . . .
SEKIAN . . .