Naredimo preprost projekt - Trgovina

Laravel ima že vgrajeno strukturo map, ki jo uporabljamo za organizacijo projekta, zato bomo prilagodili predlog potrebam v Laravel okolju. V spodnjih vrsticah je razloženo, kam postavimo te datoteke in kako prilagodimo kodo za Laravel.

1. Struktura datotek v Laravel-u

V Laravel-u bi bila struktura preproste spletne trgovine naslednja:

1. Poti (Routes): Uporabili bomo datoteko web.php, kjer definiramo poti (routes).
   1. Lokacija: routes/web.php
2. Kontrolerji (Controllers): Ustvarili bomo dva kontrolerja:
   1. ProductController: Prikazuje izdelke in glavno stran trgovine.
   2. CartController: Upravljanje košarice.
   3. Lokacija: app/Http/Controllers/
3. Pogledi (Views): Preproste HTML in Blade datoteke za prikaz:
   1. Lokacija: resources/views/
4. CSS in slike:
   1. CSS: Shranimo ga v mapo public/css (npr. public/css/style.css).
   2. Slike: Shranimo jih v mapo public/images.

2a. Ustvarjanje poti

Ustvarimo poti (routes/web.php):

<?php
use App\Http\Controllers\ProductController;
use App\Http\Controllers\CartController;

Route::get('/', [ProductController::class, 'index'])->name('products.index');
Route::post('/cart/add', [CartController::class, 'add'])->name('cart.add');
Route::get('/cart', [CartController::class, 'index'])->name('cart.index');
Route::post('/cart/remove', [CartController::class, 'remove'])->name('cart.remove');
    

2b. Ustvarjanje kontrolerjev

1. Ustvarimo ProductController:
   1. V terminalu (CMD) zaženemo ukaz:

   php artisan make:controller ProductController
               

   1. Odpremo ProductController.php in dodamo kodo za prikaz izdelkov:

   <?php
   
   namespace App\Http\Controllers;
   
   use Illuminate\Http\Request;
   
   class ProductController extends Controller
   {
       public function index()
       {
           // Seznam izdelkov
           $products = [
               ["id" => 1, "name" => "Izdelek A", "price" => 10.99, "image" => "images/product-a.jpg"],
               ["id" => 2, "name" => "Izdelek B", "price" => 20.49, "image" => "images/product-b.jpg"],
               ["id" => 3, "name" => "Izdelek C", "price" => 15.39, "image" => "images/product-c.jpg"],
           ];
   
           return view('products.index', compact('products'));
       }
   }
               

2. Ustvarimo CartController:
   1. V terminalu zaženemo ukaz:

   php artisan make:controller CartController
               

   1. Dodajmo logiko za košarico:

   <?php
   
   namespace App\Http\Controllers;
   
   use Illuminate\Http\Request;
   
   class CartController extends Controller
   {
       public function index()
       {
           // Pridobi košarico iz seje
           $cart = session()->get('cart', []);
   
           return view('cart.index', compact('cart'));
       }
   
       public function add(Request $request)
       {
           // Pridobi izdelek po ID-ju
           $product_id = $request->input('product_id');
           $product_name = $request->input('product_name');
           $product_price = $request->input('product_price');
   
           // Pridobi trenutno košarico iz seje
           $cart = session()->get('cart', []);
   
           // Dodaj izdelek v košarico
           $cart[$product_id] = [
               "name" => $product_name,
               "price" => $product_price,
               "quantity" => isset($cart[$product_id]) ? $cart[$product_id]['quantity'] + 1 : 1,
           ];
   
           // Posodobi sejo
           session()->put('cart', $cart);
   
           return redirect()->route('products.index')->with('success', 'Izdelek dodan v košarico!');
       }
   
       public function remove(Request $request)
       {
           // Pridobi ID izdelka
           $product_id = $request->input('product_id');
   
           // Pridobimo trenutno košarico
           $cart = session()->get('cart', []);
   
           // Odstranimo izdelek
           if (isset($cart[$product_id])) {
               unset($cart[$product_id]);
           }
   
           // Posodobimo sejo
           session()->put('cart', $cart);
   
           return redirect()->route('cart.index')->with('success', 'Izdelek odstranjen iz košarice!');
       }
   }
               

3. Ustvarjanje pogleda (HTML/Blade)

Prikaz izdelkov (products/index.blade.php), zato moramo ustvariti datoteko v resource/views/products/index.blade.php:

@extends('layouts.app')

@section('content')
    <h1>Izdelki</h1>
    <div class="products">
        @foreach ($products as $product)
            <div class="product">
                <img src="{{ asset($product['image']) }}" alt="{{ $product['name'] }}">
                <h2>{{ $product['name'] }}</h2>
                <p>Cena: {{ $product['price'] }} €</p>
                <form action="{{ route('cart.add') }}" method="POST">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $product['id'] }}">
                    <input type="hidden" name="product_name" value="{{ $product['name'] }}">
                    <input type="hidden" name="product_price" value="{{ $product['price'] }}">
                    <button type="submit">Dodaj v košarico</button>
                </form>
            </div>
        @endforeach
    </div>
@endsection
    

Prikaz košarice (cart/index.blade.php), zato ustvarimo datoteko v resource/views/cart/index.blade.php:

@extends('layouts.app')

@section('content')
    <h1>Košarica</h1>
    @if ($cart)
        <ul>
            @foreach ($cart as $id => $item)
                <li>
                    {{ $item['name'] }} - {{ $item['price'] }} € (x{{ $item['quantity'] }})
                    <form action="{{ route('cart.remove') }}" method="POST" style="display: inline;">
                        @csrf
                        <input type="hidden" name="product_id" value="{{ $id }}">
                        <button type="submit">Odstrani</button>
                    </form>
                </li>
            @endforeach
        </ul>
        <p>Skupaj: {{ array_sum(array_column($cart, 'price')) }} €</p>
    @else
        <p>Košarica je prazna.</p>
    @endif
@endsection
    

Prikaz spletnega mesta (layouts/app.blade.php), zato ustvarimo datoteko v resource/views/layouts/app.blade.php:

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel Spletna Trgovina</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="{{ route('products.index') }}">Izdelki</a></li>
                <li><a href="{{ route('cart.index') }}">Košarica</a></li>
            </ul>
        </nav>
    </header>

    <main>
        @yield('content')
    </main>

    <footer>
        <p>© 2023 Spletna Trgovina</p>
    </footer>
</body>
</html>
    

Dodatne opombe

1. CSS in slike: Dodajmo svoj style.css kot sem prej razložil in slike postavi v public/images.
2. Pogled za layout (layouts.app.blade.php): Blade datoteko ustvarimo v resources/views/layouts/app.blade.php kot osrednji layout.

X