If you have seen any social media sites like Youtube, Twitter or Facebook, in which when page has been load then it has not load all data on web page, when it was load in browser. But in all those sites they have load only last some data on web page, and suppose we want to view more data, then we have to click on load more button. So, this types of techniques we have to implement in Laravel by using ajax jQuery. In this features data will be load dynamically, when user have been click on button, and here it will make pagination without displaying links to user.
Load More or Show More functionality is very simple and user friendly, this is because here all data has not been load at the same time, but it will load only after click on button like pagination, but also it will load more data without refreshing of web page. In this post we will make this type of feature like Load more data from Mysql Database using Ajax in Laravel Framework.
There are two type of load more data feature, one is when user has been click on button then next records has been load on web page, and other is when page has been scroll then next data has been load on web page. But here we will implement load more data on button click event, which we will make in Laravel framework using Ajax jQuery. It will works in a very simple way, and when page has been load then it will load some specific number of data, Suppose we want to view next records, then we have to click on button in which we have define last data id and based on that id it will append next data on web page without refresh of whole page. Because here we have use Ajax with Laravel for implement Load More feature.
Following script will make table in your database.
USE `testing`;
/*Table structure for table `post` */
DROP TABLE IF EXISTS `post`;
CREATE TABLE `post` (
`id` mediumint(8) unsigned NOT NULL AUTO_INCREMENT,
`post_title` text,
`post_description` text,
`author` varchar(255) DEFAULT NULL,
`date` date DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=101 DEFAULT CHARSET=latin1;
Step 2 - Make Database Connection
Once you have create table, and you have insert some records in that table. Now we have move to start creating Load More feature in Laravel. First we want to make database connection. For this we have to go to config/database.php. In this file we have to define database configuration.
After making Mysql Database connection, Now we have to create Controller in Laravel. For this we have to go to command prompt, in which first we have to run "Composer" command, because it has manage Laravel framework dependency. We have to write following command for Create controller in Laravel.
php artisan make:controller LoadMoreController
It will make LoadMoreController.php file under app/Http/Controllers folder. In this controller we have use DB statement for database operation. In this controller we have make following method.
index() - This is root method of this LoadMoreController, which has been load load_more.blade.php file in browser.
load_data() - This method has received ajax request for fetch data from post table and convert into html format and send back to ajax request. In this method if id variable value greater than zero then it will fetch next five data, otherwise it has fetch first five data and convert into HTML and send to Ajax funciton, which has been display on web page.
In Laravel, it has use blade engine for process PHP file which has been store under resources/views/load_more.blade.php, it is has display output in browser. Under this file we have use ajax request, which send request to Controller for fetch data and display on web page without refresh of web page. For append data on web page, here we have use jquery append() method.
<!DOCTYPE html>
<html>
<head>
<title>Load More Data in Laravel using Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div class="container box">
<h3 align="center">Load More Data in Laravel using Ajax</h3><br />
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Post Data</h3>
</div>
<div class="panel-body">
{{ csrf_field() }}
<div id="post_data"></div>
</div>
</div>
<br />
<br />
</div>
</body>
</html>
<script>
$(document).ready(function(){
var _token = $('input[name="_token"]').val();
load_data('', _token);
function load_data(id="", _token)
{
$.ajax({
url:"{{ route('loadmore.load_data') }}",
method:"POST",
data:{id:id, _token:_token},
success:function(data)
{
$('#load_more_button').remove();
$('#post_data').append(data);
}
})
}
$(document).on('click', '#load_more_button', function(){
var id = $(this).data('id');
$('#load_more_button').html('<b>Loading...</b>');
load_data(id, _token);
});
});
</script>
Step 5 - Set Route
After this we have to set route of Controller method in Laravel framework. For this we have to open routes/web.php file.
For run Laravel application, we have to go command prompt and write following commend, it will run Laravel application and display base url of Laravel application.
php artisan serve
It will return follwing url and for run this code you have to write following url.
http //127.0.0.1
This is complete step by step process with source code for make Load More data feature in Laravel by using Ajax jQuery with Mysql Database.
In this post, We are going to learn how to search database data which has come between two dates. That means it will return filter data from the mysql database based on two dates input. So, this type of feature we will make in Laravel PHP framework by using Ajax jQuery. So, Data comes between two dates will be load on web page without refresh of web page, because here we will use Ajax with Laravel for Date Range Search.
Here we will use Bootstrap Datepicker plugin for choose the dates for filter data options. By using this plugin we will enable Data selection on textbox, so user can select from date and to data inputs, when he will click on button, then ajax request will be send to Laravel script, which will search data which has been come between two provided date by using BETWEEN clause. So, here we will make date range search with Bootstrap Datepicker using Ajax with Laravel framework and Mysql database.
If you have make any enterprise level application using Laravel framework, and in that system you have large amount of data, then you have to filter data. So filtering of data there is one option is Date Range search. Date Range search means how to get records comes between two given date. So, this type of feature here we will make in Laravel application. So, here we will search data with date range in Laravel. Below you can find step by step process for how to implement Date Range Search feature in Laravel using Ajax.
Run following sql script, it will make post table in your phpmyadmin.
USE `testing`;
/*Table structure for table `post` */
DROP TABLE IF EXISTS `post`;
CREATE TABLE `post` (
`id` mediumint(8) unsigned NOT NULL AUTO_INCREMENT,
`post_title` text,
`post_description` text,
`author` varchar(255) DEFAULT NULL,
`date` date DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=101 DEFAULT CHARSET=latin1;
Step 2 - Laravel Database connection
Once table has been created in your database, now you have to make database connection, for this first you have to go to config/database.php and in this you have to define your database configuration.
After this you have to open .env file, and in this file also you have to define Database configuration. So, in Larave this two place we have to define Database configuration for make database connection.
Step 3 - Create Controller in Laravel (DateRangeController.php)
For create controller in Laravel. first you have to go to your command prompt, and in that you have to first run composer command. This is because laravel all dependecy has been manage by using composer. After this you have to go to working folder, and write following command.
This command will make DateRangeController.php controller file in app/Http/Controllers folder. In this file we have make two method.
index() - This is root method of this class, it will load date_range.php file in browser.
fetch_data() -
This method has received ajax request for search data comes between two dates. In this method we have perform database operation, and it will return data in json format.
This view you have to make in resources/views folder. This view file has been used for display html output in browser. In this file we have use jQuery, Bootstrap and Datepicker librar for date selection. Here we have used Ajax request for fetch data from server. Below you can find code of this file.
Once you have completed working on code, lastly you have to set route of your controller method. For this you have to go to routes/web.php file. In this file you have to define your method route.
Once you have completed all above step, then you have to run your laravel application, for this you have to go to command prompt, and write following command.
php artisan serve
This command will start your laravel application, and you can access above by write followg url.
http://127.0.0.1:8000/daterange
So, this is complete step by step process for make date range search in Laravel using Ajax jQuery.
In this post, We will discuss how can we generate zip file of multiple file, after this save in folder, lastly download generated zip file by using Codeigniter framework. Codeigniter is one of the best PHP framework, which will boost you web development process and there many web developer has been used this framework for their web application development, because it is widely popular PHP framework. It has provide many built in helper and library which will help you to develop your web application very fast. This framework will helps to do many task very easily. So, here also we have one task like how to make zip file in Codeigniter framework.
Codeigniter Zip Encoding Class
If you have use Codeigniter framework, then it is very easy for you to create Zip file. Because Codeigniter has it's own built in Zip library. This class will used for generate Zip archives, and that Zip archives we can download in our local computer also. Now how to initialze this zip class. For this we have to write following code.
$this->load->library('zip');
By using above code will can initialize Codeigniter Zip class, after this we can use different method of this class by calling $this->zip object. Now here we want to generate zip file of selected images from list of images. For this here we will use following method of this zip library.
read_file() - This method will read the content of a file and it will add into Zip.
add_data() - This method will add data to Zip file. In this define path of the file and data of this file.
archive() - This method will write file to the specified directory, in this method we have to define file name with complete path.
download() - This method will download created Zip file in our local computer, in this method we have to define zip file name.
Above all method of Codeigniter Zip class will help us to generate Zip file, save in folder and download in our local computer. Below you can find complete source code of this tutorial.
If you have use jQuery Dialogify plugin for create popup modal dialog box with your PHP web application. Then in that application you have to perform any update data operation. So, this post will help you to how to integrate jQuery Dialogify plugin for update or edit data operation using PHP with Ajax. In previous part, we have seen how can we use jquery Dialogify plugin for Insert or Add data into Mysql data using PHP with Ajax. For this things here we have use jQuery based Dialogify library for popup modal on web page. Because it is very easy to use, and it is light weight and simple plugin. For make modal dialog box, by using this plugin we have to not write any HTML code. It will allowed users to write callback function call on any event.
Here we want to update or edit data of existing mysql data using PHP script with Ajax. For load existing data into modal dialog box. If you have use this plugin, then you have to make seperate HTML form file for load data into form. Here for update or edit data, first we want to fetch existing data from database using Ajax request send to PHP. Once data has been received in json format, after this first we want to store that in Browser local storage using localStorage object, which store data with no any expiration date.
Once all data has been store in browser local storage using localStorage.setItem() method. By using this method we can store data in browser local storage. After storing all data now we have to go to seperate file in which we have create HTML form fields, and in that file, we have to fetch data from browser local storage using localStorage.getItem() method. By using this method we can fetch data from browser local storage and store into local variable. After fetching all data, after this we have to assign that data to html form fields using jquery code. Lastly we have to use new Dialogify() method, and make popup dialog box using seperate file form fields with fill data. So, when we have click on update button, then modal dialog will popup with fill form data. Lastly, we have to trigger ajax reqest when use click on Edit button, which send ajax request to PHP script for update of data. This whole process code will you can find below.
<?php
//delete_data.php
include('database_connection.php');
if(isset($_POST["id"]))
{
$query = "
DELETE FROM tbl_employee
WHERE id = '".$_POST["id"]."'
";
$statement = $connect->prepare($query);
$statement->execute();
}
?>
Here we have provide complete source code with View data in modal dialog box, insert data, update data and delete data using jQuery Dialogify plugin using PHP with Ajax.
This is second post on jQuery Dialogify plugin with PHP. And in this post we will discuss how to use jQuery Dialogify Plugin for insert or add data into Mysql table using PHP with Ajax. In previous post we have seen how to load dynamic mysql data into pop up dialog box using jQuery Dialogify plugin with PHP Ajax. Inserting of Data is a basic function of any application. If you want to make single page CRUD application then you have to perform all CRUD option on same page without going to another page. For do all operation on Single page you have to make form for insert data in pop up modal dialog box.
For make pop up dialog box, In one of our tutorial in which we have use Bootstrap modal for use Insert data with PHP Ajax. By using Bootstrap modal we can make pop up modal dialog box. But now we want to use jQuery Dialogify plugin for make pop up dialog box, and in this modal dialog box we want to make insert data form. Here we will not only insert data into mysql table but also we will also upload image also with data insertion. So, here we have use jquery Dialogify plugin for insert data with upload file also using PHP with Ajax. So, with jQuery Dialogify plugin we cannot make form under pop up dialog box directly.
How to make Form in jQuery Dialogify Plugin
If we have use jQuery Dialogify Plugin for insert data then for insert data we have to make form for submit data to server. But in this plugin we cannot directly make form in pop up dialog box, but for make form, we have to define form fields in some other php file. In that file we have to just define form field, this plugin will automatically add form tag. Now the question arise how other php file form will be append into jQuery Dialogify pop up modal. For this we have to write new Dialogify() method, and under this method we have to define php file in which we have define form field. This method will pop up modal dialog box with form fields, which has been define php file. Below you can find complete source code of how to use jQuery Dialogify plugin for insert or add data into mysql using PHP with Ajax.
This is combine source code of View Dyanmic Data using Dialogify plugin post and Insert Data using Dialogify with PHP Ajax. If you have any query regarding this post, you can send your query via comment.
If you are looking for web tutorial on Loading of Dynamic Ajax content in Modal dialog box using PHP script, then tutorial will help you to learn how to load dynamic content in modal dialog box with PHP script. Because in this post we have do something like this. Here we have load mysql dynamic data in modal dialog box by using jQuery Dialogify plugin with Ajax and PHP. Jquery Dialogify plugin is used for make modern stylish modal dialog box, and this plugin we can use different purpose like pop up of message on web page, it can be used in place javascript confirm dialog and it can also be used as in place of javascript prompt dialog box also. By using this jQuery Dialogify modal dialog box we can also perform form submission operation also. But here we have use this plugin for load dyamic data into this modal dialog box.
This plugin we can also use in place of Bootstrap modal box, because in bootstrap modal dialog box, we have to write html code for it. But with jQuery Dialogify plugin we have not write any html code for make modal dialog box. But we have to write only some javascript code only. We have already publish tutorial on how to load dynamic data in Bootstrap modal using Ajax PHP. But this plugin also we can use for make different type of dialog box as per our requirement.
For initialize this plugin we have to just write new Dialogify() method, this method will initialize this plugin, here we have use this plugin with ajax, so in this this new Dialogify() method we have to add php script file, so when this plugin has been initialize then it will send request to php script for fetch data from mysql table. In second argument of new Dialogify() method we have to define different option like which data we want send with Ajax request, button property of modal dialog box etc. After define this things, now we want to set modal header title, for this we can use title() method, this method is used for set header title of modal dialog box. And lastly we have to write .showModal() method, this method will pop up Dialogify modal dialog box on web page with dynamic data. Below you can find complete source code of Loading of Dynamic content in Modal dialog box using jQuery Dialogify plugin with Ajax jquery.
Above source code is a complete source with load data into jQuery Datatables plugin and view dynamic mysql data into jQuery Dialogigy plugin modal dialog box using Ajax PHP.
If you have build any content management system or any other system in which you have use CKEDITOR HTML editor. So, Now you want to upload Image from CKEDITOR using PHP script. For this here we have make this post, in which we have step by step describe how to make custom image upload in CKEDITOR from your PHP application. We all know CKEDITOR is a widely used HTML editor in any web based application, and it is very easy to use, and it is very easy to integrate in our application.
Suppose you have used CKEDITOR in your web application, then by default for add image into your content, you have to just add upload image path into image dialog box and you can adjust property of image. But you cannot direct upload image from your local computer into text editor. For upload image or file in CKEDITOR, there are two way you can upload image in CKEDITOR, first you have to use any plugin for upload image in CKEDITOR or you have to make custom image upload in CKEDITOR.
Here we have discuss, how to make custom image upload in CKEDITOR using PHP script. For make custom image upload in CKEDITOR, you have to follow following steps.
1 - Integrate CKEDITOR
2 - Create HTML code file for integrate CKEDITOR
3 - Make PHP script for upload Image
If you want to use CKEDITOR into your PHP web application, then first you have to download CKEDITOR from it's official site or even you can directly use cdn for CKEDITOR for it's official site also.
Create HTML code file for integrate CKEDITOR
Suppose you have done download CKEDITOR or use cdn of CKEDITOR in your application, For this here we have make index.php file. In this file we have make simple html code of textarea field. Below you can check how to integrate CKEDITOR in textarea html field and after integrate CKEDITOR it will convert into textarea field. In this HTML code we have use cdn of CKEDITOR for integrate into our application.
In this code textarea field class=ckeditor is used as selector for integrate CKEDITOR on this textarea field. For enable upload tab, you can see in javascript code, in which we have use filebrowserUploadUrl option. This option will enable upload tab in CKEDITOR image dialog box. In this option we can define PHP script file name, this PHP script will upload selected image into folder. That means this option will send request this file for upload image. This complete source code you can find below.
<!DOCTYPE html>
<html>
<head>
<title>How to Upload Image using ckeditor in PHP</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>
<script src="http://cdn.ckeditor.com/4.6.2/standard-all/ckeditor.js"></script>
</head>
<body>
<div class="container">
<br />
<h3 align="center">How to Upload Image using ckeditor in PHP</h3>
<br />
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">How to Upload Image using ckeditor in PHP</h3>
</div>
<div class="panel-body">
<textarea name="content" id="content" class="form-control ckeditor"></textarea>
</div>
</div>
</div>
</body>
</html>
<script>
CKEDITOR.replace( 'content', {
height: 300,
filebrowserUploadUrl: "upload.php"
});
</script>
3 - Make PHP script for upload Image
Once you have done integrate CKEDITOR into HTML code, and enable upload tab in image dialog box. Now you have to make PHP script for upload selected image from local computer to upload folder and send uploaded image request back to CKEDITOR image dialog box. For this source code you can find below.
This is complete step by step process for how to integrate CKEDITOR in PHP application, how to enable upload tab in CKEDITOR image dialog box and how to upload image in CKEDITOR using PHP script.
