Laptop Store ب Symfony 6 Darija الجزء السادس

imadbelasri Symfony
SY

فهاد الجزء السادس والأخير من Laptop Store ب Symfony 6 Darija غادي نكملوا ل projet ديالنا ونشوفوا كيفاش نديرو ل upload ل les images ب Symfony 6 من بعد غادي نشوفوا كيفاش نزيدو Error 404 page.


نظرة سريعة بالفيديو


1- إضافة Product Index View

منبعد غادي نزيدو fichier ف dossier product سميه index.html.twig لي غادي نعرضوا فيه les produits للأدمن.

الكود ديال الملف هو :

                                                    
                                                        //
{% extends 'base.html.twig' %}

{% block title %}Product List{% endblock %}

{% block body %}
    <div class="row my-5">
        <div class="col-md-10 mx-auto">
            {% for message in app.flashes('success') %}
                <div class="alert alert-success">
                    {{message}}
                </div>
            {% endfor %}
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>List of products</span>
                    <a href="{{path('product_store')}}" class="btn btn-sm btn-primary">
                        Add
                    </a>
                </div>
                <div class="card-body">
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Category</th>
                                <th>Quantity</th>
                                <th>Price</th>
                                <th>Image</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for product in products %}
                                <tr>
                                    <td>{{loop.index}}</td>
                                    <td>{{product.name}}</td>
                                    <td>{{product.category.name}}</td>
                                    <td>{{product.quantity}}</td>
                                    <td>{{product.price}}</td>
                                    <td>
                                        {% if product.image %}
                                            <img src="{{absolute_url('uploads/'~product.image)}}"
                                                width="60" height="60"
                                                alt="{{product.name}}" 
                                                class="fluid my-2 rounded">
                                        {% else %}
                                            <img src="{{absolute_url('uploads/flowers.png')}}"
                                                width="60" height="60"
                                                alt="{{product.name}}" 
                                                class="fluid my-2 rounded">
                                        {% endif %}
                                    </td>
                                    <td class="d-flex justify-content-around align-items-center">
                                        <a href="{{path('product_show',{id: product.id})}}" class="btn btn-sm btn-dark">
                                            show
                                        </a>
                                        <a href="{{path('product_edit',{id: product.id})}}" class="btn btn-sm btn-warning">
                                            edit
                                        </a>
                                        <form id="{{product.id}}" action="{{path('product_delete',{id: product.id})}}"
                                            method="post"></form>
                                        <button onclick="deleteItem('{{product.id}}')" class="btn btn-sm btn-danger">
                                            delete
                                        </button>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
                                                    
                                                

2- إضافة Order Index View

منبعد غادي نزيدو fichier ف dossier order سميه index.html.twig لي غادي نعرضوا فيه les commandes للأدمن.

الكود ديال الملف هو :

                                                        
                                                            //
{% extends 'base.html.twig' %}

{% block title %}Orders List{% endblock %}

{% block body %}
    <div class="row my-5">
        <div class="col-md-10 mx-auto">
            {% for message in app.flashes('success') %}
                <div class="alert alert-success">
                    {{message}}
                </div>
            {% endfor %}
            <div class="card">
                <div class="card-header">
                    Orders List
                </div>
                <div class="card-body">
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Username</th>
                                <th>Product Name</th>
                                <th>Price</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for order in orders %}
                                <tr>
                                    <td>{{loop.index}}</td>
                                    <td>{{order.user.username}}</td>
                                    <td>{{order.pname}}</td>
                                    <td>{{order.price}}</td>
                                    <td>
                                        <div class="dropdown">
                                            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                                {{order.status}}
                                            </button>
                                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                <li><a class="dropdown-item" 
                                                href="{{path('order_status_update',{order: order.id,status: 'shipped'})}}">Shipped</a></li>
                                                <li><a class="dropdown-item" href="{{path('order_status_update',{order: order.id,status: 'rejected'})}}">Rejected</a></li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>
                                        <form id="{{order.id}}" action="{{path('order_delete',{order: order.id})}}"
                                            method="post"></form>
                                        <button onclick="deleteItem('{{order.id}}')" class="btn btn-sm btn-danger">
                                            delete
                                        </button>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
                                                        
                                                    

3- تعديل الملف services.yaml

من بعد ف dossier config كاين ل fichier services.yaml لي غادي نديرو عليه التعديل باش نديرو ل upload ل les images وزيد dossier uploads ف dossier public لي فيه غادي يكونوا les images ديال les produits.

الكود ديال الملف بعد التعديل :

                                                        
                                                            //
# This file is the entry point to configure your own services.
# Files in the packages/ subdirectory configure your dependencies.

# Put parameters here that don't need to change on each machine where the app is deployed
# https://symfony.com/doc/current/best_practices.html#use-parameters-for-application-configuration
parameters:
    image_directory : '%kernel.project_dir%/public/uploads'
services:
    # default configuration for services in *this* file
    _defaults:
        autowire: true      # Automatically injects dependencies in your services.
        autoconfigure: true # Automatically registers your services as commands, event subscribers, etc.

    # makes classes in src/ available to be used as services
    # this creates a service per class whose id is the fully-qualified class name
    App\:
        resource: '../src/'
        exclude:
            - '../src/DependencyInjection/'
            - '../src/Entity/'
            - '../src/Kernel.php'

    # add more service definitions when explicit configuration is needed
    # please note that last definitions always *replace* previous ones
                                                        
                                                    

4- إضافة Error 404 Page

باش نزيدو error 404 page غادي نزيدوا مجموعة ديال les dossiers ف dossier templates بهاد الشكل :

  • dossier bundles فيه 
  • dossier TwigBundle فيه
  • dossier Exception فيه
  • fichier error404.html.twig

لي فيه هاد الكود :

                                                        
                                                            //
{# templates/bundles/TwigBundle/Exception/error404.html.twig #}
{% extends 'base.html.twig' %}

{% block body %}
    <h1 class="my-5">Page not found</h1>
    <p>
        The requested page couldn't be located. Checkout for any URL
        misspelling or <a href="{{ path('home') }}">return to the homepage</a>.
    </p>
{% endblock %}