article

Thursday, July 21, 2022

Laravel 9 Upload Image and Display

Laravel 9 Upload Image and Display

How to install laravel 9

https://tutorial101.blogspot.com/2022/02/how-to-install-laravel-9.html

Connecting our Database

open .env file root directory.

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

Create the tables

C:\xampp\htdocs\laravel\laravelproject>php artisan make:migration create_members_table

laravelproject\database\migrations\create_members_table.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//laravelproject\database\migrations\create_members_table.php
<?php
 
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
 
return new class extends Migration
{
    public function up()
    {
        Schema::create('members', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('address');
            $table->string('mobile');
            $table->string('photo', 300);
            $table->timestamps();
        });
    }
 
    public function down()
    {
        Schema::dropIfExists('members');
    }
};
Database Migration
php artisan migrate

C:\xampp\htdocs\laravel\laravelproject>php artisan migrate
Migration table created successfully.
check database table

Create tables Member

php artisan make:model Member

app/Models/Member.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//app/Models/Member.php
<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Member extends Model
{
    use HasFactory;
    protected $table = 'members';
    protected $primaryKey = 'id';
    protected $fillable = ['name', 'address', 'mobile','photo'];
}
Create Controller
Create the controller name which is MemberController

php artisan make:controller MemberController --resource
C:\xampp\htdocs\laravel\laravelproject>php artisan make:controller MemberController --resource
change it with the following codes:
laravelproject\app\Http\Controllers\MemberController.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//laravelproject\app\Http\Controllers\MemberController.php
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Models\Member;
 
class MemberController extends Controller
{
    public function index()
    {
        $members = Member::all();
        return view ('index')->with('members', $members);
    }
 
    public function create()
    {
        return view('create');
    }
 
    public function store(Request $request)
    {
        $requestData = $request->all();
        $fileName = time().$request->file('photo')->getClientOriginalName();
        $path = $request->file('photo')->storeAs('images', $fileName, 'public');
        $requestData["photo"] = '/storage/'.$path;
        Member::create($requestData);
        return redirect('member')->with('flash_message', 'Member Added!'); 
    }
}
Route
laravelproject\routes\web.php
?
1
2
3
4
5
6
7
8
9
10
11
//laravelproject\routes\web.ph
<?php
 
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\MemberController;
 
Route::get('/', function () {
    return view('welcome');
});
 
Route::resource("/member", MemberController::class);
Create Views
laravelproject\resources\views\index.blade.php

Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//laravelproject\resources\views\index.blade.php
@extends('layout')
@section('content')
<div class="container"><br/><br/>
    <div class="row">
        <div class="col-lg-10">
            <h2>Laravel 9 Upload Image and Display</h2>
        </div>
        <div class="col-lg-2">
            <a href="{{ url('/member/create') }}" class="btn btn-success" title="Add New Contact">
                Add New Member
            </a>
        </div>
    </div>
    <table class="table table-bordered table-striped" id="membersTable">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Address</th>
                <th>Telephone</th>
                <th>Photo</th>
            </tr>   
        </thead>
        <tbody>
            @foreach($members as $item)
                <tr>
                    <td>{{ $loop->iteration }}</td>
                    <td>{{ $item->name }}</td>
                    <td>{{ $item->address }}</td>
                    <td>{{ $item->mobile }}</td>
                    <td>
                        <img src="{{ asset($item->photo) }}" width= '60' height='60' class="img img-responsive" />
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection
laravelproject\resources\views\layout.blade.php
?
1
2
3
4
5
6
7
8
9
10
11
12
//laravelproject\resources\views\layout.blade.php
<html>
<head>
    <title>Laravel 9 Upload Image and Display</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    @yield('content')
</div>
</body>
</html>
laravelproject\resources\views\create.blade.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//laravelproject\resources\views\create.blade.php
@extends('layout')
@section('content')
<div class="card">
  <div class="card-header">Add New Member</div>
  <div class="card-body">
      <form action="{{ url('member') }}" method="post" enctype="multipart/form-data">
        {!! csrf_field() !!}
        <label>Name</label></br>
        <input type="text" name="name" id="name" class="form-control"></br>
        <label>Address</label></br>
        <input type="text" name="address" id="address" class="form-control"></br>
        <label>Mobile</label></br>
        <input type="text" name="mobile" id="mobile" class="form-control"></br>
        <input class="form-control" name="photo" type="file" id="photo"> </br>
        <input type="submit" value="Save" class="btn btn-success"></br>
    </form>
  </div>
</div>
@stop
Link Storage folder to public dir

C:\xampp\htdocs\laravel\laravelproject>php artisan storage:link

Run C:\xampp\htdocs\laravel\laravelproject>php artisan serve
Starting Laravel development server: http://127.0.0.1:8000
Posted by ednalan at 9:12 PM . Under .

Related Post