Упражнение CRUD 25-26.11.2021 (инструкции)

Стъпка 0. Подготовка
Използваме подход “Learning by Doing”.

0.1. Инсталиране на XAMPP
Проверяваме дали имаме вече инсталиран XAMPP - проверяваме имаме ли директория C:\xampp или D:\xampp. Ако имаме, прескачаме към следваща стъпка.

Инсталиране на XAMPP в C:\xampp .

Сваляме примерно https://sourceforge.net/projects/xampp/files/XAMPP%20Windows/8.0.12/xampp-windows-x64-8.0.12-0-VS16.zip/download

и разархивираме на C:\

0.2. Стартиране на Apache & MySQL/MariaDB.
\xampp\apache_start.bat

\xampp\mysql_start.bat

или чрез визуалния контролен панел:

xampp-control.exe

Тестване: http://127.0.0.1/

0.3. Инсталиране на composer
Проверяваме дали имаме вече инсталиран composer:

Стартираме cmd (Command Prompt).

Ако xampp е инсталиран на D:, първо сменяме устройството:

D:

Съвет: При работа в команден ред, с клавиши “стрелка нагоре”/“стрелка надолу” може да се извикват предишни команди, за да не се набират отново.


Въвеждаме:

composer -v

Ако се изведе нещо подобно, прескачаме на следваща стъпка.

   ______

  / ____/___  ____ ___  ____  ____  ________  _____

 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/

/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /

\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/

                    /_/

Composer version 2.1.12 2021-11-09 16:02:04


Ако се изведе “'composer' is not recognized as an internal or external command,

operable program or batch file.” то най-вероятно няма инсталиран.

Сваляне на composer.phar и разполагане в директорията \xampp

От:

https://getcomposer.org/download/latest-stable/composer.phar

Тестване:

\xampp\php\php \xampp\composer.phar -v

Добавяне на пътя до интерпретатора на PHP в променливата на средата PATH:

PATH=%PATH%;C:\xampp\php

или

PATH=%PATH%;D:\xampp\php

Тестване:

php \xampp\composer.phar -v

0.4. Инсталиране на начален проект на laravel в \xampp\htdocs\laravel8
Сменяме текущата директория:

cd \xampp\htdocs


Ако xampp и composer са били инсталирани с инсталираща програма:

composer create-project --prefer-dist laravel/laravel laravel8


Ако ние сами сме си инсталирали xampp и composer по указанията, дадени по-горе:

php \xampp\composer.phar create-project --prefer-dist laravel/laravel laravel8


Изчакваме търпеливо да се свалят всички файлове.

Тестване:

http://127.0.0.1/laravel8/public/

Евентуално си правим архив/копие на директорията /xampp/htdocs/laravel8 с цел бързо да си създаваме нови проекти или да започнем отначало.

0.5. Настройки на БД
Зареждаме http://127.0.0.1/phpmyadmin/

Вариант 1:

Създаване само на БД с име laravel:

Databases → Create database → laravel → Create


Вариант 2:

Ако имаме права за създаване на нови потребители на БД.

Чрез PHPMyAdmin създаваме потребител laravel8/123456 и БД със същото име:









Започваме да следваме ръководството:
https://appdividend.com/2020/10/13/laravel-8-crud-tutorial-example-step-by-step-from-scratch/

(Но прескачаме цялата част Step 1 и npm install в Step 6, тъй като за интерфейса на уеб страниците ще използваме BootstrapCDN. Добре е да се ползва ABP или подобна, защото рекламите пречат).

Ръководството описва създаване на каталог за игри: име на игра, цена. Функционалност: CRUD.


Step 1: Installing Laravel 8 - ПРЕСКАЧАМЕ


Step 2: Configure the MySQL Database

Отваряме файла .env и правим съответни промени:

Ако не сме създали потребител, оставяме нещата както са си:

DB_DATABASE=laravel

DB_USERNAME=root

DB_PASSWORD=


Ако сме създали потребител по стъпките, описани по-горе:

DB_DATABASE=laravel

DB_USERNAME=laravel8

DB_PASSWORD=123456


Сменяне на текущата директория:

cd \xampp\htdocs\laravel8

Ако се изведе съобщение “The system cannot find the path specified.”, проверяваме кое е текущото устройство в командния ред (C: или D:) и при нужда го сменяме.


Създаване на таблици в БД:

За повече информация: https://laravel.com/docs/8.x/migrations

php artisan migrate

Ако всичко е нормално, се извежда:




