BAB 3 METODOLOGI. 3.1 Metodologi (Diagram Alir Kerangka Berpikir) Metode yang akan digunakan dalam pembuatan skripsi ini menggunakan Waterfall Model.

BAB 3 METODOLOGI 3.1 Metodologi (Diagram Alir Kerangka Berpikir) Metode yang akan digunakan dalam pembuatan skripsi ini menggunakan Waterfall Model. Gambar 3.1 Waterfall Model (Sumber: Pressman, p39) a. Komunikasi (Communication) Merupakan tahap pertama dimana dilakukan inisialisasi kemudian pengumpulan data yang dibutuhkan dalam pembuatan website. Data yang dibutuhkan adalah sebagai berikut: - Data absensi jemaat gereja - Data jemaat termasuk alamat jemaat - Data keadaan fisik jemaat gereja - Data karakteristik jemaat gereja Pengumpulan data dilakukan dengan cara sebagai berikut: - Melakukan identifikasi masalah dengan pihak PT. Web Architect Technology - Melakukan wawancara dengan Admin Gereja Sidang Jemaat Kristus - Mendapatkan data yang dibutuhkan dari Admin Gereja Sidang Jemaat Kristus Kemudian dipilih bahasa pemrograman, framework, metode analisa dan perancangan, basis data (database) yang akan digunakan dalam pembuatan website. 45

46 b. Perencanaan (Planning) Merupakan tahap kedua dimana dilakukan estimasi waktu pengerjaan projek dan penjadwalan projek agar projek dapat selesai tepat waktu. Perencanaan dimulai dengan menentukan estimasi waktu website selesai, pembagian pekerjaan dalam pembuatan website, serta pembuatan timeline mendetail agar website dapat selesai tepat waktu. c. Model (Modeling) Merupakan tahap ketiga dimana dilakukan perancangan yang akan diimplementasikan dalam pembuatan website serta membuat desain perancangan. Perancangan dan desain yang dibutuhkan dalam website adalah sebagai berikut: - Aliran sistem dengan menggunakan Data Flow Diagram (DFD) - Antar muka (User Interface) yang akan ditampilkan kepada pengguna - Basis data (Database) yang digunakan dalam pembuatan alamat - Perubahan data dengan menggunakan State Transition Diagram (STD) d. Konstruksi (Construction) Merupakan tahap keempat dimana akan dilakukan konstruksi (code) dari desain menjadi website serta pengujian oleh pengembang dan pengguna untuk melakukan pengecekan website. Model yang telah dibuat pada tahap sebelumnya akan diimplementasikan dengan framework CodeIgniter menggunakan bahasa pemrograman PHP. Beberapa implementasi yang akan dilakukan adalah: - Penentuan kelompok jemaat yaitu Gembala dan Domba - Penentuan pasangan antar Gembala dan Domba - Penempatan alamat jemaat ke dalam map dengan Google Maps - Penampilan data jemaat beserta map alamat jemaat - Penelusuran dari satu alamat ke alamat yang lain dengan rute optimal - Penjadwalan pengunjungan dan penjengukan antar jemaat

47 Penentuan pasangan Gembala dan Domba dibuat dengan syarat: - Jenis Kelamin - Perbedaan usia, tidak melampaui lima tahun - Jarak antara dua alamat, tidak melampaui 50 kilometer Penelusuran rute optimal dibuat dengan syarat: - Jarak antara dua alamat, yang terdiri dari: dekat, sedang, jauh - Keadaan jalan pada umumnya, yang terdiri dari: macet, tidak macet Pengujian akan dilakukan untuk membuktikan bahwa website telah memenuhi kebutuhan. e. Penyebaran (Deployment) Merupakan tahap kelima dimana website diperbaiki sesuai kesalahan yang pada tahap pengujian kemudian dikembangkan dan disebarkan kepada pengguna. Setelah website teruji memenuhi kebutuhan, website akan disebarkan kepada pengguna. 3.2 Analisis Masalah 3.2.1 Sejarah Perusahaan PT. Web Architect Technology pertama kali didirikan tahun 2009 oleh 3 orang pendiri dimana salah satunya adalah Bapak Edric Mandagi selaku Direktur PT. Web Architect Technology. Pada tahun 2009, perkembangan teknologi untuk web di Indonesia mulai meningkat dan permintaan terhadap pembuatan website juga meningkat tetapi perusahaan yang menyediakan jasa pembuatan website masih sedikit. Hal ini menjadi motivasi bagi pendiri PT. Web Architect Technology untuk mendirikan sebuah perusahaan yang menyediakan jasa pembuatan web yang berkualitas dan memiliki daya tarik visual yang tinggi. Para pendiri kemudian mengembangkan PT. Web Architect Technology menjadi perusahaan besar seperti yang diketahui saat ini. Terdapat beberapa pembagian tingkat kerja dalam perusahaan antara lain: Chief Commissioner, Commissioner, Director, Project Manager, IT Consultant, System Analyst, Web Admin, Quality Assurance, Creative Director, Front End Programmer, Programmer dan Web Designer.

