PEMBUATAN FORUM KOMUNIKASI ORGANISASI BERBASIS WEB (STUDI KASUS : FIRE GENERATION).

(1)

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

PEMBUATAN FORUM KOMUNIKASI ORGANISASI BERBASIS

WEB (STUDI KASUS : FIRE GENERATION)

TUGAS AKHIR

Diajukan Untuk Memenuhi Salah Satu Syarat Mencapai Gelar Ahli Madya Program Studi Diploma III Teknik Informatika

Diajukan oleh

ROSI DWI JAYANI

NIM. M3111129

kepada

PROGRAM DIPLOMA III TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SEBELAS MARET

SURAKARTA

(2)

commit to user

(3)

commit to user

(4)

commit to user

iv ABSTRACT

Rosi Dwi Jayani. 2015. Creating a Web-based Communication Forum of an Organization. (Case study: Fire Generation). Diploma III Program of Informatic Engineering, Faculty of Mathematic and Natural Science Sebela s Maret University Surakarta.

Organization is a group of people with a certain purpose. Organization that its member are spread out not only in an area will face difficulties when they want to communicate each other. For example, when the member of the organization in one place are increased, so does in the other place, the difficulties of communication will be increased as well, because the member in one place and another might be not knowing each other. Because of the increasement of members from the new cities, we need a forum tha t is helpful to record the data of new member and provides a facility where the member could communicate each other and also provides information sharing.

This communication forum is developed using Context Diagram (CD), Data Flow Diagram (DFD), Entity Relationship Diagram (ERD), and Table Relation. This communication forum was made using PHP programming language, CSS, HTML, and DBMS MySQL.

It can be concluded, that communication forum which aims to save member data, sharing information, and supporting interaction/communication among members has been successfully established.

(5)

Program Diploma III Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sebelas Maret Surakarta.

Organisasi adalah suatu kelompok orang dalam suatu wadah untuk tujuan bersama. Organisasi yang anggotanya bukan hanya di sebuah daerah akan menemui kesulitan komunikasi antar anggota. Misalnya saja di sebuah daerah anggotanya terus bertambah, daerah yang lain juga bertambah, maka kemungkinan sulitnya komunikasi akan bertambah besar, karena antar anggota satu daerah dengan daerah yang lain tidak saling kenal. Oleh karena jumlah anggota yang bisa terus bertambah dan banyak dari kota-kota baru, sangat dibutuhkan sebuah forum yang berfungsi membantu menyimpan data anggota baru dan menyediakan fasilitias komunikasi dan berbagi informasi.

Perancangan forum komunikasi ini menggunakan Diagram Konteks/Context Diagram (CD), Data Flow Diagram (DFD), Entity Relationship Diagram (ERD), dan Relasi Antar Tabel (RAT). Forum komunikasi ini dibuat menggunakan bahasa pemrograman PHP, CSS, HTML, dan DBMS MySQL.

Dengan ini, forum komunikasi yang bertujuan untuk menyimpan data anggota, berbagi informasi, dan mendukung interaksi/komunikasi antar anggota telah berhasil dibangun.

(6)

commit to user

vi

MOTTO

“If you can't fly then run, if you can't run then wa lk, if you can't walk then cra wl, but whatever you do you have to keep moving forward.”

Martin Luther King Jr.

“Kemenangan yang seindah-indahnya dan sesukar-sukarnya yang boleh direbut oleh manusia ialah menundukan diri sendiri.”

R.A. Kartini

“A pessimist sees the difficulty in every opportunity; an optimist sees the opportunity in every difficulty.”

(7)

commit to user

vii

PERSEMBAHAN

Tugas Akhir ini penulis persembahkan kepada :

1. Keluarga tercinta yang telah memberikan pengorbanan dan selalu mendoakan yang terbaik serta memberikan motivasi.

2. Bapak Endar Suprih W., S.T. M.Eng selaku pembimbing tugas akhir penulis yang telah memberi pengarahan dan motivasi kepada penulis.

3. Bapak/Ibu Dosen D3 Teknik Informatika yang telah memberikan perkuliahan sehinga ilmu yang diberikan dapat digunakan dalam pembuatan Tugas Akhir ini.

4. Keluarga Fire Generation yang membantu memberikan informasi terkait tugas akhir yang dibuat oleh penulis.

5. Teman-teman D3 Teknik Informatika UNS, khususnya kelas Teknik Informatika C 2011 atas dukungan dan semangat untuk menyelesaikan tugas akhir ini.

(8)

commit to user

viii

KATA PENGANTAR

Segala puji dan syukur kepada Tuhan Yang Maha Esa atas segala rahmat-Nya sehingga akhirnya penyusun mampu menyelesaikan Tugas Akhir dan menyusun laporan yang berjudul “Pembuatan Forum Komunikasi Organisasi Berbasis Web (Studi Kasus : Fire Generation)” dengan tepat waktu. Laporan Tugas Akhir ini disusun untuk memenuhi salah satu syarat dalam memperoleh gelar A.Md pada Program Studi Diploma III Teknik Informatika Universitas Sebelas Maret

Dalam melakukan penelitian dan penyusunan laporan Tugas Akhir ini penyusun telah mendapatkan banyak dukungan dan bantuan dari berbagai pihak. Penyusun mengucapkan terima kasih yang tak terhingga kepada:

1. Prof. Ir. Ari Handono Ramelan, M.Sc.(Hons)., Ph.D. selaku Pimpinan Fakultas MIPA Universitas Sebelas Maret yang memberikan izin kepada penyusun untuk belajar.

2. Drs. YS. Palgunadi, M.Sc selaku Ketua Program Studi Diploma III Teknik Informatika Universitas Sebelas Maret yang memberikan izin kepada penyusununtuk belajar.

3. Endar Suprih W., S.T. M.Eng selaku dosen pembimbing yang telah dengan penuh kesabaran dan ketulusan memberikan ilmu dan bimbingan terbaik kepada penyusun.

4. Bapak/Ibu Dosen Program Studi Diploma III Teknik Informatika Universitas Sebelas Maret yang telah memberikan bekal ilmu kepada penyusun.

5. Karyawan/wati Program Studi Diploma III Teknik Informatika Universitas Sebelas Maret yang telah membantu penyusun dalam proses belajar.

6. Segenap Keluarga tercinta yang selalu memberikan dukungan dan semangat serta dukungan moril dan materil.

(9)

commit to user

ix

8. Dan semua pihak yang telah membantu penulis menyelesaikan laporan Tugas Akhir ini yang tidak bisa penulis sebutkan satu persatu.

Penyusun menyadari sepenuhnya bahwa laporan Tugas Akhir ini masih jauh dari sempurna. Untuk itu, semua jenis saran, kritik dan masukan yang bersifat membangun sangat penyusun harapkan. Akhir kata, semoga tulisan ini dapat memberikan manfaat dan memberikan wawasan tambahan bagi para pembaca dan khususnya bagi penyusun sendiri.

Surakarta, 28 Desember 2014

(10)

commit to user

x DAFTAR ISI

HALAMAN JUDUL ... i

HALAMAN PERSETUJUAN ... ii

HALAMAN PENGESAHAN ...iii

HALAMAN ABSTRACT ... iv

HALAMAN MOTO ... vi

HALAMAN PERSEMBAHAN ... vii

KATA PENGANTAR... viii

DAFTAR ISI ... x

DAFTAR TABEL ... xiv

DAFTAR GAMBAR ... xvi

BAB I PENDAHULUAN ... 1

1.6.2 Pembuatan Aplikasi ... 3

1.7 Sistematika Penulisan ... 3

BAB II TINJAUAN PUSTAKA DAN LANDASAN TEORI ... 5

(11)

2.2.4 Entity Relationship Diagram (ERD) ... 9

2.2.5 HyperText Markup Language (HTML) ... 11

2.2.6 Cascading Style Sheet (CSS) ... 12

2.2.7 Hypertext Preprocessor (PHP) ... 12

2.2.8 USB Webserver V8 ... 12

2.2.9 Notepad++ ... 14

2.2.10 Black-Box Testing (Pengujian kotak hitam) ... 14

BAB III ANALISA KEBUTUHAN DAN PERANCANGAN SISTEM... 15

3.1 Gambaran Organisasi ... 15

3.2 Alat dan Bahan ... 16

3.2.1 Alat ... 16

3.2.2 Bahan ... 16

3.3 Jalanya Penelitian ... 17

3.4 Perancangan Sistem Aplikasi ... 18

3.4.1 Proses Bisnis ... 18

3.4.2 Fungsional System ... 18

3.4.3 Non Fungsional System ... 18

3.4.4 Context Diagram ... 19

3.4.5 Data Flow Diagram ... 20

(12)

commit to user

xii

3.4.5.2 Level 1 ... 22

3.4.6 Entity Relationship Diagram (ERD) ... 24

3.4.7 Relasi Antar Tabel (RAT) ... 25

3.4.8 Rancangan Layout ... 25

3.4.9 Rancangan Tabel Database ... 27

3.4.9.1 Tabel Agenda ... 27

3.4.9.2 Tabel Comment ... 27

3.4.9.3 Tabel Comment_laporan ... 28

3.4.9.4 Tabel Comment_status ... 28

3.4.9.5 Tabel Follower ... 28

3.4.9.6 Tabel Impartasi ... 29

3.4.9.7 Tabel Kategori ... 29

3.4.9.8 Tabel Kota ... 30

3.4.9.9 Tabel Laporan ... 30

3.4.9.10 Tabel Status ... 30

3.4.9.11 Tabel User ... 31

BAB IV IMPLEMENTASI DAN ANALISA ... 32

4.1 Implementasi ... 32

4.1.1 Halaman Login ... 33

4.1.2 Halaman Anggota ... 33

4.1.2.1 Halaman Home ... 34

4.1.2.2 Halaman Impartasi ... 38

4.1.2.3 Halaman Anggota ... 40

(13)

4.1.3.1 Halaman Muka Setting ... 48

4.1.3.2 Manajemen Kota ... 54

4.1.3.3 Manajemen Koordinator Kota ... 58

4.1.3.4 Manajemen Kelola Anggota ... 61

4.1.3.5 Manajemen Impartasi ... 65

4.1.3.6 Menu Status ... 69

4.2.2 Kesimpulan Hasil Pengujian ... 88

BAB V PENUTUP... 89

5.1 Kesimpulan ... 89

5.2 Saran ... 89

(14)

commit to user

xiv

DAFTAR TABEL

Tabel 2.1 Komponen dan Keterangan Data Flow Diagram ... 9

Tabel 2.2 Komponen dan Keterangan Entity Relation Diagram ... 10

Tabel 3.1 Jalannya Penelitian ... 17

Tabel 3.2 Tabel Agenda ... 27

Tabel 3.3 Tabel Comment ... 27

Tabel 3.4 Tabel Comment_laporan ... 28

Tabel 3.5 Tabel Comment_status ... 28

Tabel 3.6 Tabel Follower ... 28

Tabel 3.7 Tabel Impartasi... 29

Tabel 3.8 Tabel Kategori ... 29

Tabel 3.9 Tabel Kota... 30

Tabel 3.10 Tabel Laporan ... 30

Tabel 3.11 Tabel Testimoni... 30

Tabel 3.12 Tabel User ... 31

Table 4.1 Pengujian Manajemen Kota ... 78

Table 4.2 Pengujian Manajemen Koordinator Kota ... 79

Table 4.3 Pengujian Manajemen Impartasi ... 79

Table 4.4 Pengujian memperbarui status kota anggota yang pindah kota ... 80

Table 4.5 Pengujian memperbarui level anggota ... 81

Table 4.6 Pengujian menghapus status ... 81

Table 4.7 Pengujian menghapus comment laporan ... 82

(15)

commit to user

xv

Table 4.9 Pengujian manajemen anggota ... 83

Table 4.10 Pengujian manajemen agenda ... 84

Table 4.11 Pengujian manajemen laporan agenda ... 84

Table 4.12 Pengujian menambah status ... 85

Table 4.13 Pengujian menambah comment pada impartasi ... 86

Table 4.14 Pengujian manajemen comment pada status ... 86

Table 4.15 Pengujian menambah comment pada laporan agenda ... 87

Table 4.16 Pengujian menambah follower pada agenda ... 87

(16)

commit to user

xvi

DAFTAR GAMBAR

Gambar 3.1 Context Diagram ... 19

Gambar 3.2 DFD Level 0 ... 21

Gambar 3.3 DFD Level 1 Proses 1.1 (Manajemen Impartasi) ... 22

Gambar 3.4 DFD Level 1 Proses 1.2 (Manajemen Koordinator Kota) ... 22

Gambar 3.5 DFD DFD Level 1 Proses 1.3 (Manajemen Comment) ... 23

Gambar 3.6 DFD Level 2 Proses 2.1 (Manajemen Anggota) ... 23

Gambar 3.7 DFD Level 2 Proses 2.2 (Manajemen Agenda) ... 23

Gambar 3.8 DFD Level 2 Proses 2.3 (Manajemen Laporan Agenda) ... 24

Gambar 3.9 ERD ... 24

Gambar 3.10 Relasi Antar Tabel ... 25

Gambar 3.11 Layout untuk halaman utama ... 26

Gambar 3.12 Layout untuk halaman setting ... 26

Gambar 4.1 Halaman Login ... 33

Gambar 4.2 Menu untuk anggota ... 33

Gambar 4.3 Halaman Home ... 34

Gambar 4.4 Halaman Lanjutan Home ... 34

Gambar 4.5 Menambahkan comment pada status ... 35

Gambar 4.6 Proses penambahan berhasil... 35

Gambar 4.7 Tampilan testimony setelah dicomment ... 35

Gambar 4.8 Salah satu status ... 36

(17)

commit to user

xvii

Gambar 4.10 Judul impartasi dan detailnya ... 37

Gambar 4.11 Comment impartasi ... 37

Gambar 4.12 Link pada bagian kiri ... 37

Gambar 4.13 Link Fire Generation Official ... 38

Gambar 4.14 Link Channel of Blessing for Nations ... 38

Gambar 4.15 Halaman Impartasi ... 39

Gambar 4.16 Halaman Detail Impartasi ... 39

Gambar 4.17 Comment Impartasi... 40

Gambar 4.18 Setelah comment impartasi ditambahkan... 40

Gambar 4.19 Halaman Anggota ... 41

Gambar 4.20 Halaman Detail Profil Anggota ... 41

Gambar 4.21 Halaman Agenda ... 42

Gambar 4.22 Halaman Agenda setelah dijoin ... 42

Gambar 4.23 Halaman Cetak Detail Follower ... 42

Gambar 4.24 Tampilan Dropdown Menu ... 43

Gambar 4.25 Halaman Profil ... 43

Gambar 4.26 Tampilan halaman edit profile... 44

Gambar 4.27 Postingan testimony dari user yang login ... 44

Gambar 4.28 Proses hapus comment testimony berhasil ... 44

Gambar 4.29 Setelah comment dihapus ... 45

Gambar 4.30 Status yang ditulis user login... 45

(18)

commit to user

xviii

Gambar 4.32 Dropdown Menu ... 46

Gambar 4.33 Popup Status ... 46

Gambar 4.34 Proses penambahan testimony berhasil ... 46

Gambar 4.35 Perubahan tampilan di home ... 47

Gambar 4.36 Perubahan tampilan di halaman profil ... 47

Gambar 4.37 Halaman setting untuk Divisi IT ... 47

Gambar 4.38 Halaman Muka Setting bagian Anggota ... 48

Gambar 4.39 Halaman view all anggota ... 48

Gambar 4.40 Cetak Anggota ... 49

Gambar 4.41 Halaman muka setting bagian impartasi (1) ... 49

Gambar 4.42 Halaman muka setting bagian anggota (2) ... 50

Gambar 4.43 Halaman cetak semua impartasi ... 50

Gambar 4.44 Halaman print impartasi ... 51

Gambar 4.45 Halaman muka setting bagian agenda... 51

Gambar 4.46 Halaman cetak semua agenda ... 52

Gambar 4.47 Halaman print semua agenda ... 52

Gambar 4.48 Halaman Muka Setting bagian Laporan Agenda ... 53

Gambar 4.49 Halaman cetak semua laporan agenda ... 53

Gambar 4.50 Halaman siap print semua laporan agenda ... 53

Gambar 4.51 Halaman muka setting bagian status ... 54

Gambar 4.52 Halaman setting kota... 54

(19)

commit to user

xix

Gambar 4.54 Proses penambahan kota berhasil ... 55

Gambar 4.55 Tampilan setelah diinputkan kota baru ... 55

Gambar 4.56 Salah satu kota ... 56

Gambar 4.57 Halaman edit kota ... 56

Gambar 4.58 Proses edit berhasil ... 56

Gambar 4.59 Tampilan setelah salah satu kota diedit ... 56

Gambar 4.60 Salah satu kota yang akan dihapus ... 57

Gambar 4.61 Proses penghapusan berhasil ... 57

Gambar 4.62 Tampilan setelah salah satu kota dihapus ... 57

Gambar 4.63 Menambah koordinator kota ... 58

Gambar 4.64 Proses penambahan kordiantor kota berhasil ... 58

Gambar 4.65 Setelah berhasil ditambahkan ... 58

Gambar 4.66 Tampilan koordinator kota aktif ... 59

Gambar 4.67 Proses penonaktifan berhasil ... 59

Gambar 4.68 Setelah koordinator kota dinonaktifkan ... 60

Gambar 4.69 Tampilan koordinator kota tidak aktif ... 60

Gambar 4.70 Proses pengaktifan berhasil ... 60

Gambar 4.71 Tampilan koordinator kota, namanya tidak muncul ... 61

Gambar 4.72 Tampilan anggota, namanya muncul ... 61

Gambar 4.73 Halaman setting kelola anggota ... 62

Gambar 4.74 Salah satu anggota yang akan dipindah ... 62

(20)

commit to user

xx

Gambar 4.76 Proses pemindahan berhasil ... 62

Gambar 4.77 Halaman anggota setelah dilakukan pemindahan kota ... 63

Gambar 4.78 Halaman kelola anggota ... 63

Gambar 4.79 User yang akan dijadikan koordinator kota... 64

Gambar 4.80 Proses pemindahan berhasil ... 64

Gambar 4.81 Tampilan setelah pengangkatan koordinator kota dari anggota ... 64

Gambar 4.82 Halaman setting impartasi ... 65

Gambar 4.83 Tampilan button input impartasi baru ... 65

Gambar 4.84 Halaman tambah impartasi baru ... 66

Gambar 4.85 Setelah berhasil ditambahkan ... 66

Gambar 4.86 Muncul di halaman impartasi ... 66

Gambar 4.87 Salah satu impartasi yang akan dirubah ... 67

Gambar 4.88 Halaman edit impartasi ... 67

Gambar 4.89 Setelah edit berhasil ... 67

Gambar 4.90 Halaman impartasi juga berubah sesuai editan ... 67

Gambar 4.91 Salah satu impartasi yang akan dihapus ... 68

Gambar 4.92 Data tidak muncul setelah dilakukan penghapusan ... 68

Gambar 4.93 Halaman setting status ... 69

Gambar 4.94 Setelah testimony dihapus data tidak muncul lagi ... 69

Gambar 4.95 Halaman setting comment ... 70

Gambar 4.96 Setelah comment dihapus ... 70

(21)

commit to user

xxi

Gambar 4.98 Halaman tambah anggota baru ... 71

Gambar 4.99 Setelah anggota berhasil diinputkan ... 72

Gambar 4.100 Sebelum dinonaktifkan, setelah dinonaktifkan... 72

Gambar 4.101 Setelah diaktifkan lagi kembali seperti semula ... 72

Gambar 4.102 Halaman setting agenda ... 73

Gambar 4.103 Halaman tambah agenda baru ... 73

Gambar 4.104 Setelah agenda diinputkan, halaman setting dan agenda berubah . 74 Gambar 4.105 Halaman edit agenda ... 74

Gambar 4.106 Setelah dilakukan perubahan ... 74

Gambar 4.107 Agenda yang akan dihapus ... 75

Gambar 4.108 Setelah agenda dihapus ... 75

Gambar 4.109 Halaman setting tambah laporan ... 75

Gambar 4.110 Pengisian data laporan agenda ... 76

Gambar 4.111 Setelah laporan berhasil diinputkan ... 76

Gambar 4.112 Halaman setting laporan agenda ... 76

Gambar 4.113 Halaman edit laporan agenda ... 77