Делаем админку для сайта | Gadget-apple.ru
Самый простой способ создания админки для лендинга. Всего пару минут и можете сдавать заказчику управляемый проект.
Всем привет! Много текста сегодня не будет, просто покажу как сделать простую админку для статичного сайта на HTML
Я сейчас работаю, когда позволяет время, над написанием своего движка для одностраничников. Лэндинги самый заказываемый тип сайта.
И что скрывать, натяжка их на WordPress или тот же MODX отнимает довольно много времени. Кроме этого потом нужно еще клиента научить пользоваться этими системами.
Это нам , все кажется просто, а если человек до этого умел только в Ворде печатать, работа в консоли движка кажется чем то архи-сложным.
Короче! приступим к реализации.
Для работы используем бесплатную версию скрипта textolite
Как установить админку c помощью textolite
- Качаем с оф. сайта последнюю версию
- Распаковыавем в корень своего HTML-сайта
- Переименовываем каталог как нам нужно, например admin
- Заливаем папку на сервер в корень сайта
- Заходим по адресу ваш сайт/admin оспользуя дефолтный пароль admin
- Меняем пароль и любые другие тексты на сайте.
Вот и все! Админка работает.
Всем пока и хороших отношений с заказчиками!
Бесплатные и простые админки для сайтов создаются в помощь тем, кто предпочитает использовать сайты-визитки, сайты-лендинги на чистом html, сайты без громоздких CMS — систем управления контентом сайта.
Так как существующие CMS часто нужны лишь в случае сайтов с сотнями и тысячами страниц, с большой базой данных,что для маленького сайта совсем не актуально. «Из пушки по воробьям» — так можно назвать использование, скажем, CMS Друпал или Джумла, на небольшом 20-страничном сайте. Я уж не говорю про лендинги, 1-страничные сайты-продажники, так популярные сегодня.
Созданный веб-мастером сайт отдается заказчику для дальнейшего использования его в качестве «продающей визитки», а потом возникает проблема — как пополнять контент ( содержание) сайта, как его наполнять новыми материалами и прочее. Для этого продвинутыми разработчиками постоянно создаются «маленькие» CMS, которые позволяют редактировать сайт, иногда «прямо в браузере» в визуальном режиме — быстро и без особых проблем.
Последняя возникла совсем недавно, в 2017 году. В открытом доступе написано, что разработчик ее — Иван Сараев (pythono.ru), но больше никакой информации о разработчике нет. Расскажу, что знаю о CMSLand.
Сразу оговорюсь, что тщательно эту систему я не тестировала, опробовала ее весьма поверхностно, степеней защиты не увидела, рекомендовать не могу. Однако ниже то, что удалось узнать.
CMSLand (версия 0.1)
То что версия этой CMS имеет многообещающее название «0.1» поначалу внушало уверенность, что разработчик будет развивать свой продукт на радость всем страждущим и ищущим в сети простые бесплатные админки для сайтов. Сейчас эта CMS бесплатна, за что автору — большое спасибо и низкий поклон. Возможно, в будущем, к этой системе будут продаваться платные расширения, как это бывает повсеместно, и это — абсолютно нормально. Однако за прошедшее время в истории этой CMSLand я не обнаружила никаких изменений.
СMSLand — как работает
По словам самого разработчика логика работы скрипта построена следующим образом:
По умолчанию в админке открывается файл «index.html» который обычно является главным HTML файлом лэндинга. Но есть возможность редактировать и дополнительные HTML файлы, если речь идет о много-страничном сайте, выбрав их из выпадающего списка в левом верхнем углу, и нажав кнопку «Редактировать».

