Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NodeJS: Add descriptive link text #27896

Merged
merged 4 commits into from
Apr 30, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
34 changes: 17 additions & 17 deletions nodeJS/express_and_mongoose/express_102_crud_and_mvc.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
### Introduction

After setting up the skeleton for your project it's time to set up the database. As usual, there's quite a bit of background information that you will find useful as you progress.
After setting up the skeleton for your project it's time to set up the database. As usual, there's quite a bit of background information that you will find useful as you progress.

### Lesson overview

Expand All @@ -19,58 +19,58 @@ This section contains a general overview of topics that you will learn in this l

CRUD is a concept that comes up a lot in web development, and it's the type of thing that might show up in interview questions so it's worth taking a little time to make sure you understand what it refers to.

CRUD stands for: <span id="crud">_Create, Read, Update_ and _Delete_</span>. These are the four basic functions that you will be building into your database driven apps. If you are designing a CRUD interface that means that users can expect to be able to do these 4 things to items in the database (providing they have the appropriate permissions of course).
CRUD stands for: *Create, Read, Update* and *Delete*. These are the four basic functions that you will be building into your database driven apps. If you are designing a CRUD interface that means that users can expect to be able to do these 4 things to items in the database (providing they have the appropriate permissions of course).

In your library example, this means that we are going to be building the ability for users to `create` entries (add books, authors or genres to the database), `read` entries (or, retrieve lists of books and other things from the database), `update` entries (edit details of an entry), and `delete` entries (remove them from the database).

Of course, this is a concept and not some sort of rule that must be followed. You may not want to allow users to do all of these actions, or you may want to limit which users can do what at any given time. For example, if you are creating a social networking site, you might only allow users to `read` the profile information of their friends or connections, and you might not want to allow people to `delete` things at all.

The CRUD operations roughly correlate to the HTTP methods that you can employ in an express app. This definition can be somewhat flexible, but in general `create` correlates to `POST` (or `app.post()` in an express app), `read` correlates to `GET` (`app.get()`), `update` to `PUT` (`app.put()`) and `delete` to `DELETE` (`app.delete()`)
Of course, this is a concept and not some sort of rule that must be followed. You may not want to allow users to do all of these actions, or you may want to limit which users can do what at any given time. For example, if you are creating a social networking site, you might only allow users to `read` the profile information of their friends or connections, and you might not want to allow people to `delete` things at all.

The CRUD operations roughly correlate to the HTTP methods that you can employ in an express app. This definition can be somewhat flexible, but in general `create` correlates to `POST` (or `app.post()` in an express app), `read` correlates to `GET` (`app.get()`), `update` to `PUT` (`app.put()`) and `delete` to `DELETE` (`app.delete()`)

### MVC

MVC is another common concept in web development and also something that is likely to come up in an interview question. MVC stands for _Model, View, Controller_ and refers to the architecture of your code. Basically, it is a way to organize your application by separating all of the actions into 3 main components: Models, Views and Controllers.
MVC is another common concept in web development and also something that is likely to come up in an interview question. MVC stands for *Model, View, Controller* and refers to the architecture of your code. Basically, it is a way to organize your application by separating all of the actions into 3 main components: Models, Views and Controllers.

<span id="model">**Models**</span> are the basic building blocks of your database. So for every type of entry in your DB (book, author, etc. in our Library Project), you'll create a model that will hold the details of that type of entry. Models define the types of information that get used by your views and controllers.

<span id="view">**Views**</span> are, of course, the component that generates the UI for your application. In our case, we've selected a templating engine that uses data supplied by a controller to display the desired information.
<span id="view">**Views**</span> are, of course, the component that generates the UI for your application. In our case, we've selected a templating engine that uses data supplied by a controller to display the desired information.

<span id="controller">**Controllers**</span> are the components that decide what view to display and what information is going to be put into it.

#### MVC example

Without digging into the code prematurely, consider a very basic photo-uploading site. Users can upload and then view photos that are all listed on an index somewhere. In this case, we'll have a model for our photos that would define how our photos are stored in the database (DB). The model might specify that photos should be objects that have a `filename`, a `URL` and a `date-created` field.
Without digging into the code prematurely, consider a very basic photo-uploading site. Users can upload and then view photos that are all listed on an index somewhere. In this case, we'll have a model for our photos that would define how our photos are stored in the database (DB). The model might specify that photos should be objects that have a `filename`, a `URL` and a `date-created` field.

We'll need two views, 1) the index, and 2) the display-photo view which will just display a single photo.

Our controller then would be called by Express whenever we get an `app.get()` request. It would then use the details of the request to determine which view is shown, and which image is displayed depending on whether the user is requesting the index or a specific photo's page.

If this is a little confusing at this point, don't worry about it too much. You will be creating models, views, and controllers in the tutorial and it will all become much clearer once you see them in use.
If this is a little confusing at this point, don't worry about it too much. You will be creating models, views, and controllers in the tutorial and it will all become much clearer once you see them in use.

### Which database should you choose?

One final note before diving back into the tutorial. Express does not care about which database you use. The lesson lists a few options but ultimately uses MongoDB. In this case, the actual DB you use matters little. If you later decide that you would rather use SQL or something else, you should be able to pick it up fairly easily by reading the documentation. At this point, Mongo is probably the most popular choice to use with Express so we recommend just sticking with that for now.
One final note before diving back into the tutorial. Express does not care about which database you use. The lesson lists a few options but ultimately uses MongoDB. In this case, the actual DB you use matters little. If you later decide that you would rather use SQL or something else, you should be able to pick it up fairly easily by reading the documentation. At this point, Mongo is probably the most popular choice to use with Express so we recommend just sticking with that for now.

