Views: Write Draft For Introduction #27618

jasonHYLam · 2024-03-15T14:42:08Z

Because

This is a draft of the introduction of the new "Views" lesson for the NodeJS revamp.

This PR

Explains what Views are, in context of MVC.
Introduced EJS as a template engine to create views.

Issue

Related to #27616
Closes #XXXXX

Additional Information

Pull Request Requirements

I have thoroughly read and understand The Odin Project Contributing Guide
The title of this PR follows the location of change: brief description of change format, e.g. Intro to HTML and CSS lesson: Fix link text
The Because section summarizes the reason for this PR
The This PR section has a bullet point list describing the changes in this PR
If this PR addresses an open issue, it is linked in the Issue section
If any lesson files are included in this PR, they have been previewed with the Markdown preview tool to ensure it is formatted correctly
If any lesson files are included in this PR, they follow the Layout Style Guide

…it-test into node_revamp

Removed the sentence stating that "views are the UI that the user interacts with", which I thought might be misleading.

Added an explanation that views need to be rendered at the end of controller functions.

I was unable to get the example to work using the Script tag, so this example will be rewritten with a different method of passing data.

Previously the EJS with Express example was written with data defined in a script tag. However this did not work, and so was modified such that data is defined in app.js, and passed down into the navbar component.

01zulfi

@jasonHYLam Amazing lesson 🔥 🔥 🔥

I've left a lot of comments, check them out below.

I particularly like the reusable section and the code examples are great as well. This is going to be a great addition to the curriculum.

nodeJS/express/views.md

01zulfi · 2024-03-30T10:42:44Z

nodeJS/express/views.md

+<div class="lesson-content__panel" markdown="1">
+
+1. A RESOURCE ITEM
+   - AN INSTRUCTION ITEM
+1. A PRACTICE ITEM
+   - A TASK ITEM
+
+</div>


We should add relevant documentation from the Express site, and a couple of practice assignment items, like: "Add a view for an about page which should render on the /about route"

I've just added a few assignment items, including a resource from Express regarding template engines (I've addressed that it uses Pug rather than EJS), and to create and add some components. Sorry for the delay!

MaoShizhong

Small thing - as of #27720 and #27723, we now have a formal rule to use the full name for languages like js with codeblocks.
So if you could change any ```js to ```javascript, that'd be awesome.
The same will apply for rb => ruby, md => markdown and txt => text, for reference.

Co-authored-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

Co-authored-by: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com>

nodeJS/express/views.md

MaoShizhong · 2024-04-13T16:51:51Z

nodeJS/express/views.md

