Gautam Singh Blog For Web Tutorials: 2017

Sunday, June 18, 2017

Webcam Image Capture

This is example for capturing image and save it to any location using webcam.js.

<!doctype html>

<html lang="en">
<head>
<title>camera image</title>
<style type="text/css">
body { font-family: Helvetica, sans-serif; }
h2, h3 { margin-top:0; }
form { margin-top: 15px; }
form > input { margin-right: 15px; }
#results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
</style>
<script type="text/javascript" src="webcam.js"></script>
</head>
<body>
<div id="results">Captured Image</div>
<div id="my_camera"></div>
<input type=button value="Take Snapshot" onClick="take_snapshot()">
</body>
</html>
<script language="JavaScript">
Webcam.set({
width: 200,
height: 250,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
function take_snapshot() {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page

document.getElementById('results').innerHTML =
'<h2>Processing:</h2>';

Webcam.upload( data_uri, 'saveimage.php', function(code, text) {
document.getElementById('results').innerHTML =
'<h2>Here is your image:</h2>' +
'<img src="'+text+'"/>';
} );
} );
}
</script>

saveimage.php
<?php
$filename = time() . '.jpg';
$filepath = 'saved_images/';

move_uploaded_file($_FILES['webcam']['tmp_name'], $filepath.$filename);

echo $filepath.$filename;

?>

ref:http://theonlytutorials.com/capture-web-camera-image-php-jquery/

Sunday, April 2, 2017

vendor rate comparison example with color code

rate comparison example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Color Code example for vendor rate comparison</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>

