Previous arcitcle we have learned How to Create Login CRUD System using PHP MySQL, Today we will Learn How to create CRUD system in PHP using Angular JS. 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 inventory management system OR accounting application. if you just started web development, you are certainly going to experience lots CRUD grid’s creation work in your later career. The main purpose of a CRUD system is that enables users create, read, update, and delete data. Normallay data stored in MySQL Database.
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.
How To Create CRUD System in PHP using Angular js
1-Creating Database
- Open Phpmyadmin in your Browser
- Click on Database Tab Display on Top side
- Give the Database name “angularcrud”.
- 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.5.1 -- http://www.phpmyadmin.net -- -- Host: 127.0.0.1 -- Generation Time: Oct 06, 2016 at 01:08 PM -- Server version: 10.1.13-MariaDB -- PHP Version: 5.6.23 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; 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: `angularcrud` -- -- -------------------------------------------------------- -- -- Table structure for table `users` -- CREATE TABLE `users` ( `id` int(11) NOT NULL, `name` varchar(255) NOT NULL, `email` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `users` -- INSERT INTO `users` (`id`, `name`, `email`) VALUES (1, 'John Smith', 'none@none.com'), (2, 'Richard Anderson', 'you@me.com'); -- -- Indexes for dumped tables -- -- -- Indexes for table `users` -- ALTER TABLE `users` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `users` -- ALTER TABLE `users` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3; /*!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 “angularcrud”.
- 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 “connect.php”.
<?php
$username = 'root';
$password = '';
try {
$conn = new PDO('mysql:host=localhost;dbname=angularcrud', $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
3 – Creating Form For insert Data and Search Data
in this step we are going to create a form for insert data search data .
<form role="form">
<input type="hidden" ng-model="id">
<label>Full Name:</label>
<input type="text" ng-model="name" name="name" class="form-control" placeholder="Ex. ALex"> <br />
<label>Email:</label>
<input type="text" ng-model="email" name="email" class="form-control" placeholder="Ex. yourmail@gmail.com">
<p style="color:{{message_color}};">{{message}}</p> <br />
<button type="button" ng-click="insertData()" class="btn btn-success">{{ buttonName }}</button>
</form>
<br />
<label>Search:</label>
<input type="search" class="form-control" ng-model="searchUser" placeholder="Live Search"> <br />
4 – Inserting Data into Database using PHP
Next step is inserting data into database using PHP MySQL.
<?php
include 'connect.php';
$data = json_decode(file_get_contents("php://input"));
$buttonName = $data->buttonName;
if($buttonName == "Add")
{
$statement = $conn->prepare("INSERT INTO users (name, email) VALUES (:name, :email)");
$statement->execute(array(
'name' => $data->name,
'email' => $data->email
));
}
elseif($buttonName == "Update")
{
$statement = $conn->prepare("UPDATE users SET name=:name, email=:email WHERE id=:id");
$statement->execute(array(
'name' => $data->name,
'email' => $data->email,
'id' => $data->id
));
}
5 – Display, Edit and Delete Data using Angular JS
<tr ng-repeat="student in students | filter:searchUser">
<td>{{ student.name }}</td>
<td>{{ student.email }}</td>
<td>
<button class="btn btn-success" ng-click="updateData(student.id, student.name, student.email)">Edit</button>
<button class="btn btn-danger" ng-click="deleteData(student.id)">Delete</button>
</td>
</tr>
6 – Display Data using PHP
<?php
include 'connect.php';
$statement = $conn->prepare('SELECT * FROM users');
$statement->execute(array());
while($row = $statement->fetch()) {
$data[] = $row;
}
print json_encode($data);
7 – Create Delete Function using PHP
<?php
include 'connect.php';
$data = json_decode(file_get_contents("php://input"));
$statement = $conn->prepare("DELETE FROM users WHERE id=:id");
$statement->execute(array(
'id' => $data->id
));
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.
Good tuts keep it up body.From nigeria