Laravel 10 Vue JS Vite CRUD ( Create Read Update and Delete)

Laravel 10 Vue JS Vite CRUD ( Create Read Update and Delete)

Download Laravel App

composer create-project --prefer-dist laravel/laravel my-app

C:\xampp\htdocs\laravel10project>composer create-project laravel/laravel laravel10project

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=laravel10db

DB_USERNAME=root

DB_PASSWORD=

Database Migration

php artisan migrate

C:\xampp\htdocs\laravel\my-app>php artisan migrate

Migration table created successfully.

check database table

Create Model and Migration

C:\xampp\htdocs\laravel\laravelproject>php artisan make:model Student -m

A new file named Student.php will be created in the app directory and database/migrations directory to generate the table in our database

app/Models/Student.php

//app/Models/Student.php
<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Student extends Model
{
    use HasFactory;
 
    protected $fillable = [
          'name',
          'address',
          'phone',
    ];
}

database\migrations\create_students_table.php

//database\migrations\create_students_table.php
<?php
 
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
 
return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('students', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('address');
            $table->string('phone')->nullable();
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('students');
    }
};

Database Migration
php artisan migrate

C:\xampp\htdocs\laravel\laravel10project>php artisan migrate

Create Controller
php artisan make:controller StudentController
C:\xampp\htdocs\laravel\my-app>php artisan make:controller StudentController --api

app/Http/Controllers/StudentController.php

//app/Http/Controllers/StudentController.php
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Models\Student;
 
class StudentController extends Controller
{
    protected $student;
    public function __construct(){
        $this->student = new Student();
         
    }
 
    public function index()
    {
        return $this->student->all();
    }
 
    public function store(Request $request)
    {
        return $this->student->create($request->all());
    }
 
    public function show(string $id)
    {
        $student = $this->student->find($id);  
    }
 
    public function update(Request $request, string $id)
    {
        $student = $this->student->find($id);
        $student->update($request->all());
        return $student;
    }
 
    public function destroy(string $id)
    {
        $student = $this->student->find($id);
        return $student->delete();
    }
}

Routes
routes/api.php

//routes/api.php
<?php
 
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\StudentController;
 
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "api" middleware group. Make something great!
|
*/
 
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});
 
Route::apiResource('/student', StudentController::class);

Run C:\xampp\htdocs\laravel\my-app>php artisan serve
Starting Laravel development server: http://127.0.0.1:8000

Vue using vite install Vue using vite
C:\xampp\htdocs\laravel\my-app> npm create vite@latest
Need to install the following packages:
create-vite@4.4.1
Ok to proceed? (y) y
√ Project name: ... vite-project
√ Select a framework: » Vue
√ Select a variant: » JavaScript

Scaffolding project in C:\xampp\htdocs\laravel\my-app\vite-project...

Done. Now run:

cd vite-project
npm install
npm run dev
PS C:\xampp\htdocs\laravel\my-app> cd vite-project
PS C:\xampp\htdocs\laravel\my-app\vite-project> npm install
PS C:\xampp\htdocs\laravel\my-app\vite-project> npm run dev

Local: http://localhost:5173/

Install axios
https://github.com/axios/axios#axios-api
PS C:\xampp\htdocs\laravel\my-app\vite-project> $ npm install axios

inside Components folder create file Student.vue

vite-project/src/components/Student.vue

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

//vite-project/src/components/Student.vue
<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <h3 class="text-center text-dark mt-2">Laravel 10 Vue JS Vite CRUD ( Create Read Update and Delete)</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="card-header">
                    Add Record
                </div>
                <div class="card-body">
                    <form @submit.prevent="save">
                     
                    <div class="form-group">
                        <label>Student name</label>
                        <input type="text" v-model="student.name" class="form-control"  placeholder="Student name">
                     
                    </div>
                    <div class="form-group">
                        <label>Student Address</label>
                        <input type="text" v-model="student.address" class="form-control"  placeholder="Student Address">
                     
                    </div>
                     
                    <div class="form-group">
                        <label>Phone</label>
                        <input type="text" v-model="student.phone" class="form-control"  placeholder="Phone">
                     
                    </div>
                     
                    <button type="submit" class="btn btn-primary">Save</button>
                    </form>
                </div>
            </div>
            <div class="col-md-8">
                <h2>Student List</h2>
                    <table class="table table-dark">
                    <thead>
                        <tr>
                        <th scope="col">ID</th>
                        <th scope="col">Student Name</th>
                        <th scope="col">Address</th>
                        <th scope="col">Phone</th>
                        <th scope="col">Option</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="student in result" v-bind:key="student.id">
                             
                            <td>{{ student.id }}</td>
                            <td>{{ student.name }}</td>
                            <td>{{ student.address }}</td>
                            <td>{{ student.phone }}</td>
                            <td>
                                <button type="button" class="btn btn-warning" @click="edit(student)">Edit</button>
                                <button type="button" class="btn btn-danger"  @click="remove(student)">Delete</button>
                            </td>
                            </tr>
                         
                    </tbody>
                    </table>
            </div>
        </div>
    </div>    
</template>
<script>
import axios from 'axios';
  
export default {
    name: 'Student',
    data () {
      return {
        result: {},
        student:{
                   id: '',
                   name: '',
                   address: '',
                   phone: ''
  
  
        }
      }
    },
    created() { 
        this.StudentLoad();
    },
    mounted() {
          console.log("mounted() called.......");
    },
  
    methods: {
           StudentLoad()
           {
                 var page = "http://127.0.0.1:8000/api/student";
                 axios.get(page)
                  .then(
                      ({data})=>{
                        console.log(data);
                        this.result = data;
                      }
                  );
           },
            
           save()
           {
            if(this.student.id == '')
              {
                this.saveData();
              }
              else
              {
                this.updateData();
              }       
  
           },
           saveData()
           {
            axios.post("http://127.0.0.1:8000/api/student", this.student)
            .then(
              ({data})=>{
                alert("saved");
                this.StudentLoad();
                this.student.name = '';
                this.student.address = '',
                this.student.phone = ''
                this.id = ''
              }
            )
  
           },
           edit(student)
           {
            this.student = student;
           },
           updateData()
           {
              var editrecords = 'http://127.0.0.1:8000/api/student/'+ this.student.id;
              axios.put(editrecords, this.student)
              .then(
                ({data})=>{
                  this.student.name = '';
                  this.student.address = '',
                  this.student.phone = ''
                  this.id = ''
                  alert("Updated!!!");
                  this.StudentLoad();
                }
              );
  
           },
  
           remove(student){
              var url = `http://127.0.0.1:8000/api/student/${student.id}`;
              // var url = 'http://127.0.0.1:8000/api/student/'+ student.id;
              axios.delete(url);
              alert("Deleted");
              this.StudentLoad();
            }
      }
  }
  </script>

update App.vue
vite-project/src/App.vue

//vite-project/src/App.vue
<script setup>
import Student from './components/Student.vue'
</script>
 
<template>
<Student />
</template>

Open index.html and add bootstrap url
vite-project/index.html

//vite-project/index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

open vite-project/src/main.js uncomment style.css
Run C:\xampp\htdocs\laravel\my-app\vite-project> npm run dev
http://localhost:5173/

Tutorial101

article

Thursday, August 31, 2023

Laravel 10 Vue JS Vite CRUD ( Create Read Update and Delete)

Related Post

Search This Blog

HOME

Category

Popular Posts