Slide 1 of 45
Express & CRUD & You
Leon Noel
#100Devs
We coming from a long bloodline of trauma
We raised by our mamas, Lord, we gotta heal
We hurting our sisters, the babies as well
We killing our brothers, they poisoned the well
Slide 2 of 45Agenda
- Questions?
- Let's Talk - #100Devs
- Review - CRUD
- Review - Express
- Learn - Post & Delete
- Learn - Build your APP
- Homework - Build your own APP
Slide 3 of 45
Questions
About last class or life
Slide 4 of 45Checking In
Like and Retweet the Tweet
!checkin
Slide 5 of 45Submitting Work
Slide 6 of 45Codewars
Please set your repos to private*
*If you want, who am I to tell you how to live your life...
Slide 7 of 45
Homework
(should be done)
Slide 9 of 45Summer Break
Break, Catch Up, Professional Stuff, 100Hours Project, and Hitlist
Slide 10 of 45Backend!
Slide 11 of 45NODE.js BABY
Slide 12 of 45
Just
HTTP & FS
const http = require('http')
const fs = require('fs')
http.createServer((req, res) => {
fs.readFile('demofile.html', (err, data) => {
res.writeHead(200, {'Content-Type': 'text/html'})
res.write(data)
res.end()
})
}).listen(8000)
Slide 13 of 45How could we clean this up?
Slide 15 of 45But First
Blast To The Past
Slide 16 of 45How Does The Internet Work
Slide 18 of 45CRUD
Create (post) - Make something
Read (get) - Get Something
Update (put) - Change something
Delete (delete) - Remove something
Slide 19 of 45Mongo DB
Collection
document
document
document
document
Slide 20 of 45
EJS
(Embedded Javascript Templates)
<h1>Current Rappers</h1>
<ul class="rappers">
<% for(let i=0; i < info.length; i++) {%>
<li class="rapper">
<span><%= info[i].stageName %></span>
<span><%= info[i].birthName %></span>
<span class='del'>delete</span>
</li>
<% } %>
</ul>
<h2>Add A Rapper:</h2>
Slide 21 of 45
Client (Laptop)
Browser
URL
Server
Disk
API Code
Files
Collection
Collection
document
document
document
document
app.get('/')
app.post('/form')
app.put('/info')
app.delete('/info')
/views
/public
index.ejs
main.js
style.css
Fonts
Images
Slide 22 of 45Rap Names
What are some Read (get) requests?
Slide 24 of 45Rap Names
What are some Create (post) requests?
Slide 26 of 45Rap Names
What are some Delete (delete) requests?
Slide 28 of 45Rap Names
What are some Update (put) requests?
Slide 30 of 45
Client (Laptop)
Browser
URL
Server
Disk
API Code
Files
Collection
Collection
document
document
document
document
app.get('/')
app.post('/form')
app.put('/info')
app.delete('/info')
/views
/public
index.ejs
main.js
style.css
Fonts
Images
Slide 31 of 45Let's Build An App with Express
Slide 33 of 45mkdir api-project
cd api-project
npm init
npm install express --save
npm install mongodb --save
npm install ejs --save
Setting Up The Project
Slide 34 of 45let db,
dbConnectionStr = 'mongodb+srv://demo:demo@cluster0
.2wapm.mongodb.net/rap?retryWrites=true&w=majority',
dbName = 'rap'
MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true })
.then(client => {
console.log(`Connected to ${dbName} Database`)
db = client.db(dbName)
})
Connect To DB
Slide 35 of 45DB_STRING =
mongodb+srv://demo:demo@cluster0.2wapm.mongodb.net/rap?retryWrites=true&w=majority
Use .env
.env file
add .env to .gitignore
.env
node_modules
In terminal, add var to Heroku
heroku config:set DB_STRING =
mongodb+srv://demo:demo@cluster0.2wapm.mongodb.net/rap?retryWrites=true&w=majority
Slide 36 of 45let db,
dbConnectionStr = process.env.DB_STRING,
dbName = 'rap'
MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true })
.then(client => {
console.log(`Connected to ${dbName} Database`)
db = client.db(dbName)
})
Connect To DB
Slide 37 of 45app.set('view engine', 'ejs')
app.use(express.static('public'))
app.use(express.urlencoded({ extended: true }))
app.use(express.json())
app.listen(process.env.PORT || PORT, ()=>{
console.log(`Server running on port ${PORT}`)
})
Setup Server
Slide 38 of 45app.get('/',(request, response)=>{
db.collection('rappers').find().toArray()
.then(data => {
response.render('index.ejs', { info: data })
})
.catch(error => console.error(error))
})
API - GET
Slide 39 of 45app.post('/addRapper', (request, response) => {
db.collection('rappers').insertOne(request.body)
.then(result => {
console.log('Rapper Added')
response.redirect('/')
})
.catch(error => console.error(error))
})
API - POST
Slide 40 of 45
Create EJS File
<h1>Current Rappers</h1>
<ul class="rappers">
<% for(let i=0; i < info.length; i++) {%>
<li class="rapper">
<span><%= info[i].stageName %></span>
<span><%= info[i].birthName %></span>
<span class='del'>delete</span>
</li>
<% } %>
</ul>
<h2>Add A Rapper:</h2>
Slide 41 of 45Create Public Folder/Files
Slide 42 of 45app.delete('/deleteRapper', (request, response) => {
db.collection('rappers').deleteOne({stageName: request.body.stageNameS})
.then(result => {
console.log('Rapper Deleted')
response.json('Rapper Deleted')
})
.catch(error => console.error(error))
})
API - DELETE
Slide 43 of 45heroku login -i
heroku create simple-rap-api
echo "web: node server.js" > Procfile
git add .
git commit -m "changes"
git push heroku main
Push To Heroku
Slide 44 of 45Let's Code
Rap Names App
Slide 45 of 45Homework
