كيفاش تصاوب Rest Api ب laravel الجزء الأول


فهاد الدرس الجديد من سلسلة laravel غادي نشوفو كيفاش نقادو rest api ب laravel بسيط للمبتدئين ولي كتمكن من إضافة معلومات لقاعدة البيانات و استرجاعها على شكل json وعرضها فالصفحة الرئيسية باستخدام ajax المشروع بسيط عبارة عن contact app فشنو غادي نستافد من هاد الدرس :
  1. غادي نتعلم كيفاش نسترجع المعلومات من قاعدة البيانات على شكل json objects .
  2. غادي نتعلم نعرض هاد المعلومات فالصفحة الرئيسية بإستعمال ajax.
  3. المطلوب منك تكون عندك دراية مسبقة بأساسيات laravel jquery و ajax.

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

1- إنشاء قاعدة البيانات

أول شيء غادي تديرو هو تثبيت composer لي غادي يمكنك من تثبيت laravel يمكنلك  تحملو من الموقع الرسمي من هنا من بعد غادي تفتح cmd غادي نكتب الأمر:
cd c:\xampp\htdocs يلا كنتي خدام ب xampp
كنتي خدام ب wamp غادي نكتب الأمر:
cd c:\wamp\www من بعد غادي تديرالأمر
composer create-project --prefer-dist laravel/laravel laravel-rest-api
لإسم ديال المشروع هو laravel-rest-api من بعد ما يتزاد المجلد ف wamp/www أو xampp/htdocs غادي تزيد قاعدة بيانات ف phpmyadmin وتسميها contacts فيها جدول واحد سميتو contacts الكود ديالها هو :

                                CREATE TABLE `contacts` (
  `id` int(10) UNSIGNED NOT NULL,
  `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `tel` int(11) NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

ALTER TABLE `contacts`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `contacts`
  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=0;
                            

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

من بعد فالملف env. لي فالمجلد الرئيسي ديال المشروع كنظيف عليه التغييرات لي غادي يمكنو باش نتصل بقاعدة البيانات الكود لي تغير هو :

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

3- الملف ContactsController.php

كنمشي ل app/Http/Controllers كنزيد ملف جديد كنسميه ContactsController.php لي غادي تكون فيه fonction index لي كتسترجع les contacts من قاعدة البيانات وكترسلهم للملف index لي غادي يكون الصفحة الرئيسية ديالنا  على شكل json objects فين غادي يتعرضوا les contacts كاملين لي عندنا ولي غادي نزيدوه من بعد ثم كاين ل fonction create لي كتوجه المستخدم للملف الخاص بإضافة contact ثم fonction store لي كتمكن من إضافة contact لقاعدة البيانات من بعد مكتستقبل المعلومات الخاصة به من الفورم لي غادي يكون فالملف add ولي غادي نزيدوه من بعد منبعد مكيتزاد كترجعوا على شكل json object  ثم كاين ل fonction edit لي كتوجه المستخدم للملف الخاص بتعديل contact منبعد مكتسترجع ل contact لي اختار المستخدم بواسطة ل id ديالو وكترسلو للفورم لي غادي تكون فالملف update ثم كاين fonction update لي كتعدل المعلومات الخاصة ب contact من بعد مكتستقبل المعلومات الخاصة به من الفورم لي غادي يكون فالملفupdate ثم كاين ل fonction destroy لي كتسترجع contact واحد بواسطة ل id وكتمسحو  من قاعدة البيانات الكود ديال الملف هو :

                                <?php

namespace App\Http\Controllers;
use Validator;
use Illuminate\Http\Request;
use App\Contact;
class ContactsController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
        $contacts = Contact::all();
        return response()->json($contacts);
    }
    public function create(){
        return view('add');
    }
    public function store(Request $request)
    {
        //
        $validator = Validator::make($request->all(),[
            'name' => 'required',
            'tel' => 'required'
        ]);
        if($validator->fails()){
            $response = array('response'=>$validator->messages(),'success'=>false);
            return $response;
        }else{
            $contact = new Contact();
            $contact->name = $request->name;
            $contact->tel = $request->tel;
            $contact->save();
            return response()->json($contact);
        }
    }
    public function edit($id)
    {
        //
        $contact = Contact::find($id);
        return view('update',compact('contact'));
    }
    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
        $contact = Contact::find($id);
        return response()->json($contact);
    }
    public function update(Request $request, $id)
    {
        //
        $validator = Validator::make($request->all(),[
            'name' => 'required',
            'tel' => 'required'
        ]);
        if($validator->fails()){
            $response = array('response'=>$validator->messages(),'success'=>false);
            return $response;
        }else{
            $contact = Contact::find($id);
            $contact->name = $request->name;
            $contact->tel = $request->tel;
            $contact->update();
            return response()->json($contact);
        }
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
            $contact = Contact::find($id);
            $contact->delete();
            $response = array('response'=> 'Contact Supprimé','success'=>true);
            return $response;
    }
}

                            

4- الملف Contact.php

من بعد ف app كنزيد ملف كنسميه Contact.php ولي عبارة عن model فيه  جدول ديال les champs لي غادي نزيدو ونعدلو الكود ديال الملف هو:

                                    <?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Contact extends Model
{
    //
    protected $fillable = [
        'name', 'tel'
    ];

}

                                

5- الملف layouts/index.blade.php

فالمجلد views زيد مجلد جديد سميه layouts فيه زيد ملف واحد  سميه index.blade.php هادا هو الملف لي غادي يربط الصفحات ديالنا بملفات css و js وغادي يكون هو الملف الأساسي ديال كل الصفحات الكود ديال الملف هو :

                                    <!DOCTYPE html>
<html lang="ar">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>@yield('title')</title>
    @yield('styles')
    <!-- Bootstrap -->
    <link href="{{URL::to('css/bootstrap.css')}}" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    @yield('header')
    <div class="container">
        @yield('content')
    </div>
    @yield('footer')
    @yield('scripts')
    <script src="{{URL::to('js/bootstrap.min.js')}}"></script>
  </body>
</html>
                                


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

بحث في الموقع


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