Ниже на скриншоте показаны разделы для редактирования из этой простой админки
Это тексты
Картинки
Код HTML
Код CSS
В разделе «Тексты» — показывается список всех текстовых фрагментов которые присутствуют на странице. Нажав на любой из них, можно изменить его, не касаясь при этом HTML кода. После нажатия на любой из текстовых фрагментов открывается поле редактирования
После того как фрагмент текста отредактирован, нужно нажать кнопку «Заменить текст» и соответствующий фрагмент текста в лэндинге будет изменен. Картинки лэндинга можно изменить, перейдя в меню на раздел «Картинки», мы увидим список всех картинок, с указанием их размеров.
Размер картинок нужен для того чтобы заказчики случайно не загрузили картинки которые не впишутся в вёрстку по размеру. Нажав на любую из картинок мы сможем загрузить файл, и заменить её.
Для более продвинутых заказчиков оставлена возможность редактировать HTML код. Кроме того прямо здесь можно отредактировать любой из CSS и JS файлов.
Чтобы использовать данный скрипт, нужно сохранить его рядом с index.html лэндинга. Если набрать в адресной строке http://ваш-сайт.ru/cmsland.php , то мы попадем в нашу админку.
Админка попросит у нас пароль, по умолчанию — пароль: «password». Сам пароль можно изменить, отредактировав строчку скрипта в Notepad++. ( на фото)
Вот, пожалуй, и вся информация об этой CMS, при тестировании были обнаружены некоторые проблемы, но найти разработчика и задать ему вопросы, не удалось. Если разработчик увидит мое описание, прошу написать мне на jekky1@yandex.ru
Переделывайте старые сайты, делайте их адаптивными к мобильным устройствамЧто бы сказала няня Макфи?
«В поисках простой админки для сайта находятся те, кто готов управлять сайтом, готов его администрировать, наполнять текстами и «двигать», но.
Что такое админ-панель
Админ-панель сайта — это часть движка, предназначенная для автоматического добавления контента на сайт. На ней есть поле, куда Вы пишете текст статьи. Админ панель содержит скрипты, которые создают новые страницы сайта либо добавляют статью в БД, в зависимости от структуры сайта. В меню добавляется ссылка на статью. Обычно админ-панель даёт возможность добавлять не только текст, но и другой контент. Создавая движок сайта, Вы сами решаете, делать админ-панель или добавлять статьи самостоятельно.
Админ-панель располагается на отдельной странице, которая имеет примерно такой адрес:
На сайте не делают ссылки на эту страницу, Вы просто должны знать её URL. Вход в админ-панель производится через форму авторизации. От обычной авторизации она отличается тем, что вы входите не как обычный пользователь, а как администратор, и информация об этом должна быть записана в сессию. Доступ к админ-панели должен быть только у администратора.
Авторизация администратора
Авторизацию администратора можно сделать двумя способами. Если администраторов несколько, то в таблицу с пользователями можно добавить поле, в котором указывать, что пользователь является администратором. А можно в скрипте авторизации просто передавать права администратора конкретному пользователю. Мы используем второй вариант. Назовём страницу авторизации avtadministrator.html. Вот её код:
Форма отправляет данные в файл adminavt.php. Это скрипт авторизации. Его код такой:
3, 4 — получаем логин и пароль из формы
5 — если они правильные
8 — записываем в сессию, что это администратор
9 — страница, на которую нужно перейти — adminpanel. php
11 — если логин или пароль неправильные
12 — то нужно вернуться на страницу авторизации
13 — переход на нужную страницу
Создание админ-панели
Админ панель выглядит примерно так.
В начале идёт PHP скрипт, в котором проверяется, есть ли в сессии переменная admin . Если нет, значит в админ-панель входит пользователь, не являющийся администратором. Тогда происходит переход на страницу авторизации. Админ-панель представляет собой форму, в которую администратор вводит новую статью. Название статьи может быть длинным и ссылка на неё в меню сайта может отличаться от названия. Поэтому в форме есть поле для текста ссылки.
Перед добавлением статьи в базу данных нужно поместить текст статьи в теги
. Сделаем это на стороне клиента, чтобы не расходовать ресурсы сервера. Добавим на страницу скрипт, в котором перед текстом статьи поставим тег
. Чтобы сохранились все абзацы, нужно вместо перехода строки закрыть тег
и открыть новый. Вот код скрипта:
24 — находим форму
25 — обработчик события submit
27 — находим поле для текста статьи
перед текстом и
29 — заменяем перевод строки на
При желании можно добавить в обработчик проверку заполнения полей.
Форма запускает скрипт newart.php, который добавляет статью в базу данных. Вот код скрипта:
В строке 5 производится проверка — указан ли текст для пункта меню. Если не указан, то используется название статьи. Это позволяет не писать текст для пункта меню, если он совпадает с названием статьи.
Мы рассмотрели создание самой простой админ-панели. Чтобы ею было удобно пользоваться в неё желательно добавить определённые возможности:
- Сделать добавление в статью видео, картинок, ссылок и другого контента
- Добавить указание номера статьи. Это позволит легко менять порядок, в котором статьи перечислены в меню
- Добавить мета-данные: автора статьи, время добавления и другую информацию
- Сделать возможность редактирования и удаления статей
- После добавления статьи показать ссылки для возвращения в админ-панель и перехода на сайт
На основе данного примера Вы сможете сделать любую админ-панель для Вашего сайта.
Коприрование материалов сайта возможно только с согласия администрации
НАШ САЙТ РЕКОМЕНДУЕТ:
Метки: |
Делаем простую CMS — Framework & CMS E5
Делаем простую CMS
Для этого примера мы берём «пустой» вариант системы без предустановленных модулей, но с компонентами.
В примере у нас имеются две зоны — backend (админка) и frontend (сам сайт).
На Frontend мы повесим наш новый модуль, но для начала необходимо перейти в раздел модулей и создать его.
Так выглядит наш новый модуль.
Вначале давайте добавим пробную часть, которая будет выводить приветствие на главной странице.
Присоединяем модуль нашему Frontend-у
Проверяем работу в браузере
Вернёмся к нашему модулю и добавим таблицу «Страницы». Для этого используем соответствующий шаблон.
Теперь зайдём в новую таблицу и создадим пару страниц
Возвращаемся обратно к модулю, удаляем пробную часть «Главная страница» и добавляем вместо неё часть, связанную с таблицей страницы
Пишем в ней простую разметку (заголовок и текст) и открываем вставку значения. Выбираем текущий объект и жмём «Далее».
Выбираем нужное поле текущего объекта (вначале нам нужен заголовок) и вставляем его
Таким же образом вставляем содержимое страницы и обрамляем квадратными скобками (лучше вставлять обрамление перед вставкой). Вот что у нас получилось.
Проверяем обе страницы. Работают.
Добавляем шаблоны дизайна
Добавим поддержку шаблонов дизайна. Для этого добавим типовую таблицу «Шаблоны».
Добавим в первый шаблон содержимое части «Страницы».
Затем добавим переменную модуля «Шаблон» для определения основного шаблона, свяжем её с нашей таблицей шаблонов.
В настройках раздела укажем наш пробный шаблон
Теперь вернёмся в нашу часть «Страницы», удалим всё содержимое, и в диалоге вставки значения поочерёдно выберем следующие команды:
- Текущий экземпляр модуля
- Переменные
- Шаблон
- Поле «Шаблон»
- Работа с шаблонами
- Исполнить как шаблон
Вот что у нас выйдет
Нашу простенькую CMS можно считать завершённой. У нас есть backend, позволяющий работать с материалами (страницами и шаблонами) и frontend выводящий страницы пользователю по нужному URL (с учётом вложенности).
На получившейся системе можно сделать несколько сайтов (каждый сайт — экземпляр данного модуля) у которых будут разные страницы, но общие шаблоны.
О том, как с помощью плагинов системы можно быстро сделать шаблон, смотрите здесь.
Что ещё можно сделать
Можно добавить поле «Шаблон» для каждой отдельной страницы. Соответственно в части «Страница» мы напишем:
[if cow.tpl]
[cow.tpl.body.shell]
[else]
[cex.param.tpl.shell]
[/if]
Т.е. если у страницы указан свой шаблон — выполнять его, иначе — выполнять общий шаблон сайта
Читать далее про «Делаем прайс-лист»
Что лучше использовать – чистый HTML, самописный движок или CMS WordPress ?
Тема вопроса на самом деле гораздо шире.
Что лучше использовать для своего сайта? Статичную верстку на HTML, популярную CMS или самописный движок? Я не буду вдаваться в глубокий анализ, но поделюсь своими мыслями и наблюдениями, которые накопились за почти 10 лет работы в сфере создания сайтов.
Сайты на статичном HTML
Сайты на чистом HTML – это отличное решение для одностраничных сайтов, тех же лендингов и для малостраничных статичных сайтов. Статичная верстка – это первый этап работы над созданием сайта под какой-то движок (CMS), то есть, любую верстку можно без проблем посадить на CMS, но тут уже возникает вопрос – нужно ли это? Зачем landing page ставить на движок, если никакого динамического контента на нем не будет, если все блоки статичные и не шаблонные? Зачем создавать админку, если максимум, что нужно будет – поменять какие-то тексты или картинки, и по временным затратам это будет быстрее сделать в HTML, чем настраивать CMS, чтобы потом поменять 2 абзаца в админке, а не в верстке. Точно такой же посыл и при верстке небольшого сайта в 3-5 страниц, у нас уже есть его верстка, и возникает вопрос – ставить ли дальше эту верстку на CMS? Зачем, если на сайте нет никаких блоков новостей или блога, если есть только несколько статичных, нешаблонных страниц, которые уже сверстаны? Достаточно просто вылить сайт на хостинг, и он уже работает. Форму обратной связи можно сделать на php, можно скачать готовый скрипт, можно поставить сторонний виджет, которых много сейчас.
Плюсы сайта на HTML:
- Просто и недорого создать, верстальщиков сейчас много.
- Просто и недорого обновить в случае чего, рабочее время верстальщика дешевле времени работы программиста.
- Моментальная скорость работы сайта, сайт на чистом HTML работает быстрее чем какая бы то ни была CMS.
- Маленький вес, меньше файлов, меньше места на хостинге, понятная и простая структура.
- Под такой сайт сгодится даже самый дешевый хостинг с минимальными параметрами.
Минусы сайта на HTML:
- Сайт не динамический, нет блоков новостей, нет возможности вести блог или ежедневно обновлять его (хотя можно использовать Jekyll, но это уже другая история).
- Могут быть сложности с заменой информации, если это нужно делать часто без привлечения верстальщика, например, это должна делать менеджер компании. При минимальных знаниях HTML – это не проблема.
- Будут сложности в добавлении новых страниц или блоков, в расширении функционала. Для любой такой работы нужно будет привлекать верстальщика и, возможно, дизайнера.
Хороший пример статичного сайта на HTML – сайт ритуального агентства – ritual.in.ua.
Если данные минусы кажутся существенными, то нужно разрабатывать сайт с использованием CMS.
Сайт на популярной CMS (WordPress, Magento, Bitrix, etc.)
Самый популярный и самый удобный вариант. На данный момент существует множество различных систем управления контентом (CMS) под любые задачи – для блогов, для новостных сайтов, для интернет-магазинов, для лендингов, форумов, порталов, каталогов и т. д.
В зависимости от назначения сайта можно подобрать нужный движок, можно скачать бесплатный шаблон, купить премиумный или сверстать свой (самый идеальный вариант).
Если вы ищете создание сайтов в Киеве, то рекомендую обратиться к ответственной и серьезной студии Great Pro. У ребят очень крутое портфолио, и тонкий подход к каждому клиенту, они точно не новички в этом деле.
Самый простой и быстрый вариант обойдется меньше чем в 100$ и займет от пары часов до 1 дня по времени на настройку всех необходимых плагинов и нужного функционала. Более серьезная настройка занимает больше времени, но и результаты будут уже не ширпотребные, а заточенные под конкретный проект.
Плюсы CMS:
- Простота развертывания и создания, много специалистов и фрилансеров.
- Низкая цена на самые простые вариации.
- Удобство использования и администрирования.
- Гибкость и функциональность, можно добавить любой функционал без знаний программирования.
- Безопасность. Популярные CMS имеют большое ядро программистов и тестировщиков, постоянно обновляются и поддерживают самые последние технологии.
- Быстрая поддержка и большое количество специалистов.
Минусы CMS:
- Бесплатные шаблоны и популярные премиумные шаблоны используются на сотнях похожих сайтах.
- Некоторые CMS очень требовательны к хостингу, и поэтому, пытаясь, сэкономить на хостинге, можно получить медленный и регулярно «падающий» сайт.
- Платные CMS требуют хороших специалистов, которые будут стоить недешево.
- Чтобы уникализировать свой сайт, нужно будет заказывать уникальный шаблон, что будет стоить не 59$, как за популярный премиумный, но это будет стоить того.
- Популярные плагины могут сильно нагрузить сайт, если использовать их бездумно все подряд.
- Для хорошего результата потребуется хороший программист или команда программистов, иначе получится еще один сайт, которых уже тысячи одинаковых.
Если вам не подходит статичный сайт на HTML, если ваш проект будет развиваться и расти, то это однозначно должен быть сайт на CMS.
Сайт на самописной CMS
Это самое большое зло, которое вам может предложить начинающая веб студия или небольшой стартап фрилансеров. Начинающие программисты очень любят делать свои движки, потому что таким образом учатся и оттачивают свои навыки. Главный аргумент, который они преподносят – ваш сайт будет уникальным и более быстрым чем на какой-то известной CMS. Это ложь. Уникальность сайта будет зависеть от шаблона, который можно сверстать для любой CMS, а скорость работы можно улучшить кучей разных способов. Но правда в том, что на самописном движке вы получите кучу «сложностей» и проблем, зато студия, у которой вы закажете такой проект получит себе постоянного клиента и «дойную корову», потому как будет очень сложно найти программистов, которые захотят ковыряться и переделывать чужой «на коленке написанный код».
Плюсы самописной CMS:
- Их нет.
- Разработчики будут уверять, что вы получите уникальный сайт, но это манипуляция.
- Их нет.
Минусы самописной CMS (эти минусы я видел и исправлял на десятках реальных проектов):
- Низкое качество кода, в 90% случаев самописные CMS делают новички, поэтому код у такого движка – говно.
- Низкое качество внешнего вида сайта по той же причине, что эти же новички без должных знаний верстки и дизайна, сделают на коленке гуано.
- Никакая оптимизация сайта для поисковиков, из-за того, что код – говно. В таких CMS миллион ошибок и проблем, о которых начинающий программист даже не подозревает, и я сталкивался с этими проблемами и решал их, это долго, сложно и трудозатратно.
- Нет поддержки таких CMS, они очень редко обновляются.
- Нет гибкости или масштабируемости, если вам понадобится фотогалерея, то разработчики выставят прайс – 100$, нужна форма связи – еще 100$, при том, что сайт сделали за 50$.
Но весь дальнейший функционал будет идти по другому прайсу, и никакие сторонние разработчики не захотят браться за такую работу. Поэтому вы или будете на крючке у таких горе-разработчиков, или забьете на свой сайт.
- Отказ от поддержки, я знаю много случаев, когда фирмы, которые делали такие сайты или перепрофилировались, находя идеальную для себя CMS или закрывались, не выдерживая конкуренции, но дорабатывать через пару лет свои «детища» они потом отказываются.
- Потраченное время и силы.
- Хороший и качественный самописный движок будет очень дорогим и очень дорогим в обслуживании и поддержке.
Исключение из правила, что самописные CMS – guano:
- Это большая и серьезная компания, которая предлагает вам свой движок, который основан на каком-нибудь мощном и популярном фреймворке типа Symfony. У такой компании будут сотни наработок, годы опыта и вычесывания кода своего движка. Обычно такие движки заточены под какой-то конкретный тип сайтов. И естественно стоимость такого сайта будет далеко от 1000$.
- У вас нестандартный высоконагруженный проект, под который большая IT-компании пишет уникальное решение, которое опять-таки пишется не на коленкке на php 5-ой версии, а на каком-нибудь популярном фреймворке (Laravel, Symfony Yii, CodeIgniter, Zend и т.д.).
- У вас есть конкретные требования к админке сайта, которые не удовлетворяются популярными движками, и вы сами пишете ТЗ, занимаетесь проектированием нужной админпанели, и ваша команда занимается разработкой и поддержкой, а не заказываете за 100$ у фрилансера самописную админку.
То есть самописные движки нужны только для редких случаев, когда заказчик сам понимает, что такой проект на WordPress не развернешь, и соответственно, понимает, что стоимость такого сайта будет исчисляться в кило-долларах.
Выводы:
- Для лендинг пейдж – HTML-верстка.
- Для статичного сайта в 1-5 страниц – HTML-верстка.
- Для всего остального (магазин, блог, портал, форум, визитка, сайт компании, каталог и т.
д.) – CMS.
- Для динамичного сайта, которому нужна админка – CMS.
- Для «Розетки» – самописный движок за миллион денег.
Семь бесплатных и простых CMS-альтернатив для WordPress
WordPress — одна из самых популярных CMS. По некоторым подсчетам 28% сайтов (от общего их количества) создано именно на WordPress. Однако это далеко не единственный вариант для создания сайтов. Если вы хотите покинуть пределы уютной экосистемы WordPress, вам понадобится CMS, которая будет безопасной, простой в настройке и способной запускать любой тип сайта. Именно такие альтернативы мы и представим вам в этой статье: 7 лучших альтернатив WordPress. Каждая из этих платформ бесплатна и с открытым исходным кодом. Поэтому они являются жизнеспособными вариантами, которые вы можете тестировать самостоятельно.1. Ghost Один из самых крутых движков CMS, о которой бредят блоггеры. Эта платформа с открытым исходным кодом является легкой и простой в управлении, имеет в своем арсенале десятки бесплатных тем на GitHub. Бэкэнд-редактор очень прост в использовании, он более «мягкий» и удобный, чем WordPress. Единственным недостатком является то, что Ghost присутствует на рынке относительно недолго. Поэтому будет немного сложнее найти плагины, которые имитируют привычные функции WordPress. Однако это, безусловно, один из лучших механизмов CMS в отношении поддержки и размера сообщества. Он никогда не сможет конкурировать с WordPress, но справедливости ради нужно сказать, что Ghost выкроил хороший кусок рынка для себя.2. PageKit Еще одним быстрорастущим движком является PageKit. За аксиому разработчики этой CMS взяли утверждение, что каждый сайт уникален, а цели каждого пользователя разнятся. Именно поэтому он построен как модульная структура, в которой вы можете добавлять или удалять функции по мере необходимости. Целью PageKit является создание гибких и легко настраиваемых в соответствии с вашими потребностями сайтов.
Обратите внимание, что PageKit также работает на PHP и MySQL. Поэтому, если ваш веб-хост поддерживает WordPress, он определенно примет и PageKit.3. Bolt CMS Одна из замечательных особенностей Bolt CMS — это то, как панель инструментов имитирует множество функций, к которым вы привыкли в WordPress. Каждая из CMS имеет свой подход и настройки, но переход от WordPress к Bolt не станет для вас проблемой. Эта CMS использует механизм ContentTypes для фильтрации различных типов контента. Вы можете рассматривать его как категории или папки, которые помогут вам организовать все, что вы пишете. Также он обладает таксономией для пользовательских тегов/групп, которые предлагают множество настроек. Выступая в качестве разработчика, вы будете работать с системой шаблонов Twig. Он может показаться немного более сложным, чем бэкэнд в WordPress, но его структура удобна. Bolt CMS легко настраивается, прост в использовании и идеально подходит для тех, кто знаком со средой разработки Symfony.4. October CMS Laravel, по нашему субъективному мнению, лучший бесплатный PHP-фреймворк для веб-разработки. October CMS — одна из немногих платформ, которая использует Laravel для создания невероятной системы управления контентом. October — полностью бесплатная CMS с открытым исходным кодом и модульной сборкой. Допустим, вам не нужен блог, но нужна страница с картами. Одним движением мышки вы вытаскиваете модуль блога, заменяя его модулем для карт. С October CMS очень легко работать. Команда разработчиков часто выпускает обновления и предоставляет своим пользователям отличную библиотеку бесплатных тем и плагинов. Не говоря уже о том, что у них есть десктопное приложение Pond, которое позволяет вам управлять всеми вашими «октябрьскими» сайтами из одной программы.

