AngularJS Bootstrap PHP

AngularJS PHP CRUD (Create, Read, Update, Delete) Operations

AngularJS PHP CRUD (Create, Read, Update, Delete) Operations
Written by Yogesh Koli

Introduction:

In last tutorial “CRUD Operations in PHP with PDO using Bootstrap” I have given details on how to handle crud operation in PHP with jQuery, here we are going to try something new from the market and most usable in the real time application that is AngularJS.

AngularJS is frontend (client-side) development framework that is completely written in JavaScript with the help of AngularJS we can easily build single page and interactive web applications.

Quick Demo:

Download Complete Source Code

Tutorial Features:

  • Add (Insert) new record to the database
  • Read recodes from the database
  • List all records to the webpage
  • Edit and update existing record from the database
  • Delete the record

Work environment:

I am assuming that you have PHP environment is ready to work with the project if not please configure PHP environment with the following needs:

  • Apache/NginX
  • PHP
  • MySQL

Application Overview:

To demonstrate AngularJS usage I am going to use a simple example of Task application, so here we will build a very simple Task application where we can Add, Edit, List and Delete the Task.

Let’s build the application step-by-step:

Step 1 – Database Setup:

Create MySQL database and add tasks table into it, you can easily use following script:

Tasks Table

Tasks Table

Step 2 – Setup Application File Structure:

Use following screen as a reference and create required files and folders for the application:

Application Folder Structure

Application Folder Structure

Here is a quick review of the application directory structure to get basic understanding of its usages

angularjs-php-crud-opeations: Application Root Directory

bootstrap: as name suggest this directory will have files related to bootstrap framework, you download bootstrap file from getbootstrap.com or those files will be already available with this tutorial source code.

lib/angular.min.js: AngularJS Library file

lib/jquery-1.11.3.min.js: jQuery Library file

lib/app.js: Our custom script file to write client side logic using AngularJS

script: This directory is having all required files for crud operations including library file and Database connection file.

Index.php: application index file where we are going to have our CRUD application templated loaded.

Step 3 – Database connection Script:

When we need to interact with the database to store and read data from the script of our application we need to write a connection script to enable a connection between application and database, so go ahead open up the database_connection.php file from the script folder and simply add following connection script to the file.

script/database_connection.php:

In the above script we are having a connection to MySQL database using PHP Database Object, I have added DB() global function to use thought our future script which will be there in the next steps.

Note: please make sure to update the value of Database connection variable from the above script to math with your php-working environment. Ex. HOST, USER, PASSWORD and DATABASE

Step 4 – Write CRUD Functions:

Let’s write php code to handle create, read, update and delete operations, we are going to write Object Oriented Code to just make you familiar with. If you are a php beginner it will be great step for you to understand the basics of it.

Ok go ahead and open up the library.php file from the script folder and add following library script, you can find the explanation after this script.

script/library.php:

Quick review on library.php file script:

At the very beginning of the script you will find the require section where I am adding database_connection.php file to the library file so that we can access the database global function to communicate with the database.

Next we have a opening of Class Task and then the declaration of $db variable which is having protected as a prefix which is called access specifier to control the access of the variable, in this case we are just allowing $db variable to use in the Task class or it’s Sub classes.

__construct(): as name suggest we have constructer defined to initialize variables.

Create($name, $description): This is method is used to create Record/Task into the database, it requires two arguments to pass while calling the method.

Read(): Used to read the records from the database.

Update($name, $description, $task_id): Used to Update the existing record from the database and It required a three arguments while calling.

Delete($task_id): Used to delete existing record using Task ID.

Watch complete AngularJS PHP CRUD Video Tutorial Series:

Step 5 – Index Page Basic Setup:

Next we need to add basic html code and import few required JS file into the index.php file, go ahead and open up the index.php file into you editor and use following code:

Quick overview on the above structure:

If you notice we have added very simple html code here, at the very beginning in header section after page title we have imported bootstrap CSS file as we are going to require that for the design.

Next.. in the body section we have our JS file loaded at the bottom, jQuery, AngularJS, Bootstrap and our own custom JS file called app.js.

So we have our basic setup is ready, to revise the tutorial as of now we have our database up and ready, Database connection, Library file along with the required CRUD function are all set and now we just did the index page setup, all right let’s get to the next step to complete this demo application.

Step 6 – Register AngularJS Module and Create Controller:

Let’s start diving into the AngularJS now, so in this step I am going to take you in to the AngularJS world, so whenever you need to use AngularJS into your application after importing JS file into the page you have register your AngularJS Module, let me show you how to that:

Go ahead and open up the app.js file from lib directory and add following line of code:

lib/app.js

Next step is to create Angular JS controller, here is how we create controller:

lib/app.js

We have our module and controller ready to call into the html, open up the index.php file and add ng-app directory along with ng-controller directive as showing below:



Step 7 – Read and List Records:

To read the records from angular JS we need to setup a function into AngularJS controller and call our php api to access the records from the database.

Open up the app.js file and add following function into angular JS controller as showing below:

In the above script we are calling script/list.php api to get the list of records from the records but we haven’t updated our list.php file yet, open up the list.php file from script folder and add following script:

script/list.php

Next we are ready with records from the database we just needs to list them in to the index.php file, to list records use following script and add to it our content section of index page:

If you notice we have bit extra design already added such as Add Task button and Edit and Delete button along with the ng-click events right? don’t get confuse we are going to see that next just stat with me.

Step 8 – Add New Task:

As you see in step six we have added controller function, did the setup of a php api and then updated our index.php page, so now onward for next feature we are going to do repeat same steps

i) Add Controller Function to Add the Task:

lib/app.js

ii) Update the create.php api file to be able to store the record into the database:

script/create.php

iii) Add Bootstrap modal popup into the index.php page inside the controller scope:

index.php

Step 9 – Edit and Update Task:

As I said our first for each action is to add controller function, in this case we are going to required to two controller functions for each action accordingly

i.i) Function to execute when user click on edit button from the task list:

lib/app.js

i.ii) Function to execute when user clicks on update details button from the update modal popup.

lib/app.js

ii) Update the script/update.php api:

iii) Add Bootstrap modal into the index.php page to show task details while updating:

Step 10 – Delete the Task:

i) Create Controller Function for the delete action:

ii) Update script/delete.php api:

We are done.. go ahead run your AngularJS application from your browser let me know if you find any errors or issue running the application, simply commenting using following comment section.

Do checkout live demo of this tutorial:

Download Complete Source Code

Happy coding.

About the author

Yogesh Koli

Yogesh Koli is a software engineer & a Blogger lives in India. He’s driven by an addiction to learning and a love for adventure. he has 5+ years of experience working with the front-end, back-end, web application development, and system design.

  • Samita Dey

    Sir,
    When i edit a data and after editing i press cancel button the edited data showed on the table…