bab 3 metode dan perancangan sistem -...

46
12 Bab 3 Metode dan Perancangan Sistem Pada bab ini akan dibahas mengenai metode perancangan yang digunakan dalam membuat aplikasi pendaftaran pelatihan online beserta rancangan berupa desain dan tabel-tabel yang terdapat dalam aplikasi tersebut. 3.1 Metode Pengembangan Sistem Pada bagian ini akan dijelaskan tentang metode penelitian yang akan digunakan dalam pengembangan sistem. Metode penelitian yang dipakai adalah metode Prototyping. 3.1.1 Metode Prototyping Prototyping merupakan proses yang membantu pengembang perangkat lunak dalam membentuk model dari perangkat lunak yang harus dibuat. Prototype ini berfungsi sebagai awal dalam pendefinisian kebutuhan sistem. Keunggulan dari metode prototyping ini adalah end-user dapat berperan aktif, penentuan kebutuhan lebih mudah diwujudkan, dan mempersingkat waktu pengembangan sistem informasi. Paradigma dari metode prototyping adalah sistem informasi yang menggambarkan hal-hal penting dari sistem

Upload: nguyenduong

Post on 18-Mar-2019

227 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

12

Bab 3

Metode dan Perancangan Sistem

Pada bab ini akan dibahas mengenai metode perancangan

yang digunakan dalam membuat aplikasi pendaftaran pelatihan

online beserta rancangan berupa desain dan tabel-tabel yang

terdapat dalam aplikasi tersebut.

3.1 Metode Pengembangan Sistem

Pada bagian ini akan dijelaskan tentang metode penelitian

yang akan digunakan dalam pengembangan sistem. Metode

penelitian yang dipakai adalah metode Prototyping.

3.1.1 Metode Prototyping

Prototyping merupakan proses yang membantu

pengembang perangkat lunak dalam membentuk model dari

perangkat lunak yang harus dibuat. Prototype ini berfungsi

sebagai awal dalam pendefinisian kebutuhan sistem. Keunggulan

dari metode prototyping ini adalah end-user dapat berperan aktif,

penentuan kebutuhan lebih mudah diwujudkan, dan

mempersingkat waktu pengembangan sistem informasi.

Paradigma dari metode prototyping adalah sistem

informasi yang menggambarkan hal-hal penting dari sistem

Page 2: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

13

informasi yang akan datang. Prototype sistem informasi bukanlah

merupakan suatu sistem yang lengkap, tetapi sesuatu yang harus

dimodifikasi kembali, dikembangkan, ditambahkan atau

digabungkan dengan dengan sistem informasi yang lain bila

perlu.

Gambar 3.1 Metode Prototyping (Pressman, 2001)

Secara garis besar, metode prototyping dapat dilihat pada

Gambar 3.1 diatas. Setiap tahap yang dimiliki memiliki langkah-

langkah secara terurut. Adapun langkah-langkah yang dilakukan

penulis dalam penelitian ini adalah sebagai berikut :

1. Pengumpulan kebutuhan (Requirement Gathering).

Pengembang perangkat lunak dan pengguna (user), dalam

hal ini adalah ketua dari Certificate Training Center

(CTC), bertemu untuk menentukan tujuan secara

keseluruhan dari perangkat lunak, dimana keduanya

bersama-sama mengidentifikasi kebutuhan-kebutuhan apa

yang diperlukan.

Page 3: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

14

2. Penulis melakukan perancangan kilat atau perancangan

dengan cepat (Quick Design).

Berdasarkan pada tahap pengumpulan kebutuhan

perangkat lunak, maka pengembang dapat melakukan

perancangan dengan cepat, dimana perancangan ini hanya

memfokuskan pada perancangan antarmuka (interface)

perangkat lunak yang dapat dilihat secara visual oleh

pengguna, misalnya pendekatan masukan maupun format

keluaran. Sehingga apapun yang dibutuhkan oleh

pengguna (user) dapat langsung diketahui dan

diimplementasikan pada tahap ini.

3. Penulis membangun Prototype (Building Prototype).

Pada tahap ini pengembang membuat prototype yang

dihasilkan dari tahap perancangan kilat.

4. Evaluasi Pengguna (user) Kepada Prototype (User

evaluation of prototype).

Hasil yang didapat digunakan untuk menyimpulkan

kebutuhan-kebutuhan untuk pengembangan perangkat

lunak pada tahap selanjutnya.

5. Penulis melakukan perbaikan Prototype (Refining

Prototype).

Perbaikan dilakukan apabila terjadi kesalahan dan ada

usulan dari pengguna (user). Iterasi proses yang terjadi

ketika prototype diperbaiki, pada saat yang sama

memungkinkan pengembang secara lebih baik memahami

Page 4: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

15

apa yang harus dilakukan. Pembangunan produk

(Engineer Product) pada tahap ini dilakukan pembuatan

prototype sebagai produk jadi yang telah melewati tahap-

tahap sebelumnya.

3.2 Metode Perancangan Sistem

Perancangan sistem yang akan dibuat pada penelitian ini

menggunakan UML (Unified Modelling Language).

3.2.1 Use Case Diagram

Use case diagram menggambarkan hubungan antara user

dan sistem yaitu bagaimana user memanfaatkan atau

menggunakan sistem tersebut. Use case diagram

mendeskripsikan rangkaian kegiatan yang dijalankan oleh

aplikasi dan menggambarkan hubungan antara masing-masing

aktor dengan setiap proses yang digambarkan melalui setiap use

