AngularJS Insert using PHP MySQLi
In this Post We Will Explain About is AngularJS Insert using PHP MySQLi With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to AngularJS Insert data into database using PHP MySQLi Example
In this post we will show you Best way to implement AngularJS CRUD Operations with PHP and MySQLi, hear for how to insert data in database using angularjs with PHP MySQLi in mvc with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
index.html
The velow source code is just a add normal index HTML page with angular Directives extra attributes such as Like angular module ng-app=”liveApp” and HTML ng-view, It are called AngularJS Directives.
simple Angular & PHP and MySQLi Tutorial
Angular & PHP - Pakainfo.com
app.js
And then, let’s Display mai angular custom files the app.js source code, so We can Learn the above angular Directives ng-app=”liveApp”:
var liveApp = angular.module('liveApp',[
'ngRoute',
'membersModule'
]);
liveApp.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/', {
templateUrl: 'view/list.html',
controller: 'memCtrlList'
}).
when('/add', {
templateUrl: 'view/add.html',
controller: 'memAddCtrl'
}).
otherwise({
redirectTo: '/'
});
}]);
list.html:
Members List
| Member ID | Member Name | Member Email |
| {{memobj.mem_id}} | {{memobj.member_name}} | {{memobj.member_email}} |
Add Member
add.html
Add a Member
Go Back
controller.js:
Let’s Display the angularjs controller.js:
var membersModule = angular.module('membersModule', []);
membersModule.controller('memCtrlList', ['$scope', '$http', function($scope, $http){
//use $http.get() to get the list of members
$http.get('php/member_list.php').then(function(response){
//send back the member data to the list.html view
$scope.memberList = response.data;
});
}]);
membersModule.controller('memAddCtrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout){
//create a function add_member with varibles name and email
$scope.add_member = function (name, email){
//All data here set the data array
var data = {
name: name,
email: email
}
//use simple angular $http.post to send above data to php
$http.post('php/add_member.php', JSON.stringify(data)).then(function(response){
//clear All the HTML form fields
$scope.member_name = "";
$scope.member_email = "";
//show success message
$scope.message = true;
//hide the message after some 2 secs
$timeout(function(){$scope.message = false;}, 1000);
});
}
}]);
And finally Some reacted Database the PHP files
member_list.php
Here, All the Get All the Fetch Using mysqli Database.
<?php
require('db_config.php');
$lstquery = mysqli_query($db_con, 'select * from members');
$member_list = array();
while($rows = mysqli_fetch_assoc($lstquery)){
$member_list[] = $rows;
}
print json_encode($member_list);
add_member.php
Now, Simple to get all the members Data.
name);
$email = mysqli_real_escape_string($db_con, $getdata->email);
$query = mysqli_query($db_con, "insert into members (member_name, member_email) values ('$name', '$email')") or die ('Unable to execute query. '. mysqli_error($db_con));
db_config.php
Let’s start simple PHP to mysqli database connection.
<?php
$db_con = mysqli_connect('HOST_NAME', 'YOUR_DATABASE_USER_NAME', 'YOUR_DATABASE_PASSWORD');
$db = mysqli_select_db($db_con, 'YOUR_DATABASE_NAME');
--
-- Table structure for table `members`
--
CREATE TABLE `members` (
`mem_id` int(10) UNSIGNED primary key auto_increment NOT NULL,
`member_name` varchar(50) DEFAULT NULL,
`member_email` varchar(100) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `members`
--
INSERT INTO `members` (`mem_id`, `member_name`, `member_email`) VALUES
(1, 'agurchand', '[email protected]');
You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example
Example
I hope you have Got What is Insert the data to MySQLi database on PHP page using AngularJS And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.
