CRUD application ب laravel & react الجزء الأول
imadbelasri
Laravel
LA
فهاد ال 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 = [];
}