من الأسهل والأفضل استخدام مكتبة JavaScript مثل Dropzone.js لرفع الملفات، وستوفر لك واجهة سحب وإفلات لرفع الملفات، وتوفر أيضًا ميزات إضافية مثل: عرض تقدم رفع الملفات. التحقق من صحة الملفات قبل رفعها. : رفع ملفات متعددة في نفس الوقت. تخصيص مظهر واجهة رفع الملفات. وبخصوص الكود الحالي لديك أولاً عليك إضافة الكود الخاص برفع الملفات إلى صفحة profile.php وإجراء بعض التعديلات سأذكرها لاحقًا: <!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>الملف الشخصي</title> </head> <body> <h1>الملف الشخصي</h1>
Mustafa Suleiman
294 نقاط السمعة
19.7 ألف مشاهدات المحتوى
عضو منذ
1
Mustafa Suleiman
لاحظ زر الرفع هو من نوع submit و هو يرسل طلب إلى الخادم لإعادة تحميل الصفحة. حاول إضافة خاصية event.preventDefault() إلى دالة الازرار التي تتعامل مع رفع الصور، لمنع الصفحة من إعادة التحميل عند الضغط على زر رفع. أيضًا إضافة خاصية return false; إلى نهاية الدالة لإيقاف إعادة التحميل. document.getElementById('upload-form').addEventListener('submit', function(event) { event.preventDefault(); return false; });
إذن $post['profile_picture'] ربما لا تحتوي على قيمة صحيحة. قم بالتحقق من قيمتها قبل محاولة عرض الصورة: <?php echo "قيمة profile_picture: " . var_dump($post['profile_picture']); if ($post['profile_picture']): ?> <img src="data:image/jpeg;base64,<?= base64_encode($post['profile_picture']) ?>" alt="صورة الملف الشخصي" style="width: 50px; height: 50px; border-radius: 50%; display: inline-block;"> <?php else: ?> <img src="default-profile.png" alt="صورة افتراضية" style="width: 50px; height: 50px; border-radius: 50%; display: inline-block;"> <?php endif; ?> ذلك سوف يظهر لك قيمة $post['profile_picture']، ويمكنك من خلالها تحديد ما إن كانت القيمة صحيحة أم لا. وفي حال القيمة غير
لاحظ أنك تستخدم $post['$userProfilePicture'] بدلاً من $post['profile_picture']، عليك استبدال السطر الذي يظهر صورة الناشر بالتالي: <?php if ($post['profile_picture']): ?> <img src="data:image/jpeg;base64,<?= base64_encode($post['profile_picture']) ?>" alt="صورة الملف الشخصي" style="width: 50px; height: 50px; border-radius: 50%; display: inline-block;"> <?php else: ?> <img src="default-profile.png" alt="صورة افتراضية" style="width: 50px; height: 50px; border-radius: 50%; display: inline-block;"> <?php endif; ?>
من خلال إنشاء API لصفحة رفع الصور PHP، والتي تقبل رفع الصور وتعيد عنوان URL للصورة. على نظام النشر، قم بإنشاء نموذج يسمح للمستخدمين برفع الصور وإرسال الصورة إلى الـ API باستخدام JavaScript أي من خلال Fetch أو مكتبة Axios. بمجرد رفع الصورة، سيعيد الـ API عنوان URL للصورة، والذي يتم إدخاله بعد ذلك في محتوى المنشور بواسطة JavaScript. وهناك طريقة أخرى من خلال دمج وظيفة رفع الصور مباشرة في صفحة نظام النشر باستخدام JavaScript و HTML5 File API. بحيث
ذلك غير فعال، Base64 هو عملية ترميز، وليس تشفير، ويزيد حجم البيانات بنسبة 33% تقريبًا، مما يؤثر على أداء قاعدة البيانات واستهلاك المساحة. وأحيانًا تؤثر بعض الأحرف العربية على عملية الترميز/فك الترميز، مما يؤدي إلى فقدان البيانات أو ظهورها بشكل خاطئ. الحل الأفضل والمستخدم من قبل الجميع، هو استخدام ترميز UTF-8 وهو ترميز عالمي، تفقد قاعدة البيانات والترميز المستخدم بها، حيث يتم إرسال البيانات من PHP وتخزينها في قاعدة البيانات وستظهر بشكل سليم عند التخزين والاسترجاع. يمكنك ذلك من خلال
ليس بتلك البساطة، لا يكفي فقط تغيير موقع الويب وتوقع ظهور التغييرات في التطبيق. لفهم عملية تحديث PWA يجب استيعاب آلية عمل عامل الخدمة Service Worker، فهو قلب تطبيق PWA، وهو ملف جافا سكريبت يعمل في الخلفية ويعمل كوسيط بين متصفح المستخدم وموقع الويب الخاص بك، حيث يتولى مهام مثل تخزين المحتوى في ذاكرة التخزين المؤقت، وإدارة الوظائف دون اتصال بالإنترنت، وإدارة التحديثات. وعندما تقوم بإجراء تغييرات على موقع الويب لديك، يحتاج عامل الخدمة إلى معرفة تلك التغييرات، هنا يأتي
ذلك تحذير وليس خطأ، لن يؤثر على عمل الموقع، مفاده أنك تستخدم ميزة في PHP أصبحت قديمة (Deprecated) وقد يتم إزالتها في الإصدارات المستقبلية من PHP، وهي Controllers\Login::$pageFileName كخاصية ديناميكية Dynamic Property وذك الأسلوب أصبح قديمًا. ,تم إعلان ميزة إنشاء الـ Dynamic Properties في PHP كـ Deprecated في PHP 7.2. أي بدلاً من إنشاء خاصية ديناميكية، استخدم خاصية ثابتة Static Property مثل Controllers\Login::PAGE_FILE_NAME. أو استخدام متغير عادي داخل الفئة Controllers\Login لتخزين اسم الملف. // بدلاً من Controllers\Login::$pageFileName = 'login.php'; //
تستطيع إنشاء حساب مختلف على الاستضافة والتجربة أو استخدام استضافة أخرى لا تقلق من التجربة. عامًة لإعادة تعيين كلمة المرور على الاستضافة لديك، قم بالدخول للوحة التحكم admin panel لديك، ثم اضغط على manage بجانب قاعدة البيانات ثم ستجد خانة new password قم بكتابة كلمة مرور جديدة وتذكرها جيدًا. واسم المستخدم الخاص بقاعدة البيانات ستجده معروض كالتالي: https://suar.me/jM44m
لا يوجد meta tag خاص بال favicon، بل يتم إضافتها باستخدام عنصر link كما فعلت أنت، ولا يوجد إغلاق لعنصر link فهو عنصر ذاتي الاغلاق self-closing ولا يحتاج إلى إغلاق. والـ favicon ليست إلزامية، تستطيع استخدام link واحد فقط لـ favicon الأساسي، أو استخدام مقاسات مختلفة لضمان عرضها بشكل صحيح على مختلف الأجهزة. لكن الأفضل هو استخدام الـ SVG وستحتاج إلى إضافة رابط واحد فقط لأن SVG قابل لتغيير حجمه ويظهر بكل وضوح على عكس الـ PNG. <link rel="icon" sizes="any"
في الإصدار 8 كلاس ZipArchive أصبح يشدد أكثر على صلاحيات ومالكي الملفات، وعند فك ضغط ملفات من أرشيف ZIP، تقوم الفئة بفحص هل المجلد الوجهة (المجلد الذي سيتم فك ضغط الملفات فيه) يمتلك الصلاحيات والملكية الصحيحة، وإن لم يكن الأمر كذلك، فتُصدر تحذيرًا أو خطأ. والتحذيرات لديك تعني أنّ ميثود extractTo فشلت لأن العملية غير مسموح بها، وذلك على الأرجح بسبب عدم امتلاك الصلاحيات اللازمة للكتابة في المجلد الوجهة zip. حاول تغيير صلاحية الدليل zip لتمكين الكتابة فيه باستخدام الأمر
تلك الخاصية بحاجة للتبسيط بالفعل، في البداية نستخدمها لتحديد نسبة العرض إلى الارتفاع لعناصر HTML مثل الصور والفيديوهات، أي تُحدد شكل العنصر بغض النظر عن حجمه الفعلي. .image { width: 300px; aspect-ratio: 16 / 9; } لاحظ هنا ستكون صورة image بعرض 300 بكسل، وسيتم ضبط ارتفاعها تلقائيًا للحفاظ على نسبة عرض إلى ارتفاع 16:9 (مثل شاشة التلفزيون). القيمة الأولى 16 هي العرض والثانية 9 هي الإرتفاع. ونسبة العرض إلى الارتفاع 16:9 هي نسبة شائعة جدًا في شاشات التلفزيون وأجهزة
في حال توليد HTML من خلال سكريبت PHP مباشرًة فاستخدم دالة base64_encode لتحويل الصورة إلى سلسلة base64 كالتالي: <?php $image = imagecreatetruecolor(200, 200); ob_start(); imagepng($image); $image_data = ob_get_clean(); $image_base64 = base64_encode($image_data); echo '<img src="data:image/png;base64,' . $image_base64 . '">'; imagedestroy($image); ?> ob_start() يبدأ بافر الإخراج و $imageData = ob_get_contents() يحصل على محتوى بافر الإخراج. و $base64Image = base64_encode($imageData) يقوم بتحويل البيانات إلى base64. و imagedestroy($image) يقوم بإغلاق الصورة المعدلة. ولو تريد تحويل صورة موجودة لديك بالفعل استخدم دالة imagecreatefromjpeg $image =
للعلم jQuery تعتمد على جافاسكريبت، هي فقط تسهل القيام بأمور تحتاج وقت لتنفيذها من خلال جافاسكريبت، لكن ذلك كان في الماضي، فحاليًا جافاسكريبت بنسختها الحديثة أصبحت قادرة على القيام بوظائف مكتبة jQuery بشكل أفضل. أي أصبحت اللغة نفسها أكثر قوة وسهولة في الاستخدام. بخصوص ما تريده، فللتوضيح fetch لا تُرسل الكوكيز بشكل افتراضي إلا إن كانت تُرسل من نفس النطاق domain الذي تم تحميل الصفحة منه. ولتخطي تلك المشكلة، ستحتاج إلى إضافة خيار credentials: 'include' إلى خيارات fetch لضمان إرسال
ذلك كائن وليس مصفوفة، ستحتاج إلى طريقة غير مباشرة للقيام بما تريده وهو استخلاص الخواص من الكائن للحصول على مصفوفة بأسماء الخواص ثم المرور عليها واستخلاص القيم بواسطة forEach كالتالي: const user = {"name":"ali","age":23,"city":"aden"}; const keys = Object.keys(user); keys.forEach(function(key) { console.log(key + ": " + user[key]); }); وبدونها سنحصل على القيم بشكل أسهل من خلال for in كالتالي: const user = {"name":"ali","age":23,"city":"aden"}; for (const key in user) { console.log(key + ": " + user[key]); }
أبسط طريقة هي من خلال CSS كالتالي: @media (prefers-color-scheme: dark) { body { background-color: #333; color: #fff; } } @media (prefers-color-scheme: light) { body { background-color: #fff; color: #333; } } لاحظ استخدام prefers-color-scheme وهي media query تكتشف تفضيلات المستخدم تلقائيًا وتطبيق الوضع المفعل لديه في المتصفح.
الأمر مختلف، فأنت بحاجة إلى تطبيق للهواتف وأبسط طريقة لفعل ذلك هي إنشاء تطبيق من خلال webview ستجد أدوات مثل Cordova تقوم بذلك حيث تغلف الـ PWA لديك من خلال Wrapper يمنحك إمكانية الوصول للكامير والـ GPS وغيرهم في الهاتف. ولديك أيضًا https://www.pwabuilder.com لو أردت استخدام إطار عمل، فلديك Ionic. لكن لبناء تطبيق حقيقي فلديك Flutter أو React Native.
هل الاستضافة بها SSH؟ لكي تتمكن من الإتصال بالسيرفر عن طريق منفذ الأوامر لديك ثم تنفيذ السكريبت، مثلاً قم بإنشاء ملف سكريبت bash باسم hello.sh وضع به التالي: #!/bin/bash echo "Hello, World!" ثم قم برفعه للاستضافة وقم بالإتصال عن طريق SSH (من خلال powershell في ويندوز 11) ثم نفذ الأوامر التالية: chmod +x /var/www/html/hello.sh /var/www/html/hello.sh الأول لمنح صلاحية التنفيذ للملف أي صلاحية chmod 755. والأمر الثاني لتنفيذ الملف وذلك على إفتراض أنه في المسار /var/www/html/hello.sh لذا عليك تعديل المسار بما
صحيح، لكن لا حاجة إلى ذلك فجافاسكريبت حاليًا توفر لك نفس الأمر وذلك من خلال الاستماع إلى حدث DOMContentLoaded كالتالي: document.addEventListener("DOMContentLoaded", function() { }); هنا سيتم تنفيذ الكود فور تحميل الـ DOM أي كود HTML. لكن لو أردت الإنتظار لحين إنتهاء تحميل ملفات CSS والصور والسكريبتات الأخرى، فنستمع إلى حدث load: window.addEventListener("load", function() { });