BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN

(1)

40

BAB IV

RANCANGAN SISTEM DAN PROGRAM USULAN

4.1 Analisa Kebutuhan Software

Tujuan perancangan sistem adalah untuk memenuhi kebutuhan sistem yang akan digunakan pemakai (user) dan untuk memberikan gambaran yang jelas serta di rancang bangun yang lengkap dengan menganalisis kelemahan-kelemahan dalam sistem yang sudah ada. Untuk mempermudah semua proses yang berhubungan dengan sistem akademik, maka sistem yang dirancang adalah program yang dapat membantu untuk mempermudah siswa dan orang tua dalam mencari informasi akademik.

A. Tahapan Analisis

Sistem Informasi Akademik berbasis web secara sederhana dapat digambarkan sebagai sebuah bentuk fasilitas yang berperan sebagai sebagai informasi penilaian sekaligus mempermudah siswa untuk melihat informasi akademik. Perangkat lunak ini memiliki hak akses di dalam penggunaannya yang digunakan oleh user dalam hal ini pihak siswa dan admin.

Berikut ini spesifikasi kebutuhan dari Sistem Informasi Akademik siswa berbasis Web pada SMK Telekomunikasi Telesandi Bekasi.

1. Laman Admin

A1. Admin harus melakukan proses login terlebih dahulu A2. Admin dapat mengolah data siswa

A3. Admin dapat mengolah data guru A4. Admin dapat mengolah data orang tua

(2)

A5. Admin dapat log out

2. Pengunjung

B1. Pengunjung harus melakukan proses link ke website SMK Telekomunikasi Telesandi Bekasi terlebih dahulu.

B2. Pengunjung hanya dapat melihat laman Home B3. Pengunjung hanya dapat melihat laman About

B4. Pengunjung hanya dapat melihat laman Visi dan Misi sekolah

B5. Pengunjung hanya dapat melihat laman Jurusan yang ada di website tersebut

3. Laman Siswa

C1. Siswa harus melakukan proses login terlebih dahulu C2. Setelah login siswa dapat melihat informasi nilai. C3. Siswa juga dapat melihat informasi absen

C4. Siswa dapat download tugas C5. Siswa dapat Log out

4. Laman Guru

D1. Guru harus melakukan proses login terlebih dahulu D2. Guru dapat mengelolah data nilai

D3. Guru dapat mengelolah data absen D4. Guru dapat upload tugas

(3)

5. Laman Orang Tua

E1. Orang tua harus melakukan proses login terlebih dahulu. E2. Orang Tua dapat melihat data Nilai

E3. Orang Tua dapat melihat data absen E4. Orang Tua dapat melihat nilai raport E5. Orang Tua dapat Log out

A. Use Case Diagram

1. Use Case Diagram Admin Mengolah Data Siswa

Sumber : Hasil Penelitian

Gambar 4.1 Use Case Diagram Admin Mengolah Data Siswa

User

form login admin halaman admin mengolah data siswa

<<include>> _<<include>>

entry data siswa

<<extend>>

hapus data siswa

edit data siswa

Nomer Induk Siswa Nama siswa

Alamat Telepon Kelas Pilih jenis kelamin Username siswa Password siswa <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>>

(4)

Tabel 4.1 Use Case Diagram Admin Mengolah Data Siswa

2. Use Case Diagram Admin Mengolah Data Guru

Gambar 4.2 Use Case Diagram Admin Mengolah Data Guru

User

form login admin halaman admin mengolah data guru

entry data guru <<extend>>

hapus data guru

edit data guru

Nomer Induk guru

Nama guru Username guru Password guru <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>>

Use case Name Halaman User Admin

Requirements A1

Goal Admin dapat memasukkan data user

Pre-Conditions Admin setelah login

Post-Conditions Sistem menampilkan informasi user

Failed end condition Gagal menampilkan informasi karena salah login

Primary Actors Siswa

Main Flow / Basic Path 1. Admin dapat login

2. Admin dapat entry data siswa

(5)

Tabel 4.2 Use Case Diagram Admin Mengolah Data Guru

3. Use Case Diagram Admin Mengolah Data Orang Tua

Gambar 4.3 Use Case Diagram Admin Mengolah Data Orang Tua

User

form login admin halaman admin mengolah data orang tua

<<include>> <<include>>

entry data orang tua <<extend>>

hapus data orang tua

edit data orang tua

Nama orang tua

Username orang tua

Password orang tua

Pilih siswa <<extend>> <<extend>> <<extend>> <<extend>> <<extend>> <<extend>>

Requirements A1

2. Admin dapat entry data guru