### Assignment

<div class="lesson-content__panel" markdown="1">

1. Complete part 3 of [the MDN Express tutorial](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose).
1. Complete ["Part 3: Using a Database (with Mongoose)"](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/mongoosee) of the Local Library tutorial.

</div>

### Knowledge checks
This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.
### Knowledge check

The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.

- [What does CRUD stand for?](#crud)
- [What does the Model in "MVC" refer to?](#model)
- [What does the View in "MVC" refer to?](#view)
- [What does the Controller in "MVC" refer to?](#controller)


### Additional resources
This section contains helpful links to other content. It isn't required, so consider it supplemental.

- For a deeper explanation of MVC you could read [this article from freeCodeCamp](https://medium.freecodecamp.org/simplified-explanation-to-mvc-5d307796df30).
- This [crash course video](https://www.youtube.com/watch?v=DZBGEVgL2eE) from Web Dev Simplified gives a run-down of how you should expect to use MongoDB (Mongoose) in Node.js, as well as some advanced things you can do with object schemas.
This section contains helpful links to related content. It isn't required, so consider it supplemental.

- FreeCodeCamp has a [deeper explanation of MVC](https://medium.freecodecamp.org/simplified-explanation-to-mvc-5d307796df300).
- [Web Dev Simplified's Mongoose crash course](https://www.youtube.com/watch?v=DZBGEVgL2eE) gives a run-down of how you should expect to use Mongoose for MongoDB in NodeJS, as well as some advanced things you can do with object schemas.
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
### Introduction

The next step in the MDN express tutorial sets up all the routes and controllers you're going to need when creating the Library project. This project is designed using the MVC (Model, View, Controller) architecture. In a previous step you set up all the Models (or Database Objects) and in the _next_ step you'll be setting up several different views.
The next step in the MDN express tutorial sets up all the routes and controllers you're going to need when creating the Library project. This project is designed using the MVC (Model, View, Controller) architecture. In a previous step you set up all the Models (or Database Objects) and in the *next* step you'll be setting up several different views.

If you remember from our earlier lessons, the controller is the code that sits between the models and the views. It determines which view is going to be shown, as well as which information is going to populate that view. In this lesson, you will copy and paste quite a bit of repetitive code to get the controllers and routes set up, but be sure to read everything in between them! There is a _lot_ of useful information therein.
If you remember from our earlier lessons, the controller is the code that sits between the models and the views. It determines which view is going to be shown, as well as which information is going to populate that view. In this lesson, you will copy and paste quite a bit of repetitive code to get the controllers and routes set up, but be sure to read everything in between them! There is a *lot* of useful information therein.

### Lesson overview

Expand All @@ -18,13 +18,13 @@ This section contains a general overview of topics that you will learn in this l

<div class="lesson-content__panel" markdown="1">

1. Complete part 4 of [the MDN Express tutorial](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes).
1. Complete ["Part 4: Routes and controllers"](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes) of the Local Library tutorial.

</div>

### Knowledge check

This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.
The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.

- [How do you define a route function in Express?](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes#defining_and_using_separate_route_modules)
- [Name four HTTP verbs a route might need to handle.](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes#http_verbs)
Expand Down
4 changes: 2 additions & 2 deletions nodeJS/express_and_mongoose/express_104_view_templates.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
### Introduction

This lesson is fun! You'll be setting up several views, and you'll start to see your Application come together. We'll finally get to see our data showing up in the browser! This is a long lesson that is broken up into several sub-lessons, so make sure you click through to see them all.
This lesson is fun! You'll be setting up several views, and you'll start to see your Application come together. We'll finally get to see our data showing up in the browser! This is a long lesson that is broken up into several sub-lessons, so make sure you click through to see them all.

### Lesson overview

Expand All @@ -22,11 +22,11 @@

<div class="lesson-content__panel" markdown="1">

1. Complete part 5 of [the MDN Express tutorial](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data).
1. Complete ["Part 5: Displaying library data"](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data) of the Local Library tutorial.

</div>

### Additional resources

Check failure on line 29 in nodeJS/express_and_mongoose/express_104_view_templates.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Required heading structure

nodeJS/express_and_mongoose/express_104_view_templates.md:29 TOP004/lesson-headings Required heading structure [Expected: h4 heading; Actual: h3 heading] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP004.md

This section contains helpful links to related content. It isn't required, so consider it supplemental.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ This section contains a general overview of topics that you will learn in this l

<div class="lesson-content__panel" markdown="1">

1. Complete part 6 of [the MDN Express tutorial](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/forms).
1. Read about deploying your app in the [final article of the MDN Express tutorial](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/deployment).
1. Complete ["Part 6: Working with forms"](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/forms) of the Local Library tutorial.
1. Deploy your local library app as per ["Part 7: Deploying to production"](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/deployment) of the Local Library tutorial.

Reminder: Make sure to hide your MongoDB connection URL! Once you've hosted your app on Glitch or Railway you'll be creating a new database with them and can use the instructions in the MDN tutorial to manage environment variables through the Glitch/Railway dashboard.

Expand Down