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 %}
