- PVSM.RU - https://www.pvsm.ru -
Приветствую тебя, Хабра-сообщество и новички в мире Laravel!
Данная статья написана для новичков в сфере Лары и призвана помочь им в начальной стадии освоения фреймворка.
В статье будут рассмотрены, так сказать, «базовые» пакеты, без которых лично мне трудно работать над каким-либо проектом.
Итак, если Вам интересна тема, прошу под кат.
Фреймворк Laravel 5.3 требует:
Весь этот набор компонентов присутствует в OpenServer [1] под Windows.
Да, кто-то скажет что фреймворк имеет Homestead [2] в качестве виртуальной машины. Отвечу лишь, кому как удобно. Лично мне удобен OpenServer под «виндой».
Также необходим Composer [3] и NodeJS [4].
На вкладке «Основные» включаем автозапуск сервера и требование учетной записи Администратора. Вторая нам нужна при работе с файлом хостов.
На этой вкладке устанавливаем настройки виртуального диска в «Автоопределение потребности», далее настройку использования переменной Path в «Свой Path + Win Path».
Ставим галку «Защитить сервер от внешнего доступа», чтобы из локалки к нам никто не цеплялся.
И… все) Переходим к следующей вкладке.
Для своих целей использую следующую связку модулей:
Остальные пункты указываю «не использовать».
На этой вкладке, за ненадобностью, сразу выключаю галку запуска FTP-сервера.
По-умолчанию, все сообщения сохраняются локально в папку, но мне удобнее проверять, так сказать, «в боевом режиме».
Так что, устанавливаю способ отправки через SMTP, далее сервер, порт, email-отправителя, имя пользователя (логин), пароль от учетки, шифрование в «авто».
И… идем дальше:
Дабы каждый раз руками не добавлять новый сайт, в списке «Управление доменами» выбираем «Ручное + Автопоиск», а в правой части указываем «public», ибо в ней у нас и находится исполняемый файл.
В своей работе использую Cron [5], так что настроим и его. Скажу, что для каждого сайта нужно добавлять свои комманды.
Итак, во все значения времени ставим символ «звездочки» (*), а в графу «выполнить»:
php "D:OpenServerdomainsmysite.comartisan" schedule:run
Где указываем полный путь к файлу «artisan» в Вашем проекте.
Перед началом разворачивания фреймворка убедитесь, что на компьютере установлены утилиты Composer [6] и NodeJS [4]. У второго использую версию 6 ветки, хотя это не принципиально.
Перед установкой фреймворка, рекомендую воспользоваться пакетом hirak/prestissimo [7], позволяющим загружать несколько пакетов при установке/обновлении фреймворка одновременно. Без него процесс установки/обновления линейный, то есть запрашивает один пакет, ждет ответ, после скачивает (если ответ от сервера успешный), далее переходит к следующему. Пакет `hirak/prestissimo` же позволяет одновременно скачивать все необходимые пакеты и уже после этого начинает их ставить.
Для установки пакета выполните в консоли:
composer global require "hirak/prestissimo:^0.3"
Итак, открываем командную консоль и вводим:
composer global require "laravel/installer"
Это нужно делать всего один раз при самой первой установке. При разворачивании последующих приложений, данную команду пропускаем.
После того, как скачали установщик фреймворка в глобальное хранилище композера, нам нужно скачать сам фреймворк Laravel 5.3. Для этого у нас есть две команды на выбор:
laravel new blog
и
composer create-project --prefer-dist laravel/laravel blog
Они обе выполняют одно и то же действие, разница лишь… И так видно в чем разница)
Единственный нюанс, при первой установке путь к исполняемому файлу композера прописывается автоматически при его установке, а путь к команде «laravel» — нет. Лично мне удобно использовать команду «laravel», поэтому идем в «Этот компьютер» (пользуюсь Windows 10, поэтому все шаги буду описывать под нее).
Открываем «Параметры» и в поисковой строке вводим «Система», далее «Изменить параметры». В окне «Свойства системы» переходим во вкладку «Дополнительно» и жмем кнопку «Переменные среды».
В открывшемся окне, в переменных средах для пользователя, открываем изменение `PATH`, где добавляем путь к файлу исполняемому `laravel`. У меня он находится в папке `c:UsersDeveloperAppDataRoamingComposervendorbin`, где «Developer» — имя моего компьютера.
Итак, выполняем одну из команд:
laravel new blog
composer create-project --prefer-dist laravel/laravel blog
Фреймворк скачается в папку «blog». Вы можете сразу прописать адрес Вашего сайта. Для этого видоизменим команду:
laravel new mysite.dev
composer create-project --prefer-dist laravel/laravel mysite.dev
После этого необходимо перезапустить `OpenServer`, чтобы он «увидел» новый сайт.
Все. На установка завершена и переходим к следующему этапу.
Так как многие пользуются репозиториями, сразу идем в файл `.gitignore`, приводя его к виду:
npm rebuild node-sass
npm jquery hammerjs vue-async-data materialize-css
То есть, мы включаем в запрет выгрузки информации из node_modules и автогенерируемых файлов из `public/build` и другие «системные» файлы.
Содержимое папок `vendor` и `node_modules` подгружаются автоматически
Здесь все достаточно просто:
APP_ENV=local
APP_DEBUG=true
DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE=my_database
DB_USERNAME=root
DB_PASSWORD=
`DB_CONNECTION` — используемый тип драйвера. В случае с PostgreSQL указываем `pgsql`, а в случае с MySQL/MariaDB — `mysql`.
Также не забываем указывать порт, используемый для базы данных. Номер порта можно посмотреть в `OpenServer` в на вкладке `Сервер`.
Перед этим, воспользовавшись приложением `PgAdmin III` из состава `OpenServer`, необходимо добавить базу данных и прописать параметры в файле `.env`.
Для работы нам понадобятся следующие пакеты:
Пакет нужен для улучшенного вывода информации о возникающих ошибках при разработке в режиме дебага.
Установка проста: поочередно выполняем в консоли команды:
composer require graham-campbell/exceptions
composer require filp/whoops --dev
Далее, в файле `config/app.php` добавляем сервис-провайдер `GrahamCampbellExceptionsExceptionsServiceProvider::class` в блок `providers`.
После этого, в файле `AppExceptionsHandler.php` в блоке `use` меняем `use IlluminateFoundationExceptionsHandler as ExceptionHandler;` на `use GrahamCampbellExceptionsNewExceptionHandler as ExceptionHandler;`
Подробнее о пакете graham-campbell/exceptions [8].
Выполняем команду:
composer require barryvdh/laravel-debugbar
Далее, в файле `config/app.php` добавляем сервис-провайдер `BarryvdhDebugbarServiceProvider::class,` в блок `providers`.
Подробнее о пакете barryvdh/laravel-debugbar [9].
Поочередно выполняем команды:
composer require barryvdh/laravel-ide-helper
composer require doctrine/dbal
Далее, в файле `config/app.php` добавляем сервис-провайдер `BarryvdhLaravelIdeHelperIdeHelperServiceProvider::class,` в блок `providers`.
После этого, блок `scripts/post-update-cmd` в файле `composer.json` из корневого каталога, приводим к виду:
{
"scripts": {
"post-update-cmd": [
"Illuminate\Foundation\ComposerScripts::postUpdate",
"php artisan ide-helper:generate",
"php artisan ide-helper:meta",
"php artisan optimize"
]
}
}
Подробнее о пакете barryvdh/laravel-ide-helper [10].
Лично мне удобно создавать миграции и модели, используя всего одну команду: `php artisan make:migration:schema`.
Например, нам нужно создать таблицу `news` с полями `slug`, `title`, `content`.
php artisan make:migration:schema create_news_table --schema="slug:string:unique, title:string:unique, content:text"
Для установки пакета под Laravel 5.3, нужно выполнить команду:
composer require laracasts/generators --dev
Далее, в файле `config/app.php` добавляем сервис-провайдер `LaracastsGeneratorsGeneratorsServiceProvider::class,` в блок `providers`.
Подробнее о пакете laracasts/generators [11].
После установки всех пакетов, выполняем в консоли:
php artisan vendor:publish
composer update
С пакетами разобрались. На очереди Эликсир [12].
В консоли, находясь в папке проекта, поочередно выполняем команды:
npm install --global gulp-cli
npm install --no-bin-links
Так как, еще со времен Laravel 5.2, пользуюсь VueJs [13], который в 5.3 идет «из коробки», подключим и его со всеми необходимыми пакетами:
npm rebuild node-sass
npm install jquery hammerjs vue-async-data
Обратите внимание: такие компоненты, как `vue` и `vue-resource` не вписал, так как они идут «из коробки».
Далее, в файле `resources/assets/js/bootstrap.js` после строки `window.$ = window.jQuery = require('jquery');` найдете подключение CSS-фреймворка Twitter Bootstrap (`require('bootstrap-sass');`). Так как в этом примере используем не его, а MaterializeCSS — заменяем на `require('../vendor/materialize-css/js/bin/materialize.min');`.
Далее, находим:
window.Vue = require('vue');
require('vue-resource');
И приводим к виду:
window.Vue = require('vue');
var VueResource = require('vue-resource');
var VueAsyncData = require('vue-async-data');
Vue.use(VueResource);
Vue.use(VueAsyncData);
Давно перешел с CSS-фреймворка Twitter Bootstrap в пользу «материального» дизайна MaterializeCSS [14], так как лично для меня он выглядит более современным.
Для его установки необходимо выполнить команду:
npm install materialize-css
Далее, необходимо подключить используемый MaterializeCSS шрифт `Material Icon` в шаблоне:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
//
</body>
</html>
При разработке очень удобный инструмент браузера — консоль. Чтобы организовать «быстрый поиск» проблемной строки, в файл `gulpfile.js` добавляем строку `elixir.config.sourcemaps = true;`, отвечающую за генерацию «сурс-мапа».
При работе с MaterializeCSS и SASS, у меня он имеет вид:
const elixir = require('laravel-elixir');
require('laravel-elixir-vue');
elixir.config.sourcemaps = true;
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(mix =>
{
var
assets = 'resources/assets/',
node_modules = '../../../node_modules/';
mix
.sass('app.scss', 'public/css/app.css')
.copy(assets + 'images', 'public/images')
.copy(node_modules + 'materialize-css/fonts', 'public/build/fonts')
.webpack('app.js')
/*
* Version
*/
.version(
[
'css/app.css',
'js/app.js'
]
);
}
);
Думаю, досконально объяснять для чего нужен каждый метод, не нужно. Просто оставлю здесь [12] ссылку на документацию.
Так как не все компоненты из состава фреймворка MaterializeCSS нужны для разработки того или иного проекта, добавляем ссылки на них в наш файл `resources/assets/sass/app.scss`:
@charset "UTF-8";
// Mixins
// @import "../../../node_modules/materialize-css/sass/components/prefixer";
@import "../../../node_modules/materialize-css/sass/components/mixins";
@import "../../../node_modules/materialize-css/sass/components/color";
// Variables;
@import "../../../node_modules/materialize-css/sass/components/variables";
// Reset
@import "../../../node_modules/materialize-css/sass/components/normalize";
// components
@import "../../../node_modules/materialize-css/sass/components/global";
@import "../../../node_modules/materialize-css/sass/components/icons-material-design";
@import "../../../node_modules/materialize-css/sass/components/grid";
@import "../../../node_modules/materialize-css/sass/components/navbar";
@import "../../../node_modules/materialize-css/sass/components/roboto";
@import "../../../node_modules/materialize-css/sass/components/typography";
@import "../../../node_modules/materialize-css/sass/components/cards";
@import "../../../node_modules/materialize-css/sass/components/toast";
@import "../../../node_modules/materialize-css/sass/components/tabs";
@import "../../../node_modules/materialize-css/sass/components/tooltip";
@import "../../../node_modules/materialize-css/sass/components/buttons";
@import "../../../node_modules/materialize-css/sass/components/dropdown";
@import "../../../node_modules/materialize-css/sass/components/waves";
@import "../../../node_modules/materialize-css/sass/components/modal";
@import "../../../node_modules/materialize-css/sass/components/collapsible";
@import "../../../node_modules/materialize-css/sass/components/chips";
@import "../../../node_modules/materialize-css/sass/components/materialbox";
@import "../../../node_modules/materialize-css/sass/components/forms/forms";
@import "../../../node_modules/materialize-css/sass/components/table_of_contents";
@import "../../../node_modules/materialize-css/sass/components/sideNav";
@import "../../../node_modules/materialize-css/sass/components/preloader";
@import "../../../node_modules/materialize-css/sass/components/slider";
@import "../../../node_modules/materialize-css/sass/components/carousel";
@import "../../../node_modules/materialize-css/sass/components/date_picker/default";
@import "../../../node_modules/materialize-css/sass/components/date_picker/default.date";
@import "../../../node_modules/materialize-css/sass/components/date_picker/default.time";
Итак, в ходе предыдущих действий, выполнив команду `gulp` в консоли, на выходе мы получим 2 файла: `app.js` и `app.css`. Так как была использована система контроля версий (не стоит же разглагольстовать на тему кэширования ресурсов браузером, да?), в шаблоне `resources/views/layouts/app.blade.php` необходимо прописать:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{--<!-- CSRF Token -->--}}
<meta name="csrf-token" content="{{ csrf_token() }}">
{{--<!--Import Google Icon Font-->--}}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
{{--<!-- Styles -->--}}
<link href="{{ elixir('css/app.css') }}" rel="stylesheet">
</head>
<body>
// Content
{{--<!-- JavaScripts -->--}}
<script src="{{ elixir('js/app.js') }}"></script>
</body>
</html>
Очень часто бывает так, что переименовали какой-нибудь класс и у нас сразу отказывает работать команда `composer update`.
При большинстве ошибок, возникающих при запуске консольных команд, помогает команда:
composer dump-autoload
composer dumpautolod
Да, команда одна и та же и оба метода правильные. Какой из них выбирать — решать Вам.
Также, полезным будет посмотреть список всех `artisan`-команд:
php artisan list
И, конечно же, список активных роутов:
php artisan route:list
Для желающих разместил в публичном репозитории [15] готовый настроенный по этому мануалу проект.
Так сказать, можете [15] посмотреть «в живую» как и что там.
Разворачивать данный пример просто. Клонируем репозиторий:
git clone https://github.com/andrey-helldar/laravel-example-to-juniors.git
И поочередно выполняем команды:
composer install
npm install
gulp
Собственно, вот и все.
Приятного пользования.
P.S.: Если кто-то несогласен со мной и есть другие более лучшие решения, прошу писать в комментариях)
Убедительная просьба комментировать свой негатив, указывая факты и как бы Вы сделали.
Просто поливать не есть конструктивно. Это лишь захломляет страницу спамом, не более.
UPD1: JhaoDa [16] поделился ссылкой [17] на готовый скелет [17] на рабочую версию Laravel 5.3.
LaravelRUS/laravel-skeleton [17] — Скелет приложения на базе Laravel 5.3 от сообщества LaravelRUS.
Автор: Helldar
Источник [18]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/php-2/185244
Ссылки в тексте:
[1] OpenServer: http://open-server.ru/
[2] Homestead: https://laravel.com/docs/5.3/homestead
[3] Composer: https://getcomposer.org/
[4] NodeJS: https://nodejs.org/en/
[5] Cron: https://laravel.com/docs/5.3/scheduling
[6] Composer: http://getcomposer.org/
[7] hirak/prestissimo: https://github.com/hirak/prestissimo
[8] graham-campbell/exceptions: https://github.com/GrahamCampbell/Laravel-Exceptions
[9] barryvdh/laravel-debugbar: https://github.com/barryvdh/laravel-debugbar
[10] barryvdh/laravel-ide-helper: https://github.com/barryvdh/laravel-ide-helper
[11] laracasts/generators: https://github.com/laracasts/Laravel-5-Generators-Extended
[12] Эликсир: https://laravel.com/docs/5.3/elixir
[13] VueJs: https://vuejs.org/
[14] MaterializeCSS: http://materializecss.com/getting-started.html
[15] публичном репозитории: https://github.com/andrey-helldar/laravel-example-to-juniors
[16] JhaoDa: https://habrahabr.ru/users/jhaoda/
[17] поделился ссылкой: https://github.com/LaravelRUS/laravel-skeleton
[18] Источник: https://habrahabr.ru/post/309568/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best
Нажмите здесь для печати.