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


فهاد الجزء الثاني من كيفاش تصاوب Rest Api ب laravel غادي نكملو الملفات لي بقاو ولي غادي تكون فيهم الفورم لي كتمكن من إضافة وتعديل contact والملف لي غادي يكون هو الصفحة الرئيسية ديالنا فين غادي يتعرضوا les contacts ديالنا. 

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

1- الملف header.blade.php و الملف footer.blade.php

فالمجلد views زيد مجلد جديد سميه includes فيه زيد 2 ملفات واحد header.blade.php وآخر footer.blade.php ف header.blade.php كاين القائمة ديالنا لي كتمكن من التنقل بين الصفحات وف footer.blade.php غادي يكون ل footer ديالنا الكود ديال الملفات هو:

                                //header.blade.php code

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Rest Contacts App</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="{{URL('/')}}">Accueil</a></li>
        <li><a href="{{route('contacts.create')}}">Ajouter</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

//footer.blade.php code
                            

2- الملف add.blade.php

دائما فالمجلد views فيه زيد ملف جديد سميه add.blade.php هادا الملف لي فيه الكود لي كيمكن المستخدم من إضافة contact من بعد ما كيدخل المعلومات الخاصين به فل form فكل input عندها id خاص بها والفورم حتى هو وبالكود jquery ملي لفورم كتندارلو submit كنسترجع القيم لي دخل المستخدم فالحقول منبعد كنعطيهم لل fonction addContact لي كترسلهم لل url لي كيضيف مستخدم جديد ف laravel ملي كتلقى ال method post تلقائيا كتعرف بلي ل fonction هي store لي عندنا فل controller ContactsController ومنبعد مكيتزاد وكترجعنا المعلومات الخاصة به كنعرض إسمو مع رسالة نجاح الإضافة وتوجيه للصفحة الرئيسية الكود ديال الملف هو :

                                @extends('layouts.index')

@section('title')
   Ajouter un contact
@endsection
@section('styles')

@endsection
@section('header')
    @include('includes.header')
@endsection
@section('content')
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-default">
                <h2 class="text-info text-center">Ajouter un contact</h2>
                <hr>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3">
                        <form id="add-contact">
                            <div class="form-group">
                                <label for="name">Nom & Prénom*</label>
                                <input type="text" class="form-control" id="name" name="name" placeholder="Nom & Prénom" required="">
                            </div>
                            <div class="form-group">
                                <label for="tel">Tél*</label>
                                <input type="tel" name="tel" id="tel" class="form-control" placeholder="Téléphone" required="">
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn-success">Ajouter</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('footer')
    @include('includes.footer')
@endsection
@section('scripts')
     <script src="{{URL::to('js/jquery.js')}}"></script>
     <script>
        $(document).ready(function(){
            $('#add-contact').on('submit',function(e){
                e.preventDefault();
                var name = $('#name').val();
                var tel = $('#tel').val();
                addContact(name,tel);
            }); 
            function addContact(name,tel){
                $.ajax({
                    method:'POST',
                    url:'http://localhost/rest-laravel-api/public/contacts',
                    data:{name:name,tel:tel}
                }).done(function(contact){
                    alert('Contact :' + contact.name + ' ajouté avec succés');
                    window.location = 'http://localhost/rest-laravel-api/public/';
                });
            }
        });
    </script>
@endsection
                            

3- الملف update.blade.php

دائما فالمجلد views فيه زيد ملف جديد سميه update.blade.php هادا الملف لي فيه الكود لي كيمكن المستخدم من تعديل contact من بعد ما كيدخل المعلومات الجديدة الخاصين به فل form فنفس الطريقة باش درنا الإضافة خدمنا التعديل التغيير الوحيد هو كنحدد لل laravel ل method لي هي put باش كتعرف بلي كندير تعديل وكنزيد معاها ل id ديال لcontact فل url ولي كيجيني مع المعلومات الخاصة بل contact لي اختار المستخدم ولي بحثنا عليه بل id ديالو من ل fonction edit لي كاينة فل controller ContactsController الكود ديال الملف هو :

                                @extends('layouts.index')

@section('title')
   Ajouter un contact
@endsection
@section('styles')

@endsection
@section('header')
    @include('includes.header')
@endsection
@section('content')
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-default">
                <h2 class="text-info text-center">Modifier un contact</h2>
                <hr>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3">
                        <form id="add-contact">
                            <div class="form-group">
                                <label for="name">Nom & Prénom*</label>
                                <input type="text" class="form-control" id="name" name="name" placeholder="Nom & Prénom" required="" value="{{$contact->name}}">
                            </div>
                            <div class="form-group">
                                <label for="tel">Tél*</label>
                                <input type="tel" name="tel" id="tel" class="form-control" placeholder="Téléphone" required="" value="{{$contact->tel}}">
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn-danger">Modifier</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('footer')
    @include('includes.footer')
@endsection
@section('scripts')
     <script src="{{URL::to('js/jquery.js')}}"></script>
     <script>
        $(document).ready(function(){
            $('#add-contact').on('submit',function(e){
                e.preventDefault();
                var name = $('#name').val();
                var tel = $('#tel').val();
                updateContact(name,tel);
            }); 
            function updateContact(name,tel){
                $.ajax({
                    method:'POST',
                    url:'http://localhost/rest-laravel-api/public/contacts/'+{{$contact->id}},
                    data:{_method:'PUT',name:name,tel:tel}
                }).done(function(contact){
                    alert('Contact :' + contact.name + ' modifié avec succés');
                    window.location = 'http://localhost/rest-laravel-api/public/';
                });
            }
        });
    </script>
@endsection
                            

4- الملف index.blade.php

فالمجلد views زيد ملف جديد سميه index.blade.php هادي هي الصفحة الرئيسية ديالنا لي فيها العرض ديال كل les contacts لي عندنا فقاعدة البيانات و لي كنستقبلهم من ل fonction index لي ف ContactsController فالفرق هنا هو انني كنستقبلهم على شكل json  وبواسطة ل fonction getContacts كنعرضهم ف liste ul لي عندها ل id contacts وبفضل داك ل id كنزيدهوم فيها على شكل li  وكنخدم ب foreach باش كنعرض كل معلومة فبلاصتها وكاين الروابط لي كتمكن من تعديل أو حدف contact لي معروضين ولي ملي كنكليكي على ل id delete-contact لي هو خاص برابط الحدف كنفد ل fonction deleteContact ولي كتاخد ل id ديال ل contact وكترسلو للرابط وكتعلم laravel بلي ل method هي delete الكود ديال الملف هو:


                                    @extends('layouts.index')

@section('title')
   Rest Contacts App
@endsection
@section('styles')

@endsection
@section('header')
    @include('includes.header')
@endsection
@section('content')
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-default">
                <h2 class="text-info text-center">Liste contacts</h2>
                <ul class="list-group" id="contacts">
                </ul>
            </div>
        </div>
    </div>
@endsection
@section('footer')
    @include('includes.footer')
@endsection
@section('scripts')
     <script src="{{URL::to('js/jquery.js')}}"></script>
     <script>
        $(document).ready(function(){
            getContacts();
            function getContacts(){
                $.ajax({
                    url:'http://localhost/rest-laravel-api/public/contacts',
                }).done(function(data){
                    var output = '';
                    $.each(data,function(key,value){
                        output+= '<li class="list-group-item text-center"><strong class="text-primary">'+ value.name + ' - </strong> Tél : <strong class="text-danger">' + value.tel + '</strong> <a href="http://localhost/rest-laravel-api/public/contacts/'+value.id+'/edit" class="text-warning">Modifier</a> <strong class="text-primary">|</strong> <a href="#" class="text-danger" id="delete-contact" data-id="'+value.id+'">Supprimer</a></li>';
                    });
                    $('#contacts').append(output);
                });
            }
            $('body').on('click','#delete-contact',function(e){
                e.preventDefault();
                var id = $(this).data('id');
                deleteContact(id);
            });
            function deleteContact(id){
                $.ajax({
                    method:'POST',
                    url:'http://localhost/rest-laravel-api/public/contacts/'+id,
                    data:{_method:'DELETE'}
                }).done(function(data){
                    alert(data.response);
                    location.reload();
                });
            }
        });
    </script>
@endsection
                                

5- الملف web.php

يلا كنتي تليشارجيتي ل version < 5.2 ديال laravel غادي تمشي للمجلد app/Http وفالملف routes.php كاين les routes ويلا تليشارجيتي version > 5.2 غادي تلقى مجلد سميتو routes فيه ملف سميتو web.php فيه كاين les routes وغادي تدير عليه تغييرات غادي تزيد les routes ديالنا ولي فيهم محددين les urls باش خدمنا ولي كيديو ل les fonctions لي زدنا ف  controlleur ديالنا الكود ديال الملف بعد التغيير هو :

                                    <?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/',function(){
    return view('index');
});
Route::resource('/contacts','ContactsController');

                                


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

بحث في الموقع


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