Twitter app ب laravel & react js الجزء الأول
imadbelasri
Reactjs
RS
فهاد ل 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'));
}
}