Perancangan Aplikasi Web

BAB 5

PERANCANGAN APLIKASI WEB

Sebuah dokumen web atau dokumen hiperteks merupakan kumpulan halamn web yang dijadikan file komputer tunggal. Teknik dokumen web digambarkan sebagai aplikasi dari teknik rekayasa perangkat lunak untuk merancang dokumen web. Tujuan dari teknik dokumen web yaitu untuk menghasilkan sistem yang terstruktur, dapat dipelihara, dapat dimodifikasi dan mampu melakukan fungsi yang diharapakan. Walaupun demikian, proyek web berbeda dengan pengembangan perangkat lunak tradisional di beberapa carayang krits yaitu :

1. Perancangan web bisa melibatkan sekumpulan ahli

2. Perancangan web melibatkan penagkapan dan pengorganisasian domain informasi  Dari beberapa latar belakang diatas, terdapat beberapa metodologi perancangan web yang masing-masing memiliki perbedaan. Metodologi itu yaitu :

a. Berbasis struktur  Penekananya ada pada keseluruhan struktur dari dokumen web dan termasuk di antaranya halaman yang disajikan oleh struktur tersebut.

b. Berbasis hubungan  Metode yang menganalisis hubungan antara komponen-komponen dari dokumen yang akan disesuaikan dengan perancangan.

c. Berbasis informasi  Metode ini lebih di pusatkan pada konten organisasi yang mempunyai hubungan antara dokumen web tersebut.  Sesuai dengan adanya metode-metode yang sekiranya dapat dijadikan acuan untuk melakukan perancangan web, disini juga terdapat beberapa pendekata-pendekata yang bertujuan untuk melakukan perbaikan pada metode yang ada. Pendekatan-pendekatan tersebut yaitu :

Pendekatan Struktur Informasi

Informasi dalam suatu perancangan web sangatlah penting. Dari hal ini, pengembang dapat melakukan dan mencari informasi yang ada mengenai konten-konten dokumen yang ada. Jika keputusan seorang pengembang sebuah dokumen web adalah memilih salah satu yang baik, perancangan yang kurang baik dari dokumen dapat dengan mudah menampilkan masalah.

Pendekatan Struktur Urutan

Kesederhanaan dari struktur informasi ini terletak pada urutanya. Struktur ini merupakan struktur yang paling mudah dari struktur untuk perancangan dan navigasi. Ada beberapa hal dalam pendekatan struktur urutan, yaitu :- Dapat lebih mudah di prediksi- Mempunyai model yang familier dan menyangkan- Mempunyai kelemahan yang sesuai dalam perancangan dokumen web- Tidak ada konten hubungan dalam pendekatan struktur ini.

Pendekatan Struktur Grid

Struktur grid merupakan struktur yang pertama dari struktur informasi yang multidimensional. Struktur ini dapat digunakan untuk menggambarkan hubungan yang lebih berarti di antara halaman-halaman dari pada struktur urutan.Sebagai contoh, struktur grid dapat menyediakan mekanisme untuk menyajikan hubungan kronologis di antara halaman-halaman dokumen hiperteks/web. Keunggulan struktur ini adalah adanya navigasi secara multidimensional dalam perancangan hiperteksnya.Dalam pengembanganya, struktur grid di integrasika dengan struktur pohon.tree. Penggunaan struktur pohon dalam perancangan dokumen web mengijinkan halaman untuk bisa disajikan dalam bentuk hierarki. Model yang dipakai dalam struktur pohon adalah model organisasi dengan kebanyakan pengguna yang familier dan nyaman. Struktur pohon adalah pembatasan cara dengan halaman yang dapat di tambahkan.

Pendekatan Struktur Web

Struktur yang paling ekspresif dalam perancangan web adalah struktur web.Dalam struktur ini, halaman dan tautan diorganisasikan di dlaam pola topologi yang paing baik untuk menggambarkan relasi dan alur navigasinya di dalam dokumen.

Pendekatan Struktur Campuran

Dalam perancangan web yang bebas dan kompleks, struktur campuran adalah pilihan tepat untuk dilaksanakan. Dengan adanya struktur ini,

