CRUD application ب laravel & react الجزء الأول


فهاد ال projet الجديد لي عبارة على crud application ب laravel و react غادي نشوفوا كيفاش نقادو contact app لي هي application بسيطة كتزيد كتعدل وكتمسح des contacts من قاعدة البيانات بإستعمال laravel & react.

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

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

أول حاجة زيد projet جديد سميه لي بغيتي باش تحول من vuejs لي كتجي مع laravel ل react js لي غادي نخدمو بها فتح ل projet ديالك ف cmd ودير هاد ل commande :

php artisan preset react

منبعد غادي نزيدو ل modules لي غادي نخدموا بهم دير هاد ل commande :

npm install

من بعد دير ل commande :

npm run dev 

من بعد دير ل commande :

npm run watch 

من بعد غادي تزيد قاعدة بيانات سميها contacts فيها زيد table contacts لي فيها الحقول name و tel.

منبعد فالملف env. كندير la connexion مع la base de données.

التعديلات لي غادي تزيد فالملف env. هي :

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

2- إضافة ل contactscontroller

منبعد زيد controller جديد سميه ContactsController فيه les fonctions لي غادي نحتاجوا عندي :

- index كنسترجع بها les contacts كاملين sous forme json .

- create لي كنزيد بها contact فقاعدة البيانات.

- edit لي كتاخذ ل id ديال ل contact لي غادي نعدل و كنسترجعوه sous forme json.

- update لي كنعدل بها contact.

- delete لي كنمسح بها contact من قاعدة البيانات.

الكود ديال الملف ContactsController هو :


                                //
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Contact;

class ContactsController extends Controller
{
    //
    public function index(){
        $contacts = Contact::all();
        return response()->json($contacts);
    }
    public function create(Request $request)
    {
        $contact = Contact::create([
            'name' => $request->name,
            'tel' => $request->tel,
        ]);
        return response()->json($contact);
    }
    public function edit($id)
    {
        $contact = Contact::find($id);
        return response()->json($contact);
    }
    public function update(Request $request,$id)
    {
        $contact = Contact::find($id)->update([
            'name' => $request->name,
            'tel' => $request->tel,
        ]);
        return response()->json($contact);
    }
    public function delete($id)
    {
        $contact = Contact::find($id)->delete();
        return response()->json($contact);
    }
}
                            

3- إضافة routes لل app ديالنا

من بعد غادي نزبدو les routes ديالنا حيت غادي نخدموا بل api غادي نمشيو للملف api.php لي كاين ف dossier routes.

فيه غادي نزيدو les routes ديالنا لي كيمكنوا من استرجاع les contacts إضافتهم تعديلهم ومسحهم.

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

                                //
<?php

use Illuminate\Http\Request;


Route::get('/contacts', 'ContactsController@index');
Route::post('/contact/create','ContactsController@create');
Route::get('/contact/{id}/edit', 'ContactsController@edit');
Route::put('/contact/{id}/update', 'ContactsController@update');
Route::delete('/contact/{id}/delete', 'ContactsController@delete');
                            

4- إضافة routes لل app ديالنا تتمة

فالملف web.php لي فيه les routes أيضا غادي ندير تعديل فكنقول لل app بلي غادي نخدم ب les routes ديال react.

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

                                    //
<?php

Route::get('{reactRoutes}', function () {
    return view('welcome');
})->where('reactRoutes', '^((?!api).)*$');
                                

5- تعديل ل Contact.php

غادي نمشي للملف Contact.php لي هو ل Model وغادي نزيد فيه الكود لي كيمكن باش نزيد ل contacts بلا منطيح فواحد الخطأ لي سميتو Mass Assignment.

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

                                    //
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Contact extends Model
{
    //
    protected $guarded = [];
}
                                


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

بحث في الموقع


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