Thiết kế website giá rẻ

Question

SUMMARIZE PROBLEM

The code below is named as index.php. This file is perfectly work..

<?php

$servername = "testing";
$username = "testing";
$password = "test";
$dbname = "test";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);

// Check connection
if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
}

// Get all outings from database
$sql = "SELECT id, title, place, date FROM Outing";
$result = mysqli_query($conn, $sql);

$outingRows = ""; // Initialize outing data for table

if (mysqli_num_rows($result) > 0) {
  // Loop through outing results and build table rows
  while($row = mysqli_fetch_assoc($result)) {
    $outingRows .= "<tr>";
    $outingRows .= "<td><input type='checkbox' name='outing_ids[]' value='" . $row['id'] . "'></td>";
    $outingRows .= "<td>" . $row['title'] . "</td>";
    $outingRows .= "<td>" . $row['place'] . "</td>";
    $outingRows .= "<td>" . $row['date'] . "</td>";
    $outingRows .= "</tr>";
  }
} else {
  $outingRows = "<tr><td colspan='4'>No outings found.</td></tr>";
}

// Get selected outing IDs (if any)
$outingIds = isset($_POST['outing_ids']) ? $_POST['outing_ids'] : array();

if (empty($outingIds)) {
  echo "No outings selected for deletion.";
} else {
  // Construct DELETE statements with IN clause for selected IDs
  $idList = implode(",", $outingIds);
  $sql = "DELETE FROM Outing WHERE id IN ($idList)";

  if (mysqli_query($conn, $sql)) {
    echo "Selected outings deleted successfully.";
  } else {
    echo "Error deleting outings: " . mysqli_error($conn);
  }
}


mysqli_close($conn);

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Outing Information</title>
</head>
<body>
    <h1>Outing Information</h1>
    <form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">  <p>List of Outings:</p>
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" name="select_all"></th>
                    <th>Title</th>
                    <th>Place</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                <?php echo $outingRows; ?>
            </tbody>
        </table>
        <button type="submit">Delete Selected Outings</button>
    </form>
    <script>
        // Optional: Add functionality for selecting all checkboxes
        const selectAllCheckbox = document.querySelector('input[name="select_all"]');
        const outingCheckboxes = document.querySelectorAll('input[name="outing_ids[]"]');

        selectAllCheckbox.addEventListener('change', (event) => {
            outingCheckboxes.forEach(checkbox => checkbox.checked = event.target.checked);
        });
    </script>
</body>
</html>

WHAT CODE IS ALL ABOUT?

This code is all about how to delete any information that you’ve posted on your database. First, all information that posted on table named “Outing” is retrieved and posted as the body of the site. Then every id has a respective input checkbox and there’s a one button that if you clicked that button, all checkbox that already checked has delete the respective info. That code shown above is PERFECTLY WORKS.

THEN WHAT IS YOUR PROBLEM?

My only problem on this is how to segregate or separate the php file into html file and one php file with no error or functioning as the code declared above (index.php)? Because as you shown the code, all code is posted only on one php file. Now I need to separate them then here’s my code when I separated them.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Outing Information</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  </head>
<body>
    <h1>Outing Information</h1>
    <form id="outing-delete-form">
        <p>List of Outings:</p>
        <table id="outing-table">
            <thead>
                <tr>
                    <th><input type="checkbox" name="select_all"></th>
                    <th>Title</th>
                    <th>Place</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                </tbody>
        </table>
        <button type="submit">Delete Selected Outings</button>
    </form>
<script src="update_information.js"></script>
</body>
</html>

upated_information.js

$(document).ready(function() {
            // Fetch outing data and populate table
            fetchOutings();

            // Handle form submission with AJAX
            $('#outing-delete-form').submit(function(event) {
                event.preventDefault();

                const selectedIds = [];
                $('input[name="outing_ids[]"]:checked').each(function() {
                    selectedIds.push($(this).val());
                });

                if (selectedIds.length === 0) {
                    alert("No outings selected for deletion.");
                    return;
                }

                // Send AJAX request to delete_outings.php
                $.ajax({
                    url: 'delete_outings.php',
                    method: 'POST',
                    data: { outing_ids: selectedIds },
                    success: function(response) {
                        alert(response);
                        fetchOutings(); // Refresh outing data after deletion
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.error("Error deleting outings:", textStatus, errorThrown);
                        alert("Failed to delete outings.");
                    }
                });
            });
        });

        function fetchOutings() {
            $.ajax({
                url: 'delete_outings.php',  // Same php file to fetch and delete outings
                method: 'GET',
                success: function(data) {
                    $('#outing-table tbody').html(data);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error("Error fetching outings:", textStatus, errorThrown);
                    alert("Failed to load outings.");
                }
            });
        }

delete_outings.php

<?php
$servername = "";
$username = "";
$password = "";
$dbname = "";

// Create connection (replace with your mysqli connection logic)
function connectToDb() {
  global $servername, $username, $password, $dbname;
  $conn = mysqli_connect($servername, $username, $password, $dbname);
  return $conn;
}

function fetchOutings() {
    $conn = connectToDb();
    $sql = "SELECT id, title, place, date FROM Outing";
    $result = mysqli_query($conn, $sql);
    $outingRows = "";

    if (mysqli_num_rows($result) > 0) {
        while ($row = mysqli_fetch_assoc($result)) {
            $outingRows .= "<tr>";
            $outingRows .= "<td><input type='checkbox' name='outing_ids[]' value='" . $row['id'] . "'></td>";
            $outingRows .= "<td>" . $row['title'] . "</td>";
            $outingRows .= "<td>" . $row['place'] . "</td>";
            $outingRows .= "<td>" . $row['date'] . "</td>";
            $outingRows .= "</tr>";
        }
    } else {
        $outingRows = "<tr><td colspan='4'>No outings found.</td></tr>";
    }

    mysqli_close($conn);
    return $outingRows;
}

function deleteOutings($outingIds) {
    $conn = connectToDb();
    $idList = implode(",", $outingIds);
    $sql = "DELETE FROM Outing WHERE id IN ($idList)";

    if (mysqli_query($conn, $sql)) {
        $message = "Selected outings deleted successfully.";
    } else {
        $message = "Error deleting outings: " . mysqli_error($conn);
    }

    mysqli_close($conn);
}
?>

Then if you run on your site, there’s no any data retrieve. Don’t mind the database connection because there’s no error in that and I want to replace the correct data if the code is solve.
Can you define what wrong with my separated code?

Again, the file index.php on above is perfectly works. Then after I segregate, if I run the index.html, there’s no data retrieve.

Thiết kế website giá rẻ

Danh mục

How to segregate from 1 php file to index.html and index.php?