I am new to nodejs. My question is quite simple. Trying to use nodejs express framwork(in eclipse IDE) to make a sample website. This website contains two pages, one page is for hotel booking, on this page, customer can choose type of rooms(king bed room, queen bed room), select how many rooms needed, and total price will automaticly be shown on this page(using angularjs). There also a button custom can click to checkout. I have finished this page using angularjs, code(hotelOder.ejs) attached below .
My question comes with the next step : after clicking checkout. I want to send 3 values(the type of rooms, number of rooms ordered, order total) on this page to back end(server) and save it to the server's database using nodejs. Cannot figure gout how to do this using nodejs (transfer.js file below). Then if the database have sucessfully saved these three values, let the server response the saved "order total" back to the second page(orderConfirm.ejs, attach below). Anyone can help? know how to coding for upload(or called post?) these three value to backend and save to database(use mysql).
transfer.js
var ejs = require("ejs");
function orderConfirm(req,res)
{
var totalpay = req.param("totalPay");
//save to database ???
console.log("Query is:"+totalpay);
//return order total ???
return res.render('orderConfirm', {data: totalpay});
}
exports.orderConfirm=orderConfirm;
orderConfirm.ejs
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<p>ordered</p>
<div>
<p><strong>EmailId: </strong><%= data %></p>
<br>
</div>
app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var transfer = require('./routes/transfer'); //add label
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
app.post('/orderConfirm', transfer.orderConfirm);//label add
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
index(hotelOrder).ejs
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
.show{
display:block;
}
.hidden{
display:none;
}
</style>
</head>
<body>
<div >
<div ng-controller="CartController" >
<h1></h1>
<table>
<tr>
<th>Available Rooms</th>
<th>Quantity</th>
<th>Price</th>
<th>Total Price</th>
<th>delete</th>
</tr>
<tr ng-repeat="item in items">
<td>{{ item.title }}</td>
<td>
<input ng-model="item.quantity" />
</td>
<td>{{ item.price | currency }}</td>
<td>{{ item.price * item.quantity | currency }}</td>
<td>
<button ng-click="remove(index)">delete</button>
</td>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th id="totalPay2">{{ totalPirce() | currency }}</th>
<th> <button type="" ng-click="checkout()">Order</button> </th>
</tr>
</table>
<div ng-class="{true:'show',false:'hidden'}[isShow]">
<table>
<tr>
<th><h1>Receipt</h1></th>
</tr>
<tr>
<th>name</th>
<th>john</th>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<th>amount paid</th>
<th>{{ totalPirce() | currency }}</th>
</tr>
</table>
</div>
</div>
</div>
<script>angular.module('CartApp', [])
.controller('CartController', function ($scope) {
$scope.isShow=false;
$scope.checkout=function(){
$scope.isShow=true;
}
$scope.items = [
{title: 'Double King', quantity: 0,price: 100.40},
{title: 'Double Queen',quantity: 0,price: 90.40},
{title: 'Single Queen',quantity: 0,price: 80.82}
];
$scope.remove = function (index) {
$scope.items.splice(index, 1);
};
$scope.totalPirce = function () {
var total = 0;
angular.forEach($scope.items, function (value, key) {
total += value.quantity * value.price;
});
return total;
};
$scope.totalRoom = function () {
var total = 0;
angular.forEach($scope.items, function (value, key) {
total +=value.quantity;
});
return total;
};
});
</script>
</body>
</html>
