Laravel 5.3: Підготовка до розробки (для новачків)

Вітаю тебе, Хабра-співтовариство і новачки в світі Laravel!

Дана стаття написана для новачків у сфері Лари і покликана допомогти їм у початковій стадії освоєння фреймворка.

У статті будуть розглянуті, так би мовити, «базові» пакети, без яких особисто мені важко працювати над будь-яким проектом.

Отже, якщо Вам цікава тема, прошу під кат.

Laravel 5.3


1. Системні вимоги
Фреймворк Laravel 5.3 вимагає:

  • PHP >= 5.6.4
  • OpenSSL PHP Extension
  • PDO PHP Extension
  • PHP Mbstring Extension
  • Tokenizer PHP Extension


Весь цей набір компонентів присутній в OpenServer під Windows.

Так, хтось скаже що фреймворк має Homestead в якості віртуальної машини. Відповім лише, кому як зручно. Особисто мені зручний OpenServer під «віндою».

2. Установка

2.1. Налаштування OpenServer

Основні
На вкладці «Основні» включаємо автозапуск сервера і вимога облікового запису Адміністратора. Друга нам потрібна при роботі з файлом хостів.

На цій вкладці встановлюємо налаштування віртуального диска в «Автовизначення потреби», далі налаштування використання змінної Path в «Свій Path + Win Path».

Ставимо галку «Захистити сервер від зовнішнього доступу», щоб з локалки до нас ніхто не чіплявся.

І… все) Переходимо до наступної вкладки.

Модулі
Для своїх цілей використовую наступну зв'язку модулів:

  • HTTP: Apache — PHP 7 x64 — NGINX 1.10
  • PHP: PHP 7 x64
  • PostgreSQL 9.5 x64
  • Redis 3.0
Інші пункти вказую «не використовувати».

FTP-сервер
На цій вкладці, за непотрібністю, відразу вимикаю галку запуску FTP-сервера.

Пошта
За замовчуванням, всі повідомлення зберігаються локально у папку, але мені зручніше перевіряти, так би мовити, «в бойовому режимі».

Так що, встановлюю спосіб надсилання через SMTP, далі сервера, порт, email відправника, ім'я користувача (логін), пароль від учеткі, шифрування в «авто».

… Йдемо далі:

Домени
Щоб кожен раз руками не додавати новий сайт, в списку «Управління доменами» вибираємо «Ручне + Автопошук», а в правій частині вказуємо «public», бо в ній у нас і знаходиться виконуваний файл.

Планувальник завдання (Cron)
У своїй роботі використовую Cron, так що налаштуємо і його. Скажу, що для кожного сайту потрібно додавати свої команди.

Отже, у всі значення часу ставимо символ «зірочки» (*), а в графу «виконати»:

php "D:\OpenServer\domains\mysite.com\artisan" schedule:run

Де вказуємо повний шлях до файлу «artisan» у Вашому проекті.

Скріншоти з подробицями














2.2. Установка Laravel 5.3

Перед початком розгортання фреймворку переконайтеся, що на комп'ютері встановлено утиліти Composer і NodeJS. У другого використовую версію 6 гілки, хоча це не принципово.

