INTRODUCTION

TO WEB
APPLICATION
Overview
Website
Web application architecture
Static and dynamic web
Web programming
Web component
Soal Pretest

1. Apa yang dimaksud dengan aplikasi desktop?

2. Gambar dan jelaskan arsitektur aplikasi berbasis desktop!
3. Apa yang kamu ketahui mengenai aplikasi web?
4. Menurut pemahamanmu, apakah perbedaan aplikasi desktop dan web?
5. Sebutkan 5 contoh aplikasi web yang kamu ketahui!
Jawaban 1

Apa yang dimaksud dengan aplikasi desktop?

Aplikasi Desktop adalah suatu aplikasi yang dapat berjalan sendiri tanpa menggunakan browser atau
koneksi Internet di suatu komputer dengan operating system atau platform tertentu.
Jawaban 2

Gambar dan jelaskan arsitektur aplikasi berbasis desktop!

Jawaban 3

Apa yang kamu ketahui mengenai aplikasi web?

Aplikasi web based adalah suatu aplikasi yang dapat berjalan dengan menggunakan basis teknologi web
atau browser. Aplikasi ini dapat diakses dimana saja asalkan ada koneksi internet yang mendukung, tanpa
perlu melakukan penginstallan di komputer masing-masing seperti pada aplikasi desktop.
Jawaban 4

Menurut pemahamanmu, apakah perbedaan aplikasi desktop dan web?

• Koneksi
• Kecepatan
• Keamanan
• Biaya pemeliharaan • Instalasi

• Kemudahan akses

• Spesifikasi
Jawaban 5

Sebutkan 5 contoh aplikasi web yang kamu ketahui!

1. Detik
2. Facebook
3. Inocent
4. Gmail
5. Tokopedia
WEBSITE

• Web adalah kumpulan halaman yang menyediakan informasi bagi pengguna dengan akses internet.
• Informasi-informasi ini membentuk satu rangkaian bangunan yang saling terkait dimana saling
dihubungkan dengan jaringan jaringan halaman yang biasa kita sebut hyperlink.
Web Application Architecture

• Client – Server Architecture

• Web Server
• Web Client
• HTTP
• Two Tier
• Three Tier
Client-Server Architecture

• Arsitektur yang menjelaskan pemisahan kerja antara penyedia informasi/layanan (server) dengan
peminta informasi (client)
• Seringkali client dan server beroperasi dalam jaringan komputer dengan client dan server ada di
mesin/hardware yang berbeda
• Client tidak membagi informasi namun meminta informasi dari server
Client-Server Architecture...

• Mesin server biasanya adalah host dengan performansi tinggi yang menjalankan satu atau lebih
program server. server membagi informasi ke client
• Client menginisialisasi sesi komunikasi dengan server, dan server menunggu (await/listen) pada
request yang datang
WEB SERVER

• Komputer yang menjalankan program computer, bertanggung jawab untuk menerima request dari
client kemudian merespon request tersebut.
• Request dari client berupa dokumen-dokumen web (web resources) seperti dokumen html, image, dll
• Contoh web server: Apache, IIS, Xitami
WEB CLIENT

• Program komputer yang meminta dokumen-dokumen web (web resource) ke web server.
• Web client seringkali disebut sebagai browser
• Contoh web client: Internet Explorer (IE), Mozilla Firefox, Opera
HTTP

• Kependekan dari Hypertext Transfer Protocol

• Protokol yang mengatur bentuk komunikasi antara web server dan web client
• Merupakan stateless protocol, protokol yang tidak me-maintain hubungan tiap request. Setiap request
tidak terkait dengan request-request sebelumnya
HTTP...

• Memiliki beberapa request method, request yang paling sering dipergunakan dalam pembuatan
aplikasi web adalah get dan post
• Memiliki header yang menentukan bagaimana karakteristik data yang di-request ataupun yang
dihasilkan.
HTTP...
HTTP...
2 TIER

• User interface dijalankan di client

• Database disimpan di server

• Application logic dapat dijalankan

baik di client ataupun di server
3 TIER

• Tier 1, user interface dijalankan di client

• Tier 2 / middle tier, functional modules yang

memproses data. Jalan pada sebuah server.
sering disebut juga sebagai application server

• Tier 3 / data tier, database management system

(DBMS) yang menyimpan data yang diperlukan
middle tier. sering disebut juga sebagai database
server
DYNAMIC WEB

• Web Dinamis adalah Web yang content atau isinya dapat berubah setiap saat
• Perancangan sebuah web dinamis dibuat semudah mungkin bagi user
• Tidak diperlukan keahlian khusus untuk perubahan content atau isi dokumen
• Perubahan content/isi dari sebuah web dinamis ada pada bagian control panel atau administrator web yang telah
disediakan oleh script web dinamis
Web Programming

Jenis pemrograman web dibagi menjadi 2, yaitu:

• Client-side scripting
• Server-side scripting
Client-Side Scripting

• Pengolahan script di sisi client

• Penerjemah script disisi client adalah web browser
• Contoh client side scripting: HTML (hypertext markup language), java script, XML (extensible markup language), CSS
(cascading style sheet)
• Digunakan untuk membuat halaman web statis
Client-Side Scripting...

• Teknologi yang dioperasikan/dijalankan di sisi client

• Contoh: javascript, vbscript
• Alasan diperlukannya teknologi yang dijalankan di sisi client adalah :
• Client memerlukan akses informasi atau fungsi yang ada di client namun tidak diserver (inputan user)
• Server dapat kekurangan waktu proses untuk menjalankan seluruh request client
• Jika tanpa mengirimkan data ke server berarti memerlukan waktu yang lebih sedikit, mengurangi
bandwidth dan mengurangi resiko keamanan
Client-Side Scripting...

Client-side technology:

Client Side Technology Kegunaan Contoh Penerapan

Cascading Style Sheets, Formatting pages: controlling Overlapping, different

Dynamic HTML size, color, placement, layout, colored/sized fonts
timing of elements Layers, Exact Positioning
Client Side Scripting Event Handling: controlling Link that changes color on
(Javascript, VbScript) consequences of defined events mouseover

Flash animations Animation Short cartoon movie

Flash Games
SERVER-Side Scripting

• Script yang pengolahannya di sisi server (web server).

• Web server yang mampu menterjemahkan script-script , kemudian dikirim ke client (web browser) dalam format
HTML (hypertext markup language).
• Contoh server side scripting: PHP (PHP pre processor), ASP (active server pages), JSP (java server pages).
• Server side scripting digunakan untuk membuat halaman web dinamis.
TERIMA KASIH