فى هذا الدرس -بإذن الله- سأشرح لكم كيف تقومون ببرمجة سكربت رفع صور بسيط جدًا ، بدون استخدام قواعد بيانات، تكون هذه هى النواة بالنسبة لك للبدء فى تطوير هذا السكربت باستخدام لغات التصميم والمظهر مثل CSS وقواعد البيانات مثل MySQL.
حسنًا، بدون مقدمات طويلة، سأخبرك بدايةً بطريقة استخدام هذا السكربت لكى نعرف آلية برمجته، هذا السكربت هو صفحة واحدة تقوم من خلالها بالضغط على زر Browse ثم تقوم بإختيار صورة لرفعها من على حاسوبك على ألا يكون حجمها أكبر من 2 ميجابايت، وعند اختيار الصورة، تقوم بالضغط على زر upload، ويقوم السكربت بأخذ نسخة من هذه الصورة التى قمت بإختيارها ليقوم برفعها على السيرفر ووضعها فى مجلد اسمه image بجوار ملف السكربت، وعندها سيقوم السكربت بإظهار رابط الصورة، ويقوم أسفلها بإظهار الصورة التى تم رفعها وذلك دون عمل تحديث للصفحة وبدون استخدام آية لغات أخرى سوى HTML! ، حسنًا الآن فى السيرفر الوهمى على جهازك قم بإنشاء مجلد وسمّه upload وقم بداخله بإنشاء ملف يسمّى index.php ، وقم بإنشاء مجلد آخر داخل مجلد upload وسمّه image.
الآن سنقوم ببضع خطوات لنقوم بعمل السكربت:
1- قم بفتح ملف Index.php وضع به شيفرة HTML التالية:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Images Uploader</title> <meta http-equiv="content-type"
content="text/html; charset=utf-8" /> </head> <body
bgcolor="silver">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Images Uploader</title> <meta http-equiv="content-type"
content="text/html; charset=utf-8" /> </head> <body
bgcolor="silver">
الآن قمنا بتحديد خاصية خلفية الصفحة باللون الفضى، الآن سنقوم بعدها بغلق الوسوم السابقة عن طريق إضافة الشيفرة التالية:
</body> </html>
2- الآن سنقوم بوضع الشيفرة المسؤولة عن إظهار زر Browse وزر upload لرفع الصور،وذلك عن طريق إضافة التالي بداخل الوسم body:
الآن قمنا بإضافة الشيفرة المسؤولة عن إظهار ما تم ذكره ، وأيضًا ستلاحظون أنها قامت بإضافة كلمة Images Uploader فى أعلى منتصف الصفحة، عمومًا التحدث عن شيفرة HTML لا أريده، لأنك بالطبع تجيد على الأقل HTML وبPHP قبل أن تدخل هذا الدرس.
3- ثالث خطوة هى إضافة وسم فتح وإغلاق php كالتالى:
5- الآن ضع شيفرة php هذه أيضًا
<hr /> <p align="center"><font color="green"
size="7">Images Uploader</font></p> <br /> <hr
/> <table bgcolor="gray" align="center"> <tr><td><form action="" method="POST"
enctype="multipart/form-data"> <p> <input type="file" name="image" /> <input type="submit"
value="Upload" /> </p> </form> </td> </tr> </table>
size="7">Images Uploader</font></p> <br /> <hr
/> <table bgcolor="gray" align="center"> <tr><td><form action="" method="POST"
enctype="multipart/form-data"> <p> <input type="file" name="image" /> <input type="submit"
value="Upload" /> </p> </form> </td> </tr> </table>
الآن قمنا بإضافة الشيفرة المسؤولة عن إظهار ما تم ذكره ، وأيضًا ستلاحظون أنها قامت بإضافة كلمة Images Uploader فى أعلى منتصف الصفحة، عمومًا التحدث عن شيفرة HTML لا أريده، لأنك بالطبع تجيد على الأقل HTML وبPHP قبل أن تدخل هذا الدرس.
3- ثالث خطوة هى إضافة وسم فتح وإغلاق php كالتالى:
<?php
?>
4- الآن ينقوم بتعريف متغير يمثل رابط الموقع، وفى حالتنا هنا سيكون رابط الموقع هو رابط السيرفر الوهمى localhost ، وسيكون كما بالصيغة http://localhost بدون وضع / فى النهاية، كما بالتالى:?>
$site_url = "http://localhost";
5- الآن ضع شيفرة php هذه أيضًا
if (isset($_FILES['image']) ) {
$errors = array();
$allowed_ext = array('jpg', 'ipeg', 'png', 'gif') ;
$file_name = $_FILES['image']['name'];
$file_ext = end(explode('.', $file_name));
$file_size = $_FILES['image']['size'];
$file_tmp = $_FILES['image']['tmp_name'];
if (array($file_ext, $allowed_ext) == false) {
$errors[] = '<table bgcolor="red"
align="center"><tr><td>Extension not allowed</td></tr></table>';
}
if ($file_size > 2097152) {
$errors[] = '<table bgcolor="red"
align="center"><tr><td>File size must be under 2mb</td></tr></table>';
}
if (empty($errors)) {
if (move_uploaded_file($file_tmp, 'image/' .$file_name)) {
echo '<table bgcolor="green"
align="center"><tr><td>'.'File uploaded at the path: '.$site_url.'/image/'.$file_name.'</td></tr></table><br>';
$image_url = 'image/'.$file_name;
echo "<table align="center"
border="1"><tr><td><font color="white">The Image:</font><br></td></tr><tr><td><p align="center"><img
src="$image_url"></p></td></tr></table>";
} } else {
foreach ($errors as $error) {
echo $error, '<br />';
} } }
$errors = array();
$allowed_ext = array('jpg', 'ipeg', 'png', 'gif') ;
$file_name = $_FILES['image']['name'];
$file_ext = end(explode('.', $file_name));
$file_size = $_FILES['image']['size'];
$file_tmp = $_FILES['image']['tmp_name'];
if (array($file_ext, $allowed_ext) == false) {
$errors[] = '<table bgcolor="red"
align="center"><tr><td>Extension not allowed</td></tr></table>';
}
if ($file_size > 2097152) {
$errors[] = '<table bgcolor="red"
align="center"><tr><td>File size must be under 2mb</td></tr></table>';
}
if (empty($errors)) {
if (move_uploaded_file($file_tmp, 'image/' .$file_name)) {
echo '<table bgcolor="green"
align="center"><tr><td>'.'File uploaded at the path: '.$site_url.'/image/'.$file_name.'</td></tr></table><br>';
$image_url = 'image/'.$file_name;
echo "<table align="center"
border="1"><tr><td><font color="white">The Image:</font><br></td></tr><tr><td><p align="center"><img
src="$image_url"></p></td></tr></table>";
} } else {
foreach ($errors as $error) {
echo $error, '<br />';
} } }
- السطر الثالث، فيه نقوم بتعريف مصفوفة فيها نقوم بإدخال صيغ الصور المسموح بها.
- السطر التاسع، نتحقق ما اذا كان الملف المرفوع هو من الأنواع المسموح بها سابقًا فى المصفوفة التى تم تعريفها فى السطر الثالث.
- السطر العاشر: يظهر رسالة خطأ مكتوب بها Extension not allowed وتظهر عندما تكون صيغة الملف المرفوع ليست من الصيغ المسموح بها.
- السطر الـ12: نتحقق من إذا كان الملف المرفوع أكبر من 2 ميجابايت، ونكتبه هنا بالبايتات، وهو يساوى 2097152 بايت.
- السطر الـ13: يظهر رسالة خطأ مكتوب بها File size must be under 2mb ، وذلك إذا كان الملف المرفوع أكبر من 2 ميجابايت.
الآن لاحظنا ، أننا قمنا بإنشاء شرطين الأول هو ما إذا كان صيغة الملف من الصيغ المسموح بها، والثانى هو ما إذا كان حجم الملف أكبر من 2 ميجابايت، وقد قمنا إدخال الأخطاء فى مصفوفة اسمها errors.
- السطر الـ15: فى هذا السطر نتحقق من خلو المصفوفة errors ، أى نتحقق من عدم وجود أخطاء.
- السطر الـ16: نقوم بوضع أمر برفع الملف، وإذا نجح هذا الأمر سيقوم بتنفيذ ما بين القوسين المعكوفين.
- السطر الـ17: نقوم بإظهار رسالة للمستخدم فيها أن الصورة تم رفعها بنجاح فى مسار يتم ذكره.
- السطر الـ18: يتم تعريف متغير جديد باسم Image_url لكى نقوم بتخزين رابط الصورة التى تم رفعها فيه.
- السطر الـ19: نقوم بإنشاء جدول لكى نقوم بإظهار الصورة التى تم رفعها عن طريق الوسم img.
والآن إنتهينا من الدرس ، تستطيع الآن أن تقوم بحفظ الملف والذهاب إلى http://localhost/upload لتجربة السكربت، تستطيع الآن تطوير هذا السكربت لاحقًا باستخدام لغات المظهر وقواعد البيانات لكى يدعم تسجيل أعضاء فيه إلخ، فهذه هى النواة التى تستطيع بها إنشاء مركز رفع صور ، أو ملفات أيضًا.
ملحوظة: تلك إحدى التدوينات القديمة لي التى كتبتها منذ أكتر من سنة ونصف!
- السطر التاسع، نتحقق ما اذا كان الملف المرفوع هو من الأنواع المسموح بها سابقًا فى المصفوفة التى تم تعريفها فى السطر الثالث.
- السطر العاشر: يظهر رسالة خطأ مكتوب بها Extension not allowed وتظهر عندما تكون صيغة الملف المرفوع ليست من الصيغ المسموح بها.
- السطر الـ12: نتحقق من إذا كان الملف المرفوع أكبر من 2 ميجابايت، ونكتبه هنا بالبايتات، وهو يساوى 2097152 بايت.
- السطر الـ13: يظهر رسالة خطأ مكتوب بها File size must be under 2mb ، وذلك إذا كان الملف المرفوع أكبر من 2 ميجابايت.
الآن لاحظنا ، أننا قمنا بإنشاء شرطين الأول هو ما إذا كان صيغة الملف من الصيغ المسموح بها، والثانى هو ما إذا كان حجم الملف أكبر من 2 ميجابايت، وقد قمنا إدخال الأخطاء فى مصفوفة اسمها errors.
- السطر الـ15: فى هذا السطر نتحقق من خلو المصفوفة errors ، أى نتحقق من عدم وجود أخطاء.
- السطر الـ16: نقوم بوضع أمر برفع الملف، وإذا نجح هذا الأمر سيقوم بتنفيذ ما بين القوسين المعكوفين.
- السطر الـ17: نقوم بإظهار رسالة للمستخدم فيها أن الصورة تم رفعها بنجاح فى مسار يتم ذكره.
- السطر الـ18: يتم تعريف متغير جديد باسم Image_url لكى نقوم بتخزين رابط الصورة التى تم رفعها فيه.
- السطر الـ19: نقوم بإنشاء جدول لكى نقوم بإظهار الصورة التى تم رفعها عن طريق الوسم img.
والآن إنتهينا من الدرس ، تستطيع الآن أن تقوم بحفظ الملف والذهاب إلى http://localhost/upload لتجربة السكربت، تستطيع الآن تطوير هذا السكربت لاحقًا باستخدام لغات المظهر وقواعد البيانات لكى يدعم تسجيل أعضاء فيه إلخ، فهذه هى النواة التى تستطيع بها إنشاء مركز رفع صور ، أو ملفات أيضًا.
ملحوظة: تلك إحدى التدوينات القديمة لي التى كتبتها منذ أكتر من سنة ونصف!
0 التعليقات:
إرسال تعليق