Beta Testing Membuat Background pada Adobe Photoshop Membuat Animasi pada Halaman Utama Membuat Peta lokasi

Gambar 2.43 Area Kerja Archicad 10 Printscreen Archicad 10. 1. Toolbox: Berisi objek yang akan digunakan. 2. Info Box: Berfungsi mengatur elemen dan material yang digunakan pada perancangan. 3. Lembar Kerja Archicad: Tempat di mana para perancang halaman maupun pemrogram mendesain objek. 4. Navigator Project Map: Berfungsi mengatur tampilan objek pada lembar kerja archicad.

2.26 Beta Testing

Sebuah tes beta adalah versi terbatas pada suatu produk dengan tujuan untuk menemukan bug sebelum versi final. Software pengujian sering disebut dengan alpha dan beta. Secara keseluruhan, tes alpha adalah tes internal untuk

1. Toolbox 2. Info box

3. Lembar Kerja Archicad

4. Navigator- Project Map

kesalahan, dan pengujian beta tes eksternal. Selama tahap alpha, produk ini terbuka bagi karyawan perusahaan termasuk teman dan keluarga. Selama versi beta, produk ini dibuka untuk sejumlah pelanggan. Kadang-kadang, pengujian beta disebut Open atau tertutup. Sebuah tes beta tertutup memiliki sejumlah tempat terbuka untuk pengujian, sedangkan beta terbuka memiliki jumlah poin yang tidak terbatas yaitu, siapa saja dapat bergabung atau jumlah yang sangat besar dalam kasus-kasus tempat terbuka untuk setiap orang Nations, 2010. 91

BAB III METODE PENELITIAN

Dalam melakukan penelitian, peneliti menggunakan dua metode penelitian yaitu, metode pengumpulan data dan metode pengembangan sistem. Metode- metode tersebut diuraikan pada bab ini.

3.1 Metode Pengumpulan Data

Pengumpulan atau koleksi data merupakan tahapan dalam proses riset yang penting, karena hanya dengan mendapatkan data yang tepat maka proses riset akan berlangsung sampai peneliti mendapatkan jawaban dari perumusan masalah yang sudah ditentukan. Metode pengumpulan data yang digunakan peneliti dalam pembuatan skripsi adalah observasi, wawancara, kuesioner dan studi pustaka.

3.1.1 Metode Observasi

Metode observasi ini dilakukan dengan mendatangi langsung Gedung Akademik pusat UIN Jakarta, Gedung Rektorat Bagian Perencanaan dan Gedung Fakultas Dakwah dan Ushuluddin, yang bertujuan untuk memperoleh data dan informasi yang diperlukan untuk pembuatan aplikasi pencarian lokasi ujian secara 3 dimensi dengan virtual reality berbasis web serta informasi gedung- gedung yang ada pada kampus I UIN Jakarta. Dari hasil observasi ini dapat ditemui informasi yang membantu penulis dalam pembuatan skripsi dan masalah yang ada pada tempat observasi. Gambar 3.1 Penunjuk lokasi pendaftaran ujian masuk PMDK Gambar 3.1 terdapat informasi yang digunakan sebagai penunjuk arah pendaftaran PMDK berlokasi di Gedung Akademik pusat. Hal tersebut kurang akurat karena penunjuk lokasi dapat bergeser karena suatu hal sehingga pengunjung masih harus bertanya kepada orang-orang di sekitar lokasi. Gambar 3.2 Kelas Gedung Fakultas Ushuluddin dan Dakwah Gambar 3.2 merupakan foto dari kelas yang dijadikan ruang lokasi ujian yang akan divisualisasikan menjadi gambar 3 dimensi yang dapat membantu user dalam mencari letak ruang ujian yang ditelah ditentukan. Gambar 3.3 Papan informasi daftar lokasi ujian SNMPTN Gambar 3.3 adalah informasi lokasi ujian SNMPTN yang di letakkan di depan Gedung Akademik pusat. Para peserta melihat informasi lokasi terlebih dahulu pada papan informasi dan kemudian mencari gedung lokasi ujian melalui banner yang ditempel pada setiap Gedung Fakultas yang disertai dengan kelompok jurusan IPAIPS beserta range nomor ujian. Gambar 3.4 Banner Lokasi UMB Gambar 3.4 adalah informasi lokasi peserta UMB berdasarkan kelompok dan range nomor ujian yang dipasang pada gedung Fakultas Dakwah dan Ushuluddin. Setelah peneliti melakukan observasi, informasi lokasi pada gambar 3.4 tidak informatif karena informasi tersebut hanya di tempel pada gedung-gedung lokasi ujian yang terletak pada Kampus I UIN Jakarta. Padahal masih banyak peserta yang belum pernah mengunjungi UIN pada saat ujian berlangsung sehingga peserta bingung dalam mencari lokasi. Gambar 3.5 Papan informasi ruang ujian Gambar 3.5 merupakan papan informasi ruang ujian yang di tempel di depan gedung Fakultas Dakwah dan Ushuluddin, peserta masih kesulitan mencari lokasi ruang ujian karena tidak ada denah ruang ujian. Gambar 3.6 Kapasitas ruang ujian yang digunakan Gambar 3.7 Penempatan Ruang Peserta Ujian Sesuai Nomor Peserta Gambar 3.6 dan gambar 3.7 merupakan contoh hasil observasi yang didapat berupa softcopy informasi gedung-gedung dan ruang yang digunakan sebagai lokasi ujian sesuai nomor peserta ujian.

3.1.2 Metode Wawancara

Wawancara ini dilakukan langsung dengan pihak Akademik pusat penyelenggara ujian masuk, yaitu dengan Kabag Kepala Bagian Akademik pusat Bapak Marzuki Mahmud, MA. Wawancara dilakukan pada tanggal 10 Februari 2010, berlokasi di ruang Kepala Bagian Akademik pusat pada gedung Akademik pusat UIN Syarif Hidayatullah Jakarta Jl. Ir.H. Juanda No.59, Ciputat. Metode wawancara digunakan karena memiliki kekuatan mudah dalam pengaplikasian dan penerapannya, murah, dan dapat mengetahui informasi yang dibutuhkan secara langsung. Adapun hasil wawancara dengan Kepala Bagian Akademik pusat UIN Jakarta adalah sebagai berikut: 1. Selama ini pendaftar dan peserta ujian masuk UIN memperoleh informasi yang diinginkan, ialah dengan melihat papan informasi yang ada dengan mendatangi langsung Gedung Akademik pusat. 2. Informasi tentang denah Gedung-gedung UIN Jakarta sudah ada, Informasi berupa gambar peta 2 dimensi yang dipasang pada papan yang diletakkan pada pintu masuk dan pintu keluar UIN pada saat ujian berlangsung. 3. Sudah ada sistem pendaftaran dan mendapatkan nomor ujian secara online melalui website SPMB Mandiri UIN Jakarta. 4. Belum ada informasi tentang pencarian lokasi ujian yang disajikan dengan teknologi multimedia berbasis web. 5. Informasi multimedia yang dikemas dengan berbasis web bisa lebih informatif dan cepat dalam menyampaikan informasi dibandingkan dengan informasi berbasis standalone. 6. Pencarian letak ruang ujian secara 3 dimensi dengan virtual reality pada Gedung Fakultas cukup dibuat dengan satu gedung saja. Adapun hasil wawancara rinci dengan Kepala Bagian Akademik pusat UIN Jakarta ada pada Lampiran 1.

3.1.3 Kuesioner

Selanjutnya pembagian kuisioner juga dilakukan terhadap 40 peserta ujian UMB pada tanggal 22 Mei 2010 dengan kesimpulan sebagai berikut: 1. Pihak Akademik UIN Jakarta dalam menyampaikan informasi mengenai lokasi ujian masih kurang jelas, karena belum ada informasi mengenai lokasi gedung ujian yang divisualisasikan secara 2 dimensi dan 3 dimensi berbasis web. 2. Peserta ujian yang berlokasi di luar kota masih kesulitan dalam mencari informasi gedung lokasi ujian masuk UIN sehingga harus mendatangi gedung UIN Jakarta untuk mendapatkan informasi lokasi ujian. 3. Peserta ujian yang melakukan proses ujian pada UIN Jakarta yang bertempat tinggal di luar kota sulit dalam menemukan informasi letak gedung-gedung yang ada pada Kampus I UIN Jakarta. 4. Peserta ujian setuju jika nantinya dibuat aplikasi yang bisa memberikan informasi ujian berupa pencarian letak lokasi ujian masuk pada UIN Jakarta berdasarkan nama dan nomor ujian, jadwal pelaksanaan ujian, visualisasi 2 dimensi dan pencarian letak ruang ujian secara 3 dimensi dengan virtual reality. Adapun hasil kuesioner rinci dengan 40 peserta ujian UMB ada pada Lampiran 2.

3.1.4 Studi Pustaka

Pencarian informasi dengan mempelajari buku-buku tentang multimedia database dan website. Beberapa contoh judul buku yang dipelajari adalah ”Multimedia Alat Untuk Meningkatkan Keunggulan Bersaing” yang ditulis oleh Suyanto, ”Designing Interactive Multimedia Systems” oleh Mohammad Dastbaz serta ”Membangun Aplikasi Web dengan PHP dan MYSQL” oleh Sutarman yang selengkapnya dapat dilihat pada daftar pustaka.

3.2 Metode Pengembangan Multimedia

Metode pengembangan multimedia yang digunakan adalah IMSDD Interactive Multimedia System Design and Development yang meliputi 4 tahapan yaitu kebutuhan sistem, pertimbangan desain, implementasi dan evaluasi.

3.2.1 Kebutuhan Sistem

a. Definisi Sistem Pada tahap ini dilakukan pendefinisian sistem dengan merencanakan secara garis besar tujuan dan objektifitas sistem. Sistem yang dibangun yaitu sebuah sistem multimedia interaktif yang akan memberikan informasi mengenai ujian masuk berupa informasi lokasi dan jadwal ujian pada UIN Jakarta. Tujuan dibangunnya sistem ini adalah untuk merancang sistem multimedia berbasis website yang memudahkan peserta ujian dalam mencari lokasi dan informasi tentang penyelenggaraan ujian yang disajikan secara interaktif dan mudah digunakan. b. Profil dan Kebutuhan Pengguna Aplikasi dibuat sesuai dengan kebutuhan pengguna dan profil pengguna yang menggunakan aplikasi. Penyebaran kuesioner dilakukan pada 40 peserta ujian untuk mengetahui informasi apa saja yang dibutuhkan oleh user. c. Pertimbangan Perangkat Keras dan Perangkat Lunak Mengevaluasi kebutuhan perangkat keras dan platform yang tersedia, tentang spesifikasi hardware, software dan perangkat lain yang digunakan peneliti dalam membuat aplikasi. d. Pertimbangan Penyebaran Peneliti menyebarkan informasi kepada pengguna melalui media website dengan pertimbangan mudah dan cepat dalam penyebaran informasi.

3.2.2 Pertimbangan Desain

Tujuan dari langkah ini adalah untuk menggambarkan secara jelas panduan tentang detail desain. Langkah ini mencakup: a. Metafora Desain Menentukan sebuah pemodelan dari dunia nyata yang digunakan sebagai kunci dalam solusi perancangan antarmuka sistem. Pemodelan dari dunia nyata yang dijadikan metafora desain dalam perancangan sistem ini adalah website 3 dimensi Virtual Home. b. Tipe Informasi Format dan tipe informasi, informasi yang dibutuhkan adalah berupa teks, video, grafik, animasi, adobe shockwave movie player dan audio. c. Struktur navigasi Merancang struktur navigasi aplikasi sesuai dengan konten yang ada, berupa perancangan struktur navigasi frontend dan backend. d. Persiapan Media dan Integrasi Memperhatikan media lain yang mungkin dapat berintegrasi dalam pembangunan sistem, seperti hubungan perancangan kontrol konten dengan pengintegrasian hasil pengumpulan data. e. Perancangan flowchat, DFD, ERD, spesifikasi database serta STD. f. Perancangan Layar Adapun perancangan layar yang dibuat berupa layar aplikasi frontend dan backend yang berguna sebagai pembangunan aplikasi. 3.2.3 Implementasi Setelah melakukan pendefinisian masalah dan perancangan sistem, tahap yang selanjutnya dilakukan adalah implementasi, tahap implementasi terdiri dari: a. Prototyping Pada tahap prototyping, dibuat sebuah visualisasi dari sistem yang dibangun, berupa pembangunan aplikasi frontend sebagai aplikasi utama dan backend sebagai aplikasi pendukung. b. Beta Testing Melakukan tes beta atau pengujian terhadap prototyping yang dibuat untuk kemungkinan masalah-masalah perancangan dan kontrol.

3.2.4 Evaluasi

Pada tahap ini aplikasi dievaluasi dengan menguji coba aplikasi dan membagikan kuesioner kepada kepada 40 peserta ujian SPMB Mandiri UIN pada tanggal 7 Juli 2010 serta wawancara kepada Bapak Marzuki Mahmud selaku Kepala Bagian Akademik pusat pada tanggal 8 Juli 2010 untuk mendapatkan hasil evaluasi terhadap aplikasi yang dibuat.

BAB IV HASIL DAN PEMBAHASAN

Pada bab ini diuraikan tentang sejarah, tujuan, visi dan misi, struktur kelembagaan UIN Jakarta serta rancangan dan pembahasan pembuatan aplikasi berdasarkan metode pengembangan sistem yang dipergunakan.

4.1 Profil Universitas

Universitas Islam Negeri UIN sebagai Universitas adalah buah dari perjuangan yang panjang umat Islam Indonesia sejak lembaga ini berbentuk Akademi Dinas dengan nama ADIA Akademi Dinas Ilmu agama tahun 1957- 1960, sebagai fakultas IAIN Al- Jami‟ah Al-Islamiyah Al-Hukumiyyah yang berpusat di Yogyakarta 1960-1963, dan sebagai IAIN Syarif Hidayatullah Jakarta tahun 1963, sampai resmi menjadi UIN Syarif Hidayatullah Jakarta sesuai dengan keputusan Presiden Republik Indonesia Nomor 31 Tahun 2002 tanggal 20 Mei 2002.

4.1.1 Tujuan UIN Jakarta

UIN Syarif Hidayatullah Jakarta bertujuan untuk mendorong usaha registrasi ilmu, menghilangkan dikotomi antara ilmu-ilmu umum dan ilmu-ilmu agama. Hal ini penting dalam rangka memberikan landasan moral Islam terhadap perkembangan iptek dan sekaligus mengartikulasikan ajaran Islam secara professional di dalam kehidupan masyarakat.

4.1.2 Visi UIN Jakarta

Menjadikan UIN Syarif Hidayatullah Jakarta sebagai lembaga pendidikan tinggi terkemuka dalam mengembangkan dan mengintegrasikan aspek keislaman, keilmuan, kemanusiaan dan keindonesiaan.

4.1.3 Misi UIN Jakarta

1. Melakukan reintegrasi epistimologi keilmuan, sehingga tidak ada lagi dikotomi antara ilmu-ilmu umum dan ilmu-ilmu agama. 2. Memberikan landasan moral terhadap pengembangan Ilmu Pengetahuan dan Teknologi IPTEK dan melakukan pencerahan dalam pembinaan Iman dan Taqwa IMTAQ, sehingga IPTEK dan IMTAQ sejalan. 3. Mengartikulasikan ajaran Islam secara professional ke dalam konteks kehidupan masyarakat, sehingga tidak ada lagi jarak antara norma agama dan sofistifikasi masyarakat. 4. Mempertahankan nilai-nilai lama yang positif dan mengambil nilai-nilai baru yang lebih positif. 5. Mengembangkan riset dan penelitian, baik yang bersifat kuantitatif maupun kualifatif, sehingga tidak ada lagi kesan deduktifikasi ilmu-ilmu keislaman. 6. Memberikan konstribusi terhadap peningkatan kualitas hidup masyarakat melalui pola pengabdian masyarakat yang lebih professional. 7. Memberikan landasan moral dan spiritual terhadap pembangunan nasional, sehingga konsep pembangunan manusia seutuhnya dapat tercapai. 8. Memberikan konstribusi dalam mewujudkan perdamaian dunia dan kesejahteraan umat manusia. 9. Menjadikan faktor yang menentukan dalam memelihara hubungan harmonis antara agama, Negara dan masyarakat.

4.1.4 Struktur Kelembagaan

Struktur kelembagaan UIN Syarif Hidayatullah Jakarta, diatur dalam Peraturan Menteri Agama Nomor 414 Tahun 2002 tentang Organisasi dan Tata Kerja UIN Syarif Hidayatullah Jakarta. Dalam Peraturan tersebut, struktur kelembagaan UIN Syarif Hidayatullah Jakarta terdiri atas: 1. Rektor dan Pembantu Rektor 2. Senat Universitas 3. Fakultas a. Fakultas Ilmu Tarbiyah dan Keguruan FITK b. Fakultas Adab dan Humaniora FAH c. Fakultas Ushuluddin dan Filsafat FUF d. Fakultas Syariah dan Hukum FSH e. Fakultas Dakwah dan Komunikasi FDK f. Fakultas Dirasat Islamiyah FDI g. Fakultas Psikologi FPsi h. Fakultas Ekonomi dan Ilmu Sosial FEIS i. Fakultas Sains dan Teknologi FST j. Fakultas Kedokteran dan Ilmu Kesehatan FKIK k. Fakultas Ilmu Sosial dan Ilmu Politik FISIP l. Sekolah Pascasarjana SPs 4. Lembaga Penelitian 5. Lembaga Pengabdian pada Masyarakat 6. Lembaga Peningkatan dan Jaminan Mutu 7. Biro Akademik dan Kemahasiswaan AAK 8. Biro Administrasi Umum dan Kepegawaian AUK 9. Biro Perencanaan, Keuangan dan Sistem Informasi PKSI 10. Unit Pelaksana Teknis a. Perpustakaan b. Laboratorium Terpadu

4.2 Kebutuhan sistem

Menganalisis kebutuhan aplikasi dari mendefinisikan sistem, profil pengguna, kebutuhan perangkat baik hardware, software maupun perangkat lain yang dapat membantu dalam membangun aplikasi.

4.2.1 Mendefinisikan Sistem

Aplikasi multimedia interaktif pencarian lokasi ujian masuk adalah sebuah media yang berisi informasi tentang penyelenggaraan ujian masuk dan lokasi ujian yang berada pada Kampus I UIN Jakarta dengan menggunakan media website. Aplikasi ini dilengkapi dengan fitur pencarian lokasi berdasarkan nama dan nomor peserta ujian serta terdapat pemodelan 3 dimensi pencarian letak ruang ujian secara virtual reality pada Gedung Fakultas Dakwah dan Ushuluddin sebagai contoh lokasi ujian yang digunakan. Aplikasi yang dibangun terdiri dari dua bagian, yaitu aplikasi frontend dan aplikasi backend. Aplikasi FrontEnd Frontend merupakan aplikasi utama yang digunakan user untuk mendapatkan informasi mengenai lokasi dan jadwal ujian masuk serta informasi gedung pada Kampus I UIN Jakarta. Secara garis besar aplikasi ini terdiri dari rangkaian informasi yang ditampilkan dengan cara interaktif dan menarik sehingga diharapkan dapat menarik minat dan memudahkan peserta ujian dalam mencari letak lokasi ujian pada UIN Jakarta. Pada aplikasi frontend user dapat mencari lokasi ujian berdasarkan nama dan nomor ujian. User dapat melihat visualisasi lokasi ujian secara 2 dimensi atau dapat berinteraksi secara virtual reality 3 dimensi sehingga memudahkan user dalam mencari letak gedung atau ruang lokasi ujian seolah olah seperti pada dunia nyata. User dapat mencetak informasi ujian berupa nama, nomor, foto, jadwal ujian serta lokasi ujian. Untuk selanjutnya aplikasi frontend disebut PLUIt Pencarian Lokasi Ujian Interaktif. Aplikasi BackEnd Merupakan aplikasi pendukung dari aplikasi frontend yang digunakan untuk melakukan updating data agar informasi yang ada dapat terus di update. Aplikasi ini hanya akan dijalankan oleh bagian admin dan dibangun menggunakan programming tool yaitu PHP yang akan melakukan interaksi dengan software database Xampp untuk mengolah dan menyimpan data. Program ini akan berjalan dengan baik dengan persyaratan perangkat keras hardware yang penulis sarankan, yaitu: 1. Intel Centrino core 2 duo 2.4 GHz berfungsi untuk proses kinerja sistem komputer didalam pengembangan program. 2. Memory RAM 2 GB berfungsi untuk proses mempercepat kinerja aplikasi program. 3. Monitor resolusi 1024 x 768 pixels berfungsi untuk memperjelas tampilan pada layar monitor. 4. Sound card dan speaker active berfungsi sebagai alat output aplikasi program yang dijalankan. 5. Sisa kapasitas harddisk 500 MB berfungsi sebagai media penyimpanan untuk aplikasi pencarian lokasi ujian interaktif.

4.2.2 Kebutuhan dan Profil Pengguna

Berdasarkan hasil wawancara dan kuesioner pada lampiran 1 dan 2, peneliti mendapatkan informasi kebutuhan pengguna aplikasi dan profil pengguna yang dapat menggunakan aplikasi ini, yaitu: Pengguna membutuhkan denah letak lokasi untuk gedung-gedung UIN yang dijadikan tempat lokasi ujian dan pencarian lokasi ujian yang dapat digunakan dengan media website. Jika peserta sudah mengetahui tentang letak gedung lokasi ujian melalui website maka peserta tidak harus mendatangi UIN Jakarta untuk melihat lokasi gedung ujian. Pihak Akademik pusat penyelenggara ujian masuk memerlukan suatu sistem yang memudahkan calon mahasiswa dalam mencari lokasi ujian dengan fasilitas pencarian lokasi berdasarkan nama atau nomor ujian serta menu animasi peta lokasi dan pencarian ruang ujian dengan visualisasi 2 dimensi dan 3 dimensi secara virtual reality. Profil pengguna aplikasi adalah user yang memiliki pengetahuan dan kemampuan komputer rendah atau sedang belum pernah atau pernah mengoperasikan aplikasi komputer menggunakan mouse, tidak cacat penglihatan, pendengaran dan tidak buta huruf serta yang mempunyai pengalaman koneksi internet. Kemampuan mengetik rendah atau sedang satu huruf perdetik atau satu kata perdetik dan tidak cacat tangan.

4.2.3 Pertimbangan Perangkat Keras dan Perangkat Lunak

Berdasarkan tahap pendefinisian sistem yang peneliti lakukan, adapun pertimbangan perangkat keras dan perangkat lunak komputer maupun perangkat pendukung lain untuk membangun aplikasi pencarian lokasi ujian masuk interaktif adalah sebagai berikut: 1. Kebutuhan Perangkat Keras Merupakan kebutuhan hardware komputer yang akan digunakan untuk membangun aplikasi virtual reality denah lokasi ujian masuk. Hardware komputer yang perlu disiapkan adalah: a. Laptop Intel Core 2 Duo 2,4 GHZ. b. RAM 2 GB. c. VGA Card Nvidia Geforce 9600 GT 512 MB. d. Harddisk dengan kapasitas 320 GB. e. Monitor 15” dengan ukuran layar 1280 x 800 pixels. f. Keyboard dan Mouse sebagai alat input. g. Sound Card dan Virtual Surround Sound. 2. Kebutuhan Perangkat Lunak Merupakan kebutuhan software komputer yang akan digunakan untuk membangun aplikasi pencarian lokasi ujian masuk interaktif. Software komputer yang perlu disiapkan adalah: a. Archicad 10 untuk pemodelan 3D Gedung Fakultas. b. Adobe Photoshop CS 2 digunakan untuk mendesain interface website lalu diimplementasikan ke dalam Macromedia Dreamweaver dan untuk mendesain peta lokasi beserta informasi gedung. c. Adobe Director 11 untuk menjadikan aplikasi virtual reality dapat berinteraksi dengan user. d. 3ds MAX 8 untuk memberi material objek gedung yang telah dibuat kemudian mengeksport file dengan format .max menjadi format W3D. e. Macromedia Flash Professional 8 digunakan untuk membuat animasi pada website. f. Macromedia Dreamweaver 8 untuk merancang interface yang telah dirancang terlebih dahulu dengan menggunakan Adobe Photshop CS 2 yang kemudian dijadikan interface website dengan pengkodean bahasa HTML. g. Xampp merupakan paket aplikasi yang memudahkan dalam menginstall modul PHP, Apache Web Server dan MySQL Database. h. PHP merupakan bahasa pemrograman yang digunakan dalam implementasi website dan untuk memanggil atau menampilkan data yang ada dalam database. i. MySQL untuk merancang database dan pengolahan data pada database backend. 3. Kebutuhan Perangkat Lain Merupakan kebutuhan perangkat lain yang dibutuhkan untuk membangun aplikasi pencarian lokasi ujian masuk interaktif. Perangkat yang perlu disiapkan adalah: Camera digital Digunakan untuk pengambilan gambar foto yang diperlukan sebagai sumber data pembuatan aplikasi. Handycam Digunakan untuk merekam video secara digital dengan format .mp4.

4.2.4 Pertimbangan Penyebaran Sistem

Pada aplikasi dengan penyebaran informasi multimedia secara 3 dimensi melalui media website, beberapa hal yang harus dipertimbangkan. Dengan penyebaran informasi melalui media website lebih cepat dalam menyebarkan informasi serta data-data dapat diupdate kapanpun dan dimanapun. Pada aplikasi PLUIt yang dibuat berbasiskan website bertujuan untuk mempercepat penyebaran informasi kepada pengguna. Terdapat letak ruang lokasi ujian yang dibuat secara 3 dimensi dan dapat dicari secara virtual reality. Untuk menampilkan pencarian letak ruang 3 dimensi secara virtual reality pada browser dengan waktu yang tidak terlalu lama, pemodelan 3 dimensi dibuat tidak menggunakan banyak poligon dan detail sehingga ukuran file yang dihasilkan tidak terlalu besar. Pencarian letak ruang secara 3 dimensi yang dibuat dengan teknologi virtual reality diintegrasikan ke dalam website dengan format file .dcr. Untuk menjalankan file .dcr pada browser diperlukan shockwave player. Jika pada komputer user belum terinstall shockwave player maka dapat langsung diinstall secara langsung melalui internet.

4.3 Pertimbangan Desain

Pada tahap pertimbangan desain perancangan terdapat metafora desain, tipe informasi yang digunakan, perancangan struktur navigasi, persiapan dan integrasi media, perancangan layar frontend dan backend yang berguna dalam membangun aplikasi frontend dan backend.

4.3.1 Metafora desain

Dalam merancang aplikasi multimedia, kita harus mempunyai pembanding yang digunakan sebagai acuan dalam mendesain yang bertujuan untuk mengambil fakta dari dunia nyata yang kemudian dikembangkan dalam aplikasi PLUIt. Pada aplikasi PLUIt, digunakan perbandingan aplikasi 3D virtual home berbasiskan web yang explorable. Di dalam aplikasi terdapat objek rumah yang dibuat secara 3 dimensi dan user dapat menjelajah ruangan yang ada di dalam rumah secara online. Dari metafora desain, didapat contoh pola interaksi antara user dengan aplikasi. Sebagai Contoh yaitu menampilkan pemodelan rumah secara 3 dimensi melalui media website dan dapat menjelajah ruangan rumah dengan tombol navigasi pada keyboard.

4.3.2 Tipe Informasi

Berikut ini adalah tipe informasi yang diintegrasikan ke dalam aplikasi PLUIt: Tabel 4.1 Tipe Informasi No. Nama File Jenis Format Size Sumber 1. Interface Animasi SWF 86 KB Buatan sendiri 2. Peta Animasi SWF 114 KB Buatan sendiri 3. Bantuan Animasi SWF 22 KB Buatan sendiri 4. 3 Gambar PNG 263 KB Buatan sendiri 5. 5 Gambar PNG 261 KB Buatan sendiri 6. 6 Gambar PNG 372 KB Buatan sendiri 7. 7 Gambar PNG 287 KB Buatan sendiri 8. ALL Adobe Shockwave Movie Player DCR 20.2 MB Buatan sendiri 9. v1 Video MPEG 35.5 MB Buatan sendiri

4.3.3 Struktur Navigasi

Perancangan aplikasi pencarian lokasi ujian interaktif ini diawali dengan perancangan struktur navigasi aplikasi frontend dan backend.

A. Struktur Navigasi Aplikasi FrontEnd

Gambar 4.1 Perancangan Struktur Navigasi Aplikasi Frontend Gambar 4.1 adalah struktur navigasi dari aplikasi frontend dengan model komposit. Di dalam aplikasi frontend, user yang berada pada halaman utama dapat menuju halaman kontak kami, info ujian, fitur pencarian, jadwal ujian, lokasi ujian, info gedung dan bantuan. Begitu pun sebaliknya, jika user berada pada halaman jadwal ujian, lokasi ujian, info gedung dan bantuan dapat menuju halaman utama, halaman kontak kami, info ujian, fitur pencarian. Pada fitur pencarian terdapat halaman info peserta ujian berdasarkan nama dan nomor ujian serta dapat menuju halaman cetak dan telusuri ruang ujian melalui hypertext. Halama n Kontak Kami Info Ujian Jadwal Ujian Lokasi Ujian Info Gedung Bantuan Pencariann Cetak Telusuri Info Peserta Ujian

