Create an Address Book using Express and EJS

 Create an application using Express, the application shall have following features:

Make a JSON file named users.json. It shall be an array of objects where each object shall represent a contact person detail. Only 2-3 records are sufficient. Use following fields for each object: name, gender, email, city, phone number. Below given description is about different operations that you shall implement in your app to perform CRUD operations on file.

  1. List all records: 
    At /home ... list only contact persons' names in tabular form. The table shall have columns: ID, Name, Operations. Display user ID in ID column, Operations column shall have two links or buttons i.e. Update, Delete. When these links or buttons are clicked, pass user id to /update and /delete handler.

  2. Update Record
    When user click Update link or button, GET request shall be sent to server to URL pattern /update. Pass user id as query-string e.g. /update?id=10. The /update handler shall open the Update Form where earlier contact info shall be pre-filled in the form. After updating the information in form, when user click the submit button. Send POST request to server at /update, the handler shall update that user record in users.json file. Handle gender and city as radio button and drop down list. You can choose the field type for rest of properties as seems fit.

  3. Delete Record
    When user click the Delete button in users lists displayed at /home, send POST request to /delete passing user ID as request parameter. This parameter shall be auto submit to server, do not take user ID as input from user. The handler shall delete that user object from users.json file.

  4. Add New Record
    Add a link at /home page Add New Contact, when clicked, send GET request to /add that shall render an HTML form to add new contact. When the form is submitted, handle the POST request at /add that shall add a new user object in users.json file. 

  5. Show Single Record
    When user click person name at /home page, show all fields information of that user by sending GET request at /show. Pass user ID as request parameter as query string to identify the user at server side. You can display users fields in tabular form and whatever way you like. Displaying all user fields is mandatory.

  6. Use Bootstrap to make your form, tables, buttons, header, and links etc.

After you are done with above operaitons. Secure the app adding following features:
  1. Make a /login handler, on GET request, it shall display a login form. On POST request at same, it shall read submitted credentials and compare with valid credentials (assume admin and abc123 are the user-name and password). If the submitted credentials are correct, save some information in session to keep track that 'user is logged in'. If the submitted credentials are incorrect, redirect to login page and display message 'Invalid user name or password.' at top of login form.

  2. At /home (explained already), display Add New Record link and Operations column only if the user is logged in. Otherwise, display only current contacts listing in tabular form but do not let user to update or remove records.

  3. Not display operations link in browser is not enought. User can directly type update?id=10 or delete?id=10 etc. in address bar. So, secure all the related handlers too, for example if a not-logged-in user send request to delete or update or add, show appropriate message e.g. "You are not authorized to perform this operation, please login." and redirect user to login page. You shall display this message at top of login page, when user try to access a protected handler.

  4. In last part, I asked to delete user record making a POST request that refresh the page. Please update that implementation, such that, if user is logged in, Delete request shall be processed using AJAX i.e. record shall be deleted from server and that row shall be be deleted from contacts table displayed at /home, but page shall not refresh. Use Bootstrap utility method to make AJAX call. Send DELETE request to server, as this request delete a resource at server. Do not send POST request.

Comments