دورة SYMFONY 4 للمبتدئين الدرس الرابع


فهاد الدرس الرابع من دورة SYMFONY 4 للمبتدئين غادي نكملوا الدورة ديالنا وغادي نشوفوا كيفاش نعرضوا مجموعة ديال المقالات لي عندنا فحنا مازال موصلناش لقواعد البيانات غادي تكون المعلومات عندنا فقط مخزنة ف array وغادي نشوفوا كيفاش نعرضوها فالصفحة الرئيسية ديالنا.


1- إضافة المقالات ف HelloController.php

فكيف قلنا غادي نزيدو des articles لي عندنا ف array وغادي نشوفوا من بعد كيفاش نرسلهم ونعرضهم فالصفحة الرئيسية.

كنمشي ل HelloController وكنزيد variable سميتها posts فيها des articles لي فيهم title body & id.

التعديل لي درت على HelloController.php هو :

                                //
<?php

namespace App\Controller;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;

class HelloController extends AbstractController
{

    private $posts = [
        [
            'id' => 1,
            'title' => 'samadi is here',
            'body' => 'samadi is coming back'
        ],
        [
            'id' => 2,
            'title' => 'amine is here',
            'body' => 'amine is coming back'
        ],
        [
            'id' => 3,
            'title' => 'kamal is here',
            'body' => 'kamal is coming back'
        ]
    ];
    /**
    * @Route("/hello")
    */
    public function index()
    {
        // return new Response(
        //     '<html><body>Hello World</body></html>'
        // );
        $sayHello = "hello world from hello page";
        return $this->render('hello.html.twig',[
            'hello' => $sayHello
        ]);
    }
}
                            

2- إرسال المقالات للصفحة الرئيسية

كيف شفنا قبل فاش صيفطنا ل variable hello للملف hello.html.twig غادي نديرو نفس الطريقة ونرسلوا ل variable posts لي فيها les articles كاملين.


التعديل لي درت على HelloController.php هو :


                                <?php

namespace App\Controller;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;

class HelloController extends AbstractController
{

    private $posts = [
        [
            'id' => 1,
            'title' => 'samadi is here',
            'body' => 'samadi is coming back'
        ],
        [
            'id' => 2,
            'title' => 'amine is here',
            'body' => 'amine is coming back'
        ],
        [
            'id' => 3,
            'title' => 'kamal is here',
            'body' => 'kamal is coming back'
        ]
    ];
    /**
    * @Route("/hello")
    */
    public function index()
    {
        // return new Response(
        //     '<html><body>Hello World</body></html>'
        // );
        // $sayHello = "hello world from hello page";
        return $this->render('hello.html.twig',[
            'posts' => $this->posts
        ]);
    }
}
                            

3- عرض les articles فالصفحة الرئيسية

من بعد ف hello.html.twig كنستقبل posts وكنخدم بل boucle for باش كنعرضهم انا زدت des classes bootstrap يلا مكنتيش كتعرف bootstrap شوف دورة المبتدئين الخاصة به.
 
دبا يلا مشيتي للمتصفح ديالك ودخلتي ل http://127.0.0.1:8000/hello 
غادي تلقى هاد النتيجة :



بالنسبة للصور إستعملت موقع كيعرض صور عشوائية حتى نوصلوا لقواعد البيانات وغادي نزيدوهم.

التعديل لي درت على HelloController.php هو :

                                //
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Accueil !{% endblock %}</title>
        {% block stylesheets %}
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
        {% endblock %}
    </head>
    <body>
        <div class="container">
            {% block body %}
                <div class="row mt-4">
                    <div class="col-md-6 mx-auto">
                        <d3 class="card bg-light rounded">
                            <div class="container-fluid">
                                <h3 class="card-title text-default p-4">
                                    Articles
                                </h3>
                                <hr>
                            </div>
                            <div class="card-body mt-2 rounded">
                                {% for post in posts %}
                                    <div class="media">
                                        <img class="mr-3 rounded" src="https://picsum.photos/100/100" alt="">
                                        <div class="media-body">
                                            <h5 class="mt-0">{{post.title}}</h5>
                                            {{post.body}}
                                        </div>
                                    </div>
                                    <hr>
                                {% endfor %}
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endblock %}
        </div>
        {% block javascripts %}
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
        {% endblock %}
    </body>
</html>