case. Setiap use case menggambarkan sebuah proses yang

terdapat dalam sistem yang akan dikembangkan.

Dari hasil wawancara serta evaluasi yang didapatkan pada

penyerahan prototype, dapat diketahui fungsionalitas yang harus

dimiliki oleh aplikasi yang dibangun serta user yang terdapat

dalam sistem. Use case diagram sistem dapat dilihat pada

Gambar 3.2.

Page 5: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

16

Gambar 3.2 Use Case Diagram Sistem

Pada Gambar 3.2 diatas terdapat 2 (dua) user yaitu admin

dan member. Use Case Diagram diatas juga menjelaskan fungsi-

fungsi apa saja yang dapat dilakukan dengan menggunakan hak

akses sebagai admin dan member. Fungsi-fungsi yang dapat

dilakukan oleh seorang admin adalah melihat track record

peserta, dapat mengubah password, menginput data pelatihan,

melihat jadwal pelatihan yang telah diinput, membuat artikel,

membuat berita, memberikan komentar, menghapus pelatihan,

mengkonfirmasi atau mengupdate status pembayaran peserta,

melihat laporan mengenai pelatihan yang saat ini sedang

Page 6: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

17

diadakan dan yang telah diadakan sebelumnya, dan lain-lain

seperti yang terlihat pada use case diagram pada Gambar 3.1.

Adapun fungsi-fungsi yang dapat dilakukan oleh seorang

Member adalah mendaftarkan diri sebagai member, melihat daftar

pelatihan (training), mendaftar pelatihan (training), melihat track

record atau rekam jejak peserta yang bersangkutan, dan fungsi-

fungsi lain seperti yang tergambar pada use case diagram pada

Gambar 3.1.

3.2.2 Activity Diagram

Activity diagram menggambarkan berbagai alir aktivitas

dalam sistem yang sedang dirancang, bagaimana masing-masing

alir berawal, decision yang mungkin terjadi, dan bagaimana

mereka berakhir. Activity diagram juga dapat menggambarkan

proses paralel yang mungkin terjadi pada beberapa eksekusi.

Activity diagram tidak menggambarkan behaviour internal sebuah

sistem (dan interaksi antar subsistem) secara eksak, tetapi lebih

menggambarkan proses-proses dan jalur aktivitas dari level atas

secara umum. Untuk kebutuhan proses yang akan dibangun,

terdapat 2 (dua) activity diagram, yaitu activity diagram input

pelatihan oleh Administrator atau Admin dan activity diagram

mendaftar pelatihan oleh Member.

Page 7: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

18

Gambar 3.3 Activity Diagram Input Pelatihan Oleh Admin

Gambar 3.3 diatas menggambarkan aktivitas-aktivitas

yang dilakukan dengan menggunakan hak akses sebagai Admin.

Untuk memulai menggunakan sistem, terlebih dahulu Admin

harus melakukan login, tanpa melakukan login, Admin tidak

dapat mengakses sistem. setelah melakukan login, Admin

memilih menu master data dan pilih kegiatan, setelah sistem

menampilkan halaman input kegiatan, maka Admin dapat

melakukan penginputan dengan memasukkan data sesuai field

yang ditentukan. Setelah selesai menginput data pelatihan,

selanjutnya sistem akan menyimpan hasil inputan dan sistem

Page 8: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

19

dengan otomatis akan menampilkan hasil inputan dalam tabel

pelatihan.

Gambar 3.4 Activity Diagram mendaftar Pelatihan Oleh Member

Pada Gambar 3.4 diatas menjelaskan aktivitas-aktivitas

yang dilakukan dengan menggunakan hak akses sebagai Member.

Kevalidan username dan password yang masukkan akan

diperiksa oleh sistem, apabila inputan member adalah valid, maka

sistem akan terbuka, tetapi apabila tidak valid, maka member

akan tetap berada pada form login. Selanjutnya setelah Member

berhasil login, maka selanjutnya Member memilih menu

pelatihan, menu ini berfungsi untuk melihat detail kelas pelatihan

yang dibuka dan untuk melihat daftar peserta yang telah terdaftar.

Sebelum mendaftar, Member harus mengecek terlebih dahulu

apakah dirinya telah terdaftar atau belum, jika belum terdaftar

Page 9: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

20

maka Member dapat melakukan pendaftaran pada menu pelatihan

yang dibuka.

Gambar 3.5 Melihat Track Record Oleh Peserta

Gambar 3.5 adalah activity diagram melihat track record

oleh peserta secara online. Sebelum melakukan kegiatan ini,

sudah pasti peserta harus melakukan login terlebih dahulu.

Apabila telah melakukan login, maka peserta dapat melihat track

record yang dimilikinya. Pelatihan yang dipilih setelah

melakukan pendaftaran, pada akhirnya akan masuk ke dalam

track record.

Page 10: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

21

Gambar 3.6 Melihat Track Record Oleh Admin

Gambar 3.6 adalah activity diagram melihat track record

oleh admin. Pada bagian ini sudah tentu admin harus melakukan

login terlebih dahulu untuk dapat mengakses halaman ini.

Halaman ini juga berfungsi untuk melihat data peserta pelatihan

yang telah mengikuti pelatihan selama periode yang ditentukan.

Dari data-data inilah nantinya pihak Certificate and Training

Center dapat membuat sebuah keputusan yang menyatakan

bahwa seorang peserta tertentu telah mencapai level keahlian

tertentu.

3.2.3 Sequence Diagram

Sequence diagram menggambarkan interaksi antar objek

