DEV Community

Cover image for Week 10: RESTful Routing
Code_Regina
Code_Regina

Posted on • Edited on

Week 10: RESTful Routing

This week was RESTful Routing and Data Associations from Colt Steele The Web Developer Bootcamp.

A lot of my time was spent with coding a small project for a fictional blog website to learn how RESTful routing works. I omitted a lot of code for this week posting but I did try to include the important parts of the code snippets that would make sense.

   -Intro to REST
   -RESTful Blog App: INDEX 
   -Blog App: Layout 
   -RESTful Blog App: NEW and CREATE 
   -RESTful Blog App: SHOW 
   -RESTful Blog App: EDIT and UPDATE 
   -RESTful Blog App: DESTROY
   -RESTful Blog App: Final Touches 
   -Introduction to Associations
Enter fullscreen mode Exit fullscreen mode

Intro to REST

REST stands for representational state transfer. REST is just a pattern for defining routes. It is a way of mapping between HTTP routes and CRUD together.
create – create a new user
read – retrieving information on users
update – editing information on users
delete – removing information on users
RESTful Routes
CREATE is POST
UPDATE is PUT
DESTROY is DELETE these are the three routes that are not GET request redirects that are doing something new
When these routes are done manipulating data they send it somewhere else.

RESTful routes are conventional which means it is common to see them widely used by other developers in other applications. Also, RESTful routes are reliable. If something is RESTful then it will follow a specific pattern.
This is the pattern
Alt Text

RESTful Blog App: INDEX

Semantic UI is similar to Bootstrap in that it is a CSS framework.

The project setup creating a blog website

Var express = require(express),
bodyParser = require(body-parser), 
mongoose = require(mongoose)
app = express();

mongoose.connect(mongodb://localhost/restful_blog_app”); 
app.set(view engine, ejs)
app.use(express.static(public))
app.use(bodyParser.urlencoded({extended: true}));

var blogSchema = new mongoose.Schema({
    title: String, 
    image: String, 
    body: String, 
    created: {type: Date, default: Date.now} 
})
Var Blog = mongoose.model(Blog, blogSchema);
Enter fullscreen mode Exit fullscreen mode

//RESTFUL ROUTES

app.get(/, function(req, res) {
res.redirect(/blogs); 
}); 

App.get(blogs, function(req,res) {
Blog.find({}, function(err, blogs) {
If(err) {
Console.log(error); 
} else {
res.render(index, {blogs: blogs}); 

App.get(/blogs, function(req, res) {
Res.render(index);
}); 
app.listen(process.env.PORT, process.env.IP, function() {
console.log(SERVER IS RUNNING!); 
})
Enter fullscreen mode Exit fullscreen mode

Blog App: Layout

Create the header and footer partials
Include Semantic UI
Add Simple Nav

Create the header and footer partials

<html> 

<head> 
<title>Blog App </title> 
</head> 
<body><p>From the header file</p></body> 
</html> 
Enter fullscreen mode Exit fullscreen mode

to include the partials to the index page

<% include ./partials/header %> 
Enter fullscreen mode Exit fullscreen mode

RESTful Blog App: NEW and CREATE

New will show a form

app.get(/blogs/new, function(req, res) {

res.render("new"); 
}); 
Enter fullscreen mode Exit fullscreen mode

this is easier because we will just render the same form every time, we will not need to look anything up in a database. We will not be sending data to the form. All we need to do is render new.

RESTful Blog App: SHOW

Add show route
Add show template
Add links to show page
Style show template

This is the show route

app.get("/blogs/:id", function(req,res) {
res.send("SHOW PAGE!"); 
}); 
Enter fullscreen mode Exit fullscreen mode

The show route /dogs/:id
The id within the route is a GET request.
The id helps to find the corresponding blog post then rendered a template.

RESTful Blog App: EDIT and UPDATE

Add Edit Route
Add Edit Form
Add Update Route
Add Update Form
Add Method-Override

The Edit route is /dogs/:id/edit is a GET request that will show edit form for one dog.
The Update route is /dogs/:id is a PUT request that will update a particular dog, then redirect somewhere.

app.get("/blogs/:id/edit", function(req, res) {
res.render("edit");
})

Enter fullscreen mode Exit fullscreen mode

RESTful Blog App: DESTROY

The destroy route is /dogs/:id it is a DELETE request that will delete a particular dog, then redirect somewhere. It is usually redirecting to the index page.


app.delete("/blogs/:id", function (req,res) {
res.send("You have reached the destroyed route");

}); 
Enter fullscreen mode Exit fullscreen mode

RESTful Blog App: Final Touches

Sanitize blog body

Sanitize is a way to remove all scripts from code and receive only pure HTML that way to prevent malicious script code from being run.

to install sanitize

npm install express-sanitizer --save
Enter fullscreen mode Exit fullscreen mode

must require it in the app.js for sanitize to work properly.

expressSanitizer = require("express-sanitizer"); 
app.use(expressSanitizer());
Enter fullscreen mode Exit fullscreen mode

Create and Update it where sanitized should go because that is where new data is coming in and data is being manipulated.

Introduction to Associations

Associations allow us to have multiple pieces of data; multiple collections in our database that are related to one another. Data associations are critical to the functionality of larger applications.
An example is when a single user is related to their unique post within that website messaging board.
The core concept is that data is related. There are different types of associations known as one-to-one, one-to-many, many-to-many relationships.

One-to-one are the simplest relationships in that one entity is related to one other entity. One book has one publisher, or one employee has one title.

One-to-many relationships one entity is related to many other entities. A single user on a website can have many photos. Those many different photos only belong to that single user. This is the most commonly used associations.

Many-to-many relationship the association goes both ways. Within a college setting, many students can sign up for many different courses and each course has multiple students enrolled. Another example is an author can have written many books and each book can have many authors that have co-written that book together.

This week I had a lot of time with actual hands-on coding. I learned about data associations and how important they are to keeping related data together. I also learned how routing works between different web pages.

Top comments (0)