File Manager (Silex + Kendo UI) - Tutorial

Sudden story from the past! Here is how it was. Despite the fact that I am a programmer of “a little different sense”, they turned to me with a standard request - to make a website. I usually don’t undertake such cases, but this time I decided to earn some money, especially since it was not a business card site or an online store, but a normal site with a base of some objects, objects are added-edited-deleted (ala CRUD) and they need to perform some operations. ABOUT! I thought it was an ideal task for (the name of the framework is hidden) and after all kinds of bookkeeping I immediately set to work.

Actually, nothing interesting and unusual has happened. After some time, the site was shown to the customer. And ... he was pleased. Very unexpected completion of the story.

True, there was a small request. He didn’t like the file manager, the one with which the picture can be inserted into the article. He wanted to make it somehow easier. And here and buttons as much as 20! Yes, and a lot of action. All you need is to upload a picture to the server and paste it onto a page. Well, well, I thought, their whole Internet, and I myself have made similar decisions many times. But one is terrible, like hell, another one downloads one file at a time, but the third one is like that, but it’s paid. In general, the story ended quickly, creating a simple file manager from scratch. But somehow I sat there and felt sad. And I drank (juice with pulp, of course). And he opened the IDE and it started ...

')


I corrected the code, added a bunch of some features there and wrote this article in which I would try to tell, unlike heaps of manuals, to make a blog in any way, and how to make a file manager on the Silex + Kendo UI. Without a database, without a browser and editors, and without other "husk".

First, let me start by trying to explain why I chose these particular tools (frameworks).

Silex is a microfogram, about which I have heard a review many times: “So there is no nichrome in it!”. But this is not true, Silex is a logical decision, but it was to take a huge Symfony2 and delete the vendors folder. Totally. After all, Composer was invented - a “tool”, about which many have already written, but he can, on the basis of the contents of the composer.json file, take and download the current versions of the necessary libraries (vendors). We need ORM to access the database, we love the TWIG template engine, we want to store values ​​in redis. Let's write the necessary in composer.json, execute the command php composer.phar install and now Silex is not so bad.
But for the file manager, it is much better suited than some other bulky solutions.

We need to decide what we need from silex:
1) Of course, the solution on the popular framework itself is already good
2) Work with sessions
3) Work with answers (response and redirect)
4) twig template engine
I’ll add a little why I love twig so much and strongly encourage others to use it. I am not a layout designer, but very often I have to work in templates (view) in the usual form of php: i.e. use php inserts. “Php is powerful, it's its own template maker!” - repeat the guys opposite. So it is yes, but it is too powerful template engine. Many times I caught myself thinking that I was writing logic in a template! And this is absolutely impossible to do! So twig makes you rethink the process of creating templates. It is powerful enough to be able to do a lot, and at the same time it leaves the ideas to “program” in the template.

Well, okay, with the php framework decided - let it be. Why kendo ui? Is he big? Well, yes, he really is not small. But, in the first place that I did already use kendo, and secondly, the solution on this JS framework looks beautiful.
What we need from kendo:
1) window
2) splitter
3) uploader
4) menubar
5) treeview
By the way, if you take third-party js for such purposes, you’ll get a solution that is not too small.

Now I will try to describe the operation of the application. I think you can read the code without me, so I’ll focus on the things I consider more important.

Response

Symfony2 and of course Silex have a very convenient feature to work with - they allow you to manage outgoing (response) requests. This application actively uses javascript, and js (in particular jquery ajax) can respond differently to the response from the application. In other words, if the ajax function receives a normal response with code 200, it will respond this way, and if the error is different. For example, the jquery function ajax can handle the onSuccess (answer 200 OK) and onError (not 200, but, for example, 500) methods (onSuccess and HeError recently done and fail). And with the help of the vendor HttpFoundation \ Response, you can just send a response with the necessary code.

Where it is used - we are trying to save the file (upload) in the file system. But the system administrator, something there namudril, and instead of the user www-data folder became owned by the user root. So, we can not save the file - not enough rights. Let's write the resulting error into the $ this-> error variable. And in the handler function of the action (saving the picture), we do this:

if ($save->handleUpload($sPath, $_thumbPath)) { return new Response('', 200); } else { return new Response($save->getError(), 200); } 

Where, handleUpload is a function that saves the file, if the operation succeeds, it returns TRUE, otherwise FALSE.

Namespaces

Silex tries to use all the latest php, and in particular actively uses namespaces.
In principle, you can use the usual include, but this is somehow not kosher. We will use the method that Silex offers, and the latter, in turn, has recently shifted the function of “registration of the address space” to the composer.

So. In our file manager, we can distinguish two logical parts:
1) work with the file system;
2) saving files and generating thumbnails for images.
Create two classes: class Files {} and class Save {}. Each class will be in the same file in the folder: / src / Fm / Components. In order for our application to understand where you need to download these files, we will write in composer.json:

 "autoload":{ "psr-0":{ "Fm" : "src/" } } 

And now execute the command:
php composer.phar update

Now you can use our classes, but before that we do not forget to declare them.

 use Fm\Component\Save use Fm\Component\Files 

You can appreciate the beauty of using namespaces only in a large application, but nevertheless, you should try to use the “correct” methods. After all, it often happens that if you neglect such a seemingly smallness, it may later turn out that the application has grown and it's too late to think about refactoring, and it is cheaper to rewrite it from scratch.

Depency injecting

The next feature of the Silex framework is the omnipresent Depency Injecting. If you heard about it from Symfony2 it may seem that this is some kind of most terrible and muddy hnya, which is needed only in Entrprise. And again, this opinion is not true.
1) All DI texts are completely clumsy industrial translation from English documentation that was generated in phpDocumentaror
2) People who work in this very Entrprise cannot speak in simple words or do not want to, because they know something. IT Buddhists.

I'll be back to DI. The Files () class is used a lot in code. If you work in the old fashioned way, then in every action you will have to create a new object Files (). DI allows you to create an object only once:

 $app['files'] = function() { return new Files(); }; 

And later already have his copy referring to $ app ['files']. But, it is important to remember that:

 $app['files']->getFiles($dir); //    private $_files; $app['files']->getFolderFiles(); //,   $_files; 

Will not work! Because, you need to do this:

 $class = $app['files']; $class->getFiles($dir); //    private $_files; $class->getFolderFiles(); //,   $_files; 

In other words, each time $ app ['files'] is accessed, a new copy of the “service” will be created. A new "service" can be created like this:

 $app['some_service'] = $app->share(function () { return new Service(); }); 

Then in the process of executing the application there will always be one copy of it.

The file manager is laid out on Github .

This article does not cover the kendo ui library. In principle, if there is a desire - you can make a cursory inspection of it, with features that affect the topic of the file manager.

PS Although very few people read the topic - but still:
ckfinder is not free;
elfinder is the manager who caused a stupor at the customer. It has 24 buttons, no signatures, + actions on the right click;
All these and many other FMs are written on another php, here is Silex, and the entire application logic is in:

/index.php - 11kb
/js/fm.js - 10 kb
+ "Models":
/silex/src/Fm/Components/Files.php - 11 kb
/silex/src/Fm/Components/Save.php - 3 kb