Saturday, 10 June 2017

Reusable Image Validation (Client Side) Using jQuery

We will handle Image Validation using two ways, client side and server side. I have explained client side Image validation here. But you can also handle the server side Image Validation as you want.

Client Side Image Validation Using jQuery and Bootstrap


Here is the Form <input> field to upload  an Image file. I added "accept" attribute in the Input tag which indicates the types of file the server accepts. (read more: https://developer.mozilla.org/en/docs/Web/HTML/Element/input)

<input type="file" id="logo_img" name="logo_img" placeholder="Logo Image" accept=".jpg,.jpeg,.png" onchange="javascript:validate_image(this);">



Here is the Reusable Image validation code <script</script>. In this Script it allows only JPEG, JPG and PNG files but you can add more file extensions as you want.

<script type="text/javascript">
     function validate_image(thisval){ // thisval holds the Object of file Input

         var file = thisval.files[0];
   
         console.log(file.size);
         var fileType    = file.type; // holds the file types
         var match       = ["image/jpeg","image/png","image/jpg"]; // defined the file types
         var fileSize    = file.size; // holds the file size
         var maxSize     = 4*1024*1024; // defined the file max size
         var err_id = $(thisval).attr('id')+'image_err';

         // Checking the Valid Image file types
         if(!((fileType==match[0]) || (fileType==match[1]) || (fileType==match[2])))
         {
             $(thisval).val("");
             $(thisval).after("<span id=\""+err_id+"\"><p class=\"text-danger\">
<i class=\"fa fa-times\" aria-hidden=\"true\"></i> Please select a valid image(.jpg and .png) File</p>
</span>");
             return false;
         }else{
              $("#"+err_id).html("");
         }
         // Checking the defined image size
         if(fileSize > maxSize)
         {
             $(thisval).val("");
             $(thisval).after("<span id=\""+err_id+"\"><p class=\"text-danger\">
<i class=\"fa fa-times\" aria-hidden=\"true\"></i> Please select an image file less than 4mb of size.</p>
</span>");
             return false;
         }else{
             $("#"+err_id).html("");
         }
     }
 </script>

Note: Do not put this Script within (document).ready(function(){}) otherwise may be it will not work.  








Requirements:
jQuery
Bootstrap


Bootstrap Responsive Media Queries CSS Tips

AS a developer I faces lots of problem while making website responsive to make website visible correctly on all devices like mobile, tablet and desktop. So, today I am sharing some Bootstrap responsive CSS styles and Media Queries  tips with you.

But make sure that you are not repeating the same media queries for the same screen size. Otherwise it will override your previous CSS style rules. 

 


The Grid Sizes

.col-xs-$ => Extra Small (Phones Less than 768px)
.col-sm-$ => Small Devices (Tablets 768px and Up)
.col-md-$ => Medium Devices (Desktops 992px and Up)
.col-lg-$  => Large Devices (Large Desktops 1200px and Up)


Here is the Responsive CSS Style for all Screen Sizes


/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }

    /*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */
    @media only screen and (max-width : 320px) {

    }

Read more: https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

Monday, 12 September 2016

List Of Latest Core PHP Examples And Interviews Questions & Answers

Core PHP Examples and Interview Questions


In this blog post I am sharing a list of some common PHP interview questions & answers or some core PHP examples that is very useful and helpful the freshers and experienced too. I have combined these example from different sources listed here at one place.

Ques 1. How to reverse a string without using any builtin function?

Ans. 

<?php
$str = 'My name is Diwakar Kumar';
$len = 0;
while(isset($str[$len]) != '')
$len++;
for($i = $len ; $i >= 0 ; $i--)
{
 echo @$str[$i];
}

Ques 2. How to access global variables with a user defined function?

Ans.

<?php
$x = 5;
$y = 10;

function myTest() {
    $GLOBALS['y'] = $GLOBALS['x'] + $GLOBALS['y'];
} 

myTest();
echo $y;

Ques 3. How to use the static keyword to let a local variable not be deleted after execution of
function?

Ans.

<?php
function myTest() {
    static $x = 0;
    echo $x;
    $x++;
}

myTest();
echo "<br>";
myTest();
echo "<br>";
myTest();

------------------------


Some Reference Sites: 
------------------------

https://www.javatpoint.com/php-interview-questions

http://career.guru99.com/top-100-php-interview-questions-answers/

https://intellipaat.com/interview-question/php-interview-questions/

https://www.codementor.io/php/tutorial/php-interview-questions-sample-answers

https://www.toptal.com/php/interview-questions

Saturday, 16 July 2016

How To Redirect Non-WWW to WWW, HTTPS & Vice Versa Using Htaccess

I always see that most of the web developers are stuck with URL redirection. Like redirect Non-WWW to WWW, Non-WWW to HTTPS and WWW to Non-WWW, WWW to HTTPS using .htaccess file.

So, here I listed all the code of URL redirection using htaccess. Hope it helps you.





Non-WWW and WWW to https://www.example.com/

RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [L,R=301]

RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://www.example.com/$1 [L,R=301]


Non-WWW and WWW to https://example.com/

RewriteEngine On
RewriteCond %{HTTPS} off 
RewriteCond %{ENV:HTTPS} off 
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE] 
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC] 
RewriteRule ^ https://%1%{REQUEST_URI} [L,R=301,NE]

Non-WWW and /index.php  to WWW Redirect

RewriteEngine on
RewriteCond %{HTTP_HOST} !^www\.example\.com
RewriteRule (.*) http://www.example.com/$1 [R=301,L]
RewriteRule ^(.*)index\.(html|php)$ http://%{HTTP_HOST}/$1 [R=301,L]


WWW to Non-WWW Redirect

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.example\.com [NC]
RewriteRule ^(.*)$ http://example.com/$1 [L,R=301]

Thursday, 28 April 2016

Which one is the most using web framework?

The most using Web Frameworks by PHP developers