Praktikum Web 2 Monitoring Kegiatan Masjid Pertemuan 2

PRAKTIKUM WEB 2 (PHP NATIVE)
STUDI KASUS
APLIKASI MONITORING KEGIATAN MASJID
Di Susun Oleh :
Mokhamad Ramdhani Raharjo, S.Kom., M.Kom 1116048901
FAKULTAS TEKNOLOGI INFORMASI

UNIVERSITAS ISLAM KALIMANTAN MUHAMMAD ARSYAD AL
BANJARI BANJARMASIN
2022
APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM
DAFTAR ISI
Contents
DAFTAR ISI........................................................................................................................................... 2
PERTEMUAN SESI PERTAMA ........................................................................................................ 4
1.1 PERSIAPAN SOFTWARE DAN HARDWARE ....................................................................... 4
1.2 PERSIAPAN DATABASE DAN TABEL TRANSAKSI......................................................... 4
1.3 PERSIAPAN PEMBUATAN VIEW TABEL MYSQL .......................................................... 9
1.4 PERSIAPAN FOLDER PROJECT UTAMA ........................................................................ 13
PERTEMUAN SESI KEDUA ............................................................................................................ 17
1. PERSIAPAN FOLDER PROJECT ...................................................................................... 17
2. FILE HTACESS...................................................................................................................... 17
3. FILE HEADER DAN FOOTER ............................................................................................ 17
4. PERSIAPAN SOURCE CODE PADA FILE HEADER.PHP ............................................ 17
5. PERSIAPAN SOURCE CODE PADA FILE FOOTER.PHP ............................................ 18
6. PERSIAPAN HALAMAN HOME ........................................................................................ 19
7. PERSIAPAN HALAMAN JADWAL SHOLAT JUMAT................................................... 20
8. PERSIAPAN HALAMAN JADWAL SHOLAT FARDHU ................................................ 20
9. PERSIAPAN HALAMAN JADWAL PENGAJIAN ........................................................... 20
10. PERSIAPAN HALAMAN DATA PETUGAS.................................................................. 20
11. PERSIAPAN HALAMAN 404 (HALAMAN TIDAK DITEMUKAN ........................... 21
12. PERSIAPAN HALAMAN INDEX .................................................................................... 21
13. PERBAIKAN SOURCE CODE HALAMAN PETUGAS KE-1..................................... 23
14. PERBAIKAN SOURCE CODE INDEX.JS KE-1 ........................................................... 25
15. PENAMBAHAN LIBRARY JAVA SCRIPT SWEETALERT ...................................... 25
16. PERUBAHAN SOURCE CODE FOOTER.PHP ............................................................ 25
17. PENAMBAHAN LIBRARY CSS SWEETALERT ......................................................... 26
18. PERUBAHAN SOURCE CODE HEADER.PHP ............................................................ 26
19. PERSIAPAN KODE SIMPAN DATA PETUGAS ......................................................... 26
20. PERSIAPAN KODE SIMPAN DATABASE................................................................... 28
21. PERSIAPAN KODE CRUD MODEL PETUGAS.......................................................... 28
22. PERSIAPAN KODE CRUD CONTROLLER PETUGAS ............................................ 30
23. PENAMBAHAN BARIS KODE SIMPAN DATA PETUGAS JS KE-1 ...................... 32

27. PENAMBAHAN BARIS KODE SIMPAN DATA PETUGAS JS KE-5 UNTUK
UBAH PETUGAS ........................................................................................................................... 34
28. PENAMBAHAN INFORMASI TABEL PADA HALAMAN PETUGAS ..................... 35
29. PENAMBAHAN KODE HAPUS DATA PETUGAS ...................................................... 37

PERTEMUAN SESI PERTAMA
1.1 PERSIAPAN SOFTWARE DAN HARDWARE

a) SOFTWARE
-Sistem Operasi minimal Windows 8, Linux atau macOS
-Aplikasi Xampp atau WampServer , jika belum menginstal aplikasi tersebut
bisa download dengan cara klik link berikut ini : Download Xampp atau
Download WampServer
- Visual Studio Code, Sublime Text, Atom, Notepad++ atau teks editor lainya,
jika belum menginstal beberapa aplikasi tersebut bisa download dengan cara
klik link berikut ini : Download Sublime Text, Download Visual Studio Code,
Download Atom atau Download Notepad++. Pada modul ini menggunakan
Visual Studio Code
b) HARDWARE
- RAM : Minimal 4Gb, Rekomendasi 8Gb
- Minimal Hardisk, Rekomendasi SSD dengan sisa media penyimpanan minimal
10Gb
- CPU Amd atau Intel
1.2 PERSIAPAN DATABASE DAN TABEL TRANSAKSI
1) Jalan aplikasi Xampp Control dengan cara Run As Administrator untuk menghindari program
shell bagian Xampp Control tidak bisa dibuka.
2) Klik tombol Shell pada aplikasi Xampp Control , kemudian ketikan kode “mysql -u root”
pada area Command Prompt seperti gambar dibawah:

Kemudian tekan tombol Enter pada keyboar sehingga menampilkan informasi seperti
gambar dibawah ini:
3) Pembuatan Database
Ketikan kode “ CREATE DATABASE dbmonitoring_masjid; “ kemudian tekan
tombol Enter seperti gambar dibawah ini :
Ketikan kode “ USE dbmonitoring_masjid; “ kemudian tekan tombol Enter seperti

gambar dibawah ini :
4) Pembuatan Tabel Petugas

Ketikan kode pembuatan tabel seperti dibawah ini:

Ketikan kode deksripsi tabel yang sudah dibuat seperti gambar dibawah ini:
Ketikan kode untuk menyimpan data secara masal seperti dibawah ini:
Ketikan kode untuk menampilkan data pada tabel petugas seperti kode dibawah ini :
5) Pembuatan Tabel Jadwal Sholat Jumat

Ketikan kode untuk membuat tabel jadwal sholat jumat seperti dibawah ini :

6) Pembuatan Tabel Pengajian
Ketikan kode untuk membuat tabel pengajuan seperti kode dibawah ini:
Ketikan kode deskripsi tabel yang sudah dibuat seperti gambar dibawah ini:
Karena lupa menambahkan AUTO_INCREMENT pada tabel pengajian silahkan

ketikan kode seperti dibawah ini :

7) Pembuatan Tabel Jadwal Sholat Fardhu
Ketikan kode untuk membuat tabel jadwal sholat fardhu seperti dibawah ini:
Karena lupa menambahkan AUTO_INCREMENT pada tabel jadwal sholat fardhu

maka tambahkan kode dibawah ini :

1.3 PERSIAPAN PEMBUATAN VIEW TABEL MYSQL
1) Input Data Record Tabel Sholat Jumat
2)
3) Pembuatan View Sholat Jumat (Penggabungan tabel petugas dan tabel sholat jumat)

Ketikan Kode descripsi view sholat jumat yang sudah dibuat seperti gambar dibawah ini :
4) Input Data Tabel jadwal sholat fardhu

5) Pembuatan View jadwal sholat fardhu
Ketikan kode deskripsi view yang sudah dibuat seperti gambar dibawah ini :
6) Input Data pengajian
Kemudian ketikan kode dibawah ini :

7) Pembuatan View Pengajian
Kode deskripsi view antara tabel pengajian dan petugas yang sudah dibuat
Ketikan kode perintah menampilkan record view pengajian seperti gambar dibawah ini :

1.4 PERSIAPAN FOLDER PROJECT UTAMA
1) Silahkan buat folder project pada direktori Xampp -> htdocs dengan nama “masjid”
2) Silahkan buat folder “source” didalam folder “masjid”
3) Silahkan buat folder “lib” didalam folder lib buat 2 folder lagi css dan js
4) Menggunakan Library Framework Bootsrap

- Silahkan download bootsrap css disini
- Letakan File tersebut di folder css
5) Buat file index.css simpan pada folder css, ketikan kode dibawah ini :

6) Buat file index.php pada root project utama kemudian ketikan kode dibawah ini
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8" />
5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6. <title>Masjid</title>
7. <link rel="stylesheet" href="source/lib/css/bootstrap.min.css">
8. <link
9. rel="stylesheet"
10. href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-
icons.css"
11. />
12. <link rel="stylesheet" href="source/lib/css/index.css">
13. </head>
14.
15. <body>
16. <div>
17. <div class="sidebar p-4 bg-success" id="sidebar">
18. <h4 class="mb-5 text-white">MASJID UNISKA</h4>
19.
20. <li>
21. <a class="text-white" href="#">
22. <i class="bi bi-file-earmark-person mr-2"></i>
23. Petugas
24. </a>

