Learning AngularJS
Never really explored AngularJS much, so thank you for adding sqlite as database, makes it easy to install on local machine and not run bulky databases.
Keep them coming:)
<?php $query="CREATE TABLE IF NOT EXISTS `member`(mem_id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL, firstname TEXT, lastname TEXT, address TEXT)"; ?>
<!DOCTYPE html> <html lang="en" ng-app="myModule"> <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/> </head> <body ng-controller="myController"> <nav class="navbar navbar-default"> <div class="container-fluid"> <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a> </div> </nav> <div class="col-md-3"></div> <div class="col-md-6 well"> <h3 class="text-primary">SQLite Update Table Row Using AngularJS</h3> <hr style="border-top:1px dotted #ccc;"/> <div class="col-md-8"> <table class="table table-bordered"> <thead class="alert-info"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Address</th> <th>Action</th> </tr> </thead> <tbody> <tr ng-repeat="member in members | orderBy: 'lastname'"> <td>{{member.firstname}}</td> <td>{{member.lastname}}</td> <td>{{member.address}}</td> <td><a class="btn btn-warning" href="{{'update_html.php?mem_id=' + member.mem_id}}"><span class="glyphicon glyphicon-edit"></span> Edit</a></td> </tr> </tbody> </table> </div> </div> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.js"></script> <script src="js/angular.js"></script> <script src="js/script.js"></script> </body> </html>
<!DOCTYPE html> <html lang="en" ng-app="myModule"> <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> </head> <body ng-controller="myController"> <nav class="navbar navbar-default"> <div class="container-fluid"> <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a> </div> </nav> <div class="col-md-3"></div> <div class="col-md-6 well"> <h3 class="text-primary">SQLite Update Table Row Using AngularJS</h3> <hr style="border-top:1px dotted #ccc;"/> <div class="col-md-6"> <?php require 'conn.php'; $mem_id = $_REQUEST['mem_id']; $query=$conn->query("SELECT * FROM `member` WHERE `mem_id` = '$mem_id'") or die("Failed to fetch row!"); $fetch=$query->fetchArray(); ?> <form method="POST" ng-init="member={id: '<?php echo $fetch['mem_id']?>', firstname: '<?php echo $fetch['firstname']?>', lastname: '<?php echo $fetch['lastname']?>', address: '<?php echo $fetch['address']?>'}"> <div class="form-group"> <label>Firstname</label> <input type="hidden" class="form-control" ng-model="member.id"/> <input type="text" class="form-control" ng-model="member.firstname" /> </div> <div class="form-group"> <label>Lastname</label> <input type="text" class="form-control" ng-model="member.lastname" /> </div> <div class="form-group"> <label>Address</label> <input type="text" class="form-control" ng-model="member.address"/> </div> <button class="btn btn-warning" ng-click="updateData();" type="button"><span class="glyphicon glyphicon-save"></span> Update</button> </form> <?php } ?> </div> </div> <script src="js/angular.js"></script> <script src="js/script.js"></script> </body> </html>
<?php require_once 'conn.php'; $mem_id = $data->mem_id; $firstname = $data->firstname; $lastname = $data->lastname; $address = $data->address; $query="UPDATE `member` SET `firstname`='$firstname', `lastname`='$lastname', `address`='$address' WHERE `mem_id`='$mem_id'"; ?>
<?php require_once 'conn.php'; while($fetch=$query->fetchArray()){ $data[] = $fetch; } ?>
var app = angular.module("myModule", []) .controller("myController", function($scope, $http){ $http.get('data.php').then(function(response){ $scope.members = response.data; }); $scope.init; $scope.getData = function(){ $http.get('data.php').then(function(response){ $scope.members = response.data; }); } $scope.updateData = function(){ if($scope.member.firstname == "" || $scope.member.lastname == "" || $scope.member.address == ""){ alert("Please complete the required field"); }else{ $http.post("update.php", {mem_id: $scope.member.id, firstname: $scope.member.firstname, lastname: $scope.member.lastname, address: $scope.member.address}) .then(function(){ window.location = 'index.php'; }); } } });