Pendekatan Metodologi Manajemen relasi

Pendekatan ini disebut juga The Relatinship Manajement Methodology (RMM)yang pertama kali diusulkan oleh Tomas Isakowitz, Edward Stohr dan P.Balasubramanian. RMM merupakan hubungan entitas bedasarkan teknik. Pemodelan hubungan entitas adalah sebuah teknik analisis yang biasanya dikaitkan dengan perancangan basis data dan pemrograman berorientasi objek. Ketika diadopsi untuk teknik dokumen web, perbedaan utamnya terletak pada jenis dari entitas yang dimodelkan tersebut. Entitas adalah objek yang dimodelkan di dalam peran yang dimainkan di dalam sistem spesifik. Jika sistem adalah dokumen web, entitas adalah halaman yang disajikan di dalam halaman. Relasi adalah nama penghubung antara dua atau lenih entitas [2].

INTERAKSI DESAIN

Interaksi dan integrasi antara visualisasi, dinamik, fungsional dan element teknik adalah beberapa yang harus ada dalam perancangan web. Disini akan di jabarkan beberapa kriteria dari interaksi desain yaitu :

a. Interaksi Pengguna

Gambar 1. Teknoloogi Pengembangan Interface Utama

-Maintainability mengacu pada rata-rata upaya untuk mencari dan memperbaiki kegagalan perangkat lunak, dan biasanya diukur oleh kesederhanaan, keringkasan, modularitas dan self-descriptiveness

-Reusability mengacu pada kemungkinan anjak keluar kode aplikasi tertentu untuk digunakan
dalam aplikasi lain tanpa (banyak) perubahan. Pengembangan teknologi yang berbeda memberikan kembali mekanisme seperti kode / perpustakaan scripting.Sebagai halaman web pertama perlu cepat dihasilkan, kebutuhan untuk mencari reusabilitas di tingkat user interface
sering diabaikan.

– Skalabilitas tidak hanya merujuk pada kemampuan mempertahankan jumlah besar pengguna tetapi juga, dari sudut pandang pembangunan, dengan kemampuan pembangunan yang berbeda cerdas kegiatan yang dapat dilakukan secara paralel oleh tim pengembangan. Beberapa ActiveX berbasis teknologi mengaktifkan fungsi yang menakjubkan, namun untuk proyek yang lebih besar, atom mereka sifat dan tingkat perkembangan kopling keprihatinan membuatnya sangat sulit untuk sekelompok pengembang yang akan bekerja di aplikasi yang sama secara bersamaan.

Gambar 2. Contoh Implementasi Dari Interface Aplikasi Web

b. Organisasi Antarmuka Pengguna

Dalam dokumen web, pelu adanya pengorganisasian antarmuka pengguna agar nantinya dapat dijadikan acuan beberapa antarmuka yang digunakan. Dibawah ini adalah salah satu contoh pengorganisasian antarmuka pengguna pada HTML :

<!– @page { margin: 2cm } P { margin-bottom: 0.21cm } –>

Gambar 3. Implementasi Scipt Node Pada HTML

<!– @page { margin: 2cm } P { margin-bottom: 0.21cm } –>

3.Desain Navigasi

Hasil dari desain navigasi adalah dua kali lipat: elemen pengguna dapat mengakses di satu sisi, dan struktur navigasi di sisi lain. Elemen menjadi node dalam kasus yang paling sederhana. Struktur mendefinisikan hubungan antara node. Hubungan ini nantinya akan menjadi terlihat link jangkar di user interface. Dalam skenario ini, desain interaksi mendefinisikan aspek yang diperlukan untuk navigasi itu sendiri (jangkar dan URL), dan unsur-unsur yang dibutuhkan bagi para pengguna untuk menyesuaikan diri.

  1. Merancang Perwakilan Link

      1. Dokumen pada antar muka haruslah dapat menyesuaikan dengan kebutuhan yang ada sepeti bagaimana link-link tersebut dapat terintgrasi dengan baik.

  2. Merancang Link Internal

    Link internal adalah link dimana semua link berhubungan satu sama lain. Dengan adanya hubungan link internal, antar muka pengguna dengan web akan lebih menyesuaikan.

  3. Navigasi dan Orientasi

    Tujuan adanya navigasi adalah membatasi stes kognitif yang antinya akan ditimbulkan oleh beberapa sebab diantaranya adalah penuhnya link internal yang ada.

  4. Terstruktur Dialog Untuk Kegiatan Kompleks

  5. Interaksi Dengan Teknologi dan Arsitektur

 

