Metode dan Perancangan Sistem

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, 2D3Dtransformations, 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 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 LanguageUML 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 UMLUnified 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 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 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 User 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 admin 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