pembuatan master pengguna pada aplikasi bpn-ppat · pada aplikasi bpn-ppat (crud)create , read,...

15
PEMBUATAN MASTER PENGGUNA PADA APLIKASI BPN-PPAT (CRUD)CREATE , READ, UPDATE,DELETE With PHP & Mysql Materi Lanjutan Dari Matei Pembuatan Halaman Login, Halaman Dashboard Admin & Menu Keluar 2017 Bas-Dev Ahmad Bastiar SC 2/27/2017

Upload: hangoc

Post on 08-Mar-2019

241 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: PEMBUATAN MASTER PENGGUNA PADA APLIKASI BPN-PPAT · PADA APLIKASI BPN-PPAT (CRUD)CREATE , READ, UPDATE,DELETE With PHP & Mysql Materi Lanjutan Dari Matei Pembuatan Halaman Login,

PEMBUATAN MASTER PENGGUNA PADA APLIKASI BPN-PPAT (CRUD)CREATE , READ, UPDATE,DELETE With PHP & Mysql Materi Lanjutan Dari Matei Pembuatan Halaman Login, Halaman Dashboard Admin & Menu Keluar

2017

Bas-Dev Ahmad Bastiar SC

2/27/2017

Page 2: PEMBUATAN MASTER PENGGUNA PADA APLIKASI BPN-PPAT · PADA APLIKASI BPN-PPAT (CRUD)CREATE , READ, UPDATE,DELETE With PHP & Mysql Materi Lanjutan Dari Matei Pembuatan Halaman Login,

Writer : ahmad bastiar sc (085226213902)

Pada Materi kali ini kita akan Membuat pengolahan Master Data Pengguna setelah login dari aplikasi.

Berikut adalah tahapan – tahapan yang harus di lalui dalam pembuatan menu master pengguna yang

berkaitan dengan tambah data pengguna, update data pengguna, lihat data pengguna dan hapus data

pengguna.

Tahapan – tahapan pembuatan menu Master Pengguna :

A. MENAMPILKAN DAFTAR PENGGUNA

1. Buatlah folder pengguna pada folder bpn, yaitu denganc cara klik kanan pada folder bpn lalu

new folder dan beri nama pengguna. Seperti berikut ini :

2. Selanjutnya silahkan buat file dengan nama list.php didalam folder pengguna tersebut dan

disimpan dengan nama list.php.

File list.php ini digunakan untuk menampilkan daftar master pengguna seperti berikut ini :

Page 3: PEMBUATAN MASTER PENGGUNA PADA APLIKASI BPN-PPAT · PADA APLIKASI BPN-PPAT (CRUD)CREATE , READ, UPDATE,DELETE With PHP & Mysql Materi Lanjutan Dari Matei Pembuatan Halaman Login,

Writer : ahmad bastiar sc (085226213902)

3. berikut penampakannya :

4. Langkah seanjutnya adalah mengakses menu master pengguna melalui dashboard admin yaitu

dengan menambahkan link master pengguna pada menukiri.php

5. Silahkan buka file menukiri.php pada direktori bpn/menukiri.php dan silahkan ubah skrip seperti

berikut ini :

Page 4: PEMBUATAN MASTER PENGGUNA PADA APLIKASI BPN-PPAT · PADA APLIKASI BPN-PPAT (CRUD)CREATE , READ, UPDATE,DELETE With PHP & Mysql Materi Lanjutan Dari Matei Pembuatan Halaman Login,

Writer : ahmad bastiar sc (085226213902)

Perhatikan deklarasi dari pembuatan link tersebut , Pembuatan link di definisikan menjadi

seperti ini

index.php?hal=pengguna/list

Berdasarkan skrip diatas definisinya adalah index.php?hal=namafolder/namafile

Diberikan nama folder jika file tersebut terletak didalam folder kusus, dan perlu diingat bahwa

namafile tidak perlu disertai dengan extensinya.

Maka hasil nya akan seperti ini :

Setelah pembuatan link dari master pengguna yang ada pada menukiri.php silahkan di save dan

di refresh website nya dan di coba untuk klik menu master pengguna. Jika berhasil maka

tampilannya akan seperti ini :

Langkah selajutnya adalah mendesign halaman master pengguna ,

Yang pertama adalah kita akan membuat tampilan seperti ini :

Silahkan buka file list.php yang terletak pada bpn/pengguna/list.php

Page 5: PEMBUATAN MASTER PENGGUNA PADA APLIKASI BPN-PPAT · PADA APLIKASI BPN-PPAT (CRUD)CREATE , READ, UPDATE,DELETE With PHP & Mysql Materi Lanjutan Dari Matei Pembuatan Halaman Login,

Writer : ahmad bastiar sc (085226213902)

<div class="content-wrapper"> <section class="content-header"> <h1>Master Pengguna</h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li> <li><a href="#">Master Pengguna</a></li> <li class="active">Daftar</li> </ol> </section> </div>

Dan tampilan pada sublime nya adalah sebagai berikut :

Silahkan simpan dan refresh website , maka hasil nya akan seperti berikut :

Page 6: PEMBUATAN MASTER PENGGUNA PADA APLIKASI BPN-PPAT · PADA APLIKASI BPN-PPAT (CRUD)CREATE , READ, UPDATE,DELETE With PHP & Mysql Materi Lanjutan Dari Matei Pembuatan Halaman Login,

Writer : ahmad bastiar sc (085226213902)

Okey, selanjut nya kita akan menampilkan table dari daftar master pengguna.

Silahkan ketika skrip berikut pada list.php untuk menampilkan data master pengguna. Silahkan buat

terlebih dahulu design table nya yaitu seperti berikut :

Skrip tersebut diletakkan di bawah section penutup dari “content-header”

Berikut skrip lengkap nya :

<div class="content-wrapper"> <section class="content-header"> <h1>Master Pengguna</h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li> <li><a href="#">Master Pengguna</a></li> <li class="active">Daftar</li> </ol> </section> <!-- letakkan dibawah ini --> <section class="content"> <div class="row"> <div class="col-md-12"> <div class="box box-danger"> <div class="box-header"> <h3 class="box-title">Data Master Pengguna</h3> </div> <div class="box-body"> <table class="table table-responsive table-bordered" id="table">

Page 7: PEMBUATAN MASTER PENGGUNA PADA APLIKASI BPN-PPAT · PADA APLIKASI BPN-PPAT (CRUD)CREATE , READ, UPDATE,DELETE With PHP & Mysql Materi Lanjutan Dari Matei Pembuatan Halaman Login,

Writer : ahmad bastiar sc (085226213902)

<thead> <th>No</th> <th>NPWP</th> <th>Nama Lengkap</th> <th>Username</th> <th>No.Telp</th> <th>Alamat</th> <th>Level Pengguna</th> <th>Aksi</th> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> </section> </div>

Maka tampilannya akan seperti ini :

Sekarang saat nya menampilkan data dari database kehalaman master data pengguna :

FOKUS pada table master pengguna <tbody>skrip nya diletakkan disini</tbody>

Silahkan tulis skrip berikut untuk menampilkan data master pengguna:

Page 8: PEMBUATAN MASTER PENGGUNA PADA APLIKASI BPN-PPAT · PADA APLIKASI BPN-PPAT (CRUD)CREATE , READ, UPDATE,DELETE With PHP & Mysql Materi Lanjutan Dari Matei Pembuatan Halaman Login,

Writer : ahmad bastiar sc (085226213902)

<?php $no = 1; $query = mysql_query("SELECT * FROM pengguna order by idpengguna DESC"); while ($baris = mysql_fetch_array($query)) { echo "<tr> <td>".++$no."</td> <td>".$baris['NPWP']."</td> <td>".$baris['namalengkap']."</td> <td>".$baris['username']."</td> <td>".$baris['notelp']."</td> <td>".$baris['alamat']."</td> <td>".$baris['level']."</td> <td><a href='index.php?hal=pengguna/edit&id=".$baris['idpengguna']."' class='btn btn-warning btn-xs'> <span class='fa fa-edit'></span> Ubah</a> <a href='index.php?hal=pengguna/list&hapus=".$baris['idpengguna']."' class='btn btn-danger btn-xs'> <span class='fa fa-trash'></span> Hapus</a> </td> </tr>"; } ?>

Tampilan code dari sublime nya seperti berikut :

Page 9: PEMBUATAN MASTER PENGGUNA PADA APLIKASI BPN-PPAT · PADA APLIKASI BPN-PPAT (CRUD)CREATE , READ, UPDATE,DELETE With PHP & Mysql Materi Lanjutan Dari Matei Pembuatan Halaman Login,

Writer : ahmad bastiar sc (085226213902)

Setelah melakukan penulisan skrip diatas maka save dan refres web maka akan tampil sepeti berikut :

B. TAMBAH DATA PENGGUNA

Untuk membuat form tambah data pengguna seperti gambar dibawah ini :

Page 10: PEMBUATAN MASTER PENGGUNA PADA APLIKASI BPN-PPAT · PADA APLIKASI BPN-PPAT (CRUD)CREATE , READ, UPDATE,DELETE With PHP & Mysql Materi Lanjutan Dari Matei Pembuatan Halaman Login,

Writer : ahmad bastiar sc (085226213902)

Untuk dapat menuju tampilan tambah data pengguna , sebelumnya kita harus membuat link tambah

data dari halaman tampil master data pengguna :

Untuk membuat link tambah data pengguna silahkan buka file list.php yang berada pada folder

master/pengguna/list.php.

Fokus pada skrip yang ada dan perhatikan penempatannya :

Page 11: PEMBUATAN MASTER PENGGUNA PADA APLIKASI BPN-PPAT · PADA APLIKASI BPN-PPAT (CRUD)CREATE , READ, UPDATE,DELETE With PHP & Mysql Materi Lanjutan Dari Matei Pembuatan Halaman Login,

Writer : ahmad bastiar sc (085226213902)

Maka hasilnya akan seperti berikut :

Selanjut nya silahkan buat file add.php pada folder master/pengguna/add.php, buka file add.php yang

telah dibuat dan tambah kan skrip berikut:

<div class="content-wrapper"> <section class="content-header"> <h1>Master Pengguna</h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li> <li><a href="#">Master Pengguna</a></li> <li class="active">Tambah</li> </ol> </section> <section class="content"> <div class="row"> <div class="col-md-6"> <div class="box box-danger"> <div class="box-header"> <h3 class="box-title">Tambah Data Master Pengguna</h3> </div> <div class="box-body"> <form class="role" method="POST"> <div class="form-group"> <label>NPWP</label> <input type="text" class="form-control" name="NPWP" required> </div> <div class="form-group"> <label>Nama Lengkap</label> <input type="text" class="form-control" name="namalengkap" required> </div> <div class="form-group"> <label>Username</label> <input type="text" class="form-control" name="username" required> </div> <div class="form-group"> <label>Password</label> <input type="password" class="form-control" name="password" required> </div> <div class="form-group">

Page 12: PEMBUATAN MASTER PENGGUNA PADA APLIKASI BPN-PPAT · PADA APLIKASI BPN-PPAT (CRUD)CREATE , READ, UPDATE,DELETE With PHP & Mysql Materi Lanjutan Dari Matei Pembuatan Halaman Login,

Writer : ahmad bastiar sc (085226213902)

<label>No.Telp</label> <input type="number" class="form-control" name="notelp" required> </div> <div class="form-group"> <label>Alamat</label> <textarea class="form-control" name="alamat" required></textarea> </div> <div class="form-group"> <label>Level Pengguna</label> <select class="form-control" name="level" required> <option value="null">-Pilih Level Pengguna-</option> <option value="admin">ADMIN</option> <option value="bpn">BPN</option> <option value="ppat">PPAT</option> </select> </div> <div class="form-group pull-right"> <button type="submit" name="simpan" class="btn btn-primary"> <span class="fa fa-save"> </span> Simpan</button> </div> </form> </div> </div> </div> </div> </section> </div>

