লারাভেল ও জেকুয়েরী CRUD টিউটোরিয়াল

ওয়েব ডেভেলপমেন্ট করছেন আর প্রজেক্ট করতে গিয়ে জেকুয়েরীতে কোড করেনি এমন ডেভেলপার খুবই কমই পাওয়া যাবে। জনপ্রিয় কিছু জেএস ফ্রেমওয়ার্ক থাকলেও অনেকে এখনও জেকুয়েরীতে কোড করতে ভালবাসেন। তাই আজ লিখতে বসে গেলাম লারাভেল ও জেকুয়েরী দিয়ে কি করে একটি Ajax CRUD তৈরী করা যায়। আজ আমি আপনাদের সম্পূর্ণ বিষয়টি হাতে কলমে দেখাবো।

আমি ধরে নিচ্ছি যে, আপনারা যারা আজকের পোষ্টটি পড়ছেন তারা সবাই লারাভেল ও জেকুয়েরী সম্পর্কে বেসিক জ্ঞান রাখেন।

এই টিউটোরিয়ালটিতে আমরা লারাভেল এর ৫.৮ ভার্সন ও একটি কন্টাক্ট টেবিল নিয়ে কাজ করবো। যেখানে ৪টি ফিল্ট রয়েছে id, name, email, phone। আপনারা এই টিউটোরিয়ালটি ফলো আপনি চাইলে এই একই পদ্ধতি লারাভেল ৫.০-৫.৮ পর্যন্ত যেকোন ভার্সনে কাজ করতে পারবেন।

প্রথমে আমাদের সম্পূর্ণ CRUD অপারেশনটি তৈরী করতে যে রাউটগুলোর দরকার হবে তা তৈরী করে নিচ্ছি।

Route::get('admin/contacts', 'ContactController@getIndex');
Route::get('admin/contacts/data', 'ContactController@getData');
Route::post('admin/contacts/store', 'ContactController@postStore');
Route::post('admin/contacts/update', 'ContactController@postUpdate');
Route::post('admin/contacts/delete', 'ContactController@postDelete');

এখন Contact.php নামে একটি মডেল তৈরী করি।

<?php namespace App;
use Illuminate\Database\Eloquent\Model;

class Contact extends Model
{

    public $timestamps = false;
    protected $table = 'contacts';
    protected $fillable = ['name', 'email', 'phone'];
} 

এখন আমাদের রাউট অনুযায়ী ContactController নামে data fetch, insert, update, delete করার জন্য একটি কন্ট্রোলার তৈরী করি।

<?php
namespace App\Http\Controllers;
use App\Contact;
use Illuminate\Http\Request;

class ContactController extends Controller
{
    public function getIndex()
    {
        return view('contact-jquery');
    }
    public function getData()
    {
        return Contact::all();
    }
    public function postStore(Request $r)
    {
        Contact::create($r->all());
        return ['success'=>true,'message'=>'Inserted Successfully'];
    }
    public function postUpdate(Request $r)
    {
        if($r->has('id')){
            Contact::find($r->input('id'))->update($r->all());
            return ['success'=>true,'message'=>'Updated Successfully'];
        }
    }
    public function postDelete(Request $r)
    {
        if($r->has('id')){
            Contact::find($r->input('id'))->delete();
            return ['success'=>true,'message'=>'Deleted Successfully'];
        }
    }
}

আমাদের কন্ট্রোলার ও মডেল তৈরীর কাজ শেষ। এখন আমাদের ভিউ নিয়ে কাজ করতে হবে। এখন আমাদের কন্ট্রোলারের getIndex মেথড অনুযায়ী আমাদের ভিউ ফোল্ডারে একটি contact-jquery.blade.php ফাইল তৈরী করুন এবং তাতে আমরা ইউআই (UI) ও জেকুয়েরী (jQuery) এর কোড এক সাথে করব। আপনার চাইলে আলাদা জেএস ফাইল তৈরী করে লিংক করে কাজ করতে পারেন।