48 Secara garis besar, projek yang ada ditentukan oleh Director yang kemudian memberikan projek tersebut kepada Project Manager sehingga dapat melakukan pembagian pekerjaan. Project Manager kemudian membagi projek tersebut pada bagian Web Designer, Front End Programmer dan Programmer. Bagian Web Designer bertugas untuk membuat perancangan website secara keseluruhan. Bagian Front End Programmer bertugas membuat program Front End menggunakan HTML 5 atau Software Open Source. Bagian Programmer bertugas untuk membuat program Back End menggunakan framework, ComPro, e-commerce dan aplikasi lainnya. Setiap pembagian pekerjaan yang ada dilakukan Project Manager berdasarkan kemampuan atau spesialisasi setiap tim yang ada. 3.2.2 Struktur Perusahaan berikut: Struktur Perusahaan PT. Web Architect Technology adalah sebagai Gambar 3.2 Struktur Perusahaan PT. Web Architect Technology (Sumber: PT. Web Architect Technology)

Struktur Perusahaan ini didapatkan secara langsung dari Bapak Edric Mandagi setelah wawancara selesai. 49 3.2.3 Kegiatan Perusahaan PT. Web Architect Technology merupakan perusahaan yang bergerak di bidang web yang bertujuan untuk merancang dan membuat website profesional yang berkualitas dan memiliki daya tarik visual. Pembuatan website dilaksanakan oleh divisi Design and Development. Selain membuat website, PT. Web Architect Technology juga dalam tahap pengembangan Digital Advertising yaitu metode marketing dengan menggunakan tampilan digital. Dalam pengembangan Digital Advertising, PT. Web Architect Technology telah mendapat penghargaan dari Google sebagai Qualified Google Advertising Professional. Beberapa Digital Advertising yang telah dibuat oleh PT. Web Architect Technology adalah Search Engine Optimization, Search Engine Marketing dan Social Media Optimization. Sekarang ini PT. Web Architect Technology sedang berusaha untuk membuat produk sendiri dan akan memasarkan produk tersebut setelah selesai dibuat. Selama melakukan wawancara dengan PT. Web Architect Technology, penulis tidak diperlihatkan dokumen dokumen yang menyangkut data bisnis PT. Web Architect Technology. 3.2.4 Sistem yang Sedang Berjalan Ada beberapa sistem yang digunakan dalam PT. Web Architect Technology. Sistem absensi dalam PT. Web Architect Technology telah menggunakan software tersendiri sehingga absensi akan diambil secara langsung dari setiap komputer karyawan yang ada. Selain itu pada bagian internal digunakan Project Management JIRA, bagian marketing menggunakan sistem CRM (Customer Relationship Management), bagian accounting menggunakan software buatan sendiri dalam pembuatan invoice dan bagian lainnya juga menggunakan software software yang sesuai dengan setiap divisi yang ada. Dikarenakan perusahaan memiliki rahasia terhadap bagian internal perusahaan maka penulis tidak banyak diberitahukan mengenai bagian ini.