Minix neo t5 manual
Minix neo t5 manualSkip to main content
Minix neo t5 manual
minix neo t5 manual NEO T5 Android mini PC podporuje většinu video a audio formátů.






Как создать панель администратора с шаблоном начальной загрузки
Вы решили создать панель администратора для серверной части вашего веб-сайта. И вы хотите создать его с минимальными затратами времени и усилий. Самый быстрый способ создать его — выйти в Интернет и получить красивый, красивый шаблон администратора, который как раз подходит для вашего шаблона администратора.
Итак, обо всем по порядку. Шаблоны администратора — это предварительно созданные веб-страницы, построенные с использованием HTML, CSS и JavaScript, чтобы помочь разработчикам очень быстро запустить приложение.Им не нужно начинать с нуля. Все, что им нужно сделать, это настроить его и внести необходимые изменения. Затем они могут потратить остальное время на интеграцию панели администратора с базой данных.
Шаг 1. Получение понравившегося административного шаблона
Перед покупкой административных шаблонов узнайте, каковы ваши требования, и имейте четкое представление о том, что вы хотите с точки зрения дизайна и функциональности. В противном случае очень легко быть ошеломленным количеством шаблонов, которые вы найдете.
Изучите свои требования к дизайну. Знайте, какие функции вам понадобятся в вашем шаблоне и какие плагины лучше подходят для обслуживания этих функций. А затем иди на поиски. Это поможет вам сузить выбор и принять обоснованное решение.
Я буду использовать бесплатный шаблон администратора начальной загрузки StarAdmin в качестве примера. Шаблон имеет красивый и чистый дизайн, а качество кода отличное. Я считаю правильным создать простую админку .И это бесплатно. Также шаблон обновлен до последней версии Bootstrap, Bootstrap 4 beta.
Шаг 2 — Дизайн панели администратора
Итак, как вы можете создать информационную панель с шаблоном администратора? С чего начать? Чтобы понять это, давайте создадим собственную панель управления, используя шаблон администратора.
Сначала рассмотрим наше требование. Дизайн, который мне нужен для приборной панели, показан на картинке.
и это экран под сгибом.
Панель можно разделить на три части. Навигационная панель вверху, боковая панель слева и область основного содержимого. Боковая панель и панель навигации являются общими для всех страниц. В области содержимого находятся все необходимые виджеты.
Верхняя панель навигации на панели инструментов имеет марку «Звезда» на левом конце. Так и оставим. Далее на навигационной панели слева есть значок гамбургера. На правом торце есть кнопка со значком обновления, значок колокольчика с указанным количеством уведомлений и значок конверта с указанием количества сообщений.В конце есть изображение профиля пользователя.
На левой боковой панели пока есть только один пункт меню, панель инструментов.
В области содержимого , на первой карточке у нас есть гистограмма и кольцевая диаграмма. Гистограмма отображает типы трафика, поступающего на веб-сайт, а кольцевая диаграмма отображает источники трафика на устройствах.
Чуть ниже у нас есть три карточки, отображающие количество посетителей, продаж и выручку, за которыми следует еще одна карточка.Последняя карточка отображает страну-источник трафика на карте и более подробную информацию, такую как коэффициент конверсии и показатель отказов для каждой страны в таблице. И, наконец, нижний колонтитул.
Также прочтите: 25+ бесплатных простых шаблонов административной панели для внутренней части
Шаг 3. Давайте начнем кодирование
Теперь, когда мы определились с нашими требованиями и определились с шаблоном, который мы собираемся использовать, давайте перейдем к части, где мы закладываем фундамент и начинаем кодировать шаг за шагом.
Установка
Перед началом кодирования обязательно установите Git, Node.js и npm. Gulp используется как инструмент сборки. Для установки Gulp необходимо, чтобы на вашем компьютере был установлен Node.
Это создает основу для разработки приборной панели.
Держите все организованным
Затем, чтобы все было организовано, создайте папку с именем «my-dashboard». Давайте сохраним все наши файлы в этой папке.
Загрузить шаблон
Откройте командную строку, измените путь к папке проекта и загрузите шаблон.введите команду git clone https://github.com/BootstrapDash/StarAdmin-Free-Bootstrap-Admin-Template.git.
Это загрузит шаблон в вашу папку. Или вы можете загрузить файлы шаблона в виде zip-папки.
Установить зависимости
После загрузки шаблона введите команду npm install для установки всех зависимостей в файле package.json в папке node_modules. После того, как все эти шаги будут выполнены, мы готовы создать нашу панель управления.
Gulp Serve
Затем перейдите в командную строку и введите команду gulp serve в командной строке.Это откроет файл index.html шаблона в браузере по умолчанию.
Редактируем код
Теперь приступим к созданию нашей информационной панели. В шаблоне есть пустая страница, с которой мы можем начать. Другой способ — отредактировать существующую страницу index.html и отредактировать страницу. Для этого откройте страницу в редакторе кода.
Панель навигации
В первой части, то есть панели навигации, поле поиска не требуется. Так что удалите код для этого. В правом конце есть два дополнительных значка, которые необходимы.Поскольку в шаблон уже включен Font Awesome, все, что мне нужно сделать, это найти код для нужного значка.
Есть значок обновления, значок колокольчика и значок конверта. Когда вы нажмете «сохранить», когда задача gulp запущена, браузер обновится, и изменения будут автоматически отображаться в браузере.
После добавления кода верхняя часть панели навигации готова.
Боковая панель
Вторая часть — это левая боковая панель. На боковой панели есть только один элемент списка — панель инструментов.Поэтому нам нужно удалить или прокомментировать остальные элементы списка. После этого на боковой панели останется только изображение профиля и пункт меню панели инструментов.
Область содержимого
Третья часть — это область содержимого. На странице index.html первый элемент, который вы видите вверху страницы, — это четыре маленькие карточки в одной строке. В нашем дизайне у нас есть гистограмма и кольцевая диаграмма.
На странице индекса нет столбчатой диаграммы, поэтому я перехожу на страницу диаграмм, где у меня есть все нужные диаграммы.Я получаю код гистограммы. Гистограмма и кольцевая диаграмма отображают связанные данные. Таким образом, оба данных помещаются на одну и ту же карточку в одной строке. В приведенном ниже коде показано, как это делается.
Типы трафика
Источники трафика
Данные, первоначально отображаемые на диаграммах, не являются данными, которые требуются при проектировании.Так что перейдите в файл chart.js и измените данные, которые будут отображаться. Позже эти данные могут быть изменены динамически при подключении к базе данных, чтобы отображать изменения данных в реальном времени.
После двух диаграмм находятся три маленькие карточки, на которых отображается количество посетителей, продажи и доход. Эти карточки взяты со страницы индекса шаблона. Но на странице индекса четыре карточки в ряду, а у нас только по три в строке. Итак, нам нужно внести некоторые необходимые изменения.
Кроме того, на карточках нет значков, поэтому мы направляемся прямо на страницу виджетов, где есть похожие карточки с пиктограммами.Скопируйте код иконок и вставьте их туда, где это необходимо.
<- Карточка посетителя -><- Конец карты продаж -> <- Карта доходов -><- Концы карты посетителя -> <- Карта продаж ->7874
Посетители
75%75632
Продажи
40%<- Конец карты доходов ->89623 долл. США
Доход
65%