LAPORAN AKHIR

(1)

i

LAPORAN AKHIR

APLIKASI KOMUNIKASI REALTIME DAN MONITORING KONDISI PERANGKAT KOMPUTER DI LABORATORIUM KOMPUTER

BERBASIS WEB DENGAN MENGGUNAKAN WEBSOCKET

Laporan ini disusun untuk memenuhi syarat menyelesaikan Pendidikan Diploma III Jurusan Teknik Komputer

Politeknik Negeri Sriwijaya

Oleh:

Muhammad Iqbal (061730700541)

JURUSAN TEKNIK KOMPUTER POLITEKNIK NEGERI SRIWIJAYA

PALEMBANG

2020

(2)

ii

(3)

iii

(4)

iv

MOTTO

•

(5)

v

ABSTRAK

APLIKASI KOMUNIKASI REALTIME DAN MONITORING KONDISI PERANGKAT KOMPUTER DI LABORATORIUM KOMPUTER

BERBASIS WEB DENGAN MENGGUNAKAN WEBSOCKET

(Muhammad Iqbal, 2020 : 101 halaman)

Pemeriksaan dan pencatatan kondisi aset di laboratorium komputer merupakan salah satu kewajiban yang harus dilakukan mahasiswa jurusan Teknik komputer sebelum memulai kegiatan pembelajaran di dalam lab komputer. Laboratorium Komputer memegang peranan penting dalam mendukung kegiatan pembelajaran yang diselenggarakan pada jurusan Teknik Komputer sehingga perlu dilakukan pemantauan dan pengelolaan kondisi perangkat komputer yang ada didalamnya.

Proses monitoring yang cepat dan tepat tentunya akan menjadi tantangan tersendiri ketika fasilitas laboratorium yang menjadi objek monitoring cukup banyak sementara metode yang digunakan masih secara manual. Hal ini akan semakin menghambat proses tersebut. Dengan memanfaatkan teknologi jaman sekarang, permasalahan ini dapat diatasi dengan mudah. Salah satu teknologi yang biasa digunakan di seluruh dunia adalah website. . Seiring berjalannya waktu, teknologi mengalami perkembangan yang sangat pesat, tak terkecuali teknologi website.

Dengan website, informasi sangat mudah untuk diakses oleh seluruh orang dimanapun dan kapanpun. Selain itu juga, dengan menggunakan website, seseorang dapat dengan mudah saling berkomunikasi satu dengan yang lainnya secara realtime yang terhubung dalam WebSocket. WebSocket (WS) adalah sebuah protokol komunikasi komputer yang memungkinkan untuk berkomunikasi secara 2 arah diatas 1 koneksi TCP. WebSocket membolehan interaksi antara client dengan server secara realtime. Dengan protokol ini dapat mengirim request secara terus menerus tanpa harus membuka koneksi untuk 1 koneksi.

Kata Kunci: Komunikasi, WebSocket, Pemantauan, Web, Realtime.

(6)

vi

ABSTRACT

APPLICATION OF REAL TIME COMMUNICATION AND MONITORING THE CONDITION OF COMPUTER DEVICES IN COMPUTER LAB BASED

ON WEB USING WEBSOCKET

(Muhammad Iqbal, 2020 : 101 Pages )

Checking and recording the condition of assets in a computer laboratory is one of the obligations that students majoring in computer engineering must undertake before starting learning activities in the computer lab. Computer laboratories play an important role in supporting learning activities held in the Computer Engineering department, so it is necessary to monitor and manage the condition of the computer equipment in it. The fast and precise monitoring process will certainly be a challenge in itself when there are quite a lot of laboratory facilities that are the object of monitoring while the methods used are still manual. This will further hamper the process. By utilizing today's technology, this problem can be solved easily. One of the technologies commonly used around the world is the website.

Over time, technology has developed very rapidly, including website technology.

With a website, information is very easy to access by all people anywhere and anytime. In addition, by using the website, one can easily communicate with each other in real time which is connected in a WebSocket. WebSocket (WS) is a computer communication protocol that allows two-way communication over one TCP connection. WebSocket allows interaction between the client and the server in real time. With this protocol you can send requests continuously without having to open a connection for one connection.

Keywords : Communication, WebSocket, Monitoring, Website, Realtime.

(7)

vii

KATA PENGANTAR

Dengan mengucapkan puji dan syukur penulis panjatkan kehadirat Allah SWT atas rahmat dan karunia-Nya penulis bias menyelesaikan laporan akhir dengan judul “Aplikasi Komunikasi Realtime Dan Monitoring Kondisi Perangkat Komputer Di Laboratorium Komputer Berbasis Web Dengan Menggunakan WebSocket”.

Laporan akhir ini disusun dalam rangka melengkapi persyaratan kurikulum untuk menyelesaikan Pendidikan Diploma III Teknik Komputer di Politeknik Negeri Sriwijaya Palembang.

Dalam melaksanakan Laporan Akhir, dari persiapan hingga proses penyusunan, penulis banyak mendapat bantuan dari berbagai pihak, berupa bimbingan, petunjuk, dan informasi. Oleh karena itu pada kesempatan ini penulis ingin menyampaikan terima kasih yang sebesar-besarnya kepada:

1. Allah SWT yang telah memberikan petunjuk dan karunia-Nya sehingga penulis dapat menyelesaikan Laporan Akhir ini tepat waktu.

2. Kedua orang tua dan keluarga besar yang selalu memberikan dukungan, semangat dan doa bagi penulis.

3. Bapak Azwardi, S.T., M.T. sebagai Ketua Kurusan Teknik Komputer Politeknik Negeri Sriwijaya.

4. Bapak Yulian Mirza, S.T., M.Kom. selaku Dosen Pembimbing 1 yang memberi arahan dalam penyusunan Laporan Akhir ini.

5. Bapak M. Miftakhul Amin, S.Kom., M.Eng. selaku Dosen Pembimbing 2 yang telah membimbing dan mengarahkan dalam penyusunan Laporan Akhir ini.

6. Sahabat-sahabat tercinta 7LoL yang selalu memberikan dukungan, semangat dan doa selama ini.

7. Teman-teman Forum Silaturahim Mahasiswa Baturaja (FOSMAB) yang selalu memberikan support, motivasi dan semangat kepada penulis semasa menempuh perkuliahan di Politeknik Negeri Sriwijaya.

(8)

viii

8. Serta teman-teman seperjuangan angkatan 2017 di Jurusan Teknik Komputer Politenik Negeri Sriwijaya khususnya kelas 6 CB yang telah memberikan motivasi dan semangat dalam pembuatan laporan ini.

Penulis menyadari sepenuhnya bahwa masih banyak terdapat kekurangan dalam penyusunan laporan ini. Oleh karena itu, saran dan kritik yang bersifat membangun penulis harapkan. Penulis juga berharap agar laporan ini dapat berguna dan bermanfaat bagi rekan-rekan pembaca serta rekan-rekan kami di lingkungan Politeknik Negeri Sriwijaya.

Palembang, September 2020

Penulis

(9)

ix

DAFTAR ISI

HALAMAN JUDUL ... i

HALAMAN PENGESAHAN PEMBIMBING ... ii

HALAMAN PENGESAHAN PENGUJI ... iii

HALAMAN MOTTO ... iv

ABSTRAK ... v

KATA PENGANTAR ... vii

DAFTAR ISI ... ix

DAFTAR GAMBAR ... xiii

DAFTAR TABEL ... xvi

BAB I PENDAHULUAN ... 1

1.1 Latar Belakang ... 1

1.2 Rumusan Masalah ... 2

1.3 Batasan Masalah ... 2

1.4 Tujuan... 2

1.5 Manfaat... 3

BAB II TINJAUAN PUSTAKA ... 4

2.1 Pengertian Aplikasi ... 4

2.1.1 Pengertian Aplikasi Berbasis Web ... 4

2.1.2 Tujuan Aplikasi Berbasis Web ... 4

2.1.3 Karakteristik Aplikasi Berbasis Web... 4

2.2 Pengertian Komunikasi ... 5

2.2.1 Chat ... 6

2.3 Pengertian Monitoring... 6

2.3.1 Pengertian Monitoring Jaringan ... 6

2.4 Pengertian Jaringan Komputer ... 7

2.5 Pengertian Website ... 7

2.5.1 Pengertian Pemrograman Web ... 7

2.5.2 Hyper Text Markup Language (HTML) ... 7

