bab iv rancangan sistem dan program usulan · sistem informasi pendaftaran siswa baru berbasis web...

39
28 BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN 4.1. Analisis Kebutuhan Software A. Tahapan Analisis Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung. Pendaftar melakukan pendaftaran secara online. Berikut ini spesifikasi kebutuhan dari sistem tersebut: A. Halaman Pengunjung A1. Pengunjung dapat melihat beranda. A2. Pengunjung dapat melihat profil kami. A3. Pengunjung dapat melihat hubungi kami. A4. Pengunjung dapat melihat cara daftar. A5. Pengunjung dapat melihat jenis kursus. A6. Pengunjung dapat melakukan registrasi. B. Halaman Pendaftar B1. Pendaftar dapat melakukan login. B2. Pendaftar dapat mengisi formulir pendaftaran. B3. Pendaftar dapat melakukan konfirmasi bayar. B4. Pendaftar dapat melihat jadwal. B5. Pendaftar dapat melihat data pengajar B6. Pendaftar dapat melakukan logout.

Upload: dinhtuyen

Post on 12-Aug-2019

217 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

28

BAB IV

RANCANGAN SISTEM DAN PROGRAM USULAN

4.1. Analisis Kebutuhan Software

A. Tahapan Analisis

Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar

dan admin pendaftaran siswa baru tidak bertatap muka secara langsung.

Pendaftar melakukan pendaftaran secara online. Berikut ini spesifikasi kebutuhan

dari sistem tersebut:

A. Halaman Pengunjung

A1. Pengunjung dapat melihat beranda.

A2. Pengunjung dapat melihat profil kami.

A3. Pengunjung dapat melihat hubungi kami.

A4. Pengunjung dapat melihat cara daftar.

A5. Pengunjung dapat melihat jenis kursus.

A6. Pengunjung dapat melakukan registrasi.

B. Halaman Pendaftar

B1. Pendaftar dapat melakukan login.

B2. Pendaftar dapat mengisi formulir pendaftaran.

B3. Pendaftar dapat melakukan konfirmasi bayar.

B4. Pendaftar dapat melihat jadwal.

B5. Pendaftar dapat melihat data pengajar

B6. Pendaftar dapat melakukan logout.

Page 2: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

29

C. Halaman Administrator

C1. Administrator dapat melakukan login.

C2. Administrator dapat mengelola jenis kursus.

C3. Administrator dapat mengelola kelas kursus.

C4. Administrator dapat mengelola data kelas.

C5. Administrator dapat melihat data pendaftar.

C6. Administrator dapat mengelola data pengajar.

C7. Administrator dapat mengelola jam belajar.

C8. Administrator dapat mengelola jadwal.

C9. Administrator dapat mengelola data user.

C10. Administrator dapat mengelola konfirmasi pembayaran.

C11. Administrator dapat melihat laporan pembayaran.

C12. Administrator dapat melakukan logout.

D. Halaman Pengajar

D1. Pengajar dapat melakukan login.

D2. Pengajar dapat melihat jadwal

D3. Pengajar dapat melakukan logout.

B. Use Case Diagram

1. Use Case Diagram Halaman Pengunjung

Page 3: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

30

Gambar IV.1 Use Case Diagram Halaman Pengunjung

Tabel IV.1

Deskripsi use case diagram Halaman Pengunjung

Use Case Name Halaman Pengunjung

Requirements A6

Goal Pengunjung dapat mendaftar sebagai pendaftar

via website.

Pre-Conditions Pengunjung dapat melihat isi dari website

Pendaftaran Siswa Baru sebelum memutuskan

mendaftarkan diri sebagai pendaftar.

Post-Conditions Pengunjung dapat melakukan registrasi.

Failed End Condition Pengunjung tidak dapat langsung mengisi

formulir pendaftaran sebelum registrasi.

Primary Actors Pengunjung

Main Flow / Basic Path 1. Pengunjung memilih menu registrasi.

2. Sistem akan menampilkan menu registrasi.

3. Pengunjung mengisi data nama pendaftar,

email pendaftar dan no hp pendaftar.

4. Sistem akan menyimpan data registrasi

pendaftar.

Invariant : -

Page 4: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

31

2. Use Case Diagram Halaman Pendaftar

Gambar IV.2 Use Case Diagram Halaman Pendaftar

Tabel IV.2

Deskripsi use case diagram Halaman Pendaftar

Use Case Name Halaman Pendaftar

Requirements B1 – B5

Goal Pendaftar dapat mengisi formulir pendaftaran

Pre-Conditions Pendaftar harus melakukan pembayaran dan

segera melakukan konfirmasi pembayaran.

Post-Conditions Pendaftar login ke halaman pendaftar.

Failed End Condition Pendaftar tidak dapat melakukan cetak bukti

