How To Create CRUD in AngularJS using PHP OOPS
The previous article we have learned How To Create CRUD System in PHP using Angular js, Today we will Learn How To Create CRUD in AngularJS using PHP OOPS. in this article, we are focus on creating, reading, updating, deleting and searching database records. we will do it using PHP MySQL and Angular JS. if you are a senior web developer you must have created plenty of CRUD system already. They maybe exist in a content management system, and an inventory management system OR accounting application. The main purpose of a CRUD system is that enables users to create, read, update, and delete data. Normally data stored in MySQL Database.
Getting Bootstrap
Bootstrap can be Download to your needs from their Getting Started page but I would prefer using the CDN option, because it is faster also it is advised to go through and get yourself accustomed with some bootstrap terms, including common classes. This page also some Examples of how to use Bootstrap classes.
CRUD Operations
C – Create OR Insert data to MySQL Database.
R – Read Database Records.
U – Update Selected MySQL Records
D – Delete Selected Record From MySQL Database.
1-Creating Database
- Open PHPMyAdmin in your Browser
- Click on Database Tab Display on Topside
- Give the Database name “ang-crud”.
- After Creating Database Open it.
- Click on SQL Tab on Top area
- Copy the Below Source Code and paste it.
- Then Click on Go.
-- phpMyAdmin SQL Dump -- version 4.8.2 -- https://www.phpmyadmin.net/ -- -- Host: 127.0.0.1 -- Generation Time: Oct 29, 2018 at 10:20 AM -- Server version: 10.1.34-MariaDB -- PHP Version: 5.6.37 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET AUTOCOMMIT = 0; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `ang-crud` -- -- -------------------------------------------------------- -- -- Table structure for table `member` -- CREATE TABLE `member` ( `memberid` int(11) NOT NULL, `firstname` varchar(50) NOT NULL, `lastname` varchar(50) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `member` -- INSERT INTO `member` (`memberid`, `firstname`, `lastname`) VALUES (9, 'Deepak', 'Raj'), (10, 'Priyanshu', 'Kumar'), (11, 'Shubham', 'kumar'), (12, 'Rajan', 'Kumar'), (14, 'Raj', 'Singh'); -- -- Indexes for dumped tables -- -- -- Indexes for table `member` -- ALTER TABLE `member` ADD PRIMARY KEY (`memberid`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `member` -- ALTER TABLE `member` MODIFY `memberid` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=15; COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
OR Import DB File
After Downloading the source code extract it in your root folder.
- Open PHPMyAdmin in your Browser
- Click on Database Tab Display on Top side
- Give the Database name “ang-crud”.
- After Creating Database Open it.
- Click on Import Tab on Top area
- You can Find Db file in Downloaded source code Select it.
- Then Click on Go.
2- Creating Database Connection
After import Database File then next step is creating database connection using php copy the below code and save it is as “conn.php”.
<?php
$conn = new mysqli("localhost", "root", "", "ang-crud");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
3 – Creating Form For insert Data and update Data
in this step, we are going to create a form for insert data update data. copy the below source code and save it as index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>How To create CRUD in AngularJS using PHP OOPS</title>
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/angular.js"></script>
</head>
<body>
<div class="container">
<h1 class="page-header">How To create CRUD in AngularJS using PHP OOPS</h1>
<div class="row">
<div ng-app="mem_app" ng-controller="controller" ng-init="showdata()">
<div class="col-md-4" style="border:1px solid red; padding:10px; box-shadow:2px 0px 5px 0px black;">
<form ng-submit="myFunc()">
<h3>Add Member</h3>
<hr>
<div class="form-group">
<label for="firstname">Firstname</label>
<input type="text" class="form-control" id="firstname" name="firstname" ng-model="firstname" placeholder="Enter Firstname">
</div>
<div class="form-group">
<label for="lastname">Lastname</label>
<input type="text" class="form-control" id="lastname" name="lastname" ng-model="lastname" placeholder="Enter Lastname">
</div>
<hr>
<button type="submit" class="{{btnClass}}" ng-click="insert()"><span class="{{icon}}"></span> {{btnName}}</button>
</form>
</div>
<div class="col-md-8">
<h3>Member List</h3>
<table class="table table-bordered table-striped">
<thead>
<th>Firstname</th>
<th>Lastname</th>
<th>Action</th>
</thead>
<tbody>
<tr ng-repeat="mem in member">
<input type="hidden" value="{{mem.memberid}}">
<td>{{mem.firstname}}</td>
<td>{{mem.lastname}}</td>
<td>
<button class="btn btn-success" ng-click="update(mem.memberid, mem.firstname, mem.lastname)"><span class="glyphicon glyphicon-pencil"></span> Edit</button> - <button class="btn btn-danger" ng-click="delete(mem.memberid)"><span class="glyphicon glyphicon-trash"></span> Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="js/myangular.js"></script>
</body>
</html>
4 – Insert & update Data into Database using PHP
Next step is insert & update data into a database using PHP MySQL. copy the blow source code and save it as save.php.
<?php
include('conn.php');
$info = json_decode(file_get_contents("php://input"));
if (count($info) > 0) {
$firstname = mysqli_real_escape_string($conn, $info->firstname);
$lastname = mysqli_real_escape_string($conn, $info->lastname);
$btn_name = $info->btnName;
if ($btn_name == "Save") {
if ($conn->query("insert into member (firstname, lastname) values ('$firstname', '$lastname')")) {
echo "Member Added Successfully";
} else {
echo 'Failed';
}
}
if ($btn_name == "Update") {
$id = $info->memberid;
if ($conn->query("update member set firstname='$firstname', lastname='$lastname' where memberid='$id'")) {
echo 'Member Updated Successfully';
} else {
echo 'Failed';
}
}
}
?>
5 – Fetch Data using PHP
in this step, we are going to fetch data in index page from MySQL database using php. copy the below code and save it as fetch.php
<?php
include('conn.php');
$output = array();
$query = $conn->query("select * from member");
if ($query->num_rows > 0) {
while ($row = $query->fetch_array()) {
$output[] = $row;
}
echo json_encode($output);
}
?>
6 – Delete Data using PHP
In this step we are going to delete data using php. copy the below code and save it as delete.php
<?php
include('conn.php');
$data = json_decode(file_get_contents("php://input"));
if (count($data) > 0) {
$id = $data->memberid;
if ($conn->query("delete from member where memberid='$id'")) {
echo 'Member Deleted Successfully';
} else {
echo 'Failed';
}
}
?>
7 – Handling all Data Like Insert, Fetch, update & Delete using Angular js
in this step, we are going to create angularjs script for manage all content. copy the below code and save it as myangular.js in js folder .
var app = angular.module("mem_app", []);
app.controller("controller", function($scope, $http) {
$scope.btnName = "Save";
$scope.icon = "glyphicon glyphicon-floppy-disk";
$scope.btnClass = "btn btn-primary";
$scope.insert = function() {
if ($scope.firstname == null) {
alert("Please input Firstname");
}
else if ($scope.lastname == null) {
alert("Please input Lastname");
}
else {
$http.post(
"save.php", {
'firstname': $scope.firstname,
'lastname': $scope.lastname,
'btnName': $scope.btnName,
'memberid': $scope.memberid,
}
).success(function(data) {
alert(data);
$scope.firstname = null;
$scope.lastname = null;
$scope.btnName = "Save";
$scope.icon = "glyphicon glyphicon-floppy-disk";
$scope.btnClass = "btn btn-primary";
$scope.showdata();
});
}
}
$scope.showdata = function() {
$http.get("fetch.php")
.success(function(data) {
$scope.member = data;
});
}
$scope.update = function(memberid, firstname, lastname) {
$scope.memberid = memberid;
$scope.firstname = firstname;
$scope.lastname = lastname;
$scope.icon = "glyphicon glyphicon-check";
$scope.btnClass = "btn btn-success";
$scope.btnName = "Update";
}
$scope.delete= function(memberid) {
if (confirm("Are you sure you want to delete member?")) {
$http.post("delete.php", {
'memberid': memberid
})
.success(function(data) {
alert(data);
$scope.showdata();
});
} else {
return false;
}
}
$scope.enter = function(keyEvent) {
if (keyEvent.which === 13){
insert();
}
}
});
If you facing any type of problem with this source code then you can Download the Complete source code in zip Formate by clicking the below button Download Now otherwise you can send Comment.
[aio_button align=”none” animation=”swing” color=”pink” size=”medium” icon=”none” text=”Download Now” relationship=”dofollow” url=”https://www.sourcecodessite.com/wp-content/uploads/2020/08/angular-crud-2.zip”]