This one more Webslesson post on How to validate form data using jQuery plugin. Now in this post we have use jqBoostrapValidation plugin for validate form data and make spam free contact form with Ajax and PHP. In one of previous post, we have use parsleyjs for form data validation and submit form data using Ajax. Here also we will show you how to validate form data by using jqBootstraoValidation plugin and submit form data using Ajax with PHP.
jqBootstrapValidation is a jQuery plugin for validate bootstrap form data. It mainly display validation error in help-block of Bootstrap library class. It is a simple form validation plugin, which mainly used with Bootstrap library. If you have use Bootstrap library for your front end use, then it will help you in form validation. Because it has used Bootstrap library element as users type. Validation of Form data is a headache of every programmer, but if you have used bootstrap library, then this plugin will helpful to validate form data.
This plugin has used HTML5 validator attributes on html field, and it has used data attributes for display error. If you want to set any input, which data has required for submit form, then at that time you can simply used requred="required" attribute, then this plugin will directly scan this HTML5 attributes for validate that input field. Now question aris how can we display error of that validation, then in this plugin used data-validation-required-message attributes has been used for display required validation error.
After this suppose you want to validate email fields data, for this you have to just used input="email" this plugin will automatically generates error if email fields data in not in proper email format.
Same way, we want to validate mobile number in form field, then at that time we can use pattern attributes like pattern="^[0-9]{10}$" this pattern will validate mobile number which must be in number format with the length 10 digit if data is not in this format then it will display error. For display pattern validation error, this plugin has use data-validation-pattern-message this data attribute for display pattern mismatch validation error. If you want to get details documentation of this plugin, you can get here.
If you are using Laravel Framework for your web development, and if you are beginner in Laravel. Then this post will help you to learn something new in Laravel. Because in this post you can find how to import Excel spreadsheet data and insert into mysql database in Laravel. Here for importing Excel file data here we will use Laravel Maatwebsite package. By using this package we can easily import data from Excel sheet and insert into table in Laravel application.
In some of the businees houses in which there are many large number of data has been stored in Excel, and after storing that data, they want some application which helps them to store in web application database, that means import into web application database. Then at that time if your web application has been made in PHP Laravel framewor then this post will help you to make importing excel file data feature in Laravel application by using Maatwebsite package.
In this post we will see or learn how can we import any type of Excel speadsheet in .xls, .xlsx or CSV data imported into Mysql database in Laravel. For communicate excel file data in Laravel, here have use Maatwebsite Laravel Excel package, this package will help to communicate excel file data in Laravel application. Below you can find complete step by step process of how to use Laravel maatwebsite package for import Excel sheet data into database in Laravel.
First, we have to create table in Mysql Database, so run following SQL script, it will make tbl_customer table in your database.
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `tbl_customer`
--
CREATE TABLE `tbl_customer` (
`CustomerID` int(11) NOT NULL,
`CustomerName` varchar(250) NOT NULL,
`Gender` varchar(30) NOT NULL,
`Address` text NOT NULL,
`City` varchar(250) NOT NULL,
`PostalCode` varchar(30) NOT NULL,
`Country` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Indexes for table `tbl_customer`
--
ALTER TABLE `tbl_customer`
ADD PRIMARY KEY (`CustomerID`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tbl_customer`
--
ALTER TABLE `tbl_customer`
MODIFY `CustomerID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=146;
Step 2 - Mysql Database connection in Laravel
After this you have to make database connection. For this first you have to open database.php file from config. And in this file you have to define your database configuration.
If you want to import excel file data in Laravel, you have to first download Maatwebsite package, this package will communicate with Excel spreadsheet data. First for download package, you have to go to command prompt and write following command.
composer require maatwebsite/excel
This command will download this package in your Laravel working folder. After this we have to register this package in our Laravel application. For this we have to go to config/app.php file. And in this file you have to define providers and aliases.
This way we can register Maatwebsite package in Laravel application, now we can use this package for importing excel file data.
Step 4 - Controllers (ImportExcelController.php)
Now we have to make controller for handle http request for import data. In this controller we have use two use statement. First use DB is used for do mysql database operation, and second use Excel is for Maatwebsite package for import excel sheet data. In this controller, we have make two method.
index() - This is root method of this class, in this method it will fetch data from customer table and that data will be load in import_blade.php file in table format.
import() - This method has request for import excel file data. In this method first it has validate excel file format. If selected file other than excel sheet then it will return validation error. But suppose selected file is excel then it will proceed for import data. For import data here it has called Excel package class which has get data from excel file and convert into PHP array and then after insert into customer table. After successfully import of data it will return success message.
This file has been load by index() method of ImportExcelController, On this file we have make form for select excel file from local computer for import data. Below form it will display tbl_customer table data. And above form we have define for display validation error message and success message.
Lastly, we have to run Laravel application, for this we have to go to command prompt, and write following command.
php artisan serve
This command will Laravel application, it will return base url of Laravel application. Now for this application, we have to write following url in browser.
http://127.0.0.1:8000/import_excel
Above is the complete process of How to make import excel file data feature in Laravel using Maatwebsite Package.
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.
