How to display an image using PHP on the column table?

Gcobani Mkontwana

1y965PHP

Hi Team

I need help with two things, one on my column Select a user must be able to click when selecting a module name then the image of this module must show picture. How can i do this on this given code below?



     Booking Courses
    The courses available for booking or registration by the student.
    
        
        ping()) {
    die("Database connection failed.");
}

// Query to fetch available courses for the logged-in user
$sql = "
SELECT ac.course_id, ac.course_name, ac.duration, ac.image
FROM available_courses ac
LEFT JOIN student_modules sm ON ac.course_name = sm.module_name AND sm.student_id = ?
WHERE sm.student_id IS NULL";

// Prepare the SQL statement
$stmt = $conn->prepare($sql);
if (!$stmt) {
    die("Error preparing the query: " . $conn->error);
}

// Bind the parameters
$stmt->bind_param("i", $user_id); // Bind the user_id parameter

// Execute the statement
if (!$stmt->execute()) {
    die("Error executing the query: " . $stmt->error);
}

// Get the result
$result = $stmt->get_result();

// Base directory for images
$baseDir = '../img/Courses/';


// Check if courses exist for the logged-in user
if ($result->num_rows > 0) {
    echo '';
    echo '';
    echo '';
    echo '';
    echo '';
    echo '';
    echo '';
    echo '';
    echo '';
    echo '';
    while ($row = $result->fetch_assoc()) {
        $imagePath = $baseDir . htmlspecialchars($row['image']);
        echo '';
        echo '';
        echo '';
        echo '';
        echo '';
        echo '';
    }
    echo '';
    echo 'Select Image Course Name Duration
' . htmlspecialchars($row['course_name']) . ' ' . htmlspecialchars($row['duration']) . '';
} else {
    echo 'No courses available at the moment.';
}

// Close the statement and the connection
$stmt->close();
$conn->close();
?>

Select	Image	Course Name	Duration
		' . htmlspecialchars($row['course_name']) . '	' . htmlspecialchars($row['duration']) . '

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Tuhin Paul1y ago

Another approach is image display via Form submission

Modify the Form to Include a Hidden Input for the Selected Module:
- Add a radio button or another way to select a module (instead of checkbox).
- On form submission, send the selected module ID to the server and dynamically load the corresponding image.
Modified Code: Update the table to include radio buttons instead of checkboxes.
Add a "Preview" button to trigger the image preview..

fetch_assoc()) {
    $imagePath = $baseDir . htmlspecialchars($row['image']);
    echo '';
    echo '';
    echo '';
    echo '' . htmlspecialchars($row['course_name']) . '';
    echo '' . htmlspecialchars($row['duration']) . '';
    echo '';
}
?>

Handle Preview on Form Submit:

Add a "Preview" button next to the register button:

Add JavaScript to dynamically preview the image:

document.getElementById("preview-btn").addEventListener("click", function () {
    const selectedCourse = document.querySelector('input[name="selected_course"]:checked');
    if (selectedCourse) {
        const imagePath = selectedCourse.getAttribute("data-image");
        const imageContainer = document.getElementById("module-image");
        imageContainer.src = imagePath;
        imageContainer.style.display = "block";
    } else {
        alert("Please select a course to preview its image.");
    }
});

Here this approach is slower; page reload needed for server logic

Tuhin Paul1y ago

Add a Click Event Listener for Module Names:
- Add a class to the that displays the course name.
- Use JavaScript to listen for click events on these module names.
- When a user clicks on a module name, dynamically update an tag to display the corresponding image.
Modified Code: Add an empty image container (
or ) where the selected image will be displayed.
Add a data-image attribute to store the image path for each module name.



    



fetch_assoc()) {
    $imagePath = $baseDir . htmlspecialchars($row['image']);
    echo '';
    echo '';
    echo '';
    echo '' . htmlspecialchars($row['course_name']) . '';
    echo '' . htmlspecialchars($row['duration']) . '';
    echo '';
}
?>

Add JavaScript for Interaction:

document.addEventListener("DOMContentLoaded", function () {
    const moduleNames = document.querySelectorAll(".module-name");
    const imageContainer = document.getElementById("module-image");
    
    moduleNames.forEach(module => {
        module.addEventListener("click", function () {
            const imagePath = this.getAttribute("data-image");
            imageContainer.src = imagePath;
            imageContainer.style.display = "block"; // Show the image
        });
    });
});

this approach requires slightly more complex (requires JavaScript)

Sarthak Varshney1y ago
Steps to Implement Dynamic Image Loading
1. Add a Dropdown to Select Modules
  Replace or add to your current table structure with a '; echo ''; while ($row = $result->fetch_assoc()) { $course_id = htmlspecialchars($row['course_id']); $course_name = htmlspecialchars($row['course_name']); $image = htmlspecialchars($row['image']); echo ''; } echo ''; echo ' '; echo '
  '; echo ''; echo '
  '; } else { echo 'No courses available at the moment.'; } $stmt->close(); $conn->close(); ?>
Key Changes and Additions
1. Dropdown with data-image Attributes
  Each in the dropdown includes a data-image attribute containing the image path.
2. Dynamic Image Update
  JavaScript listens for the change event on the dropdown and updates the image's src attribute accordingly.
3. Image Display Container
  An empty element is included in the #moduleImage div, which updates dynamically.
4. Fallback for No Image Selected
  If no module is selected, the image is hidden.
Optional: Using AJAX for Real-Time Fetching
If your images or course details are stored in different locations or need additional database queries, you can use AJAX to fetch the image dynamically from the server. Here's a simplified approach:

PHP Endpoint (fetch_image.php)
```
prepare($sql);
    $stmt->bind_param("i", $course_id);
    $stmt->execute();
    $stmt->bind_result($image);
    $stmt->fetch();

    echo json_encode(['image' => $image]);
    $stmt->close();
    $conn->close();
}
?>
```
JavaScript AJAX Request

Replace the change event listener in the earlier script with the following:
```
dropdown.addEventListener('change', function () {
    const selectedCourseId = this.value;

    if (selectedCourseId) {
        fetch('fetch_image.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: `course_id=${selectedCourseId}`
        })
        .then(response => response.json())
        .then(data => {
            if (data.image) {
                moduleImage.src = `../img/Courses/${data.image}`;
                moduleImage.style.display = 'block';
            } else {
                moduleImage.src = '';
                moduleImage.style.display = 'none';
            }
        })
        .catch(error => console.error('Error fetching image:', error));
    }
});
```