March 19, 2017
Insert Data Into Database using AngularJS with PHP MySQL
Hi friends in this post, We are going to learn how to insert data into the database using AngularJS with PHP Mysql. AngularJS can communicate over server to fetch data or insert data but in this post we have short introduction about how AngularJS interact with servers, Now we going to insert data into database with using AngularJS, to demonstrate and to explain we have been used some PHP language along with MySQL database, if you are new to this also no need to suffer because this also we have enough introduction just go through and try this sample as your own.
Database
|
1 2 3 4 5 6 7 8 9 |
CREATE TABLE `insert_emp_info` ( `id` int(11) NOT NULL, `name` varchar(255) NOT NULL, `email` varchar(255) NOT NULL, `age` varchar(3) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; INSERT INTO `insert_emp_info` (`id`, `name`, `email`, `age`) VALUES |
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>softAOX | Insert Data Into Database using Angular JS with PHP Mysql</title> <!-- Bootstrap --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> </head> <body> <div class="container"> <h1 align="center">Insert Data Into Database using Angular JS with PHP Mysql</h1> <div ng-app="sa_insert" ng-controller="controller"> <label>Name</label><input type="text" name="name" ng-model="name" class="form-control"><br/> <label>Email</label><input type="text" name="email" ng-model="email" class="form-control"><br/> <label>Age</label><input type="text" name="age" ng-model="age" class="form-control"><br/> <input type="submit" name="insert" class="btn btn-success" ng-click="insert()" value="Insert"> </div> </div> <!-- Script --> <script> var app = angular.module("sa_insert", []); app.controller("controller", function($scope, $http) { $scope.insert = function() { $http.post( "insert_data.php", { 'name': $scope.name, 'email': $scope.email, 'age': $scope.age } ).success(function(data) { alert(data); $scope.name = null; $scope.email = null; $scope.age = null; }); } }); </script> </body> </html> |
insert_data.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php $conn = mysqli_connect("localhost", "root", "", "angular_js"); $info = json_decode(file_get_contents("php://input")); if(count($info) > 0) { $name = mysqli_real_escape_string($conn, $info->name); $email = mysqli_real_escape_string($conn, $info->email); $age = mysqli_real_escape_string($conn, $info->age); $query = "INSERT INTO insert_emp_info(name, email, age) VALUES ('$name', '$email', '$age')"; if(mysqli_query($conn, $query)) { echo "Insert Data Successfully"; } else { echo "Failed"; } } ?> |
