Twitter app ب laravel & react js الجزء الأول


فهاد ل projet الجديد غادي نشوفوا كيفاش نقادو Twitter App لي هي application كتمكن من إضافة des tweets لقاعدة البيانات فغادي نخدموا ب laravel مع react فهنا المهم ماشي هو ل app بقدر ما هو تعرف كيفاش تخدم ب laravel مع react منبعد ماشفنا قبل كيفاش نخدموا ب laravel و vuejs.

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

1- إضافة قاعدة البيانات

فغادي تزيد قاعدة بيانات جديدة سميها lareact أو لي بغيتي فعندنا 2 ديال les tables لي غادي نزيدوا من غير لي كيجيو مع laravel لي فيهم  ل users.

بالنسبة ل table لأولى لي هي posts ف structure ديالها هي هادي :

                                //
<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('user_id')->unsigned();
            $table->string('body',140);
            $table->timestamps();

            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}
                            

2- إضافة قاعدة البيانات تتمة

بالنسبة ل table الثانية لي غادي نزيدو هي follows ففيها غادي يكونوا les abonnés الخاصين بكل مستخدم ف structure ديالها هي هادي :

                                //
<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateFollowsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('follows', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('user_id')->unsigned();
            $table->integer('follower_id')->unsigned();
            $table->timestamps();

            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
            $table->foreign('follower_id')->references('id')->on('users')->onDelete('cascade');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('follows');
    }
}
                            

3- الإتصال بقاعدة البيانات

فهادشي سبق درناه قبل غادي تمشي ل fichier .env غادي تزيد قاعدة البيانات و بيانات الإتصال بها من بعد ف cmd غادي تدير ل commande :

php artisan migrate 

باش غادي يتزادو les tables فقاعدة البيانات.

فالكود لي غادي تدير عليه تعديل فل fichier .env هو :

                                //
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=lareact
DB_USERNAME=root
DB_PASSWORD=
                            

4- إضافة ل controller PostsController

فغادي تزيد controller سميه PostsController فيه  des fonctions لي فل index كنسترجع les tweets الخاصين بمستخدم مع les tweets ديال المتابعين لي متابعهم وكنسترجعهم مرتبين حسب تاريخ الإضافة.

منبعد عندي create لي فقط كتزيد tweet مع ل id ديال لمستخدم لي زادها ومنبعد كترجعنا ل id ديالها.

الكود ديال PostsController  هو

                                    //
<?php

namespace App\Http\Controllers;
use App\Post;
use App\Events\PostCreated;
use Illuminate\Http\Request;

class PostsController extends Controller
{
    //
    public function index(Request $request,Post $post){ 
        $allPosts = $post->whereIn('user_id',$request->user()->following()->pluck('users.id')->push(
            $request->user()->id
        ))->with('user');
        $posts = $allPosts->orderBy('created_at','DESC')->get();
        return response()->json([
            'posts' => $posts
        ]);
    }
    public function create(Request $request,Post $post){
        $tweetCreated = $request->user()->posts()->create([
            'body' => $request->body
        ]);
        return response()->json($post->with('user')->find($tweetCreated->id));
    }
}
                                

5- إضافة ل controller TimelineController

فغادي تزيد controller سميه TimelineController فيه  fonction index لي فيها كنسترجع الناس لي متابع ولي متابعين المستخدم لي connecté ولي كنرسلهم للصفحة الرئيسية.

فبالنسبة ل fonction following و followers غادي نزيدهم من بعد فل model User ولي هما لي كيمكنوا من استرجاع المتابعين فهنا فقط كنفذهم.

الكود ديال TimelineController هو :

                                    //
<?php

namespace App\Http\Controllers;
use Auth;
use Illuminate\Http\Request;

class TimelineController extends Controller
{
    //
    public function index(){
        $following = Auth::user()->following;
        $followers = Auth::user()->followers;
        return view('home',compact('following','followers'));
    }
}
                                


بحث في الموقع


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