Nowadays in making Website, Web App, Cloud App etc. everyone wants his/her system fast on the server. For making the system fast and responsive we use Ajax and Bootstrap.
Here, is my blog post which is based on Fetching data from database and display it in html page but without refreshing page in php.
If any one clicks any button, then it only refreshes the part of that page not the whole page.
If you have the basic knowledge of codeigniter framework then you are at right place. If you don't, not to worry just click on this link to gather the required knowledge: https://www.tutorialspoint.com/codeigniter/
So Let's start and create the following file in codeigniter framework.
1) application/controllers/task.php
2) application/model/pojo.php
3) application/view/task/index.php
1) First, create the index.php file in application/view/task/ and load all CDN of ajax and bootstrap in <head> tag.
Now, we are going to create Nav bar and div tag in body tag of html.
In Nav bar, we are going to write 2 or 3 names so as when any one clicks on Nav bar word, then it only changes the div tag content by fetching data from database.
2) Ajax Query Request.
Now write this, code in ajax to call the controller. Here we call by the ID (#employee) and pass the URL of the controller, where all the actual code are there and the data is fetched from database and displayed to the div tag which is call by the search_change ID.
In the above script, ajax call has occurred twice:
a) One is call employee by calling controller task/employee &
b) Second is call director by calling controller task/director
Here, we are creating On file in "View" which displays data after fetching data from database.
Creating all_task.php in application/view/task
After Fetching the data from controller through the model it shows in the "View". Here we used foreach($result as $row) to display the all data with the help of table.
3) Now we are going to create task.php file in application/controller and inside the task.php controller, create two method employee and director respectively.
a) In construct, we will load model pojo
b) In employee method, we will call the business logic from the model and pass it to the View by ajax
c) In director method, we will call the business logic from the model and pass it to the View by ajax
4) Lastly, we are going to create pojo.php in application/model for business logic.
We are creating two method in pojo model one is employee and another one is director. Both the methods fetch the data from database by respective tables in database and pass the fetch data to the controller and controller stores all the fetch data into one variable array and pass it to the "View".
That's it from my side. If you have any problem, feel free to write in the comments down below..
Stay tuned for more coding!!!
Thank You..
Here, is my blog post which is based on Fetching data from database and display it in html page but without refreshing page in php.
If any one clicks any button, then it only refreshes the part of that page not the whole page.
If you have the basic knowledge of codeigniter framework then you are at right place. If you don't, not to worry just click on this link to gather the required knowledge: https://www.tutorialspoint.com/codeigniter/
So Let's start and create the following file in codeigniter framework.
1) application/controllers/task.php
2) application/model/pojo.php
3) application/view/task/index.php
1) First, create the index.php file in application/view/task/ and load all CDN of ajax and bootstrap in <head> tag.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>Ajax Request</title>
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
Now, we are going to create Nav bar and div tag in body tag of html.
In Nav bar, we are going to write 2 or 3 names so as when any one clicks on Nav bar word, then it only changes the div tag content by fetching data from database.
<!doctype html>
<html lang = "en">
<head></head><body>
<div>
<ul class="nav nav-tabs" style="background-color:black;">
<li><a href="" id="employee">EMPLOYEE</a></li>
<li><a href="" id="director">DIRECTOR</a></li>
<!-- <li><a href="" id="analytics">ANALYTICS</a></li>-->
</ul>
</div>
<br>
<div id="search_change">
</div>
</body>
</html>
2) Ajax Query Request.
Now write this, code in ajax to call the controller. Here we call by the ID (#employee) and pass the URL of the controller, where all the actual code are there and the data is fetched from database and displayed to the div tag which is call by the search_change ID.
<!doctype html>
<html lang = "en">
<head></head><body>
<script>
$(document).ready(function() {
$('#employee').click(function (event) {
dataString = $("#employee").serialize();
$.ajax({
type:"POST",
url:"<?php echo base_url(); ?>task/employee",
data:dataString,
success:function (data) {
$('#search_change').html(data);
}
});
event.preventDefault();
});
});
$(document).ready(function() {
$('#director').click(function (event) {
dataString = $("#director").serialize();
$.ajax({
type:"POST",
url:"<?php echo base_url(); ?>task/director",
data:dataString,
success:function (data) {
$('#search_change').html(data);
}
});
event.preventDefault();
});
});
</script>
</body>
</html>
In the above script, ajax call has occurred twice:
a) One is call employee by calling controller task/employee &
b) Second is call director by calling controller task/director
Here, we are creating On file in "View" which displays data after fetching data from database.
Creating all_task.php in application/view/task
<table class="table table-striped table-hover table-responsive">
<thead>
<tr class="">
<th>Director</th>
<th>Time</th>
<th>Task</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php $total_time=0; ?>
<?php foreach($result as $row) { ?>
<tr>
<td><?php echo $row->director;?></td>
<td><?php echo $row->duration;?></td>
<td><?php echo $row->task;?></td>
<td><?php echo $row->status;?></td>
</tr>
<?php $total_time += $row->duration; ?>
<?php } ?>
<tr>
<td>Total</td>
<td></td>
<td><?php echo "$total_time";?></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
After Fetching the data from controller through the model it shows in the "View". Here we used foreach($result as $row) to display the all data with the help of table.
3) Now we are going to create task.php file in application/controller and inside the task.php controller, create two method employee and director respectively.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class task extends CI_Controller{
public function __construct()
{
parent::__construct();
}
public function index(){
}
public function employee(){
}
public function director(){
}
}
a) In construct, we will load model pojo
b) In employee method, we will call the business logic from the model and pass it to the View by ajax
c) In director method, we will call the business logic from the model and pass it to the View by ajax
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class task extends CI_Controller{
public function __construct()
{
parent::__construct();
/*Load the task of model*/
$this->load->model('pojo');
}
public function index(){
}
public function employee(){
$data['result']=$this->pojo->employee();
$this->load->view('task/all_task',$data);
}
public function director(){
$data['result']=$this->pojo->directors();
$this->load->view('task/all_task',$data);
}
4) Lastly, we are going to create pojo.php in application/model for business logic.
We are creating two method in pojo model one is employee and another one is director. Both the methods fetch the data from database by respective tables in database and pass the fetch data to the controller and controller stores all the fetch data into one variable array and pass it to the "View".
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class pojo extends CI_Model{
public function employee(){
/* This display all task by filtering data*/
$this->db->select('*');
$this->db->from('employee');
$query=$this->db->get();
return $result=$query->result();
}
public function director(){
/* This display all task by filtering data*/
$this->db->select('*');
$this->db->from('director');
$query=$this->db->get();
return $result=$query->result();
}
}
That's it from my side. If you have any problem, feel free to write in the comments down below..
Stay tuned for more coding!!!
Thank You..
No comments:
Post a Comment