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..

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 !

Android Splash Screen using Android Studio

Most of the Android apps uses splash screen before launching their application activity. You can see that with most popular apps such as Skype, Facebook, Dropbox etc.

While I was developing an Android APP POC for one of my customer, the requirement was to create a splash screen with their logo which stays on the screen for 3 seconds. It can be done very easily with the below steps.

First we have to create a new project in the Android studio :

1. Click on File -> New Project

2. Mention the application Name And Minimum SDK, Click on Next

3. Select Blank Activity and Click Next Button

4. Click on Finish

This create the android application with blank activity. Now we will add the Splash screen at the start this application.

First Create a layout to display the Splash screen. We call it as splash.xml.

<?xml version="1.0" encoding="utf-8"?>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical" 

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@drawable/splash_image">

</LinearLayout>

We have to copy the splash_image.jpg image file to drawable folder. This is the image which is going to be shown in the splash screen.

Now create a activity which sets this splash content view. This activity we call it as SplashScreen.java. Put the below code to this class

SplashScreen.java   

package marutsoft.vehicledata;

import android.app.Activity;

import android.content.Intent;

import android.os.Bundle;

import android.view.Display;

import android.widget.ImageView;

/**

 * Created by Karjol G T on 11-05-2016.

 */

public class SplashScreen extends Activity {

    protected int _splashTime = 3000;

     private Thread splashThread;

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        Display display = getWindowManager().getDefaultDisplay();

        setContentView(R.layout.splash);

        Thread timerThread = new Thread(){

            public void run(){

                try{

                    sleep(3000);

                }catch(InterruptedException e){

                    e.printStackTrace();

                }finally{

                    Intent intent = 

                    new Intent(SplashScreen.this,MainActivity.class);

                    startActivity(intent);

                }

            }

        };

        timerThread.start();

    }

    @Override

    protected void onPause() {

        // TODO Auto-generated method stub

        super.onPause();

        finish();

    }

}

  

We have mentioned the sleep for 3000 ms that’s 3 seconds. Here Once the splash screen is done it invokes MainActivity.class.

Now we have to include the splash activity to Manifest and we have to make it as a launcher activity to start the application with this activity. You need to add the below code to the AndroidManifest .xml file. 

<activity

            android:name=".SplashScreen"

            android:label="@string/app_name" >

            <intent-filter>

            <action android:name="android.intent.action.MAIN"/>

            <category android:name="android.intent.category.LAUNCHER"/>

            </intent-filter>

        </activity>    

Now Run this Android application to check the Splash screen running at the beginning of the application.

That’s it. Happy Coding..

Sorting Multi-Dimensional Arrays in PHP

I was working on a project. I had to do lot of interaction between mysql server and my android app. In that case I got a situation where I get the raw data from database which I need to sort and show on the fly. This data is in multi dimensional array.

I use to get the items data from mysql based on the user id.

    $result = mysql_query("SELECT * FROM savedlist where uid='$uid' ") or die(mysql_error());

   if (mysql_num_rows($result) > 0) {

         $response['products'] = array();

         while ($row = mysql_fetch_array($result)) {

         // temp user array

        $itemtypes = array();

        $itemtypes['id']=$row['pid'];

     

        $result1 = mysql_query("SELECT * FROM items where id='$row[pid]'") or die(mysql_error());

     

     

        while ($row1 = mysql_fetch_array($result1)) {

         

         

        $itemtypes['name'] = $row1['name'];

        $itemtypes['price']=$row1['price'];

        $itemtypes['bay']=$row1['bay'];

         

        }

         

            print_r($itemtypes, true);

   

         // push single product into final response array

        array_push($response['products'], $itemtypes);

     

        $bays = array();

        foreach ($response['products'] as $bay)

        {  

            $bays[] = $bay['bay'];

     

        }

        array_multisort($bays,SORT_ASC, $response['products'] );

     

     

     

    }

Here

$response['products']  is  a multi dimensional array which I want to sort it based on the BAY. So first I create another array $bays[] based on the bay type. And then sort it using array_multisort()

I used the below function to sort  $response['products'] array based on $bays as:

 array_multisort($response['products'], SORT_ASC, $bays);

That's it. Happy Coding

Durmukhi Naam Samvastara SRSM Panchanga is available to Download

Greeting of the Day!!!

First of all I am very sorry for delaying in Updation of Durmukhi Naam Samvastara data. And Thanks to all those who written to me to update it. Now It's updated and the app is ready to download with all the data for Durmukhi Naam Samvastara.

Now it's available in English. Soon Kannada version of the app will be available to download.

You can download it from the play store at: SRSM panchanga

Please uninstall the older version of the application if installed and install this New version.