25. </li>
26. <li>
28. <i class="bi bi-calendar-week mr-2"></i>
29. Sholat Jumat
30. </a>
31. </li>
32. <li>
34. <i class="bi bi-calendar-check-fill mr-2"></i>
35. Sholat Fardhu
36. </a>
37. </li>
38. <li>
40. <i class="bi bi-calendar2-event mr-2"></i>
41. Pengajian
42. </a>
43. </li>
44. </div>
45. </div>
46. <div class="p-4" id="main-content">
47. <button class="btn btn-success" id="btn-toggle">
48. <i class="bi bi-list"></i>
49. </button>
50. <div class="card mt-5">
51. <div class="card-body">
52. <h4>HALAMAN UJI COBA</h4>
53. <p>
54. PRAKTIKUM WEB 2
55. </p>
56. </div>
57. </div>
58. </div>
59.
60. <script>
61.
62. document.getElementById("btn-toggle").addEventListener("click", () => {
63.
64. // Ketika tombol id=> btn_toogle kita klik akan menambah/mengjinglakan
class active-sidebar
65. document.getElementById("sidebar").classList.toggle("active-sidebar");
66.
67. // ketika tombol id=> diklik akan menambah/mengjinglakan clasas active-
main-content
68. document.getElementById("main-content").classList.toggle("active-main-
content");
69. });
70. </script>
71. </body>
72. </html>

Tampilan halaman index

PERTEMUAN SESI KEDUA
1. PERSIAPAN FOLDER PROJECT

➢ Didalam folder Source buat folder baru dengan nama “controller” (Source ->
controller)
➢ Didalam folder Source buat folder baru dengan nama “model” (Source -> model)
➢ Didalam folder Source buat folder baru dengan nama “pages” (Source -> pages)
➢ Didalam folder Source -> Lib buat folder baru dengan nama “img” (Source -> Lib-
>img)
2. FILE HTACESS
➢ Buat file dengan nama “.htacess” didalam folder utama Xampp -> htdocs ->
masjid, Kemudian ketikan kode dibawah ini :
1. RewriteEngine on
2.
3. Options -Indexes
4.
5. RewriteCond %{SCRIPT_FILENAME} !-f
6. RewriteCond %{SCRIPT_FILENAME} !-d
7. RewriteCond %{SCRIPT_FILENAME} !-l
8. RewriteRule ^(.*)$ index.php/$1
9.
3. FILE HEADER DAN FOOTER

➢ Buat file dengan nama “header.php” didalam folder utama Xampp -> htdocs ->
masjid->source->pages.
➢ Buat file dengan nama “footer.php” didalam folder utama Xampp -> htdocs ->
masjid->source->pages.
4. PERSIAPAN SOURCE CODE PADA FILE HEADER.PHP

➢ Pada file index.php silahkan “CUT” baris nomor 1 sampai dengan nomor 51
kemudian paste pada file header.php pada folder pages. (Silahkan tambahkan
bagian kode yang diberikan tanda warna merah cetak tebal)
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8" />
5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6. <title>Masjid</title>
7. <link rel="stylesheet" href="source/lib/css/bootstrap.min.css">
8. <link
9. rel="stylesheet"
10. href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"
11. />
12. <link rel="stylesheet" href="source/lib/css/index.css">
13. </head>
14.

15. <body>
16. <div>
17. <div class="sidebar p-4 bg-success menu" id="sidebar">
18. <h4 class="mb-5 text-white">MASJID UNISKA</h4>
19. <li >
20. <a class="text-white " href="./petugas" >
21. <i class="bi bi-file-earmark-person mr-2 active" ></i>
22. Petugas
23. </a>
24. </li>
25. <li>
26. <a class="text-white" href="./jumat">
27. <i class="bi bi-calendar-week mr-2"></i>
28. Sholat Jumat
29. </a>
30. </li>
31. <li>
32. <a class="text-white" href="./fardhu">
33. <i class="bi bi-calendar-check-fill mr-2"></i>
34. Sholat Fardhu
35. </a>
36. </li>
37. <li>
38. <a class="text-white" href="./pengajian">
39. <i class="bi bi-calendar2-event mr-2"></i>
40. Pengajian
41. </a>
42. </li>
43. </div>
44. </div>
45. <div class="p-4" id="main-content">
46. <button class="btn btn-success" id="btn-toggle">
47. <i class="bi bi-list"></i>
48. </button>
49. <div class="card mt-5">
50. <div class="card-body">
51.
5. PERSIAPAN SOURCE CODE PADA FILE FOOTER.PHP

➢ Pada file index.php silahkan “CUT” baris nomor 57 sampai baris akhirkemudian paste
pada file header.php pada folder pages

1. 1. </div>
2. 2. </div>
3. 3.
4. 4. <script>
5. 5.
6. 6. document.getElementById("btn-toggle").addEventListener("click", () => {
7. 7.
8. 8. // Ketika tombol id=> btn_toogle kita klik akan menambah/mengjinglakan
class active-sidebar
9. 9. document.getElementById("sidebar").classList.toggle("active-sidebar");
10. 10.
11. 11. // ketika tombol id=> diklik akan menambah/mengjinglakan clasas active-
main-content
12. 12. document.getElementById("main-content").classList.toggle("active-main-
content");
13. 13. });
14. 14. </script>
15. 15. </body>
16. 16. </html>
17. 17.
18.

➢ Buat File index.js pada folder source->lib->js kemudian silahkan “CUT” source code
javascript pada file header.php kemudian pastekan pada file tersebut.
➢ Tambahkan file jquery.min.js atau jquery.js ,silahkan download pada laman

https://jquery.com/download/ dan letakan pada filder source->lib->js
➢ Tambahkan file boostrap.min.js atau boostrap.js ,silahkan download pada laman
https://getbootstrap.com/ dan letakan pada filder source->lib->js (Versi yang
digunakan dalam praktikum ini 5.0.2)
➢ Ubah kode pada footer.php seperti gambar dibawah ini :
➢ Silahkan download beberapa file yang diperlukan disini (Tekan Ctrl + Arahkan Cursor
untuk download), letakan file gambar yang ada pada link tersebut ke folder img.
6. PERSIAPAN HALAMAN HOME

Source Code ini digunakan untuk membuat tampilan halaman utama saat aplikasi
pertama kali dibuka pada web browser, silahkan ketikan kode dibawah ini dan berikan
nama file “home.php” simpan pada folder pages:
1. <?php require("header.php") ?>

2. <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
3. <div class="carousel-inner">
4. <div class="carousel-item active">
5. <img src="./source/lib/img/img1.jpg" class="d-block w-100" alt="...">
6. </div>
7. <div class="carousel-item">
8. <img src="./source/lib/img/img2.jpg" class="d-block w-100" alt="..." >
9. </div>
10. <div class="carousel-item">
11. <img src="./source/lib/img/img3.jpg" class="d-block w-100" alt="...">
12. </div>

13. </div>
14. </div>
15. <?php require("footer.php") ?>
16.
7. PERSIAPAN HALAMAN JADWAL SHOLAT JUMAT

Source Code ini digunakan untuk membuat tampilan halaman transaksi data jadwal
sholat jumat, silahkan ketikan kode dibawah ini dan berikan nama file “jumat.php”
simpan pada folder pages:

2. <h1 algin="center">HALAMAN SHOLAT JUMAT</h1>
4.
8. PERSIAPAN HALAMAN JADWAL SHOLAT FARDHU

sholat fardhu, silahkan ketikan kode dibawah ini dan berikan nama file “fardhu.php”

2. <h1 algin="center">HALAMAN SHOLAT FARDHU</h1>
4.
9. PERSIAPAN HALAMAN JADWAL PENGAJIAN

pengajian, silahkan ketikan kode dibawah ini dan berikan nama file “pengajian.php”

2. <h1 algin="center">HALAMAN PENGAJIAN</h1>
4.
10. PERSIAPAN HALAMAN DATA PETUGAS

Source Code ini digunakan untuk membuat tampilan halaman transaksi data perugas
masjid, silahkan ketikan kode dibawah ini dan berikan nama file “petugas.php” simpan
pada folder pages:

2. <h1 algin="center">HALAMAN PETUGAS</h1>
4.

11. PERSIAPAN HALAMAN 404 (HALAMAN TIDAK DITEMUKAN
Source Code ini digunakan untuk membuat tampilan informasi halaman tidak ditemukan
saat mengetikan URL yang salah, silahkan copykan file 404.jpeg ke folder img terlebih
dahulu, silahkan ketikan kode dibawah ini dan berikan nama file “404.php” simpan pada
folder pages:
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
7. <title>404</title>
8. </head>
9. <body>
10. <h1 align="center">Maaf....!!!!</h1>
11. <img src="./source/lib/img/404.png" alt="" style="display: block; margin-left: auto;
margin-right: auto;">
12. </body>
13. </html>
14.
12. PERSIAPAN HALAMAN INDEX

Source Code ini digunakan untuk mempersiapkan route yang digunakan dipada aplikasi
ini, Silahkan buat file “index.php” pada root folder utama (Xampp -> htdocs->masjid)
kemudian ketikan kode dibawah ini :

Halaman Home
Halaman Petugas
Halaman Jadwal Sholat Jumat

Halaman Pengajian
13. PERBAIKAN SOURCE CODE HALAMAN PETUGAS KE-1

Silahkan ubah kode yang lama dengan ketikan kode dibawah ini untuk membuat
tombol dan modal boostrap untuk proses CRUD data petugas.

2.
3. <h4><i class="bi bi-person-badge"></i>DATA PETUGAS MASJID</h4>
4. <h5> </h5>
5. <button type="button" class="btn btn-success" id="btnModalPetugas">
6. Tambah Data
7. </button>
8.
9. <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-
target="#exampleModal">
10. Laporan
11. </button>
12.
13. 
14. <div class="modal fade" id="petugasModal" tabindex="-1" aria-labelledby="titlePetugasModal"
aria-hidden="true">
15. <div class="modal-dialog">
16. <div class="modal-content">
17. <div class="modal-header bg-success">
18. <h5 class="modal-title" id="titlePetugasModal"></h5>
19. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-
label="Close"></button>
20. </div>
21. <div class="modal-body">
22. <form>
23. <div class="row mb-3">
24. <label for="txtnik" class="col-sm-3 col-form-label">NIK</label>
25. <div class="col-sm-9">
26. <input type="text" class="form-control" id="txtnik">
27. </div>
28. </div>
30. <label for="txtnama" class="col-sm-3 col-form-label">Nama</label>
32. <input type="text" class="form-control" id="txtnama">
33. </div>
34. </div>
36. <label for="txttempat" class="col-sm-3 col-form-label">Tempat
Lahir</label>
38. <input type="text" class="form-control" id="txttempat">
39. </div>
40. </div>

42. <label for="txttgl" class="col-sm-3 col-form-label">Tanggal Lahir</label>
44. <input type="date" class="form-control" id="txttgl">
45. </div>
46. </div>
48. <label for="txttelp" class="col-sm-3 col-form-label">No. Telp</label>
50. <input type="text" class="form-control" id="txttelp">
51. </div>
52. </div>
54. <label for="txtalamat" class="col-sm-3 col-form-label">Alamat</label>
56. <input type="text" class="form-control" id="txtalamat">
57. </div>
58. </div>
59.
60. </form>
61. </div>
62. <div class="modal-footer">
63. <button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Tutup</button>
64. <button type="button" class="btn btn-success" id="btnPetugas">Save changes</button>
65. </div>
66. </div>
67. </div>
68. </div>
69.
71.
HALAMAN REVISI-1 PETUGAS MASJID

14. PERBAIKAN SOURCE CODE INDEX.JS KE-1
Silahkan ketikan pada baris baru pada file index.js ,kode ini digunakan untuk menampilkan
modal bootstrap dengan mempersiapkan tombol simpan data seperti dibawah ini:
15. PENAMBAHAN LIBRARY JAVA SCRIPT SWEETALERT

Silahkan download library tersebut pada link disini (Tekan CTRL + Arahkan cursor pada
link), Silahkan simpan dan letakan hasil download pada folder source->lib->js.
16. PERUBAHAN SOURCE CODE FOOTER.PHP

Silahkan tambahkan library sweetalert.js dibawah jquery.js seperti dibawah ini :
1. </div>
2. </div>
3. </div>
4. <script type="text/javascript" src="./source/lib/js/jquery.min.js"></script>
5. <script type="text/javascript" src="./source/lib/js/sweetalert.min.js"></script>
6. <script type="text/javascript" src="./source/lib/js/bootstrap.js"></script>

7. <script type="text/javascript" src="./source/lib/js/index.js"></script>
8. </body>
9. </html>
10.
17. PENAMBAHAN LIBRARY CSS SWEETALERT

Silahkan download library tersebut pada link disini (Tekan CTRL + Arahkan cursor pada
link), Silahkan simpan dan letakan hasil download pada folder source->lib->css.
18. PERUBAHAN SOURCE CODE HEADER.PHP

Silahkan tambahkan library sweetalert.min.css dibawah bootsrap.min.css seperti dibawah
ini :
19. PERSIAPAN KODE SIMPAN DATA PETUGAS

a) Pada file index.js pada baris 19 silahkan tekan ENTER 2x kemudian ketikan kode
dibawah ini
1. $('#btnPetugas').click(function(){
2.
3. if ($('#btnPetugas').text()=='Simpan'){
4. // area kode simpan data
5. }else {
6. //area kode ubah data
7. }
8.
9. });
=

b) Silahkan tambahkan kode validasi dibawah ini pas dibawah komen // area kode simpan
data
1. if ($('#txtnik').val().length==0){
2. swal({
3. title:'Form Petugas',type:'warning',
4. text:'NIK Wajib Diisi'
5. });
6. }else if ($('#txtnama').val().length==0){
7. swal({
9. text:'Nama Wajib Diisi'
10. });
11. }else if ($('#txttempat').val().length==0){
12. swal({
14. text:'Tempat Lahir Wajib Diisi'
15. });
16. }else if ($('#txttgl').val().length==0){
17. swal({
19. text:'Tanggal Lahir Wajib Diisi'
20. });
21. }else if ($('#txttelp').val().length==0){
22. swal({
24. text:'No Telp Wajib Diisi'
25. });
26. }else if ($('#txtalamat').val().length==0){
27. swal({
29. text:'Alamat Wajib Diisi'
30. });
31. }else{
32. // area ajax CRUD petugas
33. }
34.
c) Agar setiap klik tombol tambah data inputan dikosongkan maka ketikan kode tambahan
pada tombol #btnModalPetugas seperti gambar dibawah ini :

20. PERSIAPAN KODE SIMPAN DATABASE
Sebelum melanjutkan perintah CRUD pada petugas ,disiapkan terlebih dahulu koneksi
database seperti pada gambar dibawah ini dan simpan pada folder Source -> model dengan
nama koneksiBD.php :
21. PERSIAPAN KODE CRUD MODEL PETUGAS

Buat file pada folder model dengan nama “modelPetugas.php” kemudian ketikan kode
seperti dbawah ini :
1. <?php
2.
3. class modelPetugas extends koneksiDB{
4. public function __construct(){
5. $this->hubungkanDatabase();
6. }
7.
8. // method untuk Simpan Data Petugas
9. public function simpanPetugas($varNIK, $varNama, $varTempat, $varTgl, $varTelp,
$varAlamat){
10. $varDB =$this->databasenya;
11. try {
12. // mengecek duplikasi NIK saat diinputkan
13. $perintah = $varDB ->prepare("SELECT*FROM petugas WHERE nik='$varNIK'");
14. $perintah->execute();
15. if ($perintah->rowCount()>0){
16. $posisi[0]=true;//acuan kode berhasil
17. $posisi[1]="NIK sudah terdaftar";
18. $posisi[2]="Duplicate Yes";
19. }else{
20. $perintah = $varDB ->prepare("INSERT INTO petugas
(nik,nama,tempat_lahir,tanggal_lahir,telp,alamat) VALUES (:nik, :nama, :tempat, :tanggal, :telp,
:alamat) ");
21. $perintah->bindParam("nik",$varNIK);
22. $perintah->bindParam("nama",$varNama);
23. $perintah->bindParam("tempat",$varTempat);
24. $perintah->bindParam("tanggal",$varTgl);
25. $perintah->bindParam("telp",$varTelp);

26. $perintah->bindParam("alamat",$varAlamat);
29. $posisi[1]="Data Petugas Berhasil disimpan";
30. $posisi[2]="Duplicate No";
31. }
32.
33. return $posisi;
34. } catch (PDOException $psn) {
35. $posisi[0]=false; //acuan kode salah
36. $posisi[1]=$psn->getMessage();
37. return $posisi;
38. }
39. }
40.
41. // method untuk Ubah Data Petugas
42. public function ubahPetugas($varNIK, $varNama, $varTempat, $varTgl, $varTelp,
$varAlamat){
44. try {
45. $perintah = $varDB ->prepare(" UPDATE petugas SET nama= :nama, tempat_lahir=
:tempat, tanggal_lahir= :tanggal,
46. telp= :telp, alamat= :alamat WHERE nik= :nik");
48. $perintah->bindParam("nama",$varNama);
49. $perintah->bindParam("tempat",$varTempat);
50. $perintah->bindParam("tanggal",$varTgl);
51. $perintah->bindParam("telp",$varTelp);
52. $perintah->bindParam("alamat",$varAlamat);
55. $posisi[1]="Data Petugas Berhasil diubah";
56. return $posisi;
60. return $posisi;
61. }
62. }
63.
64. // method untuk Hapus Data Petugas
65. public function hapusPetugas($varNIK){
67. try {
68. $perintah = $varDB ->prepare("DELETE FROM petugas WHERE nik= :nik");
72. $posisi[1]="Data Petugas Berhasil dihapus";
73. return $posisi;
77. return $posisi;
78. }
79. }
80.
81. //method mengambil record data petugas
82. public function recordDataPetugas(){
84. try {
85.
86. $perintah = $varDB ->prepare("SELECT*FROM petugas ORDER BY nik ASC");
89. $posisi[1]="Data_Petugas";
90. $posisi[2]=$perintah->fetchAll(PDO::FETCH_ASSOC);
91. return $posisi;

95. $posisi[2]=[];
96. return $posisi;
97. }
98. }
99.
100. //method mengambil record data petugas 1 baris untuk ditampilkan ke modal inputan
101. public function SatuBarisPetugas($varNIK){
103. try {
104. $perintah = $varDB ->prepare("SELECT*FROM petugas WHERE nik='$varNIK'");
107. $posisi[1]="Data Petugas Satu Baris";
108. $posisi[2]=$perintah->fetchAll(PDO::FETCH_ASSOC);
109. return $posisi;
113. $posisi[2]=[];
114. return $posisi;
115. }
116. }
117. }
118.
119. ?>
120.
22. PERSIAPAN KODE CRUD CONTROLLER PETUGAS

Buat file pada folder controller dengan nama “controllerPetugas.php” kemudian
ketikan kode seperti dbawah ini :
1. <?php
2.
3. include "../model/koneksiDB.php";
4. include "../model/modelPetugas.php";
5. if( isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) && ($_SERVER['HTTP_X_REQUESTED_WITH'] ==
'XMLHttpRequest' ) )
6. {
7. $method=$_POST['method_petugas']; // cara yang dikirim dari js
8. $crud = new modelPetugas();
9. $retval = [];
10.
11. if($method == 'recordDataPetugas') // mengecek nilai method apakah menangkap data
petugas
12. {
13. $list = $crud->recordDataPetugas();
14. $retval['status'] = $list[0]; // membuat var yang dg nama status dari nilai array 0
recordDataPetugas
15. $retval['message'] = $list[1]; // membuat var yang dg nama message dari nilai array 1
recordDataPetugas
16. $retval['data'] = $list[2]; // membuat var yang dg nama data dari nilai array 2
recordDataPetugas
17. echo json_encode($retval);
18. }
19.
20. if($method == 'Simpan_Petugas') // mengecek nilai method apakah perintah simpan Data
21. {
22. $CtrlNIK = $_POST['js_nikPetugas'];
23. $CtrlNama = $_POST['js_namaPetugas'];
24. $CtrlTempatLahir = $_POST['js_tempatLahirPetugas'];
25. $CtrlTanggalLahir = $_POST['js_tanggalLahirPetugas'];

26. $CtrlTelp = $_POST['js_telpPetugas'];
27. $CtrlAlamat = $_POST['js_alamatPetugas'];
28.
29. $simpan = $crud->simpanPetugas($CtrlNIK, $CtrlNama, $CtrlTempatLahir, $CtrlTanggalLahir,
$CtrlTelp, $CtrlAlamat);
30. $retval['status'] = $simpan[0];
31. $retval['message'] = $simpan[1];
32. $retval['duplicate'] = $simpan[2];
34. }
35.
36. if($method == 'Ubah_Petugas') // mengecek nilai method apakah perintah ubah Data
37. {
39. $CtrlNama = $_POST['js_namaPetugas'];
40. $CtrlTempatLahir = $_POST['js_tempatLahirPetugas'];
41. $CtrlTanggalLahir = $_POST['js_tanggalLahirPetugas'];
42. $CtrlTelp = $_POST['js_telpPetugas'];
43. $CtrlAlamat = $_POST['js_alamatPetugas'];
44.
45. $ubah = $crud->ubahPetugas($CtrlNIK, $CtrlNama, $CtrlTempatLahir, $CtrlTanggalLahir,
$CtrlTelp, $CtrlAlamat);
46. $retval['status'] = $ubah[0];
47. $retval['message'] = $ubah[1];
49. }
50.
51. if($method == 'Hapus_Petugas')
52. {
54. $hapus = $crud->hapusPetugas($CtrlNIK);
55. $retval['status'] = $hapus[0];
56. $retval['message'] = $hapus[1];
58. }
59.
60. if($method == 'Cari_NIK_Petugas')
61. {
63. $hapus = $crud->SatuBarisPetugas($CtrlNIK);
64. $retval['status'] = $hapus[0];
65. $retval['message'] = $hapus[1];
66. $retval['data'] = $hapus[2];
68. }
69.
70. }else{
71. header("HTTP/1.1 401 Unauthorized");
72. exit;
73. }
74.
75. ?>
76.

23. PENAMBAHAN BARIS KODE SIMPAN DATA PETUGAS JS KE-1
Ketikan kode validasi inputan data petugas dibawah komen “//area kode simpan data”
Silahkan ketikan seperti kode dibawah ini :

1. if ($('#txtnik').val().length==0){
2. swal({
4. text:'NIK Wajib Diisi'
5. });
6. }else if ($('#txtnama').val().length==0){
7. swal({
9. text:'Nama Wajib Diisi'
10. });
11. }else if ($('#txttempat').val().length==0){
12. swal({
14. text:'Tempat Lahir Wajib Diisi'
15. });
16. }else if ($('#txttgl').val().length==0){
17. swal({
19. text:'Tanggal Lahir Wajib Diisi'
20. });
21. }else if ($('#txttelp').val().length==0){
22. swal({
24. text:'No Telp Wajib Diisi'
25. });
26. }else if ($('#txtalamat').val().length==0){
27. swal({
29. text:'Alamat Wajib Diisi'
30. });
31. }else{
32. // area ajax CRUD petugas
33.
34. }
35.

Ketikan kode inputan data petugas dibawah komen “//area ajax CRUD petugas” seperti
dibawah ini :
1. $.ajax({
2. url: "source/controller/controllerPetugas.php",
3. type: "POST",
4. data: {
5. js_nikPetugas:$('#txtnik').val(),
6. js_namaPetugas:$('#txtnama').val(),
7. js_tempatLahirPetugas:$('#txttempat').val(),
8. js_tanggalLahirPetugas:$('#txttgl').val(),
9. js_telpPetugas:$('#txttelp').val(),
10. js_alamatPetugas:$('#txtalamat').val(),
11. method_petugas:'Simpan_Petugas'
12. },
13. success: function(data, textStatus, jqXHR)
14. {
15. // Acuan Ajax kode simpan data Petugas
16. $resp = JSON.parse(data);
17.
18. if ($resp['duplicate']=='Duplicate Yes'){
19. swal($resp['message']);
20. //cek duplikasi Primarykey NIK
21.
22. } else{
23. // area kode berhasil disimpan
25. }
26.
27. },
28. error: function (request, textStatus, errorThrown) {
29. swal("Error ", request.responseJSON.message, "error");
30. }
31. });
32.

Ketikan kode inputan data petugas dibawah komen “//cek duplikasi Primarykey NIK
” seperti dibawah ini :
1. $.ajax({
3. type: "POST",
4. data : {
6. method_petugas:'Cari_NIK_Petugas'
7. },
8. success: function(data_duplikasi, textStatus, jqXHR)
9. {
10. $respDupliksi = JSON.parse(data_duplikasi);
11. $('#txtnama').val($respDupliksi['data'][0]['nama']);
12. $('#txttempat').val($respDupliksi['data'][0]['tempat_lahir']);
13. $('#txttgl').val($respDupliksi['data'][0]['tanggal_lahir']);
14. $('#txttelp').val($respDupliksi['data'][0]['telp']);
15. $('#txtalamat').val($respDupliksi['data'][0]['alamat']);
16. }
17. });
18.

Ketikan kode inputan data petugas dibawah komen “//area kode berhasil disimpan
1. $("#petugasModal").modal("hide");
2. let tempTable = $('#table-petugas').DataTable();
3. // #table_petugas merupakan nama ID tabel pada HTML
4. tempTable.ajax.reload( null, false );
27. PENAMBAHAN BARIS KODE SIMPAN DATA PETUGAS JS KE-5 UNTUK

UBAH PETUGAS
Ketikan kode inputan ubah data petugas dibawah komen “//area kode ubah data
1. $.ajax({
3. type: "POST",
4. data: {
6. js_namaPetugas:$('#txtnama').val(),
7. js_tempatLahirPetugas:$('#txttempat').val(),
8. js_tanggalLahirPetugas:$('#txttgl').val(),
9. js_telpPetugas:$('#txttelp').val(),
10. js_alamatPetugas:$('#txtalamat').val(),
11. method_petugas:'Ubah_Petugas'
12. },
13. success: function(data, textStatus, jqXHR){
16. let tempTable = $('#table-petugas').DataTable();
17. // #table_petugas merupakan nama ID tabel pada HTML
18. tempTable.ajax.reload( null, false );
19. }
20. });
21.

28. PENAMBAHAN INFORMASI TABEL PADA HALAMAN PETUGAS
➢ Sebelum uji coba kode Ubah dan Hapus data kita tampilkan terlebih dahulu tabel data
petugas sebagai tombol acuan data yang dilakukan transaksi.
➢ Silahkan Download Terlebih dahulu library datatable.min.js disini (CTRL + Arahakan
Kursor ) simpan pada folder source -> lib -> js
➢ Silahkan tambahkan library js datatables.min.js ke file footer
➢ Silahkan tambahkan kode HTML pada file petugas.php diatas baris kode “ <?php
require("footer.php") ?>” seperti kode dibawah ini :
1. <br><br>
2. <div class="table-responsive margin">
3. <table id="table-petugas" class="table table-bordered">
4. <thead>
5. <tr>
6. <th style="width: 10px">#</th>
7. <th style="width: 15px">NIK</th>
8. <th style="width: 200px">Nama Petugas</th>
9. <th style="width: 50px">Tempat Lahir</th>
10. <th style="width: 50px">Tanggal Lahir</th>
11. <th style="width: 25px;">Telp</th>
12. <th style="width: 150px;">Alamat</th>
13. <th style="width: 50px;"></th>
14. </tr>
15. </thead>
16.
17. </table>
18. </div>
19.
➢ Silahkan Tambahkan method /kode untuk menampilkan data dengan konsep ajax setelah
akhir kode penutup dari “ $('#btnPetugas').click(function(){“ yang kita buat sebelumnya,
jika sudah silahkan ketikan kode dibawah ini :

1. $('#table-petugas').DataTable({
2. "paging": true,
3. "lengthChange": false,
4. "searching": true,
5. "processing": true,
6. "ordering": false,
7. "info": false,
8. "responsive": true,
9. "autoWidth": false,
10. "pageLength": 100,
11. "dom": '<"top"f>rtip',
12. "fnDrawCallback": function( oSettings ) {
13. },
14. "ajax": {
15. "url": "source/controller/controllerPetugas.php",
16. "type": "POST",
17. "data" : {
18. method_petugas : "recordDataPetugas"
19. },
21. swal(request.responseJSON.message);
22. }
23. },
24.
25. columns: [
26. { "data": null,render : function ( data, type, full, meta ) {
27. return meta.row + 1;
28. }},
29. { "data": "nik" },
30. { "data": "nama" },
31. { "data": "tempat_lahir" },
32. { "data": "tanggal_lahir" },
33. { "data": "telp" },
34. { "data": "alamat" },
35. { "data": null, render : function(data,type,row){
36. return "<button title='Edit' class='btn btn-edit-petugas btn-warning btn-xs'><i
class='fafa-pencil'></i> Edit</button> <button title='Delete' class='btn btn-hapus-
petugas btn-danger btn- xs'><i class='fa fa-remove'></i> Delete</button> ";
37. } },
38. ]
39. });
40.
Sebelum ditambahkan Data

Setelah ditambahkan data
29. PENAMBAHAN KODE HAPUS DATA PETUGAS

Silahkan tambahkan kode hapus pada petugas pada file index.js pada akhir kode
“ $(document).on("click",".btn-hapus-petugas",function(){“ yang kita buat sebelumnya,
kemudian ketikan kode dibawah ini :
1. // Membuat Kode hapus data petugas
2. $(document).on("click",".btn-hapus-petugas",function(){
3. let posisiBaris = $(this).parents('tr');
4. if (posisiBaris.hasClass('child')) {
5. posisiBaris = posisiBaris.prev();
6. }
7. let table = $('#table-petugas').DataTable();
8. let data = table.row(posisiBaris).data();
9.
10. swal({
11. title: "Delete",
12. text: "Apakah anda yakin menghapus data ini ?",
13. type: "warning",
14. showCancelButton: true,
15. confirmButtonClass: "btn-danger",
16. confirmButtonText: "Delete",
17. closeOnConfirm: false,
18. showLoaderOnConfirm: true
19. },
20. function(){
21.
22. $.ajax({
23. url:"source/controller/controllerPetugas.php",
24. type: "POST",
25. data: {
26. js_nikPetugas : data.nik,
27. method_petugas:'Hapus_Petugas'
28. },
29. success: function(data, textStatus, jqXHR)
30. {
32. if($resp['status'] == true){

34. let xtable = $('#table-petugas').DataTable();
35. xtable.ajax.reload( null, false );
36. }else{
37. swal("Error hapus Petugas: "+$resp['message'])
38. }
39.
40. },
42. swal("Error ", request.responseJSON.message, "error");
43. }
44. });
45. });
46. });
47.

Praktikum Web 2 Monitoring Kegiatan Masjid Pertemuan 2

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

Praktikum Web 2 Monitoring Kegiatan Masjid Pertemuan 2

Diunggah oleh

Hak Cipta:

Format Tersedia

PRAKTIKUM WEB 2 (PHP NATIVE)

FAKULTAS TEKNOLOGI INFORMASI

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

1.1 PERSIAPAN SOFTWARE DAN HARDWARE

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

Ketikan kode “ USE dbmonitoring_masjid; “ kemudian tekan tombol Enter seperti

4) Pembuatan Tabel Petugas

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

5) Pembuatan Tabel Jadwal Sholat Jumat

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

Karena lupa menambahkan AUTO_INCREMENT pada tabel pengajian silahkan

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

Karena lupa menambahkan AUTO_INCREMENT pada tabel jadwal sholat fardhu

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

4) Input Data Tabel jadwal sholat fardhu

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

