ANALISIS DAN PERANCANGAN SISTEM INFORMASI ADMINISTRASI

ANGGOTA BERBASIS WEB MENGGUNAKAN PHP DAN

FRAMEWORK CSS SKELETON
(Studi Kasus : Keluarga Remaja Islam Masjid Ngadinegaran)

NASKAH PUBLIKASI

diajukan oleh

Muhammad Faiz Amiruddin Bagus Panuntun

10.11.3533

Kepada

JURUSAN TEKNIK INFORMATIKA

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER
AMIKOM YOGYAKARTA
YOGYAKARTA
2014
 ANALYSIS AND DESIGN OF INFORMATION SYSTEMS WEB_BASED
ADMINISTRATION MEMBERS USING PHP ANDD CSS SKELETON FRAMEWORK

ANALISIS DAN PERANCANGAN SISTEM INFORMASI ADMINISTRASI ANGGOTA

BERBASIS WEB MENGGUNAKAN PHP DAN FRAMEWORK CSS SKELETON

Muhammad Faiz Amiruddin Bagus Panuntun

Dony Ariyus
Jurusan Teknik Informatika
STMIK AMIKOM YOGYAKATA

ABSTRACT

Implementation of propaganda in the modern era, as now, more so in the future will
be more severe and complex, due to the problems faced by the preacher (preachers).
Advances in science and technology has brought about many changes in society, both in
the way of thinking, attitudes, and actions, so that the propagation strategy performed
well adapted to the changing needs of society and the development of which is the
object of propaganda.
KARISMA Ngadinegaran is one mosque youth organizations are still actively manage
and called for the propagation of Islam in a creative and innovative. Submission of
information propagation and management of data members are still using manual
systems. The old system in the delivery of information propagation and management of
data members various constraints. For example, management of member data manually
can lead to corrupted data or easily lost and delivery of propaganda is still limited to bi al-
verbal, ie lectures / speeches.
The system is more effective and accurate in data processing required by the
KARISMA Ngadinegaran Yogyakarta using Apache as a web application server on
localhost, Adobe Dreamweaver to code editor, MySQL for databases, Adobe Photoshop
CS3 for graphic design editor, getSkeleton a CSS framework.

Keywords: Website, Framework, getSkeleton

 1

1. PENDAHULUAN

Islam adalah agama yang paling mulia di sisi ALLAH SWT, Islam juga melahirkan dakwah atau
seruan, dan itu sendiri merupakan semangat islam. Islam dikenalkan dan dikembangkan di tengah-
tengah kehidupan manusia di setiap waktu dan tempat. Pelaksanaan dakwah di era modern seperti
sekarang ini, lebih-lebih di masa depan akan semakin berat dan kompleks, karena masalah yang
dihadapi oleh pendakwah(da’i). Kemajuan ilmu pengetahuan dan teknologi telah membawa banyak
perubahan pada masyarakat, baik dalam cara berpikir, sikap, dan tindakan, sehingga strategi
dakwah yang dilakukan juga disesuaikan dengan perubahan kebutuhan dan perkembangan
masyarakat yang menjadi objek dakwah.

Seorang Web Designers & Web Developers pastinya sudah sangat akrab dengan HTML & CSS.
Menulis sintaks kode HTML & CSS yang begitu banyaknya merupakan rutinitas untuk membuat
tampilan website agar tampak indah & menarik. Kita biasanya disulitkan menggabungkan beberapa
class satu dengan class lainnya. Jadi kita terpaksa menuliskan CSS berulang-ulang pada seluruh
properti yang ada jika kita ingin membuat kode yang mudah dibaca dalam menggabungkan
beberapa properti dengan beberapa class yang ada. Itu semua dikarenakan CSS tidak menyediakan
fungsi abstraksi apapun seperti layaknya fitur include dalam PHP. Sehingga berbagai vendor
berlomba untuk membuat Framework guna memudahkan penyelesaianya. Framework CSS Skeleton
adalah salah satu dari lebih 30 Framework CSS yang pernah dibuat dan masih dapat dikembangkan.

