Node.JS - Express Tutorial

class: split-30 nopadding
background-image: url(https://cloud.githubusercontent.com/assets/4231611/11863076/6d83d12a-a4c3-11e5-9ba1-8d15a86cef40.jpg)

.column_t2.center[.vmiddle[
.fgtransparent[
# <i class="icon-javascript fa-4x"></i>
]
]]
.column_t2[.vmiddle.nopadding[
.shadelight[.boxtitle1[
# Node.JS - Express

### [Eueung Mulyana](https://github.com/eueung)
### http://eueung.github.io/js/express
#### JS CodeLabs | [Attribution-ShareAlike CC BY-SA](https://creativecommons.org/licenses/by-sa/4.0/)
#### 
]]
]]

---
class: column_t1 middle

---
class: split-30 nopadding
background-image: url(https://cloud.githubusercontent.com/assets/4231611/11863076/6d83d12a-a4c3-11e5-9ba1-8d15a86cef40.jpg)

.column_t2.center[.vmiddle[
.fgtransparent[
# <i class="icon-javascript fa-4x"></i>
]
]]
.column_t2[.vmiddle.nopadding[
.shadelight[.boxtitle1[
# Basics
#### 
]]
]]

---
class: split-50 nopadding

.column_t2[.vmiddle[
# Example #1

```
var express = require('express');
*var app = express();
// ----------------------------------
app.get('/', function (req, res) {
  res.send('Hello World!');
});
// ----------------------------------
*var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;

console.log('Example app listening at http://%s:%s', host, port);
});
```

```bash
$ node ex-01-expressjs.js
Example app listening at http://:::3000
```

]]
.column_t1[.vmiddle[

.figstyle1[
![](images/fig01.jpg)
]

####

.figstyle1[
![](images/fig02.jpg)
]

]]

---
class: split-50 nopadding

.column_t1[.vmiddle[

- The app starts a server and listens on port 3000 for connections. The app responds with “Hello World!” for requests to the **root** URL (/) or route. For every other path, it will respond with a **404 Not Found**.
- .bluelight[The **req** (request) and **res** (response) are the exact same objects that Node provides, so you can invoke **req.pipe()**, **req.on('data', callback)**, and anything else you would do without Express involved.]

]]
.column_t2[.vmiddle[
### Express vs. http Module

```
var http = require('http');
*var server = http.createServer(function(){});

*server.listen(3000, function(){
    console.log("Listening on port 3000");
});
```

```
var express = require('express');
*var app = express();

*var server = app.listen(3000, function(){
    console.log('Listening on port %d', server.address().port);
});
```

]]

---
class: split-50 nopadding

.column_t2[.vmiddle[

```
var express = require('express');
var app = express();
//--------------------------------------------------
*app.get('/', function (req, res) {
   console.log("Got a GET request for the homepage");
   res.send('Hello GET'); })
//--------------------------------------------------
*app.post('/', function (req, res) {
   console.log("Got a POST request for the homepage");
   res.send('Hello POST'); })
//--------------------------------------------------
*app.delete('/del_user', function (req, res) {
   console.log("Got a DELETE request for /del_user");
   res.send('Hello DELETE'); })
//--------------------------------------------------
*app.get('/list_user', function (req, res) {
   console.log("Got a GET request for /list_user");
   res.send('Page Listing'); })
//--------------------------------------------------
// This responds a GET request for abcd, abxcd, ab123cd, and so on
*app.get('/ab*cd', function(req, res) {   
   console.log("Got a GET request for /ab*cd");
   res.send('Page Pattern Match'); })
//--------------------------------------------------
var server = app.listen(8081, function () {
  var host = server.address().address
  var port = server.address().port

console.log("Example app listening at http://%s:%s", host, port)
})
```

]]
.column_t1[.vmiddle[
# Example #2

```bash
*$> node ex-02.js
Example app listening at http://:::8081
Got a GET request for the homepage
*Got a POST request for the homepage
Got a GET request for /list_user
*Got a DELETE request for /del_user
Got a GET request for /ab*cd
```

]]

---
class: split-50 nopadding

.column_t1[.vmiddle[

.figstyle1[
![](images/fig03.jpg)
]

]]
.column_t2[.vmiddle[

.figstyle1[
![](images/fig04.jpg)
]

]]

---
class: split-50 nopadding

.column_t2[.vmiddle[

```
var express = require('express');
var app = express();
//-----------------------------------------
*app.use(express.static('ex-03')); // get '/' langsung
//-----------------------------------------
*app.get('/index-get', function (req, res) {
   res.sendFile( __dirname + "/ex-03/" + "index-get.html" ); });
//-----------------------------------------
*app.get('/process_get', function (req, res) {
   response = {
*      first_name:req.query.first_name,
*      last_name:req.query.last_name
   };
   console.log(response);
*  res.end(JSON.stringify(response));
});
//-----------------------------------------
var server = app.listen(8081, function () {
  var host = server.address().address
  var port = server.address().port

console.log("Example app listening at http://%s:%s", host, port)
});
```

```bash
$> node ex-03.js
Example app listening at http://:::8081
*{ first_name: 'Dodol', last_name: 'Garut' }
```

]]
.column_t1[.vmiddle[
# Example #3 (GET)
####

.figstyle1[
![](images/fig05.jpg)
]

####

.figstyle1[
![](images/fig06.jpg)
]

####

.figstyle1[
![](images/fig07.jpg)
]

]]

---
class: split-50 nopadding

.column_t1[.vmiddle[
# Example #3 (POST)

```bash
$> node ex-03-post.js
Example app listening at http://:::8081
*{ first_name: 'dodol via post', last_name: 'garut jg via post' }
```

####

.figstyle1[
![](images/fig08.jpg)
]

####

.figstyle1[
![](images/fig09.jpg)
]

]]
.column_t2[.vmiddle[

```
var express = require('express');
var app = express();
*var bodyParser = require('body-parser');

// Create application/x-www-form-urlencoded parser
*var urlencodedParser = bodyParser.urlencoded({ extended: false })
app.use(express.static('ex-03'));
//-----------------------------------------------
app.get('/index-post', function (req, res) {
   res.sendFile( __dirname + "/ex-03/" + "index-post.html" );
})
//-----------------------------------------------
*app.post('/process_post', urlencodedParser, function (req, res) {
   response = {
*      first_name:req.body.first_name,
*      last_name:req.body.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})
//-----------------------------------------------
var server = app.listen(8081, function () {
  var host = server.address().address
  var port = server.address().port

console.log("Example app listening at http://%s:%s", host, port)
})
```

]]

---
class: split-50 nopadding

.column_t2[.vmiddle[
### index-get.html

```html
<html><body>
*<form action="http://127.0.0.1:8081/process_get" method="GET">
  First Name: <input type="text" name="first_name">  <br>

Last Name: <input type="text" name="last_name">
  <input type="submit" value="Submit">
</form>
</body></html>
```

]]
.column_t1[.vmiddle[
### index-post.html

```html
<html><body>
*<form action="http://127.0.0.1:8081/process_post" method="POST">
  First Name: <input type="text" name="first_name">  <br>

Last Name: <input type="text" name="last_name">
  <input type="submit" value="Submit">
</form>
</body></html>
```

]]

---
class: split-50 nopadding

.column_t1[.vmiddle[
# Example #4
### File Uploads

```
*app.post('/file_upload', upload.single('file'), function (req, res) {
   console.log(req.file.originalname);
   console.log(req.file.path);
   console.log(req.file.mimetype);

*  var file = __dirname + "/ex-04/result/" + req.file.originalname;
   fs.readFile( req.file.path, function (err, data) {
*     fs.writeFile(file, data, function (err) {
        if( err ){ console.log( err ); }
*       else { response = { message:'File uploaded successfully', filename:req.file.originalname }; }
        console.log( response );
*       res.end( JSON.stringify( response ) );
      });
   });
});
```

]]
.column_t2[.vmiddle[

```
var express = require('express');
var app = express();
var fs = require("fs");

console.log("Example app listening at http://%s:%s", host, port)
});
```

]]

---
class: split-50 nopadding

.column_t2[.vmiddle[
# Example #4

```bash
$> node ex-04.js
Example app listening at http://:::8081
*Drones.pdf
ex-04\tmp\0c1fd33b722f40f26cb34d35f28f72d1
*application/pdf
{ message: 'File uploaded successfully',
  filename: 'Drones.pdf' }
```

```html
<html><head><title>File Uploading Form</title></head>
<body>
  <h3>File Upload:</h3>
  Select a file to upload: <br />
* <form action="http://127.0.0.1:8081/file_upload" method="POST" 
*       enctype="multipart/form-data">
* <input type="file" name="file" size="50" />
  <br />
  <input type="submit" value="Upload File" />
  </form>
</body></html>
```

]]
.column_t1[.vmiddle[

.figstyle1[
![](images/fig10.jpg)
]

####

.figstyle1[
![](images/fig11.jpg)
]

]]

---
class: split-50 nopadding

.column_t1[.vmiddle[
# Example #5
### cookie-parser

```bash
*$> curl http://localhost:8081 --cookie "Cho=Kim;Greet=Hello"
Request Received!
*$> curl http://localhost:8081
Request Received!
```

```bash
$> node ex-05.js
Example app listening at http://:::8081
*Cookies:  { Cho: 'Kim', Greet: 'Hello' }
*Cookies:  {}
```

]]
.column_t2[.vmiddle[

```
var express      = require('express');
*var cookieParser = require('cookie-parser');
//----------------------------------------
var app = express();
*app.use(cookieParser());
//----------------------------------------
app.get('/', function(req, res) {
* console.log("Cookies: ", req.cookies);
  res.send('Request Received!'); 
});
//----------------------------------------
var server = app.listen(8081, function () {
  var host = server.address().address
  var port = server.address().port

console.log("Example app listening at http://%s:%s", host, port)
});
```

]]

---
class: split-30 nopadding
background-image: url(https://cloud.githubusercontent.com/assets/4231611/11863076/6d83d12a-a4c3-11e5-9ba1-8d15a86cef40.jpg)

.column_t2.center[.vmiddle[
.fgtransparent[
# <i class="icon-javascript fa-4x"></i>
]
]]
.column_t2[.vmiddle.nopadding[
.shadelight[.boxtitle1[
# RESTful APIs
#### 
]]
]]

---
class: split-50 nopadding

.column_t2[.vmiddle[

```
var express = require('express');
var app = express();
var fs = require("fs");
//------------------
// case insensitive
*app.get('/listUsers', function (req, res) {
*  fs.readFile( __dirname + "/" + "ex-06-users.json", 'utf8', function (err, data) {
       console.log( data );
*      res.end( data );
   });
});
//------------------
var server = app.listen(8081, function () {
  var host = server.address().address
  var port = server.address().port

console.log("Example app listening at http://%s:%s", host, port)
});
```

]]
.column_t1[.vmiddle[
# Example #6
### Using Flat JSON File
### .bluelight[GET /listusers]
####

.figstyle1[
![](images/fig12.jpg)
]

]]

---
class: split-50 nopadding

.column_t1[.vmiddle[
# Example #6
### .bluelight[POST /adduser]

```
var server = app.listen(8081, function () {
  var host = server.address().address
  var port = server.address().port
  console.log("Example app listening at http://%s:%s", host, port)
});
```

]]
.column_t2[.vmiddle[

```
var express = require('express');
var app = express();
var fs = require("fs");
var bodyParser = require('body-parser');
//------------------
*app.use(bodyParser.urlencoded({ extended: true }));
*app.use(bodyParser.json());
//------------------
function saveJson (filename,filecontent) {
  fs.writeFile(filename, filecontent,  function(err) {
     if (err) { return console.error(err); }
  });
}
//------------------
*app.post('/addUser', function (req, res) {
   fs.readFile( __dirname + "/" + "ex-06-users.json", 'utf8', function (err, data) {
       data = JSON.parse( data ); //console.log(req.body);

*      data["user" + req.body.id] = {}
*      data["user" + req.body.id].name = req.body.name
*      data["user" + req.body.id].password = req.body.password
*      data["user" + req.body.id].profession = req.body.profession
*      data["user" + req.body.id].id = +req.body.id
       console.log( data );
       res.end( JSON.stringify(data));
*      saveJson( __dirname + "/" + "ex-06-users.json", JSON.stringify(data) );
   });
});
```

]]

---
class: column_t1 middle

.figstyle1[
![](images/fig13.jpg)
]

---
class: split-50 nopadding

.column_t2[.vmiddle[

```
var express = require('express');
var app = express();
var fs = require("fs");
// ---------------------
*app.get('/:id', function (req, res) {
   fs.readFile( __dirname + "/" + "ex-06-users.json", 'utf8', function (err, data) {
       data = JSON.parse( data );
*      var user = data["user" + req.params.id] 
       console.log( user );
*      res.end( JSON.stringify(user));
   });
});
// ---------------------
var server = app.listen(8081, function () {
  var host = server.address().address
  var port = server.address().port
  console.log("Example app listening at http://%s:%s", host, port)
});
```

]]
.column_t1[.vmiddle[
# Example #6
### .bluelight[GET /:id]
####

.figstyle1[
![](images/fig14.jpg)
]

]]

---
class: split-50 nopadding

.column_t1[.vmiddle[
# Example #6
### .bluelight[DELETE /deleteuser]
####

.figstyle1[
![](images/fig15.jpg)
]

]]
.column_t2[.vmiddle[

```
var express = require('express');
var app = express();
var fs = require("fs");
*var bodyParser = require('body-parser');
//------------------
*app.use(bodyParser.urlencoded({ extended: true }));
*app.use(bodyParser.json());
//------------------
*function saveJson (filename,filecontent) {
  fs.writeFile(filename, filecontent,  function(err) {
     if (err) { return console.error(err); }
  });
}
// ---------------------
*app.delete('/deleteUser', function (req, res) {
   fs.readFile( __dirname + "/" + "ex-06-users.json", 'utf8', function (err, data) {
       data = JSON.parse( data );
*      delete data["user" + req.body.id];
       
       console.log( data );
       res.end( JSON.stringify(data));
*      saveJson( __dirname + "/" + "ex-06-users.json", JSON.stringify(data) );
   });
});
// ---------------------
var server = app.listen(8081, function () {
  var host = server.address().address
  var port = server.address().port
  console.log("Example app listening at http://%s:%s", host, port)
});
```

]]

---
# References

1. [Express Example](http://expressjs.com/en/starter/hello-world.html)
1. [Node.js Express Framework](http://www.tutorialspoint.com/nodejs/nodejs_express_framework.htm)
1. [Express to Hapi.js](http://matt-harrison.com/moving-from-express-to-hapi-js/)
1. [expressjs/multer](https://github.com/expressjs/multer)
1. [expressjs/body-parser](https://github.com/expressjs/body-parser)
1. [expressjs/cookie-parser](https://github.com/expressjs/cookie-parser)
1. [Node.js RESTful API](http://www.tutorialspoint.com/nodejs/nodejs_restful_api.htm)

# Other Readings
1. [JavaScript and Cookies](http://www.tutorialspoint.com/javascript/javascript_cookies.htm)
1. [JavaScript Cookies](http://www.w3schools.com/js/js_cookies.asp)

---
class: split-30 nopadding
background-image: url(https://cloud.githubusercontent.com/assets/4231611/11863076/6d83d12a-a4c3-11e5-9ba1-8d15a86cef40.jpg)

.column_t2.center[.vmiddle[
.fgtransparent[
# <i class="icon-javascript fa-4x"></i>
]
]]
.column_t2[.vmiddle.nopadding[
.shadelight[.boxtitle1[
# END