belajar node js, express js, mongodb

http://purwokertojs.blogspot.com/2018/05/crud-node-js-mongodb-dengan-bootstrap_33.html

PURWOKERTOJS

Tutorial NodeJs dan MongoDB Indonesia

• Home
 
• MongoDB

CRUD Node Js MongoDb dengan Bootstrap studi kasus data mahasiswa Part 3

May 07, 2018

Pada tutorial sebelumnya kita sudah membuat database mongodb dengan nama database "universitas" dengan collection adalah "mahasiswa" dengan isi "nim, nama, email, dan phone". Sekarang adalah mengkonfigurasi agar database dapat berinteraksi atau terkoneksi dengan nodejs app kita.

Buka atom editor anda, atau bisa mengetikan pada terminal "atom" kemudian tambahkan project folder crudapps pada atom anda

Nah anda sudah memiliki struktur folder aplikasi webapps tersebut. Sekarang anda membuat file config.js pada root folder (maksudnya adalah file tersebut berada pada folder crudapps) bukan didalam folder bin dan sebagainya. Anda juga bisa membuat file secara labgsung pada terminal dengan mengetikan "touch config.js" sehingga anda memiliki sebuah file baru dengan nama config.js.

	var config = {
	database: {
	url: 'mongodb://localhost:27017/universitas'
	},
	server: {
	host: '127.0.0.1',
	port: '3000'
	}
	}
	module.exports = config

view rawconfig.js hosted with ❤ by GitHub

File config.js akan mendefinisikan url database berjalan dan port yang digunakan, nantinya file config.js tersebut akan di panggil di file app.js. Bisa kalian lihat pada line 3, adalah nama database "universitas" yaitu database yang sudah kita buat sebelumnya.

Selanjutnya buka file app.js pada atom editor anda kemudian ubahlah code nya menjadi seperti berikut :

	var express = require('express')
	var app = express()
	var logger = require('morgan');
	var path = require('path');
	var expressMongoDb = require('express-mongo-db');
	/**
	* Store database credentials in a separate config.js file
	* Load the file/module and its values
	* For MongoDB, we basically store the connection URL in config file
	*/
	var config = require('./config')
	app.use(expressMongoDb(config.database.url));
	/**
	* setting up the templating view engine
	*/
	app.set('view engine', 'ejs')
	/**
	* import routes/index.js
	* import routes/users.js
	*/
	var index = require('./routes/index')
	var users = require('./routes/users')
	var mahasiswa = require('./routes/mahasiswa')
	/**
	* Express Validator Middleware for Form Validation
	*/
	var expressValidator = require('express-validator')
	app.use(expressValidator())
	/**
	* body-parser module is used to read HTTP POST data
	* it's an express middleware that reads form's input
	* and store it as javascript object
	*/
	var bodyParser = require('body-parser')
	/**
	* bodyParser.urlencoded() parses the text as URL encoded data
	* (which is how browsers tend to send form data from regular forms set to POST)
	* and exposes the resulting object (containing the keys and values) on req.body.
	*/
	app.use(bodyParser.urlencoded({ extended: true }))
	app.use(bodyParser.json())
	/**
	* This module let us use HTTP verbs such as PUT or DELETE
	* in places where they are not supported
	*/
	var methodOverride = require('method-override')
	/**
	* using custom logic to override method
	*
	* there are other ways of overriding as well
	* like using header & using query value
	*/
	app.use(methodOverride(function (req, res) {
	if (req.body && typeof req.body === 'object' && '_method' in req.body) {
	// look in urlencoded POST bodies and delete it
	var method = req.body._method
	delete req.body._method
	return method
	}
	}))
	/**
	* This module shows flash messages
	* generally used to show success or error messages
	*
	* Flash messages are stored in session
	* So, we also have to install and use
	* cookie-parser & session modules
	*/
	var flash = require('express-flash')
	var cookieParser = require('cookie-parser');
	var session = require('express-session');
	app.use(cookieParser('keyboard cat'))
	app.use(session({
	secret: 'keyboard cat',
	resave: false,
	saveUninitialized: true,
	cookie: { maxAge: 60000 }
	}))
	app.use(flash())
	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('/', index)
	app.use('/users', users)
	app.use('/mahasiswa', mahasiswa)
	// 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;

view rawapp.js hosted with ❤ by GitHub

Penjelasan code per line :

• Line 1-2 Memanggil express modul 
• Line 3 Memanggil modul morgan yaitu modul yang berfungsi sebagai pencatat setiap request ke server. Biasanya dikenal dengan istilah logging pada terminal.
• Line 4 memanggil modul path dimana nantinya kita bisa memanggil path tertentu misal saya menggunakan path dengan nama public yang akan digunakan untuk memasang css atau bootstrap
• Line 6 - 13 memanggil konfigurasi mongodb database yang sudah kita definisikan sebelumnya pada file config.js
• Line 18 memanggil modul ejs yaitu templating yang akan kita gunakan saat membuat tampilan web html dengan extensi .ejs.
• Line 24 - 26 secara default express framework menyediakan routes untuk indexroutes dan userroutes. nah pada tutorial kali ini kita membuat sebuah route baru atau link baru dengan nama mahasiswa.
• Line 31 -32 memanggil modul form validasi. Misalkan form yang diinputkan harus diisi atau tidak kosong, sebenarnya bootstrap sudah menyediakan juga sih hehe.
• Line 39 - 46 memanggil body parser fungsinya adalah meng-ekstrak semua data yang datang dari request, cara mengakses data tersebut adalah dengan menggunakan req.body
• Line 53 - 68 memanggil method override Mengganti metode permintaan berdasarkan header X-HTTP-Method-Override atau parameter permintaan / pos khusus.
• Line 78 memanggil modul flash yaitu semacam flash text untuk informasi.
• Line 79 memanggil modul cookie parser
• Line 80 memanggil modul express session
• Line 82 -89 jalankan flash, cookie parser dan session
• Line 95 panggil path public yang didalamnya kita taruh bootstrap
• Line 98 membuat url routes untuk link mahasiswa
• Line 117 export modul app.js

Jika kalian cek kembali pada app.js line 24 dan 97 kita membuat sebuah routes index bukan, nah sekarang buka folder routes/index.js ubah codenya menjadi sebagai berikut

	var express = require('express')
	var app = express()
	app.get('/', function(req, res) {
	// render to views/index.ejs template file
	res.render('index', {title: 'Aplikasi CRUD Mahasiswa'})
	})
	/**
	* We assign app object to module.exports
	*
	* module.exports exposes the app object as a module
	*
	* module.exports should be used to return the object
	* when this file is required in another module like app.js
	*/
	module.exports = app;

view rawindex.js hosted with ❤ by GitHub