+1. Read through the [Express resource on template engines](https://expressjs.com/en/guide/using-template-engines.html). The resource uses Pug for the examples which has a different syntax, however the information should still be a useful supplement to this lesson.
+2. Add a view for an about page, which should render on the `/about` route.
+3. Create a reusuable footer component and render it in the `/` route. 


Linting errors here will need addressing

I'm not sure what the linting error is, is it regarding the extra space at end of the 3rd line? I'll resolve that but please let me know if there are any other errors.

The 3 linting errors for this part at not using lazy numbering for ordered lists and the trailing space at the end of line 163.

You can see the linting errors as annotations in the Files changed tab up top.

nodeJS/express/views.md

Co-authored-by: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com>

Co-authored-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

MaoShizhong · 2024-04-15T13:50:51Z

Just a note that we're not really sure why GitHub is flagging the "unchanged files with check annotations" thing all of a sudden (it's happened midway through a few other PRs as well). Not entirely sure if there's anything we can do on our end since it's a GH beta feature (but there've already been issues elsewhere from other annoyed people about the feature XD Would be nice if they just noted those files but not also force an action run on them, contaminating the PR with unrelated files...)

MaoShizhong

Mainly just linting/formatting-related matters.

There are also still a fair few mentions of "components" which will probably be better called "templates" as per the docs' terminology.

Amazing work, I really must stress. These are all mainly just consistency/style things.

nodeJS/express/views.md

Co-authored-by: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com>

…it-test into node_revamp

01zulfi · 2024-05-04T08:35:17Z

nodeJS/express/views.md

+<div class="lesson-note lesson-note--tip" markdown="1">
+
+#### Directories within the views folder
+
+We can have nested directories of EJS template files within the views. For example, to render the template file `./views/user/show.ejs`, we'll need to provide the relative path like so:
+
+```javascript
+// in res.render
+res.render("user/show");
+
+// in include
+include("user/show");
+```


we missed the closing div tag for this.

can you add it please

Thanks for spotting that, I've added a closing div tag just above Serving Static Assets. Let me know if that's correct or if it was needed somewhere else.

01zulfi

lgtm 🚀 🚀

prodijay777 added 4 commits September 4, 2023 15:45

Create testFile.md

a31d239

Change Added File

c5fe72e

Write Views Introduction Draft

02a6a59

Merge branch 'main' into node_revamp

3450d33

github-actions bot added Content: JavaScript Involves the JavaScript course Content: NodeJS Involves the NodeJS course labels Mar 15, 2024

jasonHYLam and others added 4 commits March 15, 2024 14:42

Delete javascript/testing_javascript/testFile.md

b815dcd

Add EJS Installation And Syntax And Example

a06eea4

Delete Test File

0a360d6

Merge branch 'node_revamp' of github.com:prodijay777/TOP-curriculum-g…

56a701d

…it-test into node_revamp

CouchofTomato marked this pull request as draft March 18, 2024 14:00

jasonHYLam marked this pull request as ready for review March 19, 2024 14:35

01zulfi added the Project Node Revamp Issues/PRs related to the Node Revamp project label Mar 19, 2024

01zulfi self-requested a review March 19, 2024 17:15

prodijay777 added 12 commits March 20, 2024 10:40

Add Example Of Using EJS With Express

08bebe2

Add Examples Of Include Command

9fe9fd8

Add Case For Includes Tag With Header And Footer

f6c63b8

Add Knowledge Checks And Add To Intro

c3414cb

Remove Confusing Sentence From Intro

5317d7c

Removed the sentence stating that "views are the UI that the user interacts with", which I thought might be misleading.

Add To Introduction

df69247

Added an explanation that views need to be rendered at the end of controller functions.

Merge branch 'main' into node_revamp

1d38a65

Remove Script Tag From EJS Express Example

f5eebba

I was unable to get the example to work using the Script tag, so this example will be rewritten with a different method of passing data.

Rewrite Example To Include Data In App.js

ea62a7b

Previously the EJS with Express example was written with data defined in a script tag. However this did not work, and so was modified such that data is defined in app.js, and passed down into the navbar component.

Merge branch 'main' into node_revamp

4cf7f06

Add EJS Tutorial To Additional Resource

1fb4572

Add Sentence about EJS Syntax Similarity To HTML

12376a8

01zulfi self-assigned this Mar 28, 2024

01zulfi requested changes Mar 30, 2024

View reviewed changes

01zulfi removed the Content: JavaScript Involves the JavaScript course label Mar 30, 2024

MaoShizhong reviewed Apr 1, 2024

View reviewed changes

jasonHYLam and others added 7 commits April 13, 2024 14:07

Update nodeJS/express/views.md

6a2e89d

Co-authored-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

Update nodeJS/express/views.md

85f1488

Co-authored-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

Update nodeJS/express/views.md

3f81a38

Co-authored-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

Update nodeJS/express/views.md: Fix Typo

ad3a4e0

Co-authored-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

Update nodeJS/express/views.md: Remove Unnecessary Backticks

4c1d03a

Co-authored-by: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com>

Fix Linting Issues

73e2ab0

Add Assignments

81447f8

MaoShizhong reviewed Apr 13, 2024

View reviewed changes

01zulfi requested changes Apr 15, 2024

View reviewed changes

nodeJS/express/views.md Outdated Show resolved Hide resolved

nodeJS/express/views.md Show resolved Hide resolved

jasonHYLam and others added 5 commits April 15, 2024 13:37

Update nodeJS/express/views.md: Update example to use forEach()

a78a226

Co-authored-by: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com>

Update views.md: Update Relevant Blocks With EJS Tag

c6b776d

Update views.md: Use Templates Instead Of Components For KC

33c60a5

Update nodeJS/express/views.md

85e4658

Co-authored-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

Update views.md: Add EJS Docs To Assignment Item

94d8835

Update views.md: Add Static Assets Section

0d8b53d

MaoShizhong requested changes Apr 16, 2024

View reviewed changes

jasonHYLam and others added 9 commits April 16, 2024 12:30

Update nodeJS/express/views.md: Correct Assignment Operator For Href

790c433

Co-authored-by: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com>

Update nodeJS/express/views.md: Use List Tags And Clarify Loop

aec384a

Co-authored-by: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com>

Update nodeJS/express/views.md: Use Lowercase For Express

69f2b8c

Co-authored-by: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com>

Update nodeJS/express/views.md

cf45e3e

Co-authored-by: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com>

Update nodeJS/express/views.md: Fixing Numbering

6752b78

Co-authored-by: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com>

Update views.md: Provide Instructions In Assignment

d074e53

Merge branch 'main' into node_revamp

eefa89a

Merge branch 'node_revamp' of github.com:prodijay777/TOP-curriculum-g…

15bfc96

…it-test into node_revamp

Update Views lesson: Fix linting errors

00c179c

01zulfi reviewed May 4, 2024

View reviewed changes

Update views.md: Add closing div tag to note

9ad9eda

01zulfi approved these changes May 5, 2024

View reviewed changes

01zulfi merged commit a2313fb into TheOdinProject:main May 5, 2024
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Views: Write Draft For Introduction #27618

Views: Write Draft For Introduction #27618

jasonHYLam commented Mar 15, 2024

01zulfi left a comment

01zulfi Mar 30, 2024

jasonHYLam Apr 13, 2024

MaoShizhong left a comment

MaoShizhong Apr 13, 2024

jasonHYLam Apr 15, 2024

MaoShizhong Apr 16, 2024

MaoShizhong commented Apr 15, 2024

MaoShizhong left a comment

01zulfi May 4, 2024

jasonHYLam May 5, 2024

01zulfi left a comment

Views: Write Draft For Introduction #27618

Views: Write Draft For Introduction #27618

Conversation

jasonHYLam commented Mar 15, 2024

Because

This PR

Issue

Additional Information

Pull Request Requirements

01zulfi left a comment

Choose a reason for hiding this comment

01zulfi Mar 30, 2024

Choose a reason for hiding this comment

jasonHYLam Apr 13, 2024

Choose a reason for hiding this comment

MaoShizhong left a comment

Choose a reason for hiding this comment

MaoShizhong Apr 13, 2024

Choose a reason for hiding this comment

jasonHYLam Apr 15, 2024

Choose a reason for hiding this comment

MaoShizhong Apr 16, 2024

Choose a reason for hiding this comment

MaoShizhong commented Apr 15, 2024

MaoShizhong left a comment

Choose a reason for hiding this comment

01zulfi May 4, 2024

Choose a reason for hiding this comment

jasonHYLam May 5, 2024

Choose a reason for hiding this comment

01zulfi left a comment

Choose a reason for hiding this comment