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. (they are stored in req.query obeject)
   
   
2. Make another handler i.e. /queryhandler2, on GET request, it shall display all submitted request parameters to user screen using show.ejs (in this case, you just need to pass req.query to the template)
   
   
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. The handler shall display the submited data on browser using show-book-info.ejs (in case of POST request, you need to read request data from req.body and body-parser middleware should be setup for this).
   
   Afte are done with above, update form such that it shall let user to upload book title page picture . Receive that picture at server side when you handle the form. And store that picture in some folder at server e.g. /images etc. When you render, show-book-info.ejs template, also display the book picture. (Use https://www.npmjs.com/package/express-fileupload or any other package for handling the file upload).
   
   After you are done with above. Make /dashboard page, that shall list all books added so far, in a tabular form with Update and Remove link in each row. When Update link is clicked, serve update form to update that book information. When Remove link is clicked, remove that book. On top of /dashboard page, add  Add New Book link, when clicked, server already created /add-book page. You can store books records in a JSON file at server side, so that data books data is preserved accross server restarts. (you can use writeFileSync and readFileSync method of fs module to write and read text file, code sample are already stored in express0 folder)
   
   
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.