Установка и настройка Elfinder

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

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

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

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

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

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

Я буду писать с расчетом на то что у вас есть ssh доступ к хостингу, но все можно сделать и через ftp, действия аналогичны, но только по ssh намного удобнее. У программы есть репозиторий на Github там же можно скачать архив с нужной версией или исходники. На данный момент самая последняя стабильная версия — 2.0. Ее можно загрузить по следующей ссылке: https://github.com/Studio-42/elFinder#downloads или выполнив команду:

wget https://github.com/downloads/Studio-42/elFinder/elfinder-2.0-rc1.tar.gz

Дальше распаковываем архив:

tar xvzf elfinder-2.0-rc1.tar.gz

$ mv elfinder-2.0-rc1 elfinder

Программа установлена и доступна по адресу:

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

Но есть несколько замечаний: интерфейс английский, корневой каталог не тот, размер окна слишком маленький и самая главная проблема — нет никакой защиты, любой может делать все что хочет с нашими файлами. Будем исправлять.

Настройка Elfinder

Настройка elfinder начнется с изменения корневого каталога. Все настройки касательно работы с файловой системой находятся в файле connector.php. Все настройки хранятся в массиве opts, за корневую файловую систему отвечает подмассив roots:

nano elfinder/php/connector.php

[sourcecode]$opts = array(


‘roots’ => array(
array(
‘driver’ => ‘LocalFileSystem’,
‘path’ => ‘../’,
‘URL’ => ‘http://localhost/’
)
)
);[/sourcecode]

По умолчанию в качестве корня используется подкаталог files, потому мы и не увидели никаких файлов при первом запуске. Установим в качестве корня папку, в которой находится elfinder, То есть нашу public_html, адрес родительской папки записывается как «..». Теперь нам остается только заменить значение параметра path как показано в примере.

Вот теперь правильно, есть файлы:

elfinder1

Теперь можно заняться интерфейсом. Интерфейс настраивается путем передачи опций при создании экземпляра 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]

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

elfinder1

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

nano elfinder/.htaccess

DirectoryIndex elfinder.php

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

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

Выводы

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

Creative Commons License
Статья Установка и настройка Elfinder распространяется под лицензией Creative Commons ShareAlike 4.0 при копировании материала ссылка на источник обязательна.
Ваше имя тоже может быть здесь. Начните писать статьи для Losst. Это просто! Смотрите подробнее как начать писать статьи - Пишите для нас

Оцените статью:

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (3 оценок, среднее: 5,00 из 5)
Загрузка...

2 комментария

  1. kwakin Апрель 24, 2016 Ответить
    • admin Апрель 24, 2016 Ответить

Ответить

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: