Tutorial Node Express: Panduan Lengkap di 2022 – Codewithaden

Express JS adalah kerangka kerja aplikasi web node.js.js yang minimal dan fleksibel yang menyediakan fitur yang kuat untuk mengembangkan aplikasi web dan seluler. Kami dapat membangun API web melalui kerangka kerja ini dengan sangat cepat, dan memiliki dukungan luar biasa untuk database NoSQL seperti Mongodb . Anda dapat merujuk lebih banyak tentang Node JS Express JS Framework di dalamnya Dokumen resmi.

Untuk bekerja dengan kerangka kerja ini, saya berasumsi bahwa Anda telah menginstal Node.js di mesin Anda.

Node Express: Panduan Lengkap

Itu cepat kerangka dibangun untuk bertindak sebagai minimal dan fleksibel Node.js Kerangka kerja aplikasi web, menyediakan serangkaian fitur yang kuat untuk membangun aplikasi web tunggal dan multipage, dan hybrid. Pertama, kami akan menginstal kerangka kerja ekspres, dan kemudian kami akan mulai membangun aplikasi web sederhana dengan database backend Mongodb

Apa itu Express.js?

Express.js adalah kerangka server aplikasi web Node JS yang dirancang khusus untuk membangun aplikasi web satu halaman, multipage, dan hybrid.

Ini telah menjadi kerangka server standar untuk node.js. Express adalah bagian backend dari sesuatu yang dikenal sebagai Berarti tumpukan

Itu BERARTI adalah tumpukan perangkat lunak JavaScript yang gratis dan open-source untuk membangun situs web dinamis dan aplikasi web yang memiliki komponen berikut;

1) Mongodb – Database NoSQL standar

2) Express.js – Kerangka kerja aplikasi web default

3) Angular – Kerangka kerja JavaScript MVC yang digunakan untuk aplikasi web

4) Node.js -Kerangka kerja yang digunakan untuk aplikasi sisi server dan jaringan yang dapat diskalakan.

Kerangka kerja Express.js membuatnya sangat mudah untuk mengembangkan aplikasi yang dapat menangani beberapa permintaan seperti permintaan GET, PUT, dan POST dan Hapus.

Langkah 1: Instal Kerangka Ekspres.

Pergi ke terminal dan buat satu folder proyek dan masuk ke dalamnya.

$ mkdir expressdemo
$ cd expressdemo 

Sekarang Inisialisasi package.json file dengan perintah berikut.

npm init 

Ini akan memberi kita serangkaian pertanyaan, dan setelah itu, a package.json File akan dibuat di folder proyek Anda.

Instal Express dengan perintah berikut.

npm install express --save 

Langkah 2: Buat file server.js di root.

Buat kami Server node.js melalui kode berikut.

// server.js

const express = require('express');
const app = express();
const port = 3000;
app.listen(port, function(){
  console.log('Node js Express js Tutorial');
}); 

Kami menggunakan fungsi kebutuhan () untuk memasukkan “Modul Ekspres.”

Sebelum kita dapat mulai menggunakan modul Express, kita perlu membuat objek.

Di sini kami membuat fungsi panggilan balik. Fungsi ini akan dipanggil setiap kali ada yang melihat -lihat root aplikasi web kami http://localhost:3000 .

Fungsi panggilan balik akan mengirim string Tutorial Tutorial Node JS Express JS ’ ke halaman web.

Dalam fungsi panggilan balik, kami mencatat string Tutorial Tutorial Node JS Express JS ’ kembali ke klien.

Kami kemudian menggunakan fungsi mendengarkan untuk membuat aplikasi server kami mendengarkan permintaan klien di port no 3000. Anda dapat menentukan port yang tersedia di sini.

Jika kami tidak ingin memulai ulang server secara manual, kami dapat menggunakan paket node yang dipanggil nodemon . Ini mengatur ulang server setiap kali kami mengubah file.

npm install nodemon --save-dev 

Mengubah package.json mengajukan dan menambahkan baris berikut di “ skrip “Objek

"scripts": {
    "start": "nodemon server.js"
}, 

