In today's fast-paced world, users expect web applications to be responsive and efficient. One of the ways to achieve this is by implementing an Ajax live search feature on your website. This feature allows users to search for content on your website without having to reload the page. In this article, we will show you how to implement an Ajax live search feature using Node.js and MySQL.
Node.js is an open-source, cross-platform JavaScript runtime environment that allows developers to build server-side applications with JavaScript. MySQL is a popular open-source relational database management system that is widely used in web development. Together, they provide a powerful combination for building web applications.
To get started, you will need to have Node.js and MySQL installed on your machine. You will also need to have a basic understanding of JavaScript, HTML, and CSS.
Step 1: Setting up the Database
The first step is to set up the database. You will need to create a table to store the data that will be searched. For this example, we will create a table called "customers" with columns for "customer_id", "customer_first_name", "customer_last_name", "customer_email" and "customer_gender". Below you can find .sql script for create customers table and it will insert some sample data into that table.
Next, we will set up the server using Node.js. We will use the Express framework to handle the HTTP requests and responses. You can install Express using npm, the package manager for Node.js, by running the following command in your terminal:
cd f:
In my computer, We will create node application in f: drive, so we have goes into this f: drive.
cd node
After this we have goes into node in which we will create Ajax Live data Search Node Application.
mkdir ajax_live_data_search
This command will create ajax_live_data_search directory under node directory.
cd ajax_live_data_search
After this we have goes inti this ajax_live_data_search directory in which we will download different node module.
npm install express mysql
This command will download Node Express Module and MySQL Module under this ajax_live_data_search directory.
After installing Express, create a new file called "app.js" and add the following code:
app.js
const express = require('express');
const mysql = require('mysql');
const app = express();
const port = 3000;
const pool = mysql.createPool({
connectionLimit : 10,
host : 'localhost',
user : 'root',
password : '',
database : 'testing'
});
app.get('/', (request, response) => {
response.sendFile(__dirname + '/index.html');
});
app.listen(port, () => {
console.log(`Server listening on port ${port}`);
});
This code sets up a basic Express server that listens on port 3000. You can test that the server is working by running "node app.js" in your terminal and navigating to "http://localhost:3000" in your browser and it will load HTML content of index.html file.
Step 3: Implementing the Ajax Live Search
Now we will implement the Ajax live search feature. We will use Vanilla JavaScript to make Ajax requests to the server and update the search results in real-time. You can include Vanilla JavaScript in your index.html file by adding the following code:
This code listens for keyup events on the search input field and makes an Ajax request to the server with the search query. The server responds with a JSON object containing the search results, which are then displayed in the search results list.
To handle the Ajax requests on the server, add the following code to "app.js":
app.js
app.get('/search', (request, response) => {
const query = request.query.q;
var sql = '';
if(query != '')
{
sql = `SELECT * FROM customers WHERE customer_first_name LIKE '%${query}%' OR customer_last_name LIKE '%${query}%' OR customer_email LIKE '%${query}%'`;
}
else
{
sql = `SELECT * FROM customers ORDER BY customer_id`;
}
pool.query(sql, (error, results) => {
if (error) throw error;
response.send(results);
});
});
This code creates a MySQL connection and listens for GET requests to "/search". It retrieves the search query from the GET request URL and executes a SQL query to search for customers whose first name, last name or email matches the query. The results are returned as a JSON object.
Step 4: Run Node Application
So here our code is ready now for check output in the browser, we have goes to terminal and run following command.
node app.js
This command will start node server and we can access this node application in browser by this http://localhost:3000 url.
Conclusion
In this article, we have shown you how to implement an Ajax live search feature using Node.js and MySQL. By using these technologies, you can build responsive and efficient web applications that provide a great user experience. With a few lines of code, you can easily add this feature to your web application and improve its functionality.
Complete Source Code
app.js
const express = require('express');
const mysql = require('mysql');
const app = express();
const port = 3000;
const pool = mysql.createPool({
connectionLimit : 10,
host : 'localhost',
user : 'root',
password : '',
database : 'testing'
});
app.get('/', (request, response) => {
response.sendFile(__dirname + '/index.html');
});
app.get('/search', (request, response) => {
const query = request.query.q;
var sql = '';
if(query != '')
{
sql = `SELECT * FROM customers WHERE customer_first_name LIKE '%${query}%' OR customer_last_name LIKE '%${query}%' OR customer_email LIKE '%${query}%'`;
}
else
{
sql = `SELECT * FROM customers ORDER BY customer_id`;
}
pool.query(sql, (error, results) => {
if (error) throw error;
response.send(results);
});
});
app.listen(port, () => {
console.log(`Server listening on port ${port}`);
});
If you're here to know the step-by-step guide to converting XML to JSON by using the online tool, then this article is for sure going to help you.
In this article, we will be discussing what these languages are, how they’re different and why conversion between them is necessary. We will also look at an effective and practical method to convert XML to JSON.
What Do You Mean by XML?
XML stands for ‘extensible markup language’. It is a markup language similar to HTML, except for the difference that the latter is used to specify how data is displayed whereas XML functions more to store data instead.
XML is best known for storing the data but the heavy data makes it a little slower to work. That is when a higher transfer speed is needed to transfer the data. Due to the lower speed, it makes you switch to the JSON that has a faster speed.
What Do You Mean By JSON?
JSON is a JavaScript Object Notation. It is a format that is comparatively lightweight than XML. Also, it is easily understandable by humans, which means it is a reader-friendly language. It is also way easier for the computer to process this language as it stores data in form of key pairs.
How Does an XML to JSON Converter Help You?
The XML to JSON converter is primarily concerned with translating XML data strings to JSON objects. The converter accurately converts all types of XML attributes, messages, comments, DOCTYPE, and other expressions. It is a precise, secure, and quick method of converting XML to JSON.
How can one convert XML to JSON?
There can be three conversion procedures to convert the XML to JSON that are briefly described here for your better understanding;
By Manual Coding: Manual coding is one of the safest and most accurate methods of converting XML to JSON. It would require hard work, expert guidance, advanced skills, and extra effort and will consume more time than is very much an ineffective approach. Is worthy if you're the master of this particular language and have good hands-on practicing it then you can go for it only.
Using External Libraries: External libraries can be another smart option if you want to deal with XML to JSON conversions. Most of the time Python libraries are preferred for this purpose. But this again has to be done by a person who has enough skills.
Using Online Tools: Online tools can help you do wonders when it comes to performing conversion tasks. They can do the whole thing in a matter of seconds, which can save you considerable time.
It can be highly productive and time-saving for anyone who is a beginner to use a tool to convert XML code to JSON code. The thing that should be taken into consideration while converting is that you’ll have to remove the namespaces before the conversion takes place.
A Step-By-Step Procedure To Convert XML To JSON By Using An Online Tool:
The tools to convert XML to JSON are usually quite easy to understand and operate. Converting an XML to JSON is not tricky anymore as it can be done through online tools. You can perform the conversion on such tools by following a couple of simple steps.
You'll just need to copy and then paste the XML code into the input box.
Now, you'll click the Convert XML to JSON button to get the task done.
The results will generate in a separate output box or in the same box as the input.
It has to be remembered that the exact working of the tools will be different. However, it will be along the lines of this generic procedure.
Bottom Line:
So, there you have it.
There are different ways in which you can convert XML to JSON. We mentioned those methods in the post above as well.
However, the quickest and easiest way to do it is to use online tools. As compared to the other methods, this way is the fastest since it only takes some seconds (or minutes, at most) to convert the input.
Node.js is a prevalent runtime environment that allows the implementation of JavaScript code. It enables consistent, two-way communication between the client and server, which is how it reduces the work pressure among them.
Node.js provides exceptional support and unique features that make it a favorite among developers and business owners.
Are you interested in utilizing this technology for your next project? If you are, it’ll do you well to know its advantages before you try to hire a NodeJS development company.
5 Benefits That Make Node.js An Excellent Option
1. It Is Scalable
Node.js is great for single-page, data streaming, and JSON-based apps because it’s a scalable environment. Microservices allow it to separate an application into finer processes.
Several teams can take over these processes to develop them in tune with the increasing user requests. Operations don’t lag due to quicker development, leading to increased users.
2. It Is Fast
Node.js runs on Google's V8 engine, which saves development time by letting JavaScript code be converted to machine code. Therefore, product development with Node.js means convenient management of far more parallel connections.
Many companies have reported that hiring a NodeJS development company doubled their request processing speeds.
3. It Will Save You Money
Many web development companies receive inquiries regarding Node.js app development. The cost-benefit analysis they provide shows that Node.js development is more economical than anything else out there.
It also has a smaller memory footprint than PHP or Java servers. Node.js servers save RAM and hardware resources by running on an event-driven loop.
4. It Comes With Continuous Support
Node.js releases undergo active maintenance from the date of their entries to the next eighteen months. The development team takes care of every bug fix and security update during this period.
Over half the developer generation strategizes for long-term support as well, making Node.js the best option without a doubt.
5. It Enables Convenient Sharing
Another significant benefit of Node.js is its package manager, NPM, which eases sharing. The convenient sharing gives an additional boost to project development speed. It is one of the top reasons web development companies prefer this runtime environment.
To Conclude
A quick, convenient, and scalable JS environment like Node.js is famous for several reasons. It should be no surprise why many developers consider it the preferable option for software product development.
However, hiring an experienced NodeJS development company is the best way to get the results you seek for your project.
Author bio: Tom Hardy is a Node.js professional at SparxIT with 5 years of experience. He likes reading about emerging trends and technologies when he's not working.
This tutorial on Export Data to CSV file using Node js Express Application and in this tutorial, you will learn how to export data in CSV file from MySQL Database table in Node.js Application.
In our Node Web Application, sometimes we have to export data from MySQL database. So at that time CSV file format is the best option for exporting data from MySQL Database, so for this here in our Node.js Express Application, we will export MySQL data to CSV file using Node.js Application.
So if you have follow this tutorial, then this tutorial will helps you in easy way to exporting mysql database table data in CSV file using Node JS Express framework.
In this Node.js tutorial on export data to CSV file, we will use body-parser and json2csv node module under this node application, and by using this both module we will first export data to CSV file.
Fetch data from MySQL and display on Web page in HTML table format using Node.js & MySQL
Fetch Data from MySQL table and convert into JSON format
Convert JSON data to CSV format using json2csv node module
Export MySQL data to CSV file and download CSV file using Node.js
For Export MySQL data to CSV file in Node.js, so you have follow below steps.
For start this tutorial, first we have to create table in MySQL table for export data to CSV file format in Node.js, so for create table in MySQL database, we have to run following script in your phpmyadmin area and it will create sample_data table with pre inserting of sample data and we will export that data to CSV file using Node js.
Step 2 - Download and Install Node.js Express framework
In this Node.js tutorial, we have use Express.js Framework, So first we need to download and install Node.js Express framework. So for this, first we have to go into directory in which we have run our node code and under that directory, we have to create csv_export directory and then after we have goes into that directory, so for this, we have to run following command.
mkdir csv_export
cd csv_export
Once we have goes into csv_export directory, now first we wan to download and install node express genderator, so for this, in the command prompt we have to run following command, which will download and install node.js express generator.
npm install -g express-generator
Next we want to download and install node.js express framework, so for this in the command prompt we have to run following command which will download and install node.js express framework under autocomplete directory.
npx express --view=ejs
In this downloaded Node.js Express framework, we have use ejs template engine for display HTML output in the browser and once we have run this command then it will display following node.js express directory structure which you can seen below.
And lastly under node.js express download and install process we have to run following command for install required node.js default module for express framework.
npm install
After run above command, so here our Node.js Express download and install process is completed.
Step 3 - Create MySQL Database Connection
After download and install Node.js Express framework, now we want to connect this applicatioin with MySQL Database, so for make MySQL database connection, first we have to download node mysql module. So for this, we have to run following command in command prompt.
npm install mysql
Once Node Mysql module has been install in our node express application, next we need to create one database.js file for create mysql database connection, and under this file, we have to define MySQL database configuration for connection node express application with MySQL database.
database.js
const mysql = require('mysql');
var connection = mysql.createConnection({
host : 'localhost',
database : 'testing',
user : 'root',
password : ''
});
connection.connect(function(error){
if(error)
{
throw error;
}
else
{
console.log('MySQL Database is connected Successfully');
}
});
module.exports = connection;
Step 4 - Install body-parser & json2csv Module
In this Node tutorial for Export data to CSV, here we need to download some extra node module like body-parser and json2csv module. So for download this module, we have goes to command prompt and run following command.
npm install body-parser json2csv --save
In this above command json2csv module has been used for convert a JSON data to CSV data and convert CSV data to JSON format.
And body-parser module is a npm library which has been process data and send that data to HTTP request body.
So by isntalling this both module under this Node Express framework, we can able to export MySQL database to CSV file format.
Step 5 - Create Routes
In the Node Express framework, routes file has been used for handle HTTP request. Here when we have download express framework, then you will get index.js default files under routes directory.
Here we have to open routes/index.js file and under this file, we have to include database connection file and json2csv node module also.
After this, in the main route which has been load views/index.ejs file for display output in the browser. So when file has been load then it will fetch data from MySQL table and display data on the web page in HTML table format.
And for handle request for export data to csv file, we have to create another route and under that route first it will fetch data from mysql table, and convert that data into JSON format and lasly by using json2csv module it will convert json data to csv format and downlaod csv file in local computer.
routes/index.js
var express = require('express');
var router = express.Router();
var database = require('../database');
var data_exporter = require('json2csv').Parser;
/* GET home page. */
router.get('/', function(req, res, next) {
database.query('SELECT * FROM sample_data', function(error, data){
res.render('index', { title: 'Express', sample_data:data });
});
});
router.get('/export', function(request, response, next){
database.query('SELECT * FROM sample_data', function(error, data){
var mysql_data = JSON.parse(JSON.stringify(data));
//convert JSON to CSV Data
var file_header = ['First Name', 'Last Name', 'Age', 'Gender'];
var json_data = new data_exporter({file_header});
var csv_data = json_data.parse(mysql_data);
response.setHeader("Content-Type", "text/csv");
response.setHeader("Content-Disposition", "attachment; filename=sample_data.csv");
response.status(200).end(csv_data);
});
});
module.exports = router;
Step 6 - Create Views File
In the Node.js Express framework, views directory file has been used for display html output in the browser. In this tutorial, we have use EJS template engine for display HTML output in the browser. Here we will use views/index.ejs default file, and under this file, first we will display mysql data in html table format and then after, we have to create on link for export data to csv file which will send http get request to routes for export data to csv file in Node.js Express application.
views/index.ejs
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>How to Export MySQL Data to CSV in Node.js</title>
</head>
<body>
<div class="container">
<h1 class="text-center text-primary mt-3 mb-3">How to Export MySQL Data to CSV in Node.js</h1>
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-md-10">Sample Data</div>
<div class="col-md-2">
<a href="/export" class="btn btn-success btn-sm float-end">Export to CSV</a>
</div>
</div>
</div>
<div class="card-body">
<table class="table table-bordered">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<% sample_data.forEach(function(data){ %>
<tr>
<td><%= data.first_name %></td>
<td><%= data.last_name %></td>
<td><%= data.age %></td>
<td><%= data.gender %></td>
</tr>
<% }); %>
</table>
</div>
</div>
</div>
</body>
</html>
Step 7 - Check Output in the browser
Once we have follow all above step, so we are able to check output in the browser. So for check output in the browser, first we have goes to command prompt and run following command.
npm start
This command will start Node.js server and then after we can goes to browser and following URL.
http://localhost:3000/
So once we have hit above url then it will display MySQL table data on web page in HTML table format and above this data, we can see on export button. So when we have click on export button then it will export mysql data into CSV file format using Node js express application.
This is simple and short tutorial on How do we convert CSV file data into JSON format in PHP. In this world of web programming, sometimes we have to make feature like fetch data from CSV file and insert that CSV file data into Mysql database then at that time we have need to convert CSV to JSON. The main purpose of this tutorial is to learn how can we easy way to convert CSV data or file to JSON object using PHP script.
Advantages of CSV
CSV files can be opened or edited by text editors like notepad.
In data-warehouse, CSV follows a reasonably flat, simple schema.
Any programing language to parse CSV data is trivial, generating it's extremely easy.
CSV is safe and may clearly differentiate between the numeric values and text. CSV doesn't manipulate data and stores it as-is.
In CSV, you write column headers just one occasion where as in Excel, you've got to possess a start tag and end tag for every column in each row.
Importing CSV files are often much faster, and it also consumes less memory.
It's easy to programmatically manipulate CSV since, after all, they're simple text files.
CSV are often opened with any text editor in Windows like notepad, MS Excel, Microsoft Works 9, etc.
Advantages of JSON
JSON is a portable that means it can be parse and write are available in many programming languages like JavaScript.
By using JSON we can online transfer large data from source to destination in the form of array or objects.
IN JSON we can transfer data in plain text or unformatted data like comma speratted or delimited data.
JSON is better that XML, this is because it has more sufficient space than XML data structure.
JSON has no tag name and it has structure which is nested braces instead of verbose tags.
In exchange of data JSON is faster than XML.
So here we have seen benefits of CSV and JSON data and both are mainly used for data exchange. But if you have work on any web services than JSON data is mostly used for transmit or exchange of data on the web. So if you have data in CSV file and you have to exchange that data then you must convert that data into JSON format and you can easily exchange data online.
In PHP language there many functions are available for parse or read data from CSV file and then convert that data into PHP array and lastly for convert data into JSON then we can use json_encode() function.
Company Name,Address,City,State,ZIP/PIN CODE,Country,Website,Industry,First Name,Last Name,Phone Number,Designation,Email
Cougar Investment,3570 Thunder Road,Mountain View,CA,94041,USA,dealtechs.com,Animal care and service worker,Devin,Taylor,650-564-1816,Animal care and service worker,DevinRTaylor@armyspy.com
Robert Hall,1729 Lyndon Street,Slatington,PA,18080,USA,toksalgida.com,Media,Ruby,Gibson,610-767-5251,News anchor,RubyBGibson@armyspy.com
Are you looking for tutorial on How to Create Real Time Chat Application in Codeigniter using Ajax jQuery. So, you have come on the right place because in this post you can find and learn How to implement a chat application in Codeigniter website using Ajax, jQuery, Mysql Database and json. By using this tutorial, every one can build their own chat app in Codeigniter framework, and this app will be real time because here we have use Ajax jQuery and json so all data will refresh without refresh of web page. So, here you can make your live chat application with Codeigniter framework. One more benefits of this tutorial is that you can make Facebook like chat application in Codeigniter.
If you are PHP developers, then every PHP developer is first prefer Codeigniter framework, this is because Codeigniter framework is fast application development framework, this framework has provide in build library, helper function using PHP which will helps to you to speed up build web based application. If you have use Codeigniter framework, then you can developed web application faster than you have start coding web application from scratch. So, you want to build your own chat application, you have to prefer any PHP framework like Codeigniter. This is because it is pur MVC framework, which will build light chat application.
In this post we will use Codeigniter framework for build Real time web based text messaging application, that means one person can send text message to another person on internet in real time. You chat build chat application like Facebook. One person can make live conversation with multiple person. Real time or live chat means online conversation in which sender or receiver will send and receiver text messages. In this chat application will make feature like one person can chat with one person or one person can chat with multiple person also. There are many Chat application available on internet, but if you want to build you own chat application, then you have to first select technology in which you want to build you chat application. Here we have use Codeigniter and Mysql database as server side technology, and at jQuery, Ajax, JSON has been used at client technology. Below you can find basic feature of this chat application.
If you want to make Chat application in Codeigniter framework, then first you have to make Mysql Database. Once you have make database, then For this you have to run following SQL script, it will make required tables in you database.
--
-- Database: `codeigniter_chat`
--
-- --------------------------------------------------------
--
-- Table structure for table `chat_messages`
--
CREATE TABLE `chat_messages` (
`chat_messages_id` int(11) NOT NULL,
`sender_id` int(11) NOT NULL,
`receiver_id` int(11) NOT NULL,
`chat_messages_text` text NOT NULL,
`chat_messages_status` enum('no','yes') NOT NULL,
`chat_messages_datetime` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- --------------------------------------------------------
--
-- Table structure for table `chat_request`
--
CREATE TABLE `chat_request` (
`chat_request_id` int(11) NOT NULL,
`sender_id` int(11) NOT NULL,
`receiver_id` int(11) NOT NULL,
`chat_request_status` enum('Accept','Reject') NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- --------------------------------------------------------
--
-- Table structure for table `chat_user`
--
CREATE TABLE `chat_user` (
`user_id` int(11) NOT NULL,
`login_oauth_uid` varchar(100) NOT NULL,
`first_name` varchar(250) NOT NULL,
`last_name` varchar(250) NOT NULL,
`email_address` varchar(250) NOT NULL,
`profile_picture` varchar(250) NOT NULL,
`created_at` datetime NOT NULL,
`updated_at` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Table structure for table `login_data`
--
CREATE TABLE `login_data` (
`login_data_id` int(11) NOT NULL,
`user_id` int(11) NOT NULL,
`last_activity` datetime NOT NULL,
`is_type` enum('no', 'yes') NOT NULL
`receiver_user_id` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `chat_messages`
--
ALTER TABLE `chat_messages`
ADD PRIMARY KEY (`chat_messages_id`);
--
-- Indexes for table `chat_request`
--
ALTER TABLE `chat_request`
ADD PRIMARY KEY (`chat_request_id`);
--
-- Indexes for table `chat_user`
--
ALTER TABLE `chat_user`
ADD PRIMARY KEY (`user_id`);
--
-- Indexes for table `login_data`
--
ALTER TABLE `login_data`
ADD PRIMARY KEY (`login_data_id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `chat_messages`
--
ALTER TABLE `chat_messages`
MODIFY `chat_messages_id` int(11) NOT NULL AUTO_INCREMENT;
--
-- AUTO_INCREMENT for table `chat_request`
--
ALTER TABLE `chat_request`
MODIFY `chat_request_id` int(11) NOT NULL AUTO_INCREMENT;
--
-- AUTO_INCREMENT for table `chat_user`
--
ALTER TABLE `chat_user`
MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;
--
-- AUTO_INCREMENT for table `login_data`
--
ALTER TABLE `login_data`
MODIFY `login_data_id` int(11) NOT NULL AUTO_INCREMENT;
Google Account Login Integration
In this chat application, we have use Google Account for login into system. This is because currently, most of the person have Google account, so then can directly login into system without register into this chat application.
In Codeigniter framework, First we have to define autoload libraries. So, every time define Codeigniter library we do want to define every time. For this, we have to open config/autoload.php file and define autoload libraries.
After define library, we can also define which helper we want to load at the time of initialize application. For this also we have to open config/autoload.php file.
$autoload['helper'] = array('url', 'form');
Now we want to define base url of Codeigniter chat application, for this we have open config/config.php file and define base url of this Codeigniter chat application.
After this we want to make database connection. So for database connection in Codeigniter framework, we have to open config/database.php file and in this file we have to define Mysql database configuration.
For integrate Google Account login into this Codeigniter Chat system, we have make following file Model Views and Controller files.
Controllers
In Controller folder we have make two file like Google_login.php and Chat.php file. In Google_login.php file, we have make following method.
__construct() - This is magic method and this method block of code will execute when new object of this class has been created and it will load Google_login_model.php all method.
index() - This is root method of this controller, and it will load login function.
login() - This method is communicate with Google API for validate User Google Account credential. If Google Account login detail is propert then it will redirect to this chat application url, which we have define at then time creating Google API key. After this User detail will store in database, and for validate User login here we have store user_id data has been store in session variable and at the time of login into system login date and time data has been store in database also. If Google login is proper then it will redirect to Chat application home page.
logout() - This method will logout user from this chat application, and redirect page to login page.
Here we have make one another controller class, which is Chat.php file and in this we have make following method.
__construct() - This method will load Chat_model.php class method, and here it will also check user session data for check user is login into system or not, If User is not login into system, then it will redirect page to Login page.
index() - This is root method of this Chat class, and it will load chat_view.php view file for display html output in browser.
controllers/Chat.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Chat extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('chat_model');
if(!$this->session->userdata('user_id'))
{
redirect('google_login/login');
}
}
function index()
{
$this->load->view('chat_view');
}
}
?>
Models
For integrate Google Account login into chat system, we have to make Google_login_model.php models class and in this class we have make following method.
Is_already_register($id) - This will check particular user is already register in our system or not.
Update_user_data($data, $id) - This method will update existing user data in Mysql database.
Insert_user_data($data) - This method will insert new User data in Mysql database.
Get_user_id($id) - This method will return login user id based on open source authentic login id which has been provided by Google.
Insert_login_data($data) - This method will insert user login date and time data into mysql database.
models/Google_login_model.php
<?php
class Google_login_model extends CI_Model
{
function Is_already_register($id)
{
$this->db->where('login_oauth_uid', $id);
$query = $this->db->get('chat_user');
if($query->num_rows() > 0)
{
return true;
}
else
{
return false;
}
}
function Update_user_data($data, $id)
{
$this->db->where('login_oauth_uid', $id);
$this->db->update('chat_user', $data);
}
function Insert_user_data($data)
{
$this->db->insert('chat_user', $data);
}
function Get_user_id($id)
{
$this->db->select('user_id');
$this->db->from('chat_user');
$this->db->where('login_oauth_uid', $id);
$query = $this->db->get();
foreach($query->result() as $row)
{
return $row->user_id;
}
}
function Insert_login_data($data)
{
$this->db->insert('login_data', $data);
return $this->db->insert_id();
}
}
?>
Views
For integrate Google Account login, here we have we have make two views file like google_login.php and chat_view.php file.
views/google_login.php
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chat Application in Codeigniter</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
</head>
<body>
<div class="container">
<br />
<h2 align="center"><a href="#">Chat Application in Codeigniter</a></h2>
<br />
<div class="panel panel-default">
<?php
if(!isset($login_button))
{
redirect('chat');
}
else
{
echo '<div align="center">'.$login_button . '</div>';
}
?>
<br />
<br />
</div>
</div>
</body>
</html>
In this Chat application, for chat there is required some other person for chat. For this, here we have add chat user feature. By using this functionality, login user can search other person in this chat application.
Chat.php -
In this controller class, we have make forllowig method for make search feature in this Codeigniter chat application.
search_user() - This method will received Ajax request for search user data. This method has received data from model class method, and converted and store data in array formar and send back to Ajax request in json format.
In this model class, we have make following method for make search user functionality in this Chat application.
search_user_data($user_id, $query) - This method is used for fetch data from chat_user table. This method will not search user own data.
Check_request_status($sender_id, $receiver_id) - This method will check chat request status data in Mysql table.
<?php
class Chat_model extends CI_Model
{
function search_user_data($user_id, $query)
{
$where = "user_id != '".$user_id."' AND (first_name LIKE '%".$query."%' OR last_name LIKE '%".$query."%')";
$this->db->where($where);
return $this->db->get('chat_user');
}
function Check_request_status($sender_id, $receiver_id)
{
$this->db->where('(sender_id = "'.$sender_id.'" OR sender_id = "'.$receiver_id.'")');
$this->db->where('(receiver_id = "'.$receiver_id.'" OR receiver_id = "'.$sender_id.'")');
$this->db->order_by('chat_request_id', 'DESC');
$this->db->limit(1);
$query = $this->db->get('chat_request');
if($query->num_rows() > 0)
{
foreach($query->result() as $row)
{
return $row->chat_request_status;
}
}
}
}
?>
chat_view.php
In this view file, first we have define on textbox for enter user name for search user and one button, after click on button, ajax request will triggered and it will send search user request send to server, and it will received data from server in json format and convert that data into html format and display in user search result on web page, without refresh for web page.
If you have start search new user in this Chat application, then in search result you can see user profile picture, user name and send request button. By click on send request button, user can send chat request to another user from search result. For this feature we have make following changes in Codeigniter Controllers, Models and views file.
Chat.php (Controllers)
For make send chat request functionality, in Codeigniter controller class, we have make following method.
send_request() - This method will received ajax request for send chat request to another user. It will send data to models class method for store chat request data into Mysql database.
This models class will handle database related operation for make send chat request feature in Codeigniter chat application. In this class we have make following method.
Insert_chat_request($data) - This method will insert chat request data in Mysql data. It will received data fron Controller class method.
<?php
class Chat_model extends CI_Model
{
function search_user_data($user_id, $query)
{
$where = "user_id != '".$user_id."' AND (first_name LIKE '%".$query."%' OR last_name LIKE '%".$query."%')";
$this->db->where($where);
return $this->db->get('chat_user');
}
function Check_request_status($sender_id, $receiver_id)
{
$this->db->where('(sender_id = "'.$sender_id.'" OR sender_id = "'.$receiver_id.'")');
$this->db->where('(receiver_id = "'.$receiver_id.'" OR receiver_id = "'.$sender_id.'")');
$this->db->order_by('chat_request_id', 'DESC');
$this->db->limit(1);
$query = $this->db->get('chat_request');
if($query->num_rows() > 0)
{
foreach($query->result() as $row)
{
return $row->chat_request_status;
}
}
}
function Insert_chat_request($data)
{
$this->db->insert('chat_request', $data);
}
}
?>
chat_view.php (Views)
This view file will use Ajax request for send chat request to another user. For make Send request feature for Chat Application in this View file we have use Ajax request. By click on request button, this system will send chat request data to another user using Ajax request.
Once User has send chat request, then at receiver user side they will seen notification of chat request has been received at their chat system page. For this feature we have to make following method in Controller and models class.
Chat.php (Controllers)
In controller class, for load chat notification data at receiver user area, we have create following method in controller class.
load_notification() - This method will received ajax request for load notification data in notification area. This method will get data from Fetch_notification_data() model method, and convert that data into array for and send to ajax request in json format.
For load notification data in this chat application, In this models, we have make following method for Mysql database related operation.
Fetch_notification_data($receiver_id) - This method has been fetch notification data from Mysql database.
Get_user_data($user_id) - This method will fetch particular user data from Mysql database.
<?php
class Chat_model extends CI_Model
{
function search_user_data($user_id, $query)
{
$where = "user_id != '".$user_id."' AND (first_name LIKE '%".$query."%' OR last_name LIKE '%".$query."%')";
$this->db->where($where);
return $this->db->get('chat_user');
}
function Check_request_status($sender_id, $receiver_id)
{
$this->db->where('(sender_id = "'.$sender_id.'" OR sender_id = "'.$receiver_id.'")');
$this->db->where('(receiver_id = "'.$receiver_id.'" OR receiver_id = "'.$sender_id.'")');
$this->db->order_by('chat_request_id', 'DESC');
$this->db->limit(1);
$query = $this->db->get('chat_request');
if($query->num_rows() > 0)
{
foreach($query->result() as $row)
{
return $row->chat_request_status;
}
}
}
function Insert_chat_request($data)
{
$this->db->insert('chat_request', $data);
}
function Fetch_notification_data($receiver_id)
{
$this->db->where('receiver_id', $receiver_id);
$this->db->where('chat_request_status', 'Pending');
return $this->db->get('chat_request');
}
function Get_user_data($user_id)
{
$this->db->where('user_id', $user_id);
$data = $this->db->get('chat_user');
$output = array();
foreach($data->result() as $row)
{
$output['first_name'] = $row->first_name;
$output['last_name'] = $row->last_name;
$output['email_address'] = $row->email_address;
$output['profile_picture'] = $row->profile_picture;
}
return $output;
}
}
?>
chat_view.php (Views)
In this view file, for load chat request notification data. First we have define division tag for display notification data and then after by using Ajax request. It will load chat request notification data. In Ajax it has been received data in JSON format and then after convert into HTML format and display on web page.
After load chat request notification data at receiver user, so at that chat request notification data, receiver user can also see accept button for approve chat request. By click on Accept button receiver user can approve chat request and sender and receiver user can chat with each other. For accept chat request in this Codeigniter Chat syste, we have make following method in Controllers, Models class and views file.
Chat.php (Controllers)
In controllers class we have make following method for accept chat request feature in this chat application.
accept_request() - This method will received Ajax request for accept chat request. This method will send this request to model Update_chat_request() method.
In this model class, we have to make following method for database related operation for accept chat request.
Update_chat_request($chat_request_id, $data) - This method will update chat request status in Mysql table.
<?php
class Chat_model extends CI_Model
{
function search_user_data($user_id, $query)
{
$where = "user_id != '".$user_id."' AND (first_name LIKE '%".$query."%' OR last_name LIKE '%".$query."%')";
$this->db->where($where);
return $this->db->get('chat_user');
}
function Check_request_status($sender_id, $receiver_id)
{
$this->db->where('(sender_id = "'.$sender_id.'" OR sender_id = "'.$receiver_id.'")');
$this->db->where('(receiver_id = "'.$receiver_id.'" OR receiver_id = "'.$sender_id.'")');
$this->db->order_by('chat_request_id', 'DESC');
$this->db->limit(1);
$query = $this->db->get('chat_request');
if($query->num_rows() > 0)
{
foreach($query->result() as $row)
{
return $row->chat_request_status;
}
}
}
function Insert_chat_request($data)
{
$this->db->insert('chat_request', $data);
}
function Fetch_notification_data($receiver_id)
{
$this->db->where('receiver_id', $receiver_id);
$this->db->where('chat_request_status', 'Pending');
return $this->db->get('chat_request');
}
function Get_user_data($user_id)
{
$this->db->where('user_id', $user_id);
$data = $this->db->get('chat_user');
$output = array();
foreach($data->result() as $row)
{
$output['first_name'] = $row->first_name;
$output['last_name'] = $row->last_name;
$output['email_address'] = $row->email_address;
$output['profile_picture'] = $row->profile_picture;
}
return $output;
}
function Update_chat_request($chat_request_id, $data)
{
$this->db->where('chat_request_id', $chat_request_id);
$this->db->update('chat_request', $data);
}
}
?>
chat_view.php - (Views)
In this view file, we have to write jquery code on accept button click event, and in this jquery, it will send Ajax request to controller method for accpet chat request.
In this chat appplication, next step is to load user who has accepted chat request. Once user has accept chat request, then after in this chat system load chat request accepted user at both side. So they can chat with each other. For this feature we have make following method in Codeigniter controller and models class, and in views file we have make following jquery Ajax function.
Chat.php (Controllers)
For load chat request accepted user, in this controller class we have make following method for accept http request for load chat request accepted user.
load_chat_user() - This method has received Ajax request for load chat requested user at both sender and receiver user. This method has received data from model method and send data to Ajax request in json format.
For Mysql database related operation for load chat request accepted user. For in this models class we have make following method.
Fetch_chat_user_data($user_id) - This method will fetch chat request accepted user data from Mysql table and send that data to controller class method.
<?php
class Chat_model extends CI_Model
{
function search_user_data($user_id, $query)
{
$where = "user_id != '".$user_id."' AND (first_name LIKE '%".$query."%' OR last_name LIKE '%".$query."%')";
$this->db->where($where);
return $this->db->get('chat_user');
}
function Check_request_status($sender_id, $receiver_id)
{
$this->db->where('(sender_id = "'.$sender_id.'" OR sender_id = "'.$receiver_id.'")');
$this->db->where('(receiver_id = "'.$receiver_id.'" OR receiver_id = "'.$sender_id.'")');
$this->db->order_by('chat_request_id', 'DESC');
$this->db->limit(1);
$query = $this->db->get('chat_request');
if($query->num_rows() > 0)
{
foreach($query->result() as $row)
{
return $row->chat_request_status;
}
}
}
function Insert_chat_request($data)
{
$this->db->insert('chat_request', $data);
}
function Fetch_notification_data($receiver_id)
{
$this->db->where('receiver_id', $receiver_id);
$this->db->where('chat_request_status', 'Pending');
return $this->db->get('chat_request');
}
function Get_user_data($user_id)
{
$this->db->where('user_id', $user_id);
$data = $this->db->get('chat_user');
$output = array();
foreach($data->result() as $row)
{
$output['first_name'] = $row->first_name;
$output['last_name'] = $row->last_name;
$output['email_address'] = $row->email_address;
$output['profile_picture'] = $row->profile_picture;
}
return $output;
}
function Update_chat_request($chat_request_id, $data)
{
$this->db->where('chat_request_id', $chat_request_id);
$this->db->update('chat_request', $data);
}
function Fetch_chat_user_data($user_id)
{
$this->db->where('chat_request_status', 'Accept');
$this->db->where('(sender_id = "'.$user_id.'" OR receiver_id = "'.$user_id.'")');
$this->db->order_by('chat_request_id', 'DESC');
return $this->db->get('chat_request');
}
}
?>
chat_view.php (Views)
This view file has been display chat request accepted user data in browser in html format. In this file we have make one load_chat_user() jquery function which will send Ajax request to Controller class and received data in json format and convert that data into HTML format and display on web page.
Now we have come into right part of this Chat application. In this section you can learn how to send chat messages from one user to another user. For send chat message fuctionality in this Codeigniter Chat app, we have to make following methods in Controller and models class and write jquery ajax script in views file.
Chat.php (Controllers) -
For implement send chat messages in this chat application, we have to make following method in this controller class for handle http request for send chat messages.
send_chat() - This method will accept Ajax request for send chat messages. This method will received data from Ajax request and send that data to models class method for insert into Mysql table and send back request to Ajax request.
In this chat system for make send chat message feature, so for make this feature we have to make following method for handle database operation in this models class.
Insert_chat_message($data) - This method will insert chat data into Mysql table. This method will received data from controller method.
<?php
class Chat_model extends CI_Model
{
function search_user_data($user_id, $query)
{
$where = "user_id != '".$user_id."' AND (first_name LIKE '%".$query."%' OR last_name LIKE '%".$query."%')";
$this->db->where($where);
return $this->db->get('chat_user');
}
function Check_request_status($sender_id, $receiver_id)
{
$this->db->where('(sender_id = "'.$sender_id.'" OR sender_id = "'.$receiver_id.'")');
$this->db->where('(receiver_id = "'.$receiver_id.'" OR receiver_id = "'.$sender_id.'")');
$this->db->order_by('chat_request_id', 'DESC');
$this->db->limit(1);
$query = $this->db->get('chat_request');
if($query->num_rows() > 0)
{
foreach($query->result() as $row)
{
return $row->chat_request_status;
}
}
}
function Insert_chat_request($data)
{
$this->db->insert('chat_request', $data);
}
function Fetch_notification_data($receiver_id)
{
$this->db->where('receiver_id', $receiver_id);
$this->db->where('chat_request_status', 'Pending');
return $this->db->get('chat_request');
}
function Get_user_data($user_id)
{
$this->db->where('user_id', $user_id);
$data = $this->db->get('chat_user');
$output = array();
foreach($data->result() as $row)
{
$output['first_name'] = $row->first_name;
$output['last_name'] = $row->last_name;
$output['email_address'] = $row->email_address;
$output['profile_picture'] = $row->profile_picture;
}
return $output;
}
function Update_chat_request($chat_request_id, $data)
{
$this->db->where('chat_request_id', $chat_request_id);
$this->db->update('chat_request', $data);
}
function Fetch_chat_user_data($user_id)
{
$this->db->where('chat_request_status', 'Accept');
$this->db->where('(sender_id = "'.$user_id.'" OR receiver_id = "'.$user_id.'")');
$this->db->order_by('chat_request_id', 'DESC');
return $this->db->get('chat_request');
}
function Insert_chat_message($data)
{
$this->db->insert('chat_messages', $data);
}
}
?>
chat_view.php (Views)
For send chat messages, in view file we have to create one division tag with contenteditable attribute property set to true, so user can type chat message in that tag. Then after we have write jQuery code on send chat button. So when user click on button then it will send Ajax request to controller method for send message to another user.
Once Chat message has been send in this chat application. Now we want to display chat history data on web page. So, in this section, we have make Load chat messages feature, which will load chat message on regular interval on web page. For this feature, we have make following method in Codeigniter controller and models class and make requireds changes in views file also.
Chat.php (Controllers)
For load chat message history, we have make followin method in Chat.php controller class.
load_chat_data() - This method will received Ajax request for fetch chat message history data from Mysql database. This method has received data from model method and converted into Array and send back to Ajax request in json string format.
For load chat message history, for this feature here in model class we have make following method for handle Mysql database related operation.
Update_chat_message_status($user_id) - This method will update chat message status.
Fetch_chat_data($sender_id, $receiver_id) - This method has fetch chat message conversation between two user from Mysql database.
<?php
class Chat_model extends CI_Model
{
function search_user_data($user_id, $query)
{
$where = "user_id != '".$user_id."' AND (first_name LIKE '%".$query."%' OR last_name LIKE '%".$query."%')";
$this->db->where($where);
return $this->db->get('chat_user');
}
function Check_request_status($sender_id, $receiver_id)
{
$this->db->where('(sender_id = "'.$sender_id.'" OR sender_id = "'.$receiver_id.'")');
$this->db->where('(receiver_id = "'.$receiver_id.'" OR receiver_id = "'.$sender_id.'")');
$this->db->order_by('chat_request_id', 'DESC');
$this->db->limit(1);
$query = $this->db->get('chat_request');
if($query->num_rows() > 0)
{
foreach($query->result() as $row)
{
return $row->chat_request_status;
}
}
}
function Insert_chat_request($data)
{
$this->db->insert('chat_request', $data);
}
function Fetch_notification_data($receiver_id)
{
$this->db->where('receiver_id', $receiver_id);
$this->db->where('chat_request_status', 'Pending');
return $this->db->get('chat_request');
}
function Get_user_data($user_id)
{
$this->db->where('user_id', $user_id);
$data = $this->db->get('chat_user');
$output = array();
foreach($data->result() as $row)
{
$output['first_name'] = $row->first_name;
$output['last_name'] = $row->last_name;
$output['email_address'] = $row->email_address;
$output['profile_picture'] = $row->profile_picture;
}
return $output;
}
function Update_chat_request($chat_request_id, $data)
{
$this->db->where('chat_request_id', $chat_request_id);
$this->db->update('chat_request', $data);
}
function Fetch_chat_user_data($user_id)
{
$this->db->where('chat_request_status', 'Accept');
$this->db->where('(sender_id = "'.$user_id.'" OR receiver_id = "'.$user_id.'")');
$this->db->order_by('chat_request_id', 'DESC');
return $this->db->get('chat_request');
}
function Insert_chat_message($data)
{
$this->db->insert('chat_messages', $data);
}
function Update_chat_message_status($user_id)
{
$data = array(
'chat_messages_status' => 'yes'
);
$this->db->where('receiver_id', $user_id);
$this->db->where('chat_messages_status', 'no');
$this->db->update('chat_messages', $data);
}
function Fetch_chat_data($sender_id, $receiver_id)
{
$this->db->where('(sender_id = "'.$sender_id.'" OR sender_id = "'.$receiver_id.'")');
$this->db->where('(receiver_id = "'.$receiver_id.'" OR receiver_id = "'.$sender_id.'")');
$this->db->order_by('chat_messages_id', 'ASC');
return $this->db->get('chat_messages');
}
}
?>
chat_view.php (Views)
This view file will display chat history message on web page. When user has been click on any user name, then that chat message conversation between login user and that user chat message will be display on web page. And after this by using setInterval() function, chat message data will be updated on every 5 second.
After send message to one user to another user, but that user is not login into system. So when he or she login into system then at that time they can see how many messages they have receiver from each user. For this feature, we have make following changes in this Chat application code.
In this section, we have one more feature in this Codeigniter Chat Application. In this section, we have add functionality like display user if online or offline in this chat application. If User is on chat page, then that user status will be display online, and if User is logout from system or not on chat page then that User status will be display offline. For this feature, we have make following chages in Model Views and Controller file.
In this section, we have add one more feature in this Chat application. Here we have add WhatsApp like display typing text at below user name. When one user has type then another user can know that user is typing something in his or her chat box. So, this type of feature we have add in this Codeigniter chat application by using Ajax jquery. For this User is typing or not feature, we have made following changes in Codeigniter Controllers, Models and View files.
