Aplikasi Bimbingan Skripsi Online Berbasis Website Dan Android Untuk Mahasiswa Departemen Teknik Elektro Chapter III V

BAB III
PERANCANGAN SISTEM

3.1 Umum
Pada bab ini akan di bahas perancangan database, perancangan website, dan
perancangan aliran data dari aplikasi bimbingan skripsi online berbasis website
untuk mahasiswa teknik elektro Universitas Sumatera Utara.
3.2 Spesifikasi Perangkat Perancangan
Spesifikasi perangkat perancangan yang digunakan untuk melakukan
perancangan aplikasi adalah:
3.2.1

Perangkat Keras
Perangkat keras yang digunakan untuk melakukan perancangan aplikasi

adalah:
Laptop Lenovo G480, dengan spesifikasi sebagai berikut:
a) Processor Intel(R) Core (TM) i3-3210M CPU 2.50GHZ
b) Memory 4.00GB
c) Harddisk 500GB
3.2.2 Perangkat Lunak

Spesifikasi perangkat lunak yang digunakan adalah:
a. Sistem Operasi Windows 7 Ultimate
b. Notepad++
c. AppServ
d. Web Browser Google Crome

1
Universitas Sumatera Utara

e. Android Studio

3.3 Perancangan Sistem
Perancangan sistem yang di bangun dimulai setelah tahap analisis terhadap
sistem yang berjalan selesai dilakukan. Perancangan dapat didefinisikan sebagai
penggambaran, perencanaan, dan pembuatan sketsa atau pengaturan dari beberapa
elemen yang terpisah kedalam satu kesatuan yang utuh dan berfungsi.

3.3.1 Usecase Diagram
Usecase diagram digunakan untuk menggambarkan secara ringkas
siapa yang menggunakan sistem dan apa saja yang bisa dilakukannya.

Memberi gambaran singkat hubungan antara actor dan sistem. Melalui
diagram usecase dapat diketahui fungsi-fungsi apa saja yang ada pada
sistem.
3.3.1.1 Usecase Diagram Mahasiswa dan Dosen
Usecase diagram mahasiswa dan dosen menggambarkan hubungan
sistem dan actor. Perbedaan fungsi dari mahasiswa dan dosen adalah
mahasiswa dapat membuat timeline tugas akhir sedangkan dosen bisa
mengubah action timeline yang sudah dibuat.

2
Universitas Sumatera Utara

Gambar 3.3.2.1 Usecase Diagram Mahasiswa dan Dosen

3.3.1.2 Usecase Diagram Admin
Usecase diagram admin menggambarkan secara singkat apa saja
fungsi dari admin. Admin bisa menambahkan data dari dosen dan
mahasiswa, juga bisa melihat timeline bimbingan skripsi yang sedang
berjalan.

Gambar 3.3.2.2 Usecase Diagram Admin

3
Universitas Sumatera Utara

3.3.2 Activity Diagram
Activity Diagram adalah diagram yang menggambarkan workflow
(aliran kerja) atau aktivitas dari sebuah sistem atau proses bisnis. Yang
perlu diperhatikan adalah bahwa diagram aktivitas

menggambarkan

aktivitas sistem bukan apa yang dilakukan aktor, jadi aktivitas yang dapat
dilakukan oleh sistem.
3.3.2.1

Activity Diagram Admin
Activity diagram admin menggambarkan aliran kerja dari sistem

admin yang dimana admin bisa menambahkan data dosen, data mahasiswa

dan melihat timeline bimbingan skripsi yang sedang berlangsung.
Admin

Website

Membuka
Halaman Website

Server

Menampilkan
Halaman Menu

Tambah Data
Dosen dan
Mahasiswa

Data Dosen

Data

Mahasiswa

Simpan ke
Database

Lihat Timeline
Bimbingan Skripsi

Tampilkan
Timeline
Bimbingan Skripsi

Gambar 3.3.3.1 Activity Diagram Admin
4
Universitas Sumatera Utara

3.3.2.2 Activity Diagram Mahasiswa dan Dosen
Activity diagram mahasiswa menggambarkan aliran kerja sistem
pada aplikasi dimana mahasiswa dan dosen dapat mengirimkan pesan dan
mendapatkan pesan dari dosen bimbingan skripsi. Mahasiswa dapat

membuat timeline bimbingan, sedangkan dosen berfungsi merubah action
dari timeline bimbingan
Mahasiswa

Aplikasi

Buka Aplikasi

Tampilkan Aplikasi

Server

Dosen

Buka Aplikasi

Buka Pesan

Buat Timeline

Tampilkan Pesan

Kirim Pesan

Ubah Keterangan
Action Timeline

Action Timeline

Ubah Keterangan

Simpan

Tambahkan
Timeline

Buat Pesan

Simpan

Menyimpan ke
Database

Kirim Pesan

Simpan Pesan

Tampilkan Pesan

Gambar 3.3.3.2 Activity Diagram Mahasiswa dan Dosen
5
Universitas Sumatera Utara

3.3.3 Diagram ER (Entity Relationship)
Diagram ER merupakan suatu model untuk menjelaskan hubungan antar
data dalam basis data berdasarkan objek-objek dasar data yang mempunyai
hubungan antar relasi.

Gambar 3.3.1. Diagram ER (Entity Relationship)

3.3.4 Perancangan Basis Data
Perancangan basis data adalah proses perancangan data yang di butuhkan
untuk mendukung rancangan sistem, yang bertujuan untuk memenuhi informasi
yang berisi kebutuhan user dan aplikasi.
a. Struktur Tabel
Tabel-tabel yang digunakan dalam sistem bimbingan skripsi online terdiri
dari:
1. Tabel Dosen
Tabel dosen digunakan untuk menyimpan data dosen yang ada

6
Universitas Sumatera Utara

No

Nama Field

Tipe Data

Ukuran

1

Id

int

11

2

Nama

varchar

100

3

Nip

varchar

100

4

Email

varchar

20

5

hp

varchar

20

Tabel 3.3.4 (a.1). Struktur Tabel dosen

2. Tabel Pesan
Tabel pesan digunakan untuk menyimpan data percakapan yang
ditampilkan pada menu.
No

Nama Field

Tipe Data

Ukuran

1

Id

int

11

2

Pesan_to

int

11

3

Pesan_from

int

11

4

pesan

text

-

5

dates

date

-

Tabel 3.3.4 (a.2). Tabel Pesan

3. Tabel Mahasiswa
Tabel Mahasiswa digunakan untuk menyimpan data mahasiswa yang
telah memulai bimbingan.

7
Universitas Sumatera Utara

No

Nama Field

Tipe Data

Ukuran

1

Id

int

11

2

nama

varchar

100

3

NIM

varchar

100

4

Email

varchar

100

5

Jurusan

varchar

20

6

Judul_skripsi

varchar

100

Tabel 3.3.4 (a.3). Mahasiswa
4. Tabel Admin
Tabel admin digunakan untuk menyimpan data dari admin jurusan
No
Nama Field
Tipe Data
Ukuran
1

Id

int

11

2

Username

varchar

100

3

Password

varchar

100

Tabel 3.3.4 (a.4). Tabel Admin
5. Tabel Timeline
Tabel timeline digunakan untuk menyimpan data dari timeline yang di
buat.

No

Nama Field
Id

Tipe Data

Ukuran

nt

11

imeline_from

archar

100

imeline_to

archar

100

imeline

ext

keterangan

archar

20

Tabel 3.3.4 (a.5). Tabel Timeline

8
Universitas Sumatera Utara

3.3.5

Perancangan Aliran Data
Menggambarkan aliran data masuk dan keluar dari sistem yang di
buat, dan dirancangan menggunakan Data Flow Diagram (DFD). Data
Flow Diagram adalah alat pembuatan model yang menggambarkan
pembagian sistem sebagai suatu jaringan proses fungsional yang di
hubungkan satu sama lain dengan alur data, baik secara manual maupun
komputerisasi.

Admin
Semua Data

Semua Data
Perbaikan Data
- Mengirim Pesan
- Keterangan Timeline

- Pesan Terkirim
- Membuat Timeline

Mahasiswa

Dosen

Sistem Informasi Aplikasi
Bimbingan Skripsi
- Pesan Masuk
- Judul Skripsi
- Data Diri
- Data Dosen
- Keterangan Timeline

- Judul Skripsi
- Data Dosen
- Pesan Masuk

Gambar 3.3.5. Data Flow Diagram

3.3.6 Perancangan Interface
Interface atau antar muka dari sistem bimbingan skripsi online
yang akan di bangun terdiri dari, interface admin, interface mahasiswa,
dan interface dosen.

9
Universitas Sumatera Utara

3.3.6.1 Interface admin
a. Halaman Login Admin
Halaman login adalah tampilan awal yang disediakan untuk
pengguna mengakses halaman menu admin.

