Aprendre à coder pdevtuto

Laravel 10 AJAX Comment Uploader des images

Aujourd’hui, je vais vous donner un exemple de comment uploader des images dans laravel 10 en utilisant Ajax. Ici, vous apprendrez à ajouter les images dans notre projet de Laravel 10 CRUD Application Gestion des Contacts créé récemment que vous pouvez télécharger ici  avant de suivre cet article.

Mais si vous avez encore de difficulter à comprendre c’est quoi Laravel 10, je vous conseil de lire cet article : Introduction à Laravel 10

Qu’est-ce que l’AJAX ?

AJAX = Asynchrone JavaScript And XML.

Ajax utilise simplement une combinaison de :

Un objet XMLHttpRequest intégré au navigateur (pour demander des données à partir d’un serveur Web).

JavaScript et HTML DOM (pour afficher ou utiliser les données).

AJAX permet de mettre à jour les pages Web de manière asynchrone en échangeant des données avec un serveur Web en arrière-plan. Cela signifie qu’il est possible de mettre à jour des parties d’une page Web, sans recharger la page entière.

Dans cet exemple, nous allons créer une application de de gestion de contact avec les opérations pour Créer, Modifier, Afficher et Supprimer que nous avons vu dans Laravel 10 CRUD Application Gestion des Contacts .

Nous allons créer une table de contacts avec des colonnes de nom, telephone et image en utilisant la Migration de Laravel 10, puis nous allons créer des Routes, des Controllers, des Views et des Models.

Nous allons ensuite utiliser Bootstrap 5 pour la conception visuelle.

Maintenant que vous savez à quoi ressemblera notre projet, Suivons donc l’étape ci-dessous pour créer notre application de gestion des contacts avec Laravel 10 et Ajax.

Installez l’application de contact avec Laravel 10

Commençons le tutoriel à partir de zéro en installant une nouvelle application laravel 10. Si vous avez déjà créé votre projet avec composer, ignorez l’étape suivante :

composer create-project laravel/laravel contact-app

Découvre comment gagner 20% de réduction lors de votre achat de l’hébergement chez hostinger en suivant ce lien : https://hostinger.fr?REFERRALCODE=1LUPETEPLAC11

Configuration de la base de donnée de l’application utilisant Ajax pour uploader les images

Ajouter le nom de votre base de donné ainsi que le nom de l’utilisateur de la base de données et le mot de passe dans le fichier de configuration .env et remplissons tous les détails comme ci-dessous:

.Env

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB=3306

DB=laravel_contact)

DB_USERNAME=root

DB_PASSWORD=

Créer une migration pour notre application

La migration de laravel 10 nous aidera à créer la table « contacts » pour stocker le nom, téléphone et l’images de nos correspondants. Utilisons donc la commande suivante pour créer un fichier de migration.

php artisan make:migration create_contacts_table --create=contacts

Après cette commande, vous trouverez le fichier de migration dans ce chemin « database/migrations », ajouter ensuite le code ci-dessous dans votre fichier de migration pour créer la table contacts.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->id();
            $table->string('nom');
            $table->string('telephone');
            $table->string(image);
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('contacts');
    }
};

Vous devez maintenant exécuter cette migration à l’aide de la commande suivante :

php artisan migrate

Si vous avez déjà un projet créé après avoir suivi notre premier article sur laravel 10 crud et ajouter la colonne de l’image, taper la commande ci-dessous pour rafraîchir la migration :

php artisan migrate:refresh

Créer un contrôleur (Controller) et un modèle (Model) de notre application

Dans cette étape, nous devons maintenant créer un nouveau contrôleur ContactController. Alors exécutez la commande ci-dessous et créez un nouveau contrôleur :

php artisan make:controller ContactController --resource --model=Contact

Après la commande ci-dessous, vous trouverez un nouveau fichier dans ce chemin « app/Http/Controllers/ContactController.php ».

Alors, ajoutons ce code ci-dessous et mettons dans notre fichier ContactController.php.

app/Http/Controllers/ContactController.php

<?php

namespace App\Http\Controllers;

use App\Models\Contact;
use Illuminate\View\View;
use Illuminate\Http\Request;
use Illuminate\Http\RedirectResponse;

class ContactController extends Controller
{
    /**
     * Display a listing of the resource.
     */
    public function index(): View
    {
        $contacts = Contact::latest()->paginate(5);

        return view('contacts.index',compact('contacts'))
        ->with('i', (request()->input('page', 1) - 1) * 5);
    }

    /**
     * Show the form for creating a new resource.
     */
    public function create(): View
    {
        return view('contacts.create');
    }

    /**
     * Store a newly created resource in storage.
     */
    public function store(Request $request): RedirectResponse
    {
        $request->validate([
            'nom' => 'required',
            'telephone' => 'required',
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);

        $nom = $request->nom;
        $telephone = $request->telephone;

        $imageName = time().'.'.$request->image->extension();  
           
        $request->image->move(public_path('images'), $imageName);

        $contact->nom = $nom;
        $contact->telephone = $telephone;
        $contact->image = $imageName;
                  
        $contact->save();
         
        return redirect()->route('contacts.index')
                        ->with('success','Contact créé avec succès.');
    }

    /**
     * Display the specified resource.
     */
    public function show(Contact $contact): View
    {
        return view('contacts.show',compact('contact'));
    }

    /**
     * Show the form for editing the specified resource.
     */
    public function edit(Contact $contact): View
    {
        return view('contacts.edit',compact('contact'));
    }

    /**
     * Update the specified resource in storage.
     */
    public function update(Request $request, Contact $contact): RedirectResponse
    {
        $request->validate([
            'nom' => 'required',
            'telephone' => 'required',
        ]);
        
        $contact->update($request->all());
        
        return redirect()->route('contacts.index')
                        ->with('success','Contact modifié avec succès');
    }

    /**
     * Remove the specified resource from storage.
     */
    public function destroy(Contact $contact): RedirectResponse
    {
        $contact->delete();
         
        return redirect()->route('contacts.index')
                        ->with('success','Contact supprimé avec succès ');
    }
}

Ajouter un fichier des ressource pour nos routes

Ici, nous devons ajouter une route contenant des ressources pour notre application de gestion des contacts. Ouvrez donc votre fichier « routes/web.php » de votre , supprimer la route existante et ajoutez la route suivante.

Vous pouvez aussi lire : Comment apprendre la programmation

routes/Web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ContactController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/

Route::resource('contacts', ContactController::class);

Ajouter les fichiers Blades(Views)

Dans cette étape, nous devons créer uniquement des fichiers .blades (views) qui contiendrons les composants de notre application (Zone de texte, Tableaux, Buttons, …).

Donc, nous devons principalement créer un fichier de mise en page (layout), puis créer un nouveau dossier « contacts », en fin créer des fichiers blades de notre application :

1) layout.blade.php

2) index.blade.php

3) create.blade.php

4) edit.blade.php

5) show.blade.php

Alors créons simplement le fichier suivant et mettons le code ci-dessous.

ressources/vues/contacts/layout.blade.php

Comme nous l’avons signalé, notre applications Bootstrap 5 pour la partie visuelle et Ajax pour télécharger (Uploader nos images), suivez donc le lien de cette application sur mon GitHub et télécharger l’application zippée : lupete3/Laravel10-Contact-CRUD-App (github.com).

Une fois téléchargée, décompressez l’application et rendez-vous dans le dossier « public/assets/css », donc vous allez dans votre dossier de votre application, dans le sous dossier public, créez ensuite un sous dossier assets et coller le dossier css et js que vous avez copié dans mon application téléchargée sur GitHub.

Ainsi donc, notre fichier layout.blade.php ressemblera à celui-ci :

<!DOCTYPE html>
<html>
<head>
    <title>CRUD App Laravel 10 - Pdevtuto.com</title>
    <link href="{{ asset('assets/css/bootstrap.min.css') }}" rel="stylesheet" media="screen">
    <script src="{{ asset('assets/js/jquery.min.js') }}" referrerpolicy="no-referrer"></script>

</head>
<body>
    
    <div class="container">
        @yield('content')
    </div>
    
</body>
</html>

ressources/vues/contacts/index.blade.php

@extends('contacts.layout')
 
@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>CRUD Exemple Laravel 10 pour débutants - Pdevtuto.com</h2>
            </div>
            <div class="pull-right">
                <a class="btn btn-success" href="{{ route('contacts.create') }}"> Ajouter un nouveau contact</a>
            </div>
        </div>
    </div>
   
    @if ($message = Session::get('success'))
        <div class="alert alert-success">
            <p>{{ $message }}</p>
        </div>
    @endif
   
    <table class="table table-bordered table-sm">
        <tr>
            <th>No</th>
            <th>Nom</th>
            <th>Téléphone</th>
            <th>Image</th>
            <th width="280px">Action</th>
        </tr>
        @foreach ($contacts as $contact)
        <tr>
            <td>{{ ++$i }}</td>
            <td>{{ $contact->nom }}</td>
            <td>{{ $contact->telephone }}</td>
            <td><img src="{{asset('images/'.$contact->image)}}" width = 100
alt=""></td>
            <td>
                <form action="{{ route('contacts.destroy',$contact->id) }}" method="POST">
   
                    <a class="btn btn-info btn-sm" href="{{ route('contacts.show',$contact->id) }}">Afficher</a>
    
                    <a class="btn btn-primary btn-sm" href="{{ route('contacts.edit',$contact->id) }}">Modifier</a>
   
                    @csrf
                    @method('DELETE')
      
                    <button type="submit" class="btn btn-danger btn-sm">Supprimer</button>
                </form>
            </td>
        </tr>
        @endforeach
    </table>
  
    {!! $contacts->links() !!}
      
@endsection

resources/views/contacts/create.blade.php

