كيفاش تصوب Rest Api بإستعمال SlimFramework الجزء الثاني

فهاد الجزء الثاني من كيفاش تصوب Rest Api بإستعمال SlimFramework غادي نكملو الملفات لي غادي يمكنوا من إضافة تعديل وحدف post كما غادي نزيدو الملف لي غادي يكون هو الصفحة الرئيسية ديالنا والملف لي غادي تكون فيه الفورم ديال إضافة post.

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


1- الملف post.php


فالمجلد api فيه زيد ملف سميه post.php من بعد مكن créer l'objet مل la class App كنخدم بها فأولا كنخدم ب get لي كنعطيها الرابط منبعد كنخدم ب pdo باش كنسترجع كل les posts لي عندي وكنعرضهم sous form json منبعد كاين الكود ليكيمكن من إسترجاع post لي غادي يختار المستخدم بالإعتماد على ل id وكيتعرض sous form json من بعد كاين الكود لي كايزيد post دائما بإستعمال pdo ثم الكود لي كيعدل post فالكود لي كيحدف post الكود ديال الملف هو:

                                    
                                        <?php
use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;



$app = new \Slim\App;
try{
    $app->get('/api/posts', function (Request $request, Response $response) {
    $options = array(PDO::ATTR_PERSISTENT => true);
    $con = new PDO(DSN, USERNAME, PASSWORD, $options);
    $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);   
    $query = "SELECT * FROM posts";
    $statement  = $con->query($query);
    $posts = $statement->fetchAll(PDO::FETCH_OBJ);
        echo json_encode($posts);
    });
}catch (PDOException $ex){
    echo "Une erreur est survenue".$ex->getMessage();
}
//get single post
try{
    $app->get('/api/post/{id}', function (Request $request, Response $response) {
        $id = $request->getAttribute('id');
        $options = array(PDO::ATTR_PERSISTENT => true);
        $con = new PDO(DSN, USERNAME, PASSWORD, $options);
        $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);   
        $query = "SELECT * FROM posts WHERE id = '$id'";
        $statement  = $con->query($query);
        $posts = $statement->fetchAll(PDO::FETCH_OBJ);
        echo json_encode($posts);
    });
}catch (PDOException $ex){
    echo "Une erreur est survenue".$ex->getMessage();
}
//add post
$app->post('/api/post/add', function (Request $request, Response $response) {
    $options = array(PDO::ATTR_PERSISTENT => true);
    $con = new PDO(DSN, USERNAME, PASSWORD, $options);
    $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);   
    $title = $request->getParam('title');
    $body = $request->getParam('body');
    $category_id = $request->getParam('category_id');
    $query = "INSERT INTO posts(category_id,title,body,created_at)
                    VALUES (:category_id,:title,:body,now())";
    try{
        $statement  = $con->prepare($query);
        $statement->execute(array(":category_id"=>$category_id,":title"=>$title,":body"=>$body));
        echo "Post ajouté";
    }catch (PDOException $ex){
        echo "Une erreur est survenue".$ex->getMessage();
    }
});
//update post
$app->put('/api/post/update/{id}', function (Request $request, Response $response) {
    $options = array(PDO::ATTR_PERSISTENT => true);
    $con = new PDO(DSN, USERNAME, PASSWORD, $options);
    $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);   
    $id = $request->getAttribute('id');
    $title = $request->getParam('title');
    $body = $request->getParam('body');
    $category_id = $request->getParam('category_id');
    $query = "UPDATE posts SET title = :title,body = :body,category_id = :category_id WHERE id=:id";
    try{
        $statement  = $con->prepare($query);
        $statement->execute(array(":category_id"=>$category_id,":title"=>$title,":body"=>$body,":id"=>$id));
        echo "Post modifié";
    }catch (PDOException $ex){
        echo "Une erreur est survenue".$ex->getMessage();
    }
});
//delete post
$app->post('/api/post/delete', function (Request $request, Response $response) {
    $id = $request->getParam('id');
    $options = array(PDO::ATTR_PERSISTENT => true);
    $con = new PDO(DSN, USERNAME, PASSWORD, $options);
    $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);   
    $query = "DELETE FROM posts WHERE id=:id";
    try{
        $statement  = $con->prepare($query);
        $statement->execute(array(":id"=>$id));
        echo "Post supprimé";
    }catch (PDOException $ex){
        echo "Une erreur est survenue".$ex->getMessage();
    }
});
                                    
                                

2- الملف index.php


فالمجلد public زيد ملف جديد سميه index.php هادا الملف لي غادي يمكن من عرض les posts و les catégories على شكل json فباش يمكنا نعرضوهم كاملين فصفحة وحدة كن tester على url فيلا كان الجزء الرابع منو كيساوي categories او category فكنعرض الملف category.php كان كيساوي posts او post كنعرض post.php فالرابط غادي يكون على هاد الشكل localhost/slim-blog/public/api/4 فالرقم 4 هو الجزء لي غادي نtester شنو كيساوي ويلا كان هاد الجزء كيساوي شي حاجة أخرى من غير posts او categories كنعرض رسالة خطا بلي الصفحة غير موجودة الكود ديال الملف هو :

                                    
                                        <?php
include_once '../app/db.php';
require '../vendor/autoload.php';
use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;


$app = new \Slim\App;
$_SERVER['REQUEST_URI_PATH'] = parse_url($_SERVER['REQUEST_URI'],PHP_URL_PATH);
$url_parts = explode('/',$_SERVER['REQUEST_URI_PATH']);
if(isset($url_parts[4])){
    $page = $url_parts[4];
    if($page == 'categories' || $page == 'category'){
       require_once('../app/api/category.php');
    }else if($page == 'posts' || $page == 'post'){
       require_once('../app/api/post.php');
    }else{
        die('<h1>404 page introuvable</h1>');
    }
}
$app->run();
                                    
                                

3- الملف main.js


فالمجلد public زيد مجلد سميه js فيه زيد ملف سميه main.js هاد الملف غادي يكون فيه الكود لي كيمكن اولا من عرض les posts لي عندي فقاعدة البيانات فالملف index.php ولي غادي نزيدوه من بعد فمنبعد مكنسترجع les posts كاملين كخدم بeach باش نعرض المعلومات كاملين فعندنا لvariable output لي كتاخد liste منبعد هاد liste كنزيدها فواحد div لي عندها id posts ولي غادي تكون فالملف index.php منبعد كاين الكود لي كيسترجع les catégories وكيعرضهم بنفس الطريقة ف فواحد div لي عندها id categories من بعد كاين الكود لي كيمكن من استرجاع les catégories لي عندنا وكيزيدهم ف select liste ولي غادي يكونوا عندنا فالملف لي كيمكن من إضافة post ثم كاين الكود لي كيمكن من إرسال الحقول لي دخل المستخدم فالفورم ديال إضافة post للرابط لي كيمكن من إضافة post وملي كيتزاد كيعرض رسالة النجاح ثم كاين الكود لي كيمكن من استرجاع post كليكا عليه المستخدم بواسطة ل id ديالو وعرضو فواحد div لي عندها id post منبعد كاين الكود لي كيرسل ل id ديال post اختارو المستخدم للرابط لي كيمكن من حدف post الكود ديال الملف هو :

                                      
                                        $(document).ready(function(){
    $.get('http://localhost/slim-blog/public/api/posts',function(data){
        var output = "<ul class='list-group'>";
                $.each(JSON.parse(data),function(index,post){
                    output += '<li class="list-group-item"><a onclick="view('+post.id+')" style="cursor:pointer;">' + post.title + '</a></li>';
                });
            output += "</ul>";
            $('#posts').html(output);
    });
    $.get('http://localhost/slim-blog/public/api/categories',function(data){
        var output = "<ul class='list-group'>";
                $.each(JSON.parse(data),function(index,category){
                    output += '<li class="list-group-item"><a href="http://localhost/slim-blog/public/api/category/'+category.id+'">' + category.title + '</a></li>';
                });
            output += "</ul>";
            $('#categories').html(output);
    });
    $.get('http://localhost/slim-blog/public/api/categories',function(data){
        var output = "<select class='form-control' id='category_id'>";
            $.each(JSON.parse(data),function(index,category){
                output += '<option value="'+category.id+'">'+category.title+'</option>';
            });
        output += "</select>";
        $('#select_id').html(output);
    });
    $('#add-post').submit(function(e){
        e.preventDefault();
        var title = $('#title').val();
        var category_id = $('#category_id').val();
        var body = $('#body').val();
        $.post('http://localhost/slim-blog/public/api/post/add',{
            title : title,
            body : body ,
            category_id : category_id
        }).done(function(data){
            alert(data);
            window.location.href = "http://localhost/slim-blog/";
        });
    });
});
function view(id){
    $.get('http://localhost/slim-blog/public/api/post/'+id,function(data){
        var output = "<div class='post'>";
            $.each(JSON.parse(data),function(index,post){
                output += '<h3 class="text-info">'+ post.title + '<h3>';
                output += '<p class="well">'+ post.body +'</p>';
                output += '<p><a style="cursor:pointer;" class="btn btn-warning">Modifier</a>|<a onclick="DeletePost('+post.id+')" style="cursor:pointer;" class="btn btn-danger">Supprimer</a></p>'
                output += '<input type="hidden" value="'+post.id+'" id="post_id"/>';
        });
        output += "</div>";
        $('#post').html(output);
    });
}
function DeletePost(id){
    $.post('http://localhost/slim-blog/public/api/post/delete',{
        id:id
    }).done(function(data){
        alert(data);
        location.reload();
    });
}
                                      
                                    

4- الملف add.php


فالمجلد ديال لمشروع ديالنا لي هو slim-blog زيد ملف جديد سميه add.php هادا الملف لي غادي تكون فيه الفورم لي كتمكن من إضافة post لقاعدة البيانات بواسطة لكود jquery لي زدنا فالملف main.js ولي كيرسل الحقول لي دخل المستخدم للرابط ديال الإضافة الكود ديال الملف هو :

                                        
                                            <?php include('public/includes/header.php');?>
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <h1 class="text-info">Ajouter un post</h1>
        <form action="#" id="add-post">
            <div class="form-group" id="select_id">

            </div>
            <div class="form-group">
                <label for="title">Titre:</label>
                <input type="text" class="form-control" placeholder="Titre" id="title">
            </div>
            <div class="form-group">
                <label for="body">Déscription:</label>
                <textarea name="" id="body" cols="30" rows="10" class="form-control" placeholder="Déscription"></textarea>            
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-success" value="Valider">
            </div>
        </form>
    </div>
</div>
<?php include('public/includes/footer.php');?>
                                        
                                    

5- الملف index.php و htaccess.


فالمجلد public زيد ملف جديد سميه htaccess. فيه غادي يكون الكود لي كيجعل index.php هي الملف الرئيسي ديالنا منبعد فالمجلد الرئيسي لي هو slim-blog زيد ملف جديد سميه index.php فيه code html لي عبارة على les divs ب les ids ديالهم فين غادي نعرضو les posts وles catégories ونعرضو post اختارو المستخدم والمهمة ديالك هي تكمل تعديل post وتزيد ملف الفورم ديال إضافة وتعديل catégorie وعرض catégorie الكود ديال الملف هو :

                                        
                                            // .htaccess code

<IfModule mod_rewrite.c>
   RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

//index.php code
<?php include('public/includes/header.php');?>
    <div class="container">
      <div class="starter-template">
        <div class="row">
            <div class="col-md-4 col-md-offset-1">
                <h3 class="text-info">Posts</h3>
                <div id="posts"></div>
            </div>
            <div class="col-md-4 col-md-offset-1">
                <h3 class="text-info">Catégories</h3>
                <div id="categories"></div>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div id="post"></div>
            </div>
        </div>
      </div>
    </div><!-- /.container -->
<?php include('public/includes/footer.php');?>
                                        
                                    

كلمات مفاتيح :