Gambar a. Halaman Login Admin

b. Halaman Menu Admin
Tampilan perancangan antar muka Admin, terdapat beberapa menu
antara lain adalah Student Management yang berfungsi sebagai
menambah, mengubah, atau menghapus data mahasiswa bimbingan
skripsi. Dan menu dosen management yang berfungsi menambah,
mengubah atau menghapus data dosen.

10
Universitas Sumatera Utara

Gambar b. Halaman Menu Admin

c. Tampilan Student Management
Menampilkan daftar mahasiswa yang sudah atau sedang menjalani
bimbingan skripsi dan berfungsi untuk mendaftarkan bimbingan
skripsi mahasiswa sekaligus menginput judul dan dosen bimbingan.

Gambar c. Tampilan Student Management

11
Universitas Sumatera Utara

d. Tampilan Dosen Management
Dosen Management berfungsi untuk menginput data atau profil
dari dosen agar id dosen bisa terdaftar di database dan bisa
berkomunikasi dengan mahasiswa bimbingan.

Gambar d. Tampilan Dosen Management

e. Tampilan Timeline Bimbingan Skripsi
Tampilan timeline bimbingan skripsi berguna agar pihak jurusan
dapat melihat perkembangan proses bimbingan skripsi mahasiswa,
yang dapat dilihat dari timeline yang sedang berjalan, dan timeline
tersebut di buat oleh pihak mahasiswa dan dosen pembimbing.

Gambar e. Tampilan Timeline Bimbingan Skripsi

12
Universitas Sumatera Utara

3.3.6.2 Interface Mahasiswa
a. Halaman Login Mahasiswa
Halaman login pada mahasiswa disediakan agar mahasiswa dapat
mengakses halaman menu agar dapat memulai bimbingan secara
online.

Gambar a. Halaman Login Mahasiswa

b. Halaman Menu Mahasiswa

Halaman menu mahasiswa menampilkan 2 menu diantaranya
adalah menu pesan yang berfungsi untuk berkomunikasi atau
berinteraksi dengan dosen pembimbing, dan menu timeline yang
menampilkan timeline bimbingan yang sudah di lewati.

13
Universitas Sumatera Utara

Gambar b. Halaman Menu Mahasiswa
c. Tampilan Pesan Mahasiswa
Pada menu pesan, mahasiswa dapat membuat pesan yang langsung
ditujukan ke dosen pembimbing yang sudah ditentukan oleh admin
sebelumnya.

Gambar c. Tampilan Pesan Mahasiswa

14
Universitas Sumatera Utara

d. Tampilan Timeline Bimbingan
Timeline bimbingan ini menampilkan proses pembuatan skrispi
yang sudah di lewati yang di kontrol oleh dosen. Dan terdapat menu
export yang berguna untuk menyimpan data timeline kedalam file
excel.

Gambar d. Timeline Bimbingan Mahasiswa

3.3.6.3 Interface Dosen
a. Halaman Login Dosen
Halaman login pada dosen disediakan agar dosen dapat mengakses
halaman menu agar dapat memulai bimbingan secara online.

15
Universitas Sumatera Utara

Gambar a. Halaman Login Dosen
b. Halaman Menu Dosen
Halaman menu dosen menyediakan daftar pesan dari mahasiswa
bimbingannya, dan timeline kontrol yang dapat di akses oleh dosen
bersangkutan untuk menentukan timeline mahasiswa tersebut selesai
atau belum.

Gambar b. Halaman Menu Dosen

16
Universitas Sumatera Utara

c. Halaman Timeline Dosen
Halaman timeline dosen berguna untuk membuat timeline
mahasiswa bimbingan sekaligus member keterangan timeline tersebut
selesai atau belum selesai.

Gambar c. Halaman Timeline Dosen

17
Universitas Sumatera Utara

BAB IV
IMPLEMENTASI

4.1 Umum
Bab ini membahas tentang penerapan dari seluruh rancangan yang sudah
dibuat sebelumnya dengan aplikasi program yang sudah ditentukan. Sistem dibuat
berbasis website untuk pihak jurusan atau admin, dan android untuk mahasiswa
dan dosen.