KARISMA Ngadinegaran merupakan salah satu organisasi remaja masjid yang masih aktif
mengelola dan menyerukan dakwah Islam secara kreatif dan inovatif. Penyampaian informasi
dakwah serta pengelolaan data anggotanya masih menggunakan sistem manual. Sistem yang lama
dalam penyampaian informasi dakwah dan pengelolaan data anggota masih menemui berbagai
kendala. Sebagai contoh, pengelolaan data anggota secara manual dapat menyebabkan data rusak
atau mudah hilang dan penyampaian dakwah yang masih terbatas pada bi al-lisan, yaitu
ceramah/pidato.

Hal inilah yang mendorong penulis untuk mengangkat masalah tersebut dengan memperbarui sistem
yang lama dengan membuat “Analisis dan Perancangan Sistem Informasi Administrasi Anggota
Berbasis Web Menggunakan PHP dan Framework CSS Skeleton (Studi Kasus di Keluarga Remaja
Islam Masjid Ngadinegaran)”, dengan adanya sistem yang baru ini diharapkan dapat membantu
pengurus dalam pengelolaan anggota dan penyampaian materi dakwah islam.

2. LANDASAN TEORI

2.1. Konsep Dasar Sistem

Ada berbagai pengertian tentang sistem menurut para tokoh, yakni sebagai berikut :
 2

1. Suatu prosedur adalah urut – urutan yang tepat dari tahapan – tahapan instruksi yang
menerangkan apa (what) yang harus dikerjakan, siapa (who) yang mengerjakannya, kapan (when)
1
dikerjakan dan bagaimana (how) mengerjakannya.

2
2. Elemen – elemen yang saling berhubungan dan membentuk satu kesatuan atau organisasi.

3. Sistem sebagai sekelompok elemen – elemen yang terintegrasi dengan maksud yang sama untuk
3
mencapai suatu tujuan.

2.2. Konsep Sistem Yang Penting

4
1. Konsep yang penting dalam pengembangan sistem , yaitu :

2. Dekomposisi : Pembagian sistem ke dalam komponen – komponen yang lebih kecil (subsistem).

3. Modularitas : Konsep modularitas berhubungan dengan dekomposisi. Pada saat melakukan

dekomposisi, diharapkan sistem yang besar terbagi menjadi subsistem – subsistem yang relatif sama
ukurannya. Dengan modul – modul ini maka beban kerja mengembangkan sistem bisa
didistribusikan secara merata pada semua sumber daya yang ada. Pengembangan sistem jadi lebih
sederhana karena hanya terfokus pada satu modul terlebih dahulu, baru dilakukan integrasi antara
modul.

4. Coupling : Dari modul-modul yang kita peroleh, kadang-kadang ditemukan beberapa modul yang
memiliki ketergantungan dengan modul yang lain. Pada kasus seperti ini, modul-modul yang saling
bergantung harus dipasangkan (di-couple). Dengan cara ini bisa diketahui modul yang bisa bekerja
secara independen dan modul -modul yang harus diselesaikan terlebih dahulu sebelum modul yang
lain bisa bekerja.

5. Kohesi : Dari proses coupling antar modul, kita bisa dapatkan kelompok-kelompok modul dengan
karakterisik yang hampir sama. Di sini muncul konsep kohesi dimana kelompok modul itu harus
dianalisis bersama – sama dengan kelompok yang modul yang saling berkohesi.

2.3. Konsep Dasar Sistem Informasi

Sistem informasi merupakan komponen – komponen yang saling berhubungan dan bekerja sama
untuk mengumpulkan, memproses, menyimpan dan menyebarkan informasi untuk mendukung

1
Jerry FitzGerald, Ardra F. FitzGerald dan Warren D. Stallings, Jr (edisi kedua; New York: John Willey &
Sons. 1981) dikutip oleh prof. Dr. Jogiyanto HM, MBA,Akt Analisis dan Desain, Hal 2.
2
Kamus Webster’s Unbriged dikutip oleh Hanif Al Fatta, Analisis Perancangan Sistem Informasi:Konsep
Dasar Sistem, Hal 3.
3
Mc Leod (1995) dikutip oleh Hanif Al Fatta, Analisis Perancangan Sistem Informasi:Konsep Dasar Sistem,
Hal 4.
4
Al Fatta, Hanif. Analisis Perancangan Sistem Informasi:Konsep Dasar Sistem. (Yogyakarta:Andi,2007). Hal
7 - 9.
 3

