BLOG ب SYMFONY 4 الجزء الثالت


فهاد الجزء الثالت من  BLOG ب SYMFONY 4 غادي نكملوا ل projet ديالنا ونزيدو بعد الإعدادات لي غادي يمكنوا المستخدم باش يتكونيكطا كما غادي نشوفوا كيفاش نديرو العرض ديال les articles ديالنا لي زدنا.

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

1- إضافة des articles مع المستخدم

فمنبعد مزدنا des articles وأيضا مستخدم عشوائي فغادي نشوفوا كيفاش نديرو نزيدو ل id ديال لمستخدم لي زاد كل article.

غادي نمشي ل dossier DataFixtures فمسح ل UserFixture و PostFixture وخلي فقط الملف  AppFixtures لي فيه غادي نزيد جوج ديال les fonctions لي كيزيدو des articles وأيضا مستخدم فقاعدة البيانات وكنزيد مع كل article لمستخدم لي زادو.

وكيف شفنا قبل باش نرسل المعلومات لقاعدة البيانات غادي ندير هاد ل commande :

 php bin/console doctrine:fixtures:load


الكود لي غادي تزيد ف  AppFixtures.php هو : 

                                //
<?php

namespace App\DataFixtures;
use App\Entity\User;
use App\Entity\Post;
use Cocur\Slugify\Slugify;
use Doctrine\Bundle\FixturesBundle\Fixture;
use Doctrine\Common\Persistence\ObjectManager;
use Symfony\Component\Security\Core\Encoder\UserPasswordEncoderInterface;

class AppFixtures extends Fixture
{

    private $passwordEncoder;

    public function __construct(UserPasswordEncoderInterface $passwordEncoder){
        $this->passwordEncoder = $passwordEncoder;
    }

    public function load(ObjectManager $manager)
    {
        $this->loadUsers($manager);
        $this->loadPosts($manager);
    }
    
    public function loadPosts(ObjectManager $manager){
        $slugify = new Slugify();
        for($i=0;$i<10;$i++){
            $post = new Post();
            $post->setTitle('Lorem ipsum post number '.rand(0,100));
            $post->setBody('Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam earum et quasi illo quidem dicta, officia ipsam molestiae nesciunt nemo vero voluptatibus autem necessitatibus odit expedita exercitationem sunt, nostrum magnam? '.rand(0,100));
            $post->setTime(new \DateTime());
            $post->setSlug($slugify->slugify($post->getTitle()));
            $post->setUser($this->getReference('samadi'));
            $manager->persist($post);
        }
        $manager->flush();
    }

    public function loadUsers(ObjectManager $manager)
    {
        $user = new User();
        $user->setUsername('samadi2019');
        $user->setFullname('samadi samir');
        $user->setEmail('samadi@email.com');
        $user->setPassword(
            $this->passwordEncoder->encodePassword(
                $user,'samadi123'
            )
        );
        $user->setRoles(['ROLE_USER']);
        $this->addReference('samadi',$user);
        $manager->persist($user);
        $manager->flush();

    }
}
                            

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

غادي نمشي ل dossier config/packages وغادي ندير تعديل على الملف security.yaml هاد التعديلات عندها علاقة بل connexion و déconnexion.

فهنا كنحدد بلي غادي نكريبطي كلمة المرور ديال المستخدم بل fonction bcrypt وكنعطي ل Entity User وأيضا كنحدد بلي غادي نستعمل ل username باش نتكونيكطا وكنزيد les routes ديال ل connexion و déconnexion.

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

                                //
security:
    #default voter strategy
    access_decision_manager :
        strategy : affirmative
    #set password encrypt mode
    encoders : 
        App\Entity\User: bcrypt
    # https://symfony.com/doc/current/security.html#where-do-users-come-from-user-providers
    providers:
    #set the field that we will use to load users here its username
        database_users:
            entity: {class: App\Entity\User,property: username} 
        #in_memory: { memory: ~ }
    firewalls:
        dev:
            pattern: ^/(_(profiler|wdt)|css|images|js)/
            security: false
        main:
            anonymous: true

            # activate different ways to authenticate

            # http_basic: true
            # https://symfony.com/doc/current/security.html#a-configuring-how-your-users-will-authenticate

            # form_login: true
            # https://symfony.com/doc/current/security/form_login_setup.html
            form_login: 
                check_path : security_login
                login_path : security_login
                csrf_token_generator : security.csrf.token_manager
                default_target_path : blog
            
            logout:
                path: security_logout
                target: blog

    # 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 }
    role_hierarchy : 
        #set admin has the same role as user and plus
        ROLE_ADMIN : ROLE_USER
                            

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

دائما ف dossier config/packages كنمشي ل dossier routes وكندير تعديل على الملف  routes.yaml هاد التعديل كيمكن باش نحدد بلي ل controller BlogController هو ل controller الرئيسي لي غادي نستعمل فاش أول مرة نفتح ل projet ديالي وكنحدد بلي ل fonction index هي لي غادي نستعمل ولي فيها كنسترجع les articles كاملين.

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

                                //
index:
  path: /
  controller: App\Controller\BlogController::index
                            

4- إضافة les styles css

غادي نمشي ل dossier public فيه زيد dossier css فيه زيد fichier app.css فيه غادي يكون عندي les styles css لي غادي نحتاج.

الكود ديال  app.css هو :

                                    //
body{
    font-family: 'Raleway' sans-serif;
    background-color : #d4d4d4;
}
div.logo h2{
    color: #9b59b6;
    font-size: 2.5rem;
    font-weight: 700;
    font-family: 'Italianno' sans-serif;
    padding: 20px;
}
.main-nav{
    background-color: #b574cf;
    border: 1px dashed #fff;
}
.collapse{
    background-color: #b57fca; 
}
.navbar-toggler{
    background-color: white;
}
.navbar-brand{
    color: #fff !important;
}
nav .nav-item{
    margin-right: 30px;
    transition: background-color .3s ease;
}
nav .nav-item:hover{
    background-color: #8e44ad; 
    border-radius: 10px;
}
nav .nav-item a{
    font-size: 1.2em;
    color: #ffffff !important;
    font-family: 'Raleway',sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    text-align: center;
}
button.search{
    background-color: #ffffff !important;
    color: #9b59b6 !important;
    border: none;
}
button.search:hover{
    color: #8e44ad !important;
    cursor: pointer;
}
div.post,
.post{
    background-color: #ffffff;
    padding: 15px;
    border: 1px solid #ffffff;
    border-radius: 5px;
}
footer{
    border-top: 1px solid #8e44ad;
    background-color: #FFF;
    height: 60px;
}
footer ul {
    list-style: none;
}
footer ul li{
    display: inline-block;
    margin-right: 15px;
}
footer ul li a{
    font-size: 1.1em;
    color: #9b59b6 !important;
}
footer ul li a:hover{
    text-decoration: none;
    color: #8e44ad !important;
    font-weight: 400;
}
footer ul li:first-child{
    color: #9b59b6 !important;
    font-weight: 700;
}
ul.socials{
    list-style: none;
}
ul.socials li{
    display: inline-block;
    background-color: #9b59b6;
    border: 2px solid #fff;
    border-radius: 5px;
}
ul.socials li:hover{
    background-color: #b790c7;
}
ul.socials li a{
    color: #fff !important;
}
h2{
    color: #9b59b6;
}
p.added{
    border:  1px dashed #b790c7;
    padding: 10px;
    color: #d4d4d4;
    border-radius: 5px;
    width:70%;
}
.btn-default{
    background-color: #b790c7;
    padding: 5px;
    color: #fff;
    border-radius: 5px;
}
.btn-default:hover{
    text-decoration: none;
    color: #fff;
    background-color: #8e44ad; 
}
a.username{
    text-decoration: none;
    color: #d4d4d4;;
}
a.username:hover{
    text-decoration: none;
    color: #000;
}
input[type="text"],
input[type="email"],
input[type="password"]{
    border : none;
    border-bottom: 1px solid #b790c7;
    border-radius: 0;
    outline: none;
}
.btn-primary{
    background-color: #b790c7 !important;
    border: 1px solid #fff;
}
.display{
    display: block;
}
.hidden{
    display: none;
}
.comment-username{
    font-size: 16px;
    font-style: italic;
    font-weight: 500;
}
.comment{
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: 1px;
    background-color: beige;
    padding: 20px;
    border-radius: 5px;
}
h4.latest{
    padding: 15px 0;
    border-bottom: 1px solid #D4D4D4;
}
h4.latest a {
    text-decoration: none;
    color: rgba(17,17,17,0.6);
    font-size: 22px;
    font-weight: 400;
}
h4.latest a:hover{
    text-decoration: none;
    color: rgba(17,17,17,0.8);
    font-weight: 500;
}
                                

5- تعديل الملف base.html.twig

غادي نمشي للملف  base.html.twig  لي هو الملف الرئيسي ديالي ولي غادي نزيد فيه رولبط css وjs وفيه كنزيد القائمة لي كتمكن من التنقل ما بين الصفحات.

الكود ديال  base.html.twig بعد التعديل هو :

                                    //
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}SYM BLOG{% endblock %}</title>
        {% block stylesheets %}
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
            <link href="https://fonts.googleapis.com/css?family=Italianno|Raleway:400,700" rel="stylesheet">
            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
            <link rel="stylesheet" href="/assets/css/app.css">
        {% endblock %}
    </head>
    <body>
        <div class="site-header">
            <header class="container">
                <div class="row">
                    <div class="col-12 col-sm 6">
                        <div class="logo">
                            <h2 class="text-uppercase">
                                SYM BLOG
                            </h2>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 text-center">
                        <ul class="socials pull-right mt-4 p-2">
                            <li><a href="#"  class="p-2"><i class="fab fa-facebook"></i></a></li>
                            <li><a href="#"  class="p-2"><i class="fab fa-twitter"></i></a></li>
                            <li><a href="#"  class="p-2"><i class="fab fa-youtube"></i></a></li>
                            <li><a href="#"  class="p-2"><i class="fab fa-instagram"></i></a></li>
                        </ul>
                    </div>
                </div>
            </header>
        </div>
        <div class="main-nav">
            <nav class="navbar navbar-expand-lg  navbar-static-top nav-justified navbar-light">
                <a class="navbar-brand d-md-none d-lg-none" href="#">SYM BLOG</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <div class="container">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="{{path("blog")}}">Accueil <span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Contact</a>
                            </li>
                            <form method="post" action="{{path('search_posts')}}" class="form-inline my-2 pt-1 d-none d-sm-none d-md-block d-lg-block my-lg-0">
                                <input class="form-control mr-sm-2" name="search" type="search" placeholder="Recherche" aria-label="Search">
                                <button class="btn btn-outline-success search my-2 my-sm-0" type="submit"><i class="fa fa-search"></i></button>
                            </form>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
        <div class="row">
            <div class="col-md-6 mx-auto mt-2">
                {% for message in app.flashes('notice') %}
                    <div class="alert alert-success">
                        {{message}}
                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="container mt-4">
            <main class="row">
                {% block body %}
                {% endblock %}
            </main>
        </div>
        <footer class="text-center text-capitalize mt-4">
            <ul class="mt-3">
                <li>SYM BLOG © 2019.</li>
                <li><a href="#">A propos</a></li>
                <li><a href="#">Politique de confidentialité</a></li>
                <li><a href="#">Contactez Nous</a></li>
            </ul>
        </footer>
        {% block javascripts %}
            <script
                src="http://code.jquery.com/jquery-3.3.1.min.js"
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
                crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        {% endblock %}
    </body>
</html>
                                


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

بحث في الموقع


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