B. Struktur Navigasi Aplikasi BackEnd

Gambar 4.2 Perancangan Struktur Navigasi Aplikasi Backend Gambar 4.2 merupakan gambar struktur navigasi dari halaman aplikasi backend dengan model hirarki. Dalam aplikasi backend user dapat menuju ke menu home, data master, data transaksi dan logout. Dari data master, pengguna dapat menuju ke submenu fakultas, jenis tes, jenis paket dan ruang. Pada masing-masing submenu, user dapat memilih menu input atau lihat data untuk melakukan pengolahan data. Dalam menu data transaksi, pengguna dapat menuju ke submenu jadwal, peserta dan lokasi. User dapat melakukan pengolahan data pada submenu data transaksi dengan menuju menu input dan lihat data. Menu logout untuk keluar dari aplikasi. Fakultas Jenis Tes Ruang Input Data Lihat Data Input Data Lihat Data Input Data Lihat Data Input Data Lihat Data Home Data Master Data Transaksi Logout Jadwal Peserta Lokasi Input Data Lihat Data Input Data Lihat Data Input Data Lihat Data Jenis Paket

4.3.4 Persiapan dan Integrasi Media

Merupakan tahap perancangan di mana media-media yang diperlukan dan digunakan pada aplikasi dideskripsikan secara jelas, dipersiapkan dan diintegrasikan menjadi satu kesatuan. Tahap ini dibagi menjadi dua bagian, yaitu:

A. Persiapan Media

Mendownload gambar-gambar yang diperlukan untuk melengkapi pembuatan interface berupa kontrol navigasi pada website.

B. Integrasi Media

Pada tahap ini adalah tahap di mana file-file gambar yang telah dipersiapkan dipadukan atau digabungkan ke dalam satu perancangan layar yang berfungsi sebagai control content. Kontrol Content File-file gambar yang telah dipadukan berfungsi menjadi kontrol content berupa kontrol navigasi. Hasil dari perpaduan kontrol navigasi menghasilkan perancangan layar aplikasi frontend dan backend yang dapat dilihat pada tahap perancangan layar. Kontrol Navigasi: merupakan kontrol yang terdiri dari button hypermedia, hyperpicture dan hypertext yang menghubungkan dari satu lokasi content ke content lainnya yang berkaitan dengan navigasi content. Tabel 4.2 Kontrol Navigasi Visual Keterangan Hypertext yang membawa user menuju content halaman utama. Hypertext yang membawa user menuju content kontak kami. Hypermedia yang membawa user menuju content pencarian lokasi ujian. Hyperpicture yang membawa user menuju content jadwal ujian. Hyperpicture yang membawa user menuju content lokasi ujian. Hyperpicture yang membawa user menuju content info gedung. Hyperpicture yang membawa user menuju content bantuan. Hypertext yang membawa user menuju content halaman info ujian. Button pada layar virtual reality menuju gedung lantai 1 Button pada layar virtual reality menuju gedung lantai 2 Button pada layar virtual reality menuju gedung lantai 3 Button pada layar virtual reality menuju gedung lantai 4 Button pada layar virtual reality menuju gedung lantai 5 Button pada layar virtual reality menuju gedung lantai 6 Button pada layar virtual reality menuju gedung lantai 7 Button pada layar virtual reality menuju halaman awal Button pada layar virtual reality menuju halaman video Button pada halaman video pada layar virtual reality untuk memutar video. Button pada halaman video pada layar virtual reality untuk memberhentikan video. Button lain yang diperlukan untuk aplikasi adalah: Tabel 4.3 Button Lain Visual Keterangan Telusuri Telusuri Untuk menelusuri lokasi ruang ujian Cetak Cetak Untuk mencetak informasi yang diperlukan peserta ujian Tutup Untuk menutup window area informasi pada aplikasi Zoom in Untuk memperbesar gambar yang ada pada area informasi Zoom out Untuk memperkecil gambar yang ada pada area informasi Untuk menggeser informasi ke atas Untuk menggeser unformasi ke bawah

4.3.5 Perancangan Flowchart

Di bawah ini akan diuraikan flowchart dari aplikasi frontend dan backend.

A. Flowchart Aplikasi Frontend