pengambilan keputusan, koordinasi, pengendalian, dan untuk memberikan gambaran aktivitas

didalam perusahaan.

2.4. Konsep Dasar Internet

2.4.1. Internet

Internet atau internetwork adalah sekumpulan jaringan berbeda yang saling terhubung bersama
sebagai salah satu kesatuan sengan menggunakan berbagai macam protokol, salah satunya adalah
protokol TCP / IP (Transmission Control Protocol / Internet Protocol). TCP / IP adalah protokol yang
paling banyak digunakan di internet. Protokol TCP / IP merupakan cara standar untuk memaketkan
dan mengalamatkan data komputer (sinyal elektronik) sehingga data tersebut dapat dikirim ke
5
komputer terdekat atau keliling dunia dan tiba dalam waktu yang cepat tanpa rusak atau hilang.

2.4.2. Web Hosting

Layanan web hosting mengizinkan perorangan atau organisasi membuat sebuah website yang dapat
diakses melalui world wide web. Web hosts merupakan organisasi yang menyediakan tempat di
server untuk perseorangan atau organisasi meletakkan semua file website-nya dan menyediakan
6
konektivitas dengan internet agar semua dapat diakses melalui internet.

2.5. Konsep Permodelan Sistem

2.5.1. Flowchart

Flowchart adalah penggambaran secara grafik dari langkah – langkah dan urut – urutan prosedur
dari suatu program. Flowchart menolong analis dan programmer untuk memecahkan masalah ke
dalam segmen – segmen yang lebih kecil dan menolong dalam menganalisis alternatif – alternatif
lain dalam pengoperasian. Flowchart terbagi dalam lima jenis yakni Flowchart Sistem (System
Flowchart), Flowchart Paperwork / Flowchart Dokumen (Document Flowchart), Flowchart Skematik
(Schematic Flowchart), Flowchart Program (Program Flowchart), dan Flowchart Proses (Process
Flowchart).

2.5.2. Data Flow Diagram

7
Data Flow Diagram (DFD) adalah representasi grafik dari sebuah sistem. DFD menggambarkan
komponen-komponen sebuah sistem, aliran-aliran data di mana komponen-komponen tersebut, dan
asal, tujuan, dan penyimpanan dari data tersebut.

5
Shalahuddin, M, Rossa A.S. Java di Web. (Bandung:Informatika,2010). Halaman 3
6
Shalahuddin, M, Rossa A.S. Java di Web. (Bandung:Informatika,2010). Halaman 7
7
Metodologi Pengembangan Sistem Informasi, 1998. Leman, PT Elex Media Komputindo, Jakarta
 4

Dokumentasi dari sistem informasi yang ada, atau untuk menyusun dokumentasi untuk sistem
informasi yang baru. Empat simbol yang digunakan :

Perangkat Lunak yang Akan Digunakan

2.5.3. Framework Skeleton

Framework sendiri merupakan suatu kertas / kerangka kerja dalam aplikasi web yang di dalamnya
memiliki suatu potongan – potongan program yang disusun (modul), sehingga programmer tidak
perlu membuat kode dari nol, karena framework telah menyediakannya. Skeleton merupakan
sebuah toolkit untuk mempermudah web developer dalam mendesain tampilan aplikasi yang
menyediakan gaya yang paling mendasar sebagai sebuah pondasi, tetapi siap untuk mengadopsi
segala desain dan gaya.

2.5.4. Adobe dreamweaver CS3

Adobe Dreamweaver merupakan program penyunting halaman web keluaran Adobe Systems yang
dulu dikenal sebagai Macromedia Dreamweaver keluaran Macromedia.Program ini banyak
digunakan oleh pengembang web karena fitur-fiturnya yang menarik dan kemudahan
penggunaannya.Versi terakhir Macromedia Dreamweaver sebelum Macromedia dibeli oleh Adobe
Systems yaitu versi 8.Versi terakhir Dreamweaver keluaran Adobe Systems adalah versi 10 yang
ada dalam Adobe Creative Suite 4 (sering disingkat Adobe CS4).

2.5.5. Adobe Photoshop CS3