<table width="500px">
<thead>
<tr>
<th>Sn.</th>
<th>Vendor</th>
<th>Item</th>
<th>Brand</th>
<th>Rate</th>
<th>itemCode</th>
</tr>
</thead>
<tbody>
<tr id="ven1itm1brand11">
<td>1</td>
<td>ven1</td>
<td>itm1</td>
<td>brand11</td>
<td data-colorId="ven1itm1brand11" data-ven="ven1" data-itm="itm1" data-brand="brand11" data-rate="50" class="rate">50</td>
<td>itm1brand11</td>
</tr>
<tr id="ven1itm1brand12">
<td>2</td>
<td>ven1</td>
<td>itm1</td>
<td>brand12</td>
<td data-colorId="ven1itm1brand12" data-ven="ven1" data-itm="itm1" data-brand="brand12" data-rate="60" class="rate">60</td>
<td>itm1brand12</td>
</tr>
<tr id="ven1itm1brand13">
<td>3</td>
<td>ven1</td>
<td>itm1</td>
<td>brand13</td>
<td data-colorId="ven1itm1brand13" data-ven="ven1" data-itm="itm1" data-brand="brand13" data-rate="70" class="rate">70</td>
<td>itm1brand13</td>
</tr>
<tr id="ven1itm2brand21">
<td>4</td>
<td>ven1</td>
<td>itm2</td>
<td>brand21</td>
<td data-colorId="ven1itm2brand21" data-ven="ven1" data-itm="itm2" data-brand="brand21" data-rate="50" class="rate">50</td>
<td>itm2brand21</td>
</tr>
<tr id="ven1itm2brand22">
<td>5</td>
<td>ven1</td>
<td>itm2</td>
<td>brand22</td>
<td data-colorId="ven1itm2brand22" data-ven="ven1" data-itm="itm2" data-brand="brand22" data-rate="60" class="rate">60</td>
<td>itm2brand22</td>
</tr>
<tr id="ven1itm2brand23">
<td>6</td>
<td>ven1</td>
<td>itm2</td>
<td>brand23</td>
<td data-colorId="ven1itm2brand23" data-ven="ven1" data-itm="itm2" data-brand="brand23" data-rate="70" class="rate">70</td>
<td>itm2brand23</td>
</tr>
<tr id="ven1itm3brand31">
<td>7</td>
<td>ven1</td>
<td>itm3</td>
<td>brand31</td>
<td data-colorId="ven1itm3brand31" data-ven="ven1" data-itm="itm3" data-brand="brand31" data-rate="50" class="rate">50</td>
<td>itm3brand31</td>
</tr>
<tr id="ven1itm3brand32">
<td>8</td>
<td>ven1</td>
<td>itm3</td>
<td>brand32</td>
<td data-colorId="ven1itm3brand32" data-ven="ven1" data-itm="itm3" data-brand="brand32" data-rate="60" class="rate">60</td>
<td>itm3brand32</td>
</tr>
<tr id="ven1itm3brand33">
<td>9</td>
<td>ven1</td>
<td>itm3</td>
<td>brand33</td>
<td data-colorId="ven1itm3brand33" data-ven="ven1" data-itm="itm3" data-brand="brand33" data-rate="70" class="rate">70</td>
<td>itm3brand33</td>
</tr>
<tr id="ven2itm1brand11">
<td>10</td>
<td>ven2</td>
<td>itm1</td>
<td>brand11</td>
<td data-colorId="ven2itm1brand11" data-ven="ven2" data-itm="itm1" data-brand="brand11" data-rate="55" class="rate">55</td>
<td>itm1brand11</td>
</tr>
<tr id="ven2itm1brand12">
<td>11</td>
<td>ven2</td>
<td>itm1</td>
<td>brand12</td>
<td data-colorId="ven2itm1brand12" data-ven="ven2" data-itm="itm1" data-brand="brand12" data-rate="70" class="rate">70</td>
<td>itm1brand12</td>
</tr>
<tr id="ven2itm1brand13">
<td>12</td>
<td>ven2</td>
<td>itm1</td>
<td>brand13</td>
<td data-colorId="ven2itm1brand13" data-ven="ven2" data-itm="itm1" data-brand="brand13" data-rate="50" class="rate">50</td>
<td>itm1brand13</td>
</tr>
<tr id="ven2itm2brand21">
<td>13</td>
<td>ven2</td>
<td>itm2</td>
<td>brand21</td>
<td data-colorId="ven2itm2brand21" data-ven="ven2" data-itm="itm2" data-brand="brand21" data-rate="55" class="rate">55</td>
<td>itm2brand21</td>
</tr>
<tr id="ven2itm2brand22">
<td>14</td>
<td>ven2</td>
<td>itm2</td>
<td>brand22</td>
<td data-colorId="ven2itm2brand22" data-ven="ven2" data-itm="itm2" data-brand="brand22" data-rate="60" class="rate">60</td>
<td>itm2brand22</td>
</tr>
<tr id="ven2itm2brand23">
<td>15</td>
<td>ven2</td>
<td>itm2</td>
<td>brand23</td>
<td data-colorId="ven2itm2brand23" data-ven="ven2" data-itm="itm2" data-brand="brand23" data-rate="45" class="rate">45</td>
<td>itm2brand23</td>
</tr>
<tr id="ven2itm3brand31">
<td>16</td>
<td>ven2</td>
<td>itm3</td>
<td>brand31</td>
<td data-colorId="ven2itm3brand31" data-ven="ven2" data-itm="itm3" data-brand="brand31" data-rate="40" class="rate">40</td>
<td>itm3brand31</td>
</tr>
<tr id="ven2itm3brand32">
<td>17</td>
<td>ven2</td>
<td>itm3</td>
<td>brand32</td>
<td data-colorId="ven2itm3brand32" data-ven="ven2" data-itm="itm3" data-brand="brand32" data-rate="50" class="rate">50</td>
<td>itm3brand32</td>
</tr>
<tr id="ven2itm3brand33">
<td>18</td>
<td>ven2</td>
<td>itm3</td>
<td>brand33</td>
<td data-colorId="ven2itm3brand33" data-ven="ven2" data-itm="itm3" data-brand="brand33" data-rate="65" class="rate">65</td>
<td>itm3brand33</td>
</tr>
<tr id="ven3itm1brand11">
<td>19</td>
<td>ven3</td>
<td>itm1</td>
<td>brand11</td>
<td data-colorId="ven3itm1brand11" data-ven="ven3" data-itm="itm1" data-brand="brand11" data-rate="55" class="rate">55</td>
<td>itm1brand11</td>
</tr>
<tr id="ven3itm1brand12">
<td>20</td>
<td>ven3</td>
<td>itm1</td>
<td>brand12</td>
<td data-colorId="ven3itm1brand12" data-ven="ven3" data-itm="itm1" data-brand="brand12" data-rate="60" class="rate">60</td>
<td>itm1brand12</td>
</tr>
<tr id="ven3itm1brand13">
<td>21</td>
<td>ven3</td>
<td>itm1</td>
<td>brand13</td>
<td data-colorId="ven3itm1brand13" data-ven="ven3" data-itm="itm1" data-brand="brand13" data-rate="60" class="rate">60</td>
<td>itm1brand13</td>
</tr>
<tr id="ven3itm2brand21">
<td>22</td>
<td>ven3</td>
<td>itm2</td>
<td>brand21</td>
<td data-colorId="ven3itm2brand21" data-ven="ven3" data-itm="itm2" data-brand="brand21" data-rate="55" class="rate">55</td>
<td>itm2brand21</td>
</tr>
<tr id="ven3itm2brand22">
<td>23</td>
<td>ven3</td>
<td>itm2</td>
<td>brand22</td>
<td data-colorId="ven3itm2brand22" data-ven="ven3" data-itm="itm2" data-brand="brand22" data-rate="60" class="rate">60</td>
<td>itm2brand22</td>
</tr>
<tr id="ven3itm2brand23">
<td>24</td>
<td>ven3</td>
<td>itm2</td>
<td>brand23</td>
<td data-colorId="ven3itm2brand23" data-ven="ven3" data-itm="itm2" data-brand="brand23" data-rate="70" class="rate">70</td>
<td>itm2brand23</td>
</tr>
<tr id="ven3itm3brand31">
<td>25</td>
<td>ven3</td>
<td>itm3</td>
<td>brand31</td>
<td data-colorId="ven3itm3brand31" data-ven="ven3" data-itm="itm3" data-brand="brand31" data-rate="45" class="rate">45</td>
<td>itm3brand31</td>
</tr>
<tr id="ven3itm3brand32">
<td>26</td>
<td>ven3</td>
<td>itm3</td>
<td>brand32</td>
<td data-colorId="ven3itm3brand32" data-ven="ven3" data-itm="itm3" data-brand="brand32" data-rate="50" class="rate">50</td>
<td>itm3brand32</td>
</tr>
<tr id="ven3itm3brand33">
<td>27</td>
<td>ven3</td>
<td>itm3</td>
<td>brand33</td>
<td data-colorId="ven3itm3brand33" data-ven="ven3" data-itm="itm3" data-brand="brand33" data-rate="65" class="rate">65</td>
<td>itm3brand33</td>
</tr>
</tbody>
</table>
</body>
</html>
<script type="text/javascript">
$('document').ready(function(){
var coloIds = [];
var items = [];
$('.rate').each(function(){
var t=$(this);
var colorId=t.attr('data-colorId');
var vendor=t.attr('data-ven');
var itm=t.attr('data-itm');
var brand=t.attr('data-brand');
var rate=t.attr('data-rate');
var itmCode=itm+brand;
var item=[];
item['colorId']=colorId;
item['vendor']=vendor;
item['itm']=itm;
item['brand']=brand;
item['rate']=rate;
item['itmCode']=itmCode;
if(coloIds.length>0){
var check=1;
for (var i = coloIds.length - 1; i >= 0; i--) {
if(coloIds[i]['itmCode']==itmCode){
if(itmCode=='itm1brand13'){
console.log(item);
}
var check=0;
if(rate<coloIds[i]['rate']){
item['color']='green';
coloIds[i]='';
coloIds[i]=item;
coloIds.push(item);
item='';
}
if(coloIds[i]['rate']==rate && coloIds[i]['colorId']!=colorId){
coloIds[i]['color']='yellow';
item['color']='yellow';
coloIds.push(item);
item='';
}
}
}
if(check==1){
item['color']='green';
coloIds.push(item);
item='';
}
} else {
item['color']='green';
coloIds.push(item);
item='';
}
});
//console.log(items);
for (var i = coloIds.length - 1; i >= 0; i--) {
$('#'+coloIds[i]['colorId']).css("background-color", coloIds[i]['color']);
}

});
</script>

Sunday, March 5, 2017

htaccess Basics

ErrorDocument 404 http://fccollc.com/only-detail/7/index.php
ErrorDocument 500 http://fccollc.com/only-detail/7/index.php
IndexIgnore * # prevent directory file liting in all folders

RewriteEngine on

RewriteBase /

#Options +FollowSymlinks
#RewriteEngine off

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
#######Remove Php Extension#############
RewriteCond %{REQUEST_FILENAME}\.php -f

RewriteRule ^Product/(.*)/(.*) product-detail.php?product_name=$1&id=$2
#RewriteRule Merchantdetail/(.*)/(.*)/(.*) merchantdetail.php?merchant_name=$1&area_name=$2&merchant_type=$3

RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/)$
RewriteRule (.*)$ http://fccollc.com/fokkat/2/admin/$1/ [R=301,L]

RewriteRule ^(.*)$ index.php?/$1 [L]

RewriteCond %{HTTP_HOST} ^isess.in [NC]
RewriteRule ^(.*)$ http://www.isess.in/$1 [L,R=301]

Friday, March 3, 2017

Reading XLSX, ODS and text/CSV file

We can easily read these files using PHP spreadsheet reader. At first download PHP spreadsheet reader from spreadsheet-reader. you can also get sample code there.
example for reading .xls file-

<?php

header('Content-Type: text/plain');
$Filepath = 'test.xlsx';
require('php-excel-reader/excel_reader2.php');
require('SpreadsheetReader.php');
try
{
$Spreadsheet = new SpreadsheetReader($Filepath);
/* for reading only first sheet */
/*
foreach ($Spreadsheet as $Row)
{
print_r($Row);
}*/
/* for reading all first sheet or reading specific sheet */
$Sheets = $Spreadsheet -> Sheets();
foreach ($Sheets as $Index => $Name)
{
echo '*** Sheet '.$Name.' ***'.PHP_EOL;
$Spreadsheet -> ChangeSheet($Index);
foreach ($Spreadsheet as $Key => $Row)
{
echo $Key.': ';
if ($Row)
{
print_r($Row);
}
else
{
var_dump($Row);
}
}
echo '*** End of sheet '.$Name.' ***'.PHP_EOL;
}

}
catch (Exception $E)
{
echo $E -> getMessage();
}

?>

Thursday, March 2, 2017

Triger in sql

In simplicity Trigger's are used to perform some database operation if any defined event occurs on a specific table. Trigger call on Insert, Update and delete operation on before/after these event completed. To grab data we have to keyword new and old.
INSERT: new
UPDATE: new/old
DELETE: old

Syntax for creating trigger:
CREATE TRIGGER triger_name
BEFORE | AFTER event ON table_name
BEGIN
...
END;

example:

DELIMITER $$
CREATE TRIGGER updatedata
AFTER UPDATE ON employees
FOR EACH ROW
BEGIN
UPADTE history
SET old_sal=old.sal where emp_id=old.emp_id;
END$$
DELIMITER ;

DELIMITER $$
CREATE TRIGGER name_add
BEFORE UPDATE ON employees
FOR EACH ROW
BEGIN
SET new.name=concat(new.salut,' ',new.fname,' ',new.lname);
END$$
DELIMITER ;

mysql> delimiter //
mysql> CREATE TRIGGER upd_check BEFORE UPDATE ON account
-> FOR EACH ROW
-> BEGIN
-> IF NEW.amount < 0 THEN
-> SET NEW.amount = 0;
-> ELSEIF NEW.amount > 100 THEN
-> SET NEW.amount = 100;
-> END IF;
-> END;//
mysql> delimiter ;

sql to see all triggers : SHOW TRIGGERS;
sql to drop trigger: DROP TRIGGER trigger_name;

Sunday, February 26, 2017

javascript alert like div example

