لا تحتاج إلى قدر كبير من التعليمات البرمجية لإنشاء مدير ملفات ويب

إن تحميل الملفات وتنزيلها في متصفح الويب يعد مهمة شائعة في أي تطبيق أو خدمة ويب تقريبًا. توضح هذه المقالة كيفية القيام بذلك باستخدام قدر ضئيل للغاية من الترميز - في أقل من 100 سطر من التعليمات البرمجية. قاعدة البيانات المستخدمة هي PostgreSQL، وخادم الويب هو Nginx.

ستستخدم Gliimly كخادم تطبيقات ولغة برمجة. سيتم تشغيله خلف خادم الويب لتحسين الأداء والأمان، فضلاً عن تمكين وظائف الويب الأكثر ثراءً. بهذه الطريقة، لا يستطيع المستخدم النهائي التحدث إلى خادم التطبيق الخاص بك مباشرةً لأن جميع هذه الطلبات تمر عبر خادم الويب، بينما يمكن لتطبيقك الخلفي التحدث مباشرةً إلى خادم التطبيق الخاص بك لتحسين الأداء.

بافتراض أن مستخدم Linux الذي قام بتسجيل الدخول حاليًا سيكون مالكًا للتطبيق، قم بإنشاء دليل كود المصدر وقم أيضًا بإنشاء تطبيق Gliimly باسم "file-manager":

 mkdir filemgr cd filemgr gg -k file-manager

بعد ذلك، قم بإنشاء قاعدة بيانات PostgreSQL باسم "db_file_manager"، المملوكة للمستخدم الذي سجل الدخول حاليًا (أي الإعداد بدون كلمة مرور):

 echo "create user $(whoami); create database db_file_manager with owner=$(whoami); grant all on database db_file_manager to $(whoami); \q" | sudo -u postgres psql

إنشاء ملف تكوين قاعدة البيانات الذي يستخدمه Gliimly والذي يصف قاعدة البيانات (إنه ملف "db"):

 echo "user=$(whoami) dbname=db_file_manager" > db

إنشاء جدول SQL الذي سيحمل الملفات المخزنة حاليًا على الخادم:

 echo "create table if not exists files (fileName varchar(100), localPath varchar(300), extension varchar(10), description varchar(200), fileSize int, fileID bigserial primary key);" | psql -d db_file_manager

أخيرًا، قم بإنشاء ملفات Gliimly المصدرية. أولاً، قم بإنشاء ملف "start.gliim" وانسخه وألصقه:

 begin-handler /start public @<h2>File Manager</h2> @To manage the uploaded files, <a href="<<p-path "/list">>">click here.</a><br/> @<br/> @<form action="<<p-path "/upload">>" method="POST" enctype="multipart/form-data"> @ <label for="file_description">File description:</label><br> @ <textarea name="filedesc" rows="3" columns="50"></textarea><br/> @ <br/> @ <label for="filename">File:</label> @ <input type="file" name="file" value=""><br><br> @ <input type="submit" value="Submit"> @</form> end-handler

قم بإنشاء ملف "list.gliim" ثم انسخ وألصق:

 begin-handler /list public @<h2>List of files</h2> @To add a file, <a href="<<p-path "/start">>">click here</a><br/><br/> @<table border="1"> @<tr> @ <td>File</td><td>Description</td><td>Size</td><td>Show</td><td>Delete</td> @</tr> run-query @db= \ "select fileName, description, fileSize, fileID from files order by fileSize desc" \ output file_name, description noencode, file_size, file_ID @<tr> @ <td><<p-web file_name>></td><td><<p-web description>><td><<p-web file_size>></td> @ <td><a href="<<p-path "/download">>/file_id=<<p-url file_ID>>">Show</a></td> @ <td><a href="<<p-path "/delete">>/action=confirm/file_id=<<p-url file_ID>>">Delete</a></td> @</tr> end-query @</table> end-handler

