مفهوم نمطية الاكواد (Modularity) ولماذا نتحول من HTML الى PHP؟
تعد صفحات HTML الثابتة خيارا ممتازا للمواقع الصغيرة جدا، ولكن بمجرد ان يتجاوز الموقع بضع صفحات، تبدا المشاكل الحقيقية في الظهور. فلو كان لديك موقع مكون من 20 صفحة، واردت فقط تغيير رابط في القائمة العلوية او تعديل رقم هاتف في الفوتر، فسيتعين عليك فتح ال 20 ملفا وتعديلها يدويا واحدة تلو الاخرى؛ وهو امر شاق وغير احترافي وعرضة للاخطاء.
هنا تاتي اهمية لغة PHP لتمنحنا ميزة "النمطية" (Modularity)، وهي تقسيم القالب الى اجزاء مستقلة وموحدة يتم استدعاؤها ديناميكيا. وللقيام بذلك، توفر لنا PHP دالتين اساسيتين للاستدعاء هما include و require.
الفرق الجوهري بين دوال الاستدعاء (include مقابل require):
-
دالة
include: تقوم بادراج وعرض الملف المطلوب داخل الصفحة الحالية. في حال حدث خطا او لم يتم العثور على الملف المستدعى (مثل اختفاء ملفheader.phpبالخطا)، فان PHP ستصدر تحذيرا (Warning) فقط، ولكنها ستستكمل تشغيل باقي صفحة الويب ولن تتوقف (قد يتسبب ذلك في انهيار شكل الصفحة، لكن الموقع لن يتوقف عن العمل تماما). -
دالة
require: تقوم بنفس عملincludeتماما، ولكنها اكثر صرامة وامانا. فلو حدث ولم يتم العثور على الملف المستدعى، فان PHP ستصدر خطا قاتلا (Fatal Error) وتوقف تشغيل الصفحة فورا. هذا يجعلها الخيار الافضل والاكثر امانا في ملفات الهيكل الاساسية. -
الصيغ الامنة (
include_onceوrequire_once): تمنع هذه الدوال تكرار استدعاء نفس الملف مرتين عن طريق الخطا بداخل نفس الصفحة، حيث يتحقق السيرفر ما اذا كان الملف قد تم جلبه مسبقا ام لا. ولهذا السبب نعتمد دائما علىrequire_onceلاستدعاء الهيدر والفوتر لضمان استقرار وسلاسة النظام.
تصميم القالب الاستاتيكي الاحترافي (الصفحة الرئيسية index.html)
قبل ان نقوم بتفكيك القالب، من الضروري ان نمتلك تصميما متكاملا وعصريا لموقعنا الاستاتيكي. في هذا الدليل، سنعتمد على احدث اصدار من اطار العمل Bootstrap 5.3 مع تفعيل دعم اللغة العربية والاتجاه من اليمين لليسار (dir="rtl") بشكل اساسي، بالاضافة الى ايقونات FontAwesome 6 المحدثة ومكتبة الالوان والتدرجات الناعمة لضمان تجربة مستخدم (UX) فائقة الاحترافية.
محتوى الصفحة الرئيسية (index.html)
تتكون الصفحة الرئيسية من ثلاثة اجزاء رئيسية:
-
شريط التنقل العلوي (
Navbar): شريط علوي مثبت (sticky-top) يحتوي على الشعار، روابط التنقل الثلاثة، وزر بارز للعمل (CTA). -
قسم الترحيب او البطل (
Hero Section): مصمم بخلفية متدرجة جذابة (bg-gradient) ليبرز عنوان الموقع الرئيسي والوصف التسويقي مع ازرار تفاعلية واضحة. -
شبكة مميزات الخدمات (
Features Grid): كروت بيضاء عائمة بظلال خفيفة تعرض مزايا القالب (التجاوب الكامل، السرعة، وسهولة التفكيك) باستخدام ايقونات دائرية ملونة.
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>الرئيسية - حلول الويب الاحترافية</title>
<!-- Bootstrap 5 RTL CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css">
<!-- FontAwesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="d-flex flex-column min-vh-100 bg-light">
<!-- شريط التنقل العلوي (Navbar) -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient shadow-sm sticky-top">
<div class="container">
<a class="navbar-brand fw-bold fs-4 d-flex align-items-center gap-2" href="index.html">
<i class="fa-solid fa-cube text-warning"></i>
<span>موقعنا الاحترافي</span>
</a>
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 fw-semibold">
<li class="nav-item">
<a class="nav-link active px-3" href="index.html"><i class="fa-solid fa-house me-1"></i> الرئيسية</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="about.html"><i class="fa-solid fa-users me-1"></i> من نحن</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="contact.html"><i class="fa-solid fa-envelope me-1"></i> اتصل بنا</a>
</li>
</ul>
<a href="contact.html" class="btn btn-warning fw-bold text-dark rounded-pill px-4 ms-lg-3 shadow-sm">ابدأ مشروعك</a>
</div>
</div>
</nav>
<!-- قسم الهيرو (Hero Section) -->
<header class="bg-primary bg-gradient text-white py-5 shadow-sm">
<div class="container py-5 text-center text-lg-start">
<div class="row align-items-center g-5">
<div class="col-lg-7">
<span class="badge bg-warning text-dark px-3 py-2 rounded-pill mb-3 fw-bold fs-6">
<i class="fa-solid fa-star me-1"></i> الجيل الجديد من قوالب الويب
</span>
<h1 class="display-4 fw-black mb-3 leading-tight">بوابتك لبناء مواقت رقمية فائقة السرعة والأمان</h1>
<p class="lead mb-4 text-white-50 fs-5">تصاميم متجاوبة بالكامل متوافق مع كافة الشاشات وأحدث معايير محركات البحث (SEO)، مجهزة للربط البرمجي فوراً.</p>
<div class="d-flex flex-wrap gap-3 justify-content-center justify-content-lg-start">
<a href="contact.html" class="btn btn-light btn-lg fw-bold px-4 rounded-3 text-primary shadow">تواصل معنا الان</a>
<a href="about.html" class="btn btn-outline-light btn-lg fw-bold px-4 rounded-3">تعرف علينا أكثر</a>
</div>
</div>
<div class="col-lg-5 text-center">
<div class="bg-white bg-opacity-10 p-4 rounded-4 backdrop-blur shadow-lg border border-white border-opacity-25">
<i class="fa-solid fa-rocket display-1 text-warning mb-3"></i>
<h4 class="fw-bold">سرعة وأداء استثنائي</h4>
<p class="text-white-50 mb-0">أكواد HTML5 متوافقة بنسبة 100% مع كافة متصفحات الويب الحديثة.</p>
</div>
</div>
</div>
</div>
</header>
<!-- محتوى مميزات الخدمات -->
<main class="container my-5 flex-grow-1">
<div class="text-center mb-5">
<h2 class="fw-bold text-primary">لماذا تختار قالبنا؟</h2>
<p class="text-muted fs-5">نوفر لك كافة المقومات الأساسية لإطلاق موقعك بأعلى جودة</p>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="card h-100 border-0 shadow-sm rounded-4 p-4 text-center hover-top transition">
<div class="bg-primary bg-opacity-10 text-primary rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 70px; height: 70px;">
<i class="fa-solid fa-mobile-screen fs-2"></i>
</div>
<h5 class="fw-bold mb-2">تجاوب كامل (Responsive)</h5>
<p class="text-secondary small">يتكيف القالب تلقائياً مع أجهزة الجوال، الآيباد والشاشات المكتوبة بدقة متناهية.</p>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 border-0 shadow-sm rounded-4 p-4 text-center hover-top transition">
<div class="bg-success bg-opacity-10 text-success rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 70px; height: 70px;">
<i class="fa-solid fa-bolt fs-2"></i>
</div>
<h5 class="fw-bold mb-2">سرعة تحميل قياسية</h5>
<p class="text-secondary small">أكواد نظيفة وخفيفة جداً تضمن أعلى تقييم بصفحات Google PageSpeed.</p>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 border-0 shadow-sm rounded-4 p-4 text-center hover-top transition">
<div class="bg-warning bg-opacity-10 text-warning rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 70px; height: 70px;">
<i class="fa-solid fa-code fs-2"></i>
</div>
<h5 class="fw-bold mb-2">سهولة التفكيك والربط</h5>
<p class="text-secondary small">هيكل منظم يسهل تحويله إلى PHP أو ربطه بقواعد بيانات MySQL بكل سهولة.</p>
</div>
</div>
</div>
</main>
<!-- الفوتر (Footer) -->
<footer class="bg-dark text-white pt-5 pb-3 mt-auto">
<div class="container">
<div class="row g-4 mb-4">
<div class="col-lg-4">
<h5 class="fw-bold text-warning mb-3"><i class="fa-solid fa-cube me-1"></i> موقعنا الاحترافي</h5>
<p class="text-secondary small">منصة متخصصة في تقديم القوالب الجاهزة والحلول البرمجية عالية الجودة للمطورين والشركات.</p>
</div>
<div class="col-lg-4">
<h5 class="fw-bold mb-3">روابط سريعة</h5>
<ul class="list-unstyled text-secondary small">
<li class="mb-2"><a href="index.html" class="text-decoration-none text-secondary">الرئيسية</a></li>
<li class="mb-2"><a href="about.html" class="text-decoration-none text-secondary">من نحن</a></li>
<li class="mb-2"><a href="contact.html" class="text-decoration-none text-secondary">اتصل بنا</a></li>
</ul>
</div>
<div class="col-lg-4">
<h5 class="fw-bold mb-3">تواصل معنا</h5>
<p class="text-secondary small mb-1"><i class="fa-solid fa-envelope me-2 text-warning"></i> info@example.com</p>
<p class="text-secondary small"><i class="fa-solid fa-phone me-2 text-warning"></i> +966 50 000 0000</p>
</div>
</div>
<hr class="border-secondary">
<div class="text-center text-secondary small">
جميع الحقوق محفوظة © 2026 - موقعنا الاحترافي
</div>
</div>
</footer>
<!-- Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
صفحة من نحن (about.html)
تعد صفحة "من نحن" الركيزة الاساسية لبناء الثقة مع زوار موقعك؛ فهي تتيح للشركة او منصة العمل الحر عرض هويتها، رسالتها، وقصتها باسلوب بصري جذاب. في قالبنا الاحترافي، قمنا بتصميم هذه الصفحة لتتكون من قسم ترويسة فرعي موحد يتناسب مع هوية الموقع، يليه قسم رئيسي مقسم الى جزاين: الاول يبرز الرؤية والرسالة في قالب ابيض عائم، والاخر يعرض الارقام والاحصائيات البارزة (مثل عدد العملاء والمشاريع المكتملة) مدعوما بحدود ملونة علوية تزيد من جاذبية التصميم.
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>من نحن - موقعنا الاحترافي</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="d-flex flex-column min-vh-100 bg-light">
<!-- شريط التنقل العلوي -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient shadow-sm sticky-top">
<div class="container">
<a class="navbar-brand fw-bold fs-4 d-flex align-items-center gap-2" href="index.html">
<i class="fa-solid fa-cube text-warning"></i>
<span>موقعنا الاحترافي</span>
</a>
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 fw-semibold">
<li class="nav-item"><a class="nav-link px-3" href="index.html"><i class="fa-solid fa-house me-1"></i> الرئيسية</a></li>
<li class="nav-item"><a class="nav-link active px-3" href="about.html"><i class="fa-solid fa-users me-1"></i> من نحن</a></li>
<li class="nav-item"><a class="nav-link px-3" href="contact.html"><i class="fa-solid fa-envelope me-1"></i> اتصل بنا</a></li>
</ul>
<a href="contact.html" class="btn btn-warning fw-bold text-dark rounded-pill px-4 ms-lg-3 shadow-sm">ابدأ مشروعك</a>
</div>
</div>
</nav>
<!-- الترويسة الفرعية -->
<div class="bg-primary bg-gradient text-white py-5 mb-5 shadow-sm text-center">
<div class="container py-3">
<h1 class="fw-bold">من نحن</h1>
<p class="lead text-white-50 mb-0">تعرف على رؤيتنا ونشأتنا في تقديم أفضل الحلول البرمجية</p>
</div>
</div>
<!-- المحتوى الرئيسي لصفحة من نحن -->
<main class="container mb-5 flex-grow-1">
<div class="row align-items-center g-5 mb-5">
<div class="col-lg-6">
<div class="bg-white p-5 rounded-4 shadow-sm">
<span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 rounded-pill mb-3 fw-bold">رؤيتنا ورسالتنا</span>
<h2 class="fw-bold text-dark mb-3">نصل بفكرتك إلى آفاق رقمية جديدة</h2>
<p class="text-secondary leading-relaxed">نحن فريق متكامل من المصممين والمطورين الشغوفين، نهدف لتطوير وتزويد مجتمع المطورين العربي بقوالب HTML وسكربتات PHP مبنية بأفضل ممارسات الكود وأعلى مقاييس الأمان والسرعة.</p>
</div>
</div>
<div class="col-lg-6">
<div class="row g-3 text-center">
<div class="col-6">
<div class="bg-white p-4 rounded-4 shadow-sm border-top border-4 border-primary">
<h2 class="display-5 fw-bold text-primary mb-1">+500</h2>
<p class="text-muted mb-0 fw-semibold">عميل واثق</p>
</div>
</div>
<div class="col-6">
<div class="bg-white p-4 rounded-4 shadow-sm border-top border-4 border-success">
<h2 class="display-5 fw-bold text-success mb-1">+120</h2>
<p class="text-muted mb-0 fw-semibold">مشروع مكتمل</p>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- الفوتر -->
<footer class="bg-dark text-white pt-5 pb-3 mt-auto">
<div class="container">
<div class="text-center text-secondary small">جميع الحقوق محفوظة © 2026 - موقعنا الاحترافي</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
صفحة اتصل بنا (contact.html)
تعتبر صفحة "اتصل بنا" جسر التواصل المباشر بين زوار موقعك وعملك؛ لذا قمنا بتصميمها لتوفر تجربة مستخدم مريحة واحترافية تعتمد على تقسيم مرن (Grid System). تضم الصفحة في القسم الايمن كروت معلومات الاتصال السريعة (مثل الموقع الجغرافي ورقم الهاتف) والمزودة بايقونات ملونة، وفي القسم الايسر نموذج ارسال رسائل مصمم بعناية ومزود بمدخلات واسعة ونظيفة مدعومة بالتحقق المباشر (required) لضمان استقبال استفسارات العملاء بكل سلاسة وامان.
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>اتصل بنا - موقعنا الاحترافي</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="d-flex flex-column min-vh-100 bg-light">
<!-- شريط التنقل العلوي -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient shadow-sm sticky-top">
<div class="container">
<a class="navbar-brand fw-bold fs-4 d-flex align-items-center gap-2" href="index.html">
<i class="fa-solid fa-cube text-warning"></i>
<span>موقعنا الاحترافي</span>
</a>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 fw-semibold">
<li class="nav-item"><a class="nav-link px-3" href="index.html"><i class="fa-solid fa-house me-1"></i> الرئيسية</a></li>
<li class="nav-item"><a class="nav-link px-3" href="about.html"><i class="fa-solid fa-users me-1"></i> من نحن</a></li>
<li class="nav-item"><a class="nav-link active px-3" href="contact.html"><i class="fa-solid fa-envelope me-1"></i> اتصل بنا</a></li>
</ul>
</div>
</div>
</nav>
<div class="bg-primary bg-gradient text-white py-5 mb-5 shadow-sm text-center">
<div class="container py-3">
<h1 class="fw-bold">اتصل بنا</h1>
<p class="lead text-white-50 mb-0">نحن هنا للإجابة على جميع استفساراتك وتقديم الدعم الفني</p>
</div>
</div>
<!-- نموذج الاتصال والمعلومات -->
<main class="container mb-5 flex-grow-1">
<div class="row g-4">
<div class="col-lg-4">
<div class="bg-white p-4 rounded-4 shadow-sm h-100">
<h4 class="fw-bold text-primary mb-4">معلومات التواصل</h4>
<div class="d-flex align-items-center mb-4">
<div class="bg-primary bg-opacity-10 text-primary rounded-3 p-3 me-3">
<i class="fa-solid fa-location-dot fs-4"></i>
</div>
<div>
<h6 class="fw-bold mb-1">الموقع</h6>
<p class="text-muted small mb-0">الرياض، المملكة العربية السعودية</p>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="bg-success bg-opacity-10 text-success rounded-3 p-3 me-3">
<i class="fa-solid fa-phone fs-4"></i>
</div>
<div>
<h6 class="fw-bold mb-1">الهاتف</h6>
<p class="text-muted small mb-0">+966 50 000 0000</p>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="bg-white p-5 rounded-4 shadow-sm">
<h4 class="fw-bold text-primary mb-4">أرسل لنا رسالة</h4>
<form action="send_message.php" method="POST">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-semibold">الاسم بالكامل</label>
<input type="text" name="name" class="form-control rounded-3 py-2" placeholder="أدخل اسمك" required>
</div>
<div class="col-md-6">
<label class="form-label fw-semibold">البريد الإلكتروني</label>
<input type="email" name="email" class="form-control rounded-3 py-2" placeholder="name@example.com" required>
</div>
<div class="col-12">
<label class="form-label fw-semibold">الرسالة</label>
<textarea name="message" class="form-control rounded-3" rows="5" placeholder="اكتب رسالتك هنا..." required></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary btn-lg fw-bold rounded-3 px-5 w-100">إرسال الرسالة</button>
</div>
</div>
</form>
</div>
</div>
</div>
</main>
<footer class="bg-dark text-white pt-5 pb-3 mt-auto">
<div class="container text-center text-secondary small">جميع الحقوق محفوظة © 2026 - موقعنا الاحترافي</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
كيفية تفكيك القالب وتقسيمه برمجيا (Modularity)
عند النظر في الاكواد الثابتة للصفحات الثلاث السابقة، ستلاحظ ان وسوم راس الصفحة (<head>)، شريط التنقل العلوي (<nav>)، والفوتر (<footer>) تتكرر حرفيا في كل صفحة.
اذا احتجنا مستقبلا لتعديل رابط في القائمة العلوية، او اضافة صفحة جديدة، او تغيير رقم الهاتف في الفوتر، فسضطر لتعديل كافة الملفات يدويا؛ وهو ما ينجم عنه اخطاء برمجية ووقت ضائع. الحل الاحترافي هو اعتماد هيكل النمطية (Modularity) عبر فصل الاجزاء المشتركة في مجلد فرعي باسم inc واستدعائها اليا.
📁 شجرة هيكل مجلد القالب (قبل وبعد التفكيك)
يعرض هذا المخطط الفروق التنظيمية في هيكل المشروع بين مرحلة الصفحات الثابتة ومرحلة التفكيك الديناميكي:
قبل التفكيك (Static HTML Structure): تكون كل صفحة مستقلة ومنسخة بالكامل وتتضمن الهيدر والفوتر مكررين بداخل كل ملف:
my-website/
│
├── index.html # الصفحة الرئيسية الثابتة (تتضمن Head, Navbar, Hero, Footer)
├── about.html # صفحة من نحن الثابتة (تتضمن Head, Navbar, Content, Footer)
└── contact.html # صفحة اتصل بنا الثابتة (تتضمن Head, Navbar, Form, Footer)
بعد التفكيك والتحويل (Dynamic PHP Modular Structure)
تُمحي التكرارات عبر فصل العناصر المشتركة بداخل مجلد فرعي متسق باسم inc واستدعائها في الصفحات بملف واحد:
my-website/
│
├── inc/ # 📂 مجلد الأجزاء الموحدة والمشتركة (Includes)
│ ├── header.php # رأس الصفحة الموحد (وسوم HTML, CSS, القائمة العلوية والتفاعل)
│ └── footer.php # ذيل الصفحة الموحد (الفوتر, حقوق النشر الديناميكية, وسكربتات JS)
│
├── index.php # الصفحة الرئيسية الديناميكية (تستدعي header.php و footer.php)
├── about.php # صفحة من نحن الديناميكية (تستدعي header.php و footer.php)
└── contact.php # صفحة اتصل بنا الديناميكية (تستدعي header.php و footer.php)
📊 مقارنة سريعة بين الهيكلين
|
وجه المقارنة |
قبل التفكيك ( |
بعد التفكيك ( |
|---|---|---|
|
تكرار الأكواد |
عالي جداً (الهيدر والفوتر مكرران في كل ملف) |
معدوم (الهيدر والفوتر بملفين مستقلين فقط) |
|
تعديل القائمة العلوية |
يتطلب التعديل يدويًا بداخل 3 ملفات |
يتم تعديله من ملف |
|
تمييز الصفحة النشطة |
إضافة كلاس |
يتم حسابه آلياً عبر متغير |
|
تحديث سنة الحقوق |
كتابتها يدوياً وتعديلها سنويًا |
يتم توليدها آلياً بدالة |
ملف الهيدر الموحد والتفاعلي (inc/header.php)
يعتبر ملف الهيدر (inc/header.php) حجر الاساس في قالبنا الديناميكي؛ فهو لا يقتصر فقط على احتواء وسوم ال <head> وملفات ال CSS، بل يبرمج خصيصا ليقوم بمهمتين ذكيتين:
-
التحكم في عنوان الصفحة الديناميكي (
$page_title): يفحص الملف ما اذا كان هناك متغير معرف باسم$page_titleفي الصفحة الحالية، وفي حال عدم وجوده يضع عنوانا افتراضيا، مما يرفع من جودة السيو (SEO). -
تمييز الصفحة النشطة اليا (
$current_page): يعتمد القالب على فحص متغير$current_page(مثلhomeاوaboutاوcontact) ليقوم باضافة كلاسactiveتلقائيا الى رابط القائمة المناسب، دون الحاجة لتكرار الكود او تعديله يدويا في كل صفحة.
<?php
// inc/header.php
if (!isset($page_title)) {
$page_title = "موقعنا الاحترافي";
}
if (!isset($current_page)) {
$current_page = "home";
}
?>
<!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 htmlspecialchars($page_title, ENT_QUOTES, 'UTF-8'); ?></title>
<!-- Bootstrap 5 RTL CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css">
<!-- FontAwesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="d-flex flex-column min-vh-100 bg-light">
<!-- شريط التنقل العلوي -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient shadow-sm sticky-top">
<div class="container">
<a class="navbar-brand fw-bold fs-4 d-flex align-items-center gap-2" href="index.php">
<i class="fa-solid fa-cube text-warning"></i>
<span>موقعنا الاحترافي</span>
</a>
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 fw-semibold">
<li class="nav-item">
<a class="nav-link <?php echo ($current_page == 'home') ? 'active' : ''; ?> px-3" href="index.php"><i class="fa-solid fa-house me-1"></i> الرئيسية</a>
</li>
<li class="nav-item">
<a class="nav-link <?php echo ($current_page == 'about') ? 'active' : ''; ?> px-3" href="about.php"><i class="fa-solid fa-users me-1"></i> من نحن</a>
</li>
<li class="nav-item">
<a class="nav-link <?php echo ($current_page == 'contact') ? 'active' : ''; ?> px-3" href="contact.php"><i class="fa-solid fa-envelope me-1"></i> اتصل بنا</a>
</li>
</ul>
<a href="contact.php" class="btn btn-warning fw-bold text-dark rounded-pill px-4 ms-lg-3 shadow-sm">ابدأ مشروعك</a>
</div>
</div>
</nav>
ملف الفوتر الموحد (inc/footer.php)
ياتي ملف الفوتر (inc/footer.php) ليكمل هيكل الاستدعاء المشترك؛ فهو يجمع بين اقسام الفوتر التسويقية (نبذة عن المنصة، روابط التنقل السريعة، ومعلومات التواصل) وبين احدث ملفات الجافاسكريبت لضمان تفاعل عناصر Bootstrap. الاهم من ذلك هو استخدام لغة PHP في سطر حقوق النشر عبر دالة date('Y')، والتي تجلب السنة الحالية من الخادم تلقائيا، مما غنى عن الحاجة لتعديل سنة الحقوق يدويا مع اطلالة كل عام جديد.
<?php
// inc/footer.php
?>
<!-- الفوتر الموحد -->
<footer class="bg-dark text-white pt-5 pb-3 mt-auto">
<div class="container">
<div class="row g-4 mb-4">
<div class="col-lg-4">
<h5 class="fw-bold text-warning mb-3"><i class="fa-solid fa-cube me-1"></i> موقعنا الاحترافي</h5>
<p class="text-secondary small">منصة متخصصة في تقديم القوالب الجاهزة والحلول البرمجية عالية الجودة للمطورين والشركات.</p>
</div>
<div class="col-lg-4">
<h5 class="fw-bold mb-3">روابط سريعة</h5>
<ul class="list-unstyled text-secondary small">
<li class="mb-2"><a href="index.php" class="text-decoration-none text-secondary">الرئيسية</a></li>
<li class="mb-2"><a href="about.php" class="text-decoration-none text-secondary">من نحن</a></li>
<li class="mb-2"><a href="contact.php" class="text-decoration-none text-secondary">اتصل بنا</a></li>
</ul>
</div>
<div class="col-lg-4">
<h5 class="fw-bold mb-3">تواصل معنا</h5>
<p class="text-secondary small mb-1"><i class="fa-solid fa-envelope me-2 text-warning"></i> info@example.com</p>
<p class="text-secondary small"><i class="fa-solid fa-phone me-2 text-warning"></i> +966 50 000 0000</p>
</div>
</div>
<hr class="border-secondary">
<div class="text-center text-secondary small">
جميع الحقوق محفوظة © <?php echo date('Y'); ?> - موقعنا الاحترافي
</div>
</div>
</footer>
<!-- Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
اعادة بناء الصفحات بلغة PHP باسلوب نظيف ومنظم
بعد ان قمنا بتفكيك الاجزاء المتكررة ووضعها في مجلد inc/، اصبحت صفحات الموقع في غاية النظافة والترتيب. لم تعد الصفحة تحمل اعباء اكواد الهيدر والفوتر المكررة، بل اصبحت تقتصر حصريا على تعريف متغيرات الصفحة (مثل العنوان ورقم الصفحة النشطة)، ثم استدعاء الهيدر، ثم كتابة المحتوى الفرعي الخاص بتلك الصفحة فقط، واخيرا استدعاء الفوتر عبر دالة require_once.
الصفحة الرئيسية الديناميكية (index.php)
شاهد كيف اصبحت الصفحة الرئيسية مختصرة، مع تركيز كامل على محتوى قسم البيرو وشبكة الخدمات، بينما تدار القوائم والعناوين تلقائيا من الملفات المشتركة:
<?php
$page_title = "الرئيسية - حلول الويب الاحترافية";
$current_page = "home";
require_once("inc/header.php");
?>
<!-- قسم الهيرو -->
<header class="bg-primary bg-gradient text-white py-5 shadow-sm">
<div class="container py-5 text-center text-lg-start">
<div class="row align-items-center g-5">
<div class="col-lg-7">
<span class="badge bg-warning text-dark px-3 py-2 rounded-pill mb-3 fw-bold fs-6">
<i class="fa-solid fa-star me-1"></i> الجيل الجديد من قوالب الويب
</span>
<h1 class="display-4 fw-black mb-3 leading-tight">بوابتك لبناء مواقت رقمية فائقة السرعة والأمان</h1>
<p class="lead mb-4 text-white-50 fs-5">تصاميم متجاوبة بالكامل متوافق مع كافة الشاشات وأحدث معايير محركات البحث (SEO).</p>
<div class="d-flex flex-wrap gap-3 justify-content-center justify-content-lg-start">
<a href="contact.php" class="btn btn-light btn-lg fw-bold px-4 rounded-3 text-primary shadow">تواصل معنا الان</a>
<a href="about.php" class="btn btn-outline-light btn-lg fw-bold px-4 rounded-3">تعرف علينا أكثر</a>
</div>
</div>
<div class="col-lg-5 text-center">
<div class="bg-white bg-opacity-10 p-4 rounded-4 backdrop-blur shadow-lg border border-white border-opacity-25">
<i class="fa-solid fa-rocket display-1 text-warning mb-3"></i>
<h4 class="fw-bold">سرعة وأداء استثنائي</h4>
<p class="text-white-50 mb-0">تم تحويل هذا القالب بنجاح ليعمل بلغة PHP ديناميكياً.</p>
</div>
</div>
</div>
</div>
</header>
<!-- شبكة الخدمات -->
<main class="container my-5 flex-grow-1">
<div class="text-center mb-5">
<h2 class="fw-bold text-primary">لماذا تختار قالبنا؟</h2>
<p class="text-muted fs-5">نوفر لك كافة المقومات الأساسية لإطلاق موقعك بأعلى جودة</p>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="card h-100 border-0 shadow-sm rounded-4 p-4 text-center">
<div class="bg-primary bg-opacity-10 text-primary rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 70px; height: 70px;">
<i class="fa-solid fa-mobile-screen fs-2"></i>
</div>
<h5 class="fw-bold mb-2">تجاوب كامل</h5>
<p class="text-secondary small">يتكيف القالب تلقائياً مع كافة الأجهزة الذكية.</p>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 border-0 shadow-sm rounded-4 p-4 text-center">
<div class="bg-success bg-opacity-10 text-success rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 70px; height: 70px;">
<i class="fa-solid fa-bolt fs-2"></i>
</div>
<h5 class="fw-bold mb-2">سرعة تحميل عالية</h5>
<p class="text-secondary small">استدعاء الأجزاء عبر PHP يضمن تحميلاً خاطفاً للبيانات.</p>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 border-0 shadow-sm rounded-4 p-4 text-center">
<div class="bg-warning bg-opacity-10 text-warning rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 70px; height: 70px;">
<i class="fa-solid fa-code fs-2"></i>
</div>
<h5 class="fw-bold mb-2">كود نظيف ومنظم</h5>
<p class="text-secondary small">سهولة التعديل بفضل فصل الهيدر والفوتر في ملفات مستقلة.</p>
</div>
</div>
</div>
</main>
<?php
require_once("inc/footer.php");
?>
صفحة من نحن الديناميكية (about.php)
تجسد صفحة "من نحن" بصيغتها الديناميكية مدى الفائدة العملية لتقسيم القالب؛ فبدلا من تكرار هيكل القائمة العلوية والفوتر في كل مرة، تكتفي الصفحة بتعريف متغير العنوان $page_title لتخصيص تبويب المتصفح، ومتغير $current_page لتفعيل الزر الخاص بها في القائمة العلوية تلقائيا، ومن ثم جلب المحتوى الخاص برؤية الشركة واحصائيات الارقام فقط بين الهيدر والفوتر.
<?php
$page_title = "من نحن - موقعنا الاحترافي";
$current_page = "about";
require_once("inc/header.php");
?>
<div class="bg-primary bg-gradient text-white py-5 mb-5 shadow-sm text-center">
<div class="container py-3">
<h1 class="fw-bold">من نحن</h1>
<p class="lead text-white-50 mb-0">تعرف على رؤيتنا ونشأتنا في تقديم أفضل الحلول البرمجية</p>
</div>
</div>
<main class="container mb-5 flex-grow-1">
<div class="row align-items-center g-5 mb-5">
<div class="col-lg-6">
<div class="bg-white p-5 rounded-4 shadow-sm">
<span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 rounded-pill mb-3 fw-bold">رؤيتنا ورسالتنا</span>
<h2 class="fw-bold text-dark mb-3">نصل بفكرتك إلى آفاق رقمية جديدة</h2>
<p class="text-secondary leading-relaxed">نحن فريق متكامل نهدف لتطوير وتزويد المطورين بقوالب وسكربتات عالية الجودة بأعلى معايير البرمجة.</p>
</div>
</div>
<div class="col-lg-6">
<div class="row g-3 text-center">
<div class="col-6">
<div class="bg-white p-4 rounded-4 shadow-sm border-top border-4 border-primary">
<h2 class="display-5 fw-bold text-primary mb-1">+500</h2>
<p class="text-muted mb-0 fw-semibold">عميل واثق</p>
</div>
</div>
<div class="col-6">
<div class="bg-white p-4 rounded-4 shadow-sm border-top border-4 border-success">
<h2 class="display-5 fw-bold text-success mb-1">+120</h2>
<p class="text-muted mb-0 fw-semibold">مشروع مكتمل</p>
</div>
</div>
</div>
</div>
</div>
</main>
<?php
require_once("inc/footer.php");
?>
صفحة اتصل بنا الديناميكية (contact.php)
تعد صفحة "اتصل بنا" المحطة الاخيرة في قالبنا الثلاثي المتكامل. في نسختها الديناميكية، تختصر الصفحة كافة تكرارات الهيكل العلوي والسفلي، وتكتفي بتحديد عنوانها الفريد $page_title واسناد القيمة contact الى متغير $current_page لضمان اضاءة زر "اتصل بنا" في القائمة العلوية اليا، بينما تتكفل دالتا الاستدعاء بعرض كروت معلومات التواصل ونموذج ارسال الرسائل بسلاسة وامان.
<?php
$page_title = "اتصل بنا - موقعنا الاحترافي";
$current_page = "contact";
require_once("inc/header.php");
?>
<div class="bg-primary bg-gradient text-white py-5 mb-5 shadow-sm text-center">
<div class="container py-3">
<h1 class="fw-bold">اتصل بنا</h1>
<p class="lead text-white-50 mb-0">نحن هنا للإجابة على جميع استفساراتك وتقديم الدعم الفني</p>
</div>
</div>
<main class="container mb-5 flex-grow-1">
<div class="row g-4">
<div class="col-lg-4">
<div class="bg-white p-4 rounded-4 shadow-sm h-100">
<h4 class="fw-bold text-primary mb-4">معلومات التواصل</h4>
<div class="d-flex align-items-center mb-4">
<div class="bg-primary bg-opacity-10 text-primary rounded-3 p-3 me-3">
<i class="fa-solid fa-location-dot fs-4"></i>
</div>
<div>
<h6 class="fw-bold mb-1">الموقع</h6>
<p class="text-muted small mb-0">الرياض، المملكة العربية السعودية</p>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="bg-success bg-opacity-10 text-success rounded-3 p-3 me-3">
<i class="fa-solid fa-phone fs-4"></i>
</div>
<div>
<h6 class="fw-bold mb-1">الهاتف</h6>
<p class="text-muted small mb-0">+966 50 000 0000</p>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="bg-white p-5 rounded-4 shadow-sm">
<h4 class="fw-bold text-primary mb-4">أرسل لنا رسالة</h4>
<form action="send_message.php" method="POST">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-semibold">الاسم بالكامل</label>
<input type="text" name="name" class="form-control rounded-3 py-2" placeholder="أدخل اسمك" required>
</div>
<div class="col-md-6">
<label class="form-label fw-semibold">البريد الإلكتروني</label>
<input type="email" name="email" class="form-control rounded-3 py-2" placeholder="name@example.com" required>
</div>
<div class="col-12">
<label class="form-label fw-semibold">الرسالة</label>
<textarea name="message" class="form-control rounded-3" rows="5" placeholder="اكتب رسالتك هنا..." required></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary btn-lg fw-bold rounded-3 px-5 w-100">إرسال الرسالة</button>
</div>
</div>
</form>
</div>
</div>
</div>
</main>
<?php
require_once("inc/footer.php");
?>