Создание админки для сайта

Создание админки для сайта

Делаем админку для лендинга

Мы, конечно же, избежим громоздких кодов, прикручивания различных визуальных редакторов… все что нам необходимо — наличие php на хостинге и пару строчек кода! Наша админка для лендинга впоследствии также не будет нуждаться в обновлении кода, обслуживании, занимать лишнее место на хостинге и т.д. Все очень просто!

Авторизация и кабинет администратора

Для начала нам необходимо создать кабинет, в котором администратор сайта сможет авторизоваться. Для этого открываем новую папку на хостинге в корне сайта admin и в ней два файла pass.php и index.php. Содержимое файла pass.php будет выглядеть следующим образом (содержать ваш логин и пароль для авторизации):

<?php die; ?> admin passadmin

Содержимое файла index.php, в котором будет осуществляться авторизация администратора:

<?php //очищаем авторизацию при выходе из админки if($_GET==’exit’) { session_start(); $_SESSION = array(); session_destroy(); header(‘Location: ../index.php’); } // Начинаем сессию и вход в кабинет session_start(); $access = array(); $access = file(«pass.php»); $login = trim($access); $passw = trim($access); if(!empty($_POST)) { $_SESSION = $_POST; $_SESSION = $_POST; } if(empty($_SESSION) or $login != $_SESSION or $passw != $_SESSION ) { ?> <center> <form action=index.php method=post> Логин <input class=input name=login value=»»> Пароль <input class=input name=passw value=»»> <input type=hidden name=enter value=yes> <input class=button type=submit value=»Вход»> </center> <?php die; } // на данном этапе мы реализовали авторизацию, далее мы создаем элементы, которые будут видны администратору, если он введет правильный пароль ?> <?php $file_txt=»../config/config.ini»; //путь к файлу настроек $otp=$_REQUEST; $txt=$_REQUEST; if(isset($otp)){ $fopen=fopen($file_txt,»w»); fputs($fopen,$txt); fclose($fopen); header(«location: http://».$_SERVER.$_SERVER); exit; } ?> <!DOCTYPE html PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»> <html> <head> <meta charset=»utf-8″> </head> <body> <form name=forma method=post action=»»> <textarea name=txt rows=30 cols=100><?php @include($file_txt);?></textarea><br><br> <input type=submit name=otp value=Сохранить> </form> <h1>Вы в админке<br><a href=»../index.php?p=exit»>ВЫЙТИ</a></h1> </body> </html>

Итак, после удачной авторизации, администратор увидит элемент textarea, с содержимым файла настроек «../config/config.ini» и возможностью их отредактировать. После внесения необходимых правок, он может выйти из кабинета, нажав на ссылку ВЫЙТИ.

Файл настроек

Создадим папку config в корне сайта и в ней два файла .htaccess и config.ini В .htaccess запретим внешний доступ к файлу config.ini, хотя это и необязательно, ведь в нем не будет секретных сведений:

<Files ~ «\.ini$»> Order allow,deny Deny from all </Files>

И в файле настроек config.ini мы должны описать переменные, которые хотим изменять на сайте, для примера я приведу самые динамичные:

; цена с доставкой — это комментарий для администратора, ниже сама переменная и ее значение cena1 = «1200 рублей» ; цена без доставки cena2 = «999 рублей» ; услуги курьера cena3 = «300 рублей» ;Телефоны phone = «+7 495 0123456» phone2 = «+7 495 654321» ;E-mail pochta = «bezotveta@mail.ru» ;Физический адрес adress = «г. Москва, ул. Нахимова…»

Переменные на сайте

И последний этап — внедрить все данные (переменные) из файла настроек в шаблон сайта (лендинг). Для этого открываем главный файл своего лендинга (обычно это index.php в корневой директории сайта) обычным текстовым блокнотом и в самом вверху подключаем файл конфигурации:

<?php $ini = parse_ini_file(‘./config/config.ini’); ?>

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

<?php print $ini;?> <?php print $ini;?> <?php print $ini;?>

Вместо телефонов на сайте пишем:

<?php print $ini;?> <?php print $ini;?>

Вместо адреса электронной почты

<?php print $ini;?>

Вместо физического адреса:

<?php print $ini;?>

Разумеется, в файл настроек вы можете прописать столько переменных, сколько необходимо изменять впоследствии. Слишком дотошные, могут перенести в переменные хоть и все текстовое содержимое лендинга. На практике же целесообразно в файл настроек вынести наиболее динамичные данные с сайта, те текстовые данные, которые рано или поздно придется менять.

Авторизация

Чтобы ограничить доступ, нужна форма входа в панель управления сайтом:

$echo = «<div class=’table’>

<div class=’tale-wrapper’>

<div class=’table-title’>Войти в панель администратора</div>

<div class=’table-content’>

<form method=’post’ id=’login-form’ class=’login-form’>

<input type=’text’ placeholder=’Логин’ class=’input’
name=’login’ required><br>

<input type=’submit’ value=’Войти’ class=’button’>

</div>»;

В переменную $echo прописывается HTML-код формы, которая передает данные на эту же страницу. Затем они обрабатываются:

function login($db,$login,$password) {

//Обязательно нужно провести валидацию логина и пароля, чтобы
исключить вероятность инъекции

//Запрос в базу данных

if(mysqli_num_rows($loginResult) == 1) { //Если есть совпадение,
возвращается true

return true;

} else {//Если такого пользователя не существует, данные стираются,
а возвращается false

unset($_SESSION,$_SESSION);

return false;

}

}

if(isset($_POST) && isset($_POST)) {

$_SESSION = $_POST;

$_SESSION = $_POST;

}

if(isset($_SESSION) && isset($_SESSION)) {

if(login($db,$_SESSION,$_SESSION)) {//Попытка авторизации

//Тут будут проходить все операции

$echo = null; //Обнуление переменной, чтобы удалить из вывода
форму авторизации

}

}

После отправки формы данные переносятся в супермассив $_SESSION. Затем вызывается функция login(). Она делает запрос в базу данных. Если он проходит удачно, возвращается значение true, если нет — данные из $_SESSION удаляются и возвращается false.

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

Главная страница

Теперь нужно, чтобы кроме лицезрения табличек пользователь мог делать что-то полезное. Для этого методом GET передается название страницы:

if(isset($_GET)) {$act = $_GET;} else {$act = ‘home’;}

switch($act) {

case ‘home’:

$article_result = mysqli_query($db,»SELECT * FROM articles»);

if(mysqli_num_rows($article_result) >= 1) {

while($article_array = mysqli_fetch_array($article_result)) {

}

} else {

$articles = «Статей пока нет»;

}

$users_result = mysqli_query($db,»SELECT * FROM userlist»);

if(mysqli_num_rows($users_result) >= 1) {

while($users_array = mysqli_fetch_array($users_result)) {

}

} else {

$users = «Статей пока нет»;

}

$echo = «<div class=’tables’>

<div class=’table’>

<div class=’table-wrapper’>

<div class=’table-title’>Страницы</div>

<div class=’table-content’>

<div class=’table’>

<div class=’table-wrapper’>

<div class=’table-title’>Пользователи</div>

<div class=’table-content’>

</div>»;

}

В переменную $act попадает значение из $_GET, а если его не существует, то просто «home». Дальше с помощью функции switch() прописываются действия для каждой страницы.

На главной странице админки должен быть доступ к управлению всеми компонентами сайта:

  • пользователями;
  • статьями;
  • карточками товаров;
  • комментариями;
  • файлами;
  • изображениями;
  • статистикой;
  • рекламными баннерами и так далее.

Также необходима возможность редактировать общие настройки сайта, чтобы можно было быстро поменять метатеги, изменить параметры капчи, обновить политику конфиденциальности и так далее. Словом, должен быть доступ ко всему функционалу панели управления.

Редактирование

Как вы могли заметить, в таблицах каждая строчка — это ссылка такого вида:

<a href=’?act=edit_article&id=$article_array’>$article_array | $article_array</a>

В переменной act передается значение edit_article, а в id — идентификатор статьи. Перейдя по ссылке, администратор должен попасть на страницу редактирования:

case ‘edit_article’:

