Home Laravel 8 Basic Laravel 8 Project Step by Step

Basic Laravel 8 Project Step by Step

Posted on November 9, 2021

17 min read

2,378

Laravel is world famous php framework.it has various features.Laravel is a MVC architecture. In this tutorial will see how to make a website with crud operation contact form in Laravel 8.Laravel 8 – CRUD application tutorial with Example. Here is the Best Place to Learn Laravel 8 Articles.

Lets do the Project Step by Step Laravel 8 From Scratch

First Step

In computer create the folder Laravel Projects.and open the folder. and type the address bar on cmd

Install Laravel 8

Create a new Project type the command on the command prompt . I create the project name basicweb

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

Change .env File

Change .env File for username, password and DB Name

After that run check the application the welcome screen of Laravel framework look like this.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=basicweb
DB_USERNAME=root
DB_PASSWORD=

After that run check the application the welcome screen of Laravel framework look like this.

php artisan serve

Create Controller

Create the controller name which is WelcomeController

Create the controller name which is AboutController

Create the controller name which is ServiceController

Create the controller name which is ContactController

php artisan make:controller ContactController --resource
php artisan make:controller WelcomeController --resource
php artisan make:controller ServiceController –resource
php artisan make:controller AboutController –resource

Create Views

Create a Folder inside the resources-views

Create the following pages

welcome.blade.php

Service.blade.php

About.blade.php

Contact.blade.php

layout.blade.php

In Laravel you have create the pages using pagename.blade.php

Create page layout.blade.php

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </head>   
    <body>
       
        <div class="container">
        <div class="jumbotron">
                <h1>TutusFunny</h1>
           </div> 
           <a href="{{ url('/') }}" class="btn btn-warning">Home</a>  
           <a href="{{ url('/about') }}" class="btn btn-warning">About</a>  
           <a href="{{ url('/service') }}" class="btn btn-warning">Service</a>  
           <a href="{{ url('/contact/create') }}" class="btn btn-warning">Contact</a> 
      </div>
               @yield('content')
    </br>
    <div class="card bg-light text-dark">
    <div class="card-body">Copyright 2021 tutusfunny.com</div>
   </div>

    </body>

<html>

welcome.blade.php

@extends("layout")

@section('content')

<div class="card">
  <div class="card-header">Welcome Page</div>
  <div class="card-body">This Welcome</div>
 
</div>


@stop

service.blade.php

@extends("layout")

@section('content')

<div class="card">
  <div class="card-header">Service Page</div>
  <div class="card-body">This Service</div>
 
</div>


@stop

about.blade.php

@extends("layout")

@section('content')

<div class="card">
  <div class="card-header">About Page</div>
  <div class="card-body">This About</div>
 
</div>


@stop

then do the Contact form along with the crud opertions

Create a Folder inside the resources-views

inside the views folder create the contacts folder

inside the folder create the following pages

create.blade.php

@extends("layout")
@section('content')

<div class="card">
  <div class="card-header">Contactus Page</div>
  <div class="card-body">
      
      <form action="{{ url('contact') }}" method="post">
        {!! csrf_field() !!}
        <label>Name</label></br>
        <input type="text" name="name" id="name" class="form-control"></br>
        <label>Subject</label></br>
        <input type="text" name="subject" id="subject" class="form-control"></br>
        <label>Message</label></br>
        <input type="text" name="message" id="message" class="form-control"></br>
        <input type="submit" value="Save" class="btn btn-success"></br>
    </form>
   
  </div>
</div>

@stop

index.blade.php

@extends("layout")
@section('content')

<div class="card">
  <div class="card-header">Contactus Page</div>
  <div class="card-body">
        @foreach($contacts as $contact)
        <h4>{{ $contact->name }}</h4>
        <h6>{{ $contact->subject }}</h6>
        <p>{{ $contact->message }}</p>
        <a href="{{ url('contact'). '/' .$contact->id}}" class="btn btn-info">View </a>
        <a href="{{ url('contact'). '/' .$contact->id. '/edit' }}" class="btn btn-info">Edit </a>
    </hr>
    @endforeach
  </div>
</div>

@stop

edit.blade.php

@extends("layout")
@section('content')

<div class="card">
  <div class="card-header">Contactus Page</div>
  <div class="card-body">
      
      <form action="{{ url('contact/' .$contact->id) }}" method="post">
        {!! csrf_field() !!}
        @method("PATCH")
        <input type="hidden" name="id" id="id" value="{{$contact->id}}" id="id" />
        <label>Name</label></br>
        <input type="text" name="name" id="name" value="{{$contact->name}}" class="form-control"></br>
        <label>Subject</label></br>
        <input type="text" name="subject" id="subject" value="{{$contact->subject}}" class="form-control"></br>
        <label>Message</label></br>
        <input type="text" name="message" id="message" value="{{$contact->message}}" class="form-control"></br>
        <input type="submit" value="Update" class="btn btn-success"></br>
    </form>
   
  </div>
