Membuat Aplikasi Mini Market dengan ExpressJS dan Mongoose Part 4 : Routing

Ditutorial sebelumnya kita sudah membuat templating untuk Membuat Aplikasi Mini Market dengan ExpressJS dan Mongoose. Pada pembahasan kali ini kita akan membuat routes untuk menampilkan halaman umum (kategori, satuan dan merk) dan halaman barang. 

Baca Sebelumnya - Membuat Aplikasi Mini Market Dengan ExpressJS Dan Mongoose Part 3 : Templating

Silahkan bagi kalian untuk melihat tutorial sebelumnya karna klo baca-bacanya setengah ga bakalan nyambung. Kita lanjut, tahap pertama yang harus dilakukan adalah buka direktori mini_market dan ubah file index.js di folder routes

index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index');
});

router.get('/umum', function(req, res, next) {
  res.render('umum/index');
});

module.exports = router;

Setelah itu buat lagi file dengan nama kategori.js masih di folder routes. dan masukan script dibawah

kategori.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/add', function(req, res, next) {
   res.render('kategori/index');
});



module.exports = router;

yang terakhir di dalam folder routes kita buat file barang.js. masukan script dibawah

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
   res.render('barang/index');
});

module.exports = router;

Setelah routes beres kita lanjut ke file app.js dan tambahkan script dibawah.

var barangRouter = require('./routes/barang');
var kategoriRouter = require('./routes/kategori');

app.use('/barang', barangRouter);
app.use('/umum/kategori', kategoriRouter);

Lihat script lengkapnya.

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var barangRouter = require('./routes/barang');
var kategoriRouter = require('./routes/kategori');

var app = express();

// view engine setup
app.engine('ejs', require('ejs-locals'));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/barang', barangRouter);
app.use('/umum/kategori', kategoriRouter);

//koneksi
var mongoose = require('mongoose');
mongoose.Promise = global.Promise;

mongoose.connect('mongodb://localhost/mini_market', { useNewUrlParser: true })
 .then(() => console.log('berhasil terhubung'))
 .catch((err) => console.error(err));

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Selanjutnya kita akan membuat folder barang dan umum di dalam folder views

C:\Users\RSAM\Documents\nodejs_tutorial\express\mini_market\views>mkdir umum
C:\Users\RSAM\Documents\nodejs_tutorial\express\mini_market\views>mkdir barang
C:\Users\RSAM\Documents\nodejs_tutorial\express\mini_market\views>mkdir kategori

Setelah itu buat file index.ejs di setiap folder yang sudah di buat tadi

/umum/index.ejs

<% layout('../layout/page') -%>
<% block('title', 'Data Umum') %>
<hr>
<div class=row>
 <div class='col-md-4'>
  <h4 align='center'>Kategori</h4><a href='/umum/kategori/add'><button class='btn btn-primary'>Tambah</button></a></div>
 <div class='col-md-4'>
  <h4 align='center'>Satuan</h4><a href='#'><button class='btn btn-primary'>Tambah</button></a></div>
 <div class='col-md-4'>
  <h4 align='center'>Merk</h4><a href='#'><button class='btn btn-primary'>Tambah</button></a></div>
</div>

/barang/index.ejs

<% layout('../layout/page') -%>
<% block('title', 'Data Barang') %>

/kategori/index.ejs

<% layout('../layout/page') %>
<% block('title', 'Form kategori') %>

dan yang terakhir kita edit menu file navigasi.js di dalam folder views/partials 

views/partials/navigasi.js

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Admin</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">      
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Master Data <span class="sr-only">(current)</span>
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="/umum">Umum</a>
   <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="/barang">Barang</a>
          <!--<div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>-->
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Transaksi</a>
      </li>
     <li class="nav-item">
        <a class="nav-link" href="#">Laporan</a>
      </li>
    </ul>
    <span class="navbar-text">
      <a>Logout</a>
    </span>
  </div>
</nav>

Silahkan jalankan aplikasi mini market dan coba kalian klik menu master data pilih umum atau barang, maka halaman akan berganti seperti gambar di bawah ini

Sekian untuk tutorial kali ini tentang Membuat Aplikasi Mini Market dengan ExpressJS dan Mongoose Part 4 : Routing. Ditutorial selanjutnya kita akan mencoba membuat CRUD kategori


Baca Selanjutnya - Membuat Aplikasi Mini Market Dengan ExpressJS Dan Mongoose Part 5 : CRUD Kategori