Hello friends in this post, We will learn something new topic in web development, We are going to learn about AngularJS. In this We will show you how can we use AngularJS for Insert Data into Mysql table and how can we fetch data from mysql table by using PHP script without page refresh. First We have Introduce what is AngularJS. AngularJS is a Javascript Framework and we can added it to HTML page by using script tag. It can extends HTML attributes by using Directives and it can be binds data to HTML by using Expressions. How to use AngularJS with our application, so for that I have make this video tutorial, In this tutorial We will discuss different directive of AngularJS and how to use this directives with HTML and what is the use of that directive. By using this we will insert data into our mysql table and we will fetch data from mysql data and show on web page. In this video how to make function in AngularJS and by using this function how can we call php script by this AngularJS function. This all things we will discuss in this Video tutorial.
Source Code
Database
--
-- Table structure for table `tbl_user`
--
CREATE TABLE IF NOT EXISTS `tbl_user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`first_name` varchar(200) NOT NULL,
`last_name` varchar(200) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=22 ;
--
-- Dumping data for table `tbl_user`
--
INSERT INTO `tbl_user` (`id`, `first_name`, `last_name`) VALUES
(18, 'Mark', 'John');
index.php
<!DOCTYPE html>
<!-- index.php !-->
<html>
<head>
<title>Webslesson Tutorial | AngularJS Tutorial with PHP - Insert Data into Mysql Database</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:500px;">
<h3 align="center">AngularJS Tutorial with PHP - Insert Data into Mysql Database</h3>
<div ng-app="myapp" ng-controller="usercontroller">
<label>First Name</label>
<input type="text" name="first_name" ng-model="firstname" class="form-control" />
<br />
<label>Last Name</label>
<input type="text" name="last_name" ng-model="lastname" class="form-control" />
<br />
<input type="submit" name="btnInsert" class="btn btn-info" ng-click="insertData()" value="ADD"/>
</div>
</div>
</body>
</html>
<script>
var app = angular.module("myapp",[]);
app.controller("usercontroller", function($scope, $http){
$scope.insertData = function(){
$http.post(
"insert.php",
{'firstname':$scope.firstname, 'lastname':$scope.lastname}
).success(function(data){
alert(data);
$scope.firstname = null;
$scope.lastname = null;
});
}
});
</script>
insert.php
<?php
//insert.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$data = json_decode(file_get_contents("php://input"));
if(count($data) > 0)
{
$first_name = mysqli_real_escape_string($connect, $data->firstname);
$last_name = mysqli_real_escape_string($connect, $data->lastname);
$query = "INSERT INTO tbl_user(first_name, last_name) VALUES ('$first_name', '$last_name')";
if(mysqli_query($connect, $query))
{
echo "Data Inserted...";
}
else
{
echo 'Error';
}
}
?>
Thanks for good tutorial but empty values also inserting in database how to solve this and i am trying configuration with calling with another page it's not working please give me the solution i am waiting for you
ReplyDeletevery useful tutorial can you tell me how to make require field in angular js
ReplyDeletethanks.
thank you.
ReplyDeletevery useful tutorial.
Can you help me.? I do the same? But it don't work
ReplyDeleteyour blog tutorial is to nice. i learn very well. This is my blog
ReplyDeletehttp://tutorialabc.com
Notice: Trying to get property of non-object in C:\xampp\htdocs\angular\insert.php on line 4
ReplyDeletetrogh some warning notice
there is some warning related the count function how can i solve it
ReplyDeleteplease create Crud using Angular JS Custom Directive
ReplyDelete