DESIGNING EFFECTIVE INPUT
SYSTEM ANALYSIS AND DESIGN By: Group 1
Finda Prisilla
1410531007
Rika Yunelza
1410532035
Atmiati
1410531067
Anggri Perdana Putra
1010533064
ACCOUNTING PROGRAM ECONOMY FACULTY ANDALAS UNIVESITY PADANG 2016
DESIGNING EFFECTIVE INPUT A. MERANCANG FORM YANG BAIK
Meskipun spesialis form local mungkin tersedai, analyst harus mampu membuat form yang lengkap dan berguna. Namun juga penting untuk bisa mengenali bentuk yang buruk, bertumpuk-tumpuk atau form tidak berguna yang menyia-nyiakan sumber daya organisasi dan harus dihilangkan.Beberapa jenis analyst seperti analisis aliran kerja, memusatkan perhatian pada bagaimana kerja didalam organisasi. Form adalah perangkat penting untnuk mengendalikan aliran kerja. Menurut definisi ada kertas cadangan atau duplikasi yang menghendaki orang untuk mengisi tanggapan dalam suatu cara yang baku. Form mendapatkan dan menangkap informasi dari anggota organisasi yang akan selalu menjadi input bagi computer. Seperti contoh form dalam ecommerce. Ada 4 pedoman untuk membuat form yang perlu diperhatikan : 1. Membuat form mudah diisi 2. Form memenuhi tujuan atau kegunaan 3. Desain form menjamin penyelesaian form yang tepat/akurat 4. Membuat form terlihat menarik 1. Membuat form mudah diisi a. Aliran Form Membuat aliran form dengan arus yang sesuai dapat menimbulkan waktu dan usaha yang dilakukan oleh pekerja dalam menyelesaikan form. Form harus mengalir dari kiri ke kanan dan dari atas kebawah, seperti kita membuat flowchart. b. Tujuh bagian sebuah formulir Teknik ini membuat orang mudah mengisi formulir secara benar dengan pengelompokkan informasi secara logis. Apapun tujuh bagian tersebut adalah
Judul
Identifikasi dan Akses
Petunjuk Menceritakan bagaimana form harus diisi dan di mana form tersebut harus dialihkan saat telah selesai.
Badan
Tanda Tangan dan Verifikasi
Total
Komentar
Bagian atas dari form terdiri dari tiga bagian yaitu Judul, Identifikasi dan Akses, dan Petunjuk. Bagian judul biasanya mencakup nama dan alamat bisnis. Identifikasi dan akses mencakup kode yang dapat digunakan untuk file laporan dan dapat diakses di kemudian hari. Bagian tengah dari form yaitu Badan. Merupakan bagian tengah dalam sebuah form yang disusun sekitar setengah dari form tersebut. Bagian dari form ini memerlukan detail dan pengembangan dari orang menyelesaikannya. Badan merupakan bagian dari form yang paling mungkin mengandung eksplisit, data variabel. Bagian bawah dari form terdiri dari tiga bagian yaitu Tanda Tangan dan Verifikasi, Total, dan Komentar. Membuat toal dan komentar merupakan cara yang logis untuk menutup seseorang dalam mengisi formulir.
Contoh form yang baik:
c. Captioning Merupakan teknik lain yang dapat memudahkan dalam mengisi sebuah form. Caption memberitahu seseorang untuk mengisi form, apa saja yang harus dimasukkan ke dalam kosong garis, ruang, atau kotak.
Below-Line Caption Keuntungan dari menempatkan caption di bawah garis adalah bahwa ada lebih banyak ruang pada baris sendiri untuk data. Kelemahannya adalah bahwa kadang-kadang tidak jelas yang sejalan dikaitkan dengan caption: baris dengan caption dibawah garis. Line Caption Menempatkan caption pada garis yang sama atau di bawah garis. Boxed Caption Menyediakan sebuah kotak untuk data sebagai pengganti sebuah garis. Kotak pada form membantu orang memasukkan data di tempat yang benar, dan memudahkan membaca form bagi penerima form. Vertical Check Off
Pilihan daftar atau pilihan alternatif yang tersusun secara vertical
Horizontal Check Off Pilihan daftar atau pilihan alternatif yang tersusun secara horizontal. Table Caption Memberikan detail dalam sebuah form.
2. Form memenuhi tujuan atau kegunaan Form dibuat untuk melayani satu atau lebih tujuan dalam recording, pengolahan, penyimpanan, dan pengambilan informasi untuk bisnis. Kadang-kadang hal ini diinginkan untuk memberikan informasi yang berbeda untuk departemen yang berbeda atau pengguna tetapi masih berbagi beberapa informasi dasar. Situasi ini menggunakan form khusus. Form-form yang khusus tersebut bisa juga berarti form-form yang dipersiapkan oleh seorang dealer/pedagang peralatan tulis kantor (stationery) 3. Desain form menjamin penyelesaian form yang tepat atau akurat Tingkat kesalahan biasanya terkait dengan pengumpulan data yang akan turun tajam ketika mendesain form dengan akurat. Desain penting untuk memastikan bahwa orangorang melakukan hal yang benar pada form ketika digunakan.
4. Membuat form terlihat menarik Meskipun membuat form agar terlihat menarik merupakan hal yang terakhir yang harus diperhatikan, tetapi ini tidak mengurangi kepentingannya. Agar lebih menarik, form harusnya terlihat teratur, rapi, dan bersih. Dan memperoleh informasi menurut urutan yang diharapkan. Menggunakan jenis font yang berbeda dalam bentuk yang sama dapat membantu membuatnya menarik bagi pengguna untuk mengisi form. Memisahkan kategori dan subkategori dengan garis tebal dan tipis juga dapat menarik dalam mengisi form.Jenis font dan ketebalan garis adalah elemen desain yang berguna untuk menangkap perhatian dan membuat orang merasa aman bahwa mereka mengisi formulir dengan benar.
Mengontrol Form Bisnis Mengontrol form bisnis merupakan tugas penting. Bisnis sering memiliki spesialis form yang mengendalikan form, tapi kadang-kadang pekerjaan ini jatuh ke analis sistem, yang menyiapkan dan mengimplementasikan pengendalian form. Tugas dasar mengendalikan form adalah memastikan bahwa setiap form digunakan untuk tujuan spesifik seperti membantu para pekerja menyelesaikan tugas-tugas mereka dan tujuan spesifiknya adalah mengintegral fungsi organisasi, mencegah duplikasi informasi yang dikumpulkan dan dari form yang dikumpulkan itu, merancang bentuk yang efektif, memutuskan bagaimana untuk mereproduksi form yang ekonomis, dan membangun prosedur agar membuat formdengan biaya yang rendah.
B. GOOD DISPLAY AND WEB FORMS DESIGN
Bentuk desain tampilan yang baik ialah dengan mengalihakan dari desain tampilan biasa kepada desain tampilan yang berbasis web dan halaman web. Seorang analis sistem harus selalu mengutamakan kepentingan dan peranan pengguna(user) selama perancangan desain tampilan. Penganalis sistem berusaha untuk mewujudkan kualitas yang unik daripada menampilkan desain tampilan dengan konvensi dalam bentuk kertas.Salah satu perubahan besar adalah dengan kehadiran konstan kursor pada layar, yang berorientasi pengguna untuk posisi entri data saat ini. Dan data tersebut yang dimasukkan pada layar, kursor bergerak satu karakter ke depan, menunjuk jalan. Perubahan utama lainnya yang terjadi adalah dalam bentuk elektronik, Web, dan statis, bahwa desainer dapat mencakup pengguna konteks-sensitif bantuan dalam bentuk pengisian elektronik. Praktek ini dapat mengurangi kebutuhan untuk petunjuk yang ditampilkan untuk setiap baris, sehingga mengurangi kekacauan bentuk dan pemotongan di atas yang disebut dengan Technical Support.Menggunakan pendekatan berbasis Web juga memungkinkan desainer untuk memanfaatkan hyperlink, sehingga memastikan bahwa bentuk-bentuk diisi dengan benar dengan menyediakan pengguna dengan contoh-co.ntoh hyperlink yang benar. Seperti yang sudah dibahas pada bab sebelumnya dalam hal membuat desain output yang efektif ada empat pedoman. Empat pedoman penting dalam membuat tampilan desain adalah sebagai berikut: 1. Menetapkan tampilan agar sederhana. 2. Menjaga presentasi tampilan tetap konsisten. 3. Memfasilitasi pergerakan pengguna antara tampilan layar dan halaman. 4. Membuat tampilan yang menarik dan menyenangkan. Empat pedoman di atas disajikan dalam rangka untuk membantu pencapaian tujuan desain masukan secara keseluruhan yaitu efektivitas, akurasi, kemudahan penggunaan, kesederhanaan, konsistensi, dan daya tarik(atraktif). Berikut ini pengembangan dari setiap pedoman di atas: -
Menjaga Simple Display.
Pedoman pertama untuk desain tampilan yang baik adalah untuk menjaga tampilan sederhana.Layar harus menunjukkan hanya itu yang diperlukan untuk tindakan tertentu yang dilakukan.Untuk pengguna sesekali, 50 persen dari area tampilan harus berisi informasi yang berguna. Tiga bagian layar (outpit display): 1. Heading, Bagian atas layar fitur "heading". Heading berisi judul software dan membuka file, pull down menu, dan ikon yang melakukan tugas-tugas tertentu. 2. Body, Bagian tengah disebut "body" dari layar. tubuh dapat digunakan untuk entri data dan diselenggarakan dari kiri ke kanan dan atas ke bawah, karena orang-orang di budaya Barat memindahkan mata mereka pada halaman dengan cara ini. Keterangan dan petunjuk harus disediakan di bagian ini untuk membantu pengguna memasukkan data yang bersangkutan di
tempat yang tepat. Konteks-sensitif bantuan juga bisa dibuat tersedia dengan memiliki pengguna mengklik tombol kanan mouse di bagian tubuh layar. 3. Comments and Instructions, Bagian ketiga dari layar adalah "komentar dan petunjuk" dari layar. Bagian ini dapat menampilkan menu singkat perintah yang mengingatkan pengguna dasar seperti bagaimana mengubah halaman atau fungsi, menyimpan file, atau mengakhiri entri. Pencantuman dasar tersebut dapat membuat pengguna berpengalaman merasa jauh lebih aman tentang kemampuan mereka untuk menyelesaikan tugas. Cara lain untuk menjaga tampilan sederhana adalah dengan menggunakan bantuan konteks-sensitif, rollover tombol yang mengungkapkan informasi lebih lanjut, dan jendela pop-up lainnya. Pengguna dapat meminimalkan atau memaksimalkan ukuran jendela yang diperlukan. Dengan cara ini, pengguna mulai dengan sederhana, tampilan yang dirancang dengan baik bahwa mereka dapat menyesuaikan dan kontrol melalui penggunaan beberapa jendela. Hyperlink pada formulir berbasis web fill-in melayani tujuan yang sama. -
Menjaga Display Konsisten
Pedoman kedua untuk desain tampilan yang baik untuk menjaga tampilan yang konsisten. Jika pengguna mengerjakan dari forms kertas, maka tampilan/display harus mengikuti apa yang ditampilkan di atas kertas. Tampilan dapat disimpan konsisten dengan menempatkan informasi di daerah yang sama setiap kali tampilan baru diakses. Juga informasi yang secara logis milik bersama harus konsisten dikelompokkan bersama. Contoh: jika Nama dan alamat pa, bukan nama dan kode pos. Meskipun tampilan harus memiliki langkah secara alami dari satu daerah ke daerah lain, namun informasi tidak boleh tumpang tindih dari satu kelompok ke kelompok lain. Karena kita tidak ingin nama dan alamat di dalam satu area dan kode pos di dalam area lain -
Memfasilitasi Pergerakan
Pedoman ketiga untuk desain tampilan yang baik adalah untuk membuatnya mudah untuk berpindah dari satu halaman ke lain. "Tiga-klik" aturan mengatakan bahwa pengguna harus bisa sampai ke halaman yang mereka butuhkan dalam waktu tiga mouse atau keyboard klik. Forms berbasis web memfasilitasi gerakan dengan menggunakan link hiper ke halaman web lain yang relevan. Metode lain yang umum untuk gerakan adalah memiliki pengguna merasa seolah-olah mereka secara fisik pindah ke halaman baru. Ilusi ini gerakan fisik di antara layar dapat diperoleh dengan menggulir menggunakan panah, konteks-sensitif jendela pop-up, atau dialog di layar -
Merancang Tampilan Menarik dan Menyenangkan
Pedoman keempat untuk desain tampilan yang baik adalah untuk menciptakan tampilan yang menarik bagi pengguna. Jika pengguna menemukan display menarik, mereka cenderung lebih produktif, perlu kurang pengawasan, dan membuat lebih sedikit kesalahan. Menampilkan harus menarik pengguna ke mereka dan menahan perhatian mereka. Dengan munculnya GUI, adalah mungkin untuk membuat tampilan masukan yang sangat menarik. Dengan menggunakan warna atau kotak berbayang dan menciptakan kotak tiga dimensi dan panah, Anda dapat membuat bentuk-bentuk user friendly dan menyenangkan untuk digunakan Ketika merenungkan penggunaan gaya font yang berbeda dan ukuran, tanyakan pada diri Anda jika mereka benar-benar-asumsi
ist pengguna dalam memahami dan menyetujui layar. Jika mereka menarik perhatian yang tidak semestinya untuk seni desain tampilan atau jika mereka melayani sebagai pengalih perhatian, meninggalkan mereka keluar.Sadarilah bahwa tidak semua halaman Web yang dilihat identik dengan browser yang berbeda.Menguji bentuk prototipe Anda dengan berbagai negara combi- untuk melihat apakah pengguna menyatakan preferensi untuk kombinasi atau apakah mereka menyedihkan untuk sebagian besar pengguna. Untuk huruf Web menggunakan Verdana atau Arial Menggunakan Ikon pada layar Desain Ikon yang bergambar, representasi layar melambangkan tindakan komputer yang pengguna dapat memilih menggunakan mouse, keyboard, lightpen, layar sentuh, atau joystick.Ikon melayani fungsi yang mirip dengan kata-kata dan dapat menggantikan kata-kata tersebut di banyak menu, karena maknanya lebih cepat dipahami daripada kata-kata.Perangkat mobile seperti iPhone Apple dan iPod telah mempopulerkan penggunaan ikon pada layar sentuh dan membuat ini antarmuka akrab bagi banyak bisnis dan pengguna lainnya. Contoh: banyak ikon yang dapat kita temukan dibawah ini,seperti: tanda X dalam kotak merah (makna: keluar dari file), tanda panah back memutar ke kiri (makna: undo perintah yang terakhir kita lakukan), dan lain sebagainya.
Graphical User Interface Design Sebuah antarmuka pengguna grafis (GUI, diucapkan "goo e") adalah cara yang pengguna antarmuka dengan sistem operasi Windows dan Macintosh. Hal ini juga disebut sebagai antarmuka point-and-klik. Pengguna dapat menggunakan mouse untuk mengklik pada objek dan drag ke posisi. antarmuka pengguna grafis. Tombol, daftar dan drop-down box daftar, slider dan tombol spin, kotak dialog kontrol tab, dan peta usia im. Gambar 12.4 adalah tampilan masukan Microsoft Access menampilkan berbagai sebuah GUI mengontrol
Text Boxes. Sebuah persegi panjang merupakan kotak untuk teks dan digunakan untuk menguraikan entri data dan display fields. Kita harus memastikan bahwa kotak teks sudah cukup besar untuk menampung semua karakter yang harus dimasukkan. Setiap kotak teks harus memiliki keterangan ke kiri, mengidentifikasi apa yang harus dimasukkan atau apa yang ditampilkan di dalam kotak. Dalam Microsoft Access, data karakter selaras di sebelah kiri, dan data numerik yang selaras di sebelah kanan.
Check Boxes. Dalam contoh GUI Control, sebuah kotak centang digunakan untuk menunjukkan custome baru Periksa kotak mengandung X atau kosong, sesuai dengan apakah atau tidak pengguna memilih opsi; mereka digunakan untuk pilihan eksklusif di mana satu atau lebih opsi dapat diperiksa. Sebuah notasi alternatif adalah dengan menggunakan tombol persegi dengan tanda centang untuk menunjukkan bahwa pilihan telah dipilih. Perhatikan bahwa kotak centang teks, atau label, biasanya ditempatkan di sebelah kanan kotak. Jika ada lebih dari satu kotak centang, label harus memiliki beberapa untuk mereka, baik abjad atau dengan item yang paling umum diperiksa muncul pertama dalam daftar.
Option Buttons.Sebuah lingkaran, yang disebut tombol pilihan atau tombol radio, digunakan untuk memilih eksklusif Hanya satu dari beberapa pilihan dapat dipilih. Dengan cara ini Anda dapat membuat jelas kepada pengguna bahwa mereka harus memutuskan antara opsi. Pilihan yang lagi tercantum di sebelah kanan tombol, biasanya dalam beberapa urutan.Jika ada pilihan umum yang dipilih, biasanya dipilih sebagai default saat halaman pertama menampilkan.Seringkali ada persegi panjang, yang disebut kelompok pilihan, sekitar tombol radio. Jika ada lebih dari enam tombol pilihan, pertimbangkan untuk menggunakan kotak daftar atau kotak daftar
List and Drop-down List Boxes.Kotak daftar menampilkan beberapa pilihan yang dapat dipilih dengan mouse. Sebuah kotak daftar drop-down digunakan ketika ada sedikit ruang yang tersedia pada halaman. Sebuah persegi panjang tunggal dengan panah menunjuk ke arah garis yang terletak di sisi kanan persegi panjang. Memilih panah ini menyebabkan kotak daftar yang akan ditampilkan. Setelah pengguna membuat pilihan, itu ditampilkan dalam pemilihan persegi panjang drop-down dan kotak daftar menghilang.Jika ada pilihan umum yang dipilih, biasanya ditampilkan dalam daftar drop-down secara default.
Tab Control Dialog Boxes. Kotak dialog kontrol Tab adalah bagian lain dari antarmuka pengguna grafis dan cara lain untuk mendapatkan pengguna terorganisir dan menjadi bahan sistem efisien. Dalam merancang kotak kontrol tab, membuat tab terpisah untuk setiap fitur yang unik, menempatkan tab yang
paling umum digunakan di depan dan menampilkan mereka pertama, dan termasuk tombol untuk OK, Cancel, dan Help. Slider and Spin Buttons.Slider dan tombol berputar digunakan untuk mengubah data yang memiliki berbagai kontinu nilai, memberikan pengguna kontrol yang lebih ketika memilih nilai-nilai. Bergerak slider dalam satu arah atau yang lain (baik left/right atau up/down) bertambah atau berkurang nilai-nilai.
Gambar berikut mengilustrasikan penggunaan slider untuk mengubah jumlah merah, hijau, dan biru ketika memilih warna baru, tombol spin juga digunakan untuk mengubah nilai terus menerus dan akan ditampilkan di sebelah kanan slider.
Image Maps.Bidang gambar peta yang digunakan untuk memilih nilai-nilai dalam sebuah gambar.pengguna mengklik pada titik dalam sebuah gambar dan x- comesponding dan y-koordinat dikirim ke program. peta gambar yang digunakan saat membuat halaman Web yang berisi peta dengan petunjuk untuk mengklik pada area tertentu untuk melihat peta rinci dari wilayah tersebut. Text Areas.Sebuah area teks digunakan untuk memasukkan jumlah yang lebih besar dari teks. Daerah ini termasuk sejumlah baris, kolom, dan scroll bar yang memungkinkan pengguna untuk memasukkan dan tampilan teks lebih besar dari ukuran area kotak. Ada dua cara untuk menangani teks ini. Salah satunya adalah untuk menghindari penggunaan kata membungkus, memaksa pengguna untuk menekan tombol Enter untuk pindah ke baris berikutnya; teks akan gulir ke kanan jika melebihi lebar dari text area. Pilihan lainnya adalah untuk memungkinkan kotak bungkus kata. Messsage Boxes.Kotak pesan digunakan untuk memperingatkan pengguna dan memberikan pesan umpan balik di kotak dialog, yang sering tumpang tindih layar.kotak pesan ini memiliki format yang berbeda. Masing-masing harus muncul di jendela persegi panjang dan harus jelas menguraikan pesan sehingga pengguna tahu persis apa yang terjadi dan tindakan apa yang mungkin Command Buttons.tombol perintah melakukan tindakan ketika pengguna memilih dengan mouse. Hitung Total, Tambah Order, dan OK merupakan contoh. Teks ini berpusat di dalam tombol, yang
memiliki bentuk persegi panjang.Jika ada aksi default, teks dikelilingi dengan garis putus-putus.Tombol ini juga dapat teduh untuk menunjukkan bahwa itu adalah default.Pengguna tekan tombol Enter untuk memilih tombol standar.
KONTROL BENTUK DAN NILAI Setiap kontrol termasuk dalam antarmuka GUI harus memiliki beberapa cara untuk menyimpan data yang terkait dengan kontrol. Pada halaman Web ini dilakukan dengan menggunakan nama dan nilai pasangan yang ditransmisikan ke server atau email dikirim bersama dengan formulir. Nama ini didefinisikan pada formulir halaman Web dan perangkat lunak server harus mengakui nama untuk memahami apa yang harus dilakukan dengan nilai atau data yang dikirim dengan bentuk Web. Bagaimana nilai diperoleh berbeda untuk setiap kontrol formulir Web.Dalam kotak teks atau area teks, yang Nilai terdiri dari karakter mengetik ke dalam kotak.Dalam tombol radio dan kotak cek, teks yang menampilkan kanan masing-masing tombol radio atau cek kotak adalah untuk digunakan manusia saja.nilai didefinisikan dalam bentuk Web dan ditularkan ketika bentuk tersebut dikirim. Jika data ini digunakan untuk memperbarui database, nilai-nilai seringkali kode yang dikirim dan kemudian disimpan di server, dan analis harus memutuskan apa nilai-nilai yang sesuai ketika masing-masing tombol radio atau kotak centang diklik. Nilai harus memutuskan untuk masing-masing pilihan daftar drop-down dan, ketika opsi yang dipilih, nilai yang dipilih dikirim dengan formulir. nilai bentuk juga mungkin digunakan dalam perhitungan yang dilakukan dengan menggunakan JavaScript pada browser. Ini dapat digunakan untuk mengalikan, menambahkan, dan membuat keputusan.
GAMBAR 12.6 Sebuah form input berbasis web bagi pengguna untuk m endaftar pelayaran.
TIPE – TIPE KONTROL : 1.FIELDS TERSEMBUNYI 2.GRAFIK ACARA RESPON 3.HALAMAN WEB DINAMIS 4.TIGA-DIMENSI HALAMAN WEB 1. FIELDS TERSEMBUNYI Tipe lain dari kontrol ditemukan pada bentuk Web adalah bidang tersembunyi. Ini tidak terlihat oleh penonton, tidak mengambil ruang apapun pada halaman Web, dan hanya dapat berisi nama dan nilai. bidang tersembunyi sering digunakan untuk menyimpan nilai-nilai yang dikirim dari satu bentuk Web ke server. biasanya perlu disertakan pada bentuk kedua ketika beberapa bentuk yang diperlukan untuk menangkap semua data transaksi. Kadang-kadang mereka digunakan untuk menyimpan informasi tentang jenis browser yang digunakan, penampil sistem operasi, dan
sebagainya. Kadang-kadang field tersembunyi akan berisi bidang kunci yang digunakan untuk menemukan record untuk pelanggan atau sesi browsing. 2. Charts acara-Response Ketika ada interaksi yang rumit pada formulir Web (atau bentuk GUI lainnya), bagan event response dapat digunakan untuk daftar berbagai peristiwa yang dapat terjadi.grafik acara-respon mungkin digunakan pada tingkat tinggi untuk model acara bisnis dan tanggapan, tetapi Peristiwa yang terjadi pada formulir Web atau tampilan lainnya biasanya terbatas pada tindakan pengguna. peristiwa ini mungkin mengklik sebuah tombol, mengubah nilai, fokus lapangan (memindahkan kursor di dalam lapangan atau tombol radio, kotak cek, atau kontrol lainnya), kabur lapangan (pengguna menggerakkan kursor keluar lapangan), memuat halaman Web, mendeteksi penekanan tombol, dan banyak acara lainnya. Daftar respon bagaimana halaman Web harus bereaksi ketika peristiwa itu terjadi.Peristiwa untuk objek tertentu, seperti sebagai tombol, kolom teks, halaman web secara keseluruhan, dan sebagainya.Kadang-kadang grafik event-respon dapat
digunakan untuk mengeksplorasi perbaikan ke halaman Web.
Gambar 12.7 adalah situs Web yang digunakan untuk memperkirakan biaya tinggal di Azure Isle Resort.Pengguna dapat memasukkan jumlah orang, mengubah awal dan akhir tanggal, dan masukkan jumlah orang untuk berbagai kegiatan ekstra, seperti scuba diving atau golf.
Grafik event-respon ditunjukkan pada Gambar 12.8.Perhatikan bahwa mungkin ada sejumlah acara untuk setiap kontrol formulir Web. Karena pengguna dapat melakukan sejumlah tindakan dalam urutan apapun, yang grafik event-respon berguna untuk menunjukkan apa yang harus terjadi. Misalnya, pengguna bisa mengklik tombol menghitung pertama, mengubah tanggal mulai dan berakhir, atau mengubah jumlah orang.Itu grafik event-respon ini juga berguna untuk membangun bentuk Web yang memerlukan tindakan minimal dari pengguna.Contoh dari ini adalah ketika pengguna mengubah bulan awal atau hari; bulan yang berakhir atau hari kemudian diubah untuk mencocokkan bulan mulai atau hari.tahun berubah ketika bulan lebih awal dari bulan berjalan, karena orang tidak bisa tinggal di resor sebelum hari ini di tahun yang sama.
3. HALAMAN WEB DINAMIS halaman Web dinamis mengubah diri mereka sendiri sebagai akibat dari tindakan pengguna. Mereka sering menggunakan JavaScript untuk memodifikasi beberapa bagian dari halaman Web atau gaya. Mengubah gambar ketika mouse bergerak di atasnya atau memutar gambar acak pada interval waktu tertentu adalah contoh umum dari halaman Web dinamis.Halaman Web dapat mendeteksi lebar jendela browser dan memodifikasi halaman yang sesuai. Menu yang memperluas ketika pengguna mengklik tanda tambah kecil di sebelah kiri menu atau ketika mouse bergerak ke menu adalah contoh lain dari halaman Web dinamis. Kekuatan halaman Web dinamis telah sangat berkembang dalam browser Web baru-baru ini.Oleh menggunakan JavaScript, bentuk Web dapat berubah atau mengubah diri untuk menambahkan kolom baru atau menghapus dua bidang, atau atribut perubahan bidang, seperti panjang lapangan atau tombol radio berubah menjadi kotak centang. Hal ini membuat halaman Web lebih responsif terhadap tindakan pengguna dan sering akan menghilang dan perlu memuat halaman web baru berdasarkan pilihan pengguna. analis harus berpikir tentang informasi yang akan masuk akal untuk situs Web penampil. Misalnya, menempatkan daftar pilihan negara pada halaman Web sebelum elemen alamat lainnya akan memungkinkan pengguna untuk mengubah daftar negara dan kemudian mengubah keterangan untuk mencerminkan negara. Jika orang yang dipilih Amerika Serikat dari daftar drop-down, keterangan akan mengatakan 'Negara' dan 'Kode Pos. "Jika negara itu Kanada, keterangan akan mengatakan' Provinsi 'dan' Kode Pos." Jika Jepang, 'Prefecture' dan 'Mail Code.' Contoh halaman web dinamis
4. TIGA-DIMENSI HALAMAN WEB halaman Web dinamis juga dapat digunakan untuk menampilkan informasi sementara, seperti blok bantuan informasi, kalender dengan tanggal digunakan untuk membantu bidang tanggal masuk, kode bandara, dan Informasi lainnya. Informasi ini dapat disimpan dengan menggunakan serangkaian lapisan ditumpuk (menggunakan Cascading gaya properti z-index) dalam desain halaman Web, masing-masing di atas yang lain. Web utama Halaman adalah bidang dasar, lapisan standar halaman web yang menampilkan atau memperoleh informasi, sementara yang lain di bawah halaman tidak terlihat. Ketika bantuan diminta atau di klik pengguna di bidang tanggal, lapisan ini baik pindah ke atas dan menjadi terlihat atau dihasilkan oleh kode JavaScript dan muncul. Posisi lapisan ditentukan oleh desainer atau analis, seperti kalender muncul di sisi kanan dari field tanggal. Ketika tanggal dipilih, hubungan erat diklik, atau pengguna mengklik luar kalender, lapisan kemudian bergerak di bawah permukaan halaman Web atau dihapus.analis harus menentukan apakah masuk akal untuk memasukkan lapisan, dan sering memeriksa setiap
bidang pada halaman Web untuk menentukan apakah tambahan informasi akan membantu untuk memastikan informasi yang akurat dan komunikasi yang baik dengan pengguna. analis harus menentukan berikut: 1. Bagaimana lapisan dibangun? Apakah itu dibuat menggunakan kode JavaScript, seperti kalender, atau informasi tambahan yang diperlukan untuk membangun lapisan?Jika diperlukan informasi tambahan, dimana data terletak dan bagaimana seharusnya itu diperoleh?Idealnya informasi ini diperoleh hanya dari satu tabel database pada server menggunakan teknik Ajax. 2. Apa peristiwa menyebabkan lapisan yang akan dibuat? Ini termasuk pengguna mengklik atau tabbing menjadi bidang, mengklik link, atau menghitung jumlah keystrokes masuk ke lapangan. Sebuah contoh jaringan hotel dengan banyak lokasi. Untuk memasukkan semua lokasi dalam daftar drop-down akan membuat daftar terlalu panjang. Ketika pengguna memasukkan tiga karakter, blok permukaan listing hotel dimulai dengan tiga huruf, termasuk negara, kota, negara bagian atau provinsi, dan Informasi lainnya. Jika acara ini mendeteksi hanya dua huruf, daftar mungkin terlalu besar untuk blok display. 3. Apa peristiwa menghapus lapisan, seperti tombol tutup, klik tanggal, klik di luar wilayah, atau memilih sebuah hotel dari daftar? 4. Dimana blok muncul harus ditempatkan? Biasanya di sebelah kolom yang menciptakan blok, di x dan y-koordinat. 5. Berapa besar seharusnya blok, harus diukur dalam pixel? Jika informasi yang terlalu besar untuk blok, seperti daftar hotel, analis harus memutuskan bagaimana menangani tambahan informasi. Pilihan termasuk menambahkan scroll bar atau posisi link di bagian bawah ke halaman berikutnya informasi. 6. Apa yang harus menjadi kawasan format atribut, seperti warna dan pembatasan? Jika ada serangkaian link, meninjau penampilan mereka dengan pengguna.Meminta pengguna jika mereka ingin warna dan mengubah dengan menggerakkan mouse di atas setiap baris. 7. Apa yang akann terjadi ketika sebuah opsi di pilih ?Dalam kasus kalender reservasi, ketika tanggal diklik, tanggal ditempatkan di tanggal awal. Jika sebuah hotel yang dipilih,di kota, informasi negara atau provinsi, dan negara, bersama dengan link ke hotel, harus mengisi kolom
formulir Web. Menggunakan lapisan adalah cara yang efektif untuk membangun situs Web karena tidak memerlukan halaman pop-up (Yang mungkin diblokir oleh perangkat lunak keamanan internet). Selain itu, halaman Web yang baru tidak harus memuat, dan, karena informasi yang terkandung dalam lapisan, tidak mengambil ruang apapun pada halaman Web utama. Analis harus memutuskan kapan penggunaan halaman Web dinamis sesuai.Jika data berubah ketika bagian lain dari perubahan halaman Web (seperti mengklik tombol radio atau memilih item dari daftar drop-down), mungkin kebijakan yang baik untuk merancang halaman Web sebagai bentuk dinamis.Namun, jika beberapa bagian dari bentuk Web yang tidak aman dan bagian lain membutuhkan enkripsi, mungkin terbaik untuk tidak menggunakan bentuk yang dinamis.Sebuah contoh yang baik dari bentuk yang memodifikasi sendiri dapat ditemukan di Expedia.com (www.expedia.com). Mengklik tombol radio untuk penerbangan, hotel, mobil, atau pelayaran menyebabkan formulir untuk mengubah untuk mengumpulkan data yang sesuai untuk pemesanan penerbangan, hotel, dan sebagainya. halaman Web dinamis memiliki keuntungan dari memodifikasi sendiri dengan cepat, dengan interupsi lebih sedikit untuk mengirim dan menerima data dari server. Namun, ada beberapa kelemahan ketika membuat halaman Web dinamis. Salah satunya adalah bahwa mereka tidak akan bekerja jika JavaScript dimatikan. Analis harus memutuskan apa yang harus dilakukan dalam situasi ini. Jika orang tersebut harus menggunakan situs Web (seperti dalam lingkungan intranet perusahaan, dalam sebuah situs yang digunakan untuk memperoleh pinjaman mahasiswa, atau dalam kasus pemerintah pengolahan atau transaksi lainnya), halaman Web dapat menyatakan dengan jelas bahwa itu tidak akan berfungsi jika JavaScript dimatikan dan kemudian mengarahkan pengguna tentang cara untuk menyalakannya. Sebagian besar situs commerce Web tidak akan memerlukan JavaScript harus dinyalakan dan akan memiliki situs Web alternatif bagi pelanggan. Kelemahan kedua saat menggunakan halaman Web dinamis adalah bahwa mereka mungkin tidak sesuai dengan Amerika Disabilities Act.(Untuk lebih lanjut tentang aksesibilitas Web untuk semua pengguna, silakan lihat Bab 14 pada merancang interaksi manusia-komputer.)
SEJARAH AJAX
Tekhnik ajax sebenarnya sudah ada sejak di kembangkanya DHTML(dynamic html),ajax mulai populer setelah google berhasil membuktikan tekhnik pemrograman ini dapat diandalkan, Ajax mulai trend atau popular digunakan pada tahun 2005, yang merupakan
pengembangan dari teknologi iFrame Elemen pada browser Internet Explorer (IE) yang dibuat oleh Microsoft. Kemudian Microsoft mengembangkan teknologi Remote Script pada tahun 2008, kemudian dilanjutkan dengan pengembangan ActiveX di IE versi 5.0 sebagai pengganti Java Applet pada tahun 1999. Kemudian Mozilla dan Safari mengikuti teknologi ini. Pada akhirnya World Wide Web Consorsium (W3C) memutuskan pada tanggal 5 April 2006 menjadi standart pengembangan web. Asal Mula Bahasa Pemrograman AJAX .
AJAX memiliki kepanjangan Asynchronous Javascript And XML merupakan suatu teknik baru dalam dunia web tapi bukan merupakan bahasa pemrograman yang baru. Dikembangkan sekitar 2-3 tahun yang lalu, AJAX mulai dilirik oleh para web desainer dan programmer. Dengan adanya AJAX, akses data ke server yang dikirim melalui client via web dapat lebih cepat daripada mekanisme biasa. Hal ini dikarenakan AJAX tidak perlu melakukan proses loading page (refresh page) atau pindah ke page yang lain. AJAX dapat diintegrasikan dengan server side programming seperti PHP, ASP, JSP dll. Perhatikan mekanisme proses AJAX menggunakan PHP berikut ini. Pada mekanisme di atas, proses berawal dari web client. Web client merequest sebuah halaman PHP ke server melalui Javascript. Selanjutnya server akan merespon dan menjalankan script PHP. Script PHP akan menghasilkan respon dalam bentuk XML dan data XML tersebut akan dikirim kembali ke web client untuk diolah oleh Javascript. Hasil olahan javascript tersebut akhirnya akan ditampilkan di web client sebagai output tanpa harus merefresh halaman web. Pada mekanisme biasa, respon yang dihasilkan oleh server berupa HTML yang mengakibatkan halaman web akan merefresh tampilan. Dilihat dari sisi efisiensi, hal ini tentu kurang sekali. Sedangkan kekurangan AJAX dibandingkan mekanisme biasa adalah memiliki tingkat kesukaran pemrograman yang lebih tinggi, karena programmer harus menguasai 4 hal
yaitu HTML-(XHTML), Javascript, XML dan juga server side programming seperti PHP dan lain sebagainya. Pengertian AJAX
Ajax (asynchronous javascript dan XML) atau AJAX, adalah sebuah teknik interaktif yang digunakan untuk membuat aplikasi web yang memanfaatkan teknologi asynchronous. Dengan Ajax, aplikasi web dapat mengambil data dari server secara asynchronous di belakang tanpa perlu refresh halaman atau postback. Data diambil menggunakan XMLHttpRequest atau untuk mengakses prosedur atau fungsi yang ada diserver menggunakan javascript dan XML. Ajax merupakan kombinasi dari:
DOM yang diakses dengan client side scripting language, seperti VBScript dan implementasi ECMAScript sepertiJavaScript dan JScript, untuk menampilkan secara dinamis dan berinteraksi dengan informasi yang ditampilkan.
Objek XMLHTTP dari Microsoft atau XMLHttpRequest yang
lebih
umum
di
implementasikan pada beberapa browser. Objek ini berguna sebagai kendaraan pertukaran data asinkronus dengan web server . Pada beberapa framework AJAX, element HTML IFrame lebih dipilih daripada XMLHTTP atau XMLHttpRequest untuk melakukan pertukaran data dengan web server .
XML umumnya digunakan sebagai dokumen transfer , walaupun format lain juga memungkinkan, seperti HTML, plain text . XML dianjurkan dalam pemakaian teknik AJaX karena kemudahan akses penanganannya dengan memakaiDOM.
JSON dapat menjadi pilihan alternatif sebagai dokumen transfer , mengingat JSON adalah JavaScript itu sendiri sehingga penanganannya lebih mudah
Seperti halnya DHTML, LAMP, atau SPA, Ajax bukanlah teknologi spesifik, melainkan merupakan
gabungan
dari
teknologi
yang
dipakai
bersamaan.
Bahkan,
turunan/komposit yang berdasarkan Ajax, seperti AFLAX sudah mulai bermunculan. Problem aplikasi web yang dapat di selesaikan dengan ajax antara lain : Reaload satu halaman penuh Validasi data
teknologi
Lookup tabel Lookup tabel bertingkat
Ajax di internet
Di internet sudah ada beberapa web yang menggunakan bahsa pemrograman ajax diantarnya : Google maps Gmail atau google mail Yahoo! Mail versi terbaru Blinksale Kolaborasi – global mosaic
Dampak ajax
Adanya ajax membuat aplikasi berbasis web menjadi semakin andal kegagalan penyimpanan data akibat bandwith yang kecil menjadi berkurang karena perubahan sedikit demi sedikit dapat disimpan sesegera mungkin ke server, web dapat menyompan draft yang sedang dikerjakan oleh si pengembang web tanpa disadar i pengguna, kita tidak perlu khawatir jika pekerjaan kita tidak tersimpan karena didalam ajax word prosesor membuat web temporer sehingga pada saat aliran listrik mati dan kita belum menyimpan pekerjaan kita , maka saat kita menyalakan kembali komputer semua pekerjaan yang belum disimpan akan muncul kembali. Memperkenalkan Teknologi Asynchronous JavaScript and XML (Ajax)
Menggunakan teknologi JavaScript, halaman HTML asynchronously dapat melakukan panggilan ke server dari mana ia dimuat dan mengambil konten yang mungkin diformat sebagai dokumen XML, konten HTML, teks biasa, atau JavaScript Object Notation (JSON). Teknologi JavaScript kemudian dapat menggunakan konten tersebut untuk memperbarui atau memodifikasi Document Object Model (DOM) dari halaman HTML. Yang Asynchronous JavaScript Istilah Teknologi dan XML ( Ajax ) telah muncul baru-baru ini untuk menggambarkan model interaksi. Ajax bukanlah hal baru. Teknik-teknik ini telah tersedia untuk pengembang penargetan Internet Explorer pada platform Windows selama bertahun-tahun. Sampai saat ini, teknologi ini dikenal sebagai Remoting web atau remote scripting. Web developer juga telah menggunakan
kombinasi plug-in, applet Java, dan frame tersembunyi untuk meniru model interaksi selama beberapa waktu. Apa yang telah berubah baru-baru ini adalah dimasukkannya dukungan untuk XMLHttpRequest objek di runtimes JavaScript dari browser mainstream. Keajaiban yang sebenarnya adalah hasil dari teknologi JavaScript XMLHttpRequest object. Walaupun objek ini tidak ditentukan dalam spesifikasi teknologi JavaScript formal, semua browser utama saat ini mendukungnya. Perbedaan halus dengan teknologi JavaScript dan mendukung CSS di kalangan generasi sekarang browser seperti Mozilla Firefox, Internet Explorer, dan Safari dapat dikelola. JavaScript perpustakaan sepertiDojo , Prototype , dan Yahoo User Interface Perpustakaan telah muncul untuk mengisi di mana browser yang tidak dikelola dan untuk menyediakan model pemrograman standar. Dojo, misalnya, mengatur aksesibilitas, internasionalisasi, dan grafis lanjutan di browser - semua yang telah duri di sisi pengadopsi awal Ajax. Lebih update yakin terjadi saat diperlukan. Apa yang membuat klien Ajax berbasis unik adalah bahwa klien berisi logika kontrol khusus halaman tertanam sebagai teknologi JavaScript. Halaman yang berinteraksi dengan teknologi JavaScript berdasarkan kejadian seperti pemuatan dokumen, klik mouse, perubahan fokus, atau bahkan timer. interaksi Ajax memungkinkan untuk pemisahan yang jelas dari logika presentasi dari data. Sebuah halaman HTML dapat menarik potongan gigitan-ukuran yang akan ditampilkan. Ajax akan membutuhkan arsitektur server-side yang berbeda untuk mendukung model interaksi. Secara tradisional, sisi server aplikasi web telah berfokus pada menghasilkan dokumen HTML untuk setiap acara klien mengakibatkan panggilan ke server. Klien kemudian akan menyegarkan dan membuat kembali halaman HTML yang lengkap untuk setiap respon. aplikasi web Rich fokus pada klien mengambil sebuah dokumen HTML yang bertindak sebagai template atau wadah dimana untuk menyuntikkan konten, berdasarkan kejadian klien menggunakan XML data diambil dari komponen server-side. Beberapa menggunakan untuk interaksi Ajax adalah sebagai berikut:
Real-time data form validasi: Formulir data seperti user ID, nomor seri, kode pos, atau kupon kode-kode khusus bahkan yang memerlukan server-side validasi dapat divalidasi dalam bentuk sebelum pengguna menyerahkan formulir. Lihat Validasi Form Realtimeuntuk rincian
Autocompletion: Sebuah bagian tertentu dari data formulir seperti alamat email, nama, atau nama kota mungkin autocompleted sebagai jenis pengguna.
Load on demand: Berdasarkan peristiwa klien, halaman HTML dapat mengambil data lebih banyak di latar belakang, yang memungkinkan browser untuk memuat halaman dengan lebih cepat.
Kontrol Antarmuka Pengguna dan E fek Canggih: Kontrol seperti pohon, menu, tabel data, editor rich text, kalender, dan bar kemajuan memungkinkan untuk interaksi pengguna yang lebih baik dan interaksi dengan halaman HTML, umumnya tanpa membutuhkan pengguna untuk kembali halaman tersebut.
Refreshing data dan server push: HTML halaman mungkin polling data dari server untuk up-to-date data-seperti skor, harga saham, cuaca, atau-data aplikasi spesifik. Klien dapat menggunakan teknik Ajax untuk mendapatkan satu set data saat ini tanpa reload halaman penuh. Polling tidak cara yang paling efisien untuk memastikan bahwa data pada halaman yang paling lancar. Emerging teknik seperti Comet sedang dikembangkan untuk menyediakan server-side push benar melalui HTTP dengan menjaga koneksi persisten antara client dan server. Lihat entri
blog
di Komet
menggunakan
Grizzly untuk
lebih
lanjut
tentang
pengembangan push server dengan teknologi Java.
Partial submit: Sebuah halaman HTML bisa mengirimkan data formulir yang diperlukan tanpa memerlukan refresh halaman penuh.
Mashup: Sebuah halaman HTML dapat memperoleh data menggunakan sisi proxy server atau dengan termasuk skrip eksternal untuk mencampur data eksternal dengan's aplikasi atau Anda layanan data Anda. Sebagai contoh, Anda dapat mencampur isi atau data dari aplikasi pihak ketiga seperti Google Maps dengan aplikasi anda sendiri.
H alaman sebagai aplikasi: teknik Ajax dapat dibuat untuk membuat halaman aplikasi tunggal yang terlihat dan terasa seperti aplikasi desktop. Lihat artikel tentang penggunaan Ajax dan portlet untuk lebih lanjut tentang bagaimana Anda dapat menggunakan aplikasi portlet hari ini.
Meskipun tidak semua inklusif, daftar ini menunjukkan bahwa interaksi Ajax memungkinkan aplikasi web untuk melakukan lebih dari yang mereka lakukan di masa lalu.
