TUGAS AKHIR
Nama : SYAMSUL ARIF
NIM : 08.51016.0032
Program Studi : DIV Komputer Multimedia
SEKOLAH TINGGI
MANAJEMEN INFORMATIKA DAN KOMPUTER SURABAYA
2012
STIKOM
viii
ABSTRAK
Kata Kunci: Website, AJAX, casual enjoyble
Dalam Tugas Akhir ini akan dibuat “Rancang Bangun Website Program Studi DIV Komputer Multimedia STIKOM Surabaya”. Berdasarkan hasil wawancara dengan Ketua Program Studi DIV Komputer Multimedia STIKOM Surabaya, Bapak Abdul Aziz, S.Sn (2012) Program Studi DIV Komputer Multimedia STIKOM Surabaya adalah salah satu Program Studi dari sebuah Sekolah Tinggi Manjemen Informatika dan Teknik Komputer Surabaya. Bapak Abdul Aziz, S.Sn (2012) menambahkan, Program Studi DIV Komputer Multimedia STIKOM Surabaya belum memiliki Website penunjang yang lebih dinamis selain daripada yang ada.
Dari latar belakang masalah dirumuskan bagaimana merancang dan membangun website Program Studi DIV Komputer Multimedia STIKOM Surabaya. Perancangan website ini menggunakan bahasa Asynchronous Javascript And XML merupakan suatu teknik baru dalam dunia web, tetapi bukan merupakan bahasa pemrograman yang baru. 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 dan lain-lain.
Metode penelitian yang digunakan dalam proses pembuatan CD pembelajaran interaktif ini dilakukan berdasarkan SDLC (System Development Life Cycle) dimana SDLC didefinisikan oleh Dewan Perwakilan Rakyat AS sebagai sebuah proses pengembangan software yang digunakan oleh analis sistem, untuk mengembangkan sebuah sistem informasi. Tahapan-tahapan yang digunakan dalam SDLC diantara adalah planning atau perencanaan, analisa, desain, implementasi (build and coding), pengujuan (testing), dan pemeliharaan (maintenance).
Karena itu pentingnya Perancangan Website ini untuk dirancang sebagai media penunjang Program Studi DIV Komputer Multimedia STIKOM Surabaya dan diharapkan dapat memberikan informasi dalam bidang Multimedia dan menjadi forum khusus warga Program Studi DIV Komputer Multimedia STIKOM Surabaya.
STIKOM
xi
KATA PENGANTAR ... ix
DAFTAR ISI ... xi
DAFTAR GAMBAR ... xiii
DAFTAR TABEL ... xv
DAFTAR LAMPIRAN ... xvi
BAB I PENDAHULUAN ... 1
1.1 Latar Belakang Masalah ... 1
1.2 Rumusan Masalah ... 2
1.3 Batasan Masalah ... 2
1.4 Tujuan ... 3
1.5 Manfaat ... 3
BAB II LANDASAN TEORI ... 4
2.1 Pengertian Website ... 4
2.2 Pengertian Framework ... 5
2.3 Pengertian AJAX ... 6
2.4 Pengertian Dasar CSS ... 7
2.5 Pengertian Dasar PHP ... 8
2.6 Pengertian Dasar MySQL ... 9
2.7 Pengertian Komunikasi ... 10
2.8 Pengerrtian Nirmana ... 10
STIKOM
xii
2.9 Pengertian Tipografi ... 12
BAB III METODOLOGI DAN PERANCANGAN KARYA ... 14
3.1 Tahap Planning atau Perencanaan ... 14
3.2 Tahap Analisa ... 16
3.3 Tahap desain atau Perancangan ... 24
3.4 Tahap Publikasi ... 29
BAB IV IMPLEMENTASI KARYA ... 32
4.1 Kebutuhan Sistem ... 33
4.2 Instalasi Program ... 33
4.3 Implementasi Desain ... 36
4.4 Manajemen Model ... 40
4.5 Manajemen View ... 42
4.6 Manajemen Controller ... 44
4.7 Evaluasi ... 45
4.8 Publikasi ... 48
BAB V PENUTUP ... 51
5.1 Kesimpulan ... 51
5.2 Saran-saran ... 51
DAFTAR PUSTAKA ... 52
DAFTAR RIWAYAT HIDUP ... 54
LAMPIRAN ... 55
STIKOM
1
BAB I
PENDAHULUAN
1.1 Latar Belakang Masalah
Dalam Tugas Akhir ini akan dibuat “Rancang Bangun Website Program Studi DIV Komputer Multimedia STIKOM Surabaya”. Berdasarkan hasil wawancara dengan Ketua Program Studi DIV Komputer Multimedia STIKOM Surabaya, Bapak Abdul Aziz, S.Sn (2012) Program Studi DIV Komputer Multimedia STIKOM Surabaya adalah salah satu Program Studi dari sebuah Sekolah Tinggi Manjemen Informatika dan Komputer Surabaya. Bapak Abdul Aziz, S.Sn (2012) menambahkan, Program Studi DIV Komputer Multimedia STIKOM Surabaya belum memiliki Website penunjang yang lebih dinamis selain daripada yang ada.
Perancangan Website ini dibangun menggunakan bahasa AJAX. AJAX memiliki kepanjangan Asynchronous Javascript And XML merupakan suatu teknik baru dalam dunia web, tetapi bukan merupakan bahasa pemrograman yang baru. 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 dan lain-lain.
Karena itu pentingnya Perancangan Website ini untuk dirancang sebagai media penunjang Program Studi DIV Komputer Multimedia STIKOM Surabaya.
STIKOM
2
Perancangan Website ini diharapkan dapat memberikan informasi dalam bidang Multimedia dan sebagai galeri karya-karya mahasiswa Program Studi DIV Komputer Multimedia STIKOM.
1.2 Rumusan Masalah
Dari latar belakang masalah dirumuskan bagaimana “Merancang dan membangun Website Program Studi DIV Komputer Multimedia STIKOM Surabaya”?
1.3 Batasan Masalah
Adapun batasan masalah dalam “Rancang Bangun Website Program Studi DIV Komputer Multimedia STIKOM Surabaya”, antara lain sebagai berikut: 1. Website ini menggunakan Bahasa Asynchronus JavaScript And XML. 2. Website ini dibuat sebagai website program studi.
3. Website ini dibuat sebagai sub website.
4. Website ini hanya dapat menampung gambar dengan ekstensi jpeg, dan png. 5. Website ini hanya dapat menampung video dengan resolusi yang telah
ditentukan.
1.4 Tujuan
Perancangan ini bertujuan untuk membuat “Website Program Studi DIV Komputer Multimedia STIKOM Surabaya”.
STIKOM
1.5 Manfaat
Perancangan ini diharapkan akan bermanfaat bagi mahasiswa dan pemegang kebijakan, antara lain sebagai berikut:
1. Bagi Mahasiswa
a. Mahasiswa mudah dalam mendapatkan informasi.
b. Dengan menggunakan bahasa Asynchronous Javascript and XML akan membuat website lebih dinamis dan efektif.
c. Meningkatkan apresiasi dan kreativitas mahasiswa. 2. Bagi Pemegang Kebijakan
a. Sebagai website Program Studi DIV Komputer Multimedia STIKOM Surabaya.
b. Sebagai media penghubung dan informasi-informasi dunia multimedia, serta sebagai galeri karya-karya mahasiswa Program Studi DIV Komputer Multimedia STIKOM Surabaya.
STIKOM
4
BAB II
LANDASAN TEORI
Dalam “Rancang Bangun Website Program Studi DIV Komputer
Multimedia STIKOM Surabaya” ini ada beberapa landasan teori yang
mendukung, antara lain: Pengertian website itu sendiri dan website terbagi
menjadi 2 yaitu: website statis dan dinamis, pengertian framework, pengertian AJAX, pengertian PHP (PHP: Hypertext Preprocessor), pengertian CSS (Cascading Style Sheet), pengertian mySQL, pengertian Nirmana, dan pengertian Tipografi. Rancang bangun website ini menggunakan bahasa AJAX
(Asynchronous JavaScript And XML), dimana website akan terkesan dinamis. Selain menggunakan bahasa AJAX, fitur-fitur Framework juga diterapkan dalam
website ini dan penggabungan antara bahasa PHP sebagai program dan CSS
sebagai style sheet.
2.1 Pengertian Website
Menurut Pipiapioh (2010) Website merupakan komponen atau kumpulan
komponen yang terdiri dari teks, gambar, suara animasi sehingga lebih merupakan
media informasi yang menarik untuk dikunjungi. Website adalah halaman
informasi yang disediakan melalui jalur internet sehingga bisa diakses di seluruh
dunia selama terkoneksi dengan jaringan internet. Secara garis besar, website bisa
digolongkan menjadi 2 bagian yaitu:
STIKOM
1. Website Statis
Menurut Pipiapioh. (2010) Website Statis adalah web yang mempunyai
halaman tidak berubah. Artinya untuk melakukan perubahan pada suatu
halaman pada website dilakukan secara manual dengan mengedit source code yang menjadi struktur dari website tersebut.
2. Website Dinamis
Menurut Arief, R. (2009) Website Dinamis merupakan website yang secara
struktur diperuntukan untuk update sesering mungkin. Website dinamis
terdiri dari halaman frontend yang bisa diakses oleh user pada umumnya, juga
disediakan halaman backend untuk mengedit kontent dari website. Contoh
umum mengenai website dinamis adalah web berita atau web portal yang di
dalamnya terdapat fasilitas berita, polling dan sebagainya.
2.2 Pengertian Framework
Secara umum, framework menggunakan struktur MVC (Model, View, Controller). “Framework adalah sekumpulan library yang diorganisasikan pada sebuah rancangan arsitektur untuk memberikan kecepatan, ketepatan, kemudahan
dan konsistensi didalam pengembangan aplikasi dari definisi tersebut” (Siena,
2009). Framework terdiri dari: 1. Model
Model mencakup semua proses yang terkait dengan pemanggilan struktur
data baik berupa pemanggilan fungsi, inputprocessing atau mencetak output ke dalam browser.
STIKOM
6
2. View
View mencakup semua proses yang terkait layout output. Bisa dibilang untuk menaruh template interface website atau aplikasi.
3. Controller
Controller mencakup semua proses yang terkait dengan pemanggilan database dan kapsulisasi proses-proses utama. Jadi semisal dibagian ini ada
file bernama member.php, maka semua proses yang terkait dengan member
akan dikapsulisasi/dikelompokan dalam file ini.
Kelebihan dengan adanya framework akan lebih mempermudah memahami mekanisme kerja dari sebuah applikasi. Ini tentunya akan sangat membantu
proses pengembangan sistem yang dilakukan secara team.
2.3 Pengertian AJAX
AJAX adalah kependekan dari Asycronous javascript and XML, dalam bahasa Indonesianya asinkron antara javascript dan XML, pengertian mudahnya
menggabungkan antara javascript dan xml untuk mengakses sumber data di
server. Jadi server tidak diakses secara langsung, biarkan mesin AJAX yang mengaksesnya. Javascript sebagai pemrograman di sisi client (artinya program yang dibuat dengan javascript, bisa dijalankan tanpa menggunakan server) sekarang ini bisa digunakan untuk mengakses server secara asinkron (di belakang
layar, artinya proses akses tidak terlihat oleh user). XML digunakan untuk format
data hasil kembalian dari server. Javascript bisa mengakses server dengan
menggunakan suatu object yang disebut dengan XMLHttpRequest. Object inilah
STIKOM
yang akan menjadi inti mesin dari AJAX, dari mengkases data sampai dengan
menerima respon dari server, semuanya dikendalikan oleh object ini.
XML digunakan untuk menampung data ketika dikirimkan dari server ke
komputer client (web browser). Dokumen xml dibuat sesederhana mungkin, agar
bisa diparser dengan mudah dan cepat. Yang perlu diingat, dengan menggunakan
ajax, server bukanlah mengirimkan halaman, tetapi data. Ada perbedaan yang
tipis antara data dan halaman jika kita berbicara soal web. Data dalam web adalah
inti dari informasi itu sendiri, tidak peduli bagaimana data tersebut ditampilkan,
bahkan data tidak memiliki tampilan. Tampilan akan dibuat secara on the fly di
komputer client. Sedangkan halaman sudah memiliki tampilan, sudah termasuk
didalamnya data, sehingga jumlah bit yang dikirim oleh server menjadi lebih
banyak. Ajax menggunakan XML sebagai alat angkut datanya karena
ke-fleksi-belan format XML. Dokumen xml akan diparser oleh XML parser, sehingga bisa
ditampilkan sesuai dengan keinginan (http://google.com/2011/05/pengertian
ajax.html diakses 22 Mei 2011).
2.4 Pengertian Dasar CSS
CSS atau Cascading Style Sheet merupakan salah satu bahasa standar pemrograman web. Style Sheets merupakan feature yang sangat penting dalam membuat Dynamic HTML.
Style sheet merupakan tempat dimana anda mengontrol dan mengatur style yang ada. Style sheet mendeskripsikan bagaimana tampilan document HTML di layar.
STIKOM
8
Anda juga bisa membuat efek-efek sepesial di web anda dengan
menggunakan style sheet. Secara teoritis anda bisa menggunakan style sheet technology dengan HTML. Akan tetapi pada prakteknya hanya Cascading Style Sheet (CSS) technology yang support pada hampir semua web Browser. Karena CSS telah di setandartkan oleh World Wide Web Consortium (W3C) untuk di gunakan di web browser (http://google.com/2011/07/pengertian-dasar-css.html
diakses 28 Juli 2012).
2.5 Pengetian Dasar PHP
PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu
itu PHP bernama FI (Form Interpreted). Pada saat tersebut PHP adalah sekumpulan script yang digunakan untuk mengolah data form dari web. Saat
ini, PHP merupakan kepanjangan “PHP: Hypertext Preprocessor” adalah sebuah bahas script berjenis server side yang menyatu dengan HTML. Sintaks dan perintah-perintah yang dimasukkan akan sepenuhnya dijalankan dan dikerjakan
oleh server dan disertai pada halaman HTML biasa. PHP bertujuan untuk membuat aplikasi-aplikasi yang dijalankan di atas teknologi Web. Dalam hal ini,
aplikasi pada umumnya akan memberikan hasil pada Web browser, tetapi prosesnya secara keseluruhan dijalankan dan dikerjakan di Web server (http://google.com/2011/07/pengertian-dasar-php.html diakses 22 Juli 2012).
STIKOM
2.6. Pengertian Dasar MySQL
MySQL adalah sebuah sistem manajemen database relasi (relational database management system) yang bersifat open source. (Arbie, 2004: 5) MySQL merupakan buah pikiran dari Michael “Monty” Widenius, David Axmark
dan Allan Larson yang di mulai tahun 1995. Mereka bertiga kemudian mendirikan
perusahaan bernama MySQL AB di Swedia.
Pengertian MySQL menurut MySQL manual adalah sebuah open source software database SQL (Search Query Language) yang menangani sistem manajemen database dan sistem manajemen database relational. MySQL adalah
open source software yang dibuat oleh sebuah perusahaan Swedia yaitu MySQL AB. MySQL mempunyai fitur-fitur yang sangat mudah dipelajari bagi para
penggunanya dan dikembangkan untuk menangani database yang besar dengan
waktu yang lebih singkat. Kecepatan, konektivitas dan keamanannya yang lebih
baik membuat MySQL sangat dibutuhkan untuk mengakses database di internet.
MySQL versi 1.0 di rilis pada Mei 1996 dan penggunaannya hanya terbatas
di kalangan perusahaan saja. Barulah pada bulan Oktober 1996, MySQL versi
3.11.0 di rilis ke masyarakat luas. MySQL menggunakan bahasa standar SQL
(Structure Query Language) sebagai bahasa interaktif dalam mengelola data.
MySQL memiliki kinerja, kecepatan proses dan ketangguhan yang tidak kalah
dibanding database-database besar lainnya yang komersil seperti ORACLE,
Sybase, Unify dan sebagainya. MySQL dapat berjalan di atas banyak sistem
operasi seperti Linux, Windows, Solaris, FreeBSD, Mac OS X, dan lain
sebagainya.
STIKOM
10
2.7 Pengertian Komunikasi
Komunikasi pada dasarnya merupakan suatu proses yang menjelaskan
siapa? mengatakan apa? dengan saluran apa? kepada siapa? dengan akibat atau
hasil apa? (who? says what? in which channel? to whom? with what effect?). (Lasswell 1960).
Media komunikasi merupakan perantara dalam penyampaian informasi.
Jenis-jenis media komunikasi ada bermacam-macam, antara lain berupa bahasa,
tulisan, isyarat, alat peraga atau alat elektronik. Media komunikasi merupakan
unsur yang sangat penting dalam proses komunikasi. Dengan menggunakan media
komunikasi maka aliran informasi, berita atau pesan dapat dikirim atau diterima
dengan mudah dan cepat. Menurut (Barata, 2003) media komunikasi
dikelompokkan menjadi tiga jenis berdasarkan dari alat yang digunakannya, yaitu:
media komunikasi audi, media komunikasi visual, dan media komunikasi audio
visual. Website termasuk media komunikasi audio visual, karena website
merupakan media komunikasi yang dapat memancarkan suara dan disertai tulisan
ataupun gambar, sehingga memungkinkan komunikasi dapat ditangkap melalui
saluran pendengaran dan pengelihatan.
2.8 Pengertian Nirmana
Nirmana adalah pengorganisasian atau penyusunan elemen-elemen visual
seperti titik, garis, warna, ruang dan tekstur menjadi satu kesatuan yang harmonis.
Menrut (Sadjiman, 2005) dalam Buku Dasar-Dasar Tata Rupa dan Desain
menyebutkan Nirmana adalah pengorganisasian atau penyusunan elemen-elemen
STIKOM
visual seperti titik, garis, warna, ruang dan tekstur menjadi satu kesatuan yang
harmonis. Nirmana dapat juga diartikan sebagai hasil angan-angan dalam bentuk
dwimatra, trimatra yang harus mempunyai nilai keindahan. Elemen-elemen seni
rupa dapat dikelompokan menjadi 4 bagian berdasarkan bentuknya.
1. Titik, titik adalah suatu bentuk kecil yang tidak mempunyai dimensi. Raut
titik yang paling umum adalah bundaran sederhana, mampat, tak bersudut dan
tanpa arah.
2. Garis, garis adalah suatu hasil goresan nyata dan batas limit suatu benda,
ruang, rangkaian masa dan warna.
3. Bidang, bidang adalah suatu bentuk pipih tanpa ketebalan, mempunyai
dimensi pajang, lebar dan luas; mempunyai kedudukan, arah dan dibatasi oleh
garis.
4. Gempal, gempal adalah bentuk bidang yang mempunyai dimensi ketebalan
dan kedalaman.
Penyusunan merupakan suatu proses pengaturan atau disebut juga
komposisi dari bentuk-bentuk menjadi satu susunan yang baik. Ada beberapa
aturan yang perlu digunakan untuk menyusun bentuk-bentuk tersebut. Walaupun
penerapan prinsip-prinsip penyusunan tidak bersifat mutlak, namun karya seni
yang tercipta harus layak disebut karya yang baik. Perlu diketahui bahwa
prinsip-prinsip ini bersifat subyektif terhadap penciptanya. Dalam ilmu desain grafis,
selain prinsip-prinsip diatas ada beberapa prinsip utama untuk tujuan komunikasi
dari sebuah karya desain.
STIKOM
12
1. Ruang Kosong (White Space) Ruang kosong dimaksudkan agar karya tidak terlalu padat dalam penempatannya pada sebuah bidang dan menjadikan
sebuah obyek menjadi dominan.
2. Kejelasan (Clarity) Kejelasan atau clarity mempengaruhi penafsiran penonton akan sebuah karya. Bagaimana sebuah karya tersebut dapat mudah dimengerti
dan tidak menimbulkan ambigu/ makna ganda.
3. Kesederhanaan (Simplicity) Kesederhanaan menuntut penciptaan karya yang tidak lebih dan tidak kurang. Kesederhanaan seing juga diartikan tepat dan
tidak berlebihan. Pencapaian kesederhanaan mendorong penikmat untuk
menatap lama dan tidak merasa jenuh.
4. Emphasis (Point of Interest) Emphasis atau disebut juga pusat perhatian, merupakan pengembangan dominasi yang bertujuan untuk menonjolkan salah
satu unsur sebagai pusat perhatian sehingga mencapai nilai artistic.
Maka dari itu nirmana merupakan dasar dari sebuah desain layout dan
komposisi warna, agar memperoleh sebuah hasil desain yang baik dan sesuai yang
diharapkan (http://www.satriamultimedia.com/artikel teori desain grafis nirmana
html diakses 22 Mei 2012).
2.9 Pengertian Tipografi
Tipografi adalah suatu ilmu dalam memilih dan menata huruf dengan
pengaturan penyebarannya pada ruang-ruang yang tersedia, untuk menciptakan
kesan tertentu, sehingga dapat menolong pembaca untuk mendapatkan
kenyamanan membaca semaksimal mungkin. Menurut (Kusrianto, 2010)
STIKOM
“Tipografi adalah seni dan teknik dalam merancang maupun menata aksara dalam
kaitannya untuk menyusun publikasi visual, baik cetak maupun non-cetak”.Font
adalah nama sebuah jenis huruf. Font memiliki gaya seperti miring, tebal,
miring-tebal. Font juga memiliki dua jenis, yaitu Serif dan Sans Serif.
Serif jenis huruf yang memiliki garis-garis kecilyang berdiri horizontal pada
badan huruf. Garis-garis kecil ini disebut counterstroke atau Serif Bracketed.
Ciri-ciri utama jenis huruf serif yaitu:
1. Kurva poros yang miring ke kiri.
2. Lengkungan Serif/counterstroke.
3. Ada kontras antara tebal dan tipis garis font.
4. Ada palang/garis horizontal pada font.
Sans Serif adalah jenis huruf yang memiliki garis-garis kecil dan bersifat
solid. Jenis huruf sans serif lebih tegas, bersifat fungsional dan lebih modern.
Ciri-ciri utama jenis huruf san serif yaitu:
1. Garis melengkung berbentuk square/persegi.
2. Ada perbedaan kontras yang halus.
3. Bentuk mendekati penekanan kea rah garis vertical.
STIKOM
14
BAB III
METODOLOGI DAN PERANCANGAN KARYA
Pada BAB ini dijelaskan tentang Metodologi Penelitian, Study Existing, dan Publikasi yang menjadi dasar perancangan karya yang akan dibuat, atau yang bi-asa dikenal sebagai proses pra-produksi. Metode penelitian yang digunakan dalam proses pembuatan CD pembelajaran interaktif ini dilakukan berdasarkan SDLC (System Development Life Cycle) dimana SDLC didefinisikan oleh Dewan Perwakilan Rakyat AS sebagai sebuah proses pengembangan software yang digunakan oleh analis sistem, untuk mengembangkan sebuah sistem informasi. Tahapan-tahapan yang digunakan dalam SDLC diantara adalah planning atau perencanaan, analisa, desain, implementasi (build and coding), pengujuan (testing), dan pemeliharaan (maintenance).
3.1 Tahap Planning atau Perencanaan
Perencanaan, untuk menghasilkan sebuah website yang berkualitas perlu dilakukan perencanaan yang matang dengan melakukan studi kelayakan tentang metode yang digunakan dalam proses pengumpulan data. Studi kelayakan yang dilakukan adalah metode pengumpulan data, teknik pengumpulan data, dan teknik analisa data.
1. Metode Pengumpulan Data
Metode pengumpulan data dilakukan dengan cara mengidentifikasi dan membuat alur perancangan yang akan dilaksanakan. Dalam tahap ini,
STIKOM
perencanaan dapat dilihat dalam diagram metodologi perancangan berdasarkan metode SDLC berikut ini:
Gambar 3.1 Diagram alur metode SDLC
2. Teknik Pengumpulan Data
Teknik pengumpulan data dalam proses pembuatan website ini dilakukan dengan 3 (tiga) cara, yaitu: studi pustaka, wawancara, dan observasi.
a. Studi pustaka, yaitu pengumpulan data dari perpustakaan yang dilakukan dengan membaca dan mempelajari buku literatur, majalah, artikel internet, dan informasi lainnya sebagai bahan tinjauan pustaka yang berkaitan penelitian ini.
STIKOM
16
b. Wawancara, mencari data dengan cara melakukan tanya jawab pada pihak terkait, yang mempunyai wewenang atas data-data yang berhubungan dengan objek penelitian.
c. Observasi, pada tahap ini diadakan kegiatan pengamatan mengenai alur dan navigasi website yang akan dibangun, agar dapat menjadi website yang user friendly.
3. Teknik Analisa Data
Dalam pembuatan “Rancang Bangun Website Program Studi DIV Komputer Multimedia STIKOM Surabaya” menggunakan teknik pendekatan kualitatif, karena subjek penelitian dan informan yang dipilih tidak berdasarkan atas dasar pertimbangan kualitas keterangan dalam informasi yang diberikan. Artinya lebih mementingkan kecukupan informasi yang diperlukan.
3.2 Tahap Analisa
Tujuan dari analisa sistem adalah untuk menentukan masalah upaya untuk memperbaiki sistem. Sehingga diharapkan dengan dilakukannya analisa sistem, maka permasalahan yang ada akan dapat teratasi dan menghasilkan suatu sistem yang lebih baik. Adapun langkah-langkah yang dilakukan adalah Studi Eksisting, analisa keyword, analisa warna, dan analisa typografi.
STIKOM
3.2.1 Studi Eksisting
Study Existing yang dilakukan adalah dengan menganalisa subyek yaitu “Website Program Studi DIV Komputer Multimedia STIKOM Surabaya” serta menganalisa kompetitor. Kegiatan ini bermanfaat agar dalam proses perancangan Tugas Akhir dapat menghasilkan suatu karya yang sesuai dengan konsep.
1. Analisa Subyek
Perancangan Website ini menarik karena Website dibangun menggunakan bahasa AJAX. Dengan adanya AJAX, akses data ke server yang dikirim melalui client via web dapat lebih cepat daripada mekanisme biasa.
Website ini untuk dirancang sebagai penunjang Program Studi DIV Komputer Multimedia STIKOM Surabaya dan diharapkan dapat memberikan informasi dalam bidang Multimedia dan menjadi forum khusus warga Program Studi DIV Komputer Multimedia STIKOM Surabaya.
2. Analisa Kompetitor
a. Website Program Studi DIII Komputer Multimedia STIKOM Surabaya Website ini sangat menarik, sederhana, dan jelas dalam segi konten website. Informasi – informasi yang ditampilkan sangat lengkap dan jelas.Website ini mempunyai menu utama yaitu Home, Profil, Galeri, dan Support.
STIKOM
18
Gambar 3.2 website DIII Komputer Multimedia STIKOM Surabaya
b. Website DKV UPH
Website ini sederhana, dan jelas dalam segi konten website. Informasi-informasi yang ditampilkan sangat lengkap dan jelas. Website ini mempunyai menu utama yaitu Home, Academic Program, Environment & facilities, Creative Gallery, dan inside.
Gambar 3.3 website dkv UPH
STIKOM
3.2.2 Analisa STP (Segmentation Targeting Positioning)
Pembagian segmentasi, target audien dan posisi produk sangat diperhatikan agar produk yang akan dihasilkan bisa sesuai dengan kondisi masyarakat sekitar, yang secara tidak langsung dapat membuat produksi lebih efisien. Penjelasan STP pada website ini dibagi dalam dua segmen, yaitu segmentasi secara demografis dan geografis.
1. Demografis:
a. Usia = 15- 50 Tahun.
b. Jenis kelamin = Laki-laki, perempuan. 2. Geografis:
a. Daerah = Perkotaan.
b. Kepadatan = Kota (pusat kota).
3. Target audien website ini yaitu untuk masyarakat tengah kota, dengan status ekonomi menengah.
4. Positioning, website ini di posisikan sebagai website Program Studi DIV Komputer Multimedia STIKOM Surabaya.
3.2.3 Analisa Keyword
Sebelum perancangan karya (desain), langkah yang harus dilakukan adalah melakukan analisa keyword yang digunakan sebagai acuan atau dasar perancangan karya (desain). Hasil akhir keyword diperoleh berdasarkan kajian STP yang telah ditentukan sebelumnya, yang dijelaskan dalam tabel 3.1.
STIKOM
20
Tabel 3.1 Tabel analisa keyword
Geografis
Kota besar Ramai
modern modern Casual (enjoyble) Padat Sibuk
Tengah kota individualis
modern Macet glamour Demo-grafis Usia (16-50 ta-hun) selektif Plain elegant manage komsumtif
Psikografis Menengah
Terencana
Wise selektif
Sederhana
Positioning Website kreatif Smart
3.2.4 Analisa Warna
Berdasarkan warna-warna pada color chart kobayashi, warna yang sesuai dengan keyword adalah casual-enjoyble. Proses analisa keyword tersebut dapat dihubungkan dengan diagram warna (Kobayashi, 1999), yang memiliki sifat-sifat sesuai dengan keyword seperti pada gambar berikut:
STIKOM
Gambar 3.4 Diagram warna chart Kobayashi
Pendekatan warna yang akan digunakan dalam pembuatan website ini ada-lah menggunakan warna Casual, casual enjoyable yang berarti kesederhanaan yang menyenangkan, penuh inovasi dan motivasi.
3.2.5 Analisa Tipografi
Menurut (Kusrianto, 2010) “Tipografi adalah seni dan teknik dalam merancang maupun menata aksara dalam kaitannya untuk menyusun publikasi visual, baik cetak maupun non-cetak”. Font memiliki gaya seperti miring, tebal, miring-tebal. Font juga memiliki dua jenis, yaitu Serif dan Sans Serif.
Pemilihan jenis huruf yang akan digunakan pada website ini yaitu jenis huruf sans serif seperti Arial, Verdana, Tahoma yang tersedia disystem computer. Jenis huruf sans serif lebih tegas, bersifat fungsional dan lebih modern.
STIKOM
22
3.2.6 Analisa SWOT (Strength Weakness Opportunities Threat)
Analisa SWOT bertujuan untuk menganalisa kekuatan, kelemahan, kesem-patan, dan ancaman antara “Website Program Studi DIV Komputer Multimedia STIKOM Surabaya” dengan kompetitor “Program Studi DIII Komputer Multmedia STIKOM Surabaya” dan “website dkv UPH”, analisa SWOT dil-akukan dengan mengacu ilmu tata rupa yaitu Nirmana. Nirmana adalah pengorganisasian atau penyusunan elemen-elemen visual seperti titik, garis, warna, ruang dan tekstur menjadi satu kesatuan yang harmonis. Analisa SWOT dijelaskan pada tabel 3.2.
Tabel 3.2 Tabel analisa SWOT (Strength Weakness Opportunities Threat) STRENGTH
( Kekuatan )
WEAKNESS ( Kelemahan )
OPPORTUNITIE S
( Peluang )
THREAT ( ancaman )
Website
DIV
Komputer Multmedia
STIKOM Surabaya
Website ini menggunakan konsep desain sesuai dengan keyword casu-al enjoyble, dimana mem-beri kesan kesederhanaan yang me-nyenangkan tapi modern
Kelemahan website ini ada-lah pada terlalu banyak ruang kosong. Sehing-ga terkesan ku-rang banyak da-lam segi konten
Dengan konsep de-sain yang casual enjoyble diharap-kan dapat mewakili konten dan profil DIV Komputer Multimedia
STIKOM Suraba-ya.
maintenence yang kurang, mengakibatk an informasi kurang terupdate
STIKOM
Website
DIII Komputer Multimedia STIKOM Surabaya
Website ini memiliki kon-sep desain yang cukup menarik, yaitu berani
menggunakan warna hitam dalam back-ground hala-man website
Kelemahan Website ini ada-lah pada kompo-sisi layout yang terkesan terlalu gelap, sehingga kurang komu-nikatif
Menjadi Website DIII Komputer Multimedia
STIKOM Surbaya, selain daripada menjadi media penunjang.
maintenence yang kurang, mengakibatk an informasi kurang terupdate
w
ebsite dkv UPH
Website ini menggunakan konsep desain tidak terlalu banyak gambar dan menguta-makan pada konten, ini dimungkinkan agar proses loading tidak lama
Kelemahan website ini ter-letak pada kon-sep desain yang terlalu seder-hana, sehingga tidak user friendly
Dengan memperba-ruhi konsep desain diharapkan dapat mewakili konten dan profil DKV UPH. Selain pada menjadi media promosi.
maintenence yang kurang, mengakibatk an informasi kurang terupdate
STIKOM
24
3.3 Tahap Desain atau Perancangan
Tahap perancangan merupakan salah satu tahapan yang penting dalam pembuatan website, karena perancangan berhubungan dengan konsep desain yang sesuai dengan keyword. Dimana konsep desain sangat berpengaruh dengan interaktif dan komunkatif sebuah website. Teknis perancangan yang diperlukan, diantaranya adalah: konsep desain, architectural flow.
1. Konsep Desain
Dalam pembuatan Website ini akan diberikan fitur AJAX. AJAX yang akan digunakan yaitu framework mootools, sehingga website ini akan lebih dinamis. Sistem website ini akan dibangun menggunakan PHP, CSS dan databasenya menggunakan MySQL. Adapun sketsa konsep desain dari tampi-lan halaman website ini:
a. Halaman Utama
Gambar 3.5 Gambar sketsa tampilan Halaman utama
STIKOM
b. Halaman Profil
Gambar 3.6 Gambar sketsa tampilan Halaman Profil
c. Halaman Galeri karya
Gambar 3.7 Gambar sketsa tampilan Halaman Galeri karya
STIKOM
26
d. Halaman Data Mahasiwa
Gambar 3.8 Gambar sketsa tampilan Halaman Daftar Mahasiswa.
[image:30.595.42.547.115.698.2]e. Halaman Daftar Matakuliah
Gambar 3.9 Gambar sketsa tampilan Halaman Daftar Matakuliah. Daftar Matakuliah
Data Mahasiswa
STIKOM
f. Halaman login Admin
Gambar 3.10 Gambar sketsa tampilan Halaman login Admin
[image:31.595.35.551.106.691.2]g. Halaman Admin
Gambar 3.11 Gambar sketsa tampilan Halaman Admin Logo
STIKOM
28
2. Architectural Flow a. Admin
Gambar 3.12 architectural flow (Admin)
[image:32.595.51.553.120.714.2]b. User
Gambar 3.13 architectural flow (User)
STIKOM
3.4Tahap Publikasi
Tahap publikasi merupakan tahap perancangan kemasan atau packaging yang digunakan sebagai sarana promosi. Desain harus memberikan informasi yang jelas tentang apa saja kandungan yang terdapat pada konten website, serta dapat membuat konsumen nyaman dalam mendapat informasi didunia maya. Tahap publikasi pada “Website Program Studi DIV Komputer Multimedia STIKOM Surabaya”, meliputi perancangan poster, cover box CD, dan cover cakram CD.
1. Poster.
a. Konsep desain poster yang digunakan sesuai dengan keyword yaitu casu-al enjoyable yang bersifat sederhana, yaitu dengan memberikan back-ground warna dominan biru ditambah ornamen light yang ditransparansi, menampilkan beberapa halaman website, judul website, dan tambahan logo-logo pendukung.
[image:33.595.44.543.163.736.2]b. Sketsa poster.
Gambar 3.14 Sketsa poster Website DIV Komputer Multimedia
STIKOM
30
2. Cover box CD.
a. Konsep desain bagian depan cover box CD hampir sama dengan konsep pada desain poster, yang membedakan hanya ukurannya. Desain belakang coverbox CD adalah memberikan background warna biru dengan tambahan ornamnen dan menambahkan penjelasan profil DIV Komputer Multimedia STIKOM Surabaya. Desain tersebut menggambarkan sebuah kesederhanaan yang menyenangkan, penuh ino-vasi dan motiino-vasi.
b. Sketsa cover box CD.
Gambar 3.15 Sketsa cover box Website DIV Komputer Multimedia
3. Cover cakram CD
a. Konsep Desain pada cover cakram CD sama dengan desain pada cover box bagian depan, yang membedakan adalah bentuknya, yaitu lingkaran. Sehingga diperlukan beberapa penyesuaian pada desain cover box CD yang dibuat sebelumnya, agar tidak mengganggu komposisi dan tetap menarik untuk di pandang.
STIKOM
b. Sketsa cover cakram CD.
Gambar 3.16 Sketsa cover cakram Website DIV Komputer Multimedia
STIKOM
32
BAB IV
IMPLEMENTASI KARYA
Pada bab ini dijelaskan tentang proses produksi pembuatan “Website
Program Studi DIV Komputer Multimedia STIKOM Surabaya” Desain dan
berbagai fitur yang diterapkan, dirancang dan didesain berdasarkan keyword dan
analisa warna. Keyword yang digunakan adalah casual-enjoyble.
Pendekatan warna yang akan digunakan dalam pembuatan website ini
ada-lah menggunakan warna Casual, casual enjoyable yang berarti menurut arti
baha-sa adalah kesederhanaan yang menyenangkan, penuh inovasi dan motivasi.
Gambar 4.1 Diagram warna chart Kobayashi
STIKOM
Adapun tahapan-tahapan dalam pembuatan website ini, meliputi kebutuhan
sistem, instalasi program, Implementasi Desain, Evaluasi, dan publikasi.
4.1 Kebutuhan Sistem
Sistem pendukung dalam website ini diletakkan pada server secara offline,
adapun perangkat keras (hardware) yang dibutuhkan dari sisi pengguna adalah
sebagai berikut:
1. CPU Pentium Dual-Core
2. Memory 1 GB
3. Harddisk 80 GB
4. VGA Card 256 MB On board, Keyboard, Mouse
5. Monitor SVGA dengan resolusi 1024x600
Sedangkan perangkat lunak (software) yang dibutuhkan dari sisi pengguna
adalah Sistem Operasi dan sebuah web browser.
4.2 Instalasi Program
Instalasi Program adalah suatu kegiatan dari sisi pengguna yang berguna
untuk mendukung dari Website Program Studi DIV Komputer Multmedia
STIKOM Surabaya.
Adapun tahapan-tahapan instalasi dan pengaturan sistem yang terdapat pada
pengguna adalah Install sistem operasi, Install aplikasi web browser, Instalasi
Web Server, sebagai berikut:
STIKOM
34
1. Install Sistem Operasi
Sistem Operasi yang optimal ketika pengoperasian dalam website ini adalah
sistem operasi Windows 7 Pofesional, untuk tampilan Windows Profesional
dapat dilihat pada gambar 4.2.
Gambar 4.2 Tampilan Windows 7 Profesional
2. Install aplikasi web browser
Web Browser yang optimal ketika pengoperasian dalam website ini adalah
Web Browser Mozilla Fire fox minimal versi 3.0, untuk tampilan Mozilla
[image:38.595.38.545.163.729.2]Fire fox dapat dilihat pada gambar 4.3.
Gambar 4.3 Tampilan Mozilla Fire Fox
STIKOM
3. Instalasi Web Server
Untuk dapat menjalankan/mengeksekusi PHP yang kita buat di perluka
sebuah web server. Sebagai sarana latihan, cara yang paling mudah dalam
menjalankan latihan secara local yaitu dengan menggunakan software
XAMPP yang menggabungkan antara Apache (web server), mySQL
(database) dan PHP dalam satu paket instan. untuk tampilan awal instalasi
xampp dapat dilihat pada gambar 4.4.
Gambar 4.4 Tampilan awal instalasi xampp
4. Running Program
Dalam mendevelop sebuah website kita membutuhkan aplikasi agar dapat
mempermudah kita dalam membuatnya. Aplikasi-aplikasi tersebut bisa di
bilang cukup banyak diantaranya: Adobe Dreamweaver, Aptana, Eclipse,
Edit++, dan lai-lain.
Untuk Pembuatan website ini Adobe Dreamweaver. Tampilan awal adobe
dreamweaver dapat di lihat seperti gambar 4.5.
STIKOM
36
Gambar 4.5 Tampilan awal adobe dreamweaver.
4.3 Implementasi Desain
Desain website ini menggunakan fitur-fitur AJAX dipadu dengan CSS
(Cascading Style Sheet) dan finishing menggunakan HTML dan PHP. Ada
beberapa desain yang pada website tanggap darurat yaitu:
1. Desain Halaman Utama
a. Layout pada halaman utama dibuat sederhana, agar memberikan kesan
casual.
b. Header terdapat judul website, pada menu bar terdapat menu
home/halaman utama, profil, gallery, forum, dan menu admin. Selain itu
juga terdapat fitur AJAX, dimana menampilkan sebuah gambar berjalan
(slider image).
c. Content menamplkan Hotnews, dan info event. Hotnews atau info event
ialah menampilkan berita atau informasi event terbaru yang di input oleh
admin.
STIKOM
Gambar 4.6 Desain Halaman Utama.
2. Desain Halaman Profil
Pada detil halaman “Profil” terdapat header dan konten, konten yang
ditampilkan pada halaman ini adalah informasi tentang program studi DIV
Komputer Multimedia STIKOM Surabaya dan profil dosen.
Gambar 4.7 Desain Halaman Profil.
3. Desain Halaman Gallery
Pada detil halaman “Gallery” terdapat header dan konten, konten yang
ditampilkan pada halaman ini adalah berbagai karya dan portofolio terbaik dari
program studi DIV Komputer Multimedia STIKOM Surabaya.
STIKOM
38
Gambar 4.8 Desain Halaman Gallery.
d. Desain Halaman Data Mahasiswa dan Daftar Matakuliah
Pada detil halaman ini terdapat header dan konten. Konten yang ditampilkan
pada halaman ini adalah daftar Mahasiswa dan Matakuliah, program studi DIV
Komputer Multimedia STIKOM Surabaya.
[image:42.595.51.556.113.718.2]
Gambar 4.9 Desain Halaman Data Mahasiswa dan Daftar Matakuliah.
STIKOM
e. Desain Halaman Login Administrator
Halaman Login Administrator difungsikan untuk mengakses halaman
administrator, agar dapat memasukan/memperbarui content website (berita,
informasi event, profil pragram studi, profil dosen, gallery).Pada halaman ini
diminta memasukkan username dan password.
Gambar 4.10 Desain Halaman Login Admin.
f. Desain Halaman Administrator
Halaman administrator merupakan halaman back side, yaitu halaman yang
kusus digunakan untuk memberbarui isi halaman front side. Pada halaman ini
terdapat menu di sebelah kiri.
Gambar 4.11 Desain Halaman Administrator.
STIKOM
40
4.4 Manajemen Model
Model adalah kelas PHP yang dirancang untuk bekerja mengambil dan
mengisi (synchronize) informasi dalam database, pada saat membuat model harus
di simpan di dalam folder “application/model”. Sebelum menggabungkan antara
model PHP dan database, sebelumnya kita harus menkoneksi dengan database.
<?php
$hostname = "localhost";
$username = "root";
$password = "";
$database = "tiketing";
mysql_connect($hostname,$username,$password) or die("<h1>koneksi gagal
:(</h1>");
mysql_select_db($database) or die("<h1>database tidak ditemukan :(</h1>");
?>
Catatan :
· <?php adalah script pembuka untuk PHP.
· ?> adalah script penutup untuk PHP (setiap ada pembuka harus ada peutup).
· $ (string) adalah untuk membuat variable.
· mysql_connect berfungsi untuk mengkoneksikan ke database.
· mysql_select_db berfungsi untuk memilih database.
STIKOM
Adapun beberapa model dalam “Website Program Studi DIV Komputer
Multimedia STIKOM Surabaya”, yaitu:
1. Model Member digunakan untuk sinkronisasi dengan akun member.
2. Model news digunakan untuk sinkronisasi dengan data news.
3. Model Event digunakan untuk sinkronisasi dengan data Event.
4. Model Profil digunakan untuk sinkronisasi dengan data profil.
5. Model Dosen digunakan untuk sinkronisasi dengan data Dosen.
6. Model Images digunakan untuk sinkronisasi dengan gambar.
7. Model Video digunakan untuk sinkronisasi dengan Video.
Setiap model memiliki fungsi-fungsi tersendiri, fungsi-fungsi tersebut
terdiri dari add, edit, dan delete.
1. Add
Fungsi ini digunakan untuk memasukkan data. Sebelum mengupload data,
melakukan terlebih dahulu tag “<form>”, karena nantinya kita akan
menggunakan bantuan form untuk menyimpan/mengupload data. Tag
“<form>” digunakan untuk membuat sebuah form HTML untuk inputan bagi
pengguna. Form juga merupakan suatu bentuk yang terdapat unsur-unsur
inputan seperti text, checkbox, radio-button, submit button dll. Form juga
dapat berisi combo-box, textarea, fieldset dan label element.
2. Edit
Fungsi ini digunakan untuk mengubah data. Pada proses update
membutuhkan form lagi seperti pada proses upload sebelumnya. Untuk
STIKOM
42
mempercepat pengerjaan update ini kita copy saja file upload yang telah kita
buat sebelumnya.
3. Delete
Fungsi ini digunakan untuk menghapus data.
$id = $_GET['id'];
//mengambil url picture dari id yang telah di masukkan
$select = mysql_query("select picture from movie where id_movie='$id'");
$row = mysql_fetch_array($select);
//untuk menghapus data yang ada di dalam database
mysql_query("delete from movie where id_movie='$id'");
//sedangkan untuk menghapus file kita gunakan unlink()
unlink("../".$row['picture']);
header("Location: ../admin.php?page= ");
}
Seletah itu kita linkkan button [delete] yang berada di config ke
“admin/proses.php?kode=delete_movie&id=<?php echo $row*‘id_movie’+
?>” menggunakan “a href”.
4.5 Manajemen View
View adalah sebuah halaman website, atau sebuah fragment, seperti header,
footer, sidebar, content. Bahkan view juga dapat ditanam/diletakkan didalam view
apabila ada kondisi tertentu saat dibutuhkan. View tidak bisa dipanggil/dimuat
secara langsung, view harus dipanggil/dimuat oleh controller.
1. Index
Index pada view hanya berisikan kerangka yang akan memuat view-view
yang lain, seperti view berita, view event, view profil program studi, view
profil dosen, view galeri, dan view forum.
STIKOM
2. Show
Show pada view berisikan script-scrip PHP yang berfungsi untuk
mengambil/memuat data dari database. Halaman show lebih difungsikan
sebagai tempat penampung data dari database, dimana fungsi-fungsi
controller yang nantinya akan menjalankan halaman show, seperti fungsi
view per-page.
3. Add
Halaman Add pada view berisikan layout-layout yang didalamnya terdapat
fields, dan berfungsi untuk memasukkan data kedalam database yang
nantinya akan di proses di controller.
4. Edit
Halaman Edit pada view berisikan layout-layout yang didalamnya terdapat
fields, dan berfungsi untuk mengubah/mengedit data, dan juga
mengambil/memuat data dari database, yang nantinya akan diproses di
controllerdan disimpan kembali ke dalam database.
5. Delete
Halaman delete pada view berisikan layout-layout yang didalamnya terdapat
fields, dan berfungsi untuk menghapus data dari database, yang nantinya akan
diproses di controller.
STIKOM
44
4.6 Manajemen Controller
Controller adalah sebuah kelas yang dipanggil oleh URL (Universal
Resource Loacator) pada saat browser memanggil alamat website. Controller juga
yang menjembatani antara Model dan View, juga resource lain yang dibutuhkan
untuk memproses HTTP request dan memproduksi sebuah halaman
website.Controller merupakan otak dari program framework codeigniter, karena
controller yang mengatur jalannya program di codeigniter. Setiap file yang akan
di load oleh browser harus mempunyain controller, pada website ini ada beberapa
controller yaitu: admin, home, berita, info, dan login.
1. Admin
Controller admin digunakan untuk mengatur jalannya halaman administrator
website tanggap darurat ini. Pada controller admin ini terdiri beberapa fungsi
yaitu fungsi index, show, add, edit, delete, dan beberapa fungsi ajax.
2. Index
Controller index digunakan untuk mengatur jalannya halaman index/halaman
utama website tanggap darurat ini. Fungsi-fungsi yang terdapat pada halaman
home ini hanya fungsi index.
3. News
Controller news digunakan untuk mengatur jalannya halaman news.
Fungsi-fungsi yang terdapat pada halaman berita ini hanya Fungsi-fungsi index.
4. Event
Controller Event digunakan untuk mengatur jalannya halaman event.
Fungsi-fungsi yang terdapat pada halaman info ini hanya Fungsi-fungsi index.
STIKOM
5. Login
Controller login digunakan untuk mengatur jalannya halaman login dan
logout. Fungsi-fungsi yang terdapat pada halaman login ini terdiri dari
beberapa fungsi diantaranya fungsi login, logout.
4.7 Evaluasi
Evaluasi adalah melakukan uji coba atau testing, tujuan evaluasi ini adalah
untuk mengetahui apakah website sudah berjalan dengan baik dan sesuai dengan
yang diharapkan. Evaluasi ini dilakukan dengan cara melakukan pengujian
web-site (web based testing) yang ditujukan pada Mahasiswa dan Dosen Program
Studi DIV Komputer Multimedia STIKOM Surabaya.
Evaluasi yang dilakukan dengan cara pengujian terhadap website dapat
dilihat pada Tabel 4.1.
Tabel 4.1 Pengujian Website
No Karakteristik Penjelasan Hasil
1 Content and
funcionality
testing
Pengujian terhadap
isi dan fitur seperti
yang terdapat pada
website umunya,
pastikan sudah
lengkap dan berjalan
sesuai dengan yang
diinginkan
Isi dan fitur website sudah lengkap.
Keterangan:
Isi dan fitur sesuai dengan
kebu-tuhan pengguna, serta telah
ber-jalan sesuai dengan keinginan
pengguna.
2 Feature inter- Banyak pengguna Tidak terjadi interfensi antar
STIKOM
46
action testing yang secara simultan
mengakses satu site
yang sama dan tidak
boleh terjadi
inter-fensi antara mereka
pengguna.
Keterangan:
Jika dijalankan bersama satu sama
lain dapat dijalankan dengan baik,
tanpa terpengaruh satu sama lain.
3 Usability
test-ing
Melakukan
pen-gujian apakah
web-site sudah user
friendly
Website sudah user friendly
4 Database
test-ing
Memastikan
data-base dapat diakses
dari website yang
mempunyai kendali
integritas dan
kecukupan data
Data dapat diakses oleh program
dengan baik
Keterangan:
Dengan percobaan beberapa kali
program telah dapat mengakses
data dengan baik.
5 Security and
control testing
Memastikan site ini
aman, termasuk
ac-count setup, dan dari
unauthorized acces
Website dilengkapi security
standart pengamanan website.
Keterangan:
Website dilengkapi pemberian hak
akses dan security login
6 Conectivity
testing
Pastikan website
dapat melakukan
connection dan
dis-connection
Pengguna dapat login dan logout
dengan baik.
7
Interoperabil-ity testing
Pastikan semua web
browser dari semua
versi dan jenis
kom-website dapat dijalankan pada web
browser minimal Internet Explorer
versi 8, Mozilla Firefox versi 3.0,
STIKOM
puter yang berbeda
dapat berjalan
dengan baik.
Google Chrome, operasi versi 9.0
8 Cross platform
and
configura-tion testing
Pastikan perilaku
dari sistem
kompati-bel dalam paltform
dan konfigurasi yang
berbeda
Website compatible platform dan
konfigurasi yang berbeda.
Keterangan:
Pada waktu website dijalankan di
Windows XP ataupun Windows 7,
website dapat berjalan dengan baik.
9 Performance
and stress
test-ing
Ukur kemampuan,
response time dan
semua proses yang
terjadi dalam
keadaan workloads
diatas rata,
rata-rata atau dibawah
rata-rata.
Performance dan response time
cukup baik.
10
Internazionali-zation testing
Pastikan site tidak
membingungkan
pengguna.
Website tidak membingungkan
pengguna.
Keterangan:
Dari hasil uji coba yaitu rata-rata
pengguna sudah menganggap
web-site user friendly dan tidak
emb-ingungkan.
11 Beta testing Undang beberapa
pengguna terpilih
untuk melakukan
eksperimen pada site
Telah dilakukan uji coba terhadap
pengguna
STIKOM
48
anda dan mintalah
feedback pada
mere-ka sebelum website
tersebut diluncurkan
12 Standart
com-pilance testing
Pastikan website
kompatibel dengan
internet standart,
apakah terlihat sama
meskipun
menggunakan
browser atau search
enggine yang
ber-beda
Website dapat berjalan optimal
pa-da Mozilla Firefox.
Berdasrkan hasil pengujian dan evaluasi yang dilakukan dengan cara
pen-gujian terhadap website pada Tabel 4.1, dapat diketahui bahwa wibsite yang telah
dibuat sudah memenuhi standart pengujian website.
4.8 Publikasi
Publikasi pada BAB IV ini berisi implementasi atau hasil akhir desain
poster, cover box CD, dan cover cakram CD “Website Program Studi DIV
Komputer Multmedia STIKOM Surabaya” dimana desain akhir telah melalui
se-buah konsep desain yang sesuai dengan keyword yang telah dijelaskan pada BAB
III. Adapun desain poster, cover box CD, dan cover cakram CD yang dijelaskan
pada gambar 4.8-4.10.
STIKOM
Gambar 4.12 Poster Website Program Studi DIV Komputer Multimedia
STIKOM Surabaya.
Gambar 4.13 Cover box CD Website Program Studi DIV Komputer Multimedia
STIKOM Surabaya.
STIKOM
50
Gambar 4.14 Cover cakram CD Website Program Studi
DIV Komputer Multimedia STIKOM Surabaya
STIKOM
51 5.1 Kesimpulan
Setelah dilakukan analisis, pembuatan website Program Studi DIV
Komputer Multimedia STIKOM Surabaya ini dengan menggunakan Bahasa
Asynchronous Javascript and XML serta dilakukan evaluasi hasil penelitiannya,
maka dapat diambil kesimpulan sebagai berikut:
1. Dengan memakai Bahasa Asynchronous Javascript and XML ini, membuat
desain website lebih dinamis tanpa flash.
2. Website ini bersifat dinamis dengan bantuan bahasa pemrograman PHP
sebagai penghubung user, server dan database yang dibuat melalui MySQL.
3. Website ini sebagai media penunjang Program Studi DIV Komputer
Multimedia STIKOM Surabaya.
5.2 Saran
Ada beberapa saran yang dapat disampaikan antara lain:
1. Website ini dapat dikembangkan untuk sebagai forum khusus Program Studi
DIV Komputer Multimedia STIKOM Surabaya.
2. Website ini dapat dikembangkan dalam penambahan fitur-fitur AJAX.
STIKOM
52
DAFTAR PUSTAKA
Arief, R. (2009, Februari 17). web dinamis. Retrieved oktober 4, 2011, from
rudiyantoarief: http://rudyantoarief.com/wp/?tag=web-dinamis
Barata, A. A. (2003). Dasar-dasar Pelayanan Prima. Elex Media Komputindo.
Ebdi Sanyoto, Sadjiman. (2005) Dasar-Dasar Tata Rupa dan Desain.
Yogyakarta: arti bumi intaran.
Kobayashi, S. (1999). Colorist: A Practical Handbook for Personal and
Professional Use. Kodansha International.
Kusrianto, A. (2010). Pengantar Tipografi untuk Pemakai CorelDRAW,
Illustrator, InDesign, Photoshop. Jakarta: Elex Media Komputindo.
Pipiapioh. (2010, Agustus). Pengertian website statis. Retrieved 10 02, 2011,
from
http://piiafiatry.blogspot.com/2010/08/pengertian-website-statis-dan-website.html
Prasetyo, Didik Dwi. 2008. 101 Tip dan Trik Pemrograman PHP. Buku kedua.
Jakarta: PT Elex Media Komputindo.
Saputro, H. W. (2007, Juli 8). Teknologi. Retrieved Oktober 4, 2011, from
Balebengong:
http://www.balebengong.net/topik/teknologi/2007/07/08/apa-itu-internet.html
Siena, I. (2009, agustus 04). Retrieved oktober 2, 2011, from
http://my.opera.com/aviciena/blog/2009/08/14/framework-3
Sunyoto, Andi. 2007. Membangun Web dengan Teknologi Asyncronouse
JavaScript dan XML. Yogyakarta: ANDI.
Tutang. (2002). Mendesain Web dan Berinternet Bagi Pemula. Jakarta, Jawa
Barat, Indonesia: Datakom Lintas Buana.
Zaki, Ali. 2008. 7 CMS Pilihan untuk Internet Marketing. Jakarta: PT Elex Media Komputindo.
http://google.com/2011/05/pengertian ajax.html diakses 22 Mei 2011.
STIKOM
53
http://google.com/2011/07/pengertian-dasar-css.html diakses 28 Juli 2012.
http://google.com/2011/07/pengertian-dasar-php.html diakses 22 Juli 2012.
STIKOM
