BAB IV

IMPLEMENTASI DAN PENGUJIAN

4.1. Implementasi

Implementasi dan pengujan sistem pada aplikasi sistem informasi

pendataan alumni dengan menggunakan framework Bootstrap, PHP, CSS,

HTML,dan Javascript dengan basis data yang digunakan adalah Mysql. Dalam

implementasi aplikasi ini terdapat beberapa halaman.

4.1.1. Halaman Login

Gambar 4.1 Halaman Login

50
 51

Script Halaman Login

1. protected function validateLogin(Request $request)

2. {
3. $field = $this->field($request);
4. $messages = ["{$this->username()}.exists" => 'The
account you are trying to login is not registered or it
has been disabled.'];
5. $this->validate($request, [
6. $this->username() => "required|exists:users,
{$field}",
7. 'password' => 'required',
8. ], $messages);
9. }
10. }

Penjelasan Script : Alumni sebelum masuk ke halaman menu beranda terlebih

dahulu harus mengisi data verifikasi diri yang tersedia di halaman tampilan login,

diantaranya harus mengisi user name dan password.

4.1.2. Halaman Form Tambah Data Alumni

Gambar 4.2 Halaman Form Tambah Data Alumni

 52

Script Halaman Form Tambah Data Alumni

1. public function store(AlumniUsersRequest $request)