di dalam dan disekitar sistem berupa message yang digambarkan

terhadap waktu. Sequence diagram terdiri atas terdiri atas dimensi

Page 11: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

22

vertikal (waktu) dan dimensi horizontal (objek–objek yang

terkait). Sequence diagram biasanya digunakan untuk

menggambarkan skenario atau serangkaian langkah–langkah

yang dilakukan sebagai respons dari sebuah event untuk

menghasilkan output tertentu.

- Sequence Diagram Admin

Aktifitas-aktifitas yang dilakukan seorang Admin adalah

melihat track record atau rekam jejak peserta, membuat artikel,

membuat berita atau pengumuman, menginput pelatihan baru,

hapus, update, serta melihat pelatihan, lihat status pembayaran,

update status pembayaran, dan mengubah password, dan lain-

lain. Gambar 3.7 di bawah adalah Sequence Diagram yang

menjelaskan proses penginputan pelatihan baru oleh Admin.

Page 12: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

23

Gambar 3.7 Sequence Diagram input Pelatihan Oleh Admin

Pada Gambar 3.7 diatas merupakan Sequence Diagram

input pelatihan oleh Admin. Penjelasan dari Sequence Diagram

diatas adalah :

Seorang Admin harus melakukan login ke aplikasi dengan

memasukkan username dan password sehingga dapat

melakukan hak aksesnya.

Data login yang dimasukkan oleh user, akan diteruskan ke

database skripsi untuk dilakukan pemerikasaan kevalidan

sesuai dengan hak aksesnya.

Page 13: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

24

Diasumsikan bahwa login user valid, sehingga Admin

dapat langsung ke halaman home_admin.

Dalam halaman home_admin terdapat banyak menu.

Dalam Sequence Diagram ini, Admin memilih menu

master data dan sub menu kegiatan sehingga sistem

langsung menampilkan form input pelatihan.

Admin menginput data pelatihan baru pada form yang

telah ditampilkan oleh sistem.

Inputan pelatihan baru oleh admin kemudian diproses dan

disimpan pada Tabel_kegiatan di database.

Setelah selesai menyimpan data, maka secara otomatis

sistem akan langsung menampilkan daftar pelatihan.

Untuk menutup aplikasi, Admin harus melakukan log out

sehingga database skripsi tertutup yang disusul dengan

tertutupnya halaman home_admin.

Untuk menu pengaturan aktifitas lainnya oleh Admin

seperti adalah melihat track record atau rekam jejak peserta,

membuat artikel, membuat berita atau pengumuman, menginput

pelatihan baru, hapus, update, serta melihat pelatihan, lihat status

pembayaran, update status pembayaran, dan mengubah password

hampir sama dengan Sequence Diagram untuk pengaturan user

Administrator pada Gambar 3.7 diatas. Hanya saja nama form

dan tabel dalam basis data yang digunakan berbeda, hal tersebut

tergantung pada menu yang dipilih.

Page 14: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

25

Gambar 3.8 Sequence Diagram Melihat Track Record Oleh Admin

Sequence Diagram pada Gambar 3.8 diatas

menggambarkan proses melihat track record oleh admin.

Penjelasan Sequence Diagram diatas adalah sebagai berikut :

Sebelum masuk ke dalam aplikasi dan dapat memakai hak

akses sebagai admin, user harus memasukkan username

dan password didalam form login.

Setelah memasukkan username dan password, masukkan

akan dikirim ke database untuk dicek kevalidannya.

Diasumsikan bahwa username dan password valid, maka

sistem akan langsung menampilkan halaman

home_admin.

Page 15: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

26

Selanjutnya admin memilih menu laporan pelatihan dan

submenu track record. Dalam menu ini terdapat semua

data-data mengenai nama-nama peserta yang telah

terdaftar dalam sistem.

Apabila admin ingin melihat track record salah satu

peserta, maka admin dapat mengklik nama peserta yang

kemudian sistem akan menampilkan informasi mengenai

pelatihan yang telah diikuti bahkan yang sedang diikuti,

mulai dari nama pelatihan, tanggal, hingga level dari

setiap pelatihan yang diikuti.

Untuk menutup aplikasi, admin harus melakukan log out

sehingga database skripsi tertutup yang disusul dengan

tertutupnya halaman home_admin.

Untuk menu pengaturan aktifitas lainnya oleh Admin

seperti adalah melihat track record atau rekam jejak peserta,

membuat artikel, membuat berita atau pengumuman, menginput

pelatihan baru, hapus, update, serta melihat pelatihan, lihat status

pembayaran, update status pembayaran, dan mengubah password

hampir sama dengan Sequence Diagram untuk pengaturan user

Admin pada Gambar 3.8 diatas. Hanya saja nama form dan tabel

dalam basis data yang digunakan berbeda, hal tersebut tergantung

pada menu yang dipilih.

Page 16: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

27

- Sequence Diagram Member

Aktifitas-aktifitas yang dilakukan oleh seorang Member

adalah melihat daftar pelatihan, daftar pelatihan, melihat track

record, hapus pelatihan yang telah dipilih, melihat data

pembayaran, lihat profile, edit profile, membaca berita, membaca

artikel, dan memberikan komentar pada setiap artikel, kegiatan

dan berita. Gambar 3.9 di bawah ini menggambarkan Sequence

Diagram mendaftar pelatihan oleh seorang Member.

Page 17: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

28

Gambar 3.9 Sequence Diagram Pendaftaran Pelatihan Oleh Member