2.5.3 JavaScript ... 8

(10)

x

2.5.3.1 JQuery ... 8

2.5.4 Hypertext Preprocessor (PHP) ... 8

2.5.5 Structured Query Language (SQL) ... 8

2.5.5.1 MySQL ... 9

2.5.5.2 PhpMyAdmin ... 9

2.6 WebSocket ... 9

2.6.1 Ratchet ... 10

2.7 Framework CodeIgniter ... 11

2.7.1 Pengertian Framework ... 11

2.7.2 CodeIgniter ... 11

2.7.3 Konsep MVC (Model, View, Controller) ... 11

2.8 Composer ... 12

2.9 Perangkat Lunak yang Dibutuhkan ... 12

2.9.1 XAMPP ... 12

2.9.2 Sublime Text Editor ... 12

2.10 Pemodelan Sistem dengan UML ... 13

2.10.1 Use Case Diagram ... 13

2.10.2 Sequence Diagram ... 13

BAB III ANALISIS DAN PERANCANGAN SISTEM ... 15

3.1 Analisis ... 15

3.1.1 Analisis Sistem ... 15

3.1.2 Prosedur Aplikasi yang Akan Dibuat ... 15

3.2 Perancangan Sistem... 16

3.2.1 Use Case Diagram ... 16

3.2.2 Sequence Diagram ... 17

3.3 Rancangan Database ... 24

3.3.1 Tabel User ... 24

3.3.2 Tabel User Role ... 25

3.3.3 Tabel Menu ... 25

3.3.4 Tabel Sub Menu ... 25

(11)

xi

3.3.5 Tabel Akses Menu... 25

3.3.6 Tabel Data Aset ... 26

3.3.7 Tabel Server ... 26

3.3.8 Tabel Monitoring Jaringan ... 26

3.3.9 Tabel Chatrooms ... 27

3.3.10 Tabel dosen ... 27

3.3.11 Relasi Tabel ... 27

3.4 Rancangan Antar Muka Setiap Halaman ... 28

3.4.1 Rancangan Antar Muka Halaman Login ... 28

3.4.2 Rancangan Antar Muka Halaman Registrasi ... 28

3.4.3 Rancangan Antar Muka Halaman Dashboard Admin ... 29

3.4.4 Rancangan Antar Muka Halaman Profile User ... 29

3.4.5 Rancangan Antar Muka Halaman Edit Profile User ... 30

3.4.6 Rancangan Antar Muka Halaman Ubah Password ... 30

3.4.7 Rancangan Antar Muka Halaman User Role ... 31

3.4.8 Rancangan Antar Muka Halaman Menu Management ... 31

3.4.9 Rancangan Antar Muka Halaman Submenu Management ... 32

3.4.10 Rancangan Antar Muka Halaman Monitoring Jaringan ... 32

3.4.11 Rancangan Antar Muka Halaman Monitoring Asset ... 33

3.4.12 Rancangan Antar Muka Halaman Input Data Kondisi Aset Lab ... 33

3.4.13 Rancangan Antar Muka Halaman Chat Room ... 34

BAB IV HASIL DAN PEMBAHASAN ... 35

4.1 Hasil ... 35

4.1.1 Hasil Pembuatan Database ... 35

4.1.1.1 Struktur Tabel Asset ... 35

4.1.1.2 Struktur Tabel Chatrooms ... 35

4.1.1.3 Struktur Tabel Netmonitor ... 35

4.1.1.4 Struktur Tabel User ... 36

4.1.1.5 Struktur Tabel User Access Menu ... 36

(12)

xii

4.1.1.6 Struktur Tabel User Menu ... 36

4.1.1.7 Struktur Tabel User Role ... 36

4.1.1.8 Struktur Tabel User Submenu ... 36

4.1.1.9 Struktur Tabel Server ... 36

4.1.1.10 Struktur Tabel Dosen ... 37

4.1.2 Hasil Tampilan Antarmuka Aplikasi ... 37

4.1.2.1 Tampilan Halaman Login ... 37

4.1.2.2 Tampilan Halaman Registrasi ... 39

4.1.2.3 Tampilan Halaman Utama ... 43

4.1.2.4 Tampilan Halaman Profile User ... 45

4.1.2.5 Tampilan Halaman Edit Profile User ... 46

4.1.2.6 Tampilan Halaman Change Password ... 49

4.1.2.7 Tampilan Halaman User Role ... 51

4.1.2.8 Tampilan Halaman Menu Management ... 59

4.1.2.9 Tampilan Halaman Submenu Management ... 64

4.1.2.10 Tampilan Halaman Monitoring Jaringan ... 71

4.1.2.11 Tampilan Halaman Monitoring Aset ... 80

4.1.2.12 Tampilan Halaman Input Data Kondisi Aset Lab ... 86

4.1.2.13 Tampilan Halaman Chat Room ... 89

4.2 Pembahasan ... 95

4.2.1 Pengujian Aplikasi ... 96

4.2.2 Rekap Hasil Pengujian Aplikasi ... 96

BAB V KESIMPULAN DAN SARAN ... 100

5.1 Kesimpulan... 100

5.2 Saran ... 101 DAFTAR PUSTAKA

LAMPIRAN

(13)

xiii

DAFTAR GAMBAR

Gambar 2.1 PhpMyAdmin ... 9

Gambar 2.2 Cara Kerja WebSocket ... 10

Gambar 2.3 Cara Kerja Ratchet ... 10

Gambar 2.4 Logo XAMPP ... 12

Gambar 2.4 Logo Sublime Text Editor ... 12

Gambar 3.1 Use Case Diagram Aplikasi Komunikasi Realtime dan Monitoring Kondisi Perangkat Komputer ... 17

Gambar 3.2 Sequence Diagram Login Admin ... 18

Gambar 3.3 Sequence Diagram Edit Profile Admin ... 18

Gambar 3.4 Sequence Diagram Edit Profile Mahasiswa ... 19

Gambar 3.5 Sequence Diagram Tambah Menu ... 19

Gambar 3.6 Sequence Diagram Tambah Submenu ... 20

Gambar 3.7 Sequence Diagram Setting Hak Akses User ... 20

Gambar 3.8 Sequence Diagram Ubah Kata Sandi ... 21

Gambar 3.9 Sequence Diagram Login Mahasiswa ... 21

Gambar 3.10 Sequence Diagram Lihat Daftar User ... 22

Gambar 3.11 Sequence Diagram Monitoring Aset ... 22

Gambar 3.12 Sequence Diagram Monitoring Jaringan ... 23

Gambar 3.13 Sequence Diagram Input Data Kondisi Perangkat Komputer .. 23

Gambar 3.14 Sequence Diagram Chat Room ... 24

Gambar 3.15 Relasi Tabel ... 27

Gambar 3.16 Rancangan Tampilan Halaman Login ... 28

Gambar 3.17 Rancangan Tampilan Halaman Registrasi... 28

Gambar 3.18 Rancangan Tampilan Halaman Dashboard Admin ... 29

Gambar 3.19 Rancangan Tampilan Halaman Profile User ... 29

Gambar 3.20 Rancangan Tampilan Halaman Edit Profile User ... 30

Gambar 3.21 Rancangan Tampilan Halaman Ubah Password... 30

Gambar 3.22 Rancangan Tampilan Halaman User Role ... 31

Gambar 3.23 Rancangan Tampilan Halaman Menu Management ... 31

(14)

xiv

Gambar 3.24 Rancangan Tampilan Halaman Submenu Management ... 32

Gambar 3.25 Rancangan Tampilan Halaman Monitoring Jaringan ... 32

Gambar 3.26 Rancangan Tampilan Halaman Monitoring Aset ... 33

Gambar 3.27 Rancangan Tampilan Halaman Input Data Kondisi Aset Lab . 33 Gambar 3.28 Rancangan Tampilan Halaman Chat ... 34

Gambar 4.1 Struktur Tabel asset ... 35

Gambar 4.2 Struktur Tabel chatrooms ... 35

Gambar 4.3 Struktur Tabel netmonitor ... 35

Gambar 4.4 Struktur Tabel user ... 36

Gambar 4.5 Struktur Tabel user_access_menu ... 36

Gambar 4.6 Struktur Tabel user_menu ... 36

Gambar 4.7 Struktur Tabel user_role... 36

Gambar 4.8 Struktur Tabel user_sub_menu ... 36

Gambar 4.9 Struktur Tabel server ... 36

