Penjelasan Fungsionalitas Kelola Data Tamu dalam Aplikasi MAS RAMA TEL-U
Ketemu lagi nih kodingers! Maaf baru bisa ngepost, baru kelar monev hehehe.. Kali ini admin bakalan ngasih tau salah satu fungsionalitas yang ada di Tubes Proyek 2 yg admin bikin. Nah namanya Pengelolaan Data Tamu. Pertama ada Pengelolaan pastinya udah bisa nebak kalo isinya bakalan ada CRUD. Yang kedua ada data tamu, nah untuk data tamunya dapat ditambahkan melalui fungsionalitas Tambah Tamu yang dijelaskan anggota kelompok admin yaitu saudari Inra Ayu. Tapi sebelum bisa nambah tamu dan ngelola datanya pastinya diperlukan login dulu, nah si fungsionalitas login sendiri bakal dijelaskan oleh anggota kelompok admin juga yaitu Imam Rifa’i. Langsung cusss aja yuk ke kodingannya..
Pertama, siapkan aplikasi Notepad++, XAMPP versi terbaru, framework CodeIgniter versi terbaru, dan tentunya browser (saran saya gunakan Google Chrome).
Kemudian, extract framework CodeIgniter dan simpan di dalam folder htdocs yang ada di dalam folder XAMPP dan ganti namanya menjadi mas_rama.
Selanjutnya, buka localhost/phpmyadmin kemudian buat database baru dengan nama mas_rama, kemudian buat tabel baru dengan nama-nama berikut.
Dalam fungsionalitas Kelola Data Tamu, kita hanya membutuhkan tabel Tamu, Penghuni, dan Pengguna.
Selanjutnya, kita akan membuat beberapa perubahan di dalam file autoload yang ada di folder config dengan menambahkan beberapa nama library dan helper.
Dan, selanjutnya kita akan mengubah file database yang juga ada di dalam folder config.
Setelahnya kita akan membuat kodingan, pertama kita mulai dari kodingan di controller c_helpdesk.
Penjelasan dari masing-masing method dalam controller:
Method pertama adalah __construct() berfungsi sebagai fungsi yang akan selalu dijalankan ketika c_helpdesk dipanggil. Nah di dalamnya ada fungsi pengecekan akses user (jika user memiliki akses sebagai helpdesk, maka user dapat mengakses method yang ada di c_helpdesk), mengeload model m_petugas, dan mengeset zona waktu dalam aplikasi.
Method kedua adalah daftar_data_tamu() berfungsi untuk menampilkan semua data dari tabel tamu.
Method ketiga adalah delete_data_tamu($id_tamu) berfungsi untuk menghapus data tamu dengan menggunakan parameter id_tamu.
Method keempat adalah edit_tamu($id_tamu) berfungsi menampilkan detail data tamu berdasarkan parameter id_tamu yang kemudian dapat diedit data-datanya.
Method kelima adalah edit_data_tamu berfungsi mengecek kevalidan data yang dimasukkan oleh user ketika mengisi form edit tamu, jika sesuai maka akan diteruskan ke model untuk disimpan ke dalam database.
Selanjutnya kita akan membuat model m_petugas.
Penjelasan dari masing-masing method dalam model:
Method pertama adalah construct() berfungsi sebagai fungsi yang akan selalu dieksekusi setiap m_petugas dipanggil.
Method kedua adalah get_all_data() berfungsi untuk mengambil semua data dalam tabel tamu yang kemudian mengembalikannya ke controller.
Method ketiga adalah delete_data_tamu($id_tamu) berfungsi untuk menghapus data dari tabel tamu dengan parameter $id_tamu.
Method keempat adalah get_detail_data_tamu($id_tamu) berfungsi untuk menampilkan detail data atau semua data dengan parameter $id_tamu.
Method kelima adalah edit_data_tamu($id_tamu, $nama, $alamat, $nim, $tgl_kunjungan) berfungsi untuk mengupdate data dalam tabel data tamu menggunakan parameter $id_tamu.
Selanjutnya, kita akan membuat view kelola_data_tamu yang terdiri atas top_bar dan body.
top_bar_kelola_data_tamu:
<body class=”animated fadeIn” id=”tables-datatable” data-layout=”default-sidebar-1″ data-sidebar=”dark-grey” data-navbar=”dark-grey” data-controller=”tables” data-view=”datatable”>
<nav class=”navbar-1″>
<ul class=”nav nav-inline navbar-left”>
<li class=”nav-item”>
<a class=”nav-link toggle-layout” href=”#”>
<i class=”material-icons menu”>menu</i>
</a>
</li>
<li class=”nav-item”>
<a class=”nav-link toggle-fullscreen” href=”#”>
<i class=”material-icons”>fullscreen</i>
</a>
</li>
</ul>
<span class=”welcome”>Selamat Datang, <?php echo $_SESSION[“username”]; ?>!</span>
<div class=”dropdown user-dropdown”>
<a class=”dropdown-toggle no-after” data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”>
<div class=”badge badge-40″>
<span class=”tag tag-sm tag-rounded tag-warning”>1</span>
<img src=”<?php echo base_url(); ?>assets/imagine/assets/faces/m7.png” class=”max-w-40 img-circle” alt=”badge” />
</div>
</a>
<div class=”dropdown-menu dropdown-menu-right from-right”>
<a class=”dropdown-item” href=”#”>
<i class=”material-icons icon”>comment</i>
<span class=”title”>FeedBack</span>
<span class=”tag tag-outline-primary tag-rounded tag-xs”>4</span>
</a>
<a class=”dropdown-item” href=”#”>
<i class=”material-icons icon”>settings</i>
<span class=”title”>Profile</span>
</a>
<a class=”dropdown-item” href=”<?php echo base_url(); ?>c_home/logout”>
<i class=”material-icons icon”>power_settings_new</i>
<span class=”title”>Logout</span>
</a>
</div>
</div>
</nav>
<div class=”jumbotron-1″>
<div class=”jumbotron jumbotron-fluid”>
<div class=”container-fluid”>
<h1 class=”display-3″>Tamu</h1>
<ol class=”breadcrumb icon-home icon-angle-right no-bg” href=”<?php echo base_url(); ?>c_helpdesk/index”>
<li>
Tamu
</li>
<li class=”active”>
<a>Kelola Data Tamu</a>
</li>
</ol>
</div>
</div>
</div>
<——–!END————>
body_kelola_data_tamu:
<?php $this->load->view(‘petugas/helpdesk/layout/head’);?>
<?php $this->load->view(‘petugas/helpdesk/tamu/top_bar_kelola_data_tamu’);?>
<?php $this->load->view(‘petugas/helpdesk/layout/sidebar’);?>
<div class=”col-xs-12 main”>
<div class=”page-on-top”>
<div class=”row”>
<div class=”col-xs-12″>
<div class=”row m-b-20″>
<div class=”col-xs-12″>
<p class=”color-grey-700 text-sm m-b-10″>Dalam halaman ini, kamu dapat melihat data tamu.</p>
</div>
</div>
<div class=”row”>
<div class=”col-xs-12″>
<h4 align=”center”>Data Kunjungan Tamu</h4>
</div>
</div>
<hr />
<table id=”datatable-example-2″ class=”table table-hover table-striped table-bordered”>
<thead>
<tr>
<th>No.</th>
<th>Nama Lengkap</th>
<th>Alamat</th>
<th>NIM</th>
<th>Tanggal Kunjungan</th>
<th>Aksi</th>
</tr>
</thead>
<tfoot class=”hidden”>
<tr>
<th>No.</th>
<th>Nama Lengkap</th>
<th>Alamat</th>
<th>NIM</th>
<th>Tanggal Kunjungan</th>
<th>Aksi</th>
</tr>
</tfoot>
<tbody>
<?php
$no = $this->uri->segment(3) + 1;
foreach($tamu as $valtam)
{
?>
<tr>
<td align=”center”><?php echo $no; ?>.</td>
<td align=”center”><?php echo $valtam->Nama_Lengkap; ?></td>
<td align=”center”><?php echo $valtam->Alamat; ?></td>
<td align=”center”><?php echo $valtam->NIM; ?></td>
<td align=”center”><?php echo $valtam->Tgl_Kunjungan; ?></td>
<td align=”center”>
<a class=”btn btn-flat” href=”<?php echo base_url(‘c_helpdesk/edit_tamu/’.$valtam->id_tamu); ?>”>
<i class=”material-icons icon”>edit</i>
<span class=”title”>Edit</span>
</a>
<a class=”btn btn-flat” href=”<?php echo base_url(‘c_helpdesk/delete_data_tamu/’.$valtam->id_tamu); ?>”>
<i class=”material-icons icon”>delete</i>
<span class=”title”>Hapus</span>
</a>
</td>
</tr>
<?php
$no++;
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<?php $this->load->view(‘petugas/helpdesk/layout/footer’);?>
<———-!END————>
Penjelasan dari view:
Pertama untuk view top_bar_kelola_data_tamu berfungsi untuk menampilkan top_bar dalam halaman kelola data tamu.
Kedua untuk view body_kelola_data_tamu berfungsi untuk menampilkan tabel yang berisi data tamu dari tabel tamu dalam database dan menampilkan tombol edit untuk masing-masing baris data yang ditampilkan.
Terakhir, kita akan membuat view edit_data_tamu yang juga terdiri atas top_bar dan body.
top_bar_edit_data_tamu:
<body class=”animated fadeIn” id=”dashboards-analytics” data-layout=”default-sidebar-1″ data-sidebar=”dark-grey” data-navbar=”dark-grey” data-controller=”dashboards” data-view=”analytics”>
<nav class=”navbar-1″>
<ul class=”nav nav-inline navbar-left”>
<li class=”nav-item”>
<a class=”nav-link toggle-layout” href=”#”>
<i class=”material-icons menu”>menu</i>
</a>
</li>
<li class=”nav-item”>
<a class=”nav-link toggle-fullscreen” href=”#”>
<i class=”material-icons”>fullscreen</i>
</a>
</li>
</ul>
<span class=”welcome”>Selamat Datang, <?php echo $_SESSION[“username”]; ?>!</span>
<div class=”dropdown user-dropdown”>
<a class=”dropdown-toggle no-after” data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”>
<div class=”badge badge-40″>
<span class=”tag tag-sm tag-rounded tag-warning”>1</span>
<img src=”<?php echo base_url(); ?>assets/imagine/assets/faces/m7.png” class=”max-w-40 img-circle” alt=”badge” />
</div>
</a>
<div class=”dropdown-menu dropdown-menu-right from-right”>
<a class=”dropdown-item” href=”#”>
<i class=”material-icons icon”>comment</i>
<span class=”title”>FeedBack</span>
<span class=”tag tag-outline-primary tag-rounded tag-xs”>4</span>
</a>
<a class=”dropdown-item” href=”#”>
<i class=”material-icons icon”>settings</i>
<span class=”title”>Profile</span>
</a>
<a class=”dropdown-item” href=”<?php echo base_url(); ?>c_home/logout”>
<i class=”material-icons icon”>power_settings_new</i>
<span class=”title”>Logout</span>
</a>
</div>
</div>
</nav>
<div class=”jumbotron-1″>
<div class=”jumbotron jumbotron-fluid”>
<div class=”container-fluid”>
<h1 class=”display-3″>Tamu</h1>
<ol class=”breadcrumb icon-home icon-angle-right no-bg” href=”<?php echo base_url(); ?>c_helpdesk/index”>
<li>
Tamu
</li>
<li>
<a>Kelola Data Tamu</a>
</li>
<li class=”active”>
<a>Edit Data Tamu</a>
</li>
</ol>
</div>
</div>
</div>
<————–!END—————->
body_edit_data_tamu:
<?php $this->load->view(‘petugas/helpdesk/layout/head’);?>
<?php $this->load->view(‘petugas/helpdesk/tamu/top_bar_edit_data_tamu’);?>
<?php $this->load->view(‘petugas/helpdesk/layout/sidebar’);?>
<?php echo form_open_multipart(‘c_helpdesk/edit_data_tamu’); ?>
<?php echo validation_errors(); ?>
<div class=”col-xs-12 main”>
<div class=”page-on-top”>
<div class=”row”>
<div class=”col-xs-12″>
<form method=”post”>
<?php
foreach($tamu as $valtam)
{
?>
<div class=”row m-b-20″>
<div class=”col-xs-12″>
<p class=”color-grey-700 text-sm m-b-10″>Dalam halaman ini, kamu dapat mengedit data tamu yang telah ada.</p>
</div>
</div>
<div class=”form-group”>
<label>ID Tamu</label>
<input type=”text” class=”form-control” name=”id” value=”<?php echo $id_tamu; ?>” readonly=”readonly”>
</div>
<div class=”form-group”>
<label>Nama Lengkap</label>
<input type=”text” class=”form-control” name=”nama” value=”<?php echo $valtam->Nama_Lengkap; ?>”>
</div>
<div class=”form-group”>
<label>Alamat</label>
<input type=”text” class=”form-control” name=”alamat” value=”<?php echo $valtam->Alamat; ?>”>
</div>
<div class=”form-group”>
<label>Tanggal Kunjungan</label>
<input type=”date” class=”form-control” name=”tgl_kunjungan” value=”<?php echo $valtam->Tgl_Kunjungan; ?>”>
</div>
<div class=”form-group”>
<label>NIM Penghuni</label>
<input type=”text” class=”form-control” name=”nim” value=”<?php echo $valtam->NIM; ?>”>
</div>
<div class=”form-group”>
<label>
</label>
</div>
<button class=”btn btn-raised btn-lg btn-primary btn-block” type=”submit” name=”btnupdate” value=”Update”>Simpan</button>
<?php
}
?>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<?php $this->load->view(‘petugas/helpdesk/layout/footer’);?>
<———-!END———->
Penjelasan:
Yang pertama adalah bagian top_bar, layaknya top_bar di kelola data, top_bar dalam edit data tamu juga berfungsi menampilkan top bar dalam halaman edit data tamu.
Yang kedua adalah bagian body, berfungsi untuk menampilkan form edit data tamu sesuai dengan baris data yang dipilih dalam halaman kelola data tamu.
Baiklah, sekian ya kodingers untuk postingan hari ini. Semoga bermanfaat. Jika ada pertanyaan ataupun saran bisa coret-coret di kolom komentar. Ciao!
Recent Comments