Wednesday, June 15, 2016

Integrating QR/Bar code Scanner to Android Application

Greetings of the Day!!!

While we were working on a project to develop an android app, we had a requirement to integrate a QR or bar code reader with this app.  I was wondering how to do it.  Barcode or QR Code scanning is a pretty complex and non-trivial task in itself, it could be overwhelming sometimes with android programming. 
But while browsing I saw  an open source project ZXing (pronounced Zebra-crossing). That solves all the problem. We can use it's frame work to read and retrieve the barcode or qr code. It's pretty simple using Zxing. Zxing has all the components and an android app to read the data. All we have to do is to send an intent to this app and receive the scanned results that you may use in your app. 

As Zxing is an open source and Apache licensed, we can use it freely.  This article talks about how to integrate this zxing barcode scanner with our android app. 

1. In your Android application, create a directory as "zxing" as shown below and place these two files inside this directory:
     a. IntentIntegrator.java 
Or You can download these files Here. And Your source code hierarchy should look as below:



2. Start an intent in that part of your code where you would like to initiate the barcode scanning. I start it on click on Scan button as shown in the below code

btnScan.setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View v) {
IntentIntegrator scanIntegrator = new IntentIntegrator(shop_list.this);
scanIntegrator.initiateScan();
Log.d("marutsoft Scan", "Inside scanner");

}
});


3. All that remains now is to handle the result of this activity in your onActivityResult() handler. This is how I did it in my code:

public void onActivityResult(int requestCode, int resultCode, Intent intent) {
//retrieve scan result
IntentResult scanningResult = IntentIntegrator.parseActivityResult(requestCode, resultCode, intent);
if (scanningResult != null) {
//we have a result scanContent = scanningResult.getContents();
String scanFormat = scanningResult.getFormatName();
Log.d("marutsoft Scan Content",scanContent);
Log.d("marutsoft Scan format", scanFormat);
Toast toast = Toast.makeText(getApplicationContext(),
scanFormat, Toast.LENGTH_LONG);
toast.show();
Toast toast1 = Toast.makeText(getApplicationContext(),
scanContent, Toast.LENGTH_LONG);
toast1.show();

}
else{
Toast toast = Toast.makeText(getApplicationContext(),
"No scan data received!", Toast.LENGTH_LONG);
toast.show();
}
}

