Your IP : 216.73.216.93
<?php include 'includes/config.php'; ?>
<?php include 'includes/header.php'; ?>
<div class="container py-5">
<h1 class="text-center mb-5">Our Popular Courses</h1>
<div class="row">
<div class="col-md-3">
<!-- Filters can be added here -->
<div class="card">
<div class="card-body">
<h5 class="card-title">Filters</h5>
<form method="GET" action="">
<!-- Category Filter -->
<div class="mb-3">
<label class="form-label">Category</label>
<select class="form-select" name="category" onchange="this.form.submit()">
<option value="">All Categories</option>
<?php
$categories_sql = "SELECT * FROM categories";
$categories_result = $conn->query($categories_sql);
while($category = $categories_result->fetch_assoc()) {
$selected = (isset($_GET['category']) && $_GET['category'] == $category['id']) ? 'selected' : '';
echo "<option value='{$category['id']}' $selected>{$category['name']}</option>";
}
?>
</select>
</div>
<!-- Price Filter -->
<div class="mb-3">
<label class="form-label">Price Range</label>
<select class="form-select" name="price" onchange="this.form.submit()">
<option value="">All Prices</option>
<option value="free" <?php echo (isset($_GET['price']) && $_GET['price'] == 'free') ? 'selected' : ''; ?>>Free</option>
<option value="paid" <?php echo (isset($_GET['price']) && $_GET['price'] == 'paid') ? 'selected' : ''; ?>>Paid</option>
<option value="discount" <?php echo (isset($_GET['price']) && $_GET['price'] == 'discount') ? 'selected' : ''; ?>>With Discount</option>
</select>
</div>
<!-- Popular Filter -->
<div class="mb-3">
<label class="form-label">Course Type</label>
<select class="form-select" name="popular" onchange="this.form.submit()">
<option value="">All Courses</option>
<option value="popular" <?php echo (isset($_GET['popular']) && $_GET['popular'] == 'popular') ? 'selected' : ''; ?>>Popular Only</option>
</select>
</div>
<button type="submit" class="btn btn-primary w-100">Apply Filters</button>
<a href="courses.php" class="btn btn-outline-secondary w-100 mt-2">Reset Filters</a>
</form>
</div>
</div>
</div>
<div class="col-md-9">
<!-- Search Bar -->
<div class="card mb-4">
<div class="card-body">
<form method="GET" action="" class="row g-3">
<div class="col-md-8">
<input type="text" class="form-control" name="search" placeholder="Search courses..."
value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>">
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-primary w-100">Search</button>
</div>
</form>
</div>
</div>
<div class="row">
<?php
// Build dynamic SQL query based on filters
$sql = "SELECT c.*, cat.name as category_name, i.name as instructor_name
FROM courses c
LEFT JOIN categories cat ON c.category_id = cat.id
LEFT JOIN instructors i ON c.instructor_id = i.id
WHERE 1=1";
$params = array();
$types = "";
// Search filter
if (isset($_GET['search']) && !empty($_GET['search'])) {
$sql .= " AND (c.title LIKE ? OR c.description LIKE ?)";
$search_term = "%" . $_GET['search'] . "%";
$params[] = $search_term;
$params[] = $search_term;
$types .= "ss";
}
// Category filter
if (isset($_GET['category']) && !empty($_GET['category'])) {
$sql .= " AND c.category_id = ?";
$params[] = $_GET['category'];
$types .= "i";
}
// Price filter
if (isset($_GET['price']) && !empty($_GET['price'])) {
switch ($_GET['price']) {
case 'free':
$sql .= " AND c.current_price = 0";
break;
case 'paid':
$sql .= " AND c.current_price > 0";
break;
case 'discount':
$sql .= " AND c.old_price > c.current_price AND c.old_price > 0";
break;
}
}
// Popular filter
if (isset($_GET['popular']) && $_GET['popular'] == 'popular') {
$sql .= " AND c.is_popular = 1";
}
$sql .= " ORDER BY c.created_at DESC";
// Prepare and execute query
$stmt = $conn->prepare($sql);
if (!empty($params)) {
$stmt->bind_param($types, ...$params);
}
$stmt->execute();
$courses_result = $stmt->get_result();
if ($courses_result->num_rows > 0) {
while($course = $courses_result->fetch_assoc()) {
$discount = 0;
if($course['old_price'] > 0 && $course['current_price'] > 0) {
$discount = round((($course['old_price'] - $course['current_price']) / $course['old_price']) * 100);
}
// Enhanced image path handling
$image_path = $course['image'];
$display_image = 'assets/images/course-placeholder.jpg'; // Default fallback
if (!empty($image_path)) {
// Remove any leading/trailing spaces
$image_path = trim($image_path);
// Case 1: Full URL (http:// or https://)
if (preg_match('/^https?:\/\//', $image_path)) {
$display_image = $image_path;
}
// Case 2: Absolute server path (/var/www/...)
elseif (strpos($image_path, '/') === 0) {
// Convert absolute path to relative if possible
$doc_root = $_SERVER['DOCUMENT_ROOT'];
if (strpos($image_path, $doc_root) === 0) {
$display_image = str_replace($doc_root, '', $image_path);
} else {
$display_image = $image_path;
}
}
// Case 3: Already relative path with assets/
elseif (strpos($image_path, 'assets/') === 0) {
$display_image = $image_path;
}
// Case 4: Just a filename - assume it's in courses directory
else {
$display_image = 'assets/images/courses/' . $image_path;
}
// Final check - does the file exist?
if (strpos($display_image, 'http') !== 0) {
if (!file_exists($display_image)) {
$display_image = 'assets/images/course-placeholder.jpg';
}
}
}
?>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card course-card h-100">
<?php if($discount > 0): ?>
<span class="discount-badge"><?php echo $discount; ?>% OFF</span>
<?php endif; ?>
<?php if($course['is_popular']): ?>
<span class="popular-badge">Popular</span>
<?php endif; ?>
<img src="<?php echo $display_image; ?>"
class="card-img-top"
alt="<?php echo htmlspecialchars($course['title']); ?>"
onerror="this.onerror=null; this.src='assets/images/test.png';"
style="height: 200px; object-fit: cover;">
<div class="card-body">
<h5 class="card-title"><?php echo htmlspecialchars($course['title']); ?></h5>
<p class="card-text text-muted"><?php echo substr(htmlspecialchars($course['description']), 0, 100); ?>...</p>
<div class="course-meta mb-2">
<small class="text-muted">
<i class="bi bi-folder me-1"></i><?php echo htmlspecialchars($course['category_name']); ?>
</small>
<br>
<small class="text-muted">
<i class="bi bi-person me-1"></i>By <?php echo htmlspecialchars($course['instructor_name']); ?>
</small>
</div>
<div class="price-section">
<?php if($course['old_price'] > 0 && $course['current_price'] > 0): ?>
<span class="old-price text-muted">$<?php echo number_format($course['old_price'], 2); ?></span>
<?php endif; ?>
<span class="current-price fw-bold text-primary">
<?php echo ($course['current_price'] == 0) ? 'Free' : '$' . number_format($course['current_price'], 2); ?>
</span>
</div>
</div>
<div class="card-footer bg-transparent">
<div class="d-grid gap-2">
<a href="course-details.php?id=<?php echo $course['id']; ?>" class="btn btn-outline-primary btn-sm">View Details</a>
<?php if(isset($_SESSION['user_id'])): ?>
<button class="btn btn-primary btn-sm add-to-cart" data-course-id="<?php echo $course['id']; ?>">
<i class="bi bi-cart-plus me-1"></i>Add to Cart
</button>
<?php else: ?>
<a href="login.php" class="btn btn-primary btn-sm">
<i class="bi bi-lock me-1"></i>Login to Enroll
</a>
<?php endif; ?>
</div>
</div>
</div>
</div>
<?php
}
} else {
echo '<div class="col-12 text-center py-5">
<i class="bi bi-search fs-1 text-muted mb-3"></i>
<h4 class="text-muted">No Courses Found</h4>
<p class="text-muted">Try adjusting your search or filters.</p>
<a href="courses.php" class="btn btn-primary">Clear Filters</a>
</div>';
}
?>
</div>
<!-- Results Count -->
<div class="mt-4 text-muted">
<small>Showing <?php echo $courses_result->num_rows; ?> course(s)</small>
</div>
</div>
</div>
</div>
<style>
.course-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: none;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.course-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}
.discount-badge {
position: absolute;
top: 10px;
left: 10px;
background: #dc3545;
color: white;
padding: 5px 10px;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
z-index: 1;
}
.popular-badge {
position: absolute;
top: 10px;
right: 10px;
background: #ffc107;
color: #000;
padding: 5px 10px;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
z-index: 1;
}
.price-section {
margin: 10px 0;
}
.old-price {
text-decoration: line-through;
font-size: 0.9rem;
margin-right: 8px;
}
.current-price {
font-size: 1.1rem;
}
.card-img-top {
border-bottom: 1px solid #eee;
}
.course-meta {
font-size: 0.85rem;
}
.card-footer {
border-top: 1px solid #eee;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Add to cart functionality
const addToCartButtons = document.querySelectorAll('.add-to-cart');
addToCartButtons.forEach(button => {
button.addEventListener('click', function() {
const courseId = this.getAttribute('data-course-id');
addToCart(courseId);
});
});
function addToCart(courseId) {
fetch('add_to_cart.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `course_id=${courseId}&action=add`
})
.then(response => response.json())
.then(data => {
if(data.success) {
showAlert('Course added to cart successfully!', 'success');
updateCartCount();
} else {
showAlert(data.message || 'Error adding course to cart', 'error');
}
})
.catch(error => {
console.error('Error:', error);
showAlert('An error occurred. Please try again.', 'error');
});
}
function updateCartCount() {
// Update cart count badge in header
const cartBadge = document.querySelector('.cart-count');
if(cartBadge) {
let currentCount = parseInt(cartBadge.textContent) || 0;
cartBadge.textContent = currentCount + 1;
cartBadge.style.display = 'inline-block';
}
}
function showAlert(message, type) {
// Remove existing alerts
const existingAlerts = document.querySelectorAll('.alert');
existingAlerts.forEach(alert => alert.remove());
const alertDiv = document.createElement('div');
alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
alertDiv.style.cssText = 'top: 80px; right: 20px; z-index: 9999; min-width: 300px;';
alertDiv.innerHTML = `
${message}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
`;
document.body.appendChild(alertDiv);
// Auto remove after 5 seconds
setTimeout(() => {
if(alertDiv.parentNode) {
alertDiv.parentNode.removeChild(alertDiv);
}
}, 5000);
}
});
</script>
<?php include 'includes/footer.php'; ?>