[SOLVED] Web322 assignment 4 build upon assignment 3 by refactoring our code to use the ejs template engine in order to render our data (instead of sending the json back to the client).

Build upon Assignment 3 by refactoring our code to use the EJS template engine in order to render our data (instead of sending the JSON back to the client).  Additionally, we will incorporate a random quote from the “Quotable” API

If you require a clean version of Assignment 3 to begin this assignment, please email your professor.

 

NOTE: Please reference the sample: https://as4-322-sample.vercel.app  when creating your solution.  The UI does not have to match exactly (e.g., the font, size, theme, the sites shown in the home page cards, etc.), but the basic functionalities and UI components must be implemented as shown in the sample app using the code or approaches discussed in class or as specified, e.g., navbar, card, layouts of the page and the content in the card and table, etc…

 

Since the major focus of this assignment is using EJS, the first step will involve correctly installing it and configuring it in our server.js file, ie:

 

Once this is complete, we can now change all of our “.html” files (ie: “home.html“, “about.html“, “404.html“) to use the .ejs extension instead.  Unfortunately, this means that any code that we have in our server.js to “send” the html files, ie:

res.sendFile(path.join(__dirname, “/views/home.html”));

will no longer work (since the file should now be “home.ejs”).  To remedy this, change all of your “res.sendFile()” functions to “res.render()“.  For example, in the above case (for home.html) the new code would be:

res.render(“home”);

 

If you test your server now, you should not notice any changes in the browser (ie: the “about”, “home” and “404” pages are all rendered correctly).

 

However, changing the filenames from .html to .ejs means that our code to “build” the main.css file using the command: “npm run tw:build” results in the following message:

“warn – No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.”

 

This is because in our tailwind configuration, we’re looking for .html files.  As a result, the build process does not find any utility classes and does not correctly generate our main.css file.

To fix this, we will change the line in tailwind.config.js:

content: [`./views/*.html`], // all .html files

 

to instead read:

 

content: [`./views/**/*.ejs`], // all .ejs files

 

This will ensure that all .ejs files in the “views” folder (including sub-directories) will be found during our tailwind build step.

 

 

Since we are using a template engine that supports “partial” views, we should take this opportunity to move some common HTML, used across all pages, into a “partial” view.  In our case, this is the navbar:

 

Since every one of our view files share the same navbar structure, copy the complete navbar code from one of your views (ie: “home.ejs”) – in the demo, this is the <div class=”navbar bg-base-100″> … </div> <br /> elements.  Paste this code in your “navbar.ejs” file.

 

Once this is complete, you can replace the navbar code in your views with the include statement for the “navbar” partial:

 

<%- include(‘partials/navbar’, {page: ”}) %>

 

You should be able to run your server now and see that it is once again running as before (note: you may have to run npm run tw:build each time after you add daysiUI components or update values of the class attribute).  However, you will notice that the navbar element for “about” is not highlighting correctly.

 

To correct this, we should add a “page” parameter to our partial view code that matches the link in the navbar that we wish to highlight, ie:

 

<%- include(‘partials/navbar’, {page: ‘/about’}) %>

 

for the “about” view.

 

NOTE: We must always include some value for “page”, even if there’s no corresponding link in the navbar (ie: we can use {page: ”} for 404, etc).

 

To make sure the correct element in the navbar is highlighted within the partial view, we need to update each of our <a>…</a> elements to conditionally add the ‘active’ class depending on the value of the “page” parameter.  For example:

 

<a href=”/about”>About</a>

 

becomes

 

<a class=”<%= (page == “/about”) ? ‘active’ : ” %>” href=”/about”>About</a>

 

and similarly, remove the Region dropdown

 

<li>

    <details>

        <summary>Region</summary>

        <ul class=”p-2 bg-base-100″>

            … …

    </details>

 </li>

 

and change it to

 

<li><a class=”<%= (page == ‘/sites’) ? ‘active’ : ” %>” href=”/sites”>View Site Collection</a></li>

 

 

Currently, the “/sites” route still returns the JSON data only.  For this assignment, we will update this so that it shows a table of Site data instead (see: https://as4-322-sample.vercel.app/sites).  To begin, create a new “sites.ejs” file within the views folder.

 

As a starting point for the HTML in this file, you can copy / paste the HTML from an existing view such as “404.ejs”.  Next, change the header (“hero” element) text to something more appropriate (ie: “Site Collection”) and ensure that the “navbar” partial uses {page:”/sites”}.

 

To begin testing this route, change the server.js code defining your GET “/sites” route so that it renders the new “sites.ejs” file with the data instead of sending it directly (assuming it’s stored in the variable “sites”), ie:

 

change res.send(sites); to res.render(“sites”, {sites: sites}); // or res.render(“sites”, {sites});

 

This will ensure that the “sites” view is rendered with the sites data stored in a “sites” variable.

 

 

Now that the view is rendering with the “sites” data, we must display it in a table with the following data in each row:

 

HINT: See “Iterating over Collections” for help generating the <tr>…</tr> elements for each Site in the “sites” array

 

 

 

When testing your site, you should now see all of your Site data rendered in a table!  However, the heading (“hero” element) is still a little plain.  To fix this, add some hard-coded links to filter your table by specific regions (e.g. “Atlantic Region”, “Central Canada”, “Prairie Provinces”, etc) or by specific province or territory (e.g. “Ontario”, “Quebec”, “Yukon”, etc) – (see: https://as4-322-sample.vercel.app/sites)

 

 

Currently, the “/sites/id” (where id matches the “siteId” of a specific site), still renders the JSON formatted data.  As in step 3, we must update this to show detailed Site data instead (see: https://as4-322-sample.vercel.app/sites/AB002).  To begin, create a new “site.ejs” file within the views folder.

 

As a starting point for the HTML in this file, you can copy / paste the HTML from an existing view such as “about.ejs”.  Next, change the header (“hero” element) text to contain empty <h1> and <p>(we will dynamically add these later) and ensure that the “navbar” partial uses {page:””} (since there’s no matching page in the navbar).

 

To begin testing this route, change the server.js code defining your GET “/sites/:id” route so that it renders the new “site.ejs” file with the data instead of sending it directly (assuming it’s stored in the variable “site”), ie:

 

change res.send(site); to res.render(“site”, {site: site}); // or res.render(“site”, {site});

 

This will ensure that the “site” view is rendered with the site data stored in a “site” variable.

 

 

If we test the server now, we will see that each individual site renders the same page without any specific site data.  To fix this, ensure that the following data from the “site” object is rendered on the page – (see: https://as4-322-sample.vercel.app/sites/AB002)

 

Below the “hero” element, add a responsive grid system containing 2 columns and rendering the data as shown on the sample page:

 

<script>

document.addEventListener(“DOMContentLoaded”, ()=>{

 

/* TODO: “fetch” the data at: https://quotable.io/random and update an element in the DOM with the “content” and “author” */

 

});

</script>

 

 

 

At this point, most of the updates to the site have been completed – you should now be able to view the list of sites in a table, featuring images and links to individual sites, which are also rendered as HTML.  However, there are some usability tweaks that we should add, including:

 

 

Since we no longer require the “Region” dropdown in the navbar, it can be removed.  Instead, add a “View Site Collection” menu item that links to “/sites” before the “About” menu item.  Also, do not forget to dynamically add the “active” class:

 

<li><a class=”<%= (page == “/sites”) ? ‘active’ : ” %>” href=”/sites”>View Site Collection</a></li>

 

NOTE: Do not forget to update both the regular and responsive navbar, as these links are duplicated.

 

 

There are a number of situations where it is appropriate to show a 404 error, ie: when sites with a specific region, provinceOrTerritory, or id aren’t found, or a route hasn’t been defined. Because of this, it makes sense to show a different 404 message to the user depending on the type of error they have encountered.  To achieve this, we should render the 404 view with a “message” property.  For example: instead of

 

res.status(404).render(“404”);

 

use something like:

 

res.status(404).render(“404”, {message: “I’m sorry, we’re unable to find what you’re looking for”});

 

Now, in your “404.ejs” file, you can reference the “message” property using <%= message %>.

 

Finally, once this is complete, be sure to render the “404” error with an appropriate error message (ie: the message returned from a rejected promise when attempting to find a specific Site) in the following situations:

 

 

 

Finally, once you have tested your site locally and are happy with it, update your deployed site by pushing your latest changes to GitHub.

 

/********************************************************************************

*  WEB322 – Assignment 04

*

*  I declare that this assignment is my own work in accordance with Seneca’s

*  Academic Integrity Policy:

*

*  https://www.senecacollege.ca/about/policies/academic-integrity-policy.html

*

*  Name: ______________________ Student ID: ______________ Date: ______________

*

*  Published URL:

*

********************************************************************************/