Перед установкою фреймворку, рекомендую скористатися пакетом hirak/prestissimo, що дозволяє завантажувати декілька пакетів при встановленні/оновлення фреймворку одночасно. Без нього процес установки/оновлення лінійний, тобто запитує один пакет, чекає на відповідь, після викачує (якщо відповідь від сервера успішний), далі переходить до наступного. Пакет `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/blog laravel

Вони обидві виконують одне і те ж дію, різниця лише… І так видно в чому різниця)

Єдиний нюанс, при першій установці шлях до виконуваного файлу композера прописується автоматично при його установці, а шлях до команди «laravel» — немає. Особисто мені зручно використовувати команду «laravel», тому йдемо в «комп'ютер» (користуюся Windows 10, тому всі кроки буду описувати під неї).

Відкриваємо «Параметри» та в пошуковому рядку вводимо «Система», далі «Змінити параметри». У вікні «Властивості системи» переходимо у вкладку «Додатково» і тиснемо кнопку «Змінні середовища».

У вікні, в змінних середовищах для користувача, відкриваємо зміна `PATH`, де додаємо шлях до виконуваного файлу `laravel`. У мене він знаходиться в папці `c:\Users\Developer\AppData\Roaming\Composer\vendor\bin\`, де «Developer» — ім'я мого комп'ютера.

Скріншоти з подробицями






Отже, виконуємо одну з команд:

laravel new blog
composer create-project --prefer-dist laravel/blog laravel

Фреймворк скочується в папку «blog». Ви можете відразу прописати адресу Вашого сайту. Для цього видозмінимо команду:

laravel new mysite.dev
composer create-project --prefer-dist laravel/laravel mysite.dev

Після цього необхідно перезапустити `OpenServer`, щоб він «побачив» новий сайт.



Всі. На установка завершена і переходимо до наступного етапу.

2.3. SASS

Активно використовую SASS, тому встановлюємо і його (якщо хто не користується SASS — переходьте до наступного кроку).

На сайті sass-lang.com знаходимо посилання на Ruby Installer — тиснемо її і качаємо установочник, тикаючи в велику червону кнопку. Устанавиваем, перезавантажуємо комп'ютер.

3. Налаштування Laravel 5.3

3.1. .gitignore

Так як багато користуються репозиторіями, відразу йдемо в файл `.gitignore`, приводячи його до вигляду:

/vendor
/node_modules
/public
!/public/.htaccess
!/public/favicon.ico
!/public/index.php
!/public/robots.txt
!/public/web.config
/nbproject
/.idea
Homestead.yaml
Homestead.json
.env
_ide_helper.php
.phpstorm.meta.php
*npm-debug.log*

Тобто, ми включаємо до заборона вивантаження інформації з IDE (NetBeans, PhpStorm), node_modules і автогенерируемых файлів з `public`, зокрема, `build`, `css`, `js` і т. д.
Пізніше поясню навіщо це потрібно.

3.2. Environment (.env)

Тут все досить просто:

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`.

3.3. Пакети

Для роботи нам знадобляться наступні пакети:



Laravel Exceptions
Пакет потрібен для поліпшеного виведення інформації про виникають помилки при розробці в режимі дебага.

Установка проста: по черзі виконуємо в консолі команди:

composer require graham-campbell/exceptions
composer require filp/whoops --dev

Далі, у файлі `config/app.php` додаємо сервіс-провайдер `GrahamCampbell\Exceptions\ExceptionsServiceProvider::class` блок `providers`.

Після цього, у файлі `App\Exceptions\Handler.php` в блоці `use` міняємо `use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;` на `use GrahamCampbell\Exceptions\NewExceptionHandler as ExceptionHandler;`

Детальніше про пакет graham-campbell/exceptions.

Скріншот


Laravel Debugbar
Виконуємо команду:

composer require barryvdh/laravel-debugbar

Далі, у файлі `config/app.php` додаємо сервіс-провайдер `Barryvdh\Debugbar\ServiceProvider::class,` блок `providers`.

Детальніше про пакет barryvdh/laravel-debugbar.

Скріншот


Laravel 5 IDE Helper Генератор
По черзі виконуємо команди:

composer require barryvdh/laravel-ide-helper
composer require doctrine/dbal

Далі, у файлі `config/app.php` додаємо сервіс-провайдер `Barryvdh\LaravelIdeHelper\IdeHelperServiceProvider::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.

Laravel 5 Extended Generators
Особисто мені зручно створювати міграції та моделі, використовуючи всього одну команду: `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` додаємо сервіс-провайдер `Laracasts\Generators\GeneratorsServiceProvider::class,` блок `providers`.

Детальніше про пакет laracasts/generators.

Завершення налаштування пакунків


Після установки всіх пакетів, виконуємо в консолі:

php artisan vendor:publish
composer update


З пакетами розібралися. На черзі Еліксир.

4. Elixir

4.1 Установка Elixir

В консолі, перебуваючи в папці проекту, по черзі виконуємо команди:

npm install --global gulp-cli
npm install --no-bin-links

Так як, ще з часів Laravel 5.2, користуюся VueJs, який 5.3 йде «з коробки», підключимо його з усіма необхідними пакетами:

npm rebuild node-sass
npm install jquery hammerjs vue vue-async-data vue-resource


4.2 MaterializeCSS

Давно перейшов з CSS-фреймворку Twitter Bootstrap на користь «матеріального» дизайну MaterializeCSS, тому заходимо на сайт і качаємо исходники для `SASS`.

Для зручності, исходники розміщую в папці `resources/assets/виробника/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>


