- 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.
- All fields are required. Failure to which a user should get a relevant error showing on the screen.
- First name and last name must be characters only.
- Date of Birth must capture Date only. Gender should be a radio button field. Validate the email address field as well.
- The file upload should be stored on the file system. All other fields should be stored on the database with well designed relational tables.
- Your system should implement CRUD(Create, Read, Update, Delete) from the PHP webpage and not Database end.
Users Management Demo by Lucentinian Works Co Ltd
What is this demo about?
This demo is prepared based on the next requirements:
Find details about our implementation in below.
User editor panel
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 usersEntry point: /api/userMethod: GETResponse on success: a JSON list with summarized user objects.
-
Create userEntry point: /api/userMethod: POSTPost 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 detailsEntry point: /api/user/{id}Method: GETResponse on success: an JSON object with the updated user object.Response on fail: http/404 not found.
-
Update userEntry point: /api/user/{id}Method: PATCHPost 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 userEntry point: /api/user/{id}Method: DELETEResponse on success: an empty JSON list.
-
Get user's pictureEntry point: /api/user/{id}/picMethod: GETResponse on success: the picture if the user existsResponse on fail: http/404 not found.
-
Update user's pictureEntry point: /api/user/{id}/picMethod: POSTThe content type for this request must be multipart/form-dataRequest 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 objectFields:
- id: integer
- first_name: text
- last_name: text
- phone_number: text
- email_address: text
-
New user objectFields:
- 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 objectFields:
- 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