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 2. Utility & Usability 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 betul-betul 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