sistem informasi berbasis web untuk majelis...
TRANSCRIPT
SISTEM INFORMASI BERBASIS WEB
UNTUK MAJELIS MUHYIN NUFUUS PUSAT YOGYAKARTA
DENGAN MEMANFAATKAN JQUERY DAN AJAX
Naskah Publikasi
untuk memenuhi sebagai persyaratan mencapai gelar Ahli Madia
pada jenjang Diploma III jurusan Teknik Informatika
Disusun oleh :
I R W I N
08.01.2411
JURUSAN TEKNIK INFORMATIKA SEKOLAH TINGGI MANAJEMEN INFORMASI DAN KOMPUTER
A M I K O M YOGYAKARTA
2 0 1 1
2
NASKAH PUBLIKASI
SISTEM INFORMASI BERBASIS WEB
UNTUK MAJELIS MUHYIN NUFUUS PUSAT YOGYAKARTA
DENGAN MEMANFAATKAN JQUERY DAN AJAX
disusun oleh :
I R W I N 08.01.2411
telah disetujui oleh Dosen Pembimbing Tugas Akhir
pada tanggal 2 Juni 2011
Dosen Pembimbing,
Mei P Kurniawan, M.Kom NIP. 190302187
Ketua Jurusan
Teknik Informatika
Sudarmawan, M.T NIP. 190302035
3
WEB-BASED INFORMATION SYSTEM FOR ASSEMBLY MUHYIN NUFUUS CENTER OF YOGYAKARTA
USING JQUERY AND AJAX
SISTEM INFORMASI BERBASIS WEB UNTUK MAJELIS MUHYIN NUFUUS PUSAT YOGYAKARTA
DENGAN MEMANFAATKAN JQUERY DAN AJAX
Irwin Jurusan Teknik Informatika
STMIK AMIKOM YOGYAKARTA
ABSTRACT
Nufuus Muhyin is an assembly that is engaged in social and religious. Where in its development, the Assembly has grown to almost all corners of Indonesian.
By utilizing internet technology, particularly in the WEB, will assist all branches located throughout Indonesia to seek information about activities, organizations or sections but the branches that have been spread in selur over Indonesian.
JQueary or JavaScript Library is a collection of JavaScript functions which are stored in a library and ready to use, making it easier and faster job to make JavaScript coding.
AJAX (A New Approach to WEB Application) is a WEB application that works asynchronously who can close the gap between WEB and desktop applications.
From the analysis has been done, can be deduced, WEB will help search for an information by adding AJAX features and to beautify the look of the WEB using JQuery features.
Keyword : Muhyin Nufuus, PHP, JQuery, AJAX
4
1. Pendahuluan
1.1. Latar Belakang
Teknologi informasi merupakan salah satu bidang yang perkembangannya
semakin cepat dibandingkan dengan bidang-bidang yang lain. Selain itu, di zaman
sekarang ini teknologi informasi memberikan pengaruh besar diberbagai aspek
kehidupan masyarakat.
Komputer merupakan suatu teknologi yang dapat melakukan pengolahan data
dengan cepat, akurat dan efisien. Sehingga di zaman sekarang komputer merupakan
teknologi yang banyak digunakan oleh masyarakat dalam pengambilan keputusan.
Banyak lembaga atau instansi yang menggunakan teknologi komputer dalam
menyelesaikan permasalahan yang dihadapi. Namun manfaat teknologi informasi
menjadi sangat luas dan tak terbatas. Hal tersebut dibuktikan melalui salah satu media
informasi yaitu website.
Nilai informasi menjadi sangat penting bagi instansi ataupun lembaga,
sehingga dibutuhkan sarana dan prasarana pendukung untuk menunjang kelancaran
kegiatan tersebut. Website sebagai media informasi yang sekarang ini terus
dikembangkan untuk memenuhi kebutuhan informasi di segala bidang kehidupan.
Hampir semua instansi ataupun lembaga telah memanfaatkan website sebagai media
informasi.
Tidak seperti media iklan, TV, spanduk dan media infomasi lain, website
memiliki kelebihan dalam penyediaan berbagai informasi, semua itu dapat dilihat dari
segi kecepatan dan kemudan dalam memperoleh informasi. Keunggulan tersebut
menjadi pendorong bagi setiap instansi ataupun lembaga untuk membuat sebuah
website sebagain media informasi.
5
Majelis Muhyin Nufuus Pusat Yogyakarta merupakan salah satu lembaga di
Kotagede Yogyakarta yang mempunyai cabang hampir di seluruh Indonesia. Dengan
adanya website sebagai media informasi, maka akan mempermudah penyebaran
informasi ke berbagai cabang di Indonesia
1.2. Rumusan Masalah
Berdasarkan latar belakang masalah yang dijelaskan di atas, maka dapat
diketahui rumusan masalah dalam penelitian ini adalah : Bagaimana membuat sebuah
sistem informasi berbasis web dengan memanfaatkan JQuery dan AJAX sebagai
media informasi untuk Majelis Muhyin Nufuus Pusat Yogyakarta ?
2. Landasan Teori
2.1. Informasi
Informasi adalah sekumpulan data yang telah diolah dan digunakan untuk
pengambilan keputusan bagi manajemen.
Gordon B David (1985) mendefinisikan informasi sebagai data yang telah
diolah menjadi bentuk yang lebih berarti dan berguna bagi penerima untuk
mengambil keputusan masa kini ataupun yang akan datang1.
Raymond McLeod (1995) mendefinisikan informasi sebagai data yang telah
di olah menjadi bentuk yang lebih berarti bagi penerimanya. Alat pengolahan
informasi dapat meliputi elemen komputer, non komputer atau kombinasi keduanya2.
1 Albah Bin Ladja Mudin, Analisis dan Desain Sistem Informasi, 2005, Hal.8 2 Ibit, hal. 10
6
Sumber informasi adalah data. Data adalah kenyataan yang menggambarkan
kejadian-kejadian dari kesatuan nyata. Kejadian adalah sesuatu yang terjadi pada saat
tertentu. Menurut Jhon Burch dan Gary Grudnitski, agar informasi dapat dihasilkan
lebih berharga maka harus memenuhi kriteria sebagai berikut :
1. Informasi harus akurat, sehingga mendukung pihak manajemen dalam
mengambil keputusan.
2. Informasi benar-benar terasa bermanfaat bagi yang membutuhkan.
3. Informasi harus tepat waktu, sehingga tidak ada keterlambatan pada saat
dibutuhkan.
2.2. Definisi Internet
Internet sering kali diistilahkan sebagai dunia maya. Internet dapat
diterjemahkan secara singkat sebagai Interconnection Networking3. Dari sini bisa
dijelaskan bahwa internet adalah sistem global dari seluruh jaringan komputer yang
saling terhubung menggunakan standar Internet Protocol Suite (TCP/IP) untuk
melayani miliaran pengguna di seluruh dunia. Internet menjamin kebebasan dalam
pengaksesannya untuk mendapat informasi sebanyak-banyaknya.
2.3. Konsep Dasar Web
Untuk membuat sebuah web hal yang perlu diperhatikan adalah nilai
efektifitasnya terutama dalam penyajian informasi yang sesuai dengan tujuan
pembuatan web. Nilai-nilai efektifitas tersebut antara lain :
3 Ir. Yuniar Supardi, Internet untuk Segala Kebutuhan, 2009, Hal. 1
7
1. User Friendly, mudah digunakan oleh berbagai kalangan.
2. Kecepatan, dalam pencarian informasi harus cepat.
3. Keamanan web, menjamin seluruh informasi aman dari segala bentuk
ganguan yang dapat merugikan.
4. Interaktif, ada hubungan timbal balik antar user dan web (administrator).
2.4. Definisi Website
WWW atau Word Wide Web. Merupakan kumpulan web server dari seluruh
dunia yang berfungsi menyediakan data atau informasi untuk dapat digunakan
bersama. WWW atau biasa disebut web adalah bagian yang paling menarik di
internet. Melalui web, semua orang dapat mengakses data-data tidak hanya berupa
teks tapi bisa juga berupa gambar, suara, video, dan animasi. Fasilitas ini tergolong
masih baru dibandingkan surel (email). WWW merupakan kumpulan dokumen-
dokumen yang berada di komputer server (web server), dimana server terbesar di
lima benua terhubung menjadi satu melalui jaringan internet. Dokumen tersebut
disimpan dan dibuat dengan format HTML (Hypertext Markup Language).
2.5. HTTP (Hypertext Transfer Protocol)
HTTP (Hypertext Transfer Protocol) adalah protokol yang digunakan untuk
melakukan transfer dokumen dalam WWW (Word Wide Web). Penggunaan HTTP
dikoordinasi oleh Word Wide Web Consortium (W3C) dan grup Internet Engineering
Task Force (IEFE), dan bekerja dalam publikasi satu seri RFC, yang menjelaskan
HTTP/1.1, versi HTTP yang umum digunakan sekarang ini. HTTP adalah sebuah
standart request / response antara sebuah client dan server. Sebuah client HTTP
8
seperti web browser, biasanya memulai permintaan dengan membuat hubungan
TCP/IP kesebuah port tertentu di host (biasanya port 80).
2.6. HTML (Hypertext Markup Language)
HTML (Hypertext MarkupLanguage) merupakan salah satu format yang
digunakan dalam pembuatan dokumen dan aplikasi yang berjalan di halaman web.
Karena itu, untuk bisa melakukan pemrograman aplikasi di web , anda harus terlebih
dahulu menguasai HTML. Walaupun sekarang telah banyak terdapat paket aplikasi
untuk membuat halaman web secara WYSIWYG (what you see is what you get)
seperti Frontpage, Dreamwaver, Netscape Composer dan masih banyak lagi, namun
tetap harus menguasai tag HTML, terutama dalam pembuatan aplikasi web di
internet.
2.7. CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet) adalah suatu bahasa stylesheet digunakan untuk
memperindah tampilan halaman website (situs). Dengan metode CSS keseluruhan
warna dan tampilan yang ada di situs web dapat dirubah/diformat ulang dengan cepat.
CSS juga telah di standartkan oleh World Wide Web Consortium (W3C) untuk di
gunakan di web browser.
2.8. JavaScript
JavaScript adalah sebuah bahasa script yang dicantumkan pada sebuah
halaman web dan dijalankan pada browser web. JavaScript adalah nama
implementasi Netscape Communications Corporation untuk ECMAScript standar,
suatu bahasa skrip yang didasarkan pada konsep pemrograman berbasis prototipe.
Bahasa ini terutama terkenal karena penggunaannya di situs web (sebagai JavaScript
9
sisi klien) dan juga digunakan untuk menyediakan akses skrip untuk objek yang
dibenamkan (embedded) di aplikasi lain. Walaupun memiliki nama serupa, JavaScript
hanya sedikit berhubungan dengan bahasa pemrograman Java, dengan kesamaan
utamanya adalah penggunaan sintaks C.
2.9. PHP (Personal Home Page)
Pada awalnya PHP merupakan singkatan dari Personal Home Page tools,
sebuah tool (alat bantu) untuk melakukan monitoring pengunjung suatu web. PHP
mula-mula dikembangkan oleh Rasmus Lerdofr. Istilah PHP kemudian lebih
mengacu pada Hypertext Prepocesor. PHP adalah bahasa server side programming
yang menyatu dengan HTML untuk membuat sebuah halaman yang dinamis.
2.10. JQuery
JQuery adalah JavaScript Library, kumpulan fungsi JavaScript yang siap
digunakan, sehingga mempermudah dan mempercepat dalam membuat coding
JavaScript4. Sejak diliris pertama kali pada tahun 2006 oleh Jhin Resig, JQuery telah
mencuri perhatian para developer web. Hal ini dibuktikan, pada tahun-tahun
berikutnya JQuery telah digunakan oleh website seperti Google, Microsoft, Intel,
Nokia, Orecel, DEL, EA Sport, Twitter, Facebook, Amazon, Youtube, Appel,
Wordpress, Mozila, Digg dan lain-lain.
2.11. AJAX (Asynchronous JavaScript and XML)
AJAX (Asynchronous JavaScript and XML) diperkenalkan oleh Jesse James
Garret dari Adaptive Path pada tahun 2005. Garret mendeskripsikan bagaimana
mengembangkan web yang berbeda dengan metode tradisional. Dengan 4 Lukman Hakim, Bikin Website Super Keren dengan PHP & JQuery, 2010, Hal. 3
10
mempublikasikan sebuah artikel yang berjudul “AJAX : A New Approach to WEB
Application”. Pada artikel ini, Garret yakin bahwa aplikasi web dapat menutup jurang
pemisah antara web dengan aplikasi dekstop5.
2.12. My SQL (My Structure Query Language)
MySQL (My Structure Query Language) adalah sebuah program pembuat
database yang bersifat open source. MySQL bersifat open source, sehingga dapat
berjalan pada semua platform baik berbasis Windows ataupun Linux. MySQL juga
merupakan program pengakses database yang bersifat jaringan sehingga dapat
digunakan untuk aplikasi banyak pengguna. MySQL sering digunakan oleh semua
programmer database, terutama dalam pemrograman web.
3. Tinjauan Umum
Muhyin Nufuus atau Majelis Muhyin Nufuus adalah sebuah organisasi yang
berazaskan Agama Islam. Majelis Muhyin Nufuus didirikan pada tahun 1989 di
Yogyakarta oleh Ir. Habib Muhamad Effendi Al-Eydrus S.H, MM.Kes. Majelis
Muhyin Nufuus merupakan Lembaga Organisasi yang telah bernaung di Yayasan
Melati Suci Al-Mubarok sejak tanggal 16 Mei 2007 dan berbadan hukum No.
02/YY/2007 serta memiliki Kep. Menkum dan HAM. RI. No. C 3441. HT. 01. 02 TH
2007.
Majelis Muhyin Nufuus berkedudukan di Yogyakarta, tepatnya di jalan
Karangsari, gang Kenanga, KG I / 266 B Rejowinangun Kotagede Yogyakarta dan
memiliki beberapa cabang di dalam wilayah maupun di luar wilayah Republik
Indonesia.
5 Andi Sunyoto.M.Kom, AJAX – Membangun Web dengan Teknologi Asynchronous JavaScript dan
XML, 2007, Hal. 159
11
Majelis Muhyin Nufuus berazaskan pada Agama Islam dengan mengikuti
Ajaran Ahlus Sunnah Wal Jama’ah yang berpegang teguh pada Al-Qur’an dan Al-
Hadist yang di riwayatkan secara shahih dan mutawatir. Dalam hal Aqidah Ahlus
Sunnah Wal Jama’ah merujuk kepada paham Al-Imam Abu Hasan Al-Asy’ariy dan
Al-Imam Abu Mansur Al-Maturidiy. Dalam hal Fiqih bersumber kepada empat
mazhab yaitu Imam Syafi’I, Imam Hanafi, Imam Maliki dan Imam Hambali. Adapun
dalam hal Tasawuf bersumber kepada ajaran Imam Abu Qosim Al-Jailani dan Imam
Al-Ghazali.
4. Pembahasan
4.1 Kebutuhan Fungsional
Kebutuhan fungsional merupakan kebutuhan dari website yang dibuat, untuk
itu penyusun membagi kebutuhan fungsional menjadi dua kebutuhan halaman, yaitu
kebutuhan halaman pengunjung dan kebutuhan halaman administrator.
4.1.1 Halaman Pengunjung
Ada beberapa kebutuhan yang ada pada halaman pengunjung, yaitu :
1. Home : berisi ucapan selamat datang, artikel, berita dan informasi terbaru dari
kegiatan yang dilakukan Majelis Muhyin Nufuus.
2. Sejarah : berisi sejarah singkat berdirinya Majelis Muhyin Nuufus.
3. Organisasi : berisi sturuktur organisasi dan pengelola Majelis Muhyin Nuufus.
4. Cabang : berisi informasi cabang-cabang Majelis Muhyin Nuufus yang berada
di seluruh Indonesia.
12
5. Kegiatan : berisi informasi kegiatan rutin ataupun yang akan dilakukan oleh
Majelis Muhyin Nufuus.
6. Galeri : berisi foto-foto profile dari pengurus inti, kegiatan dan acara Majelis
Muhyin Nufuus.
7. Profile : berisi tentang data diri dari pengurus inti Majelis Muhyin Nufuus.
4.1.2 Halaman Administrator
Ada beberapa kebutuhan yang ada pada halaman administrtor, yaitu :
1. Halaman Login : berisi form login untuk user ataupun administrator.
2. Welcome : berisi ucapan selamat datang sebagai seorang user ataupun
administrator.
3. Home : berisi manajemen informasi home page yang terkoneksi dengan tabel
home page pada database dan dapat melakukan operasi view, input, edit dan
delete tabel homepage.
4. Sejarah : berisi manajemen informasi sejarah yang terkoneksi dengan tabel
sejarah pada database dan dapat melakukan operasi view, input, edit dan
delete tabel sejarah .
5. Agenda : berisi manajemen informasi agenda kegiatan Majelis Muhyin
Nufuus yang terkoneksi dengan tabel agenda pada database dan dapat
melakukan operasi view, input, edit dan delete tabel agenda.
6. Berita : berisi manajemen informasi Majelis Muhyin Nufuus yang terkoneksi
dengan tabel berita pada database dan dapat melakukan operasi view, input,
edit dan delete tabel berita.
13
7. Cabang : berisi manajemen informasi cabang Majelis Muhyin Nufuus di
seluruh Indonesia yang terkoneksi dengan tabel cabang pada database dan
dapat melakukan operasi view, input, edit dan delete tabel cabang.
8. Galeri : berisi manajemen foto Majelis Muhyin Nufuus yang terkoneksi
dengan tabel galeri pada database dan dapat melakukan operasi view, input,
edit dan delete tabel galeri.
9. Kegiatan : berisi manajemen infomasi kegiatan Majelis Muhyin Nufuus yang
terkoneksi dengan tabel kegiatan pada database dan dapat melakukan operasi
view, input, edit dan delete tabel kegitan.
10. Keuangan : berisi manajemen infomasi kegiatan Majelis Muhyin Nufuus yang
terkoneksi dengan tabel kegiatan pada database dan dapat melakukan operasi
view, input, edit dan delete tabel keuangan.
11. Menu Admin : berisi manajemen menu administrator yang terkoneksi dengan
tabel menu admin pada database dan dapat melakukan operasi view, input,
edit dan delete tabel menu admin.
12. Menu Web : berisi manajemen menu web yang terkoneksi dengan tabel menu
web pada database dan dapat melakukan operasi view, input, edit dan delete
tabel menu web.
13. Organisasi : berisi manajemen infomasi organisasi Majelis Muhyin Nufuus
yang terkoneksi dengan tabel oraganisasi pada database dan dapat melakukan
operasi view, input, edit dan delete tabel organisasi.
14. Profile : berisi manajemen infomasi profile pengurus Majelis Muhyin Nufuus
yang terkoneksi dengan tabel profile pada database dan dapat melakukan
operasi view, input, edit dan delete tabel profile.
14
15. User : berisi manajemen infomasi user dan administrator website Majelis
Muhyin Nufuus yang terkoneksi dengan tabel user pada database dan dapat
melakukan operasi view, input, edit dan delete tabel user.
16. Logout : berisi halaman logout yang menghapus sesi login dan menuju ke
halaman login.
4.2 Flow Diagram
Flow diagram merupakan alat bantu yang digunakan untuk menerangkan
logika program, berupa suatu bagan yang menjelaskan langkah-langkah dari proses
program. Bagan alir program dibuat dengan simbol-simbol standar sebagai berikut :
SIMBOL KETERANGAN Dokumen. Simbol ini digunakan untuk
menggambarkan semua jenis dokumen, merupakan formulir yang digunakan untuk merekam data terjadinya suatu transaksi, yang menunjukkan input dan output baik untuk proses manual, mekanik, atau komputer.
Input data. Simbol ini menggambarkan kegiatan input data ke dalam database dengan komputer.
Proses komputer. Simbol ini menggambarkan kegiatan proses dari pegolahan data dengan komputer secara online. Uraian singkat tentang operasi program komputer ditulis di dalam simbol.
Database. Merupakan symbol dari pusat pengimpanan data atau database dari input data yang telah melalui proses kompter.
Flow Lines Symbol. Simbol Garis Alir digunakan untuk menunjukkan aliran atau arus dari proses.
Tabel 4.1 Simbol Flow Diagram
4.3 Relasi Antara Tabel
Hubungan berfungsi untuk menjukkan relasi antar tabel sehingga membentuk
suatu jaringan data. Adapun hubungan antar tabel apda perancangan sistem website
Majelis Muhyin Nufuus adalah sebagai berikut :
Gambar 4.2 Relasi Antara Tabel
17
5. Kesimpulan dan Saran
5.1 Kesimpulan
Setelah dilakukan penelitian berdasarkan sistem informasi berbasis web
dengan memanfaatkan JQuery dan AJAX sebagai media informasi untuk Majelis
Muhyin Nufuus Pusat Yogyakarta yang telah dibuat, penulis menyimpulkan :
1. Website merupakan media informasi yang baik, dengan memaparkan
beberapa berita dan informasi pada website yang telah dibuat, informasi yang
akan disampaikanpun menjadi lebih mudah disebarkan. Majelis Muhyin
Nufuus yang mempunyai cabang di beberapa provinsi di Indonesia, tentunya
untuk penyampaian berita ataupun informasi akan sangat susah. Dengan
memanfaat website sebagai media informasi Majelis Muhyin Nufuus, dapat
mempermudah penyampaian berita ataupun informasi ke cabang yang ada di
Indonesia.
2. CSS (Cascading Style Sheet) merupakan teknologi website yang
menggunakan bahasa scripting stylesheet. Untuk membuat sebuah tampilan
halaman yang dinamis (dapat digunakan di halaman manapun), CSS
merupakan solusi yang sangat tepat, karena CSS merupkan berbentuk dapat
ditulis di luar file halaman website (external CSS) ataupun di file halaman
website tersebut.
3. Dalam pembuatan website yang berbasis PHP 5 (Personal Home Page tools)
untuk file koneksi dengan memanfaatkan fitur OOP (Object Oriented
Programming) lebih efektif dan efisien, karena dalam membuat file koneksi
ke database lebih dinamis. Dengan menfaatkan class yang telah dibuat dan
sifat penurunan (extends) dapat membuat penulisan script lebih singkat.
Sehingga dalam pembacaan web browser dapat lebih cepat.
18
4. Fasilitas pencarian daftar pengurus Majelis Muhyin Nufuus dapat lebih cepat
dengan memanfaatkan teknologi AJAX (Asynchronous JavaScript and XML).
AJAX yang berfungsi untuk menjembatani antara client side dengan server
side, tetap untuk digunakan untuk melakukan pencarian suatu informasi.
5. Tampilan ataupun desain dari sebuah web merupakan salah satu kunci untuk
menarik pengunjung untuk mengunjungi website yang telah dibuat. JQuery
merupakan salah satu alternatif pilihan yang baik. Karena dengan memanfaat
beberapa fitur yang ada di JQuery seperi overlay, slide show, show hidden
dan lain-lain dapat membuat sebuah tampilan website lebih menarik.
5.2 Saran
Setelah penulis melakukan analisis di Majelis Muhyin Nufuus, saran yang
dapat diberikan oleh penulis di antaranya :
6. Dalam pembuatan sebuah halaman website gunakanlah fitur include yang
telah di sediakan PHP. Dengan memanfaatkan fitur tersebut dapat membuat
sebuah file menjadi lebih dinamis. Karena dapat mengurangi penulisan script
untuk tampilan yang sama.
7. Gunakan hosting dan domain premium, karena memiliki fasilitas yang lebih
baik.
8. Untuk dilakukan pengembangan terhadap kekurangan fitur yang dibutuhkan
oleh Mejelis Muhyin Nufuus ke depannya, karena website yang dibuat pasti
ada kekurangan ataupun kelemahan ke depanya, sehingga perlu dilakukan
pengembangan untuk website yang telah dibuat.
9. Untuk dilakukan pengembangan yang realistis sesuai dengan kebutuhan pada
Majelis Muhyin Nufuus, serta selalu dijaga kinerja website yang telah
dirancang.
19
DAFTAR PUSTAKA
Albah Bin Ladja Mudin. 2005. Analisa dan Design Sistem. Yogyakarta : Graha
Ilmu.
Yuniar, Supardi, Ir. 2009. Internet untuk Segala Kebutuhan. Jakarta : Elex
Media Komputindo
Hakim, Lukman. 2010. Bikin Website Super Keren dengan PHP & JQuery.
Yogyakarta : Lokomedial
Sunyoto, Andi, M.Kom. 2007. Membangun Web dengan Teknologi
Asynchronous JavaScript dan XML. Yogyakarta : Andi.
Sutarman, S.Kom. 2003 . Membangun Web Aplikasi dengan PHP dan MySQL.
Yogyakarta : Graha Ilmu