vi
ABSTRAK
Pada saat ini website merupakan salah satu cara untuk mencari teman dan bermain game online maupun offline. Dilihat dari pesatnya penggunaan internet untuk keperluan - keperluan mencari data, mencari bahan - bahan untuk kepentingan mereka masing – masing, tentunya dengan melakukan akses terhadap suatu website maka suatu website pun mengalami perkembangan yang sangat pesat, sehingga website - website dapat mudah digunakan dan interaktif. Oleh karena itu penulis ingin membuat suatu website yang dapat menampung semua game yang telah dibuat oleh member dari website tersebut dan dapat dimainkan oleh user lainnya, tentunya sesama member memiliki hubungan / keterkaitan satu sama lainnya. Di dalam website ini pula, member dapat mencari teman baru dan teman lama yang tidak pernah dijumpai, proses pencarian ini didukung dengan adanya implementasi Algoritma Ant yang dirancang untuk mencari beberapa faktor kesamaan yang ada dalam setiap informasi member. Website yang berjudul BlackList ini adalah suatu web yang berjenis social-networking website. Website ini dikembangkan menggunakan FLEX, AJAX, PHP dan berbasis Web 2.0. Penelitian ini dimulai dari penganalisaan dan pemodelan, perancangan, hingga implementasi hingga menjadi sebuah website.
vii
ABSTRACT
Website is using internet to get many things, from a lot of information or data, and many more. Searching friends or playing game can be access from a website. From the data of using the internet, many people surfing the internet because it easy to use and a lot of interactive things. Because of that, writer want to make a website that user can upload or playing a game through the website, even searching some friends. Blacklist is one of the social-networking type, that provide one way to searching new friends and old friends, this automate searching is based on user information with implementation of ant algorithm. This website provide user playing the game that has been upload by another member. This website is made using AJAX framework, FLEX, PHP and basis web 2.0. This research starts from analyzing and modeling, design, and implementation until become a website.
viii
DAFTAR ISI
LEMBAR PENGESAHAN KERJA PRAKTEK………. i
LEMBAR PENGESAHAN PERSETUJUAN PUBLIKASI ILMIAH……… ii
LEMBAR PERNYATAAN ORISINALITAS KARYA……… iii
KATA PENGANTAR……… iv
ABSTRAK……….……… vi
ABSTRACT……….. vii
DAFTAR ISI……… viii
DAFTAR GAMBAR………. xiii
DAFTAR TABEL……….. xvi
1.5. Sistematika Pembahasan………... 3
BAB II DASAR TEORI……….. 5
2.1. AJAX……….... 5
2.1.1. Kelebihan dan Kekurangan AJAX………... 5
2.1.2. Batasan web berbasis AJAX……… 7
2.1.3. Teknologi Pendukung……… 7
ix
2.5.2. Tip memprogram JavaScript……….. 13
2.6. PHP………... ……….. 13
2.10. Komponen Website……….. 20
2.10.1. Web Server……… 20
2.10.2. Bahasa Pemrograman Server-Side……….. 20
x
2.10.4. Web Browser……….. 21
2.11. Teknologi penunjang yang digunakan……….. 21
2.11.1 Macromedia Flash……… 21
2.12. Algoritma yang digunakan ……… 21
2.12.1. Algoritma Ant ……… …… 21
2.12.2. Penerapan Algortima Ant pada Blacklist ……….. 23
BAB III ANALISA DAN PEMODELAN……… 25
3.1. Arsitektur Apikasi……… 25
3.1.1. Uses Case……….. 25
3.1.2. Activity Diagram………. 26
3.1.3. ERD (Entity-Relationship Diagram)……….. 36
3.2. Web Map dan Layout……….. 36
3.3. Perancangan User Interface……….. 39
xi
3.3.11 ScreenShot Game Page………. 63
3.3.12 People You May Known Page ………. 64
3.3.13 Reunion Page ………. 65
BAB IV PERANCANGAN DAN IMPLEMENTASI………. 67
xii
4.2.11 Blacklist Page ……….. 79
4.2.12 People You May Known Page ………... 80
4.2.13 Reunion Page ……….. 80
4.3. Penjelasan Fungsi ………. 81
BAB V PENGUJIAN……… 88
BAB VI KESIMPULAN DAN SARAN……… ……… 151
6.1 Kesimpulan………. 151
6.2 Saran……… 151
DAFTAR PUSTAKA………... 153
xiii
DAFTAR GAMBAR
Gambar 3.1 Uses Case ……….. 25
Gambar 3.2 Activity Diagram Login ……….. 26
Gambar 3.3 Activity Diagram Melihat Profile ……….………... 26
Gambar 3.4 Activity Diagram Mengubah Profile ………….……… 27
Gambar 3.5 Activity Diagram Melakukan Upload Photo ……….……….. 28
Gambar 3.6 Activity Diagram Memasukkan Shoutout ……….………... 29
Gambar 3.7 Activity Diagram Mengirim Messages ……… 29
Gambar 3.8 Activity Diagram Menerima Messages ……….. 30
Gambar 3.9 Activity Diagram Melakukan Upload Game ……….. 31
Gambar 3.10 Activity Diagram Memainkan Game ……….…….. 32
Gambar 3.11 Activity Diagram Melakukan Invite Friends ……….……… 33
Gambar 3.12 Activity Diagram Melihat Photo & Profile Friends ………... 33
Gambar 3.13 Activity Diagram Melihat People You May Known & Reunion …………. 34
Gambar 3.14 Activity Diagram Memasukkan Data User ……….………. 35
Gambar 3.15 ERD Blacklist ………..………. 36
Gambar 3.16 Settings ……..……….. 37
Gambar 3.17 Name ………..……… 37
Gambar 3.18 Email ………..……… 38
Gambar 3.19Password ……….. 38
Gambar 3.20 Security Question ………..……… 39
Gambar 3.21 Login Page ……….………. 39
xiv
Gambar 3.23 Home Page ………..……… 43
Gambar 3.24Profile Page ……….. 45
Gambar 3.25 Edit Profile Page ……….………. 49
Gambar 3.26 Friends Page ……….……….. 53
Gambar 3.27 Add Friends Page ……….……… 54
Gambar 3.28 Inbox Messages Kosong ……….………. 55
Gambar 3.29Inbox Messages – 1 Message ………..……….. 56
Gambar 3.30 Sent Messages Kosong ……….……… 57
Gambar 3.31 Sent Messages – 1 Message ……….…………. 58
Gambar 3.32 Compose Messages ……… 59
Gambar 3.33 My Games ………. 60
Gambar 3.34 All Games ………. 61
Gambar 3.35 Play Game Page ………..………. 62
Gambar 3.36 ScreenShot Game Page ……… 63
Gambar 3.37 People You May Known Page ………. 64
Gambar 3.38 Reunion Page ………. 65
Gambar 4.1 Calender Picker ……….. 67
Gambar 4.2 Slide Show ……….. 68
Gambar 4.3 tabAccordian ……… 68
Gambar 4.4 MultiBox ………... 69
Gambar 4.5 Menu ……….. 69
Gambar 4.6 Settings ……… 70
xv
Gambar 4.8 People You May Known ………. 71
Gambar 4.9 Reunion ………. 71
Gambar 4.10 Index Page ……….... 72
Gambar 4.11 Validate Page ……….. 72
Gambar 4.12 Home Page ………... 73
Gambar 4.13 Profile Page ………. 73
Gambar 4.14Edit Profile Page ………... 74
Gambar 4.15 Friends Page ……….. 76
Gambar 4.16 Add Friends Page ……… 77
Gambar 4.17 Inbox Messages Page ……… 77
Gambar 4.18 Sent Messages Page ……….. 78
Gambar 4.19 Compose Messages Page ………... 78
Gambar 4.20 Blacklist Page ……… 79
Gambar 4.21 People You May Known Page ………. 80
Gambar 4.22 Reunion Page ………. 80
xvi
DAFTAR TABEL
Table 1.1 Time Schedule ……… 4
Table 5.1 Tabel Pengujian Fungsi isEmail ($str) ……… 86
Table 5.2 Tabel Pengujian Button Sign In ……… 87
Table 5.3 Tabel Pengujian Button Register ……… 88
Table 5.4 Tabel Pengujian Button Vallidate ……….. 89
Table 5.5 Tabel Pengujian Button Save Changes – Basic Information ……… 90
Table 5.6 Tabel Pengujian Button Save Changes – Personal Information ……… 114
Table 5.7 Tabel Pengujian Button Save Changes – Contact Information ……….. 131
Table 5.8 Tabel Pengujian Button Save Changes – Education and Work ………. 134
Table 5.9 Tabel Pengujian Button Upload ………. 142
Table 5.10 Tabel Pengujian Kesamaan High School ……… 143
Table 5.11 Tabel Pengujian Kesamaan Location ……… 144
Table 5.12 Tabel Pengujian Kesamaan Company ……….. 145
Table 5.13 Tabel Pengujian Kesamaan Home Town ……… 145
Table 5.14 Tabel Pengujian Kesamaan College / Univeristy ………. 146
Table 5.15 Tabel Pengujian City Work ……….. 147
xvii
DAFTAR PROGRAM
Program 4.1 Slideshow – part 1 ……… 81
Program 4.2 Slideshow – part 2 ……… 81
Program 4.3 Slideshow ……… 82
Program 4.4 CurvyCorners ……… 82
Program 4.5 Calender ……… 83
Program 4.6 Randoming Image ……….. 84
Program 4.7 Algoritma Ant – part 1 .……… 85
Program 4.8 Algoritma Ant – part 2 ………. 85
Program 4.9 Algoritma Ant – part 3 ………. 85
Program 4.10 Algoritma Ant – part 4 ……….. 86
1
BAB I
PENDAHULUAN
1.1.
Latar Belakang
Teknik Informatika merupakan suatu jurusan yang bergerak dalam bidang pemrograman suatu program yang terdapat di dalam komputer, notebook, maupun handphone. Suatu program akan semakin berkembang seiring dengan perkembangan teknologi yang selalu dibutuhkan oleh suatu lembaga untuk memperlancar sistem kerja di dalam lembaga tersebut, bahkan untuk memudahkan seseorang yang membutuhkan data dan informasi untuk kepentingannya masing-masing. Program tersebut dapat dikerjakan oleh perorangan dengan membutuhkan waktu yang cukup lama, sehingga beberapa lembaga membuat suatu kelompok untuk mempercepat penyelesaian program-program tersebut. Hubungan sosial (jaringan sosial) dapat dimanfaatkan untuk menjalin diskusi yang bermanfaat untuk membuat suatu program yang bermanfaat.
Dari penjelasan di atas dapat disimpulkan bahwa banyak mahasiswa IT membutuhkan hubungan sosial yang cukup banyak. Salah satu cara mahasiswa IT untuk memiliki hubungan sosial yaitu dengan jaringan sosial di dunia maya (internet), sehingga di dalam jaringan sosial dunia maya ini seorang mahasiswa tidak hanya mencari hubungan sosial saja akan tetapi dapat digunakan sebagai wadah pertukaran informasi.
BlackList adalah suatu website yang memiliki jenis sosial networking(jaringan sosial) website dengan didesain khusus agar mudah digunakan, dengan setiap member yang tergabung
akan dapat dijadikan friends, di dalam web ini pun anda dapat melihat profile-profile dari teman, mengirimkan mereka messages, melihat status mereka, membuat suatu grup untuk mendiskusikan suatu topik. Setiap topik ini anda dapat menanyakan suatu permasalahan yang mungkin sukar anda pikiran sendiri, sehingga dapat di diskusinya bersama teman-teman anda di dunia maya.
Fitur tambahan yang diberikan di dalam website ini yaitu fitur game yang menghubungan friends yang ada dengan anda. Dalam fitur ini anda dapat melakukan posting suatu game dan dapat dimainkan bersama teman-teman yang anda miliki. Selain itu di dalam website ini terdapat sistem yang berfungsi untuk mencari keterkaitan antar anggota member
2
Universitas Kristen Marantha Secara keseluruhan website BlackList ini bertujuan agar setiap member dapat saling berhubungan, mengirimkan messages, memberikan comment, menjalin relasi serta dapat mem-posting aplikasi yang berbentuk flash yang telah dibuat.
1.2.
Rumusan Masalah
Berdasarkan latar belakang yang telah dikemukakan diatas, maka dapat dirumuskan
beberapa masalah, yaitu :
1. Bagaimana membuat website yang bermanfaat bagi Mahasiswa di Universitas Kristen Maranatha di Fakultas Teknik Informatika yang memiliki potensi dalam mengekspresikan aplikasi berbentuk game yang mereka buat?
2. Bagaimana mengelola keterkaitan antar anggota yang terdapat di dalam website ini dengan
melakukan implementasi algoritma ant?
3. Bagaimana memanfaatkan teknlogi Adobe Flex pada website BlackList?
1.3.
Tujuan
Tujuan utama daripada pembuatan website BlackList adalah agar mahasiswa Fakultas Teknik Informatika dapat menjalin hubungan sosial antar sesama mahasiswa di dalam selang waktu kesibukan yang mereka miliki masing-masing oleh karena itu dikembangkan suatu sistem yang berfungsi untuk mencari keterkaitan antar anggota member dengan algoritma ant ini dapat menemukan anggota yang mungkin dikenali oleh user. Sehingga diharapkan ke
depannya mahasiswa-mahasiswa ini dapat bekerja sama dengan orang lain untuk membuat suatu aplikasi, karena suatu aplikasi yang baik dibutuhkan waktu yang lama bila dikerjakan
sendiri akan tetapi bila mengerjakan bersama tim akan lebih cepat dan dapat memiliki sudut pandang yang berbeda akan aplikasi sehingga dapat mengembangkan aplikasi yang baik.
1.4.
Batasan Masalah
Adapun batasan masalah daripada website BlackList adalah sebagai berikut :
1. Dapat melihat profile, memberikan comment , melakukan posting topic dan juga mengirim message.
2. Memiliki BlackList section yang berisikan hasil karya member BlackList tanpa menjadi member BlackList.
3. Memiliki fitur yang melakukan implementasi algoritma ant yang berfungsi untuk mencari keterkaitan antar anggota.
3
Universitas Kristen Marantha 5. Untuk memasukkan hasil karya yang telah dibuat, diharuskan user (pengguna) tersebut
menjadi member pada website ini.
6. Pembuatan image (gambar) pada website ini menggunakan aplikasi Adobe Photoshop CS4. 7. Website ini dikembangkan menggunakan aplikasi Adobe Dreamweaver CS4 dan Adobe Flex
Builder 3 dengan bahasa pemrograman PHP, AJAX, dan FLEX.
8. Tampilan website ini akan terlihat lebih bagus pada PersonalComputer/Notebook dengan resolusi layar 1280 x 800 pixel.
9. Mempunyai hak akses untuk membuka game tertentu bagi member. 10. Pengujian dilakukan dengan menggunakan metode black box .
1.5.
Sistematika Pembahasan
Sistematika penulisan laporan Tugas Akhir ini akan disusun dalam enam bab dengan perincian sebagai berikut:
•
BAB I PENDAHULUAN
Bagian ini merupakan bagian pertama dari laporan yang menjelaskan latar belakang,
tujuan, perumusan masalah yang ada, batasan daripada pembuatan website dan isi laporan secara keseluruhan dari pembuatan website BlackList ini.
•
BAB II DASAR TEORI
Bagian ini merupakan bagian dari laporan yang berisi tentang bahasa pemrograman yang digunakan, kelengkapan yang dibutuhkan untuk menjadi member website ini, dan juga jenis aplikasi dan website yang dapat di posting.
•
BAB III ANALISA DAN PEMODELAN
Bagian ini merupakan bagian dari laporan yang berisi tentang desain, cerita di dalam website BlackList, seperti Latar Belakang website, Use Case Diagram, Activity/State Diagram, Class Diagram, Sequence Diagram, Layout, dan juga desain dari website BlackList.
•
BAB IV PERANCANGAN
Bagian ini merupakan bagian dari laporan yang berisi gambar (screenshoot) dan juga
4
Universitas Kristen Marantha
•
BAB V PENGUJIAN
Bagian ini berisi tentang pengujian terhadap setiap fungsi yang dibuat dalam website BlackList. Pengujian yang dilakukan black box.
•
BAB VI KESIMPULAN DAN SARAN
139
Universitas Kristen Maranatha
BAB VI
KESIMPULAN DAN SARAN
6.1.
Kesimpulan
Setelah menyelesaikan pembuatan Website Blacklist, Penulis dapat menarik beberapa kesimpulan yang akan dijabarkan berikut ini:
1. Website Blacklist ini bermanfaat bagi Mahasiswa di Fakultas Teknik Informatika di Universitas Kristen Maranatha dengan menampilkan aplikasi-aplikasi game yang telah mereka buat dan dapat dimainkan.
2. Untuk saat ini member dapat melakukan upload file game yang berbentuk swf (Shockwave Flash ) saja, game ini akan disimpan di dalam suatu file di dalam server
sehingga dapat dimainkan.
3. Hak akses yang diberikan untuk memainkan game ini adalah setiap user yang telah melakukan upload game, harus memiliki friends sehingga friends dapat memainkan
game yang telah di simpan di dalam website Blacklist.
4. Penggunaan AJAX, javascript, PHP yang berbasis Web 2.0 ini memiliki kelebihan khusus, yaitu dalam beberapa bagian menggunakan AJAX yang memiliki background proses sehingga semua proses dilakukan secara bersamaan tanpa diharuskan melakukan refresh terlebih dahulu.
5. Penggunaan teknologi Adobe Flex yang berbasis pada RIA akan membuat interaktif yang
real-time yang memungkinkan proses dijalankan dalam halaman tersebut. Proses data
yang akan diambil menggunakan XML dan Javascript yang memudahkan user untuk mengubah database secara cepat dengan langkah menyimpan ke dalam XML lalu menyimpannya ke dalam databaseserver.
6. Penggunaan Algoritma Ant yang digunakan untuk pencarian anggota yang mungkin dikenali sangat membantu member untuk lebih mudah berinteraksi dengan anggota lainnya. Penekanan Algoritma Ant dititik beratkan pada bobot angka kemungkinan anggota tersebut kenal dengan user.
6.2.
Saran
Dalam sub-bab ini berisi tentang saran dari Penulis untuk pengembangan website
Blacklist selanjutnya. Berikut ini adalah saran- saran yang dikemukakan:
1. Website ini sebaiknya dikembangkan menggunakan konsep Web 2.0 secara penuh,
140
Universitas Kristen Maranatha
2. Website masih banyak perlu dikembangkan dengan tambahan wall to wall, status
updated, game yang bertipe exe dan tipe lainnya.
153
DAFTAR PUSTAKA
Aka rcz, R. (2009, February 21). vista-like_ajax_calendar_2.html. Dipetik October 6, 2009,
dar
Anonymous. (2008, December 3). Dipetik November 15, 2009, dari
Anonymous. (2009, February 8). Dipetik January 16, 2010,
dar
Crane, Pascarello, & James. (2006). AJAX in Action. Greenwich.
Dwi Prasetyo, Didik. 2006. 101 Tip & Trik Pemrograman PHP. Jakarta : PT. Elex Media Komputindo.
Holzener, S. (2006). AJAX for Dummies. Indiana.
Jayan. 2007. 64 Trik Tersembunyi Flash. Palembang : Maxikom
kapit. (2009, October 27). Dipetik November 15, 2009,
dar
Liam. (2009, August 18). Dipetik October 6, 2009, dari
PathFusion. (2009, October 20). PathFusion Coorporation. Dipetik November 12, 2009,