Saat Anda mengetik terminal ” Mulai NPM , ”Ini akan bootstrap server, dan ketika kita mengubah file, itu akan secara otomatis restart.

Langkah 3: Pasang mesin templating EJS.

Jika Anda tidak tahu apa itu mesin templating di Express, lihat ini Mesin template di Express

Untuk memasukkan file CSS dan JS di Express, pertama, kami akan membuat direktori statis yang disebut publik, Dan dalam hal itu, kami akan menempatkan kami CSS dan JS file.

// server.js

app.use(express.static('public')); 

Kami akan menggunakan ” EJS “Sebagai mesin templating, jadi pertama -tama, kita perlu mengunduhnya NPM.

// server.js

npm install --save ejs 

Sekarang kita perlu memperbarui kita server.js file untuk mengatur Lihat mesin

// server.js

app.set('view engine', 'ejs'); 

Kita perlu membuat satu folder di dalam root kita yang disebut pandangan. Lalu, di folder itu, buat satu file dipanggil index.ejs.




  
    
    EJS Engine
    
  
  
    
Node js Express js Tutorial

Untuk menampilkan rute ini, kita perlu menambahkan kode berikut ke server.js mengajukan.

// server.js

app.get('/', function (req, res) {
   res.sendFile(path.join(__dirname,'public', 'index.html'));
}); 

Kita index.html file di dalam publik Folder terlihat seperti ini.




   
   
   
   Node js tutorial


   Node js tutorial 
 

Langkah 4: Konfigurasikan router ekspres.

Sebelum kita menyelami rute, mari kita pahami dasar -dasar rute dalam kerangka kerja web Express.

Apa itu rute

Routing menentukan bagaimana aplikasi menanggapi permintaan klien ke titik akhir tertentu.

Misalnya, klien dapat membuat, memposting, menempatkan atau menghapus permintaan HTTP untuk berbagai URL seperti yang ditunjukkan di bawah ini;

http://localhost:3000/coins
http://localhost:3000/coins/post 

Dalam contoh di atas,

  1. Jika sebuah DAPATKAN Permintaan dibuat untuk URL pertama, responsnya idealnya harus menjadi daftar koin.
  2. Jika POS Permintaan dibuat untuk URL kedua, kami akan menyimpan data.
  3. Jadi berdasarkan URL yang diakses, fungsionalitas yang berbeda pada server web akan dipanggil, dan karenanya, respons akan dikirim ke klien. Ini adalah konsep perutean.

Setiap rute dapat memiliki satu atau lebih fungsi penangan yang dieksekusi saat rute dicocokkan.

Siapkan rute untuk aplikasi kami. Jadi gunakan modul router yang disediakan oleh Express JS. Pertama, buat folder di dalam root yang disebut rute. Lalu, di folder itu, buat satu file dipanggil CoinRouter.js.

const express = require('express');
const app = express();
const CoinRouter = express.Router();

CoinRouter.route('/').get(function (req, res) {
  res.render('index');
});

module.exports = CoinRouter; 

Sekarang di server.js mengajukan , kita perlu membutuhkan CoinRouter.js mengajukan.

// server.js

const CoinRouter = require('./routes/CoinRouter');

app.use('/coins', CoinRouter); 

Silakan beralih ke URL browser: http://localhost:3000/coins/. Itu akan menampilkan file Tampilan Indeks.

Langkah selanjutnya adalah membuat antarmuka bootstrap untuk menambahkan nama dan harga koin.

Langkah 5: Buat formulir.

Dalam tampilan, The Folder membuat satu file dipanggil ke create.ejs mengajukan.



  
    
    EJS Engine
    
  
  
    

Add Coin

Langkah selanjutnya adalah membuat rute di CoinRouter.js file, jadi masukkan kode berikut.

// CoinRouter.js

CoinRouter.route('/create').get(function (req, res) {
   res.render('create');
 }); 

Langkah 6: Instal Perpustakaan Mongoose.

Kami akan menggunakan MongoDB untuk database, jadi kami mengatur a Mongodb database, jadi kita perlu mengunduh paket yang dipanggil Luwak dalam proyek kami.

npm install --save mongoose 

Sekarang, konfigurasikan database untuk aplikasi Node JS kami.

// server.js

const mongoose = require('mongoose');

mongoose.Promise = global.Promise;
mongoose.connect('mongodb://localhost/expressdemo'); 

Langkah 7: Pasang modul Body-Parser.

Kami mengirim data formulir ke server Node JS, jadi kami perlu menginstal modul body-parser untuk menguraikan data yang diposting kami dan memasukkan data itu ke dalam Mongodb database.

npm install --save body-parser 

Sekarang, sertakan modul ini di kami server.js mengajukan.

// server.js

const bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json()); 

Berikutnya adalah membuat model untuk basis data kami. Jadi buat satu folder di root yang disebut model. Di folder itu, buat satu file yang dipanggil Coin.model.js.

// Coin.model.js

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const Coin = new Schema({
  name: {
    type: String
  },
  price: {
     type: Number
  }
},{
    collection: 'coins'
});

module.exports = mongoose.model('Coin', Coin); 

Sekarang, buat rute pos di CoinRouter.js Masukkan kode berikut.

// CoinRouter.js

const Coin = require('../models/Coin.model');

CoinRouter.route('/post').post(function (req, res) {
   const coin = new Coin(req.body);
   console.log(coin);
   coin.save()
     .then(coin => {
     res.redirect('/coins');
     })
     .catch(err => {
     res.status(400).send("unable to save to database");
     });
 }); 

Setiap rute dapat memiliki satu atau lebih fungsi penangan yang dieksekusi saat rute dicocokkan.

Sintaks umum untuk rute ditunjukkan di bawah ini.

app.METHOD(PATH, HANDLER) 

Di mana,

1) Aplikasi adalah instance dari modul Express

2) Metode adalah metode permintaan HTTP (dapatkan, posting, put atau hapus)

3) Jalur adalah jalur di server.

4) Handler adalah fungsi yang dieksekusi saat rute dicocokkan.

Kita server.js File terlihat seperti ini.

// server.js

const express = require('express');
const app = express();
const port = 3000;
const path = require('path');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');

mongoose.Promise = global.Promise;
mongoose.connect('mongodb://localhost/expressdemo');

const CoinRouter = require('./routes/CoinRouter');

app.use(express.static('public'));
app.set('view engine', 'ejs');

app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

app.use('/coins', CoinRouter);

app.get('/', function (req, res) {
   res.sendFile(path.join(__dirname,'public', 'index.html'));
});

app.listen(port, function(){
  console.log('Node js Express js Tutorial at port', port);
}); 

Di sini kami mendefinisikan rute jika URL http://localhost:3000/coins dipilih di browser. Selain itu, kami melampirkan fungsi panggilan balik ke rute yang akan dipanggil ketika kami menjelajah ke URL daftar koin.

Saat URL berisi /koin URI, itu akan mengeksekusi CoinRouter, yang mencakup banyak subroute untuk permintaan GET, POST, PATCE, dan Hapus.

Cobalah untuk mengirimkan Koin , dan ya, itu akan berhasil menambah Database MongoDB

Langkah 8: Tampilkan daftar koin.

Kami perlu mendapatkan data dari database, jadi Anda perlu memasukkan kode berikut di Coinrouter .js mengajukan.

// CoinRouter.js

CoinRouter.route('/').get(function (req, res) {
   Coin.find(function (err, coins){
      if(err){
        console.log(err);
      }
      else {
        res.render('index', {coins: coins});
      }
    });
}); 

Juga, kita perlu memodifikasinya index.ejs Lihat untuk Menampilkan Data.



  
    
    Node js Express Tutorial
    
  
  
    
<% for(var i=0; i < coins.length; i++) { %> <% } %>
Coin Name Coin Price Action
<%= coins[i].name %> <%= coins[i].price %> Edit Delete

Langkah 9: Buat Tampilan dan Rute Edit.

Dalam pandangan folder, buat satu dipanggil EDIT.EJS. Juga, kita perlu meneruskan data dari database dengan ID -nya.

Di MongoDB, kunci utama adalah _Indo. Jadi kita perlu mengambil pengumpulan data dengan ID -nya. Jadi tulis kode berikut ke dalam CoinRouter.js mengajukan.