@extends('contacts.layout')
  
@section('content')
<div class="row">
    <div class="col-lg-12 margin-tb">
        <div class="pull-left">
            <h2>Ajouter nouveau contact</h2>
        </div>
        <div class="pull-right">
            <a class="btn btn-primary" href="{{ route('contacts.index') }}"> Retour</a>
        </div>
    </div>
</div>
   
@if ($errors->any())
    <div class="alert alert-danger">
        <strong>Attention!</strong> Vous avez des problèmes liés à vos informations .<br><br>
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
   
<form action="{{ route('contacts.store') }}" method="POST" id="image-upload" enctype="multipart/form-data">
    @csrf
  
     <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Nom:</strong>
                <input type="text" name="nom" class="form-control" placeholder="Nom">
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Téléphone:</strong>
                <input type="text" name="telephone" class="form-control" placeholder="Téléphone">
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <strong>Image:</strong>
            <input 
                type="file" 
                name="image" 
                id="inputImage"
                class="form-control">
            <span class="text-danger" id="image-input-error"></span>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 text-center">
            <button type="submit" class="btn btn-primary">Ajouter</button>
        </div>
    </div>
   
</form>
<img id="preview-image" width="300px">


<script type="text/javascript">
      
    /*------------------------------------------
    --------------------------------------------
    File Input Change Event
    --------------------------------------------
    --------------------------------------------*/
    $('#inputImage').change(function(){    
        let reader = new FileReader();
     
        reader.onload = (e) => { 
            $('#preview-image').attr('src', e.target.result); 
        }   
      
        reader.readAsDataURL(this.files[0]); 
       
    });

    /*------------------------------------------
    --------------------------------------------
    Form Submit Event
    --------------------------------------------
    --------------------------------------------*/
    $('#image-upload').submit(function(e) {
           e.preventDefault();
           let formData = new FormData(this);
           $('#image-input-error').text('');
    
           $.ajax({
                type:'POST',
                url: "{{ route('contacts.store') }}",
                data: formData,
                contentType: false,
                processData: false,
                success: (response) => {
                    this.reset();
                    alert('Image has been uploaded successfully');
                },
                error: function(response){
                    $('#image-upload').find(".print-error-msg").find("ul").html('');
                    $('#image-upload').find(".print-error-msg").css('display','block');
                    $.each( response.responseJSON.errors, function( key, value ) {
                        $('#image-upload').find(".print-error-msg").find("ul").append('<li>'+value+'</li>');
                    });
                }
           });
    });
        
</script>
        
@endsection

ressources/vues/contacts/edit.blade.php

@extends('contacts.layout')
   
@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>Modifier Contact</h2>
            </div>
            <div class="pull-right">
                <a class="btn btn-primary" href="{{ route('contacts.index') }}"> Retour</a>
            </div>
        </div>
    </div>
   
    @if ($errors->any())
        <div class="alert alert-danger">
            <strong>Attention!</strong> Vous avez des problèmes liés avec vos informations.<br><br>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
  
    <form action="{{ route('contacts.update',$contact->id) }}" method="POST">
        @csrf
        @method('PUT')
   
         <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Name:</strong>
                    <input type="text" name="nom" value="{{ $contact->nom }}" class="form-control" placeholder="Nom">
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Téléphone:</strong>
                    <input type="text" name="telephone" value="{{ $contact->telephone }}" class="form-control" placeholder="Téléphone">
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 text-center">
              <button type="submit" class="btn btn-primary">Modifier</button>
            </div>
        </div>
   
    </form>
@endsection

ressources/vues/contacts/show.blade.php

@extends('contacts.layout')
  
@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2> Afficher Contact</h2>
            </div>
            <div class="pull-right">
                <a class="btn btn-primary" href="{{ route('contacts.index') }}"> Retour</a>
            </div>
        </div>
    </div>
   
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Nom:</strong>
                {{ $contact->nom }}
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Téléphone:</strong>
                {{ $contact->telephone }}
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Image:</strong>
            </div><img src="{{asset('images/'.$contact->image)}}" width = 100 alt="">
        </div>
    </div>
@endsection

Exécutez l’application Laravel 10

Toutes les étapes requises pour cette application ont été effectuées, vous devez maintenant taper la commande ci-dessous et appuyer sur Entrée pour exécuter l’application Laravel:

php artisan serve

Maintenant, accédez à votre navigateur Web, tapez l’URL donnée et affichez la sortie de l’application de gestion des contacts avec les images :

http://localhost:8000/contacts

Vous pouvez aussi lire : Explorez MicroSoft 365 en 2023

Découvre comment gagner 20% de réduction lors de votre achat de l’hébergement chez hostinger en suivant ce lien : https://hostinger.fr?REFERRALCODE=1LUPETEPLAC11

Vous trouverez toutes les pages créées dans la partie ci-dessous:

Liste des contacts :

Ajouter un contact :

Modifier un contact :

Afficher le détail du contact :

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *