This tutorial will teach how to make a Login and Registration using Laravel 9 Vue js.it is an very important stuff make an custom Login and Registration forms. this tutorials will help you to learn every thing.
Install Laravel
composer create-project laravel/laravel kmsback-app
Set up the Database
Create the database on the mysql.what the database you have created that particular name you have to give on .env file.
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=dbkms DB_USERNAME=root DB_PASSWORD=
i have created the database which is dbkms. i gave the name on the .env file.
First Step Create the migration
After that you have to make table migration.
In order to make a login registration we already have a model User. you can see inside the Models folder. let update it so lets run the command
php artisan migrate
Routes
create the routes in order to manage the url requests.all the request manage by api.php
<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\RegisterController;
use App\Http\Controllers\LoginController;
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
return $request->user();
});
Route::post('/register', [RegisterController::class, 'store']);
Route::post('/login', [LoginController::class, 'check']);
Create Controller
RegisterController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Hash;
class RegisterController extends Controller
{
public function store(Request $request)
{
$input = $request->all();
User::create([
'name' => $input['name'],
'email' => $input['email'],
'password' => Hash::make($input['password'])
]);
return response()->json(['status' => true,
'message' => "Registation Success"
]);
}
}
LoginController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Hash;
class LoginController extends Controller
{
public function check(Request $request)
{
$credentials = $request->validate([
'email' => ['required', 'email'],
'password' => ['required'],
]);
if (Auth::attempt($credentials))
{
return response()->json([ 'status' => true ,
'message' => "Success"
]);
}
return response()->json(['status' => false ,
'message' => "Fail"
]);
}
}
After competed the Back End.Let’s start the front-end vue js.
Vue js
Vue.js
Install Vue.js CLI
1 | npm install –g vue–cli |
After installed successfully create the vue.js project using following command
1 | vue init webpack frontend |
Bootstrap
add the bootstrap css on index.html inside the head tag go to the respective website here
you have to wait until the installation process complete.after install successfully.
Open project into vscode editor.
First Step
Create the component Register.vue.
Register.vue
<template>
<div class="card" align="left">
<div class="card-header">Register Form</div>
<div class="card-body">
<form @submit.prevent="saveData">
<label>First Name</label>
<input type="text" v-model="student.name" name="name" id="name" class ="form-control"/>
<label>Email</label>
<input type="email" v-model="student.email" name="email" id="email" class ="form-control"/>
<label>Password</label>
<input type="password" v-model="student.password" name="password" id="password" class ="form-control"/>
<input type="submit" value="Save" class="btn btn-success">
</form>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import axios from 'axios';
Vue.use(axios)
export default {
name: 'Register',
data () {
return {
result: {},
student:{
name: '',
email: '',
password: ''
}
}
},
created() {
},
mounted() {
console.log("mounted() called.......");
},
methods: {
saveData()
{
axios.post("http://127.0.0.1:8000/api/register", this.student)
.then(
({data})=>{
console.log(data);
try
{
alert("saveddddd");
}
catch(err)
{
alert("failed");
}
}
)
}
}
}
</script>
Login.vue
<template>
<div class="row">
<div class="col-sm-4" >
<h2 align="center"> Login</h2>
<form @submit.prevent="LoginData">
<div class="form-group" align="left">
<label>Email</label>
<input type="email" v-model="student.email" class="form-control" placeholder="Email">
</div>
<div class="form-group" align="left">
<label>Password</label>
<input type="password" v-model="student.password" class="form-control" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import axios from 'axios';
Vue.use(axios)
export default {
name: 'Registation',
data () {
return {
result: {},
student:{
email: '',
password: ''
}
}
},
created() {
},
mounted() {
console.log("mounted() called.......");
},
methods: {
LoginData()
{
axios.post("http://127.0.0.1:8000/api/login", this.student)
.then(
({data})=>{
console.log(data);
try {
if (data.status === true) {
alert("Login Successfully");
this.$router.push({ name: 'HelloWorld' })
} else {
alert("Login failed")
}
} catch (err) {
alert("Error, please try again");
}
}
)
}
}
}
</script>
HelloWorld.vue
<template>
<div>
<h1>Welcome to Home Page</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>Routes
all routes manage in vuejs by inside the routes folder index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Register from '@/components/Register'
import Login from '@/components/Login'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/register',
name: 'Register',
component: Register
},
{
path: '/login',
name: 'Login',
component: Login
},
]
})
i have attached the video link below. which will do this tutorials step by step.