Express JS - Server Side Basics and Form Handling

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. 3.1
    Create a form that shall let user to add new book, serve the form at /add-book URL. Let user input Book Title, Author Name, Published Year and Publisher Name. Handle form using POST at same URL. When the form is submitted, display all submited information on next page, use show-book-info.ejs for this.

    3.2
    Update above form such that it shall let user to upload book picture. Save the picture at server in /public/images folder when the form is submitted. Update handler and template that it shall also display the submitted picture. (Use express-fileupload or some other package for handling the file upload).

    3.3
    The URL /dashboard page shall display list of books added so far in a tabular form with Update and Remove link in actions column. When Update link is clicked, serve update form to update the book. When Remove link is clicked, remove that book at server using AJAX DELETE request. On /dashboard page, put Add New Book link that shall lead to /add-book page.

    Store books records in a JSON file at server side e.g. books.json to preserve books data accross browser requests and server restarts. (Use writeFileSync and readFileSync method of fs module to write and read JSON file, see express0 folder for code samples)
     
  4. Create two handlers for /display-req-params to display all submitted request parameters dynamically in tabular form, regardless of HTTP GET or POST method. Use display-req-params.ejs for rendering.
    • Add a form at /dynamic-params-form to test the handler.
    • Link this form from /home.ejs.
    • Submit the form to /display-req-params to display parameters.
    • You can use the same EJS template or separate ones for GET and POST.

  5. Use static resources middleware and serve Bootstrap and JQuery files, your custom CSS/JS files along with some images. Show these images at /home using home.ejs you can also integrate Bootstrap in above task.

  6. 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.

  7. 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.

Comments

Post a Comment