Как за 5 мин создать шаблон с удобным веб интерфейсом (админкой).

Лев

Client
Регистрация
09.12.2014
Сообщения
290
Реакции
273
Баллы
63
Все вы знаете, что в Zennoposter появилась прекрасная возможность работать с базами данных. И основной вопрос: “В чем же преимущество базы данных над excel таблицей”. Самый очевидный ответ – база данных позволяет легко манипулировать строками, т.е. задавать критерии поиска, сортировки и т.д. И все это – одной строчкой кода. Единственный минус – это плохая визуализация. Поэтому в данной статье я покажу, как за 5 минут создать для базы красивый веб интерфейс (админку). И для этого не нужно обладать какими-то знаниями.
В этом нам поможет XCRUD. XCRUD – php скрипт, который за две минуты поможет вам визуализировать таблицу, которую легко редактировать. Также у него имеется ряд удобных фишек, о которых речь пойдет ниже.
Итак, первое что нужно, это скачать скрипт и закинуть его на хостинг (если у вас нет хостинга, то можете работать через OpenServer).
Далее переходим в папку xcrud и редактируем файл xcrud_config.php (прописываем данные для подключения к базе данных):
Код:
Развернуть Свернуть Копировать
// default connection
public static $dbname = 'xcrud'; // Имя базы данных
public static $dbuser = 'root'; // Имя пользователя
public static $dbpass = ''; // // Пароль пользователя
public static $dbhost = 'localhost'; // Хост.
Те же самые данные мы добавляем в Zennoposter в настройки подключения к базе данных.
15-12-2016-14-08-34-jpg.17330

Основная часть сделана. Осталось создать в корне домена файл index.php и добавить туда несколько строчек кода:
Код:
Развернуть Свернуть Копировать
include('xcrud/xcrud.php');
$xcrud = Xcrud::get_instance();
$xcrud->table(‘xcrudtable’);
echo $xcrud->render();
Где xcrudtable – название таблицы базы данных
По сути, после этого у нас уже получается что-то наподобие таблицы Excel, ячейки которой легко редактировать.

15-12-2016-14-40-09-jpg.17332


15-12-2016-14-35-59-jpg.17333

Однако данный скрипт позволяет сделать намного больше.
Все удобства пишутся в виде функций в файле function.php
Приведу несколько примеров из шаблона для публикации постов Вконтакте.
  1. Кнопка для быстрой модерации постов.
15-12-2016-14-53-21-jpg.17334

При нажатии на эту кнопку меняется значение в столбце ‘Опубликовать’. Т.е. мы быстро можем поставить нужный нам пост на модерацию, одним кликом мыши.
При этом в самом шаблоне достаточно выбирать все посты, у которых значение в столбце publish (Опубликовать?) равно 1.
15-12-2016-14-58-22-jpg.17335

Все просто. В самом файле index.php делаем следующее.
Создаем экшны:
Код:
Развернуть Свернуть Копировать
$xcrud->create_action('publish', 'publish_action'); // action callback, function publish_action() in functions.php
$xcrud->create_action('unpublish', 'unpublish_action');
И кнопки, которые будут вызывать эти экшны.
Код:
Развернуть Свернуть Копировать
$xcrud->button('#', 'unpublished', 'icon-close glyphicon glyphicon-remove', 'xcrud-action',
array( // set action vars to the button
'data-task' => 'action',
'data-action' => 'publish',
'data-primary' => '{id}'),
array( // set condition ( when button must be shown)
'publish',
'!=',
'1')
);
$xcrud->button('#', 'published', 'icon-checkmark glyphicon glyphicon-ok', 'xcrud-action', array(
'data-task' => 'action',
'data-action' => 'unpublish',
'data-primary' => '{id}'), array(
'publish',
'=',
'1'));
Все, осталось в файле function.php описать, что будут делать вызываемые функции 'publish_action' и 'unpublish_action'
В нашем случае, они будут менять значение в столбце ‘Publish’ с нуля на единицу.
Код:
Развернуть Свернуть Копировать
function publish_action($xcrud)
{
if ($xcrud->get('primary'))
{
$db = Xcrud_db::get_instance();
$query = 'UPDATE groupvk SET `publish` = \'1\' WHERE id = ' . (int)$xcrud->get('primary');
$db->query($query);
}
}
function unpublish_action($xcrud)
{
if ($xcrud->get('primary'))
{
$db = Xcrud_db::get_instance();
$query = 'UPDATE groupvk SET `publish` = \'0\' WHERE id = ' . (int)$xcrud->get('primary');
$db->query($query);
}
}
Кстати, все таблицы, для того, чтобы они корректно работали с xcrud, должны иметь столбец id – первичный ключ.
XCRUD еще хорош тем, что он автоматически умеет определять, какого типа у вас столбцы, и в зависимости от этого меняет интерфейс при редактировании. Так, если у вас будет в базе данных ячейка типа Дата, то при редактировании будет удобный календарь.

15-12-2016-15-08-04-jpg.17336
 
Номер конкурса статей
  1. Шестой конкурс статей
Тема статьи
  1. Другое

Вложения

  • 15-12-2016 14-08-34.jpg
    15-12-2016 14-08-34.jpg
    51 KB · Просмотры: 8 461
  • 15-12-2016 14-40-09.jpg
    15-12-2016 14-40-09.jpg
    97,2 KB · Просмотры: 8 551
  • 15-12-2016 14-35-59.jpg
    15-12-2016 14-35-59.jpg
    109,9 KB · Просмотры: 8 592
  • 15-12-2016 14-53-21.jpg
    15-12-2016 14-53-21.jpg
    117,1 KB · Просмотры: 8 247
  • 15-12-2016 14-58-22.jpg
    15-12-2016 14-58-22.jpg
    85,1 KB · Просмотры: 8 276
  • 15-12-2016 15-08-04.jpg
    15-12-2016 15-08-04.jpg
    73,9 KB · Просмотры: 8 472
  • 15-12-2016 15-14-56.jpg
    15-12-2016 15-14-56.jpg
    192,9 KB · Просмотры: 1 348
  • 15-12-2016 15-18-59.jpg
    15-12-2016 15-18-59.jpg
    28,2 KB · Просмотры: 1 337
Прям в тему,то что нужно,как раз собирался расширить свой опыт в плане БД,а то в шабах списки и таблицы,но уже чувствуется что нужно переходить к БД.
За статью спасибо!
 
Прям в тему,то что нужно,как раз собирался расширить свой опыт в плане БД,а то в шабах списки и таблицы,но уже чувствуется что нужно переходить к БД.
За статью спасибо!
Это точно, бд такая штука, которая рано или поздно нужна всем, но ппц как лень за неё браться))
 
Теперь можно одним кликом ставить посты на публикацию и задавать дату публикацию, а в Zennoposter лишь делать проверку этих двух условий.

Код:
Развернуть Свернуть Копировать
SELECT * FROM groupvk WHERE publish = '1' AND result <> 'Опубликовано' AND group_name <> '' AND (TO_DAYS(NOW()) - TO_DAYS(date_insert) >= 0 OR date_insert = ''

Также легко модерировать картинки. Если прописать в файле index.php для какого- либо столбца такую строчку.

Код:
Развернуть Свернуть Копировать
$xcrud->change_type('image_vk', 'remote_image');
$xcrud->modal('image_vk');

А в зеннопостер, предположим, собирать внешние url адреса на картинки и записывать их в ячейки столбца 'image_vk', то просматривать и модерировать их будет очень удобно.

15-12-2016-15-14-56-jpg.17340


Можно изменять стили ячеек. Например, шаблон успешно опубликовал запись и нам надо не только записать это в базу но и выделить зеленым цветом. В zennoposter мы записываем в ячейку базы данных, что запись Опубликована через UDATE:


15-12-2016-15-18-59-jpg.17341


А в XCRUD окрашиваем все ячейки, которые содержат текст ‘Опубликовано’ в зеленый цвет

index.php:
Код:
Развернуть Свернуть Копировать
$xcrud->highlight('result', '=', 'Опубликовано', '#DFF2BF');

Также очень удобно реализована возможность манипулирования данными перед вставкой. Например, я передаю в базу данных id видеозаписи, но хочу, чтобы отображалась картинка-значок, при клике на который появлялась видеозапись.

Все просто.

Задаем, что будем перед занесением данных в столбец ‘video' запускать функцию 'after_upload_video'
Код:
Развернуть Свернуть Копировать
$xcrud->column_callback('video','after_upload_video');

Сама же фунция (которую мы объявляем в файле function.php), берет значение и перед публикацией оборачивает его в нужный нам html код.
Код:
Развернуть Свернуть Копировать
function after_upload_video ($value, $fieldname, $primary_key, $row, $xcrud)

{

if($value != '')

{

return '<a href="https://vk.com/'.$value.'" target="_blank" ><img src="/images/movie_file.png" style="border:none; width:35px"></a>';

}

else

{return '';}

}

Zennoposter + любое crud приложение дает возможность написать для себя удобный софт и не запутаться в куче файликов и табличек. А также дает возможность управлять шаблонами в любое время и в любом месте (хоть с телефона).
 

Вложения

  • 15-12-2016 15-14-56.jpg
    15-12-2016 15-14-56.jpg
    192,9 KB · Просмотры: 7 675
  • 15-12-2016 15-18-59.jpg
    15-12-2016 15-18-59.jpg
    28,2 KB · Просмотры: 7 896
вторая часть статьи вообще порвала))) мощно...:az:
 
  • Спасибо
Реакции: Лев
ну так скажем, на уровне 6 конкурса статей)) ошибка какая то постоянно лезла, пришлось на две части разбивать))
 
Скрипт немного платный, стоит 12$, но так скажем, уже с третьей строчки гугла и до 100-й он лежит в открытом доступе. Если не удастся найти, то пишите в ЛС, я вам скину (сюда наверно платные скрипты не стоит постить). А вообще, сейчас очень много таких crud php приложений, и при этом бесплатных https://github.com/search?utf8=✓&q=crud+php . Единственное, они конечно создадут вот такую легко редактируемую 'excel' таблицу, но в плане расширений и удобств они немного уступают (хотя может уже и нет).
 
Иногда вместо column_callback удобней использовать column_pattern, таким образом внутри таблицы остаются прежние значения, а в табличке выглядит как вам надо.
Например если есть столбец с id групп вк, нам точно не надо добалять к нему ничего лишнего, но хотелось бы изменить вид, тут то нам и придёт на помощь column_pattern.
$xcrud->column_pattern('gid', '<a href="https://vk.com/public{value}" target="_blank">{value}</a>');

В итоге получаем вот такой первый столбец, кликабельный, при этом при запросах к нему он будет выдавать нужный нам id без лишнего кода.
dfd93b16a9.png



Лев, единственное не разбираюсь, как передавать несколько параметров в функцию. С одним параметром всё норм.
Создал экшен.
Создал кнопку: $xcrud->button
и таким образом вызываю экшен и передаю ему данные из столбца gid
'data-task' => 'action',
'data-action' => 'parsed_name_group',
'data-primary' => '{gid}'),
Вопрос: Как передать несколько параметров в функцию, включая примари?
 
  • Спасибо
Реакции: Лев
Попробуй добавить наряду с data-primary, какой-нибудь 'data-name' => '{name}', где name - название другого столбца, а в функции уже $xcrud->get('name') - получаешь текущее значение name. Если я правильно вопрос понял. У меня сейчас нет возможности протестировать. Если не получится - вечером посмотрю.
 
  • Спасибо
Реакции: deopl
Спасибо за статью!
 
Огромное спасибо. Давно хотел перевести на Mysql отчеты и статистику, но визуализировать все это через phpMyadmin както не очень, а так через xcrud очень даже симпатичненько :)
 
  • Спасибо
Реакции: lzlmrf
Кто то может скинуть в личку XCRUD ?
 
Прошу помощи с запуском этого xcrud. Установил на локалхост. При запуске demo, все нормально работает. Проблемы начались при подключении своей таблицы через index.php . Вначале забыл поставить <?php ?> ) Но это мелочи.. Почему то выдает такое сообщение - http://prntscr.com/esq9wr xCRUD can not create session, because the output is already sent into browser. Try to define xCRUD instance before the output start or use session_start() at the beginning of your script . Код тот что в начале статьи.. Поставил перед скриптом session_start(); как советуют - таблицу вижу но ворнинги посыпались
Warning: session_start(): Cannot send session cookie - headers already sent by (output started at W:\domains\facebook.loc\index.php:1) in W:\domains\facebook.loc\index.php on line 2

Warning: session_start(): Cannot send session cache limiter - headers already sent (output started at W:\domains\facebook.loc\index.php:1) in W:\domains\facebook.loc\index.php on line 2
Кодировка файлов в utf-8
<?php
session_start();
include('xcrud/xcrud.php');
$xcrud = Xcrud::get_instance();
$xcrud->table('akaunt');
echo $xcrud->render();
?>
Подскажите где косяк?
 
  • Спасибо
Реакции: zennoX
у тебя перед первым "<? " после которого стоит session_start() стоит пробел или какойто символ, может быть даже невидимый
 
  • Спасибо
