1#@!#!123s

: / home / skyconb / newsyacine /
Filename : articles_list.php
back
<?php
// ===============================================
// articles_list.php (صفحة عرض قائمة المقالات)
// ===============================================

include 'db_connect.php'; 

// 🎯 يجب تعديل المسار الأساسي هنا
// نفس المسار الذي استخدمته في article.php
$path_prefix = "/"; // ⬅️ قم بتعديل هذا المسار ليناسب مشروعك (مثلاً: /my_site/)
$base_url = "http://" . $_SERVER['HTTP_HOST'] . $path_prefix; 

// جلب جميع المقالات من قاعدة البيانات
$sql = "SELECT a.title, a.slug, a.content, a.thumbnail_url, a.created_at, u.username 
        FROM articles a 
        LEFT JOIN users u ON a.author_id = u.id 
        ORDER BY a.created_at DESC";

$result = $conn->query($sql);
$articles = [];

if ($result && $result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $articles[] = $row;
    }
}

$conn->close();

$page_title = "الاخبار";
?>

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $page_title; ?></title>
<style>
        body { 
            font-family: Tahoma, sans-serif; 
            line-height: 1.6; 
            color: #333; 
            background-color: #f8f8f8; 
            margin: 0; 
            padding-top: 60px; /* مسافة للـ nav bar */ 
        }
        
        /* شريط التنقل */
        .main-nav { 
            position: fixed; 
            top: 0; 
            right: 0; 
            left: 0;
            background-color: #2c3e50; 
            padding: 10px 0; 
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            z-index: 1000;
        }
        .main-nav ul { 
            max-width: 900px; 
            margin: 0 auto; 
            list-style: none; 
            padding: 0 20px; 
            display: flex; 
            justify-content: flex-start; 
        }
        .main-nav ul li a { 
            color: white; 
            text-decoration: none; 
            padding: 10px 15px; 
            transition: background-color 0.3s;
            margin-left: 10px;
            font-weight: bold;
            border-radius: 4px;
        }
        .main-nav ul li a:hover { 
            background-color: #34495e; 
        }

        .container { 
            max-width: 900px; 
            margin: 0 auto; 
            padding: 30px 20px; 
        }
        h1 { 
            color: #2c3e50; 
            border-bottom: 2px solid #ccc; 
            padding-bottom: 10px; 
            margin-bottom: 30px; 
            text-align: center;
        }
        
        /* تنسيق قائمة المقالات */
        .article-card {
            display: flex;
            flex-direction: row;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 25px;
            overflow: hidden;
            text-align: right;
            transition: box-shadow 0.3s;
        }
        .article-card:hover {
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }
        .article-image {
            width: 200px;
            height: 150px;
            flex-shrink: 0;
            overflow: hidden;
        }
        .article-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }
        .article-card:hover .article-image img {
            transform: scale(1.05);
        }
        .article-content-box {
            padding: 20px;
            flex-grow: 1;
        }
        .article-content-box h2 {
            margin-top: 0;
            color: #34495e;
            font-size: 1.5em;
        }
        .article-content-box p {
            color: #555;
            margin-bottom: 15px;
        }
        .read-more {
            display: inline-block;
            background-color: #1abc9c;
            color: white;
            padding: 8px 15px;
            text-decoration: none;
            border-radius: 4px;
            font-size: 0.9em;
            transition: background-color 0.3s;
        }
        .read-more:hover {
            background-color: #16a085;
        }
        .article-meta {
            font-size: 0.85em;
            color: #7f8c8d;
            margin-top: 10px;
        }
        .no-articles {
            background: white;
            padding: 40px;
            border-radius: 8px;
            text-align: center;
        }
    </style>
</head>
<body>
    
    <nav class="main-nav">
        <ul>
            <li><a href="<?php echo $base_url; ?>">الرئيسية</a></li>
            <li><a href="<?php echo $base_url . 'articles_list.php'; ?>">الاخبار</a></li>
			<li><a href="<?php echo $base_url . 'video.php'; ?>">مباشر</a></li>
            
        </ul>
    </nav>
    
    <div class="container">
        <h1><?php echo $page_title; ?></h1>

        <?php if (!empty($articles)): ?>
            <?php foreach ($articles as $article): 
                // اختصار محتوى المقال للعرض
                $summary = strip_tags($article['content']);
                $summary = (strlen($summary) > 200) ? mb_substr($summary, 0, 197, 'utf-8') . '...' : $summary;
                
                // بناء مسار الصورة بالمسار المطلق
                $image_url = $article['thumbnail_url'] ? $base_url . htmlspecialchars($article['thumbnail_url']) : $base_url . 'default_thumb.jpg';
            ?>
                <div class="article-card">
                    <div class="article-image">
                        <img src="<?php echo $image_url; ?>" alt="<?php echo htmlspecialchars($article['title']); ?>">
                    </div>
                    <div class="article-content-box">
                        <h2><a href="article.php?slug=<?php echo htmlspecialchars($article['slug']); ?>"><?php echo htmlspecialchars($article['title']); ?></a></h2>
                        <p><?php echo $summary; ?></p>
                        <div class="article-meta">
                            <span>الكاتب: <?php echo htmlspecialchars($article['username'] ?? 'غير معروف'); ?></span>
                            <span>تاريخ النشر: <?php echo date("Y-m-d", strtotime($article['created_at'])); ?></span>
                        </div>
                        <a href="article.php?slug=<?php echo htmlspecialchars($article['slug']); ?>" class="read-more">قراءة المزيد</a>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
            <div class="no-articles">
                <p>عفواً، لا توجد مقالات متاحة حالياً.</p>
            </div>
        <?php endif; ?>
        
    </div>
</body>
</html>