APLIKASI PENGARSIPAN LAPORAN AKHIR DAN LAPORAN KERJA PRAKTEK (KP) BERBASIS

(1)

i

APLIKASI PENGARSIPAN LAPORAN AKHIR DAN LAPORAN KERJA PRAKTEK (KP) BERBASIS WEBSITE PADA PROGRAM STUDI D3 DAN

D4 TEKNIK TELEKOMUNIKASI POLITEKNIK NEGERI SRIWIJAYA

LAPORAN AKHIR

Disusun Untuk Memenuhi Syarat Menyelesaikan Pendidikan Diploma III Pada Jurusan Teknik Elektro Program Studi Teknik Telekomunikasi

Politeknik Negeri Sriwijaya

Oleh :

Riska Agustina Amalia 061830330308

JURUSAN TEKNIK ELEKTRO

PROGRAM STUDI DIII TEKNIK TELEKOMUNIKASI POLITEKNIK NEGERI SRIWIJAYA

PALEMBANG 2021

(2)

ii

(3)

iii

(4)

iv

MOTTO DAN PERSEMBAHAN

MOTTO :

“If I Can Then You Can, Just Remember In Believe There Is Power.”

(risk)

Don’t marry rich, be rich.

(PrillyL)

“When I have time off, all I want to do is do Nothing”

(Niall’s)

Atas Rahmat Allah SWT.

Laporan Ini Saya Persembakan Kepada:

 Kedua orang tua saya serta kakak dan adik saya tercinta.

 Bapak Ir. Abdul Rakhman dan Bapak Nasron, S.T., M.T selaku dosen pembimbing yang telah membimbing, dan membantu saya selama Ini.



Dosen-dosen kami yang telah membimbing, mengajari, mendidik dan membantu kami selama ini.



Sahabat saya saat kuliah, Della, Nadiyah, Nisa.



Sahabat sekaligus Keluarga saya UKM Olahraga 2018-2020.

 Teman Kelasku Telkom Bar-bar (6 TB).

 Almamater Politeknik Negeri Sriwijaya.

(5)

v ABSTRAK

APLIKASI PENGARSIPAN LAPORAN AKHIR DAN LAPORAN KERJA PRAKTEK (KP) BERBASIS WEBSITE PADA PROGRAM STUDI D3 DAN D4 TEKNIK TELEKOMUNIKASI POLITEKNIK NEGERI SRIWIJAYA (2021 : xviii 67 HALAMAN + 67 GAMBAR + 3 TABEL + LAMPIRAN)

RISKA AGUSTINA AMALIA 061830330308

JURUSAN TEKNIK ELEKTRO

PROGRAM STUDI TEKNIK TELEKOMUNIKASI POLITEKNIK NEGERI SRIWIJAYA

Website berkembang seiring dengan semakin banyaknya pengguna jaringan internet. Berbagai macam website dikembangkan untuk mempermudah aktifitas manusia. Salah satunya website arsip pada program studi teknik telekomunikasi politeknik negeri sriwijaya. Aplikasi website ini dibangun menggunakan aplikasi sublime text dan XAMPP. Hasil dari penelitian ini berupa aplikasi berbasis website yang berttujuan menyediakan tempat penyimpanan laporan akhir dan laporan kerja praktek secara daring serta membantu mahasiswa dalam mencari referensi judul laporan akhir dan laporan kerja praktik supaya tidak terdapat judul yang sama. Website ini dibangun dengan dilengkapi sistem keamanan yang cukup baik untuk melindungi website dari serangan seperti Remote Code Executio, SQL Injection, XSS Attack, serta Username Enumeration. Dan telah dilakukan pengujian fungsional dengan metode black box.

Kata Kunci : Arsip, Aplikasi, Website, Sublime text,XAMPP.

(6)

vi ABSTRACT

FINAL AND PRACTICAL WORK REPORT ARCHIVING APPLICATION WITH WEBSITE BASED FOR D3 AND D4 TELECOMMUNICATION ENGINEERING STUDY PROGRAM SRIWIJAYA STATE POLYTECHNIC (2021 : xviii 67 PAGES + 67 PICTURES + 3 TABLE + ATTACHMENT)

RISKA AGUSTINA AMALIA 061830330308

ELECTRICAL ENGINEERING MAJOR

TELECOMMUNICATION ENGINEERING STUDY PROGRAM STATE POLYTECHNIC OF SRIWIJAYA

Websites develop along with the increasing number of internet network users.