Sequence Diagram pada Gambar 3.9 diatas

menggambarkan proses pendaftaran pelatihan (training) oleh

member. Penjelasan Sequence Diagram diatas adalah sebagai

berikut :

Sebelum masuk ke dalam aplikasi dan dapat memakai hak

akses sebagai Member, user harus memasukkan username

dan password didalam form login.

Page 18: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

29

Setelah memasukkan username dan password, masukkan

akan dikirim ke database untuk dicek kevalidannya.

Diasumsikan bahwa username dan password valid, maka

sistem akan langsung menampilkan halaman

home_member.

Selanjutnya Member memilih menu pelatihan. Dalam

menu ini terdapat semu informasi mengenai pelatihan,

mulai dari pembicara hingga kapan pendaftaran akan

ditutup. Di dalam menu ini juga Member dapat mengecek

apakah dirinya telah terdaftar atau belum dengan

mengklik tanda peserta.

Apabila Member belum terdaftar , maka member akan

melanjutkan ke menu pelatihan yang dibuka. Dalam menu

ini, member dapat mendaftarkan dirinya dalam pelatihan

yang diinginkan.

Untuk menutup aplikasi, member harus melakukan log out

sehingga database skripsi tertutup yang disusul dengan

tertutupnya halaman home_member.

Untuk menu pengaturan aktifitas lainnya oleh member

seperti adalah melihat daftar pelatihan, daftar pelatihan, melihat

track record, hapus pelatihan yang telah dipilih, melihat data

pembayaran, lihat profile, dan edit profile hampir sama dengan

Sequence Diagram untuk pengaturan user member pada Gambar

3.8 diatas. Hanya saja nama form dan tabel dalam basis data yang

Page 19: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

30

digunakan berbeda, hal tersebut tergantung pada menu yang

dipilih.

Gambar 3.10 Sequence Diagram Lihat Track Record Oleh Member

Sequence Diagram pada Gambar 3.10 diatas

menggambarkan proses melihat track record oleh member.

Penjelasan Sequence Diagram diatas adalah sebagai berikut :

Sebelum masuk ke dalam aplikasi dan dapat memakai hak

akses sebagai Member, user harus memasukkan username

dan password didalam form login.

Setelah memasukkan username dan password, masukkan

akan dikirim ke database untuk dicek kevalidannya.

Page 20: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

31

Diasumsikan bahwa username dan password valid, maka

sistem akan langsung menampilkan halaman

home_member.

Selanjutnya Member memilih menu report dan submenu

track record. Dalam menu ini terdapat semua informasi

mengenai pelatihan yang telah diikuti bahkan yang sedang

diikuti, mulai dari nama pelatihan, tanggal, hingga level

dari setiap pelatihan yang diikuti.

Untuk menutup aplikasi, member harus melakukan log out

sehingga database skripsi tertutup yang disusul dengan

tertutupnya halaman home_member.

Untuk menu pengaturan aktifitas lainnya oleh member

seperti adalah melihat daftar pelatihan, daftar pelatihan, melihat

track record, hapus pelatihan yang telah dipilih, melihat data

pembayaran, lihat profile, dan edit profile hampir sama dengan

Sequence Diagram untuk pengaturan user member pada Gambar

3.9 diatas. Hanya saja nama form dan tabel dalam basis data yang

digunakan berbeda, hal tersebut tergantung pada menu yang

dipilih.

3.2.4 Class Diagram

Class Diagram adalah sebuah spesifikasi yang jika

diinstasikan akan menghasilkan sebuah obyek dan merupakan inti

dari pengembangan desain berorientasi obyek. Class

Page 21: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

32

menggambarkan keadaan (atribut/property) suatu sistem,

sekaligus menawarkan layanan untuk memanipulasi keadaan

tersebut (metode/fungsi).

Class Diagram menggambarkan struktur dan deskripsi

class, package dan obyek beserta hubungan satu sama lain seperti

pewarisan, asosiasi, dan lain-lain.

Aplikasi sistem pendaftaran online ini memiliki Class

Diagram seperti pada gambar 3.7 dibawah ini.

Page 22: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

33

Gambar 3.11 Class Diagram sistem

Aplikasi yang dibuat memiliki class diagram seperti yang

terlihat pada Gambar 3.11 diatas. Class diagram diatas dapat

dijelaskan sebagai berikut.

Class Member merupakan class yang berisi mengenai data

member yang memiliki 17 atribut. Class member ini memiliki

Page 23: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

34

relasi one to many pada class komentar. Hal itu dikarenakan

Member dapat memberikan satu atau lebih komentar pada bagian

yang diinginkan, antara kelas pelatihan, berita dan artikel. Class

Member juga memiliki relasi one to many pada class pelatihan,

hal itu berarti seorang member dapat memilih satu atau lebih

pelatihan sesuai dengan keinginannya.

Class peserta_pelatihan memiliki relasi one to one pada

class report, hal itu berarti peserta pelatihan hanya memiliki satu

laporan kegiatan dan satu laporan peserta. Class

peserta_pelatihan juga memiliki relasi one to many pada class

pelatihan, hal itu berarti seorang Member yang telah menjadi

peserta dapat memiliki satu atau lebih pelatihan dalam report

kegiatannya. Class peserta juga memiliki relasi one to many pada

class komentar, hal itu berarti bahwa seorang peserta apat

memberikan satu atau lebih komentar.

Class Admin memiliki relasi one to many pada class

artikel, class berita, dan class pelatihan. Hal itu berarti bahwa

seorang admin dapat membuat satu atau lebih berita, artikel dan

kelas pelatihan. Class Admin juga memiliki relasi one to many

pada class komentar dan class report. Hal itu berarti bahwa

seorang Admin dapat memiliki satu atau lebih report mengenai

pembayaran dan kegiatan. Seorang Admin juga dapat

memberikan satu atau lebih komentar pada pelatihan, berita atau

artikel yang ada.

Page 24: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

35

3.3 Perancangan Aplikasi

Perancangan Aplikasi terdiri atas perancangan database

dan perancangan interface sistem.

3.3.1 Perancangan Database

Perancangan database berisi mengenai tabel-tabel yang

terdapat pada database. Tabel merupakan komponen penting

dalam dalam pembuatan database, hal tersebut dikarenakan tabel

berfungsi untuk menyimpan data. Pada aplikasi ini terdapat 16

tabel, yaitu sebagai berikut :

- Tabel_about

Tabel_about menyimpan data-data yang akan ditunjukkan

sehubungan dengan Certiface Training Center (CTC) seperti

tema CTC, visi dan misi CTC, sejarah CTC, serta kontak CTC.

Struktur tabel_about dapat dilihat pada gambar dibawah ini.

Gambar 3.1 Tabel_about

Field Data Type Null Extra

Id int (255) no Primary key

url_title varchar (255) no

judul varchar (255) no

detail Text no

picture varchar (255) no

publish enum (‘yes’,’no’) no

Page 25: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

36

dateadd Datetime no

dateupd Datetime no

username varchar (255) no

Tabel 3.1 diatas menjelaskan field-field yang terdapat

dalam tabel tabel_out yang akan dirancang dalam database

beserta dengan tipe data tiap field. Dimana terdapat sembilan field

dalam tabel tahun ajaran dengan id sebagai primary key.

- Tabel_admin

Tabel_admin berfungsi untuk menyimpan data-data

mengenai Administrator. Struktur tabel tabel_admin dapat dilihat

pada Tabel 3.2

Tabel 3.2 Tabel_admin

Field Data Type Null Extra

Id Int(15) no Primary key

Kode Varchar (255) no

username Varchar (255) no

password Varchar (255) no

fullname Varchar (255) no

Photo Varchar (255) no

Sex Enum (‘l’,’p’) no

aksesrole Enum (‘a’,’o’) no

canLogin Enum (‘y’,n’’) no

dateadd Datetime no

Page 26: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

37

dateupd Datetime no

lastLogin Datetime no

lastLogout Datetime no

Tabel 3.2 diatas menjelaskan field-field yang terdapat

dalam tabel tabel_admin yang akan dirancang dalam database

beserta dengan tipe data tiap field. Dimana terdapat 13 field

dalam tabel tabel_admin dengan id sebagai primary key.

- Tabel_daftar

Tabel_daftar berfungsi untuk menyimpan data-data

mengenai data peserta pelatihan setelah melakukan pendaftaran.

Struktur tabel_daftar dapat dilihat pada Tabel 3.3.

Tabel 3.3 Tabel_daftar

Field Data Type Null Extra

Id Int (255) no Primary key

kodependaftaran Varchar (255) no

idKegiatan Varchar (255) no

Iduser Varchar (255) no

Status Enum (‘yes’,’no’) no

tglbayar Varchar (255) no

Expire Datetime no

dateadd Timestamp no

Page 27: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

38

Tabel 3.3 diatas menjelaskan field-field yang terdapat

dalam tabel tabel_daftar yang akan dirancang dalam database

beserta dengan tipe data tiap field. Dimana terdapat delapan field

dalam tabel tabel_admin dengan id sebagai auto_increment.

- Tabel_user

Tabel_user berfungsi untuk menyimpan data-data

mengenai peserta pelatihan setelah melakukan registrasi. Struktur

tabel tabel_user dapat dilihat pada Tabel 3.4.

Tabel 3.4 Tabel_user

Field Data Type Null Extra

Id Int (255) no Primary key

Kode Varchar (255) no

fullname Varchar (255) yes

tempatlahir Varchar (255) yes

Tgllhr Varchar (255) yes

Sex Enum (‘l’,’p’) yes

alamat Varchar (255) yes

Email Varchar (255) yes

Tlp Varchar (255) yes

pekerjaan Varchar (255) yes

username Varchar (255) yes

password Varchar (255) yes

canLogin Enum (‘y’,’n’) yes

Page 28: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

39

dateadd Datetime yes

dateupd Datetime yes

Foto Varchar (255) yes

lastlogin Datetime yes

lastlogout Datetime yes

Tabel 3.4 diatas menjelaskan field-field yang terdapat

dalam tabel_user yang akan dirancang dalam database beserta

dengan tipe data tiap field. Dimana terdapat delapan field dalam

tabel_user dengan id sebagai primary key.

- Tabel_peserta

Tabel_user merupakan hasil join antara tabel_user dan

tabel_daftar, tabel_peserta ini berfungsi untuk menyimpan data-

data peserta pelatihan setelah melakukan pendaftaran pelatihan.

Struktur tabel_user dapat dilihat pada Tabel 3.5.

Tabel 3.5 Tabel_peserta

Field Data Type Null Extra

Id Int (255) no Primary key

kodependaftaran Varchar (255) no

idkegiatan Varchar (255) no

Iduser Varchar (255) no

dateadd Timestamp no

Page 29: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

40

Tabel 3.5 diatas menjelaskan field-field yang terdapat

dalam tabel tabel_peserta yang akan dirancang dalam database

beserta dengan tipe data tiap field. Dimana terdapat delapan field

dalam tabel tabel_peserta dengan id sebagai primary key.

- Tabel_pesan_admin

Tabel_pesan_admin merupakan tabel yang berfungsi

untuk menyimpan pesan Administrator apabila telah melakukan

login ke dalam sistem. Struktur tabel_pesan_admin dapat dilihat

pada Tabel 3.6

Tabel 3.6 Tabel_pesan_admin

Field Data Type Null Extra

Id Int(15) no Primary key

username Varchar (255) no

recipient Varchar (255) no

message Text no

dateadd Datetime no

Tabel 3.6 diatas menjelaskan field-field yang terdapat dalam

tabel tabel_peserta yang akan dirancang dalam database beserta

dengan tipe data tiap field. Dimana terdapat lima field dalam

tabel_pesan_admin dengan id sebagai primary key.

Page 30: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

41

- Tabel_pesan_member

Tabel_pesan_member merupakan tabel yang berfungsi

untuk menyimpan pesan Member apabila telah melakukan login

ke dalam sistem. Struktur tabel_pesan_member dapat dilihat

pada Tabel 3.7.

Tabel 3.7 Tabel_pesan_member

Field Data Type Null Extra

Id Int (11) no Primary key

username Varchar (50) yes

recipient Varchar (50) yes

message Text yes

dateadd Datetime yes

Tabel 3.7 diatas menjelaskan field-field yang terdapat

dalam tabel_peserta yang akan dirancang dalam database beserta

dengan tipe data tiap field. Dimana terdapat lima field dalam

tabel_pesan_member dengan id sebagai primary key.

- Tabel_kegiatan

Tabel_kegiatan merupakan tabel yang berfungsi untuk

menyimpan hasil inputan kegiatan atau pelatihan oleh

Administrator ke dalam sistem. Struktur tabel_kegiatan dapat

dilihat pada Tabel 3.8.

Page 31: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

42

Tabel 3.8 Tabel_kegiatan

Field Data Type Null Extra

Id Int (255) no Primary key

Kode Varchar (255) no

Picture Varchar (255) no

Nama Varchar (255) no

url Varchar (255) no

pembicara Varchar (255) no

Asal Varchar (255) no

Tempat Varchar (255) no

Mulai Datetime no

Selesai Datetime no

kapasitas Int (255) no

Harga Varchar (255) no

keterangan Text no

mulaidaftar Datetime no

selesaidaftar Datetime no

prasyarat Varchar (255) no

Aktif Enum (‘yes’,’no’) no

Publish Enum (‘yes’,’no’) no

dateadd Datetime no

dateupd Datetime no

username Varchar (255) no

Page 32: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

43

Tabel 3.8 diatas menjelaskan field-field yang terdapat

dalam tabel_kegiatan yang akan dirancang dalam database

beserta dengan tipe data tiap field. Dimana terdapat 20 field

dalam tabel_kegiatan dengan id sebagai primary key.

- Tabel_kegiatan_com

Tabel_kegiatan_com merupakan tabel yang menyimpan

hasil comment dari kegiatan atau pelatihan yang dibuka. Peserta

pelatihan dapat memberikan saran dan kritik terkait dengan

pelatihan yang telah dibuka. Struktur tabel_kegiatan_com dapat

dilihat pada Tabel 3.9.

Tabel 3.9 Tabel_kegiatan_com

Field Data Type Null Extra

Id Int (255) no Primary key

idkegiatan Varchar (255) no

Text Text no

userid Varchar (255) no

User Varchar (255) no

Dari Varchar (255) no

dateadd Timestamp no

Tabel 3.9 diatas menjelaskan field-field yang terdapat

dalam tabel_kegiatan_com yang akan dirancang dalam database

Page 33: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

44

beserta dengan tipe data tiap field. Dimana terdapat tujuh field

dalam tabel_kegiatan_com dengan id sebagai primary key.

- Tabel_news

Tabel_news berfungsi untuk menyimpan berita. Dalam

hal ini berita yang dibuat dapat berupa pengumuman atau

pemberitahuan yang terletak pada halaman home sistem. Struktur

tabel_news dapat dilihat pada Tabel 3.10.

Tabel 3.10 Tabel_news

Field Data Type Null Extra

Id Int (255) no Primary key

Judul Varchar (255) no

url_title Varchar (255) no

Detail Text no

Publish Enum (‘yes’,’no’) no

Picture Varchar (255) no

Dateadd Datetime no

Dateupd Datetime no

username Varchar (255) no

Tabel 3.10 diatas menjelaskan field-field yang terdapat

dalam tabel_news yang akan dirancang dalam database beserta

dengan tipe data tiap field. Dimana terdapat sembilan field dalam

tabel_news dengan id sebagai primary key.

Page 34: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

45

- Tabel_news_com

Tabel_news_com merupakan tabel yang menyimpan hasil

comment dari berita yang telah dibuat oleh Administrator. Peserta

pelatihan dapat bertanya ataupun memberikan pendapat terkait

mengenai berita yang dibuat. Struktur tabel_news_com dapat

dilihat pada Tabel 3.11.

Tabel 3.11 Tabel_news_com

Field Data Type Null Extra

Id Int (255) no Primary key

Idnews Varchar (255) no

Text Text no

Userid Varchar (255) no

User Varchar (255) no

Dari Varchar (255) no

Dateadd Timestamp no

Tabel 3.11 diatas menjelaskan field-field yang terdapat

dalam tabel_news_com yang akan dirancang dalam database

beserta dengan tipe data tiap field. Dimana terdapat tujuh field

dalam tabel_news_com dengan id sebagai primary key.

- Tabel_artikel

Tabe_artikel merupakan tabel yang menyimpan data

artikel yang telah dibuat oleh Administrator. Data artikel dapat

berupa penulisan-penulisan ataupun juga dapat dijadikan tempat

Page 35: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

46

untuk mengupload materi pelatihan . Struktur tabel_artikel dapat

dilihat pada Tabel 3.12.

Tabel 3.12 Tabel_artikel

Field Data Type Null Extra

Id Int (255) No Primary key

Judul Varchar (255) No

Cover Varchar (255) No

url_title Varchar (255) No

Penulis Varchar (255) No

Penerbit Varchar (255) No

Tahun Varchar (255) No

Isbn Varchar (255) No

Abstrack Text No

Files Varchar (255) No

Link Varchar (255) No

Publish Varchar (255) No

Dateadd Datetime No

Dateupd Datetime No

username Varchar (255) No

Tabel 3.12 diatas menjelaskan field-field yang terdapat

dalam tabel_artikel yang akan dirancang dalam database beserta

dengan tipe data tiap field. Dimana terdapat 15 field dalam

tabel_artikel dengan id sebagai primary key.

Page 36: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

47

- Tabel_artikel_com

Tabel_artikel_com merupakan tabel yang menyimpan

hasil comment dari artikel yang dibuat oleh Administrator.

Struktur tabel_artikel dapat dilihat pada Tabel 3.21.

Tabel 3.13 Tabel_artikel_com

Field Data Type Null Extra

Id Int (255) No Primary key

idArtikel Varchar (255) No

Text Text No

Userid Varchar (255) No

User Varchar (255) No

Dari Varchar (255) No

Dateadd Timestamp No

Tabel 3.13 diatas menjelaskan field-field yang terdapat

dalam tabel_artikel_com yang akan dirancang dalam database

beserta dengan tipe data tiap field. Dimana terdapat tujuh field

dalam tabel_artikel_com dengan id sebagai primary key.

- Tabel_album

Tabel_album merupakan tabel yang menyimpan foto atau

album yang telah dibuat oleh Administrator. Struktur

tabel_album dapat dilihat pada Tabel 3.14.

Page 37: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

48

Tabel 3.14 Tabel_album

Field Data Type Null Extra

Id Int (255) No Primary key

url Varchar (255) No

Judul Varchar (255) No

publish Enum (‘yes’,’no’) No

dateadd Datetime No

dateupd Datetime No

username Varchar (255) No

Tabel 3.14 diatas menjelaskan field-field yang terdapat

dalam tabel_album yang akan dirancang dalam database beserta

dengan tipe data tiap field. Dimana terdapat tujuh field dalam

tabel_album dengan id sebagai primary key.

- Tabel_album_gallery

Tabel_album_gallery merupakan tabel yang berfungsi

untuk menyimpan beberapa gambar yang telah diupload sesuai

dengan kebutuhannya. Struktur tabel_album dapat dilihat pada

Tabel 3.15.

Tabel 3.15 Tabel_album_gallery

Field Data Type Null Extra

Id Int (255) No Primary key

Page 38: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

49

idAlbum Varchar (255) No

Judul Varchar (255) No

picture Varchar (255) No

album_cover Enum (‘yes’,’no’) No

publish Enum (‘yes’,’no’) No

dateadd Datetime No

dateupd Datetime No

username Varchar (255) No

Tabel 3.15 diatas menjelaskan field-field yang terdapat

dalam tabel_album_gallery yang akan dirancang dalam database

beserta dengan tipe data tiap field. Dimana terdapat sembilan field

dalam tabel_album_gallery dengan id sebagai primary key.

- Tabel_slider

Tabel_slider merupakan tabel yang berfungsi untuk

menyimpan gambar-gambar yang digunakan pada tampilan slide

yang terletak pada halaman home. Struktur tabel_album dapat

dilihat pada Tabel 3.16.

Page 39: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

50

Tabel 3.16 Tabel_slider

Field Data Type Null Extra

Id Int (255) No Primary key

Judul Varchar (255) No

picure Text No

publish Enum (‘yes’,’no’) No

dateadd Datetime No

dateupd Datetime No

username Varchar (255) No

Tabel 3.16 diatas menjelaskan field-field yang terdapat

dalam tabel_slider yang akan dirancang dalam database beserta

dengan tipe data tiap field. Dimana terdapat tujuh field dalam

tabel_slider dengan id sebagai primary key.

- Tabel_type_kegiatan

Tabel_type_kegiatan merupakan tabel yang berfungsi

untuk menyimpan data-data mengenai pelatihan prasyarat yang

telah ditentukan oleh admin. Struktur tabel_album dapat dilihat

pada Tabel 3.17.

Tabel 3.17 Tabel_type_kegiatan

Field Data Type Null Extra

Id Int (255) No Primary key

url_title Varchar (255) No

kode Varchar (255) No

Page 40: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

51

nama Varchar (255) No

publish Enum (‘yes’,’no’) No

Tabel 3.17 diatas menjelaskan field-field yang terdapat

dalam tabel_type_kegiatan yang akan dirancang dalam database

beserta dengan tipe data tiap field. Dimana terdapat lima field

dalam tabel_type_kegiatan dengan id sebagai primary key.

3.3.2 Perancangan Interface

Dalam perancangan aplikasi diperlukan interface dalam

penggunaannya. Perancangan interface pada bagian ini akan

menjadi dasar untuk pembuatan tampilan aplikasi web yang akan

dibuat.

Desain fungsi admin berhubungan dengan keseluruhan

tampilan dalam sistem berupa form yang berhubuhungan dengan

hak akses yang dapat dilakukan oleh Admin.

Gambar 3.12 Desain Interface Home

Page 41: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

52

Pada gambar 3.12 diatas, menunjukkan desain tampilan

interface pada halaman utama saat pengunjung mengunjungi

halaman web Certificate Training Center (CTC). Pada saat

pengunjung membuka halaman, maka terdapat beberapa menu

yang berfungsi untuk memberikan informasi yang berguna bagi

pengunjung. Pada halaman utama terdapat menu login, yang

dimana menu login ini hanya ditujukan bagi mereka yang telah

mendaftar sebagai Member dari Certificate Training Center

(CTC). Menu login tersebut juga tidak ditujukan untuk Admin,

karena menu login yang ditujukan untuk Admin diletakkan

terpisah oleh sistem.

Gambar 3.13 Desain Interface Login

Pada gambar 3.13 diatas menunjukkan desain interface

dari menu login. Desain menu login seperti yang ditunjukkan

pada gambar ditujukan bagi Member dan Admin. Hal tersebut

dikarenakan tampilan menu login yang dimiliki oleh Member dan

Admin adalah sama. Menu login memiliki dua komponen,

diantaranya memiliki field username dan field password. Kedua

Page 42: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

53

field tersebut harus diisi secara benar agar memudahkan

seseorang untuk dapat masuk kedalam sistem didalamnya.

Gambar 3.14 Desain Interface Halaman Member

Gambar 3.14 diatas menunjukkan desain interface dari

halaman Member. Apabila seorang Member telah berhasil

melakukan login, maka Member akan secara langsung dialihkan

pada halaman utama Member. Didalam halaman utama Member

ini terdapat beberapa menu yang telah disiapkan, diantaranya

pelatihan, pelatihan dibuka, report, user, dan log out. Menu

pelatihan berisi mengenai keterangan dan informasi mengenai

pelatihan yang akan dibuka, sedang dibuka, bahkan yang sedang

berlangsung, mulai dari pembicara hingga kapasitas yang dimiliki

oleh kelas. Menu pelatihan yang dibuka berisi tabel yang dimana

tabel tersebut adalah tempat kita untuk mendaftar pada kelas yang

diinginkan. Menu report berisi mengenai laporan peserta,

kegiatan dan pembayaran setiap peserta. Menu user berisi

mengenai profil peserta yang setiap saat dapat diubah sesuai

Page 43: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

54

dengan keinginan Member. Menu yang terakhir adalah log out,

menu ini berfungsi untuk mengakhiri session kita pada halaman

Member.

Gambar 3.15 Desain interface Informasi Pelatihan

Pada Gambar 3.15 menunjukkan desain interface pada

menu pelatihan. Pada Gambar diatas terdapat susunan pelatihan

yang telah dibuat, sebagai contoh ada Pelatihan 1 dan Pelatihan 2.

Pelatihan 1 dan Pelatihan 2 merupakan pelatihan yang telah

dibuat oleh Admin, dimana berisi mengenai informasi dan

keterangan mengenai pelatihan tersebut.

Page 44: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

55

Gambar 3.16 Desain interface pelatihan yang dibuka

Pada Gambar 3.16 diatas menunjukkan desain interface

pelatihan yang dibuka. Pada menu ini terdapat daftar pelatihan

yang telah diinputkan oleh Admin. Menu pelatihan yang dibuka

berfungsi sebagai tempat pendaftaran oleh Member untuk

mendaftarkan dirinya pada kelas pelatihan yang diinginkan.

Gambar 3.17 Desain interface halaman utama Admin

Page 45: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

56

Pada gambar 3.17 diatas menunjukkan desain interface

halaman utama Admin. Apabila seorang Admin telah melakukan

login, maka Admin dapat langsung menuju pada halaman utama.

Pada halaman utaman ini terdapat pesan admin yang berfungsi

untuk memberikan informasi mengenai last login dan last log out

oleh Admin. Selain itu, pada halaman ini juga terdapat beberapa

menu yang dapat diakses, diantaranya master data, entry data,

report, profil, dan log out.

Gambar 3.18 Desain interface input pelatihan

Pada Gambar 3.18 diatas menunjukkan desain interface

input pelatihan oleh Administrator. Administrator cukup

memasukkan data pelatihan yang dibutuhkan. Setelah melakukan

penginputan data, selanjutnya Administrator lelakukan simpan

data dengan mengklik button simpan. Setelah melakukan simpan

data, maka data yang diinput akan tersimpan pada database.

Page 46: Bab 3 Metode dan Perancangan Sistem - repository.uksw.edurepository.uksw.edu/bitstream/123456789/2443/4/T1_682008028_BAB III... · beserta rancangan berupa . desain dan tabel-tabel

57

Gambar 3.19 Desain interface hasil inputan pelatihan

Gambar 3.19 adalah desain interface hasil inputan

pelatihan oleh Admin. setiap inputan pelatihan yang telah

disimpan, akan ditampilkan pada tabel yang ada pada halaman

ini. Setiap pelatihan yang telah disimpan memiliki beberapa

pilihan, yaitu bisa di hapus, di publish dan lain sebagainya.