Insert data into database using AngularJS and PHP!

In this post we are going to see how we can fetch from and insert data into MySQL database using AngularJS and PHP.

I am using PHP mysqli to insert records into the database. This tutorial is more concentrated on AngularJS than PHP, so basically for experienced PHP developers.

Let’s see index.html:

The above code is just a normal HTML page with some extra attributes such as ng-app=”myApp” and ng-view, these are called AngularJS Directives. 

Also note, i have included angular-route.min.js in my application, which helps to create Single Page Application.

Now, let’s see the app.js code, so i can explain the above Directives ng-app=”myApp”:

In the above code we have created a new app called “myApp” using the AngularJS Module API. So basically ng-app=”myApp” is a reference to this module.

The ngRoute is the Angular Routing module to build a Single Page Application.
studentModule is our custom module.
then the $routeProvider helps to configure the routes.

Inside the $routeProvider configuration you can see there are two more files (list.html and add.html). These are the other view files which are going to load when you visit (/) and (/add), those are here:

list.html:

add.html:

 

Let’s see the controller.js:

Controllers in AngularJS controls the data, basically used to do the business logic.

There are two controllers in our application,

i. ListController – this lists the student records from the database.
ii. AddController – this adds the student record to the database.

Read the in-line comment in the above script to understand.

And finally the PHP files are here: 

student_list.php

add_student.php

config.php

Table structure:

See the demo here or you can just download it:

demodownload

 

 

 

Add a Comment

Your email address will not be published. Required fields are marked *