T1 672006065 Full text
1 1. Latar Belakang
Situs Jejaring sosial dipandang sebagai sebuah situs yang dikembangkan untuk mempermudah interaksi antar kelompok dan individu, serta dukungan untuk mendapat umpan balik [1]. Dari pengertian tersebut situs jejaring sosial membuat antar individu dapat berkomunikasi satu sama lain dimanapun mereka berada dan kapanpun, tidak peduli seberapa jauh jarak mereka, dan tidak peduli siang atau pun malam asalkan terhubung dengan satu jaringan yang sama.Hal inilah yang membuat situs jejaring sosial menjadi media berbagi informasi yang populer saat ini.Kepopuleran dari situs jejaring sosial selain dimaanfaatkan untuk media berbagi informasi juga dapat dimanfaatkan sebagai sarana edukasi dengan cara memberikan referensi tentang berbagai hal yang berkaitan dengan hal edukasi. Namun situs jejaring sosial yang ada selama ini hanya dimanfaatkan sebagai sarana berbagi informasi dan komunikasi saja.Oleh karena itu perlu ditambahkan fitur yang bersifat edukatif. Salah satunya adalah fitur berbagi e-book pada situs jejaring sosial agar selain user dapat berbagi informasi, user juga dapat membaca berbagai e-book yang bersifat edukatif.
Situs interaktif adalah situs yang di dalamnya terdapat komunikasi dua arah.antara pemilik situs dengan pengunjung situs itu sendiri.Jadi di dalam situs itu memungkinkan para pembaca untuk berinteraksi dengan penulis atau dengan pembaca lain, misalnya bertanya atau berkomentar atau mungkin juga saling menambah informasi dari apa yang dibaca [2].Situs jejaring sosial tentu saja harus bersifat interaktif agar user tertarik dengan situs tersebut.Untuk membangun situs yang bersifat interaktif dan menarik, tentu saja dibutuhkan teknologi yang dapat mendukung dan menyediakan fitur –fitur yang bersifat interaktif.Beberapa teknologi yang menyediakan fitur tersebut adalah HTML5 (HyperText Markup Language5th version), CSS3 (Cascading Style Sheet level three), dan ASP (Active Server Pages). HTML5yang berfungsi sebagai penampil dokumen, gambar, dan berbagai fitur yang membuat sebuah web menjadi lebih interaktif, sedangkan CSS untuk membuat halaman web menjadi lebih tersruktur dan interaktif,dan ASP untuk menjadikan web lebih dinamik.Berdasarkan latar belakang yang sudah dijelaskan, dibangun situs jejaring sosial dengan menambahkan fitur berbagi e-book sebagai sarana edukasi dengan mengimplementasikan HTML 5, CSS 3 dan ASP.
2. Tinjauan Pustaka
Dalam penelitian terdahulu, yang berjudul “Perancangan Dan Implementasi Katalog Online Pada Jejaring Sosial Dengan Platform Facebook” [3] dimana penelitian ini membahas tentang pembuatan sebuah katalog online yang terintegrasi dengan account facebook sehingga transaksi yang dilakukan menjadi lebih aman. Untuk membangun katalog online ini digunakan bahasa FBML (Facebook Markup Language) yaitu bahasa pemrograman yang digunakan untuk membangun sebuah aplikasi yang dapat terintegrasi dengan data yang ada pada situs Facebook diantaranya adalah profile, profile action, facebook canvas, mini
(2)
2
feed, news feed. Penelitian ini memanfaatkan jejaring sosial sebagai media untuk penjualan secara online.
Penelitian yang lain berjudul “Penerapan Teknologi WebGL pada Virtual Aquarium berbasis 3 Dimensi(3D)”[4] dimana pada penelitian ini membahas tentang implemtasi WebGL dan HTML 5 pada sistem penjualan ikan secara
online berbasis web. WebGL adalah konteks kanvas dari sebuah elemen HTML yang menyediakan grafis dengan objek 3D API yang diimplementasikan pada web browser tanpa menggunakan plug-in. Namun untuk mengakses WebGL harus menggunakan versi HTML 5 dengan mengakses elemen kanvas [5].Setelah melakukan implementasi WebGL dan HTML 5 pada website penjualan ikan secara online maka, pembeli dapat melihat bentuk ikan yang akandibeli secara detail karena gambar ikan divisualisasi kan dalam format 3D. Pada penelitian ini
user hanya dapat melihat dan memilih ikan saja dan user tidak dapat berkomunikasi atau bertukar pendapat dengan user lain tentang ikan yang akan dibeli.Selain itu untuk berkomunikasi dengan pemilik situs user tidak bisa langsung berkomunikasi melalui aplikasi web tersebut namun, harus berkomunikasi melalui telepon seluler.
Jejaring sosial merupakan situs dimana setiap orang bisa membuat web page
pribadi, kemudian terhubung dengan teman-teman untuk berbagi informasi dan berkomunikasi [1]. Jejaring sosial terbesar antara lain Facebook, Myspace, dan Twitter. Jika media tradisional menggunakan media cetak dan media broadcast, maka situs jejaring sosial menggunakan internet. SitusJejaring sosial mengajak siapa saja yang tertarik untuk berinteraksi dengan memberi kontribusi dan feedback secara terbuka, memberi komentar, serta membagi informasi dalam waktu yang cepat dan tak terbatas.
Active Server Pages atau ASP merupakan suatu script yang bersifat server-side yang ditambahkan pada HTML untuk membuat sebuah web menjadi lebih menarik, dinamis dan efektif[2].ASP juga dapat mengolah dan menyimpan data dari client kedalam sebuah database.Microsoft merupakan perusahaan software
yang menciptakan teknologi ASP ini. ASP bukanlah sebuah bahasa pemrograman karena ia masih menggunakan instruksi yang ada pada script lain seperti VBScript
dan Jscript. ASP sering dikombinasikandengan Vbscript dan Jscript.Karena bersifat server-sidemaka ASP membutuhkanweb serveruntuk menjalankanscript
yang ada pada ASP.Salah satu web server yang digunakan untuk menjalankan
script ASP adalah IIS atau Internet Information Server yang hanya berjalan pada sistem operasi berbasis window.
HTML (Hyper Text Markup Language) adalah sebuah bahasa standar yang digunakan oleh Internet browseruntuk membuat halaman dan dokumen pada sebuah web yang kemudian dapat diakses dan dibaca layaknya sebuah artikel. Sedangkan HTML 5 merupakan perkembangan dari HTML. Pada versi HTML sebelumnya dijumpai kelemahan untuk mendukung aplikasi web interaktif. Akibat hal ini banyak orang yang menambahkan fitur baru baik disisi aplikasi web
ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah
Flash dan Silverlight[6]. Semakin banyaknya plugin yang diperlukan didalam aplikasi atau browser membuat aplikasi web ini susah untuk menembus banyak
(3)
3
penggunaanya.Kelebihan HTML 5 dibanding dengan versi HTML sebelumnya adalah adanya fitur baru seperti memutar video, sound dan fasilitas drag and drop
tanpa melibatkan plug-in pihak ketiga di web browser seperti Adobe Flash dan
Microsoft Silverlight.
Cascading Style Sheet (CSS) merupakan scriptyang digunakanuntuk mengendalikan beberapa komponen dalam sebuah web, sehinggaweb tersebut menjadi lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa file. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML [7].CSS 3 merupakan perkembangan dari versi sebelumnya dengan tambahan fiturselectors, boxmodel, backgrounds and borders, text effects,
2D/3Dtransformations, animations, multiple column layout.
AJAX merupakan kepanjangan dari Asynchronous JavaScript and XML.
AJAX bukan merupakan bahasa pemrograman tapi merupakan sebuah metode atau teknik untuk membuat sebuah aplikasi web bisa berinsteraksi selayaknya aplikasi desktop[2]. Saat ini sudah banyak website yang menggunakan AJAX. Hal ini dikarenakan website dapat berinteraksi dengan server melalui javascript secara asinkron (background). Istilah asynchronously pada AJAX berati mengirim dan menerima data dari user ke server tanpa perlu memuatkembali seluruh halaman, melainkan hanya melakukan penggantian pada bagian web yang hendak diubah.Teknik AJAX memungkinkan pengembang web dapat membuat sebuah aplikasi web yang bersifat interaktif karena AJAX dapat membuat sebuah website
memiliki berbagai fitur yang ada di aplikasi dekstop dengan cara melakukan komunikasi ke server setiap waktu tanpa meminta seluruh informasi yang ada pada sebuah halaman web namun hanya bagian yang diperlukan.
3. Metode dan Perancangan Sistem
Metode penelitian yang digunakan pada pembuatan aplikasi ini adalah model
prototype.Prototype dapat disebut juga sebagai blueprint dari sebuah sistem perangkat lunak yang ke depannya dapat dikembangkan menjadi skala yang lebih besar dan lebih baik berdasarkan umpan balik dari pengguna.Prototype model memungkinkan adanya interaksi yang lebih baik antara pengembang program dan pengguna,sehingga sistem yang dibuat hasilnya lebih maksimal [8].
(4)
4
Gambar 1Model Proses Prototype [8]
Gambar 1merupakan gambaran tahapan umum dari prototype model yang akan dijelaskan sebagai berikut. Tahap pertama.Adalah tahapan requirement. Pada tahapan ini yang dilakukan adalah mencari dan mengumpulkan data yang dibutuhkan sistem yang nantinya digunakan untuk aplikasi tersebut. Pengumpulan data tersebut dilakukan dengan dua cara. Cara yang pertama adalah melakukan observasi pencarian di internet terkait dengan situs jejaring sosial yang sudah ada dan cara yang kedua dengan cara referensi yaitu melakukan pembelajaran melalui artikel dan buku-buku yang membahas tentang teknologi browser HTML5 dan CSS3, pemograman database, dan Pemrograman ASP.NET.Tahap kedua adalah perancangan sistem menggunakan diagram Unified Modelling Language(UML) untuk mengetahui setiap proses beserta semua aktifitas dari masing-masing user
yang akan dibangun pada sistem, perancangan database untuk merancang tabel-tabel yang berfungsi untuk menyimpan data-data yang dibutuhkan dalam aplikasi sistem, perancangan antarmuka yaitu merancang antarmuka yang berfungsi sebagai penghubung interaksi antara user dengan sistem.Tahap ketiga adalah melakukan evaluasi prototype yang telah dibuat. Evaluasi ini akan digunakan untuk memperjelas kebutuhan program. Jika tujuan umum yang telah dibuat di tahap awal belum tercapai, maka proses perbaikan dimulai lagi dari tahap awal dan dilanjutkan ke tahap berikutnya. Proses ini berakhir setelah tujuan umum telah tercapai.
Perancangan proses pada penelitian ini dilakukan menggunakan UML(Unified Modeling Language) denganbeberapa proses yang dijelaskan sebagai berikut. Use case diagram menggambarkan fungsionalitas yang diharapkan dari sebuah sistem yang menjelaskan keseluruhan kerja sistem secara garis besar dengan mempresentasikan interaksi antara aktor yang dibuat, serta memberikan gambaran fungsi-fungsi pada sistem tersebut [9].
(5)
5
Gambar 2Use Case Diagram Sistem
Gambar2menunjukkan use casediagram pada aplikasi, dijelaskan sebagai berikut. Aplikasi memiliki dua aktor yakni user dan admin.User adalah pengguna perpustakaan yang telah mendaftar sebagai anggota situs jejaring sosial yang telah dibuat. User yang telah terdaftar menjadi anggota jejaring sosial yang telah dibuat memiliki hak menambah teman dan menghapus teman, mengirim pesan pribadi kepada user dan admin, update status, memberikan komentar, memberikan like, mengunggah foto, mengunggah e-book, melakukan pencarian terhadap user lain dan e-book berdasarkan judul buku. Admin memiliki hak menghapus data e-book, merubah data e-book, mengunggah e-book, mengubah datauser, menghapus data
user, mengganti password admin, menerbitkan e-book yang telah di unggah oleh
user. Di dalam use case ini terdapat hubungan secara extenddan include. Hubungan secara extendberarti suatu use case merupakan tambahan kegunaan dari
use case yang lain. Hubungan secara extend ini dapat kita lihat pada use case lihat data user dengan use case hapus, ubah data user yang berati saat admin melihat data user, admin bisa melakukan kegiatan menghapus dan merubah data user. Hubungan secara include menggambarkan bahwa suatu use case merupakan bagian dari fungsionalitas dari use case lainya. Hubungan secara include dapat kita lihat pada use case cari user dengan use casemelihat detail data user di mana ketika user melakukan pencarian terhadap user lain maka secara otomatis sistem akan menampilkan data user yang dicari secara lengkap.
Diagram aktivitas atau activity diagram adalah diagram yang memodelkan alur kerja (workflow) sebuah proses bisnis dan urutan aktivitas langkah per langkah dalam suatu proses [9]. Jadi dengan adanya Activity diagram kita dapat mengerti semua proses yang terjadi di dalam sistem yang telah dibuat. Activity diagramyang dibuat ada dua yaitu activity diagram user yang berfungsi untuk menjelaskan urutan aktivitas dari user, danactivity diagram admin untuk menjelaskan urutan aktivitas dari admin.
update status
tambah teman
hapus teman kirim komentar upload foto
lihat data user
lihat data e-book
publish e-book upload e-book
<<extend>> <<extend>>
hapus,ubah data user <<extend>>
hapus, ubah data e-book <<extend>>
user
cari user melihat detail data user <<include>>
<<extend>> <<extend>>
admin pembatalan publish e-book
(6)
6
Gambar 3Activity Diagram Unggah E-book Oleh User
Gambar3 merupakan activitydiagram userpada saat melakukan proses unggah
e-book yang dijelaskan sebagai berikut. Awalnya user harus memasukan file pdf
kedalam form unggah yang ada pada halaman situs,lalu setelah file pdf dimasukan, user mengirimkan file tersebut untuk di olah oleh aplikasi. Setelah
user mengirimkan file pdf tersebut aplikasi akan memeriksa apakah file yang dikirim oleh user tadi benar-benar berupa file pdf atau bukanfile pdf. Jika file yang diunggah tadi bukan file pdf maka aplikasi akan memberikan peringatan kalau file
yang di unggah bukan berupafile pdf kepada user dan user harus melakukan proses unggah kembali kedalam form unggah dengan file yang lain sampai file
yang diunggah benar-benar berupa file pdf. Jika file yang diunggah benar-benar berupa file pdf maka aplikasi akan melakukan proses tambah data e-book kedalam database dengan status belum valid untuk menandakan bahwa file pdf tersebut belum di validasi oleh admin atau e-book tersebut belum diperiksa oleh admin. Setelah data e-book berhasil ditambahkan maka aplikasi akan mengirimkan pemberitahuan kepada userbahwa e-book berhasil diunggah dan akan segera di publish oleh admin jika e-book yang telah diunggah tadi sudah sesuai dengan kriteria yang admin harapkan.
File pdf tidak valid mengunggah file pdf
melalui form unggah mulai
selesai
cek file pdf
Mengirim pemberitahuan e-book berhasil di unggah
Menambah data e-book File Pdf Valid
Database Aplikasi
(7)
7
Gambar 4 Activity Diagram Publish E-book OlehAdmin
Gambar4 merupakan activity diagram admin pada saat melakukan publish e-book yang telah diunggah oleh useryang dijelaskan sebagai berikut. Awalnya
admin memilih menu lihat data e-book yang belum divalidasi. Kemudian aplikasi akan meminta data e-book yang belum divalidasi yang ada pada database. Setelah data e-book yang belum divalidasi sudah ditampilkan, admin akan memeriksa apakah e-book yang diunggah oleh user sudah memenuhi kriteria yang admin
harapakan. Jika belum maka admin akan memilih menu hapus dan aplikasi akan melakukan proses hapus data e-book yang ada pada database. Jika e-book yang diunggah oleh user sudah sesuai dengan kriteria yang admin harapkan maka
admin akan memilih menu publish e-book dan aplikasi akan melakukan proses merubah data e-book yang sudah diperiksa oleh admin tadi yang ada pada
database.
Class diagram merupakan diagram yang membantu dalam visualisasi struktur kelas-kelas dari suatu sistem. Dalam diagram ini, diperlihatkan hubungan antar kelas dan penjelasan detail tiap-tiap kelas [9].Class diagram adalah alat perancangan terbaik untuk tim pengembang. Diagram tersebut membantu pengembang mendapatkan struktur sistem sebelum kode ditulis.
mulai
Melihat Data e-book yang belum di publish
memeriksa e-book yang belum di publish
selesai
meminta data e-book yang belum dipublish
menampilkan data e-book yang belum dipublish
Merubah status e-book menjadi valid Menghapus
e-book
Ambil data e-book yang belum dipublish
merubah data e -book menghapus data e-book
database aplikasi
(8)
8
Gambar 5Class Digram Sistem
Gambar 5 merupakan class diagram sistem yang menggambarkan relasi antara satu class dengan class yang lain. Setiap class terdiri dari atribut dan
operation.Atribut merupakan daftar kolom beserta tipe data yang digunakan sesuai dengan tabel yang ada di dalam database. Sedangkan operation merupakan rancangan fungsi-fungsi yang akan digunakan untuk pengembangan aplikasi yang dibuat. Pada diagram terlihat kelas user berelasi dengan kelas komentar, pesan, teman, foto, ebook, dan status dengan derajat 1 to n yang berati 1 user dapat meberi banyak komentar, mengirim banyak pesan, mengunggah banyak foto, mengunggah banyak e-book, dan menambah banyak teman. Pada diagram juga terlihat kelas admin memiliki relasi dengan kelas user dan kelas e-book dengan derajat relasi 1 to n yang berati 1 admin memiliki hak akses penuh untuk menghapus, mengubah, dan menambah banyak data user dan banyak data e-book. Derajat relasi antara kelas yang satu dengan kelas yang lainnya dapat dilihat pada Gambar 5.
4. Hasil dan Pembahasan
Hasil implementasi sistem yang dibangun sesuai perancangan yang dilakukan, dijelaskan sebagai berikut. Situs jejaring sosial yang telah dibuat memiliki dua pengguna utama yaitu admin dan user.Admin memiliki hak akses penuh dalam sistem, hak akses penuh yang dimaksud adalah admin dapat melihat, mengubah dan menghapus data user, data buku dan publish data e-book yang telah diunggah oleh user. Sedangkan user dapat mengunggah e-book, memperbarui status, unggah foto, menambah teman, saling berkomentar dan saling berkirim pesan.
e-book judul_buku pengarang id_buku kategori sinopsis id_user link_pdf foto_cover tgl_unggah edit_buku() hapus_buku() tambah_buku() pesan isi_pesan id_pengirim id_penerima tgl_pesan kirim_pesan() hapus_pesan() komentar id_status id_pengguna isi_komentar tanggal add_komen() teman id_teman id_pengguna nama_d foto tambah_teman() hapus_teman() status id_status id_pengguna tanggal jumlah_like jumlah_komen foto_user isi_status kirim_status() foto id_pengguna id_foto link_foto tanggal upload_foto() 1 n 1 1 1 1 1 1 n n n n n n n admin nama_id pass ganti_pwd() user id_pengguna nama_d foto_p kelamin tgl_lahir email pwd nama_b jkoleksi edit_data_user() 1 n
(9)
9
Gambar 6Halaman Login User.
Gambar 6 adalah tampilan utama bagi user, dimana user harus melalukan
login terlebih dahulu sebelum user masuk kehalaman utama user. Pada halaman ini user selain dapat melakukan proses login,user juga dapat melakukan pendaftaran akun jika user belum terdaftar sebagai anggota.
Gambar 7Halaman HomeUser.
Gambar 7 adalah tampilan halaman home yang merupakan halaman utama
user setelah login atau setelah user berhasil mendaftar sebagai member. Pada halaman ini user dapat mengetahui berbagai aktivitas yang dilakukan oleh
userlain yang telah menjadi teman.Aktivitas tersebut antara lain melihat status terbaru teman, foto terbaru teman, dan e-book terbaru yang di unggah teman. Pada
(10)
10
halaman ini user dapat memilih menu profil untuk melihat aktivitas yang telah dilakukan user sendiri, menu E-Book untuk melihat berbagai koleksi buku yang telah diunggah oleh berbagai user, menu pemberitahuan untuk melihat berbagai pemberitahuan jika ada komentar yang diberikan pada status, foto, atau e-book yang diunggah user, menu pesan untuk melihat berbagai pesan yang masuk, dan menu lainya untuk merubah data pribadi dan password login userserta user dapat mengirim pesan kepada admin.
Kode Program 1Perintah untuk menampilkan design pada HTML5
Kode Program 1 adalah element baru dari HTML 5 yang berfungsi untuk menyusun tata letak isi dari situs. Fungsinya sama dengan element DIV, namun yang membedakanya adalah, element DIV harus melibatkan CSS untuk mengatur tata letak isi dari sebuah situs sedangkan element baru dari HTML5 tersebut sudah memiliki fungsi sendiri sehingga tidak terlalu banyak membuat scriptCSS untuk mengatur tata letak isi dari situs. Implementasi dari element HTML 5 tersebut dapat dilihat pada gambar 8.
+
Gambar 8Hasil Implementasi Element Baru Dari HTML5
Pada aplikasi element HEADERdan NAVberfungsi untuk menempatkan daftar menu, sedangkan element ARTICLE untuk menempatkan status terbaru dari setiap
user pada halaman home user, element ASIDE untuk menempatkan daftar user
dan daftar e-book terpopuler pada halaman home user, dan element FOOTER
untuk mengakhiri halaman dari situs.
1. <!DOCTYPE html> 2. <body>
3. <header></header> 4. <nav></nava>
5. <article></article> 6. <footer></footer> 7. <body>
(11)
11
Gambar 9Fitur Notifikasi
Gambar 9 merupakan tanda jika ada pesan atau komentar baru yang diberikan oleh user lain. Angka dengan warna hijau muda tersebut menunjukan jumlah pesan atau komentar yang diberikan oleh user lain. User tidak perlu melakukan
refresh pada halaman jika ingin melihat notifikasi baru, karena fitur ini sudah menggunakan AJAX.
Kode Program 2PerintahPemakaian AJAX
Kode Program 2 merupakan salah satu contoh pemanggilan AJAX yang diimplementasikan pada aplikasi yang telah dibuat. Berikut adalah penjelasan dari kode program 2. Baris 1-2 merupakan script untuk melibatkan fungsi-fungsi yang ada pada ajax.js. Baris 4-6 untuk memanggil fungsi ambilDatayang ada pada ajax.js dengan menambahkan parameter ceknotif.asp yang merupakan url dan id_info yang merupakan letak dari halaman situs. Baris 7 berfungsi untuk memanggil fungsi notif setiap detik.
Kode Program 3Perintah pada ajax.js
1. <script src="ajax.js" type="text/javascript"> 2. </script>
3. <script type="text/javascript">
4. function notif()
{
5. ambilData("ceknotif.asp","id_info") }
6. </script>
7. <body id="top" onload="setInterval(notif,1000); ">
1. var xmlHttp=buatObjekXmlHttp();
2. function buatObjekXmlHttp()
3. {
4. var obj=null;
5. if(window.ActiveXObject)
6. obj=new ActiveXObject("Microsoft.XMLHTTP");
7. else
8. if(window.XMLHttpRequest)
9. obj=new XMLHttpRequest();
10. if(obj==null)
11. document.write("Browser tidak suport XmlHttpRequest");
12. return obj;
13. }
14. function ambilData(sumber_data,id_elemen){
15. if(xmlHttp!=null){
16. var obj=document.getElementById(id_elemen);
17. xmlHttp.open("GET",sumber_data);
18. xmlHttp.onreadystatechange=function(){
19. if(xmlHttp.readyState==4 && xmlHttp.status==200){
20. obj.innerHTML=xmlHttp.responseText; }}
(12)
12
Kode Program 3 adalah perintah yang ada pada ajax.js yang akan dijelaskan sebagai berikut. Baris 1 berfungsi untuk membuat variabel XmlHttp dari fungsi buatObjekXmlHttp. Baris 2-13 adalah fungsibuatObjekXmlHttp yang digunakan untuk memeriksa apakah browsermendukung XmlHttpRequest atau tidak. XmlHttpRequest adalah sebuah object javascript yang digunakan untuk mengakses web server secara asingkron, jadi user dapat terus melakukan aktifitasnya di sebuah halaman web tanpa melakukan refresh halaman tersebut, karena proses request dilakukan di background [2]. Baris 14-21 adalah fungsi ambilData yang berfungsi untuk melakukan request secara asinkron, request
tersebut adalah mengambil nilai dari url yang telah dimasukan pada parameter ambilData pada kode program 2, lalu meletakan nilai tersebut pada halaman situs yang element-nya memiliki id yang telah dimasukan melalui parameter ambilData pada Kode Program 2.
Gambar 10 Text Box Dengan EfekShawod.
Gambar 8 adalah textbox email yang ditampilkan pada halaman login user.
textbox ini dibuat dengan menggunakan salah satu fitur baru dari CSS3 yaitu box shadow untuk memberikan efek bayangan pada textbox. Perintah yang digunakan untuk membuat textbox ini dapat dilihat pada Kode Program 4.
Kode Program 4perintah untuk memberikan efek bayangan pada textbox
Kode Program 4 adalah perintah yang digunakan untuk membuat
textboxemail dengan menambahkan efek bayangan yang akan dijelaskan sebagai berikut. Baris 1 berfungsi untuk menginisialisasi setiap tag html yang menggunakan classmyBox akan secara otomotis memakai style yang ada pada
class myBox.Baris 2berfungsi untuk menentukan warna latar belakang pada
texbox.Baris 3-4 berfungsi untuk membentuk kelengkungan sisi dari textbox yang dibuat.Baris 5 berfungsi untuk menambahkan efek bayangan beserta warna bayangan yang diinginkan.Baris 6-8 untuk menentukan warna, type font, dan
1. input.myBox {
2. background: white;
3. border: 0px solid #ffa853;
4. border-radius: 5px;
5. box-shadow: 0 0 5px 3px #ffa853;
6. color: #666;
7. font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif;
8. font-size: 12px;
9. padding: 5px 10px;
10. width: 165px;
(13)
13
ukuran font saat textbox diisi.Baris 10-11 untuk menentukan posisi textbox pada halaman web.
Gambar 11Halaman pesan_admin.asp
Gambar 11 adalah gambar yang menampilkan percakapan antara user dengan
admin. Melaui halaman ini user juga dapat mengirim pesan kepada admin dengan cara mengisi textbox yang telah disediakan. Jika admin telah membalas pesan user
tersebut maka secara otomatis pada menu lainya akan muncul angka dengan warna biru yang menunjukan bahwa admin telah mengrim pesan kepadauser.
(14)
14
Gambar 12Halaman Buku.asp
Gambar 12 adalah halaman buku.asp yang berfungsi untuk menampilkan seluruh data e-book yang telah di unggah oleh user yang diurutkan berdasar waktu. Selain itu pada halaman ini user juga bisa melakukan pencarian buku berdasar judul, nama penulis, dan berdasar kategori buku. Pada halaman ini user
hanya dapat melihat data buku yang berupa judul, nama pengarang dan kategori saja, sedangkan untuk melihat secara detail, user harus melakukan klik pada gambar buku yang diinginkan. Setelah itu user akan dibawa kehalaman dbuku.asp seperti yang ditunjukan pada Gambar 13.
(15)
15
Gambar 13Halaman dbuku.asp
Gambar 13adalah halaman dbuku.asp. Halaman ini berfungsi untuk menampilkan secara detaile-book yang telah dipilih oleh user. Dihalaman ini user
juga dapat melihat komentar tentang e-book tersebut sekaligus memberikan komentar dengan mengisi textbook yang telah disediakan.Detail darie-book itu adalah sinopsis dari e-book tersebut, tanggal terbit, jumlah halaman, nama pengarang, dan bahasa yang digunakan. Selain itu user juga dapat mengunduh e-book dengan melakukan klik pada gambar dan tulisan download.
(16)
16
Gambar 15Halaman adminhome.asp
Gambar 15 merupakan halaman utama setelah admin berhasil melakukan
login.Pada halaman ini admin dapat memilih menu yang di inginkan.Tanda hijau pada menu yang berisi angka merupakan notifikasi adanya data baru yang masuk.Data tersebut bisa berupa data e-book yang baru saja di unggah oleh user,
pesan baru dari user, ataupun adanya permintaan password dari user yang lupa
password untuk login. Menu yang ada pada halaman ini adalah menu inbox untuk melihat pesan yang telah dikirim user untuk admin, menu upload buku untuk menambah data e-book, menu e-book yang belum divalidasi untuk mengolah data
e-book yang telah diunggah user, menu permintaan password untuk melihat user
yang meminta password untuk login, menu data buku sudah divalidasi untuk mengolah data e-book yang telah diterbitkan admin, menu data user untuk mengolah data user, dan menu ganti passwordadmin untuk merubah password
saat admin melakukan login.
Agar mengetahui sejauh mana keberhasilan aplikasi yang dibuat, maka dibutuhkan suatu pengujian pada situs jejaring sosial yang telah dibuat yang dilakukan dengan tujuan untuk menghindari kesalahan-kesalahan yang terjadi pada aplikasi yang dibangun. Pengujian dilakukan dengan dua tahap yaitu pengujian dengan metode pengujian blackboxdan pengujian responden.
Guna mengetahui kinerja dari sistem yang telah dibangun maka dilakukan pengujian menggunakan Unit testing black box yaitu dengan mencari bug/error
yang terdapat pada aplikasi yang dibuat dengan cara menjalankan atau mengeksekusi aplikasi yang dibuat kemudian diamati apakah hasil dari unit itu sesuai dengan proses bisnis yang diinginkan. Pengujian yang dilakukan meliputi kegiatan insert, update dan delete data pada masing-masing fitur yang ada pada situs jejaring sosial yang dibuat. Pengujian ini dilakukan dalam 4 kali karena terdapat bug atau error pada saat proses insert, update dan delete data pada masing-masing fitur yang ada pada situs jejaring sosial yang dibuat. Setelah melakukan pengujian black box yang ke 4 akhirnya semua proses dapat berjalan dengan baik. Hasil pengujian dapat dilihat pada Tabel 1.
(17)
17
Tabel 1 Hasil Pengujian Sistem Menggunakan Black Box
Aktivitas dan Event Input Ouput Status Pengujian
Login dengan memilih tombol
login
Username dan
Password Jika berhasil bisa mengakses menu-login, maka menu yang terdapat dalam
aplikasi. Jika password dan
username salah, maka akan muncul pesan bahwa
username dan password
salah.
Valid
Tambah data Memasukkan data user,
data e-book, menambah
status user,menambah
komentar, mengirim pesan, menambah teman
Jika belum memasukkan data sesuai prosedur maka akan muncul peringatan untuk
melengkapi field yang
masih kosong.
Valid
Lihat data kemudian
pilih lihat detail Memilih data yang ingin dilihat Menampilkan detail data yang dipilih. Valid
Ubah data kemudian
pilih ubah Mengubah data yang ada Jika masih ada data yang masih kurang (tidak sesuai
prosedur), maka proses edit
gagal, dan harus dilengkapi.
Valid
Mencari data kemudian pilih tombol cari
Memasukkan data yang
ingin dicari Jika data yang akan dicari tidak ada, maka data tidak akan muncul.
Valid
Menghapus data kemudian pilih hapus
Memilih data yang ingin
dihapus Data terhapus Valid
Mengunggah file Unggah foto, unggah
file pdf Pemberitahuan bahwa file sedang diperikasa oleh
admin
Valid
Berdasarkan hasil pengujian dari masing-masing proses pada Tabel 1, maka dapat disimpulkan bahwa sistem yang dibuat telah berjalan dengan baik dan sudah tidak ditemukan bug/error saat menjalankan proses insert, update, dan delete pada data yang ada pada situs jejaring sosial yang telah dibuat. Setelah melakukan pengujian sistem selesai selanjutnya dilakukan pengujian terhadap responden.Pengujian responden dilakukan untuk mengetahui apakah situs jejaring sosial yang telah dibuatdapat bermanfaat atau tidak bagi userdan apakah situs jejaring sosial yang telah dibuatsudahcukup menarik bagi user. Pengujian ini dilakukan dengan duatahap yaitu, yang pertama responden melakukan uji coba terhadap aplikasi yang telah dibuat setelah itu respondenakan diberikanangket yang berisi pertanyaan seputar manfaatdan tingkat kemenarikan pada aplikasi yang telah dibuat. Hasil dari pengujian pengisian angket ini dapat dilihat pada Tabel 2.
(18)
18
PTabel 2 Tabel Hasil Pengujian responden
No. Kriteria Penilaian A
SS B S TS C STS D Total
1 Situs Jejaring sosial yang dibuat sudah sesuai dengan Situs Jejaring sosial yang ada selama ini di internet
16 4 0 0 20
2 Situs Jejaring sosialSudah cukup menarik 5 15 0 0 20
3 Situs Jejaring sosial ini l mudah dalam hal penggunaanya karena mirip dengan situs sosial media seperti Facebook dan twiter
13 5 2 0 20
4 Fitur pemberian komentar pada e-book sangat bermanfaat untuk memberikan tanggapan terhadap e-book yang telah diunggah
3 12 5 0 20
5 Fitur berkirim pesan dengan user dan admin
sangat bermanfaat bagi anda 5 9 6 0 20
6 Fitur unggah foto sangat bermanfaat bagi
anda 7 9 4 0 20
7 Fitur unggah e-book sangat bermanfaat bagi
anda 17 3 0 0 20
8 Fitur notifikasi pesan secara otomatis sangat
bermanfaat bagi anda 13 7 0 0 20
9 Fitur pencarian E-book dan user sangat
bermanfaat bagi anda 3 10 7 0 20
10 Hasil pencarian e-book dan user sudah
sangat akurat 9 11 0 0 20
91 85 24 0 200
Keterangan
ST= Sangat Setuju, S = Setuju, TS = Tidak Setuju, STS = Sangat Tidak Setuju
Gambar 16Hasil Pengujian Aplikasi Pada User
Hasil pengujian yang tampak pada Tabel 2 dibuat dalam bentuk diagram pada Gambar 16 dengan penjelasan sebagai berikut:
Jawaban A : 91 dari 200 (91/200*100%) = 45.5%
Jawaban B : 85 dari 200 (85/200*100%) = 42.5%
Jawaban C : 24 dari 200 (24/200*100%) = 12%
Jawaban D : 0 dari 200 (0/200*100%) = 0%
Berdasarkan hasil pengujian pada user disimpulkan bahwa untuk masing-masing kriteria penilaian, 45.5% berpendapat sangat setuju kalau fitur-fitur yang
45.5% 42.5%
12% Sangat
setuju Setuju Kurang Setuju
(19)
19
ada pada Situs Jejaring sosial yang dibuat bermanfaat bagi user dan 42.5% berpendapat setuju kalau fitur-fitur yang ada pada Situs Jejaring sosial yang dibuat bermanfaat bagi user.
Berdasar hasil pengujian, dapat disimpulkan bahwa situs jejaring sosial yang telah dibuat sudah menarik dan penambahan fitur berbagi e-book bermanfaat bagi
user.
5. Simpulan
Berdasarkan pembahasan, pengujian, dan analisis sistem, maka dapat diambil kesimpulan bahwa situs jejaring sosial yang telah dibuat bermanfaat bagi user.itu situs jejaring sosial yang telah dibuat selain dapat digunakan untuk saling berbagi informasi, user juga dapat memanfaatkan fitur berbagi e-book yang telah di unggah untuk sarana edukasi.Saran untuk pengembangan aplikasi ini adalah perlu ditambahkanya fitur unggah video-video tutorial agar situs jejaring sosial menjadi lebih menarik dan bermanfaat bagi user.
6. Daftar Pustaka
[1] Kayri, M, Cakir, O, 2010, An Applied Study On Educational Use Of Facebook As A Web 2.0 Tool The Sample Lesson Of Computer Network And Communication. Turki :Ankara University.
[2] Kurniawan, Erick, 2009, Cepat Mahir ASP.Net 3.5 Untuk Aplikasi Web Interaktif. Yogyakarta :Penerbit Andi Offset.
[3] Susanto, Gunawan. 2011. Perancangan Dan Implementasi Katalog Online
Pada Jejaring Sosial Dengan Platform Facebook. Salatiga: Fakultas Teknologi Informasi Universitas Kristen Satya Wacana.
[4] Wibowo, Herry. 2011. Penerapan Teknologi WebGL pada Virtual
Aquarium berbasis 3 Dimensi(3D). Salatiga: Fakultas Teknologi Informasi Universitas Kristen Satya Wacana.
[5] Williams,James. 2011. Learning HTML5 Game Programming. United State:
Addison Wesley.
[6] Khafidli,Firgiawan,M. 2011, Trik Menguasai HTML5, CSS3, PHP Aplikatif. Yogyakarta :Loko Media.
[7] Wiswakarma,Komang. 2011, Teknik Cepat Menguasai CSS 3. Yogyakarta :
Loko Media.
[8] Sommerville, Ian. 2001. Software Engineering 6th Edition. United State: Addison Wesley.
[9] Nugroho, Adi., 2010,Mengembangkan Aplikasi Basis Data Menggunakan C# + SQL Server. Yogyakarta :Penerbit Andi Offset.
(1)
14
Gambar 12Halaman Buku.asp
Gambar 12 adalah halaman buku.asp yang berfungsi untuk menampilkan seluruh data e-book yang telah di unggah oleh user yang diurutkan berdasar waktu. Selain itu pada halaman ini user juga bisa melakukan pencarian buku berdasar judul, nama penulis, dan berdasar kategori buku. Pada halaman ini user hanya dapat melihat data buku yang berupa judul, nama pengarang dan kategori saja, sedangkan untuk melihat secara detail, user harus melakukan klik pada gambar buku yang diinginkan. Setelah itu user akan dibawa kehalaman dbuku.asp seperti yang ditunjukan pada Gambar 13.
(2)
15
Gambar 13Halaman dbuku.asp
Gambar 13adalah halaman dbuku.asp. Halaman ini berfungsi untuk menampilkan secara detaile-book yang telah dipilih oleh user. Dihalaman ini user juga dapat melihat komentar tentang e-book tersebut sekaligus memberikan komentar dengan mengisi textbook yang telah disediakan.Detail darie-book itu adalah sinopsis dari e-book tersebut, tanggal terbit, jumlah halaman, nama pengarang, dan bahasa yang digunakan. Selain itu user juga dapat mengunduh e-book dengan melakukan klik pada gambar dan tulisan download.
(3)
16
Gambar 15Halaman adminhome.asp
Gambar 15 merupakan halaman utama setelah admin berhasil melakukan login.Pada halaman ini admin dapat memilih menu yang di inginkan.Tanda hijau pada menu yang berisi angka merupakan notifikasi adanya data baru yang masuk.Data tersebut bisa berupa data e-book yang baru saja di unggah oleh user, pesan baru dari user, ataupun adanya permintaan password dari user yang lupa password untuk login. Menu yang ada pada halaman ini adalah menu inbox untuk melihat pesan yang telah dikirim user untuk admin, menu upload buku untuk menambah data e-book, menu e-book yang belum divalidasi untuk mengolah data e-book yang telah diunggah user, menu permintaan password untuk melihat user yang meminta password untuk login, menu data buku sudah divalidasi untuk mengolah data e-book yang telah diterbitkan admin, menu data user untuk mengolah data user, dan menu ganti passwordadmin untuk merubah password saat admin melakukan login.
Agar mengetahui sejauh mana keberhasilan aplikasi yang dibuat, maka dibutuhkan suatu pengujian pada situs jejaring sosial yang telah dibuat yang dilakukan dengan tujuan untuk menghindari kesalahan-kesalahan yang terjadi pada aplikasi yang dibangun. Pengujian dilakukan dengan dua tahap yaitu pengujian dengan metode pengujian blackboxdan pengujian responden.
Guna mengetahui kinerja dari sistem yang telah dibangun maka dilakukan pengujian menggunakan Unit testing black box yaitu dengan mencari bug/error yang terdapat pada aplikasi yang dibuat dengan cara menjalankan atau mengeksekusi aplikasi yang dibuat kemudian diamati apakah hasil dari unit itu sesuai dengan proses bisnis yang diinginkan. Pengujian yang dilakukan meliputi kegiatan insert, update dan delete data pada masing-masing fitur yang ada pada situs jejaring sosial yang dibuat. Pengujian ini dilakukan dalam 4 kali karena terdapat bug atau error pada saat proses insert, update dan delete data pada masing-masing fitur yang ada pada situs jejaring sosial yang dibuat. Setelah melakukan pengujian black box yang ke 4 akhirnya semua proses dapat berjalan dengan baik. Hasil pengujian dapat dilihat pada Tabel 1.
(4)
17
Tabel 1 Hasil Pengujian Sistem Menggunakan Black Box
Aktivitas dan Event Input Ouput Status Pengujian
Login dengan memilih tombol login
Username dan
Password Jika berhasil bisa mengakses menu-login, maka menu yang terdapat dalam aplikasi. Jika password dan username salah, maka akan muncul pesan bahwa username dan password salah.
Valid
Tambah data Memasukkan data user, data e-book, menambah status user,menambah komentar, mengirim pesan, menambah teman
Jika belum memasukkan data sesuai prosedur maka akan muncul peringatan untuk melengkapi field yang masih kosong.
Valid
Lihat data kemudian
pilih lihat detail Memilih data yang ingin dilihat Menampilkan detail data yang dipilih. Valid Ubah data kemudian
pilih ubah Mengubah data yang ada Jika masih ada data yang masih kurang (tidak sesuai prosedur), maka proses edit gagal, dan harus
dilengkapi.
Valid
Mencari data kemudian pilih tombol cari
Memasukkan data yang
ingin dicari Jika data yang akan dicari tidak ada, maka data tidak akan muncul.
Valid Menghapus data
kemudian pilih hapus
Memilih data yang ingin
dihapus Data terhapus Valid
Mengunggah file Unggah foto, unggah
file pdf Pemberitahuan bahwa file sedang diperikasa oleh admin
Valid
Berdasarkan hasil pengujian dari masing-masing proses pada Tabel 1, maka dapat disimpulkan bahwa sistem yang dibuat telah berjalan dengan baik dan sudah tidak ditemukan bug/error saat menjalankan proses insert, update, dan delete pada data yang ada pada situs jejaring sosial yang telah dibuat. Setelah melakukan pengujian sistem selesai selanjutnya dilakukan pengujian terhadap responden.Pengujian responden dilakukan untuk mengetahui apakah situs jejaring sosial yang telah dibuatdapat bermanfaat atau tidak bagi userdan apakah situs jejaring sosial yang telah dibuatsudahcukup menarik bagi user. Pengujian ini dilakukan dengan duatahap yaitu, yang pertama responden melakukan uji coba terhadap aplikasi yang telah dibuat setelah itu respondenakan diberikanangket yang berisi pertanyaan seputar manfaatdan tingkat kemenarikan pada aplikasi yang telah dibuat. Hasil dari pengujian pengisian angket ini dapat dilihat pada Tabel 2.
(5)
18
PTabel 2 Tabel Hasil Pengujian responden
No. Kriteria Penilaian A
SS B S TS C STS D Total 1 Situs Jejaring sosial yang dibuat sudah
sesuai dengan Situs Jejaring sosial yang ada selama ini di internet
16 4 0 0 20
2 Situs Jejaring sosialSudah cukup menarik 5 15 0 0 20 3 Situs Jejaring sosial ini l mudah dalam hal
penggunaanya karena mirip dengan situs sosial media seperti Facebook dan twiter
13 5 2 0 20
4 Fitur pemberian komentar pada e-book sangat bermanfaat untuk memberikan tanggapan terhadap e-book yang telah diunggah
3 12 5 0 20
5 Fitur berkirim pesan dengan user dan admin
sangat bermanfaat bagi anda 5 9 6 0 20
6 Fitur unggah foto sangat bermanfaat bagi
anda 7 9 4 0 20
7 Fitur unggah e-book sangat bermanfaat bagi
anda 17 3 0 0 20
8 Fitur notifikasi pesan secara otomatis sangat
bermanfaat bagi anda 13 7 0 0 20
9 Fitur pencarian E-book dan user sangat
bermanfaat bagi anda 3 10 7 0 20
10 Hasil pencarian e-book dan user sudah
sangat akurat 9 11 0 0 20
91 85 24 0 200
Keterangan
ST= Sangat Setuju, S = Setuju, TS = Tidak Setuju, STS = Sangat Tidak Setuju
Gambar 16Hasil Pengujian Aplikasi Pada User
Hasil pengujian yang tampak pada Tabel 2 dibuat dalam bentuk diagram pada Gambar 16 dengan penjelasan sebagai berikut:
Jawaban A : 91 dari 200 (91/200*100%) = 45.5% Jawaban B : 85 dari 200 (85/200*100%) = 42.5% Jawaban C : 24 dari 200 (24/200*100%) = 12% Jawaban D : 0 dari 200 (0/200*100%) = 0%
Berdasarkan hasil pengujian pada user disimpulkan bahwa untuk masing-masing kriteria penilaian, 45.5% berpendapat sangat setuju kalau fitur-fitur yang
45.5% 42.5%
12% Sangat
setuju Setuju Kurang Setuju
(6)
19
ada pada Situs Jejaring sosial yang dibuat bermanfaat bagi user dan 42.5% berpendapat setuju kalau fitur-fitur yang ada pada Situs Jejaring sosial yang dibuat bermanfaat bagi user.
Berdasar hasil pengujian, dapat disimpulkan bahwa situs jejaring sosial yang telah dibuat sudah menarik dan penambahan fitur berbagi e-book bermanfaat bagi user.
5. Simpulan
Berdasarkan pembahasan, pengujian, dan analisis sistem, maka dapat diambil kesimpulan bahwa situs jejaring sosial yang telah dibuat bermanfaat bagi user.itu situs jejaring sosial yang telah dibuat selain dapat digunakan untuk saling berbagi informasi, user juga dapat memanfaatkan fitur berbagi e-book yang telah di unggah untuk sarana edukasi.Saran untuk pengembangan aplikasi ini adalah perlu ditambahkanya fitur unggah video-video tutorial agar situs jejaring sosial menjadi lebih menarik dan bermanfaat bagi user.
6. Daftar Pustaka
[1] Kayri, M, Cakir, O, 2010, An Applied Study On Educational Use Of Facebook As A Web 2.0 Tool The Sample Lesson Of Computer Network And Communication. Turki :Ankara University.
[2] Kurniawan, Erick, 2009, Cepat Mahir ASP.Net 3.5 Untuk Aplikasi Web Interaktif. Yogyakarta :Penerbit Andi Offset.
[3] Susanto, Gunawan. 2011. Perancangan Dan Implementasi Katalog Online Pada Jejaring Sosial Dengan Platform Facebook. Salatiga: Fakultas Teknologi Informasi Universitas Kristen Satya Wacana.
[4] Wibowo, Herry. 2011. Penerapan Teknologi WebGL pada Virtual Aquarium berbasis 3 Dimensi(3D). Salatiga: Fakultas Teknologi Informasi Universitas Kristen Satya Wacana.
[5] Williams,James. 2011. Learning HTML5 Game Programming. United State: Addison Wesley.
[6] Khafidli,Firgiawan,M. 2011, Trik Menguasai HTML5, CSS3, PHP Aplikatif. Yogyakarta :Loko Media.
[7] Wiswakarma,Komang. 2011, Teknik Cepat Menguasai CSS 3. Yogyakarta : Loko Media.
[8] Sommerville, Ian. 2001. Software Engineering 6th Edition. United State:
Addison Wesley.
[9] Nugroho, Adi., 2010,Mengembangkan Aplikasi Basis Data Menggunakan C# + SQL Server. Yogyakarta :Penerbit Andi Offset.