Упражнение MVC Потреб. интерфейс.Запълване на БД със случайни записи.Страниране. 02.12.2021 (инструк

Стъпка 0. Подготовка

Използваме подход “Learning by Doing”.


Стартираме Apache & MySQL & cmd

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

D:

cd \xampp\htdocs\laravel8

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

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


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


Задача 1 - View - подобряване на потребителския интерфейс
При добавяне:

1. Цена - поле с бутони нагоре/надолу.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number


2. Рейтинг - с плъзгач

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

https://getbootstrap.com/docs/5.0/forms/range/


При разглеждане на списъка:

3. Рейтингът да се показва със звездички

a) Server side - само Blade

https://laravel.com/docs/8.x/blade#loops

                        <td>

@for ($i = 0; $i < $game->rating; $i++)

    <img src="https://iheartcraftythings.com/wp-content/uploads/2021/05/How-to-draw-star-7.jpg" width="25px">

@endfor

                        </td>



b) Client side - само JS

<script>

function f(x) {

        for(i = 0; i < x; i++)

                document.write('<img src="https://iheartcraftythings.com/wp-content/uploads/2021/05/How-to-draw-star-7.jpg" width="40px"> ');

}

</script>


                        <td>

<script>f( {{$game->rating}} );</script>

                        </td>



Задача 2 - Model - Запълване на таблица с примерни данни
За повече информация: https://laravel.com/docs/8.x/seeding

Отваряме:

\xampp\htdocs\laravel8\database\seeds\DatabaseSeeder.php

Добавяме:

use Illuminate\Database\Seeder;

use Faker\Factory as Faker;

….

    public function run()

    {

        $faker = Faker::create();

        foreach (range(1,100) as $index) {

            \DB::table('games')->insert([

                'name' => $faker->catchPhrase,

                'price' => rand(1, 100),

                'rating' => rand(1, 5),

            ]);

        }

    }


Информация за методите тук: https://github.com/fzaninotto/Faker

Добавяне на 100 генерирани записа:

php artisan db:seed

и на още 100:

php artisan db:seed


Тестване:

http://127.0.0.1/laravel8/public/games

Задача 3 - Controller - Страниране
Добавяне на страниране на списъка със записите.

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

Отваряме:

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

Заместваме:

    public function index()

    {

        $games = Game::all();

        $games = Game::paginate(15);

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

    }


Отваряме:

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

Добавяме:

  </table>

  {{ $games->links() }}

<div>

@endsection


Отваряме: (съгласно https://laravel.com/docs/8.x/pagination#using-bootstrap )

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

Добавяме:

use Illuminate\Support\ServiceProvider;

use Illuminate\Pagination\Paginator;

…..

public function boot()

{

    Paginator::useBootstrap();

}



Тестване:

http://127.0.0.1/laravel8/public/games


КРАЙ


Типове данни на полета в таблица от БД: https://laravel.com/docs/8.x/migrations#creating-columns


Елементи на уеб форма:

Падащ списък: https://www.w3schools.com/html/html_form_elements.asp

<input type="checkbox">, <input type="radio"> и др. -

https://www.w3schools.com/html/html_form_input_types.asp


Качване на файлове:

VIEW:

<form action="..." method="POST" enctype="multipart/form-data">

File: <input type="file" name="myFile">

КОНТРОЛЕР:

https://laravel.com/docs/8.x/requests#files

https://laravel.com/docs/8.x/filesystem