Laravel এবং Vue.js দিয়ে একটি CRUD অ্যাপ তৈরি করা

এই টিউটোরিয়ালে আমরা একসাথে দেখি কিভাবে Laravel এবং Vue.js সহ একটি উদাহরণ CRUD অ্যাপের কোড লিখতে হয়।

La একক পৃষ্ঠা অ্যাপ্লিকেশন আমাদের DB-তে মৌলিক ক্রিয়াকলাপগুলির একটি চক্র সম্পূর্ণ করার অনুমতি দেবে: তৈরি করুন, পড়ুন, আপডেট করুন এবং মুছুন Vue.js , Vue রাউটার এবং লারাভেল ফ্রেমওয়ার্ক .

আজকাল, সবচেয়ে জনপ্রিয় JS ফ্রেমওয়ার্ক হল Angular JS এবং Vue JS। Angular JS এবং Vue JS খুবই ব্যবহারকারী-বান্ধব এবং সবচেয়ে জনপ্রিয় JS ফ্রেমওয়ার্ক। এটি পৃষ্ঠাটি রিফ্রেশ না করে এবং শক্তিশালী jquery বৈধতা ছাড়াই সমগ্র প্রকল্প বা অ্যাপ্লিকেশনের ব্যবস্থাপনা প্রদান করে।

Vue Laravel এর সাথে প্রি-প্যাকেজ করা হয় (এর সাথে লারাভেল মিক্স , উপর ভিত্তি করে একটি চমৎকার অথরিং টুল ওয়েবপ্যাক ) এবং ডেভেলপারদের ট্রান্সপিলার, কোড প্যাকেজ, সোর্স ম্যাপ বা আধুনিক ফ্রন্টএন্ড ডেভেলপমেন্টের অন্যান্য "নোংরা" দিকগুলি নিয়ে চিন্তা না করে জটিল একক পৃষ্ঠার অ্যাপ্লিকেশন তৈরি করা শুরু করতে দেয়৷

সার্ভারের প্রয়োজনীয়তা

পিএইচপি 7.4

লারাভেল 8.x

মাইএসকিউএল

লারাভেল প্রকল্পটি ইনস্টল করুন

প্রথমে, টার্মিনাল খুলুন এবং একটি নতুন লারাভেল প্রকল্প তৈরি করতে নিম্নলিখিত কমান্ডটি চালান:

composer create-project --prefer-dist laravel/laravel crud-spa

অথবা, আপনি যদি লারাভেল ইনস্টলারকে একটি কম্পোজার গ্লোবাল নির্ভরতা হিসাবে ইনস্টল করেন:

laravel new crud-spa

ডাটাবেস বিবরণ কনফিগার করুন:

ইনস্টলেশনের পর আপনার প্রোজেক্ট রুট ডিরেক্টরিতে যান, .env ফাইলটি খুলুন এবং ডাটাবেসের বিবরণ নিম্নরূপ সেট করুন:

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>

npm নির্ভরতা ইনস্টল করুন

ফ্রন্ট-এন্ড নির্ভরতাগুলি ইনস্টল করতে নিম্নলিখিত কমান্ডটি চালান:

npm install

এর পরে, ইনস্টল করুন দৃশ্য ,  ভ্যু-রাউটার  e vue-axios . Vue-axios Laravel ব্যাকএন্ড API কল করতে ব্যবহার করা হবে। টার্মিনালে নিম্নলিখিত কমান্ডটি চালান:

npm install vue vue-router vue-axios --save

মাইগ্রেশন, মডেল এবং কন্ট্রোলার তৈরি করুন

একটি বিভাগ টেমপ্লেট, মাইগ্রেশন এবং কন্ট্রোলার তৈরি করুন। এর জন্য নিম্নলিখিত কমান্ডটি চালান:

php artisan make:model Category -mcr

-এমসিআর  এই বিষয় একক কমান্ড সংশ্লেষণ ব্যবহার করে মডেল, মাইগ্রেশন এবং কন্ট্রোলার তৈরি করবে।

এখন, থেকে বিভাগ মাইগ্রেশন ফাইল খুলুন ডাটাবেস / মাইগ্রেশন এবং ফাংশনে কোড প্রতিস্থাপন করুন আপ() :

public function up()
{
    Schema::create('categories', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('title');
        $table->text('description');
        $table->timestamps();
    });
}

নিম্নলিখিত কমান্ড ব্যবহার করে ডাটাবেস স্থানান্তর করুন:

php artisan migrate

এখন, থেকে Category.php টেমপ্লেট খুলুনapp/Models  এবং ফাইলের কোডটি সম্পাদনা করুন model Category.php:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Category extends Model {

   use HasFactory;

   protected $fillable = ['title','description'];

}

?>

এর পরে, খুলুন CategoryController.php এবং সূচীতে কোড যোগ করুন, সঞ্চয় করুন, আপডেট করুন এবং মোছার পদ্ধতিগুলি নিম্নরূপ:

<?php

namespace App\Http\Controllers;

use App\Models\Category;
use Illuminate\Http\Request;

class CategoryController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $categories = Category::all(['id','title','description']);
        return response()->json($categories);
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $category = Category::create($request->post());
        return response()->json([
            'message'=>'Category Created Successfully!!',
            'category'=>$category
        ]);
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Models\Category  $category
     * @return \Illuminate\Http\Response
     */
    public function show(Category $category)
    {
        return response()->json($category);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Models\Category  $category
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Category $category)
    {
        $category->fill($request->post())->save();
        return response()->json([
            'message'=>'Category Updated Successfully!!',
            'category'=>$category
        ]);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\Category  $category
     * @return \Illuminate\Http\Response
     */
    public function destroy(Category $category)
    {
        $category->delete();
        return response()->json([
            'message'=>'Category Deleted Successfully!!'
        ]);
    }
}

Defiweb.php এ রুট শেষ করুন

ora defiতাদের শেষ routes ফাইলে web.php e api.php . ফোল্ডারে যান routes এবং web.php এবং api.php ফাইল খুলুন এবং নিম্নলিখিত আপডেট করুন routes:

routes/web.php

<?php
 
Route::get('{any}', function () {
    return view('app');
})->where('any', '.*');

routes/api.php

<?php
 
Route::resource('category',App\Http\Controllers\CategoryController::class)->only(['index','store','show','update','destroy']);

একটি Vue অ্যাপ তৈরি করুন

এই ধাপে, ডিরেক্টরিতে যান সম্পদ/ভিউ, ফাইল তৈরি করুন app.blade.php  এবং নিম্নলিখিত কোড যোগ করুন app.blade.php:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" value="{{ csrf_token() }}"/>
        <title>Laravel Vue CRUD App</title>
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
        <link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <div id="app">
        </div>
        <script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
    </body>
</html>

Vue অ্যাপের জন্য উপাদান তৈরি করুন

এই ধাপে, ফোল্ডারে যান resource/js, ফোল্ডার তৈরি করুন components  এবং নিম্নলিখিত ফাইলগুলি তৈরি করুন:

• View app
• Welcome.vue
• Category/List.vue
• Category/Add.vue
• Category/Edit.vue

অ্যাপ। vue  এটি আমাদের Vue অ্যাপের প্রধান ফাইল। Defiআমরা শেষ করব রাউটার-ভিউ  সেই ফাইলে। ফাইলে সমস্ত পাথ প্রদর্শিত হবে অ্যাপ। vue  .

ফাইলটি খুলুন Welcome.vue এবং সেই ফাইলে নিম্নলিখিত কোড আপডেট করুন:

<template>
    <div class="container mt-5">
        <div class="col-12 text-center">
            <h1>Laravel Vuejs CRUD</h1>
        </div>
    </div>
</template>

App.vue ফাইলটি খুলুন এবং কোডটি নিম্নরূপ আপডেট করুন:

<template>
    <main>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
                <router-link to="/" class="navbar-brand" href="#">Laravel Vue Crud App</router-link>
                <div class="collapse navbar-collapse">
                    <div class="navbar-nav">
                        <router-link exact-active-class="active" to="/" class="nav-item nav-link">Home</router-link>
                        <router-link exact-active-class="active" to="/category" class="nav-item nav-link">Category</router-link>
                    </div>
                </div>
            </div>
        </nav>
        <div class="container mt-5">
            <router-view></router-view>
        </div>
    </main>
</template>
 
<script>
    export default {}
</script>

তারপর, খুলুন resource / js / components / category / List.vue  এবং ফাইলে নিম্নলিখিত কোড যোগ করুন:

<template>
    <div class="row">
        <div class="col-12 mb-2 text-end">
            <router-link :to='{name:"categoryAdd"}' class="btn btn-primary">Create</router-link>
        </div>
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4>Category</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Title</th>
                                    <th>Description</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody v-if="categories.length > 0">
                                <tr v-for="(category,key) in categories" :key="key">
                                    <td>{{ category.id }}</td>
                                    <td>{{ category.title }}</td>
                                    <td>{{ category.description }}</td>
                                    <td>
                                        <router-link :to='{name:"categoryEdit",params:{id:category.id}}' class="btn btn-success">Edit</router-link>
                                        <button type="button" @click="deleteCategory(category.id)" class="btn btn-danger">Delete</button>
                                    </td>
                                </tr>
                            </tbody>
                            <tbody v-else>
                                <tr>
                                    <td colspan="4" align="center">No Categories Found.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"categories",
    data(){
        return {
            categories:[]
        }
    },
    mounted(){
        this.getCategories()
    },
    methods:{
        async getCategories(){
            await this.axios.get('/api/category').then(response=>{
                this.categories = response.data
            }).catch(error=>{
                console.log(error)
                this.categories = []
            })
        },
        deleteCategory(id){
            if(confirm("Are you sure to delete this category ?")){
                this.axios.delete(`/api/category/${id}`).then(response=>{
                    this.getCategories()
                }).catch(error=>{
                    console.log(error)
                })
            }
        }
    }
}
</script>

এর পরে, খুলুন  resource /js/components/category/Add.vue  এবং ফাইলে নিম্নলিখিত কোড আপডেট করুন:

<template>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4>Add Category</h4>
                </div>
                <div class="card-body">
                    <form @submit.prevent="create">
                        <div class="row">
                            <div class="col-12 mb-2">
                                <div class="form-group">
                                    <label>Title</label>
                                    <input type="text" class="form-control" v-model="category.title">
                                </div>
                            </div>
                            <div class="col-12 mb-2">
                                <div class="form-group">
                                    <label>Description</label>
                                    <input type="text" class="form-control" v-model="category.description">
                                </div>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">Save</button>
                            </div>
                        </div>                        
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"add-category",
    data(){
        return {
            category:{
                title:"",
                description:""
            }
        }
    },
    methods:{
        async create(){
            await this.axios.post('/api/category',this.category).then(response=>{
                this.$router.push({name:"categoryList"})
            }).catch(error=>{
                console.log(error)
            })
        }
    }
}
</script>

এর পরে, খুলুন  resource /js/components/category/Edit.vue  এবং ফাইলে নিম্নলিখিত কোড আপডেট করুন:

<template>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4>Update Category</h4>
                </div>
                <div class="card-body">
                    <form @submit.prevent="update">
                        <div class="row">
                            <div class="col-12 mb-2">
                                <div class="form-group">
                                    <label>Title</label>
                                    <input type="text" class="form-control" v-model="category.title">
                                </div>
                            </div>
                            <div class="col-12 mb-2">
                                <div class="form-group">
                                    <label>Description</label>
                                    <input type="text" class="form-control" v-model="category.description">
                                </div>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">Update</button>
                            </div>
                        </div>                        
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"update-category",
    data(){
        return {
            category:{
                title:"",
                description:"",
                _method:"patch"
            }
        }
    },
    mounted(){
        this.showCategory()
    },
    methods:{
        async showCategory(){
            await this.axios.get(`/api/category/${this.$route.params.id}`).then(response=>{
                const { title, description } = response.data
                this.category.title = title
                this.category.description = description
            }).catch(error=>{
                console.log(error)
            })
        },
        async update(){
            await this.axios.post(`/api/category/${this.$route.params.id}`,this.category).then(response=>{
                this.$router.push({name:"categoryList"})
            }).catch(error=>{
                console.log(error)
            })
        }
    }
}
</script>

DefiVue রাউটারে CRUD অ্যাপের পথটি শেষ করুন

এখন, আপনি আছে defiশেষ করো Vue routes, এবং এটি করতে ফোল্ডারে যান  resource / js , ফাইল তৈরি করুন route.js  এবং ফাইলে নিম্নলিখিত কোড আপডেট করুন:

const Welcome = () => import('./components/Welcome.vue' /* webpackChunkName: "resource/js/components/welcome" */)
const CategoryList = () => import('./components/category/List.vue' /* webpackChunkName: "resource/js/components/category/list" */)
const CategoryCreate = () => import('./components/category/Add.vue' /* webpackChunkName: "resource/js/components/category/add" */)
const CategoryEdit = () => import('./components/category/Edit.vue' /* webpackChunkName: "resource/js/components/category/edit" */)

export const routes = [
    {
        name: 'home',
        path: '/',
        component: Welcome
    },
    {
        name: 'categoryList',
        path: '/category',
        component: CategoryList
    },
    {
        name: 'categoryEdit',
        path: '/category/:id/edit',
        component: CategoryEdit
    },
    {
        name: 'categoryAdd',
        path: '/category/add',
        component: CategoryCreate
    }
]

এখানে আমরা উপাদান ব্যবহার করেছি ধীর লোডিং. ভিউ জেএস একটি উপায়ে উপাদান লোডিং পরিচালনা করে lazy পাথ সহ, তাই DOM-এ আপনি উপাদানগুলি লোড করতে পারেন যখন সেগুলি পাথের মাধ্যমে প্রয়োজন হয়।

app.js-এ Vue.js নির্ভরতা অন্তর্ভুক্ত করুন

এখন আপনাকে সমস্ত পাথ, vue-axios এবং অন্যান্য নির্ভরতা যোগ করতে হবে।

resource / js / app.js

require('./bootstrap');
import vue from 'vue'
window.Vue = vue;

import App from './components/App.vue';
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import {routes} from './routes';
 
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
 
const router = new VueRouter({
    mode: 'history',
    routes: routes
});
 
const app = new Vue({
    el: '#app',
    router: router,
    render: h => h(App),
});

webpack.mix.js আপডেট করুন

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]).vue();

ডেভেলপমেন্ট সার্ভার চালান

টার্মিনাল খুলুন এবং এই কমান্ডটি চালান:

npm run watch

php artisan serve

apri লোকালহোস্ট: 8000 ব্রাউজারে

BlogInnovazione.it