pendaftaran.

Primary Actors Pendaftar

Main Flow / Basic Path 1. Pendaftar mengisi nomor hp pendaftar

untuk login ke halaman pendaftar

2. Sistem mengecek nomor hp pendaftar yang

di isi sesuai. Jika sesuai akan tampil

halaman pendaftar. Jika tidak sesuai akan

keluar pesan bahwa Harap mendaftar

Page 5: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

32

dengan masukan nama & email jika belum

mendaftar.

3. Pendaftar dapat mengisi formulir dan

memperbaharui data pribadi kemudian klik

simpan.

4. Sistem akan menampilkan data jadwal dan

pengajar.

5. Pendaftar dapat melakukan transaksi

pembayaran pendaftaran & kursus.

6. Pendaftar dapat meng-upload bukti

pembayaran pada konfirmasi bayar.

7. Sistem akan menyimpan berkas

pembayaran.

8. Pendaftar dapat logout untuk mengakhiri

ruang halaman pendaftar.

Invariant : A9. Pendaftar dapat memilih hari/jam belajar

untuk jadwal kursus.

3. Use Case Diagram Halaman Administrator

Gambar IV.3 Use Case Diagram Halaman Administrator

Page 6: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

33

a. Deskripsi Use Case Mengelola Jenis Kursus

Tabel IV.3

Deskripsi Use Case Mengelola Jenis Kursus

Use Case Name Mengelola Jenis Kursus

Requirements C2

Goal Administrator dapat menambah, mengedit

dan menghapus data jenis kursus.

Pre-conditions Administrator telah login ke halaman

administrator.

Post-conditions Jenis kursus terupdate

Failed end condition Gagal menyimpan, mengupdate, atau

menghapus jenis kursus

Primary Actors Administrator

Main Flow / Basic Path 1. Administrator memilih menu jenis

kursus.

2. Sistem menampilkan jenis kursus.

3. Administrator menambah data,

mengedit dan menghapus jenis kursus.

4. Kemudian memilih tombol simpan.

5. Sistem akan menampilkan update jenis

kursus

Invariant C2. Administrator dapat memilih tambah

data, edit dan hapus data jenis kursus.

b. Deskripsi Use Case Mengelola Kelas Kursus

Tabel IV.4

Deskripsi Use Case Mengelola Kelas Kursus

Use Case Name Mengelola Kelas Kursus

Requirements C3

Goal Administrator dapat menambah, mengedit

dan menghapus data kelas kursus

Pre-conditions Administrator telah login ke halaman

administrator.

Post-conditions Kelas kursus terupdate

Failed end condition Gagal menyimpan, mengupdate, atau

menghapus kelas kursus.

Primary Actors Administrator

Main Flow / Basic Path 1. Administrator memilih menu kelas

kursus.

2. Sistem menampilkan kelas kursus.

Page 7: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

34

3. Administrator menambah data,

mengedit dan menghapus kelas kursus.

4. Kemudian memilih tombol simpan.

5. Sistem akan menampilkan update kelas

kursus

Invariant C3. Administrator dapat memilih tambah

data, edit dan hapus data kelas kursus.

c. Deskripsi Use Case Mengelola Data Kelas

Tabel IV.5

Deskripsi Use Case Mengelola Data Kelas

Use Case Name Mengelola Data Kelas

Requirements C4

Goal Administrator dapat menambah, mencetak,

mengedit dan menghapus data kelas

Pre-conditions Administrator telah login ke halaman

administrator

Post-conditions Data kelas ter-update.

Failed end condition Gagal menambahkan data kelas.

Primary Actors Administrator

Main Flow / Basic Path 1. Administrator memilih menu data kelas.

2. Sistem menampilkan data kelas.

3. Administrator dapat menambah,

mencetak, mengedit dan menghapus

data kelas

4. Sistem akan menampilkan update data

kelas.

C4. Administrator dapat menambah,

mencetak, mengedit dan menghapus

data kelas.

d. Deskripsi Use Case Mengelola Data Pendaftar

Tabel IV.6

Deskripsi Use Case Mengelola Data Pendaftar

Use Case Name Mengelola Data Pendaftar

Requirements C5

Goal Administrator dapat melihat, menghapus dan

mencetak data pendaftar

Page 8: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

35

Pre-conditions Administrator telah login ke halaman

administrator

Post-conditions Data pendaftar ter-update

Failed end condition Gagal melihat, menghapus, dan mencetak

data pendaftar.

Primary Actors Administrator

Main Flow / Basic Path 1. Administrator memilih data pendaftar.

2. Sistem menampilkan data pendaftar.

3. Administrator dapat melihat detail,

menghapus dan mencetak data

pendaftar.

4. Kemudian memilih tombol