@extends('app')
@section('content')
    <div class="container">

        <div class="col-md-12">
            <div class="clearfix">
                <span>Laravel - jQuery CRUD</span>
                <a class="btn btn-success btn-sm pull-right" onclick="create()">Add New</a>
            </div>

            <!--data listing table-->
            <table class="table table-bordered table-striped table-condensed">
                <thead>
                <tr>
                    <td>ID</td>
                    <td>NAME</td>
                    <td>EMAIL</td>
                    <td>PHONE</td>
                    <td>ACTION</td>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
            <!--data listing table-->

        </div>

    </div>

    <!-- modal -->
    <div class="modal fade" id="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">&times;
                    </button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id">
                    <div class="form-group">
                        <label>Name</label>
                        <input class="form-control input-sm" type="text" name="name">
                    </div>
                    <div class="form-group">
                        <label>E-mail</label>
                        <input class="form-control input-sm" type="email" name="email">
                    </div>
                    <div class="form-group">
                        <label>Phone</label>
                        <input class="form-control input-sm" type="text" name="phone">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                    <button type="button" class="btn btn-primary btnSave"
                            onClick="store()">Save
                    </button>
                    <button type="button" class="btn btn-primary btnUpdate"
                            onClick="update()">Update
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->



    <script>
        var adminUrl = '';
        var _modal = $('#modal');
        var btnSave = $('.btnSave');
        var btnUpdate = $('.btnUpdate');
        $.ajaxSetup({
            headers: {'X-CSRF-Token': ''}
        });
        function getRecords() {
            $.get(adminUrl + '/contacts/data')
                .success(function (data) {
                    var html='';
                    data.forEach(function(row){
                        html += '<tr>'
                        html += '<td>' + row.id + '</td>'
                        html += '<td>' + row.name + '</td>'
                        html += '<td>' + row.email + '</td>'
                        html += '<td>' + row.phone + '</td>'
                        html += '<td>'
                        html += '<button type="button" class="btn btn-xs btn-warning btnEdit" title="Edit Record" >Edit</button>'
                        html += '<button type="button" class="btn btn-xs btn-danger btnDelete" data-id="' + row.id + '" title="Delete Record">Delete</button>'
                        html += '</td> </tr>';
                    })
                    $('table tbody').html(html)
                })
        }
        getRecords()
        function reset() {
            _modal.find('input').each(function () {
                $(this).val(null)
            })
        }
        function getInputs() {
            var id = $('input[name="id"]').val()
            var name = $('input[name="name"]').val()
            var email = $('input[name="email"]').val()
            var phone = $('input[name="phone"]').val()
            return {id: id, name: name, email: email, phone: phone}
        }
        function create() {
            _modal.find('.modal-title').text('New Contact');
            reset();
            _modal.modal('show')
            btnSave.show()
            btnUpdate.hide()
        }
        function store(){
            if(!confirm('Are you sure?')) return;
            $.ajax({
                method: 'POST',
                url: adminUrl + '/contacts/store',
                data: getInputs(),
                dataType: 'JSON',
                success: function () {
                    console.log('inserted')
                    reset()
                    _modal.modal('hide')
                    getRecords();
                }
            })
        }
        $('table').on('click', '.btnEdit', function () {
            _modal.find('.modal-title').text('Edit Contact')
            _modal.modal('show')
            btnSave.hide()
            btnUpdate.show()
            var id = $(this).parent().parent().find('td').eq(0).text()
            var name = $(this).parent().parent().find('td').eq(1).text()
            var email = $(this).parent().parent().find('td').eq(2).text()
            var phone = $(this).parent().parent().find('td').eq(3).text()
            $('input[name="id"]').val(id)
            $('input[name="name"]').val(name)
            $('input[name="email"]').val(email)
            $('input[name="phone"]').val(phone)
        })
        function update(){
            if(!confirm('Are you sure?')) return;
            $.ajax({
                method: 'POST',
                url: adminUrl + '/contacts/update',
                data: getInputs(),
                dataType: 'JSON',
                success: function () {
                    console.log('updated')
                    reset()
                    _modal.modal('hide')
                    getRecords();
                }
            })
        }
        $('table').on('click', '.btnDelete', function () {
            if(!confirm('Are you sure?')) return;
            var id = $(this).data('id');
            var data={id:id}
            $.ajax({
                method: 'POST',
                url: adminUrl + '/contacts/delete',
                data:data,
                dataType: 'JSON',
                success: function () {
                    console.log('deleted');
                    getRecords();
                }
            })
        })
    </script>

@endsection

টেক্স টিউটোরিয়াল পড়ে যদি কোন সমস্যা মনে হয় এটির ভিডিও টিউটোরিয়ালটি দেখে নিতে পারেন।

লারাভেল ও জেকুয়েরী CRUD টিউটোরিয়াল

আশা করছি আজকের এই পোষ্টটি আপনাদের উপকারে আসবে। অন্যদের শেখার সুযোগ দিতে পোষ্টটি আপনার ফেইসবুক কিংবা সোস্যাল মিডিয়াতে শেয়ার করতে পারেন।