(6)

Tabel 4.3 Use Case Diagram Admin Mengolah Data Orang Tua

4. Use Case Diagram Guru Mengolah Data Nilai

Gambar 4.4 Use Case Diagram Guru Mengolah Data Nilai

User

form login guru halaman guru mengolah data nilai

<<include>> <<include>>

entry data nilai <<extend>>

hapus data nilai

edit data nilai

Pilih Siswa Mata pelajaran Nilai <<extend>> <<extend>> <<extend>> <<extend>> <<extend>>

Requirements A1

2. Admin dapat entry data orang tua

(7)

Tabel 4.4 Use Case Diagram Guru Mengolah Data Nilai

5. Use Case Diagram Guru Mengolah Data Absen

Gambar 4.5 Use Case Diagram Guru Mengolah Data Absen

User

form login guru halaman guru mengolah data absen

entry data absen

<<extend>>

hapus data absen

Pilih Siswa

Tanggal

Pilih status absen

<<extend>> <<extend>> <<extend>> <<extend>> Keterangan absen <<extend>>

Use case Name Halaman User Guru

Requirements A1

Goal Guru dapat memasukkan data user

Pre-Conditions Guru setelah login

Main Flow / Basic Path 1. Guru dapat login

2 Guru dapat entry data nilai

(8)

Tabel 4.5 Use Case Diagram Guru Mengolah Data Absen

6. Use Case Diagram Guru Untuk Upload Tugas

Gambar 4.6 Use Case Diagram Guru Untuk Upload Tugas

Tabel 4.6 Use Case Diagram Guru Untuk Upload Tugas

User

form login guru halaman guru upload tugas

<<include>> <<extend>> Pilih file

Keterangan tugas

<<extend>> <<extend>>

Requirements A1

2 Guru dapat entry data absen

Alternate Flow / Invariant 1 2a. Guru dapat melihat profil sekolah

Requirements A1

2 Guru dapat upload tugas

(9)

7. Use Case Diagram Siswa Untuk Melihat Nilai

Gambar 4.7 Use Case Diagram Siswa Untuk Melihat Nilai

Tabel 4.7 Use Case Diagram Siswa Untuk Melihat Nilai

8. Use Case Diagram Siswa Untuk Melihat Absensi

Gambar 4.8 Use Case Diagram Siswa Untuk Melihat Absensi

User

form login siswa halaman siswa lihat nilai

<<include>> <<extend>> mata pelajaran nilai <<extend>> <<extend>> User

form login siswa halaman siswa lihat absensi

<<include>> _<<extend>> tanggal status <<extend>> <<extend>> keterangan <<extend>>

Use case Name Halaman User Siswa

Requirements A1

Goal Siswa dapat melihat nilai

Pre-Conditions Siswa setelah login

Post-Conditions Sistem menampilkan informasi nilai

Main Flow / Basic Path 1. Siswa dapat login

2. Siswa dapat melihat informasi nilai.

Alternate Flow / Invariant 1

2a. Siswa dapat melihat profil sekolah

(10)

Tabel 4.8 Use Case Diagram Siswa Untuk Melihat Absensi

9. Use Case Diagram Siswa Untuk Download Tugas

Gambar 4.9 Use Case Diagram Siswa Untuk Download Tugas

Tabel 4.9 Use Case Diagram Siswa Untuk Download Tugas

User

form login siswa halaman siswa Download tugas

<<include>> <<extend>> Keterangan

Filenya

Download

<<extend>> <<extend>> <<extend>>

Requirements A1

Goal Siswa dapat melihat absensi

Post-Conditions Sistem menampilkan informasi absensi

2. Siswa dapat melihat informasi absensi

Alternate Flow / Invariant 1 2a. Siswa dapat melihat profil sekolah

Invariant 2 2b. Siswa dapat download tugas

Requirements A1

Goal Siswa dapat download tugas

Post-Conditions Sistem menampilkan dan download

Failed end condition Gagal menampilkan dan download karena salah login

2. Siswa dapat download tugas

(11)

10. Use Case Diagram Orang Tua Melihat Nilai Anak

Gambar 4.10 Use Case Diagram Orang Tua Melihat Nilai Anak

Tabel 4.10 Use Case Diagram Orang Tua Melihat Nilai Anak

User

form login orang tua halaman orang tua lihat data nilai anak

<<include>> <<extend>> mata pelajaran nilai <<extend>> <<extend>> 1

Invariant 2 2b. Siswa dapat men-download dan menampilkan

tugas

Use case Name Halaman User Orang Tua

Requirements A1

