BAB 4. PERANCANGAN 4.1. Perancangan Use Case Diagram Gambar 4.1 Use case diagram 1. Use case siswa memilih kandidat Tabel 4.1 Deskripsi use case siswa memilih kandidat Nama Use case Use case siswa memilih kandidat Nama Aktor Deskripsi Pra Kondisi Scenario Siswa, admin Pada proses ini ditampilkan layout proses Login dan melakukan pemilihan kandidat Siswa setelah login dapat memilih kandidat, namun admin tidak bisa, tugas admin hanya memantau saja Siswa setelah login dapat melakukan pemilihan 4-27
kandidat, admin tidak Hasil Siswa dan admin dapat melihat langsung jumlah suara yang sudah masuk 2. Use case melakukan rekap administrasi Table 4.2 Deskripsi Use case melakukan rekap administrasi Nama use case Use case rekap administrasi Nama aktor Deskripsi Pra Kondisi Skenario Admin Pada proses ini admin melakukan pemantauan data siswa yang masuk Untuk melakukan pemantauan admin cukup login ke sistem Siswa melakukan login lalu memilih kandidat, admin dapat memantau siapa saja siswa yang sudah memilih kandidat Hasil Admin dapat melakukan pemantauan dan administrasi secara komputerisasi 4.2. Activity Diagram Activity diagram merupakan sebuah diagram yang menggambarkan alir sebuah aktifitas pada sebuah sistem yang sedang dirancang, bagaimana masing-masing berawal, decision yang mungkin terjadi dan bagaimana mereka berakhir. Activity diagram juga dapat menggambarkan proses parallel yang mungkin terjadi pada beberapa eksekusi. Adapun activity diagram usulan dalam penulisan sebagai berikut. 3.2.1. Diagram Activity Login 4-28
N Y Gambar 4.2 Diagram Activity Login Table 4.3 Deskripsi Diagram Activity Login Nama Deskripsi singkat Aktor Diagram Activity Login Pada diagram ini menjelaskan proses user login User, admin Pra-kondisi - Tindakan utama Pasca kondisi Memasukkan username dan password Jika user berhasil login maka masuk halaman utama, jika gagal maka user harus kembali login 3.2.2. Diagram Activity Proses Pemilihan 4-29
T Y Gambar 4.3 Diagram Activity Proses Pemilihan Kandidat Nama Tabel 4.4 Deskripsi Diagram Activity Proses Pemilihan Diagram Activity Proses Pemilihan Kandidat Deskripsi Singkat Actor Pada diagram ini menampilkan proses siswa memilih kandidat Siswa Pra-kondisi - Tindakan utama Pasca kondisi Siswa memilih menu pilih kandidat Sistem akan menyimpan data ke database dan akan langsung diproses selanjutnya oleh admin 4-30
4.3. Pemodelan Diagram Sequence 1.3.1. Diagram Sequence Login Siswa Gambar 4.4 Diagram Sequence Login Siswa untuk Memilih Kandidat Gambar 4.4 menunjukkan proses siswa yang harus login terlebih dahulu menggunakan user nis dan password untuk kemudian masuk ke-menu utama agar dapat melakukan pemilihan pada kandidat yang ada. 1.3.2. Diagram Sequence Login Administrator Gambar 4.5 Sequence Diagram Login Administrator untuk Melihat Siapa Saja Yang Sudah Melakukan Pemilihan dan Hasil Pemilihan 4-31
Pada gambar 4.5 menampilkan login administrator untuk melihat siapa saja siswa yang telah melakukan proses pemilihan tersebut, serta hasil dari prmilihan tersebut akan terlihat pada menu ini. Admin berhak menambahkan info terkait kandidat yang ada, namun tidak bisa merubah hasil suara yang masuk. 4.4. Perancangan Basis Data Pembuatan aplikasi ini membutuhkan database untuk pengolahan datanya. Maka database tersebut dibuat menggunakan Phpmyadmin dan MySQL, sebagai berikut: 4.4.1 Struktur Tabel Struktur tabel adalah penjelasan tentang field, tipe data dan ukuran data. Berikut tabeltabel yang digunakan dalam pembuatan aplikasi: 1. Tabel Siswa Tabel ini menyimpan data siswa. Tabel ini sendiri terdiri dari: Tabel 4.5 Tabel Siswa No Nama Field Tipe Data Ukuran Keterangan 1 Id_siswa Int 3 Primary key 2 No_induk Varchar 8 3 Nama_siswa Varchar 20 4 Kelas Varchar 8 5 Password Varchar 50 2. Tabel Kandidat Tabel ini adalah table untuk menampilkan para kandidat pemilihan organisasi siswa tersebut. Tabel 4.6 Tabel Kandidat No Nama Field Tipe Data Ukuran Keterangan 1 Id_kandidat Int 3 Primary key 2 No_induk Varchar 20 3 Nama_kandidat Varchar 20 4 Kelas Varchar 8 4-32
5 Jumlah_suara Int 4 6 Photo Varchar 20 7 Motto Varchar 20 3. Tabel Data Pemilih Tabel pemilih memiliki 4 field dan id_pemilih sebagai primary key. Tabel ini digunakan untuk menyimpan daftar pemilih. Tabel 4.7 Tabel Data Pemilih No Nama Field Tipe Data Ukuran Keterangan 1 Id_pemilihan Int 5 Primary key 2 Id_siswa Varchar 3 3 Id_kandidat Varchar 3 4 Waktu Date 4. Tabel Data Pemilu Tabel ini memiliki 4 field dengan id_pemilu sebagai primary key. Tabel 4.8 Tabel data pemilu No Nama Field Tipe Data Ukuran Keterangan 1 Id_pemilu Int 11 Primary key 2 Id_kandidat Int 3 3 Id_pemilih Int 5 4 Tgl_dipilih date 4.5. Class Diagram Pada tahap berikutnya akan dijelaskan dalam bentuk class diagram yang meliputi one to one, one to many, many to many. Dalam aplikasi ini digunakan untuk menunjukkan 4-33
alur pada pemanggilan class disetiap form yang saling berkaitan dalam penyewaan area staging sebagai berikut: Gambar 4.6 Class Diagram 4.6. Rancangan Dialog Interface 4.6.1 Struktur Tampilan Halaman Siswa Halaman utama Home Lihat Kandidat Lihat Tata Cara Pilih Memilih kandidat Lihat Hasil Sementara Gambar 4.7 Struktur Tampilan Halaman Siswa Pada struktur halaman siswa ini, siswa hanya bisa melihat kandidat yang ditampilakan, lalu tata cara pemilihan serta memilih kandidat. 4.6.2 Struktur Tampilan Halaman Admin Halaman utama Home Lihat Daftar Pemilih Tambah Edit Kandidat Melihat Hasil Pemilihan Tambah Edit cara memilih Gambar 4.8 Struktur Tampilan Halaman Administrator 4-34
Pada halaman ini, akses admin dapat melihat daftar pemilih yang sudah melakukan pemilihan, dapat menambah atau meng-edit informasi data kandidat yang ada, dapat melihat hasil pemilihan yang sedang berlangsung, serta menambah dan meng-edit tata cara pemilihan pada web tersebut. 4-35