Ако се изведе: “Could not open input file: artisan”, проверяваме коя е текущата директория - трябва да е \xampp\htdocs\laravel8

Ако се изведат други съобщения за грешки, проверяваме във файла .env дали настройките за връзка с БД са зададени правилно.



Step 3: Create a model and custom migration

php artisan make:model Game -m

В резултат се създават 2 файла:

\xampp\htdocs\laravel8\database\migrations\2021_11_NN_NNNNN_create_games_table.php и \xampp\htdocs\laravel8\app\Models\Game.php


Отваряме

\xampp\htdocs\laravel8\database\migrations\2021_11_NN_NNNNN_create_games_table.php

Добавяме нови полета към структурата на таблицата games от БД:

public function up()

{

        Schema::create('games', function (Blueprint $table) {

            $table->id();

            $table->string('name');

            $table->integer('price');

            $table->timestamps();

        });

}

php artisan migrate

В резултат в БД се създава нова таблица games със зададената структура.


Отваряме (това е част от Step 8)

\xampp\htdocs\laravel8\app\Models\Game.php

Добавяме

<?php

// Game.php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Game extends Model

{

    use HasFactory;

    protected $fillable = ['name', 'price'];

}

Така се указва, че данните в тези полета ще се попълват от уеб форма. Данните в останалите 3 полета - id (AUTO_INCREMENT), created_at (timestamp) и updated_at (timestamp) ще се попълват автоматично.


Step 4: Create a Laravel 8 controller

За повече информация: https://laravel.com/docs/8.x/controllers

php artisan make:controller GameController --resource

В резултат се създава файл с контролер клас с 7 празни метода (виж коментарите пред методите): \xampp\htdocs\laravel8\app\Http\Controllers\GameController.php


Отваряме:

\xampp\htdocs\laravel8\app\Providers\RouteServiceProvider.php

В метода boot() правим промяна:

Route::middleware('web')

                ->namespace($this->namespace)

                ->namespace('App\Http\Controllers')

                ->group(base_path('routes/web.php'));



Step 5: Define routes

Отваряме:

\xampp\htdocs\laravel8\routes\web.php

Добавяме най-отдолу:

Route::resource('games', 'GameController');

Така задаваме всички заявки към URI games да се обработват от класа GameController

За повече информация: https://laravel.com/docs/8.x/routing


Разглеждане на списъка с маршрути (пътища):

php artisan route:list




Step 6: Configure Bootstrap in Laravel 8 - Пропускаме

Засега я пропускаме,защото иска NPM (Node.js Package Manager).

Ще използваме в Step 7 BootstrapCDN - https://www.bootstrapcdn.com/

https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css

https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js



Step 7: Create Views in Laravel 8

За повече информация: https://laravel.com/docs/8.x/blade

Създаваме файл:

\xampp\htdocs\laravel8\resources\views\layout.blade.php

Поставяме вътре (използваме BootstrapCDN):

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Laravel 8 CRUD Tutorial</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

</head>

<body>

  <div class="container">

    @yield('content')

  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" type="text/js"></script>

</body>

</html>


Създаваме файл:

\xampp\htdocs\laravel8\resources\views\create.blade.php

Поставяме вътре:

@extends('layout')

@section('content')

<style>

  .uper {

    margin-top: 40px;

  }

</style>

<div class="card uper">

  <div class="card-header">

    Add Games Data

  </div>

  <div class="card-body">

    @if ($errors->any())

      <div class="alert alert-danger">

        <ul>

            @foreach ($errors->all() as $error)

              <li>{{ $error }}</li>

            @endforeach

        </ul>

      </div><br />

    @endif

      <form method="post" action="{{ route('games.store') }}">

          <div class="form-group">

              @csrf

              <label for="game_name">Game Name:</label>

              <input type="text" class="form-control" name="name"/>

          </div>

          <div class="form-group">

              <label for="cases">Price :</label>

              <input type="text" class="form-control" name="price"/>

          </div>

          <button type="submit" class="btn btn-primary">Add Game</button>

      </form>

  </div>

</div>

@endsection



Отваряме файл:

\xampp\htdocs\laravel8\app\Http\Controllers\GameController.php

Добавяме:

    public function create()

    {

          return view('create');

    }

Този метод се извиква при заявки по метод GET и показва уеб форма за въвеждане на данни.


Тестване:

http://127.0.0.1/laravel8/public/games/create




Step 8: Add Validation rules and store the data

Отваряме файл:

\xampp\htdocs\laravel6\app\Http\Controllers\GameController.php

