tutorial101 is the one place for high quality web development, Web Design and software development tutorials and Resources programming. Learn cutting edge techniques in web development, design and software development, download source components and participate in the community.
AngularJS CRUD(Create, Read, Update and Delete) with UI-Router and PHP MySQLi
https://angularjs.org/
HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application.
Angular UI-Router is a client-side Single Page Application routing framework for AngularJS. Routing frameworks for SPAs update the browser's URL as the user navigates through the app.
`timestamp` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `posts` (`id`, `title`, `content`, `link`, `timestamp`) VALUES
(4, 'What is AngularJS', 'AngularJS is a JavaScript MVC framework developed by Google that lets you build well structured, easily testable, declarative and maintainable front-end applications which provides solutions to standard infrastructure concerns.', 'link-5', '2021-03-20 08:00:00'),
(5, 'What is MongoDB', 'It is a quick tutorial on MongoDB and how you can install it on your Windows OS. We will also learn some basic commands in MongoDB for example, creating and dropping a Database, Creation of a collection and some more operations related to the collection.', 'link-6', '2021-03-21 08:00:00'),
(6, 'Python Flask Load content Dynamically in Bootstrap Modal with Jquery AJAX and Mysqldb', 'Python Flask Load content Dynamically in Bootstrap Modal with Jquery AJAX and Mysqldb', 'link-6', '2021-03-20 08:00:00'),
(7, 'AutoComplete Textbox with Image using jQuery Ajax PHP Mysql and JqueryUI', 'AutoComplete Textbox with Image using jQuery Ajax PHP Mysql and JqueryUI', 'link-7', '2021-03-14 08:00:00'),
(8, 'PHP Mysql Registration Form Validation using jqBootstrapValidation with Jquery Ajax', 'PHP Mysql Registration Form Validation using jqBootstrapValidation with Jquery Ajax', 'link-8', '2021-03-20 08:00:00'),
(9, 'Python Flask Registration Form Validation using jqBootstrapValidation with Jquery Ajax and Mysql', 'Python Flask Registration Form Validation using jqBootstrapValidation with Jquery Ajax and Mysql', 'link-9', '2021-03-19 08:00:00'),
(10, 'Displaying Popups data on mouse hover using Jquery Ajax and PHP Mysql database', 'Displaying Popups data on mouse hover using Jquery Ajax and PHP Mysql database', 'link-10', '2021-03-15 08:00:00'),
(11, 'Displaying Popups data on mouse hover using Jquery Ajax and Python Flask Mysql database', 'Displaying Popups data on mouse hover using Jquery Ajax and Python Flask Mysql database', 'link-11', '2021-03-14 08:00:00');
ALTER TABLE `posts`
ADD PRIMARY KEY (`id`);
ALTER TABLE `posts`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12;
index.html
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS Load more data with PHP MySQLi</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="myController" ng-init="fetch()">
<div class="container">
<h1 class="page-header text-center">AngularJS Load more data with PHP MySQLi</h1>
<div class="col-md-12">
<div class="panel panel-default" ng-repeat="rs in posts">
<div class="panel-body">
<span style="font-size:20px">{{ rs.id }} {{ rs.title }}</span>
</div>
</div>
<button class="btn btn-success btn-lg btn-block" ng-click="loadmore()">{{ loadName }}</button>
<br><br>
</div>
</div>
<script>
var app = angular.module('app', []);
app.controller('myController', function($scope, $http){
$scope.loadName = 'Load More';
$scope.fetch = function(){
$http.get('fetch.php')
.success(function(data){
$scope.posts = data;
console.log($scope.posts);
});
}
$scope.loadmore = function(){
var lastid = $scope.posts.length - 1;
var lastobj = $scope.posts[lastid];
$http.post('loadmore.php', lastobj)
.success(function(data){
if(data == ''){
$scope.loadName = 'No more Data to Load';
}
else{
angular.forEach(data, function(newpost){
$scope.posts.push(newpost);
});
}
console.log($scope.posts);
});
}
});
</script>
</body>
</html>
fetch.php
//fetch.php
<?php
$conn = new mysqli('localhost', 'root', '', 'testingdb');
$output = array();
$sql = "SELECT * FROM posts ORDER BY id ASC LIMIT 3";
$query=$conn->query($sql);
while($row=$query->fetch_array()){
$output[] = $row;
}
echo json_encode($output);
?>
loadmore.php
//loadmore.php
<?php
$conn = new mysqli('localhost', 'root', '', 'testingdb');
$data = json_decode(file_get_contents('php://input'));
$output = array();
$id = $data->id;
$sql = "SELECT * FROM posts WHERE id > '$id' ORDER BY id ASC LIMIT 3";
$query=$conn->query($sql);
while($row=$query->fetch_array()){
$output[] = $row;
}
echo json_encode($output);
?>
1. updateOn option of the ng-model-options directive. The model value updates when the focus is lost. 2. debounce option delays the model update. update the model after 250 milliseconds 3. updateOn and debounce option. Setting the debounce value of blur event to ‘0’ indicates that the model trigger immediate update when it is out of focus.
