0
Hello, I’m a beginner in PHP/Laravel programming and would like to include a modal for the registration and editing of database records. Follow the example:
In my index.blade.php I have:
@extends('app.layouts.basic')
@section('title', 'Liste de Clients')
@section('contenu')
<div class="col text-center" style="padding: 0px 0px 20px 0px">
<a class="btn btn-primary" href="{{ route('client.create') }}" role="button">Ajouter nouveau client</a>
</div>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Code</th>
<th scope="col">Nom</th>
<th scope="col">tva</th>
<th scope="col">Adresse</th>
<th scope="col">Code Postale</th>
<th scope="col">Ville</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
@foreach ($clients as $client )
<tr>
<td>{{ $client->id }}</td>
<td>{{ $client->nom }}</td>
<td>{{ $client->tva }}</td>
<td>{{ $client->adresse }}</td>
<td>{{ $client->cp }}</td>
<td>{{ $client->ville }}</td>
<td><a href="{{ route('client.edit', $client->id ) }}"<i class="fas fa-pencil-alt"></i></td>
</tr>
@endforeach
</tbody>
</table>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
{{ $clients->appends($request)->links() }}
</ul>
</nav>
<div style="text-align: center">
Resultats {{ $clients->count() }} sur {{ $clients->total() }} ({{ $clients->firstItem() }} à {{ $clients->lastItem() }})
</div>
@endsection
On my page Edit.blade.php:
@extends('app.layouts.basic')
@section('title', 'Ajouter un nouveau client')
@section('contenu')
<div class="container">
<form action='' method="POST">
<input type="hidden" name="id" value="{{ $clients->id }}">
@csrf
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputNom">Nom</label>
<input type="text" class="form-control" name="nom" value="{{ $clients->nom ?? old('nom') }}" id="inputNom" placeholder="Construart SPRL">
{{ $errors->has('nom') ? $errors->first('nom') : '' }}
</div>
<div class="form-group col-md-6">
<label for="inputTva">TVA</label>
<input type="text" class="form-control" name="tva" value="{{ $clients->tva ?? old('tva') }}" id="inputTva" placeholder="BE08 2139 0852">
{{ $errors->has('tva') ? $errors->first('tva') : '' }}
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputPays">Pays</label>
<select name="pays_id" id="inputPays" class="form-control">
@foreach ($pays as $pays)
<option value="{{ $pays->id }}" {{ ( $clients->pays_id ?? old('pays_id')) == $pays->id ? 'selected' : ''}} >{{ $pays->nompays }}</option>
@endforeach
</select>
</div>
<div class="form-group col-md-2">
<label for="inputCp">CP</label>
<input type="text" class="form-control" name="cp" value="{{ $clients->cp ?? old('cp') }}" id="inputCp" placeholder="1930">
{{ $errors->has('cp') ? $errors->first('cp') : '' }}
</div>
<div class="form-group col-md-6">
<label for="inputVille">Ville</label>
<input type="text" class="form-control" name="ville" value="{{ $clients->ville ?? old('ville') }}" id="inputVille" placeholder="Zaventem">
{{ $errors->has('ville') ? $errors->first('ville') : '' }}
</div>
</div>
<div class="form-group">
<label for="inputAddresse">Addresse</label>
<input type="text" class="form-control" name="adresse" value="{{ $clients->adresse ?? old('adresse') }}" id="inputAddresse" placeholder="Excelsiorlaan 16">
{{ $errors->has('adresse') ? $errors->first('adresse') : '' }}
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" name="activation" id="activation" value="2">
<label class="custom-control-label" for="activation">Active?</label>
</div>
<button type="submit" class="btn btn-primary">Enregistrer</button>
</form>
</div>
@endsection
In short, I would like you to open the modal with the contents of Edit.blade.php.
Note: I already have the bootstrap and Jquery on @extends('app.layouts.basic') and it is working perfectly, I just did not find the recipe to run the modal.
Thank you for your attention.
I’m sorry, I think I misexpressed myself. My intention is that by clicking on edit it calls the modal with the form for editing but without I have all the modal code on the index page. To get more organized code. I believe it is using the functions yeld Section... but I could not reach the solution.
– Joubert Diego