So far we have been able to successfully create and list all records. In this lesson we will be looking at how we can edit the records that we previously created.
##Step 1
As usual the first step is always to create and test the route.
Route::get('/students/{id}/edit',function($id){
return "Editing the student with id " . $id;
});
Try going to /students/1/edit.
You should see Editing the student with id 1. Laravel passes the value provided by the route as a variable. You will likely be using this feature a lot in your application.
##Step 2
Now that you have the id of the element that you wish to edit, it is now time to fetch the record. Edit the code above so that now it looks like this
Route::get('/students/{id}/edit',function($id){
$student=App\Student::findOrFail($id);
return $student;
});
In the above case. We are now fetching the record of the student from the database. The findOrFail method is included in all laravel Models.
Now visiting /students/1/edit should be able to show you the student information as a json response.
A sample response would look like the following.
{
"id": 1,
"name": "Jacob Chencha",
"email": "[email protected]",
"course": "php",
"created_at": "2016-06-06 09:29:58",
"updated_at": "2016-06-06 09:29:58"
}
The formatting may be a bit off.
##Step 3
We now need to create a view file that will show this information in a form.
To do this we need to create a new view file called edit_student.blade.php. This view file will look a lot like the new_student.blade.php The only difference will be on the action of the form and we now will use the $student variable.
NOTE:
By leaving the action element empty, the form posts to the current link.
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity_no="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity_no="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity_no="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<form role="form" method="post" action="">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" type="text" name="name" value="{{$student->name}}" />
</div>
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" type="text" name="email" value="{{$student->email}}"/>
</div>
<div class="form-group">
<label for="course">Course</label>
<input class="form-control" type="text" name="course" value="{{$student->course}}" />
</div>
<input type="hidden" name="_token" value = "{{csrf_token()}}"/>
<input class="form-control" type="submit" value="Submit"/>
</form>
</body>
</html>
##Step 4
As you may have noticed we we're using the $student variable. So lets go ahead and pass it from the route.
Route::get('/students/{id}/edit',function($id){
$student=App\Student::findOrFail($id);
return view('edit_student',['student'=>$student]);
});
When you now reload the /students/1/edit link you should be able to see your form with the values prefilled.
##Step 5
Once changes have been made to the form, then they need to be saved. Lets create a POST method that will do just that.
Route::post('/students/{id}/edit',function($id){
$student=App\Student::findOrFail($id);
$student->name= Request::get('name');
$student->email= Request::get('email');
$student->course= Request::get('course');
$student->save();
return Redirect::to('/students');
});
The flow above looks similar to the one for creating a new student record. The only exception is that now we pull in an existing record and update that record.
Once done we redirect back to all students to see the changes.
##Step 6
In the above step we we're able to edit the record by directly typing the link. That is obviously not ideal for all situations. Let us instead create links to edit the items on the main list as such.
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity_no="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity_no="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity_no="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<table class="table">
<tr>
<th>Name</th>
<th>Email</th>
<th>Course</th>
<th>Edit</th>
</tr>
@foreach($students as $student)
<tr>
<td>{{$student->name}}</td>
<td>{{$student->email}}</td>
<td>{{$student->course}}</td>
<td><a href="{{'students/'.$student->id.'/edit'}}">Edit</a></td>
</tr>
@endforeach
</table>
</body>
</html>
Note we generated the link to the edit form by joining the string and the id of the student.