Goal Orang Tua dapat melihat nilai anak

Pre-Conditions Orang Tua setelah login

Post-Conditions Sistem menampilkan halaman nilai siswa

Failed end condition Gagal menampilkan karena salah login

Main Flow / Basic Path 1. Orang Tua dapat login

2. Orang Tua dapat melihat nilai anak

(12)

11. Use Case Diagram Orang Tua Melihat Absensi Anak

Gambar 4.11 Use Case Diagram Orang Tua Melihat Absensi Anak

Tabel 4.11 Use Case Diagram Orang Tua Melihat Absensi Anak

12. Use Case Diagram Orang Tua Melihat Raport Anak

Gambar 4.12 Use Case Diagram Orang Tua Melihat Raport Anak

User

form login orang tua halaman orang tua lihat absen anak

<<include>> <<extend>> tanggal status <<extend>> <<extend>> keterangan <<extend>> persentase kehadiran <<extend>> User

form login orang tua halaman orang tua lihat raport anak

<<include>> <<extend>>

cetak raport anak

<<extend>>

Requirements A1

Goal Orang Tua dapat melihat absensi anak

Post-Conditions Sistem menampilkan halaman absensi

siswa

Failed end condition Gagal menampilkan karena salah login

2. Orang Tua dapat melihat absensi anak

Alternate Flow / Invariant 1 2a. Orang Tua dapat melihat profil sekolah

Invariant 2 2b. Orang Tua dapat melihat persentase

(13)

Tabel 4.12 Use Case Diagram Orang Tua Melihat Raport Anak

13. Use Case Diagram Pengunjung

Gambar 4.13 Use Case Diagram Pengunjung

Pengunjung

masuk link SMK halaman SMK Telkom Lihat Home

Lihat About Lihat Visi & Misi

Lihat Jurusan

<<include>>

Requirements A1

Goal Orang Tua dapat melihat raport anak

Post-Conditions Sistem menampilkan informasi raport

anak

Primary Actors Orang Tua

2. Orang Tua dapat melihat raport

Alternate Flow / Invariant 1 2a. OrangTua dapat melihat profil sekolah

(14)

Tabel 4.13 Use Case Diagram Pengunjung

Use case Name Pengunjung

Requirements A1

Goal Pengunjung dapat lihat halaman SMK

Telkom

Pre-Conditions Pengunjung setelah masuk ke link SMK

Telkom

Post-Conditions Sistem menampilkan informasi sekolah

Primary Actors Pengunjung

Main Flow / Basic Path 1. Pengunjung dapat masuk ke link

Alternate Flow / Invariant 1 2a. Pengunjung dapat melihat Home 2b. Pengunjung dapat melihat About 2c. Pengunjung dapat melihat Visi dan

Misi

(15)

B. Activity Diagram

1. Activity Diagram Admin Mengolah Data Siswa

Gambar 4.14 Activity Diagram Admin Mengolah Data Siswa

Penjelasan di atas adalah admin login terlebih dahulu. Jika iya, admin akan masuk menu utama. Jika tidak, maka admin akan kembali ke tampilan seperti semula. Dari menu utama admin dapat input data siswa lalu di simpan ke database, dari database data dapat di hapus oleh admin. Jika iya, maka data akan terhapus. Jika tidak, admin akan mengedit data siswa. Jika admin ingin mengedit maka admin dapat mengedit data tersebut yang terdapat pada database. Jika tidak, maka end.

Admin Sistem Database

Login

T

Menu utama Y

Input data siswa

Simpan Edit data Hapus data T Y Y T Hapus Edit

(16)

2. Activity Diagram Admin Mengolah Data Guru

Gambar 4.15 Activity Diagram Admin Mengolah Data Guru

Penjelasan di atas adalah admin login terlebih dahulu. Jika iya, admin akan masuk ke menu utama. Jika tidak, maka admin akan kembali ke tampilan seperti semula. Dari menu utama, admin dapat input data guru lalu di simpan ke database, dari database data dapat di hapus oleh admin. Jika iya, maka data akan terhapus. Jika tidak, admin akan mengedit data guru. Jika admin ingin mengedit maka admin dapat mengedit data tersebut yang terdapat pada database. Jika tidak, maka

end.

Login

T

Menu utama Y

Input data guru

(17)

3. Activity Diagram Admin Mengolah Data Orang Tua

Gambar 4.16 Activity Diagram Admin Mengolah Data Orang Tua

Penjelasan di atas adalah admin login terlebih dahulu. Jika iya, admin akan masuk ke menu utama. Jika tidak, maka admin akan kembali ke tampilan seperti semula. Dari menu utama, admin dapat input data orang tua lalu di simpan ke database, dari database data dapat di hapus oleh admin. Jika iya, maka data akan terhapus. Jika tidak, admin akan mengedit data orang tua. Jika admin ingin mengedit maka admin dapat mengedit data tersebut yang terdapat pada database. Jika tidak, maka end.

Login

T

Menu utama Y

Input data orang tua

(18)

4. Activity Diagram Guru Mengolah Data Nilai

Gambar 4.17 Activity Diagram Guru Mengolah Data Nilai

Penjelasan di atas adalah guru login terlebih dahulu. Jika iya, guru akan masuk ke menu utama. Jika tidak, maka guru akan kembali ke tampilan seperti semula. Dari menu utama, guru dapat input data nilai siswa lalu di simpan ke database, dari database data dapat di hapus oleh guru. Jika iya, maka data akan terhapus. Jika tidak, guru akan mengedit data nilai siswa. Jika guru ingin mengedit maka guru dapat mengedit data tersebut yang terdapat pada database. Jika tidak, maka end.

Guru Sistem Database

Login

T

Menu utama Y

Input data nilai

(19)

5. Activity Diagram Guru Mengolah Data Absen

Gambar 4.18 Activity Diagram Guru Mengolah Data Absen

Penjelasan di atas adalah guru login terlebih dahulu. Jika iya, guru akan masuk ke menu utama. Jika tidak, guru akan kembali ke tampilan seperti semula. Lalu, guru dapat menginput data absen.dan tersimpan di database. Guru dapat meghapus data absen. Jika iya, maka data akan terhapus di database. Jika tidak, maka end.

Login

T

Menu utama Y

Input data absen

Simpan

Hapus data T

Y

(20)

6. Activity Diagram Guru Untuk Upload Tugas

Gambar 4.19 Activity Diagram Guru Untuk Upload Tugas

Penjelasan di atas adalah guru login terlebih dahulu. Jika iya, guru akan masuk ke menu utama. Jika tidak, guru akan kembali ke tampilan seperti semula. Lalu guru dapat upload tugas dan tersimpan ke database. Guru dapat menghapus tugas. Jika iya, maka data akan terhapus di database oleh guru. Jika tidak. Maka

end.

.

Login T Menu utama Y Upload Tugas Simpan Hapus data T Y Hapus

(21)

7. Activity Diagram Siswa Untuk Melihat Nilai

Gambar 4.20 Activity Diagram Siswa Untuk Melihat Nilai

Penjelasan di atas adalah siswa login terlebih dahulu. Jika iya, siswa akan masuk ke menu utama. Jika tidak, siswa kembali ke tampilan seperti semula. Pada menu utama tersebut, siswa dapat melihat nilai yang di ambil dari database. Lalu

end.

Siswa Sistem Database

Login

T

Menu utama Y

Lihat nilai

(22)

8. Activity Diagram Siswa Untuk Melihat Absensi

Gambar 4.21 Activity Diagram Siswa Untuk Melihat Absensi

Penjelasan di atas adalah siswa login terlebih dahulu. Jika iya, siswa akan masuk ke menu utama. Jika tidak, siswa kembali ke tampilan seperti semula. Pada menu utama tersebut, siswa dapat melihat absensi yang di ambil dari database. Lalu end.

Login

T

Menu utama Y

Lihat absen

(23)

9. Activity Diagram Siswa Untuk Download Tugas

Gambar 4.22 Activity Diagram Siswa Untuk Download Tugas

Penjelasan di atas adalah siswa login terlebih dahulu. Jika iya, siswa akan masuk ke menu utama. Lalu, siswa dapat download tugas yang bersumber dari data yang sudah di upload sebelumnya oleh guru. Lalu siswa dapat lihat tugas dan

end.

Login

T

Menu utama Y

Lihat tugas

Ambil data yang di upload Download Tugas

(24)

10. Activity Diagram Orang Tua Melihat Nilai Anak

Gambar 4.23 Activity Diagram Orang Tua Melihat Nilai Anak

Penjelasan di atas adalah orang tua login terlebih dahulu. Jika iya, orang tua akan masuk ke menu utama. Jika tidak, orang tua akan kembali ke tampilan seperti semula. Orang tua dapat melihat nilai anaknya yang datanya di ambil dari database dan end.

Orang Tua Sistem Database

Login

T

Menu utama Y

Ambil data nilai siswa Lihat nilai siswa

(25)

11. Activity Diagram Orang Tua Melihat Info Absensi Anak

Gambar 4.24 Activity Diagram Orang Tua Melihat Info Absensi Anak

Penjelasan di atas adalah orang tua login terlebih dahulu. Jika iya, orang tua akan masuk ke menu utama. Jika tidak, orang tua akan kembali ke tampilan seperti semula. Orang tua dapat melihat absensi anaknya yang dimana data nya di dapat dari database dan end.

Login

T

Menu utama Y

Ambil data absensi siswa Lihat absensi siswa

(26)

12. Activity Diagram Orang Tua Melihat Raport Anak

Gambar 4.25 Activity Diagram Orang Tua Melihat Raport Anak

Penjelasan di atas adalah orang tua login terlebih dahulu. Jika iya, orang tua akan masuk ke menu utama. Jika tidak, orang tua akan kembali ke tampilan seperti semula. Lalu mengambil data absensi dan data nilai anak yang bersumber dari database dan menghasilkan raport dan maka dari itu orang tua dapat melihat raport anaknya lalu end.

Login

T

Menu utama Y

Ambil data absensi siswa

Lihat Raport

(27)

13. Activity Diagram Pengunjung

Gambar 4.26 Activity Diagram Pengunjung

Penjelasan di atas adalah pengunjung masuk ke link SMK Telkom, lalu pengunjung hanya bisa lihat laman home, laman about, laman visi dan misi, jurusan.

Pengunjung Sistem

Masuk ke link Masukkan situs SMK Telkom

Lihat laman Home

Lihat laman About

Masuk laman home

Masuk laman about

Lihat laman visi dan misi

Masuk halaman visi dan misi

Masuk halaman jurusan

(28)

4.2 Desain

Pada tahapan ini akan menjelaskan tentang desain database. Desain software

architecture dari sistem yang sedang dibangun.

4.2.1 Database

Menggambarkan hubungan antar tabel yang dibuat beserta relasi antar tabel. Penggambaran boleh menggunakan data model atau entity relation diagram dan harus disertakan tabel spesifikasi filenya.

1. Entity Relationship diagram (ERD)

StaffTU Id_StaffTU User_StaffTU Pass_StaffTU Entry Siswa Username NIS Nama Alamat Jenis_Kelamin Password Kelas _Tlp Melihat Nilai Nilai Id_nilai MP NIG NIS Download Tugas Id_tugas Ket Filenya Guru NIG Nm_guru User_guru Pass_guru Entry Orang Tua Id_ortu Nama_ortu NIS Uname_ortu Pass_ortu Upload Absen Id_absen Status Ket_absen NIS Melihat Entry Tahun_Ajaran tgl_absen

(29)

2. Logical Record Structure (LRS)

Gambar 4.28 Logical Record Structure

3. Spesifikasi File

a. Spesifikasi File Tabel Siswa

Nama Database : smk_db

Nama File : tbl_siswa

Akronim : tbl_siswa.myd

Type File : File Master

Akses File : Random

Panjang Record : 171

(30)

Tabel 4.14 Spesifikasi File Tabel Siswa

b. Spesifikasi File Tabel Guru

Nama File : tbl_guru

Akronim : tbl_guru.myd

Akses File : Random

Panjang Record : 115 Karakter

Kunci Field : NIG

No Elemen Data Nama Field Type Size Keterangan

1 Nis NIS* Int 10 Primary Key

2 Nama Nama Varchar 30

3 Alamat Alamat Text 50

4 Tlp Tlp Varchar 20

6 Kelas Kelas Varchar 10

7 Jenis Kelamin Jenis_kelamin Varchar 1

8 Username Username Varchar 30

(31)

Tabel 4.15 Spesifikasi File Tabel Guru

c. Spesifikasi File Tabel Nilai

Nama File : tbl_nilai

Akronim : tbl_nilai.myd

Type File : File Transaksi

Akses File : Random

Kunci Field : id_Nilai

Tabel 4.16 Spesifikasi File Tabel Nilai

No Elemen Data Nama Field Type Size Keterangan

1 NIG NIG* Varchar 25 Primary Key

2 Nama Guru nm_guru Varchar 25

3 Username user_guru Varchar 35

4 Password Guru pass_guru Text 30

1 ID Nilai id_nilai* Int 10 Primary key

2 Nomor Induk Siswa NIS** Varchar 10 Foreign Key

3 Nilai Induk Guru NIG** Varchar 12 Foreign Key

4 Mata Pelajaran MP Varchar 20

(32)

d. Spesifikasi File Tabel Absen

Nama File : tbl_absen

Akronim : tbl_absen.myd

Akses File : Random

Kunci Field : id_absen

Tabel 4.17 Spesifikasi File Tabel Absen

1 ID Absen id_absen* Int 8 Primary Key

2 Tanggal absen tgl_absen Date -

3 Status absen Status Varchar 30

4 Keterangan ket_absen Text -

5 NIS NIS Varchar 20

e. Spesifikasi File Tabel TU/Admin

Nama File : tbl_tu

Akronim : tbl_tu.myd

(33)

Panjang Record : 153 Byte

Kunci Field : id_staffTU

Tabel 4.18 Spesifikasi File Tabel Admin

f. Spesifikasi File Tabel Orang Tua

Nama File : tbl_ortu

Akses File : Random

Kunci Field : id_ortu

Tabel 4.19 Spesifikasi File Tabel Orang Tua

1 ID Staff TU id_staffTU* Int 8 Primary Key

2 Username TU user_staffTU Varchar 25

3 Password TU pass_staffTU Varchar 30

1 Id ortu id_ortu* Int 8 Primary Key

2 Nama ortu nama_ortu Varchar 30

(34)

g. Spesifikasi File Tabel Tugas

Nama File : tbl_tugas

Akses File : Random

Kunci Field : id_tugas

Tabel 4.20 Spesifikasi File Tabel Tugas

h. Spesifikasi File Tabel Tahun Ajaran

Nama File : tbl_thn_ajaran

Akses File : Random

4 Password ortu Pass_ortu Varchar 20

5 Siswa NIS Varchar 20

1 Id Tugas id_tugas* Int 8 Primary Key

2 File filenya Varchar 100

(35)

Kunci Field : thn

Tabel 4.21 Spesifikasi File Tabel Tahun Pelajaran

4.2.2 Software Architecture

A. Deployment Diagram

Menggambarkan tata letak sistem secara fisik, yang menampakkan bagian-bagian software yang berjalan pada hardware yang digunakan untuk mengimplementasikan sebuah sistem dan keterhubungan antara komponen

hardware-hardware tersebut. Web Server + + + Windows + Apache Configuration + Apache + Net Server +

Web Data Server + Book Data + WebDatabase + WebDataOS + Web

Internal Data Server + Client Data + Orders + OS

+ Internal Data Config

Gambar 4.29 Deployment Diagram Sistem Akademik Berbasis Website No Elemen Data Nama Field Type Size Keterangan

(36)

B. Component Diagram

Component diagram menggambarkan struktur dan hubungan antara

komponen piranti lunak, termasuk ketergantungan diantaranya. Component Diagram juga dapat berupa interface yang berupa kumpulan layanan yang disesuaikan oleh komponen untuk lainnya.

Firewall AccepRequest{}HTMLRequest ForwardRequest{} HTMLRequest ReturnRespon{}HTMLResponse Web Server IIS 5.0 Do Request()Response Penilaian

COM + Component Enviroment

HTML Pages WEB Penilaian Database CS5 Stylesheets WEB SQL Server Configure() : void

ProsesSQL Request (): Recordshet Restard () : void

Gambar 4.30 Component Diagram Sistem Akademik Berbasis Website

4.2.3 User Interface

Menggambarkan tampilan program dari aplikasi yang diusulkan. User

(37)

A. Tampilan Menu HOME

Gambar 4.31 Tampilan Menu HOME

B. Tampilan Menu ABOUT

(38)

C. Tampilan Menu VISI dan Misi

Gambar 4.33 Tampilan Menu VISI DAN MISI

D. Tampilan Menu Jurusan

(39)

E. Tampilan Menu LOGIN

Gambar 4.35 Tampilan Menu LOGIN

F. Tampilan Laman ADMIN

(40)

G. Tampilan Laman GURU

Gambar 4.37 Tampilan Laman GURU

H. Tampilan Laman Siswa

(41)

I. Tampilan Laman Orang Tua

Gambar 4.39 Tampilan Laman ORANG TUA

4.3 Code Generation

Coding “ index.php”

<?php require_once('Connections/koneksi.php'); ?> <?php

//initialize the session

if (!isset($_SESSION)) {session_start();} // ** Logout the current user. **

$logoutAction = $_SERVER['PHP_SELF']."?doLogout=true"; if ((isset($_SERVER['QUERY_STRING'])) &&

($_SERVER['QUERY_STRING'] != "")){$logoutAction .="&".

htmlentities($_SERVER['QUERY_STRING']);}

if ((isset($_GET['doLogout'])) &&($_GET['doLogout']=="true")){ //to fully log out a visitor we need to clear the session varialbles

(42)

$_SESSION['MM_Username'] = NULL; $_SESSION['MM_UserGroup'] = NULL; $_SESSION['PrevUrl'] = NULL; unset($_SESSION['MM_Username']); unset($_SESSION['MM_UserGroup']); unset($_SESSION['PrevUrl']); $logoutGoTo = "login.php";

if ($logoutGoTo) {header("Location: $logoutGoTo");exit; }} ?>

<?php

if (!isset($_SESSION)) {session_start();} $MM_authorizedUsers = "";

$MM_donotCheckaccess = "true";

// *** Restrict Access To Page: Grant or deny access to this page

function isAuthorized($strUsers, $strGroups, $UserName, $UserGroup) { // For security, start by assuming the visitor is NOT authorized.

$isValid = False;

// When a visitor has logged into this site, the Session variable MM_Username set equal to their username.

// Therefore, we know that a user is NOT logged in if that Session variable is blank.

if (!empty($UserName)) { // Besides being logged in, you may restrict access to only certain users based on an ID established when they login.

(43)

// Parse the strings into arrays. $arrUsers = Explode(",", $strUsers); $arrGroups = Explode(",", $strGroups);

if (in_array($UserName, $arrUsers)) { $isValid = true;}

// Or, you may restrict access to only certain users based on their username. if (in_array($UserGroup, $arrGroups)) {$isValid = true;

<?php

if (!function_exists("GetSQLValueString")) {function

GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") {if (PHP_VERSION < 6) {

$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;} $theValue = function_exists("mysql_real_escape_string") ?

mysql_real_escape_string($theValue) : mysql_escape_string($theValue); switch ($theType) {case "text":

$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL"; break;

case "long": case "int":

$theValue = ($theValue != "") ? intval($theValue) : "NULL"; break; case "double":

$theValue = ($theValue != "") ? doubleval($theValue) : "NULL"; break;

case "date":

(44)

break;

case "defined":

$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;break;} return $theValue;}} $colname_tbl_usr = "-1"; if (isset($_SESSION['MM_Username'])) { $colname_tbl_usr = $_SESSION['MM_Username'];} mysql_select_db($database_koneksi, $koneksi);

$query_tbl_usr = sprintf("SELECT * FROM tbl_usr WHERE uname = %s", GetSQLValueString($colname_tbl_usr, "text"));

$tbl_usr = mysql_query($query_tbl_usr, $koneksi) or die(mysql_error()); $row_tbl_usr = mysql_fetch_assoc($tbl_usr);

$totalRows_tbl_usr = mysql_num_rows($tbl_usr); $colname_guru = "-1";

.noshadow * {-webkit-box-shadow: none !important;-moz-box-shadow: none !important;box-shadow: none !importa}