Реакции: lzlmrf
едрид мадрид)) точно
спасибо большое..я уже в конфиг полез
 
Может кто сталкивался..при правке записи из xcrud - во все поля заносится тег <p>
<p>man</p> <p>Jo&atilde;o</p> <p>Bryan</p
Загруженое фото также пропадает http://take.ms/i91Cz
Как вылечить?
 
нужно переделать тип данных в ДБ из text в varchar тогда редактирование не будет происходить через редактор и не будут добавляться "<p>"
 
  • Спасибо
Реакции: lzlmrf
Скажите пожалуйста, каким образом выводятся картинки из базы?

UPD разобрался)
 
Последнее редактирование:
Очень неплохо, спасибо за идею.
Не понял только как можно сделать фильтр, например выводить в таблице только активные аккаунты, у которых соотв. поле в базе True (например). Стандартной функции я почему-то не нашел.
 
Рядом с пагинацией есть кнопка Search, ее нажимаешь, указываешь ключ и выбираешь столбец, в котором этот ключ искать.
 
Все, нашел. Все оказалось очень просто.
$xcrud->where
 
Последнее редактирование:
Будьте аккуратными с тем что встроенный редактор любит добавлять теги <p></p> в текстовые поля при редактировании записи (даже если само поле не редактировалось), в результате чего все записи могут принять вид навроде <p>email@email.com</p> и т.д. что может вылиться в проблему, т.к. сам XCRUD их не показывает вообще а в базе они есть.
 
Кому не сложно можете в личку скинуть xcrud
 
Последнее редактирование:
Привет всем...
Понадобилось прикрутить бд к своим проектам, зашёл на форум и воспользовался поиском....
Прочитал статью, и сразу же купил xcrud.
Но так и не получилось завести это дело.
Что я делаю неправильно ?

1.Пользуюсь MAMP, распаковал архив и засунул его в htdocs
23464-41d90ea1569e64d6155c0fb1ef6a89a5.jpg

2.Захожу в phpmyadmin и жму на создать новую бд
23465-6353bfed0552abe34472983ad519e589.jpg

конкретно вот так
23466-170b560665e176f01314e6496ce85850.jpg

3.Создаю файл index.php
23467-b76897cb0bdde0f31eb0849003e4e4df.jpg

4.Пишу в него слейдующее
23468-dbf34a79e65bf0f27780787dc961c64b.jpg


после чего запускаю файл index.php и браузер у меня показывает такое
23469-82e922b25c4b30cbc35e6f4354502d83.jpg

Подскажите пожалуйста, что я делаю не так. Да с бд столкнулся впервые
 

Вложения

  • Снимок1.PNG
    Снимок1.PNG
    25,9 KB · Просмотры: 608
  • Снимок2.PNG
    Снимок2.PNG
    39,2 KB · Просмотры: 921
  • Снимок3.PNG
    Снимок3.PNG
    3,1 KB · Просмотры: 873
  • Снимок4.PNG
    Снимок4.PNG
    17,3 KB · Просмотры: 908
  • Снимок5.PNG
    Снимок5.PNG
    5,5 KB · Просмотры: 888
  • Снимок6.PNG
    Снимок6.PNG
    10,2 KB · Просмотры: 908
Привет всем...
Понадобилось прикрутить бд к своим проектам, зашёл на форум и воспользовался поиском....
Прочитал статью, и сразу же купил xcrud.
Но так и не получилось завести это дело.
Что я делаю неправильно ?

1.Пользуюсь MAMP, распаковал архив и засунул его в htdocs
23464-41d90ea1569e64d6155c0fb1ef6a89a5.jpg

2.Захожу в phpmyadmin и жму на создать новую бд
23465-6353bfed0552abe34472983ad519e589.jpg

конкретно вот так
23466-170b560665e176f01314e6496ce85850.jpg

3.Создаю файл index.php
23467-b76897cb0bdde0f31eb0849003e4e4df.jpg

4.Пишу в него слейдующее
23468-dbf34a79e65bf0f27780787dc961c64b.jpg


после чего запускаю файл index.php и браузер у меня показывает такое
23469-82e922b25c4b30cbc35e6f4354502d83.jpg

Подскажите пожалуйста, что я делаю не так. Да с бд столкнулся впервые
Оберните ваш код в
PHP:
Развернуть Свернуть Копировать
<?php
include(xrud....
?>
 

Кто просматривает тему: (Всего: 0, Пользователи: 0, Гости: 0)