أفضل جروبات التليجرام لتعلم البرمجة وقواعد البيانات والشبكات   موقع 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. المدير العام

    المدير العام أدارة موقع أكتب كود

    أنشاء تخزين سحابي بسيط | تحميل و رفع الملفات بأستعمال PHP
    [​IMG]

    في هذا المشروع سنقوم بانشاء تطبيق موقع بسيط لرفع الملفات باستخدام PHP .
    يعتبر المشروع ممتاز لتثبيت المهارات و تطوير المنطق البرمجي.
    تحتاج الى معرفة متوسطة بـHTML / CSS / JS / PHP للاستفادة الكاملة من المشروع.

    ما ستتعلمه في هذا المشروع :
    • الـFORMS في HTML
    • الـLAYOUTS في الـCSS
    • الـPOSITIONING في الـCSS
    • التعامل مع الطلبات في PHP
    • الـSUPERGLOBALS في PHP
    • AJAX
    • الـJS DOM
    • التعامل مع JSON
    • دوال مفيدة في JS / PHP

    رابط المشروع على Github :
    https://github.com/YakoVen/fileuploader.git
     
  2. المدير العام

    المدير العام أدارة موقع أكتب كود

    تجهيز الخادم Xampp
    بما أننا سنعمل في هذا المشروع على الـ Backend هذا يعني أننا سنحتاج الى خادم.
    أفضل برنامج لتسطيب خادم محلي (على جهازك الشخصي) هو Xampp. و يمكن تحميله من هذا الرابط: https://www.apachefriends.org/index.html
    (باستخدام Xampp يمكنك تشغيل خادم APACHE , خادم MySql , خادم FTP ... لكننا نحتاج خادم apache فقط في هذا المشروع و هو مسؤول على استقبال الطلبات من زوار الموقع و ارسال الصفحات لهم)
    بعد التحميل ادخل للبرنامج و شغل خادم الـApache , ثم انتقل الى الملفات الخاصة بالخادم على هذا المسار C:\xampp\htdocs , المفروض تجد هذه الملفات :
    [​IMG]

    للتأكد من أن كل شيئ يعمل كما يجب اذهب للمتصفح و اكتب : http://localhost .المفروض يظهر التالي
    [​IMG]
    تجهيز الملفات
    داخل الملفات الخاصة بالخادم ( الموجودة على المسار التالي: C:\xampp\htdocs ) سنقوم بانشاء ملف جديد و نسميه : fileuploader.
    داخل هذا الملف سننشئ :
    1. index.php: هذا الملف هو ما سيحتوي على كود html خاصتنا ... و هو ما يمثل كود واجهة الصفحة.
    2. style.css: ملف الCSS لتزيين الصفحة.
    3. fileHandler.js: كود جافاسكريبت . سنستعمل هذا الملف لاحقا للحصول على معلومات الملفات التي في الخادم و كذلك تنظيم الDOM.
    4. مجلد manager: هذا المجلد سيحتوي على ملفات php الأخرى . داخله سننشئ : filemanager.php و الذي يحتوي على كود الphp المسؤول عن فلترة ,استقبال و ارسال الطلبات و البيانات.
    [​IMG]
    انتقل الى http://localhost/fileuploader ليظهر موقعك على المتصفح (حاليا عبارة عن صفحة فارغة).
     
  3. المدير العام

    المدير العام أدارة موقع أكتب كود

    العمل على التصاميم frontend .
    تصميم هيكل الصفحة باستعمال HTML
    سنعمل على هيكل الصفحة التي تظهر للمستخدم و ذلك بالتعديل على الملف index.php. ما سنحتاجه هو :
    1. قائمة جانبية لظهور الملفات التي تم رفعها.
    2. لوحة لظهور بيانات الملفات.
    3. لوحة ازرار .
    سنضع كل هذه العناصر في حاوية ليسهل التعديل عليها باستعمال css

    كود HTML:
    <!DOCTYPE html>
    <html lang="ar" dir="rtl">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>رفع الملفات</title>
    </head>
    
    <body>
    
        <h1 class="main-title">رفع الملفات</h1>
        <div class="container"> <!--الحاوية-->
            <div id="list" class="file-list">
                <h2> الملفات المرفوعة</h2>
            </div>
            <div class="file-management"><!--لوحة لظهور بيانات الملفات-->
                <div>
                    الاسم:  <div id="file-name"></div>
                    <br>
                   الحجم:  <div id="file-size"></div>
                   <br>
                   نوع الملف: <div id="file-type"></div>
                   <br>
                  تاريخ الرفع:  <div id="file-upload"></div>
                  <br>
                   الرابط: <a  id="file-url"></a>
    
                </div>
                <div class="manager"><!--لوحة ازرار-->
                    <form action="" method="">
                        <input type="text"  id="file-name">
                        <input type="file" name="" id="file">
                        <input type="submit" name="submit" value="رفع">
                    </form>
                </div>
            </div>
        </div>
        <script src="filemanager.js"></script>
    </body>
    
    </html>
    المقصود بالحاوية هو عنصر div عادة يحتوي على بقيىة العناصر كعناصر ابناء
    [​IMG]

    تزيين الهيكل باستعمال الـ CSS
    لتزيين الكود السابق علينا أن نقوم بربط ملف الcss بالصفحة وذلك باضافة السطر التالي الى <head> :
    كود HTML:
    <link rel="stylesheet" href="style.css">
    اولا: سنقوم بتلوين الخلفية للاعطائها جمالا:
    لانشاء لون خلفية جميل و متدرج سنستعمل موقع https://cssgradient.io للحصول على كود الCSS الخاص بالتدرج, ثم سنقوم باضافته على عنصر <body> . الكود سيكون كالتالي:
    سنقوم ايضا بتغيير لون الكتابة و جعل حجم الصفحة يشغل كل النافذة
    كود:
    body {
        background: rgb(78, 54, 121);
        background: linear-gradient(311deg, rgba(78, 54, 121, 1) 0%, rgba(104, 116, 232, 1) 100%);
        height: 100vh; /* العنصر يشغل كل النافذة*/
        color: #ffffff;/* لون الكتابة*/
    }

    في كود الـHTML قمنا بانشاء عنصر حاوية كأب لكل العناصر التي يحتاجها المشروع و يحمل كلاس container . نريد أن نجعل هذه الحاوية حجم محدد و قليل من الظل لكي تظهر و أيضا نجعلها تتوسط الصفحة:
    • للتعديل على حجم العنصر نستعمل : width , height
    • لاظهار الظل لعناصر سنستعمل : box-shadow حيث : القيمة الأولى: تمثل الازاحة العمودية للظل . ثم القيمة الثانية: الازاحة الافقية للظل , بعدها القيمة الثالثة: كمية انتشار الظل , ثم القيمة الأخيرة: اللون.
    • لجعل عنصر يتوسط الصفحة افقيا يمكن استخدام السطر التالي: margin: auto .
    • العناصر الأبناء للحاوية يجب أن ترتب أفقيا بدل الترتيب العادي . لذلك سنستعمل display: flex . (لمعلومات أكثر ابحث عن css layouts).
    [​IMG]
    كود:
    .container {
        width: 80%;
        height: 70%;
        box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.4);
        margin: auto;
        display: flex;
        border-radius: 30px;
    }
    داخل عنصر الحاوية قمنا بانشاء عنصرين: عنصر لقائمة الملفات و عنصر للوحة التحكم.
    [​IMG]
    تصميم تخطيطي للصفحة wireframe design
    بالنسبة لعنصر قائمة الملفات و الذي يحمل كلاس : file-list , نريد أمرين:
    • أن تكون القائمة جانبية عرضها اصغر من لوحة التحكم.
    • أن تفصل عن لوحة التحكم بواسطة خط.
    الكود التالي سيؤدي المهمة:
    كود:
    .container .file-list {
        border-inline-end: #ffffff50 1px solid;
        width: 25%;
    }
    اما بالنسبة للوحة التحكم و التي تملك كلاس : file-management فهو بمثابة حاوية لعنصرين و لن يحتاج الكثير من التعديل:
    • عرضه هو المساحة المتبقية من عنصر الحاوية container.
    • طوله طول الحاوية يجب أن يكون موقع العناصر التي بداخله نسبية له
    كود:
    .container .file-management {
        width: 75%;
        height: 100%;
        position: relative;
    }
    ما تبقى لنا الآن هو جعل قائمة الأزرار ( التي تحمل كلاس manager ) اسفل قائمة التحكم :
    • يجب أن نجعل العنصر متحرر من تسلسل ترتيب العناصر لذلك سنستخدم : position: absolute
    [​IMG]
    • بما أننا نريد العنصر أن يكون في أسفل لوحة التحكم يمكننا تحقيق ذلك باستعمال bottom: 0px (يحتاج هذا السطر أن يكون العنصر متحررا لكي يعمل).
    • سنضيف خط في الأعلى للفصل بين العناصر : border-top: #ffffff50 1px solid
    • نريد أن نرتب الأبناء وفق تسلسل افقي و لذلك سنستخدم display: flex . وأيضا justify-content: flex-end لنجعل الأبناء تتجه نحو نهاية العنصر.
    • العرض يجب أن يساوي عرض لوحة التحكم.
    سيصبح الكود الكلي كالتالي:
    كود:
    .container .file-management .manager {
        position: absolute;
        bottom: 0px;
        padding-block: 20px;
        border-top: #ffffff50 1px solid;
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }
    الكود كامل هو:
    كود HTML:
    body {
        height: 100vh;
        background: rgb(78, 54, 121);
        background: linear-gradient(311deg, rgba(78, 54, 121, 1) 0%, rgba(104, 116, 232, 1) 100%);
        color: #ffffff;
    }
    
    .main-title {
        text-align: center;
        padding: 20px;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 1);
    }
    
    .container {
        width: 80%;
        height: 70%;
        border-radius: 30px;
        box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.4);
        margin: auto;
        display: flex;
    }
    
    .container .file-list {
        border-inline-end: #ffffff50 1px solid;
        width: 25%;
    }
    
    .container .file-management {
        width: 75%;
        height: 100%;
        position: relative;
    }
    
    .container .file-management .manager {
        position: absolute;
        bottom: 0px;
        padding-block: 20px;
        border-top: #ffffff50 1px solid;
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }
     
  4. المدير العام

    المدير العام أدارة موقع أكتب كود

    العمل على الـباك أند : رفع الملفات
    ارسال الطلب لرفع الملف
    بعد انشاء واجهة الموقع . سيكون علينا تجهيز طريقة لارسال طلب يحتوي على الملف الذي نريد حفظه الى الخادم .
    يتم ارسال الطلبات من صفحات الhtml بواسطة عنصر <form> :
    حيث سنقوم باستعماله لتحديد الى أين سيرسل الطلب ليتم معالجته و أيضا طريقة ارسال الطلب , و كل الحقول (input fields) التي بداخله تحمل بيانات الطلب . في صفحة الـHTML كتبنا الكود التالي :
    كود HTML:
    <div class="manager"><!--لوحة ازرار-->
        <form action="" method="" >
            <input type="text" name="file_name" id="file-name">
                   <input type="file" name="file" id="file">
                   <input type="submit" name="submit" value="رفع">
        </form>
    </div>
    لاحظ في السطر الثاني : يوجد خاصيتان وهما : method و action. حيث لكل منهم وظيفة.
    بما اننا سنقوم بارسال الطلب الى كود php موجود في صفحة اخرى ليتم معالجته, سنحدد مسار الصفحة داخل action كالتالي :
    كود:
    action="manager/filemanager.php"
    يستعمل action في تحديد أين سيتم ارسال بيانات الحقول داخل الـform
    نحن لا نريد اظهار بيانات الطلب على الرابط لذلك سنكتب:
    method="post"
    لاظهار البيانات على الرابط نستعمل method=get
    بما أننا نريد ارسال ملف عبر الطلب و ليس سلاسل نصية فقط, يجب اضافة الخاصية التالية:
    كود:
    enctype="multipart/form-data"
    [​IMG]
    في عناصر الحقول <input> يجب أن نحدد لكل عنصر اسم مميز لتعريف البيانات وذلك يتم باضافة خاصية name.
    [​IMG]
    سيصبح الشكل الكامل كالتالي:
    كود HTML:
                <div class="manager"><!--لوحة ازرار-->
                    <form action="manager/filemanager.php" method="post" enctype="multipart/form-data">
                        <input type="text" name="file_name" id="file-name">
                        <input type="file" name="file" id="file">
                        <input type="submit" name="submit" value="رفع">
                    </form>
                </div>
    كود صفحة Index.php كامل:
    كود HTML:
    <!DOCTYPE html>
    <html lang="ar" dir="rtl">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>رفع الملفات</title>
    </head>
    
    <body>
    
        <h1 class="main-title">رفع الملفات</h1>
        <div class="container"> <!-- الحاوية-->
            <div id="list" class="file-list">
                <h2> الملفات المرفوعة</h2>
            </div>
            <div class="file-management"> <!--لوحة لظهور بيانات الملفات-->
                <div>
                    الاسم:  <div id="file-name"></div>
                    <br>
                   الحجم:  <div id="file-size"></div>
                   <br>
                   نوع الملف: <div id="file-type"></div>
                   <br>
                  تاريخ الرفع:  <div id="file-upload"></div>
                  <br>
                   الرابط: <a  id="file-url"></a>
    
                </div>
                <div class="manager"><!--لوحة ازرار-->
                    <form action="manager/filemanager.php" method="post" enctype="multipart/form-data">
                        <input type="text" name="file_name" id="file-name">
                        <input type="file" name="file" id="file">
                        <input type="submit" name="submit" value="رفع">
                    </form>
                </div>
            </div>
        </div>
        <script src="filemanager.js"></script>
    </body>
    
    </html>
     
  5. المدير العام

    المدير العام أدارة موقع أكتب كود

    فلترة الطلب و حفظ الملف
    داخل عنصر الـ<form> قمنا بتحديد action="manager/filemanager.php , مما يعني أن الطلب سيتم ارساله للصفحة الموجودة بالمسار ليتم معالجته.
    ما علينا فعله هو انشاء الملف في نفس المسار (قمنا بانشاء الملفات في اول خطوة). ثم الانطلاق في كتابة كود الـPHP الذي سيقوم بمعالجة الطلب.
    سيتم معالجة الطلب كالتالي:
    1. التأكد من أن الطلب تم ارساله بالطريقة الصحيحة و أنه يحتوي على البيانات الصحيحة.
    2. تجهيز مسار رفع الملفات .
    3. التأكد أنه لا يوجد ملف تم رفعه سابقا بنفس اسم الملف الجديد.
    4. تحديد حجم الملف المرفوع (لا يجب أن يفوق حجما معينا).
    5. تحديد صيغة الملف.
    6. رفع الملف اذا استوفى كل الشروط.
    [​IMG]

    سنجهز بعض المتغيرات قبل الانطلاق:
    داخل الكود سنقوم بانشاء متغير لمسار حفظ الملفات:
    كود PHP:
    $target_dir "../user/0/files/"// مسار حفظ الملفات ...
    ثم سنبدأ بمعالجة الطلب :
    أولا نتأكد من أن الطلب سليم و يحتوي كل البيانات :
    بما اننا استعملنا في الـ <form> الطريقة: method="post , ذلك يعني ان البيانات ستخزن في المتغير POST_$ و الذي يسمى بـSUPERGLOBAL VARIABLE . و هو عبارة عن مصفوفة تحتوي كل البيانات النصية التي تم ارسالها في الطلب.
    للتأكد من أن البيانات موجودة فيه . سنقوم باستعمال دالة موجودة في الـPHP و هي isset. و التي تعطي قيمة true اذا كان المتغير له قيمة (غير فارغ) و false اذا كانت قيمته فارغة null.
    تذكر في كود HTML في عناصر الحقول قمنا باضافة خاصية name ... و دورها سيكون الأن حيث ستعمل كمفتأح للحصول على القيم من POST_$. مثلا : POST["file_name"]_$
    للتأكد من أن الطلب يحتوي على كل البيانات:
    كود PHP:
    // استقبال الملفات
    if (isset($_POST["file_name"])  && isset($_POST["submit"])) // الأمر لا يشتغل الا اذا كان يوجد البيانات اللازمة في الطلب
    {}
    ثانيا سنقوم بتجهيز مسار رفع الملف:
    المبدأ بسيط : اذا كان المسار غير موجود قم بانشائه. بعد ذلك سنقوم بانشاء بعض المتغيرات لحفظ نوع الملف الذي سيتم رفعه و مسار حفظه كامل , و أيضا متغير لتحديد اذا كان قابل للرفع او لا (طبعا سيكون في البداية قابل للرفع ثم قد يتغير ذلك مع بقية الكود).
    الكود كالتالي:
    كود PHP:
       if (!file_exists($target_dir))
            
    mkdir($target_dir0777true);
        
    $can_be_uploaded 1//الملف قابل للرفع=1 <> غير قابل للرفع=0
        
    $FILE_TYPE =  strtolower(pathinfo($target_dir basename($_FILES["file"]["name"]), PATHINFO_EXTENSION)); // تحديد نوع الملف
        
    $file_path $target_dir $_POST["file_name"] . "." $FILE_TYPE//  مسار الملف المرفوع
    basename: دالة تستعمل للحصول على اسم الملف دون بقية المسار. السبب في استخدامها أننا لا نريد أن ننشئ مجلدات ومسارات جديدة:
    كود:
      path/to/file.png ==> file.png
    pathinfo($target_dir . basename($_FILES["file"]["name"]), PATHINFO_EXTENSION) : تستعمل هذه الدالة للحصول على معلومات المسار . يمثل parametre الأول اسم المسار. و الثاني البيانات المراد الحصول عليها ( في حالتنا صيغة الملف)
    strtolower: تستعمل الدالة لتحويل الأحرف الكبيرة لصغيرة A=>a.

    ثالثا التأكد من أنه لا يوجد ملف بنفس الاسم :
    اذا كان الملف موجود مسبقا فالملف غير قابل للرفع
    كود PHP:
     //  تأكد أن الملف لم يسبق أن رفع بنفس الاسم
        
    if (file_exists($file_path)) {
            echo 
    "أسف الملف موجود سابقا";
            
    $can_be_uploaded 0;
        }
    رابعا تحديد حجم الملف المرفوع :
    يمكن الحصول على معلومات كل الملفات التي تم ارسالها في الطلب عن طريق الـsuperglobal variable التالي:FILES_$. حيث يمثل أيضا مصفوفة ثنائية الأبعاد تحمل الملفات المرسلة في الطلب و معلوماتها.
    اذا كان حجم الملف اكبر من اللازم فالملف غير قابل للرفع:

    كود PHP:
      // تحديد الحجم الأكبر للملف المرفوع
        
    if ($_FILES["file"]["size"] > 500000) {
            echo 
    "الملف كبير جدا";
            
    $can_be_uploaded 0;
        }
    خامسا : تحديد صيغة الملف:
    قمنا سابقا بانشاء متغير يحفظ صيغة الملف المرفوع FILE_TYPE$ ... ما علينا هو مقارنته مع الصيغ المرغوبة للتأكد أن الملف قابل للرفع.
    كود PHP:
        // تحديد صيغة الملفات
        
    if ($FILE_TYPE != "jpg" && $FILE_TYPE != "png" && $FILE_TYPE != "jpeg"    && $FILE_TYPE != "gif" && $FILE_TYPE != "pdf") {
            echo 
    "الصيغة غير مسموحة" $FILE_TYPE;
            
    $can_be_uploaded 0;
        }
    اخيرا: رفع الملف:
    كود PHP:
     // can_be_uploaded ارفع اذا كان الأمر مسموح
        
    if ($can_be_uploaded == 0) { // غير مسموح
            
    echo "لا يمكن الرفع";
        } else {
            if (
    move_uploaded_file($_FILES["file"]["tmp_name"], $file_path)) {
                echo 
    "تم رفع  " htmlspecialchars(basename($_FILES["file"]["name"]));
                
    header("location: ../ ");
            } else {
                echo 
    "حصل خطأ أثناء الرفع";
            }
        }
    htmlspecialchars: دالة لتحصين السلاسل النصية من اكواد html خاصة لحماية الموقع من ثغرات XSS. عليك دوما حماية المدخلات بهذه الدالة.
    header("location: ../ ") : لعودة لصفحة الاساسية بعد رفع الملف.
    الكود الكامل لمعالجة الطلب في ملف filemanagment.php:
    كود PHP:
    <?php
    $target_dir 
    "../user/0/files/"// مسار حفظ الملفات ...
    // استقبال الملفات
    if (isset($_POST["file_name"])  && isset($_POST["submit"])) // الأمر لا يشتغل الا اذا كان يوجد البيانات اللازمة في الطلب
    {

        if (!
    file_exists($target_dir))
            
    mkdir($target_dir0777true);
        
    $can_be_uploaded 1//الملف قابل للرفع=1 <> غير قابل للرفع=0
        
    $FILE_TYPE =  strtolower(pathinfo($target_dir basename($_FILES["file"]["name"]), PATHINFO_EXTENSION)); // تحديد نوع الملف
        
    $file_path $target_dir $_POST["file_name"] . "." $FILE_TYPE//  مسار الملف المرفوع

        //  تأكد أن الملف لم يسبق أن رفع بنفس الاسم
        
    if (file_exists($file_path)) {
            echo 
    "أسف الملف موجود سابقا";
            
    $can_be_uploaded 0;
        }

        
    // تحديد الحجم الأكبر للملف المرفوع
        
    if ($_FILES["file"]["size"] > 500000) {
            echo 
    "الملف كبير جدا";
            
    $can_be_uploaded 0;
        }

        
    // تحديد صيغة الملفات
        
    if ($FILE_TYPE != "jpg" && $FILE_TYPE != "png" && $FILE_TYPE != "jpeg"    && $FILE_TYPE != "gif" && $FILE_TYPE != "pdf") {
            echo 
    "الصيغة غير مسموحة" $FILE_TYPE;
            
    $can_be_uploaded 0;
        }

        
    // can_be_uploaded ارفع اذا كان الأمر مسموح
        
    if ($can_be_uploaded == 0) { // غير مسموح
            
    echo "لا يمكن الرفع";
        } else {
            if (
    move_uploaded_file($_FILES["file"]["tmp_name"], $file_path)) {
                echo 
    "تم رفع  " htmlspecialchars(basename($_FILES["file"]["name"]));
                
    header("location: ../ ");
            } else {
                echo 
    "حصل خطأ أثناء الرفع";
            }
        }
    }
     
  6. المدير العام

    المدير العام أدارة موقع أكتب كود

    ارسال قائمة بالملفات للفرونت اند
    تجهيز قائمة الملفات PHP
    بعد رفع الملفات يجب علينا اظهار الملفات التي تم رفعها للمستخدم. ولذلك سندمج بين الـfrontend و الـbackend .
    سنبدأ اولا بالـbackend, حيث سنقوم بتجهيز مصفوفة بالملفات التي تم رفعها و المعلومات الخاصة بها كالاسم و تاريخ الرفع و رابط التحميل ... سنكتب الكود في نفس الملف السابق و هو filemanager.php.
    نحتاج أولا لانشاء صنف class ليمثل بيانات الملف. حيث سيحتوي على مجموعة متغيرات (حقول) تمثل : الاسم, الحجم , تاريخ الرفع , النوع, و رابط التحميل.و ذلك بالشكل التالي:
    كود:
    class FileInfos
    {
        public $name;
        public $size;
        public $upload_day;
        public $type;
        public $d_link;
    }
    الآن سنعمل على تجهيز مصفوفة الملفات.
    • للحصول على الملفات المرفوعى باستعمال PHP يمكننا استعمال دالة : scandir والتي تعطينا قائمة بالملفات و المجلدات التي داخل المسار الذي حددناه كـparameter.
    • سنقوم بانشاء حلقة تكرارية foreach للعمل على كل عنصر في المصفوفة على حدة.
    • سنستعمل دالة is_dir للتأكد أن المسار (مسار الحفظ+عنصر المصفوفة=مسار الملف) ملف أو مجلد , حيث اننا نريد فقط الملفات وليس المجلدات.
    • لكل ملف في المصفوفة (ليس مجلد) سنقوم بانشاء كائن object جديد و نقوم بملأ البيانات الخاصة به . حيث سنستعمل
    - دالة filesize للحصول على حجم الملف (مع تحويل من byte الى الـmegabyte بعملية قسمة بسيطة)
    - دالة filetype للحصول على صيغته
    - دالة filectime للحصول على وقت الرفع (مع تحويله الى تاريخ مقروء بدالة date) .​
    ثم نقوم باضافة الكائن الى مصفوفة اخرى.
    • اخيرا سنقوم بتحويل المصفوفة الى نص json و ذلك ليتم ارساله لـfrontend لاحقا.
    الكود لكل ما سبق سيكون كالتالي:
    كود PHP:
      $list = array();
        foreach (
    scandir($target_dir) as $filename) {
            if (!
    is_dir($target_dir $filename)) {
                
    $file = new FileInfos();
                
    $file->name $filename;
                
    $file->size filesize($target_dir $filename)/1000000 ." mb";
                
    $file->type filetype($target_dir $filename);
                
    $file->upload_day date("F d Y H:i:s.",  filectime($target_dir $filename));
                
    $file->d_link str_replace($target_dir $filename,"..","");
                
    array_push($list$file);
            }
        }
        echo 
    json_encode($list);
    بما اننا نريد أن يتم ارسال قائمة الملفات عند الطلب فقط سنقوم بكتابة الكود داخل:
    كود PHP:
    if (isset($_POST["listing"])) {}
    سيصبح الكود الكامل في filemanager.php كالتالي:
    كود PHP:
    <?php
    $target_dir 
    "../user/0/files/"// مسار حفظ الملفات ...

    // استقبال الملفات
    if (isset($_POST["file_name"])  && isset($_POST["submit"])) // الأمر لا يشتغل الا اذا كان يوجد البيانات اللازمة في الطلب
    {

        if (!
    file_exists($target_dir))
            
    mkdir($target_dir0777true);
        
    $can_be_uploaded 1//الملف قابل للرفع=1 <> غير قابل للرفع=0
        
    $FILE_TYPE =  strtolower(pathinfo($target_dir basename($_FILES["file"]["name"]), PATHINFO_EXTENSION)); // تحديد نوع الملف
        
    $file_path $target_dir $_POST["file_name"] . "." $FILE_TYPE//  مسار الملف المرفوع

        //  تأكد أن الملف لم يسبق أن رفع بنفس الاسم
        
    if (file_exists($file_path)) {
            echo 
    "أسف الملف موجود سابقا";
            
    $can_be_uploaded 0;
        }

        
    // تحديد الحجم الأكبر للملف المرفوع
        
    if ($_FILES["file"]["size"] > 500000) {
            echo 
    "الملف كبير جدا";
            
    $can_be_uploaded 0;
        }

        
    // تحديد صيغة الملفات
        
    if ($FILE_TYPE != "jpg" && $FILE_TYPE != "png" && $FILE_TYPE != "jpeg"    && $FILE_TYPE != "gif" && $FILE_TYPE != "pdf") {
            echo 
    "الصيغة غير مسموحة" $FILE_TYPE;
            
    $can_be_uploaded 0;
        }

        
    // can_be_uploaded ارفع اذا كان الأمر مسموح
        
    if ($can_be_uploaded == 0) { // غير مسموح
            
    echo "لا يمكن الرفع";
        } else {
            if (
    move_uploaded_file($_FILES["file"]["tmp_name"], $file_path)) {
                echo 
    "تم رفع  " htmlspecialchars(basename($_FILES["file"]["name"]));
                
    header("location: ../ ");
            } else {
                echo 
    "حصل خطأ أثناء الرفع";
            }
        }
    }

    class 
    FileInfos
    {
        public 
    $name;
        public 
    $size;
        public 
    $upload_day;
        public 
    $type;
        public 
    $d_link;
    }

    if (isset(
    $_POST["listing"])) {
        
    $list = array();
        foreach (
    scandir($target_dir) as $filename) {
            if (!
    is_dir($target_dir $filename)) {
                
    $file = new FileInfos();
                
    $file->name $filename;
                
    $file->size filesize($target_dir $filename)/1000000 ." mb";
                
    $file->type filetype($target_dir $filename);
                
    $file->upload_day date("F d Y H:i:s.",  filectime($target_dir $filename));
                
    $file->d_link str_replace($target_dir $filename,"..","");
                
    array_push($list$file);
            }
        }
        echo 
    json_encode($list);
    }
     
  7. المدير العام

    المدير العام أدارة موقع أكتب كود

    طلب الملفات باستعمال Ajax
    بعد العمل على الـbackend سنحتاج للعمل على الـfrontend . و المطلوب هو اظهار الملفات داخل الصفحة الرئسية .

    اولا نحتاج لمعلومات الملفات و لطلبها من الخادم سنستعمل Ajax. تسمح Ajax لنا بارسال طلب الى صفحة ما باستعمال JavaScript و الحصول على الرد منها دون الحاجة لكتابة رابطها في المتصفح دون شعور المستخدم حتى.

    - لاستعمال Ajax علينا أولا انشاء سكريبت جافاسكريبت وليكن اسمه filemanager.js . ثم نقوم باستدعاءه في index.php قبل </body> بالشكل التالي:
    كود:
    <script src="filemanager.js"></script>
    داخل السكريبت سننشئ متغير اسمه files حيث يمثل مصفوفة تحفظ كائنات الملفات لاحقا, و دالة نسميها retreive_files والتي ستقوم بارسال الطلب و استقبال البيانات.

    لارسال طلب باستعمال Ajax علينا اتباع الخطوات التالية:
    اولا انشاء كائن XMLHttpRequest لانشاء طلب . و ذلك كالتالي:
    كود:
    let xhr = new XMLHttpRequest(); // انشاء طلب ajax
    ثانيا تحديد اين سيتم ارسال الطلب و طريقة الارسال (كما كنا نفعل سابقا في كود html) وذلك كالتالي:
    كود:
    xhr.open('POST', "manager/filemanager.php");
    في كود الPHP سابقا قمنا بكتابة السطر التالي:
    كود:
    if (isset($_POST["listing"]))
    مما يعني أن كود طلب الملفات االمرفوعة لن يشتغل حتى يكون في الطلب المرسل حقل يسمى listing.
    لاضافة حقول في Ajax يوجد كلاس مخصص لذلك وهو FormData حيث سنتطرق اليه لاحقا عند الارسال.

    ثالثا سندرس حالة الطلب بعد الارسال ... حيث نريد أن نعرف هل نجح الطلب و هل تم الرد من الخادم. لدراسة حالة الطلب سنكتب السطر التالي:
    كود:
    xhr.onreadystatechange = function()
    تمثل onreadystatechange حدث (event) يستدعى كلما تغير حال الطلب . حيث لما يستدعى يقوم بتشغيل الكود الموجود داخل function() .

    عند تغير حالة الطلب نريد أن نتأكد من أمرين : هل الطلب جاهز تماما , هل الطلب لا يسبب اي خطأ (طلب صحيح عند الارسال و التنفيذ). سنقوم بذلك من خلال الشرط التالي:
    كود:
    xhr.readyState == 4 && xhr.status == 200
    xhr.readyState : تستلم 4 حالات :
    1. 0 تعني لم يتم الارسال
    2. 1 تعني تم فتح و تجهيز الطلب ( تتغير الى هذا الحال بعد ()xhr.open)
    3. 2 تعني تم الحصول على headers ( تتغير بعد ()xhr.send )
    4. 3 تعني يتم تحميل الرد
    5. 4 تعني الطلب جاهز
    xhr.status: تستلم اكواد http لتبين حالة التنفيذ . حيث 200 تعني كل شيئ سليم. https://en.wikipedia.org/wiki/List_of_HTTP_status_codesP

    رابعا: سنقوم بملأ مصفوفة الملفات التي أنشأناها في البداية . تذكر في كود PHP قمنا بكتابة السطر التالي:
    كود:
    echo json_encode($list);
    و الذي يعني أنه تم تحويل المصفوفة الى نص json. لاستعادة المصفوفة (تحويل نص json الى مصفوفة) سنكتب السطر التالي:
    files = JSON.parse(xhr.response);
    حيث : xhr.response هي نص الرد من الخادم
    JSON.parse هي الدالة المسؤولة على تحويل نصوص json الى مصفوفات او كائنات.

    بالطبع سنقوم باستدعاء هذا السطر عندما يجهز الطلب . بالتالي:
    كود:
     xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                files = JSON.parse(xhr.response);
                list_files();
            }
        }
    اخيرا سنقوم بارسال الطلب :
    قبل ذلك سنقوم بانشاء كائن FormData ونعطيه حقل listing ثم نرسل الطلب بحيث يكون كاملا:
    كود:
      let fd = new FormData();
    fd.append("listing", true);
    xhr.send(fd);
    بالتالي يصبح الكود كاملا كالتالي:
    function retreive_files
    كود:
    () {
        let xhr = new XMLHttpRequest(); // انشاء طلب ajax
        xhr.open('POST', "manager/filemanager.php");
    
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                files = JSON.parse(xhr.response);
                list_files();
            }
        }
        let fd = new FormData();
        fd.append("listing", true);
        xhr.send(fd);
    }
    قم باستدعاء الدالة ليتم تشغيلها في بداية الكود. ()retreive_files
     
  8. المدير العام

    المدير العام أدارة موقع أكتب كود

    عرض الملفات على الصفحة
    بعد الحصول على البيانات و تخزينها في مصفوفة . سنقوم بعرضها على الصفحة و ذلك عن طريق js DOM .

    اولا سنحتاج لاضافة قائمة بالملفات في كود Html داخل العنصر بالكلاس file-list الذي كتبناه سابقا :

    لذلك سنقوم بانشاء دالة اخرى في ملف js و نسميها list_files . و التي تعمل على :
    اولا الحصول على عنصر القائمة في الhtml.
    لكل ملف داخل مصفوفة الملفات سنقوم بانشاء عنصر جديد و تغيير النص الذي بداخله (اسم الملف) .
    نظيف للعنصر الجديد onclick event حيث يمكننا استدعاء كود عند الضغط على العنصر.
    نظيف العنصر الجديد الى عنصر القائمة.

    الكود سيكون كالتالي:
    كود:
    function list_files() {
        let list_div = document.getElementById("list"); // الحصول على عنصر القائمة
    
        for (let i = 0; i < files.length; i++) {
            const element = files[i];
            const node = document.createElement("div"); //انشاء العنصر الجديد
            node.innerText = files[i].name; //تغيير النص الذي داخل العنصر
            node.addEventListener("click", function() { showData(i); }); // اضافة onclick event
            list_div.append(node); // اضافة العنصر الجديد الى عنصر القائمة
        }
    }
    ثانيا سنقوم باظهار بيانات الملف عند الضغط عليه. سنقوم بانشاء دالة اخرى و نسميها showData. وظيفة هذه الدالة هي اختيار الملف من المصفوفة و اظهار بياناته على الصفح
    كود:
    function showData(i) {
        let file_name = document.getElementById("file-name"); // الحصول  على عنصر اسم الملف
        let file_size = document.getElementById("file-size"); // الحصول على عنصر حجم الملف
        let file_type = document.getElementById("file-type"); // الحصول على عنصر صيغة الملف
        let file_upload = document.getElementById("file-upload"); // الحصول على وقت الرفع
        let file_url = document.getElementById("file-url"); // الحصول على وقت الرفع
    
        //تغيير نص العنصر حسب المعلومات في الملف .
        file_name.innerText = files[i].name;
        file_size.innerText = files[i].size;
        file_type.innerText = files[i].type;
        file_upload.innerText = files[i].upload_day;
        file_url.innerText = files[i].d_link;
    
    }
    لاحظ : i يمثل رقم العنصر في المصفوفة. اذا كان الملف يظهر الثالث في القائمة يعني i=2 (حيث المصفوفة تبدأ من 0)

    هكذا يصبح كود js كامل:
    كود:
    var files;
    
    function showData(i) {
        let file_name = document.getElementById("file-name"); // الحصول  على عنصر اسم الملف
        let file_size = document.getElementById("file-size"); // الحصول على عنصر حجم الملف
        let file_type = document.getElementById("file-type"); // الحصول على عنصر صيغة الملف
        let file_upload = document.getElementById("file-upload"); // الحصول على وقت الرفع
        let file_url = document.getElementById("file-url"); // الحصول على وقت الرفع
    
        //تغيير نص العنصر حسب المعلومات في الملف .
        file_name.innerText = files[i].name;
        file_size.innerText = files[i].size;
        file_type.innerText = files[i].type;
        file_upload.innerText = files[i].upload_day;
        file_url.innerText = files[i].d_link;
    
    }
    
    function list_files() {
        let list_div = document.getElementById("list"); // الحصول على عنصر القائمة
    
        for (let i = 0; i < files.length; i++) {
            const element = files[i];
            const node = document.createElement("div"); //انشاء العنصر الجديد
            node.innerText = files[i].name; //تغيير النص الذي داخل العنصر
            node.addEventListener("click", function() { showData(i); }); // اضافة onclick event
            list_div.append(node); // اضافة العنصر الجديد الى عنصر القائمة
        }
    }
    
    function retreive_files() {
        let xhr = new XMLHttpRequest(); // انشاء طلب ajax
        xhr.open('POST', "manager/filemanager.php");
    
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                files = JSON.parse(xhr.response);
                list_files();
            }
        }
        let fd = new FormData();
        fd.append("listing", true);
        xhr.send(fd);
    }
    
    retreive_files();
    
     
  9. Chokri.Z

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

    بارك الله فيك و بك. شرح أكثر من رائع.
    شرح كافي و وافي. جعله الله في ميزان حسناتك. آمين.​
     
جاري تحميل الصفحة...