Functional Design

Rancangan fungsional juga harus mempertimbangkan aspek-aspek teknologi yang memiliki dampak yang kuat pada aplikasi Web dalam pengembangan. Kita harus mengamati commensurability kita berarti, tapi aplikasi kita harus diperluas, terukur, dan dipelihara, antara lain hal kesulitan khusus terlihat dalam interaksi komponen. Web aplikasi seperti tickers berita biasanya dapat melakukannya tanpa dukungan transaksi, sementara toko-toko online mungkin harus peta fase banyak produk, dari konfigurasi di atas memerintahkan untuk memperbaiki. Transaksi ini membutuhkan dan alur kerja dukungan dan integrasi database warisan dan sistem perangkat lunak [1].

1. Integration

Kita dapat mengintegrasikan sistem pada tiga tingkatan, yang harus ditafsirkan sebagai sub-tingkat dari desain fungsional: tingkat data, tingkat aplikasi, dan tingkat proses. Dalam integrasi pada tingkat data, kami memastikan bahwa data antara representasi berbagai aplikasi yang berubah dan disalin. Contohnya termasuk transformasi primitif langkah-langkah antara ekspor data dari satu aplikasi dan mengimpor data ke dalam aplikasi lain, atau penggunaan JDBC untuk menghubungkan database.Pendekatan ini tidak melibatkan aplikasi sendiri,
dan tidak membiarkan kita memvalidasi data. Dalam integrasi pada level aplikasi (juga disebut tingkat objek), interaksi yang terjadi lebih dari API, yang berarti bahwa waktu dan semantik erat disisipkan. Namun, banyak rincian tergantung pada middleware digunakan untuk kopling, masalah ini akan dibahas pada bagian berikutnya. Integrasi pada tingkat proses biasanya dilihat sebagai level tertinggi, karena model model bisnis secara independen dari infrastruktur yang digunakan.

2.Paradigma Komunikasi dan Middleware

Middleware telah disebutkan di atas sebagai teknologi untuk menghubungkan aplikasi. Pendekatan yang ada sangat berbeda dalam kompleksitas dan tujuan mereka, di mana kita secara singkat dijelaskan Antar-Proses Komunikasi (IPC), Remote Procedure Call (RPC), Event-Berbasis Komunikasi (EBC), Message-Oriented Middleware (MOM), dan didistribusikan pendekatan berorientasi objek.

3.Distributed Web Aplikasi Cross-perusahaan

Aspek distribusi telah mendapatkan peningkatan penting dalam implementasi software-sisi Aplikasi web. Sama seperti link ke halaman web remote umum hari ini, perangkat lunak yang akan dibagikan muncul dari akses menyatu untuk aplikasi Web terpencil di masa depan. Hal ini dapat ditafsirkan sebagai layanan komunikasi-untuk-service, dimana layanan istilah mencirikan fungsi yang ditawarkan melalui antarmuka yang didefinisikan dengan baik. Web services semakin dilaksanakan atas dasar XML. Sebagai contoh, eBay tidak hanya menyediakan satu sistem otentikasi tunggal, tetapi juga mendukung Microsoft Passport, dan Google memungkinkan Anda untuk mengintegrasikan fungsi pencarian mereka ke
aplikasi eksternal melalui SOAP [1].

Gambar 4. Contoh Protokol Stack Pada Wes Service

 

Daftar Pustaka

 

[1] Wiley,John dan Sons.Web Engineering :The Discipline of Systematic Development of Web Applications .Jerman.2006

[2] Janner Simarmata (2010). Rekayasa Web. Penerbit Andi



 

Gambar 1. Teknoloogi Pengembangan Interface Utama

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s