Users Management Demo by Lucentinian Works Co Ltd

What is this demo about?

This demo is prepared based on the next requirements:
  1. Design a PHP webpage with the following fields: first name, last name, Date of Birth, phone number, password, email address, gender and upload profile picture.
  2. All fields are required. Failure to which a user should get a relevant error showing on the screen.
  3. First name and last name must be characters only.
  4. Date of Birth must capture Date only. Gender should be a radio button field. Validate the email address field as well.
  5. The file upload should be stored on the file system. All other fields should be stored on the database with well designed relational tables.
  6. Your system should implement CRUD(Create, Read, Update, Delete) from the PHP webpage and not Database end.
Ref: https://www.facebook.com/groups/2322832835/permalink/10157871154867836/
Find details about our implementation in below.

User editor panel

IDNew user
First Name
Last Name
Date of birth
Phone number
Password
  • Mandatory for new users
  • Editing users will update password
Email address
Gender

List of users

Initializing...

About our implementation

This is a single page application using jQuery for manipulating the DOM and for making the AJAX requests to the server.

A RESTful API has been define to exchange data with the sever.

The back-end is supported by a MySQL database.

To provide more flexibility:

  • Name fields accept diacritics
  • Data of birth can be manually edited, not only by the pop-up calendar
API definition

Data must be submitted to the server using the content type application/x-www-form-urlencoded; charset=UTF-8 unless another type is required.

  • List users
    Entry point: /api/user
    Method: GET
    Response on success: a JSON list with summarized user objects.

  • Create user
    Entry point: /api/user
    Method: POST
    Post a full new user object, all fields are mandatory.
    Response on success: a JSON object with the ID of the new user like {"id":"40"}.

  • Get user full details
    Entry point: /api/user/{id}
    Method: GET
    Response on success: an JSON object with the updated user object.
    Response on fail: http/404 not found.

  • Update user
    Entry point: /api/user/{id}
    Method: PATCH
    Post only the fields you want to update using the fields defiend at the new user object.
    Response on success: an JSON object with the updated user object.
    Response on fail: http/404 not found.

  • Delete user
    Entry point: /api/user/{id}
    Method: DELETE
    Response on success: an empty JSON list.

  • Get user's picture
    Entry point: /api/user/{id}/pic
    Method: GET
    Response on success: the picture if the user exists
    Response on fail: http/404 not found.

  • Update user's picture
    Entry point: /api/user/{id}/pic
    Method: POST
    The content type for this request must be multipart/form-data
    Request body: the picture for this user.
    Response on success: empty.
    Response on fail: http/404 not found.

Object definitions
In this section we define the field name and a brief description.
  • Summarized user object
    Fields:
    • id: integer
    • first_name: text
    • last_name: text
    • phone_number: text
    • email_address: text

  • New user object
    Fields:
    • first_name: latin characters, blanks, dots or quotes
    • last_name: latin characters, blanks, dots or quotes
    • date_of_birth: mm/dd/yyyy format
    • phone_number: anything goes
    • password: anything goes
    • email_address: email format
    • gender: male, female or other

  • Updated user object
    Fields:
    • id: user identifier
    • first_name: text
    • last_name: text
    • date_of_birth: mm/dd/yyyy format
    • phone_number: text
    • email_address: text
    • gender: male, female or other

2020-2024 © Lucentinian Works Co Ltd