// CoinRouter.js

CoinRouter.route('/edit/:id').get(function (req, res) {
   const id = req.params.id;
   Coin.findById(id, function (err, coin){
       res.render('edit', {coin: coin});
   });
 }); 

Buat EDIT.EJS file di direktori tampilan.



  
    
    Edit Coin
    
  
  
    

Edit Coin

Sekarang, kode fungsi pembaruan untuk memperbarui nilai dalam database.

// CoinRouter.js

CoinRouter.route('/update/:id').post(function (req, res) {
   Coin.findById(req.params.id, function(err, coin) {
     if (!coin)
       return next(new Error('Could not load Document'));
     else {
       // do your updates here
       coin.name = req.body.name;
       coin.price = req.body.price;
 
       coin.save().then(coin => {
           res.redirect('/coins');
       })
       .catch(err => {
             res.status(400).send("unable to update the database");
       });
     }
   });
 }); 

Jadi, sekarang Anda dapat mengedit dan memperbarui data dalam database.

Langkah 10: Hapus data.

Sekarang, menghapus Fungsionalitas tetap, yang akan kita lakukan dan menyebutnya sehari.

// CoinRouter.js

CoinRouter.route('/delete/:id').get(function (req, res) {
  Coin.findByIdAndRemove({_id: req.params.id},
       function(err, coin){
        if(err) res.json(err);
        else res.redirect('/coins');
    });
}); 

Keseluruhan kami CoinRouter.js File terlihat seperti ini.

// CoinRouter.js

const express = require('express');
const app = express();
const CoinRouter = express.Router();
const Coin = require('../models/Coin.model');

CoinRouter.route('/').get(function (req, res) {
   Coin.find(function (err, coins){
      if(err){
        console.log(err);
      }
      else {
        res.render('index', {coins: coins});
      }
    });
});

CoinRouter.route('/create').get(function (req, res) {
   res.render('create');
 });

 CoinRouter.route('/post').post(function (req, res) {
   const coin = new Coin(req.body);
   console.log(coin);
   coin.save()
     .then(coin => {
     res.redirect('/coins');
     })
     .catch(err => {
     res.status(400).send("unable to save to database");
     });
 });

CoinRouter.route('/edit/:id').get(function (req, res) {
   const id = req.params.id;
   Coin.findById(id, function (err, coin){
       res.render('edit', {coin: coin});
   });
 });

 CoinRouter.route('/update/:id').post(function (req, res) {
   Coin.findById(req.params.id, function(err, coin) {
     if (!coin)
       return next(new Error('Could not load Document'));
     else {
       // do your updates here
       coin.name = req.body.name;
       coin.price = req.body.price;
 
       coin.save().then(coin => {
           res.redirect('/coins');
       })
       .catch(err => {
             res.status(400).send("unable to update the database");
       });
     }
   });
 });

 CoinRouter.route('/delete/:id').get(function (req, res) {
   Coin.findByIdAndRemove({_id: req.params.id},
        function(err, coin){
         if(err) res.json(err);
         else res.redirect('/coins');
     });
 });

module.exports = CoinRouter; 

Ringkasan

  1. Kerangka kerja ekspres adalah kerangka kerja paling umum yang digunakan untuk mengembangkan aplikasi node. Kerangka kerja ekspres dibangun di atas kerangka kerja simpul dan membantu aplikasi berbasis server yang cepat.
  2. Rute mengalihkan pengguna ke berbagai bagian aplikasi web berdasarkan permintaan yang dibuat. Oleh karena itu, respons untuk setiap rute dapat bervariasi tergantung pada apa yang perlu ditunjukkan kepada pengguna.
  3. Templat dapat digunakan untuk menyuntikkan konten secara efisien. Jade adalah salah satu mesin templating paling populer yang digunakan dalam aplikasi simpul.

Itu untuk tutorial ini.

Pos terkait

Unggah gambar Node Express

Setup Node Express di Docker

Cara menyajikan file statis di Express

AWS Lambda dan Node

Sistem File Node

Garpu saya di github

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *