Web Applications in PHP

EXERCISE: Admin: users

Basic version

Preparation

  • Create a new resource controller class UserController.php in the folder app/Http/Controllers/Admin:
    php artisan make:controller Admin/UserController --model User
  • Add the routes to routes/web.php: Route::resource('users', 'Admin\UserController');
VERB URI Controller Method Comment
GET admin/users index Display a listing of the resource
GET admin/users/create create Show the form for creating a new resource
Redirect to admin/users
POST admin/users store Store a newly created resource in storage
GET admin/users/{user} show Display the specified resource
Redirect to admin/users
GET admin/users/{user}/edit edit Show the form for editing the specified resource
PUT admin/users/{user} update Update the specified resource in storage
DELETE admin/users/{user} destroy Remove the specified resource from storage

Create new user

  • This part is optional, because we already have a registration form that inserts a new user

Master page

  • Show a table listing all the users (name, email, active, admin) with an edit and delete button
  • Add some pagination to the page (we have more than 40 users)
  • Add a basic form
    • Text field to search for a user name OR his email
    • Select list to sort on name (ascending or descending), email (ascending or descending), not active users or admin users
    • Remember the old values of the form fields
    • If no user is found, show an appropriate message to the user

Edit a user

  • Create a new page with a form to update all database columns (except the password) for the user
    • Remember the old values of the form fields
      • Make sure that the old values of the checkboxes are correct!
    • Don't forget the server side validation!
    • After a successful submission, redirect to the "original" (without filter and with the default sort method) master page and show a success alert at the top of the page

Delete a user

  • Ask for confirmation using a Noty confirm
  • After deletion of the user, redirect to the "original" (without filter and with the default sort method) master page and show a success alert at the top of the page

REMARK

  • It should not be possible to update your own profile through this user CRUD, as you could lock yourself out of (the admin section of) the application by removing your admin rights or deleting yourself
    • Disable the edit and delete buttons on your personal row in the table on the master page (client-side)
    • Implement some extra checks (server-side) that prevent updating or deleting your own profile

Example video of basic user CRUD


Advanced version

Preparation

  • Create a new resource controller class User2Controller.php in the folder app/Http/Controllers/Admin:
    php artisan make:controller Admin/User2Controller --model User
  • Add the routes to routes/web.php:
    Route::resource('users2', 'Admin\User2Controller', ['parameters' => ['users2' => 'user']]);
VERB URI Controller Method Comment
GET admin/users2 index Display a listing of the resource
GET admin/users2/create create Show the form for creating a new resource
Redirect to admin/users2
POST admin/users2 store Store a newly created resource in storage
GET admin/users2/{user} show Display the specified resource
Redirect to admin/users2
GET admin/users2/{user}/edit edit Show the form for editing the specified resource
Redirect to admin/users2
PUT admin/users2/{user} update Update the specified resource in storage
DELETE admin/users2/{user} destroy Remove the specified resource from storage

REMARK

  • Laravel tries to use the singularized version of the first argument (resource name) of the Route::resource() command to construct the route parameters
    • See e.g. the routes in the basic CRUD
      • resource name = users
      • parameter used in routes = user (e.g. the route admin/users/{user}/edit to show the form for editing a specific user)
  • However, Laravel is unable to determine the singularized version of users2, and therefore, the resulting routes will not work, unless we include ['parameters' => ['users2' => 'user']] as an extra argument in the Route::resource() command!
  • Add a menu-item ' Users (advanced)' to the admin part of the navigation

'extra menu-item'

Master page

  • Similar to the basic version

REMARK

Note that the table with all users should NOT be implemented with jQuery/AJAX (in contrast to what we did in Admin: genres (p2) -> Master page with the controller method qryGenres() and the JavaScript function loadTable()), because this would be quite difficult with the search form/pagination on our master page

Edit a user

  • Show a Bootstrap modal with a form to update all database columns (except the password) for the user

TIP

Use jQuery traversing techniques and CSS classes to "transfer" the data (name, email, ...) of a specific user (row) from the master page to the input fields of the bootstrap modal. This is easier than using data-attributes (as we won't reload the master page/user table after an update, these data-attributes have to be adjusted as well in your script after a user update).

  • Don't forget the server side validation!

'errors via Noty' 'errors on form'

  • After a successful submission, the modal disappears. The master page is NOT reloaded! Instead, you use some JavaScript/jQuery to update the table row of the updated user (and make the table in sync with the database) on your current page. Also a Noty success toast is shown.

TIP

To update a specific user row in the table, you can add the necessary data (id, name, email, ...) to the array returned by the response()->json() method in the controller method update() OR get the data from (the input fields of) the bootstrap modal

Delete a user

  • Ask for confirmation using a Noty confirm
  • After deletion of the user, the master page is NOT reloaded! Instead, you use some JavaScript/jQuery to delete the table row of the deleted user (and make the table in sync with the database) on your current page. Also a Noty success toast is shown.

Example video of advanced user CRUD

  • As the master page (search function and pagination) is similar to the basic user CRUD, the video below focuses on the adjusted way of editing/updating and deleting a user

Expert version

Background information

Example video of expert user CRUD


Last Updated: 12/8/2019, 9:40:16 PM

←