Scribd
Upload
26 views9 pages

Contact Management Front End

This document outlines the user flows and screens for a contact management system. It details screens for login, registration, adding and viewing contacts, searching contacts, and account settings including password updating and profile deletion.

Uploaded by

Nilutpal Borah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views9 pages

Contact Management Front End

This document outlines the user flows and screens for a contact management system. It details screens for login, registration, adding and viewing contacts, searching contacts, and account settings including password updating and profile deletion.

Uploaded by

Nilutpal Borah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

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.

You might also like