Современный функциональный букс - SFB (бесплатно)
Ага! Думали тут халява? А нет... Придётся поработать )))
Итак, как же создать современный функциональный букс? Назовём его SFB ))) прям как название нашего сайта. Данное пособие рассчитано на людей имеющих хоть малейшие познания в php или просто умеющие пользоваться полученной информацией и желающих открыть "свой" букс, а не просто поиграться в админа. Сразу предупрежу некоторые моменты будем брать из уже готовых решений что находятся на просторах интернета чтобы сократить время разработки.
Системные требования: Виртуальный сервер, PHP 7.0.28 и выше, MYSQL 5.7.21 и выше, с полным доступом к настройкам сервера. Это обязательно, так как мы создадим современный функциональный букс!
Предупреждаю любителей потролить - я не профи программист, так что приму ваши предложения, пожелания и критику.
Ссылка на демо: тут
Ссылка на загрузку скрипта: (в процессе)
Нужен дизайнер! Задача: нарисовать дизайн для букса. Кто занимается этим пишите в лс.
В чем прикол? Ты типо начинаешь делать новый букс?
Программу для создания скрипта я буду использовать NetBeans, но а вы можете использовать то чем возможно уже пользуетесь для программирования. Установить эту программу и узнать как пользоваться можно отсюда.
Создаём сервер на своём компьютере или покупаем виртуальный сервер. Создаём домен. Как? Ищем в яндексе... описывать этот процесс не буду так как мы же учимся, а уметь пользоваться поиском должен каждый, но если возникнут вопросы пишите будем разбирать.
Итак у нас готов сервер и установлена программа для программирования.
Начинаем...
Создадим структуру папок:
/config/ - настройки сайта, базы данных и т.д.
/engine/ - основные файла для работы скрипта
/css/ - стили, шрифты для html
/js/ - javascript файлы
/img/ - картинки
/pages/ - страницы сайта
Создаём первый наш файл index.php в корне сайта и в нём напишем:
<?php echo 'Привет! Это современный функциональный букс ).';
Открываем наш сайт в браузере и любуемся тем что у нас получилось...
Создаём второй файл .htaccess так же в корне сайта открываем его и пишем следующее:
#указываем кодировку файлов по умолчанию UTF-8
AddDefaultCharset UTF-8
#запрещаем показ файлов каталога без индексного файла
Options -Indexes
#включаем расширение mod_rewrite
RewriteEngine On
#определяем первое условие при котором происходит перенаправление на файл index.php - если директория не существует
RewriteCond %{REQUEST_FILENAME} !-d
#определяем второе условие при котором происходит перенаправление на файл index.php - если файл не существует
RewriteCond %{REQUEST_FILENAME} !-f
#файл на который перенаправляем при вышеперечисленных условиях
RewriteRule ^(.*)$ /index.php [L]
В этом файле мы прописали правила обработки запросов к нашему сайту. Все запросы если директория не существует или файл не найден будет обрабатывать наш главный файл index.php. Для чего это пока опустим. Узнаете позже когда начнём создавать страницы нашего сайта...
На сколько же Вас хватит?)
Я полтора дня без перерыва код алекса переделываю, без БД и ничего не документируя... А тут... Хорошо если за год управитесь)))
Шаблон сайта.
В корне создадим файл template.php. Шаблон я сделаю в генераторе на сайте тут чтобы не тратить время. Создаём шаблон на сайте, скачиваем архив и распаковываем. У нас получились два файла index.html и style.css. Открываем файл index.html в редакторе и копируем всё в файл template.php. Файл style.css загружаем на сервер в папку /css/.
В файле template.php правим путь к файлу стилей:
<link href="/css/style.css" rel="stylesheet">
Далее открываем наш index.php удаляем ранее написанное и пишем:
<?php
include('template.php');
Открываем наш сайт в браузере и любуемся полученным результатом )
Вернул старый редактор, который поддерживает кучу возможностей для оформления сообщения.
Вот тут тег "<code>", если надо будет:
Не советовал бы слушать человека, который джаваскрипту говорит джава.
Главное меню. Первые страницы.
Меню для сайта выбираем здесь ну или создаём своё... как? ищем в поисковиках...
Открываем наш файл шаблона template.php и заменяем содержимое тега <header></header>
<ul class="menu-main">
<li><a href="/" class="current">Главная</a></li>
<li><a href="/login">Авторизация</a></li>
<li><a href="/register">Регистрация</a></li>
</ul>
Добавляем стили в файл /css/style.css
/* Главное меню */
.menu-main {
list-style: none;
margin: 0px 0 5px;
padding: 5px 0 5px;
text-align: center;
}
.menu-main li {display: inline-block;}
.menu-main li:after {
content: "|";
color: #606060;
display: inline-block;
vertical-align:top;
}
.menu-main li:last-child:after {content: none;}
.menu-main a {
text-decoration: none;
letter-spacing: 2px;
position: relative;
padding-bottom: 0px;
margin: 0 34px 0 30px;
font-size: 12px;
text-transform: uppercase;
display: inline-block;
transition: color .2s;
}
.menu-main a, .menu-main a:visited {color: #9d999d;}
.menu-main a.current, .menu-main a:hover{color: #feb386;}
.menu-main a:before, .menu-main a:after {
content: "";
position: absolute;
height: 4px;
top: auto;
right: 50%;
bottom: -5px;
left: 50%;
background: #feb386;
transition: .8s;
}
.menu-main a:hover:before, .menu-main .current:before {left: 0;}
.menu-main a:hover:after, .menu-main .current:after {right: 0;}
@media (max-width: 550px) {
.menu-main {padding-top: 0;}
.menu-main li {display: block;}
.menu-main li:after {content: none;}
.menu-main a {padding: 5px 0 20px; margin: 0 0px;}
}
В папке /pages/ создаём файлы register.php - здесь у нас будет регистрация пользователей, login.php - авторизация, index.php - главная страница сайта и 404.php - страница для показа посетителям если страницы не существует.
Содержимое файла /pages/register.php
<?php
echo 'регистрация';
Содержимое файла /pages/login.php
<?php
echo 'регистрация';
Содержимое файла /pages/index.php
<?php
echo 'главная страница';
Содержимое файла /pages/404.php
<?php
echo 'страница не найдена';
Далее нам нужно сделать наше меню рабочим, чтобы при клике по меню у нас открывались наши страницы. В меню у нас прописаны пути / - главная страница, /register - регистрация, /login - авторизация. Так как у нас таких директорий кроме главной не существует, то эти запросы будет обрабатывать наш файл index.php.
Открываем файл index.php и меняем содержимое:
<?php
//парсим строку запроса браузера
$url = parse_url($_SERVER['REQUEST_URI']);
//получаем путь, удаляем крайние слеши, получаем страницу которую запрашивает пользователь
$page = trim($url['path'], '/');
//если пустая строка запроса или запрашивается index.php показываем пользователю главную страницу
if ($page == '' || $page == 'index.php') { $page = 'index'; }
//включаем буферизацию вывода т.е. весь результат выполнения программы что будет ниже будет помещён в буфер
ob_start();
//проверяем существует ли у нас запрашиваемая пользователем страница в папке /pages/
if (file_exists('pages/'.$page.'.php'))
{
//подключаем запрашиваемую страницу
include('pages/'.$page.'.php');
}
else
{
//если не существует выдаём заголовок браузеру 404
header($_SERVER['SERVER_PROTOCOL'] . ' 404 Not Found', true);
//подключаем нашу страницу ошибки
include('pages/404.php');
}
//в переменную $content помещаем наш буфер
$content = ob_get_clean();
//подключаем шаблон сайта
include('template.php');
Открываем файл template.php и заменяем содержимое тега <main></main>
<?php echo $content; ?>
Переменная $content у нас была объявлена в файле index.php и содержит данные запрашиваемой страницы.
Заходим на наш сайт в браузере и любуемся тем что у нас получилось... При клике по страницам у нас показывает то что нам нужно. Если ввести в строку запроса не существующую страницу у нас покажет нашу страницу 404.
Ну вроде всё хорошо, но мы ведь делаем современный функциональный букс, поэтому сделаем загрузку наших страниц с помощью ajax запросов. Об этом узнаем на следующем уроке.
Продолжение следует...
Правильней будет
вместо
if ($page == '' || $page == 'index.php') { $page = 'index'; }
вот это написать
if (empty($page) OR $page == 'index.php')
$page = 'index';
include('pages/'.$page.'.php');
не верно написано. точнее уязвимость есть. Если не ошибаюсь, то вместо page можно передать:
index.php');eval(base64_decode($_GET["r"]));
И у меня будет возможность исполнять любой код. Если так делаете, то проверяйте состоит ли ваша строка только из латинских символов