Gambar 4.3 Perancangan Flowchart Halaman Utama Proses dimulai dari halaman utama, user dapat memilih fitur pencarian untuk mencari lokasi, atau memilih menu lain jika tidak maka proses selesai. Halaman Utama Pilih Fitur Pencarian Lokasi Pilih Menu Jadwal Ujian Pilih Menu Lokasi Ujian Pilih Menu Info Gedung Pilih Menu Bantuan Pilih Menu Kontak Kami Pilih Menu Info Ujian Mulai Selesai A B C D E F G Ya Tidak Ya Ya Ya Ya Ya Ya Tidak Tidak Tidak Tidak Tidak Tidak A: Halaman Pencarian B: Halaman Jadwal Ujian C: Halaman Lokasi Ujian D: Halaman Info Gedung E: Halaman Bantuan F: Halaman Kontak Kami G: Halaman Info Ujian Gambar 4.4 Perancangan Flowchart Fitur Pencarian Jika user memilih menu pencarian, masukkan nomor atau nama peserta ujian, setelah itu terjadi proses pencarian yang data-datanya akan ditampilkan A Masukkan Nama atau Nomor Ujian Pencarian Halaman Pencarian Pilih Denah Letak Fakultas Pilih Denah Ruang Ujian Pilih Cetak Pilih Telusuri Ruangan H Gambar Denah Fakultas Gambar Denah Ruang Ujian Cetak Ya Ya Ya Ya Tidak Tidak Tidak Tidak A: Halaman Pencarian H: Halaman Virtual Reality pada halaman pencarian. User dapat memilih denah letak fakultas, ruang ujian atau pilih cetak dan telusuri ruangan. Gambar 4.5 Perancangan Flowchart Menu Jadwal Ujian Pada halaman jadwal ujian, user dapat melihat informasi jadwal ujian jika tidak dapat memilih menu lain atau tetap berada pada halaman jadwal ujian. Tidak B Halaman Jadwal Ujian Halaman Utama Pilih Fitur Pencarian Ya A Pilih Menu Kontak Kami Pilih Menu Info Ujian Pilih Menu Utama Ya Tidak Tidak Ya Ya F G A: Halaman Pencarian B: Halaman Jadwal Ujian F: Halaman Kontak Kami G: Halaman Info Ujian Gambar 4.6 Perancangan Flowchart Menu Lokasi Ujian C Pilih Menu Lokasi Ujian SNMPTN Ya Tidak Halaman Lokasi Ujian Pilih Menu Lokasi Ujian UMB Ya Tidak Pilih Menu Lokasi Ujian Mandiri Ya Tidak Tidak Info Lokasi Ujian SNMPTN Info Lokasi Ujian UMB Info Lokasi Ujian Mandiri Pilih Menu Kontak Kami Pilih Menu Info Ujian Pilih Menu Utama Ya Tidak Tidak Ya Ya F G Halaman Utama Pilih Fitur Pencarian Ya A Tidak A: Halaman Pencarian C: Halaman Lokasi Ujian E: Halaman Bantuan F: Halaman Kontak Kami Pada halaman lokasi, terdapat menu info lokasi ujian UMB, SNMPTN dan Mandiri. Jika tidak dapat memilih menu lain. Gambar 4.7 Perancangan Flowchart Menu Info Gedung D Halaman Info Gedung Pilih Menu Gedung Ya Tidak Pilih Gambar Gedung Ya a Tidak Terlihat Glow pada Gambar Gedung yang Dipilih Informasi pada Gambar Gedung yang dipilih Pilih Menu Kontak Kami Pilih Menu Info Ujian Tidak Pilih Menu Exit Ya Tidak Tidak Ya F G Halaman Utama Pilih Menu Halaman Ya Tidak Halaman Utama Pilih Fitur Pencarian Ya A Tidak A: Halaman Pencarian D: Halaman Info Gedung F: Halaman Kontak Kami G: Halaman Info Ujian Ya Pada Halaman Info gedung, user dapat melihat menu gedung untuk melihat letak gedung, atau memilih gambar gedung untuk melihat informasi gedung. Jika tidak maka dapat memilih menu lain yang ada pada halaman info gedung. Gambar 4.8 Perancangan Flowchart Menu Bantuan Tidak Tidak E Halaman Bantuan Pilih Menu pada Halaman Ya Pilih Menu Exit Ya Halaman Utama R Pilih Menu Kontak Kami Pilih Menu Info Ujian Ya Ya F G Pilih Menu Halaman Ya Tidak Halaman Utama Pilih Fitur Pencarian Ya A Tidak Tidak Tidak A: Halaman Pencarian E: Halaman Bantuan F: Halaman Kontak Kami G: Halaman Info Ujian R: Animasi Halaman Bantuan Pada halaman bantuan terdapat animasi bantuan berupa informasi penggunaan aplikasi yang dapat digunakan secara interaktif. Jika tidak memilih halaman bantuan maka dapat memilih menu halaman lain. Gambar 4.9 Perancangan Flowchart Animasi Halaman Bantuan R Pilih Menu Penelusuran 3D Ya Pilih Menu Mencetak Lokasi Ujian Ya Pilih Menu Lihat Lokasi Kelas Ya Pilih Menu Mencari Lokasi Ujian Ya Pilih Menu Info Kontak Tida E Informasi Penggunaan Menu Kontak Kami Informasi Cara Menggunakan Pencarian Lokasi Informasi Penggunaan penelusuran Ruang Ujian Secara 3D Pilih Menu Mencari Nomor Ujian Informasi Cara Mencari Nomor Ujian Ya Informasi Cara Mencetak Lokasi Ujian Informasi Cara Melihat Menu Lokasi Kelas Tidak E: Halaman Bantuan R: Animasi Halaman Bantuan Gambar 4.10 Perancangan Flowchart Halaman Info Ujian Informasi Ujian UMB Informasi Ujian Mandiri Informasi Ujian PMDK Informasi Ujian PMDK Tidak Tidak A: Halaman Pencarian F: Halaman Kontak Kami G: Halaman Info Ujian G Halaman Info Ujian Pilih Menu Info Ujian UMB Ya Tidak Pilih Menu Info Ujian Mandiri Ya Tidak Pilih Menu Info Ujian PMDK Ya Tidak Pilih Menu Info Ujian SNMPTN Ya Tidak Pilih Menu Kontak Kami Pilih Menu Info Ujian Pilih Menu Utama Ya Tidak Tidak Ya Ya F G Halaman Utama Pilih Fitur Pencarian Ya A Gambar 4.11 Perancangan Flowchart Halaman Virtual Reality Tidak Tidak H Halaman Virtual Reality Pilih Menu Lantai 1 Ya Pilih Menu Lantai 2 Ya Pilih Menu Lantai 4 Ya Pilih Menu Lantai 3 Ya Pilih Menu Lantai 5 Ya Pilih Menu Lantai 6 Ya Pilih Menu Lantai 7 Ya Pilih Menu Video Ya Pilih Menu Awal Ya Virtual Reality Lantai 1 Virtual Reality Lantai 2 Virtual Reality Lantai 3 Virtual Reality Lantai 4 Virtual Reality Lantai 5 Virtual Reality Lantai 6 Virtual Reality Lantai 7 Video Tidak Tidak Tidak Tidak Tidak Tidak Tidak Halaman Pencarian Lokasi Ujian H: Halaman Virtual Reality Gambar 4.12 Perancangan Flowchart Halaman Administrator Gambar 4.12 merupakan alur dari halaman admin. Admin melakukan login terlebih dahulu untuk dapat masuk pada halaman administrator. Jika login valid maka admin masuk ke halaman administrator. I Mulai Login Cek Basis Data Admin Apakah Valid? Halaman Admin Plih Menu Data Transaksi Plih Menu Logout Selesai Tidak J Ya Ya Ya Tidak Plih Menu Data Master Tidak Ya Tidak I: Menu Data Master J: Menu Data Transaksi Gambar 4.13 Perancangan Flowchart Menu Data Master Pada menu data master terdapat menu fakultas, jenis test, jenis paket, menu ruang yang terhubung pada submenu masing-masing menu yang ada pada data master. Tidak I Plih Menu Fakultas Plih Menu Jenis Test Plih Menu Jenis Paket Plih Menu Ruang Halaman Admin K L M N Ya Ya Ya Ya Tidak Tidak Tidak I: Menu Data Master K: Submenu Fakultas L: Submenu Jenis Test M: Submenu Jenis Paket N: Menu Ruang Gambar 4.14 Perancangan Flowchart Menu Data Transaksi Pada menu data transaksi terdapat menu jadwal, peserta, lokasi dan admin yang dapat terhubung pada submenu pada masing-masing menu. J Plih Menu Jadwal Plih Menu Peserta Plih Menu Lokasi Halaman Admin O P Q Ya Ya Ya Tidak Tidak Tidak J: Menu Data Transaksi O: Submenu Jadwal P: Submenu Peserta Q: Submenu Lokasi Gambar 4.15 Perancangan Flowchart Submenu Fakultas Pada gambar 4.15 merupakan Submenu fakultas, admin dapat melakukan proses input, lihat, hapus dan edit data. Tidak K Plih Menu Input Data Input Data Simpan Halaman Lihat Data Fakultas Plih Edit Data Edit Data Hapus Data Plih Menu Lihat Data Plih Hapus Data Ya Tidak Ya Ya Tidak K: Submenu Fakultas Ya Tidak Gambar 4.16 Perancangan Flowchart Submenu Jenis Test Pada gambar 4.16 merupakan Submenu jenis test, admin dapat melakukan proses input, lihat, hapus dan edit data. L: Submenu Jenis Test L Plih Menu Input Data Input Data Simpan Halaman Lihat Data Jenis Test Plih Edit Data Edit Data Hapus Data Plih Menu Lihat Data Plih Hapus Data Ya Tidak Ya Ya Tidak Tidak Ya Tidak Gambar 4.17 Perancangan Flowchart Submenu Jenis Paket Pada gambar 4.17 merupakan Submenu jenis paket , admin dapat melakukan proses input, lihat, hapus dan edit data. M: Submenu Jenis Paket M Plih Menu Input Data Input Data Simpan Halaman Lihat Data Jenis Paket Plih Edit Data Edit Data Hapus Data Plih Menu Lihat Data Plih Hapus Data Ya Tidak Ya Ya Tidak Tidak Ya Tidak Gambar 4.18 Perancangan Flowchart Submenu Ruang Pada gambar 4.18 merupakan Submenu ruang, admin dapat melakukan proses input, lihat, hapus dan edit data. N: Submenu Ruang N Plih Menu Input Data Input Data Simpan Halaman Lihat Data Ruang Plih Edit Data Edit Data Hapus Data Plih Menu Lihat Data Plih Hapus Data Ya Tidak Ya Ya Tidak Tidak Ya Tidak Gambar 4.19 Perancangan Flowchart Submenu Jadwal Pada gambar 4.19 merupakan Submenu jadwal, admin dapat melakukan proses input, lihat, hapus dan edit data. Tidak Ya Tidak O Plih Menu Input Data Input Data Simpan Halaman Lihat Data Jadwal Plih Menu Lihat Data Ya Ya Plih Edit Data Edit Data Hapus Data Plih Hapus Data Tidak Ya Tidak O: Submenu Jadwal Gambar 4.20 Perancangan Flowchart Submenu Peserta Pada gambar 4.20 merupakan Submenu peserta, admin dapat melakukan proses input, lihat, hapus dan edit data. P: Submenu Peserta P Plih Menu Input Data Input Data Simpan Halaman Lihat Data Peserta Plih Edit Data Edit Data Hapus Data Plih Menu Lihat Data Plih Hapus Data Ya Tidak Ya Ya Tidak Ya Tidak Ya Tidak Gambar 4.21 Perancangan Flowchart Submenu Peserta Pada gambar 4.21 merupakan Submenu jadwal, admin dapat melakukan proses input, lihat, hapus dan edit data. Q: Submenu Lokasi Q Plih Menu Input Data Input Data Simpan Halaman Lihat Data Lokasi Plih Edit Data Edit Data Hapus Data Plih Menu Lihat Data Plih Hapus Data Ya Tidak Ya Ya Tidak Ya Tidak Tidak

4.3.6 Perancangan DFD Data Flow Diagram

A. DFD level 0

Administrator User Aplikasi Backend PLUIT username, password, jadwal, peserta, lokasi, ruang, fakultas, jenis test, jenis paket info_lokasi_ujian no_ujian, nama, pesan otentifikasi_login, info_jadwal, info_peserta,,info_lokasi, info_ruang, info_fakultas,,pesan_user, info_ jenis _test, info_jenis_paket Gambar 4.22 DFD Level 0 Aplikasi PLUIt Diagram konteks pada gambar 4.22 menggambarkan proses aplikasi yaitu admin dapat memasukkan username, password, jadwal, peserta, lokasi, ruang, fakultas dan aplikasi mengolah database menghasilkan output berupa info jadwal dan lokasi ujian berdasarkan nomor ujian. User dapat memasukkan nama dan nomor ujian pada aplikasi untuk mencari jadwal dan lokasi ujian serta dapat mengirim pesan kepada admin. Admin mendapatkan output berupa otentifikasi login, informasi jadwal, peserta, lokasi, ruang, fakultas dan pesan user.

B. DFD level 1

Administrator 1.0 P Login Admin username, password login otentifikasi_login 2.0 P Mengisi Data jadwal, peserta, lokasi, ruang, fakultas,jenis test, jenis paket Jadwal Peserta Ruang Lokasi Fakultas 3.0 P Pencarian Lokasi User no_ujian, nama info_lokasi_ujian 4.0 P Kirim Pesan pesan pesan_user Jenis Test Jenis Paket Gambar 4.23 DFD Level 1 Aplikasi PLUIt Pada gambar 4.23, terjadi proses login pada admin dengan memasukan username dan password. Admin melakukan proses input data jadwal, peserta, ruang, lokasi, fakultas, jenis test dan jenis paket. User melakukan proses pencarian dengan cara menginput nama dan nomor ujian sehingga menghasilkan output berupa info peserta ujian. User dapat menginput pesan lalu mengirim pesan ke admin.

4.3.7 Perancangan Database

Pada tahap ini dilakukan perancangan database dengan merancang hubungan antar diagram dan spesifikasi database yang digunakan dalam membangun suatu sistem.

4.3.7.1 Perancangan ERD Entity Relationship Diagram

Mendapat Peserta Lokasi Jadwal Jenis Test Mengikuti Mendapatkan Ruang Memiliki Menempati Fakultas 1 M M 1 1 M M 1 M Keterangan: = Primary Key = Foreign Key Jenis Paket Mempuny ai 1 1 M Gambar 4 .24 Perancangan Entity Relationship Diagram

4.3.7.2 Spesifikasi Basis Data

Pada spesifikasi basis data aplikasi PLUIt pencarian lokasi ujian interaktif merupakan rincian tipe data, field dan ukuran data yang digunakan dalam perancangan basis data. 1. Tabel Login Nama Tabel : login Type File : master Primary Key : username Foreign Key : - Tabel 4.4 Login Nama Field Tipe Data Ukuran Keterangan username varchar 25 Username admin password varchar 15 Password admin 2. Tabel Fakultas Nama Tabel : fakultas Type File : master Primary Key : id_fakultas Foreign Key : - Tabel 4.5 Fakultas Nama Field Tipe Data Ukuran Keterangan id_fakultas varchar 2 Id fakultas nama_fakultas varchar 35 Nama fakultas foto varchar 10 Foto dari fakultas 3. Tabel Jadwal Nama Tabel : jadwal Type File : master Primary Key : id_jadwal Foreign Key : id_test Tabel 4.6 Jadwal Nama Field Tipe Data Ukuran Keterangan id_jadwal integer 2 Id jadwal id_test varchar 2 Id test jam1 varchar 6 Jam ujian pertama jam2 varchar 6 Jam ujian kedua Tgl date Tanggal ujian nama_ujian varchar 25 Nama ujian Tahun varchar 4 Tahun ujian 4. Jenis Test Nama Tabel : jenis_test Type File : Master Primary Key : id Foreign Key : - Tabel 4.7 Jenis Test Nama Field Tipe Data Ukuran Keterangan Id_test integer 2 Id test Nama_test varchar 10 Nama test 5. Tabel Lokasi Nama Tabel : lokasi Type File : Master Primary Key : id_lokasi Foreign Key : id_ruang Tabel 4.8 Lokasi Nama Field Tipe Data Ukuran Keterangan id_lokasi integer 5 Id lokasi Range varchar 30 Range nomor ujian range2 varchar 20 Range nomor ujian lanjutan id_ruang varchar 5 Id_ruang id_test varchar 5 Id_test 6. Tabel Peserta Nama Tabel : peserta Type File : Master Primary Key : no_ujian Foreign Key : id_test Tabel 4.9 Peserta Nama Field Tipe Data Ukuran Keterangan No_ujian varchar 15 No ujian peserta Nama varchar 35 Nama peserta Alamat varchar 55 Alamat peserta Telepon varchar 25 Telepon peserta Email varchar 25 Email peserta Tahun varchar 4 Tahun mendaftar id_test varchar 4 Id test peserta Foto varchar 20 Foto peserta 7. Tabel Ruang Nama Tabel : ruang Type File : Master Primary Key : id_ruang Foreign Key : id_fakultas Tabel 4.10 Ruang Nama Field Tipe Data Ukuran Keterangan id_ruang integer 4 Id ruang id_fakultas varchar 5 Id fakultas nama_ruang varchar 15 Nama ruangan Lantai varchar 2 Lantai ruangan 8. Jenis Paket Nama Tabel : jenis_paket Type File : Master Primary Key : id_paket Foreign Key : Tabel 4.11 Jenis Paket Nama Field Tipe Data Ukuran Keterangan id_paket integer 2 Id paket nama_paket varchar 12 Nama paket

4.3.8 Perancangan STD State Transition Diagram

Halam an Utam a Kontak Kam i Jadw al Ujian Info Gedung Bantuan Info Ujian Pencarian Klik Jadw al Ujian Tam pilkan Halam an Jadw al Ujian Klik Info Gedung Tam pilkan Info Gedung Klik Halam an Utam a Tam pilkan Halam an Utam a Klik Bantuan Tam pilkan Bantuan Klik Kontak Kam i Tam pilkan Halam an Kontak Kam i Klik Info Ujian Tam pilkan Halam an Info Ujian Klik Pencarian Tam pilkan Info Peserta Ujian Lokasi Ujian Klik Lokasi Ujian Tam pilkan Halam an Lokasi Ujian Klik Halam an Utam a Tam pilkan Halam an Utam a Klik Halam an Utam a Tam pilkan Halam an Utam a Klik Halam an Utam a Tam pilkan Halam an Utam a Klik Halam an Utam a Tam pilkan Halam an Utam a Klik Halam an Utam a Tam pilkan Halam an Utam a Klik Halam an Utam a Tam pilkan Halam an Utam a Gambar 4.25 Perancangan STD Halaman Utama Pada halaman utama terdapat delapan navigasi yaitu halaman utama, jadwal ujian, info gedung, kontak kami, info ujian, lokasi ujian, pencarian dan bantuan. Jadwal Ujian Kontak Kami Halaman Utama Info Ujian Pencarian Klik Jadwal Ujian Tampilkan Jadwal Ujian Klik Halaman Utama Tampilkan Halaman Utama Klik Jadwal Ujian Tampilkan Jadwal Ujian Klik Kontak Kami Tampilkan Kontak Kami Klik Pencarian Tampilkan Halaman Info Peserta Ujian Klik Jadwal Ujian Tampilkan Jadwal Ujian Klik Infol Ujian Tampilkan Informasi Ujian Klik Jadwal Ujian Tampilkan Jadwal Ujian Gambar 4.26 Perancangan STD Halaman Jadwal Ujian Pada halaman jadwal ujian terdapat info jadwal ujian dan dapat memilih menu halaman utama, kontak kami, info ujian dan pencarian. Lokas i Ujian Kontak Kam i Halam an Utam a Klik Lokas i Ujian Tam pilkan Lok asi Ujian Klik Halam an Utam a Tam pilkan Halam an Utam a Klik Kontak Kam i Tam pilkan Kontak Kam i Klik Pencarian Tam pilkan Halam an Info Pe serta Ujian Lokas i Ujian Mandir i Lokas i Ujian SNMPTN Lokas i UM B Klik Lokasi UMB Tampilkan Info Lokasi UMB Klik Lokas i Ujian Tam pilkan Lok asi Ujian Klik Lokasi Ujian SNMPTN Tampilkan Info Lokasi SNMPTN Klik Lokasi Ujian Mandiri Tampilkan Info Lokasi Mandiri Klik Info Uj ian Tampilk an Info Uj ian Info Ujian Pe ncar ian Gambar 4.27 Perancangan STD Halaman Lokasi Ujian Pada Gambar 4.27 merupakan halaman lokasi ujian yang terdapat menu lokasi UMB, SNMPTN dan Mandiri. Ada menu halaman utama untuk kembali ke halaman awal, menu kontak kami untuk ke halaman kontak kami dan info ujian serta halaman kontak kami. Info Ge dung Halam an Utam a Kontak Kam i Info Ujian Pe ncarian Klik Info Gedung Tam pilkan Halam an Info Ge dung Klik Halam an Utam a Tam pilkan Halam an Utam a Klik Info Gedung Tam pilkan Halam an Info Ge dung Klik Info Gedung Tam pilkan Info Gedung Klik Info Gedung Tam pilkan Halam an Info Ge dung Klik Kontak Kam i Tam pilkan Halam an Kontak Kam i Klik Pencarian Tam pilkan Halam an Info Pe serta Ujian Klik Info Ujian Tam pilkan Halam an Info Ujian Gambar 4.28 Perancangan STD Info Halaman Gedung Pada halaman info gedung terdapat menu halaman utama, kontak kami, info ujian dan pencarian. Info Ujian Halam an Utam a Mandiri PM DK UM B Kontak Kam i Pe ncarian Klik Info Ujian Tam pilkan Halam an Info Ujian Klik Info Ujian Tam pilkan Halam an Info Ujian Klik Info PMDK Tam pilkan Info PM DK Klik Halam an Utam a Tam pilkan Halam an Utam a Klik Info UMB Tam pilkan Halam an Info UM B Klik InfoM andiri Tam pilkan Halam an Mandiri Klik Info Ujian Tam pilkan Halam an Info Ujian Klik Kontak Kam i Tam pilkan Halam an Kontak Kam i Klik Pencarian Tam pilkan Halam an info Pe serta ujian SNMPTN Klik Lokas i SNMPTN Tam pilkan Halam an Info SNMPTN Gambar 4.29 Perancangan STD Halaman Info Ujian Pada halaman info ujian terdapat menu ujian PMDK, UMB, SNMPTN dan Mandiri serta dapat memilih menu halaman utama, pencarian dan kontak kami. Kontak Kam i Halam an Utam a Info Ujian Kontak Kam i Pencarian Klik Halam an Utam a Tam pilkan Halam an Utam a Klik Kontak Kam i Tam pilkan Halam an Kontak Kam i Klik Info Ujian Tam pilkan Halam an Info Ujian Klik Pencarian Tam pilkan Halam an Pencarian info peserta ujian Gambar 4.30 Perancangan STD Halaman Kontak Kami Pada halaman kontak kami terdapat menu halaman utama, kontak kami, info ujian dan pencarian. Bantuan Halam an Utam a Kontak Kam i Pencarian Klik Halam an Utam a Tam pilkan Halam an Utam a Klik Pencarian Tam pilkan Halam an info Peserta ujian Info Ujian Klik Info Ujian Tam pilkan Halam an Info Ujian Klik Kontak Kam i Tam pilkan Halam an Kontak Kam i Gambar 4.31 Perancangan STD Halaman Bantuan Dari halaman bantuan dapat menuju ke halaman utama, kontak kami, info ujian dan pencarian. Pe ncarian Kontak Kam i Halam an Utam a Info Ujian Pe ncarian Klik Halam an Utam a Klik Kontak Kam i Tam pilkan Halam an Kontak Kam i Klik Info Ujian Tam pilkan Halam an Info Ujian Klik Pencarian Tam pilkan Halam an Info Pe serta Ujian Tam pilkan Halam an Utam a Gambar 4.32 Perancangan STD Fitur Pencarian Pada halaman pencarian terdapat menu kontak kami, halaman utama, info ujian dan pencarian yang dapat terhubung pada masing-masing halaman menu. Gambar 4.33 Perancangan STD Halaman Admin Logout Home Data Master Data Transaksi Klik “Home” Tampilkan Home Klik “Data Master” Tampilkan Data Master Klik “Home” Tampilkan Home Klik “Data Transaksi” Tampilkan Data Transaksi Klik “Logout” Keluar Aplikasi

