如何在核心PHP删除操作中实现SweetAlert弹窗？

Hey there! Let's walk through how to add that SweetAlert confirmation popup when clicking your delete button in cust_save.php. I'll break it down into simple, actionable steps that fit right into your core PHP learning journey.

1. First, Load SweetAlert's CSS & JavaScript #

SweetAlert is a pre-built library, so we need to load its styles and scripts first. You can use a CDN for this—just add these lines to your page:

<!-- Add this inside your <head> tag -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.css">

<!-- Add this right before your closing </body> tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>

If you prefer hosting files locally, download the SweetAlert assets and adjust the file paths to point to your local copies.

2. Update Your Delete Button & Form #

Instead of letting the form submit immediately when clicking "Delete", we'll modify the button to trigger our popup first. Here's how to adjust your HTML:

<!-- Wrap your delete button in a form (if not already) -->
<form method="POST" action="cust_save.php" class="delete-form">
  <!-- Hidden input to pass the customer ID you want to delete -->
  <input type="hidden" name="delete_id" value="<?php echo $customer_id; ?>">
  <!-- Change button type to "button" so it doesn't submit right away -->
  <button type="button" class="delete-btn">Delete</button>
</form>

Replace $customer_id with your actual variable that holds the customer's ID from your existing data fetch code.

3. Add JavaScript to Trigger the SweetAlert Popup #

Now we'll write a small JavaScript snippet that listens for delete button clicks and shows the confirmation dialog. Add this right after the SweetAlert script you loaded earlier:

<script>
// Wait for the page to fully load before running our code
document.addEventListener('DOMContentLoaded', function() {
  // Find all delete buttons on the page
  const deleteButtons = document.querySelectorAll('.delete-btn');
  
  deleteButtons.forEach(button => {
    button.addEventListener('click', function() {
      // Get the parent form of the clicked button
      const form = this.closest('.delete-form');
      
      // Show the SweetAlert confirmation
      swal({
        title: "Are you sure?",
        text: "Once deleted, you won't be able to recover this customer's data!",
        icon: "warning",
        buttons: true,
        dangerMode: true,
      })
      .then((willDelete) => {
        if (willDelete) {
          // If user confirms, submit the form to delete the record
          form.submit();
          swal("Poof! The customer data has been deleted!", {
            icon: "success",
          });
        } else {
          // If user cancels, show a reassuring message
          swal("No worries! The customer data is safe.");
        }
      });
    });
  });
});
</script>

4. Handle the Delete Logic in cust_save.php #

You mentioned you already have data fetching code, so let's add the deletion logic to process the request when the form is submitted. Add this to your cust_save.php file:

<?php
// Check if the delete request is being sent
if(isset($_POST['delete_id'])) {
  // Get the customer ID from the form
  $delete_id = $_POST['delete_id'];
  
  // Use your existing database connection here (mysqli or PDO)
  // Example with mysqli:
  $conn = mysqli_connect('localhost', 'your_username', 'your_password', 'your_database_name');
  
  // **Important**: Use prepared statements to prevent SQL injection!
  $stmt = $conn->prepare("DELETE FROM customers WHERE id = ?");
  $stmt->bind_param("i", $delete_id); // "i" means integer (since ID is numeric)
  $stmt->execute();
  
  if($stmt->affected_rows > 0) {
    // Redirect back to your customer list page after successful deletion
    header('Location: customer_list.php'); // Replace with your actual list page URL
    exit();
  } else {
    echo "Oops! There was an error deleting the record.";
  }
  
  // Close the statement and connection
  $stmt->close();
  mysqli_close($conn);
}
?>

Make sure to replace your_username, your_password, your_database_name, and customers with your actual database details and table name.

Quick Security Note #

Since you're learning core PHP, it's crucial to learn about SQL injection early. Using prepared statements (like the example above) is the safest way to handle database queries with user input—never directly insert variables into your SQL string!

That's all you need! Now when you click the Delete button, you'll get a nice, user-friendly confirmation popup before any data is deleted. This helps prevent accidental deletions and makes your app feel more polished.

内容的提问来源于stack exchange，提问作者Rehana Shaikh