Inserting Data Using Ajax Technology with PHP 7.2


In this article I will show you how to insert data using ajax Technology with PHP 7.2. Now in this tutorial, we will dive into the PHP language. Also, take a look at what is ajax can do for server-side Technology. In the previous articles, we talk about how to insert data in MySql database. Also shown you how to insert data update data using object-oriented programming in PHP.

Ajax Technology

If you haven’t read the previous articles then definitely read that first because you will learn how to create an object-oriented class to create a database connection, insert data into MySQL database. Also, you will learn how to update delete and search data Moreover, you will learn how to access the PHP class and use its properties and methods to execute operations like insert update delete and so on. Especially when you are using ajax Technology you need to know about how to handle server-side scripting language. We are using PHP 7.2 to create the server-side script.

we create a class to insert data into the database. Because this class using ajax Technology so without refreshing the page you can insert the data into the database. If you don’t know about ajax technology then must read the few articles before moving on. On this website, you can find the exactly related articles that will help you to understand what is ajax and what can ajax do.

Let’s start making the tutorial. The first thing which you wanted to do is open your Xamp server. Start your Xamp server and MySQL server. Choose your favorite IDE (  integrated development environment ) and start making this project. The first thing which you wanted to do is create a project. To create a project create an empty file in your Xamp htdoc folder location.

I assume that you created the project successfully. Now let’s move forward and create files. Now in this project, We create two PHP files one for the class and second for the ajax response. We will create a JavaScript file for ajax request. We will handle all the request using this file. and then we will create an HTML file template.

Index.html

In this file will describe the template design. So we insert a form with some text boxes. We inserted the first name last name email and address. If you wanted to insert more than that you can do that also. But just for explanation, you are using for text boxes. We use the text area for the address field.

On the bottom, you also see the submit button. When you press the submit button all the data put in the text field transfer to the ajax. Then Ajax will transfer all the data to PHP request file which we are creating after some time. Then the PHP request file will process all the data and send the response to the Ajax technology.

if you wanted to know about the whole concept of ajax Technology then you can read this article for more information. The following is the index file. Import this code in your index.html file.

in the above code, we just created the form with some text fields. You are using bootstrap to style the form layout. If you wanted to customize the form then you can do that also. On the right side, you will see the table of Bootstrap. In the subsequent article, we will fetch the data and display it in the bootstrap table.

Stay tuned with the website. The future article will help you to understand the whole concept behind the Ajax technology. Now after importing this HTML file. we just wanted to create a class that creates a connection of database and PHP server. We also wanted to create a method that inserts data into the database.

Connect.php

Create connect.php file. In this file, we create a class. In which class we create a connection between PHP and MySQL database. Using class properties and methods we insert data into the database. We will call this class in the request.php file. After that, we access the connect class methods in the request.php file.  we do hole operation in the class and just response back using request file.

In the above class, We created a few properties that describe the connection. If you have different values like username and password and the root name of your localhost then you can change it also. After that, we create a constructor that creates a connection when you call the object. So when you create an instance of the class then automatically connection property will initialize.

After you have a concrete connection you can now insert data into your database.

Now let’s create an ajax file. Using this file you can call the server side languages without refreshing the page. The whole concept is depending on the client.

Magic.js

Create the magic.js file in your root directory. In this file, we call theAjaxx technology and using this technology we can access the server side languages. Look at the following code that describes how to connect ajax to your PHP file. Then we transfer data to the PHP file and manipulate it and response it back again.

So now let me describe what we had done here. In the above code, we just created an object that contains the textbox values. We will insert this values into the database using ajax. If you know about JavaScript then you understand the JavaScript only runs the client side code. But using ajax you can access and Run server-side languages.

After that in the code, you also find the $.ajax() utility function. This function is not the part of JavaScript. it is the part of jQuery. If you wanted to know about it jQuery then you can read the articles on this website. We are not describing what is jQuery and all that because it’s beyond the scope of this article. But just for the reference jQuery is a JavaScript library that lets you write less do more capability.

In the first parameter of ajax function, we specify the post method. After that, we specify the URL of the response file. We do not create the response file yet but we will make that later. Just specify this filename in the URL. Then we specify the data which we wanted to transfer with the file. We wanted to transfer the user textbox values so we specify the object in the data property. so we transfer all the data using the object.

After that, you will see the done method called. This method will take the response from the server and if you wanted to display that responds then you can do that or you can just put your own response also. We use the alert method of JavaScript to show the response to the user.

request.php

Create a file request.php. In this file, we create a response for the magic.js file. when the user presses the insert button and submits their form. Then data will be transferred to the JavaScript and call the ajax function. Using ajax function we will execute the PHP program and take the response from the PHP.

In the above code, you will see we created a response for the magic.js file. We first insert the required keyword to insert the connect.php file. After inserting the external file now you can access all the properties and methods in the connect class. So we will call the previously created function that inserts the data into the database and also using the echo statement we give the response to the user.

We call the object and store all the values in the PHP variables. Then we pass all these values to the PHP insert data function. Now, this function will execute and insert the data into the database and after that, we specify the echo statement as a response.

so after you execute this project and when you press the submit button after specifying the textbox field. You will get the alert message on the top of the browser window. and your data will be inserted into your database. In the subsequent article, we talk about how to fetch the data and display it in the bootstrap table on the right side. don’t forget to read the next article.

That is all for this article we will see you in the next one.

Leave a Reply

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