Как сделать простую админку для HTML сайта
Самый простой способ создания админки для лендинга. Всего пару минут и можете сдавать заказчику управляемый проект.
Всем привет! Много текста сегодня не будет, просто покажу как сделать простую админку для статичного сайта на HTML
Я сейчас работаю, когда позволяет время, над написанием своего движка для одностраничников. Лэндинги самый заказываемый тип сайта.
И что скрывать, натяжка их на WordPress или тот же MODX отнимает довольно много времени. Кроме этого потом нужно еще клиента научить пользоваться этими системами.
Это нам , все кажется просто, а если человек до этого умел только в Ворде печатать, работа в консоли движка кажется чем то архи-сложным.
Админка за 10 минут
Здравствуйте, уважаемое Хабрасообщество!
Я занимаюсь разработкой веб-сайтов. Как правило, это решения под индивидуальные потребности заказчиков. Поэтому я не использую готовые CMS, а предпочитаю складывать кирпичики самостоятельно. Конечно и админскую часть приходиться писать самостоятельно, поскольку она должна выполнять те функции, которые нужны заказчику, но и ничего лишнего не должно быть. И если написать несколько методов для редактирования данных это пол беды, то приходилось ещё и верстать приятный и удобный интерфейс.
Долгое время я использовал Twitter Bootstrap, но он не мог удовлетворить все потребности. Приходилось верстать дополнительные кнопочки и писать скрипты. Но вот однажды, я познакомился с замечательным UI-фреймворком KendoUI от Telerik. Что из этого получилось под катом.
О самом фреймворке уже писалась статья на Хабре. Мы будем использовать библиотеку Web-контролов KendoUI Web. Чтобы понимать, что можно создавать с её помощью можно посетить страничку с демо. Для построения контролов можно использовать как хелперы для ASP.NET, JSP или PHP, так и javascript-виджеты. Последние распространяются по лицензии GPL v3 License, поэтому я использовал именно их. Скачать тот или иной пакет можно здесь. На серверной стороне я использую ASP.NET MVC 4 с пакетом Microsoft ASP.NET Web API OData 4.0.0, уставить который можно с помощью команды PM> Install-Package Microsoft.AspNet.WebApi.OData
Для демонстрации создадим простой класс Article, и добавим ему три свойства разного типа
Далее создадим ApiController для работы с данными. В своем примере я использую Entity Framework, поэтому сразу указываю Scaffolding options
После этого я изменяю только действие GetArticles, так показано в примере ниже. Прежде всего теперь оно возвращает ODataResult. А в качестве параметра принимает ODataQueryOptions, это коллекция сериализованных параметров строки запроса. В самом действии мы получаем коллекцию и общее количество элементов в ней. А после применяем к ней входящие параметры. В результате мы возвращаем коллекцию после применение к ней параметров и общее количество, оно необходимо для пагинации.
Вот и все. Самое время переходить к клиентской части. Для начала подключим KendoUI и JQuery на страницу.
После этого установим и настроим виджет. Подробнее о настройках виджета можно прочитать здесь.
Готово! Теперь можно запускать и проверять. Менее чем за 10 минут мы создали полноценный интерфейс для управления данными, с возможностью пагинации, сортировки и фильтрации. Удобный и приятный. Спасибо KendoUI и формату OData, а Вам за внимание.
Р.S. Кстати есть возможность локализации виджетов. Для этого необходимо подключить соответствующий скрипт из папки js/cultures, который поставляется в архиве с фреймворком.
Админ-панель сайта
Админ-панель сайта — это часть движка, предназначенная для автоматического добавления контента на сайт. На ней есть поле, куда Вы пишете текст статьи. Админ панель содержит скрипты, которые создают новые страницы сайта либо добавляют статью в БД, в зависимости от структуры сайта. В меню добавляется ссылка на статью. Обычно админ-панель даёт возможность добавлять не только текст, но и другой контент. Создавая движок сайта, Вы сами решаете, делать админ-панель или добавлять статьи самостоятельно.
Админ-панель располагается на отдельной странице, которая имеет примерно такой адрес:
На сайте не делают ссылки на эту страницу, Вы просто должны знать её URL. Вход в админ-панель производится через форму авторизации. От обычной авторизации она отличается тем, что вы входите не как обычный пользователь, а как администратор, и информация об этом должна быть записана в сессию. Доступ к админ-панели должен быть только у администратора.
Авторизация администратора
Авторизацию администратора можно сделать двумя способами. Если администраторов несколько, то в таблицу с пользователями можно добавить поле, в котором указывать, что пользователь является администратором. А можно в скрипте авторизации просто передавать права администратора конкретному пользователю. Мы используем второй вариант. Назовём страницу авторизации avtadministrator.html. Вот её код:
Форма отправляет данные в файл adminavt.php. Это скрипт авторизации. Его код такой:
3, 4 — получаем логин и пароль из формы
5 — если они правильные
8 — записываем в сессию, что это администратор
9 — страница, на которую нужно перейти — adminpanel.php
11 — если логин или пароль неправильные
12 — то нужно вернуться на страницу авторизации
13 — переход на нужную страницу
Создание админ-панели
Админ панель выглядит примерно так.
В начале идёт PHP скрипт, в котором проверяется, есть ли в сессии переменная admin . Если нет, значит в админ-панель входит пользователь, не являющийся администратором. Тогда происходит переход на страницу авторизации. Админ-панель представляет собой форму, в которую администратор вводит новую статью. Название статьи может быть длинным и ссылка на неё в меню сайта может отличаться от названия. Поэтому в форме есть поле для текста ссылки.
Перед добавлением статьи в базу данных нужно поместить текст статьи в теги <p> . Сделаем это на стороне клиента, чтобы не расходовать ресурсы сервера. Добавим на страницу скрипт, в котором перед текстом статьи поставим тег <p> , а после текста </p> . Чтобы сохранились все абзацы, нужно вместо перехода строки закрыть тег <p> и открыть новый. Вот код скрипта:
24 — находим форму
25 — обработчик события submit
27 — находим поле для текста статьи
28 — ставим <p> перед текстом и </p> после текста
29 — заменяем перевод строки на </p> <p> .
При желании можно добавить в обработчик проверку заполнения полей.
Форма запускает скрипт newart.php, который добавляет статью в базу данных. Вот код скрипта:
В строке 5 производится проверка — указан ли текст для пункта меню. Если не указан, то используется название статьи. Это позволяет не писать текст для пункта меню, если он совпадает с названием статьи.
Мы рассмотрели создание самой простой админ-панели. Чтобы ею было удобно пользоваться в неё желательно добавить определённые возможности:
- Сделать добавление в статью видео, картинок, ссылок и другого контента
- Добавить указание номера статьи. Это позволит легко менять порядок, в котором статьи перечислены в меню
- Добавить мета-данные: автора статьи, время добавления и другую информацию
- Сделать возможность редактирования и удаления статей
- После добавления статьи показать ссылки для возвращения в админ-панель и перехода на сайт
На основе данного примера Вы сможете сделать любую админ-панель для Вашего сайта.
Как сделать админ панель для сайта html
Программирование на C++ в Unreal Engine 5
Данный курс научит Вас созданию игр на C++ в Unreal Engine 5. Курс состоит из 12 разделов, в которых Вас ждёт теория и практика. Причём, в качестве практики будет создан весьма крупный проект объёмом свыше 5000 строк качественного кода, который уже на практике познакомит Вас с принципами создания игр на C++ в Unreal Engine 5.
Параллельно с курсом Вы также будете получать домашние задания, результатом которых станет, в том числе, полноценная серьёзная работа для портфолио.
Помимо самого курса Вас ждёт ещё и очень ценный Бонус: «Тестирование Unreal-проектов на Python», в рамках которого Вы научитесь писать очень полезные тесты для тестирования самых разных аспектов разработки игр.
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
Подписаться
Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.
Подписаться
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.