Perancangan User Interface PERANCANGAN DAN DESAIN

23 Tabel 3.2.9 Tabel Jenis Siswa Field Name Type Panjang Default Keterangan id_jenissiswa Integer 3 Not Null Primary key nama Varchar 100 Not Null Nama jenis siswa keterangan Varchar 50 Null Keterangan jenis 3.2.10. Tabel Halaman Tabel ini merupakan tabel untuk tempat penyimpanan duplikat atau sebagai mirror table tabel duplikat. Nama Tabel : halaman Tabel 3.2.10 Tabel Halaman Field Name Type Panjang Default Keterangan Id_halaman Integer 2 Not Null Primary Key nama Varchar 250 Not Null isi Text - Null

3.3. Perancangan User Interface

3.3.1. Halaman Menu Beranda Halaman menu beranda ini merupakan halaman awal program Penerimaan Siswa Baru SMAN 1 pacitan. Desain menu beranda ini dapat dilihat pada gambar 3.3.1. seperti di bawah ini : perpustakaan.uns.ac.id commit to user 24 M E N U HEADER LOGIN CALON SISWA CALL FOOTER CONTENT BERANDA Gambar 3.3.1. Desain Halaman Menu Beranda 3.3.2. Halaman Menu Prosedur Halaman menu prosedur ini merupakan halaman yang akan menampilkan aturan beserta tata cara pendaftaran online di SMAN 1 Pacitan. Desain menu prosedur ini dapat dilihat pada gambar 3.3.2. seperti di bawah ini : M E N U HEADER LOGIN CALON SISWA CALL FOOTER CONTENT PROSEDUR Gambar 3.3.2. Desain Halaman Menu Prosedur 3.3.3. Halaman Menu Jurnal Halaman menu jurnal adalah halaman yang akan menampilkan quota dari siswa yang akan diterima di SMAN 1 Pacitan baik dalam kota commit to user 25 maupun luar kota, jumlah dari siswa baru yang telah mendaftar, dan siswa yang mengundurkan diri. Desain menu jurnal ini dapat dilihat pada gambar 3.3.3. seperti di bawah ini : M E N U HEADER LOGIN CALON SISWA CALL FOOTER CONTENT JURNAL Gambar 3.3.3. Desain Halaman Menu Jurnal 3.3.4. Halaman Menu Informasi Halaman menu informasi akan menampilkan berita terbaru mengenai Penerimaan Siswa Baru online di SMAN 1 Pacitan. M E N U HEADER LOGIN CALON SISWA CALL FOOTER CONTENT INFORMASI Gambar 3.3.4. Desain Halaman Menu Informasi perpustakaan.uns.ac.id commit to user 26 3.3.5. Halaman Menu Kontak Halaman menu kontak ini merupakan halaman yang digunakan pengunjung atau siswa baru untuk menghubungi admin melalui email yang dimiliki oleh pengunjung ataupun siswa. Dan dapat digunakan untuk meminta pin secara online. Desain halaman menu kontak dapat dilihat pada gambar 3.3.5. seperti di bawah ini : M E N U HEADER LOGIN CALON SISWA CALL Hubungi Kami N a m a E m a i l N o .H P P e s a n Kirim Reset FOOTER Gambar 3.3.5. Desain Halaman Menu Kontak 3.3.6. Halaman Calon Siswa 3.3.6.1. Halaman Login Calon Siswa Halaman login siswa adalah halaman yang digunakan untuk login calon siswa baru yang terdiri atas User ID email, no. PIN password, dan memasukkan kode yang terlihat seperti pada gambar desain halaman login calon siswa di bawah ini : perpustakaan.uns.ac.id commit to user 27 Login Calon Siswa User ID PIN KODE 2343434 Login Gambar 3.3.6.1. Desain Halaman Login Calon Siswa 3.3.6.2. Halaman Menu Calon Siswa Halaman menu calon siswa adalah halaman yang memuat menu – menu yang dimiliki oleh calon siswa yang telah berhasil masuk menggunakan no. pin masing – masing. Menu yang dimiliki dapat dilihat seperti pada gambar 3.3.6.2. di bawah ini : M E N U HEADER CALL CONTENT Menu Calon Siswa Gan ti P IN Pen daftaran U jian On lin e H asil S eleksi L o go u t FOOTER Gambar 3.3.6.2. Desain Halaman Menu Calon Siswa perpustakaan.uns.ac.id commit to user 28 3.3.7. Halaman Administrator 3.3.7.1. Halaman Login Administrator Halaman login admin digunakan oleh admin untuk masuk ke sistem PSB guna melakukan pembaharuan yang nantinya akan ditampilkan di halaman pengunjung dan halaman calon siswa. Desain halaman admin dapat dilihat pada gambar 3.3.7.1. di bawah ini : Login Admin User ID PIN KODE 2343434 Login Gambar 3.3.7.1. Desain Halaman Login Administrator 3.3.7.2. Halaman Menu Administrator Halaman menu administrator adalah halaman yang memuat menu – menu yang dimiliki oleh admin untuk melakukan segala pengaturan dalam sistem PSB ini. Menu admin ini dapat dilihat pada gambar 3.3.7.2. seperti pada gambar di bawah ini : commit to user 29 M E N U HEADER CALL CONTENT MENU ADMIN SetUp Create PIN Edit Beranda Edit Prosedur Manage Informasi FOOTER Setup Ujian Manage Soal Tambah Dalam Kota Manage Pendaftaran Logout Gambar 3.3.7.2. Desain Halaman Menu Administrator perpustakaan.uns.ac.id commit to user 30

BAB IV IMPLEMENTASI DAN ANALISA IMPLEMENTASI

4.1. Implementasi

Implementasi perancangan terhadap sistem yang dibangun bisa dilihat melalui desain menu dari proses-proses utama yang secara garis besar adalah sebagai berikut :

4.1.1. Halaman Menu Beranda

Halaman Home ini merupakan halaman yang berisi awal dari halaman PSB dimana terdapat tulisan Selamat Datang Calon Siswa Baru SMA Negeri 1 Pacitan, beserta artikel singkat mengenai informasi PSB dan sejarah singkat dari SMA 271 atau SMA Negeri 1 Pacitan. Gambar 4.1.1. Halaman Menu Beranda PSB SMAN 1 Pacitan perpustakaan.uns.ac.id commit to user