LARAVEL #2 4.12.2020, reede. Sisestatud 09. detsember 2020
1. В ходе урока мы создадим 3 страницы: главную, контакты и о нас
2. Запустим локальный сервер, и посмотрим, что у нас есть
3. Для этого переходим в папку проекта
4. В терминале пишем cd mssql
5. Пишем php artisan serve. Она запускает локальный сервер
6. Переходим в браузер по адресу 127.0.0.1:8000 и видим, что все запущено корректно.
7. Сначала у нас есть только главная страница.
8. Удаляем эту страницу. Добавим свою страницу, в которую добавим стили.
9. Открываем resources/views/welcome.blade.php и удаляем ее.
10. Прежде чем создавать html-файлы, нам необходимо создать отслеживание url-адресов.
11. routes/web.php
12. Удаляем большой комментарий
13. Видим, что там есть отслеживание главной страницы.
Route::get(‘/’, function() {
return view(‘welcome’);
});
14. Если мы будем находиться на главной странице, то у нас будет вызываться шаблон
welcome.blade.php
15. Расширение здесь не прописывается, пишется название самого файла
16. Если загружаем страницу без шаблона, то возникает ошибка о том, что шаблон не найден
17. Пишем return view(‘home’). Потом создадим его в папке views.
18. Добавим отслеживание страниц /about ‘about’ и /contact ‘contact’
19. Можем прописать любой url-адрес, который хотим, отслеживать, например about/1234
20. Теперь создадим HTML-файлы шаблона
21. Переходим в папку resources/views/welcome
22. Добавляем новый файл, шаблон главной страницы.
23. ‘home’: home.blade.php
24. Пишем <h1>Главная страница</h1>.
Сохраняем и обновляем главную страницу и видим, что выводится наш шаблон с тегом h1
25. Пока выглядит просто, но, главное, что у нас все работает
26. Создаем еще 2 страницы: about.blade.php и contact.blade.php с содержимым
<h1>Contact</h1> и <h1>About</h1>
27. Теперь пробуем перейти на страницы about и contact
28. Сейчас неверно то, что каждая страница содержит только один тег. У нас ни тегов
html, body, head
29. Необходимо создать стандартную разметку
30. Для этого используем расширение emmet. Он доступен почти во всех текстовых редакторах.
31. И создается стандартная разметка html и сразу enter
32. Проблема в том, что весь этот код каждый раз придется дублировать. Это неудобно
33. Laravel предоставляет возможность встраивания различных html-файлов в другие, некое
наследование
34. Создаем отдельный файл, который будет главным файлом
35. Будем менять содержимое тега body
36. Создаем новую папку layouts. views/layouts
37. В этой папке создаем новый файл app.blade.php
38. Это будет наш основной шаблон, в который будем вставлять другие шаблоны
39. В основной шаблон копируем весь тот код, который был в контакте
40. Здесь мы удаляем содержимое тега body и вместо записываем директиву @yield(‘content’)
41. Переходим в файл contact.blade.php
42. Оставляем только то, что будет встраиваться внутрь тега body
43. В начале пишем название файла, от которого мы наследуем html-структуру.
@extends(‘layouts.app’)
44. Теперь пишем, в какую секцию мы будем встраивать этот кусочек кода:
@section(‘content’)
<h1>Страница контактов</h1>
@endsection
45. Это значит, что мы унаследовали все от файла app.blade.php и вместо секции ‘content’
вставили свое содержимое
46. У нас теперь все наследуется от одного общего шаблона.
47. Копируем код из contact во все другие страницы
48. В app.blade.php пишем <title>@yield(‘title-block’)</title>
49. И теперь в каждом шаблоне передаем секцию ‘title-block’
50. Пишем @section(‘title-block’)
Main page
@endsection
В каждый файл свой текст, без тега h1
51. В <title> остаются отступы
52. Дополнительно к нашему сайту добавим боковую панель
53. В файле app.blade.php пишем
<div class=”aside”>
<h4> Боковая панель</h4>
<p> Это просто боковая панель</p>
</div>
54. Теперь на каждой странице у нас будет отображаться боковая панель
55. С помощью стилей потом приведем в порядока боковую панель. Пока что работаем над
шаблонами и над html
56. Отдельные блоки лучше включать в отдельные файлы
57. Создаем новую папку inc и вырезаем код из <div class=”aside”> и создаем новый файл
views/inc/aside.blade.php с содержимым <div class=”aside”>
58. Для того чтоб файл aside.blade.php можно было встраивать в другие файлы, надо в начале
прописать @section(‘aside’), закрывать не надо
59. В основном файле подключаем боковую панель include(’inc.aside’)
60. Теперь боковая панель является файлом, который встраивается в основной шаблон
61. В боковой панели выводим дополнительный текст. Пишем директиву @show.
Там, где будет @show, будет выводиться дополнительный текст, который будет передаваться из
html-шаблона.
63. Переходим в home.blade.php
Обращаемся к секции aside @section(‘aside’).
У нас есть доступ к боковой панели, несмотря на большую вложенность.
Пишем @section(‘aside’)
@parent
<p>Дополнительный текст</p>
@endsection
63. Дополнительный текст есть только на главной странице
64. Теперь про добавление стилей. Можем писать на чистом CSS, можем использовать препроцессор.
65. Будем использовать SCSS
66. Здесь есть папка resources/sass/app.scss
67. Дальше он будет преобразовываться в обычный CSS файл, который будет использоваться для
нашего сайта.
68. Прежде чем мы будем писать CSS, посмотрим, как здесь происходят разные преобразования
69. У нас есть файл webpack.mix.js
70. Видим, что здесь есть несколько миксинов.
Миксины позволяют преобразовывать одни файлы в другие файлы.
71. Сейчас у нас есть 2 микса.
72. Когда мы выполним преобразование данных, у нас появится папка public/js
73. Второй миксин преобразует SASS файл в обычный css файл. После первого преобразования у вас
появится папка public/css.
Можем поменять mix, если не хотим использовать SASS. В документации Laravel написано об этом.
mix.sass(‘resources/sass/app.scss’, ‘public/css’).
Указывается, из какого файла в какой преобразовываем, и в какую папку преобразовываем
74. Можем использовать LESS
75. Можем использовать чистый CSS (public/all/css)
76. В ходе курса мы будем использовать SASS и чистый js
77. На сайте itproger есть полный видеоурок по технологии SASS
78. Если хотите, можете использовать react.js. Описание есть на сайте Laravel.
79. Чтобы в нашем проекте корректно выполнять преобразование, надо скачать Nodejs и выполнить
его установку внутри проекта
80. Переходим на сайт nodejs.org/en
81. Скачиваем рекомендованную версию
82. И устанавливаем как самую обычную программу
83. Переходим в проект и открываем новый проект
84. В терминале переходим в папку проекта и пишем nmp install
85. Этой командой устанавливаются все необходимые зависимости, которые прописаны в файле
package.json
86. В файле package.json есть объект ’dependencies’, у него есть несколько библиотек.
Эти библиотеки нужны для корректной работы нашего проекта.
87. Создается папка node_modules со всеми библиотеками
88. После успешной установки зависимостей мы можем прописать стили, после чего преобразовать
их в обычный css и посмотреть результат.
89. Заходим в resources/sass/app.scss и пропишем стили для тега body. Напишем, что задний
фон будет красным. body { background: red; }
90. В терминале пишем npm run dev
После этого происходит преобразование всех данных.
В папке public появится новая папка (даже несколько)
91. Видим, что в папке public появились две папки: css и js. В css/app.css хранятся стили
для тега боди, а в js/app.js – javascript файл.
92. В основном шаблоне нужно подключить файл со стилями , потому что сейчас он нигде не
подключен
93. После <title> пишем строку <link rel=”stylesheet” href=”css/app.css”>,
по сути подключаем скомпилированный файл.
94. Переходим на сайт и обновляем страницу, и видим, что фон у нас поменялся, как мы и
хотели
95. Если мы сейчас поменяем фон на blue и обновим страницу, то ничего не изменится, потому что
нет автоматического отслеживания всех изменений
96. В терминале пропишем команду npm run watch. Это то же самое преобразование данных,
которое не останавливается. Теперь постоянно происходит отслеживание public/css/app.css из
public/js/app.js.
97. Все обновляется сразу, как только происходят изменения в файлах public/sass/app.scss и
public/js/app.js.
98. Теперь к нашему проекту добавим bootstrap
99. Переходим на сайт bootstrapcdn.com
100. Копируем прямую ссылку bootstrap.css файла
101. В главном шаблоне после app.css пишем тег link, в котором в href вставляем ссылку на
bootstrap css: bootstrap.min.css
102. Сохраняем, обновляем страницу и видим, что все стили уже добавлены. Все стили теперь от
bootstrap
103/1. Добавим серый фон. Надо добавлять !important; Иначе bootsrap стиль не обнуляется.
103/2. Добавим к нашему сайту шапку, footer и приведем в порядок боковую панель, чтоб она
была сбоку.
104. Перейдем на сайт getbootstrap.com
105. Переходим на samples и копируем пример любого сайта, который нам понравился.
106. Берем pricing правой кнопкой мыши. Inspect и copy -> copy element
107. В app.blade установим этот шаблон
108. Пропишем его как отдельный файл.
109/1. В layouts/app.blade.php пишем @include(’inc.header’)
109/2. Теперь создаем файл inc/header.blade.php и в него вставляем шапку
110. Только надо поменять название компании. И еще поменяем сами ссылки. Home, about, contact.
И лишние ссылки удалим. Потом добавим, если надо будет.
111. Меняем ссылки: href=’/’, ‘/about’, ‘/contact’
112. Обновляем страницу и видим, что шапка была добавлена. Проверяем работу ссылок.
113. Видим, что шапка есть на каждой странице.
114. Дополнительно еще добавим footer.
115. Он тоже будет в отдельном файле.
116. В главном шаблоне пишем @include(’inc.footer’)
117. Создаем файл inc/footer.blade.php
118. Из pricing берем footer и вставляем в inc/footer.blade.php. Только <footer>
119. Картинку удаляем
120. Теперь пропишем основную разметку справа-слева.
122. Под @include(’inc.header’) пишем
<div container> <div row><div col-8>@yield(‘content’)
<div col-4>@include(’inc.aside’)
123. Если не знаете этих классов, то можете посмотреть курс по bootstrap на itproger.com
124. container – это блок с отступами по бокам
125. col-8 занимает 8 ячеек, col-4 будет занимать 4 ячейки
126. Проверяем ссылки
127. Добавляем отступ сверху. container mt-5
mt – это margin-top
128. Теперь у нас есть большой отступ сверху
129. В about пропишем lorem ipsum текст после <h1>About</h1>, те текст-заглушку.
И на главную страницу тоже. Чтоб повсюду был небольшой текст.
130. Отображение блока на определенных страницах
131. В папке inc создадим hero.blade.php
<div jumbotron><div container>
<h1>Привет
<p>Lorem
132. Переходим в app.blade.php
133. Под шапкой поместим hero.blade.php
include(’inc.hero’)
134. Если сохранить этот блок, то он будет отображаться на всех страницах
135. Надо чтоб он отображался только на главной странице
136. Надо написать условие:
@if(Request::is(‘/’))
@include(’inc.hero’)
@endif
137. Не забывайте закрывать @if @endif
138. Теперь hero блок отображается только на главной странице.
139. Мы уже сделали небольшой шаблон сайта с тремя страницами
140. Дальше будем этот сайт дополнять, улучшать.