Diagram for Contact Management System
This is a medium to complex case study, Perform client side
validations and show the validation errors to the client
Screen 1: Login Form: This is like a home page which is shown to user
Before login user has to register hence user will click on Create Profile which will show below screen;
Screen2: Registratio Form, if you try to missout any field a validation error must be shown in the
page
When user registers it redirects to login as below
Now the user will login with 5021 and password which will
not have any contacts by default, when he logs in if the
authentication fails below would be the error.
When the user enters correct userid and password user will
be taken to dashboard
Notice the paths like profile/5021/dashboard, and the
Total Contacts in the dashboard, settings link, profile
summary,
When you go to add contacts you will
You can add contacts, but notice the url it always have
the userId after profile like profile/5021/addContacts,
you can add contacts now
Now you can click on dashboard that shows the contact
count as 1, earlier it was 0, you can add any number of
contacts
Again notice the url which has the 5021, you will always
have the userId in the url that’s how you will make a call
to the back end server, After adding few more user this
would be the dashboard
Show all contacts will show you below details
You will see a delete button and also the url is now
profile/5021/showAllContacts
If you delete contact you will see a message
When you delete all contacts you will see the message like
below
You can change the profile by visiting the settings which
is a drop down like below:
When you click on change password you will go to update as
below, here you can update the password if you want
After updating the password
You can also delete profile if you want by going to delete
profile in the settings that looks as below
If you click on Confirm it will delete the profile and
automatically go to Login page, just to keep the profile
in database it is not deleted but if you wish to delete
you would not able to login and also all contacts will be
erased automatically.
Search Contacts link, Assuming you have these below 4
contacts in the database
Now if you enter C you would only see the contacts
starting with C as below:
You can delete the contact if you would like, this search
component make use of show all components internally
If the matching records not found below would be the error
message it can show
Now you can logout: It will show you login page again
You can enhance the application to update the user phone,
dob, update the contact details also.
