Oleh: M.

RIZKI JANUAR ( SMK PAB 2 Helvetia )

Konsep Teknologi Webpage

 Pengertian tentang aplikasi Web
• Aplikasi Web merupakan sebuah aplikasi yang
menggunakan teknologi browser untuk
menjalankan aplikasi dan di akses melalui
jaringan komputer (Remick,2011).
• Menurut (Rouse,2011) aplikasi web adalah
sebuah program yang disimpan di serverdan
dikirim melalui internet dan diakses melalui
antarmuka browser.
• Dari pengertian diatas dapat disimpulkan
aplikasi web merupakan aplikasi yang
diakses menggunakan browser melalui
2
jaringan internet atau intranet.
 PROFESI-PROFESI DALAM
PENGEMBANGAN WEB
Berikut ini adalah profesi-profesi yang langsung terkait dalam
pengembangan aplikasi web, diantaranya :

• Web Designer
adalah orang yang bertanggung jawab untuk menentukan tampilan sebuah
website. Tugasnya adalah pendisainan tampilan situs (web) mulai dari
pengolahan gambar, tata letak, warna, dan semua aspek visual situs. Fokus
utama mereka adalah tampilan / layout dari web. Mereka lebih konsen
dengan bagaimana halaman terlihat dan apakah berfungsi sempurna ketika
sudah diberikan bahasa pemrograman. Didalam pendandanan suatu situs
seorang Web Designer harus menguasai :
– HTML, DHTML
– Pengolah Gambar
– Animasi, Movie (Film)

3
. Web Programmer
Web Programmer bertugas dalam melakukan pengcodingan atau
pemograman sebuah website agar dinamis. dimana agar sebuah web
tersebut dapat telihat mudah bagi seorang web admin. Jika situs yang akan
dibuat mempunya fasilitas interaksi antara pengunjung dan situs misalnya
menyangkut dengan transaksi, input output data dan database maka
seorang Web Programmer yang akan mengerjakannya dengan membuat
aplikasi-aplikasi yang berkerja diatas situs (web).
Penguasaan yang biasanya harus dikuasai pada umumnya oleh Web
Programmer :
– CGI Perl, PHP, MySQL (Unix base)
– ASP (NT base)
– Java Script dan Applet
. Web Administrator
Tugasnya adalah untuk memaintenance suatu server, mengerti akan
Sistem Operasi Server, baik itu mulai dari instalasi sampai kepada masalah
(troubleshooting), biasanya seorang Web Administrator harus menguasai :
– OS Unix (LInux, FreeBSD, dll)
– OS NT
– Jaringan (LAN, WAN, Intranet)
4
– Keamanan Server
. Web Master
Seoarang Web Master adalah seorang yang mengerti akan kesemua hal
mulai dari desain, program dan keamanan server namun tidak terlalu turut
mencampuri ke masing-masing divisi, cukup dengan mempertanggung
jawabkan atas jalannya suatu situs (web). Penguasaan yang harus dimiliki :
– HTML, DHTML
– CGI Perl, PHP, MySQL, ASP, Java
– Penguasaan bermacam OS (Operating System)
– Keamanan Server – Jaringan (LAN, WAN, Intranet)

. Web Developer
Kegiatan diatas secara keseluruhan dinamakan suatu team yang
dinamakan Web Developer. Web developer memberi bantuan seperti
konsultasi web, konsep web yang akan di buat, membangun sebuah
website..

5
 Sejarah dan Cara Kerja Web
Sejarah Web
• WWW merupakan sebuah program yg ditemukan oleh Tim Berners-
Lee pada th 1991. Awalnya Berners-Lee hanya ingin menemukan
cara untuk menyusun arsip-arsip risetnya. Utk itu, ia
mengembangkan satu buah system untuk kepentingan pribadi.
System itu yaitu program peranti lunak yg diberi nama Enquire.
Dgn program itu, Berners-Lee sukses membuat jaringan yg
menautkan berbagai arsip maka memudahkan pencarian informasi
yangdibutuhkan. Inilah yg nanti jadi dasar dari suatu perkembangan
pesaty ang dikenal sebagai WWW.
WWW dikembangkan pertama kali di Pusat Penelitian Fisika
Partikel Eropa (CERN :Organisation Europeenne pour la Recherche
Nucleaire), Jenewa, Swiss. Pada thn 1989 Berners-lee menciptakan
pengajuan untuk proyek pembuatan hiperteks global, selanjutnya
pada bln Oktober 1990, 'World Wide Web' sudah bisa dijalankan
dalam lingkungan CERN. Pada musim panas th 1991, WWW
secara resmi dipakai secara luas pada jaringan Internet.
6
 Bagaimana web bekerja?
URL HTTP request
body header

Web Web Web f iles

Browser TCP/IP Server

Display header body

HTTP response
Client Server

• user mengetik URL di browser

• browser menghubungi server yang tersebut pada URL
• setelah terhubung, browser mengirimkan HTTP request
• server menjawab dengan mengirim HTTP response (berisi
header dan isi dokumen)
• untuk dokumen yang terdiri atas beberapa file (misalnya
dokumen bergambar), browser harus mengirimkan HTTP
request lagi untuk setiap file
• browser menampilkan semua isi dokumen kepada user 7
Alur Pengembangan Aplikasi Web
Alur dari Pengembangan Aplikasi Web adalah sebagai berikut :
• Formulasi (formulation)
Kegiatan yang berfungsi untuk merumuskan tujuan dan ukuran
dari aplikasi berbasis web serta menentukan batasannya sistem.
Tujuan yang ingin dicapai bisa dibedakan menjadi dua kategori,
yaitu :
- Tujuan yang bersifat informatif
Menyediakan suatu informasi tertentu kepada pengguna, berup
a teks, grafik, audio, dan video.
- Tujuan yang bersifat fungsional
Kemampuan untuk melakukan suatu fungsi yang dibutuhkan p
engguna, misal
dengan menggunakan aplikasi tersebut seorang guru dapat m
emperoleh nilai akhir dan statistik nilai guru dari data-
data ujian, tugas, kuis yang ia input ke dalam aplikasi.
8
• Perencanaan (planning)
Kegiatan yang digunakan untuk menghitung estimasi biaya pro
yek pembuatan aplikasi berbasis web
ini, estimasi jumlah pengembang, estimasi waktu
pengembangan, evaluasi resiko pengembangan
proyek, dan mendefinisikan jadwal pengembangan untuk versi
selanjutnya (jika diperlukan).

• Analisis (analysis)
Kegiatan untuk menentukan persyaratan-persyaratan teknik dan
mengidentifikasi
informasi yang akan ditampilkan pada aplikasi berbasis web.
Analisis yang digunakan pada rekayasa web dilakukan dari empat
sisi, yaitu :

• Analisis isi informasi

Mengidentifikasi isi yang akan ditampilkan pada aplikasi berba
sis web ini. Isi informasi dapat berupa teks, grafik, audio, maupun
video. 9
• Analisis interaksi
• Analisis yang menunjukkan hubungan antara web dengan
pengguna.

• Analisis fungsional
• Analisis tentang proses bagaimana aplikasi berbasis web ini akan
menampilkan informasi kepada pengguna.

• Analisis konfigurasi
• Konfigurasi yang digunakan pada aplikasi berbasis web, internet,
intranet, atau
extranet. Selain itu, analisis ini juga meliputi relasi database d
engan web jika diperlukan.

10
 Rekayasa (engineering)
• Terdapat dua pekerjaan yang dilakukan secara paralel, yaitu
desain isi informasi dan desain arsitektur web.
• Pada saat tahap desain, ada beberapa hal yang perlu dilakukan :
• Pembuatan Diagram Wireframe (Gambar Rangka), tujuan dari
diagram gambar rangka adalah untuk
menunjukkan bagaimana lay out halaman web dan
menunjukkan di mana fungsi dan konten seperti navigasi, kotak
pencarian, elemen bentuk dan sebagainya, tanpa desain grafis.
Berikut ini contohnya :

11
• Diagram Situs, Sebuah diagram situs menunjukkan struktur situs
secara keseluruhan dan bagaimana halaman
individual berhubungan satu sama lain. Gambar dibawah
menunjukkan diagram situs yang sangat sederhana

12
Storyboard dan diagram alir pengguna, Storyboard ini bertujua
n untuk menunjukkan langkah -
langkah yang diperlukan untuk menyelesaikan tugas-
tugas, opsi yang mungkin, dan juga memperkenalkan beberap
a standar jenis halaman. Gambar 1-3 menunjukkan storyboard
sederhana

13
TERIMA KASIH

14
 Teknologi Pembangun
Aplikasi berbasis Web
• Web client (web browser)
• Web server
• URL : Uniform Resource Locator
• HTTP : HyperText Transfer Protocol
• HTML : HyperText Markup Language
• CSS : Cascading Style Sheet
• Pemrograman Web
– CGI, eksekusi program di sisi server
– server side scripting
– client side scripting
– plug-in, eksekusi program di sisi client 15
 Web client (web browser)
• web browser
– merupakan suatu software
– dijalankan pada komputer user
– sebuah perangkat navigasi di dalam web
– menampilkan dokumen web

• Perangkat lunak web browser yang populer saat ini :

– MS Internet Explorer (Windows)
– Mozilla Firefox (Windows & Linux)
– Netscape Navigator/Communicator (Windows & Linux)
– Opera (Windows & Linux)
– Konqueror (Linux)
– lynx, berbasis teks (Linux)

