BLOG ب SYMFONY 4 الجزء الرابع


فهاد الجزء الرابع من blog ب symfony 4 غادي نكملوا ل projet ديالنا ونشوفوا كيفاش نعرضوا les articles فالصفحة الرئيسية ديالنا من بعد غادي نشوفوا كيفاش نعرضوا article ب slug ديالو وفالآخير غادي نشوفوا كيفاش نعرضوا les articles الخاصين بمستخدم معين.

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

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

غادي نمشي ل dossier templates ثم dossier blog فيه غادي نلقى لملف index.html.twig غادي ندير عليه تعديلات لي غادي تمكني من عرض les articles لي جاوني من ل fonction index لي زدنا فل controller BlogController.

منبعد كندير ل include للملف sidebar لي غادي يتعرضوا فيه آخر خمس articles تزادو ولي غادي نزيدوه من بعد.

الكود ديال الملف index.html.twig هو :

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

{% block title %}Accueil{% endblock %}

{% block body %}
    <article class="col-sm-7 mt-4 mx-4">
        {% for post in posts %}
            <div class="row post mb-1">
                <div class="col-12">
                    <h2 class="text-capitalize">{{post.title}}</h2>

                    <p class="added"><a href="{{path('user_posts',{'username':post.user.username})}}" class="username">{{post.user.fullname}}</a> {{post.time|date("F jS \\a\\t g:ia")}}</p>
                    <p>{{post.body}}</p>
                    <a href="{{path('blog_show',{'slug':post.slug})}}" class="btn btn-default float-left text-capitalize ">Lire la suite</a>
                </div>
            </div>
        {% endfor %}
    </article>
    <aside class="col-sm-4 container col-12">
        {{include('includes/sidebar.html.twig',{'latests':latests})}}
    </aside>
{% endblock %}
{% block javascripts %}

{% endblock %}
                            

2- إضافة sidebar

ف dossier templates زيد dossier جديد سميه includes زيد فيه fichier سميه sidebar.html.twig فيه غادي يتعرضوا آخر خمس articles تزادو ولي جاوني من الملف index.html.twig. 

الكود ديال الملف sidebar.html.twig هو :

                                //
<div class="row post mt-4">
    <div class="col-12">
        <h2 class="mt-1 text-capitalize">Articles Recents</h2>
        <hr>
        <div class="row post mb-1">
            {% for post in latests %}
            <div class="col-12">
                <h4 class="latest"><a href="{{path('blog_show',{'slug':post.slug})}}" class="username">{{post.title}}</a></h4>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
                            

3- عرض المعلومات الخاصة ب article

ف dossier blog زيد ملف جديد سميه show.html.twig ولي غادي يتعرض فيه article منبعد منسترجعوه ب slug ديالو ولي سبق وزدنا الكود ديالو فل fonction show لي زدنا فل controller BlogController.

الكود ديال الملف show.html.twig هو :


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

{% block title %}{{post.title}}{% endblock %}

{% block body %}
    <article class="col-sm-7 mt-4 mx-4">
        <div class="row post mb-1">
            <div class="col-12">
                <h2 class="text-capitalize">{{post.title}}</h2>
                <p class="added">{{post.user.fullname}} {{post.time|date("F jS \\a\\t g:ia")}}</p>
                <p>{{post.body}}</p>
            </div>
        </div>
        <div class="row post mt-2">
            <div class="col-12">
                <h2 class="text-capitalize">Commentaires <span class="badge badge-dark">{{post.getComments.count}}</span></h2>
                <hr>
            </div>
        </div>
    </article>
    <aside class="col-sm-4 container col-12">
          {{include('includes/sidebar.html.twig',{'latests':latests})}}
    </aside>
{% endblock %}
                            

4- عرض les articles الخاصين بكل مستخدم

ف dossier templates زيد dossier جديد سميه users زيد فيه fichier سميه user_posts.html.twig فيه غادي يتعرضوا les articles لي زادهم مستخدم معين ولي سبق وزدنا الكود ديالو فل fonction renderUserPosts لي زدنا فل controller BlogController.

الكود ديال الملف user_posts.html.twig هو :

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

{% block title %}{{user.fullname}} Posts{% endblock %}

{% block body %}
    <article class="col-sm-7 mt-4 mx-4">
        {% for post in posts %}
            <div class="row post mb-1">
                <div class="col-12">
                    <h2 class="text-capitalize">{{post.title}}</h2>
                    <p class="added"><a href="{{path('user_posts',{'username':post.user.username})}}" class="username">{{post.user.fullname}}</a> {{post.time|date("F jS \\a\\t g:ia")}}</p>
                    <p>{{post.body}}</p>
                    <a href="{{path('blog_show',{'slug':post.slug})}}" class="btn btn-default pull-right text-capitalize ">Lire la suite</a>
                </div>
            </div>
        {% endfor %}
    </article>
    <aside class="col-sm-4 container col-12">
        <div class="row post mt-4">
            <div class="col-12">
                <h3 class="mt-1 text-capitalize">{{user.fullname}}</h3>
				<hr>
                <h3 class="mt-1 text-capitalize">{{user.username}}</h3>
            </div>
        </div>
    </aside>
{% endblock %}
                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد