CODEWITHSUNDEEP
angularjsnode.js
Ishwar Panchariya
Ishwar Panchariya

Reputation: 11

inserting data into mysql database using nodejs angularjs

I am newbie. i am not able to insert data from front end into mysql database. I am facing the problem at the time of insertion. I'm unable to trace my coding error whether it is in controller.js or in index.html or in server.js. Please help me to solve this.

my server.js code

var express    = require("express");
var app = express();
var bodyParser = require('body-parser');
var mysql      = require('mysql');
var connection = mysql.createConnection({
   host     : 'localhost',
   user     : 'root',
   password : '',
   database : 'bookitnow'
});

connection.connect(function(err) {
   if (!err)
     console.log('Database is connected');
   else
     console.log('DB connection error.');
});

app.use(express.static(__dirname + '/public'));

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


app.post('/index.html', function(req, res, next) {
  var data = req.body;
    console.log('request received:', data);

    connection.query('INSERT INTO register SET ?', data, function(err,res){
      if(err) throw err;
        console.log('record inserted');
    });  

app.listen(5500);

console.log('Hi from server.js');

my controller.js code

 var app = angular.module('bookitnow',[]);
        app.controller('myCtrl', function($scope,$http){
        $scope.submit = function() {

            var data = {
                    fName   : $scope.fname, 
                    lName   : $scope.lname,
                    email   : $scope.email,
                    phone   : $scope.phone,
                    password: $scope.pswd,
                    confirm : $scope.confirm
                }   
            };

            $http.post('/index.html', &scope.data)
            .success(function (data, status, headers, config) {
                    $scope.result = data;
                    console.log("inserted successfully")
                })
                .error(function(data, status, header, config){
                    $scope.result = "Data: " + status;


                });

            $scope.add.push(data);
            $scope.addNewUser = {
                    fname:"",
                    lname:"",
                    email:"",
                    phone:"",
                    password:"",
                    confirm:""
        };
});

my index.html code

<html ng-app="bookitnow">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <link rel="stylesheet" href="./css/style.css">

    <title> Registration Page </title>
</head>
<body>
<div class="container" ng-app="bookitnow" ng-controller="myCtrl">
  <h1>Register</h1>
    <form method="post">
    <div class="form-group">
        <input type="text" class="form-control" id="firstName" ng-model="fname" placeholder="First Name" required>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" id="lastName" ng-model="lname" placeholder="Last Name" required>
    </div>
    <div class="form-group">
        <input type="email" class="form-control" id="email" ng-model="email" placeholder="Email Address" required>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" id="phone" ng-model="phone" placeholder="Phone" required>
    </div>
    <div class="form-group">
        <input type="password" class="form-control" id="pswd" ng-model="pswd" placeholder="Password" required>
    </div>
    <div class="form-group">
        <input type="password" class="form-control" id="confirm" ng-model="confirm" placeholder="Confirm Password" required>
    </div>
<button type="submit" class="btn btn-info" ng-click="submit()">Submit</button>

</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="controllers/controller.js"></script>

</body>
</html>

Upvotes: 0

Views: 3288

Answers (1)

abdulbari
abdulbari

Reputation: 6242

Your route is not proper.

This is not a valid route

app.get('/index.html')

Change your all route in on server side like this

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


app.post('/', function(req, res, next) {//remove index.html
      var data = req.body;
      console.log('request received:', data);

      connection.query('INSERT INTO register SET ?', data, function(err, res) {
        if (err) throw err;
        console.log('record inserted');
      });

And request from client side like this

 $http.post('/', $scope.data)
   .success(function(data, status, headers, config) {
     $scope.result = data;
     console.log("inserted successfully")
   })
   .error(function(data, status, header, config) {
     $scope.result = "Data: " + status;
   });

Hope this will work for you

Upvotes: 1

Related Questions