Express JS - Basic Web Programming Tasks

Below listed programming tasks are designed to practice different concepts of server side web programming using Express JS and related modules. These are to make the understanding of concepts along with their implementation clear, some of them may not represent practical requirements.

Make a header in header.ejs and include this header in all EJS pages. Add /home link in header. In same way, make a footer in footer.ejs and include this footer in all EJS pages.

1. Make a handler /queryhandler, it shall display all query string parameters sent to server at server console.
   
   
2. Make another handler i.e. /queryhandler2, on GET reuquest, it shall display all submitted request parameters to user screen using show.ejs
   
   
3. Create a form to Add New Book and serve at /add-book on GET request. Take Title, Author Name, Published Year, and Publisher Name as input fields from the user. Handle form submission using POST at same URL i.e. at /add-book, the handler shall display the submited data on user browser using show-book-info.ejs (not all request params names are known in this case)
   
   
4. Make another handler /display-req-params, it shall display all submitted request parameters in tabular form using display-req-params.ejs, no matter the params were submitted using HTTP GET or POST method. Means, you shall define two handlers, one for GET and another for POST, both mapped to /display-req-params. You can use same EJS or create two separate EJS files for each handler. (Assume you don't know the parameter names, so you must display all params dynamically, in this tasks). Make a form to test this handler e.g. /dynamic-params-form ... add this form link to /home.ejs too. This form shall be submitted to /display-req-params handler.
   
   
5. Use static resources middleware and serve Bootstrap CSS file, Jquery Js file, your own JS and CSS, and some example images. Show these images home.ejs at /home
   
   
6. Define /cookie1, it shall store 2 cookies in user browser. Update handler such that, when browser send these cookies back to server, the handler shall display thier values to user using cookie1.ejs file. I suggest to use cookie names: token and last_visit_timestamp. When browser send these cookies, display after how many seconds user visited the /cookie1 page (by subtracting current time from time stored in last_visit_timestamp cookie). On each request to /cookie1, update the value of last_visit_timestamp. Refresh the page multiple times after random interval to validate its working correctly.
   
   
7. Make a form to add cookie and serve at /add-cookie. It shall have two text input fields i.e. Cookie Name and Cookie Value. When the form is submitted, save the cookie in user browser. After Cookie is added, redirect to /home. Add link of Add Cookie form at home page.
   
   
8. Display a form to Remove Cookie at /remove-cookie. It shall take cookie name as text input from user, when the form is submitted, the POST handler on same URL shall remove that cookie from the user browser and redirect to /home. Add Remove Cookie page link at home page.
   
   
9. Make AJAX variant of /remove-cookie too that shall allow user to remove cookie using AJAX. Serve the form at /remove-cookie-ajax. Add link at home page too of Remove Cookie using AJAX. Add required handler at server side that shall handle the AJAX request to remove cookie. Send required data e.g. cookie name, to be removed to AJAX call handler.
   
   
10. Create /show-cookies that shall display all cookies sent by browser in tabular form. Add Show Cookies link at home page i.e. /home.
    
    
11. Topic: Session Handling. When user visit any web page defined above via GET, save that page Name and URL in session in the form of an array of objects, where each object shall have Page Name and Page URL. Make footer.ejs and include it in every EJS file, it shall display list of recently visited 10 Web Pages as hyperlink in footer, each in separate row. When clicked, open that page. At end of Recently Pages list, add "Remove All" link, when clicked, make the Recently Visited Pages list empty in session. On right side of each link, add X, when clicked it shall remove only that URL from the session. Define appropriate handler to manage the delete operation. After every operations, redirect to /home. If a user visit a page that is already visited, you shall remove the earlier page and add new at top, so that recently visited pages are displayed at top and same pages are not displayed repeatedly.
    
    
12. Make a JS operations.js that shall work as module. Fom this module, export add(user), update(userID, userObj), delete(userID), get(userID) and getAll() methods. Take required parameters in these methods as per operation it perform (btw, I have mentioned to give you an idea). These methods shall perform the said operations on users.json file. You can take any 3-4 common attributes for each user object. Create app.js script that shall 'require' the operations.js module. Add a handler /operations-demo, call all methods passing required data in the form of literals. And at the end, display all users data on webpage using EJS. The ideas is, you should understand how to decouple data saving and retrieval logic from HTTP request handlers. It would help you to appreciate the design in which we try to keep our controller/request-handlers thin. Add /operations-demo link at /home page.
    
    
13. Topic: Cookies. Create a handler for GET request at /cookies-manager, it shall display all cookies names in first column and their values in second column, both as editable text input fields. When user update the cookie names or values and submit the form, handle submission using POST at /cookies-manager such that, it shall update cookies as per updated information submitted. If user removed or empty any cookie name in text field in first column, that cookie shall be deleted from the browser.
    
    In third column, add a link Remove, when clicked, only the cookie of that row shall be deleted using AJAX. In third column, also Add a submit button, when clicked on that row cookie information shall be submitted to server using POST at /update-cookie which shall update or remove only that cookie. and redirect to /cookie-manager. 
    
    At top of the page, provide a link to /add-cookie page too to let user Add New cookie.
    
    Add link of /cookies-manager at /home too.