أفضل جروبات التليجرام لتعلم البرمجة وقواعد البيانات والشبكات   موقع W3schools عملاق تعلم البرمجة - كامل بدون أنترنت   العالم ما وراء التقليدي "ميتافيرس" (كتاب باللغة العربية)   كتاب التسويق الإلكترونى Arts Of E-Marketing من الألف إلى الياء   أداة تفعيل وتنشيط جميع أصدارت الويندز وميكروسوفت أوفيس 2022   جميع أصدارات الوندوز والأوفيس بروابط مباشرة من موقعها الأصلي   تعرف على الفرق بين تقنيات HD و FHD و HDR و 4K   كيف تحصل على تفعيل كامل لنظام الويندوز 10 مقابل 7.43$ فقط!   لعبة ببجي (PUBG) للحاسوب متاحة الآن مجاناً   7 خصائص في برنامج Zoog VPN لفك المواقع المحظورة ستعجبك كثيراً   تعرف على Windscribe .. برنامج VPN ومانع إعلانات إحترافي في آن واحد   موبايلك أتسرق وبتتصل بيه مغلق ؟ تجربة حقيقية من مصر ..   سبعة أكاذيب تمنعك من تعلم البرمجة   لو باقة الأنترنت المنزلي مش بتكمل معاك الشهر .. أليك الحل ..   أزاى تبحث فى جوجل صح .. إليك بعض النصائح للبحث   واحده من أكبر عمليات الأختراق الـ حصلت في التاريخ   كتاب إحترف كاميرات المراقبة في 6 ساعات   الفيلم الوثائقى لقصة حياة ستيف جوبز .. مؤسس شركة أبل   الفيلم الوثائقى لقصة حياة مارك زوكربيرج .. مؤسس موقع الفيسبوك   الفيلم الوثائقى لقصة حياة بيل جيتس .. مؤسس شركة ميكروسوفت   مجموعة ضخمة من الخطوط 4000 خط من الخطوط العربية والأنجليزية   ازاي تبقي محترف فـ Cyber Security وانت بتدرس او بتشتغل ؟   أفضل المواقع للمبرمجين - مشاريع مفتوحة المصدر   صور من أول نسخة للويندوز فى التاريخ النسخة v1.0 - v2.0   لو اي حد بيبتزك او بيتحرش بيك اونلاين او بيهددك بصور .. أعمل الصح   التجسس على الشخص من خلال سماعات البلوتوث !! حقيقة   تجربة ويندوز 95 و ويندوز 98 أون لاين .. يلا نرجع أيام الزمن الجميل   عايز تعرف بياناتك أتسرقت ولا ـ لا - موقع على الانترنت يقدملك الاجابة   اليك أكثر من 30 سيرة ذاتية أحترافية بصيغة وورد والتحميل مجاناً   3 خطوات تجعلك أكثر آمنا عند تصفحك للأنترنت .. قم بتطبيقها حالا...   ما هي لغات البرمجة الخاصة ببرمجة الذكاء الإصطناعي ؟   حاتشتغل يعنى حاتشتغل .. أعمل اللى عليك .. وربنا حيرزقك   تجميعة بسيطة لخدع حاسوبية ممكن تصنعها ببرنامج Notpad   أزاى تبقى مبرمج أو مطور برامج محترف فى البرمجة ..   13 جملة ممكن يكونوا السبب إنك ماتعدّيش من الأنترفيو   ما الفرق بين كل من الـ VPN و الـ VPS ؟ و ما تعريف كل واحد منهما ؟   مشاهدة حلقات المسلسل Mr.Robot كاملة | المواسم الأربعة للمسلسل للتحميل   موقع يجعلك تكتب مثل الهاكرز التى فى الأفلام الأمريكية   تحميل مجانى لحقيبة المبرمج Programmer Bag مهداة من موقع أمازون   كتاب فكر كمهندس أطلق عنان أحلامك، كن مختلفاً، واستمتع   خلاصة الخلاصة في الهندسة الجتماعية ( social Engineering )   ما هو ال Keylogger ؟ وكيف تقوم هذه بالتجسس على لوحة مفاتيحك   الكابل البحري الناقل للإنترنت في المحيطات، وما هي سرعة نقل البيانات فيه ؟   ماهو هجوم الفدية او إنتزاع الفدية (Ransomware)   هل تريد أن تصبح هكر ؟ ولماذا ؟ من أين وكيف تبدأ ؟   تريد أن تتعلم البرمجة .. يبقى لازم تعرف من أين تبدأ طريقك للبرمجة   الاختراق المادي Physical hacking   الفرق بين بروتوكول TCP/IP و بروتوكول UDP   ماهي لغة ألف ؟ لغة البرمجة العربية !   ما هو الفرق بين Cyber Security و Information Security   ماذا يجب أن أتعلم لأدخل عالم الروبوتات ، وما هي لغات برمجة الروبوت؟   فحص الروابط وتحليلها للتأكد من سلامتها قبل فتحها بطرق سهلة وبسيطة   تحديد التهديدات ونقاط الضعف المتعلقة بأمن الشبكة   ماهو كود الاستجابة السريعة QR؟ وكيف يعمل؟   كتب ومقرارات وملخصات كلية الحاسبات والمعلومات الفرقة الأولى   كتب ومقرارات وملخصات كلية الحاسبات والمعلومات الفرقة الثانية   كتب ومقرارات وملخصات كلية الحاسبات والمعلومات الفرقة الثالثة   دورة تعليمية لشرح هياكل البيانات والخوارزميات بالصوت والصورة   دورة أنظمة التشغيل Operating Systems Course بالصوت والصورة   تقنية DeepFake خطورتها وآلية عملها وكيف يمكن أكتشاف التزيف !!   إدارة الحضانات التعليمية ورياض الأطفال والمدارس برنامج مجانى   برنامج أدارة المدارس والمعاهد والجامعات مجانى بالتفعيل مدى الحياة   برنامج شؤون الموظفين الذى يقوم بخدمة الموظفين في الشركات والهيئات والمؤسسات   مشروع برمجى كامل لتصميم موقع تواصل إجتماعى + السورس كود   رسم تصميم شجرة برمجياً .. بالعديد من اللغات البرمجية   برنامج مجانى وأحترافى فى إدارة شؤون الموظفين مفتوح المصدر   مشروع برمجى لتصميم موقع متكامل ومتجاوب يدعم كل شاشات العرض Gallery Images   برنامج إدارة شؤون الموظفين لإدارة الموارد البشرية في الشركات والهيئات والمؤسسات   برنامج محاسبى لإداة كاشير المطاعم والكافيهات نسخة مجانية   برنامج لإدارة معامل التحاليل الطبية الحديثة ومفتوح المصدر   كتاب لغة البرمجة الجافا ( الجافا سؤال وجواب )   مجموعة من الكتب التعليمية لتعليم لغة البرمجة الجافا   لعبة الثعبان البسيطة .. الكود بلغة البرمجة الجافا   لعبة بسيطة تشبة الطيور الطائرة .. مع الكود البرمجى للعبة   لعبة البلية بشكل مبسط مع الكود البرمجى للعبة   شرح تصميم واجهة أحترافية بلغة الجافا 102 + الكود وملفات العمل   شرح تصميم واجهة أحترافية بلغة الجافا 103 + الكود وملفات العمل   شرح تصميم واجهة أحترافية بلغة الجافا 104 + الكود وملفات العمل   شرح تصميم واجهة أحترافية بلغة الجافا 101 + الكود وملفات العمل   لغة الجافا ( Java ) اللغة الأشهر من بين كل لغات البرمجة .. تعرف عليها   دورة تعليمية لتعلم ( Jasper Reports ) لأنشاء التقارير بالصوت والصورة   دورة تعليمية لتعلم Jasper iReport لأنشاء التقارير لمطورين الجافا   تصميم وبرمجة برنامج للشات | بلغة الجافا + الكود   طريقة عمل لعبة الثعبان بلغة ++Snake Game in C   مجموعة من أفضل الكتب التعليمية لتعليم لغة البرمجة السى   كتاب لغة البرمجة السى سؤال وجواب   مجموعة من أفضل الكتب التعليمية لتعليم لغة البرمجة ( ++C )   مجموعة أسطوانات تعليمية لتعلم لغة ( ++C ) من البداية وحتى الأحتراف   تحميل كتاب سى شارب #C بعمق   مجموعة من أفضل الكتب لتعليم لغة السى شارب #C   كتاب سبيلك إلى تعلم لغة C#.NET + كتاب برمجة الواجهات   أقوى دورة تعليمية لتعلم لغة السى شارب #C من البداية بالصوت والصورة   برمجة برنامج لأدارة المبيعات #C وقاعدة بيانات SQL Server بالصوت والصورة   تصميم لعبة حرب طائرات بالسي شارب + السورس كود   تصميم برنامج تشفير وفك التشفير بالسي شارب #C + السورس كود   تصميم لعبة الارنب وجمع الجزر بلغة السي شارب + الكود   (00) دورة تعلم لغة البرمجة MQL5 - تعلم MQL5 ( MetaTrader5 )   ورشة عمل برمجة أكسبرت CAP Zone Recovery EA   كتاب المرجع الكامل فى تعلم لغة MQL4   التعرف على MQL5 - لغة برمجة روبوتات التداول من Metaquotes   دورة تعليمية لتعلم لغة XML بالصوت والصورة   10 أسطوانات تعليمية لتعلم لغة الفيجوال بيسك 2008 بالصوت والصورة   دورة تعليمية لبرمجة الواجهات بلغة الفيجوال بيسك بالصوت والصورة   مجموعة من الأسطوانات التعليمية لتعلم ASP.NET من البداية وحتى الأحتراف   دورة تدريبية لبرمجة موقع للتوظيف بتقنية ASP.NET MVC 5 بالصوت والصورة   مجموعة من أفضل الكتب لتعليم لغة Microsoft ( ASP.NET )   دورة تصميم المواقع الالكترونية ( HTML - CSS - PHP - JOOMLA- SEO) باللغة العربية   إنشاء موقع بالإعتماد على إطار العمل الشهير بوتستراب (Bootstrap)   مجموعة من أفضل الكتب لتعليم لغة CSS   كتاب تعلم HTML5 و CSS3 ( الخطوة الأولى نحو البرمجة للويب )   دورة تعليمية لتعلم أطار العمل Bootstrap 4 بالصوت والصورة   كتاب برمجة المتحكمات الدقيقة بلغة التجميع   أقوى دورة تعليمية لتعليم لغة الأسمبلى بالصوت والصورة   مجموعة من أفضل الكتب لتعليم لغة البرمجة أسمبلى   مشروع أدارة منتجات كامل بالجافا سكريبت | Full Product Management System   كورس مجانى للمبتدئين فى مجال البرمجة Javascript باللغة العربية بخط اليد   مشروع أحترافى ساعة رقمية وعقارب + السورس كود   أنشاء تخزين سحابي بسيط | تحميل و رفع الملفات بأستعمال PHP   أنشاء نظام كامل لتسجيل الدخول بـ PHP   مجموعة من أفضل الكتب لتعليم لغة PHPemsp;  دورة تعليمية لتعلم MVC Framework فى لغة PHP بالصوت والصورة   كتاب تعلم Flutter باللغة العربية   مجموعة أفكار مشاريع Flutter لأحتراف التطوير بها   ما هي Dart ؟ و ما هي Flutter ؟   كتاب فك الشيفرات السرية بلغة البايثون   الكود الأول لتصميم وبرمجة روبوت كصديق لك مع القابلية للتعلم بالذكاء الأصطناعى   برمجة سكربت بايثون لفحص البورتات المفتوحة و المغلقة في موقع   تحميل كتاب البرمجة بلغة بايثون   اصنع اداة nmap بنفسك لفحص عناوين الآيبي للمواقع و السيرفرات في لغة بايثون   تعلم بايثون بالكامل في فيديو واحد | كورس بايثون كامل للمبتدئين   كتاب أربعون سؤالاً لمقابلات العمل بلغة بايثون   كتاب تعلم أساسيات الأندرويد بالعربية بأستخدام Android Studio   كتاب ملخص مسار الأندرويد من مبادرة مليون مبرمج عربي   كتاب ببساطة لتعلم تطوير التطبيقات على الأندرويد   7 مكتبات أندرويد لتطوير واجهات تطبيقات الأندرويد بشكل إحترافي بكل سهولة   دورة تعليمية لتعلم برمجة تطبيقات الأندرويد على Xamarin بالصوت والصورة   كورس CS50 كامل باللغة العربية | CS50 Tutorial In Arabic   كتاب مختصر دليل لغات البرمجة   كتاب هندسة البرمجيات العصرية للمبتدئين باللغة العربية   تعلم الخوارزميات وهياكل البيانات فى 300 دقيقة   أهم مقاسات الشاشات اللي تحتاجهم لتصميم صفحات متجاوبة Responsive   كتاب البحر الشاسع لدخول الخوارزميات من بابها الواسع   أفضل الكتب التعليمية الخاصة بأغلب لغات البرمجة مع التمارين والأمثلة   أساسيات البرمجة ونصائح والذى يجب على كل مبرمج معرفتها جيداً   الفرق بين أطار العمل Framework والمكتبة Library ببساطة   مجموعة ضخمة من الأيقونات لمبرمجين تطبيقات سطح المكتب   تحميل برنامج NetBeans IDE 8.2 المحرر العملاق للبرمجة بالجافا   إعداد بيئة الجافا للبرمجة Java Development Kit ( JDK )   الدورة الشاملة في أدارة الشبكات المنزلية والمحلية من الألف إلى الياء باللغة العربية   خطوات حماية الشبكة من الهاكرز (من كواليس المحترفين)   أعداد وأختبار وتأمين بروتوكول SSH   أجهزة التشويش: كيف تعمل أجهزة التشويش على الهواتف النقالة ؟   "قناة 14" الغامضة للواي فاي - لماذا لا يمكنك استخدامها ؟   أكبر مكتبة كتب باللغة العربية لتعلم الشبكات ( 300 كتاب )   كتاب يقدم دورة تعليمية كاملة لـ ( MCITP ) باللغة العربية   مجموعة من أفضل الكتب لدراسة شهادة MCSE   مجموعة من أفضل الكتب لتعلم لغة SQL لإدارة قواعد البيانات   كتاب الشرح الوافى لتعلم لغة SQL من نبعها الصافى   الهندسة العكسية Reverse Engineering   أسطوانة تعليمية لتعلم الهندسة العكسية وكسر حماية البرامج   الأسطوانة الثانية لتعلم الهندسة العكسية وكسر حماية البرامج   كتاب الهندسة العكسية خطوة إلى الأمام   كتاب مدخل إلى الهندسة العكسية   كتاب أوبنتو ببساطة (أبدأ مع نظام أوبنتو لينكس الآن)   كتاب خطوة بخطوة لنحترف GIMP   كتاب ( برمجة وتصميم نظام تشغيل ) أساسيات بناء نظام تشغيل   مقدمة عن الـ Disk Management ( إدارة الهاردسكات )   حل مشكلة تهنيج وثقل هواتف الأندرويد   أكواد سرية في هاتفك تقوم بأشياء مهمة عليك معرفتها   4 ملفات لا يجب أن تحذفها مطلقًا من هاتف أندرويد الخاص بك وإلا ستواجه مشكلات   جرب أنظمة اللينكس كاملة من خلال المتصفح فقط ومن دون أي برامج !   كيف تتجاوز كلمة المرور فى نظام الويندوز بدون فورمات   25 أمر إذا أدخلتها في نافذة ال RUN ستدخل إلى أدوات مهمة ومخفية في حاسوبك   تجربة الإصدارات القديمة من Windows في متصفحك باستخدام المحاكي EmuOS مجانا   كيفية إزالة Internet Explorer بالكامل من نظام التشغيل Windows 10   التعامل مع نظام التشغيل Dos وكيفية برمجة الملفات الدفعية   تحميل ويندوز 10 للأجهزة الضعيفة . أخر تحديثات 2018 . بحجم صغير   حقيبة المصمم لمصممين الفوتوشوب Adobe Photoshop   أداة مجانية وآمنة لتفعيل جميع برامج ادوبى Adobe لجميع الإصدارت - مدى الحياة   دورة تعليمية أحترافية لتعلم برنامج الفوتوشوب Adobe Photoshop CS6   هل تصدق .. قصة حب وراء أختراع برنامج الفوتوشوب ( Photoshop )   أسئلة أمتحانات ICDL | Windows 7 الرخصة الدولية لقيادة الحاسب الآلى   طريقة الدخول على الدارك ويب أو الأنترنت المظلم : إليك الطريقة   روابط الغرفة الحمراء - الغرفة الحمراء   اللى أتعلم Python ومش قادر يكتب Tools تساعده في الـ Penetration Testing   كورس برمجة فيروس الفدية بأستخدام لغة البرمجة بايثون   قائمة أهم اللغات البرمجة التي يجب عليك معرفتها للولوج لعالم الهاكينغ و الإختراق   مكتبة cookiejar وكيفية عمل سكربت و حقنه لتخطي لوحة الادمن في بايثون   أشهر التوزيعات فى مجال أختراق الشبكات   عمل هجوم على بورت مفتوح Telnet بالفيديو على شبكة داخلية   8 أدوات أختراق شبكات الواى فاى على الويندوز   حل مشكلة أنقطاع الشبكة بعد أستخدام airmon-ng   هجمات قومت بيهم على أرض الواقع وصور توضيحية من الهجمة   توضيح الهجوم على الشبكة - رجل في المنتصف MITM   أستغلال الـ Reverse Shell و Reverse Tcp لـكن ماذا يعني هذا ؟!   تثبيت الميتاسبلويت على تطبيق التيرمكس بأسهل الطرق   فيروس جديد بالبايثون لعمل DDOS Attack على النظام ومسح نفسه تلقائى   كتاب الفيروسات نظرة معمقة   صنع فيروس مزعج بأستخدام بايثون وآلية عمل مكافح الفيروسات   فيروس حذف ملفات التسجيل Registry الرئيسية   طريقة صنع فيروس بسيط مدمر للويندوز في ثواني   كيف يمكن ان تكون مثل مستر روبوت MR.Robot ؟   كتاب محترف لأختراق الشبكات اللاسلكية   إخفاء جميع ملفاتك و فيديوهاتك بداخل صورة لا يتجاوز حجمها 10KB بسهولة   كيف تصنع صوتا شبيه بصوت مجموعة أنونيموس Anonymous الشهيرة   ما الفرق بين الـ Vulnerability و الـ Exploit في مجال الإختراق و الحماية ؟   مجموعة من الكتب لأختبار الأختراق والأمن والحماية   كتاب التحليل الجنائي الرقمي   كتاب أختبار أختراق سيرفرات وتطبيقات الويب   كتاب تعلم اساسيات برنامج تيرمكس Termux بالعربي للمبتدئين من الصفر   أختراق أجهزة الـ Android وأختراق الـ WhatsApp بواسطة صورة   طريقة بسيطة جدا لأختراق الواتساب بأستخدام أداة Whatapp Viewer   كيفية عمل روت لأي جهاز يعمل بنظام Android بدون جهاز كمبيوتر   فتح قفل الشاشة لهواتف الأندرويد رمز PIN بن كود | Android Pin Bruteforce Unlock   قائمة لأقوى 10 أدوات إختراق لنظام الـ Kali Linux عليك معرفتها و إحترافها   إليك أزيد من 10 توزيعات لينكس (Linux) الخاصة بإختبار الإختراق   سؤال وجواب حول طرق هكر وأختراق وتهكير الفيسبوك   أفضل 15 طريقة عمل لكيفية اختراق حسابات الفيسبوك Facebook وكيفية حمايته   مصطلحات من مسلسل MR.Robot تعرف عليها الآن   كتاب مقدمة في الأمن السيبراني   كتاب باللغة العربية فى قرصنة الحواسب الآلية وطرق تأمينها Hacking   طرق أختراق الواتس آب وحمايتك من الأختراق   بناء مختبر أختراق للتدرب على أكتشاف الثغرات وأختبار أختراق السيرفرات وتطبيقات الويب   متجر لشراء عتاد ومعدات الإختراق للقرصنة والأمن السيبراني   كتاب Manually Vulnerability Anlaysis in Web Application باللغة العربية   قصة حقيقية للهاكرز من شركة SecureWorks في مؤتمر Black Hat 7 للهاكرز   سيناريو من يوميات الهاكرز .. اقرأ وأستفيد من تفكير الهاكرز   برنامج يستطيع اختراق حساب الفيسبوك ضع الايميل ويخرج لك الباسورد   مشروع تخرج : تقنية مصائد الأختراق لمكافحة جرائم الأنترنت   سيناريو هاكر أكثر من رائع من يوميات مهندس أمن المعلومات   معرفة كلمة مرور الشبكة اللاسلكية Wi-Fi بأستخدام موجه الأوامر CMD   لو بتعمل Ping فى مختبر الأختراق وما وصل للجهاز الأخر .. اليكم الحل   جهازك اصيب بفيروس الفدية .. أليك الحل فى خطوات   تعلم برمجة وصناعة الفيروسات وأختراق وتدمير الأجهزة   برمجة فيرس لأغلاق جهاز الضحية ووضع له كلمة مرور .. لا يستطيع فتح الجهاز بعدها   أساسيات فهم الأختراق والمهارات الأساسية للهاكرز المحترف 
  1. Chokri.Z

    Chokri.Z مشرف موقع أكتب كود

    أهلا و سهلا بكل الإخوة الإعزاء
    أردت أن يكون أول ما أكتب و أشارك به في هذا المنتدى الجميل و الغني بالمادة، شئ أفيد به و أستفيد.
    هذا شعاري على كل حال :).

    أردت في هذا الموضوع أن أتطرق إلى إطار عمل كامل تقريبا و هو الـبوتستراب ، لنحاول معا صنع و تطوير موقع واب بالإستفادة من كل ما هو جديد (إلى حد كتابة هذه الأسطر) في مجال تطوير المواقع.

    المشروع سيكون من الصفرطبعا بعد أن يكون الإخوة الأعضاء الذين يودون المشاركة، لديهم فكرة على لغة الـ HTML و الـ CSS على الأقل، و مستعدون. و من هنا نستطيع أن نبدأ إن أراد أحدكم الإطلاع .

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

    أخوكم في الله شكري
     
  2. Chokri.Z

    Chokri.Z مشرف موقع أكتب كود

    السلام عليكم
    في ما يلي نمط و كيفية تقدم الإنجاز:​
    كود:
    # مقدمة
    ******
    إنشاء موقع متعدد الصفحات قابل للبرمجة
    ******
    
    1.التقنيات التي سيتم استخدامها
    
    * الـ HTML *
    * الـ CSS *
    * الـ JavaScript *
    
    
    2.إنشاء الملفات والمجلدات الأساسية
    
    - /CSS
    - /JS
    - /Images
    --- /logos
    --- /bg
    --- /avatars
    index.php
    gallery.php
    contact.php
    login.php
    register.php
    logout.php
    
    هذا و يمكن زيادة أو تعديل بعض الملفات حسب الحاجة​
     
    آخر تعديل: ‏15/5/2022
  3. Chokri.Z

    Chokri.Z مشرف موقع أكتب كود

    تهيئة بيئة العمل

    أول شئ، أريد أن أسوق ملاحظة صغيرة:
    الموقع كما ذكرت آنفا سيكون بإذن الله قابل للبرمجة، أي ديناميكي. مما يتطلب اختيار لغة البرمجة من الأول كي يكون امتداد الملفات مطابق.
    ستكون هذه الغة هي الـ PHP. إذا سيكون إمتداد الملفات "php."

    الملفات ذات الإمتداد المذكور (php.) ، يتطلب نشغيلها سرفر أو خادم محلي يعمل كاستضافة افتراضية على جهازك.حيث تستطيع إنشاء موقع والعمل والتعديل عليه دون اتصال بشبكة الانترنت. لذا، وجب تنصيب واحدا على آلتنا، و سيكون بإذن الله الـ XAMPP .
    بعد التحميل و التثبيت الذي عادة ما يكون على المسار "C:\xampp" ، نقوم بالدخول على مسار المجلد "C:\xampp\htdocs"
    هذا الأخير،سيكون مكان عملنا ككل، أين سننشأ مجلد الموقع الرئيسي الذي بدوره سيجمع كل مجلدات و ملفات الموقع.
    الآيبي الافتراضي للخادم الذي يمكننا من الإتصال هو 127.0.0.1، كما يمكن الوصول وتجربة موقعنا على العنوان "localhost" الشهير.
    لمزيد الإطلاع لمعرفة السرفر المحلي بالتفصيل:
    كود:
    https://ar.wikipedia.org/wiki/%D8%A7%D9%84%D9%85%D8%B6%D9%8A%D9%81_%D8%A7%D9%84%D9%85%D8%AD%D9%84%D9%8A
    يـــــــــتــــــــــــــــبــــــــــــــــــع


     
  4. Chokri.Z

    Chokri.Z مشرف موقع أكتب كود

    إنشاء الملفات والمجلدات الأساسية

    بعد تهيئة بيئة العمل، نأتي الآن إلى إنشاء المجلد الرئيسي للموقع.
    نقوم بالدخول على المسار "C:\xampp\htdocs" ، ثم ننشأ مجلد جديد و نسميه itabcode.
    داخل هذا الأخير، نقوم بإنشاء ملف "index.php" و هو أول ملف عادة سيبحث عنه السرفر و تتم قرائته. وبناءا على ما فيه من أوامر على شكل أكواد و بعد التحليل، يتم إرسال الإجابة للمتصفح أين يتم عرضها لمستخدم الانترنت (طالب المعلومة).

    يـــتـــبـــع

    ملاحظة تخص الإدارة: هل من الممكن إضافة خاصية إضافة مرفقات إلى المحرر؟​
     
  5. Chokri.Z

    Chokri.Z مشرف موقع أكتب كود

    إنشاء الملفات والمجلدات الأساسية

    ملف
    "C:/xampp/htdocs/itabcode/index.php"
    كود HTML:
    <!doctype html>
    <!-- موقعنا سيكون باللغة العربية. لذلك يجب الإعلان عن العلامة " لانج و رتل" بشكل صحيح -->
    <html lang="ar" dir="rtl">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
    
            <title>أكتب كود | الرئسية</title>
        </head>
        <body>
            <h1>مرحبا بكم على موقع الويب أكتب كود</h1>
    
        </body>
    </html>
    بما أن إنشاء الموقع سيكون بإذن الله بالإعتماد على إطار العمل "Bootstrap" ، سنقوم الآن بإدراجه داخل مجلد الموقع الرئسيي. و من ثم، نقوم بإنشاء مجلدات الملفات. واحد سيتضمن ملف أو ملفات النمط الخاصة بنا (css)، و الثاني سيتضمن ملفات الـ JavaScript (js) ، و الآخر سيتضمن الصور.

    إدراج إطار العمل Bootstrap
    سنقوم بتحميله و إدراجه داخل المسار الرئيسي للموقع
    "C:/xampp/htdocs/itabcode"
    رابط التحميل :​
    كود:
    https://github.com/twbs/bootstrap/releases/download/v5.0.2/bootstrap-5.0.2-dist.zip

    العملية تمت بنجاح

    تحرير و إدراج ملفاتنا
    ملف نمط البوتستراب: سيتم إدراج هذا النمط لدعمه اللغة العربية
    "C:/xampp\htdocs/itabcode/bootstrap/css/bootstrap.rtl.min.css"
    ملف النمط الخاص بنا: "C:/xampp/htdocs/itabcode/css/default.css"
    ملف الـ js للبوتستراب:
    "C:/xampp/htdocs/itabcode/bootstrap/js/bootstrap.bundle.min.js"

    ملف "C:/xampp/htdocs/itabcode/index.php" بعد التعديل و إدراج الملفات:
    كود:
    <!doctype html>
    <!-- موقعنا سيكون باللغة العربية. لذلك يجب الإعلان عن العلامة " لانج و رتل" بشكل صحيح -->
    <html lang="ar" dir="rtl">
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <!-- Bootstrap CSS دمج ملف النمط الداعم للغة العربية -->
        <link href="bootstrap/css/bootstrap.rtl.min.css" rel="stylesheet">
        <!-- default CSS دمج ملف النمط الخاص بتا -->
        <link href="css/default.css" rel="stylesheet">
    
        <title>أكتب كود | الرئسية</title>
    </head>
    
    <body>
        <h1>مرحبا بكم على موقع الويب أكتب كود</h1>
    
    
        <!-- Bootstrap Bundle with Popper -->
        <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
    
    </body>
    
    </html>
    

    يـــتـــبـــع​
     
    آخر تعديل: ‏16/5/2022
  6. Chokri.Z

    Chokri.Z مشرف موقع أكتب كود

    إنشاء الملفات والمجلدات الأساسية

    أولا، هناك بعض المكتبات التي اخترتها أن تساعدنا على حسن التصميم وجب إدراجها في المشروع.
    -
    مكتبة تمرير الرسوم المتحركة " AOS"
    نقوم بالتحميل، ثم ندرج نمط الـ "css" على المسار التالي: "C:/xampp/htdocs/itabcode/css/aos.css"
    وملف الـ "js" على المسار "C:/xampp/htdocs/itabcode/js/plugins/aos.js"

    - مكتبة الـ "JQuery"
    نقوم بالتحميل، ثم ندرج الـملف على المسار التالي: "C:/xampp/htdocs/itabcode/js/jquery.min.js"

    روابط التحميل:​
    كود:
    https://unpkg.com/aos@2.3.1/dist/aos.css
    https://unpkg.com/aos@2.3.1/dist/aos.js
    https://code.jquery.com/jquery-3.6.0.min.js

    و من ثمه، يتم إدراج الملفتات في الملف "index.php" على النحو التالي:​
    كود HTML:
    <!-- JQuery -->
        <script src="js/jquery.min.js"></script>
        <!-- Bootstrap Bundle with Popper -->
        <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
        <!-- AOS JS -->
        <script src="js/plugins/aos.js"></script>
    
    </body>
    
    </html>
    - مكتبة الأيقونات الشهيرة "FortAwesome"
    نقوم بالتحميل، ثم ندرجها على المسار التالي: "C:/xampp/htdocs/itabcode/fontawesome"
    رابط التحميل :
    كود:
    https://use.fontawesome.com/releases/v6.1.1/fontawesome-free-6.1.1-web.zip
    و من ثمه، يتم إدراج ملف النمط الخاص بها و المجود على المسار "C:/xampp/htdocs/itabcode/fontawesome/css/all.css" في الملف "index.php"

    الآن، ندرج ملف النمط الخاص بنا و الموجود على المسار "C:/xampp/htdocs/itabcode/css/default.css" في الملف "index.php"

    أخيرا وليس آخر، نقوم بإدراج ملف الـ js الخاص بـ "AOS" أسفل الصفحة

    تمت العملية بنجاح
    كود HTML:
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <!-- Bootstrap CSS دمج ملف النمط الداعم للغة العربية -->
        <link href="bootstrap/css/bootstrap.rtl.min.css" rel="stylesheet">
        <!-- AOS CSS -->
        <link href="css/aos.css" rel="stylesheet">
        <!-- Fontawesome CSS -->
        <link href="fontawesome/css/all.min.css" rel="stylesheet">
        <!-- Default CSS دمج ملف النمط الخاص بتا -->
        <link href="css/default.css" rel="stylesheet">
      
        <title>أكتب كود | الرئسية</title>
    
    </head>
    كود HTML:
    <!-- JQuery -->
        <script src="js/jquery.min.js"></script>
        <!-- Bootstrap Bundle with Popper -->
        <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
        <!-- AOS JS -->
        <script src="js/plugins/aos.js"></script>
      
    
    </body>
    
    </html>
    يـــتـــبـــع
     
    آخر تعديل: ‏18/5/2022
  7. Chokri.Z

    Chokri.Z مشرف موقع أكتب كود

    إدراج القائمة الرئيسية للموقع ( Menu principal ) و بعض المحتوى

    القائمة الرئيسية ستتظمن خمسة روابط بالعتبار الرابط الرئيسي.
    - رابط معرض الصور
    - رابط الإتصال
    - رابط تسجيل الدخول أو الخروج ( حسب حالة الإتصال )
    - رابط التسجيل بالموقع

    الصفحة الرئيسة بعد ادراج القائمة و إضافة بعض المحتوى
    كود PHP:
    <?php session_start(); ?>
    <!doctype html>
    <!-- موقعنا سيكون باللغة العربية. لذلك يجب الإعلان عن العلامة " لانج و رتل" بشكل صحيح -->
    <html lang="ar" dir="rtl">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Bootstrap CSS دمج ملف النمط الداعم للغة العربية -->
        <link href="bootstrap/css/bootstrap.rtl.min.css" rel="stylesheet">
        <link href="css/aos.css" rel="stylesheet">
        <!-- Fontawesome CSS -->
        <link href="fontawesome/css/all.min.css" rel="stylesheet">
        <!-- default CSS دمج ملف النمط الخاص بتا -->
        <link href="css/default.css" rel="stylesheet">
        <!--[if lt IE 9]>
        <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
        <![endif]-->

        <title>أكتب كود |منتديات أكتب كود</title>

    </head>

    <body>
        <nav id="site-navbar" class="navbar navbar-expand-lg">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">منتديات أكتب كود</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="index.php">الرئيسة</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="gallery.php">معرض الصور</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="contact.php">اتصل بنا</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav mx-auto">
                        <?php if (isset($_SESSION['uname'])) { ?>
                            <li class="nav-item">
                                <a class="nav-link" href="logout.php">تسجيل الخروج</a>
                            </li>
                            <?php } else{?>
                            <li class="nav-item">
                                <a class="nav-link" href="login.php">تسجيل الدخول</a>
                            </li>
                        <?php ?>
                        <li class="nav-item">
                            <a class="nav-link" href="register.php">انضم إلينا</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div id="container" class="container">
            <div class="row flex-lg-row-reverse align-items-center">
                <div class="col-10 col-sm-8 col-lg-6" data-aos="fade-right" data-aos-duration="1000">
                    <img src="images/developpeur-logiciels-programmeur.webp" class="d-block mx-lg-auto img-fluid" alt="منتديات أكتب كود" width="700" height="500">
                </div>
                <div class="col-lg-6" data-aos="fade-left" data-aos-duration="1000">
                    <h1 class="display-5 fw-bold lh-1 mb-3">مرحبا بكم على موقع الويب أكتب كود</h1>
                    <h2>ما هو لوريم ايبسوم Lorem ipsum</h2>
                    <p class="lead">
                        لوريم ايبسوم هو نموذج افتراضي يوضع في التصاميم لتعرض على العميل ليتصور طريقه وضع النصوص بالتصاميم سواء كانت تصاميم مطبوعه ... بروشور او فلاير على سبيل المثال ... او نماذج مواقع انترنت ...

                        وعند موافقه العميل المبدئيه على التصميم يتم ازالة هذا النص من التصميم ويتم وضع النصوص النهائية المطلوبة للتصميم ويقول البعض ان وضع النصوص التجريبية بالتصميم قد تشغل المشاهد عن وضع الكثير من الملاحظات او الانتقادات للتصميم الاساسي.

                        وخلافاَ للاعتقاد السائد فإن لوريم إيبسوم ليس نصاَ عشوائياً، بل إن له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد. من كتاب "حول أقاصي الخير والشر"
                        <a class="btn btn-info btn-sm px-4 me-md-2" href="#" role="button">إقرأ المزيد</a>
                    </p>
                </div>
            </div>
        </div>
     
        <!-- JQuery -->
        <script src="js/jquery.min.js"></script>
        <!-- Bootstrap Bundle with Popper -->
        <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="js/plugins/aos.js"></script>
        <script src="js/main.js"></script>

    </body>

    </html>

    هذا كود نمط الـ css الخاص بنا كنت قد نسيت إدراجه
    كود:
    @charset "UTF-8";[/B][/CENTER][/B][/CENTER][/B][/CENTER]
    [B]
    [CENTER][B]
    [CENTER][B]
    [CENTER]:root,
    .default-theme{
        font-size: 16px;
        --vh: 100vh;
        --theme-color: 210, 87, 11;
        --theme-second-color: 150, 6, 247;
        --theme-orange: 192, 20, 245;
        --theme-navbar-bg-color: 33, 37, 41;
        --theme-navbar-link-color: 178, 204, 214;
    }
    body{
        font-family: 'Open Sans', sans-serif;
        color: #333;
        letter-spacing: 0.03ch;
        overflow: auto;
    }
    #site-navbar,.dropdown-menu{
        background-color: rgb(var(--theme-navbar-bg-color));
    }
    #site-navbar .nav-link,
    #site-navbar .dropdown-item{
        color: rgb(var(--theme-navbar-link-color));
    }
    #site-navbar .nav-link{
        font-size: calc(100% + 2px);
    }
    #site-navbar .nav-link:hover,
    #site-navbar .dropdown-item:hover{
        color: #fff;
    }
    #site-navbar .dropdown-item:hover{
        background-color: #69657a;
    }
    .navbar-brand{
        color: #fff;
        font-size: calc(100% + 18px);
    }
    .navbar-brand:hover{
        color: rgb(var(--theme-color));
    }
    #site-navbar .navbar-toggler {
        padding: 0.15rem 0.15rem;
        font-size: 1.16rem;
        line-height: 1;
        background-color: transparent;
        border: 1px solid transparent;
     
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
     
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
        border-radius: 0;
    }
    
    #site-navbar .navbar-toggler::before {
        display: block;
        position: absolute;
        color: rgb(var(--theme-navbar-link-color));
        font: var(--fa-font-solid);
        content: "\f0c9";
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }
    
    #site-navbar .navbar-toggler:focus {
        outline: none;
        -webkit-outline-style: none;
        -moz-outline-style: none;
        outline-style: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    
    h1,h2{
        color: rgb(var(--theme-color));
    }
    
     
  8. Chokri.Z

    Chokri.Z مشرف موقع أكتب كود


    إدراج مكتبة lightgallery و هي المكتبة التي سنعتمدها في عرض الصور، و تحرير ملف "gallery.php"

    - تحميل المكتبة :
    كود:
    https://github.com/sachinchoolur/lightgallery.js/
    في الحقيقة لن نحناج منها سوى مجلد واحد (dist)

    - إدراجها في المشروع
    بعد فك ضغط المجلد، نقوم بنسخ أو قص محتواه (dist) ، ثم نقوم بإدراجه داخل مجلد خاص به على المسار التالي:
    "/C:/xampp/htdocs/itabcode/plugins/lightgallery"

    العملية تمت بنجاح

    نقوم الآن بالتعديل على ملف gallery.php
    كود PHP:
    <?php session_start(); ?>[/COLOR][/CENTER]
    [COLOR=#000000]
    [CENTER]<!doctype html>
    <html lang="ar" dir="rtl">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Bootstrap CSS v5.2.0-beta1 دمج ملف النمط الداعم للغة العربية -->
        <link href="bootstrap/css/bootstrap.rtl.min.css" rel="stylesheet">
        <link rel="stylesheet" href="plugins/lightgallery/css/lightgallery.min.css">
        <link href="css/aos.css" rel="stylesheet">
        <!-- Fontawesome v6.1.1 CSS -->
        <link href="fontawesome/css/all.min.css" rel="stylesheet">
        <!-- default CSS دمج ملف النمط الخاص بتا -->
        <link href="css/default.css" rel="stylesheet">
        <!--[if lt IE 9]>
        <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
        <![endif]-->

        <title>منتديات اكتب كود | معرض الصور</title>

    </head>

    <body>
         <nav id="site-navbar" class="navbar navbar-expand-lg">
            <div class="container-fluid">
                <a class="navbar-brand" href="index.php">منتديات أكتب كود</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link" aria-current="page" href="index.php"><i class="icon fa-light fa-house-signal"></i> الرئيسة</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active"><i class="icon fa-light fa-album-collection"></i> معرض الصور</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="icon fa-light fa-mailbox"></i> اتصل بنا</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav mx-auto">
                        <?php if (isset($_SESSION['uname'])) { ?>
                            <li class="nav-item">
                                <a class="nav-link" href="#"><i class="icon fa-solid fa-right-from-bracket"></i> تسجيل الخروج</a>
                            </li>
                            <?php } else{?>
                            <li class="nav-item">
                                <a class="nav-link" href="#"><i class="icon fa-light fa-right-to-bracket"></i> تسجيل الدخول</a>
                            </li>
                        <?php ?>
                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="icon fa-light fa-user-plus"></i> إنشاء حساب</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <h1 class="fw-light text-center text-lg-start mt-4 mb-0">معرض الصور</h1>
            <hr class="mt-2 mb-4">
            <div id="gallery" class="gallery" data-aos="zoom-in" data-aos-duration="1500">
                <ul id="lightgallery" class="list-unstyled row">
                    <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="images/img-1.jpg 375, images/img-1.jpg 480, images/img-1.jpg 800" data-src="images/img-1.jpg"
                    data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>"
                    data-pinterest-text="Pin it1" data-tweet-text="share on twitter 1">
                        <a href="">
                            <img class="img-fluid" src="images/img-1.jpg" alt="Thumb-1">
                        </a>
                    </li>
                    <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="images/img-2.jpg 375, images/img-2.jpg 480, images/2.jpg 800" data-src="images/img-2.jpg"
                    data-sub-html="<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>"
                    data-pinterest-text="Pin it1" data-tweet-text="share on twitter 1">
                        <a href="">
                            <img class="img-fluid" src="images/img-2.jpg" alt="Thumb-2">
                        </a>
                    </li>
                    <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="images/img-3.jpg 375, images/img-3.jpg 480, images/img-3.jpg 800" data-src="images/img-3.jpg"
                    data-sub-html="<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>"
                    data-pinterest-text="Pin it1" data-tweet-text="share on twitter 1">
                        <a href="">
                            <img class="img-fluid" src="images/img-3.jpg" alt="Thumb-3">
                        </a>
                    </li>
                    <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="images/img-4.jpg 375, images/img-4.jpg 480, images/4.jpg 800" data-src="images/img-4.jpg"
                    data-sub-html="<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>"
                    data-pinterest-text="Pin it1" data-tweet-text="share on twitter 1">
                        <a href="">
                            <img class="img-fluid" src="images/img-4.jpg" alt="Thumb-4">
                        </a>
                    </li>
                    <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="images/img-5.jpg 375, images/img-5.jpg 480, images/img-5.jpg 800" data-src="images/img-5.jpg"
                    data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>"
                    data-pinterest-text="Pin it1" data-tweet-text="share on twitter 1">
                        <a href="">
                            <img class="img-fluid" src="images/img-5.jpg" alt="Thumb-5">
                        </a>
                    </li>
                    <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="images/img-6.jpg 375, images/img-6.jpg 480, images/img-6.jpg 800" data-src="images/img-6.jpg"
                    data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>"
                    data-pinterest-text="Pin it1" data-tweet-text="share on twitter 1">
                        <a href="">
                            <img class="img-fluid" src="images/img-6.jpg" alt="Thumb-6">
                        </a>
                    </li>
                         <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="images/img-7.jpg 375, images/img-7.jpg 480, images/img-7.jpg 800" data-src="images/img-7.jpg"
                         data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>"
                         data-pinterest-text="Pin it1" data-tweet-text="share on twitter 1">
                        <a href="">
                            <img class="img-fluid" src="images/img-7.jpg" alt="Thumb-7">
                        </a>
                    </li>
                          <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="images/img-8.jpg 375, images/img-8.jpg 480, images/img-8.jpg 800" data-src="images/img-8.jpg"
                          data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>"
                          data-pinterest-text="Pin it1" data-tweet-text="share on twitter 1">
                        <a href="">
                            <img class="img-fluid" src="images/img-8.jpg" alt="Thumb-8">
                        </a>
                    </li>

                </ul>
            </div>
            <hr class="mt-2 d-none d-lg-block">
        </div>
       
        <!-- JQuery v3.6.0 -->
        <script src="js/jquery.min.js"></script>
        <!-- Bootstrap v5.2.0-beta1 Bundle with Popper -->
        <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
        <!-- Lightgallery JS -->
        <script src="plugins/lightgallery/picturefill.min.js"></script>
        <script src="plugins/lightgallery/lightgallery.min.js"></script>
        <script src="plugins/lightgallery/lg-pager.js"></script>
        <script src="plugins/lightgallery/lg-autoplay.js"></script>
        <script src="plugins/lightgallery/lg-fullscreen.js"></script>
        <script src="plugins/lightgallery/lg-zoom.js"></script>
        <script src="plugins/lightgallery/lg-hash.js"></script>
        <script src="plugins/lightgallery/lg-share.js"></script>
        <script src="plugins/lightgallery/lg-rotate.js"></script>
        <!-- AOS JS -->
        <script src="plugins/aos/aos.js"></script>
        <!-- Main JS -->
        <script src="js/main.js"></script>
    </body>

    </html>


    بعد هذه العملية، نقوم بتعديل ملف النمط الخاص بنا (default.css) بإضافة الكود التالي:​
    كود PHP:
    html[dir="rtl"] .icon::after,
    html[dir="rtl"] .icon::before {
        -
    moz-transformscaleX(-1);
        -
    o-transformscaleX(-1);
        -
    webkit-transformscaleX(-1);
        
    transformscaleX(-1);
        
    filterFlipH;
        -
    ms-filter"FlipH";
    }
    .
    gallery{
        
    padding-bottom80px;
    }
    .
    gallery ul {
        
    margin-bottom0;
    }
    .
    gallery ul li {
        
    floatleft;
        
    margin-bottom15px;
        
    margin-right20px;
        
    width200px;
    }
    .
    gallery ul li a {
        
    border3px solid #FFF;
        
    border-radius3px;
        
    displayblock;
        
    overflowhidden;
        
    positionrelative;
        
    floatleft;
    }
    .
    gallery ul li a img {
        -
    webkit-transition: -webkit-transform 0.15s ease 0s;
        -
    moz-transition: -moz-transform 0.15s ease 0s;
        -
    o-transition: -o-transform 0.15s ease 0s;
        
    transitiontransform 0.15s ease 0s;
        -
    webkit-transformscale3d(111);
        
    transformscale3d(111);
        
    height100%;
        
    width100%;
    }
    .
    gallery ul li a:hover img {
        -
    webkit-transformscale3d(1.11.11.1);
        
    transformscale3d(1.11.11.1);
    }
    #site-navbar .nav-link.active{
        
    color#fff !important;
    }
    تم إرفاق مجلد المشروع

    يـــتـــبـــبـــع
     
    آخر تعديل: ‏25/5/2022
  9. Chokri.Z

    Chokri.Z مشرف موقع أكتب كود

    تعديل ملف الـ register.php
    كود PHP:
    <?php session_start(); ?>
    <!doctype html>
    <!-- موقعنا سيكون باللغة العربية. لذلك يجب الإعلان عن العلامة " لانج و رتل" بشكل صحيح -->
    <html lang="ar" dir="rtl">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <!-- Bootstrap CSS v5.2.0-beta1 دمج ملف النمط الداعم للغة العربية -->
        <link href="bootstrap/css/bootstrap.rtl.min.css" rel="stylesheet">
        <link href="css/aos.css" rel="stylesheet">
        <!-- Fontawesome CSS v6.1.1 -->
        <link href="fontawesome/css/all.min.css" rel="stylesheet">
        <!-- default CSS دمج ملف النمط الخاص بتا -->
        <link href="css/default.css" rel="stylesheet">
        <!--[if lt IE 9]>
        <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
        <![endif]-->

        <title>منتديات اكتب كود | تسجيل</title>

    </head>

    <body>
        <div class="container">
    <div class="form-register py-2" data-aos="fade-down" data-aos-duration="500">
        <h1 class="text-center display-5 mb-4 mx-1 mx-md-4">
            <i class="fa-duotone fa-circle-user"></i> تسجيل
        </h1>
        <form class="row g-1 pb-2 form" action="#" enctype="multipart/form-data"
            data-avatar="images/ajax-loader.gif">
            <div id="form-results" class="d-none"></div>
            <div class="col-md-6">
                <div class="form-floating">
                    <input type="text" id="f_name" name="f_name" placeholder="الإسم" class="form-control required" data-bs-toggle="tooltip" data-bs-placement="left" title="خانة مطلوبة">
                    <label class="form-label" for="f_name"><span class="fw-bolder me-1" style="color: red" ;>*</span>الإسم</label>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-floating">
                    <input type="text" id="l_name" name="l_name" placeholder="اللقب" class="form-control required" data-bs-toggle="tooltip" data-bs-placement="right" title="خانة مطلوبة">
                    <label class="form-label" for="l_name"><span class="fw-bolder me-1" style="color: red" ;>*</span>اللقب</label>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-floating">
                    <input type="email" id="r_email" name="email" placeholder="البريد الإلكتروني" class="form-control required" data-bs-toggle="tooltip" data-bs-placement="left" title="خانة مطلوبة">
                    <label class="form-label" for="r_email"><span class="fw-bolder me-1" style="color: red" ;>*</span>البريد الإلكتروني</label>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-floating">
                    <input type="text" id="uname" name="uname" placeholder="اسم المستخدم" class="form-control required" data-bs-toggle="tooltip" data-bs-placement="right" title="خانة مطلوبة">
                    <label class="form-label" for="uname"><span class="fw-bolder me-1" style="color: red" ;>*</span>اسم المستخدم</label>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-floating">
                    <input type="password" id="r_pass" name="mdp" class="form-control required" data-bs-toggle="tooltip" data-bs-placement="left" title="خانة مطلوبة">
                    <label class="form-label" for="r_pass"><span class="fw-bolder me-1" style="color: red" ;>*</span>كلمة العبور</label>
                    <span data-id="#r_pass" class="fa-light fa-eye field-icon-right toggle-password" data-bs-toggle="tooltip" title="انقر لإظهار كلمة المرور"></span>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-floating">
                    <input type="password" id="cpass" name="cpass" class="form-control required" data-bs-toggle="tooltip" data-bs-placement="right" title="خانة مطلوبة">
                    <label class="form-label" for="cpass"><span class="fw-bolder me-1" style="color: red" ;>*</span>اعد كلمة العبور</label>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-floating">
                    <input type="text" id="birthday" name="birthday" placeholder="تاريخ الميلاد ( dd/mm/yyyy )" class="form-control" data-bs-toggle="tooltip" data-bs-placement="left" title="خانة اختيارية">
                    <label class="form-label" for="birthday">تاريخ الميلاد ( <small class="text-warning">dd/mm/yyyy</small> )</label>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-check form-check-inline mt-3">
                    <input class="form-check-input" type="radio" name="gender" id="male" value="male" data-bs-toggle="tooltip" data-bs-placement="top" title="خانة اختيارية">
                    <label class="form-check-label" for="male">ذكر</label>
                </div>
                <div class="form-check form-check-inline mt-3">
                    <input class="form-check-input" type="radio" name="gender" id="femal" value="femelle" data-bs-toggle="tooltip" data-bs-placement="top" title="خانة اختيارية">
                    <label class="form-check-label" for="femal">أنثى</label>
                </div>
            </div>
            <div class="col-12">
                <div id="avatar-content" class="row g-1 justify-content-center align-items-center">
                    <div class="col-lg-8 col-md-auto py-2">
                        <label for="avatar" class="form-label lbl-avatar">الصورة الرمزية</label> <input type="file" id="avatar" name="avatar" class="form-control-file" data-bs-toggle="tooltip" data-bs-placement="left" title="خانة اختيارية">
                    </div>
                    <div id="output" class="col-md-4 col"></div>
                </div>
            </div>
            <div class="col-md-12 mb-2 mt-2">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="therms" value="d" id="therms" checked data-bs-toggle="tooltip" data-bs-placement="right" title="خانة مطلوبة">
                    <label class="form-check-label" for="therms"> أنا أتفق مع جميع البيانات الواردة في <a class="link" href="#!"> شروط الاستعمال </a>
                    </label>
                </div>
            </div>
            <div class="col-12">
                <div class="row">
                    <div class="col-md-6 mb-2">
                        <button type="submit" class="w-50 btn btn-primary btn-sm submit-btn">
                            سجل الآن
                        </button>
                        <a class="btn btn-primary btn-sm ms-2" href="index.php">
                            إلعاء
                        </a>
                    </div>
                    <div class="col-md-6">
                        <small>لديك حساب ؟</small> <a href="#">
                            تسجيل الدخول
                        </a>
                    </div>

                </div>
            </div>
        </form>
    </div>
    </div>
    <!-- JQuery v3.6.0 -->
        <script src="js/jquery.min.js"></script>
        <!-- Bootstrap v5.2.0-beta1 Bundle with Popper -->
        <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="plugins/aos/aos.js"></script>
        <script src="js/main.js"></script>
      
        </body>
    </html>
    بما أننا نستعمل مكتبة الـ " Fontawesome Pro" مع آخر إصدار ـ أحببت أن نستغلها أكثر ما يمكن.
    تم التعديل على ملف المشروع المرفق.

    المكتبة كاملة لا تنقص شئ هدية مني إليكم. (PRO)

    يـــتـــبـــع​
     
    آخر تعديل: ‏25/5/2022
  10. Chokri.Z

    Chokri.Z مشرف موقع أكتب كود

    عذرا على التأخير
    التعديل على ملف
    "C:/xampp/htdocs/itabcode/js/main.js"

    سنقوم بالتعديل على الملف المذكور، بطريقة تسمح لنا بمراقبة الخانات ( المفروضة ) لكل استمارة (form) لها فئة (class) موحدة.
    (class (.form
    هذه الإستمارة، سيكون لها طبعا زر تأكيد (button submit). هذا الزر أيظا سيكون له فئة موحدة.
    class (.submit-btn)
    بهذه الكيفية أو الطريقة، نكون قد اختصرنا في عدد الأكواد المكتوبة غي المشروع، و ربحتا وقت إضافي و أكثر إرياحية.

    أيضا سنقوم بإضافة كود يقوم بمراقبة الإمداد لأي صورة تم رفعها عند عملية التسجيل.
    و بهذا نضمن أن يكون الملف المرفوع صورة.​
    كود PHP:
    $(function(){
        
    'use strict';
        
        
    // معرض الصور
        
    const gallery document.getElementById('lightgallery');
        if(
    gallerylightGallery(gallery);
        
        
    // خاص بمراقبة الصورة إطا ما نم الرفغ
        
    const img document.getElementById('avatar');
        if (
    imgimg.addEventListener('change'selectSingleFile);
        
        function 
    selectSingleFile(e) {
            var 
    file e.target.files// كائن "FileList"
            
    var file[0];
            var 
    output document.getElementById('output');
            
    // معالجة ملفات الصور فقط
            
    if (!f.type.match('image.*')) {
                
    output.classList.add('alert''alert-danger');
                
    output.innerHTML '';
                
    output.innerHTML '<p>يجب أن يكون الملف الذي تريد تحميله صورة صالحة</p>';

                return 
    false;
            } else {
                
    output.classList.remove('alert''alert-danger');
                $(
    '#form-results').removeClass().addClass('d-none');
            }

            var 
    reader = new FileReader();
            
    // الإغلاق لالتقاط معلومات الملف
            
    reader.onload = (function (file) {
                return function (
    e) {
                    
    // عرض الصورة المصغرة
                    
    var span document.createElement('span');
                    
    span.innerHTML = ['<img class="img-thumbnail" src="'e.target.result,
                        
    '" alt="'encodeURI(file.name), '" title="'encodeURI(file.name), '"/>'].join('');
                    
    output.innerHTML "";
                    
    output.insertBefore(spannull);
                };
            })(
    f);
            
    //"url" قراءة ملف الصورة كعنوان للبيانات
            
    reader.readAsDataURL(f);

            return 
    true;
        }
        
        
    // تغيير الأيقونة داخل خانة كلمة المرور عند الضفط عليها
        
    $('.toggle-password').on('click', function () {
            $(
    this).toggleClass('fa-lighte fa-eye-slash');
            const 
    input = $($(this).data('id'));
            if (
    input.attr('type') == 'password') {
                
    input.attr('type''text');
            } else {
                
    input.attr('type''password');
            }
        });
        
        
    // register/login forms
        
    $(document).on('click''.submit-btn', function (e) {
            
    e.preventDefault();
            var 
    btn = $(this),
                
    frm btn.parents('.form'),
                
    url frm.attr('action'),
                
    src_avatar frm.data('loader'),
                
    flag false,
                
    formResults frm.find('#form-results');

            if (
    flag === true) {
                return 
    false;
            }

            const 
    data = new FormData(frm[0]);

            $.
    ajax({
                
    urlurl,
                
    datadata,
                
    type'POST',
                
    dataType'json',
                
    beforeSend: function () {
                    
    flag true;
                    
    btn.attr('disabled'true);
                    
    formResults.removeClass().addClass('alert alert-info').html('<p class="text-center"><img src="' src_avatar '" alt="Loading..."></p>');
                },
                
    success: function (results) {
                    
    setTimeout(function () {
                        if (
    results.errors) {
                            
    formResults.removeClass().addClass('alert alert-danger').html(results.errors);
                            
    btn.removeAttr('disabled');
                            
    flag false;
                        } else if (
    results.success) {
                            
    formResults.removeClass().addClass('alert alert-success').html(results.success);
                        }
                    }, 
    1000);
                    if (
    results.redirectTo) {
                        
    setTimeout(function () {
                            
    window.location.href results.redirectTo;
                        }, 
    4000);
                    }
                },
                
    cachefalse,
                
    processDatafalse,
                
    contentTypefalse,
            });
        });
        
        
        
    // إن وجد AOS plugin تفعيل الـ
        
    $("div, p").each(function() {
            $.
    each(this.attributes, function() {
                if (
    this.name.indexOf('data-aos') == 0) {
                    
    AOS.init({ mirrortrue });
                }
            });
        });
        
        
    // (tooltip) تفعيل تلميح أداة التمهيد
        
    let btns_toggle document.querySelectorAll('[data-bs-toggle="tooltip"]');
        
    btns_toggle.forEach(function (btn) {
            if(
    btn) { // التحقق مما إذا كان العنصر موجودًا
                
    var tooltipBtn = new bootstrap.Tooltip(btn);

                
    btn.addEventListener('mouseleave', function () {
                    
    // إخفاء التلميح بشكل صريح ، لأنه بعد النقر عليه يظل مركزًا (لأنه زر) ، لذلك سيظل تلميح الأداة مرئيًا حتى يتم نقل التركيز بعيدًا
                    
    tooltipBtn.hide();
                });
            }
        });
    });



    من هنا فصاعدا، سنهتم ببرمجة الموقع (المشروع).
    وستكون الأكواد المدرجة متاحة في منتدى لغات البرمجة و تحديدا في منتدى لغة بى أتش بى بما أن البرمجة ستتم بإذن الله بهذه اللغة.

    يــتــبــع
     
  11. Chokri.Z

    Chokri.Z مشرف موقع أكتب كود

    إضافة مجلدات و إنشاء قاعدة البيانات

    قبل المرور إلى مرحلة البرمجة، نريد أن نضيف المجلدين "classes" الذي سيحتوي على الفئات ، و مجلد "vendor" الذي سيحتوي ملف التحميل التلقائي "autoload.php" وملف الإعدادات "config.php" داخل المجلد الرئيسي للمشروع.
    المسار المحدد لإنشاء المجلدين: "C:/xampp/htdocs/itabcode/vendor" و "C:/xampp/htdocs/itabcode/classes"

    ملف "autoload.php"
    كود PHP:
    <?php
     
        
    /*
        دالة التحميل التلقائي ستشمل الفئات المسبوقة باسم المساحة
        itabcode\classes
        */
        
    spl_autoload_register(function ($class) {
            
    // بادئة مساحة الاسم
            
    $prefix 'itabcode\\classes';

            
    // التحقق مما إذا كانت فئة من المشروع
            
    $len strlen($prefix);
            if (
    strncmp($prefix$class$len) !== 0)
                return; 
    // الفئة ليست من المشروع

            // الحصول على اسم فئة نسبي وإزالة اسم مساحة الاسم
            
    $className substr($class$len);

            
    // مجلد الفئات الأساسية
            
    $baseDir dirname(__DIR__) . '/classes/';
            
    // parent y compris
            
    $file $baseDir str_replace('\\'DIRECTORY_SEPARATOR$className) . '.php';

            
    // إذا كان الملف موجودًا نقوم باستدعائه
            
    if (file_exists($file)) {
                require 
    $file;
            }
        });
    ?>
    ملف "config.php"
    كود PHP:
    <?php
     
    return [
        
    'server'    => 'localhost',
        
    'dbname'    => 'itabcode',
        
    'dbuser'    => 'root',
        
    'dbpass'    => '',
    ];

    ?>

    بعد إنشاء المجلدات ، الملفات ، قاعدة البيانات و تعديل ملف النمط "default.css" ، هذا مجلد المشروع في المرفقات

    يــتــبــع

     
  12. Chokri.Z

    Chokri.Z مشرف موقع أكتب كود

    تفعيل الامتداد "dg" لدعم معالجة الصور

    للقيام بذلك ، ابدأ بتشغيل الخادم "XAMPP" المحلي.
    من خلال قائمة هذا الأخير ، انقر فوق علامة التبويب "config".
    [​IMG]

    ستظهر قائمة منسدلة بالاختيارات ، اختر " (php.ihi)".
    بعد الضغط على الخيار، سيتم فتح ملف في المحرر الافتراضي للنظام. في هذا الملف المفتوح ، ابحث عن"؛ extension = gd ". احذف "؛" الذي يقع في بداية السطر.

    [​IMG]

    أعد تشغيل الخادم. مبروك تم تفعيل الإمتداد.

    الصور موجودة بالمرفقات.

    يــتــبــع

     
    آخر تعديل: ‏11/6/2022
  13. Chokri.Z

    Chokri.Z مشرف موقع أكتب كود

    التعديل على ملف "C:/xampp/htdocs/itabcode/css/default.css"


    بعدما قمنا بالتعديل على ملفات الـ PHP هنا ، هذا ملف التنسيق "default.css" المعدل​
    كود PHP:
    @charset "UTF-8";
    :
    root,
    .default-
    theme{
        
    font-size16px;
        --
    vh100vh;
        --
    theme-color2108711;
        --
    theme-second-color1506247;
        --
    theme-orange19220245;
        --
    theme-navbar-bg-color333741;
        --
    theme-navbar-link-color178204214;
    }
    body{
        
    font-family'Open Sans'sans-serif;
        
    background-imagelinear-gradient(#e8f0ff 0%, white 52.08%);
        
    color#333;
        
    letter-spacing0.03ch;
        
    overflowauto;
    }
    html[dir="rtl"] .icon::after,
    html[dir="rtl"] .icon::before {
        -
    moz-transformscaleX(-1);
        -
    o-transformscaleX(-1);
        -
    webkit-transformscaleX(-1);
        
    transformscaleX(-1);
        -
    ms-filter"FlipH";
        
    filterFlipH;
    }

    #site-navbar,.dropdown-menu{
        
    background-colorrgb(var(--theme-navbar-bg-color));
    }
    #site-navbar .nav-link,
    #site-navbar .dropdown-item{
        
    colorrgb(var(--theme-navbar-link-color));
    }
    #site-navbar .nav-link{
        
    font-sizecalc(100% + 2px);
    }
    #site-navbar .nav-link:hover > .icon{
        
    colorrgb(var(--theme-color));
    }
    #site-navbar .nav-link:hover,
    #site-navbar .dropdown-item:hover,
    #site-navbar .nav-link.active{
        
    color#fff !important;
    }
    #site-navbar .dropdown-item:hover{
        
    background-color#69657a;
    }
    #site-navbar .navbar-brand{
        
    color:  rgba(var(--theme-color),0.7);
        
    font-sizecalc(100% + 18px);
    }
    #site-navbar .navbar-brand:hover{
        
    colorrgb(var(--theme-color));
    }
    #site-navbar .navbar-toggler {
        
    padding0.15rem 0.15rem;
        
    font-size1.16rem;
        
    line-height1;
        
    background-colortransparent;
        
    border1px solid transparent;

        -
    webkit-transitionnone;
        -
    moz-transitionnone;
        -
    ms-transitionnone;
        -
    o-transitionnone;
        
    transitionnone;

        -
    webkit-border-radius0;
        -
    moz-border-radius0;
        -
    ms-border-radius0;
        -
    o-border-radius0;
        
    border-radius0;
    }
    #site-navbar .navbar-toggler::before {
        
    displayblock;
        
    positionabsolute;
        
    colorrgb(var(--theme-navbar-link-color));
        
    font: var(--fa-font-solid);
        
    content"\f0c9";
        
    text-renderingauto;
        -
    webkit-font-smoothingantialiased;
        
    /*https://fontawesome.com/docs/web/add-icons/pseudo-elements*/
    }
    #site-navbar .navbar-toggler:focus {
        
    outlinenone;
        -
    webkit-outline-stylenone;
        -
    moz-outline-stylenone;
        
    outline-stylenone;
        -
    webkit-box-shadownone;
        
    box-shadownone;
    }
    h1h2h3h4h5h6 {
        
    font-familyAmiriGeorgia"Times New Roman"serif;
        
    colorrgb(var(--theme-color));
    }
    .
    has-error{
        
    border1px solid red !important;
    }
    .
    icon::before {
        
    displayinline-block;
        
    width1.25em;
        
    text-renderingauto;
        -
    webkit-font-smoothingantialiased;
    }
    .
    user-avatar{
        
    colorrgb(var(--theme-navbar-link-color));
    }
    .
    user-avatar:hover>span{
        
    color#fff;
    }
    .
    user-avatar>span img{
        
    width34px;
        
    height34px;
    }

    /*----------------------
     register form
    ------------------------*/
    .form-register {
        
    width100%;
        
    max-width650px;
        
    padding7px;
        
    margin25px auto;
        
    border2px solid rgb(var(--theme-color));
        
    border-radius.4rem;
    }
    .
    form-contact {
        
    width100%;
        
    max-width610px;
        
    padding7px;
        
    margin34px auto;
        
    border2px solid rgb(var(--theme-color));
        
    border-radius.4rem;
    }
    .
    form-register .form-floating:focus-within {
        
    z-index2;
    }
    .
    form-register .small_avatar{
        
    width60px;
        
    height60px;
        
    background-colortransparent;
        
    border-radius50%;
    }

    /*----------------------
     login form
    ------------------------*/
    .form-signin {
        
    width100%;
        
    max-width330px;
        
    padding15px;
        
    margin25px auto;
        
    border2px solid rgb(var(--theme-color));
        
    border-radius.4rem;
    }

    .
    form-signin .checkbox {
        
    font-weight400;
    }

    .
    form-signin .form-floating:focus-within {
        
    z-index2;
    }

    .
    field-icon-left {
        
    positionabsolute;
        
    top50%;
        
    right15px;
        
    colorrgba(0000.3);
        -
    webkit-transformtranslateY(-50%);
        
    transformtranslateY(-50%);
    }

    .
    field-icon-right {
        
    positionabsolute;
        
    top50%;
        
    left15px;
        
    colorrgba(0000.3);
        -
    webkit-transformtranslateY(-50%);
        
    transformtranslateY(-50%);
    }

    .
    gallery{
        
    padding-bottom80px;
    }
    .
    gallery ul {
        
    margin-bottom0;
    }
    .
    gallery ul li {
        
    floatleft;
        
    margin-bottom15px;
        
    margin-right20px;
        
    width200px;
    }
    .
    gallery ul li a {
        
    border3px solid #FFF;
        
    border-radius3px;
        
    displayblock;
        
    overflowhidden;
        
    positionrelative;
        
    floatleft;
    }
    .
    gallery ul li a img {
        -
    webkit-transition: -webkit-transform 0.15s ease 0s;
        -
    moz-transition: -moz-transform 0.15s ease 0s;
        -
    o-transition: -o-transform 0.15s ease 0s;
        
    transitiontransform 0.15s ease 0s;
        -
    webkit-transformscale3d(111);
        
    transformscale3d(111);
        
    height100%;
        
    width100%;
    }
    .
    gallery ul li a:hover img {
        -
    webkit-transformscale3d(1.11.11.1);
        
    transformscale3d(1.11.11.1);
    }
    مجلد المشروع معدل و بالمرفقات
     
    آخر تعديل: ‏9/6/2022
  14. Chokri.Z

    Chokri.Z مشرف موقع أكتب كود

    لقطات للشاشة "Screenshots"

    [​IMG]

    [​IMG]

    [​IMG]

    [​IMG]

    [​IMG]
    [​IMG]
    [​IMG]
    [​IMG]
     
    آخر تعديل: ‏9/6/2022
  15. Chokri.Z

    Chokri.Z مشرف موقع أكتب كود

    بفضل الله و عونه، تم إنجاز كل المراحل بعد إتمام المرحلة الأخيرة هنا

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

    في انتظار تفاعلكم ، آرائكم و تساؤلاتكم.
    الكود سورس النهائ للمشروع بالمرفقات.

    الحمد لله
     
  16. Chokri.Z

    Chokri.Z مشرف موقع أكتب كود


    سأبدأ بفتح المجال

    مثلا، في نطاق حماية الموقع. سأقوم بالتعديل على مجلد المشروع، بإضافة ملف "C:/xampp/htdocs/itabcode/.htaccess" الذي سيتظمن حاليا، الحد الأدني من الحماية.

    هذا الملف، هو مثال لما يمكن القيام به في إطار التحسين.​
    كود HTML:
    #.htaccess حماية جميع ملفات الـ
    <Files *.htaccess>
        Order Allow,Deny
        Deny from all
    </Files>
    <IfModule mod_rewrite.c>
        # منع الفهرسة
        Options -Indexes
     
        # رسالة مخصصة لخطأ 403
        ErrorDocument 403 '<html dir="rtl"><head><meta charset="utf-8"></head><body><p style="text-align: center">لا يمكنك الوصول إلى هذا المجلد</p></body></html>'
    </IfModule>

    مجلد المشروع وهيكل الملفات
    [​IMG]

     
    آخر تعديل: ‏13/6/2022
جاري تحميل الصفحة...