Module 9: Enhancing the User Interface | Bakery Management System Course

Creating a Seamless User Experience

A great application isn't just about functionality; it's also about how it feels to use. Modern web applications minimize full-page reloads to feel faster and more interactive. This is achieved using **AJAX (Asynchronous JavaScript and XML)**, a technique that allows the browser to communicate with the server in the background.

In this module, we'll use jQuery's simple AJAX methods to implement two powerful UI enhancements: a live product search and the use of modals for forms.

Step 1: Implementing a Live Search for Products

Instead of relying on a "Search" button and a page refresh, we can filter the product list instantly as the user types. This provides immediate feedback and a much better user experience.

First, add a search input to your `manage_products.php` page.

admin/manage_products.php (HTML Addition)

<h2>Manage Products</h2>
<input type="text" id="product-search" placeholder="Search for products...">

<!-- The table where products are listed -->
<table>
    <thead>...</thead>
    <tbody id="product-table-body">
        <!-- Product rows will be loaded here by AJAX -->
    </tbody>
</table>

Next, the JavaScript. We'll listen for the `keyup` event on the search box and send an AJAX request to a PHP script that will return the filtered results.

assets/js/product_search.js

$(document).ready(function() {
    // Function to load products
    function loadProducts(query = '') {
        $.ajax({
            url: '../api/search_products.php',
            method: 'GET',
            data: { search: query },
            success: function(data) {
                $('#product-table-body').html(data);
            }
        });
    }

    // Load all products initially
    loadProducts();

    // Trigger search on keyup
    $('#product-search').on('keyup', function() {
        loadProducts($(this).val());
    });
});

Finally, the backend PHP script `search_products.php` queries the database with the search term and returns the HTML for the table rows.

api/search_products.php

<?php
require_once '../includes/db.php';
$search = $_GET['search'] ?? '';

$sql = "SELECT p.*, c.name AS category_name FROM products p 
        JOIN categories c ON p.category_id = c.id 
        WHERE p.name LIKE ? 
        ORDER BY p.name ASC";

$stmt = $conn->prepare($sql);
$searchTerm = "%" . $search . "%";
$stmt->bind_param("s", $searchTerm);
$stmt->execute();
$result = $stmt->get_result();

$output = '';
while ($row = $result->fetch_assoc()) {
    $output .= "<tr>";
    $output .= "<td>" . htmlspecialchars($row['name']) . "</td>";
    $output .= "<td>" . htmlspecialchars($row['category_name']) . "</td>";
    // ... other columns
    $output .= "</tr>";
}
echo $output;
?>

Step 2: Using Modals for a Cleaner Workflow

Instead of navigating to a new page to add or edit a product, we can display the form in a pop-up window called a modal. This keeps the user on the main management page. Bootstrap has excellent, easy-to-use modal components.

You can create a button on your management page that, when clicked, triggers an AJAX call to fetch the form from a separate file and injects it into the modal body before showing it.

Example JavaScript for loading a form into a modal

// When an "Edit Product" button is clicked
$('.edit-product-btn').on('click', function() {
    const productId = $(this).data('id');

    // AJAX call to a PHP file that generates the edit form HTML
    $.ajax({
        url: 'get_product_form.php',
        method: 'GET',
        data: { id: productId },
        success: function(formHtml) {
            // Assuming you have a Bootstrap modal with an ID of #formModal
            $('#formModal .modal-body').html(formHtml);
            $('#formModal').modal('show');
        }
    });
});