AngularJS Insert using PHP MySQLi

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.

Also Read :  Sort associative array by specific key in PHP



  <title>simple Angular & PHP and MySQLi Tutorial</title>
  
  

  <!--Live Google angular js cdn-->
  
  

  <!--Include  Bootstrap CSS -->
  
  
  <!--our simple custom source code-->
  
  


	<div class="live container">
		<h2 style="font-style: italic;color: darkblue">Angular & PHP - Pakainfo.com</h2>
		<hr></hr>
		<div class="main"></div>
	</div>
	<br />


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:

<h3 style="font-weight: bold">Members List</h3>
<table class="live table table-bordered">
	<thead>
	<tr>
		<th>Member ID</th><th>Member Name</th><th>Member Email</th>
	</tr>
	</thead>
	<tbody>
		<tr>
			<td>{{memobj.mem_id}}</td><td>{{memobj.member_name}}</td><td>{{memobj.member_email}}</td>
		</tr>
	</tbody>
</table>

<a href="#!add" class="btn btn-warning">Add Member</button>

add.html

<h3 style="font-weight: bold">Add a Member</h3>
<form name="form">
	<div class="alert alert-success">
		<strong>Success!</strong> Member Added!.
	</div>
	<div class="form-group">
		<label for="member_name">Member Name</label>
		
	</div>
	
	<div class="form-group">
		<label for="member_name">Member Email</label>
		
	</div>
</div>
<br />
<button type="submit" class="btn btn-success">Submit</button>
<a href="#" class="live btn btn-warning">Go Back</button>
</form>

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.

Also Read :  PHP prepend leading zero prefixes after number

<?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

Also Read :  Insert,Update, Delete using Angular js in ASP.NET MVC

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.

Leave a Reply

avatar
  Subscribe  
Notify of