4.3.5 Perancangan Layar

Dalam tahap perancangan layar, terdapat perancangan layar aplikasi frontend dan backend.

A. Layar Aplikasi FrontEnd

Halaman utama jadwal ujian lokasi ujian info gedung bantuan pencarian Profil UIN Jakarta Tentang Aplikasi Logo UIN Teks judul kontak kami Info Ujian Gambar 4.34 Perancangan Halaman Utama Layar FrontEnd Pada tahap perancangan layar aplikasi frontend, dirancang tampilan dari menu-menu yang ada pada layar aplikasi frontend. Terdapat 4 icon navigasi menu di antaranya menu jadwal ujian, lokasi ujian, info gedung dan bantuan. Terdapat halaman utama dan kontak kami di atas logo UIN. Di bawah halaman utama dan kontak kami terdapat logo UIN dan teks judul. Di samping kontak kami terdapat kolom pencarian dan di bawah teks judul terdapat informasi profil UIN Jakarta dan tentang aplikasi. Gambar 4.35 Perancangan Halaman Jadwal Ujian Halaman ini berfungsi sebagai informasi mengenai jadwal ujian yang disampaikan dengan tipe informasi berupa teks. Gambar 4.36 Perancangan Halaman Lokasi Ujian Gambar 4.36 merupakan halaman lokasi ujian sebagai informasi mengenai lokasi ujian masuk berdasarkan range dari nomor peserta ujian. Lokasi Ujian UMB Jadwal Ujian SNMPTN Jadwal Ujian UMB Jadwal Ujian Mandiri Halaman Utama Kontak Kami Info Ujian Lokasi Ujian Gambar Gambar Gambar Gambar Lokasi Ujian SNMPTN Lokasi Ujian Mandiri Halaman Utama Kontak Kami Info Ujian Lokasi Ujian UMB Gambar 4.6 Halaman Info Gedung Gambar 4.37 Perancangan Halaman Info Gedung Halaman ini berfungsi sebagai informasi letak gedung-gedung yang ada pada area Kampus I UIN Jakarta. Gambar 4.38 Perancangan Halaman Bantuan Gambar 4.38 merupakan halaman bantuan yang berfungsi sebagai penujuk atau panduan pengguna dalam menggunakan aplikasi. Gambar Gambar Gambar Animasi Gambar Gambar Gambar Info Gedung Pintu Gerbang Rektorat Kantin Fakultas dan Lab Masjid dan Aula Bank Halaman Utama Kontak Kami Info Ujian Halaman Utama Kontak Kami Info Ujian Bantuan 1 2 3 4 5 6 Mencari Peserta Mencari Lokasi Penelusuran 3D Lihat Lokasi Kelas Mencetak Lokasi Ujian Info Kontak Gambar 4.39 Perancangan Halaman Info Ujian Halaman info ujian berfungsi sebagai informasi seputar ujian masuk yang diselenggarakan oleh Perguruan Tinggi Negeri PTN. Gambar 4.40 Perancangan Halaman Kontak Kami Gambar 4.40 adalah halaman kontak kami yang berfungsi sebagai halaman pengiriman pesan oleh pengguna kepada admin. Info Ujian Gambar Halaman Utama Kontak Kami Info Ujian Gambar Gambar Gambar Gambar Info Ujian UMB Lokasi Ujian Mandiri Lokasi Ujian PMDK Lokasi Ujian SNMPTN Kontak Kami Gambar Alamat : Website : TelpFax: Silahkan Isi Form Di bawah Ini. Judul : Email : Pesan : Halaman Utama Kontak Kami Info Ujian 123456 Gambar 4.41 Perancangan Halaman Pencarian Halaman ini berfungsi sebagai infromasi dari fitur pencarian peserta ujian masuk berupa foto, nomor ujian, jadwal ujian, gambar gedung dan gambar denah letak ruang kelas ruang ujian. Terdapat hypertext berupa cetak yang berfungsi untuk mencetak informasi ujian dan telusuri yang dapat terhubung pada halaman virtual reality untuk menelusuri gedung ujian. Gambar 4.42 Rancangan Layar Virtual Reality Lantai 1 Lantai 2 Awal Lantai 3 Lantai 4 Lantai 5 Lantai 6 Lantai 7 Video Teks Petunjuk penggunaan Teks Judul Virtual Reality Halaman Utama Kontak Kami Info Ujian Pencarian Lokasi Ujian Nomor Ujian Cetak Telusuri Denah Ruang Ujian Foto Peserta Ujian Gambar Gedung Info Peserta ujian Pada gambar 4.42 merupakan perancangan layar virtual reality yang mempunyai 9 tombol, di antaranya tombol lantai 1 sampai lantai 7 yang berfungsi sebagai tombol untuk menuju ke halaman pencarian atau telusuri letak ruang secara 3 dimensi pada lantai yang dipilih. Tombol awal untuk menuju ke halaman awal virtual reality dan tombol video yang berfungsi menuju ke halaman video untuk memutar video.

B. Layar Aplikasi BackEnd