Gambar 4.10 Struktur Tabel dosen... 37

Gambar 4.11 Tampilan Halaman Login ... 37

Gambar 4.12 Tampilan Halaman Registrasi ... 39

Gambar 4.13 Tampilan Pesan Sukses Registrasi ... 42

Gambar 4.14 Tampilan Pesan Kesalahan Saat Registrasi ... 42

Gambar 4.15 Tampilan Halaman Dashboard ... 43

Gambar 4.16 Menambahkan dosen ... 43

Gambar 4.17 Tampilan Halaman My Profile ... 46

Gambar 4.18 Tampilan Halaman Edit Profile... 46

Gambar 4.19 Tampilan Halaman Change Password ... 49

Gambar 4.20 Tampilan Halaman Role ... 51

Gambar 4.21 Menambahkan Role Baru ... 53

Gambar 4.22 Memberi Akses Menu Ke Role Yang Dipilih ... 55

Gambar 4.23 Form Edit Role ... 57

Gambar 4.24 Tampilan Halaman Menu Management ... 59

Gambar 4.25 Tampilan Saat Klik Tombol Add New Menu ... 61

Gambar 4.26 Form Edit Menu ... 62

(15)

xv

Gambar 4.27 Tampila Halaman Submenu Management ... 64

Gambar 4.28 Form Add New Submenu ... 66

Gambar 4.29 Form Edit Submenu ... 69

Gambar 4.30 Proses Loading Saat Masuk Halaman Monitoring Jaringan .... 71

Gambar 4.31 Tampilan Pesan Jika Tidak Ada Data Untuk Ditampilkan ... 72

Gambar 4.32 Tampilan Halaman Jika Ada Data Yang Telah Diinputkan ... 72

Gambar 4.33 Tampilan Saat Klik Tombol Add New Client ... 75

Gambar 4.34 Pesan Berhasil Saat Menambahkan Client Baru ... 77

Gambar 4.35 Pesan Error Saat Menambahkan Client Baru ... 78

Gambar 4.36 Tampilan Halaman Edit Net Client ... 78

Gambar 4.37 Tampilan Halaman Monitoring Aset ... 80

Gambar 4.38 Tampilan Halaman Edit Data Aset ... 83

Gambar 4.39 Pesan Berhasil Edit Data Aset ... 85

Gambar 4.40 Pesan Error Saat Melakukan Perbaikan Data Aset ... 85

Gambar 4.41 Tampilan Report Data Aset Pertanggal ... 85

Gambar 4.42 Tampilan Report Data Aset Perbulan ... 85

Gambar 4.43 Tampilan Report Data Aset Pertahun ... 85

Gambar 4.44 Tampilan Form Input Data Aset ... 87

Gambar 4.45 Pesan Berhasil Input Data Aset ... 87

Gambar 4.46 Pesan Error Saat Input Data Aset ... 87

Gambar 4.47 Tampilan Halaman Chat Room Sebelum Menekan Tombol Join ... 89

Gambar 4.48 Letak File Server WebSocket ... 90

Gambar 4.49 Pesan Ketika Server WebSocket Berhasil Dijalankan ... 90

Gambar 4.50 Pesan Koneksi Baru Terhubung Ke Server WebSocket ... 92

Gambar 4.51 Tampilan Chat Room Setelah Menekan Tombol Join ... 93

Gambar 4.52 Pesan Dikirim dan Diterima Secara Realtime ... 94

(16)

xvi

DAFTAR TABEL

Tabel 2.1 Notasi Use Case Diagram ... 13

Tabel 2.2 Notasi Sequence Diagram ... 14

Tabel 3.1 Struktur tabel user ... 24

Tabel 3.2 Struktur tabel user_role ... 25

Tabel 3.3 Struktur tabel user_menu ... 25

Tabel 3.4 Struktur tabel user_sub_menu ... 25

Tabel 3.5 Struktur tabel user_access_menu ... 25

Tabel 3.6 Struktur tabel asset ... 26

Tabel 3.7 Struktur tabel server ... 26

Tabel 3.8 Struktur tabel netmonitor ... 26

Tabel 3.9 Struktur tabel chatrooms ... 27

Tabel 3.10 Struktur tabel dosen ... 27

Tabel 4.1 Rekap Hasil Pengujian Aplikasi ... 96