50 3.2.5 Identifikasi Masalah dan Analisa Kebutuhan PT. Web Architect Technology saat ini sedang melayani salah satu klien yaitu Gereja Sidang Jemaat Kristus untuk membuat sebuah website yang dapat melakukan pendataan (listing) jemaat, absensi jemaat, pengalamatan jemaat, pendataan kegiatan, penginjilan, pelayanan, sosial media antar jemaat, laporan rapat dan berita tentang Gereja Sidang Jemaat Kristus. Dalam pembuatan website ini, PT. Web Architect Technology telah merancang bagian bagian yang dibutuhkan dalam website dengan menggunakan mind map. Sesuai dengan keinginan Gereja Sidang Jemaat Kristus, website yang dibuat merupakan proyek besar yang membutuhkan banyak tenaga kerja. Setelah berdiskusi dengan pihak PT. Web Architect Technology, penulis mengambil bagian geolocation yaitu bagian yang mengatur pengalamatan para jemaat Gereja Sidang Jemaat. Gereja Sidang Jemaat Kristus memiliki dua jenis jemaat yaitu Jemaat sebagai Gembala dan Jemaat sebagai Domba dimana Gembala bertugas untuk menggembalakan Domba dengan melakukan pengunjungan ke rumah Domba. Pengalamatan jemaat dibuat agar sesama jemaat dapat saling mengunjungi jemaat lain. 3.2.6 Usulan Pemecahan Masalah Setelah wawancara dengan pihak PT. Web Architect Technology, ditentukan pembuatan website akan menggunakan framework CodeIgniter dengan bahasa pemrograman PHP dan bantuan HTML serta CSS lalu tambahan dengan Google Maps API.

51 Flowchart yang dibuat adalah sebagai berikut: Gambar 3.3 Flowchart keseluruhan sistem

52 3.3 Perancangan 3.3.1 Rancangan Basis Data (Database) Tabel Master_saint_tm Nama Tabel: Master_saint_tm Deskripsi: Berisi tentang data diri jemaat Primary Key: saint_id Tabel 3.1 Tabel Master_saint_tm Nama Field Tipe Data Panjang Keterangan saint_id Integer - Berisi id jemaat, autonumbering saint_code Char 10 Berisi kode jemaat full_name Varchar 25 Berisi nama lengkap jemaat nick_name Varchar 20 Berisi nama panggilan jemaat gender Integer - Berisi jenis kelamin jemaat born_date Date - Berisi tanggal lahir jemaat address_name Varchar 50 Berisi alamat tempat tinggal jemaat city Varchar 20 Berisi kota tempat tinggal jemaat latitude Varchar 20 Berisi derajat lintang alamat jemaat longitude Varchar 20 Berisi derajat bujur alamat jemaat status_id Integer - Berisi status jemaat physical_id Integer - Berisi id untuk keadaan fisik jemaat match_id Integer - Berisi id untuk pasangan jemaat

53 Tabel ms_saint_physical_tr Nama Tabel: ms_saint_physical_tr Deskripsi: Berisi tentang keadaan fisik jemaat Primary Key: physical_id Tabel 3.2 Tabel ms_saint_physical_tr Nama Field Tipe Data Panjang Keterangan physical_id Integer - Berisi id untuk keadaan fisik jemaat physical_condi tion Varchar 20 Berisi nama keadaan dari id fisik jemaat Tabel ms_trans_character_tr Nama Tabel: ms_trans_character_tr Deskripsi: Berisi tentang transaksi id karakter dan data diri jemaat Primary Key: - Tabel 3.3 Tabel ms_trans_character_tr Nama Field Tipe Data Panjang Keterangan saint_id Integer - Berisi id jemaat, autonumbering detail_id Integer - Berisi id dari detail karakter jemaat Tabel ms_character_tp Nama Tabel: ms_character_tp Deskripsi: Berisi tentang karakter jemaat Primary Key: character_id Tabel 3.4 Tabel ms_ character_tp Nama Field Tipe Data Panjang Keterangan character_id Integer - Berisi id karakter jemaat character_name Varchar 20 Berisi nama dari karakter

54 Tabel ms_character_detail_tp Nama Tabel: ms_character_detail_tp Deskripsi: Berisi tentang detail karakter jemaat Primary Key: detail_id Tabel 3.5 Tabel ms_character_detail_tp Nama Field Tipe Data Panjang Keterangan detail_id Integer - Berisi id dari detail karakter jemaat detail_name Varchar 20 Berisi nama detail id karakter jemaat detail_values Integer - Berisi nilai dari karakter jemaat character_id Integer - Berisi id karakter jemaat Tabel ms_saint_absence_tt Nama Tabel: ms_saint_absence_tt Deskripsi: Berisi tentang absensi jemaat Primary Key: - Tabel 3.6 Tabel ms_saint_absence_tt Nama Field Tipe Data Panjang Keterangan saint_id Integer - Berisi id jemaat, autonumbering date Date - Berisi tanggal kehadiran jemaat status_absence_id Integer - Berisi id dari status absensi jemaat

55 Tabel ms_absence_info_tp Nama Tabel: ms_absence_info_tp Deskripsi: Berisi tentang informasi tentang absensi jemaat Primary Key: status_absence_id Tabel 3.7 Tabel ms_absence_info_tp Nama Field Tipe Data Panjang Keterangan status_absence_id Integer - Berisi id dari status absensi jemaat information Varchar 20 Berisi informasi absensi jemaat Tabel ms_saint_status_tp Nama Tabel: ms_saint_status_tp Deskripsi: Berisi tentang status jemaat Primary Key: status Tabel 3.8 Tabel ms_saint_status_tp Nama Field Tipe Data Panjang Keterangan status_id Integer - Berisi status jemaat status_info Varchar 10 Berisi keterangan status jemaat sub_status_id Integer - Berisi id untuk status tambahan jemaat

56 Tabel ms_schedule_tp Nama Tabel: ms_schedule_tp Deskripsi: Berisi tentang jadwal jemaat Primary Key: saint_id Tabel 3.9 Tabel ms_schedule_tp Nama Field Tipe Data Panjang Keterangan schedule_id Integer - Berisi id jadwal jemaat day Day 10 Berisi nama hari start_time Time 10 Berisi jam mulai end_time Time 10 Berisi jam berakhir information Varchar 10 Berisi keterangan jadwal saint_id Integer - Berisi id jemaat, autonumbering Tabel ms_match_tr Nama Tabel: ms_match_tr Deskripsi: Berisi tentang pasangan jemaat Primary Key: match_id Tabel 3.10 Tabel ms_match_tr Nama Field Tipe Data Panjang Keterangan match_id Integer - Berisi id untuk pasangan jemaat start_time Time 10 Berisi jam mulai end_time Time 10 Berisi jam berakhir saint_id_gembala Integer - Berisi id untuk gembala saint_id_domba Integer - Berisi id untuk domba

57 Tabel ms_sub_status_tp Nama Tabel: ms_sub_status_tp Deskripsi: Berisi tentang status tambahan jemaat Primary Key: sub_status_id Tabel 3.11 Tabel ms_sub_status_tp Nama Field Tipe Data Panjang Keterangan sub_status_id Integer - Berisi id untuk status tambahan jemaat information Varchar 10 Berisi informasi tentang status tambahan jemaat 3.3.2 Entity Relationship Diagram (ERD) Gambar 3.4 ERD

58 3.3.3 Data Flow Diagram (DFD) 3.3.3.1 Diagram Konteks (Context Diagram) Gambar 3.5 Diagram Konteks 3.3.3.2 Diagram Nol (DFD Level 1) Gambar 3.6 Diagram Nol

59 3.3.4 Diagram Hierarki Menu 1. Diagram Hierarki Menu Untuk Admin Gambar 3.7 Diagram Hierarki Menu Admin Pengguna sebagai Admin merupakan pengguna yang memiliki hak untuk menambah, mengubah dan menghapus seluruh data jemaat di gereja. Menu yang dapat diakses oleh Admin ada tiga yaitu Beranda, Jemaat, Maps. Menu Beranda merupakan halaman yang paling pertama muncul setelah Admin melakukan Login. Halaman Beranda berisi tentang ucapan selamat datang dan hal-hal yang berkaitan dengan gereja. Menu Jemaat merupakan halaman yang memuat tentang seluruh data jemaat yang ada. Terdapat dua jenis Data Jemaat yaitu Data Identitas dan Data Rahasia. Data Identitas merupakan data umum jemaat seperti nama, tempat/tanggal lahir, jenis kelamin, usia dan identitas lainnya. Data Rahasia merupakan data rahasia jemaat yaitu karakter atau sifat yang dimiliki oleh

