Angular JS CRUD

AngularJS CRUD: Example Using MySQLi Database

AngularJS is commonly used for creating a single page application. So, it becomes challenging for users to interact their application with the database and perform CRUD operation in it.

In this tutorial, we are going to create an AngularJS CRUD Example and will also explain each CRUD operation in detail.

For storing of data, we are going to use MySQLi database.

We will learn:

Read data from the database.

Insert data into the database.

Update existing data in the database.

Delete data from the database.

In order to understand easily and effectively, we are going to create an application which will perform all the above-mentioned operation.

We will also explain each process while the process of creating the application.

Speciality of the Application:

Users can Add new entries of employees in the database.

Users can Read, Update and Delete the existing employee details.

Application will also contains a search bar to search the list of employee according to the query given.

Watch AngularJS CRUD Application Demo or download code from the link given below.

DOWNLOAD SCRIPT

Application Development Process:

Step 1: Create file structure of the application.

Follow the image given below and create your application structure in the same way as given in the image.

Otherwise, you may face some problem regarding the working of the application.

AngularJS CRUD Directory Structure

Step 2: Setting up the database.

Create a database name “employee“.

Now, inside employee database, create a table name “emp_details” with different fields using the query given below:

CREATE TABLE emp_details (

emp_id int(255) NOT NULL AUTO_INCREMENT,

emp_name varchar(255) NOT NULL,

emp_email varchar(255) NOT NULL,

emp_gender varchar(255) NOT NULL,

emp_address varchar(255) NOT NULL,

PRIMARY KEY (emp_id)

);

Copy

Download the database .sql file from this link and import it directly into your database. It will automatically create a table “emp_details” with different columns/fields to store employee details in it.

Step 3: Connecting to MySQLi database.

In database_connections.php, write MySQLi query to connect to the database.

<?php

// Connecting to database as mysqli_connect("hostname", "username", "password", "database name");

$con = mysqli_connect("localhost", "root", "", "employee");

Copy

Note: We will include this connection file in each CRUD opearation performing file.

Step 4: Create index.html file for the application.

index.html

This file contains the layout of the application. It includes two seperate form template to insert and update employee details.

Some AngularJS built-in directives have also used in it such as ng-repeat, ng-show, ng-hide, ng-click etc. These directives add some special behaviour into the application to make it more interactive.

Note: – To know about the functionality of different built-in directives, read our blog AngularJS Directives.

Also, for search bar and other filtering functionality, read blog AngularJS Filters.

<head>

<title>AngularJS Directive Demo</title>

</head>

<body>

<h1 class="text-center">AngularJS CRUD Operations Demo</h1>

<button class="btn btn-primary" ng-show="show_form" ng-click="formToggle()">Add Employee <span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>

</div>

</span>

</div>

</nav>

</div>

<tr>

<th>Employee Name</th>

<th>Email Address</th>

<th>Gender</th>

<th>Address</th>

</tr>

<td>

<span>{{detail.emp_id}}</span></td>

<td>{{detail.emp_name}}</td>

<td>{{detail.emp_email}}</td>

<td>{{detail.emp_gender}}</td>

<td>{{detail.emp_address}}</td>

<td>

</td>

<td>

</td>

</tr>

</table>

</div>

</body>

</html>

Copy

Now, we have all the basic settings for the application.

So, let’s focus on the CRUD operation and start from reading the database.

1. Read From Database : Get Employee Detail

The downloaded database .sql files that you have imported in the employee database contains some dummy data. So, now we are going to retrieve and read these data from the database and display it in the application’s main page.

For this, create a module name crudApp and a controller name DbController in the angular-script.js.

Also, inside controller create a function getInfo() which send request to empDetails.php.

angular-script.js

// Application module

var crudApp = angular.module('crudApp',[]);