</div>

@stop

show.blade.php

@extends("layout")
@section('content')

<div class="card">
  <div class="card-header">Contactus Page</div>
  <div class="card-body">
       
        <h4>{{ $contact->name }}</h4>
        <h6>{{ $contact->subject }}</h6>
        <p>{{ $contact->message }}</p>
        <a href="{{ url('contacts'). '/' .$contact->id}}" class="btn btn-info">View </a>
   
    </hr>
  
  </div>
</div>

@stop

thanks.blade.php

@extends("layout")
@section('content')

<div class="card">
        <div class="card-body">
            <h2>Thank you for Contact US</h2>
       </div>
   
  </div>
</div>

@stop

Controller

After that Pass All view pages through Controller. you have to add the Model namespace here

use App\Models\Contact; Data is coming from the database via Model.

<?php

namespace App\Http\Controllers;
use App\Models\Contact;
use Illuminate\Http\Request;

class ContactController extends Controller
{
    
    public function index()
    {
       $contacts = Contact::all();
       return view ('contact.index')->with('contacts', $contacts);
    }

    public function create()
    {
       return view('contact.create');
    }

    public function store(Request $request)
    {
       $input = $request->all();
       Contact::create($input);
       return view('contact.thanks');
    }

  
    public function show($id)
    {
       $contact = Contact::find($id);
       return view('contact.show')->with('contact', $contact);
    }

   
    public function edit($id)
    {
        $contact = Contact::find($id);
        return view('contact.edit')->with('contact', $contact);
    }

 
    public function update(Request $request, $id)
    {
        $contact = Contact::find($id);
        $input = $request->all();
        $contact->update($input);
        return view('contact.thanks');
    }

   
    public function destroy($id)
    {
       
    }
}

Routes

Pages are Manage through routes. If you are crud system simple you can add it the routes one line look like this

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\WelcomeController;
use App\Http\Controllers\ServiceController;
use App\Http\Controllers\AboutController;
use App\Http\Controllers\ContactController;

Route::get('/', [WelcomeController::class, 'index']);
Route::get('/service', [ServiceController::class, 'index']);
Route::get('/about', [AboutController::class, 'index']);


Route::resource('/contact', ContactController::class);

Create Model

Model is used to get the data from the database.

Create the Model name which is Contact

php artisan make:model Contact

After Model is Created the look like this. Code inside Model Class (app\Models\)

<?php

namespace App\Models;

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

class Contact extends Model
{
    protected $table = "contacts";
    protected $primarykey = "id";
    protected $fillable = ["name","subject","message"];
}

Create Migration

Create the tables

php artisan make:migration create_contacts_table

After that you can check the inside database folder migrations create_contacts_table.php

public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('subject');
            $table->string('message');
            $table->timestamps();
        });
    }

After add the lines type

php artisan migrate

i have attached the video link below. which will do this tutorials step by step.

Basic Laravel 8 Project step by step

Related Articles
More By admin
More In Laravel 8

Laravel 8 Join Two Tables
In this tutorial I am going to teach you how to join two tables in laravel 8.how to make t…
October 17, 2021
6 min read
Laravel 8 CRUD Application Tutorial
In this tutorial will teach crud with Laravel. Laravel 8 CRUD Application we will co…
October 13, 2021
20 min read
CoffeeShop Inventory System using Laravel 8
The CoffeeShop pos system is developed using Laravel 8. The project is built to mana…
November 24, 2020
13 min read

Load More Related Articles

Laravel 11 CRUD Mastering RESTful API MVC with Repository Pattern
In this tutorial will teach Laravel 11 Api MVC with Repository Pattern Crud Application st…
16 hours ago
12 min read
Laravel 11 CRUD Application
In this tutorial will teach Laravel 11 CRUD Application step by step. Laravel 11 CRU…
3 weeks ago
18 min read
How to make a Times Table in React
in this tutorials we will be talk about how to make a times table in react. This is the co…
March 8, 2024
42 second read

Load More By admin

Mastering Laravel 10 CRUD: A Step-by-Step
In this tutorial will teach crud with Laravel framework. Laravel 10 CRUD Application…
February 17, 2023
22 min read
Laravel 8 Image Upload and Display
Laravel is world famous php framework.we are going to talk about laravel 8 image uploading…
February 8, 2022
11 min read
Laravel 8 Join Two Tables
In this tutorial I am going to teach you how to join two tables in laravel 8.how to make t…
October 17, 2021
6 min read

Load More In Laravel 8

Click To Comment

Leave a Reply Cancel reply

Check Also

Laravel 11 CRUD Mastering RESTful API MVC with Repository Pattern

In this tutorial will teach Laravel 11 Api MVC with Repository Pattern Crud Application st…