معرض فني

المشروع عبارة عن Photography Art Gallery Website، وهي منصة إلكترونية تهدف إلى عرض الأعمال الفوتوغرافية بطريقة منظمة وعصرية، مع توفير تجربة استخدام بسيطة تساعد الزائر على استكشاف الصور والتعرّف على تفاصيل كل عمل وصاحبه. تم تصميم الموقع باستخدام HTML, CSS, Bootstrap, JavaScript وLocalStorage، مع التركيز على تقديم واجهة داكنة وأنيقة تتناسب مع طبيعة التصوير الفوتوغرافي.

كانت الحاجة الأساسية هي إنشاء معرض رقمي لا يقتصر على عرض الصور فقط، بل يتيح أيضًا للمستخدمين إنشاء حسابات وإدارة أعمالهم الفوتوغرافية بسهولة. لذلك كان من الضروري توفير نظام واضح لتسجيل الدخول وإنشاء الحسابات، بالإضافة إلى إمكانية إدارة الأعمال الخاصة بكل مستخدم دون التأثير على أعمال المستخدمين الآخرين.

كان الهدف من المشروع هو إنشاء موقع متكامل وسهل الاستخدام يتيح للمستخدم:

استكشاف الأعمال الفوتوغرافية وعرض تفاصيلها.

إنشاء حساب جديد وتسجيل الدخول إليه.

امتلاك صفحة Profile خاصة به.

إضافة أعمال فوتوغرافية جديدة.

تعديل الأعمال التي أضافها.

حذف الأعمال عند الحاجة.

الحفاظ على تصميم متجاوب وأنيق يعمل على مختلف أحجام الشاشات.

توليت مسؤولية تصميم وتطوير واجهة الموقع وتنفيذ الوظائف الأساسية باستخدام HTML, CSS, Bootstrap وJavaScript. كما عملت على تصميم صفحات Home, Login, Register, Gallery, Contact وProfile، وتنفيذ نظام المصادقة وإدارة الأعمال باستخدام LocalStorage، بالإضافة إلى تطبيق عمليات CRUD على الأعمال الفوتوغرافية.

بدأت بتحديد الهيكل الأساسي للموقع وتنظيم الصفحات والأقسام، ثم ركزت على إنشاء تصميم موحد يعتمد على Dark Theme يتناسب مع طبيعة الأعمال الفوتوغرافية.

بعد ذلك تم تنفيذ نظام Register وLogin، بحيث يتم تخزين بيانات المستخدمين في LocalStorage، وعند تسجيل الدخول يتم حفظ بيانات المستخدم الحالي باستخدام loggedInUser.

وفي صفحة Profile، يتم تحديد الأعمال الخاصة بالمستخدم الحالي من خلال مطابقة artistEmail مع البريد الإلكتروني للمستخدم المسجل الدخول. بعد ذلك تم تنفيذ عمليات Create, Read, Update, Delete، بحيث يستطيع المستخدم إضافة عمل جديد، وعرض أعماله، وتعديلها أو حذفها.

كما تم استخدام Bootstrap Modal لإضافة وتعديل الأعمال، واستخدام FileReader لتحويل الصور المرفوعة إلى Data URL حتى يمكن تخزينها في LocalStorage.

النتيجة النهائية هي موقع Photography Art Gallery متكامل يحتوي على:

صفحة رئيسية بتصميم داكن وعصري.

معرض لعرض الأعمال الفوتوغرافية.

خاصية البحث عن الأعمال.

صفحات Login وRegister.

نظام Profile لكل مستخدم.

إمكانية إضافة الصور والأعمال.

إمكانية تعديل وحذف الأعمال.

Contact Section.

Navbar ديناميكي يتغير وفقًا لحالة تسجيل الدخول.

تصميم Responsive باستخدام Bootstrap وCSS.

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

ومن الناحية التقنية، يوضح المشروع تطبيق مفاهيم مهمة مثل Event Listeners, DOM Manipulation, LocalStorage, Authentication Logic وCRUD Operations في مشروع عملي متكامل.

يمكن إثبات تنفيذ المتطلبات من خلال الوظائف الموجودة داخل المشروع، ومنها:

Register: إنشاء مستخدم جديد وتخزين بياناته.

Login: التحقق من البريد الإلكتروني وكلمة المرور وتحديد المستخدم الحالي.

Profile: عرض بيانات المستخدم وأعماله الخاصة فقط.

Create: إضافة Artwork جديدة.

Read: عرض الأعمال المخزنة.

Update: تعديل عنوان العمل ووصفه وصورته.

Delete: حذف العمل بعد تأكيد المستخدم.

Search: البحث عن الأعمال باستخدام العنوان أو اسم المصور.

Responsive Design: توافق الواجهة مع أحجام الشاشات المختلفة.

LocalStorage: حفظ بيانات المستخدمين والأعمال بحيث تظل موجودة عند إعادة تحميل الصفحة.