Laravel Validate Insert Update Delete Basic

Laravel 8 Form Submission, Data Table, and Modal Update

Step 1: Install Laravel 8

Create a new Laravel project by running:

composer create-project --prefer-dist laravel/laravel laravel_basic

Step 2: Configure Database

Open the .env file in your project root and update the database credentials:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_db
DB_USERNAME=root
DB_PASSWORD=your_password

Step 3: Run Migrations

Run the following command to apply your migrations:

php artisan migrate

Step 4: Create the Home Page

Edit resources/views/home.blade.php and add the following content:

@extends('layouts.master')

@section('content')
<div class="signup-form">
	<form action="{{ route('form/page_test/save') }}" method="POST" class="form-horizontal">
		@csrf
		<div class="row">
			<div class="col-8 offset-4">
				<h2>Personal</h2>
			</div>
		</div>	

		{{-- Success message --}}
		@if(session('insert'))
			<div id="insert" class="alert alert-success">{{ session('insert') }}</div>
		@endif

		{{-- Error message --}}
		@if(session('error'))
			<div id="error" class="alert alert-danger">{{ session('error') }}</div>
		@endif

		{{-- Full Name --}}
		<div class="form-group row">
			<label class="col-form-label col-4">Full Name</label>
			<div class="col-8">
				<input type="text" class="form-control @error('username') is-invalid @enderror" name="username" placeholder="Enter Full Name">
				@error('username') <span class="invalid-feedback"><strong>{{ $message }}</strong></span> @enderror
			</div>        	
		</div>

		{{-- Email --}}
		<div class="form-group row">
			<label class="col-form-label col-4">Email Address</label>
			<div class="col-8">
				<input type="email" class="form-control @error('email') is-invalid @enderror" name="email" placeholder="Enter Email">
				@error('email') <span class="invalid-feedback"><strong>{{ $message }}</strong></span> @enderror
			</div>	
		</div>

		{{-- Phone --}}
		<div class="form-group row">
			<label class="col-form-label col-4">Phone Number</label>
			<div class="col-8">
				<input type="tel" class="form-control @error('phone') is-invalid @enderror" name="phone" placeholder="Enter Phone Number">
				@error('phone') <span class="invalid-feedback"><strong>{{ $message }}</strong></span> @enderror
			</div>      	
		</div>

		{{-- Submit Button --}}
		<div class="form-group row">
			<div class="col-8 offset-4">
				<button type="submit" class="btn btn-primary btn-lg">Save</button>
			</div>  
		</div>		      
	</form>
</div>

{{-- Table --}}
<div class="container-fluid mt-4">
	<table class="table table-striped table-bordered nowrap" id="example">
		<thead>
			<tr>
				<th>ID</th>
				<th>Full Name</th>
				<th>Email</th>
				<th>Phone</th>
				<th>Actions</th>
			</tr>
		</thead>
		<tbody>
			@foreach($data as $value)
				<tr>
					<td class="id">{{ $value->id }}</td>
					<td class="name">{{ $value->username }}</td>
					<td class="email">{{ $value->email }}</td>
					<td class="phone">{{ $value->phone }}</td>
					<td class="text-center">
						<a class="text-muted update" data-toggle="modal" data-id="{{ $value->id }}" data-target="#update">
							<i class="fa fa-edit text-primary"></i>
						</a>
						<a href="{{ url('form/delete/'.$value->id) }}" onclick="return confirm('Are you sure you want to delete this record?')">
							<i class="fa fa-trash text-danger"></i>
						</a>
					</td>
				</tr>
			@endforeach
		</tbody>
	</table>
</div>

{{-- Update Modal --}}
<div class="modal fade" id="update" tabindex="-1" aria-labelledby="updateLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<form action="{{ route('form/update') }}" method="POST">
				@csrf
				<div class="modal-header">
					<h5 class="modal-title">Update Info</h5>
					<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
				</div>
				<div class="modal-body">
					<input type="hidden" name="id" id="e_id">
					<div class="form-group">
						<label>Full Name</label>
						<input type="text" class="form-control" id="e_name" name="name" required>
					</div>
					<div class="form-group">
						<label>Email</label>
						<input type="email" class="form-control" id="e_email" name="email" required>
					</div>
					<div class="form-group">
						<label>Phone</label>
						<input type="tel" class="form-control" id="e_phone" name="phone" required>
					</div>
				</div>
				<div class="modal-footer">
					<button class="btn btn-danger" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-success">Update</button>
				</div>
			</form>
		</div>
	</div>
</div>

{{-- Scripts --}}
<script>
	// Fill modal form with selected row data
	$(document).on('click', '.update', function () {
		var _this = $(this).closest('tr');
		$('#e_id').val(_this.find('.id').text());
		$('#e_name').val(_this.find('.name').text());
		$('#e_email').val(_this.find('.email').text());
		$('#e_phone').val(_this.find('.phone').text());
	});

	// Hide messages after 5 seconds
	setTimeout(() => {
		$('#insert').fadeOut();
		$('#error').fadeOut();
	}, 5000);
</script>
@endsection

Step 5: Run the Development Server

Start your local development server:

php artisan serve

Visit your app in the browser:

http://localhost:8000

Or if using the public path:

http://localhost/laravel_basic/public/ 

👉 Click here to Download