That`s all! The above code not only returns the barcode scanning result to your app, but even prompts the user to install a barcode scanner app in case one isn't there. This is the easiest and recommended way of integrating barcode scanning in your android app.


Tuesday, June 14, 2016

Create A Simple Login Form On Popup Box Using jQuery.

Greetings of the day!!!

While I was working on a web project with PHP and MySQL. There was a requirement to create a LOGIN form in the Pop up box instead of creating a login page separately. This provides a great user experience by not redirecting to another login page. This write up will help you to create a login form in Popup box using jQuery.

The pop up login box looks as below:



To create this pop up login, you need to follow the below four steps
  1. Make a HTML file and define markups for Login Form and Popup Box
  2. Make a CSS file and define styling for Login Form and Popup Box
  3. Make a Script file and define Effects for Login Form and Popup Box
  4. Make a PHP file and Do Login

First create a HTML file which triggers this pop up window. Here I am creating a Button which triggers it. Here is the login.html for you:
<html>
<head>
<link rel="stylesheet" type="text/css" href="login_style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="login_effect.js"></script>
</head>
<body>

<center> <input type="button" id="show_login" value="Show Login"> <div id = "loginform"> <form method = "post" action = ""> <p>You Need to Login to Clear the Data</p> <input type = "image" id = "close_login" src = "images/close.png"> <input type = "text" id = "login" placeholder = "Email Id" name = "uid"> <input type = "password" id = "password" name = "upass" placeholder = "***"> <input type = "submit" id = "dologin" value = "Login"> </form> </div> </center> </body> </html>

You can get the close.png from Here

Make a CSS file and define styling for Login and Popup Box
Now we define styling for our Login and Popup Box and save the file with name login_style.css

body
{
background-color:#BDBDBD;
}
#loginform
{
width:500px;
height:330px;
margin-top:100px;
background-color:#585858;
border-radius:3px;
box-shadow:0px 0px 10px 0px #424242;
padding:10px;
box-sizing:border-box;
font-family:helvetica;
visibility:hidden;
display:none;
}
#loginform #close_login
{
position:absolute;
top:140px;
left:735px;
width:15px;
height:15px;
}
#loginform p
{
margin-top:40px;
font-size:22px;
color:#E6E6E6;
}
#loginform #login
{
width:250px;
height:40px;
border:2px solid silver;
border-radius:3px;
padding:5px;
}
#loginform #password
{
margin-top:5px;
width:250px;
height:40px;
border:2px solid silver;
border-radius:3px;
padding:5px;
}
#loginform #dologin
{
margin-left:-5px;
margin-top:10px;
width:250px;
height:40px;
border:none;
border-radius:3px;
color:#E6E6E6;
background-color:grey;
font-size:20px;
}
Make a Script file and define Effects for Login and Popup Box using jQuery and save it with a name login_effect.js. You can dowload jQuery from this Site


$(document).ready(function(){

$("#show_login").click(function(){
showpopup();
});
$("#close_login").click(function(){
hidepopup();
});

});

function showpopup()
{
$("#loginform").fadeIn();
$("#loginform").css({"visibility":"visible","display":"block"});
}

function hidepopup()
{
$("#loginform").fadeOut();
$("#loginform").css({"visibility":"hidden","display":"none"});
}


Make a PHP file and do Login
In this step we make a PHP file and save the file with name dologin.phpand recieve login id and password of a user and do login we use PHP for server side processing you can use any sever-side language.

?php

$id = $_POST['uid'];
$pass = $_POST['upass'];

$host = 'localhost';
$user = 'root';
$pass = ' ';

mysql_connect($host, $user, $pass);

mysql_select_db('demo');

$dologin = "select * from user where id = $id and pass = $pass ";
$result = mysql_query( $dologin );

if($result)
{
if(mysql_num_rows($result) == 1) {
echo $id;
// $_SESSION["id"]=$id;
echo "Successfully Logged In";
header("location: ./delete.php");
}

else { echo "Wrong Id Or Password"; die("Query failed"); header("location: ./view_data.php");
}
}
?>

if the user entered correct Email Id and Password we display Success Message else we display Wrong Id or Password message.

That's it. Thank you. Happy Coding..

Friday, May 13, 2016

How to find the next set of records after a specified one in MYSQL

Greetings Of The Day!

While we were working with web services using PHP and Mysql  for an android application, we had a use case to retrieve and show a set of data to one user and remaining set of data to other user based on the login details.

Application had Master and Partner users. Consider we have around 25 records in 'abc' mysql table. Now I have to fetch and show first 12 data to Master and the remaining 13 data to the partner.  

For the above use case we had to write the web-services. I am not going to discuss about the web services here But the mysql query we used to get such data was very important here that we are going to discuss here.

First we fetched the total number of rows or the records for the query:

$result_row = mysql_query("SELECT * FROM abc where uid='$uid' ");
$totalrows=intval(mysql_num_rows($result_row)/2);

Here $uid is Master's User ID. As we have two users, I divide the total number of rows by 2. And convert it to integer to get the whole number.  Now I will write the query to get only the first $totalrows as below

$result = mysql_query("SELECT * FROM abc where uid='$uid' 
LIMIT $totalrows") 
or die(mysql_error());
while ($row = mysql_fetch_array($result)) {
//Get the data
....
....
}

Here the main part doing the trick is "LIMIT". This limits the records to fetch. This gives you first half of the records.
Now similarly we write the query for Partner also to fetch the remaining records as below

$result_row = mysql_query("SELECT * FROM abc where uid='$uid' ");
$totalrows=mysql_num_rows($result_row);
$startindex=intval($totalrows/2);

Here I have the fetch the records in between $startindex and $totalrows. That's it. here we go:

$result = mysql_query("SELECT * FROM abc where uid='$uid'
LIMIT $startindex,$totalrows") 
or die(mysql_error());
while ($row = mysql_fetch_array($result)) {
//Get the data
....
....
}

The above query fetches the remaining records from the table. That's it. Happy Coding !