TA : Rancang Bangun Website Program Studi DIV Komputer Multimedia STIKOM Surabaya.
TUGAS AKHIR
Nama : SYAMSUL ARIF
NIM : 08.51016.0032
Program Studi : DIV Komputer Multimedia
SEKOLAH TINGGI
MANAJEMEN INFORMATIKA DAN KOMPUTER SURABAYA
2012
STIKOM
(2)
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
(3)
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
(4)
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
(5)
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
(6)
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
(7)
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
(8)
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
(9)
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
(10)
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
(11)
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
(12)
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
(13)
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
(14)
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
(15)
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
(16)
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
(17)
“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
(18)
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
(19)
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
(20)
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
(21)
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
(22)
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
(23)
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
(24)
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
(25)
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
(26)
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
(27)
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
(28)
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
(29)
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
(30)
26
d. Halaman Data Mahasiwa
Gambar 3.8 Gambar sketsa tampilan Halaman Daftar Mahasiswa. e. Halaman Daftar Matakuliah
Gambar 3.9 Gambar sketsa tampilan Halaman Daftar Matakuliah. Daftar Matakuliah
Data Mahasiswa
STIKOM
(31)
f. Halaman login Admin
Gambar 3.10 Gambar sketsa tampilan Halaman login Admin g. Halaman Admin
Gambar 3.11 Gambar sketsa tampilan Halaman Admin Logo
STIKOM
(32)
28
2. Architectural Flow a. Admin
Gambar 3.12 architectural flow (Admin) b. User
Gambar 3.13 architectural flow (User)
STIKOM
(33)
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.
b. Sketsa poster.
Gambar 3.14 Sketsa poster Website DIV Komputer Multimedia
STIKOM
(34)
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
(35)
b. Sketsa cover cakram CD.
Gambar 3.16 Sketsa cover cakram Website DIV Komputer Multimedia
STIKOM
(36)
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
(37)
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
(38)
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 Fire fox dapat dilihat pada gambar 4.3.
Gambar 4.3 Tampilan Mozilla Fire Fox
STIKOM
(39)
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
(40)
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
(41)
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
(42)
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.
Gambar 4.9 Desain Halaman Data Mahasiswa dan Daftar Matakuliah.
STIKOM
(43)
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
(44)
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
(45)
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
(46)
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
(47)
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
(48)
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
(49)
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
(50)
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
(51)
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
(52)
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
(53)
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
(54)
50
Gambar 4.14 Cover cakram CD Website Program Studi DIV Komputer Multimedia STIKOM Surabaya
STIKOM
(55)
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
(56)
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
(57)
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
(1)
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
(2)
49
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
(3)
50
Gambar 4.14 Cover cakram CD Website Program Studi DIV Komputer Multimedia STIKOM Surabaya
STIKOM
(4)
51
BAB V
PENUTUP
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
(5)
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
(6)
53
http://www.satriamultimedia.com/artikel_teori_desain_grafis_nirmana.html diakses 22 Mei 2012.
http://organisasi.org/analisis-pengertian-menurut-harold-lasswell diakses 28 juli 2012
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.