Spis treści

Laravel

Instalacja

1. Zainstaluj PHP, MySQL. Może być XAMPP albo WAMP Server. Jeżeli wykonujesz instalację produkcyjną, zobacz LAMP serwer.

2. W MySQL ustawiamy domyślny silnik na InnoDB (poniższym poleceniem na czas jednej sesji lub permanentnie w my.ini default-storage-engine=InnoDB).

  mysql -u root -p
  SET @@global.default_storage_engine = 'InnoDB';
  exit
  service mysql restart

3. Instalujemy Composer z getcomposer.org. Composer wymaga PHP. Katalog z zainstalowanym PHP powinien być dodany do Path.

4. Instalujemy Laravel Installer jako globalną zależność Composer'a.

composer global require laravel/installer

5. Dodajemy %USERPROFILE%\AppData\Roaming\Composer\vendor\bin do Path. Dzięki temu będziemy mogli wywołać laravel z wiersza poleceń.

6. Tworzymy nowy projekt. Załóżmy, że będzie się nazywał blog.

laravel new blog
cd blog

7. Tworzymy nową bazę danych. Następnie edytujemy plik .env w katalogu projektu podając m. in. parametry połączenia do bazy danych.

APP_URL=http://localhost:8000
DB_HOST=localhost
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

8. Opcjonalnie dodajemy Voyager. Jeżeli nie potrzebujesz Voyagera, przejdź do kroku 11.

composer require tcg/voyager

9. Instalujemy Voyager, zgodnie z instrukcją https://voyager-docs.devdojo.com/getting-started/installation. Opcja with-dummy dodaje przykładowe dane.

php artisan voyager:install --with-dummy

10. Tworzymy konto administratora. Opcja create informuje o tym, że chcemy utworzyć nowe konto, a nie tylko podnieść poziom uprawnień istniejącemu użytkownikowi.

php artisan voyager:admin your@email.com --create

11. Laravel ma własny serwer, który możemy uruchomić następująco:

php artisan serve

Aplikacja będzie dostępna pod adresem localhost:8000. Na administratora w Voyagerze zalogujesz się na stronie localhost:8000/admin podając: admin@admin.com / password

Rozwiązywanie problemów

Jeżeli natkniesz się (np. podczas próby wykonania migracji) na błąd Specified key was too long, upewnij się ze wykonałeś/aś krok (2), oraz ustaw w app/Providers/AppServiceProvider.php, metodzie boot:

use Illuminate\Support\Facades\Schema;
 
...
 
public function boot(){
  Schema::defaultStringLength(191);
}

Dlaczego akurat 191? Cytat z https://stackoverflow.com/questions/23786359/laravel-migration-unique-key-is-too-long-even-if-specified

You have to set the length of the indexed column according to the limit of 767 bytes. Be aware that VARCHAR may have 1, 2 or 4 bytes for each length unit. Example: utf8_mb4 (4 bytes) → 767 / 4 = 191. Otherwise utf8_general_ci for VARCHAR(X) with X < 85 ( 1 byte ) = O(85) , or utf8_general_ci for VARCHAR(X) with X >= 86 ( 2 bytes ) → 767 / 2 = 383. Consider also other columns lenght in multiple column indexes.

Pierwsze kroki

Artisan jest programem dołączonym z Laravel. Dostępne komendy wylistujesz poleceniem php artisan list. Polecenia wywołujemy z głównego katalogu (root) projektu.

Jeżeli uruchamiasz pobrany projekt (np. z Git i Githuba), musisz na samym początku założyć bazę danych, skonfigurować .env i uruchomić migracje:

php artisan migrate
php artisan db:seed

Można usunąć wszystkie tabele, następnie stworzyć od nowa (migrate:fresh) i wypełnić danymi (seed):

php artisan migrate:fresh --seed

Konsola CLI Laravela

php artisan tinker

Ściąga z najważniejszymi poleceniami (pomijam php artisan na początku polecenia):

Polecenie Opis
make:controller PostsController Tworzy nowy kontroler
make:model Post -m Tworzy nowy model (-m dodaje migrację)
route:list Wypisuje aktualnie dostępny routing.
db:seed Wypełnia bazę danych danymi (DatabaseSeeder.php)

Bootstrap i React

Instalujemy laravel/ui za pomocą Composer. Do pobrania źródła może być potrzebny Git i Github.

composer require laravel/ui

Teraz można zainstalować Bootstrap, React lub inne frameworki, np. Vue.

php artisan ui bootstrap
php artisan ui react

Dodanie opcji auth w powyższych poleceniach stworzy szkielet do strony logowania/rejestracji.

php artisan ui bootstrap --auth

Instalujemy zależności.

npm install

Pozostało skompilować zasoby (oraz oczywiście dołączyć .css i .js z katalogu public w HTML).

npm run dev

lub

npm run prod

Można też monitorować zmiany w trybie ciągłym.

npm run watch