4.2 Implementasi Perangkat
Perangkat keras yang digunakan untuk melakukan perancangan aplikasi
adalah:
Laptop Lenovo G480, dengan spesifikasi sebagai berikut:
a. Processor Intel(R) Core (TM) i3-3210M CPU 2.50GHZ
b. Memory 4.00GB
c. Harddisk 500GB
Spesifikasi perangkat lunak yang digunakan adalah:
a. Sistem Operasi Windows 7 Ultimate
b. Notepad++
d. AppServ
e. Web Browser Google Crome
f. Android Studio

18
Universitas Sumatera Utara

4.3 Tampilan Antar Muka Website Admin
Berikut adalah tampilan antar muka website admin untuk Aplikasi
Bimbingan Skripsi Online yang telah di buat:

4.3.1 Tampilan Website Halaman Login Admin
Halaman login adalah halaman pertama yang ditampilkan kepada
pengguna ketika akan mengakses aplikasi bimbingan skripsi online.

Gambar 4.3.1. Tampilan Halaman Login Admin

4.3.2 Tampilan Halaman Website Admin
Halaman Admin terdapat beberapa menu di antaranya adalah menu
Student Management, dan Dosen Management. Student Management,
Dosen Management masing-masing berfungsi untuk menambah atau
menghapus mahasiswa atau dosen yang akan menggunakan aplikasi
bimbingan skripsi online.

19
Universitas Sumatera Utara

Gambar 4.3.2. Tampilan Halaman Website Admin

4.3.3 Tampilan Website Student Management
Student management adalah menu yang menampilkan data
dari mahasiswa,diantaranya nama, NIM, Email, Jurusan, Judul
skripsi, status, dan action. Action ini berfungsi mengubah atau
menghapus data dari mahasiswa.

Gambar 4.3.3. Tampilan Student Management

20
Universitas Sumatera Utara

4.3.3.1 Tampilan Website Student Management (Tambah)
Tombol tambah berfungsi menambah kan data dari
mahasiswa. Dapat menginput data diantaranya nama, NIM,
email, jurusan, dan judul.

Gambar 4.3.3.1. Tampilan Website Student Management (Tambah)

4.3.4 Tampilan Website Dosen Management
Dosen management adalah menu yang menampilkan data
dari dosen, diantaranya adalah nama, NIP, email, no hp, status dan
action. Action ini berfungsi mengubah atau menghapus data dari
dosen.

Gambar 4.3.4. Tampilan Website Dosen Management

21
Universitas Sumatera Utara

4.3.4.1 Tampilan Website Dosen Management (Tambah)
Tombol tambah berfungsi menambah kan data dari
mahasiswa. Dapat menginput data diantaranya adalah nama,
NIP, email, no hp.

Gambar 4.3.4.1. Tampilan Website Dosen Management (Tambah)
4.3.5 Tampilan Website Timeline Bimbingan Skripsi
Tabel Timeline bimbingan skripsi hanya menampilkan
timeline yang sudah di buat oleh mahasiswa, dan dosen.
Menampilkan tanggal yang telah di buat mahasiswa dan
“SELESAI” yang hanya bisa dibuat oleh dosen, ketika timeline
selesai dikerjakan.

Gambar 4.3.5. Tampilan Website Timeline Bimbingan Skripsi

22
Universitas Sumatera Utara

4.4

Tampilan Antar Muka Android Mahasiswa
Berikut adalah tampilan antar muka android mahasiswa untuk Aplikasi

Bimbingan Skripsi Online yang telah di buat:

4.4.1 Tampilan Halaman Login Mahasiswa
Halaman login adalah halaman pertama untuk mahasiswa
yang ditampilkan ketika akan mengakses aplikasi bimbingan
skripsi online. Dengan memasukan id dan password, mahasiswa
dapat mengakses halaman menu yang tersedia.

Gambar 4.4.1. Tampilan Halaman Login Mahasiswa

23
Universitas Sumatera Utara

4.4.2 Tampilan Halaman Menu Bimbingan Skripsi Mahasiswa
Halaman menu ini menampilkan profil dari mahasiswa,
pesan untuk berkomunikasi dengan dosen pembimbing, dan
timeline bimbingan skripsi.

Gambar 4.4.2. Tampilan Halaman Menu Bimbingan Skripsi Mahasiswa

24
Universitas Sumatera Utara

4.4.3 Tampilan Halaman Pesan Bimbingan Skripsi Mahasiswa
Halaman pesan ini di fungsikan untuk berkomunikasi
dengan dosen pembimbing skripsi, mengirimkan pesan untuk
melakukan dan melanjutkan proses pengerjaan skripsi.