update/simpan.

5. Sistem akan menampilkan update data

pendaftar.

Invariant C5. Admin dapat melihat detail, menghapus,

dan mencetak data pendaftar.

e. Deskripsi Use Case Mengelola Data Pengajar

Tabel IV.7

Deskripsi Use Case Mengelola Data Pengajar

Use Case Name Mengelola Data Pengajar

Requirements C6

Goal Administrator dapat menambah, mencetak,

mengedit, menghapus dan melihat detail data

pengajar.

Pre-conditions Administrator telah login ke halaman

administrator.

Post-conditions Data pengajar ter-update

Failed end condition Gagal menambah, mencetak, mengedit,

menghapus dan melihat detail data pengajar.

Primary Actors Administrator

Main Flow / Basic Path 1. Administrator memilih menu data

pengajar.

2. Sistem menampilkan data pengajar.

3. Administrator dapat menambah,

mencetak, mengedit, menghapus dan

melihat detail data pengajar.

4. Kemudian memilih tombol

update/simpan.

5. Sistem akan menampilkan update data

Page 9: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

36

pengajar.

Invariant C6. Administrator dapat menambah,

mencetak, mengedit, menghapus dan

melihat detail data pengajar.

f. Deskripsi Use Case Mengelola Jam Belajar

Tabel IV.8

Deskripsi Use Case Mengelola Jam Belajar

Use Case Name Mengelola Jam Belajar

Requirements C7

Goal Administrator dapat menambah, mengedit

dan menghapus jam belajar.

Pre-conditions Administrator telah login ke halaman

administrator.

Post-conditions Jam belajar ter-update.

Failed end condition Gagal menambah, mengedit dan menghapus

jam belajar

Primary Actors Administrator

Main Flow / Basic Path 1. Administrator memilih menu jam

belajar.

2. Sistem menampilkan jam belajar.

3. Administrator dapat menambah,

mengedit dan menghapus jam belajar.

4. Kemudian memilih tombol

update/simpan.

5. Sistem akan menampilkan update jam

belajar.

Invariant C7. Administrator dapat menambah,

mengedit dan menghapus jam belajar.

g. Deskripsi Use Case Mengelola Jadwal

Tabel IV.9

Deskripsi Use Case Mengelola Jadwal

Use Case Name Mengelola Jadwal

Requirements C8

Goal Administrator dapat menghapus jadwal.

Pre-conditions Administrator telah login ke halaman

administrator.

Page 10: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

37

Post-conditions Jadwal terhapus

Failed end condition Gagal menghapus jadwal.

Primary Actors Administrator

Main Flow / Basic Path 1. Administrator memilih menu jadwal.

2. Sistem menampilkan jadwal.

3. Administrator menghapus jadwal.

4. Sistem akan menghapus data di jam

belajar.

Invariant C8. Administrator menghapus jadwal.

h. Deskripsi Use Case Mengelola Data User

Tabel IV.10

Deskripsi Use Case Mengelola Data User

Use Case Name Mengelola Data User

Requirements C9

Goal Administrator dapat menambah, mengedit,

melihat detail user

Pre-conditions Administrator telah login ke halaman

administrator.

Post-conditions Administrator dapat menambahkan data user

Failed end condition Tidak bisa menambah dan menghapus data

user.

Primary Actors Administrator

Main Flow / Basic Path 1. Administrator memilih menu data user.

2. Sistem menampilkan data user.

3. Administrator dapat menambahkan,

mengedit dan melihat detail user

4. Sistem akan menampilkan update data

user.

Invariant C9. Administrator dapat menambah,

mengedit, dan melihat detail user

Page 11: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

38

i. Deskripsi Use Case Mengelola Data Konfirmasi Pembayaran

Tabel IV.11

Deskripsi Use Case Mengelola Konfirmasi Pembayaran

Use Case Name Mengelola Konfirmasi Pembayaran

Requirements C10

Goal Administrator dapat melihat, mecetak dan

memilih acc konfirmasi pembayaran.

Pre-conditions Administrator telah login ke halaman

administrator.

Post-conditions Data konfirmasi pembayaran ter-update.

Failed end condition Tidak bisa menghapus data konfirmasi

pembayaran.

Primary Actors Administrator

Main Flow / Basic Path 5. Administrator memilih menu konfirmasi

pembayaran.

6. Sistem menampilkan konfirmasi

pembayaran.

7. Administrator dapat melihat detail,

mencetak dan memilih acc konfirmasi

pembayaran.

8. Sistem akan menampilkan update data

konfirmasi pembayaran.

Invariant C10. Administrator dapat melihat, mencetak

dan memilih acc konfirmasi pembayaran

j. Deskripsi Use Case Melihat Laporan

Tabel IV.12

Deskripsi Use Case Melihat Laporan

Use Case Name Melihat Laporan

Requirements C11

Goal Administrator dapat melihat laporan data

pendaftaran.

Pre-conditions Administrator telah login ke halaman

administrator.

Post-conditions Mencetak laporan.

Failed end condition Gagal melihat laporan.

Primary Actors Administrator

Main Flow / Basic Path 1. Administrator memilih menu laporan.

Page 12: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

39

2. Sistem menampilkan halaman laporan.

3. Administrator mengisi tanggal, bulan

dan tahun laporan yang ingin dilihat.

4. Sistem akan menampilkan laporan

pendaftaran calon siswa.

5. Administrator dapat mencetak laporan

Invariant C11. Dapat memilih periode tertentu untuk

melihat laporan pembayaran

C. Activity Diagram

Activity diagram yang digunakan unutk merancang sistem usulan adalah

sebagai berikut :

a. Activity diagram halaman Registrasi

Gambar IV.4

Activity diagram Pengunjung Registrasi

Page 13: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

40

b. Activity diagram halaman Login Pendaftar

Gambar IV.5

Activity diagram Login Pendaftar

c. Activity diagram halaman Formulir Pendaftaran

Gambar IV.6

Activity diagram Formulir Pendaftaran

Page 14: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

41

d. Activity diagram Pendaftar Konfirmasi Pembayaran

Gambar IV.7

Activity diagram Konfirmasi Pembayaran

e. Activity diagram halaman Pendaftar

Gambar IV.8

Activity diagram halaman Pendaftar

Page 15: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

42

f. Activity diagram Administrator

Gambar IV. 9

Activity diagram administrator

4.2. Desain

Pada tahapan ini akan menjelaskan tentang desain Database, desain

software architecture dan desain interface dari sitem yang sedang dibuat.

4.2.1 Database

Berikut ini adalah penggambaran hubungan tabel dalam Database

Perancangan Sistem Informasi online yang menggunakan Entity Relationship

Diagram dan Logical Record Structure

Page 16: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

43

1. Entity Relationship Diagram

Gambar IV.10

Gambar Entity Relationshionship

Page 17: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

44

2. Logical Record Structure

Gambar IV.11

Logical Record Structure

Page 18: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

45

3. Spesifikasi File

a. Spesifikasi File Tabel User

Nama Database : morisa

Nama File : Tabel User

Akronim : User.myd

Tipe File : File Master

Akses File : Random

Panjang Record : 248 Byte

Kunci Field : id_user

Tabel IV.13

Spesifikasi File User

No Elemen Data Nama field Type size Keterangan

1. Id User id_user Integer 5 Primary Key

2. Nama nm_user Varchar 45

3. Handphone hp_user Varchar 13

4. Email email_user Varchar 45

5. Jenis Kelamin jk_user Enum(‘L’,‘P’)

6 Level level_user Varchar 45

7 Aktif aktif_user Enum(‘Y’, ‘N’)

8 Password Password_user Varchar 50

b. Spesifikasi File Table Pendaftar

Nama Database : morisa

Nama File : Tabel Pendaftar

Akronim : Pendaftar.myd

Tipe File : File Master

Page 19: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

46

Akses File : Random

Panjang Record : 173 Byte

Kunci Field : id_pendaftar

Tabel IV.14

Spesifikasi File Pendaftar

No. Elemen Data Nama field Type Size Keterangan

1. Id Pendaftar id_pendaftar integer 11 Primary Key

2. Nama Pendaftar nm_pendaftaran varchar 75

3. Email email_pendaftar varchar 75

4. Handphone hp_pendaftar varchar 12

c. Spesifikasi File Table Konfirmasi

Nama Database : db_morisa

Nama File : Tabel Konfirmasi

Akronim : Konfirmasi.myd

Tipe File : File Transakasi

Akses File : Random

Panjang Record : 252 Byte

Kunci Field : id_konfirmasi

Tabel IV.15

Spesifikasi File Konfirmasi

No Elemen Data Akronim Type

Wid

th Desk

1. Id Konfirmasi id_konfirmasi Integer 11 Primary key

2. Id Pendaftaran id_pendaftaran Integer 11 Forigen Key

3. Tanggal tgl Date

4. Jam jam Time

Page 20: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

47

5. Bank Anda bank_anda Varchar 45

6. No Rekening Anda norek_anda Varchar 45

7. Atas Nama an Varchar 45

8. Bank Kami bank_kami Varchar 45

9. Bukti Slip Bukti Text

10. Status acc Enum (“N”,”Y”)

11. Jenis Pembayaran jenis Varchar 50

d. Spesifikasi File Table Formulir

Nama Database : morisa

Nama File : Tabel Formulir

Akronim : Formulir.myd