Penjelasan kode :
Lihat kode line 4 anda melihat get('/' hal itu agar ketika kita menjalankan server localhost:3000 maka langsung diarahkan ke routes index.js

Kemudian buatlah pada folder routes dengan nama mahasiswa.js dengan code sebagai berikut

	var express = require('express')
	var app = express()
	var ObjectId = require('mongodb').ObjectId
	// SHOW LIST OF MAHASISWA
	app.get('/', function(req, res, next) {
	req.db.collection('mahasiswa').find().sort({"_id": -1}).toArray(function(err, result) {
	//if (err) return console.log(err)
	if (err) {
	req.flash('error', err)
	res.render('mahasiswa/listmahasiswa', {
	title: 'Daftar Mahasiswa',
	data: ''
	})
	} else {
	res.render('mahasiswa/listmahasiswa', {
	title: 'Daftar Mahasiswa',
	data: result
	})
	}
	})
	})
	// SHOW ADD MAHASISWA FORM
	app.get('/add', function(req, res, next){
	res.render('mahasiswa/add', {
	title: 'Tambah Mahasiswa',
	nim: '',
	nama: '',
	email: '',
	phone:''
	})
	})
	// ADD NEW MAHASISWA POST ACTION
	app.post('/add', function(req, res, next){
	req.assert('nim', 'Nim is required').notEmpty()
	req.assert('nama', 'Nama is required').notEmpty()
	req.assert('email', 'A valid email is required').isEmail()
	req.assert('phone', 'Phone is required').notEmpty()
	var errors = req.validationErrors()
	if( !errors ) { //No errors were found. Passed Validation!
	var mahasiswa = {
	nim: req.sanitize('nim').escape().trim(),
	nama: req.sanitize('nama').escape().trim(),
	email: req.sanitize('email').escape().trim(),
	phone : req.sanitize('phone').escape().trim()
	}
	req.db.collection('mahasiswa').insert(mahasiswa, function(err, result) {
	if (err) {
	req.flash('error', err)
	res.render('mahasiswa/add', {
	title: 'Tambah Mahasiswa Baru',
	nim: mahasiswa.nim,
	nama: mahasiswa.nama,
	email: mahasiswa.email,
	phone: mahasiswa.phone
	})
	} else {
	req.flash('success', 'Data Berhasil Ditambah!')
	res.redirect('/mahasiswa')
	}
	})
	}
	else { //Display errors
	var error_msg = ''
	errors.forEach(function(error) {
	error_msg += error.msg + '<br>'
	})
	req.flash('error', error_msg)
	res.render('mahasiswa/add', {
	title: 'Tambah Mahasiswa Baru',
	nim: req.body.nim,
	nama: req.body.nama,
	email: req.body.email,
	phone: req.body.phone
	})
	}
	})
	// SHOW EDIT MAHASISWA FORM
	app.get('/edit/(:id)', function(req, res, next){
	var o_id = new ObjectId(req.params.id)
	req.db.collection('mahasiswa').find({"_id": o_id}).toArray(function(err, result) {
	if(err) return console.log(err)
	// if MAHASISWA not found
	if (!result) {
	req.flash('error', 'Mahasiswa tidak ada dengan id = ' + req.params.id)
	res.redirect('/mahasiswa')
	}
	else { // if MAHASISWA found
	res.render('mahasiswa/edit', {
	title: 'Edit mahasiswa',
	//data: rows[0],
	id: result[0]._id,
	nim: result[0].nim,
	nama: result[0].nama,
	email: result[0].email,
	phone: result[0].phone
	})
	}
	})
	})
	// EDIT MAHASISWA POST ACTION
	app.put('/edit/(:id)', function(req, res, next) {
	req.assert('nim', 'Nim is required').notEmpty() //Validate name
	req.assert('nama', 'Nama is required').notEmpty() //Validate age
	req.assert('email', 'A valid email is required').isEmail() //Validate email
	req.assert('phone', 'Phone is required').notEmpty()
	var errors = req.validationErrors()
	if( !errors ) { //No errors were found. Passed Validation!
	var mahasiswa = {
	nim: req.sanitize('nim').escape().trim(),
	nama: req.sanitize('nama').escape().trim(),
	email: req.sanitize('email').escape().trim(),
	phone : req.sanitize('phone').escape().trim()
	}
	var o_id = new ObjectId(req.params.id)
	req.db.collection('mahasiswa').update({"_id": o_id}, mahasiswa, function(err, result) {
	if (err) {
	req.flash('error', err)
	res.render('user/edit', {
	title: 'Edit User',
	id: req.params.id,
	nim: req.body.nim,
	nama: req.body.nama,
	email: req.body.email,
	phone: req.body.phone
	})
	} else {
	req.flash('success', 'Data berhasil diupdate!')
	res.redirect('/mahasiswa')
	}
	})
	}
	else { //Display errors
	var error_msg = ''
	errors.forEach(function(error) {
	error_msg += error.msg + '<br>'
	})
	req.flash('error', error_msg)
	res.render('mahasiswa/edit', {
	title: 'Edit Mahasiswa',
	id: req.params.id,
	nim: req.body.nim,
	nama: req.body.nama,
	email: req.body.email,
	phone:req.bosy.phone
	})
	}
	})
	// DELETE MAHASISWA
	app.delete('/delete/(:id)', function(req, res, next) {
	var o_id = new ObjectId(req.params.id)
	req.db.collection('mahasiswa').remove({"_id": o_id}, function(err, result) {
	if (err) {
	req.flash('error', err)
	// redirect to MAHASISWA list page
	res.redirect('/mahasiswa')
	} else {
	req.flash('success', 'Mahasiswa telah terhapus! id = ' + req.params.id)
	// redirect to MAHASISWA list page
	res.redirect('/mahasiswa')
	}
	})
	})
	module.exports = app;

view rawmahasiswa.js hosted with ❤ by GitHub

Penjelasan Code :

• Line 5 - 22 membuat fungsi get all data pada collection mahasiswa
• Line 11 & 16 adalah path pada views yang dirender maksudnya data keseluruhan dari collection mahasiswa ditampilkan pada file di folder views/mahasiswa/listmahasiswa.ejs
• Line 24 - 33 membuat fungsi navigasi ke form tambah mahasiswa dengan menggunakan file form yaitu file di folder mahasiswa/add.ejs. Jadi ketika anda memilih link add atau tambah yaitu "localhost:3000/mahasiswa/add" akan diarahkan ke form add.ejs
• Line 36 - 92 membuat form action, jika kalian terbiasa dengan form action pada php pasti hal ii mudah dipahami. form action berfungsi mengeksekusi code tertentu misalkan post data / update /delete data. Nah pada kode ini adalah untuk post data ketika menambah mahasiswa.
• Line 94 - 118 membuat navigasi edit data berdasarkan id yang dipilih
• Line 120 - 180 membuat update form action berdasarkan id
• Line 183 - 196 membuat fungsi hapus data berdasarkan id

Agar lebih menarik kita ubah halaman index.ejs menjadi seperti berikut

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="author" content="">
	<title><%= title %></title>
	<!-- Bootstrap core CSS -->
	<link rel='stylesheet' href='/stylesheets/cover.css' />
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
	</head>
	<body class="text-center">
	<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
	<header class="masthead mb-auto">
	<div class="inner">
	<h3 class="masthead-brand">CRUD</h3>
	<nav class="nav nav-masthead justify-content-center">
	<a class="nav-link active" href="#">Home</a>
	<a class="nav-link" href="https://github.com/banyucenter">About</a>
	<a class="nav-link" href="https://github.com/banyucenter">Contact</a>
	</nav>
	</div>
	</header>
	<main role="main" class="inner cover">
	<h1 class="cover-heading">CRUD Mahasiswa</h1>
	<p class="lead">Aplikasi CRUD (Create, Read, Update, Delete) sederhana
	menggunakan Express Framework untuk Node Js dan MongoDB dengan Bootstrap 4.0.</p>
	<p class="lead">
	<a href='/mahasiswa' class="btn btn-lg btn-secondary">CRUD Mahasiswa</a>
	</p>
	</main>
	<footer class="mastfoot mt-auto">
	<div class="inner">
	<p>CRUD App <a href="https://banyu.center/">Banyu Center</a>, by <a href="https://github.com/banyucenter">@banyucenter</a>.</p>
	</div>
	</footer>
	</div>
	<!-- Bootstrap core JavaScript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
	</body>
	</html>

view rawindex.ejs hosted with ❤ by GitHub

Kemudian pada folder public/stylesheets buat file baru dengan nama cover.css

	/*
	* Globals
	*/
	/* Links */
	a,
	a:focus,
	a:hover {
	color: #fff;
	}
	/* Custom default button */
	.btn-secondary,
	.btn-secondary:hover,
	.btn-secondary:focus {
	color: #333;
	text-shadow: none; /* Prevent inheritance from `body` */
	background-color: #fff;
	border: .05rem solid #fff;
	}
	/*
	* Base structure
	*/
	html,
	body {
	height: 100%;
	background-color: black;
	}
	body {
	display: -ms-flexbox;
	display: flex;
	color: #fff;
	text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
	box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
	}
	.cover-container {
	max-width: 42em;
	}
	/*
	* Header
	*/
	.masthead {
	margin-bottom: 2rem;
	}
	.masthead-brand {
	margin-bottom: 0;
	}
	.nav-masthead .nav-link {
	padding: .25rem 0;
	font-weight: 700;
	color: black;
	background-color: transparent;
	border-bottom: .25rem solid transparent;
	}
	.nav-masthead .nav-link:hover,
	.nav-masthead .nav-link:focus {
	border-bottom-color: rgba(255, 255, 255, .25);
	}
	.nav-masthead .nav-link + .nav-link {
	margin-left: 1rem;
	}
	.nav-masthead .active {
	color: black;
	border-bottom-color: #fff;
	}
	@media (min-width: 48em) {
	.masthead-brand {
	float: left;
	}
	.nav-masthead {
	float: right;
	}
	}
	/*
	* Cover
	*/
	.cover {
	padding: 0 1.5rem;
	}
	.cover .btn-lg {
	padding: .75rem 1.25rem;
	font-weight: 700;
	}
	/*
	* Footer
	*/
	.mastfoot {
	color: black;
	}

view rawcover.css hosted with ❤ by GitHub

Selanjutnya membuat folder layouts di folder views, dan tambahkan file header.ejs dan footer.ejs

	<html>
	<head>
	<title><%= title %></title>
	<link rel='stylesheet' href='/stylesheets/style.css' />
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
	</head>
	<body>

view rawheader.ejs hosted with ❤ by GitHub

	</body>
	</html>

view rawfooter.ejs hosted with ❤ by GitHub

Langkah selanjutnya adalah membuat folder mahasiswa di views folder dan tambahkan code untuk menambah mahasiswa yaitu add.ejs

	<%- include ../layouts/header.ejs %>
	<% if (messages.error) { %>
	<p style="color:red"><%- messages.error %></p>
	<% } %>
	<% if (messages.success) { %>
	<p style="color:green"><%- messages.success %></p>
	<% } %>
	<h2>Tambah Mahasiswa</h2><br>
	<form action="/mahasiswa/add" method="post" name="form1">
	<div class="form-group ">
	<label>NIM</label>
	<input class="form-control" type="text" name="nim" id="nim" value="<%= nim %>" />
	</div>
	<div class="form-group ">
	<label>Nama</label>
	<input class="form-control" type="text" name="nama" id="nama" value="<%= nama %>" />
	</div>
	<div class="form-group ">
	<label>Email</label>
	<input class="form-control" type="email" name="email" id="email" value="<%= email %>" />
	</div>
	<div class="form-group ">
	<label>Phone</label>
	<input class="form-control" type="text" name="phone" id="phone" value="<%= phone %>" />
	</div>
	<input type="submit" name="Submit" value="Add" />
	</form>
	<!--
	including footer content which is common for all pages
	-->
	<%- include ../layouts/footer.ejs %>

view rawadd.ejs hosted with ❤ by GitHub

Buat juga membuat form edit data yaitu edit.ejs

	<%- include ../layouts/header.ejs %>
	<% if (messages.error) { %>
	<p style="color:red"><%- messages.error %></p>
	<% } %>
	<% if (messages.success) { %>
	<p style="color:green"><%- messages.success %></p>
	<% } %>
	<h2>Edit Mahasiswa</h2><br>
	<form action="/mahasiswa/edit/<%= id %>" method="post" name="form1">
	<div class="form-group ">
	<label>NIM</label>
	<input class="form-control" type="text" name="nim" id="nim" value="<%= nim %>" />
	</div>
	<div class="form-group ">
	<label>Nama</label>
	<input class="form-control" type="text" name="nama" id="nama" value="<%= nama %>" />
	</div>
	<div class="form-group ">
	<label>Email</label>
	<input class="form-control" type="email" name="email" id="email" value="<%= email %>" />
	</div>
	<div class="form-group ">
	<label>Phone</label>
	<input class="form-control" type="text" name="phone" id="phone" value="<%= phone %>" />
	</div>
	<input type="submit" name="Submit" value="Edit" />
	<input type="hidden" name="_method" value="PUT" />
	</form>
	<!--
	including footer content which is common for all pages
	-->
	<%- include ../layouts/footer.ejs %>

view rawedit.ejs hosted with ❤ by GitHub

Terakhir kita buat listmahasiswa.ejs untuk menampilkan semua data mahasiswa

	<%- include ../layouts/header.ejs %>
	<% if (messages.error) { %>
	<p style="color:red"><%- messages.error %></p>
	<% } %>
	<% if (messages.success) { %>
	<p style="color:green"><%- messages.success %></p>
	<% } %>
	<a class="btn btn-info" href='/mahasiswa/add'>Tambah</a> <br><br>
	<table class="table table-bordered">
	<thead class="thead-dark">
	<tr>
	<th>NIM</th>
	<th>Nama</th>
	<th>Email</th>
	<th>Phone</th>
	<th>Aksi</th>
	</tr>
	</thead>
	<% if (data) { %>
	<% data.forEach(function(mahasiswa){ %>
	<tr>
	<td><%= mahasiswa.nim %></td>
	<td><%= mahasiswa.nama %></td>
	<td><%= mahasiswa.email %></td>
	<td><%= mahasiswa.phone %></td>
	<td>
	<div style="float:left">
	<a class="btn btn-warning" href='/mahasiswa/edit/<%= mahasiswa._id %>'>Edit</a> &nbsp;
	<form method="post" action="/mahasiswa/delete/<%= mahasiswa._id %>" style="float:right">
	<input class="btn btn-danger" type="submit" name="delete" value='Delete' onClick="return confirm('Are you sure you want to delete?')" />
	<input type="hidden" name="_method" value="DELETE" />
	</form>
	</div>
	</td>
	</tr>
	<% }) %>
	<% } %>
	</table>
	<!--
	including footer content which is common for all pages
	-->
	<%- include ../layouts/footer.ejs %>
	<!-- code by @ipungdev -->

view rawlistmahasiswa.ejs hosted with ❤ by GitHub

Sekarang ketikan "nodemon" pada terminal anda, ketika server sudah berjalan silahkan test aplikasi pada "localhost:3000" Jika anda berhasil anda akan melihat tampilan seperti berikut

Download Project : https://github.com/banyucenter/crudnodejsmongodbbootstrap

Terimakasih

Ipung Purwono

Labels

Popular posts from this blog

CRUD Node Js MongoDb dengan Bootstrap studi kasus data mahasiswa Part 1

May 07, 2018

Pada tutorial sebelumnya kita sudah membuat CRUD juga, namun belum menggunakan markup language yaitu html dan css yang biasa kita gunakan. Nah pada kesempatan kali ini saya akan membuatnya dengan Bootstrap Framework agar lebih mudah dan cepat. Tutorial ini lumayan panjang karena sangat komplit dari installasi packages yang dibutuhkan, membuat database mongodb beserta collectionnya, templating dan konfigurasi bootstrap tentunya.

Pada tutorial kali ini kita akan membuat langkah-langkah umum yaitu :

Install Express.js untuk kerangka aplikasinya beserta packages lain seperti body parser, cookie parser, ejs, path dan sebagainya.Membuat database kampus dengan collection mahasiswa. Nah yang akan di CRUD kan adalah data mahasiswa.Membuat konfigurasi routes dan view Konfigurasi dengan bootstrap tentunya Baiklah itu adalah 4 langkah umum yang akan kita buat. Sekarang kita akan memulai langkah pertama :
Langkah 1 : Arahkan folder ke Documents pada ubuntu anda dengan mengetik pada terminal 
"c…

READ MORE

Tutorial MongoDB : Membuat Database

May 09, 2018

Jika pada waktu menggunakan RDBMS MySQL kita harus menginstal xampp atau wampp atau lampp pada OS , kemudian kita bisa membuat database menggunakan phpmyadmin, lalu pada SQL editor kita bisa mengetikan "create database namadatabaseanda". Namun ketika kita membuat database pada MongoDB cukup menggunakan "use namadatabaseanada".

Berikut ini langkah-langkah membuat database dengan menggunakan MongoDB.

Buka terminal pada ubuntu anda atau tekan "ctrl + alt +t"Aktifkan server mongodb dengan mengetikan "sudo service mongodb start"Masukan password ubuntu anda.Ketikan "mongod" maka server mongodb berjalan

Lalu buka terminal baru , dan ketikan "mongo"Setelah itu anda bisa mulai menggunakan console untuk membuat database



Anda bisa melihat pada terminal yang baru anda buka, ada kedipan kursor, nah console bisa kita gunakan disana.Syntak Beberapa syntak akan kita gunakan untuk membuat database MongoDb antara lain adalah mengecek database yan…

READ MORE

About Me

CV Jaya Mandiri

VISIT PROFILE

Archive

Labels

Report Abuse

 Powered by Blogger