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

المدير العام · ‏12/7/2022

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

في هذا المشروع سنقوم بانشاء تطبيق موقع بسيط لرفع الملفات باستخدام 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

المدير العام · ‏12/7/2022

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

للتأكد من أن كل شيئ يعمل كما يجب اذهب للمتصفح و اكتب : http://localhost .المفروض يظهر التالي

تجهيز الملفات
داخل الملفات الخاصة بالخادم ( الموجودة على المسار التالي: C:\xampp\htdocs ) سنقوم بانشاء ملف جديد و نسميه : fileuploader.
داخل هذا الملف سننشئ :

index.php: هذا الملف هو ما سيحتوي على كود html خاصتنا ... و هو ما يمثل كود واجهة الصفحة.

style.css: ملف الCSS لتزيين الصفحة.

fileHandler.js: كود جافاسكريبت . سنستعمل هذا الملف لاحقا للحصول على معلومات الملفات التي في الخادم و كذلك تنظيم الDOM.

مجلد manager: هذا المجلد سيحتوي على ملفات php الأخرى . داخله سننشئ : filemanager.php و الذي يحتوي على كود الphp المسؤول عن فلترة ,استقبال و ارسال الطلبات و البيانات.

انتقل الى http://localhost/fileuploader ليظهر موقعك على المتصفح (حاليا عبارة عن صفحة فارغة).

المدير العام · ‏12/7/2022

العمل على التصاميم frontend .
تصميم هيكل الصفحة باستعمال HTML
سنعمل على هيكل الصفحة التي تظهر للمستخدم و ذلك بالتعديل على الملف index.php. ما سنحتاجه هو :

قائمة جانبية لظهور الملفات التي تم رفعها.

لوحة لظهور بيانات الملفات.

لوحة ازرار .

سنضع كل هذه العناصر في حاوية ليسهل التعديل عليها باستعمال 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 عادة يحتوي على بقيىة العناصر كعناصر ابناء

تزيين الهيكل باستعمال الـ 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).
كود:
.container {
    width: 80%;
    height: 70%;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.4);
    margin: auto;
    display: flex;
    border-radius: 30px;
}
داخل عنصر الحاوية قمنا بانشاء عنصرين: عنصر لقائمة الملفات و عنصر للوحة التحكم.

تصميم تخطيطي للصفحة 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

بما أننا نريد العنصر أن يكون في أسفل لوحة التحكم يمكننا تحقيق ذلك باستعمال 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%;
}

المدير العام · ‏12/7/2022

العمل على الـباك أند : رفع الملفات
ارسال الطلب لرفع الملف
بعد انشاء واجهة الموقع . سيكون علينا تجهيز طريقة لارسال طلب يحتوي على الملف الذي نريد حفظه الى الخادم .
يتم ارسال الطلبات من صفحات ال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"
في عناصر الحقول <input> يجب أن نحدد لكل عنصر اسم مميز لتعريف البيانات وذلك يتم باضافة خاصية name.

سيصبح الشكل الكامل كالتالي:
كود 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>

المدير العام · ‏12/7/2022

فلترة الطلب و حفظ الملف
داخل عنصر الـ<form> قمنا بتحديد action="manager/filemanager.php , مما يعني أن الطلب سيتم ارساله للصفحة الموجودة بالمسار ليتم معالجته.
ما علينا فعله هو انشاء الملف في نفس المسار (قمنا بانشاء الملفات في اول خطوة). ثم الانطلاق في كتابة كود الـPHP الذي سيقوم بمعالجة الطلب.
سيتم معالجة الطلب كالتالي:

التأكد من أن الطلب تم ارساله بالطريقة الصحيحة و أنه يحتوي على البيانات الصحيحة.

تجهيز مسار رفع الملفات .

التأكد أنه لا يوجد ملف تم رفعه سابقا بنفس اسم الملف الجديد.

تحديد حجم الملف المرفوع (لا يجب أن يفوق حجما معينا).

تحديد صيغة الملف.

رفع الملف اذا استوفى كل الشروط.

سنجهز بعض المتغيرات قبل الانطلاق:
داخل الكود سنقوم بانشاء متغير لمسار حفظ الملفات:

كود 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_dir, 0777, true); $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_dir, 0777, true);     $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 "حصل خطأ أثناء الرفع";         }     } }

المدير العام · ‏12/7/2022

ارسال قائمة بالملفات للفرونت اند
تجهيز قائمة الملفات 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_dir, 0777, true); $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); }

المدير العام · ‏12/7/2022

طلب الملفات باستعمال 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 حالات :

0 تعني لم يتم الارسال

1 تعني تم فتح و تجهيز الطلب ( تتغير الى هذا الحال بعد ()xhr.open)

2 تعني تم الحصول على headers ( تتغير بعد ()xhr.send )

3 تعني يتم تحميل الرد

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

المدير العام · ‏12/7/2022

عرض الملفات على الصفحة
بعد الحصول على البيانات و تخزينها في مصفوفة . سنقوم بعرضها على الصفحة و ذلك عن طريق 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();

Chokri.Z · ‏14/7/2022

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

تسجيل الدخول

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

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

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

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

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

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

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

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

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

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

أنشاء نص متدرج جميل بأستخدام 3 أسطر فقط بأستخدام CSS

أنشاء نظام كامل لتسجيل الدخول بـ PHP

كود لأنشاء حساب على الفيسبوك

إرشادات لأنشاء كلمة مرور قوية

دورة تعليمية لتعلم ( Jasper Reports ) لأنشاء التقارير بالصوت والصورة

تسجيل الدخول

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

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

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

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

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

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

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

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

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

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

أنشاء نص متدرج جميل بأستخدام 3 أسطر فقط بأستخدام CSS

أنشاء نظام كامل لتسجيل الدخول بـ PHP

كود لأنشاء حساب على الفيسبوك

إرشادات لأنشاء كلمة مرور قوية

دورة تعليمية لتعلم ( Jasper Reports ) لأنشاء التقارير بالصوت والصورة

عمليات بحث مفيدة