60 jemaat dan keadaan kesehatan jemaat. Admin memiliki hak untuk menambah, mengubah serta menghapus data jemaat. Menu Maps merupakan halaman yang memuat tentang peta penyebaran jemaat yang ada. Jemaat yang terbagi atas dua yaitu Gembala dan Domba memiliki tanda yang berbeda sehingga Admin dapat melihat penyebaran jemaat Gembala saja atau jemaat Domba saja dengan menggunakan filter. 2. Diagram Hierarki Menu Untuk Gembala Gambar 3.8 Diagram Hierarki Menu Gembala Pengguna sebagai Gembala memiliki tiga menu yang dapat diakses yaitu Beranda, Tentang dan Jadwal. Menu Beranda merupakan halaman yang paling pertama muncul setelah Gembala melakukan Login. Halaman Beranda berisi tentang ucapan selamat datang dan hal-hal yang berkaitan dengan gereja. Menu Tentang merupakan halaman yang memuat tentang data diri Gembala yang sedang Login. Data diri terdiri dari Data Identitas dan Data Rahasia. Data Identitas merupakan data umum jemaat seperti nama, tempat/tanggal lahir, jenis kelamin, usia dan identitas lainnya. Data Rahasia merupakan data rahasia jemaat yaitu karakter atau sifat yang dimiliki oleh jemaat dan keadaan kesehatan jemaat. Gembala tidak memiliki hak untuk menambah, mengubah serta menghapus data yang ada. Menu Jadwal merupakan halaman yang memuat tentang jadwal pengunjungan yang dimiliki oleh Gembala yang sedang Login. Gembala akan memiliih Domba yang akan dikunjungi melalui menu ini. Gembala dapat melakukan penambahan, pengubahan dan penghapusan jadwal tersebut.

61 3. Diagram Hierarki Menu Untuk Domba Gambar 3.9 Diagram Hierarki Menu Domba Pengguna sebagai Domba memiliki tiga menu yang dapat diakses yaitu Beranda, Tentang dan Jadwal. Menu Beranda merupakan halaman yang paling pertama muncul setelah Domba melakukan Login. Halaman Beranda berisi tentang ucapan selamat datang dan hal-hal yang berkaitan dengan gereja. Menu Tentang merupakan halaman yang memuat tentang data diri Domba yang sedang Login. Data diri terdiri dari Data Identitas dan Data Rahasia. Data Identitas merupakan data umum jemaat seperti nama, tempat/tanggal lahir, jenis kelamin, usia dan identitas lainnya. Data Rahasia merupakan data rahasia jemaat yaitu karakter atau sifat yang dimiliki oleh jemaat dan keadaan kesehatan jemaat. Domba tidak memiliki hak untuk menambah, mengubah serta menghapus data yang ada. Menu Jadwal merupakan halaman yang memuat tentang jadwal pengunjungan dari Gembala yang telah memilih Domba yang sedang Login. Untuk dapat dipilih oleh Gembala, Domba yang sedang Login harus memasukkan jadwal kosong yang dimilikinya. Domba dapat menambahkan, mengubah, menghapus jadwal kosong yang dia miliki.

62 3.3.5 State Transition Diagram (STD) 1. State Transition Diagram Menu Utama (Admin) Gambar 3.10 STD Menu Utama (Admin) Admin memiliki beberapa menu yaitu Beranda, Jemaat, Maps dan Logout. Setelah melakukan Login, Admin akan langsung masuk ke halaman Beranda. Menu Beranda merupakan halaman yang berisi ucapan selamat datang dan perkenalan tentang website. Menu Jemaat merupakan halaman yang menampilkan seluruh data Jemaat. Menu Maps merupakan halaman yang menampilkan seluruh Jemaat melalui peta Google Maps yang interaktif. Menu Logout merupakan menu untuk keluar dari website.

