Tutorial Pop-Up Edit di PHP: Panduan Lengkap dan Praktis

Updated: 20 Sept, 2024 • • min read

Table of Contents

tutorial PHP, pop-up edit PHP, edit data PHP, belajar PHP, PHP MySQL

Hallo sobat baru nyekrip! Kali ini kita akan membahas tutorial tentang cara membuat pop-up edit di PHP. Pop-up edit ini memungkinkan Anda untuk mengedit data dengan cara yang lebih interaktif dan tidak mengganggu tampilan halaman utama. Kita akan menggunakan PHP, MySQL, dan sedikit JavaScript untuk membuat fitur ini. Mari kita mulai!

Persiapan Lingkungan Pengembangan

Sebelum kita mulai, pastikan Anda telah menyiapkan lingkungan pengembangan dengan baik. Anda memerlukan:

Server Lokal: Seperti XAMPP atau MAMP yang telah terinstal PHP dan MySQL.
Text Editor: Seperti Visual Studio Code atau Sublime Text.
Browser: Untuk menguji hasil dari aplikasi yang Anda buat.

Membuat Database dan Tabel

Kita mulai dengan membuat database dan tabel di MySQL. Langkah-langkahnya sebagai berikut:

Buka http://localhost/phpmyadmin di browser Anda.
Klik tab Database, lalu buat database baru dengan nama pop_up_edit_db.
Setelah database dibuat, pilih database tersebut dan buat tabel dengan nama users dengan kolom-kolom berikut:
- id: INT, Primary Key, Auto Increment
- name: VARCHAR(100)
- email: VARCHAR(100)
- phone: VARCHAR(15)

Membuat Koneksi PHP ke MySQL

Langkah pertama adalah membuat file koneksi PHP ke database. Buat file baru dengan nama koneksi.php dan tambahkan kode berikut:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "pop_up_edit_db";

// Membuat koneksi
$conn = mysqli_connect($servername, $username, $password, $dbname);

// Memeriksa koneksi
if (!$conn) {
    die("Koneksi gagal: " . mysqli_connect_error());
}
?>

Membuat Tampilan Data

Selanjutnya, kita akan membuat tampilan data yang akan memiliki tombol untuk membuka pop-up edit. Buat file index.php dan tambahkan kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tampilan Data</title>
    <link rel="stylesheet" href="styles.css">
    <script>
        function openPopup(id, name, email, phone) {
            document.getElementById('popup').style.display = 'flex';
            document.getElementById('editId').value = id;
            document.getElementById('editName').value = name;
            document.getElementById('editEmail').value = email;
            document.getElementById('editPhone').value = phone;
        }

        function closePopup() {
            document.getElementById('popup').style.display = 'none';
        }
    </script>
</head>
<body>

Daftar Pengguna

<table border="1">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Action</th>
    </tr>
    <?php
    include 'koneksi.php';

    $sql = "SELECT * FROM users";
    $result = mysqli_query($conn, $sql);

    if (mysqli_num_rows($result) > 0) {
        while($row = mysqli_fetch_assoc($result)) {
            echo "<tr><td>" . $row["id"] . "</td><td>" . $row["name"] . "</td><td>" . $row["email"] . "</td><td>" . $row["phone"] . "</td><td><button onclick=\"openPopup(" . $row["id"] . ', \'' . $row["name"] . '\', \'' . $row["email"] . '\', \'' . $row["phone"] . "')\">Edit</button></td></tr>";
        }
    } else {
        echo "<tr><td colspan='5'>Tidak ada data</td></tr>";
    }

    mysqli_close($conn);
    ?>
</table>

<div id="popup" class="popup">
    <div class="popup-content">
        <span class="close-btn" onclick="closePopup()">×</span>
        <h2>Edit Data</h2>
        <form action="update.php" method="POST">
            <input type="hidden" id="editId" name="id">
            <label for="editName">Name:</label>
            <input type="text" id="editName" name="name" required><br><br>

            <label for="editEmail">Email:</label>
            <input type="email" id="editEmail" name="email" required><br><br>

            <label for="editPhone">Phone:</label>
            <input type="text" id="editPhone" name="phone" required><br><br>

            <input type="submit" value="Update">
        </form>
    </div>
</div>

Menangani Pembaruan Data

Kita perlu menangani data yang diperbarui dari pop-up. Buat file update.php dan tambahkan kode berikut:

<?php
include 'koneksi.php';

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $id = $_POST['id'];
    $name = $_POST['name'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];

    $sql = "UPDATE users SET name='$name', email='$email', phone='$phone' WHERE id=$id";

    if (mysqli_query($conn, $sql)) {
        header("Location: index.php");
    } else {
        echo "Error: " . $sql . "<br>" . mysqli_error($conn);
    }

    mysqli_close($conn);
}
?>

Penutup

Dengan mengikuti tutorial ini, Anda telah mempelajari cara membuat pop-up edit di PHP untuk mengedit data secara interaktif. Pop-up ini membuat aplikasi Anda lebih user-friendly dan responsif. Anda dapat menyesuaikan desain dan fungsionalitas lebih lanjut sesuai kebutuhan aplikasi Anda.

Terima kasih sudah membaca artikel ini, semoga bermanfaat!