DEV Community 👩‍💻👨‍💻

Cover image for Week 9: YelpCamp: Initial Routes and Databases
Code_Regina
Code_Regina

Posted on

Week 9: YelpCamp: Initial Routes and Databases

This week was YelpCamp: Initial Routes and Databases from Colt Steele The Web Developer Bootcamp.

  -YelpCamp: Initial Routes 
  -YelpCamp: Layout 
  -YelpCamp: Creating Campgrounds
  -What is a Database
  -Mongo Shell Basics
  -Introduction to Mongoose 
Enter fullscreen mode Exit fullscreen mode

YelpCamp: Initial Routes

YelpCamp will have a landing page and a campground page that lists all campgrounds.
Each campground will have a name and an image.
There is an easier way to install multiple packages at once.
npm install express ejs –save
The landing page will be on the root app

Var express = require(“express”);
Var app = express();
App.set(“View engine”, “ejs”); 
App.get(“/”, function(req, res) {
Res.render(“landing”);
})
})
Enter fullscreen mode Exit fullscreen mode

Until we start the database, the data will be held in an array.

This is an example

[
{name: “Camp Ground”, image: http://www.image.com}, 
{name: “Camp Ground”, image: http://www.image.com} , 
{name: “Camp Ground”, image: http://www.image.com}  
]

Enter fullscreen mode Exit fullscreen mode

The array is sufficient to hold data for the time being.

App.get(“/campgrounds”, function(req, res) {
Var campgrounds = [
{name: “Salmon Creek”, image: “” } , 
{name: “Granite Hill”, image: “” } ,
{name: “Mountain Goat”, image: “” }  
]
Res.render(“campgrounds”);
})

App.listen(process.env.PORT, process.env.IP, function() {
Console.log(“The YelpCamp Server Has Started!”); 
Enter fullscreen mode Exit fullscreen mode

YelpCamp: Layout

Create our header and footer partials as well as add in Bootstrap for styling.

<html>
 <head> 
<title>YelpCamp</title>
</head>
Enter fullscreen mode Exit fullscreen mode

The header is placed in it one partial that separates it from the body. The body is placed in its own partial as well.

<body>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Partials are used to define the header and the footer which make routing across pages more seamless.

YelpCamp: Creating Campgrounds

-Creating new campgrounds
-Setup new campground POST route

This is the post route

```app.post(“/campgrounds”, function(req, res) {
var name = req.body.name
var image = req.body.image
var newCampground = {name: name, image: image}
campgrounds.push(newCampground);
res.redirect(“/campgrounds”);
});

A form will send a post request to somewhere then inside that post route we take the form data, we do something with it, then we redirect back to somewhere else.

The feature will be added that will allow a user to submit a new campground.
To do this, we must first setup the post route that we create with the new campground added. Then we will need to add in the body parser and make sure that everything is properly configured. Then we will need to create the form and then create the route for that form. A user will be able to send that POST request.

What is a Database

If the server were to stop, we would lose all the data.
A database is a collection of information/data. Databases have an interface for interacting with the stored data. Interaction with data may consist of adding a new user to the database or removing a user from a database. Editing a user information within that database.

An interface is just a way to write code that interacts with that data within the database.
SQL (relational database) vs. NoSQL (non-relational database)
SQL databases are tabular in that they are flat.
Tabular means that you must define a table ahead of time before the data can be utilized. It is not very flexible.
You must define what a user looks like with

ID | Name | Age | City
| --------- |:---------:| -------:|
| Customer | Ruby | 30 | New York

All users must have this pattern of id/name/age/city.
JOIN TABLES are what tie relationships between data together.
A join table can tie a user id with their comment id together.

NoSQL (non-relational database)
Tables are not used, data can be nested. It is not a flat database. It looks similar to JSON but the data is actually written in BJSON which is binary JavaScript Object Notation. But really it is just JSON with a bunch of key-value pairs.



{
    Name: “June”,
    Age: 25,
    City: New York, 
    Comments: [
{text: “New York is Awesome”}
{text: “New York is The best”}

]
}


Enter fullscreen mode Exit fullscreen mode

Comments can be nested inside of the data, IDs are not needed, tables do not need to be defined ahead of time. It is more flexible.

Mongo Shell Basics

mongod
Mongo
Help
Show dbs
Use
Insert
Find
Update
remove

Introduction to Mongoose

Mongoose is known as an ODM which is an object data mapper. It is a way for us to write JavaScript inside our JavaScript files.
Mongoose makes it possible to use schemes within our data. A schema is a way to organize our data in a way that makes since to our project.
https://mongoosejs.com/

This week I have learned how important databases are to maintaining data integrity. I have also learned that there are two types of databases SQL and NoSQL. Both have their usefulness within the scope of a given project direction.

Top comments (0)

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!