Laporan Presentasi Kelompok

LAPORAN PRESENTASI
APLIKASI PENGADUAN MASYARAKAT DI KABUPATEN BANGKALAN
1. Implementasi Sistem
 Beranda Aplikasi
Berdasarkan gambar diatas menjelaskan bahwa ketika pelanggan dan admin masuk ke
aplikasi, ini merupakan tampilan awal yang akan dimunculkan. Pada button sistem pengaduan
digunakan untuk pelanggan sedangkan admin digunakan untuk admin dari PDAM. Berikut adalah
script code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PDAM BANGKALAN</title>
<link href="<?php echo base_url()?>/assets/bootstrap/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<script src="<?php echo base_url()?>/assets/js/jquery.min.js"></script>
<script src="<?php echo base_url()?>/assets/popper/umd/popper.min.js"></script>
<script src="<?php echo base_url()?>/assets/js/bootstrap.min.js"></script>
</head>
<body style="background-
image:url('http://localhost/feedback_pdam/assets/gambar/background.jpg'); background-repeat:
no-repeat;background-size: cover;">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="<?php echo base_url()?>/assets/gambar/logo.jpg" width="30" height="30"
class="d-inline-block align-top" alt=""> PDAM BANGKALAN
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">
</ul>
<a class="btn btn-outline-success my-2 my-sm-0" href="<?php echo base_url()?
>index.php/Welcome/masuk" id="ms" class="btn btn-primary" data-toggle="modal" data-
target="#modal_ms">Sistem Pengaduan</a>
<form style="margin-left: 10px" class="form-inline my-2 my-lg-0" methof="POST"
action="<?php echo base_url()?>index.php/Welcome/masukAdmin">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Admin</button>
</form>
</div>
</nav>
<div class="modal fade" id="modal_ms" tabindex="-1" role="dialog" aria-

hidden="true"></div>
<script type="text/javascript">
$(document).ready(function(){
$('a#ms').click(function(){
var url = $(this).attr('href');
$.ajax({
url : url,
success:function(response){
$('#modal_ms').html(response);
}
});
});
});
</script>
</body>
</html>
 Login Pelanggan
Berdasarkan gambar diatas menjelaskan pelanggan harus melakukan login terlebih dahulu
sebelum masuk ke halaman selanjutnya. Berikut adalah script code :

<div class="modal-dialog">

<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<form method="post" action="<?php echo base_url()?
>index.php/Welcome/aksi_login_user">
<div class="form-group">
<label for="exampleInputEmail1">No. Sambungan Pengguna (10xxxxxxxx)</label>
<input type="text" class="form-control" name="ns">
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Masuk</button>
</form>
</div>
<div class="modal-footer">
<a class="btn btn-danger" href="<?php echo base_url()?>index.php/Welcome/index">
Kembali
</a>
</div>
</div>
 Form Pengaduan Pelanggan
Berdasarkan gambar diatas menjelaskan bahwa form pengaduan digunakan jika pelanggan
ingin melaporkan suatu masalah pengaduannya. Berikut adalah script code :
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background: #346698">
</a>

<li class="nav-item">
<a class="nav-link" href="<?php echo base_url()?
>index.php/Welcome/user">Pengaduan</a>
</li>
>index.php/Welcome/LihatBalasan/<?php echo $_SESSION['nama']?>">Balasan</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" methof="POST" action="<?php echo
base_url()?>index.php/Welcome/index">
type="submit">Keluar</button>
</form>
</div>
</nav>
<center><h1 style="color:white">"Adukan Segala Permasalahan Anda"</h1></center>

<div style="width:60%;margin:40px auto;border-radius: 5px;height: 450px;box-shadow:
10px 10px 50px;padding:10px;padding-top: 15px">
<form style="color:white" method="POST" action="<?php echo base_url()?

>index.php/Welcome/addTablePengaduan">
<label class="h5" for="exampleInputEmail1">No. Sambungan Pengguna</label>
<input type="text" class="form-control" name="ns" value="<?php echo
$_SESSION['nama']?>" readonly>
</div>
<label class="h5" for="exampleInputEmail1">No. Telepon</label>
<input type="number" class="form-control" name="hp">
</div>
<p class="h5">Form Pengaduan</p>
<textarea name="keluhan" class="form-control" rows="3"></textarea>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Bagian</label>
</div>
<select class="custom-select" name="level" id="inputGroupSelect01">
<?php
foreach($data as $datae){
echo'<option value='.$datae->no_bagian.'>'.$datae->Ket_bagian.'</option>';
}
?>
</select>
</div>
<center><button type="submit" class="btn btn-outline-warning my-2 my-sm-0">KIRIM
PENGADUAN ANDA</button></center>
</form>
</div>
load_data();
function load_data(query)
{
$.ajax({
url:"<?php echo base_url();?>/index.php/Welcome/fetchdata",
method:"POST",
data:{query:query},
success:function(data){
$('#result').html(data);
}
})
}
$('#search_text').keyup(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
</script>
</body>
</html>
 Form Balasan Laporan Pengaduan Pelanggan

Berdasarkan gambar diatas menjelaskan bahwa halaman balasan laporan pengaduan
digunakan jika pelanggan ingin melihat balasan dari admin terkait pengaduan yang sudah
dikirimnya. Berikut adalah script code :
<!DOCTYPE html>
<html>
<head>
</head>
</a>

>index.php/Welcome/user">Pengaduan</a>
</li>
>index.php/Welcome/LihatBalasan/<?php echo $_SESSION['nama']?>">Balasan</a>
</li>
</ul>
</form>
</div>
</nav>
<div style="background:white;margin:20px;padding:10px">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">No.</th>
<th scope="col">Pengaduan</th>
<th scope="col">Tanggal</th>
<th scope="col">Balasan</th>
<th scope="col">Tanggal</th>
</tr>
</thead>
<tbody>
<?php
$no = 0;
foreach($data as $u){
$no++;
echo'<tr>
<th scope="row">'.$no.'</th>
<td>'.$u->keluhan.'</td>
<td>'.$u->waktu.'</td>
<td>'.$u->Balasan.'</td>
<td>'.$u->tanggal.'</td>
</tr>';
}
?>
</tbody>
</table>
</div>
load_data();
function load_data(query)
{
$.ajax({
url:"<?php echo base_url();?>/index.php/Welcome/fetchdata",
method:"POST",
data:{query:query},
success:function(data){
$('#result').html(data);
}
})
}
$('#search_text').keyup(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
</script>
</body>
</html>
 Login Admin
Berdasarkan gambar diatas menjelaskan admin harus melakukan login terlebih dahulu
sebelum masuk ke halaman selanjutnya. Berikut adalah script code :
<!DOCTYPE html>
<html>
<head>
</head>
<nav class="navbar navbar-light bg-light">
</a>
type="submit">Beranda</button>
</form>
</nav>
<div style="width:60%;margin:60px auto;border-radius: 5px;height: 500px;box-shadow:

10px 10px 50px;">
<div style="float:right;background:
#5d5de2;width:40%;padding:10px;height:100%;padding-top: 70px;color:white;border-radius:
10px;">
<center><p class="h1" style="margin-bottom:30px">Admin</p></center>
<form action="<?php echo base_url()?>index.php/Welcome/aksi_login"
method="post">
<label for="exampleInputEmail1">Nama</label>
<input type="text" class="form-control" name="username">
</div>
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" name="password">
</div>
<button type="submit" class="btn btn-outline-warning">Masuk</button>
</form>
</div>
<div style="float:left;background: white;width:60%;padding:10px;height:100%;border-

radius: 10px;box-shadow: 5px 0px 50px;">
<p class="h1">Selamat Datang</p>
<hr class="mt-5 mb-5">
<center><img src="<?php echo base_url()?>/assets/gambar/admin.png" width="300"
height="250" class="d-inline-block align-top" alt=""></center>
</div>
</div>
</body>
</html>
 Menu Lihat Semua Pengaduan
Berdasarkan gambar diatas menjelaskan bahwa seluruh data pengaduan dapat dilihat oleh
admin dan terdapat layanan edit pesan digunakan untuk update balasan respon pengaduan ke
pelanggan. Admin juga dapat mencetak semua data. Berikut adalah script code :
<!DOCTYPE html>
<html>
<head>

</head>
<img src="<?php echo base_url()?>/assets/gambar/logo.jpg" width="30"

height="30" class="d-inline-block align-top" alt=""> PDAM BANGKALAN
</a>

>index.php/Welcome/admin">Lihat Semua Pengaduan</a>
</li>

>index.php/Welcome/Pelanggan">Pengaduan Pelanggan</a>
</li>

>index.php/Welcome/Teknis">Pengaduan Teknis</a>
</li>

>index.php/Welcome/Keuangan">Pengaduan Keuangan</a>
</li>

>index.php/Welcome/lihatdata">Lihat Data</a>
</li>
>index.php/Welcome/arsip">Arsip Pengaduan</a>
</li>
</ul>


</form>
</div>
</nav>
<tr>
<th scope="col">No. Sambungan</th>
<th scope="col">Isi Keluhan</th>
<th scope="col">No. Telpon</th>
<th scope="col">Alamat</th>
<th scope="col">Waktu</th>
<th scope="col">Aksi</th>
</tr>
</thead>
<tbody>
<?php
$no = 0;
$no++;
echo'<tr>
<td>'.$u->No_Sambungan.'</td>
<td>'.$u->Keluhan.'</td>
<td>'.$u->NO_HP.'</td>
<td>'.$u->Alamat.'</td>
<td>'.$u->Waktu.'</td>
<td><a class="btn btn-warning" href="

'.base_url().'index.php/Welcome/balas/'.$u->No_R.' " id="bp" data-toggle="modal" data-
target="#modal_bp">Balas Pesan</a></td>
</tr>';
?>
</tbody>
</table>
<a class="btn btn-outline-success my-2 my-sm-0" target="_blank" href="<?php echo

base_url()?>index.php/Welcome/cetakPengaduan" >Cetak</a>
</div>
<div class="modal fade" id="modal_bp" tabindex="-1" role="dialog" aria-
$('a#bp').click(function(){
$.ajax({
url : url,
$('#modal_bp').html(response);
});
});
});
</script>
</body>
</html>
 Form Informasi Bagian (Pelanggan, Teknis dan Keuangan)

Berdasarkan gambar diatas menjelaskan bahwa menjelaskan bahwa data pelanggan yang
telah melakukan pelaporan data di antara 3 bagian tersebut. Admin juga dapat membalas langsung
laporan pengaduan oleh pelanggan. Berikut adalah script code :
1. Bagian Pelanggan
<!DOCTYPE html>
<html>
<head>
</head>
</a>

</li>
</li>
</li>
</li>
</li>
</li>
</ul>
</form>
</div>
</nav>
<tr>
</tr>
</thead>
<tbody>
<?php
$no = 0;
if($u->Bagian_Pengaduan=="1"){
$no++;
echo'<tr>
'.base_url().'index.php/Welcome/balas/'.$u->No_R.' " id="bp" data-toggle="modal"
data-target="#modal_bp">Balas Pesan</a></td>
</tr>';
}
}
?>
</tbody>
</table>
</div>
</body>
</html>
2. Bagian Teknis
<!DOCTYPE html>
<html>
<head>
</head>
</a>

</li>
</li>
</li>
</li>
</li>
</li>
</ul>
</form>
</div>
</nav>
<tr>
</tr>
</thead>
<tbody>
<?php
$no = 0;
$no++;
echo'<tr>
</tr>';
?>
</tbody>
</table>
</div>
</body>
</html>
3. Bagian Keuangan
<!DOCTYPE html>
<html>
<head>
</head>
</a>

</li>
</li>
</li>
</li>
</li>
</li>
</ul>
</form>
</div>
</nav>
<tr>
</tr>
</thead>
<tbody>
<?php
$no = 0;
$no++;
echo'<tr>
</tr>';
}
}
?>
</tbody>
</table>
</div>
</body>
</html>
 Menu Lihat Data
Berdasarkan gambar diatas menjelaskan bahwa terdapat data pelanggan yang sudah terdaftar
sebagai pelanggan PDAM Kabupaten Bangkalan. Berikut adalah script code :
<!DOCTYPE html>
<html>
<head>
</head>
</a>

<a class="nav-link" href="<?php echo base_url()?>index.php/Welcome/admin">Lihat
Semua Pengaduan</a>
</li>
</li>
</li>
</li>
</li>
<a class="nav-link" href="<?php echo base_url()?>index.php/Welcome/arsip">Arsip
Pengaduan</a>
</li>
</ul>
</form>
</div>
</nav>
<tr>
<th scope="col">Nama</th>
</tr>
</thead>
<tbody>
<?php
$no = 0;
$no++;
echo'<tr>
<td>'.$u->Nama.'</td>
</tr>';
}
?>
</tbody>
</table>
<a class="btn btn-outline-info my-2 my-sm-0" href="<?php echo base_url()?

>index.php/Welcome/addData" id="tambah_data" class="btn btn-primary" data-toggle="modal"
data-target="#modal_td">Tambah Data</a>
</div>
<div class="modal fade" id="modal_td" tabindex="-1" role="dialog" aria-

$('a#tambah_data').click(function(){
$.ajax({
url : url,
$('#modal_td').html(response);
}
});
});
});
</script>
</body>
</html>
 Tambah Data Pelanggan
Berdasarkan gambar diatas menjelaskan bahwa admin dapat menambahkan data

pelanggan baru. admin akan memasukkan nomor sambungan, nama dan alamat dari pelanggan
baru . Berikut adalah script code :


<h4 class="modal-title">Tambah Data</h4>
</div>

>index.php/Welcome/addTableData">
<span class="input-group-text" id="inputGroup-sizing-default">No.

Sambungan</span>
</div>
<input name="ns" type="text" class="form-control" aria-label="Sizing example

input" aria-describedby="inputGroup-sizing-default">
</div>
<span class="input-group-text" id="inputGroup-sizing-default">Nama</span>
</div>
<input name="nama" type="text" class="form-control" aria-label="Sizing

example input" aria-describedby="inputGroup-sizing-default">
</div>
<span class="input-group-text" id="inputGroup-sizing-
default">Alamat</span>
</div>
<input name="alamat" type="text" class="form-control" aria-label="Sizing

example input" aria-describedby="inputGroup-sizing-default">
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Simpan</button>
</form>
</div>
<a class="btn btn-danger" href="<?php echo base_url()?

>index.php/Welcome/lihatdata">
Kembali
</a>
</div>
</div>
 Menu Arsip Pengaduan

Berdasarkan gambar diatas menjelaskan bahwa admin dapat melihat seluruh arsipan
laporan pengaduan dan tombol edit pesan yang berfungsi untuk mengupdate balasan pesan kepada
pelanggan. Berikut adalah script code :
<!DOCTYPE html>
<html>
<head>

</head>

</a>
</li>

</li>

</li>

</li>

</li>

</li>
</ul>

</form>
</div>
</nav>
<tr>
</tr>
</thead>
<tbody>
<?php
$no = 0;
$no++;
echo'<tr>

'.base_url().'index.php/Welcome/editPesan/'.$u->No_R.' ">Edit Pesan</a></td>
</tr>';
?>
</tbody>
</table>
</div>
</body>
</html>
 Edit Balasan Pengaduan
Berdasarkan gambar diatas menjelaskan bahwa apabila tombol edit pesan yang berfungsi
untuk mengupdate balasan pesan kepada pelanggan itu diklik. Berikut adalah script code :

<h4 class="modal-title">Balas Pesan</h4>
</div>

>index.php/Welcome/addTableBalasan">
<div class="input-group mb-3"hidden>

<input name="ns" type="text" class="form-control" aria-label="Sizing example
input" aria-describedby="inputGroup-sizing-default"value="<?php echo $no?>" readonly>
</div>
<textarea name="rb" class="form-control" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Kirim</button>
</form>
</div>
<a class="btn btn-danger" href="<?php echo base_url()?

>index.php/Welcome/admin">
Kembali
</a>
</div>
</div>
 Hasil Cetak Laporan Pengaduan
Berdasarkan gambar diatas menjelaskan bahwa admin dapat mencetak riwayat

