Uppgift Blog
Node.js/Express/MongoDB
Introduktion
Vårt mål
En blog där man kan registrera sig som användare, logga in, skapa inlägg och läsa inlägg, uppdatera och ta bort inlägg
Introduktion
Del 1
Använda Express och skapa routes enligt ett REST API.
Del 2
Refaktorisera.
Miljövariabler
Använda databasen MongoDB.
Del 3
Skapa databasfunktioner enligt CRUD.
Använda templetemotorn EJS för att rendera dynamisk HTML.
Del 4
Hantera användare för registrering och loginfunktionalitet.
Säkerhet.
Använda Visual Code
Installera Node.js
Uppgift Blog - Del 1
Använda Express och sätta upp routes enligt REST API
Vad är ramverket Express?
Vad är ett ramverk?
eng. framework
Enkelt uttryckt är det en kombination av färdigskriven kod och regler för struktur för program. Det bygger på det befintliga programspråket och syftet med ett ramverk är att det ska gå snabbare att utveckla och underhålla kod för applikationer.
Vad är Express?
Express är ett ramverk för att skapa webbapplikationer på server-sidan (backend) på plattformen Node.js.
Det vi kommer använda från ramverket Express är att skapa en http-server, hantering hur olika routes sätts upp för att svara mot en speciell request metod såsom GET, POST, PUT, DELETE, för att skapa ett enkelt API. Vi ska även använda något som kallas för middleware.
Skapa en enkel HTTP-server med Express
Let's code!
Använda NPM
Node Package Manager
Med routing anger vi att vissa sökvägar för vår webbapplikation ska trigga igång specifika koddelar.
Vad är routing?
- http://exampleblog.com/posts efterfrågas,så ska användaren kunna se alla inlägg
- http:/exampleblog.com/posts/new efterfrågas,så ska användaren kunna skapa ett nytt inlägg
Exempelvis en viss route i vår webbapplikation ska ansvara för att när:
Vad är ett REST API?
Scenario: Vi vill sätta upp routes för en webbapplikation som ska vara en blog.
Users
Posts
Images
Comments
Likes
e.t.c...
Olika resurser på en blog
Posts
http://www.exampeblog.com/addNewPost
ENDPOINT
URL
/getPost
/updatePost
/deletePost
/getPostByUser
/deletePostByUser
INTE BRA 👎
👉 Endpoints ska endast innehålla resursnamn som posts, users, comments etc och använda HTTP-metoder för beteende
REST API
en mappning, regler hur ett API ska sättas upp
/getPost
/updatePost
/deletePost
/addNewPost
GET /posts/7
PUT /posts/7
DELETE /posts/7
POST /posts
id för ett inlägg
/getPostByUser
/deletePostByUser
GET /users/7/posts
DELETE /users/7/posts/9
CREATE
READ
UPDATE
DELETE
HTTP-metoder
Använda CRUD
| Route namn | Endpoint | HTTP Metod | Beskrivning |
|---|---|---|---|
| Index | /posts | GET | Visar alla inlägg |
| New | /posts/new | GET | Visa ett formulär för att skapa nytt inlägg |
| Create | /posts | POST | Skapa ett nytt inlägg |
| Show | /posts/:id | GET | Visar specifikt inlägg |
| Edit | /posts/:id/edit | GET | Visa formulär för att uppdatera nytt inlägg |
| Update | /posts/:id | PUT | Uppdatera specifikt inlägg |
| Delete | /posts/:id | DELETE | Tar bort specifikt inlägg |
7 REST API routes
För att hantera inlägg på en blog (posts)
Let's code!
Hur en webbsida efterfrågas
KLIENT
SERVER
👩💻
KLIENT
KLIENT
HTTP REQUEST
HTTP RESPONSE
HTTP metod + route + HTTP version
HTTP request header
HTTP request body (endast om man skickar data med POST)
HTTP version + statuskod
HTTP response header
HTTP response body (webbsidan vi får tillbaka)
HTTP vanliga statuskoder:
200 – OK
201 - Created
400 – Bad request
404 - Page not found
Testa våra routes med Postman
Uppgift Blog - Del 2
Refaktorisera
Miljövariabler
Använda databasen MongoDB
Refaktorisering och moduler i Node.js
Varför moduler?
När vi skapar mer och mer kod i en applikation bör vi dela in den i mindre logiska delar för att skapa en bättre överblick.
En modul kan innehålla och exponera en eller flera funktioner, objekt, variabler, eller en klass.
En modul kan exporteras från en js-fil och importeras till en annan js-fil.
När man vill förändra sin kod så att den följer en bättre struktur och mindre upprepning kallas det för att refaktorisera (eng. refactoring).
Refaktorisera våra routes
Refaktorisera våra funktioner för databashantering
| Route namn | Endpoint | HTTP Metod | Beskrivning |
|---|---|---|---|
| Index | /posts | GET READ | Visar alla inlägg |
| New | /posts/new | GET | Visa ett formulär för att skapa nytt inlägg |
| Create | /posts | POST CREATE | Skapa ett nytt inlägg |
| Show | /posts/:id | GET READ | Visar specifikt inlägg |
| Edit | /posts/:id/edit | GET READ | Visa formulär för att uppdatera nytt inlägg |
| Update | /posts/:id | PUT UPDATE | Uppdatera specifikt inlägg |
| Delete | /posts/:id | DELETE DELETE | Tar bort specifikt inlägg |
7 REST API routes
För att hantera inlägg på en blog (posts)
CRUD, CREATE READ UPDATE DELETE
Databasen MongoDB
Vad är en databas?
- En organiserad samling av data (data = information) på ett sådant sätt att det är lätt att söka efter och hämta enskilda bitar information, samt även ändra informationen.
- Är persistent, d.v.s försvinner inte när man avslutar programmet eller stänger av datorn.
- Om man vill skapa en databas vill man gör en modell som beskriver verkligheten. Till exempel göra en beskrivning hur en webbutik ser ut och fungerar (produkter, priser, kunder, lagerstatus...). Eller i vårt fall en blog (användare, inlägg, kommenterar, bilder..).
Olika databaser
- Det finns flera olika databaser. En vanlig uppdelning är mellan relationsdatabaser (SQL) och icke-relationsdatabaser (NoSQL).
- En relationsdatabas som SQL eller mySQL är uppbyggt av tabeller
- En icke-relationsdatabas som MongoDB är uppbyggt av dokument.
- I stacken Node.js + Express är MongoDB vanligast och den databas vi ska använda mest i kursen.
- Vi kommer även studera en mySQL-databas översiktligt senare i kursen.
Introduktion till MongoDB
Databas
COLLECTION
innehåller ett flertal "document"
NoSQL
DOCUMENT
innehåller "key-value pairs"
DATABAS innehåller en eller flera "collections" såsom users, posts, etc.
SQL
"Tabell"
"Rader"
Molntjänsten MongoDB Atlas
Miljövariabler och modulen dotenv i Node.js
Mongoose
Mongoose är ett bibliotek som sköter databashantering för MongoDB på Node.js
Det är Mongoose funktioner vi kommer använda för databasuppkoppling, skapa modell för våra inlägg, samt CRUD-funktionerna för databashantering
Databasuppkoppling till MongoDB Atlas
Skapa en modell för våra inlägg i Mongoose
Skapa en modell för våra inlägg (posts)
const postSchema = new mongoose.Schema({
title: String,
image: String,
body: String
});
const Post = mongoose.model("Post", postSchema);Vi behöver skapa en modell av våra inlägg för att definiera vilka egenskaper ett inlägg ska ha. I detta fall definierar vi en titel, bild och innehåll i inlägget.
I mongoose definierar man först något som kallas för Schema som man sedan kopplar till sin modell.
Uppgift Blog - Del 3
Skapa databasfunktioner enligt CRUD
Använda templatemotorn EJS för att rendera dynamisk HTML.
Använda Nodemon
Skapa databashantering enligt CRUD med Mongoose
Att skicka data med POST
request.body
Hur en webbsida efterfrågas
KLIENT
SERVER
👩💻
KLIENT
KLIENT
HTTP REQUEST
HTTP RESPONSE
HTTP metod + route + HTTP version
HTTP request header
HTTP request body (endast om man skickar data med POST)
HTTP version + statuskod
HTTP response header
HTTP response body (webbsidan vi får tillbaka)
HTTP vanliga statuskoder:
200 – OK
201 - Created
400 – Bad request
404 - Page not found
Att hämta url-parameter
request.params
Mongoosefunktioner för datapersistens
| Databasoperation | Hantering av inlägg | Mongoosefunktion |
|---|---|---|
| Create | Skapa inlägg | Model.create(request.body) |
| Read | Hämta alla inlägg | Model.find() |
| Read | Hämta specifikt inlägg | Model.findById(request.params.id) |
| Update | Uppdatera inlägg | Model.findByIdAndUpdate( request.params.id, request.body) |
| Delete | Ta bort inlägg | Model.findByIdAndDelete(request.params.id) |
| Edit | Visa formulär för att uppdatera inlägg | Model.findById(request.params.id) |
Let's code!
Använda Templates
Som templatemotor ska vi använda JavaScript templating (EJS) vilken hjälper oss att rendera HTML-sidor med dynamisk information från JavaScript. D.v.s med en templatemotor kan vi generera delar av HTML-koden och skriva ut innehåll från variabler i JavaScript, så att sidornas innehåll blir dynamiskt.
Templatemotor
Det finns även andra templatemotorer som Pug (https://pugjs.org/) och Handlebars (https://handlebarsjs.com/)
Använda Partials
Dela upp vår layout i delar för att inte repetera kod. Inom backend är det vanligt att dela in i minst i delare header och footer och lägga i varsin fil för att sedan inkludera i andra filer. Stor fördel att om vi exempelvis behöver ändra något i header så gör vi det endast i en fil och inte flera!
Partials
så kallas denna teknik
Skapa våra views
<h1>Dagens datum</h1>
<p>Datum och tid för idag: <%= date %></p>
Skapa en vy-fil
Eller kallas även template-fil
Måste finnas i mappen views/ och ha filändelsen .ejs
views/exempel.js
EXEMPEL
Innanför dessa krumelurer "spottar" vi ut det dynamiska värdet för variabeln "date"
Hur? =>
router.get("/", function (request, response) {
let todayDate = new Date();
response.render("exempel", {date: todayDate);
});
En route som som renderar en view
routes/exempelRoute.js
EXEMPEL
Filen som variabeln "date" ska renderas till. Express förstår att den ligger i "views" och är en .ejs-fil
Variabeln som ska "skickas" till filen
Redirect
Att skickas till annan url
Använda statiska resurser i Express
På en webbplats är det vanligt med statiska resursers såsom bilder, stylesheets och Javascript-filer som används till klientsidan. Det kan också vara fler html-sidor som ska vara statiska och inte dynamiska.
Statiska resurser brukar man lägga i en mapp public.
EJS syntax
<%# Kommentarer! %><p>Datum och tid för idag: <%= date %></p>Variabler
Kommentarer
EJS syntax
<h1>Our Post Page!</h1>
<ul>
<% for(let i = 0; i < posts.length; i++) { %>
<li><%= posts[i].title %> - <%= posts[i].name %> </li>
</ul>
<% } %><h1>Hey <%= username.toUpperCase() %>, Welcome to Our site</h1>
<% if(username.toLowerCase() === "danny"){ %>
<p>Danny you are Beautiful!</p>
<% } else { %>
<p>You are not Danny, you are not Beautiful!</p>
<% } %>If-satser
Loopar