Bodingles | Colt Steele

Intro

We're going to building a "Comments" app to demonstrate the RESTful approach to CRUD design.

As a refresher, REST is a set of guidelines for how a client and server should interact, and CRUD is the way of creating "ROUTES" within the server that will allow users to Create/Read/Update/Delete data, in this case, our comments.

Also, there are many ways we could build our app within the REST guidelines and giving CRUD abilities. How we are going to accomplish this is but one of many ways we could do it. So don't think this procedure should be engraved in stone, or that there are not other ways in which we could achieve our goals here.

Getting Started

To get started, we're going to create an array to hold some "starter" comments. Now normally, these comments would be stored in a database on a server, but at this point, we don't have a database to work with so we are just going to build the array in our server file. Here's the structure:

JavaScript
index.js
const comments = [
- {
  - username: Sandy
  - comment: lol, that's too funny!
- },
- {
  - username: Skyler
  - comment: Life is way too short ..
- },
- {
  - username: Josephene
  - comment: Do you think they have pizza in space?
- },
- {
  - username: Sadie
  - comment: What in the world is going on here?
- }
]

This will get us started for comments. Next we need to start building our server file (index.js). We are going to be utilizing node, nodemon, express, and ejs so we need to get everything installed and set up. In case you don't remember, here is a refresher.

When finished, we should have something like this:

JavaScript
index.js
// Set the variables and requires
const express = require('express');
const app = express();
const port = 3000;
// post requests
app.post( '/', ( req, res ) => {
- res.send('post response');
})
// Start Server : Listening on { port }
app.listen( port, () => {
- console.log(`Server Online : Listening on port: ${ port }`);
});

Now we are going to be utilizing ejs files, so we can embed Js to help with the processing of our form input data for the comments. So we're going to need to make sure we have a couple of things set up here:

our views Directory set up
and in our server file:
- require path
- app.set our view engine
- app.set out path to our views directory

The first step in this process is to create a file/directory structure, for a page that will display all of our existing comments. So in our views directory, we're going to create a directory called comments. And within that directory, we're going to create a file called index.ejs, like so:

views
- - comments
  - index.ejs

*note: while we could name our index.ejs anything we like, it is generally considered "good practice" to name the index route as index.ejs

Next we need to make sure we have the following in our index.js file:

JavaScript
index.js
// at the top where we define the variables and requires ...
const path = require('path');
// next where we define the encoding ...
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

And now, if we remember, we "defined" our routes in our last discussion:

Route Name
index
new
show
update
destroy

Command
GET /comments
POST /comments
GET /comments/:id
PATCH /comments/:id
DELETE /comments/:id

Result
List all comments
Create a new comment
GET one comment by id
Update one comment by id
Delete one comment by id

We're going to start applying these routes in our server file, index.js, and we're going to start with the index route that allows us to List all of the existing comments. So we need to add an app.get() request to our server file, that sends the comments array to the index.ejs file when a user requests the "comments":

JavaScript
index.js
// get request for index route
app.get('/comments', ( req, res ) => {
- res.render( 'comments/index', { comments } )
})

This will send our "comments" array to our index.ejs file. And because it is an ejs file, we can embed some Js within it to process the array.

And as stated before, an ejs file is simply an html file that we can embed with Js coding. So ejs files are built on the basic html structure, and for that reason, we do not need to list the entire contents of our index.ejs file. All that's important here, is the embedded Js code that resides within the body of the file, and does the processing of the comments array, for display. And lastly, remember that we must use the ejs syntax to embed our Js code. I'm going to utilize a simple <table> to output our comments data:

HTML
index.ejs
<body>
- <table>
  - <% for (let comm of comments) { %>
    - <tr>
      - <td><%= comm.username >%></td>
      - <td><%= comm.comment %></td>
    - <tr>
  - <% } %>
- </table>
</body>

So we're going to loop through our comments array and display each user, and their comment.

And now, if we start our server (approot / nodemon index.js), and in our browser, go to:

http://localhost:3000/comments

our index.ejs page should now display, which finishes the construction of our basic index route that we defined as "the basic route to list all comments".

So what we've shown here is one potential way, of many, to structure CRUD functionality for one single resource (our comments). Next, let's add some New Comments

The Web Developer Bootcamp 2024

building a Comments App

Intro

Getting Started