Various kinds of websites were developed to facilitate human activities. One of them is the archive website at the telecommunication engineering study program at the Sriwijaya State Polytechnic. Thisapplication website is built using sublime text and XAMPP applications. The results of this study are in the form of a website-based application that aims to provide a place to store final reports and practical work reports online and assist students in finding references for final report titles and practical work reports so that there are no similar titles. website Thisis built with a fairly good security system to protect the website from attacks such as Remote Code Execution, SQL Injection, XSS Attack, and Username Enumeration. And functional testing has been carried out using themethod black box.

Keywords: Archives, Aplication, Website, Sublime text, XAMPP.

(7)

vii

KATA PENGANTAR

Alhamdulillah puji dan syukur kehadirat Allah SWT, karena berkat rahmat dan hidayah-Nya penulis dapat menyelesaikan Laporan Akhir yang berjudul

“Aplikasi Pengarsipan Laporan Akhir Dan Laporan Kerja Praktek (KP) Berbasis Website Pada Program Studi D3 Dan D4 Teknik Telekomunikasi Politeknik Negeri Sriwijaya” ini dengan tepat waktu. Tujuan dari penyusunan Laporan Akhir ini adalah sebagai salah satu syarat untuk untuk menyelesaikan Pendidikan Diploma III Jurusan Teknik Telekomunikasi Politeknik Negeri Sriwijaya.

Selama menyelesaikan Laporan Akhir ini penulis banyak sekali mendapat bantuan, bimbingan dan petunjuk dari berbagai pihak, maka dalam kesempatan ini penulis ingin mengucapkan terima kasih kepada :

1. Allah SWT Yang Maha Pengasih lagi Maha Penyayang.

2. Nabi Muhammad SAW yang telah membawa kita dari zaman kegelapan ke zaman terang benderang seperti sekarang ini.

3. Kedua orang tua serta kakak dan adik penulis yang selalu memberikan dukungan dan do’a terbaik.

4. Bapak Dr. Ing. Ahmad Taqwa, M.T. selaku Direktur Politeknik Negeri Sriwijaya.

5. Bapak Ir. Iskandar Lutfi, M.T selaku Ketua Jurusan Teknik Elektro Politeknik Negeri Sriwijaya.

6. Bapak Destra Andika Pratama, S.T., M.T selaku Sekretaris Jurusan Teknik Elektro Politeknik Negeri Sriwijaya

7. Bapak Ciksadan, S.T.,M.Kom selaku Ketua Program Studi Teknik Telekomunikasi Politeknik Negeri Sriwijaya.

8. Bapak Ir. Abdul Rakhman, M.T selaku Dosen Pembimbing I 9. Bapak Nasron, S.T., M.T selaku Dosen Pembimbing II

(8)

viii

10. Bapak dan Ibu dosen pengajar di Program Studi DIII Teknik Telekomunikasi yang telah memberikan ilmu yang bermanfaat.

11. Seluruh staff laboratorium dan bengkel Teknik Telekomunikasi.

12. Terima kasih juga untuk diri sendiri yang telah kuat dan sabar dalam menyelesaikan laporan akhir ini.

13. Teman-teman seperjuangan Program Studi Teknik Telekomunikasi khususnya kelas 6TB.

14. Sahabat saya semasa kuliah, “Bismillah Orang Kaya” Della, Nadiyah, Nisa.

15. Keluarga sekaligus sahabat saya di UKM Olahraga.

16. Support system saya ketika merasa malas, ex. One Direction, Zayn, Harry, Liam, Louis, and especially my beloved Niall Horan, their songs always fill my day.

17. Semua pihak yang telah membantu dalam menyelesaikan Laporan Akhir ini.

Penulis menyadari bahwa dalam penulisan Laporan Akhir ini masih terdapat kesalahan dan kekurangan, untuk itu penulis mengharapkan kritik dan saran yang bersifat membangun dari semua pihak demi kesempurnaan penulisan yang akan datang. Akhir kata penulis berharap semoga Laporan Akhir ini bermanfaat bagi semua pihak yang membutuhkannya, khususnya mahasiswa- mahasiswi Program Studi Teknik Telekomunikasi Politeknik Negeri Sriwijaya sehingga tujuan yang diharapkan dapat tercapai, Aamiin.

Palembang, Juli 2021

Riska Agustina Amalia

(9)

ix DAFTAR ISI

Halaman

HALAMAN JUDUL ... i

LEMBAR PENGESAHAN LAPORAN AKHIR ... ii

LEMBAR PERNYATAAN KEASLIAN ... iii

MOTTO DAN PERSEMBAHAN ... iv

ABSTRAK ... v

ABSTRACT ... vi

KATA PENGANTAR ... vii

DAFTAR ISI ... ix

DAFTAR GAMBAR ... xiv

DAFTAR TABEL ... xvii

DAFTAR LAMPIRAN ... xviii

BAB I PENDAHULUAN ... 1

1.1 Latar Belakang ... 1

1.2 Perumusan Masalah ... 3

1.3 Batasan Masalah ... 3

1.4 Tujuan ... 3

1.5 Manfaat ... 4

1.6 Metodologi Penulisan ... 4

1.6.1 Metode Studi Pustaka ... . 4

1.6.2 Metode Observasi ... 4

1.6.3 Metode Konsultasi ... 4

1.6.4 Metode Diskusi ... 5

1.7 Sistematika Penulisan ... 5

BAB II TINJAUAN PUSTAKA ... 6

2.1 Teori Umum ... 6

(10)

x

2.1.1 Pengertian Perangkat Komputer ... 6

2.1.2 Pengertian Perangkat Keras (Hardware) ... 6

2.1.3 Pengertian Perangkat Lunak (Software) ... 6

2.1.4 Pengertian Aplikasi ... 7

2.1.5 Pengertian Website ... 7

2.1.6 Keamanan Website ... 8

2.1.7 Pengertian Arsip ... 8

2.1.8 Pengertian Localhost ... 9

2.1.9 Pengertian Internet ... 9

2.1.10 Web Hosting ... 10

2.2 Teori Khusus ... 10

2.2.1 Pengertian XAMPP ... 10

2.2.2 Pengertian Sublime Text ... 11

2.2.3 Pengertian Framework CodeIgniter ... 11

2.2.4 Folder Framework Codeigniter Beserta Fungsi ... 13

2.2.4.1 Folder Config ... 13

2.2.4.2 Folder Controller ... 14

2.2.4.3 Folder Model ... 14

2.2.4.4 Folder View ... 14

2.2.5 Kelebihan Framework Codeigniter ... 14

2.2.6 Kekurangan Framework Codeigniter ... 15

2.2.7 Keamanan Pada Framework Codeigniter ... 15

2.2.7.1 Remote code execution ... 15

2.2.7.2 SQL Injection ... 16

2.2.7.3 XSS Attack ... 16

2.2.7.4 Username Enumeration ... 16

2.2.8 Hyper Text Markup Language (HTML) ... 16

2.2.9 Pengertian Bootstarp ... 17

2.2.10 Command Promt ... 17

2.2.11 Pengertian Cascading Syle Sheet (CSS) ... 18

2.2.11.1 Penulisan dengan Inline CSS ... 18

(11)

xi

2.2.11.2 Penulisan dengan Embedded CSS ... 18

2.2.12 Pengertian PHP ... 19

2.2.12.1 Penulisan Program PHP ... 19

2.2.13 Pengertian PHPMyAdmin ... 20

2.2.14 Basisdata atau Database ... 20

2.2.15 Pengertian MySQL ... 20

2.2.15.1 Fungsi-fungsi MySQL ... 21

BAB III PERANCANGAN APLIKASI ... 24

3.1 Tahap Perancangan Sistem ... 24

3.2 Tujuan Perancangan ... 24

3.3 Bahan Perancangan ... 24

3.4 Blok Diagram ... 25

3.4.1 Penjelasan Diagram Alir ... 25

3.5 Use Case Diagram ... 26

3.6 Activity Diagram ... 27

3.7 Class Diagram ... 31

3.8 Perangkat - Perangkat Yang Digunakan ... 31

3.8.1 Perangkat Keras (Hardware) ... 31

3.8.2 Perangkat Lunak (Software) ... 32

3.9 Tahap Instalasi Framework Codeigniter 3 ... 32

3.10 Tahap Mengaktifkan Keamanan Website Pada CodeIgniter 3 ... 35

3.10.1 Mengatasi Remote Code Execution ... 35

3.10.2 Mengatasi SQL Injection ... 35

3.10.3 Mengatasi XSS Attack ... 35

3.10.4 Mengatasi Username Enumeration... 35

3.11 Tahap Pembuatan Database ... 36

3.12 Tahap Pembuatan Website ... 39

3.13 Desain Tampilan Sistem Website ... 44

3.13.1 Desain Halaman Awal Admin ... 44

3.13.2 Desain Halaman Awal Mahasiswa ... 45

(12)

xii

3.13.3 Desain Halaman Utama Admin Beserta Menu ... 46

3.13.4 Desain Halaman Utama Mahasiswa Beserta Menu ... 46

3.13.5 Desain Halaman Akses Pengguna Website Mahasiswa ... 47

3.13.6 Desain Halaman Akses Pengguna Website Admin ... 47

3.13.7 Desain Halaman Mahasiswa Input Judul Laporan ... 47

3.13.8 Desain Upload Soft file Laporan Mahasiswa ... 48

3.13.9 Tampilan Cetak Surat Keterangan Bebas Administrasi ... 48

BAB IV PEMBAHASAN ... 49

4.1 Implementasi Sistem Aplikasi ... 49

4.2 Analisa Aplikasi ... 49

4.3 Analisa Keamanan Website Terhadap Remote Code Execution ... 50

4.4 Analisa Keamanan Website Terhadap SQL Injection ... 50

4.5 Analisa Keamanan Website Terhadap Serangan XSS... 50

4.6 Analisa Keamanan Website Terhadap Serangan Username Enumeration ... 51

4.7 Pengujian Dengan Metode Black Box ... 51

4.8 Langkah Kerja Sistem Aplikasi ... 56

4.8.1 Halaman Login Admin ... 56

4.8.2 Halaman Dashboard Admin ... 57

4.8.3 Halaman Admin Tambah Data Akses Mahasiswa ... 57

4.8.4 Halaman Admin Tambah Data Akses Pengguna Akun Admin ... 58

4.8.5 Menu Data Upload Pada Website Admin ... 58

4.8.5.1 Menu Data Laporan Magang ... 59

4.8.5.2 Menu Data Laporan Akhir ... 59

4.8.6 Menu Keluar/Logout Admin ... 60

4.8.7 Halaman Login Mahasiswa ... 60

4.8.8 Halaman Dashboard Mahasiswa ... 60

4.8.9 Menu Edit Profil Mahasiswa ... 61

4.8.10 Menu Upload BAB I Laporan Magang ... 62

(13)

xiii

4.8.11 Menu Upload BAB I Laporan Akhir ... 63

4.8.12 Menu Upload Laporan Magang ... 63

4.8.13 Menu Upload Laporan Akhir ... 64

4.8.14 Menu Upload SOP ... 64

4.8.15 Menu Cetak Surat Keterangan ... 65

4.8.16 Menu Keluar/Logout Mahasiswa ... 66

BAB V KESIMPULAN DAN SARAN ... 67

5.1 Kesimpulan ... 67

5.2 Saran ... 67

DAFTAR PUSTAKA ... 68 LAMPIRAN

(14)

xiv

DAFTAR GAMBAR

Halaman

Gambar 2.1 Logo Aplikasi XAMPP ... 10

Gambar 2.2 Logo Aplikasi Sublime Text ... 11

Gambar 2.3 Logo Aplikasi Framework CodeIgniter ... 12

Gambar 2.4 Alur Kerja Framework CodeIgniter ... 13

Gambar 3.1 Diagram Alir Pembuatan Aplikasi ... 25

Gambar 3.2 Use Case Diagram Admin, Pembimbing, dan Mahasiswa .. 26

Gambar 3.3 Activity Diagram Admin Login ... 27

Gambar 3.4 Activity Diagram Admin Input Data Mahasiswa ... 28

Gambar 3.5 Activity Diagram Mahasiswa Login ... 28

Gambar 3.6 Activity Diagram Mahasiswa Input Laporan Magang ... 29

Gambar 3.7 Activity Diagram Mahasiswa Input Laporan Akhir ... 29

Gambar 3.8 Activity Diagram Admin Logout ... 30

Gambar 3.9 Activity Diagram Mahasiswa Logout ... 30

Gambar 3.10 DatabaseClass Diagram ... 31

Gambar 3.11 Tampilan Code Configurasi Codeigniter ... 32

Gambar 3.12 Code Menampilkan Halaman Pada Folder View ... 34

Gambar 3.13 Tampilan Code Memanggil View... 34

Gambar 3.14 Tampilan Code Untuk Remote Code Execution... 35

Gambar 3.15 Tampilan Code Pengaman XSS ... 35

Gambar 3.16 Mengaktifkan Apache Dan MySQL ... 36

Gambar 3.17 Tampilan Database Phpmyadmin ... 36

Gambar 3.18 Tampilan Pada Menu Database ... 37

Gambar 3.19 Tampilan Menu Privileges ... 37

Gambar 3.20 Tampilan Add User Account ... 38

Gambar 3.21 Tampilan Global Privileges ... 38

Gambar 3.22 Tampilan Database app_riska... 39

Gambar 3.23 Tampilan Control Panel XAMPP ... 39

(15)

xv

Gambar 3.24 Tampilan Struktur Database pada PHPMyAdmin ... 40

Gambar 3.25 Tampilan Hasil extract CodeIgniter-3.1.11 ... 40

Gambar 3.26 Tampilan Project pada htdocs ... 41

Gambar 3.27 Tampilan hasil extract Bootstrap-5.0.1-dist ... 41

Gambar 3.28 Tampilan isi folder app_riska... 41

Gambar 3.29 Tampilan Open Folder Arsip Pada Sublime Text ... 42

Gambar 3.30 Tampilan select folder app_riska ... 42

Gambar 3.31 Tampilan Struktur Project pada Sublime text ... 43

Gambar 3.32 Tampilan Codingan Aplikasi pada Sublime text ... 43

Gambar 3.33 Tampilan Halaman Website Login Mahasiswa ... 44

Gambar 3.34 Tampilan Halaman Website Login Admin ... 44

Gambar 3.35 Tampilan Awal Website Admin ... 45

Gambar 3.36 Tampilan Awal Website Mahasiswa ... 45

Gambar 3.37 Tampilan Utama Admin ... 46

Gambar 3.38 Tampilan Utama Mahasiswa ... 46

Gambar 3.39 Desain Halaman Akses Pengguna Website Mahasiswa ... 47

Gambar 3.40 Desain Halaman Akses Pengguna Website Admin ... 47

Gambar 3.41 Tampilan Input Judul Mahasiswa ... 48

Gambar 3.42 Tampilan Upload Laporan Mahasiswa ... 48

Gambar 3.43 Tampilan Cetak Surat Keterangan Bebas Admin ... 48

Gambar 4.1 Tampilan Serangan XSS ... 50

Gambar 4.2 Halaman Login Admin ... 57

Gambar 4.3 Halaman Dashboad Admin ... 57

Gambar 4.4 Halaman Tambah Data Akses Mahasiswa ... 58

Gambar 4.5 Halaman Tambah Data Akses Akun Admin ... 58

Gambar 4.6 Tampilan Menu Data Laporan Magang ... 59

Gambar 4.7 Tampilan Menu Data Laporan Akhir ... 59

Gambar 4.8 Tampilan Menu Logout Admin ... 60

Gambar 4.9 Halaman Login Mahasiswa ... 60

Gambar 4.10 Halaman Dashboad Mahasiswa ... 61

Gambar 4.11 Tampilan Menu Edit Profil Mahasiswa ... 61

(16)

xvi

Gambar 4.12 Tampilan Menu Input Judul Mahasiswa ... 62

Gambar 4.13 Tampilan Menu Input Bab 1 Laporan Magang ... 62

Gambar 4.14 Tampilan Menu Input Bab 1 Laporan Akhir ... 63

Gambar 4.15 Tampilan Menu Upload Laporan Magang ... 63

Gambar 4.16 Tampilan Menu Upload Laporan Akhir ... 64

Gambar 4.17 Tampilan Menu Upload SOP ... 64

Gambar 4.18 Tampilan Menu Cetak Surat Keterangan ... 65

Gambar 4.19 Tampilan Surat Keterangan Bebas Administrasi ... 65

Gambar 4.20 Tampilan Menu Keluar Mahasiswa ... 66

(17)

xvii

DAFTAR TABEL

Tabel 2.1 Fungsi-fungsi MySQL ... 21 Tabel 4.1 Pengujian Website Admin dengan Metode Black Box ... 51 Tabel 4.2 Pengujian Website Mahasiswa dengan Metode Black Box .. 53

(18)

xviii

DAFTAR LAMPIRAN

Lampiran 1 Lembar Kesepakatan Bimbingan Laporan Akhir Pembimbing I Lampiran 2 Lembar Kesepakatan Bimbingan Laporan Akhir Pembimbing II Lampiran 3 Lembar Bimbingan Laporan Akhir Pembimbing I

Lampiran 4 Lembar Bimbingan Laporan Akhir Pembimbing II Lampiran 5 Lembar Rekomendasi Ujian Laporan Akhir

Lampiran 6 Lembar Pelaksanaan Revisi Laporan Akhir Lampiran 7 Codingan Sistem Aplikasi