Tipe File : File Master

Akses File : Random

Panjang Record : 129 Byte

Kunci Field : id_formulir

Tabel IV.16

Spesifikasi File Formulir

No Elemen Data Akronim Type

Wid

th Desk

1. Id Formulir id_formulir Integer 16 Primary key

2. Id Pendaftar id_pendaftar Integer 11 Forigen Key

3. Nama Calon Siswa nm_casis Varchar 45

4. Umur umur Integer 11

5. Pendidikan pendidikan Varchar 35

6. Alamat Sekolah alamat_sekolah Text

7. Id Jenis Kursus id_jenis_kursus Integer 11 Forigen Key

Page 21: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

48

e. Spesifikasi File Table Jadwal

Nama Database : morisa

Nama File : Tabel Jadwal

Akronim : Jadwal.myd

Tipe File : File Master

Akses File : Random

Panjang Record : 129 Byte

Kunci Field : id_jadwal

Tabel IV.17

Spesifikasi File Jadwal

No Elemen Data Akronim Type

Wid

th Desk

1. Id Jadwal id_jadwal Integer 11 Primary key

2. Id Jam id_jam Integer 11 Forigen Key

3. Nama Kelas nmkelas Varchar 45

4. Kuota kuota Integer 11

5. Hari hari Varchar 10

6. Id Pendaftar id_pendaftar Integer 11 Forigen Key

4.2.2. Software Architecture

A. Component diagram

Menggambarkan struktur dan hubungan antar komponen piranti lunak,

termasuk ketergantungan diantaranya. Component Diagram juga dapat berupa

interface yang berupa kumpulan layanan yang disediakan oleh komponen untuk

komponen lainnya.

Page 22: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

49

Gambar IV.12

Component Diagram

B. 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.

Gambar IV.13

Deployment Diagram

Page 23: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

50

4.2.3. User Interface

a. Tampilan Halaman Login Administrator

Gambar IV.14

Tampilan halaman Login Administrator

b. Tampilan Halaman Administrator

Gambar IV.15

Tampilan halaman Administrator

Page 24: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

51

c. Tampilan Halaman Jenis Kursus

Gambar IV.16

Tampilan halaman Jenis Kursus

d. Tampilan Halaman Kelas Kursus

Gambar IV.17

Tampilan halaman Kelas Kursus

Page 25: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

52

e. Tampilan Halaman Data Pendaftar

Gambar IV.18

Tampilan halaman Data Pendaftar

f. Tampilan Halaman Data Pengajar

Gambar IV.19

Tampilan halaman Data Pengajar

Page 26: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

53

g. Tampilan Halaman Jadwal

Gambar IV.20

Tampilan halaman Jadwal

h. Tampilan Halaman Data User

Gambar IV.21

Tampilan halaman Data User

Page 27: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

54

i. Tampilan Halaman Konfirmasi Pembayaran

Gambar IV.22

Tampilan halaman Konfirimasi Pembayaran

j. Tampilan Halaman Laporan Pembayaran

Gambar IV.23

Tampilan halaman Laporan Pembayaran

Page 28: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

55

k. Tampilan Halaman Formulir Pendaftaran

Gambar IV.24

Tampilan halaman Formulir Pendaftaran

l. Tampilan Halaman Registrasi / Login Pendaftar

Gambar IV.25

Tampilan halaman Registrasi/ Login Pendaftar

Page 29: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

56

m. Tampilan Halaman Pengajar

Gambar IV.26

Tampilan halaman Pengajar

4.3. Code Generation

A. Data Pendaftar

<h3>Data Pendaftar </h3> <hr> <a href="pendaftaran_cetak.php" target="_blank">Cetak</a> <br> <table border="1" style="border-collapse: collapse;" width="100%" cellpadding="10">

<tr>

<td>No</td>

<td>Pendaftar</td>

<td>Calon Siswa</td>

<td>Umur</td>

<td>Pendidikan</td>

<td>Email Pendaftar</td>

<td>#</td>

</tr>

<?php $kode="select * from formulir,pendaftar where formulir.id_pendaftar=pendaftar.id_ pendaftar order by id_formulir"; $sql=$konek->query($kode); $no=1; foreach($sql as $data){

echo "

Page 30: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

57

<tr>

< td>$no</td>

<td>$data[nm_pendaftar]</td>

<td>$data[nm_casis]</td>

<td>$data[umur]</td>

<td>$data[pendidikan]</td>

<td>$data[email_pendaftar]</td>

<td>

<a href=\"?page=pendaftaran_detail&id_formulir=$data[id_formulir]\">Detail</a>

<a href=\"?page=pendaftaran_hapus&id_formulir=$data[id_formulir]\" onclick=\" javascript: return confirm('APA YAKIN?')\">Hapus</a>

</td> </tr> "; $no++;

} ?>

</table>

B. Formulir Pendaftaran

<?php if (!isset($_SESSION['hp_pendaftar'])) { echo "<script>alert('Silahkan melakukan registrasi pendaftaran dahulu untuk bisa mengisi formulir');document.location='?page=registrasi'</script>"; } if (isset($_POST['update'])) { $id_pendaftar=$_POST['id_pendaftar']; $nm_casis=$_POST['nm_casis']; $umur=$_POST['umur'];

$pendidikan=$_POST['pendidikan']; $alamat_sekolah=$_POST['alamat_sekolah']; $id_jenis_kursus=$_POST['id_jenis_kursus']; $kode_insert=$konek->prepare("update formulir set id_pendaftar='$id_ pendaftar', nm_casis= '$nm_casis', umur='$umur',pendidikan='$pendidikan',alamat_sekolah='$alamat_sekolah',id_jenis_kursus=

'$id_jenis_kursus' where id_formulir='$id_formulir'"); $insert_formulir=$kode_insert->execute(); if ($insert_formulir) { echo "<script>alert('UPDATE DATA BERHASIL');document.location='?page=formulir_berhasil'</script>"; } else{ echo "GAGAL";}

} if (isset($_POST['simpan'])) { $nm_casis=$_POST['nm_casis']; $umur=$_POST['umur']; $pendidikan=$_POST['pendidikan']; $alamat_sekolah=$_POST['alamat_sekolah']; $id_jenis_kursus=$_POST['id_jenis_kursus'];

$kode_insert=$konek->prepare("insert into formulir (id_pendaftar,nm_casis,umur,pendidikan,alamat_sekolah,id_jenis_kursus) values (?,?,?,?,?,?)"); .. $data_insert=array($id_pendaftar_sesi,$nm_casis,$umur,$pendidikan,$alamat_sekolah, $id_jenis_kursus); $insert_formulir=$kode_insert->execute($data_insert); if ($insert_formulir) {

Page 31: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

58

header("location:?page=formulir_berhasil"); } else{ echo "GAGAL";} } $lihat=$konek->query("select * from formulir where id_pendaftar='$id_pendaftar_sesi'"); $cekdata=$lihat->rowCount();

$datanya=$lihat->fetch(); if ($cekdata>=1) { $label="update"; $id_formulir="<input type=\"hidden\" name=\"id_formulir\" value=\"$datanya[id_formulir] \">"; $nm_casis=$datanya['nm_casis']; $umur=$datanya['umur']; $pendidikan=$datanya['pendidikan'];

$alamat_sekolah=$datanya['alamat_sekolah']; $id_jenis_kursus=$datanya['id_jenis_kursus']; } else{ $label="simpan"; $id_formulir=""; $nm_casis=""; $umur="";

$pendidikan=""; $alamat_sekolah=""; $id_jenis_kursus=""; } ?> <h3>Formulir Pendaftaran Calon Siswa</h3> <hr> <br>

<form method="POST" action="?page=formulir"> <?php echo $id_formulir; ?> <table cellpadding="5" cellspacing="6">

<tr> <td>Nama Calon Siswa</td><td> <input type="text" name="nm_casis" value="<?php echo $nm_casis; ?>" required> </td>

</tr> <tr> <td>Umur Calon Siswa</td> <td> <input type="text" name="umur" value="<?php echo $umur; ?>" required> </td> </tr> <tr>

<td>Pendidikan</td> <td> <select name="pendidikan" required=""> <option value="<?php echo $pendidikan; ?>"><?php echo $pendidikan; ?></option> <option value="">-----</option> <option>TK</option> <option>SD</option> <option>SMP</option>

<option>SMA/SMK</option> <option>PT</option> <option>Lain-lain</option> </select> </td> </tr> <tr>

Page 32: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

59

<td>Alamat Sekolah Asal</td> <td> <textarea name="alamat_sekolah" rows="5" cols="50" required=""><?php echo $alamat_ sekolah; ?></textarea> </td> </tr> <tr>

<td>Jenis Kursus Pilihan</td> <td> <select name="id_jenis_kursus" required=""> <?php $query=$konek->query("select * from macam order by id_jenis_kursus"); foreach($query as $data){

if ($id_jenis_kursus==$data['id_jenis_kursus']) { $ceklist="selected=\"selected\""; } else{ $ceklist=""; } echo "<option value=\"$data[id_jenis_kursus]\" $ceklist>$data[macam]</option>";

} ?> </select> </td> </tr>

<tr> <td colspan="2"> <input type="submit" name="<?php echo $label; ?>" value="Simpan"> <input type="reset" name="batal" value="Batal"> </td> </tr> </table>

</form>

C. Form Konfirmasi Pembayaran

<a href="?page=konfirmasi_bayar_all">Lihat Semua Konfirmasi</a> || <font size="3"><b>Konfirmasi Baru</b></font>

<hr> <a href="konfirmasi_cetak.php" target="_blank">CETAK</a> <br><br> <table width="100%" border="1" style="border-collapse: collapse;" cellpadding="7" cellspacing="7"> <thead> <tr> <th>No</th> <th>ID konfirmasi</th>

<th>Pendaftar</th> <th>tgl</th> <th>jam</th> <th>Bank anda</th> <th>No Rek anda</th> <th>an</th> <th>Bank Kami</th>

Page 33: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

60

<th>Jenis</th> <th>Acc</th> <th>#</th> </tr> </thead> <tbody> <?php

$query=$konek->query("select DISTINCT * from konfirmasi"); $no=1; foreach($query as $data){ echo " <tr> <td align=\"center\">$no</td> <td align=\"center\">$data[id_konfirmasi]</td> <td align=\"center\">$data[id_pendaftar]</td>

<td align=\"center\">$data[tgl]</td> <td align=\"center\">$data[jam]</td> <td align=\"center\">$data[bank_anda]</td> <td align=\"center\">$data[norek_anda]</td> <td align=\"center\">$data[an]</td> <td align=\"center\">$data[bank_kami]</td> <td align=\"center\">$data[jenis]</td> <td align=\"center\"><font color=\"#00E632\"><b>$data[acc]</b></font></td>

<td align=\"center\"><a href=\"?page=konfirmasi_bayar_view&id_konfirmasi=$data[id_konfirmasi]\"><img src=\"../gambar/view.png\" width=\"20\"></a></td> </tr> "; $no++; } ?> </tbody>

</table>

4.4. Testing

A. Halaman Login Admin

Tabel IV.18

Hasil Pengujian Blackbox testing halaman Login Admin

No Skenario

Pengujian Test Case

Hasil yang

diharapkan

Hasil

pengujia

n

Kes

1

Mengosongkan

semua isian data

login pada login

admin , lalu

langsung mengklik

tombol “Login”

Email :

(kosong)

Password :

(kosong)

Sistem menolak

akses dan

menampilkan

pesan “Please fill

out this field”.

Sesuai Valid

2

Hanya mengisi

Email dan

mengosongkan

Email:

admin@gmail.

com

Sistem menolak

akses dan

menampilkan

Sesuai Valid

Page 34: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

61

password lalu klik

“Login”

Password :

(kosong)

pesan “Please fill

out this field”

3

Hanya mengisi

password dan

mengosongkan

email, lalu

langsung mengklik

tombol “Login”

Email :

(kosong)

Password :

123

Sistem menolak

akses dan

menampilkan

pesan “Please fill

out this field”.

Sesuai Valid

4

Menginputkan data

login yang benar,

lalu mengklik

tombol “Login”

Email :

admin@gmail.

com

Password :

123

Sistem menerima

akses login dan

kemudian

langsung

menampilkan

pesan “Login

sukses” kemudian

masuk ke halaman

admin

Sesuai Valid

B. Halaman Login Pendaftar

Tabel IV.19

Hasil Pengujian Blackbox testing halaman Login Pendaftar

No Skenario

Pengujian Test Case

Hasil yang

diharapkan

Hasil

pengujia

n

Kes

1

Mengosongkan

isian data login

pada login admin ,

lalu langsung

mengklik tombol

“Login”

No. Hp

Pendaftar :

(kosong)

Sistem menolak

akses login dan

menampilkan

pesan “Please

enter a number”

Sesuai Valid

2

Menginputkan

data login yang

benar, lalu

mengklik tombol

“Login”

No. Hp

Pendaftar :

08389900983

1

Sistem menerima

akses login dan

kemudian

langsung

menampilkan

pesan “Anda

Sudah Terdaftar”

kemudian masuk

ke halaman

pendaftar

Sesuai Valid

Page 35: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

62

C. Halaman Formulir Pendaftaran

Tabel IV.20

Hasil Pengujian Blackbox testing halaman Formulir Pendaftaran

No Skenario

Pengujian Test Case

Hasil yang

diharapkan

Hasil

pengujia

n

Kes

1

Mengosongkan

semua isian data

pada formulir

pendaftaran online,

lalu langsung

mengklik tombol

“Simpan”

Semua isian

kosong

Sistem

menolak akses

dan

menampilkan

pesan

““Please fill

out this

field””.

Sesuai Valid

2

Mengosongkan

semua isian data

hanya mengisi

Nama Lengkap,

lalu langsung

mengklik tombol

“Simpan”

Terisi sebagian

Sistem

menolak akses

dan

menampilkan

pesan

““Please fill

out this field””

Sesuai Valid

3

Mengisi semua

isian data pada

form pendaftaran

online mengklik

tombol “Simpan”

Terisi semua

Sistem

menerima dan

menampilkan

pesan “

Formulir

sudah terisi”

Sesuai Valid

C. Halaman Kofirmasi Bayar

Tabel IV.21

Hasil Pengujian Blackbox testing halaman Konfirmasi Bayar

No Skenario

Pengujian Test Case

Hasil yang

diharapkan

Hasil

pengujia

n

Kes

1

Mengosongkan

semua isian data

pada form

konfirmasi bayar,

lalu langsung

Semua isian

kosong

Sistem

menolak akses

dan

menampilkan

pesan

Sesuai Valid

Page 36: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

63

mengklik tombol

“Kirim

Konfirmasi”

““Please fill

out this

field””.

2

Mengosongkan

semua isian data

hanya mengisi

nominal transfer,

lalu langsung

mengklik tombol

“Kirim

Konfirmasi”

Terisi sebagian

Sistem

menolak akses

dan

menampilkan

pesan

““Please fill

out this field””

Sesuai Valid

3

Mengisi semua

isian data pada

form konfirmasi

bayar lalu mengklik

tombol “Kirim

Konfirmasi Bayar”

Terisi semua

Sistem

menerima dan

menampilkan

pesan “

Berhasil

Konfirmasi”

Sesuai Valid

4.5. Support

Pada sub bab ini memaparkan tentang publikasi web dan spesifikasi

perangkat lunak (software) dan perangkat keras (hardware) yang akan digunakan

untuk menjalankan sistem yang dibuat.

4.5.1 Publikasi Web

Domain merupakan nama unik untuk web, domain merupakan yang

diakhiri dengan .com, .net, .org, .biz, .tv dan lain-lain. Untuk analisa biaya hosting

Morisa College mengambil hosting berbayar, yaitu www.rumahweb.com yang

digunakan untuk hosting web www.morisa.rinsite.com

Page 37: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

64

Gambar IV. 27

Spesifikasi Harga Hosting

4.5.2 Spesifikasi Hardware dan Software

Menjelaskan tentang kebutuhan hardware dan software standard yang

akan digunakan untuk dapat menjalankan sistem usulan. Kebutuhan hardware

tersebut meliputi : Processor, Memory, Monitor, Hard Disk,Keyboard, Mouse,

dan Printer. Kebutuhan software tersebut meliputi : Sistem Operasi, Software

Aplikasi & Software Database.

Tabel IV.22

Spesifikasi Software dan Hardware

Kebutuhan Keterangan

Sistem Oprasi Windows 8 Pro 64-bit

Prosesor Intel® Core™ i3-4005U CPU 1.70GHz

Ram 2.00 GB

Harddisk 500 GB

Dvd Sup.MTI.

Page 38: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

65

Monitor SVGA 14”

Keyboard 108 Key

Mouse Standar

Printer Inkjet

Browser Mozilla Firefox, Internet Explorer, Google Chrome

Software Adobe Dreamweaver CS3, PHP My Admin

Selain hardware dan software yang disebutkan diatas, adapula tools yang

di pergunakan untuk membuat aplikasi dan sistem, yaitu : sistem Operasi

Windows, Adobe Dreamweaver CS3 sebagai editor , XAMPP sebagai server

local.

4.6. Spesifikasi Dokumen Sistem Usulan

Dalam spesifikasi sistem usulan ini terdapat beberapa dokumen yang

meliputi dokumen masukan dan dokumen keluaran, adapun spesifikasinya adalah

sebagai berikut:

1. Nama Dokumen : Formulir Pendaftaran Online

Fungsi : Sebagai masukan data pendaftar

Sumber : Pendaftar

Tujuan : Admin

Media : Tampilan

Frekuensi : Setiap ada pendaftaran

Bentuk : Lampiran B-1

2. Nama Dokumen : Konfirmasi Pembayaran

Fungsi : Laporan data konfirmasi pembayaran

Sumber : Pendaftar

Page 39: BAB IV RANCANGAN SISTEM DAN PROGRAM USULAN · Sistem informasi pendaftaran siswa baru berbasis web di mana pendaftar dan admin pendaftaran siswa baru tidak bertatap muka secara langsung

66

Tujuan : Admin

Media : Tampilan

Frekuensi : Setiap ada transaksi pembayaran

Bentuk : Lampiran B-2

3. Nama Dokumen : Laporan Pembayaran

Fungsi : Laporan data pembayaran siswa

Sumber : Admin

Tujuan : Pimpinan Lembaga

Media : Tampilan

Frekuensi : Setiap ada transaksi konfirmasi pembayaran

Bentuk : Lampiran B-3