Adobe Photoshop, atau biasa disebut Photoshop, adalah perangkat lunak editor citra buatan Adobe
Systems yang dikhususkan untuk pengeditan foto/gambar dan pembuatan efek.Perangkat lunak ini
banyak digunakan oleh fotografer digital dan perusahaan iklan sehingga dianggap sebagai pemimpin
pasar (market leader) untuk perangkat lunak pengolah gambar/foto, dan, bersama Adobe Acrobat,
dianggap sebagai produk terbaik yang pernah diproduksi oleh Adobe Systems. Versi kedelapan
aplikasi ini disebut dengan nama Photoshop CS (Creative Suite), versi sembilan disebut Adobe
Photoshop CS2, versi sepuluh disebut Adobe Photoshop CS3 , versi kesebelas adalah Adobe
Photoshop CS4 dan versi yang terakhir (keduabelas) adalah Adobe Photoshop CS5.

2.5.6. Xampp

XAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem operasi, merupakan
kompilasi dari beberapa program.

2.5.7. My SQL

Database adalah suatu koleksi data yang diorganisasikan sedemikian rupa sehingga memudahkan
untuk dicari dan diproses. Database server adalah sebuah program yang mengatur database,
menyimpannya secara terorganisasi dan menyediakan akses ke database tersebut.
 5

2.5.8. Apache

Web server adalah komputer yang digunakan untuk menyimpan dokumen-dokumen web, komputer
server ini akan melayani permintaan dokumen dari yang menjadi client. Web server diperlukan agar
fungsi-fungsi server pada halaman web yang menggunakan server side scripting yang ada pada
halaman tersebut dapat dieksekusi dan ditampilkan pada browser.

2.5.9. Mozilla Firefox

Mozilla Firefox adalah sebuah web browser yang digunakan untuk menampilkan informasi dari web
server. Software ini kini telah dikembangkan dengan menggunkan user interface grafis, sehingga
user dapat melakukan “point and click” untuk pindah antar dokumen.

3. ANALISIS DAN PERANCANGAN SISTEM

3.1. Analisis Sistem

Sistem Informasi berbasis website di KARISMA Ngadinegaran yang sedang dalam proses
pengerjaan analisa dilakukan dengan menggunakan metode/ kerangka kerja PIECES (performance,
information, economic, efficiency, service ). Sebagai dasar untuk mendapatkan pokok permasalahan
yang lebih jelas dan spesifik. Kemudian berdasarkan dari analisis- analisis tersebut kita bias
mengetahui pokok permasalahan dan cara untuk mengatasi permasalahan tersebut.

3.2. Identifikasi Masalah

Sistem yang berjalan pada keanggotaan KARISMA Ngadinegaran saat ini untuk pengolahan data
anggota dan format laporan yang masih meggunakan aplikasi Microsoft word dan Microsoft excel
dengan melakukan pendataan anggota/berkas anggota terlebih dahulu kepada anggota lalu admin
menginputkan data keanggotaan tersebut melalui excel sehingga pada sistem ini sering terjadi
redudansi dalam memasukkan data anggota dan untuk pencarian data anggota pun mengalami
kesulitan karena tidak dapat melakukan pencarian data secara cepat sehingga untuk laporan data
anggota pun tidak akurat.Memang tidak menjadi masalah bagi anggota tetapi admin memiliki
tanggung jawab untuk membuat laporan data anggota.

Sedangkan untuk agenda kegiatan masih dilakukan secara sederhana dimana agenda kegiatan
tersebut ditulis di papan agenda kegiatan sehingga anggota harus datang ke KARISMA
Ngadinegaran maka itu tidak efisien untuk penggunaan waktu dan untuk informasi lainnya masih
kurang anggota yang mengetahuinya.

Adapun dalam penyampaian materi dakwah islam yang masih terbatas pada bi al-lisan, yaitu
ceramah/pidato.

3.2.1. Analisis Kinerja ( Performance )

 6

Kinerja adalah suatu kemampuan sistem dalam menyelesaikan tugas dengan cepat sehingga
sasaran dapat segera tercapai.Kinerja dapat diukur dari throughput dan response time.Throughput
adalah jumlah pekerjaan yang dapat dilakukan suatu sistem tertentu. Response time adalah rata rata
waktu yang tertunda diantara dua pekerjaan ditambah dengan waktu response untuk menangani
pekerjaan tersebut. Adapun hasil analisis sistem lama adalah sebagai berikut :