4.3 Налаштування gilpfile.js

При розробці дуже зручний інструмент браузера — консоль. Щоб організувати «швидкий пошук» проблемної рядка, файл `gulpfile.js` додаємо рядок `elixir.config.sourcemaps = true;`, що відповідає за генерацію «сурс-мапа».

При роботі з MaterializeCSS і SASS, у мене він має вигляд:

Робочий gulpfile.js
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/',
vendor = '../vendor/',
node_modules = '../../../node_modules/';

mix
.sass('app.scss', 'public/css/app.css')

.copy(assets + 'images', 'public/images')
.copy(assets + 'vendor/materialize-css/fonts', 'public/build/fonts')

.webpack('app.js')

/*
* Version
*/
.version(
[
'css/app.css',
'js/app.js'
]
);
}
);


Думаю, досконально пояснювати для чого потрібен кожен метод, не потрібно. Просто залишу тут посилання на документацію.

4.3 Resources: SASS

Так як не всі компоненти зі складу фреймворку MaterializeCSS потрібні для розробки того чи іншого проекту, додаємо посилання на них в наш файл `resources/assets/sass/app.scss`:

Вміст app.scss
@charset "UTF-8";

// Mixins
// @import "../виробника/materialize-css/sass/components/prefixer";

// Colors
@import "../виробника/materialize-css/sass/components/color";

// Variables;
//@import "../виробника/materialize-css/sass/components/variables";

// Reset
@import "../виробника/materialize-css/sass/components/normalize";

// Components
@import "../виробника/materialize-css/sass/components/global";
@import "../виробника/materialize-css/sass/components/icons-material-design";
@import "../виробника/materialize-css/sass/components/grid";
@import "../виробника/materialize-css/sass/components/navbar";
@import "../виробника/materialize-css/sass/components/roboto";
@import "../виробника/materialize-css/sass/components/typography";
@import "../виробника/materialize-css/sass/components/cards";
@import "../виробника/materialize-css/sass/components/toast";
//@import "../виробника/materialize-css/sass/components/tabs";
//@import "../виробника/materialize-css/sass/components/tooltip";
@import "../виробника/materialize-css/sass/components/buttons";
@import "../виробника/materialize-css/sass/components/dropdown";
@import "../виробника/materialize-css/sass/components/waves";
@import "../виробника/materialize-css/sass/components/modal";
@import "../виробника/materialize-css/sass/components/collapsible";
//@import "../виробника/materialize-css/sass/components/chips";
//@import "../виробника/materialize-css/sass/components/materialbox";
@import "../виробника/materialize-css/sass/components/forms/forms";
@import "../виробника/materialize-css/sass/components/table_of_contents";
@import "../виробника/materialize-css/sass/components/sideNav";
@import "../виробника/materialize-css/sass/components/preloader";
//@import "../виробника/materialize-css/sass/components/slider";
//@import "../виробника/materialize-css/sass/components/carousel";
//@import "../виробника/materialize-css/sass/components/date_picker/default";
//@import "../виробника/materialize-css/sass/components/date_picker/default.date";
//@import "../виробника/materialize-css/sass/components/date_picker/default.time";



4.3 Resources: View

Отже, в ході попередніх дій, виконавши команду `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

{{--<!-- Javascript -->--}}
<script src="{{ elixir('js/app.js') }}"></script>

</body>
</html>


5. «Плюшки»
Дуже часто буває так, що перейменували який-небудь клас і у нас відразу відмовляє працювати команда `composer update`.

При більшості помилок, що виникають при запуску консольних команд, допомагає команда:

composer dump-autoload
composer dumpautolod

Так, команда одна і та ж обидва методи правильні. Який з них обрати — вирішувати Вам.

Також, корисним буде переглянути список всіх `artisan`-команд:

php artisan list

І, звичайно ж, список активних роутов:

php artisan route:list


Власне, ось і все.

Приємного користування.

P.s.: Якщо хтось не згоден зі мною і є інші більш кращі рішення, прошу писати в коментарях)
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.