if(isset($_GET)) {

$id = $_GET;

$result = mysqli_query($db,»SELECT * FROM articles WHERE id=’$id'»);

if(mysqli_num_rows($result) == 1) {

if(isset($_POST) && isset($_POST) && isset($_POST)) {

//Тут должна быть валидация

//Обновление таблицы

$update = mysqli_query($db,»UPDATE articles SET title=’$_POST’, description=’$_POST’, text=’$_POST’ WHERE id=’$id'»);

if($update) {

//Если обновление прошло успешно, получаются новые данные

$result = mysqli_query($db,»SELECT * FROM articles WHERE id=’$id'»);

$message = «Успешно обновлено!»;

}

}

$article = mysqli_fetch_array($result);//Получение информации в массив

//Форма редактирования

$echo = «<div class=’table’>

<div class=’table-wrapper’>

<div class=’table-title’>Редактирование статьи</div>

<div class=’table-content’>

<a href=’?act=home’><- Вернуться</a><br>

<form method=’post’ class=’article-form’>

<b>Название:</b> <input type=’text’ name=’title’ value=’$article’><br>

<b>Описание:</b> <textarea name=’description’>$article</textarea><br>

<b>Текст:</b> <textarea name=’text’>$article</textarea></br>

<input type=’submit’ class=’button’ value=’Сохранить’>

</div>»;

}

}

Сначала в базу данных отправляется запрос на получение статьи. Затем, если все в порядке, выводится форма редактирования. Если перед этим пользователь отправил измененный текст, то он отправляется на сервер, таблица обновляется, а потом с помощью еще одного запроса выводится актуальная информация.

Добавление записей в базу данных

Чтобы создать функцию добавления пользователя (или любого другого элемента на сайте), нужно парсить форму и ее обработчик:

case ‘add_user’:

if(isset($_POST) && isset($_POST)) {

$check = mysqli_query($db,»SELECT * FROM userlist WHERE login=’$_POST'»);

if(mysqli_num_rows($check) == 0) {

$insert = mysqli_query($db,»INSERT INTO userlist (login,password,admin) VALUE (‘$_POST’,’$_POST’,’$_POST’)»);

if($insert) {

$message = «Пользователь успешно добавлен!»;

} else {

$message = «Ошибка! «.mysqli_error($db);

}

} else {

$message = «Пользователь с таким логином уже существует!»;

}

}

$echo = «<div class=’table’>

<div class=’table-wrapper’>

<div class=’table-title’>Новый пользователь</div>

<div class=’table-content’>

<a href=’?act=home’><- Вернуться</a><br>

<form method=’post’ class=’user-form’>

<b>Логин:</b> <input type=’text’ name=’reglogin’ required><br>

<b>Пароль:</b> <input type=’text’ name=’regpassword’ required><br>

<b>Админ:</b> <input type=’checkbox’ name=’regadmin’></br>

<input type=’submit’ class=’button’ value=’Добавить’>

</div>»;

Сначала проверяется, свободен ли указанный логин. Если да, то в базу вносятся соответствующие данные. Также обратите внимание, что существование переменной regadmin не проверяется, потому что форма ее не отправляет, если оставить чекбокс пустым.

Статистика

Бывает очень полезно посмотреть статистику посещений, комментирования и другой активности. Для этого в базе данных создается таблица с полями:

  • id;
  • date;
  • views;
  • comments.

В них записывается общее количество просмотров и комментариев за каждый день, которое затем выводится на графике. Чтобы это сделать, нужно прописать HTML-код таблицы:

<div class=’table’>

<div class=’table-wrapper’>

<div class=’table-title’>Статистика</div>

<div class=’table-content’>

<img src=’stats.php’ class=’statistics-img’> <br>

Красный: просмотры <br>

Синий: комментарии <br>

1 шаг — 1 день

В качестве источника картинки указывается PHP-файл со следующим кодом:

<?include(«includes/db.php»);

$width = 400;

$height = 200;

$canv = imagecreatetruecolor($width, $height);

//Цвета

$white = imagecolorallocate($canv, 255, 255, 255);

$gray = imagecolorallocate($canv, 150, 150, 150);

$black = imagecolorallocate($canv, 0, 0, 0);

$red = imagecolorallocate($canv, 255, 0, 0);

$blue = imagecolorallocate($canv, 0, 0, 255);

imagefill($canv,0,0,$white);

//Рисуется квадрат

imagerectangle($canv, 15, 5, $width-5, $height-15, $gray);

//Горизонтальные линии

for($i = 1; $i <= 5; $i++) {

imageline($canv, 15, $height-$i*35, $width-5, $height-$i*35, $gray);

}

//Вертикальные линии

for($i = 1; $i <= 15; $i++) {

imageline($canv, 15+($i*30), 5, 15+($i*30), $height-15, $gray);

}

//Получение статистики из базы данных

$stats_result = mysqli_query($db,»SELECT * FROM statistics»);

if($stats_result) {

$last_y = ;

$x = 15;

//Рисуется график

while($stats = mysqli_fetch_array($stats_result)) {

imageline($canv, $x, ($height-15)-$last_y, $x+30, ($height-15)-($stats/10), $red);

imageline($canv, $x, ($height-15)-$last_y, $x+30, ($height-15)-($stats/10), $blue);

$last_y = $stats/10;

$last_y = $stats/10;

$x += 30;

}

} else {echo mysqli_error($db);}

//Вывод изображения

header(«Content-type: image/png»);

imagepng($canv);

//Освобождение памяти

imagedestroy($canv);

?>

Сначала создается изображение и рисуются рамка и деления. Затем делается запрос в базу данных, чтобы получить статистику, которая отрисовывается в виде графика. Изображение сохраняется для разового вывода, а потом удаляется. Когда пользователь обратится к статистике в следующий раз, информация будет визуализирована заново.

Дополнительный функционал

То, о чем мы успели поговорить, — лишь часть того, что должно быть в админке. Например, можно реализовать:

  • премодерацию комментариев;
  • удаление записей из базы данных;
  • работу с файлами;
  • продвинутый редактор статей;
  • подробную статистику каждой отдельной страницы и так далее.

Также необходимо научиться тщательно проверять приходящие данные, сделать аутентификацию снова великой безопасной. Все это относится к разным направлениям PHP, которые невозможно охватить в одной статье.

Если вы хотите освоить освоить все направления PHP, запишитесь на курс
«PHP-разработчик с 0 до PRO». Вы получите все необходимые знания и закрепите их на практике — так вы научитесь самостоятельно разрабатывать даже самые сложные приложения, не списывая что-то в интернете.

Курс «PHP-разработчик» Обширная программа для изучения PHP, состоящая из 4 курсов. Поможет с нуля овладеть популярным языком программирования, устроиться в IT-компанию вашей мечты или стать независимым разработчиком.

  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Универсальный шаблон готового сайта UseSite


Шаблон сайта UseSite:
Верстка: HTML, DIV, CSS, JS, PHP, спрайты, Windows-1251;
Состав: Фотогалерея, Обратная связь (PHP), Чат, Модуль администратора (PHP — файловый менеджер);
Кроссбраузерность: проверен и подогнан под самые популярные Mozilla, Opera, Google, Internet Explorer;
Валидация: проходит валидацию Validator.W3.org на все 100%!
Объем: 11.16 Мб
Полностью готовый к применению в качестве сайта шаблон UseSite является универсальным инструментом для быстрого создания Интернет проекта.
В нем предусмотрены все основные модули необходимые современному сайту: фотогалерея, обратная связь, ЧАТ онлайн общения, модуль Администратора для работы с файлами и т.д.
После заливки файлов на хостинг Вам останется лишь раскрутка и продвижение сайта в поисковых системах.
Шаблон создавался преследуя цель быть простым в редактировании и настройках при максимальной функциональности, включенных в него модулей.
Проект рассчитан на начинающих сайтостроителей, обладающими навыками рядового пользователя компьютером. Достаточно уметь открывать файл текстовым редактором и сохранять изменения.

В комплект шаблона входит подробная инструкция, электронная книга — справка (ebook).
Она поможет быстро создать свой личный сайт начиная с регистрации домена и парковки его на хостинге.

Содержание руководства прилагаемого к шаблону:

Порядок регистрации доменного имени, прописка DNS-адресов, запуск сайта;
Основные настройки и редактирование шаблона;
Программы для работы;
Редактируем шапку: заголовок, слайдер, меню;
Редактируем подвал (footer) сайта;
Редактируем содержимое сайта — текст;
Настройка фотогалереи и работа с изображениями;
Настройка формы обратной связи;
Настройки и установка ЧАТа;
Админка сайта. Работа с файлами без входа по FTP;
Выносим код за пределы страниц. Используем функции PHP include;
Структура шаблона сайта. Содержимое и назначение папок и файлов;

Оптимизируем страницы сайта под поисковые системы.
В исходный код всех страниц и скриптов шаблона сайта включены комментарии на русском языке. Они не отображаются при работе сайта и помогут быстро сориентироваться при создании новой конфигурации проекта.
Используя пояснения в коде файлов можно обойтись даже без прилагаемой к шаблону инструкции.
Шаблон состоит из отдельных модулей и блоков, которые можно добавлять в любое место страниц сайта, менять местами, удалять. Структура дизайна при этом не пострадает.

Блоки.

Блоки вынесены в отдельную папку и вставляются в дизайн страницы кодом include.
Для внесения изменений в шапку, слайдер или подвал (footer) сайта достаточно изменить код в одном файле (модуле) и результаты затронут все страницы, в которых подключен модуль.
Это очень удобно при установке на сайт рекламы, допустим SAPE, тизеров, попандеров и т.д.
Счетчик посещаемости не надо будет разносить по всем страницам сайта.
Меню, шапка и слайдер тоже редактируются в одном месте, при этом изменения происходят во всем сайте.

Модули.

Фотогалерея — может быть бесконечно расширена. Изображения увеличиваются при нажатии и закрываются кликом по нему. Навигация появляется при смещении мышки правее или левее при просмотре исходной картинки.
Обратная связь — содержит защитный код каптчу. Не требует никаких настроек, только замену email в файле конфигурации на Ваш.
Чат — подробное описание установки и настройки в руководстве.

АДМИНКА

Возможности админки:
— Пароль на вход;
— Просмотр папок и файлов;
— Загрузка файлов в любую папку;
— Создание и редактирование новых файлов и папок;
— Установка прав доступа CHMOD;
— Поиск папок и файлов, в том числе картинок, по названию и весу;
— Определение расширения файлов для загрузки и т.д.

Дизайн шаблона.

Большое внимание уделено универсальности дизайна шаблона.
Для достижения уникальности Вашего будущего сайта достаточно произвести минимальные изменения.
Фон шапки и подвала сайта не являются картинкой и редактируется изменением градиентов двух цветов. Кнопки выполнены посредством кода CSS и редактируются также заменой цвета: исходный, активный.
Логотип выполнен с применением спрайта, при наведении меняет вид. В комплект входит PSD исходник логотипа с открытыми слоями. Вы можете заменить текст логотипа на свой.
Меню сайта не ограничено в размерах. При превышении количества пунктов, оно плавно переходит во второй ряд.
В рабочем дизайне шаблона использованно менее пяти картинок. В основном все достигается средствами CSS, что значительно увеличивает скорость работы и открытия сайта.
Слайдер меняет скорость показа изображений, несет в себе любое количество картинок.
Экономия средств.
Шаблон не требует подключения на хостинге базы MySql, обходится PHP средствами. Например, при использовании хостинга Jino может сэкономить 42 рубля в месяц, за счет отключения услуги MySql. С поддержкой только PHP функций оплата составит 2 руб. 50 коп. в сутки с 10 Гб выделенного пространства.
Шаблон сайта полностью готов к работе при загрузке на сервер хостинга..
Шаблон поставляется в двух версиях HTML и PHP — include.
HTML для просмотра на компьютере без функций include.
PHP — include для загрузки на сервер (работы в Интернете).
В версии PHP — include на компьютере не будут отражаться блоки шапки, подвала, галереи…
Проверить работоспособность и просмотреть работу сайта на компьютере Вы можете используя HTML версию. Включена в состав архива для наглядности и полета Вашей творческой мысли в плане дизайна будущего проекта.
В ней не будут работать Админка и Обратная связь из-за того, что на Вашем компьютере наверняка не установлены PHP, Apache.
Благодаря готовому шаблону и инструкциям Вы сможете быстро, бесплатно создать свой личный сайт и запустить проект в сеть.
Главным преимуществом для новичков станет то, что они научаться работать с кодом.
Шаблон максимально адаптирован для быстрой работы сайта в сети (открытие страниц).
Это достигнуто за счет применения таблиц стилей CSS, JS скриптов и уменьшения количества применяемых картинок в дизайне.
Шаблон сайта UseSite:
Верстка: HTML, DIV, CSS, JS, PHP, спрайты, Windows-1251;
Состав: Фотогалерея, Обратная связь (PHP), Чат, Модуль администратора (PHP — файловый менеджер);
Кроссбраузерность: проверен и подогнан под самые популярные Mozilla, Opera, Google, Internet Explorer;
Валидация: проходит валидацию Validator.W3.org на все 100%!
Объем: 11.16 Мб
Скачать шаблон: template_usesite.rar (cкачиваний: 4149)


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *