BAB III ANALISA KEBUTUHAN DAN PERANCANGAN SISTEM

(1)

14 BAB III

ANALISA KEBUTUHAN DAN PERANCANGAN SISTEM

3.1 Alat dan Bahan 3.1.1 Alat

Alat yang digunakan dalam pembuatan sistem informasi Info Ustadz ini antara lain :

1. Hardware atau perangkat keras yang digunakan : a. Prosesor : Intel Core i3 4200U

b. Memory : 3 GB c. Harddisk : 500 GB

2. Software atau perangkat lunak yang digunakan : a. Sistem Operasi Windows 8.1

b. Perangkat lunak pendukung : 1) Aplikasi Editor

Notepad++ untuk mendesain secara visual dan mengelola situs web maupun halaman web.

2) XAMPP 1.8.1

Merupakan tool yang menyediakan paket perangkat lunak ke dalam satu buah paket yang terdiri dari PHP sebagai bahasa pemrograman, MySQL sebagai database server dan Apache sebagai web server.

3) Web Browser, untuk tampilan terbaik disarankan menggunakan Google Chrome.

3.1.2 Bahan

Bahan yang digunakan dalam pembuatan sistem informasi Info Ustadz ini antara lain data-data mengenai data ustadz, data tausiyah , data pengajian, data mp3 pengajian, data video pengajian dan lain-lain.

(2)

3.2. Jalannya Penelitian

Gambar 3.1. Simbol-Simbol pada Seqeunce Diagram

Alur jalannya penelitian pembuatan aplikasi Info Ustadz terbagi menjadi 6 (enam) blok penelitain, antara lain:

a. Konsep, konsep merupakan bagian penelitian dimana membuat konsep kasar aplikasi yang dikembangkan dari ide. Pada blok ini juga dilakukan penentuan kebutuhan fungsional dan non fungsional aplikasi.

b. Pengumpulan Data dan Materi, setelah konsep sudah ditentukan secara matang, penelitian dilanjutkan dengan mengumpulkan data dan materi yang dibutuhkan untuk pembuatan aplikasi.

Pengumpulan data dilakukan dengan melakukan observasi ke objek penelitian dan wawancara dengan pihak-pihak terkait. Seperti ustadz, masyarakat muslim, dan organisasi masyarakat islam.

c. Perancangan Aplikasi, pada blok perancangan aplikasi mulai dilakukan perancangan aplikasi seperti membuat alur proses bisnis, perancangan basis data aplikasi, perancangan proses dan perancangan user interface aplikasi.

d. Pembuatan Aplikasi, setelah proses perancangan, penelitian dilanjutkan dengan membuat aplikasi dari rancangan yang telah dibuat sebelumnya.

(3)

e. Pengujian, rancangan yang telah dibuat dan diimplementasikan perlu dilakukan pengujian-pengujian untuk menentukan apakah aplikasi sudah sempurna ataukah masih membutuhkan perbaikan.

f. Hasil, setelah melalui proses pengujian dan perbaikan, aplikasi sudah dapat diimplementasikan dan di release ke publik.

3.3 Analisa Kebutuhan Sistem 3.3.1 Kebutuhan Fungsional

Kebutuhan Fungsional merupakan suatu kebutuhan sistem dilihat dari kacamata user. Kebutuhan Fungsional di gunakan untuk menentukan proses fungsionalitas dari sistem yang di lakukan oleh aktor.

Tabel 3.1. Deskripsi Aktor

Aktor Deskripsi

Ustadz Ustadz adalah seorang penulis tausiyah yang dapat menulis tausiyah, jadwal pengajian, upload gambar / pamphlet, upload rekaman pengajian, upload video pengajian dan membaca tausiyah pada sistem informasi Info Ustadz.

Admin Admin adalah seorang administrator

yang dapat mengelola seluruh data pada sistem informasi Info Ustadz.

(4)

Aktor Deskripsi

User User adalah pengguna aplikasi , yang

dapat membaca tausiyah, komentar tausiyah, membaca jadwal pengajian, mendengarkan rekaman pengajian, melihat video pepngajian sesuai ustadz yang diinginkan.

Tabel 3.2. Kebutuhan Fungsional

No Kode Deskripsi Level

1 FU01 Sistem dapat meManagment input , update, delete data Ustadz

Admin 2 FU02 Sistem dapat meManagement

insert, update, delete Tausiyah

Ustadz 3 FU05 Sistem dapat meManagement

Insert,update, delete Jadwal Pengajian

Ustadz

4 FU08 Sistem dapat meManagement Insert,delete Rekaman Pengajian

Ustadz 5 FU11 Sistem dapat meManagement

Insert,update data Video Pengajian

Ustadz

6 FU14 Sistem dapat meManagement Insert,delete data Gambar

Ustadz

7 FU17 Sistem dapat meManagement Delete data Komentar

Admin

3.3.2 Kebutuhan Non Fungsional

Dalam menjalankan sistem informasi Info Ustadz membutuhkan kebutuhan tertentu untuk pembatasan berjalannya sistem seperti : 1. Operasional : Web Browser Mozilla Firefox, Google Chrome,