قم بإنشاء ملف "upload.gliim" ثم انسخه والصقه:

 begin-handler /upload public get-param filedesc // file description from the upload form get-param file_filename // file name get-param file_location // the path to uploaded file get-param file_size // size in bytes get-param file_ext // the file extension @<h2>Uploading file</h2> run-query @db= \ "insert into files (fileName, localPath, extension, description, fileSize) \ values ('%s', '%s', '%s', '%s', '%s')" \ input file_filename, file_location, file_ext, filedesc, file_size end-query @File <<p-web file_filename>> of size <<p-web file_size>> \ is stored on server at <<p-web file_location>>. \ File description is <<p-web filedesc>>.<hr/> end-handler

قم بإنشاء ملف "download.gliim" ثم انسخه والصقه:

 begin-handler /download public get-param file_id run-query @db= \ "select localPath,extension from files where fileID='%s'" \ input file_id \ output local_path, ext \ row-count num_files if-true ext equal ".jpg" send-file local_path headers content-type "image/jpg" else-if ext equal ".pdf" send-file local_path headers content-type "application/pdf" else-if send-file local_path headers content-type "application/octet-stream" download end-if end-query if-true num_files not-equal 1 @Cannot find this file!<hr/> exit-handler end-if end-handler

قم بإنشاء ملف "delete.gliim" ثم انسخ وألصق:

 begin-handler /delete public @<h2>Delete a file</h2> get-param action get-param file_id run-query @db="select fileName, localPath, description from files where fileID='%s'" output file_name, local_path, desc input file_id if-true action equal "confirm" // get file information to confirm what will be deleted @Are you sure you want to delete file <<p-web file_name>> (<<p-web desc>>)? Click <a href="<<p-path "/delete">>?action=delete&amp;file_id=<<p-url file_id>>">Delete</a> or click the browser's Back button to go back.<br/> else-if action equal "delete" // actual delete file, once confirmed begin-transaction @db run-query @db= "delete from files where fileID='%s'" input file_id error err no-loop if-true err not-equal "0" @Could not delete the file (error <<p-web err>>) rollback-transaction @db else-if delete-file local_path status st if-true st equal GG_OKAY commit-transaction @db @File deleted. Go back to <a href="<<p-path "/start">>">start page</a> else-if rollback-transaction @db @File could not be deleted, error <<p-num st>> end-if end-if else-if @Unrecognized action <<p-web action>> end-if end-query end-handler

قم بتقديم الطلب:

 gg -q --db=postgres:db

قم بتشغيل خادم التطبيق الخاص بك:

 mgrg file-manager

يوجد خادم ويب أمام خادم تطبيق Gliimly، لذا يلزم إعداده. هذا المثال مخصص لنظام التشغيل Ubuntu، لذا قم بتعديل ملف تكوين Nginx هناك:

 sudo vi /etc/nginx/sites-enabled/default

أضف هذا في قسم "server {}" (يسمح "client_max_body_size" بتحميل صور ذات أحجام نموذجية):

 location /file-manager/ { include /etc/nginx/fastcgi_params; fastcgi_pass unix:///var/lib/gg/file-manager/sock/sock; } client_max_body_size 100M;

أعد تشغيل Nginx:

 sudo systemctl restart nginx

انتقل إلى متصفح الويب الخاص بك، وأدخل:

 http://127.0.0.1/file-manager/start

هذا هو الشكل النهائي الذي تبدو عليه النتيجة. من الواضح أننا استخدمنا HTML فقط، ولكن هذا ليس الهدف هنا على الإطلاق. يمكنك استخدام أي نوع من تقنيات الواجهة الأمامية، والهدف هو إظهار Gliimly كخادم خلفي لتطبيقات/خدمات الويب.

إليك الشاشة الرئيسية، مع نموذج لتحميل ملف ورابط إلى قائمة الملفات:

ملفات القائمة:

طلب حذف ملف:

تأكيد الحذف: