e-News هو موقع إلكتروني إخباري ديناميكي يهدف إلى تقديم الأخبار والمقالات للزوار ضمن واجهة نظيفة ومنظمة وتفاعلية. يتيح للمستخدمين تصفح الأخبار حسب الفئات، وقراءة المقالات، والتسجيل أو تسجيل الدخول للحصول على تجربة مخصصة. تم بناء الموقع باستخدام تقنيات ويب حديثة مع تكامل خلفي بواسطة PHP، ويوفر تحميلًا فوريًا للمحتوى وتصفحًا سلسًا.
? التقنيات المستخدمة:
الواجهة الأمامية: HTML5، CSS3، JavaScript
الواجهة الخلفية: PHP
قاعدة البيانات: MySQL (من خلال config.php وtest_db.php)
الوسائط: مكتبة صور محلية مدمجة مع المقالات
الهيكلية: بنية PHP معيارية تدعم تحميل المحتوى بشكل ديناميكي (get_articles.php)
أهم الميزات:
1. الصفحة الرئيسية (index.html)
صفحة رئيسية نظيفة تعرض المقالات الأهم بشكل ديناميكي.
منظمة حسب فئات الأخبار مثل (السياسة، الرياضة، التكنولوجيا...).
2. عرض المقال (article.html / article.php)
عرض مقال كامل مع العنوان الرئيسي، والصورة، والمحتوى.
يتم تحميل المقالات من قاعدة البيانات باستخدام PHP.
3. فئات الأخبار (category.php)
يمكن للمستخدمين تصفح الأخبار حسب الفئة المختارة.
يتم تصفية وتحميل المقالات حسب الفئة من قاعدة البيانات.
4. البحث (search.php)
يتيح للمستخدمين البحث عن المقالات بالكلمات المفتاحية.
يعرض النتائج بشكل فوري استنادًا إلى إدخال المستخدم.
5. تسجيل وتسجيل الدخول (register.php / login.php)
نظام تسجيل دخول وتسجيل مستخدمين آمن باستخدام PHP.
إدارة بيانات المستخدم تتم من خلال الاتصال بقاعدة البيانات (config.php).
6. تحميل المقالات ديناميكيًا (get_articles.php)
يسترجع المحتوى الإخباري من قاعدة البيانات.
يدعم التحديث الديناميكي للمحتوى دون إعادة تحميل الصفحة.
لوسائط والصور:
يتضمن المشروع مجموعة من الصور المرتبطة بالمقالات:
مثل: gaza_war_1.jpg, trump_gaza.jpg, qassam_operation.jpg، وغيرها.
موجودة ضمن مجلد /images لسهولة الوصول والاستخدام.
الاختبار والإعداد:
ملف test_db.php لاختبار الاتصال بقاعدة البيانات.
إعدادات الاتصال محفوظة في ملف config.php بشكل آمن.
مخطط هيكل المشروع:
/e-news
│
├── index.html ← الصفحة الرئيسية
├── article.php ← صفحة عرض المقال
├── category.php ← عرض الأخبار حسب الفئة
├── login.php / register.php ← نظام المستخدم
├── config.php ← بيانات الاتصال بقاعدة البيانات
├── script.js ← التفاعلات البرمجية
├── styles.css ← تنسيق وتصميم الموقع
├── /images ← صور الأخبار