2. State Transition Diagram Menu Utama Jemaat (Gembala dan Domba) 63 Gambar 3.11 STD Menu Utama Jemaat (Gembala dan Domba) Jemaat (Gembala dan Domba) memiliki beberapa menu yaitu Beranda, Tentang, Jadwal dan Logout. Setelah melakukan Login, Jemaat akan langsung masuk ke halaman Beranda. Menu Beranda merupakan halaman yang berisi ucapan selamat datang dan perkenalan tentang website. Menu Tentang merupakan halaman yang menampilkan data Jemaat yang sedang Login. Menu Jadwal merupakan halaman yang menampilkan jadwal Jemaat yang sedang Login. Menu Logout merupakan menu untuk keluar dari website.

64 3. State Transition Diagram Daftar Jemaat (Admin) Gambar 3.12 STD Daftar Jemaat (Admin) Menu Jemaat pada Admin berisi dua submenu yaitu Identitas dan Rahasia. Submenu Identitas berisi tentang identitas Jemaat yang dipilih seperti foto, saint id, nama, alamat, jenis kelamin, tempat / tanggal lahir, status pembaptisan dan identitas lainnya. Admin dapat menambah, mengubah, menghapus data Jemaat dan menyimpan data baru. Submenu Rahasia berisi tentang identitas rahasia Jemaat yang terbagi atas dua menu yaitu Kesehatan dan Karakter. Menu Kesehatan merupakan data Kesehatan Jemaat contohnya keadaan fisik Jemaat dan penyakit yang dimiliki. Menu Karakter merupakan data Karakter Jemaat baik sifat positif maupun sifat negatif contohnya rajin, jujur, pemarah, penggosip, dan lain sebagainya.

65 4. State Transition Diagram Daftar Kesehatan Jemaat (Admin) Gambar 3.13 STD Daftar Kesehatan Jemaat (Admin) Menu Kesehatan Jemaat pada Admin berisi tentang seluruh data kesehatan Jemaat contohnya keadaan fisik dan penyakit yang dimiliki Jemaat. Admin dapat menambahkan, mengubah, menghapus serta menyimpan data kesehatan Jemaat sesuai dengan kesehatan yang dimiliki oleh Jemaat.

66 5. State Transition Diagram Daftar Karakter Jemaat (Admin) Gambar 3.14 STD Daftar Karakter Jemaat (Admin) Menu Karakter Jemaat pada Admin berisi tentang seluruh data karakter Jemaat yaitu karakter bersifat positif seperti rajin dan karakter bersifat negatif seperti pemarah. Admin dapat menambahkan, mengubah, menghapus serta menyimpan data karakter Jemaat sesuai dengan karakter yang dimiliki oleh Jemaat.

67 6. State Transition Diagram Menu Maps (Admin) Gambar 3.15 STD Menu Maps (Admin) Menu Maps pada Admin merupakan menu yang menampilkan peta alamat seluruh Jemaat melalui peta Google Maps yang interaktif. Admin dapat melakukan filter terhadap peta yang ditampilkan yaitu peta alamat seluruh Jemaat (Gembala dan Domba), peta alamat seluruh Gembala dan peta alamat seluruh Domba.

68 7. State Transition Diagram Data Diri Jemaat (Gembala dan Domba) Gambar 3.16 STD Data Diri Jemaat (Gembala dan Domba) Menu Tentang pada Jemaat (Gembala dan Domba) berisi tentang data diri Jemaat yang sedang Login. Data diri Jemaat terdiri atas dua submenu yaitu submenu Identitas dan Rahasia. Submenu Identitas berisi tentang data identitas jemaat yang sedang Login seperti foto, saint id, nama, alamat, jenis kelamin, tempat / tanggal lahir, status pembaptisan dan identitas lainnya. Submenu Rahasia berisi tentang data identitas rahasia Kesehatan dan Karakter Jemaat yang sedang Login. Berbeda dengan Admin, Jemaat hanya dapat melihat data identitas yang dimilikinya.

69 8. State Transition Diagram Jadwal Jemaat (Gembala) Gambar 3.17 STD Jadwal Jemaat (Gembala) Menu Jemaat untuk Gembala merupakan menu untuk menampilkan seluruh jadwal Gembala yang sedang Login. Gembala dapat menambah, mengubah, menghapus serta menyimpan jadwal yang dimiliki. Gembala dapat melihat peta rute dari alamat rumah Gembala ke alamat rumah Domba yang akan dikunjungi.

70 9. State Transition Diagram Jadwal Jemaat (Domba) Gambar 3.18 STD Jadwal Jemaat (Domba) Menu Jadwal untuk Domba merupakan menu yang menampilkan seluruh jadwal pengunjungan Gembala yang dimiliki Domba yang sedang Login. Dalam Menu Jadwal terdapat submenu Jadwal Kosong yang digunakan untuk menampilkan seluruh jadwal kosong yang dimiliki Domba. Domba dapat menambah, mengubah, menghapus serta menyimpan jadwal kosong yang dimiliki.

71 3.3.6 Rancangan Menu dan Layar 1. Tampilan Login Tampilan ini merupakan tampilan yang pertama ditampilkan setelah website dibuka. Pada tampilan ini, user harus memasukan ID dan Password yang sesuai agar dapat mengakses halaman halaman yang lain. Ada tiga jenis user pada website yaitu Admin, Gembala dan Domba. Gambar 3.19 Rancangan Layar Login 2. Tampilan menu Beranda (Admin) Tampilan ini merupakan tampilan yang hanya dapat diakses oleh Admin. Pada menu ini akan ditampilkan tentang Ayat yang berganti setiap hari dan Berita tentang Gereja. Gambar 3.20 Rancangan Layar Menu Beranda (Admin)

72 3. Tampilan menu Jemaat (Admin) Tampilan ini merupakan tampilan yang hanya dapat diakses oleh Admin dimana Admin dapat melihat, menambah dan menghapus Data Jemaat Gereja. Gambar 3.21 Rancangan Layar Menu Jemaat (Admin) 4. Tampilan Tambah Jemaat (Admin) Tampilan ini merupakan tampilan yang hanya dapat diakses oleh Admin dimana Admin dapat menambah Data Jemaat Gereja sesuai dengan data yang dimiliki. Gambar 3.22 Rancangan Layar Tambah Jemaat (Admin)

73 5. Tampilan Data Jemaat (Admin) Tampilan ini merupakan tampilan yang hanya dapat diakses oleh Admin dimana Admin dapat melihat detail Data Jemaat Gereja satu per satu. Gambar 3.23 Rancangan Layar Data Jemaat (Admin) 6. Tampilan Ubah Data Jemaat (Admin) Tampilan ini merupakan tampilan yang hanya dapat diakses oleh Admin dimana Admin dapat mengubah detail Data Jemaat Gereja. Gambar 3.24 Rancangan Layar Ubah Data Jemaat (Admin)

74 7. Tampilan Data Kesehatan Jemaat (Admin) Tampilan ini merupakan tampilan yang menampilkan seluruh data kesehatan jemaat. Gambar 3.25 Rancangan Layar Data Kesehatan Jemaat (Admin) 8. Tampilan Tambah Data Kesehatan Jemaat (Admin) Tampilan ini merupakan tampilan yang hanya dapat diakses oleh Admin dimana Admin dapat menambah data kesehatan jemaat. Gambar 3.26 Rancangan Layar Tambah Data Kesehatan (Admin)

75 9. Tampilan Ubah Data Kesehatan Jemaat (Admin) Tampilan ini merupakan tampilan yang hanya dapat diakses oleh Admin dimana Admin dapat mengubah data kesehatan jemaat. Gambar 3.27 Rancangan Layar Ubah Data Kesehatan (Admin) 10. Tampilan Data Karakter Jemaat (Admin) Tampilan ini merupakan tampilan yang hanya dapat diakses oleh Admin dimana Admin dapat menampilkan seluruh data karakter jemaat. Gambar 3.28 Rancangan Layar Data Karakter Jemaat (Admin)

76 11. Tampilan Tambah Data Karakter Jemaat (Admin) Tampilan ini merupakan tampilan yang hanya dapat diakses oleh Admin dimana Admin dapat menambahkan data karakter jemaat. Gambar 3.29 Rancangan Layar Tambah Data Karakter (Admin) 12. Tampilan Ubah Data Karakter Jemaat (Admin) Tampilan ini merupakan tampilan yang hanya dapat diakses oleh Admin dimana Admin dapat mengubah data karakter jemaat. Gambar 3.30 Rancangan Layar Ubah Data Karakter (Admin)

77 13. Tampilan menu Maps (Admin) Tampilan ini merupakan tampilan yang menampilkan map alamat seluruh Jemaat Gereja. Map yang ditampilkan dapat dipilih yaitu map alamat seluruh Jemaat, map alamat seluruh Gembala dan map alamat seluruh Domba. Gambar 3.31 Rancangan Layar Menu Maps (Gembala dan Domba) 14. Tampilan menu Beranda (Gembala dan Domba) Tampilan ini merupakan tampilan menu Beranda untuk Gembala dan Domba. Tampilan ini menampilkan tentang Ayat yang berubah setiap hari dan Berita tentang Gereja. Gambar 3.32 Rancangan Layar Menu Beranda (Gembala dan Domba)

78 15. Tampilan menu Tentang (Gembala dan Domba) Tampilan ini merupakan tampilan untuk menampilkan data diri tentang Gembala atau Domba yang sedang Login. Gambar 3.33 Rancangan Layar Menu Tentang (Gembala dan Domba) 16. Tampilan Data Kesehatan (Gembala dan Domba) Tampilan ini merupakan tampilan untuk menampilkan data kesehatan Gembala atau Domba yang sedang Login. Gambar 3.34 Rancangan Layar Data Kesehatan (Gembala dan Domba)

79 17. Tampilan Data Karakter (Gembala dan Domba) Tampilan ini merupakan tampilan untuk menampilkan seluruh data karakter Gembala atau Domba yang sedang Login. Gambar 3.35 Rancangan Layar Data Karakter (Gembala dan Domba) 18. Tampilan menu Jadwal (Gembala) Tampilan ini merupakan tampilan yang hanya dapat diakses oleh Gembala dimana Gembala yang sedang login dapat menampilkan seluruh jadwal yang dimilikinya. Gambar 3.36 Rancangan Layar Menu Jadwal (Gembala)

80 19. Tampilan Tambah Jadwal (Gembala) Tampilan ini merupakan tampilan yang hanya dapat diakses oleh Gembala dimana Gembala yang sedang login dapat menambahkan jadwal dengan memilih Domba yang akan digembalakan. Pemilihan waktu dilakukan berdasarkan dengan waktu jadwal kosong Domba yang dipilih. Gambar 3.37 Rancangan Layar Tambah Jadwal (Gembala) 20. Tampilan Ubah Jadwal (Gembala) Tampilan ini merupakan tampilan yang hanya dapat diakses oleh Gembala dimana Gembala yang sedang login dapat mengubah waktu Jadwal pengembalaan yang dimiliki. Gambar 3.38 Rancangan Layar Ubah Jadwal (Gembala)

81 21. Tampilan menu Jadwal (Domba) Tampilan ini merupakan tampilan yang hanya dapat diakses oleh Domba dimana Domba yang sedang login dapat melihat jadwal yang menampilkan seluruh kegiatan yang dimilikinya. Gambar 3.39 Rancangan Layar Menu Jadwal (Domba) 22. Tampilan menu Jadwal Kosong (Domba) Tampilan ini merupakan tampilan yang hanya dapat diakses oleh Domba dimana Domba yang sedang login dapat menampilkan seluruh jadwal kosong yang dimilikinya. Gambar 3.40 Rancangan Layar Jadwal Kosong (Domba)

82 23. Tampilan Tambah Jadwal Kosong (Domba) Tampilan ini merupakan tampilan yang hanya dapat diakses oleh Domba dimana Domba dapat menambahkan jadwal kosong yang mana akan dipilih sebagai waktu pengembalaan oleh Gembala pada saat Gembala menambahkan Jadwalnya. Gambar 3.41 Rancangan Layar Tambah Jadwal Kosong (Domba) 24. Tampilan Ubah Jadwal Kosong (Domba) Tampilan ini merupakan tampilan yang hanya dapat diakses oleh Domba dimana Domba yang sedang login dapat mengubah jadwal kosong yang dimilikinya. Gambar 3.42 Rancangan Layar Ubah Jadwal Kosong (Domba)