angularjs - how to make a web page pass data to backend(server and save to databse) using nodejs -
i new nodejs. question quite simple. trying use nodejs express framwork(in eclipse ide) make sample website. website contains 2 pages, 1 page hotel booking, on page, customer can choose type of rooms(king bed room, queen bed room), select how many rooms needed, , total price automaticly shown on page(using angularjs). there button custom can click checkout. have finished page using angularjs, code(hoteloder.ejs) attached below .
question comes next step : after clicking checkout. want send 3 values(the type of rooms, number of rooms ordered, order total) on page end(server) , save server's database using nodejs. cannot figure gout how using nodejs (transfer.js file below). if database have sucessfully saved these 3 values, let server response saved "order total" second page(orderconfirm.ejs, attach below). can help? know how coding upload(or called post?) these 3 value backend , save database(use mysql).
transfer.js
var ejs = require("ejs"); function orderconfirm(req,res) { var totalpay = req.param("totalpay"); //save 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 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 , forward error handler app.use(function(req, res, next) { var err = new error('not found'); err.status = 404; next(err); }); // error handlers // development error handler // 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 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>
you need send values in post call, , receiver of post display new page based on that, , storing data in database.
Comments
Post a Comment