Transcript Lingkungan Pengembangan Aplikasi Internet

Pemrograman Internet Mobile
Antonius Rachmat C, S.Kom, M.Cs
Lingkungan Pengembangan Aplikasi Internet
Masalah
• HTTP bersifat stateless
• Jika kita belanja pada situs e-commerce misal
www.amazon.com dan kita membeli beberapa buku
dan memasukannya kedalam basket chart
• Kemudian kita berpindah halaman yang lain untuk
melihat buku yang lain
• Bagaimana amazon dapat mengingat buku apa saja
yang sudah kita beli yang ada dalam basket saja yang
sudah kita beli yang ada dalam basket chart?
• Bagaimana kita menyimpan state dari request ke
request yang lain
Lalu?
• Apakah bisa menggunakan log file yang dicatat
dalam web server?
– Tetapi HTTP bersifat anonymous
• Web Server tidak tahu user siapa yang sedang
terkoneksi ke web server / mengakses web
• Web Server hanya dapat mencatat IP komputer
saja, user agents, halaman apa yg diakses
– Bagaimana kalau koneksinya melalui proxy?
Solusi
• Menggunakan session ID
• Yaitu menambahkan ID tertentu pada
alamat URL dari semua halaman yang
diakses
• http://www.amazon.com/exec/obidos/ASIN
/1588750019/103 9609966 7089404
• Biru = nomer ISBN
• Hijau = session ID
Solusi
• Solusi lain yang ditawarkan adalah dengan
menggabungkan semua content yg ada di
basket chart melalui HTTP GET
• Namun HTTP GET: maksimal panjang 255
karakter untuk browser versi lama
• Session:
– Masalah ini timbul jika user mengakses web sites
tidak harus login terlebih dahulu
– Jika sudah melalui login, web server dapat membuat
nama session secara spesifik sessuai dengan user
name nya
Cookies
• Cookies adalah mekanisme umum dimana
server side connection (CGI script) dapat
menyimpan dan mengambil informasi
pada sisi client (client side)
• Bagaimana cara kerjanya?
– Setelah user menambahkan buku kedalam
shopping cart, server akan menuliskan
– Set-Cookie: cart_contents=1588750019;
path=/
Masalah Cookies
• Keterbatasan untuk menyimpan cookies dalam browser
– Tidak boleh lebih 20 cookies untuk web server yang sama
– Ukuran setiap cookies tidak boleh lebih dari 4 kilobytes
• Informasi yang disimpan di cookies akan Informasi yang
disimpan di cookies akan dikirimkan kembali ke web
server setiap kali page diload
• Jika file cookies besar dan jumlahnya banyak (misal 80
Kilobytes untuk 20 cookies)
• Tidak portabel untuk user
– Jika user berganti komputer maka data cookies yang sudah ada
tidak tersimpan pada komputer yang baru
• User juga bisa mendisable cookies untuk privacy
Server side storage
• Cara yang paling tepat adalah
menggunakan RDBMS (relational
database management system)
• Dapat melakukan perintah create, insert,
update, delete, dan select (query)
• Mengatasi masalah concurency
• Adanya declarative query language (SQL)
Langkah Pengembangan
• Mengembangkan data model, informasi apakah yang
akan disimpan dan bagaimana informasi tersebut akan
ditampilkan
• Mengembangkan legal transaction (perintah yang
diijinkan) pada model (table) tersebut (insert, update)
• Mendisain page flow, bagaimana user berinteraksi
dengan sistem, perintah apa yang boleh dilakukan user /
halaman yg boleh diakses boleh dilakukan user /
halaman yg boleh diakses
• Mengimplementasikan individual pages, menulis script
(HTML dan bahasa server side) dan query script (HTML
dan bahasa server side) dan query information (data
model)
Aplikasi yg menggunakan webdb
•
•
•
•
•
•
•
•
•
E-Commerce
Resource libraries
Catalogs
Directories (Yellow Pages)
Online Shopping
Online Auctions
Training Courses
Survey
Financial Analysis
Desain Web
• Website sudah menjadi seperti software
• Dari ‘document delivery’ menjadi ‘business
process automation’
• Software Engineering method dapat
diterapkan pada Website development
• Dapat membantu mengatur proses
sehingga bisa dikontrol, meminimalkan
resiko dari kegagalan proyek
Perkembangan Aplikasi Web
• Website statis
– Hanya kumpulan HTML, image, table, frame
• Website statis dgn interaktivitas form
– Sudah menggunakan java script
• Website dengan dynamic data acess
– Sudah menggunakan client dan server side programming
language
– Tergantung tujuannya
– Bisa dibuat umum, seperti CMS
• Web Application
– Seperti facebook, wikipedia, silverlight, google earth, google
office
• Web Mobile Application
– Sama seperti web dinamis dan web application, namun
ditampilkan di mobile
Web yg direkayasa secara benar
• Correct : website dapat dikatakan correct jika website
tersebut dapat berfungsi dengan baik dan bebas dari
error / error free (dilakukan testing)
• Testable : sebelum di deploy harus dilakukan proses
testing terlebih dahulu yang terdiri dari beberapa level
testing untuk memastikan website tersebut sesuai
dengan requirement dan bebas error
• Maintable : website harus mudah untuk dimaintain,
mudah untuk melakukan perubahan terhadap suatu
websites
• Portable : website yang portable adalah website yang
bisa dijalankan di berbagai platform dan dapat di
tampilkan dengan baik di semua browser (cross
browser)
Web yg direkayasa secara benar
• Scalable : Website yang scalable adalah website yang
mudah untuk dikembangkan (ditambah fungsi baru,
feature baru, bertambahnya user dll) bertambahnya
user, dll)
• Reusable : website yang komponen-komponen atau
fungsi-fungsinya dapat digunakan kembali
(pemrograman menggunakan konsep OOP)
• Robust dan Reliable : mengacu pada kualitas
implementasi secara teknis dan visual (banyak gambar,
dll) bagaimana website tersebut dapat digunakan oleh
user (masalah bandwith, dan kondisi jaringan)
• Efficient : Performa yang baik terutama dalam delivery
datanya (penanganan server dan network)
Web yg direkayasa secara benar
• Readable : Source File program yang dibuat
dapat dipahami dengan baik oleh programmer
lain
• Well Documented : Website yang
terdokumentasi dengan baik (spec,flowchart,
document, perubahan)
• Appropriately Presented : tampilan / user
interface juga harus mendukung tujuan dari
web agar menarik user (untuk marketing /
promo, brand image)
Kesulitan
• Complexity : Webiste dapat menjadi sangat
kompleks, tantangan terbesar adalah adanya
fungsi-fungsi baru yang terus ditambahkan pada
website (sulit pada proses pengembangan)
• Changebility : Website memerlukan perubahan
yang terus menerus, sehingga membuat proses
pengembangan website menjadi komplek
• Biasanya kode yang ditulis untuk project web
skala kecil berupa “spaghetti code”
Kesulitan
• Invisibility : proses pengembangan website
tidak bisa diukur kemajuannya.
– Client mungkin ingin melihat sampai mana proses
pengembangan website yang dibuat / progress (mis:
halaman apa saja yang sudah jadi, fungsi-fungsi apa
saja yang sudah jadi)
• Unrealistic Schedules : jadwal yang tidak
realistis (mis: deadline terlalu cepat), kita harus
memperhitungkan resiko yang dapat muncul
pada proses pengembangan web (management
risk)
Piramida
Proses pengembangan
• Pendekatan Deduktif (Top-Down)
– menentukan tujuan
– buat spesifikasi
– rancang sesuai spesifikasi
– implementasikan rancangan
– test
– ‘publikasikan’
• Process Model membantu proses
pembuatan web dengan cepat dan akurat.
Pengembangan Web RAD
• RAD = Rapid Application Development
– BBBB => Buat, Buang, Buat Baru
•
•
•
•
Tidak ada standarisasi baku
Tanpa perancangan / diskusi
Proses pembuatan cepat
Dianjurkan untuk skala kecil
Pengembangan Web: Waterfall
Model
•
•
•
•
Mempunyai banyak tahap
Dikerjakan oleh kelompok besar / team
Sangat terstruktur
Proses lama unt perancangan
Desain Waterfall
Environmental Requirements
• Walaupun sistem requirements berbeda-beda,
tergantung dari jenis web site, tetapi semua site
harus memperhatikan requirement dari sistem
end-user (browser, kecepatan koneksi, besar
monitor, dll).
• Untuk mengetahui platform target dapat
digunakan asumsi umum, sample survey atau
berdasarkan analisa laporan statistik.
• Dapat juga digunakan hasil ‘perjanjian’ antar
perancang Web. Mis. Resolusi layar 800 x 600
pixel
Content Requirements
• Berisi daftar informasi yang akan
ditampilkan pada suatu web site berikut
formatnya.
– Apa yang harus dimuat?
– Berapa banyak yang harus dimuat?
Functional Requirements
• Menyatakan apa yang akan dilakukan oleh
suatu web site, bukan bagaimana web site
tersebut melakukannya.
• Functionality requirements harus detail.
• Tergantung kasus proyeknya
Design
• Design struktur informasi atau dokumen
menentukan bagaimana informasi bisa
dicocokkan dengan struktur halaman web.
• Informasi seringkali disimpan dalam dokumen
yang cukup panjang. Sebaliknya, dalam
perancangan web, web cenderung memiliki
banyak link antar halaman web tersebut.
• Perancangan ini masuk akal karena pemakai
web biasanya hanya membaca sebagian kecil
dari semua halaman yang tersedia dalam yg
website. Oleh karena itu, informasi harus
dipecah menjadi bagian kecil dengan link-link.
Link Structure
Link Structure
Link Structure
Structure Link
Ingat
• Pengembang website tidak mengetahui
peralatan yang digunakan oleh pengguna,
– Misal: pada waktu perancangan tidak ada informasi
sama sekali dari pengguna browser informasi sama
sekali dari pengguna browser apa yang nanti akan
digunakan untuk mengakses website mengakses
website
• Banyak faktor selain keadaan software di client
ikut mempengaruhi keberhasilan sebuah
website, terutama kondisi jaringan yang
digunakan, kecepatan jaringan tidak bisa
dipredikasi karena tergantung banyak faktor
(traffic padat atau tidak, kecepatan koneksi, dll)
Ingat
• Website biasanya document oriented dibandingkan
software yang process oriented (lebih berfokus pada
process / komputasi).
• Dalam perancangan web harus sangat diperhatikan
bahwa informasi dalam dokumen dipresentasikan
dengan menarik dan jelas sehingga lebih dimengerti
oleh pengguna
• Penampilan halaman web sangat penting untuk
penerimaan atau penolakan oleh pengguna. Halaman
pertama (index/default) pada web yang dianggap tidak
menarik akan menyebabkan orang tidak menyebabkan
orang tidak akan berkunjung lagi
Prinsip desain web
1. Building For User
– Anda bukan pengguna
– Pengguna bukan seorang designer
– Pengguna memiliki karakteristik yang berbeda
2. Utility & Usability
– Utility : kegunaan/fungsionalitas suatu web
– Usability : kemampuan pengguna
memanipulasi web sehingga pengguna
memperoleh apa yang diperlukannya.
Prinsip desain web
3. Correctness
– HTML benar
– Gambar tampil sesuai dengan yang diharapkan
– Elemen-elemen yang interaktif (JavaScript, CGI, dll)
dapat berfungsi dengan benar
– Navigasi sistem tidak ada kesalahan (broken link)
4 Know and respect the Web and Internet 4. Know
and respect the Web and Internet medium
constraint (Browser, bandwidth, programming,
protocol)
Prinsip desain web
5. Web Site harus mengikuti prinsip-prinsip GUI
– Disesuaikan dengan tampilan windows
– Pakai prinsip-prinsip yang telah dikenal pengguna
6. Web site yang baik memiliki sistem navigasi
yang jelas
– Untuk meningkatkan navigasi diperlukan suatu
struktur yang tepat
– Alat bantu: site map, search engines, site index, help
system.
7. Look matter
– Tampilan visual sangat mempengaruhi persepsi awal
pengguna mengenai suatu web.
Desain tips
• Buatlah Website yang dapat digunakan semua orang
• Buatlah website yang bisa dijalankan di semua browser
• Buatlah halaman web dng memperhatikan setting
browser pengguna
• Buatlah website dengan teknologi yang paling
compatible
• Buatlah website yang cepat diakses
–
–
–
–
Buat halaman yang cepat diload
Buat agar halaman cepat ditampilkan
Pakai format citra ang efisien
Buat website yang mudah dimengerti
Desain tips
• Buatlah website yang mudah digunakan
– Mempunyai bantuan navigasi
– Menggunakan Bread Crumb
• Buat halaman web bebas dari penyusunan yang kacau
• Halaman utama harus dapat ditampilkan / diload dengan
cepat
• Halaman harus mudah dibaca (gunakan font yg mudah
dibaca, ukuran font harus cukup besar, warna teks dan
background hrs cocok, format hrs konsisten)
• Hindari penggeseran (scrolling) lebih dari yang betulbetul diperlukan
– Terutama scroll ke samping
Desain tips
• Sebuah site harus user friendly baik untuk pengguna
lama maupun pengguna baru
• Pakai menu yang bisa dimengerti dan tidak begitu
panjang
• Struktur link hendaknya menggunakan campuran
Narrow Hierarchy dan Wide Hierarchy
• Jangan memaksa pengguna untuk registrasi kalau tidak
berguna
• Dalam setiap halaman yang penting cantumkan hak
cipta dan informasi siapa yang harus hak cipta dan
informasi siapa yang harus dihubungi jika ada
pertanyaan
• Untuk website yang besar (lebih dari 100 hal) sebaiknya
menyediakan fasilitas pencarian kata yang bersifat lokal
– Dapat juga dibuat sitemap
NEXT
• WAP