Cara Program View Modal pada PHP Sederhana

Halo Sobat Sederhana, kali ini kita akan membahas tentang cara program view modal pada PHP sederhana. View modal adalah tampilan yang muncul di atas halaman web saat mengeklik tombol atau tautan tertentu. View modal dapat memberikan pengalaman pengguna yang lebih baik daripada navigasi ke halaman baru atau membuka jendela pop-up.

Persiapan

Sebelum memulai, pastikan Anda sudah memiliki pengetahuan dasar tentang HTML, CSS, dan JavaScript. Selain itu, pastikan Anda sudah menginstal Apache, PHP, dan MySQL pada server lokal Anda atau hosting Anda.

Pertama-tama, buatlah file HTML dengan nama ‘index.php’ dan tambahkan kode berikut:

File:	index.php
Kode:	<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>Cara Program View Modal pada PHP Sederhana</title></head><body></body></html>

Tambahkan Bootstrap dan jQuery

Untuk membuat tampilan view modal, kita akan menggunakan framework Bootstrap dan jQuery. Bootstrap adalah sebuah framework yang menyediakan komponen UI siap pakai, sedangkan jQuery adalah sebuah library JavaScript yang menyederhanakan kode JavaScript.

Berikut adalah cara untuk menambahkan Bootstrap dan jQuery pada file ‘index.php’:

File:

index.php

Kode:

Buat Tombol untuk Memunculkan Modal

Sekarang kita akan membuat tombol untuk memunculkan modal. Pada kode berikut, kita akan menggunakan class ‘btn’ dan ‘btn-primary’ dari Bootstrap untuk membuat tombol yang menarik.

Tambahkan kode berikut pada file ‘index.php’:

File:

index.php

Kode:

TRENDING 🔥 Cara Membuat Pelampung Pancing Sederhana

Buat Modal

Sekarang kita akan membuat modal. Kita akan menggunakan class ‘modal’ dan ‘fade’ dari Bootstrap untuk membuat modal yang muncul dengan efek fading.

Tambahkan kode berikut pada file ‘index.php’:

File:

index.php

Kode:

<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>Cara Program View Modal pada PHP Sederhana</title><link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” integrity=”sha384-OgVRvuATP1z7JjHLkuOUXw704+h732Lr+gLvFXOzS1sggCwFA+rSlM6qU2KR3fL3″ crossorigin=”anonymous”></head><body><button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#exampleModal”>Tampilkan Modal</button><div class=”modal fade” id=”exampleModal” tabindex=”-1″ aria-labelledby=”exampleModalLabel” aria-hidden=”true”><div class=”modal-dialog”><div class=”modal-content”><div class=”modal-header”><h5 class=”modal-title” id=”exampleModalLabel”>Contoh Modal</h5><button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”><span aria-hidden=”true”>×</span></button></div><div class=”modal-body”>Isi modal disini…</div><div class=”modal-footer”><button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Tutup</button><button type=”button” class=”btn btn-primary”>Simpan Perubahan</button></div></div></div></div><script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js” integrity=”sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj” crossorigin=”anonymous”></script><script src=”https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.js”></script><script src=”https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js”></script><script src=”https://unpkg.com/feather-icons”></script></body></html>

Buat Form pada Modal

Untuk membuat form pada modal, kita akan menambahkan elemen form dari HTML dan menambahkan class Bootstrap untuk membuat tampilan yang menarik.

Tambahkan kode berikut pada file ‘index.php’:

File:

index.php

Kode:

<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>Cara Program View Modal pada PHP Sederhana</title><link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” integrity=”sha384-OgVRvuATP1z7JjHLkuOUXw704+h732Lr+gLvFXOzS1sggCwFA+rSlM6qU2KR3fL3″ crossorigin=”anonymous”></head><body><button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#exampleModal”>Tampilkan Modal</button><div class=”modal fade” id=”exampleModal” tabindex=”-1″ aria-labelledby=”exampleModalLabel” aria-hidden=”true”><div class=”modal-dialog”><div class=”modal-content”><div class=”modal-header”><h5 class=”modal-title” id=”exampleModalLabel”>Contoh Modal</h5><button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”><span aria-hidden=”true”>×</span></button></div><form><div class=”modal-body”><div class=”form-group”><label for=”exampleInputEmail1″>Alamat Email</label><input type=”email” class=”form-control” id=”exampleInputEmail1″ aria-describedby=”emailHelp”><small id=”emailHelp” class=”form-text text-muted”>Kami tidak akan membagikan email Anda dengan orang lain.</small></div><div class=”form-group”><label for=”exampleInputPassword1″>Kata Sandi</label><input type=”password” class=”form-control” id=”exampleInputPassword1″></div><div class=”form-group form-check”><input type=”checkbox” class=”form-check-input” id=”exampleCheck1″><label class=”form-check-label” for=”exampleCheck1″>Ingat saya</label></div></div><div class=”modal-footer”><button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Tutup</button><button type=”submit” class=”btn btn-primary”>Masuk</button></div></form></div></div></div><script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js” integrity=”sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj” crossorigin=”anonymous”></script><script src=”https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.js”></script><script src=”https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js”></script><script src=”https://unpkg.com/feather-icons”></script></body></html>

Program PHP untuk Mengambil Data

Sekarang kita akan menambahkan program PHP untuk mengambil data dari database. Kita akan menggunakan fungsi ‘mysqli_query()’ untuk mengambil data dari database dan mengembalikan data dalam format JSON.

Buatlah file PHP dengan nama ‘get-data.php’ dan tambahkan kode berikut:

TRENDING 🔥 Cara Bikin Generator Listrik Sederhana

File:

get-data.php

Kode:

<?php$servername = “localhost”;$username = “username”;$password = “password”;$dbname = “myDB”;// Membuat koneksi$conn = mysqli_connect($servername, $username, $password, $dbname);// Memeriksa koneksiif (!$conn) {die(“Koneksi gagal: ” . mysqli_connect_error());}// Mengambil data dari database$sql = “SELECT id, nama, alamat FROM orang”;$result = mysqli_query($conn, $sql);// Mengembalikan data dalam format JSON$rows = array();while($r = mysqli_fetch_assoc($result)) {$rows[] = $r;}echo json_encode($rows);// Menutup koneksimysqli_close($conn);?>

Program JavaScript untuk Mengambil Data melalui AJAX

Sekarang kita akan menambahkan program JavaScript untuk mengambil data dari file ‘get-data.php’ menggunakan AJAX. Kita akan menggunakan library Axios untuk membuat request AJAX dan library Swal untuk menampilkan pesan.

Tambahkan kode berikut pada file ‘index.php’:

File:

index.php

Kode: