يهدف موقع المقهى إلى تقديم تجربة رقمية مريحة تمكّن الزبائن من استكشاف قائمة المشروبات والحلويات، ومعرفة العروض اليومية، وحجز الطلبات مسبقًا بسهولة

1. نظرة عامة على المشروع

يُعد موقع المقهى تطبيق ويب تفاعلي تم تطويره باستخدام HTML، CSS، JavaScript، وPHP.

يهدف الموقع إلى عرض قائمة المشروبات الخاصة بالمقهى، والتعريف بالمكان، وتمكين الزوار من حجز الطاولات أو التواصل مباشرة مع المقهى.

تم تصميم الواجهة بأسلوب حديث وبسيط مع ألوان دافئة تعكس جو المقاهي الهادئ والمريح.

2. الأهداف

تصميم موقع أنيق وسهل الاستخدام يعرض هوية المقهى.

توفير تجربة مستخدم سلسة وجذابة.

دمج ميزات ديناميكية باستخدام JavaScript و PHP (مثل إضافة عناصر إلى القائمة أو إرسال الرسائل أو الحجز).

جعل الموقع متجاوبًا مع مختلف الأجهزة (حاسوب، هاتف، جهاز لوحي).

3. التقنيات المستخدمة

التقنيةالاستخدام

HTML5إنشاء هيكل صفحات الموقع ومحتواها

CSS3تنسيق الصفحات وتصميم الواجهة وتخطيط العناصر

JavaScriptإضافة التفاعل والوظائف الديناميكية (إضافة عناصر، التحقق من النماذج)

PHPمعالجة البيانات في الخلفية (Forms – الحجز – التواصل)

XAMPP / Localhostبيئة التطوير المحلية لتشغيل الموقع

4. هيكل الموقع

الصفحات الأساسية

الصفحة الرئيسية (home.php)

تحتوي على واجهة ترحيبية بصورة فنجان القهوة.

شعار الموقع: “قهوة طازجة في الصباح”.

زر "Buy Now" يقود المستخدم إلى صفحة القائمة.

صفحة القائمة (menu.php)

تعرض قائمة المشروبات المشهورة مثل: Cold Brew، Caffe Mocha، Flat White وغيرها.

كل مشروب يحتوي على وصف وسعر وصورة رمزية.

تصميم الصفحة يعتمد على flexbox أو grid لتوزيع العناصر.

صفحة من نحن (about.php)

توضح قصة المقهى ورؤيته في تقديم القهوة عالية الجودة.

تحتوي على نبذة عن فريق العمل وطريقة التحضير الخاصة بهم.

صفحة التواصل (contact.php)

تتضمن نموذج تواصل يحتوي على (الاسم – البريد الإلكتروني – الرسالة).

يتم التحقق من صحة البيانات عبر PHP قبل الإرسال.

تظهر رسالة تأكيد عند نجاح الإرسال.

صفحة الحجز (book.php)

تتيح للمستخدمين حجز طاولة بإدخال الاسم، التاريخ، الوقت، وعدد الأشخاص.

النظام يعرض تأكيدًا أو رسالة خطأ حسب الحالة.

5. المميزات

الواجهة الأمامية (Front-End)

تصميم متجاوب يناسب جميع الشاشات.

شريط تنقل علوي يحتوي على روابط الصفحات الأساسية.

تأثيرات عند تمرير الفأرة على الأزرار والعناصر.

استخدام ألوان دافئة (بيج – بني – أبيض) لخلق جو مريح.

الواجهة الخلفية (Back-End)

معالجة النماذج باستخدام PHP.

التحقق من البيانات قبل الإرسال.

إمكانية إضافة مشروبات جديدة بشكل ديناميكي عبر JavaScript.

إمكانية حذف العناصر أو إنهاء العملية بزر “Finish”.