Elfinder — популярный среди вебмастеров файловый менеджер с веб-интерфейсом от российских разработчиков. Он предназначен для управления файлами на хостингах и веб-сайтах.

Elfinder написан на JavaScript, а серверная часть на php и предоставляет очень большой ряд возможностей как для файлового менеджера в веб-браузере:

  • Просмотр и редактирование текстовых файлов;
  • Создание и распаковка архивов tar, zip, gpzip, 7z;
  • Полностью поддерживаются стандартные операции с файлами — создание, удаление, перемещение, копирование;
  • Превью для картинок и разные иконки для типов файлов;
  • Сортировка файлов;
  • Поддержка работы с файлами по FTP так и в локальной файловой системе;
  • Вывод информации о файлах;
  • Возможность реализовать виртуальную файловую систему в mysql;

Мне Elfinder приглянулся когда он был предустановлен как стандартный файловый менеджер на хостинге, которым я тогда пользовался. Но со временем хостинг пришлось сменить. Тогда я и задался вопросом как установить эту замечательную программу на новый хостинг.

В интернете полным-полно инструкций по установке elfinder в качестве модуля durpal, yii, wordpress и т д. Но мне нужна была именно чистая установка elfinder, без какой-либо интеграции. После нескольких часов изучения зарубежных сайтов и официальной документации решение все-таки было найдено. В этой статье будет рассмотрена чистая установка и настройка файлового менеджера elfinder.

Установка elfinder на хостинг

Я буду писать с расчетом на то что у вас есть ssh доступ к хостингу, но все можно сделать и через ftp, действия аналогичны, но только по ssh намного удобнее. У программы есть репозиторий на Github там же можно скачать архив с нужной версией или исходники. На данный момент самая последняя стабильная версия — 2.0. Ее можно загрузить по следующей ссылке: 

Теперь можно заняться интерфейсом. Интерфейс настраивается путем передачи опций при создании экземпляра Elfinder в Javascript. Откройте файл elfinder.html и приведите код запуска программы к такому виду:

nano elfinder/elfinder.html

<!-- elFinder initialization (REQUIRED) -->
<script type="text/javascript" charset="utf-8">
$().ready(function() {
var elf = $('#elfinder').elfinder({
url : 'php/connector.php', // connector URL (REQUIRED)
lang : 'ru',
height : '600'
}).elfinder('instance');
});
</script>

Здесь lang: ‘ru’ включает русский язык интерфейса, а параметр height указывает длину окна программы. Не забудьте поставить кому после строчки url : ‘php/connector.php’ иначе будет ошибка.

Осталось самое интересное — защита доступа к файлам паролем. Для запоминания пользователей будем использовать переменную $_SESSION, а логин и пароль будем проверять прямо в скрипте. Писать самому код было лень, поэтому взял с одного англоязычного ресурса и чуть подкорректировал.

Сначала переименовываем elfinder.html в elfinder.php:

mv elfinder/elfinder.html elfinder/elfinder.php

Теперь добавим следующий код для авторизации и проверки пользователей в начало файла:

[sourcecode]$ nano elfinder/elfinder.php

<?php
session_start();

if(isset($_GET['logout'])){
session_destroy();
header('Location: elfinder.php');
exit();
}

if(!isset($_SESSION['authorized'])){

if(isset($_POST['submit'])){
if($_POST['username'] =='admin' && $_POST['password'] == 'password'){
$_SESSION['authorized'] = true;
header('Location: elfinder.php');
exit();
}
}

?>

<form action='' method='post' autocomplete='off'>
<p>Username: <input type="text" name="username" value=""></p>
<p>Password: <input type="password" name="password" value=""></p>
<p><input type="submit" name="submit" value="Login"></p>
</form>

<?php } else { ?>[/sourcecode]

А это нужно дописать в конец файла после стандартного кода:

[sourcecode]<?php } ?>[/sourcecode]

Еще можно добавить строчку в тег body для удаления сессии:

[sourcecode]<!-- Element where elFinder will be created (REQUIRED) -->
<div id="elfinder"></div>
<p><a href='?logout'>Logout</a></p>[/sourcecode]

С этим все, теперь всех кто попытается получить доступ к файлам остановит пароль:

Вводить каждый раз имя скрипта бессмысленно и неудобно, сделаем чтобы elfinder.php открывался по умолчанию с помощью .htaccess:

nano elfinder/.htaccess

DirectoryIndex elfinder.php

Теперь файловый менеджер готов к работе. Для того чтобы посмотреть что получилось используйте url:

http://адрес_сайта/elfinder

Выводы

Мы рассмотрели как выполняется установка и настройка elfinder. Если после прочтения статьи у вас появились предложения, замечания или вопросы, пишите комментарии!

Источник: losst.ru