Internet Explorer 9 keatas.

2. Keamanan : sistem informasi dan database menggunakan password

(5)

Untuk menjalankan aplikasi mobile Info Ustadz membutuhkan kebutuhan tertentu untuk pembatasan berjalannya aplikasi seperti : Kebutuhan Operasional : smartphone android versi 9 keatas dengan koneksi internet.

3.4 Perancangan Sistem

3.4.1. Perancangan Aplikasi Web 3.4.1.1. Context Diagram

Admin

Sistem Informasi Manajemen Info

Ustadz

Ustadz Data Ustadz

Data Tausiyah

Data Tausiyah Data Jadwal Data Gambar Data Rekaman

Data Video data Komentar

User Data Tausiyah Data Jadwal Data Gambar Data Rekaman Data Video data komentar Data Komentar Data Ustadz

Data Jadwal, Data Gambar Data Rekaman

Data Video

Data Tausiyah Data Jadwal Data Gambar Data Rekaman

Data Video data Komentar

Gambar 3.2. Context Diagram Info Ustadz

Pada context diagram ini dijelaskan aliran data secara global pada sistem info ustadz. Ada satu proses pada diagram konteks yaitu proses Sistem Informasi Manajemen info ustadz. Didalam proses terdapat keluar masuk data dari entitas Admin, Ustadz dan User.

3.4.1.2. DFD Level 0

Data Flow Diagram (DFD) level 0 merupakan detail dari Context Diagram (CD). Di dalamnya termuat proses-proses utama dalam sistem yang akan dibuat

(6)

dengan menyertakan data yang masuk maupun keluar dari tiap proses, serta data storage atau tempat penyimpanan datanya. Proses utama tersebut diberi nomor identitas 1,2, dan seterusnya untuk membedakan antar proses. Berikut adalah Data Flow Diagram (DFD) level 0 pada SI Info Ustadz.

Admin 1.

Manajemen data Ustadz

Ustadz

2.

Manajemen data Tausiyah

3.

Manajemen data Jadwal

4.

Manajemen data Galery Gambar

5.

Manajemen data Rekaman

6.

Manajemen data Video

ustadz

tausiyah

pengajian

galery

mp

video Data Ustadz

Data Ustadz

Data Ustadz Data Ustadz

Data Tausiyah Data Tausiyah Data Tausiyah

Data Tausiyah

Data Jadwal Data Jadwal

Data Gambar Data Gambar

Data Rekaman

Data Video

Data Video Data Rekaman

Data Rekaman

7.

Manajemen data komentar

Komentar Data Komentar

Data Komentar

User Data Ustadz

Data Tausiyah

Data Jadwal

Data Gambar

Data Rekaman

Data Video

Data Komentar Data Video

Data Video

data komentar data komentar

data komentar data komentar Data tausiyah

Gambar 3.3. DFD Level 0

3.4.1.4. DFD Level 1 – Proses 1 Manajemen Data Ustadz

Data Flow Diagram (DFD) level 1 merupakan detail dari Data Flow Diagram (DFD) level 0. Setiap proses utama dalam DFD level 0 akan dijabarkan dalam DFD

(7)

level 1 dan tiap proses penjabarannya diberi nomor identitas 1.1, 1.2, dan seterusnya

agar pembacaan data flow lebih mudah dipahami. Berikut adalah Data Flow Diagram (DFD) level 1 proses 1 pada SI Info Ustadz.

Admin

ustadz 1.1.

Tambah data Ustadz

1.2.

Edit data Ustadz

1.3.

Hapus data Ustadz

Data ustadz

Data ustadz Data ustadz

Informasi Data ustadz

Perubahan Data ustadz

Informasi hapus Data ustadz id ustadz Informasi Data ustadz

Gambar 3.4. DFD Level 1 Proses 1

Data Flow Diagram (DFD) level 1 proses 1 Manajemen data Ustadz pada SI

Info Ustadz memilki 3 sub proses.

1. Pertama adalah proses 1.1 yaitu menambah data ustadz, disini admin menginputkan data ustadz baru ke dalam proses 1.1 dan data disimpan dalam data storage ustadz, dari data storage ustadz akan mengembalikan informasi data ustadz yang telah tersimpan.

2. Kedua adalah proses 1.2 yaitu edit data ustadz, pada proses ini admin maupun ustadz menginputkan id_ustadz yang akan diedit kemudian dari data storage akan mencocokkan id_ustadz yang diiputkan tersebut dan mengembalikan informasi data ustadz yang diminta, kemudian admin maupun usutadz akan menginputkan data ustadz baru untuk menggantikan data ustadz lama yang kemudian disimpan dalam data storage ustadz.

(8)

3. Ketiga adalah proses 1.3 yaitu menghapus data ustadz. Kesalahan suatu data dapat disebabkan oleh beberapa factor diantaranya adalah keterbatasan kemampuan admin yang memungkinkan admin menginputkan data salah ke dalam data storage, sehingga data yang tidak berguna tersebut sangat dianjurkan untuk dihapus agar memori penyimpanan dapat digunakan untuk menyimpan data lain yang lebih bernilai. Pada proses ini admin menginputkan id_ustadz yang akan dihapus kemudian dari data storage akan mencocokkan id_ustadz yang diiputkan tersebut, setelah data ustadz terhapus maka data storage akan mengupdate data ustadz di dalamnya dengan membaca data uystadz yang telah dihapus dan mengembalikan informasi data ustadz kepada admin.

3.4.1.5. DFD Level 1 – Proses 2 Manajemen Tausiyah

Berikut adalah Data Flow Diagram (DFD) level 1 proses 2 pada SI Info Ustadz.

tausiyah

Ustadz

2.2.

Tambah data tausiyah

2.3.

Update data tausiyah

2.4.

Deleta data tausiyah

Data tausiyah

Data tausiyah Perubahan Data tausiyah

Informasi hapus Data tausiyah id tausiyah Informasi data tausiyah

Data tausiyah

Informasi data tausiyah

Data Flow Diagram (DFD) level 1 proses 2 Manajemen data Tausiyah pada

SI Info Ustadz memilki 3 sub proses.

1. Pertama adalah proses 2.1 yaitu menambah data tausiyah, disini ustadz menginputkan data tausiyah baru ke dalam proses 2.1 dan data disimpan dalam data storage tausiyah, dari data storage tausiyah akan mengembalikan informasi data tausiyah yang telah tersimpan.

(9)

2. Kedua adalah proses 2.2 yaitu edit data tausiyah, pada proses ini ustadz menginputkan id_tausiyah yang akan diedit kemudian dari data storage akan mencocokkan id_tausiyah yang diiputkan tersebut dan mengembalikan informasi data tausiyah yang diminta, kemudian ustadz akan menginputkan data tausiyah baru untuk menggantikan data tausiyah lama yang kemudian disimpan dalam data storage tausiyah.

3. Ketiga adalah proses 2.3 yaitu menghapus data tausiyah. Kesalahan suatu data dapat disebabkan oleh beberapa factor diantaranya adalah keterbatasan kemampuan ustadz yang memungkinkan ustadz menginputkan data salah ke dalam data storage, sehingga data yang tidak berguna tersebut sangat dianjurkan untuk dihapus agar memori penyimpanan dapat digunakan untuk menyimpan data lain yang lebih bernilai. Pada proses ini ustadz menginputkan id_tausiyah yang akan dihapus kemudian dari data storage akan mencocokkan id_tausiyah yang diiputkan tersebut, setelah data tausiyah terhapus maka data storage akan mengupdate data tausiyah di dalamnya dengan membaca data tausiyah yang telah dihapus dan mengembalikan informasi data tausiyah kepada ustadz.

(10)

3.4.1.6. DFD Level 1 – Proses 3 Manajemen Jadwal Pengajian

pengajian

Ustadz

3.1.

Tambah data pengajian

3.2.

edit data pengajian

3.3.

hapus data pengajian

Data jadwal

Data jadwal Perubahan Data jadwal

Informasi hapus Data jadwal id jadwal Informasi data jadwal

Data jadwal

Informasi data jadwal

Data Flow Diagram (DFD) level 1 proses 3 Manajemen data Pengajian pada SI Info Ustadz memilki 3 sub proses.

1. Pertama adalah proses 3.1 yaitu menambah data jadwal, disini ustadz menginputkan data jadwal baru ke dalam proses 3.1 dan data disimpan dalam data storage pengajian, dari data storage pengajian akan mengembalikan informasi data jadwal yang telah tersimpan.

2. Kedua adalah proses 3.2 yaitu edit data jadwal, pada proses ini ustadz menginputkan id_jadwal yang akan diedit kemudian dari data storage akan mencocokkan id_jadwal yang diiputkan tersebut dan mengembalikan informasi data jadwal yang diminta, kemudian ustadz akan menginputkan data jadwal baru untuk menggantikan data jadwal lama yang kemudian disimpan dalam data storage pengajian.

3. Ketiga adalah proses 3.3 yaitu menghapus data jadwal. Kesalahan suatu data dapat disebabkan oleh beberapa factor diantaranya adalah keterbatasan kemampuan ustadz yang memungkinkan ustadz menginputkan data salah ke dalam data storage, sehingga data yang tidak berguna tersebut sangat dianjurkan untuk dihapus agar memori penyimpanan dapat digunakan untuk menyimpan data lain yang lebih

(11)

bernilai. Pada proses ini ustadz menginputkan id_jadwal yang akan dihapus kemudian dari data storage akan mencocokkan id_jadwal yang diiputkan tersebut, setelah data jadwal terhapus maka data storage akan mengupdate data jadwal di dalamnya dengan membaca data jadwal yang telah dihapus dan mengembalikan informasi data jadwal kepada ustadz.

3.4.1.7. DFD Level 1 – Proses 4 Manajemen Gambar

gambar

Ustadz

4.1.

Tambah data gambar

4.2.

hapus data gambar

Data gambar

Informasi hapus Data gambar id gambar

Data gambar

Informasi data gambar

Data Flow Diagram (DFD) level 1 proses 4 Manajemen data Gambar pada SI

1. Pertama adalah proses 4.1 yaitu menambah data gambar, disini ustadz menginputkan data gambar baru ke dalam proses 4.1 dan data disimpan dalam data storage gambar, dari data storage gambar akan mengembalikan informasi data gambar yang telah tersimpan.

2. Kedua adalah proses 4.2 yaitu menghapus data gambar. Kesalahan suatu data dapat disebabkan oleh beberapa factor diantaranya adalah keterbatasan kemampuan ustadz yang memungkinkan ustadz menginputkan data salah ke dalam data storage, sehingga data yang tidak berguna tersebut sangat dianjurkan untuk dihapus agar memori penyimpanan dapat digunakan untuk menyimpan data lain yang lebih bernilai. Pada proses ini ustadz menginputkan id_gambar yang akan

(12)

dihapus kemudian dari data storage akan mencocokkan id_gambar yang diiputkan tersebut, setelah data gambar terhapus maka data storage akan mengupdate data gambar di dalamnya dengan membaca data gambar yang telah dihapus dan mengembalikan informasi data gambar kepada ustadz.

3.4.1.8. DFD Level 1 – Proses 5 Manajemen Rekaman

mp

Ustadz

5.2.

Tambah data rekaman

5.3.

Delete data rekaman

Data rekaman

Informasi hapus Data rekaman id rekaman

Data rekaman

Informasi data rekaman

Data Flow Diagram (DFD) level 1 proses 5 Manajemen data rekaman pada

1. Pertama adalah proses 5.1 yaitu menambah data rekaman , disini ustadz menginputkan data rekaman baru ke dalam proses 5.1 dan data disimpan dalam data storage mp, dari data storage mp akan mengembalikan informasi data rekaman yang telah tersimpan.

2. Kedua adalah proses 5.2 yaitu menghapus data rekaman . Kesalahan suatu data dapat disebabkan oleh beberapa factor diantaranya adalah keterbatasan kemampuan ustadz yang memungkinkan ustadz menginputkan data salah ke dalam data storage, sehingga data yang tidak berguna tersebut sangat dianjurkan untuk dihapus agar memori penyimpanan dapat digunakan untuk menyimpan data lain yang lebih bernilai. Pada proses ini ustadz menginputkan id_mp yang akan dihapus kemudian dari data storage akan mencocokkan id_mp yang

(13)

diiputkan tersebut, setelah data rekaman terhapus maka data storage akan mengupdate data rekaman di dalamnya dengan membaca data rekaman yang telah dihapus dan mengembalikan informasi data rekaman kepada ustadz.

3.4.1.9. DFD Level 1 – Proses 6 Manajemen Video

video

Ustadz

6.1.

Tambah data

video

6.2.

hapus data

video

Data video

Informasi hapus Data

video

id video

Data video

Informasi data video

Data Flow Diagram (DFD) level 1 proses 6 Manajemen data video pada SI

1. Pertama adalah proses 6.1 yaitu menambah data video , disini ustadz menginputkan data video baru ke dalam proses 6.1 dan data disimpan dalam data storage video , dari data storage video akan mengembalikan informasi data video yang telah tersimpan.

2. Kedua adalah proses 6.2 yaitu menghapus data video. Kesalahan suatu data dapat disebabkan oleh beberapa factor diantaranya adalah keterbatasan kemampuan ustadz yang memungkinkan ustadz menginputkan data salah ke dalam data storage, sehingga data yang tidak berguna tersebut sangat dianjurkan untuk dihapus agar memori penyimpanan dapat digunakan untuk menyimpan data lain yang lebih bernilai. Pada proses ini ustadz menginputkan id_video yang akan dihapus kemudian dari data storage akan mencocokkan id_video yang

(14)

diiputkan tersebut, setelah data video aman terhapus maka data storage akan mengupdate data video di dalamnya dengan membaca data video yang telah dihapus dan mengembalikan informasi data video kepada ustadz.

3.4.1.10. DFD Level 1 – Proses 7 Manajemen Komentar

comment

Ustadz

7.1.

Tambah data comment

7.2.

hapus data comment

Data comment

Informasi hapus Data comment id comment Data comment

Informasi data comment

Admin

Data Flow Diagram (DFD) level 1 proses 7 Manajemen data comment pada

1. Pertama adalah proses 7.1 yaitu menambah data comment, disini ustadz menginputkan data comment baru ke dalam proses 7.1 dan data disimpan dalam data storage comment, dari data storage comment akan mengembalikan informasi data comment yang telah tersimpan.

2. Kedua adalah proses 7.2 yaitu menghapus data comment. Adanya data comment yang kurang pantas dan kurang sopan untuk ditampilkan pada SI Info Ustadz adalah alasan data comment dihapus. Pada proses ini admin menginputkan id_comment yang akan dihapus kemudian dari data storage akan mencocokkan id_comment yang diiputkan tersebut, setelah data comment aman terhapus maka data storage akan mengupdate data comment di dalamnya dengan membaca data

(15)

commnet yang telah dihapus dan mengembalikan informasi data comment kepada admin.

3.4.2. Perancangan Aplikasi Mobile 3.4.2.1. Use Case Diagram

Berdasarkan kebutuhan fungsional dari aplikasi Info Ustadz dapat diperoleh usercase diagram sebagai berikut :

Gambar 3.11. Use Case Info Ustadz

Pada aplikasi info ustadz, terdapat beberapa use case yaitu, use case menampilkan data tausiyah, use case menampilkan data pengajian, use case menampilkan data ustadz, use case menampilkan data galery, use case mekakukan pencarian tausiyah dan ustadz. Kemudaian ada use case mengomentari tausiyah dan share extend terhadap use case menampilkan data tausiyah. Use case melihat lokasi pengajian extend terhadap menampilkan data pengajian. Use case menampilkan data video dan use cas menampilkan mp3 pengajian extend dengan menampilkan data ustadz. Use case menampilkan gambar dan use case menampilkan mp3 extend dengan menampilkan data Galery.

System

User

Melihat data Tausiyah

Melihat data Pengajian

Melihat daftar ustadz

Melihat data Galery

Melakukan pencarian tausiyah dan ustadz Melihat data video

melihat lokasi pengajian mengomentari tausiyah

meng-Share tausiyah

<<extend>>

Melihat Mp3 pengajian

(16)

3.4.2.2. Activity Diagram

3.4.2.2.1. Activity Diagram Menampilkan data Tausiyah

Berikut adalah activity diagram untuk menampilkan data tausiyah. Pada diagram ini terdapat alur aktivitas yang dilakukan oleh user dan sistem untuk menampilkan data tausiyah.

Gambar 3.12. Activity Diagram Menampilkan Tausiyah Penjelasan Gambar 3.12 sebagai berikut :

1. User menginputkan nama.

2. Sistem menbaca inputan dari user.

3. Sistem menyimpan inputan nama dari user ke dalam memory cache.

4. Sistem mengambil data tausiyah.

5. Sistem mengecek di server ada data tausiyah atau tidak.

6. Jika ada maka Sistem akan menampilkan data. Jika tidak, sistem akan berhenti mengambil data tausiyah.

(17)

3.4.2.2.2. Activity Diagram Menampilkan data Jadwal Pengajian

Berikut adalah activity diagram untuk menampilkan data jadwal pengajian. Pada diagram ini terdapat alur aktivitas yang dilakukan oleh user dan sistem untuk menampilkan data jadwal pengajian.

Gambar 3.13. Activity Diagram Menampilkan Jadwal

Penjelasan Gambar 3.13 sebagai berikut : 1. User menekan tombol menu jadwal.

2. Sistem mengambil data jadwal.

3. Sistem mengecheck di server ada data jadwal atau tidak.

4. Jika ada maka Sistem akan menampilkan data jadwal. Jika tidak, sistem akan berhenti mengambil data jadwal.

(18)

3.4.2.2.3. Activity Diagram Menampilkan data Ustadz

Berikut adalah activity diagram untuk menampilkan data ustadz. Pada diagram ini terdapat alur aktivitas yang dilakukan oleh user dan sistem untuk menampilkan data ustadz.

Gambar 3.14. Activity Diagram Menampilkan Ustadz Penjelasan Gambar 3.14 sebagai berikut :

1. User menekan tombol menu ustadz.

2. Sistem mengambil data ustadz.

3. Sistem mengecheck di server ada data ustadz atau tidak.

4. Jika ada maka Sistem akan menampilkan data ustadz. Jika tidak, sistem akan berhenti mengambil data ustadz.

(19)

3.4.2.2.4. Activity Diagram Melakukan Pencarian data Tausiyah

Berikut adalah activity diagram untuk menampilkan data tausiyah berdasarkan keyword pencarian. Pada diagram ini terdapat alur aktivitas yang dilakukan oleh user dan sistem untuk menampilkan data pencarian tausiyah.

Gambar 3.15. Activity Diagram Pencarian Tausiyah Penjelasan Gambar 3.15 sebagai berikut :

1. User menekan tombol menu Search.

2. User menginputkan keyword 3. User menekan tombol search.

4. Sistem mengambil data tausiyah berdasarkan keyword.

5. Sistem mengecheck di server ada data tausiyah atau tidak.

6. Jika ada maka Sistem akan menampilkan data tausiyah. Jika tidak, sistem akan berhenti mengambil data tausiyah.

(20)

3.4.2.2.5. Activity Diagram Menampilkan data Mp3 Pengajian

Berikut adalah activity diagram untuk menampilkan data Mp3 Pengajian. Pada diagram ini terdapat alur aktivitas yang dilakukan oleh user dan sistem untuk menampilkan Mp3 Pengajian.

Gambar 3.16. Activity Diagram Menampilkan Mp3 Pengajian Penjelasan Gambar 3.16 sebagai berikut :

1. User menekan tombol menu Galery.

2. User menggeser halaman galery.

3. Sistem mengambil data Mp3 Pengajian.

4. Sistem mengecheck di server ada data Mp3 Pengajian atau tidak.

5. Jika ada maka Sistem akan menampilkan data Mp3 Pengajian. Jika tidak, sistem akan berhenti mengambil data Mp3 Pengajian.

(21)

3.4.2.2.6. Activity Diagram Menampilkan data Galery Gambar

Berikut adalah activity diagram untuk menampilkan data galery gambar. Pada diagram ini terdapat alur aktivitas yang dilakukan oleh user dan sistem untuk menampilkan galery gambar.

Gambar 3.17. Activity Diagram Menampilkan Galery Gambar Penjelasan Gambar 3.17 sebagai berikut :

1. User menekan tombol menu Galery.

2. Sistem mengambil data galery gambar.

3. Sistem mengecheck di server ada data galery gambar atau tidak.

4. Jika ada maka Sistem akan menampilkan data galery gambar. Jika tidak, sistem akan berhenti mengambil data galery gambar.

(22)

3.4.2.2.7. Activity Diagram Menampilkan data Video

Berikut adalah activity diagram untuk menampilkan data video. Pada diagram ini terdapat alur aktivitas yang dilakukan oleh user dan sistem untuk menampilkan data video.

Gambar 3.18. Activity Diagram Menampilkan Data Video Penjelasan Gambar 3.18 sebagai berikut :

1. User menekan tombol menu ustadz.

2. User memilih salah satu ustadz.

3. User memilih sub menu video.

4. Sistem mengambil data video.

5. Sistem mengecheck di server ada data video atau tidak.

6. Jika ada maka Sistem akan menampilkan data video. Jika tidak, sistem akan berhenti mengambil data video.

(23)

3.4.2.3. Diagram Sequence

Gambar 3.19. Sequence Menampilkan data Tausiyah

Gambar 3.20. Sequence Menampilkan data Pengajian

: User

: HomeFragment Server Database

1 : btn->Home

2 : asyncJason()

3 : artikel() 4

5 : json_encode() 6

7 : decodeArtikel()

8 : isi() 9

10 : idTausiyah

11 : detail()

12

: User : Pengajian Server Database

1 : btn->Pengajian

2 : asyncJason()

3 : artikel() 4

5 : json_encode() 6

7 : decodeArtikel() 8 : isiArtikel() 9

10 : idPengajian

11 : detail()

12

(24)

Gambar 3.21. Sequence Menampilkan data Ustadz

Gambar 3.22. Sequence Menampilkan data Galery

: User : ustadz Server Database

1 : btn->Ustadz

2 : asyncJason()

3 : artikel() 4

5 : json_encode() 6

: User 1 : btn->Galery : Galery Server Database

2 : asyncJason()

3 : artikel() 4

5 : json_encode() 6

7 : decodeArtikel() 8

(25)

Gambar 3.23. Sequence Menampilkan data Search

Gambar 3.24. Sequence Menampilkan data Mp3 Pengajian

: User : Search Server Database

1 : btn->Pengajian

2 : search() 3

4 : Keyword

5 : async_post()

6 : artikel() 7 8 : json_encode() 9

10 : decode_artikel() 11

: User : Mp3 Pengajian Server Database

1 : btn->Pengajian

2 : asyncJason()

3 : artikel() 4

5 : json_encode() 6

10 : idMp3Pengajian

11 : detail() 12

(26)

3.4.2.4. Class Diagram

Class diagram aplikasi Info Ustadz dapat dilihat pada lampiran 1 dan lampiran 2.

3.4.3. Perancangan Basis Data

3.4.3.1. Entity Relationship Diagram

Pembuatan Sistem Informasi Info Ustadz menggunakan sembilan tabel utama dan satu tabel lain hasil dari relasi antar tabel many to many. Sembilan table utama tersebut adalah tabel ustadz,tausiyah, galery, mp, video, pengajian, user, hadits, dan comment . Berikut adalah gambaran relasi antar tabel-tabel tersebut dalam ERD Sistem Informasi Info Ustadz.

user

Ustadz mempunyai

membuat

tausiyah video

mp

pengajian galery

Id_ustadz

1 1

1

M

mengupload mengupload

mengupload

1 1

1 M

M

menulis

M 1

mengomentari mengomentari

M M

M

no nama

alamat lahir

nohp email

foto wallpaper

stat_us

date_daftar Id_gal

source

date

Id_video

judul

file status

Id_mp

judul

file

tanggal

Id_pengajian

tempat

hari

jam tema

longitude

latitude

Id_tausiyah

judul

tausiyah

create_at post

date_post

baca

no

username

password

level

Id_comment comment date_comment

read no

Id_chat chat

date_chat

read

comment commentator

1

Gambar 3.25. ERD Info Ustadz

(27)

3.4.3.2. Mapping Tabel

Gambar 3.26. Maping Tabel 3.4.3.3. Tabel Fisik

a. Tabel user

Tabel user digunakan untuk menyimpan data user login, perancangan tabel user sebagai berikut.

Tabel 3.3. Tabel user

No. Nama Kolom Tipe Data Keterangan 1. no Integer (5) Auto Increment

2. id_ustadz Varchar(50) Primary Key 3. username Varchar(20)

4. password Varchar(100) 5. level Varchar(15)

b. Tabel ustadz

Tabel ustadz digunakan untuk menyimpan data ustadz, perancangan tabel ustadz sebagai berikut.

Tabel 3.4. Tabel ustadz

No. Nama Kolom Tipe Data Keterangan 1 no integer(11) auto increment

2 id_ustadz varchar(50) Primary Key

3 nama Varchar(50) Unique

(28)

No. Nama Kolom Tipe Data Keterangan 3 Alamat varchar(100)

4 nohp varchar(12)

5 email varchar(50)

6 foto varchar(50)

7 stat_us varchar(20) 8 date_daftar datetime

c. Tabel tausiyah

Tabel tausiyah digunakan untuk menyimpan data tausiyah, perancangan tabel tausiyah sebagai berikut.

Tabel 3.5. Tabel tausiyah

No. Nama Kolom Tipe Data Keterangan 1 id_tausiyah integer(10) primary key

2 judul varchar(50)

3 id_ust varchar(50) foreign key

4 tausiyah longtext

5 create_at date_time

6 post varchar(20)

7 date_post date_time

8 baca varchar(1)

d. Tabel chat

Tabel chat digunakan untuk menyimpan data chat, perancangan tabel chat sebagai berikut.

Tabel 3.6. Tabel chat

No. Nama Kolom Tipe Data Keterangan

1 no integer(10) primary key

2 id_chat varchar(50)

3 chat text

4 id_ust varchar(20) 5 id_ust2 varchar(20) 6 date_chat datetime

7 read Varchar(1)

(29)

e. Tabel comment

Tabel comment digunakan untuk menyimpan data comment, perancangan tabel comment sebagai berikut.

Tabel 3.7. Tabel comment

No. Nama Kolom Tipe Data Keterangan 1 id_comment integer(10) primary key

2 Comment text

3 id_tausiyah integer(10) foreign key 4 Commentator varchar(50)

5 date_comment datetime

6 Read varchar(1)

f. Tabel mp

Tabel mp digunakan untuk menyimpan data rekaman mp3 pengajian, perancangan tabel mp sebagai berikut.

Tabel 3.8. Tabel mp

No. Nama Kolom Tipe Data Keterangan 1 id_mp integer(5) primary key

2 Judul varchar(200)

3 ustadz varchar(30) foreign key

4 file varchar(200)

5 tanggal datetime

g. Tabel galery

Tabel galery digunakan untuk menyimpan data gambar, perancangan tabel galery sebagai berikut.

Tabel 3.9. Tabel galery

No. Nama Kolom Tipe Data Keterangan 1 id_gal integer(10) primary key

2 ustadz varchar(50) foreign key Source varchar(200)

Date datetime

h. Tabel video

Tabel video digunakan untuk menyimpan data video, perancangan tabel video sebagai berikut.

(30)

Tabel 3.10. Tabel video

No. Nama Kolom Tipe Data Keterangan 1 id_video integer(11) Primary Key

2 Judul varchar(200)

3 Ustadz varchar(50) foreign key

4 File varchar(400)

5 Status integer(11)

a. Tabel pengajian

Tabel pengajian digunakan untuk menyimpan data jadwal pengajian, perancangan tabel pengajian sebagai berikut.

Tabel 3.11. Tabel pengajian

No. Nama Kolom Tipe Data Keterangan 1 id_pengajian integer(10) Primary Key

2 Ustadz varchar(50) foreign key 3 Tempat varchar(200)

4 Hari varchar(50)

5 Jam varchar(10)

6 Tema varchar(100)

7 Longitude varchar(20) 8 Latitude varchar(20)

i. Tabel log

Tabel log digunakan untuk menyimpan data IP dan MAC user yang salah login, perancangan tabel log sebagai berikut.

Tabel 3.12. Tabel log

No. Nama Kolom Tipe Data Keterangan

1 Ip varchar(20)

2 Mac varchar(50)

3 Date datetime

j. Tabel hadits

Tabel hadits digunakan untuk menyimpan data hadits, perancangan tabel hadits sebagai berikut.

Tabel 3.13. Tabel hadits

No. Nama Kolom Tipe Data Keterangan 1 id_hadits integer(10) primary key

2 Hadits varchar(500)

(31)

3.4.4. Perancangan User Interface

3.4.4.1. Perancangan User Interface Aplikasi Web 3.4.4.1.1. Rancangan Halaman Login

Pada halaman login, terdapat form username , password dan tobol untuk submit. Digunakan untuk login admin maupun ustadz. Tampilan perancangan halaman login seperti berikut.

Gambar 3.27. Rancangan Halaman Login 3.4.4.1.2. Rancangan Halaman Beranda

Halaman beranda berisi data profil ustadz – ustadz yang terdaftar. Di halaman beranda admin juga ada tombol input ustadz untuk menambah data ustadz. Di halaman ini admin dapat mengelola data ustadz seperti edit profil ustadz, chating dengan ustadz, dan hapus data ustadz. Tampilan perancangan halaman beranda seperti berikut.

Gambar 3.28. Rancangan Halaman Beranda

(32)

3.4.4.1.3. Rancangan Halaman Tausiyah