6) Input Data pengajian

Kemudian ketikan kode dibawah ini :

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

2) Silahkan buat folder “source” didalam folder “masjid”

4) Menggunakan Library Framework Bootsrap

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

1. PERSIAPAN FOLDER PROJECT

3. FILE HEADER DAN FOOTER

4. PERSIAPAN SOURCE CODE PADA FILE HEADER.PHP

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

5. PERSIAPAN SOURCE CODE PADA FILE FOOTER.PHP

pada file header.php pada folder pages

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

➢ Tambahkan file jquery.min.js atau jquery.js ,silahkan download pada laman

6. PERSIAPAN HALAMAN HOME

1. <?php require("header.php") ?>

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

7. PERSIAPAN HALAMAN JADWAL SHOLAT JUMAT

1. <?php require("header.php") ?>

8. PERSIAPAN HALAMAN JADWAL SHOLAT FARDHU

1. <?php require("header.php") ?>

9. PERSIAPAN HALAMAN JADWAL PENGAJIAN

1. <?php require("header.php") ?>

10. PERSIAPAN HALAMAN DATA PETUGAS

1. <?php require("header.php") ?>

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

12. PERSIAPAN HALAMAN INDEX

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

Halaman Jadwal Sholat Jumat

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

13. PERBAIKAN SOURCE CODE HALAMAN PETUGAS KE-1

1. <?php require("header.php") ?>

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

HALAMAN REVISI-1 PETUGAS MASJID

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

15. PENAMBAHAN LIBRARY JAVA SCRIPT SWEETALERT

16. PERUBAHAN SOURCE CODE FOOTER.PHP

APLIKASI MONITORING KEGIATAN MASJID MOKHAMAD RAMDHANI RAHARJO, M.KOM

17. PENAMBAHAN LIBRARY CSS SWEETALERT

18. PERUBAHAN SOURCE CODE HEADER.PHP

19. PERSIAPAN KODE SIMPAN DATA PETUGAS