লারাভেল ও ভিউ জেএস CRUD টিউটোরিয়াল

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

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

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

প্রথমে আমি একটি কন্ট্রোলার রাউট তৈরী করে নিচ্ছি। (বি:দ্র কন্ট্রোলার রাউট যদি আপনার নতুন লারাভেল ভার্সনে কাজ না করে সেই ক্ষেত্রে মেনুয়াল রাউট তৈরী করে নিতে পারেন।)

Route::controller('admin/contacts','ContactController');

যদি কন্ট্রোলার রাউট কাজ না করে মেনুয়াল রাউট

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 __construct()
	{
		
	}
	
	public function getIndex()
	{
		return view('admin.contacts');
	}

    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 মেথড অনুযায়ী আমাদের ভিউ ফোল্ডারের মধ্যে একটি admin ফোল্ডার তৈরী করে তাতে একটি contact.blade.php ফাইল তৈরী করুন এবং তাতে আমরা ইউআই ও জেএস এর কোড এক সাথে করব। আপনার চাইলে আলাদা জেএস ফাইল তৈরী করে লিংক করে কাজ করতে পারেন।

@extends('app')

@section('content')
    <div class="container" id="app">
        <div class="row">
            <div class="col-md-12">
                
                <div class="clearfix">
                    <h3>Laravel Vue Js CRUD Tutorial</h3>
                    <a class="btn btn-success btn-sm pull-right" @click="create()">Add New</a>
                </div>
                
                <table class="table table-bordered table-condensed">
                    <tr>
                        <td>ID</td>
                        <td>NAME</td>
                        <td>EMAIL</td>
                        <td>PHONE</td>
                        <td>ACTION</td>
                    </tr>
                    <tr v-for="row in data">
                        <td>@</td>
                        <td>@</td>
                        <td>@</td>
                        <td>@</td>
                        <td>
                            <button @click="edit(row)"
                                    type="button"
                                    class="btn btn-xs btn-warning"
                                    title="Edit Record">Edit</button>
                            <button @click="deleteRecord(row)"
                                    type="button"
                                    class="btn btn-xs btn-danger"
                                    title="Delete Record">Del</button>
                        </td>
                    </tr>
                </table>

                <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">@Edit Contact</h4>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label>Name</label>
                                    <input class="form-control input-sm" type="text" v-model="Contact.name">
                                </div>
                                <div class="form-group">
                                    <label>E-mail</label>
                                    <input class="form-control input-sm" type="email" v-model="Contact.email">
                                </div>
                                <div class="form-group">
                                    <label>Phone</label>
                                    <input class="form-control input-sm" type="number" v-model="Contact.phone">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                                <button v-if="isInsert" type="button" class="btn btn-primary"
                                        @click="store(Contact)">Save
                                </button>
                                <button v-if="!isInsert" type="button" class="btn btn-primary"
                                        @click="update(Contact)">Update
                                </button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div><!-- /.modal -->

            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>

    <script>
        var csrtToken = '';
        var adminUrl='';

        var app = new Vue({
            el:'#app',
            data:{
                data:[],
                isInsert:true,
                Contact:{name: null, email: null, phone: null}
            },
            created:function(){
                this.init()
            },
            methods:{
                init:function(){
                    this.$http.get(adminUrl + '/contacts/data')
                        .then(function (res) {
                            this.data = res.data
                        })
                },
                create:function(){
                    this.isInsert = true,
                        this.Contact = {}
                    $('#modal').modal()
                },
                store:function(data){
                    if (!confirm('Are you sure?')) return;
                    data._token = csrtToken;
                    this.$http.post(adminUrl + '/contacts/store', data)
                        .then(function (res) {
                            this.init();
                            $('#modal').modal('hide');
                            this.Contact = {}
                        })
                },
                edit:function(row){
                    this.isInsert = false,
                        this.Contact = row;
                    $('#modal').modal();
                },
                update:function(data){
                    if (!confirm('Are you sure?')) return;
                    data._token = csrtToken;
                    this.$http.post(adminUrl + '/contacts/update', data)
                        .then(function (res) {
                            this.init()
                            $('#modal').modal('hide');
                            this.Contact = {}
                        })
                },
                deleteRecord:function(row){
                    if (!confirm('Are you sure?')) return;
                    row._token = csrtToken;
                    this.$http.post(adminUrl + '/contacts/delete', row)
                        .then(function (res) {
                            this.init()
                        })
                }
            }
        })

    </script>
@endsection

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

লারাভেল ও ভিউ জেএস CRUD টিউটোরিয়াল

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