Halaman Tausiyah Ustadz berisi daftar tabel tausiyah yang sudah ditulis oleh ustadz. Di dalam tabel ada 3 buah tombol yaitu Baca, edit, hapus. Tombol hapus digunakan untuk menghapus data tausiyah, tombol edit digunakan untuk mengedit data tausiyah, sedangkan tombol Baca, digunakan untuk membaca data tausiyah. Tampilan perancangan halaman Tausiyah seperti berikut.

Gambar 3.29. Rancangan Halaman Tausiyah 3.4.4.1.4. Rancangan Halaman Input Tausiyah

Halaman input tausiyah berisi form input judul atau tema tausiyah dan isi tausiyah. Tampilan perancangan halaman input tausiyah sebagai berikut.

Gambar 3.30. Halaman Input Tausiyah 3.4.4.1.5. Rancangan Halaman Jadwal Pengajian

Halaman Jadwal pengajian berisi tabel jadwal pengajian dan di sini terdapat tombol baca, edit, delete jika ustadz tidak pernah mengisikan jadwal

(33)

pengajian , ustadz yang login tidak bisa mengedit ataupun menghapus jadwal.

Tampilan perancangan halaman jadwal pengajian sebagai berikut.

Gambar 3.31. Halaman Jadwal Pengajian 3.4.4.1.6. Rancangan Halaman Input Jadwal Pengajian

Halaman input pengajian digunakan untuk meginputkan data pengajian.

Di halaman ini terdapat peta untuk negeset lokasi pengajian. Selain itu ustadz, harus menginputkan alamat tempat pengajian, tanggal pengajian, jam pengajian, dan tema pengajian. Setelah data di-submit , tampilan perancangan halaman input jadwal pengajian sebagai berikut.

Gambar 3.32. Halaman Input Jadwal

(34)

3.4.4.2. Perancangan User Interface Aplikasi Mobile 3.4.4.2.1. Rancangan Halaman Splash

Halaman splash adalah halaman awal dari aplikasi info ustadz. Yang terdapat logo dan versi aplikasi info ustadz. Tampilan perancangan halaman splash seperti berikut.

Gambar 3.33. Rancangan Halaman Splash 3.4.4.2.2. Rancangan Halaman Home ( Tausiyah )

Halaman beranda atau tausiyah berisi listview tausiyah yang sudah dipost oleh admin info ustadz. Tampilan perancangan halaman beranda atau tausiyah sebagai berikut.

Gambar 3.34. Rancangan Halaman Home

(35)

3.4.4.2.3. Rancangan Halaman Detail Tausiyah

Halaman detail tausiyah berisi isi tausiyah dari ustadz. Di halaman ini terdapat tombol komenar untuk menuju ke halaman komentar dan tombol berbagi (share) untuk membagikan tausiyah. Tampilan pernacangan halaman detai tausiyah sebagai berikut.

Gambar 3.35. Rancangan Halaman Detail

(36)

3.4.4.2.4. Rancangan Halaman Komentar Tausiyah

Halaman komentar berisi judul tausiyah , form komentar, dan komentar – komentar tentang tausiyah tersebut. Semua pengguna aplikasi ini bisa mengomentari tausiyah – tausiyah dari aplikasi info ustadz. Tampilan perancangan halaman komentar sebagai berikut.

Gambar 3.36. Rancangan Halaman Komentar 3.4.4.2.5. Rancangan Halaman Pengajian

Halaman pengajian berisi listview jadwal pengajian yang sudah dipost oleh ustadz. Di halaman ini terdapat tema pengajian, tanggal pengajian, dan ustadz yang mengisi pengajian. Brikut tampilan perancangan halaman pengajian.

Gambar 3.37. Rancangan Halaman Jadwal

(37)

3.4.4.2.6. Rancangan Halaman Lokasi Pengajian

Halaman lokasi pengajian berisi peta lokasi pengajian dimana pengajian itu dilaksanakan. Halaman ini akan muncul ketika action onClick listview jadwal pengajian diklik. Berikut tampilan perancangan halaman lokasi pengajian.

Gambar 3.38. Rancangan Halaman Lokasi 3.4.4.2.7. Rancangan Halaman Search Tausiyah

Halaman search tausiyah berisi edit text dan tombol search. Edit text tersebut untuk menginputkan keyword tausiyah maupun ustadz yang ingin dicari.

Berikut tampilan perancangan halaman search tausiyah.

Gambar 3.39. Rancangan Halaman Search

(38)

3.4.4.2.8. Rancangan Halaman Ustadz

Halaman list ustadz berisi listview nama dan foto ustadz, sehingga user dapat memilih kategori ustadz yang diinginkan. Berikut tampilan perancangan halaman ustadz.

Gambar 3.40. Rancangan Halaman Ustadz 3.4.4.2.9. Rancangan Halaman Kategori

Halaman kategori ustadz berisi submenu kategori ustadz yang dipilih.

Di halaman ini terdapat menu tausiyah ustadz, video ustadz, audio rekaman ustadz,, dan jadwal pengajian ustadz. Berikut tampilan perancangan halaman kategori.

Gambar 3.41. Rancangan Halaman Kategori