Laptop Store ب Symfony 6 Darija الجزء الثالت

منذ 4 أشهر imadbelasri Symfony
SY

فهاد الجزء الثالت من Laptop Store ب Symfony 6 Darija غادي نكملوا ل projet ديالنا ونعرضوا المعلومات الخاصة بكل produit ونعطيو للمستخدم الإمكانية ديال إضافة des commandes.


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


1- إضافة show Product

منبعد غادي نزيدو dossier ف templates سميه product فيه زيد fichier سميه show.html.twig لي فيه غادي نعرضوا المعلومات الخاصة بكل produit ونعطيو للمستخدم الإمكانية ديال إضافة des commandes وممكن تخدم ب Symfony Mailer يلا بغيتي ترسل للمستخدم إمايل فيه ل commande لي دار.

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

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

{% block title %}
    {{product.name}}
{% endblock %}

{% block body %}
<div class="row my-5">
    <div class="col-md-12">
        <div class="my-3 d-flex justify-content-start align-items-center">
            <a href="{{path('order_store',{product: product.id})}}" class="btn btn-sm btn-outline-dark mx-1">
                Order now
            </a>
        </div>
        <div class="row">
            {% if product %}
                <div class="col-md-8">
                    <div class="card">
                        {% if product.image %}
                            <img src="{{photo_url~product.image}}"
                                alt="{{product.name}}" 
                                height="400"
                                width="600"
                                class="card-img-top">
                        {% else %}
                            <img src="{{photo_url~'flowers.png'}}"
                                alt="{{product.name}}" 
                                height="400"
                                width="600"
                                class="card-img-top">
                        {% endif %}
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">{{product.name}}</h5>
                            <p class="card-text">{{product.description}}</p>
                            <h5><span class="text text-danger">{{product.price}}DH</span></h5>
                            <h5><span class="text text-success">{{product.category.name}}</span></h5> 
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="alert alert-info">
                    No product found!
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}
                                                    
                                                

2- عرض les commandes لي دار المستخدم

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

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

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

{% block title %}My 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 %}
            {% for message in app.flashes('warning') %}
                <div class="alert alert-warning">
                    {{message}}
                </div>
            {% endfor %}
            <div class="card">
                <div class="card-header">
                    My Orders
                </div>
                <div class="card-body">
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Product Name</th>
                                <th>Price</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% set sum = 0 %}
                            {% for order in user.orders %}
                                {% set sum = sum + order.price %}  
                                <tr>
                                    <td>{{loop.index}}</td>
                                    <td>{{order.pname}}</td>
                                    <td>{{order.price}}</td>
                                    <td>
                                        {% if order.status == 'processing...' %}
                                            <span class="badge bg-dark p-2">
                                                {{order.status}}
                                            </span>
                                        {% elseif order.status == 'shipped' %}
                                            <span class="badge bg-success p-2">
                                                {{order.status}}
                                            </span>
                                        {% else %}
                                            <span class="badge bg-danger p-2">
                                                {{order.status}}
                                            </span>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                            <tr class="text-center">
                                <th colspan="3">Total</th>
                                <td class="fw-bold">{{sum}} DH</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
                                                        
                                                    

3- إضافة Bootstrap 5

باش نقول ل projet ديالي بلي غادي نخدم ب Bootstrap 5 غادي نمشي ل dossier config وندير تعديل على الملف twig.yaml.

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

                                                        
                                                            //
twig:
    default_path: '%kernel.project_dir%/templates'
    form_themes: ['bootstrap_5_layout.html.twig']
when@test:
    twig:
        strict_variables: true
                                                        
                                                    

4- تعديل الملف security.yaml

غادي نمشي ل dossier config وندير تعديل على الملف security.yaml لي غادي نحتاجوه ف login هنا حددنا بلي غادي نتكونيكطاو بل username.

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

                                                        
                                                            //
security:
    enable_authenticator_manager: true
    # https://symfony.com/doc/current/security.html#registering-the-user-hashing-passwords
    password_hashers:
        Symfony\Component\Security\Core\User\PasswordAuthenticatedUserInterface: 'auto'
        App\Entity\User:
            algorithm: auto

    # https://symfony.com/doc/current/security.html#loading-the-user-the-user-provider
    providers:
        # used to reload user from session & other features (e.g. switch_user)
        app_user_provider:
            entity:
                class: App\Entity\User
                property: username
    firewalls:
        dev:
            pattern: ^/(_(profiler|wdt)|css|images|js)/
            security: false
        main:
            lazy: true
            provider: app_user_provider
            custom_authenticator: App\Security\AppCustomAuthenticator
            logout:
                path: app_logout
                # where to redirect after logout
                # target: app_any_route

            # activate different ways to authenticate
            # https://symfony.com/doc/current/security.html#the-firewall

            # https://symfony.com/doc/current/security/impersonating_user.html
            # switch_user: true

    # Easy way to control access for large sections of your site
    # Note: Only the *first* access control that matches will be used
    access_control:
        # - { path: ^/admin, roles: ROLE_ADMIN }
        # - { path: ^/profile, roles: ROLE_USER }

when@test:
    security:
        password_hashers:
            # By default, password hashers are resource intensive and take time. This is
            # important to generate secure password hashes. In tests however, secure hashes
            # are not important, waste resources and increase test times. The following
            # reduces the work factor to the lowest possible values.
            Symfony\Component\Security\Core\User\PasswordAuthenticatedUserInterface:
                algorithm: auto
                cost: 4 # Lowest possible value for bcrypt
                time_cost: 3 # Lowest possible value for argon
                memory_cost: 10 # Lowest possible value for argon