Tutorial Stars: jquery-এর জন্য সন্ধান ফলাফল

Home Posts filed under jquery-এর জন্য সন্ধান ফলাফল

jquery ক্যোয়ারীর জন্য প্রসঙ্গ অনুসারে বাছাই করা পোস্ট দেখানো হচ্ছে৷ তারিখ অনুসারে বাছাই করুন সব পোস্ট দেখান

Data Table with Empty Cell

Array:

<?php

$a = ['IUBAT'];

//echo $a[0];

?>

CSS Files:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">

JavaScript Files:

"></script>

$(document).ready(function() {

$('#example').DataTable();

} );

</script>

Full Code:

<?php

$a = ['IUBAT'];

//echo $a[0];

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<thead>

<tr>

<th>Position</th>

<th>University 1</th>

<th>University 2</th>

<th>University 3</th>

</tr>

</thead>

<tbody>

<tr>

<td>Programmer</td>

<?php

if (count($a) == 3) {

foreach ($a as $value) {

echo "<td>";

echo $value;

echo "</td>";

}

}elseif(count($a) == 2){

foreach ($a as $value) {

echo "<td>";

echo $value;

echo "</td>";

}

echo "<td>"."</td>";

}elseif(count($a) == 1){

foreach ($a as $value) {

echo "<td>";

echo $value;

echo "</td>";

}

echo "<td>"."</td>";

}

</tr>

</tbody>

</table>

</body>

</html>

"></script>

$(document).ready(function() {

$('#example').DataTable();

} );

</script>

Result:

Invoice System Calculation Using Jquery in Laravel

What is Invoice?
Invoice is a list of products that sent or services provided, with a statement of the sum due for these. In other word, It is also called a bill.

An invoice is related to a sale with indicating the products with quantities, prices of products. In one word, an invoice is a business document.

Why need Invoice?
Generally, Payment terms are included on the invoice. Which may indicate the buyer has a maximum number of days in which to pay and is sometimes offered a discount if paid before the due date.

The buyer already paid for the products or services listed on the invoice. For avoiding confusion from buyer to seller, some sellers clearly state in large and/or capital letters on an invoice whether it has already been paid.

In one word,

An invoice for a seller, an invoice is a sales invoice.
An invoice for a buyer, an invoice is a purchase invoice.

But the term invoice indicates money is owed/owing.

How am i going to create Invoice Application?
Here, i'm going to discuss how to create Invoice or Billing Management Application by using Laravel with Jquery.

For making Simple invoice application i have used not only Laravel and JQuery but also we have use Bootstrap and database MYSQL also.

In this application, i will not create Invoice or Billing for one item but here i will make system that will create multiple dynamic item Invoice. This is simple example with source code and this example any one can use for his project or learning purpose like how to developed Invoice System by using Open Source Laravel and Jquery with Mysql and Bootstrap.

From this article, you can gain knowledge to make Simple Billing System in Laravel.

Used Technologies:

Mysql
Laravel
JQuery
Bootstrap

Our Created Invoice management system demo will be like the following Demo. In this system, we can add multiple Medicine with Quantity, Unit Price and Total Price.

If you want to add more medicine with different quantity and Unit price and total price then finally you will get the Sub Total Result in "Sub Total" field. Then you can add the vat percentage. Including product Sub total and vat percentage result will be show in the another specific field named "vat+sub total" after that you can paid the amount if any due remaining then the due will be shown in "Due" field and finally you will see the "Grand Total" result in the related field.

Application Demo :

Invoice System Calculation Using Jquery in Laravel

Project Source Code:

<thead>

<tr>

<th>Medicine Name</th>

<th>Quantity</th>

<th>Unit/Price</th>

<th>Total</th>

<th>Action</th>

</tr>

</thead>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

</tbody>

<tbody>

<tr>

<td>

</td>

</tr>

<tr>

<td> <strong>Sub Total:</strong> </td>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td> <strong>VAT+Sub Total:</strong> </td>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td> <strong>Grand Total:</strong> </td>

<td>

</td>

</tr>

</tbody>

</table>

</div>

$(document).ready(function() {

$("#total").click(function() {

/*var quantity = document.getElementById("quantity").value;*/

var quantity = $("#quantity").val();

var unitprice = $("#unitprice").val();

var total = (quantity*unitprice);

$('#total').val(total);

$('#subtotal').val(total);

});

$('#vat').change(function() {

var vInput = this.value;

var subtotal = $("#subtotal").val();

var vInput = ((vInput*subtotal)/100);

var vstotal = (parseFloat(subtotal)+parseFloat(vInput)).toFixed(1); $('#vatsubtotal').val(vstotal);

});

$('#paid').change(function() {

var pInput = this.value;

var vatsubtotal = $("#vatsubtotal").val();

if((pInput < vatsubtotal) || (pInput <= vatsubtotal)){ $('#paid').val(pInput);

var dInput = (vatsubtotal-pInput);

$('#due').val(dInput);

var total = $("#total").val();

var subtotal = $("#subtotal").val();

var gtInput = (parseFloat(total)+parseFloat(subtotal)+parseFloat(vatsubtotal)).toFixed(1); $('#grandtotal').val(gtInput);

}else{

alert('You are paying so much amount');

}

});

</script>

In the following video, I'm showing all the steps. Please follow the all steps to create Invoice System Calculation Using Jquery, Laravel, Bootstrap and MYSQL.

html jquery preloader | নভেম্বর ০৭, ২০১৯

How to Add Preloader in Website Using HTML CSS and JQuery With Code | Preloader in HTML Page

What's a preloader?
Preloaders is also known as loaders. Preloaders are what you see on the screen while the rest of the page's content is still loading. Preloaders are often simple/complex animations that are used to keep visitors entertained while server operations finish processing.

Adding preloader with some simple steps:
Step 1: Copy the following code and paste in your website.

<html>

<head>

<title>Image Loader</title>

$('document').ready(function(e) {

$(".preLoader").fadeOut(2500);

$(".content").fadeIn(4000); });

</script>

<style>

.content{

display: none;

}

.preLoader{

position: fixed;

left: 0px;

top: 0px;

width:100%;

height:100%;

z-index: 9999;

background: url(images/Preloader_3.gif) 50% 50% no-repeat rgb(249,249,249); }

</style>

</head>

<body>

<h1 class="content">Please subscribe our channel for more videos</h1>

</body>

</html>

Step 2: Add the Jquery.js file

Click the following link to get jquery.js file

https://bit.ly/39pKS75

Step 3: Add images

Click the following link to get Images file

https://bit.ly/2ut7FjT

In this video, I'm showing all the steps to add Preloader in Website Using HTML CSS and JQuery in live project.

jquery | নভেম্বর ০৭, ২০১৯

How To Get And Set Input Field Value in JQuery

How to Set value in input field?
To Set the value of the input field, We need to use JQuery val() Method.

$("button").click(function(){

$("input:text").val("Bangla Tutorials Point");

});

What is val() and it's Usage?
The val() method sets the value for the selected elements.

This val() method sets the value of the value for all matched elements.

Mostly Used:
The val() method is mostly used with HTML

Different Syntax of val() Method:
val() Method for return the value:

$(selector).val();

val() Method for Set the Value:

$(selector).val(value);

val() Method for Set the value using function:

$(selector).val(function(index,currentvalue));

Required Field:
Here, Value is required. It specifies the of the value attribute
and function(index,currentvalue) is optional. It declear a function that returns a set of value.

Full Project Source Code:

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

</head>

<body>

<br>

</body>

</html>

//Script should be like this

$(document).ready(function() {

$('#total').change(function() {

var dInput = this.value;

$('#subtotal').val(dInput);

});

</script>

In the following video, I have described with application about Set value in the input field and Get the value from input field. You can watch the video also to get better practical knowledge abount set value in the input field and Get the value from input field.

Thank you for visiting our blog-site. For more videos please visit our Cahnnel https://www.youtube.com/channel/UCW_xg9-8FU8SINc-EjDQ53g

file upload php | মার্চ ২১, ২০২০

Upload an Image Using PHP and MySQL with Stylish UI Design

Upload an Image Using PHP and MySQL with Stylish UI Design:

For uploading an image, the html form should be like this.

<form action="" method="post" enctype="multipart/form-data"></form>

Some rules to follow for the HTML form above:

Make sure that the form uses method="post"
The form also needs the following attribute: enctype="multipart/form-data". It specifies which content-type to use when submitting the form

Without the requirements above, the file upload will not be working.

Other things to notice:

The type="file" attribute of the <input> tag shows the input field as a file-select control, with a "Browse" button next to the input control

Creating an upload script:

For uploading an image the $_FILES is a global variable. This variable is an associate double dimension array and keeps all the information related to uploaded file. PHP can create another five following variable:

$_FILES['file']['tmp_name'] − Stores the name of the temporary file.
$_FILES['file']['name'] − Stores the original filename from the client.
$_FILES['file']['size'] − the size in bytes of the uploaded file.
$_FILES['file']['type'] − the MIME type of the uploaded file.
$_FILES['file']['error'] − the error code associated with this file upload.

Using $_FILES['file']['tmp_name'], Your file will temporary store on this path $_FILES['image_path']['tmp_name']. so when you move it will be remove from temp folder to your folder. If you use copy command instead of move_uploaded_file then your temp file will be stay in your server's temp folder. you can search file name in there.

Upload an Image into database using PHP and MySQL:

<html>
<head>
<title>Upload an Image into database using PHP and MySQL</title>
</head>
<body>
<form action =" " method = "POST" enctype = "multipart/form-data">
<div class = "form-group">
<label>Select an Image</label>
<input class = "form-control" name = "c_pic" type = "file" />
<input type = "submit" value = "Upload" class = "btn btn-sm btn-success pull-right">
</div>
</form>

 <?php

$c_pic = $_FILES["c_pic"]["name"];

if($_FILES["c_pic"]["name"] == Null) {

$c_pic = "";

}else{

$c_pic = date('Ymdhis');

$c_pic = $c_pic.".jpg";

@move_uploaded_file($_FILES["c_pic"]["tmp_name"], "UploadFolder/$c_pic");

}

$insert=mysql_query("INSERT INTO `customer` ( `c_image`) VALUES ('$c_pic')");
?>

Show the uploaded image from Database:

<table class= "table">
<thead>
<tr>
<th>Serial No</th>
<th>Image</th>
</tr>
</thead>

<tbody>
<?php
$si = 1;

$uid = 10;

$qry = mysql_query("SELECT * FROM `customer` WHERE `c_id`='$uid'");
while( $res = mysql_fetch_array($qry)){
//echo $res['c_image'];
echo "<tr>";
echo "<td>".$si++."</td>";
echo "<td>";
echo "<img src = 'UploadFolder/$res[c_image]' height='500px' width='500px' class='img-thumbnail img-fluid'>";
echo "</td>";
echo "</tr>";
}

?>

</tbody>

</table>

Upload an Image into database with file validation:

<?php
if(isset($_FILES['image'])){
$error = array();
$file_name = $_FILES['image']['name'];
$file_size = $_FILES['image']['size'];
$file_tmp = $_FILES['image']['tmp_name'];
$file_type = $_FILES['image']['type'];
$file_ext = strtolower(end(explode('.',$_FILES['image']['name'])));

$expension = array("jpeg","jpg","png");

if(in_array($file_ext,$expensions)=== false){
$error[]="extension not allowed, please choose a JPEG or PNG file.";
}

if($file_size > 2097152) {
$error[]='File size must be excately 2 MB';
}

if(empty($error)==true) {
move_uploaded_file($file_tmp,"images/".$file_name);
echo "Success";
}else{
print_r($error);
}
}
?>
<html>
<body>
<form method = "POST" enctype = "multipart/form-data">
<input type = "file" name = "image" />
<input type = "submit"/>
<ul>
<li>Sent file: <?php echo $_FILES['image']['name']; ?>
<li>File size: <?php echo $_FILES['image']['size']; ?>
<li>File type: <?php echo $_FILES['image']['type'] ?>
</ul>
</form>
</body>
</html>

Image Uploading Using PHP and MySQL with Image Preview:

<?php
$c_pic = $_FILES["document_image"]["name"];
if($_FILES["document_image"]["name"] == Null) {
$c_pic="";
}else{
$c_pic=date('Ymdhis');
$c_pic=$c_pic.".jpg";
@move_uploaded_file($_FILES["document_image"]["tmp_name"], "../shop_images/$c_pic");

}

$insert = $con->query("INSERT INTO `temporary_tax`(`shop_id`, `document_image`) VALUES ('13', '$c_pic') ");
?>
<html>
<head>
<title>Upload an image</title>
</head>
<body>

<div class="form-group">
<label class="text-label">Document File</label>
<br>
<img class="form-control-file" id="showImage" src="Upload/legal_documents/document.png" width="150px" height="200px">
<br>
<input type="file" class="form-control" name="document_image" onchange="readURL(this);">
</div>
</body>
</html>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function (e) {
$('#showImage').attr('src', e.target.result);
}

reader.readAsDataURL(input.files[0]);
}
}
</script>

Image Uploading with allowed file extension using PHP and MySQL:

<!DOCTYPE>
<html>
<head>
<title>Uploading an image with allowed file extension using PHP and MySQL</title>
</head>
<body>
<form method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="imageToUpload" id="imageToUpload">
<input type="submit" value="Upload Image" name="save">
</form>
</body>
</html>

<?php
if (isset($_POST["save"])) {

// create an array with allowed file extension
$allowed = array('gif', 'png', 'jpg');
$filename = $_FILES['imageToUpload']['name'];
$ext = pathinfo($filename, PATHINFO_EXTENSION);
if (!in_array($ext, $allowed)) {
echo 'This file extension is not allowed';
}else{
echo "This file extension is allowed";
}
}
?>

File upload UI Design Bootstrap:

Using the following code sample you can easily create the above image upload UI design.

<!DOCTYPE>
<html>
<head>
<title>File upload UI Design Bootstrap</title>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<label><b>Upload Image</b></label><br>
<label>
<input type='file' onchange="readURL(this);" style="display:none"/>
<img id="showImage" src="img/plus.png" style="width: 100px; height: 100px; background-color: red; border: 2px solid red; border-radius: 5px; cursor: pointer;"/>
</label><i class="fa-file-image-o" aria-hidden="true"></i>
</form>
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#showImage').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>

Drag and Drop Design for file Upload Image:

<!DOCTYPE html>
<html>
<head>
<title>Custom File Upload Drag and Drop</title>
<style>
body {
font-family: sans-serif;
background-color: #eeeeee;
}
.file-upload {
background-color: #ffffff;
width: 600px;
margin: 0 auto;
padding: 20px;
}

.file-upload-button {
width: 100%;
margin: 0;
color: #fff;
background: #1FB264;
border: none;
padding: 10px;
border-radius: 4px;
border-bottom: 4px solid #15824B;
transition: all .2s ease;
outline: none;
text-transform: uppercase;
font-weight: 700;
}

.file-upload-button:hover {
background: #1AA059;
color: #ffffff;
transition: all .2s ease;
cursor: pointer;
}

.file-upload-button:active {
border: 0;
transition: all .2s ease;
}

.file-upload-content-area {
display: none;
text-align: center;
}

.file-upload-input-field {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
cursor: pointer;
}

.image-upload-area {
margin-top: 20px;
border: 4px dashed #1FB264;
position: relative;
}

.image-dropping,
.image-upload-area:hover {
background-color: #1FB264;
border: 4px dashed #ffffff;
}

.image-title-wrap {
padding: 0 15px 15px 15px;
color: #222;
}

.drag-text {
text-align: center;
}

.drag-text h3 {
font-weight: 100;
text-transform: uppercase;
color: #15824B;
padding: 60px 0;
}

.file-upload-image {
max-height: 200px;
max-width: 200px;
margin: auto;
padding: 20px;
}

.remove-image {
width: 200px;
margin: 0;
color: #fff;
background: #cd4535;
border: none;
padding: 10px;
border-radius: 4px;
border-bottom: 4px solid #b02818;
transition: all .2s ease;
outline: none;
text-transform: uppercase;
font-weight: 700;
}

.remove-image:hover {
background: #c13b2a;
color: #ffffff;
transition: all .2s ease;
cursor: pointer;
}

.remove-image:active {
border: 0;
transition: all .2s ease;
}
</style>
</head>
<body>
<div class="file-upload">
<button class="file-upload-button" type="button" onclick="$('.file-upload-input-field').trigger( 'click' )">Upload Image</button>

<div class="image-upload-area">
<input class="file-upload-input-field" type='file' onchange="readURL(this);" accept="image/*" />
<div class="drag-text">
<h3>Drag and drop a Image or Upload Image</h3>
</div>
</div>
<div class="file-upload-content-area">
<img class="file-upload-image" src="#" alt="your image" />
<div class="image-title-wrap">
<button type="button" onclick="removeUpload()" class="remove-image">Remove <span class="image-title">Uploaded Image</span></button>
</div>
</div>
</div>
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {

var reader = new FileReader();

reader.onload = function(e) {
$('.image-upload-area').hide();

$('.file-upload-image').attr('src', e.target.result);
$('.file-upload-content-area').show();

$('.image-title').html(input.files[0].name);
};

reader.readAsDataURL(input.files[0]);

} else {
removeUpload();
}
}

function removeUpload() {
$('.file-upload-input-field').replaceWith($('.file-upload-input-field').clone());
$('.file-upload-content-area').hide();
$('.image-upload-area').show();
}
$('.image-upload-area').bind('dragover', function () {
$('.image-upload-area').addClass('image-dropping');
});
$('.image-upload-area').bind('dragleave', function () {
$('.image-upload-area').removeClass('image-dropping');
});

</script>

Tutorial Stars

Data Table with Empty Cell

Array:

<?php

$a = ['IUBAT'];

//echo $a[0];

?>

CSS Files:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">

JavaScript Files:

Full Code:

Result:

Invoice System Calculation Using Jquery in Laravel

Application Demo :

How to Add Preloader in Website Using HTML CSS and JQuery With Code | Preloader in HTML Page

How To Get And Set Input Field Value in JQuery

How to Set value in input field?
To Set the value of the input field, We need to use JQuery val() Method.

Upload an Image Using PHP and MySQL with Stylish UI Design

Upload an Image Using PHP and MySQL with Stylish UI Design:

<form action="" method="post" enctype="multipart/form-data"></form>

Some rules to follow for the HTML form above:

Creating an upload script:

Upload an Image into database using PHP and MySQL:

Show the uploaded image from Database:

Upload an Image into database with file validation:

Image Uploading Using PHP and MySQL with Image Preview:

Image Uploading with allowed file extension using PHP and MySQL:

File upload UI Design Bootstrap:

SymlexVPN Premium

RECENT POST

CATEGORY

যোগাযোগ ফর্ম

PAGES

Tutorial Stars

Data Table with Empty Cell

Array:

<?php $a = ['IUBAT']; //echo $a[0]; ?>

CSS Files:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">

JavaScript Files:

Full Code:

Result:

Invoice System Calculation Using Jquery in Laravel

Application Demo :

How to Add Preloader in Website Using HTML CSS and JQuery With Code | Preloader in HTML Page

How To Get And Set Input Field Value in JQuery

How to Set value in input field?To Set the value of the input field, We need to use JQuery val() Method.

Upload an Image Using PHP and MySQL with Stylish UI Design

Upload an Image Using PHP and MySQL with Stylish UI Design:

<form action="" method="post" enctype="multipart/form-data"></form>

Some rules to follow for the HTML form above:

Creating an upload script:

Upload an Image into database using PHP and MySQL:

Show the uploaded image from Database:

Upload an Image into database with file validation:

Image Uploading Using PHP and MySQL with Image Preview:

Image Uploading with allowed file extension using PHP and MySQL:

File upload UI Design Bootstrap:

SymlexVPN Premium

RECENT POST

CATEGORY

যোগাযোগ ফর্ম

PAGES

<?php

$a = ['IUBAT'];

//echo $a[0];

?>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">

How to Set value in input field?
To Set the value of the input field, We need to use JQuery val() Method.