Kelas C

MAKALAH RESPONSI
SISTEM INFORMASI MANAJEMEN
“PARA PENCARI USTADZ”

Disusun Oleh :

1. Desy Rizki Ramadhanty 17611036

2. Novedri Isra Asriny 17611040
3. Violia Baby Cortina 17611042
4. Febry Setiawan Matondang 17611060
5. Alfiani Yulita Sari 17611069

JURUSAN STATISTIKA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS ISLAM INDONESIA
YOGYAKARTA
2018
 KATA PENGANTAR

Puji syukur kami panjatkan kehadirat Allah Subhanahu Wata’ala yang telah
memberikan rahmat serta karunia-Nya kepada kami sehingga kami berhasil
menyelesaikan makalah ini dengan judul “Para Pencari Ustadz “ yang telah selesai
tepat pada waktunya.
Laporan ini berisikan tentang web dengan tema kumpulan data Ustadz dan
Ustadzah khusus daerah Yogyakarta, dimana web tersebut menyediakan jasa sebagai
tamu undangan pengisi acara atau ceramah. Diharapkan dalam makalah ini dapat
memberikan informasi yang baik kepada kita semua mengenai bagaimana membuat
website dengan mudah.
Kami menyadari bahwa makalah ini masih jauh dari kata sempurna , oleh
karena itu kritik dan saran dari semua pihak yang bersifat membangun selalu kami
harapkan demi kesempurnaan dari makalah ini.
Akhir kata, kami menyampaikan terimakasih kepada pihak yang telah
berperan penting dalam pembuatan makalah ini dari awal sampai selesai. Semoga
Allah Subhanahu Wata’ala senantiasa meridhai segala usaha yang telah dilakukan.
Aamiin.

Yogyakarta, 9 Desember 2018

Penulis

ii
 DAFTAR ISI

HALAMAN JUDUL………………………………………………….…...i
KATA PENGANTAR.................................................................................ii
DAFTAR ISI……………………………………………….……….…….iii
BAB I PENDAHULUAN
1.1 Latar Belakang................................................................................1
1.2 Rumusan Masalah ..........................................................................2
1.3 Tujuan Penelitian ...........................................................................2
1.4 Manfaat Penelitian .........................................................................2
1.5 Konsep Dasar Penelitian ................................................................3
1.6 Data Flow Diagram (DFD) ...........................................................4
1.7 Flowchart .......................................................................................7
1.8 Diagram Konteks...........................................................................10
BAB II METODOLOGI
2.1 Analisis Program………………………………………..………...
2.2 Rancangan Prosedur Sistem Berjalan……………………...….......
2.2.1 Diagram Konteks……………………………………...…..
2.2.2 Data Flow Diagram………………………………….........
2.2.3 Tabel Relasi (ERD)……………………………………….
2.2.4 Struktur Tabel.............................................................……
2.2.5 Desain Interface..........................................................…....
BAB III HASIL DAN PEMBAHASAN
3.1 Deskripsi Sistem ....................................................................…..
3.2 Deskripsi Fungsional .............................................................…..
3.3 Cara Menjalankan Program ...................................................…..
3.4 Implementasi Program ...........................................................…..
BAB IV PENUTUP
5.1 Kesimpulan ............................................................................…..19

iii
 5.2 Saran ......................................................................................…..19
DAFTAR PUSTAKA ........................................................................…..20

iv
 BAB I
PENDAHULUAN

1.1. Latar Belakang

