We are going to create an application in Laravel 8, so follow these steps:
Step 1: Install Laravel Application
There are lots of methods to create a fresh Laravel Project, but I going to create using composer.
$ composer create-project laravel/laravel econtact $ cd econtact $ php artisan serve
Step: 2 Database Configuration
Now we have to do some changes in .env like DatabaseName, Username, Password.
Step 3: Migration
Migrations are like version control for your database, allowing your team to define and share the application’s database schema definition.
$ php artisan make:migration create_contacts_table --create=contacts
Now, we need to add some code to the “database/migrations “
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateContactsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('contacts', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('phone');
$table->string('email');
$table->string('groups');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('contacts');
}
}
Step 4: Add Route
After migration, we need to set Resource Route to our Application. To do that add code in “routes/web.php”
Route::resource('contacts', ContactController::class);
Step 5: Add Controller and Model
We can create Controller and Model separately but in this post, we will going to create using a single command.
php artisan make:controller ContactController --resource --model=Contact
To apply logic in our Application we need to code in Controller so, let’s get started with the sample code given below to ContactController.php
<?php
namespace App\Http\Controllers;
use App\Models\Contact;
use Illuminate\Http\Request;
class ContactController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$contacts = Contact::latest()->paginate(5);
return view('contacts.index', compact('contacts'))
->with('i', (request()->input('page', 1) - 1) * 5);
// $contacts = Contact::latest();
// return view('contacts.index', compact('contacts'));
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('contacts.create');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$request->validate([
'name' => 'required',
'phone' => 'required',
'email' => 'required',
'groups' => 'required',
]);
Contact::create($request->all());
return redirect()->route('contacts.index')
->with('success', 'Contact created successfully.');
}
/**
* Display the specified resource.
*
* @param \App\Models\Contact $contact
* @return \Illuminate\Http\Response
*/
public function show(Contact $contact)
{
return view('contacts.show', compact('contact'));
}
/**
* Show the form for editing the specified resource.
*
* @param \App\Models\Contact $contact
* @return \Illuminate\Http\Response
*/
public function edit(Contact $contact)
{
return view('contacts.edit', compact('contact'));
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param \App\Models\Contact $contact
* @return \Illuminate\Http\Response
*/
public function update(Request $request, Contact $contact)
{
$request->validate([
'name' => 'required',
'phone' => 'required',
'email' => 'required',
'groups' => 'required',
]);
$contact->update($request->all());
return redirect()->route('contacts.index')
->with('success', 'Contact updated successfully');
}
/**
* Remove the specified resource from storage.
*
* @param \App\Models\Contact $contact
* @return \Illuminate\Http\Response
*/
public function destroy(Contact $contact)
{
$contact->delete();
return redirect()->route('contacts.index')
->with('success', 'Contact deleted successfully');
}
}
Now add some code in “app/Models/Product.php”
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Contact extends Model
{
use HasFactory;
protected $fillable = [
'name', 'phone', 'email', 'groups'
];
}
Step 6: Add Design using Blade
Now, we need to add design for our Application so to do that, we need to add files in resources/views/contacts
Before that add bootstrap and other supportive files to your application in public/ other files like bootstrap, font awesome, etc.
- layout.blade.php
- create.blade.php
- edit.blade.php
- index.blade.php
Step-by-Step Design
- layout.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url('bootstrap/css/bootstrap.min.css')}}">
<link rel="stylesheet" href="{{ url('mdb5/css/mdb.min.css')}}">
<link rel="stylesheet" href="{{ url('fonts/css/all.min.css')}}">
<script src="{{ url('js/script.js') }}"></script>
<title>Laravel 8 CRUD - Contact Application</title>
</head>
<body class="bg-muted">
@yield('content')
<script src="{{ url('bootstrap/js/bootstrap.min.js')}}"></script>
<script src="{{ url('mdb5/js/mdb.min.js')}}"></script>
</body>
</html>
2. create.blade.php
@extends('contacts/layout')
@section('content')
<div class="container my-5">
<div class="row px-4">
<form action="{{ route('contacts.store') }}" method="POST">
@csrf
<div class="row g-3 mb-3">
<div class="col-4">
<label for="clientname" class="form-label">Name</label>
<input type="text" class="form-control" id="name" name="name" aria-describedby="name">
</div>
<div class="col-4">
<label for="phone" class="form-label">Phone</label>
<input type="text" class="form-control" id="phone" name="phone" aria-describedby="phone">
</div>
<div class="col-4">
<label for="group" class="form-label">Group</label>
<input type="text" class="form-control" id="groups" name="groups" aria-describedby="group">
</div>
</div>
<div class="row g-3 mb-3">
<div class="col-8 ">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" aria-describedby="email">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
@endsection
3. edit.blade.php
@extends('contacts/layout')
@section('content')
<div class="container my-5">
<div class="row px-4">
<form action="{{ route('contacts.update',$contact->id) }}" method="POST">
@csrf
@method('PUT')
<div class="row g-3 mb-3">
<div class="col-4">
<label for="clientname" class="form-label">Name</label>
<input type="text" class="form-control" id="name" name="name" value="{{ $contact->name }}" aria-describedby="name">
</div>
<div class="col-4">
<label for="phone" class="form-label">Phone</label>
<input type="text" class="form-control" id="phone" name="phone" value="{{ $contact->phone }}" aria-describedby="phone">
</div>
<div class="col-4">
<label for="group" class="form-label">Group</label>
<input type="text" class="form-control" id="groups" name="groups" value="{{ $contact->groups }}" aria-describedby="group">
</div>
</div>
<div class="row g-3 mb-3">
<div class="col-8 ">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" value="{{ $contact->email }}" aria-describedby="email">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
@endsection
4. index.blade.php
@extends('contacts/layout')
@section('content')
<!-- Content Row -->
<div class="container my-5">
<div class="heading d-flex justify-content-between my-5">
<h1 class="h3 text-info fw-bold">Laravel 8 Application - eContact</h1>
<a href="{{ route('contacts.create') }}" class="btn btn-outline-info"><i class="fas fa-plus"></i> Add Contact</a>
</div>
@if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
@endif
<div class="row">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Phone</th>
<th scope="col">Email</th>
<th scope="col">Groups</th>
</tr>
</thead>
<tbody>
@foreach ($contacts as $contact)
<tr>
<th scope="row">{{ ++$i }}</th>
<td>{{ $contact->name }}</td>
<td>{{ $contact->phone }}</td>
<td>{{ $contact->email }}</td>
<td>{{ $contact->groups }}</td>
<td>
<form action="{{ route('contacts.destroy',$contact->id) }}" method="POST">
<!-- <a class="btn btn-info" href="{{ route('contacts.show',$contact->id) }}">Show</a> -->
<a class="btn btn-primary" href="{{ route('contacts.edit',$contact->id) }}">Edit</a>
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger">Delete</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
@endsection
Finally, we have done all the coding stuff, so let’s check the output
