BAB III HANYAR DAN INDONESIA
BAB III
ANALISA DAN DESAIN
3.1
Tabel Kegiatan Pelaksanaan
Kegiatan Praktek Kerja Lapangan ini dimulai dari 19 Januari 2015. Pelaksanaan
kegiatan untuk penyelesaian Laporan Praktik Kerja Lapangan dilakukan selama
tujuh bulan. Adapun tabel kegiatan pelakasanaan Praktek Kerja Lapangan adalah
sebagai berikut:
Tabel 3.1 Jadwal Pelaksanaan PKL
No
1
2
3
4
5
Kegiatan
Praktek Kerja
Lapangan
Analisa sistem pada
tempat PKL
Pengumpulan data
Membuat desain
1
2
Bulan ke3
4
5
6
7
√
√
√
√
√
√
√
√
√
√
√
√
√
website Tekling
Menyelesaikan
rancangan website
√
√
Tekling
Menyelesaikan
6
website Tekling dan
√
laporan PKL
3.2
Uraian Kegiatan PKL
19
20
Ruang lingkup Praktek Kerja Lapangan bertempat di Bagian Administrasi Teknik
Lingkungan Fakultas Teknik Universitas Lambung Mangkurat. Praktek Kerja
Lapangan berlangsung selama 4 minggu dimulai dari tanggal 19 Januari 2015
sampai dengan tanggal 14 Februari 2015. Hari Kerja yaitu Senin sampai dengan
Jumat dimulai pukul 08.00 sampai 16.00 untuk Senin sampai dengan Rabu.
Sedangkan Kamis dan Jum’at dimulai pukul 08.00 sampai 11.30.
Kegiatan
yang
dilakukan
selama
PKL
berlangsung
adalah
yang
berhubungan dengan data yang dimiliki Program Studi Teknik Lingkungan seperti
melakukan pengelolaan data
mahasiswa. Pengelolaan data tersebut meliputi
menginput data mahasiswa yang ingin melaksanakan skripsi, menginputkan nilai
mahasiswa, menginputkan KRS mahasiswa yang ingin melakukan registrasi
ulang.
3.3
Permasalahan
Fakultas Teknik Universitas Lambung Mangkurat (FT Unlam) tentunya selalu
berupaya meningkatkan mutu sumber daya manusia yang dihasilkan berupa
mahasiswa yang mandiri, salah satu caranya dengan menerapkan pengembangan
teknologi dalam segala aspek pekerjaan.
Gambar 3.1 Sosial Media dan Mading Program Studi Teknik Lingkungan
21
Seperti yang di lihat pada Gambar 3.1, Program Studi Teknik Lingkungan
dalam penyampain informasi saat ini masih bergantung pada situs jejaring sosial
seperti Twitter dan Facebook (Grup). Media cetak seperti mading juga masih
dimanfaatkan untuk penyampaian informasi kepada mahasiswa/i. Walaupun
kedua media tersebut cukup membantu, akan tetapi masih dirasa kurang tepat. Hal
itu dikarenakan informasi bisa saja berubah-ubah sesuai keadaan terbaru dan
permintaan dari masyarakat luar.
3.4
Usulan Pemecahan Masalah
Untuk mengatasi permasalahan yang berkaitan dengan penyebaran informasi yang
dimiliki oleh Program Studi Teknik Lingkungan, maka dibuatlah suatu website
yang dapat diakses oleh semua orang melalui internet. Website yang dibuat
bersifat dinamis, yaitu website yang didalamnya dapat selalu dirubah sesuai
dengan situasi dan kondisi. Di dalamnya juga ditambahkan controller atau
administrator sebagai pengelola website dalam memperbarui data. Website yang
akan dibuat menggunakan salah satu PHP framework yaitu Laravel versi 5.0 dan
menggunakan MySQL sebagai database.
Metode yang digunakan dalam proses pemecahan masalah yaitu dengan
metode Waterfall. Metodologi pengembangan sistem model Waterfall adalah
proses pengembangan sistem yang menyiratkan pendekatan yang sistematis dan
berurutan (sekuensial) pada pengembangan perangkat lunak, dimana proses
pengembangan tersebut mengalir secara teratur ke bawah sehingga terlihat seperti
air terjun. Proses pengembangan dimulai dengan spesifikasi kebutuhan pengguna
dan berlanjut melalui tahapan-tahapan perencanaan (planning), pemodelan
(modeling), konstruksi (construction), serta penyerahan sistem perangkat lunak ke
pelanggan/pengguna (deployment), yang diakhiri dengan dukungan berkelanjutan
pada perangkat lunak yang dihasilkan.
3.5
Analisa Sistem
3.5.1
Perancanaan Sistem
Definisi kebutuhan menurut data yang telah didapatkan adalah sebagai
berikut:
22
1. Admin memerlukan pengelolaan slideshow. Selain itu memerlukan pula
website yang memiliki enam navigasi tetap yaitu beranda, profil, sarana
pendukung, akademik, kemahasiswaan, dan kontak. Tiga diantaranya
dapat ditambahkan submenu secara dinamis.
2. Mahasiswa memerlukan informasi penting berupa pengumuman yang
dapat diakses dimana saja dengan mudah.
3. Masyarakat umum memerlukan media untuk dapat mengirimkan pesan
berupa kritik atau saran yang berhubungan dengan Program Studi Teknik
Lingkungan maupun website itu sendiri kepada pengelola website. Selain
itu, memerlukan pula informasi mengenai berita terbaru, profil, sarana
pendukung, akademik, kemahasiswaan, yang dimiliki oleh Teknik
Lingkungan. Informasi ini mudah di akses dimana saja dan kapan saja
secara online bahkan mobile.
3.5.2
Analisa Sistem yang Ada
Proses bisnis yang telah ada dan selama ini sedang berjalan dalam
Program Studi Teknik Lingkungan pada saat menyebarkan informasi dapat
dilihat pada Gambar 3.2 berikut.
Gambar 3.2 Proses Bisnis Existing
23
Dari proses bisnis diatas, dapat dilihat bahwa tidak efisiennya proses
untuk mendapatkan suatu informasi berupa pengumuman oleh mahasiswa.
Semua proses diawali dengan pihak kampus yang harus mencetak
informasi berupa pengumuman yang dibutuhkan oleh mahasiswa
kemudian menempelkan pengumuman yang telah dicetak tersebut ke
mading Program Studi Teknik Lingkungan. Apabila mahasiswa perlu
mengetahui pengumuman tersebut secepatnya, pihak kampus harus
menghubungi mahasiwa terlebih dahulu untuk melihat pengumuman yang
ada. Mahasiswa yang telah dihubungi akan datang ke kampus dan proses
diakhiri dengan mahasiswa yang telah melihat pengumuman tersebut.
3.5.3
Analisa Sistem yang Dibuat
Proses bisnis yang diusulkan untuk menggantikan/memperbaiki proses
bisnis sebelumnya dapat dilihat pada Gambar 3.3 berikut.
Gambar 3.3 Proses Bisnis Perbaikan
Berdasarkan proses bisnis diatas, dapat diketahui bahwa website
memberikan kontribusi berupa kemudahan bagi mahasiswa/masyarakat
umum untuk memperoleh informasi dari pihak kampus secara cepat.
3.6
Desain Sistem
3.6.1.1 Desain Perangkat Lunak
Pada desain perangkat lunak, ada dua buah permodelan yang umum
digunakan, yaitu UML dan DFD. Pada jenis pemrograman berbasis objek
(object oriented), digunakan permodelan UML. UML (Unified Modelling
24
Language) adalah standarisasi internasional untuk notasi dalam bentuk
grafik, yang menjelaskan tentang analisis dan desain perangkat lunak yang
dikembangkan dengan pemrograman berorientasi objek. Sebuah UML
memiliki setidaknya sembilan buah diagram di dalamnya, namun disini
hanya akan menggunakan dua buah diagram saja. Kedua diagram tersebut
mencakup Use Case Diagram, Activity Diagram dan Class Diagram.
1. Use Case Diagram
Use Case Diagram menggambarkan aliran kegiatan dan proses bisnis yang
dilakukan oleh pengguna (aktor). Adapun desain Use Case diagram untuk
super admin dan admin dapat dilihat pada Gambar 3.4 berikut.
Gambar 3.4 Use case Diagram Super Admin dan Admin
Seperti yang dapat dilihat pada Gambar 3.3, menunjukkan dengan
jelas perbedaan hak aktivitas yang dapat dilakukan oleh super admin dan
25
admin. Super Admin dapat menambahkan admin baru, sedangkan admin
tidak dapat mengelola data admin yang dimiliki website Teknik
Lingkungan.
Super admin dan admin dapat melakukan login dengan memasukkan
username dan password, melihat dan menghapus pesan yang dikirimkan
pengguna, mengelola user, mengelola berita dan pengumuman, mengelola
menu profil, sarana pendukung, dan kemahasiswaan, serta mengelola
slideshow.
Gambar 3.5 Use case Diagram pengunjung
Pada Gambar 3.5 diatas dapat dilihat pula aktifitas yang dapat
dilakukan oleh aktor lain selain super admin dan admin yaitu pengunjung.
Pengunjung adalah siapa saja yang mengakses halaman website Teknik
26
Lingkungan. Pengunjung dapat mengirimkan pesan ke admin melalui
halaman kontak yang disediakan di website Teknik Lingkungan, melihat
berita dan pengumuman yang ditampilkan pada halaman beranda website,
melihat dan mendownload unduhan, melihat menu profil, sarana
pendukung, akademik dan kemahasiswaan yang dapat dikelola secara
dinamis oleh super admin maupun admin. Serta melihat slideshow yang
ditampilkan pada halaman beranda website Teknik Lingkungan.
2. Activity Diagram
a. Activity Diagram Administrator
Diagram ini menggambarkan alur aktivitas yang ada pada halaman
administrator dengan decision yang mungkin terjadi dan bagaimana
berakhirnya. Activity Diagram super admin dapat dilihat pada Gambar
27
3.6berikut:
Gambar 3.6 Activity Diagram Administrator
Berdasarkan Gambar diatas, dapat dilihat bahwa proses dimulai
dari mengakses homepage dan selanjutnya halaman login untuk
kemudian memasukkan username dan password agar dapat melakukan
proses login. Setelah itu akan dilakukan validasi yang apa bila tidak
valid akan dikembalikan ke halaman sebelumnya dan jika valid maka
akan masuk ke halaman administrator.
Halaman administrator ini sendiri memiliki beberapa menu
yaitu menu berita dan pengumuman, menu slideshow, menu submenu,
menu pesan dan menu user yang semuanya memiliki proses create,
read, update, dan delete kecuali menu pesan yang hanya ada pilihan
28
untuk melihat dan menghapus pesan yang masuk. Setiap proses create,
read, update dan delete selalu berhubungan dengan database. Selain
itu ada pula proses logout yang dapat dilakukan oleh admin dimana
akan dilakukan konfirmasi terlebih dahulu. Apabila tidak di
konfirmasi, maka akan dikembalikan ke halaman administrator.
Sedangkan jika di konfirmasi maka proses akan berakhir.
b. Activity Diagram Pengunjung
Diagram ini menggambarkan alur aktivitas oleh pengunjung dengan
decision yang mungkin terjadi dan bagaimana berakhirnya. activity
diagram pengunjung dapat dilihat pada Gambar 3.7 berikut.
Gambar 3.7 Activity Diagram Pengunjung
Berdasarkan Gambar 3.7 diatas dapat dilihat berbagai aktifitas
yang memungkinkan dilakukan oleh pengguna. Proses pertama
dimulai dengan mengakses homepage website dimana terdapat menu
beranda, profil, sarana pendukung, sistem pendidikan, kemahasiswaan,
dan menu penelitian dan publikasi. Setiap menu memiliki link menuju
halaman informasi yang sesuai. Pada menu beranda, informasi yang
disajikan berupa berita dan juga pengumuman. Pengguna dapat pula
memilih menu kontak untuk mengirimkan pesan ke admin.
c. Activity Diagram Pencarian Berita/Pengumuman/Informasi
29
Diagram ini menggambarkan alur aktivitas pengunjung apabila
melakukan pencarian pada website Teknik Lingkungan. activity
diagram pencarian berita/pengumuman/informasi dapat dilihat pada
Gambar 3.8 berikut.
Gambar 3.8 Activity Diagram Pencarian
Berita/Pengumuman/Informasi
30
d. Activity Diagram Pencarian Data Mahasiswa dan Profil Dosen
Diagram ini menggambarkan alur aktivitas pengunjung apabila
melakukan pencarian data mahasiswa profil dosen pada website
Teknik Lingkungan. activity diagram pencarian data mahasiswa
dan profil dosen dapat dilihat pada Gambar 3.9 berikut.
Gambar 3.9 Activity Diagram Pencarian Data Mahasiswa dan
Profil Dosen
31
3. Class Diagram
Class Diagram menggambarkan relasi antar menu dan submenu dan
proses bisnis yang dilakukan oleh pengguna (aktor). Adapun desain
Class Diagram dapat dilihat pada Gambar 3.10 berikut.
Gambar 3.10 Class Diagram
32
.6.2
Desain Data
1. Tabel Database User (Tabel 3.2)
Nama Tabel
: users
Fungsi
: Menyimpan data admin sebagai pengguna di halaman
administrator
Tabel 3.2 Users
Field
Type
Lengt
PrimaryKe
Autoincremen
h
5
y
√
t
√
Id
INT
nama_lengkap
VARCHAR
100
Name
VARCHAR
50
Email
VARCHAR
50
password
VARCHAR
60
Level
remember_toke
VARCHAR
n
created_at
updated_at
VARCHAR
TIMESTAMP
TIMESTAMP
33
2. Tabel Database Berita (Tabel 3.3)
Nama Tabel
: berita
Fungsi
: Menyimpan data berita dan pengumuman
Tabel 3.3 Berita
Lengt
Field
Type
h
5
id
INT
user
VARCHAR
100
kategori_1
VARCHAR
50
kategori_2
VARCHAR
50
judul
VARCHAR
100
slug
VARCHAR
100
Gambar
TEXT
isi
TEXT
tampilkan
INTEGER
created_at
TIMESTAMP
updated_at
TIMESTAMP
PrimaryKey
√
Autoincrement
√
34
3. Tabel Database Menu (Tabel 3.4)
Nama Tabel
: menu
Fungsi
: Menyimpan data submenu yang akan ditambahkan pada
lima menu dinamis yang dimiliki website TL
Tabel 3.4 Menu
Lengt
Field
Type
h
5
Id
INT
judul
VARCHAR
100
Slug
VARCHAR
100
tautan
VARCHAR
100
Isi
TEXT
kategori
VARCHAR
tampilkan
INTEGER
created_at
TIMESTAMP
updated_at
TIMESTAMP
PrimaryKey
√
Autoincrement
√
50
4. Tabel Database Kategori (Tabel 3.5)
Nama Tabel
: kategori
Fungsi
: Menyimpan data kategori yang akan mengelompokkan
berita yang akan di publikasikan
Tabel 3.5 Kategori
Lengt
Field
Type
Id
INT
nama
VARCHAR
h
5
PrimaryKey
√
Autoincrement
√
35
created_at
TIMESTAMP
updated_at
TIMESTAMP
5. Tabel Database Pesan (Tabel 3.6)
Nama Tabel
: pesan
Fungsi
: Menyimpan
data
pesan
berupa
kritik/saran
dari
mahasiswa/masyarakat umum pengunjung website TL
Tabel 3.6 Pesan
Lengt
Field
Type
Id
INT
h
5
nama
VARCHAR
50
Isi
TEXT
email
VARCHAR
status
VARCHAR
created_at
TIMESTAMP
updated_at
TIMESTAMP
PrimaryKey
√
Autoincrement
√
6. Tabel Database Unduhan (Tabel 3.7)
Nama Tabel
: unduhan
Fungsi
: Menyimpan data unduhan yang dapat di download oleh
pengunjung website TL
Tabel 3.7 Unduhan
Lengt
Field
Type
Id
INT
h
5
link
VARCHAR
50
File
VARCHAR
PrimaryKey
√
Autoincrement
√
36
judul
VARCHAR
created_at
TIMESTAMP
updated_at
TIMESTAMP
7. Tabel Database Dosen (Tabel 3.8)
Nama Tabel
: dosen
Fungsi
: Menyimpan
data
dosen
Program
Studi
Teknik
Lingkungan
Tabel 3.8 Dosen
Lengt
Field
Type
h
5
Id
INT
slug
VARCHAR
100
nama
VARCHAR
50
Nip
INT
18
Nidn
INT
25
email
VARCHAR
30
gambar
VARCHAR
100
jabatan
VARCHAR
30
Ttl
VARCHAR
30
s1
VARCHAR
50
s2
VARCHAR
50
s3
VARCHAR
50
Mk
TEXT
publikasi
TEXT
Keahlian
TEXT
Penelitian
TEXT
pengabdian
TEXT
PrimaryKey
√
Autoincrement
√
37
created_at
TIMESTAMP
updated_at
TIMESTAMP
8. Database
Penyimpanan data pada website TL memanfaatkan database MySQL,
adapun database yang digunakan diberi nama teklingwebsite, memiliki
tujuh tabel yaitu tabel users, berita, kategori, menu, pesan dan slideshow.
Laravel memiliki satu tabel bawaan yaitu tabel migrations. Daftar dari
tabel database dapat dilihat pada Gambar 3.11 berikut.
Gambar 3.11 Database Website TL
9. Table Relation
Pada database teklingwebsite terdapat tabel yang saling berhubungan
yaitu tabel users dengan tabel berita, dan juga tabel berita dengan tabel
kategori seperti pada Gambar 3.12 berikut.
38
Gambar 3.12 Relasi Tabel Database TL
3.5.4
Desain Interface
1. Halaman Beranda
Halaman beranda, yang merupakan homepage dari website TL memiliki
elemen berupa header, footer, slideshow, sidebar, navigasi, juga kolom
pencarian. Pada bagian navigasi, memiliki satu menu utama yaitu beranda
dan empat menu lain yaitu profil, sarana pendukung, akademik, dan
kemahasiswaan. Sidebar pada website TL terdapat pada bagian sebelah
kanan, terdiri dari daftar judul pengumuman dan berita terbaru. Content
pada halaman beranda akan berisi daftar preview berita dan pengumuman
yang dipublikasikan di website TL. Sedangkan pada bagian footer
merupakan area untuk copyright juga link menuju akun sosial media yang
dimiliki TI. Adapun desain Interface dari halaman beranda website TL
dapat dilihat pada Gambar 3.13 berikut.
39
Gambar 3.13 Desain Interface Halaman Beranda
2. Halaman Berita dan Pengumuman
Halaman ini berfungsi untuk menampilkan detail dari berita ataupun
pengumuman yang dipublikasikan di website TL. Halaman ini memiliki
desain yang tidak jauh berbeda dengan halaman beranda, yang
membedakannya adalah tidak adanya slideshow yang ditampilkan pada
halaman ini. Desain interface halaman berita dan pengumuman dapat
dilihat pada Gambar 3.14 berikut.
40
Gambar 3.14 Desain Interface Halaman Berita dan Pengumuman
3. Halaman Menu
Halaman ini menampilkan isi dari sub menu yang dipilih pengunjung
website pada bagian navigasi. Memiliki desain yang lebih sederhana
dengan tidak adanya sidebar dan juga kolom pencarian. desain interface
halaman menu dapat dilihat pada Gambar 3.15 berikut.
Gambar 3.15 Desain Interface Halaman Menu
4. Halaman Login
Halaman ini adalah halaman yang akan membawa pengguna menuju
halaman administrator untuk mengelola website TL. Pada halaman ini
pengguna diminta untuk memasukkan username dan password yang
dimiliki oleh pengguna. Desain interface halaman login dapat dilihat pada
Gambar 3.16 berikut.
41
Gambar 3.16 Desain Interface Halaman Login
5. Halaman Administrator
Pada halaman administrator terdiri dari header , menu sidebar yang ada
disebelah kiri, kolom pencarian, dan juga footer. Menu pada sidebar akan
membawa pengguna menuju halaman untuk mengelola berita &
pengumuman, slideshow, sub menu, kategori, pesan, user, kembali ke
halaman utama, dan logout. Desain interface dari halaman Administrator
dapat dilihat pada Gambar 3.17 berikut.
Gambar 3.17 Desain Interface Halaman Administrator
Adapun fungsi dari setiap menu tersebut adalah:
a. Dashboard
Halaman ini merupakan halaman awal yang akan diarahkan kepada
pengguna saat telah berhasil login dan masuk ke halaman
administrator.
42
b. Berita dan Pengumuman
Halaman ini merupakan halaman untuk mengelola berita maupun
pengumuman yang akan di publikasikan di website TL. Seperti yang
terlihat pada Gambar, content mulanya terdiri dari daftar judul berita
dan pengumuman beserta button untuk menambah berita, mengubah
berita dan menghapus berita. Adapun tampilan dari desain interface
halaman daftar berita dan pengumuman dapat dilihat pada Gambar
3.18 berikut:
Gambar 3.18 Desain Interface Halaman Daftar Berita & Pengumuman
c. Slideshow
Halaman ini merupakan halaman untuk mengelola gambar yang akan
ditampilkan di slideshow yang berada pada halaman beranda website
TL. Content mulanya terdiri dari daftar gambar dan deskripsinya
masing masing beserta button untuk menambah, mengubah dan
menghapus gambar.
d. Sub Menu
Halaman ini merupakan halaman untuk mengelola sub menu yang
akan ditambahkan oleh admin untuk melengkapi informasi tentang
43
Program Studi Teknik Lingkungan. Seperti yang terlihat pada Gambar
3.13, content mulanya terdiri dari daftar judul sub menu yang
dikategorikan sesuai dengan menu utamanya beserta button untuk
menambah, mengubah dan menghapus sub menu.
e. Unduhan
Halaman ini merupakan halaman untuk mengelola unduhan yang akan
ditambahkan admin di website TL. Unduhan dapat berupa file materi
perkuliahan yang akan berguna bagi mahasiswa apabila ada di website
TL ini.
f. Pesan
Halaman ini merupakan halaman untuk mengelola pesan yang
sebelumnya telah dikirimkan oleh pengunjung dari website TL.
Content mulanya terdiri dari daftar pesan yang dikategorikan sesuai
dengan statusnya apakah sudah dibaca/belum beserta tautan untuk
menghapus pesan.
g. User
Halaman ini merupakan halaman untuk mengelola user yang akan
ditambahkan
oleh
admin
untuk
dapat
mengakses
halaman
administrator. Content mulanya terdiri dari daftar user yang beserta
button untuk menambah, mengubah dan menghapus user.
h. Kembali ke Halaman Utama
Menu ini berfungsi untuk mengarahkan admin kembali ke halaman
website TL.
i. Logout
Menu ini berfungsi untuk mengarahkan admin keluar dari halaman
administrator dan untuk dapat mengaksesnya kembali, admin
diharuskan untuk melakukan login.
ANALISA DAN DESAIN
3.1
Tabel Kegiatan Pelaksanaan
Kegiatan Praktek Kerja Lapangan ini dimulai dari 19 Januari 2015. Pelaksanaan
kegiatan untuk penyelesaian Laporan Praktik Kerja Lapangan dilakukan selama
tujuh bulan. Adapun tabel kegiatan pelakasanaan Praktek Kerja Lapangan adalah
sebagai berikut:
Tabel 3.1 Jadwal Pelaksanaan PKL
No
1
2
3
4
5
Kegiatan
Praktek Kerja
Lapangan
Analisa sistem pada
tempat PKL
Pengumpulan data
Membuat desain
1
2
Bulan ke3
4
5
6
7
√
√
√
√
√
√
√
√
√
√
√
√
√
website Tekling
Menyelesaikan
rancangan website
√
√
Tekling
Menyelesaikan
6
website Tekling dan
√
laporan PKL
3.2
Uraian Kegiatan PKL
19
20
Ruang lingkup Praktek Kerja Lapangan bertempat di Bagian Administrasi Teknik
Lingkungan Fakultas Teknik Universitas Lambung Mangkurat. Praktek Kerja
Lapangan berlangsung selama 4 minggu dimulai dari tanggal 19 Januari 2015
sampai dengan tanggal 14 Februari 2015. Hari Kerja yaitu Senin sampai dengan
Jumat dimulai pukul 08.00 sampai 16.00 untuk Senin sampai dengan Rabu.
Sedangkan Kamis dan Jum’at dimulai pukul 08.00 sampai 11.30.
Kegiatan
yang
dilakukan
selama
PKL
berlangsung
adalah
yang
berhubungan dengan data yang dimiliki Program Studi Teknik Lingkungan seperti
melakukan pengelolaan data
mahasiswa. Pengelolaan data tersebut meliputi
menginput data mahasiswa yang ingin melaksanakan skripsi, menginputkan nilai
mahasiswa, menginputkan KRS mahasiswa yang ingin melakukan registrasi
ulang.
3.3
Permasalahan
Fakultas Teknik Universitas Lambung Mangkurat (FT Unlam) tentunya selalu
berupaya meningkatkan mutu sumber daya manusia yang dihasilkan berupa
mahasiswa yang mandiri, salah satu caranya dengan menerapkan pengembangan
teknologi dalam segala aspek pekerjaan.
Gambar 3.1 Sosial Media dan Mading Program Studi Teknik Lingkungan
21
Seperti yang di lihat pada Gambar 3.1, Program Studi Teknik Lingkungan
dalam penyampain informasi saat ini masih bergantung pada situs jejaring sosial
seperti Twitter dan Facebook (Grup). Media cetak seperti mading juga masih
dimanfaatkan untuk penyampaian informasi kepada mahasiswa/i. Walaupun
kedua media tersebut cukup membantu, akan tetapi masih dirasa kurang tepat. Hal
itu dikarenakan informasi bisa saja berubah-ubah sesuai keadaan terbaru dan
permintaan dari masyarakat luar.
3.4
Usulan Pemecahan Masalah
Untuk mengatasi permasalahan yang berkaitan dengan penyebaran informasi yang
dimiliki oleh Program Studi Teknik Lingkungan, maka dibuatlah suatu website
yang dapat diakses oleh semua orang melalui internet. Website yang dibuat
bersifat dinamis, yaitu website yang didalamnya dapat selalu dirubah sesuai
dengan situasi dan kondisi. Di dalamnya juga ditambahkan controller atau
administrator sebagai pengelola website dalam memperbarui data. Website yang
akan dibuat menggunakan salah satu PHP framework yaitu Laravel versi 5.0 dan
menggunakan MySQL sebagai database.
Metode yang digunakan dalam proses pemecahan masalah yaitu dengan
metode Waterfall. Metodologi pengembangan sistem model Waterfall adalah
proses pengembangan sistem yang menyiratkan pendekatan yang sistematis dan
berurutan (sekuensial) pada pengembangan perangkat lunak, dimana proses
pengembangan tersebut mengalir secara teratur ke bawah sehingga terlihat seperti
air terjun. Proses pengembangan dimulai dengan spesifikasi kebutuhan pengguna
dan berlanjut melalui tahapan-tahapan perencanaan (planning), pemodelan
(modeling), konstruksi (construction), serta penyerahan sistem perangkat lunak ke
pelanggan/pengguna (deployment), yang diakhiri dengan dukungan berkelanjutan
pada perangkat lunak yang dihasilkan.
3.5
Analisa Sistem
3.5.1
Perancanaan Sistem
Definisi kebutuhan menurut data yang telah didapatkan adalah sebagai
berikut:
22
1. Admin memerlukan pengelolaan slideshow. Selain itu memerlukan pula
website yang memiliki enam navigasi tetap yaitu beranda, profil, sarana
pendukung, akademik, kemahasiswaan, dan kontak. Tiga diantaranya
dapat ditambahkan submenu secara dinamis.
2. Mahasiswa memerlukan informasi penting berupa pengumuman yang
dapat diakses dimana saja dengan mudah.
3. Masyarakat umum memerlukan media untuk dapat mengirimkan pesan
berupa kritik atau saran yang berhubungan dengan Program Studi Teknik
Lingkungan maupun website itu sendiri kepada pengelola website. Selain
itu, memerlukan pula informasi mengenai berita terbaru, profil, sarana
pendukung, akademik, kemahasiswaan, yang dimiliki oleh Teknik
Lingkungan. Informasi ini mudah di akses dimana saja dan kapan saja
secara online bahkan mobile.
3.5.2
Analisa Sistem yang Ada
Proses bisnis yang telah ada dan selama ini sedang berjalan dalam
Program Studi Teknik Lingkungan pada saat menyebarkan informasi dapat
dilihat pada Gambar 3.2 berikut.
Gambar 3.2 Proses Bisnis Existing
23
Dari proses bisnis diatas, dapat dilihat bahwa tidak efisiennya proses
untuk mendapatkan suatu informasi berupa pengumuman oleh mahasiswa.
Semua proses diawali dengan pihak kampus yang harus mencetak
informasi berupa pengumuman yang dibutuhkan oleh mahasiswa
kemudian menempelkan pengumuman yang telah dicetak tersebut ke
mading Program Studi Teknik Lingkungan. Apabila mahasiswa perlu
mengetahui pengumuman tersebut secepatnya, pihak kampus harus
menghubungi mahasiwa terlebih dahulu untuk melihat pengumuman yang
ada. Mahasiswa yang telah dihubungi akan datang ke kampus dan proses
diakhiri dengan mahasiswa yang telah melihat pengumuman tersebut.
3.5.3
Analisa Sistem yang Dibuat
Proses bisnis yang diusulkan untuk menggantikan/memperbaiki proses
bisnis sebelumnya dapat dilihat pada Gambar 3.3 berikut.
Gambar 3.3 Proses Bisnis Perbaikan
Berdasarkan proses bisnis diatas, dapat diketahui bahwa website
memberikan kontribusi berupa kemudahan bagi mahasiswa/masyarakat
umum untuk memperoleh informasi dari pihak kampus secara cepat.
3.6
Desain Sistem
3.6.1.1 Desain Perangkat Lunak
Pada desain perangkat lunak, ada dua buah permodelan yang umum
digunakan, yaitu UML dan DFD. Pada jenis pemrograman berbasis objek
(object oriented), digunakan permodelan UML. UML (Unified Modelling
24
Language) adalah standarisasi internasional untuk notasi dalam bentuk
grafik, yang menjelaskan tentang analisis dan desain perangkat lunak yang
dikembangkan dengan pemrograman berorientasi objek. Sebuah UML
memiliki setidaknya sembilan buah diagram di dalamnya, namun disini
hanya akan menggunakan dua buah diagram saja. Kedua diagram tersebut
mencakup Use Case Diagram, Activity Diagram dan Class Diagram.
1. Use Case Diagram
Use Case Diagram menggambarkan aliran kegiatan dan proses bisnis yang
dilakukan oleh pengguna (aktor). Adapun desain Use Case diagram untuk
super admin dan admin dapat dilihat pada Gambar 3.4 berikut.
Gambar 3.4 Use case Diagram Super Admin dan Admin
Seperti yang dapat dilihat pada Gambar 3.3, menunjukkan dengan
jelas perbedaan hak aktivitas yang dapat dilakukan oleh super admin dan
25
admin. Super Admin dapat menambahkan admin baru, sedangkan admin
tidak dapat mengelola data admin yang dimiliki website Teknik
Lingkungan.
Super admin dan admin dapat melakukan login dengan memasukkan
username dan password, melihat dan menghapus pesan yang dikirimkan
pengguna, mengelola user, mengelola berita dan pengumuman, mengelola
menu profil, sarana pendukung, dan kemahasiswaan, serta mengelola
slideshow.
Gambar 3.5 Use case Diagram pengunjung
Pada Gambar 3.5 diatas dapat dilihat pula aktifitas yang dapat
dilakukan oleh aktor lain selain super admin dan admin yaitu pengunjung.
Pengunjung adalah siapa saja yang mengakses halaman website Teknik
26
Lingkungan. Pengunjung dapat mengirimkan pesan ke admin melalui
halaman kontak yang disediakan di website Teknik Lingkungan, melihat
berita dan pengumuman yang ditampilkan pada halaman beranda website,
melihat dan mendownload unduhan, melihat menu profil, sarana
pendukung, akademik dan kemahasiswaan yang dapat dikelola secara
dinamis oleh super admin maupun admin. Serta melihat slideshow yang
ditampilkan pada halaman beranda website Teknik Lingkungan.
2. Activity Diagram
a. Activity Diagram Administrator
Diagram ini menggambarkan alur aktivitas yang ada pada halaman
administrator dengan decision yang mungkin terjadi dan bagaimana
berakhirnya. Activity Diagram super admin dapat dilihat pada Gambar
27
3.6berikut:
Gambar 3.6 Activity Diagram Administrator
Berdasarkan Gambar diatas, dapat dilihat bahwa proses dimulai
dari mengakses homepage dan selanjutnya halaman login untuk
kemudian memasukkan username dan password agar dapat melakukan
proses login. Setelah itu akan dilakukan validasi yang apa bila tidak
valid akan dikembalikan ke halaman sebelumnya dan jika valid maka
akan masuk ke halaman administrator.
Halaman administrator ini sendiri memiliki beberapa menu
yaitu menu berita dan pengumuman, menu slideshow, menu submenu,
menu pesan dan menu user yang semuanya memiliki proses create,
read, update, dan delete kecuali menu pesan yang hanya ada pilihan
28
untuk melihat dan menghapus pesan yang masuk. Setiap proses create,
read, update dan delete selalu berhubungan dengan database. Selain
itu ada pula proses logout yang dapat dilakukan oleh admin dimana
akan dilakukan konfirmasi terlebih dahulu. Apabila tidak di
konfirmasi, maka akan dikembalikan ke halaman administrator.
Sedangkan jika di konfirmasi maka proses akan berakhir.
b. Activity Diagram Pengunjung
Diagram ini menggambarkan alur aktivitas oleh pengunjung dengan
decision yang mungkin terjadi dan bagaimana berakhirnya. activity
diagram pengunjung dapat dilihat pada Gambar 3.7 berikut.
Gambar 3.7 Activity Diagram Pengunjung
Berdasarkan Gambar 3.7 diatas dapat dilihat berbagai aktifitas
yang memungkinkan dilakukan oleh pengguna. Proses pertama
dimulai dengan mengakses homepage website dimana terdapat menu
beranda, profil, sarana pendukung, sistem pendidikan, kemahasiswaan,
dan menu penelitian dan publikasi. Setiap menu memiliki link menuju
halaman informasi yang sesuai. Pada menu beranda, informasi yang
disajikan berupa berita dan juga pengumuman. Pengguna dapat pula
memilih menu kontak untuk mengirimkan pesan ke admin.
c. Activity Diagram Pencarian Berita/Pengumuman/Informasi
29
Diagram ini menggambarkan alur aktivitas pengunjung apabila
melakukan pencarian pada website Teknik Lingkungan. activity
diagram pencarian berita/pengumuman/informasi dapat dilihat pada
Gambar 3.8 berikut.
Gambar 3.8 Activity Diagram Pencarian
Berita/Pengumuman/Informasi
30
d. Activity Diagram Pencarian Data Mahasiswa dan Profil Dosen
Diagram ini menggambarkan alur aktivitas pengunjung apabila
melakukan pencarian data mahasiswa profil dosen pada website
Teknik Lingkungan. activity diagram pencarian data mahasiswa
dan profil dosen dapat dilihat pada Gambar 3.9 berikut.
Gambar 3.9 Activity Diagram Pencarian Data Mahasiswa dan
Profil Dosen
31
3. Class Diagram
Class Diagram menggambarkan relasi antar menu dan submenu dan
proses bisnis yang dilakukan oleh pengguna (aktor). Adapun desain
Class Diagram dapat dilihat pada Gambar 3.10 berikut.
Gambar 3.10 Class Diagram
32
.6.2
Desain Data
1. Tabel Database User (Tabel 3.2)
Nama Tabel
: users
Fungsi
: Menyimpan data admin sebagai pengguna di halaman
administrator
Tabel 3.2 Users
Field
Type
Lengt
PrimaryKe
Autoincremen
h
5
y
√
t
√
Id
INT
nama_lengkap
VARCHAR
100
Name
VARCHAR
50
VARCHAR
50
password
VARCHAR
60
Level
remember_toke
VARCHAR
n
created_at
updated_at
VARCHAR
TIMESTAMP
TIMESTAMP
33
2. Tabel Database Berita (Tabel 3.3)
Nama Tabel
: berita
Fungsi
: Menyimpan data berita dan pengumuman
Tabel 3.3 Berita
Lengt
Field
Type
h
5
id
INT
user
VARCHAR
100
kategori_1
VARCHAR
50
kategori_2
VARCHAR
50
judul
VARCHAR
100
slug
VARCHAR
100
Gambar
TEXT
isi
TEXT
tampilkan
INTEGER
created_at
TIMESTAMP
updated_at
TIMESTAMP
PrimaryKey
√
Autoincrement
√
34
3. Tabel Database Menu (Tabel 3.4)
Nama Tabel
: menu
Fungsi
: Menyimpan data submenu yang akan ditambahkan pada
lima menu dinamis yang dimiliki website TL
Tabel 3.4 Menu
Lengt
Field
Type
h
5
Id
INT
judul
VARCHAR
100
Slug
VARCHAR
100
tautan
VARCHAR
100
Isi
TEXT
kategori
VARCHAR
tampilkan
INTEGER
created_at
TIMESTAMP
updated_at
TIMESTAMP
PrimaryKey
√
Autoincrement
√
50
4. Tabel Database Kategori (Tabel 3.5)
Nama Tabel
: kategori
Fungsi
: Menyimpan data kategori yang akan mengelompokkan
berita yang akan di publikasikan
Tabel 3.5 Kategori
Lengt
Field
Type
Id
INT
nama
VARCHAR
h
5
PrimaryKey
√
Autoincrement
√
35
created_at
TIMESTAMP
updated_at
TIMESTAMP
5. Tabel Database Pesan (Tabel 3.6)
Nama Tabel
: pesan
Fungsi
: Menyimpan
data
pesan
berupa
kritik/saran
dari
mahasiswa/masyarakat umum pengunjung website TL
Tabel 3.6 Pesan
Lengt
Field
Type
Id
INT
h
5
nama
VARCHAR
50
Isi
TEXT
VARCHAR
status
VARCHAR
created_at
TIMESTAMP
updated_at
TIMESTAMP
PrimaryKey
√
Autoincrement
√
6. Tabel Database Unduhan (Tabel 3.7)
Nama Tabel
: unduhan
Fungsi
: Menyimpan data unduhan yang dapat di download oleh
pengunjung website TL
Tabel 3.7 Unduhan
Lengt
Field
Type
Id
INT
h
5
link
VARCHAR
50
File
VARCHAR
PrimaryKey
√
Autoincrement
√
36
judul
VARCHAR
created_at
TIMESTAMP
updated_at
TIMESTAMP
7. Tabel Database Dosen (Tabel 3.8)
Nama Tabel
: dosen
Fungsi
: Menyimpan
data
dosen
Program
Studi
Teknik
Lingkungan
Tabel 3.8 Dosen
Lengt
Field
Type
h
5
Id
INT
slug
VARCHAR
100
nama
VARCHAR
50
Nip
INT
18
Nidn
INT
25
VARCHAR
30
gambar
VARCHAR
100
jabatan
VARCHAR
30
Ttl
VARCHAR
30
s1
VARCHAR
50
s2
VARCHAR
50
s3
VARCHAR
50
Mk
TEXT
publikasi
TEXT
Keahlian
TEXT
Penelitian
TEXT
pengabdian
TEXT
PrimaryKey
√
Autoincrement
√
37
created_at
TIMESTAMP
updated_at
TIMESTAMP
8. Database
Penyimpanan data pada website TL memanfaatkan database MySQL,
adapun database yang digunakan diberi nama teklingwebsite, memiliki
tujuh tabel yaitu tabel users, berita, kategori, menu, pesan dan slideshow.
Laravel memiliki satu tabel bawaan yaitu tabel migrations. Daftar dari
tabel database dapat dilihat pada Gambar 3.11 berikut.
Gambar 3.11 Database Website TL
9. Table Relation
Pada database teklingwebsite terdapat tabel yang saling berhubungan
yaitu tabel users dengan tabel berita, dan juga tabel berita dengan tabel
kategori seperti pada Gambar 3.12 berikut.
38
Gambar 3.12 Relasi Tabel Database TL
3.5.4
Desain Interface
1. Halaman Beranda
Halaman beranda, yang merupakan homepage dari website TL memiliki
elemen berupa header, footer, slideshow, sidebar, navigasi, juga kolom
pencarian. Pada bagian navigasi, memiliki satu menu utama yaitu beranda
dan empat menu lain yaitu profil, sarana pendukung, akademik, dan
kemahasiswaan. Sidebar pada website TL terdapat pada bagian sebelah
kanan, terdiri dari daftar judul pengumuman dan berita terbaru. Content
pada halaman beranda akan berisi daftar preview berita dan pengumuman
yang dipublikasikan di website TL. Sedangkan pada bagian footer
merupakan area untuk copyright juga link menuju akun sosial media yang
dimiliki TI. Adapun desain Interface dari halaman beranda website TL
dapat dilihat pada Gambar 3.13 berikut.
39
Gambar 3.13 Desain Interface Halaman Beranda
2. Halaman Berita dan Pengumuman
Halaman ini berfungsi untuk menampilkan detail dari berita ataupun
pengumuman yang dipublikasikan di website TL. Halaman ini memiliki
desain yang tidak jauh berbeda dengan halaman beranda, yang
membedakannya adalah tidak adanya slideshow yang ditampilkan pada
halaman ini. Desain interface halaman berita dan pengumuman dapat
dilihat pada Gambar 3.14 berikut.
40
Gambar 3.14 Desain Interface Halaman Berita dan Pengumuman
3. Halaman Menu
Halaman ini menampilkan isi dari sub menu yang dipilih pengunjung
website pada bagian navigasi. Memiliki desain yang lebih sederhana
dengan tidak adanya sidebar dan juga kolom pencarian. desain interface
halaman menu dapat dilihat pada Gambar 3.15 berikut.
Gambar 3.15 Desain Interface Halaman Menu
4. Halaman Login
Halaman ini adalah halaman yang akan membawa pengguna menuju
halaman administrator untuk mengelola website TL. Pada halaman ini
pengguna diminta untuk memasukkan username dan password yang
dimiliki oleh pengguna. Desain interface halaman login dapat dilihat pada
Gambar 3.16 berikut.
41
Gambar 3.16 Desain Interface Halaman Login
5. Halaman Administrator
Pada halaman administrator terdiri dari header , menu sidebar yang ada
disebelah kiri, kolom pencarian, dan juga footer. Menu pada sidebar akan
membawa pengguna menuju halaman untuk mengelola berita &
pengumuman, slideshow, sub menu, kategori, pesan, user, kembali ke
halaman utama, dan logout. Desain interface dari halaman Administrator
dapat dilihat pada Gambar 3.17 berikut.
Gambar 3.17 Desain Interface Halaman Administrator
Adapun fungsi dari setiap menu tersebut adalah:
a. Dashboard
Halaman ini merupakan halaman awal yang akan diarahkan kepada
pengguna saat telah berhasil login dan masuk ke halaman
administrator.
42
b. Berita dan Pengumuman
Halaman ini merupakan halaman untuk mengelola berita maupun
pengumuman yang akan di publikasikan di website TL. Seperti yang
terlihat pada Gambar, content mulanya terdiri dari daftar judul berita
dan pengumuman beserta button untuk menambah berita, mengubah
berita dan menghapus berita. Adapun tampilan dari desain interface
halaman daftar berita dan pengumuman dapat dilihat pada Gambar
3.18 berikut:
Gambar 3.18 Desain Interface Halaman Daftar Berita & Pengumuman
c. Slideshow
Halaman ini merupakan halaman untuk mengelola gambar yang akan
ditampilkan di slideshow yang berada pada halaman beranda website
TL. Content mulanya terdiri dari daftar gambar dan deskripsinya
masing masing beserta button untuk menambah, mengubah dan
menghapus gambar.
d. Sub Menu
Halaman ini merupakan halaman untuk mengelola sub menu yang
akan ditambahkan oleh admin untuk melengkapi informasi tentang
43
Program Studi Teknik Lingkungan. Seperti yang terlihat pada Gambar
3.13, content mulanya terdiri dari daftar judul sub menu yang
dikategorikan sesuai dengan menu utamanya beserta button untuk
menambah, mengubah dan menghapus sub menu.
e. Unduhan
Halaman ini merupakan halaman untuk mengelola unduhan yang akan
ditambahkan admin di website TL. Unduhan dapat berupa file materi
perkuliahan yang akan berguna bagi mahasiswa apabila ada di website
TL ini.
f. Pesan
Halaman ini merupakan halaman untuk mengelola pesan yang
sebelumnya telah dikirimkan oleh pengunjung dari website TL.
Content mulanya terdiri dari daftar pesan yang dikategorikan sesuai
dengan statusnya apakah sudah dibaca/belum beserta tautan untuk
menghapus pesan.
g. User
Halaman ini merupakan halaman untuk mengelola user yang akan
ditambahkan
oleh
admin
untuk
dapat
mengakses
halaman
administrator. Content mulanya terdiri dari daftar user yang beserta
button untuk menambah, mengubah dan menghapus user.
h. Kembali ke Halaman Utama
Menu ini berfungsi untuk mengarahkan admin kembali ke halaman
website TL.
i. Logout
Menu ini berfungsi untuk mengarahkan admin keluar dari halaman
administrator dan untuk dapat mengaksesnya kembali, admin
diharuskan untuk melakukan login.