crudApp.controller("DbController",['$scope','$http', function($scope,$http){

// Function to get employee details from the database

getInfo();

function getInfo(){

// Sending request to EmpDetails.php files

$http.post('databaseFiles/empDetails.php').success(function(data){

// Stored the returned data into scope

$scope.details = data;

});

}

Copy

Here, getInfo() function sends request to empDetails.php page via $http.post method.

Note:- $http is one of the most important service of AngularJS which is used to transfer data. For more info, read our blog AngularJS – http.

Now, empDetails.php contains select query and retrives all the employee details stored in the employee database. These details are returned in the JSON format.

empDetails.php

<?php

// Including database connections

require_once 'database_connections.php';

// mysqli query to fetch all data from database

$query = "SELECT * from emp_details ORDER BY emp_id ASC";

$result = mysqli_query($con, $query);

$arr = array();

if(mysqli_num_rows($result) != 0) {

while($row = mysqli_fetch_assoc($result)) {

$arr[] = $row;

}

// Return json array containing data from the databasecon

echo $json_info = json_encode($arr);

Copy

The returned json data has stored in $scope.details.

Now, the details property has all the employees details which can be displayed in the application index.html page using ng-repeat directive.

...

<body>

...

<tr>

<th>Employee Name</th>

<th>Email Address</th>

<th>Gender</th>

<th>Address</th>

</tr>

<td>

<span>{{detail.emp_id}}</span></td>

<td>{{detail.emp_name}}</td>

<td>{{detail.emp_email}}</td>

<td>{{detail.emp_gender}}</td>

<td>{{detail.emp_address}}</td>

<td>

</td>

<td>

</td>

</tr>

</table>

</div>

...

</body>

</html>

Copy

Process outputAngular CRUD Read Operation

Here, the employee details table contains two buttons – one for edit and another for delete. We will read about the functionality of these buttons further in this tutorial.

That’s ends with the reading part. Next part is about inserting employee information into the database.

2. Insert Into Database : Employee Detail

To insert employee details, we need a form with different input fields.

So, let’s create a form.html page which contain a form to insert employee details.

form.html

<h3 class="text-center">Insert Employee Details Into Database</h3>

<label for="Name">Employee Name:</label>

</div>

<p class="text-danger" ng-show="empList.emp_name.$invalid && empList.emp_name.$dirty">Name field is Empty!</p>

</div>

<label for="Email">Email Address:</label>

</div>

<p class="text-danger" ng-show="empList.emp_email.$invalid && empList.emp_email.$dirty">Invalid Email!</p>

</div>

<label for="Gender">Gender:</label>

<input type="radio" name="emp_gender" value="male" ng-model="empInfo.gender">Male

</label>

<input type="radio" name="emp_gender" value="female" ng-model="empInfo.gender">Female

</label>

</div>

<label for="Address">Address:</label>

</div>

<p class="text-danger" ng-show="empList.emp_address.$invalid && empList.emp_address.$dirty">Address field is Empty!</p>

</div>

<button class="btn btn-warning" ng-disabled="empList.$invalid">Add Into Database</button>

</div>

</form>

Copy

Every input field has ng-model directive associated with them which will bind and store users input values in the empInfo. When the user will click on the submit button ( Here, Add Into Database button), empInfo will be passed, as an argument, to the insertInfo() function.

angular-script.js

$scope.insertInfo = function(info){

$http.post('databaseFiles/insertDetails.php',{"name":info.name,"email":info.email,"address":info.address,"gender":info.gender}).success(function(data){

if (data == true) {

getInfo();

// Hide details insertion form

$('#empForm').css('display', 'none');

}

});

}

Copy

insertInfo() function communicates with insertDetails.php file and send the submitted data to it.

insertDetails.php

<?php

// Including database connections

require_once 'database_connections.php';

// Fetching and decoding the inserted data

$data = json_decode(file_get_contents("php://input"));

// Escaping special characters from submitting data & storing in new variables.

$name = mysqli_real_escape_string($con, $data->name);

$email = mysqli_real_escape_string($con, $data->email);

$gender = mysqli_real_escape_string($con, $data->gender);

$address = mysqli_real_escape_string($con, $data->address);

// mysqli insert query

$query = "INSERT into emp_details (emp_name,emp_email,emp_gender,emp_address) VALUES ('$name','$email','$gender','$address')";

// Inserting data into database

mysqli_query($con, $query);

echo true;

Copy

In insertDetails.php, the sent values are first decoded into JSON format. Then, they are filtered and stored into different variable.

These variables are then used to store data into the database. When the data has submitted successfully, it returns true in response to insertInfo() function.

At the same time getInfo() function get called by the insertInfo() function which displays the newly inserted details in the employee detail table.

Process outputAngular CRUD Insert Operation

Now, let’s understand the update process.

3. Update Database: Existing Employee Details

If you remember, we have added an edit button in the index.html page while displaying the employee details in the table. Now, it time to understand its functionality.

This edit button contains ng-click directive which on click calls editInfo(detail) function and pass the details of the clicked row’s data as an argument.

The passed argument then stored into a new scope property, $scope.currentUser, and this propert is used by the editForm.php to display the current employee details in the edit form.

angular-script.js

$scope.currentUser = {};

$scope.editInfo = function(info){

$scope.currentUser = info;

$('#empForm').slideUp();

$('#editForm').slideToggle();

}

Copy

Now, we are going to create an edit form which will use the above mentioned scope’s property for the updation process.

editForm.html

<h3 class="text-center">Update Employee Details</h3>

<label for="Name">Employee Name:</label>

</div>

<label for="Email">Email Address:</label>

</div>

<label for="Gender">Gender:</label>

<input type="radio" ng-model="currentUser.emp_gender" value="male" >Male

</label>

<input type="radio" name="gender" ng-model="currentUser.emp_gender" value="female">Female

</label>

</div>

<label for="Address">Address:</label>

</div>

<button class="btn btn-warning" ng-disabled="empList.$invalid" ng-click="updateMsg(currentUser.emp_id)">Update</button>

</div>

</form>

Copy

Now, when a user will change the current values of input field and click on submit button, here update button, another function UpdateInfo() get called containing currentUser as an argument( which contains the updated values of the input fields ).

angular-script.js

$scope.UpdateInfo = function(info){

$http.post('databaseFiles/updateDetails.php',{"id":info.emp_id,"name":info.emp_name,"email":info.emp_email,"address":info.emp_address,"gender":info.emp_gender}).success(function(data){

$scope.show_form = true;

if (data == true) {

getInfo();

}

});

}

Copy

Now, updateInfo() function communicates with the updateDetails.php and send all the updated data, also contain the id of employee, through $http.post method.

updateDetails.php

<?php

// Including database connections

require_once 'database_connections.php';

// Fetching the updated data & storin in new variables

$data = json_decode(file_get_contents("php://input"));

// Escaping special characters from updated data

$id = mysqli_real_escape_string($con, $data->id);

$name = mysqli_real_escape_string($con, $data->name);

$email = mysqli_real_escape_string($con, $data->email);

$gender = mysqli_real_escape_string($con, $data->gender);

$address = mysqli_real_escape_string($con, $data->address);

// mysqli query to insert the updated data

$query = "UPDATE emp_details SET emp_name='$name',emp_email='$email',emp_gender='$gender',emp_address='$address' WHERE emp_id=$id";

mysqli_query($con, $query);

echo true;

Copy

In updateDetails.php, the sent data get decoded and that particular row get updated with the new values. After succuessfully updation, it return true status as a reply.

When the UpdateInfo() method receives the true value, it calls getInfo() to show details of the updated table.

Process outputAngular CRUD Update Operation

Update process ends here. Now, it’s time to have a look at the delete process.

4. Delete From Database: Existing Employee Details

Now, it time to understand the functionality of the delete button that we have added in the index.html page while displaying the employee details in the table.

Delete button contains ng-click directive as an attribute which on click calls deleteInfo(detail) function and pass the details of the clicked row’s data as an argument to it.

angular-script.js

$scope.deleteInfo = function(info){

$http.post('databaseFiles/deleteDetails.php',{"del_id":info.emp_id}).success(function(data){

if (data == true) {

getInfo();

}

});

}

Copy

Now, deleteInfo() function communicates with the deleteDetails.php and send employee ID of the clicked row through $http.post method.

deleteDetails.php

<?php

require_once 'database_connections.php';

$data = json_decode(file_get_contents("php://input"));

$query = "DELETE FROM emp_details WHERE emp_id=$data->del_id";

mysqli_query($con, $query);

echo true;

Copy

In deleteDetails.php, the sent data get decoded and the row containing that particular ID get deleted. After succuessfully deletion, it return true status as a reply.

When the deleteInfo() method receives the true value, it calls getInfo() to show details of the updated table.

Process outputAngular CRUD Delete Operation

That ends the complete CRUD operation.

Application’s Styling Part

For responsiveness and icons, we have used bootstrap in the application.

Also, used some external CSS to improve designing part.

style.css

Contain CSS of the application.

@import url(http://fonts.googleapis.com/css?family=Raleway);

.wrapper{

min-height: 960px;

}

form#empForm, form#editForm {

padding: 0 35px 15px;

}

label.gender {

padding-top: 0 !important;

}

table tr th{

background: #f8f8f8;

}

.search-box {

padding-bottom: 0;

}

@media screen and (max-width: 368px){

.wrapper{

min-width: 340px;

}

Copy

Conclusion:

Hope you guys enjoyed this blog and learned the concepts of CRUD in AngularJS. Please write your comments from the space given below and keep in touch with us for more interesting blogs 🙂

Read Process

Insert Process

Update Process

Delete Process

Software Training Institute in perundurai | Erode, Mullamparappu Training Trains

Search This Blog

Angular JS CRUD

Comments

Post a Comment

Popular posts from this blog

IOT Projects souce code

Connecting R to MySql in English #Training Trains

software design institute training