pengaduan berupa file pdf yang berisi nomor, nomor sambungan, isi keluhan, no telepon, alamat
dan waktu. Berikut adalah script code :
<!DOCTYPE html>
<html>
<head>
</head>
<h1>Daftar Pengaduan</h1><br>
<tr>
</tr>
</thead>
<tbody>
<?php
$no = 0;
$no++;
echo'<tr>
</tr>';
}
?>
</tbody>
</table>
</div>
window.print();
});
</script>
</body>
</html>
Nama Kelompok :
Yuni Indah Susilana Sari (160411100014)
Ulvia Ayu Cahyani (160411100065)
Munawarah (160411100125)
Rina Lorensa (160411100162)
Shulthon Mubasyir (160411100185)

Laporan Presentasi Kelompok

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Laporan Presentasi Kelompok

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PRESENTASI

APLIKASI PENGADUAN MASYARAKAT DI KABUPATEN BANGKALAN

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<div class="modal fade" id="modal_ms" tabindex="-1" role="dialog" aria-

 Form Pengaduan Pelanggan

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<center><h1 style="color:white">"Adukan Segala Permasalahan Anda"</h1></center>

<form style="color:white" method="POST" action="<?php echo base_url()?

 Form Balasan Laporan Pengaduan Pelanggan

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<div style="width:60%;margin:60px auto;border-radius: 5px;height: 500px;box-shadow:

<div style="float:left;background: white;width:60%;padding:10px;height:100%;border-

<link href="<?php echo base_url()?>/assets/bootstrap/css/bootstrap.min.css"

<script src="<?php echo base_url()?>/assets/js/jquery.min.js"></script>

<script src="<?php echo base_url()?>/assets/popper/umd/popper.min.js"></script>

<script src="<?php echo base_url()?>/assets/js/bootstrap.min.js"></script>

<body style="background: #346698">

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand" href="#">

<img src="<?php echo base_url()?>/assets/gambar/logo.jpg" width="30"

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">

<a class="nav-link" href="<?php echo base_url()?

<a class="nav-link" href="<?php echo base_url()?

<a class="nav-link" href="<?php echo base_url()?

<a class="nav-link" href="<?php echo base_url()?

<a class="nav-link" href="<?php echo base_url()?

<form class="form-inline my-2 my-lg-0" methof="POST" action="<?php echo

<button class="btn btn-outline-success my-2 my-sm-0"

<th scope="col">No. Sambungan</th>

<th scope="col">Isi Keluhan</th>

<th scope="col">No. Telpon</th>

<td><a class="btn btn-warning" href="

<a class="btn btn-outline-success my-2 my-sm-0" target="_blank" href="<?php echo

var url = $(this).attr('href');

 Form Informasi Bagian (Pelanggan, Teknis dan Keuangan)

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<link href="<?php echo base_url()?>/assets/bootstrap/css/bootstrap.min.css"

rel="stylesheet" type="text/css" />

<script src="<?php echo base_url()?>/assets/js/jquery.min.js"></script>

<script src="<?php echo base_url()?>/assets/popper/umd/popper.min.js"></script>

<script src="<?php echo base_url()?>/assets/js/bootstrap.min.js"></script>

<body style="background: #346698">

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand" href="#">

<img src="<?php echo base_url()?>/assets/gambar/logo.jpg" width="30"

height="30" class="d-inline-block align-top" alt=""> PDAM BANGKALAN

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">

<a class="nav-link" href="<?php echo base_url()?

>index.php/Welcome/admin">Lihat Semua Pengaduan</a>

<a class="nav-link" href="<?php echo base_url()?

<a class="nav-link" href="<?php echo base_url()?

<a class="nav-link" href="<?php echo base_url()?

<a class="nav-link" href="<?php echo base_url()?

<a class="nav-link" href="<?php echo base_url()?

<button class="btn btn-outline-success my-2 my-sm-0"

<th scope="col">No. Sambungan</th>

<th scope="col">Isi Keluhan</th>

<th scope="col">No. Telpon</th>

<td><a class="btn btn-warning" href="

'.base_url().'index.php/Welcome/balas/'.$u->No_R.' " id="bp" data-toggle="modal"

<div class="collapse navbar-collapse" id="navbarSupportedContent">