Добавяме:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Game;


За повече информация: https://laravel.com/docs/8.x/validation

Добавяме в същия файл:

public function store(Request $request)

{

        $validatedData = $request->validate([

            'name' => 'required|max:255',

            'price' => 'required|integer',

        ]);

        $game = Game::create($validatedData);

        return redirect('/games')->with('success', 'Game is successfully saved');


 }

Този метод се извиква при заявки по метод POST и записва данните, изпратени от уеб формата.


Тестване:

http://127.0.0.1/laravel8/public/games/create




Въвеждаме валидни данни и проверяваме в PHPMyAdmin дали са се записали

http://127.0.0.1/phpmyadmin/sql.php?db=laravel8&table=games&pos=0



Step 9: Display the games

Отваряме файл:

\xampp\htdocs\laravel8\app\Http\Controllers\GameController.php

Добавяме:

public function index()

{

        $games = Game::all();

        return view('index',compact('games'));

}


Създаваме файл:

\xampp\htdocs\laravel8\resources\views\index.blade.php

Поставяме вътре:

@extends('layout')

@section('content')

<style>

  .uper {

    margin-top: 40px;

  }

</style>

<div class="uper">

  @if(session()->get('success'))

    <div class="alert alert-success">

      {{ session()->get('success') }}

    </div><br />

  @endif


<a href="{{ route('games.create')}}" class="btn btn-success">ADD</a>

  <table class="table table-striped">

    <thead>

        <tr>

          <td>ID</td>

          <td>Game Name</td>

          <td>Game Price</td>

          <td colspan="2">Action</td>

        </tr>

    </thead>

    <tbody>

        @foreach($games as $game)

        <tr>

            <td>{{$game->id}}</td>

            <td>{{$game->name}}</td>

            <td>{{$game->price}}</td>

            <td><a href="{{ route('games.edit', $game->id)}}" class="btn btn-primary">Edit</a></td>

            <td>

                <form action="{{ route('games.destroy', $game->id)}}" method="post">

                  @csrf

                  @method('DELETE')

                  <button class="btn btn-danger" type="submit">Delete</button>

                </form>

            </td>

        </tr>

        @endforeach

    </tbody>

  </table>

<div>

@endsection


Тестване:

http://127.0.0.1/laravel8/public/games/





Step 11: Create Delete Functionality

Отваряме файл:

\xampp\htdocs\laravel8\app\Http\Controllers\GameController.php

Добавяме:

public function destroy($id)

{

        $game = Game::findOrFail($id);

        $game->delete();

        return redirect('/games')->with('success', 'Game Data is successfully deleted');

}



Step 10: Complete Edit and Update

Отваряме файл:

\xampp\htdocs\laravel6\app\Http\Controllers\GameController.php

Добавяме:

public function edit($id)

{

        $game = Game::findOrFail($id);

        return view('edit', compact('game'));

}


public function update(Request $request, $id)

{

        $validatedData = $request->validate([

            'name' => 'required|max:255',

            'price' => 'required|numeric'

        ]);

        Game::whereId($id)->update($validatedData);

        return redirect('/games')->with('success', 'Game Data is successfully updated');

}


Създаваме файл:

\xampp\htdocs\laravel8\resources\views\edit.blade.php

Поставяме вътре: (с цвят  ………. са маркирани разликите спрямо create.blade.php)

@extends('layout')


@section('content')

<style>

  .uper {

    margin-top: 40px;

  }

</style>

<div class="card uper">

  <div class="card-header">

    Edit Game Data

  </div>

  <div class="card-body">

    @if ($errors->any())

      <div class="alert alert-danger">

        <ul>

            @foreach ($errors->all() as $error)

              <li>{{ $error }}</li>

            @endforeach

        </ul>

      </div><br />

    @endif

      <form method="post" action="{{ route('games.update', $game->id) }}">

          <div class="form-group">

              @csrf

              @method('PATCH')

              <label for="game_name">Game Name:</label>

              <input type="text" class="form-control" name="name" value="{{ $game->name }}"/>

          </div>

          <div class="form-group">

              <label for="cases">Game Price:</label>

              <input type="text" class="form-control" name="price" value="{{ $game->price }}"/>

          </div>

          <button type="submit" class="btn btn-primary">Update Data</button>

      </form>

  </div>

</div>

@endsection



Тестване:

http://127.0.0.1/laravel8/public/games/


Задача
Да се добави ново поле ratings - число от 1 до 5. Какви промени и къде трябва да се направят?