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.  

https://expressjs.com/

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

https://mongoosejs.com/

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

https://ejs.co/

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

Material till videoföreläsning

By Sandra Larsson

Made with Slides.com

Material till videoföreläsning

  • 146

More from Sandra Larsson