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

15

Gambar 4.1 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