By using bootbox js library we can create a dialogue box like javascript alert. i have tried different types and then commented it. you can just uncomment it to see its effect. For more description and uses visit its page Bootbox Page Link

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js" ></script>
<script type="text/javascript">
$('document').ready(function(){
$('#alert').click(function(){
//bootbox.alert("Your message here…");
/*bootbox.alert("This is an alert with a callback!", function(){
console.log('This was logged in the callback!');
});*/
bootbox.alert({
message: "This is an alert with a callback!",
size: 'large', // small,large
backdrop: true,
callback: function () {
console.log('This was logged in the callback!');
}
});
/*bootbox.confirm("This is the default confirm!", function(result){
console.log('This was logged in the callback: ' + result);
});*/
/*bootbox.confirm({
message: "This is an alert with a callback!",
size: 'large', // small,large
backdrop: true,
callback: function (result) {
console.log('This was logged in the callback! '+result);
}
});*/
/*bootbox.confirm({
message: "This is a confirm with custom button text and color! Do you like it?",
buttons: {
confirm: {
label: 'Yes',
className: 'btn-success'
},
cancel: {
label: 'No',
className: 'btn-danger'
}
},
callback: function (result) {
console.log('This was logged in the callback: ' + result);
}
});*/
/*var dialog = bootbox.confirm({
title: "Destroy planet?",
message: "Do you want to activate the Deathstar now? This cannot be undone.",
buttons: {
cancel: {
label: '<i class="fa fa-times"></i> Cancel'
},
confirm: {
label: '<i class="fa fa-check"></i> Confirm'
}
},
callback: function (result) {
console.log('This was logged in the callback: ' + result);
}
});
dialog.init(function(){
setTimeout(function(){
dialog.find('.bootbox-body').html('I was loaded after the dialog was shown!');
}, 3000);
});*/

});
});

</script>
</head>
<body>
<button id="alert">For Alert</button>

</body>
</html>

Tuesday, January 31, 2017

google recaptcha in cakephp

For google recaptcha at first register your site at this link: https://www.google.com/recaptcha/admin

Enter your site details. if you have to use on local machine then enter domain name and lable as 'localhost'.
In controller

function recaptcha(){
if(isset($_POST['submit'])){
if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){
//your site secret key
$secret = '6LfR2xMUAAAAAJ9EvvLrA5mQUqZ77owaFQ3RVvou';
//get verify response data
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']);
$responseData = json_decode($verifyResponse);

$name = !empty($_POST['name'])?$_POST['name']:'';
$email = !empty($_POST['email'])?$_POST['email']:'';
$message = !empty($_POST['message'])?$_POST['message']:'';
if($responseData->success){
//contact form submission code
$to = 'gautam8953@gmail.com';
$subject = 'New contact form have been submitted';
$htmlContent = "
<h1>Contact request details</h1>
<p><b>Name: </b>".$name."</p>
<p><b>Email: </b>".$email."</p>
<p><b>Message: </b>".$message."</p>
";
// Always set content-type when sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
// More headers
$headers .= 'From:'.$name.' <'.$email.'>' . "\r\n";
//send email

@mail($to,$subject,$htmlContent,$headers);

$succMsg = 'Your contact request have submitted successfully.';
$name = '';
$email = '';
$message = '';
$errMsg = '';
}else{
$errMsg = 'Robot verification failed, please try again.';
$succMsg = '';
$this->set('name',$name);
$this->set('email',$email);
$this->set('message',$message);
}
}else{
$errMsg = 'Please click on the reCAPTCHA box.';
$succMsg = '';
$this->set('name',$name);
$this->set('email',$email);
$this->set('message',$message);
}
}else{
$errMsg = '';
$succMsg = '';
$name = '';
$email = '';
$message = '';
}
$this->set('errMsg',$errMsg);
$this->set('succMsg',$succMsg);
}

in view recaptcha.ctp
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<div class="registration">
<h2>Contact Form</h2>
<?php if(!empty($errMsg)): ?><div class="errMsg"><?php echo $errMsg; ?></div><?php endif; ?>
<?php if(!empty($succMsg)): ?><div class="succMsg"><?php echo $succMsg; ?></div><?php endif; ?>
<div class="form-info">
<form action="" method="POST">
<input type="text" class="text" value="<?php echo !empty($name)?$name:''; ?>" placeholder="Your full name" name="name" >
<input type="text" class="text" value="<?php echo !empty($email)?$email:''; ?>" placeholder="Email adress" name="email" >
<textarea type="text" placeholder="Message..." required="" name="message"><?php echo !empty($message)?$message:''; ?></textarea>
<div class="g-recaptcha" data-sitekey="6LfR2xMUAAAAABBy2TBrBKur0_L23TizUGR-M20s"></div>
<input type="submit" name="submit" value="SUBMIT">
</form>
</div>
<div class="clear"> </div>
</div>