Pada perancangan layar aplikasi backend terdapat layar halaman login dan administrator. Gambar 4.43 Perancangan Halaman Login pada Admin Pada Gambar 4.43 merupakan rancangan interface halaman login dari aplikasi backend. Pada halaman login terdapat form input username dan password serta tombol submit untuk masuk ke halam admin. Halaman login berfungsi sebagai halaman awal sebelum admin masuk ke halaman administrator. Logo UIN username Password submit Gambar 4.44 Perancangan Halaman Utama Admin Pada Gambar 4.44 merupakan gambar rancangan layar halaman administrator. Menu-menu dalam halaman administrator adalah home, data master, data transaksi dan logout. Halaman ini berfungsi sebagai proses input, update dan hapus data yang dilakukan oleh admin. Gambar 4.45 Perancangan Menu data Master Pada menu data master terdapat submenu fakultas, jenis test, jenis paket dan ruang. Home Data Master Data Transaksi Logout Logo UIN Teks Judul Logo Admin Fakultas Jenis Test Jenis Paket Ruang Selamat Datang Administrator Selamat datang Administrator Home Data Transaksi Logout Logo UIN Teks Judul Logo Admin Data Master Selamat Datang Administrator Gambar 4.46 Perancangan Halaman Input dan Lihat Data Fakultas Gambar 4.46 merupakan perancangan halaman input dan lihat data fakultas berfungsi sebagai mengolah data fakultas. Gambar 4.47 Perancangan Halaman Input Data Fakultas Perancangan halaman input data terdapat form id fakultas, fakultas dan gambar yang digunakan untuk mengisi data fakultas yang digunakan sebagai lokasi ujian. Home Data Master Data Transaksi Logout Logo Admin Fakultas Jenis Test Jenis Paket Ruang Logo UIN Teks Judul Input Data Lihat Data Home Data Master Logout Teks Judul Data Transaksi Logo UIN Choose Simpan ID Fakultas Fakultas Gambar Gambar 4.48 Perancangan Halaman Lihat Data Fakultas Gambar 4.48 merupakan perancangan dari halaman lihat data yang berfungsi sebagai hasil dari data yang diinput, terdapat action untuk melakukan edit dan hapus data. Gambar 4.49 Perancangan Submenu Jenis Test Terdapat menu pilihan input data dan lihat data pada sub menu jenis test yang digunakan untuk melakukan proses pengolahan data. Home Data Master Data Transaksi Logout Logo Admin Fakultas Jenis Test Jenis Paket Ruang Selamat Datang Administrator Logo UIN Teks Judul Input Data Lihat Data Home Data Master Logout Teks Judul Data Transaksi Logo UIN ID Fakultas Fakultas Action Edit |hapus Gambar 4.50 Perancangan Halaman Input Data Jenis Test Gambar 4.50 merupakan perancangan halaman input data dari submenu jenis test, terdapat form id test dan nama test untuk mengisi data jenis test. Gambar 4.51 Perancangan Halaman Lihat Data Jenis Test Perancangan halaman lihat data jenis test untuk melihat hasil data yang telah diinput pada halaman input data jenis test dan dapat melakukan edit dan hapus data. Simpan ID Test Nama Test Home Data Master Data Transaksi Logout Logo UIN Teks Judul Home Data Master Logout Teks Judul Data Transaksi Logo UIN ID Test Nama Test Action Edit |hapus Gambar 4.52 Perancangan Submenu Jenis Paket Terdapat menu pilihan input data dan lihat data pada sub menu jenis paket yang digunakan untuk melakukan proses pengolahan data. Gambar 4.53 Perancangan Halaman Input Data Jenis Paket Gambar 4.53 merupakan perancangan dari halaman input data jenis paket yang terdapat form id paket dan nama paket untuk mengisi data pada halaman input data jenis paket. Home Data Master Data Transaksi Logout Logo Admin Fakultas Jenis Test Jenis Paket Ruang Selamat Datang Administrator Logo UIN Teks Judul Input Data Lihat Data Simpan ID Paket Nama Paket Home Data Master Data Transaksi Logout Logo UIN Teks Judul Gambar 4.54 Perancangan Halaman Lihat Data Jenis Paket Perancangan halaman lihat data jenis paket untuk melihat hasil data yang telah diinput pada halaman input data jenis paket dan dapat melakukan edit dan hapus data. Gambar 4.55 Perancangan Submenu Ruang Terdapat menu pilihan input data dan lihat data pada submenu ruang yang digunakan untuk melakukan proses pengolahan data. Home Data Master Data Transaksi Logout Logo Admin Fakultas Jenis Test Jenis Paket Ruang Selamat Datang Administrator Logo UIN Teks Judul Input Data Lihat Data Home Data Master Logout Teks Judul Data Transaksi Logo UIN ID Paket Nama Paket Action Edit |hapus Gambar 4.456 Perancangan Halaman Input Data Ruang Gambar 4.56 merupakan perancangan dari halaman input data ruang yang terdapat form fakultas yang dapat dipilih melalui combo box, nama ruang dan lantai untuk mengisi data pada halaman input data ruang. Gambar 4.75 Perancangan Halaman Lihat Data Ruang Perancangan halaman lihat data ruang untuk melihat hasil data yang telah diinput pada halaman input data ruang dan dapat melakukan edit dan hapus data. Simpan Fakultas Nama Ruang Lantai -- Pilih Fakultas -- V Home Data Master Logout Teks Judul Data Transaksi Logo UIN Fakultas Nama Ruang Action Lantai Home Data Master Logout Teks Judul Data Transaksi Logo UIN Edit |hapus Gambar 4.58 Perancangan Submenu Data Transaksi Digunakan untuk mengolah data yang dapat selalu berubah, terdapat submenu jadwal, peserta dan lokasi. Gambar 4.59 Perancangan Menu Submenu Jadwal Terdapat menu pilihan input data dan lihat data pada submenu jadwal yang digunakan untuk melakukan proses pengolahan data. Home Data Master Data Transaksi Logout Logo Admin Selamat Datang Administrator Jadwal Peserta Lokasi Logo UIN Teks Judul Home Data Master Input Data Logout Logo Admin Selamat Datang Administrator Jadwal Peserta Lokasi Logo UIN Teks Judul Data Transaksi Lihat Data Gambar 4.60 Perancangan Halaman Input Data Jadwal Gambar 4.60 merupakan perancangan dari halaman input data jadwal yang terdapat form jenis test dan jenis paket yang dapat dipilih melalui combo box, jam, tanggal ujian, nama ujian dan tahun untuk mengisi data pada halaman input data jadwal. Gambar 4.61 Perancangan Lihat Data Jadwal Simpan Jenis Test Jenis Paket Jam -- Jenis Test -- V Tanggal Nama Ujian Tahun --- V -- Jenis Paket -- Jenis Test Jenis Paket Action Nama Ujian Jam Tanggal Home Data Master Logout Teks Judul Data Transaksi Logo UIN Home Data Master Logout Teks Judul Data Transaksi Logo UIN Edit |hapus Perancangan halaman lihat data jadwal untuk melihat hasil data yang telah diinput pada halaman input data jadwal dan dapat melakukan edit dan hapus data. Gambar 4.62 Perancangan Submenu Peserta Terdapat menu pilihan input data dan lihat data pada submenu peserta yang digunakan untuk melakukan proses pengolahan data. Gambar 4.63 Perancangan Halaman Input Data Peserta Home Data Master Input Data Logout Logo Admin Jadwal Peserta Lokasi Data Transaksi Lihat Data Logo UIN Teks Judul Logo UIN Teks Judul Home Data Master Logout Data Transaksi Simpan No. Ujian Nama Jenis Paket Jenis Test Alamat Telp Email Tahun Foto Gambar 4.54 merupakan perancangan dari halaman input data peserta yang terdapat form jenis nomor ujian, nama, alamat telp, email, jenis test, jenis paket tahun dan foto untuk mengisi data pada halaman input data jadwal. Gambar 4.64 Perancangan Halaman Lihat Data Peserta Perancangan halaman lihat data peserta untuk melihat hasil data yang telah diinput pada halaman input data jadwal dan dapat melakukan edit dan hapus data. Gambar 4.65 Perancangan Submenu Lokasi Terdapat menu pilihan input data dan lihat data pada submenu lokasi yang digunakan untuk melakukan proses pengolahan data. Input Data Logo Admin Jadwal Peserta Lokasi Lihat Data Home Data Master Logout Teks Judul Data Transaksi Logo UIN Home Data Master Logout Data Transaksi Simpan Logo UIN Teks Judul No. Ujian Nama Tahun Jenis Alamat Telp Email Action Edit |hapus Gambar 4.66 Perancangan Halaman Input Data Lokasi Gambar 4.66 merupakan perancangan dari halaman input data lokasi terdapat form range nomor ujian, jenis test, dan ruang untuk mengisi data pada halaman input data lokasi. Gambar 4.67 Perancangan Lihat Data Lokasi Perancangan halaman lihat data peserta untuk melihat hasil data yang telah diinput pada halaman input data lokasi dan dapat melakukan edit dan hapus data. Fakultas Ruang Action Lantai Jenis Test Home Data Master Logout Teks Judul Data Transaksi Logo UIN Home Data Master Logout Teks Judul Data Transaksi Logo UIN Range Jenis Test Ruang Range No. Ujian --Ruang-- --jenis test-- V V --jenis test-- V --Ruang-- V - - Home Data Master Logout Teks Judul Data Transaksi Logo UIN Simpan Edit |hapus Dalam merancang aplikasi, peneliti berpedoman pada delapan aturan emas interaksi manusia komputer yang akan dijelaskan sebagai berikut:

1. Konsistensi

Peneliti merancang tampilan halaman aplikasi frontend dan backend dengan peletakan control content yang sama pada halaman-halaman terkait dengan aplikasi.

2. Memungkinkan pengguna untuk menggunakan shortcut

Perancangan menu navigasi menggunakan shortcut yang berfungsi mempercepat pengguna dalam berinteraksi dengan isi menu.

3. Memberikan umpan balik yang informatif

Tombol menu dirancang untuk memberi umpan balik berupa isi menu yang sesuai dengan tombol yang digunakan pada perancangan. Apabila ada kesalahan dalam menggunakan aplikasi maka akan keluar peringatan berupa teks.

4. Merancang dialog untuk menghasilkan suatu penutupan

Peneliti merancang dialog pada aplikasi untuk menentukan proses akhir dari penggunaan aplikasi berupa tombol keluar untuk menghasilkan suatu penutupan.

5. Memberikan penanganan kesalahan yang sederhana

Jika terdapat kesalahan pada penggunaan aplikasi, tidak akan menyebabkan kesalahan fatal pada aplikasi. Comtohnya jika pengguna salah mengklik tombol maka informasi tidak akan keluar.

6. Mudah kembali ke tindakan sebelumnya

Aplikasi dirancang dengan tidak menggunakan banyak tombol menu yang dapat membingungkan pengguna dalam menggunakan aplikasi dan control content dibuat konsisten pada setiap halaman agar mudah kembali ke tindakan sebelumnya.

7. Mendukung tempat pengendali internal internal locus of control

Peneliti merancang sistem aplikasi sesederhana mungkin sehingga pengguna dapat mengeksplore aplikasi tanpa takut terjadi kesalahan yang dapat merusak program dan tidak terikat oleh aturan-aturan sistem yang ada.

8. Mengurangi beban ingatan jangka pendek

Tampilan antarmuka dirancang sederhana dengan tidak menggunakan banyak tombol dan hypertext atau hyperpicture pada setiap halaman untuk memudahkan pengguna dalam mengingat alur dari penggunaan aplikasi. Penjelasan di atas adalah gambaran perancangan aplikasi yang mengikuti acuan delapan aturan emas agar sesuai dengan syarat interaksi manusia komputer.

4.4 Implementasi

Tahap implementasi merupakan tahap yang terdiri dari prototyping dan beta testing. Prototyping dijelaskan melalui implementasi sistem yang berupa pembangunan aplikasi frontend dan backend. Berikut ini adalah pembahasan dalam tahap implementasi.

4.4.1 Prototyping

Pada tahap prototyping menjelaskan tentang implementasi sistem yang dibuat berupa penjelasan dari pembangunan aplikasi frontend dan backend.

A. Implementasi sistem

Pada tahap implementasi sistem, peneliti menampilkan hasil akhir pembuatan dari tahap-tahap sebelumnya. Pada tahap ini, semua elemen-elemen dibangun dan disatukan sehingga menjadi sebuah aplikasi multimedia berbasis web.

1. Pembangunan Aplikasi FrontEnd

Pembangunan aplikasi frontend terdiri dari membuat background pada adobe photoshop, membuat animasi pada halaman website, membuat dan memberi animasi peta lokasi, membuat denah ruang ujian pada Fakultas Dakwah dan Ushuluddin dan penunjuk letak gedung ujian pada Kampus I UIN Jakarta, pengkodean aplikasi dengan menggunakan dreamweaver, membuat interface virtual reality, pembuatan pemodelan 3 dimensi pencarian letak ruang ujian secara Virtual Reality dan pembuatan video pengenalan gedung lokasi ujian pada Gedung Fakultas Dakwah dan Ushuluddin.

a. Membuat Background pada Adobe Photoshop

Gambar 4.68 Background Halaman Utama Pada Gambar 4.68 merupakan latar belakang dari halaman utama yang dibuat pada Adobe Photoshop dengan resolusi 800x600 pixels dan disimpan dengan format .png.

b. Membuat Animasi pada Halaman Utama

Gambar 4.69 Membuat Animasi pada Interface Setelah pembuatan background selesai dibuat, langkah selanjutnya adalah memberi animasi pada halaman utama agar tampilan menjadi lebih menarik dan interaktif dengan menggunakan Macromedia Flash. Pada tombol navigasi diberi link dengan action script sehingga user dapat terhubung ke halaman lain pada website.

c. Membuat Peta lokasi

Gambar 4.70 Peta Lokasi Pembuatan visualisasi peta lokasi gedung UIN Kampus I menggunakan Adobe Photoshop yang bertujuan memberi informasi berupa letak gedung yang dapat membantu user dalam melakukan pencarian lokasi gedung ujian. Gambar 4.71 Animasi Peta Lokasi Gambar 4.62 merupakan pemberian animasi pada visualisasi peta lokasi dengan memberikan action script pada masing-masing gambar gedung yang bertujuan untuk menampilkan informasi letak gedung serta keterangan gedung yang ditampilkan secara menarik dan interaktif.

d. Membuat Denah Ruang Ujian