In this post you can find the solution of How to make whole Div tag clickable by using jQuery. There are many ways we can make Div tag clickable like by using CSS, HTML or javascript. But here we will seen how can use simple jQuery code to create whole Div clickable. In web development there are many places in which we have to put link on whole div tag not only single text. Then at that time we have put simple javascript in onclick attribute of div tag and make whole div tag clickable. Or by using CSS we have convert simple div tag to clickable div tag.
But by this method it has affect SEO score of our web page, because in html code we have add more attribute. But if we have use simple jQuery for this things then in single line of code it will convert div tag to clickable div tag without adding any extra tag in our html code. This source you can also implement other tag like span tag, html 5 article tag or any other tag which we can use in place of Div. So, by this code we not only convert Div tag to clickable tag, but also we can aslo use same code for convert other tag to clickable tag. Below you can find source code and online demo of How to make whole Div clickable by using jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>How to make Whole Div Clickable using jquery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.clickable
{
border:1px solid #ccc;
cursor:pointer;
padding-top:12px;
padding-bottom:12px;
}
</style>
</head>
<body>
<div class="container">
<br />
<h3 align="center">How to make Whole Div Clickable using jquery</h3>
<br />
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 clickable">
<img src="image.jpg" class="img-thumbnail" />
<h3>Exporting Data into Multiple Excel sheets in PHP</h3>
<p>If you are working with large amount of data and mainly we have use Excel and CSV file format for export data in web development. So, in this post we have describe how to split huge amount of mysql datable data and export into multiple excel or csv file by using PHPExcel library in PHP.</p>
<a href="https://www.webslesson.info/2018/12/exporting-data-into-multiple-excel-sheets-in-php.html">Read more</a>
</div>
<div class="col-md-4"></div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('.clickable').click(function(){
window.location = $(this).find("a").attr("href");
});
});
</script>
If you are working with large amount of data and mainly we have use Excel and CSV file format for export data in web development. So, in this post we have describe how to split huge amount of mysql datable data and export into multiple excel or csv file by using PHPExcel library in PHP. Suppose there are millions of data in your database, and that amount of data you cannot export into single excel file. At that time you have to divide your data into different files like what we have do in pagination. Like a pagination we have not load all data in single page, but we have divided same amount of data in different page. Same thing we have to do for export huge amount of data into multiple file using PHP script with PHPExcel library.
There are number of ways we can export database using PHP script can be done number of ways. But here we will export data into multiple excel file, and that file will be store under folder. By click on link, we can download multiple file one by one. So, here exporting data and downloading file has been divided, so chances of crash of our website will be very less.
The output of any web application is to get data in Excel, CSV or PDF format. If you want to make report from your web based application then data must be required in PDF format, but if you want to reuse data in other form, then data must be exported into Excel or CSV format. Because this two format data type is widely used for exchange between two web application. So, here in this post we have make this tutorial for export mysql data into multiple excel file using PHPExcel library in PHP script. Below you can find complete source code of this tutorial.
This is index.php file, in this file first we have make database connection, and fetch data from customer table and display on web page. After this we have make form with input select option for select how many records you want to export in single Excel file and below you can find submit button. Once click on submit button then in that block first it will include PHPExcel library. After this first it will calculate how many file want to make from mysql database. After this here object of PHPEcel library has been created and start exporting mysql data in to multiple excel file. Once all data has been exported into multiple files then that file has been stored under folder. These all file download link will be display on web page, and for download file, below you can fine download.php file.
This file script is used for download exported excel file from folder. Once user click on excel download file then this file script has been execute and it will download particular excel file.
Ajax Codeigniter Product Filter with Pagination - Part 1
Ajax Codeigniter Product Filter with Pagination - Part 2
Ajax Codeigniter Product Filter with Pagination - Part 3
Ajax Codeigniter Product Filter with Pagination - Part 4
This post is for Codeigniter web developer, because in this post we have make stylish product filter in Codeigniter framework by using Ajax jQuery. In this product filter user can filter product details by different filter which we have make by using Checkbox, and even product can be filter on two price range. For make price range filter here we have use jQuery UI slider plugin. This all operation has been done by using jQuery Ajax with Codeigniter framework.
In this Codeigniter ajax product filter we have also add pagination feature also. So, all product details will not be load on same page but it will be divided into different web page. So, it will reduce web page loading time. Here we have use Codeigniter pagination library for add pagination feature into Codeigniter product filter. If number of product load has been increase by limit to display on webpage, then in Codeigniter product filter it will automatically add pagination link. For go to one page to another page, here also we have use ajax also, so it will load another page product data without refresh of web page. So, this is Codeigniter product filter with pagination link using Ajax.
In most of the ecommerce website all product has been display with differnt product filter with pagination link. There are also for filter product data input type checkbox has been used for filter product data on different condition. Sameway for filter product data between two price, for this here also we have use jQuery UI library slider plugin. When we have slide price, and stop slide then it will fire ajax request for fetch data and display product data on web page which come between two price. These are basic functionality of Codeigniter Ajax Product filter with pagination feature. Below you can find complete source code of this tutorial.
Do you know How to Store or Insert Crop image into Mysql database with PHP script. If you looking such type of tutorial, then you have come on best post. In this post you can learn How to crop an Image by using Croppie javascript plugin and then after that croped image has been inserted into mysql database by using PHP script with Ajax and Bootstrap modal. In one of our post like Image Crop and Upload into folder using javascript plugin with PHP and Ajax, in that post you can find before upload of image, it has been crop by using javascript Croppie plugin, and after crop of image it will store into folder using Ajax with PHP.
Why we have to store image into Mysql database in place of store image info folder, there is one benefit is that if we have store image into database then it has been load faster than image load from folder. There is one another benifit is that image which are store in database is not cache in browser, while image load from folder has been easily cache in browser. There are some more other benifit for storing image into database. So, Here we have do two operation like first we have crop image by using jQuery plugin, and after crop image has been inserted into mysql database.
Now we have seen whole process of crop image and store into mysql database. When first we have select image, then Croppie plugin has been initialize, and by using this plugin we can zoom image, and as per our requirement we can crop image. Once image has been crop then this plugin has convert crop image into binary string format. By using base64_decode() function we decode binary string into image, and by using file_put_contents() we have create under local folder. Once Image has been created and under store under folder, we ahve convert into binary string format by using file_get_contents() and addslashes() function. Then after run insert query and store into database. Once crop image has been store into database by using unlink() function, it will be remove from local folder also. This is whole process of Image crop and Save into Mysql database by using javascript croppie plugin with PHP and Ajax. Below you can find complete source code of this tutorial.
This post covered topic on Codeigniter tutorial for beginner step by step, and in this post we have shared simple feature like How to Delete multiple data from Mysql table using Checkbox in Codeigniter framework with Ajax. For do this operation we will use jQuery Ajax and HTML Check boxes input fields for delete multiple rows of mysql data in Codeigniter. Mainly we have always put delete button at individual row for delete single data. But if we have large amount of data, from that data we want to remove many unwanted rows of data at the same time. Then at that time this functionality will helpful. This is because if we have remove single data one by one then it will take much more time, and by using this feature we can delete bulk data at the same time.
If we have use Codeigniter framework for our web development, then we will make any large application by using this framework. So, if application is large, then in that application data will be bulk of amount. So, If we have made this functionality in our application then it will reduce our work time, and it will increase efficiency of our web application. For make this feature we have use jQuery, Ajax and HTML check boxes. HTML check boxes used for select multiple row of data by selecting checkbox. Ajax used for send and received request to server. By using Ajax with Codeigniter we can delete multiple or bulk of mysql data without refresh of web page. jQuery is used for give animation effect at the time of delete of multiple data.
For discuss deleting of multiple data in Codeigniter using Checkbox with Ajax, here we have first fetch data from mysql database with delete button and checkbox selection. When used checked checkbox, then that row background color and font color will be change. For multiple delete operation we have define one button for delete action. Once we have click on delete button, by using jQuery code first we have store id of data in one local variable, and then after send ajax request to Codeigniter controller with array of id data store in local variable. At server side it will delete multiple records one by one, and on client side, user can see deleting of multiple data with animated effect. Below you can find complete source code of How to Delete Multiple Records using Checkbox in Codeigniter.
Run following sql script in your phpMyAdmin, this script will make tbl_employee in your database.
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `tbl_employee`
--
CREATE TABLE `tbl_employee` (
`id` int(11) NOT NULL,
`name` varchar(50) NOT NULL,
`address` text NOT NULL,
`gender` varchar(10) NOT NULL,
`designation` varchar(100) NOT NULL,
`age` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tbl_employee`
--
INSERT INTO `tbl_employee` (`id`, `name`, `address`, `gender`, `designation`, `age`) VALUES
(5, 'Clara Gilliam', '63 Woodridge Lane\r\nMemphis, TN 38138', 'Female', 'Programmer', 24),
(6, 'Barbra K. Hurley', '1241 Canis Heights Drive\r\nLos Angeles, CA 90017', 'Female', 'Service technician', 26),
(7, 'Antonio J. Forbes', '403 Snyder Avenue\r\nCharlotte, NC 28208', 'Male', 'Faller', 32),
(8, 'Charles D. Horst', '1636 Walnut Hill Drive\r\nCincinnati, OH 45202', 'Male', 'Financial investigator', 29),
(174, 'Martha B. Tomlinson', '4005 Bird Spring Lane, Houston, TX 77002', 'Female', 'Systems programmer', 38),
(162, 'Jarrod D. Jones', '3827 Bingamon Road, Garfield Heights, OH 44125', 'Male', 'Manpower development advisor', 64),
(177, 'Patricia L. Scott', '1584 Dennison Street\r\nModesto, CA 95354', 'Female', 'Urban and regional planner', 54),
(181, 'Kimberly J. Ellis', '4905 Holt Street\r\nFort Lauderdale, FL 33301', 'Male', 'Dressing room attendant', 24),
(183, 'Steve John', '108, Vile Parle, CL', 'Male', 'Software Engineer', 29),
(186, 'Louis C. Charmis', '1462 Juniper Drive\r\nBreckenridge, MI 48612', 'Male', 'Mental health counselor', 40),
(190, 'Michael Cobb', '2409 Patterson Fork Road, Westchester, IL 60154', 'Female', 'Personal secretary', 36);
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tbl_employee`
--
ALTER TABLE `tbl_employee`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tbl_employee`
--
ALTER TABLE `tbl_employee`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=197;
Step 2 - Multiple_delete.php(Controllers)
Once database is ready, next step we have to create controller in our Codeigniter application. So, here we have create Multiple_delete.php controller in application/controllers folder.
In this controller class we have two method like index() and delete_all() method. index() method is used for fetch data from mysql database and display on web page, while delete_all() method is used for received ajax request for delte multiple data.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Multiple_delete extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('multiple_delete_model');
}
function index()
{
$data['employee_data'] = $this->multiple_delete_model->fetch_data();
$this->load->view('multiple_delete', $data);
}
function delete_all()
{
if($this->input->post('checkbox_value'))
{
$id = $this->input->post('checkbox_value');
for($count = 0; $count < count($id); $count++)
{
$this->multiple_delete_model->delete($id[$count]);
}
}
}
}
?>
Step 3 - Multiple_delete_model.php (Models)
Generally, In Codeigniter models file is used for do any database operation. So, here also we have make Multiple_delete_model.php model file under application/models folder for database operation. In this file also there are two method like fetch_data() for fetch data from employee table and delete() method for delete data from mysql database operation.
<?php
class Multiple_delete_model extends CI_Model
{
function fetch_data()
{
$this->db->select("*");
$this->db->from("tbl_employee");
$this->db->order_by('id', 'desc');
return $this->db->get();
}
function delete($id)
{
$this->db->where('id', $id);
$this->db->delete('tbl_employee');
}
}
?>
Step 4 - multiple_delete.php (Views)
In Codeigniter Views file is used for display output on webpage and received any request for client. Here we have make multiple_delete.php view file under application/views folder. This view file first display employee table data in html table formate. And from this view file user can give request to delete multiple records using Ajax.
Once you have follow video tutorial and above source code, then you can make Codeigniter application in which you can delete multiple records using checkbox selection with Ajax jQuery and Mysql.
Laravel Searching with Sorting with Pagination using Ajax
If you are beginner level in Laravel, and if you want to learn How to use Ajax with Laravel, then you have come on right place because in this post you can find How to Live data search with Sort table column data in ascending or descending order and Pagination in Laravel framework by using Ajax. We have always try to publish something new post which will help you to learn something new. So, here we have publish new article on Laravel with Ajax and make simple mysql table data live searching, table column sorting data in Ascending or descending order with pagination link. This is amazing tutorial of Laravel tutorial series with Ajax and here we have make search filter with sortable table and pagination link. Which is one part of any crud application. So, by using this tutorial you can make simple application in which can live search mysql data, sort tabular data and pagination link in Laravel framework using Ajax. In short we will do column sorting with Live data search in Laravel using Ajax.
We all know by using Data sorting and searching is important for find quick and perfect data in a very short time. Here we will take a live example of data sorting in ascending or descending order with pagination. Here we will not only implement tabular data sorting but also we will also make pagination link with column sorting in Laravel using Ajax. We will discuss step by step this ascending or descending column sorting of data with pagination using Ajax and Laravel. This tutorial will show you how to create data sorting with pagination operation without refresh of web page with Laravel jQuery and Ajax.
Here we have start from scratch. So, If you have not install Laravel application, then you have to open command prompt, and run composert command, and then after you can run below command this command will download Laravel application, and install at define destination.
Once Laravel application has been installed successfully, then first you have to make database connection. For make database connection you have to .env file and define following database configuration.
After making database connection, we have to make one PaginationController file under app/Http/Controllers/PaginationController.php. This controller will handle http request for display data on web page with data sorting and pagination request.
For display data on web page, in Laravel we have to create view file in resources/views folder. In this folder we have to create two view files like pagination.blade.php and pagination_data.blade.php.
In pagination.blade.php you can find complete html jQuery and ajax code for data sorting and pagination. In this file we have include pagination_data.blade.php file data by using @include statement. Below you can find source code of both view files.
Lastly we have to set route for controller and method which we have make under controller. For this we have to go to routes/web.php file and write following code for set route.
Once you have completely follow this step then you can make data sorting and pagination in Laravel with Ajax. For run laravel application, you have to run following command.
php artisan serve
After run this command, then you will receive message like Laravel server has been start with this link - http://localhost:8000/. For run this application you have to type following link in your browser.
In Web development file or image upload is a very required feature. There are many ways we can store images. One we can upload image on server and store image name in Mysql database using PHP. In another way we can directly store images in Mysql database table using PHP also. There are many post we have publish on upload single image or multiple images on server and store image details in database using PHP. But in this post we have convered one advance topic like how to insert multiple image in mysql database using PHP with Ajax.
In one of our previous post we have step by step describe how to insert and fetch images from Mysql database using PHP. But in that post we have use only PHP script for insert image into mysql database and then after fetch images from Mysql database and display on web page using PHP. But here we have make one form with option like select multiple images at the same time and by using jQuery Ajax send that images data to PHP. In PHP script it will convert image into binary string format and insert into Mysql database one by one. After inserting multiple images into Mysql database, now we want to retrieve images from mysql database and display on web page. For this also we have use jQuery and Ajax function which send request to PHP, at PHP script that fetch data from mysql table and convert that data into html format and send back to ajax request. Now we have discuss source of How to Upload Multiple Images in Database using PHP Ajax.
This insert.php file, in this file you can find PHP script for Insert Multiple images into Mysql database. This file has received ajax request for insert multiple file into Mysql database. First, this script check there is any image file has been received or not, if received then it will check how many image insert has been received. After this this PHP script insert images into Mysql database. Before insert imag into mysql database, first it has convert into binary string format using file_get_contents() function and then at it has make insert query and run insert query and store multiple images into mysql database.
This PHP script received Ajax request for retrieve images from Mysql database. This PHP script retrieve images from Mysql database and after this convert into HTML format and send to Ajax request. For convert binary string to images, here we have use base64_encode() function.