Website merupakan kumpulan halaman yang menampilkan informasi data teks,
data gambar, data animasi, suara, video atau gabungan dari semuanya. Beragam
website bermunculan dengan corak dan ragamnya. Dengan memanfaatkan kemajuan
teknologi saat ini, aplikasi berbasis website hadir seiring meningkatnya kebutuhan
manusia dalam melakukan interaksi sosial dengan sesamanya. Aplikasi berbasis
website ini sendiri dipadukan dengan teknologi yang sedang berkembang, seperti
internet dan social networking. Teknologi internet merupakan teknologi yang
dikembangkan agar manusia dapat berkomunikasi serta memperoleh informasi
tanpa harus bertatap muka dan berbincang langsung dengan manusia lainnya.
Sedangkan social networking merupakan bagian dari internetyang banyak
digunakan untuk berinteraksi antar seseorang, perorangan maupun grup. Selain itu,
dengan adanya teknologi internet, semua orang akan dapat berkomunikasi serta
mengakses informasi yang dibutuhkan dari seluruh dunia tanpa batas.

Contohnya adalah melalui sebuah website “Para Pencari Ustadz” yang

berbasis social networking, dimana disini memuat berbagai macam data informasi
yang menyangkut pemiliknya dan berinteraksi terhadap pemiliknya. Dengan
menggunakan koneksi internet, halaman website “Para Pencari Ustadz” dapat
diakses oleh semua orang tanpa ada keterbatasan waktu dan tempat sehingga dapat
mempermudah manusia untuk dapat berkomunikasi satu sama lain. Dengan
diciptanya website “Para Pencari Ustadz” tersebut, maka akan memudahkan orang-
orang khusus wilayah Yogyakarta yang suatu saat akan membutuhkan seorang
Ustadz maupun Ustadzah sebagai pengisi acara, yakni seperti ceramah, pengajian,
kajian-kajian islami, serta juga ahli dalam hal ruqyah.

1
 Sehingga jika ada yang membutuhkan, hanya melalui website ini, semua
data mengenai informasi Ustadz dan Ustadzah yang diinginkan dengan mudah bisa
didapatkan dalam genggaman. Mungkin bagi anda yang sibuk dan tidak sempat untuk
mencari langsung, anda hanya tinggal browsing sambil duduk manis, dan mencari
berbagai Ustadz dan Ustadzah yang telah dilengkapi dengan nama lengkap, alamat,
serta kontak yang dapat anda hubungi. Kecanggihan teknologi memudahkan
segalanya, dimana anda tak perlu lagi pergi ke yayasan pondok pesantren yang ada di
Yogyakarta. Dan tidak perlu keluar biaya transportasi seperti uang bensin, dan tak
perlu merasakan lelahnya berpergian.

1.2. Rumusan Masalah

Berdasarkan uraian pendahuluan di atas dapat di rumuskan permasalahan sebagai
berikut:
Bagaimana cara merancang suatu website mengenai menjualkan jasa dengan
berbasis web yang dapat menguntungkan bagi kedua belah pihak yaitu antara
penyedia jasa dan yang membutuhkan jasa.

1.3. Tujuan Penulisan

Memudahkan masyarakat Yogyakarta dalam mencari Ustadz dan Ustadzah tanpa
harus datang ke yayasan pondok pesantren, karena terhalang sibuk karena aktifitas
yang padat, sedang berada diluar kota ataupun tidak ada waktu lagi untuk mencari.
Maka dengan adanya website tersebut, anda bisa memilih Ustadz dan Ustadzah,
sebagai pengisi acara yakni misalnya sebagai penceramah, pemimpin pengajian,
membahas kajian-kajian islami, serta juga ahli dalam hal ruqyah.

1.4. Manfaat Penulisan

Pelaksanaan pembuatan tugas responsi dalam praktikum Sistem Informasi
Manajemen pada semester III ini diharapkan dapat memberikan manfaat sebagai
berikut :
 Bagi Penulis

2
 a. Meningkatkan akan pemahaman penulis dalam merancang serta membuat
suatu website.
b. Menambah ilmu baru dalam media publikasi karya bagi pelajar dan penulis.
c. Memberikan sistem pengetahuan baru khususnya tentang sistem pendataan
dan perekturan dalam dunia kerja.
d. Serta menambah wawasan dalam dunia kerja, terutama pengetahuan pada
bidang ilmu komputer yang dapat diterapkan dalam suatu perusahaan.
 Bagi Pembaca
a. Makalah tugas responsi ini diharapkan dapat digunakan sebagai referensi
dalam pembuatan suatu aplikasi- aplikasi dengan memanfaatkan berbagai
kemajuan teknologi yang dimana nantinya diharapkan dapat meningkatkan
pola pikir dan kreativitas para pembaca dalam mempelajari penerapan ilmu
komputer dalam kehidupan sehari-hari.
 Bagi Masyarakat
a. Mudah dan praktis dalam mengundang atau mencari jasa Ustadz maupun
Ustadzah sebagai pengisi acara islami.
b. Tidak terbatas, karena mencari jasa mereka dengan secara online tidak ada
batasan geografis, maka membuat seseorang dapat mencari Ustadz dan
Ustadzah secara praktis yang ada diluar kota dengan dukungan internet.
c. Tidak susah untuk sistem upah, sebab anda bisa menghubungi kontak yang
telah tertera terlebih dahulu .
d. Efektif dan efisien, karena tidak perlu pergi menghabiskan waktu untuk
mengunjungi beberapa yayasan pondok pesantren serta bingung ingin
bertanya kepada siapa.

1.5. Konsep Dasar Sistem

Sistem adalah sekelompok elemen yang terintegrasi dengan maksud yang
sama untuk mencapai suatu tujuan. Pengertian lain dari sistem adalah seperangkat

3
 unsur-unsur dari manusia, alat, konsep dan prosedur untuk maksud dan tujuan
yang sama.
Sebuah sistem terdiri dari bagian-bagian yang saling berkaitan dan saling
melakukan operasi kerja bersama-sama untuk mencapai beberapa sasaran yang
dimaksud. Berarti sebuah sistem bukanlah seperangkat unsur yang tersusun secara
tidak teratur, tetapi terdiri dari unsur yang dapat dikenal sebagai saling
melengkapi karena satu tujuan, maksud dan sasaran.
Sistem fisik lebih dari sekedar bentuk konseptual, karena dapat
memperlihatkan kegiatan atau perilaku. Sebuah sistem memungkinkan dapat
diuraikan dalam istilah perilaku yang mungkin, tetapi selalu ada sedikit kesalahan
atas ramalan terhadap jalannya operasi suatu sistem.

1.6 Data Flow Diagram (DFD)

A. PENGERTIAN DFD

Data Flow Diagram (DFD) atau Diagram Alir Data (DAD) adalah suatu
diagram yang menggunakan notasi-notasi untuk menggambarkan arus dari data pada
suatu sistem atau menjelaskan proses kerja suatu sistem, yang penggunaannya sangat
membantu untuk memahami sistem secara logika, tersruktur dan jelas. Secara
singkatnya, DFD adalah alat pemodelan untuk memodelkan alur kerja sistem.

B. KOMPONEN DFD

4
  User / Terminator: Kesatuan diluar sistem (external entity) yang
memberikan input ke sistem atau menerima output dari sistem berupa orang,
organisasi, atau sistem lain

 Process: Aktivitas yang mengolah input menjadi output.

 Data Store: Penyimpanan data pada database, biasanya berupa tabel.

 Data Flow: Aliran data pada sistem (antar proses, antara terminator & proses,
serta antara proses & data store).

C. BENTUK DFD

Terdapat dua bentuk DFD, yaitu Diagram Alur Data Fisik (DADF), dan
Diagram Alur Data Logika (DADL). DADF lebih menekankan pada bagaimana
proses dari sistem diterapkan, sedangkan DADL lebih menekankan proses-proses apa
yang terdapat di sistem.

5
 Diagram Alur Data Fisik (DADF)
DADF lebih tepat digunakan untuk menggambarkan sistem yang ada (sistem
yang lama). Penekanan dari DADF adalah bagaimana proses-proses dari
sistem diterapkan (dengan cara apa, oleh siapa dan dimana), termasuk proses-
proses manual.

 Diagram Alur Data Logika (DADL)

DADL lebih tepat digunakan untuk menggambarkan sistem yang akan
diusulkan (sistem yang baru). Untuk sistem komputerisasi, penggambaran
DADL hanya menunjukkan kebutuhan proses dari system yang diusulkan
secara logika, biasanya proses-proses yang digambarkan hanya merupakan
proses-proses secara komputer saja.

6
1.7 Flowchart

Flowchart adalah adalah suatu bagan dengan simbol-simbol tertentu yang

menggambarkan urutan proses secara mendetail dan hubungan antara suatu proses
(instruksi) dengan proses lainnya dalam suatu program.

Berikut ini adalah beberapa simbol yang digunakan dalam menggambar suatu
flowchart :

Gambar 1.1 Simbol dalam flowchart

Flowchart terbagi atas lima jenis, yaitu :

Flowchart Sistem

Flowchart Sistem merupakan bagan yang menunjukkan alur kerja atau apa yang
sedang dikerjakan di dalam sistem secara keseluruhan dan menjelaskan urutan dari

7
prosedur-prosedur yang ada di dalam sistem. Dengan kata lain, flowchart ini
merupakan dekripsi secara grafik dari urutan prosedur-prosedur yang terkombinasi
yang membentuk suatu sistem.

Flowchart Sistem terdiri dari data yang mengalir melalui sistem dan proses yang
mentransformasikan data itu. Data dan proses dalam flowchart sistem dapat
digambarkan secara online (dihubungkan langsung dengan komputer) atau offline
(tidak dihubungkan langsung dengan komputer, misalnya mesin tik, cash register
atau kalkulator).

Flowchart Dokumen

Bagan alir dokumen (document flowchart) atau disebut juga bagan alir formulir (form
flowchart) atau paperwork flowchart merupakan bagan alir yang menunjukkan arus
dari laporan dan formulir termasuk tembusan-tembusannya. Bagan alir dokumen ini
menggunakan simbol-simbol yang sama dengan yang digunakan di dalam bagan alir
sistem.

Flowchart Skematik

Bagan alir skematik (schematic flowchart) merupakan bagan alir yang mirip dengan
bagan alir sistem, yaitu untuk menggambarkan prosedur di dalam sistem.
Perbedaannya adalah, bagan alir skematik selain menggunakan simbol-simbol bagan
alir sistem, juga menggunakan gambar-gambar komputer dan peralatan lainnya yang
digunakan. Maksud penggunaan gambar-gambar ini adalah untuk memudahkan
komunikasi kepada orang yang kurang paham dengan simbol-simbol bagan alir.
Penggunaan gambar-gambar ini memudahkan untuk dipahami, tetapi sulit dan lama
menggambarnya.

Flowchart Program

8
Bagan alir program (program flowchart) merupakan bagan yang menjelaskan secara
rinci langkah-langkah dari proses program. Bagan alir program dibuat dari derivikasi
bagan alir sistem.

Bagan alir program dapat terdiri dari dua macam, yaitu bagan alir logika program
(program logic flowchart) dan bagan alir program komputer terinci (detailed
computer program flowchart). Bagan alir logika program digunakan untuk
menggambarkan tiap-tiap langkah di dalam program komputer secara logika. Bagan
alir logika program ini dipersiapkan oleh analis sistem.

Flowchart Proses

Flowchart Proses merupakan teknik penggambaran rekayasa industrial yang

memecah dan menganalisis langkah-langkah selanjutnya dalam suatu prosedur atau
sistem. Bagan alir proses menggunakan lima buah simbol tersendiri seperti terlihat
pada tabel di bawah ini.

Gambar 1.2 Simbol flowchart proses

Flowchart Proses digunakan oleh perekayasa industrial dalam mempelajari dan

mengembangkan proses-proses manufacturing. Dalam analisis sistem, flowchart ini
digunakan secara efektif untuk menelusuri alur suatu laporan atau form.

Jenis flowchart dan perbedaanya

9
Flowchart adalah sekumpulan gambar – gambar tertentu untuk menyatakan alur dari
suatu program yang akan diterjemahkan ke salah satu bahasa pemrograman.
Kegunaan flowchart sama seperti halnya algoritma yaitu untuk menuliskan alur
program tetapi dalam bentuk gambar atau symbol.

Flowchart dibagi menjadi dua (2) bagian, yaitu :

1. Flowchart yang menggambarkan alur suatu system
2. Flowchart yang menggambarkan alur dari suatu program.

Perbedaan DFD dan Flowchart

Berikut Perbedaan antara DFD dan Flowchart

1. DFD menunjukkan alur data di suatu sistem sedangkan flowchart sistem

menjelaskan alur kerja atau prosedur-prosedur yang ada di dalam system
2. DFD prosesnya dapat dilakukan serentak atau pararel sedangkan flowchart alur
datanya harus urut
3. DFD tidak ada looping sedangkan flowchart ada looping
4. DFD tidak ada proses perhitungan sedangkan flowchart ada proses perhitungan

1.8 Diagram Konteks

Diagram konteks adalah diagram yang mencakup masukan-masukan dasar,
sistem umum dan keluaran, diagram ini merupkan tingkatan tertinggi dalam diagram
aliran data dan hanya memuat satu proses, menunjukan sistem secara keseluruhan,
diagram tersebut tidak memuat penyimpanan dan penggambaran aliran data yang
sederhana, proses tersebut diberi nomor nol. Semua entitas ekternal yang ditunjukan
pada diagram konteks berikut aliran data-aliran data utama menuju dan dari sistem
(Kendall dan Kendall, 2003 ).

Adapun simbol-simbol Diagram konteks adalah sebagai berikut :

10
Gambar 1.3 Simbol dalam diagram konteks

11
 BAB III
HASIL DAN PEMBAHASAN

Konsep rancangan website pencari ustadz ini merupakan website yang

menyediakan ustadz/ah yang handal dan berpengalaman dalam bidang keagamaan.
Untuk mempermudah orang dalam mencari ustadz/ah tanpa perlu pusing kesana
kemari, maka dengan website inilah orang akan mendapatkan ustadz/ah yang handal
dengan cara yang praktis. Website harus didukung dengan halaman yang menyertakan
informasi dari para ustadz/ah yang tersedia, ataupun mengisi form untuk mem-
booking ustadz/ah yang diinginkan. Rancangan tersebut diimplementasikan seperti
desain gambar 3.1.
Daftar
Keterangan Langkah Tim Kontak
ustadz/ah

HEADER

Body

Gambar 3.1 Desain halaman utama web

3.1 Deskripsi Sistem

Website ini, hanya menampilkan satu halaman saja dimana jika mengklik
salah satu menu navigasi akan tetap diarahkan ke satu halaman tersebut. Pada website
ini pengunjung dapat melihat beranda yang terdiri dari menu Keterangan, Daftar

12
ustadz/ah, Langkah, Tim, dan Kontak. Menu Keterangan berisi penjelasan tentang
ustadz/ah dan juga al-qur’an..
Dalam menu Daftar ustadz/ah berisi deskripsi tentang masing-masing
ustadz/ah yang tersedia pada website ini. Jika pengunjung sudah menetepkan akan
mem-booking ustadz/ah yang mana, maka pengunjung dapat menekan tombol
Booking yang ada di bawah deskripsi dari masing-masing ustadz/ah. Dari tombol
booking ini nantinya akan diarahkan bagi pengunjung untuk mengisi form data diri
serta pilihan ustadz/ah yang akan di booking untuk kegiatan apa.
Menu Langkah merupakan tata cara bagaimana pengunjung dapat melakukan
booking terhadap ustadz/ah yang mereka inginkan. Pada menu Tim ditampilkan
sejumlah orang yang menjadi tim dalam pembuatan website ini. Terakhir pada menu
Kontak berisikan pesan yang ingin disampaikan kepada admin website ini.
3.2 Deskripsi Fungsional
Website bernama Para Pencari Ustadz merupakan website khusus yang
menyediakan pem-booking-an ustadz/ah kepada para pengguna yang menginginkan
kemudahan dalam mencari ustadz/ah untuk mengisi kegiatan-kegiatan keagamaan.
Website ini digunakan dan di buat secara dinamis agar mempermudah user dalam
mengakses, dan melakukan pem-booking-an melalui web serta mempermudah admin
untuk mengelola website serta database dari website tersebut.
3.3 Cara menjalankan program
Website ini terbagi menjadi 2 entitas yaitu Admin dan User. Admin merupakan
orang yang berhak dan menguasai atau mengontrol segala sesuatu di dalam website
ini termasuk mengupdate tampilan maupun plug in pada website ini. Sedangkan user
adalah seseorang yang akan melakukan pem-booking-an terhadap ustadz/ah untuk
mengisi kegiatan keagamaan.
Level penggunaan hak otoritas atas pembagian level tersebut :
a. Admin
1. Menambahkan plug in pendukung pada website.
2. Melakukan pembaruan plug in pada website

13
 3. Mengelola database website
4. Mengembangkan tampilan website.
5. Menyimpan dan menjaga data user
b. User
1. Melakukan pem-booking-an terhadap ustadz/ah yang ada pada website.
2. Menggunakan fitur pendukung tampilan informasi pem-booking-an yang ada
pada website.
3.4 Implementasi Program
Halaman utama website yang kami namakan Para Pencari Ustadz adalah
sebagai berikut.

Gambar 3.2 Tampilan halaman utama

Tampilan di gambar 3.2 merupakan tampilan utama yang akan muncul
pertama kali saat dibuka website Para Pencari Ustadz. Tampilan halaman diatas
adalah bagian header dimana untuk memulai melihat website ini dapat dengan
menekan tombol “Tell me more” yang nantinya akan diarahkan kepada menu
navigasi lainnya seperti daftar ustadz/ah yang tersedia di website ini, kemudian
bagaimana langkah-langkah untuk melakukan pem-booking-an terhadap ustadz/ah
dan lainnya.

14
 Gambar 3.3 Form booking
Untuk melakukan pem-booking-an terhadap ustadz/ah yang diinginkan, hal
pertama yang harus dilakukan adalah dengan mengklik salah satu foto yang ada pada
menu Daftar Ustadz/ah kemudian klik tombol Booking dibawah deskripsi dari
ustadz/ah tersebut. Pada halaman ini kita akan diarahkan untuk mengisi data diri yang
sesuai dan memilih salah satu nama ustadz/ah yang diinginkan kemudian pilih
kegiatan apa yang harus diisi oleh ustadz/ah tersebut. Setelah itu pilih tanggal berapa
ustadz/ah tersebut harus datang beserta alamatnya dimana. Setelah berhasil, maka
pelanggan akan mendapatkan informasi lanjutan melalui e-mail yang mereka
masukan pada form.

Gambar 3.4 Database

15
16
 BAB IV
PENUTUP

4.1 Kesimpulan

Website adalah kumpulan halaman-halaman yang digunakan untuk

menampilkan informasi teks, gambar diam atau gerak, animasi, suara, dan atau
gabungan dari semuanya itu baik yang bersifat statis maupun dinamis yang
membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing
dihubungkan dengan jaringan-jaringan halaman (hyperlink).
4.2 Saran

Dari tugas ini kami masih banyak kekurangan karena keterbatasan ilmu
pengetahuan, oleh karena itu koreksi dan saran dari pembaca sangat penting untuk
perbaikan dimasa mendatang.

17
 DAFTAR PUSTAKA

https://saraholiviameily.wordpress.com/2016/10/01/definisi-dfd-data-flow-diagram/
https://rahmatarifianto.wordpress.com/2014/11/20/pengertian-flowchart-dan-jenis-
jenisnya/
http://goresantinta-irna.blogspot.com/2015/02/diagram-konteks-pengertian-simbol-
dan.html

18