PHP Урок 17. Добавляем CSS фреймворк Bootstrap и jQuery
PHP Урок 17. Добавляем CSS фреймворк Bootstrap 3
Предыдущие уроки:
Программируем на PHP - Введение
PHP - Запросы от браузера к серверу
PHP - Как работает сервер
PHP - Урок 4. PHP - интерпретатор
PHP - Урок 5. Переменные сервера и глобальные переменные
PHP - Урок 6. Конструкции print и echo. Кавычки одинарные и двойные и конкатенация строк
PHP - Урок 7. Переменные, константы и условия
PHP - Урок 8. Точка входа в приложение. Настройка mod_rewrite и файл .htaccess
PHP - Урок 9. Массивы и switch. Кодим основной каркас
PHP - Урок 10. COOKIE
PHP - Урок 11. Функции. Добавляем ядро системы core.php
PHP - Урок 12. Обзор модели MVC. Добавляем шаблоны страниц в наше приложение
PHP - Урок 13. Введение в базы данных и SQL. СУБД MySQL. Подключаемся к БД из нашего приложения
PHP - Урок 14. Регистрация пользователей на сайте
PHP Урок 15. Авторизация пользователей
PHP. Урок 16. Проверка авторизации. Функция check().
Теория
Мы хотим чтобы наше PHP приложение выглядело как множество современных сайтов. Поэтому будем использовать для его стилизации современные технологии. Для начала резберем что такое фреймворк.Что есть фреймворк
Понять что такое фреймворк достаточно просто. В самом общем понимании - это набор шаблонов.
Вот посмотрите на мои статьи, все они строятся по достаточно схожей схеме. Я беру вот такой шаблон:
<h1>PHP Урок *NUM. *TITLE</h1>
<center>*IMG</center>
<h2>Предыдущие уроки:</h2>
<a href="*HREF">*TITLE</a><br />
<hr />
<h2>Теория</h2>
*TEXT1
<h2>Практика</h2>
*TEXT2
<hr />
<h4><a href="https://github.com/Rusldv/thesite">Исходный код на GitHub</a></h4>
<h4><a href="*SRC_COMMIT">Коммит сегодняшнего урока на GitHub</a></h4>
<hr />
<h5>*NEXT_LESSON</h5>
А затем меняю только те его части, которые начинаются со звездочки. То есть делаю только то, что необходимо, избегая тем самым лишней уже сделанной работы ("изобретение велосыпеда").
То есть я использую шаблон. Так и фреймворк - это нечто, что избавляет нас от лишней рутинной работы и оставляет только пространство для творчества.
С другой стороны от обычных шаблонов фреймворки отличает и ряд особенностей. Например то, что каждый фреймворк создается для конкретной задачи, будь то верстка, дизайн, программирование или как у меня статьи для Голоса.
хотя в последнем случае это все таки обычный шаблон - дело в том, что фреймворк, буквально можно перевести на Русский как "Работающие фреймы".
А как следует понимать данное словосочитание.
Давайте сначала разберемся со словом work (в контексте - работающие).
Вот например в английском есть слово net - сеть и network - тоже сеть. Но первая сеть - это связь чего - либо. То есть мы можем свои компьютеры связать проводами, коммутаторами, маршрутизаторами и всем чем душе угодно, но при этом ни одно из упомянутых устройств не будем включать. В принципе сеть будет. Но работать она не будет. То есть мы не сможем передать сообщение по такой выключенной сети.
А вот network - это сеть в понимании ее работающего состояния (когда все необходимые для функционирования сети устройства включены). В данном случае говоря о сети, мы подразумневаем среду передачи данных.
Теперь что такое фрейм.
Опять же образно говоря фрейм - это то во что можно что-то вложить. Но при этом сам фрейм уже обладает нужными ему свойствами.
То есть это некая коробка от посылки, на которой написано для чего и кому она предназначена, но ее содержание определяете вы.
Ваша задача при работе с фреймами - придумать что в них положить, а что с ними будет происходить дальше уже определено.
Теперь давайте объединим эти слова вместе и выясним, что же такое эти работающие фреймы.
Судя из вышенаписанного, это некоторые ячейки, в которые вы можете положить что то из того что вы хотите и в результате получите работоспособное приложение или что-либо другое для чего предназначен фреймворк.
То есть фреймворк избавляет нас от лишней работы, которая имеет абстрактный характер. Мы работаем только с теми ячейками (фреймами) которые действительно влияют, на общий результат.
Поэтому в основном PHP-фреймворки представляют некий интерфейс, куда мы добавляем компоненты.
Компоненты (или что-либо еще это некие фреймы, и мы работаем с ними, при этом нам не нужно беспокоиться о самом функционировании всего приложения.
Ну собственно написание PHP фреймворка мы скоро будем обсуждать. Так как я один такой уже пишу. А пока мы обсуждаем CSS фреймворк bootstrap версии 3.
Давайте выясним, что такое CSS (Каскадные таблицы стилей).
Что такое CSS
Сама эта технология придумана для форматирования разметки, такой как HTML (о структурах и разметках я также писал в этой статье). Так вот. Каждый элемент структуры, представленной в виде текста, может быть оформлен различным образом. То есть к нему могут быть применены различные стили.
CSS как раз и реализует такую возможность. Вы указываете в фале CSS какой-либо элемент текстовой структуры, а за ним в фигурных скобках описываете его стилистические свойства.
Таким образом выбранный элемент может изменять свой цвет, размер, положение и т.д.
Поэтому без CSS не обходится ни одна современная web-страница.
Ну что ж что бы было более понятно разберем все это на примере нашего thesite.loc.
Практика
Все что нам нужно сделать - это скачать фреймворк bootstrap, затем в корневой дирректории создать папку assets и распаковать туда скаченные файлы.
Затем открываем наш файл /sys/templates/index.tpl.php и изменяем его содержимое следующим образом:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?=$title?></title>
<link href="/assets/css/bootstrap.css" rel="stylesheet">
<link href="/assets/css/bootstrap-theme.css" rel="stylesheet">
<link href="/assets/css/font-awesome.css" rel="stylesheet">
<link href="/assets/css/style.css" rel="stylesheet">
<script src="/assets/js/jquery-2.1.4.min.js"></script>
</head>
<body>
<section class="container">
<?php include_once(ROOT.'/sys/templates/'.$tpl.'.tpl.php'); ?>
</section>
<footer>
<p><small>© 2016</small></p>
</footer>
<script src="/assets/js/bootstrap.js"></script>
</body>
</html>
Поскольку index.tpl.php фактически служит оберткой (wrapper) для остальных страниц (inner) нашего проекта, то внесенные изменения отразятся на всех страницах нашей социальной сети.
Здесь в заголовке мы подключаем файлы bootstrap, а также jQuery. Последний компонент содержит удобные функции для работы на javascript и крайне важен для нашей дальнейшей работы.
Ну а также все исходники и библиотеки вы найдете по ссылке ниже.
После проделанной работы, мы сможем заметить, что стиль нашего сайта немного изменился. Так как bootstrap применил к нему свои стили по-умолчанию. Естественно мы также при необходимости можем их изменять.