Gambar 4.4.3. Tampilan Halaman Pesan Bimbingan Skripsi
Mahasiswa

4.4.3.1 Tampilan Select Dosen Pesan Bimbingan Skripsi
Tampilan ini berfungsi untuk membantu mahasiswa
memilih dosen mana yang akan di kirimkan pesan untuk
melanjutkan bimbingan skripsi.

25
Universitas Sumatera Utara

Gambar 4.4.3.1 Tampilan Select Dosen Pesan Bimbingan Skripsi

4.4.4 Tampilan Add Timeline Bimbingan Skripsi
Tampilan Add Timeline berfungsi untuk menambahkan atau
membuat timeline bimbingan skripsi, mahasiswa membuat judul
atau nama timeline dan membuat tanggal pengerjaan dari timeline
tersebut.

26
Universitas Sumatera Utara

Gambar 4.4.4. Tampilan Add Timeline Bimbingan Skripsi

4.4.5 Tampilan Export Timeline Bimbingan Skripsi
Tampilan Export dari timeline yang sudah di buat, bisa kita
lihat dalam bentuk format excel. Yang menampilkan tabel-tabel
dari tanggal, judul timeline, dan keterangan timeline.

Gambar 4.4.4 Tampilan Export Timeline Bimbingan Skripsi

27
Universitas Sumatera Utara

4.5

Tampilan Antar Muka Android Dosen

Berikut adalah tampilan antar muka android mahasiswa untuk Aplikasi
Bimbingan Skripsi Online yang telah di buat:

4.5.1 Tampilan Halaman Login Dosen
Halaman login adalah halaman pertama untuk dosen yang
ditampilkan ketika akan mengakses aplikasi bimbingan skripsi online. Dengan
memasukan id dan password, mahasiswa dapat mengakses halaman menu yang
tersedia.

Gambar 4.5.1. Tampilan Halaman Login Dosen

28
Universitas Sumatera Utara

4.5.2 Tampilan Halaman Menu Bimbingan Skripsi Dosen
Halaman ini menampilkan beberapa menu yang diantaranya adalah
table pesan untuk berkomunikasi dengan mahasiswa, dan timeline bimbingan
skripsi yang telah di buat oleh mahasiswa.

Gambar 4.5.2. Tampilan Halaman Menu Bimbingan Skripsi Dosen
4.5.3 Tampilan Action Timeline Bimbingan Skripsi
Halaman Action timeline ini terdapat 2 pilihan yaitu edit yang berfungsi
untuk mengubah timeline yang sudah di buat oleh mahasiswa, dan remove untuk
menghapus timeline yang tidak sesuai.

29
Universitas Sumatera Utara

Gambar 4.5.3. Tampilan Action Timeline Bimbingan Skripsi

4.5.3.1 Tampilan Edit Pada Menu Action Timeline
Pada halaman ini menu edit berfungsi merubah keterangan tanggal pada
timeline menjadi “SELESAI”, saat timeline sudah selesai dikerjakan.

Gambar 4.5.3.1 Tampilan Edit Pada Menu Action Timeline

30
Universitas Sumatera Utara

BAB V
KESIMPULAN DAN SARAN

3.4 Kesimpulan
Kesimpulan dari pembahasan pada Tugas Akhir ini adalah sebagai berikut :
1.

Berdasarkan fitur-fitur aplikasi yang telah dirancang. Pada fitur timeline,
pihak Departemen Teknik Elektro dapat memantau bimbingan skripsi
mahasiswa dengan melihat tabel timeline yang tersedia pada halaman utama
website admin.

2.

Pada

aplikasi

android

yang

dirancang,

aplikasi

dibuat

dengan

memanfaatkan aplikasi webview pada android studio, yang menyediakan
aplikasi web browser. Aplikasi android ini berguna untuk mahasiswa ataupun
dosen langsung mengakses website dari Bimbingan Skripsi Online dengan cara
membuka aplikasi Bimbingan Skripsi Online.

3.5 Saran
Beberapa saran yang dapat diberikan sehubungan dengan penulisan Tugas
Akhir ini ialah sebagai berikut:
1.

Untuk selanjutnya format export yang terdapat di timeline bisa mengikuti
format log book yang sudah ada, untuk di serahkan ke administrasi pihak
jurusan.

2.

Untuk selanjutnya di tambahkan sistem warning untuk timeline yang
pengerjaan bimbingan skripsinya sudah terlalu lama.

31
Universitas Sumatera Utara