Админка сайта для интернет магазина
Здравствуйте, уважаемые читатели блога LifeExample, пришло время продолжить создание интернет магазина на php, и перейти к реализации панели администрирования. Обычно панель администрирования сайта также называют панелью управления или попросту админка сайта. С помощью админки для интернет магазина администраторы сайта, могут добавлять новые товары, редактировать и удалять старые, а также добавлять новые страницы сайта и изменять существующие.
Небольшое отступление
При создании нового релиза разрабатываемой CMS, были добавлены некоторые не сложные функции, о которых в этой статье речи идти не будет, но сказать о них стоит.
Наша CMS была доработана и теперь имеет:
- Возможность добавления товара прямо из карточки товара;
- В теги картинок товаров, теперь вставлены атрибуты alt и title , способствующие повышению релевантности страницы;
- Добавлена страница для обратной связи;
- Исправлены ошибки, возникающие при пустой корзине;
- Добавлена панель администрирования, на технологии AJAX.
Зачастую администраторы интернет магазинов, не являются программистами, и более того даже не знают, что такое HTML. Благодаря CMS (системе управления контентом), в наше время стало возможным иметь свой сайт и управлять им, не имея понятия о его технических процессах.
Уже существует огромное количество профессиональных CMS для создания сайтов разной направленности, для блогов хорошо подходит WordPress , для интернет магазинов: «1с-Битрикс» или UMI.CMS. И это только верхушка айсберга, всех существующих систем управления сайтом.
Несмотря на такое обилие разнообразных продуктов, мы сегодня продолжим создавать нашу простенькую CMS систему, главная задача, которой, дать любому желающему возможность быстрого старта своего интернет магазина.
Каждая CMS, сложная или простая, имеет право называться таковой, только при наличии собственной админки. Сегодня мы и займёмся созданием данного атрибута.
Поскольку кода было написано много, я предлагаю вам уважаемые читатели ознакомиться только с внешним видом админки, а также с некоторыми алгоритмами ее работы. При возникновении у вас вопросов я постараюсь подробно изложить их в комментариях или в следующей публикации.
Вход в админку
Для того, чтобы попасть в панель управления сайтом на нашей CMS мы можем пойти двумя путями.
Первый – это воспользоваться, уже имеющимся входом в личный кабинет
В этом случае при успешном вводе логина и пароля мы должны увидеть появившуюся панель в верхней части страницы:
Такая панель будет присутствовать теперь на каждой странице сайта, вплоть до того пока администратор будет авторизирован.
Нажав на надпись «Панель управления» мы попадем в админискую часть, в которой сможем редактировать каталог продукции магазина.
Также для того, чтобы попасть в панель администрирования мы можем обратиться к ней напрямую через адресную строку сайта:
Где система предложит нам авторизоваться как администратор, если мы этого еще не сделали.
Редактирование каталога
Ну, вот мы и подошли к нашей заветной цели, и можем попробовать поработать с каталогом сайта. Первым делом давайте зайдем в раздел «Товары«, кликнув на одноимённую ссылку в верхней части страницы. Мы попадем на страницу редактирования каталога.
Точнее сказать, фактически то мы остались на той же странице /admin/index.php, но визуально нам представилось содержимое страницы /admin/catalog.php. Произошло это потому, как вся административная часть сайта, была построена таким образом, что все действия происходят на одной странице, без ее перезагрузки.
Как вы уже догадались, не обошлось тут без AJAX технологии. Такой подход, когда все приложение работает на одной странице, на мой взгляд, упрощает трудозатраты человека, а также экономит его время на ожидание открытия новых страниц.
В открывшемся интерфейсе мы можем удалить товары, или открыть встроенный блочный элемент: «всплывающее окно», для их редактирования. Для этого нужно нажать на ссылку Редактировать, присутствующую в строке каждого товара :
Перед нами появится карточка выбранного товара, с полями доступными для редактирования данных.
Тут присутствует один очень интересный механизм добавления картинки, о котором я просто обязан рассказать.
Сейчас мы видим кнопку отменить, над изображением товара, нажав на которую, в таблице товара отчистится поле содержащее ссылку на это изображение. Но это мелочи, самое интересное происходит в момент добавления нового изображения. Кстати, давайте опробуем этот механизм при добавлении нового товара в наш каталог.
Добавление нового товара
Для этого нажмите на кнопку добавить товар, на которой изображен плюсик в кружочке. Окно редактирования должно исчезнуть, и появится похожая форма добавления товара:
Видите кнопку «Загрузить«, если на не нажать то появится стандартное диалоговое окно для выбора файла, выберите любое изображение на своем компьютере и нажмите подтвердить.
В обычном случае, после подтверждения выбора файла, ничего не произойдет, и форма будет ждать нажатия кнопки submit, для отправки данных на сервер. Но так как наша админка продвинутая и во всю использует функции библиотеки jQuery , выбранная картинка автоматически загрузится на сервер в папку /uploads , и сразу же будет выведена в отведенную для нее область.
Таким образом создастся эффект того, что картинка просто отобразилась в отведенной области, но на самом деле она уже присутствует на сервере. А для сохранения нового товара, после заполнения всех полей, останется только присвоить нужную ему ссылку на эту картинку.
На данный момент, действует два нюанса:
- Если после загрузки файла на сервер нажать кнопку отменить, то изображение отменится только для товара, но останется храниться на сервере в папке /uploads
- Пока доступна загрузка картинок только с латинскими буквами в названии.
При добавлении нового товара, в левом верхнем углу страницы, мы получим уведомление о том, что товар успешно добавлен, и будем перемещены в конец каталога.
Кстати обратите внимание на функционирующую пагинацию страниц, её алгоритм работы прописан в моделе catalog.php, расположенной по адресу application\models\catalog.php
Важный момент! Все происходящие операции в административной части сайта, используют ранее разработанные нами модели из папки application\models\.
С общими принципами работы админки сайта для интернет магазина я вас ознакомил, из организационных моментов, пожалуй, стоит сказать, что в корень сайта была добавлена папка admin, с ее инфраструктурой.
Файл ajax.php служит маршрутизатором запросов, и перенаправляет их на соответствующие страницы, предварительно подключая нужные для работы файлы.
Файл loadimage.php – сохраняет на сервер выбранное изображение и выводит его.
Папка action содержит в себе набор php скриптов выполняющих различные операции над товарами, и возвращает ответ в формате JSON, для обработки его браузером.
Подробно описывать все взаимосвязи нет смысла, ведь вы сами сможете при желании посмотреть в код фалов и во всем разобраться. В коде присутствуют комментарии.
Заключение
Я постарался сделать так, чтобы все операции были легкими и быстрыми, переложив всю нагрузку на работу клиентского браузера. В итоге получилось то, что получилось, и вы можете поэкспериментировать с данным инструментом. Пишите свои вопросы, и предложения, будем разбираться вместе.
Читайте также похожие статьи:
Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.
Как создать Admin-панель для сайта
В прошлой статье мы с Вами разбирали создание собственного движка для сайта. Однако, очень часто приходится управлять сайтом: добавлять новые материалы, управлять пользователями, голосованиями. Безусловно, это можно делать через PHPMyAdmin, но это весьма неудобно, поэтому хорошим решением будет — создать Admin-панель для сайта. И как это сделать, Вы узнаете в этой статье.
Итак, давайте вновь распишу порядок действий, которые необходимо выполнить:
- Сверстайте все страницы сайта. В принципе, Вы вообще можете обойтись без дизайна, но элементарная структура должна быть. То есть табличные данные должны быть в таблице, а не сплошным текстом.
- Примите решение о том, какие данные Вы хотите видеть в Admin-панели. Например, наверняка Вам потребуется видеть пользователей Вашего сайта, Ваши статьи, может быть, какие-нибудь опросы.
- Создайте класс для управления Admin-панелью. Здесь должны быть созданы методы, которые позволяют делать выборку из самых разных таблиц, а также добавлять и редактировать записи в них. И сделать подобные методы нужно для всех таблиц, с которыми Вы хотите работать в Admin-панели (Вы уже должны были выбрать это в предыдущем пункте). Например, самый простой пример с пользователями. Минимальный набор требуемых методов: выборка всех пользователей, добавление нового пользователя, изменение пользователя. Безусловно, все эти задачи должны быть Вами уже реализованы при создании движка для сайта, поэтому здесь Вам надо будет только обратиться к старым классам и, возможно, как-то изменить данные конкретно для Admin-панели.
- Разбейте Ваш шаблон сайта на отдельные части и скопируйте их в отдельные файлы с расширением tpl. Также поставьте элементы шаблона, например, так: «Пользователь зарегистрировался «. Это всего лишь пример, а данные, вообще говоря, удобнее выводить в таблицах.
- Создайте класс, который будет заниматься подстановкой вместо элементов шаблона соответствующие данные.
- Собирайте по кирпичикам все страницы Admin-панели Вашего сайта с помощью созданного в предыдущем пункте класса.
- При желании можете сделать дизайн, хотя, безусловно, это исключительно для Вас и других администраторов.
Как видите, последние 4 пункта идентичны тем, которые Вы выполняли при создании движка. Здесь объём работы будет значительно меньше, поэтому, думаю, Вы с этим без проблем справитесь.
Я где-то три месяца сидел на своём сайте без Admin-панели, добавляя новые материалы напрямую через базу данных. Скажу честно, тратил много лишнего времени, а когда создал Admin-панель на своём сайте, то процесс управления сайтом значительно упростился. Так что рекомендую Вам сделать то же самое.
Пример создания Admin-панели Вы найдёте в этом обучающем курсе: http://srs.myrusakov.ru/im
Создано 29.05.2011 13:49:54
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 15 ):
«Я где-то три месяца сидел на своём сайте без Admin-панели, добавляя новые материалы напрямую через базу данных. Скажу честно, тратил много лишнего времени, а когда создал Admin-панель на своём сайте, то процесс управления сайтом значительно упростился. Так что рекомендую Вам сделать то же самое.» И мне тоже мучить добавляя новые материалы, как это вы сделал «напрямую через базу данных» я сам не знаю? И еще когда вы создал админ-панель на своей сайт? да хочу управления сайт упростился, как это сделать? Я выучил твой видеоуроки html css я сам все понял. Но мне интересую как создать админ-панель самое главное мне удобно добавляя новые материалы. У вас есть этот видеоурок этот? Мне нужно без joomla я знаю это готовый это мне не интересно, мне интересне с нуля.
Чтобы создать admin-панель, HTML и CSS недостаточно. Изучайте PHP и MySQL. Когда будете знать на достаточно хорошем уровне, то вопрос сразу же отпадёт.
Михайл Русаков, большое спасибо за совет. Хорошо постараюсь зучай РНР и MySQL.
Здравствуйте. Для админки я сделал 2 страницы: 1)Страница с формой входа. 2)Сама админка. Так же в скрипте есть функция проверки введённых данных. Если данные введены верно,как направить пользователя на страницу админки? И,если пользователь в строку урл сразу ввёл адрес админки, как направить его на страницу с формой входа? Или подскажите как реализуется доступ в админку.
Если пользователь правильно ввёл данные, то делается редирект на админку. Если пользователь просто зашёл в админку, а он не авторизован (не содержит правильных данных в сессии или cookie), то делается редирект на форму авторизации.
Редирект я делал так: Ничего не получилось, выдаёт ошибку.