Silahkan simpan dan kembali ke file yang ada pada folder master/pengguna/list.php untuk memberikan

akses menuju ke halaman tambah data penggua , berikut skrip nya (fokus):

Silahkan ganti script diatas dengan :

<a href="index.php?hal=master/pengguna/add" class="btn btn-success"> <span class="fa fa-plus"></span> Tambah Data</a>

Silahkan simpan dan refresh halaman master data pengguna dan klik tambah data pengguna maka akan

muncul tampilan tambah data pengguna:

Page 13: PEMBUATAN MASTER PENGGUNA PADA APLIKASI BPN-PPAT · PADA APLIKASI BPN-PPAT (CRUD)CREATE , READ, UPDATE,DELETE With PHP & Mysql Materi Lanjutan Dari Matei Pembuatan Halaman Login,

Writer : ahmad bastiar sc (085226213902)

Proses simpan data pada tambah data pengguna , silahkan tambahkan skrip pada file add.php dan

diletakkan di paling atas skrip. Seperti berikut :

<!-- fungsi simpan --> <?php if (isset($_POST['simpan'])) { $query= mysql_query("INSERT INTO pengguna (NPWP,namalengkap,username,password,notelp,alamat,level)VALUES('".$_POST['NPWP']."','".$_POST['namalengkap']."','".$_POST['username']."',md5('$_POST[password]'),'".$_POST['notelp']."','".$_POST['alamat']."','".$_POST['level']."')"); if ($query) { echo "<script> alert('Terimakasih Data Berhasil Disimpan'); location.href='index.php?hal=pengguna/list' </script>";exit; } } ?>

Berikut tampilan dari sublime:

Page 14: PEMBUATAN MASTER PENGGUNA PADA APLIKASI BPN-PPAT · PADA APLIKASI BPN-PPAT (CRUD)CREATE , READ, UPDATE,DELETE With PHP & Mysql Materi Lanjutan Dari Matei Pembuatan Halaman Login,

Writer : ahmad bastiar sc (085226213902)

Simpan dan refresh halaman tambah data pengguna dan silahkan coba untuk diisi sesuai kolom yang

dibuat dan klik tombol simpan maka akan muncul konfirmasi bahwa data telah disimpan dan akan

kembali ke halaman daftar master pengguna.

C. HAPUS DATA PENGGUNA

hapus data pengguna yaitu fitur yang digunakan untuk menghapus data satu baris yang ada pada table.

Berikut tampilan nya yang ada pada master pengguna :

Untuk menambahkan skrip fitur hapus data silahkan masuk ke file list.php yang ada pada folder

master/pengguna/list.php dan sialhkan tuliskan skrip hapus data pada baris paling atas dari file list.php

<?php if (isset($_GET['hapus'])) { $hapus = mysql_query("DELETE FROM pengguna where idpengguna = '".$_GET['hapus']."'"); if ($hapus) { echo "<script> alert(' Data Berhasil Dihapus'); location.href='index.php?hal=pengguna/list' </script>";exit; } } ?>

Page 15: PEMBUATAN MASTER PENGGUNA PADA APLIKASI BPN-PPAT · PADA APLIKASI BPN-PPAT (CRUD)CREATE , READ, UPDATE,DELETE With PHP & Mysql Materi Lanjutan Dari Matei Pembuatan Halaman Login,

Writer : ahmad bastiar sc (085226213902)

Berikut adalah tampilan dari sublime :

Simpan dan refresh master data pengguna dan silahkan coba hapus salah satu data yang ada maka akn

muncul konfirmasi bahwa data berhasil dihapus.

D. UPDATE DATA MASTER PENGGUNA

Materi ini akan dilanjutkan pada materi berikutnya.

Sekian materi hari ini semoga bermanfaat.

Keep calm code php & mysql