2. {
3. DB::beginTransaction();
4. try
5. {
6. $userData= array
7. (
8. "username" => $request['nis'],
9. "password" =>
bcrypt($request['nis']),
10. "name" =>
$request['name'],
11. "email" =>
$request['nis'].'@simalu.com',
12. "role" => "admin"
13. );
14. $users = User::create($userData);
15.
16. $users->assignRole('alumni');
17.
18. $alumniData = array
19. (
20. "nis" =>
$request['nis'],
21. "nama" =>
$request['name'],
22. "jenis_kelamin" =>
$request['jenis_kelamin'],
23. "tahun_lulus" =>
$request['tahun_lulus'],
24. "user_id" =>
$users->id,
25. );
26. Alumni::insert($alumniData);
27.
28. User::where('id', $users->id)-
>update(['role' => 'alumni']);
29. DB::commit();
30. return redirect('alumni-cpanel')-
>with('success_message','success tambah users alumni');
31. }catch(\Illuminate\Database\QueryException $e)
{
32. return redirect('alumni-cpanel')-
>with('error_message','gagal tambah users (log :'. $e-
>getMessage() .')');
33. }
 53

Penjelasan script halaman form tambah data alumni : ketika admin mnginputkan

penambahan data alumni yang meliputi yang meliputi nis, nama lengkap, jenis

kelamin, dan tahun lulus, jika berhasil maka akan mucul pesan sukses

penambahan data user alumni dan jika gagal akan muncul pesan gagal tambah

user.

4.1.3. Halaman Form Tambah Data Berita

Gambar 4.3 Halaman Form Tambah Berita

 54

Script Halaman Tambah Data Berita

1. public function store(BlogRequest $request)

2. {
3. $fname = strtotime(date('Y-m-d H:i:s'));
4.
5. $data = $request->except(['image']);
6. if ($request->hasFile('image')) {
7. $extension = $request->image->extension();
8. $filename = $fname . '.' . $extension;
9. $request->image->storeAs('public/blog',
$filename);
10. $data['gambar'] = env('APP_URL') .
'/storage/blog/' .$filename;
11. }
12. $arr_data = array(
13. "user_id" =>
Auth::id(),
14. "title" =>
$request['title'],
15. "content" =>
$request['content'],
16. "category" =>
$request['category'],
17. "summary" =>
$request['summary'],
18. "status" => 1,
19. "image" =>
$data['gambar'],
20. "created_at" => date('Y-m-
d H:i:s'),
21. );
22. Blog::insert($arr_data);
23. return redirect()->route('berita.index')-
>with('success_message', 'Berhasil menambah data');
24. }

Penjelasan script halaman tambah data berita : ketika admin mnginputkan

penambahan data berita yang meliputi judul berita, kategori, ringkasan, isi berita

dan foto , jika berhasil maka akan mucul pesan berhasil menambah data.
 55

4.1.4. Halaman Form Tambah Agenda

Gambar 4.4 Halaman Form Tambah Agenda

Script Halaman Form Tambah Agenda

1. public function store(AgendaRequest $request)

2. {
3. $arr_data = array(
4. "user_id" => Auth::id(),
5. "title" =>
$request['title'],
6. "describ" =>

$request['describ'],

7. "status" =>
$request['status'],
8. "created_at" => date('Y-m-d
H:i:s'),
 56

9. );
10. DB::beginTransaction();
11. try
12. {
13. Agenda::insert($arr_data);
14. DB::commit();
15. return redirect()->route('agenda.index')-
>with('success_message', 'Berhasil menambah data');
16. } catch (\Illuminate\Database\QueryException
$e) {
17. return redirect()->route('agenda.index')-
>with('error_message',$e->getMessage());
18. }
19. }

Penjelasan script halaman menu berita : ketika admin mnginputkan penambahan

data agenda yang meliputi judul agenda, status, dan detail agenda, jika berhasil

maka akan mucul pesan berhasil menambah data.

4.1.5. Halaman Beranda Alumni

Gambar 4.5 Halaman Beranda Alumni

 57

Script Halaman Form Halaman Beranda

1. <div class="section-body">
2. <!-- <h2 class="section-title">This is Example Page</h2>
3. <p class="section-lead">This page is just an example for
you to create your own page.</p> -->
4. <div class="card">
5. <div class="card-header">
6. <h4>Selamat Datang di SIPAL ( sistem informasi pendataan
alumni)</h4>
7. </div>
8. <div hidden="" class="card-image d-flex justify-content-
center"> </div>
9. <div class="card-body" > <p><?php echo $info-
>about; ?></p>
10. </div>
11. <div class="card-footer bg-whitesmoke">

Penjelasan script halaman beranda alumni : ketika alumni berhasil melakukan

login maka langsung menuju ke halaman beranda selamat datang di sistem

pendataan alumni, dihalaman beranda terdapat menu biodata, berita dan agenda.

4.1.6. Halaman Biodata Alumni.

Gambar 4.6 Halaman Biodata Alumni

 58

Script Halaman Biodata Alumni

1. <div class="main-content" style="min-height: 549px;">

2. <section class="section">
3. <div class="section-header">
4. <h1>Biodata</h1>
5. <div class="section-header-breadcrumb">
6. <div class="breadcrumb-item active"><a
href="#">Dashboard</a></div>
7. <div class="breadcrumb-item">Biodata</div>
8. </div>
9. /div>
10. <form action="{{ route('biodata.update') }}"
method="POST" enctype="multipart/form-data" >
11. @csrf
12. @method('PUT')
13. <div class="section-body">
14. <div class="row mt-sm-4">
15. <div class="col-12 col-md-12 col-lg-5">
16. <div class="card profile-widget">
17. <div class="profile-widget-header">
18. @if(empty($biodata->alumni->foto))
19. <img alt="image" src="../assets/img/avatar/avatar-
1.png" class="rounded-circle profile-widget-picture">
20. @else
21. <img alt="image" src="{{ $biodata->alumni->foto }}"
class="rounded-circle profile-widget-picture">
22. @endif
23. <div class="profile-widget-items">
24. <div class="profile-widget-item">
25. <div class="profile-widget-item-label">File</div>
26. <input type="hidden" name="foto" value="{{ $biodata-
>alumni->foto }}">
27. <div class="profile-widget-item-value"><input
type="file" name="image" style="margin-left: 20px;"
name="foto"></div>

Penjelasan script halaman biodata alumni : pada tampilan halaman biodata alumni

terdapat tampilan form yang meliputi nis, nama lengkapa, alamat email, tahun

masuk tahun lulus, jenis kelamin alamat, setelah alumni melakukan pengisian

biodata, klik tombol save submit maka otomatis data akan tersimpan.
 59

4.1.7. Halaman Berita

Gambar 4.7 Tampilan Halaman Berita

Script Halaman Berita

1. div class="main-content" style="min-height: 549px;">

2. <section class="section">
3. <div class="section-header">
4. <h1>Berita | {{ $berita->category }}</h1>
5. <div class="section-header-breadcrumb">
6. <div class="breadcrumb-item active"><a
href="#">Dashboard</a></div>
7. <div class="breadcrumb-item"><a href="#">Berita </a></div>
8. <div class="breadcrumb-item">detail</div>
9. </div>
10. </div>

Penjelasan script halaman berita : pada tampilan halaman berita menampilkan

judul berita, isi berita, serta detail berita.

 60

4.1.8. Halaman Agenda

Gambar 4.8 Tampilan Halaman Agenda

Script Halaman Agenda

1. <div class="section-body">
2. <h2 class="section-title">Deatil Agenda</h2>
3. <p class="section-lead">
4. <div class="row">
5. <div class="col-12">
6. <div class="card">
7. <div class="card-header">
8. <h4>{{ $agenda->title }}</h4>
9. </div>
10. <div class="card-body">

Penjelasan script halaman berita : pada tampilan halaman agenda menampilkan

judul agenda, isi agenda, detail agenda.

Alamat link website yang dapat diakases oleh alumni : https://mx32.site.

4.2. Pengujian Sistem

Pada bagian ini akan disajikan hasil pengujian yang telah dilakukan

terhadap sistem yang dihasilkan dengan menggunakan metode blackbox. Tahapan

akhir dalam penelitian ini adalah melakukan pengujian sistem yang melibatkan

penulis, user (Ade, Eka, Ahmad, Nadilla, Fikri). Berikut ini adalah hasil pengujian

yang telah dilakukan:

 61

1. Login

Tabel 4.1 Login

Data masukan Yang diharapkan Pengamatan Kesimpulan

Username dan Halaman utama Halaman utama [x] Diterima
password: terisi admin akan admin [ ] Ditolak
dengan benar dimunculkan dimunculkan
Username atau Akan menampilkan Ditampilkan [x] Diterima
password garis berwarna garis berwarna [ ] Ditolak
kosong atau merah pada textbox merah pada
salah username & textbox username
password & password

Pada tabel 4.1 dari pengecekan login yang dilakukan admin berhasil

masuk ke dalam sistem dengan memasukkan Username dan Password.

2. Halaman Biodata

Tabel 4.2 Biodata

Data masukan Yang diharapkan Pengamatan Kesimpulan

Menu biodata Halaman isi Halaman isi [x] Diterima
diklik biodata akan biodata [ ] Ditolak
dimunculkan dimunculkan
Data biodata Data biodata akan Data biodata [x] Diterima
diinputkan dan disimpan dan disimpan dan [ ] Ditolak
klik tombol save ditampilkan. ditampilkan.
submit

Pada tabel 4.2 dari pengecekan jika pengisian biodata yang dimasukkan

sudah sesuai , maka biodata alumni sudah bisa disimpan dan

ditampilkan.
 62

3. Halaman Tambah Berita

Tabel 4.3 Tambah Berita

Data masukan Yang diharapkan Pengamatan Kesimpulan

Tombol tambah Halaman tambah Halaman [x] Diterima
berita diklik berita akan tambah berita [ ] Ditolak
dimunculkan dimunculkan
Data berita Data berita akan Data berita [x] Diterima
diinputkan dan disimpan dan disimpan dan [ ] Ditolak
klik tombol ditampilkan. ditampilkan.
submit.
Tombol aksi Data berita yang Data berita [x] Diterima
edit dipilih pada diedit akan yang diedit [ ] Ditolak
data berita ditampilkan ditampilkan
Tombol aksi Data berita terpilih Data berita [x] Diterima
hapus dipilih akan dihapus terpilih [ ] Ditolak
pada data berita terhapus.

Pada tabel 4.3 dari pengecekan jika data berita yang dimasukkan sudah

sesuai , maka untuk tambah data berita sudah bisa ditambah, diedit dan

dihapus.

4. Halaman Tambah Agenda

Tabel 4.4 Tambah Agenda

Data masukan Yang diharapkan Pengamatan Kesimpulan

Tombol tambah Halaman tambah Halaman [x] Diterima
agenda diklik agenda akan tambah agenda [ ] Ditolak
dimunculkan dimunculkan
Data agenda Data agenda akan Data agenda [x] Diterima
diinputkan dan disimpan dan disimpan dan [ ] Ditolak
klik tombol ditampilkan. ditampilkan.
submit.
Tombol aksi Data agenda yang Data agenda [x] Diterima
edit dipilih diedit akan yang diedit [ ] Ditolak
pada data ditampilkan ditampilkan
agenda
Tombol aksi Data agenda Data [x] Diterima
hapus dipilih terpilih akan agendaterpilih [ ] Ditolak
pada data dihapus terhapus.
agenda
 63

Pada tabel 4.4 dari pengecekan jika data agenda yang dimasukkan

sudah sesuai , maka untuk tambah data berita sudah bisa ditambah,

diedit dan dihapus.

4.3. Kelebihan dan Kelemahan Sistem

4.3.1. Kelebihan Sistem

Kelebihan sistem diperoleh dari pengujian aplikasi yaitu :

1. Sistem ini merupakan web dinamis yang isinya dapat diubah sesuai

kebutuhan.

2. Sistem ini dapat diterapkan dan dapat melakukan pendataan alumni

MTs Negeri 9 Bantul berbasis web.

3. Sistem ini memudahkan admin dalam menginput data , karena data-

data tersebut diinput 1 bulan sekali, sehingga admin tidak perlu

menginputkan data setiap hari.

4.3.2. Kelemahan Sistem

Kelemahan sistem diperoleh dari pengujian aplikasi yaitu :

1. Sistem belum bisa disiapkan untuk pemberitahuan notifikasi lewat

whatsapp.

2. Sistem yang dibuat belum terdapat forum untuk melakukan diskusi

online antar alumni.