MongoDB-tilkobling og Create

Gå til server.js, og finn linja der vi logger ut req.body.item, mot bunn av dokumentet. Den verdien er det vi ønsker å lagre til en database. La oss fjerne den linja for nå, og der linja var kan vi skrive inn noe annet. Vi begynner med et db-objekt, som vi ikke har laget enda. Ikke tenk for mye på det – vi skal lage db-ojektet senere:

db.collection('items').insertOne(a, b)

Så, db er databasetilgangen vår, collection er hvilken collection vi skal putte elementene våre inn i. Den har en metode som heter insertOne som tar to argumenter:

  1. Dokumentet vi skal sette inn; et objekt. For vår del blir det et feltnavn, og det brukeren har tastet inn i inputfeltet.
  2. En funksjon som kan kalles når elementet er lagt til i databasen. La oss flytte opp res.send()-metoden vi har under.
db.collection('items').insertOne({text: req.body.item}, function() {
  res.send("Thanks for submitting the form")
})

Nå gjenstår å opprette en db-variabel.

Rett under let app = express()-linja, i helt i toppen av fila vår, kan du lage en variabel:

let db

Vi trenger ikke å gi den en verdi enda – det tar vi hånd om lenger ned.

Vi må først installere en MongoDB-pakke som gjør at vi kan faktisk koble til en MongoDB fra Node. Gå til terminalen og skriv følgende:

$ npm install mongodb

På linja under der vi importerer express, legg til denne linja:

let mongodb = require('mongodb') // importerer mongodb

Et par linjer under let db, som vi lagde rett isted, kan du skrive følgende:

mongodb.connect(a, b, c)
  1. En connection-string – en tekst-streng som forteller mongodb hva den skal koble til. Disse kan være ganske lange, så på linja over kan vi lage en variabel som heter connectionString som du setter til en tom string, og bruker som argument a
let connectionString = ""
  1. Lar vi ligge litt.
  2. En funksjon som kjøres etter databasen har blitt koblet til. Her kan vi legge inn en anonym funksjon. Legg inn err og client som argument til den anonyme funksjonen:
function(err, client) {

}

Err står for error, og den skal vi benytte oss av senere, men ikke enda. Den som er mer interessant for oss foreløbig er client-argumentet. Client inneholder informasjon om mongodb-miljøet, som vi nettopp har koblet oss til. Inne i kroppen til denne anonyme funksjonen kan vi se på client-objektet, og benytte oss av en metode som heter db:

client.db()

Det vi kan gjøre nå, er å tilegne dette til en variabel, som gjør at vi kan kalle på databasen, utenfor denne spesifikke metoden. Vi har jo tilfeldigvis laget en variabel som heter db, så la oss bruke den:

db = client.db()

Vi ønsker nå å passe på at brukerne av nettsida ikke kan se nettsiden før databasen er koblet til og klar for action. Scroll ned til bunn av dokumentet, og finn app.listen-linja. Klipp ut den linja, og lim den inn rett under db = client.db(). Da er vi garantert at app’en ikke starter opp, før vi har en tilkobling til databasen.

Tilbake til b-argumentet i connect-metoden til mongodb-objektet. Argumentet skal være et objekt, som skal inneholde en configurasjonslinje til mongodb:

{useNewUrlParser: true}


Nå gjenstår kun å fylle inn en verdi for connectionString:

let connectionString = 'mongodb://localhost/TodoApp'

For å oppsummere skal vi da sitte igjen med følgende:

(obs: lang block, men kjekk å ha hvis noe ikke fungerer)

let express = require('express')
let mongodb = require('mongodb')

let app = express()
app.use(express.urlencoded({extended: false}))

let db
let connectionString = "mongodb://localhost/TodoApp"

mongodb.connect(connectionString, {useNewUrlParser: true}, function(err, client) {
  db = client.db()
  app.listen(3000)
})

app.get('/', function (req, res) {
  res.send(`
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple To-Do App</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <h1 class="display-4 text-center py-1">To-Do App</h1>

    <div class="jumbotron p-3 shadow-sm">
      <form action = "/create-item" method = "POST">
        <div class="d-flex align-items-center">
          <input name="item" autofocus autocomplete="off" class="form-control mr-3" type="text" style="flex: 1;">
          <button class="btn btn-primary">Add New Item</button>
        </div>
      </form>
    </div>

    <ul class="list-group pb-5">
      <li class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
        <span class="item-text">Fake example item #1</span>
        <div>
          <button class="edit-me btn btn-secondary btn-sm mr-1">Edit</button>
          <button class="delete-me btn btn-danger btn-sm">Delete</button>
        </div>
      </li>
      <li class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
        <span class="item-text">Fake example item #2</span>
        <div>
          <button class="edit-me btn btn-secondary btn-sm mr-1">Edit</button>
          <button class="delete-me btn btn-danger btn-sm">Delete</button>
        </div>
      </li>
      <li class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
        <span class="item-text">Fake example item #3</span>
        <div>
          <button class="edit-me btn btn-secondary btn-sm mr-1">Edit</button>
          <button class="delete-me btn btn-danger btn-sm">Delete</button>
        </div>
      </li>
    </ul>

  </div>

</body>
</html>

`)
})

app.post('/create-item', function (req, res) {
  db.collection('items').insertOne({text: req.body.item}, function() {
    res.send("Thanks for submitting the form")
  })
})

Hvis serveren fortsatt står og går uten noen error kan vi gå tilbake til MongoDB Compass og opprette en database som heter “TodoApp”, som har en collection som vi kaller “items”.

Hvis vi nå har gjort alt riktig, skal vi kunne gå til localhost:3000 i nettleseren, skrive noe inn i tekstfeltet, og trykke på Create Item-knappen. Hvis alt som det skal, har vi klart å dekke C’en i CRUD. Det neste vi vil se på er Read.