3.2.2. Analisis Informasi ( Information )

Sebuah sistem informasi yang baik akan menghasilkan informasi yang akurat, relevan dan tepat
waktu. Akurat berarti informasi yang dihasilkan tidak salah dan tidak menyesatkan sedangkan
relevan berarti informasi tersebut memiliki nilai bagi penggunanya dan tepat waktu berarti informasi
harus ada ketika dbutuhkan.Ketiga kriteria tersebut merupakan syarat dari sebuah informasi yang
baik bagi sebuah perusahaan atau organisasi.

3.2.3. Analisis Ekonomi ( Economic )

Pemanfaatan biaya yang digunakan dari pemanfaatan informasi.Peningkatan terhadap kebutuhan

ekonomis mempengaruhi pengendalian biaya dan peningkatan manfaat.Saat ini banyak perusahaan
dan manajemen mulai menerapkan paperless system (meminimalkan penggunaan kertas) dalam
rangka penghematan.Oleh karena itu dilihat dari penggunaan bahan kertas yang berlebihan dan
biaya iklan di media cetak untuk media publikasi, sistem ini dinilai kurang ekonomis.

3.2.4. Analisis Pengendalian ( Control )

Analisis ini digunakan untuk membandingkan sistem yang dianalisa berdasarkan pada segi
ketepatan waktu, kemudahan akses, dan ketelitian data yang diproses.

Pengendalian dalam sebuah sistem sangat dibutuhkan untuk meningkatkan kinerja sistem,
mencegah atau mendeteksi penyalahgunaan atau kesalahaan sistem dan menjamin kemanan data
dan informasi.Dengan adanya pengendalian maka tugas-tugas/kinerja yang mengalami masalah
dapat diperbaiki.

3.2.5. Analisis Efisiensi ( Effeciency )

Efisiensi ini erat hubungannya dengan input yaitu bagaimana sumber daya yang ada dapat
digunakan seminimal mungkin sehingga tidak terjadi pemborosan.

3.2.6. Analisis Pelayanan (Service)

Analisis pelayanan dilakukan untuk mengetahui apakah proses pelayanan penyampaian informasi
penjualan sudah berjalan dengan baik atau belum. Dalam proses yang singkat, diharapkan
kebutuhan dasar atas semua data dan informasinya akan terpenuhi.

3.2.7. Hasil Analisis PIECES

 7

Dari masalah yang terjadi penulis mengidentifikasi penyebab terjadi permasalahan yaitu belum ada
suatu media website yang dapat memberikan informasi tentang produk-produk yang terdapat di
Gemilang Center Computer Cilacap secara global yang dapat diakses penggunanya diseluruh
wilayah baik dalam maupun luar negeri.

3.3. Analisis Kebutuhan Sistem

3.3.1. Kebutuhan Fungsional

Jenis kebutuhan yang berisi proses-proses apa saja yang nantinya dilakukan oleh sistem.
Kebutuhan fungsional juga berisi informasi-informasi apa saja yang harus ada dan dihasilkan sistem.

1. Sistem dapat menampilkan data, entri data baru, mengupdate dan menghapus data pada
berita, forum, gallery, data anggota, agenda, dan halaman organisasi

2. User bisa mendapatkan informasi tentang profil, visi dan misi Organisasi

3. User bisa mendapatkan berita terbaru tentang seputar dunia Islam.

4. User bisa mendaftar untuk menjadi member dalam RUMA (Forum Karisma).

5. Member dapat mengelola informasi tentang data pribadi mereka yang tercatat di Forum.

6. Member dapat bertukar ide ataupun kajian dalam RUMA,

7. Antar member dapat ber-saling salam.

8. Admin dapat mengelola web melalui Login page admin

3.4. Perancangan Sistem

Perancangan sistem yang akan dilakukan meliputi tiga tahap yaitu :

1. Perancangan proses

2. Perancangan basis data

3. Perancangan antar muka ( interface )

3.4.1. Perancangan Proses

Tujuan dari perancangan proses adalah untuk memberikan gambaran secara umum kepada user
tentang sistem yang baru. Pada tahap perancangan proses, komponen-komponen sistem informasi
 8

dirancang dengan tujuan untuk dikomunikasikan kepada user bukan programmer. Adapun
rancangan model sistem yang daoat dilakukan adalah sebagai berikut :

1. Flowchart Sistem

Merupakan gambaran secara umum bagaimana sistem berjalan dan menjelskan urutan dari
prosedur – prosedur yang ada di dala, sistem. Adapun gambaran flowchart sistem baru yang dibuat
adalah sebagai berikut

Gambar 3.2 Diagram Konteks

 9

3.4.2. Data Flow Diagram

Data Flow Diagram (DFD) adalah suatu gambaran grafis dari suatu sistem yang dapat
menggambarkan arus data di dalam sistem dengan struktur yang jelas dan menggunakan sejumlah
bentuk-bentuk simbol untuk menggambarkan bagaimana data mengalir melalui suatu proses yang
saling berkaitan.

1. Diagram Konteks

Gambar 3.2 Diagram Konteks

4. IMPLEMENTASI DAN PEMBAHASAN

4.1. Implementasi Sistem

Implementasi sistem adalah tahap penerapan sistem untuk siap dioperasikan. Tahap ini sangat
penting dilakukan supaya dalam melakukan implementasi aplikasi yang dijalankan tidak mengalami
kesalahan yang berakibat gagalnya sistem.

4.1.1. Pembahasan Interface

Dalam pembuatan tampilan utama publik website KARISMA menggunakan Framework CSS
Skeleton 960, berikut adalah contoh interface halaman utama Website KARISMA Ngadinegaran.
 10

4.2. Uji Coba Program

4.2.1. Black Box Testing

Black box testing adalah tahapan pengujian sistem yang dilakukan di bagian interface atau bagian
luarnya saja tanpa mengetahui proses yang terjadi di dalam proses detail sistem tersebut. Berikut
adalah contoh black box testing pendaftaran member RUMA dalam website KARISMA.

4.2.2. White Box Testing

Whitebox testing adalah cara pengujian dengan melihat ke dalam modul untuk meneliti kode-kode
program yang ada, dan menganalisis apakah ada kesalahan atau tidak. Berikut adalah pengujian
program saat pembuatan form pendaftaran member baru.

5. Kesimpulan

Berdasarkan uraian yang telah penulis jelaskan dalam bab-bab sebelumnya dan pembuatan sistem,
maka dapat diambil kesimpulan sebagai berikut :

1. Sistem Informasi administrasi anggota di KARISMA Ngadinegaran Berbasis Website dibuat

menggunakan PHP dan framework CSS skeleton.

2. Sistem mampu mempublikasikan berita kajian Islam berikut profile organisasi.

3. Tampilan publik pada website KARISMA menggunakan framework CSS skeleton 960.

4. Sistem mampu menampung member guna memperkaya olah informasi di dalam RUMA(Forum
Karisma).

5. Sistem mampu menampung saling salam antar member dalam RUMA(Forum Karisma).
 11

DAFTAR PUSTAKA

Fatta, H.A. 2007. Analisis dan Perancangan Sistem Informasi. Yogyakarta:Penerbit ANDI.

Jogiyanto.HM. 1990. Analisis dan Desain Sistem Informasi Pendekatan Terstruktur. Yogyakarta:
Penerbit ANDI.

Kadir, Abdul. 1991. Konsep dan Tuntutan Praktis Basis Data. Yogyakarta: Penerbit ANDI.

Prihatna, Henky. 2005. Kiat praktis menjadi web master professional. Jakarta : Elex Media
Komputindo

Zaki, Ali. 2007. 36 Jam Belajar Komputer Dreamweaver CS 3.Jakarta: Elex Media Komputindo.

Al Fatta, Hanif. 2007. Analisis Perancangan Sistem Informasi. Yogyakarta : Andi Offset.

Jogiyanto. 1990. Analisis & Desain Sistem Informasi. Yogyakarta :Andi Offset.

Kadir, Abdul. 2009. Mastering Ajax dan PHP. Yogyakarta : Andi Offset.

Huda , Miftakhul. 2009. Membuat Aplikasi Database dengan Java, MySQL, dan Netbeans .Jakarta:
Elex Media Komputindo.