form.ui-mini .ui-field-contain fieldset.ui-controlgroup legend small {color: #666;} </style>

</head> <body>

(45)

<a href="<?php echo $logoutAction ?>" class="btn corner-all shadow ui-icon-back ui-btn-icon-left">Logout</a>

</div>

<div class="ui-content" role="main"> <?php

if ($row_tbl_usr['type'] == "admin"){?>

Admin<hr/>

<a href="siswa.php" data-transition="flip" class="ui-btn ui-corner-all ui-shadow ui-btn-inline"><img src="images/customer.png" align="center" /><br />Data Siswa</a>

<a href="ortu.php" data-transition="flip" class="btn corner-all shadow ui-btn-inline" ><img src="images/ortu.png" align="center" /><br />Data Orang Tua</a>

<!-- <a href="ortu.php" data-transition="flip" class="btn corner-all ui-shadow ui-btn-inline" ><img src="images/ortu.png" align="center" /><br />Orang Tua</a>

--> </div>

(46)

{ ?>

Selamat Datang <strong><?php echo $row_guru['nm_guru']; ?></strong><hr/> <a href="nilai.php" data-transition="flip" class="ui-btn ui-corner-all ui-shadow ui-btn-inline"><img src="images/nilai.png" align="center" /><br />Data Nilai</a>

Data Absen</a>

<a href="tugas.php" data-transition="flip" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" ><img src="images/upload.png" align="center" /><br />Upload Tugas</a>

</div> <?php}

if ($row_tbl_usr['type'] == "ortu") { ?>

Orang Tua<hr/>

<a href="info-nilai2.php" data-transition="flip" class="btn corner-all ui-shadow ui-btn-inline"><img src="images/info_nilai.png" align="center" /><br />Info Data Nilai</a>

(47)

<a href="info-absen2.php" data-transition="flip" class="btn corner-all ui-shadow ui-btn-inline" ><img src="images/info_absen.png" align="center" /><br />Info Absensi</a>

Raport</a> </div> <?php}

if ($row_tbl_usr['type'] == "siswa")

{ ?><div id="ui-body-test" class="ui-body ui-body-a ui-corner-all" style="margin-bottom:1em;" align="center">

Siswa<hr/>

<a href="info-nilai.php" data-transition="flip" class="btn corner-all ui-shadow ui-btn-inline"><img src="images/info_nilai.png" align="center" /><br />Info Nilai</a>

<a href="info-absen.php" data-transition="flip" class="btn corner-all ui-shadow ui-btn-inline" ><img src="images/info_absen.png" align="center" /><br />Info Absensi</a>

<a href="download.php" data-transition="flip" class="btn corner-all ui-shadow ui-btn-inline" ><img src="images/download.png" align="center" /><br />Download Tugas</a>

</div> <?php } ?>

(48)

</div> </div>

Setelah implementasi maka perlu diketahui apakah program atau aplikasi berjalan dengan benar dan pengujian ini menggunakan sistem Blackbox Testing.

(49)

A. Pengujian Untuk Login

Tabel 4.22 Pengujian Untuk Login

No Kasus/Form Diuji

Skenario Uji Hasil yang Diharapkan Hasil Pengujian

1 Login Admin Masukan data

Username dan Password yang BENAR

Ketika data login dimasukkan dan tombol login di klik, maka

akan dilakukan proses pengecekan data login. Apabila data login benar maka

akan langsung masuk ke halaman menu utama

Administrator. Valid Masukan data Username dan Password yang SALAH

dilakukan proses pengecekan data login. Apabila data login salah maka akan ditampilkan

pesan kesalahan.

Valid

Masukan data Username di

isi benar dan Password

kosong

dilakukan proses pengecekan data login. Apabila data login salah maka akan ditampilkan

(50)

B. Pengujian Untuk Input Nilai dan Absensi

Tabel 4.23 Pengujian Untuk Input Nilai dan Absensi No Kasus/Form

Diuji

Input Output yang dihasilkan Output yang sebenarnya Hasil Pengujian 1 Mengolah Data Nilai Guru dapat menambah, meng-edit dan menghapus data nilai siswa Guru dapat menampilkan data nilai siswa yang sudah ditambahkan oleh guru dan

tersimpan dalam sistem Halaman ini dapat berfungsi dengan baik Valid

2 Mengolah Guru dapat Guru dapat Halaman ini Valid

pesan kesalahan “username atau password anda salah” Masukan data

Username kosong dan Password di isi benar

dilakukan proses pengecekan data login. Apabila data login salah maka akan ditampilkan pesan kesalahan “please fill

out this field”.

(51)

Data Absen menambah dan menghapus data absensi siswa menampilkan data absensi siswa yang sudah ditambahkan oleh guru dan

tersimpan dalam sistem dapat berfungsi dengan baik 4.5 Support

Support menjelaskan tentang publikasi web (jika program berbasis web dan

spesifikasi hardware dan software yang akan digunakan untuk implementasi aplikasi yang dibuat.

4.5.1 Publikasi Web

Pembahasan mengenai proses penyewaan domain dan hosting secara online beserta analisa biaya sub bab ini digunakan jika rancangan program berbasis web.

Pada proses publikasi penulis memanfaatkan dropbox untuk transfer ke server. Lalu lakukan remote ke server.

(52)

kemudian dari server, download melalui dropbox. Dan pindahkan ke folder htdocs lalu lakukan import database.

(53)

4.5.2 Spesifikasi Hardware dan Software

Berikut adalah perangkat keras dan perangkat lunak yang penulis gunakan dalam perancangan website yang akan dibuat :

1. Komputer dengan spesifikasi processor intel core i5, RAM 4 Gb, harddisk 500 Gb.

2. Aplikasi XAMPP versi 1.8.3 dengan XAMPP control panel versi 3.2.1 yang sudah tersedia perangkat lunak PHP versi 5.5.11, Apache versi 2.4.9, dan MySQL versi 5.6.16

3. Browser Mozilla Firefox versi 46.0.1, Internet Explorer versi 11.0.9600.16384, Opera versi 39.0.2256.48

4. Dreamweaver

4.6 Spesifikasi Dokumen Sistem Usulan

Berikut dokumen pendukung untuk sistem usulan :

a. Nama Dokumen : Buku absen

Fungsi : Sebagai bukti absensi siswa

Sumber : Guru

Tujuan : Siswa

Media : Tampilan di web

Frekuensi : Setiap siswa masuk kelas

Format : Lampiran B1

b. Nama Dokumen : Buku nilai