bab iii pembahasan - repository.bsi.ac.id · lingkungan hidup (k3lh), pengunjung dapat melihat...

18

BAB III

PEMBAHASAN

3.1. Analisa Kebutuhan

Pada perancangan aplikasi pengenalan kesehatan keselamatan kerja dan

lingkungan hidup (K3LH), pengunjung dapat melihat artikel tentang edukasi

kesehatan keselamatan kerja dan lingkungan hidup (K3LH), pengunjung juga

dapat mengunduh file, melihat gallery foto yang bisa diakses dimana saja selagi

terhubung dengan internet. Berikut spesifikasi kebutuhan dari sistem pengenalan

K3LH:

1. Halaman Pengunjung

a. Pengunjung dapat melihat semua artikel.

b. Pengunjung bisa mencari artikel sesuai kata kunci yang diinginkan.

c. Pengunjung dapat download materi dalam bentuk dokumen.

d. Pengunjung bisa melihat semua gallery foto.

2. Halaman administrator

Halaman admin merupakan halaman khusus yang digunakan

administrator untuk mengelola konten, halaman ini berisi data-data pengelolaan

manajemen artikel dan gallery foto. Berikut spesifikasi kebutuhan dari sistem

pengenalan K3LH halaman admin:

a. Admin melakukan proses login terlebih dahulu untuk masuk ke halaman

home administrator.

b. Admin dapat melakukan setting web untuk indentitas web dan kontak.

19

c. Admin dapat melakukan manajemen artikel untuk tambah konten artikel,

edit artikel, hapus artikel.

d. Admin dapat melakukan pengelolaan media untuk album, gallery foto, file

download, banner partner.

3.2. Rancangan Dokumen

3.2.1. Rancangan Antar Muka

1. Rancangan Antar Muka Login Admin

Rancangan antar muka halaman login admin adalah halaman yang

menampilkan form login untuk menuju halaman admin. Admin melakukan login

dengan menginputkan username dan password untuk bisa menuju halaman admin,

berikut rancangan antar muka login admin:

Gambar III.1 Rancangan Antar muka Login Admin

20

2. Rancangan Antar Muka Halaman Utama Admin

Rancangan antar muka halaman utama admin adalah halaman yang

menampilkan halaman utama admin yang berisi menu-menu untuk mengedit

halaman-halaman yang ada di web. Berikut rancangan antar muka halaman utama

admin:

Gambar III.2

Rancangan Antar muka Halaman Utama Admin

3. Rancangan Antar Muka Halaman Identifikasi Web

Rancangan antar muka halaman identitas web adalah halaman yang

digunakan untuk mengatur title tag, meta description, keyword dan lain

sebagainya. Title tag merupakan tag paling pertama dan paling penting untuk

keperluan search engine (Google) akan menampilkan title tag dari website

sebagai bagian dari hasil pencariannya. Berikut rancangan antar muka halaman

identitas web:

21

Gambar III.3

Rancangan Antar muka Halaman Identifikasi Web

4. Rancangan Antar Muka Form Edit Identitas Web

Rancangan antar muka form edit adalah halaman yang digunakan untuk

mengedit halaman identitas web. Berikut rancangan antar muka form edit:

Gambar III.4

Rancangan Antar Muka Form Identitas Web

22

5. Rancangan Antar Muka Halaman Kontak

Rancangan antar muka halaman kontak adalah halaman yang

menampilkan deskripsi website. Berikut rancangan antar muka halaman kontak:

Gambar III.5

Rancangan Antar muka Halaman Kontak

6. Rancangan Antar Muka Form Edit Kontak

Rancangan antar muka form edit kontak adalah halaman yang digunakan

untuk mengedit halaman kontak web. Berikut rancangan antar muka form edit

kontak:

Gambar III.6

Rancangan Antar muka Form Edit Kontak

23

7. Rancangan Antar Muka Halaman Kategori

Rancangan antar muka halaman kategori adalah submenu dari menu

manajemen artikel. Halaman ini terdapat menu menambah, mengedit, menghapus

kategori. Berikut rancangan antar muka halaman kategori:

Gambar III.7

Rancangan Antar muka Halaman Kategori

8. Rancangan Antar Muka Form Tambah Kategori

Rancangan antar muka form kategori adalah halaman yang digunakan

untuk tambah kategori. Berikut rancangan antar muka form tambah kategori:

24

Gambar III.8

Rancangan Antar Muka Form Tambah Kategori

9. Rancangan Antar Muka Halaman Posting

Rancangan antar muka halaman kategori adalah submenu dari menu

manajemen artikel. Halaman ini terdapat menu menambah, mengedit, menghapus

posting artikel. Berikut rancangan antar muka halaman posting:

Gambar III.9

Rancangan Antar muka Halaman Posting

25

10. Rancangan Antar Muka Form Tambah Posting

Rancangan antar muka form tambah posting adalah halaman yang

digunakan untuk tambah posting artikel. Berikut rancangan antar muka form

tambah posting:

Gambar III.10

Rancangan Antar muka Form Tambah Posting

11. Rancangan Antarmuka Halaman Album

Rancangan antar muka halaman album adalah submenu dari menu media.

Halaman ini digunakan sebagai wadah untuk menyimpan foto. Berikut rancangan

antar muka halaman album:

26

Gambar III.11

Rancangan Antarmuka Halaman Album

12. Rancangan Antarmuka Form Tambah Album

Rancangan antar muka form tambah album adalah halaman yang

digunakan untuk tambah album. Berikut rancangan antar muka form tambah

album:

Gambar III.12

Rancangan Antarmuka Form Tambah Album

27

13. Rancangan Antarmuka Halaman Gallery Foto

Rancangan antar muka halaman gallery foto adalah submenu dari menu

media. Halaman ini digunakan untuk memanajemen gallery foto. Berikut

rancangan antar muka halaman gallery foto:

Gambar III.13

Rancangan Antarmuka Halaman Gallery Foto

14. Rancangan Antarmuka Form Tambah Gallery Foto

Rancangan antar muka form tambah foto adalah halaman yang digunakan

untuk tambah foto. Berikut rancangan antar muka form tambah foto:

28

Gambar III.14

Rancangan Antarmuka Form Tambah Foto

15. Rancangan Antarmuka Halaman File Download

Rancangan antar muka halaman file download adalah submenu dari menu

media. Halaman ini digunakan untuk memanajemen file dokumen edukasi.

Berikut rancangan antar muka halaman file download:

Gambar III.15

Rancangan Antarmuka Halaman File Download

29

16. Rancangan Antarmuka Form Tambah File Download

Rancangan antar muka form tambah file download adalah halaman yang

digunakan untuk tambah file dokumen. Berikut rancangan antar muka form

tambah file download:

Gambar III.16

Rancangan Antarmuka Form Tambah File Download

17. Rancangan Antarmuka Halaman Banner

Rancangan antar muka halaman banner adalah submenu dari menu media.

Halaman ini digunakan untuk memanajemen banner partner. Berikut rancangan

antar muka halaman banner:

30

Gambar III.17

Rancangan Antarmuka Halaman Banner

18. Rancangan Antarmuka Form Tambah Banner

Rancangan antar muka form tambah banner adalah halaman yang

digunakan untuk tambah banner. Berikut rancangan antar muka form tambah

banner:

Gambar III.18

Rancangan Antarmuka Form Tambah Banner

31

19. Rancangan Antarmuka Halaman Depan Pengunjung

Rancangan antar muka halaman depan pengunjung adalah halaman

pertama kali saat ditampilkan ketika pengunjung mengakses website aplikasi k3lh

yang berisi kontent artikel, dan sisi samping terdapat kontak, file download,

banner. Berikut rancangan antar muka halaman depan pengunjung:

Gambar III.19

Rancangan Antarmuka Halaman Depan Pengunjung

20. Rancangan Antarmuka Halaman Album Pengunjung

Rancangan antar muka halaman album pengunjung adalah halaman untuk

menarik pengunjung web dengan gallery foto. Berikut rancangan antar muka

halaman album pengunjung:

32

Gambar III.20

Rancangan Antarmuka Halaman Album Pengunjung

21. Rancangan Antarmuka Halaman Dokumen Pengunjung

Rancangan antar muka halaman dokumen pengunjung adalah halaman

untuk file sharing tentang edukasi kesehatan keselamatan kerja dan lingkungan

hidup. Berikut rancangan antar muka halaman dokumen pengunjung:

Gambar III.20

Rancangan Antarmuka Halaman Dokumen Pengunjung

33

3.3. Basis Data

Perancangan basis data menghasilkan pemetaan tabel-tabel yang

digambarkan dengan Entity Relationship Diagram (ERD).

1. Entity Relationship Diagram

Gambar III.21 Entity Relationship Diagram

34

2. Logical Record Structure

Gambar III.22

Logical Record Structure

3.4.Spesifikasi File

Dalam spesifikasi file yang menjelaskan tentang file atau tabel yang

terbentuk dari transfomasi ERD dan file-file yang menunjang untuk website. File-

file ini tersimpan pada database, dengan parameter sebagai berikut:

1. Spesifikasi File Admin

Nama File : Admin

Akronim : Admin

Fungsi : Untuk menyimpan data admin

Tipe File : File Master

35

Organisasi File : Indexed Sequential

Akses File : Random

Media : Harddisk

Kunci Field : admin_id

Software : MySQL

Tabel III.1

Spesifikasi File Admin

No Elemen data Nama field Type Size Ket

1. Admin id Admin_id Int 11 Primary key

2. Admin nama Admin_nama Varchar 255

3. Admin username Admin_username Varchar 255

4 Admin password Admin_password varchar 255

2. Spesifikasi File Posting

Nama File : Posting

Akronim : Posting

Fungsi : Untuk menyimpan data posting



Akses File : Random

Media : Harddisk

Kunci Field : id_judul

Foreign Key : id_kategori

36

Software : MySQL

Tabel III.2

Spesifikasi File Posting

No Elemen Data Nama file Type Size Ket

1. Id posting Id_posting Int 11 Primary key

2. Judul Judul Varchar 150

3. Judul seo Judul_seo Varchar 150

4. Isi artikel Isi_artikel text

5. Thread Thread char 50

6. Id kategori Id_kategori Int 11 Foreign Key

7. Photo Photo Varchar 50

8. Aktif Aktif Char 50

9. Tanggal Tanggal date

3. Spesifikasi File Kategori

Nama File : Kategori

Akronim : Kategori

Fungsi : Untuk menyimpan data kategori



Akses File : Random

Media : Harddisk

Kunci Field : id_kategori

Software : MySQL

37

Tabel III.3

Spesifikasi File Kategori


1. Id kategori Id_kategori int 5 Primary key

2. Nama kategori nama_kategori Varchar 100

3. Aktif aktif char 50

4. Spesifikasi File Main Menu

Nama File : Main_menu

Akronim : Main_menu

Fungsi : Untuk menyimpan data main_menu

Tipe File : File main_menu


Akses File : Random

Media : Harddisk

Kunci Field : id_main

Software : MySQL

Tabel III.4

Spesifikasi File Main Menu


1. Id main Id_main Int 5 Primary key

38

2. Nama menu Nama_menu varchar 50

5. Spesifikasi File Sub Menu

Nama File : Sub Menu

Akronim : Sub Menu

Fungsi : Untuk menyimpan data sub menu



Akses File : Random

Media : Harddisk

Kunci Field : id_sub

Foreign key : id_main

Software : MySQL

Tabel III.5

Spesifikasi File Sub Menu


1. Id sub Id_sub int 5 Primary

key

2. Nama sub Nama_sub Varchar 50

3. Link sub Link_sub Varchar 100

4. Id main Id_main Varchar 100 Foreign key

39

6. Spesifikasi File Identitas

Nama File : Identitas

Akronim : Identitas

Fungsi : Untuk menyimpan data identitas

Tipe File : File Identitas


Akses File : Random

Media : Harddisk

Kunci Field : id_identitas

Software : MySQL

Tabel III.6

Spesifikasi File Identitas


1. Id Identitas Id_identitas int 5 Primary

key

2. Nama website Nama_website Varchar 255

3. Alamat Website Alamat_website Varchar 255

4. Meta Deskripsi Meta_deskripsi Text

5. Meta Keyword Meta_keyword Text

6. Photo Kd_provinsi Varchar 100

40

7. Spesifikasi File Kontak

Nama File : Kontak

Akronim : Kontak

Fungsi : Untuk menyimpan data Kontak

Tipe File : File Kontak


Akses File : Random

Media : Harddisk

Kunci Field : id_kontak

Software : MySQL

Tabel III.7

Spesifikasi File Kontak


1. Id kontak Id_kontak Int 5 Primary key

2. Nama kontak Nama_kontak Varchar 100

3. Deskripsi Deksripsi Text

8. Spesifikasi File Album

Nama File : Album

Akronim : Album

Fungsi : Untuk menyimpan data Album


41


Akses File : Random

Media : Harddisk

Kunci Field : id_album

Software : MySQL

Tabel III.8

Spesifikasi File Album

No Elemen data Nama file Type size Ket

1. Id album id_album Int 5 Primary key

2. Nama Album Nama_album Varchar 100

3. Album SEO Album_seo Varchar 100

4. Photo Photo Varchar 100


9. Spesifikasi File Gallery

Nama File : Gallery

Akronim : Gallery

Fungsi : Untuk menyimpan data Gallery

Tipe File : File Gallery


Akses File : Random

Media : Harddisk

Kunci Field : id_gallery

Foreign key : id_album

42

Software : MySQL

Tabel III.9

Spesifikasi File Gallery


1. Id gallery Id_gallery Int 5 Primary key

2. Id album Id_album Int 5 Foreign key

3. Nama Gallery Nama_gallery varchar 100

4. Gallery SEO Gallery_seo varchar 100

5. Keterangan keterangan Text

6. Photo Photo varchar 100


10. Spesifikasi File Download

Nama File : Download

Akronim : Download

Fungsi : Untuk menyimpan data download

Tipe File : File Download


Akses File : Random

Media : Harddisk

Kunci Field : id_download

43

Software : MySQL

Tabel III.10

Spesifikasi File Download


1. Id download Id_download Int 5 Primary key

2. Id album Id_album Int 5

3. Judul Judul varchar 100

4. Nama file Nama_file varchar 100

5. Tanggal Posting Tgl_posting Date


11. Spesifikasi File Banner

Nama File : Banner

Akronim : Banner

Fungsi : Untuk menyimpan data banner

Tipe File : File Banner


Akses File : Random

Media : Harddisk

Kunci Field : id_banner

Software : MySQL

44

Tabel III.11

Spesifikasi File Banner


1. Id banner Id_banner Int 5 Primary key

3. Judul Judul varchar 100

4. Url url varchar 100

5. Photo photo varchar 100


3.5.Spesifikasi Program

3.5.1. Struktur Navigasi

1. Struktur Navigasi Admin

Gambar III.22

Struktur Navigasi Admin

45

2. Struktur Navigasi Pengunjung

Gambar III.23 Struktur Navigasi Pengunjung

3.6. Spesifikasi Sistem Komputer

Berikut ini adalah spesifikasi perangkat keras dan perangkat lunak

minimum yang dibutuhkan untuk mengimplementasikan website pengenalan

kesehatan keselamatan kerja dan lingkungan hidup.

a. Spesifikasi Perangkat Keras

1) Server

a) CPU

(1) Processor intel® Caleron

(2) RAM 4 GB

(3) Hard Disk 500 GB

b) Mouse

c) Keyboard

d) Monitor

b. Spesifikasi Perangkat Lunak

1) Server

46

a) Microsoft Windows Server

b) Phpmyadmin dan mysql

c) Mozila Firefox

3.7.Implementasi

1. Implementasi Rancangan Antar Muka

Implementasi rancangan antar muka pada website pengenalan kesehatan

keselamatan kerja dan lingkungan hidup berdasarkan hasil rancangan antar muka.

a. Halaman Login Admin

Administrator harus melakukan login terlebih dahulu, jika login berhasil

dan sesuai dengan username dan password, maka akan menampilkan

ruang admin.

Gambar III.24

Implementasi Login Admin

b. Halaman Menu Utama Admin

Halaman menu utama admin, merupakan tampilan awal dari ruang admin

setelah melakukan login.

47

Gambar III.25

Implementasi Menu Utama Admin

c. Halaman Menu Identias Web

Halaman menu identitas web berfungsi untuk mengatur title tag, meta

description, keyword dan lain sebagainya.

Gambar III.26

Implementasi Menu Identitas Web

d. Halaman Form Edit Identitas Web

Halaman form edit identitas web berfungsi untuk mengedit halaman

identitas web.

48

Gambar III.27

Implementasi Menu Form Edit Identitas

e. Halaman Menu Halaman Kontak

Halaman menu halaman kontak berfungsi untuk menampilkan deskripsi

website.

49

Gambar III.28

Implementasi Menu Halaman Kontak

f. Halaman Form Edit Kontak

Halaman form edit kontak berfungsi untuk untuk mengedit halaman

kontak web.

Gambar III.29

Implementasi Menu Form Edit Kontak

50

g. Halaman Menu Kategori

Halaman menu kategori berfungsi untuk menambah, mengedit,

menghapus kategori.

Gambar III.29

Implementasi Menu Kategori

h. Halaman Menu Form Tambah Kategori

Halaman form tambah kategori berfungsi untuk tambah kategori.

Gambar III.30

Implementasi Menu Form Tambah Kategori

51

i. Halaman Menu Posting

Halaman menu posting digunakan untuk menambah, mengedit,

menghapus posting artikel.

Gambar III.31

Implementasi Menu Posting

j. Halaman Form Tambah Posting

Halaman form tambah posting berfungsi untuk tambah posting artikel.

Gambar III.32

Implementasi Menu Form Tambah Posting

52

k. Halaman Menu Album

Halaman menu album digunakan sebagai wadah untuk menyimpan foto.

Gambar III.33 Implementasi Menu Album

l. Halaman Form Tambah Album

Halaman form tambah album berfungsi untuk untuk tambah album.

Gambar III.34 Form Tambah Album

53

m. Halaman Menu Gallery Foto

Halaman menu gallery foto merupakan Halaman untuk memanajemen

gallery foto.

Gambar III.35 Implementasi Halaman Menu Gallery Foto

n. Halaman Form Tambah Gallery Foto

Halaman form tambah gallery foto berfungsi untuk untuk tambah foto.

Gambar III.36 Implementasi Form Tambah Gallery Foto

54

o. Halaman File Download

Halaman file download digunakan untuk memanajemen file dokumen

edukasi.

Gambar III.37 Implementasi Form Tambah File Download

p. Halaman Menu Banner

Halaman menu banner digunakan untuk memanajemen banner partner.

Gambar III.38 Implementasi Menu Banner

55

q. Halaman Form Tambah Banner

Halaman form tambah banner yang digunakan untuk tambah banner.

Gambar III.38 Implementasi Form Tambah Banner

r. Halaman Depan Pengunjung

Halaman yang berfungsi pertama kali saat ditampilkan ketika pengunjung

mengakses website aplikasi k3lh yang berisi kontent artikel, dan sisi

samping terdapat kontak, file download, banner.

56

Gambar III.39 Implementasi Depan Pengunjung

57

s. Halaman Album Pengunjung

Halaman album pengunjung untuk menarik pengunjung web dengan

gallery foto.

Gambar III.40 Implementasi Album Pengunjung

58

t. Halaman Dokumen Pengunjung

halaman dokumen pengunjung yang berfungsi untuk file sharing tentang

edukasi kesehatan keselamatan kerja dan lingkungan hidup.

Gambar III.41 Implementasi Dokumen Pengunjung

59

3.8.Pengujian Unit

Pengujian unit merupakan pengujian terhadap program yang di buat

menggunakan blackbox testing yang fokus terhadap proses masukan dan keluaran

program.

1. Pengujian terhadap form login Admin

Tabel III.12

Hasil Pengujian Black Box Testing Login Admin

No Skenario

pengujian

Test case Hasil yang di

harapkan

Hasil

pengujia

n

Kesimpula

n

1 Username

dan

password

tidak di isi

kemudian

klik tombol

login

Username:(kosong

)

Password:(kosong)

Sistem akan

menolak akses

user dan

menampilkan

pesan

Sesuai

harapan

Valid

2 Mengetika

n username

dan

password

tidak diisi

atau

kosong

Username:admin

Password:(kosong)

Sistem akan

menolak akses

user dan akan

menampilaka

n pesan

Sesuai

harapan

Valid

60

kemudian

klik tombol

login

3 Username

tidak di isi

(kosong)

dan

password

di isi

kemudian

klik tombol

login

Username

:(kosong)

Password : ******

Sistem akan

menolak akses

user dan akan

menampilaka

n pesan

Sesuai

harapan

Valid

4 Mengetik

salah pada

satu

kondisi di

username

atau

password

kemudian

klik tombol

masuk

Username : admin

Password : ******

Sistem tidak

akan masuk

dan

menampilkan

pesan “Login

gagal!

Username dan

Password

salah”

Sesuai

harapan

Valid

5 Mengetika Username: admin Sistem Sesuai Valid

61

n username

dan

password

dengan

data yang

benar

kemudian

klik tombol

masuk

Password: ***** menerima

login admin

dan akan

masuk

halaman menu

admin

harapan

2. Pengujian terhadap form Tambah Posting

Tabel III.13

Hasil Pengujian Black Box Testing Tambah Posting

No Skenario

pengujian

Test case Hasil yang di

harapkan

Hasil

pengujian

Kesimpulan

1 Admin

masuk ke

halaman

tambah

posting dan

mengetikkan

satu form

yang diisi

atau kosong

Judul artikel; (isi)

Isi artikel:

(kosong)

Kategori:

(kosong)

Uploud foto:

(kosong)

Sistem akan

menampilkan

pesan error

Sesuai

harapan

Valid

62

kemudian

klik save

2 Admin

masuk ke

halaman

tambah

posting dan

mengetikkan

semua form

diisi

kemudian

klik save

Judul artikel; (isi)

Isi artikel: (isi)

Kategori: (isi)

Uploud foto: (isi)

Sistem akan

memasukkan

data ke tabel

dan tampil.

Sesuai

harapan

Valid

bab iii pembahasan - repository.bsi.ac.id · lingkungan hidup (k3lh), pengunjung dapat melihat...

Documents