16
Web client (web browser)

17
 Web server
• web server
– merupakan suatu software
– dijalankan pada komputer server
– berfungsi agar dokumen web yang disimpan di server dapat
diakses oleh user di internet

• Perangkat lunak web server yang populer saat ini :

– Apache (Linux & Windows)
– MS Internet Information Server / IIS (Windows)
– Tomcat, untuk Java (Windows & Linux)

18
URL (Uniform/Universal Resource Locator)
• URL adalah sistem pengalamatan file yang digunakan
di internet
• Format URL standar dideskripsikan di RFC 1738
(http://www.ietf.org/rfc/rfc1738.txt)

19
URL (Uniform/Universal Resource Locator)
• Sistem Pemberian Nama Domain

20
URL (Uniform/Universal Resource Locator)
• Contoh alamat URL:
• http://www.if.itb.ac.id/
• mailto:elfan@informatika.org
• ftp://ftp.informatika.org/
• Alamat URL yang digunakan dalam web:
– Alamat diawali dengan http://, diikuti nama domain
dan infromasi direktori
– Contoh alamat URL untuk web:
• http://www.itb.ac.id/campus-life/index.html
• http://www.google.com/search?hl=en&q=URL+RFC
• http://www.indymedia.org:8081/

21
 HTTP (HyperText Transfer Protocol)
• HTTP adalah protokol komunikasi yang digunakan dalam web
• Spesifikasi HTTP standar (HTTP 1.1) dideskripsikan di RFC 2616
(http://www.ietf.org/rfc/rfc2616.txt)
• contoh “obrolan“ komunikasi antara browser dan server untuk
menghantarkan sebuah dokumen web yang disisipi sebuah gambar:
GET / HTTP/1.1
browser Accept: image/gif, image/jpeg, application/x-shockwave-flash, HTTP request 1 server
*/*
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Content-type: text/html

browser HTTP response <html>

server
1 <head><title> Google </title></head>
<body>Welcome to google <img src='logo.gif'></body>
</html>

GET /logo.gif HTTP/1.1

Accept: image/gif, image/jpeg, application/x-shockwave-flash,
browser */*
HTTP request 2 server
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Content-type: image/gif
browser HTTP response
GIF89a€6÷aD&nˆ†!VRŠ:¾è gÛ5Èߎ7J ‰¥Ø£“ !Y¤
K"d‘qDbF9~¨âkµÈ server
2
ö}&•%= æâz!ÙÑ– uéebóùx’˜
 M‰"š*É挂՘
¡•ÉI§^„........
22
HTML (HyperText Markup Language)
• HTML adalah format standar untuk menulis dokumen web
• spesifikasi HTML standar (HTML 4.01) terdapat di
http://www.w3.org/TR/html4/
• contoh dokumen HTML:
<html>
<head>
<title>My first HTML document</title>
</head>
<body>
<p>Hello world!<br>Welcome to my <b>first</b>
HTML page.
</p>
</body>
</html>

• hasil tampilan :
Hello world!
Welcome to my first HTML page.

23
 CSS (Cascading Style Sheet)
• CSS adalah suatu mekanisme untuk menambahkan style (misalnya font, warna,
jarak, posisi) pada dokumen web
• Spesifikasi CSS standar (CSS 2) terdpat di http://www.w3.org/TR/REC-CSS2/
• Contoh dokumen HTML yang menggunakan CSS:
<html>
<head>
<title>My first HTML document</title>
</head>
<style type='text/css'>
p { font-family: Arial; text-decoration: underline;
}
p:first-letter { font-size: 20pt; }
b { font-size: 20pt; }
</style>
<body>
<p>Hello world!<br>Welcome to my <b>first</b> HTML
page.
</p>
</body>
</html>
• hasil tampilan :

Hello world!
Welcome to my first HTML page. 24
 Pemrograman Web
• CGI, eksekusi program di sisi server (perl, C)
Web server menjalankan file program dan mengambil keluarannya
untuk dijadikan HTTP response
• server side scripting (PHP, ASP, JSP, Phyton)
Web server mengidentifikasi dan menjalankan skrip program yang
disisipkan dalam dokumen web dan menempatkan keluarannya
sebagai bagian dari dokumen web
• client side scripting (JavaScript, JScript, VBScript)
Web browser mengidentifikasi dan menjalankan skrip program yang
disisipkan dalam dokumen web (yang diterima dari server), dan dapat
meng-update tampilan dokumen web di komputer user tanpa
mengirimkan request baru kepada web server
• plug-in, eksekusi program di sisi client (applet, ActiveX,
Flash)
Web browser menjalankan file program dengan bantuan plug-in
viewer/player dan menyediakan suatu area di dalam dokumen web
sebagai tempat menampilkan antarmuka program tersebut
25