Laravel and PostgreSQL Web App PART 6

Have a Database Problem? Speak with an Expert for Free
Get Started >>

Introduction

This is part six in a tutorial series explaining how to create a Laravel and PostgreSQL web app. The previous section explained how to CREATE a new project in in the PostgreSQL database using the bootstrap modal form and Laravel. Bootstrap modal forms are used for pop-up forms that are designed to gather data from website visitors. This section will explain how to perform an UPDATE operation against the database records using the same bootstrap modal form.

Prerequisite

A thorough understanding of the previous sections of this tutorial.

Laravel and PostgreSQL Web App Part 1

Laravel and PostgreSQL Web App Part 2

Laravel and PostgreSQL Web App Part 3

Laravel and PostgreSQL Web App Part 4

Laravel and PostgreSQL Web App Part 5

How to UPDATE a record in PostgreSQL using Laravel

This section will cover how to go about performing an UPDATE operation using the same technique, via the Bootstrap Modal, explained in the previous section of this tutorial series.

Before the modal form can be used for this purpose, the “Action” button must be modified. In this case, the Edit button will be used to populate the modal form with the information required to make the modification. To do this, execute the following code:

1
2
3
4
5
6
7
8
<td>
    <button type="button"
    data-project_name="{{$proyekto->name}}"
    data-description="{{$proyekto->description}}"
    data-project_id="{{$proyekto->id}}"
    data-toggle="modal"
    data-target="#editModal" class="btn btn-primary" name="button" ><span class="fa fa-edit"  ></span>Edit</button>
</td>

Note that the above code embeds custom data attributes to hold the details of the selected record that will be updated. These attributes will be used in subsequent operations by the modal form.

Subsequently, the following code will be used to create the new modal form. Here the form will be submitted to this route: {{route('project.update','project_id')}}, including a project_id:

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
<div class="modal fade bg-warning text-dark" tabindex="-1" role="dialog" id="editModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Edit Project</h5>
        <button id="btnEdit" type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <form class="" action="{{route('project.update','project_id')}}" method="post">
            {{csrf_field()}}


            <div class="form-group">
                <label for="">Project Name</label>
                <input type="text" class="form-control" name="project_name" id="project_name">
            </div>

            <div class="form-group">
                <label for="">Project Description</label>
                <textarea type="text" class="form-control" name="description" id="description"></textarea>
                <input  type="hidden" name="project_id" id="project_id" value="">
            </div>
            <input type="submit" name="submit" value="Submit Changes" class="btn btn-success">
        </form>
      </div>

    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script >

   $('#editModal').on('show.bs.modal', function (event) {

  var button = $(event.relatedTarget) // Button that triggered the modal
  var project_name = button.data('project_name')
  var description = button.data('description')
  var project_id = button.data('project_id')
  var modal = $(this)

  modal.find('.modal-body #project_name').val(project_name)
  modal.find('.modal-body #description').val(description)
  modal.find('.modal-body #project_id').val(project_id)
});
</script>

Note that the above code pulls all of the data attributes from the edit button and then assign the attributes accordingly to the modal form.

Now, in order for the changes to take effect, the controller, route and model must be modified.

First, the model Project.php must be modified to use the $fillable command to enable the user to control which field will be affected by the update operation. This is shown here:

1
2
3
protected $fillable = [
    'name', 'id', 'user_id','description'
];

Next, configure the route by modifying the web.php file and executing the following code:

1
Route::post('update',['as' => 'project.update', 'uses' => 'ProjectsController@update'] );

Finally, configure the business logic within the ProjectsController.php controller file and execute the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
public function update(Request $request){

    $project = array(

        'name' => $request->project_name,
        'description' => $request->description,
        'user_id' => auth()->user()->id
    );

    Project::findOrFail($request->input('project_id'))->update($project);


    return redirect('/home')->with('success', 'Project Updated');

}

The above code is designed to create an array $project from the submitted data and then employs the findOrfail() method using the project_id as reference to denote what record is going to be updated.

Once updated, the application will redirect the user to the homepage displaying the changes made to the records and will provide a ‘Project Updated’ notification. This is shown in the following screenshot:

This shows the basic modification was successfully applied to the selected record.

Conclusion

This was part six in the tutorial series explaining how to create a Laravel and PostgreSQL web app. This section specifically explained how to perform an UPDATE to a record in PostgreSQL using Laravel. Part six of this series explained how to perform an update operation using the Bootstrap Modal, the same technique explained in the previous section of this tutorial series. This section of this tutorial series provided example codes used to embed custom data attributes that will hold the details of the selected records. Remember that the Action button must be properly modified before the modal form can be used for this purpose.

Pilot the ObjectRocket Platform Free!

Try Fully-Managed CockroachDB, Elasticsearch, MongoDB, PostgreSQL (Beta) or Redis.

Get Started

Keep in the know!

Subscribe to our emails and we’ll let you know what’s going on at ObjectRocket. We hate spam and make it easy to unsubscribe.