Explore the logic behind small WEB APPLICATIONS: July 2013

Saturday, 27 July 2013

Explore the logic behind small WEB APPLICATIONS: Dynamic form validation using AJAX

Explore the logic behind small WEB APPLICATIONS: Dynamic form validation using AJAX: Dynamic form validation using JAVASCRIPT and AJAX Hello...Web Application Developers(Beginners) Today you will learn how to dynamically...

All possible combination of CSS color code

Want 2 se all 16777216 shades of color,just run the above script*.I was struggling with the color code and this came to my mind.....
*I am not responsible if your PC hangs while executing this :p
This requires changes in php.ini file or you'll get an time-out error and memory error :p
Just manupulate the loops an get different shades of particular color :D
<?php
$i=0;
$j=0;
$k=0;
$op='';
$count='';
for($i=0;$i<256;$i++){
for($j=0;$j<256;$j++){
for($k=0;$k<256;$k++){
$op.="<div style='background-color:rgb($i,$j,$k);width:80px;height:20px;'></div>rgb($i,$j,$k)<br/>";
$count++;
}
}
}

?>
<html>

<body>
<?php
echo "$count<br/>";
echo "$op.";
?>
</body>
</html>

Wednesday, 24 July 2013

Select box using PHP

Many of you'll might think that this is so stupid to publish,but there are people out there who still follow the traditional approach for creating selection box for stuff like date of birth an all(including me :D but not now ).They still use normal HTML and manually type each day,month and year from 1960 till today or whatever.
Lets check out this easy PHP script that saves all your time and make the most of it.

Index.php
<?php
$date='';
$month='';
$year = '';
for($i=1;$i<31;$i++){
$date.="<option value='$i' name = '$i'>$i</option>";
}

for($i=1;$i<13;$i++){
$month.="<option value='$i' name = '$i'>$i</option>";
}

for($i=1970;$i<2014;$i++){
$year.="<option value='$i' name = '$i'>$i</option>";
}
?>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<form method="post" action="test.php">
<select name="date">
<?php
echo "$date";
?>
</select>

<select name="month">
<?php
echo "$month";
?>
</select>

<select name="year">
<?php
echo "$year";
?>
</select>

<input type="submit" value="submit"></input>
</form>
</body>
</html>

Sunday, 7 July 2013

Dynamic search box

Creating a dynamic search box is quite simple.A big thanks to AJAX,which allows us to send HTTP requests without reloading the whole page.
This is a very simple system you should have a basic knowledge of AJAX,PHP & MYSQL and offcource HTML.
Getting started
I have included 3 files in this system but it totally depends on you.You can finish of in 2
1) HTML search page named index.php.
2) Database connection file named as database_con.php
3) PHP file to fetch information from the database.
PHP file named as search.php
Database named as data.
Table named as search.

Let's get started....
index.php

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <style type="text/css">
            #suggestion_box{
                display: none;

            }
        </style>


        <script>
//From here begins the magic of AJAX
            function check(){
                var search_box_id = document.getElementById('search_box');
                var search_value = search_box_id.value;
                var box_id = document.getElementById('suggestion_box')

var ajax = new XMLHttpRequest();ajax.open("POST","search.php",true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.onreadystatechange = function(){
   if(ajax.readyState == 4 && ajax.status == 200){
       if(ajax.responseText!=''){
      box_id.style.display = "block";
box_id.innerHTML = ajax.responseText;
                   }

               }
               }
ajax.send("query="+search_value);
          }

       </script>



    </head>
    <body>
        <input id="search_box" onkeyup="check()" type="text" style="margin-left: 500px;padding-left: 5px; margin-top: 250px; width: 250px; height: 30px;"> </input>
        <div id="suggestion_box" style="margin-left: 500px;border-color:background; border-style:solid;
             border-width:1px;margin-top:0px; width: 257px; background-color: blanchedalmond; border-radius:3px; "></div>
    </body>
</html>

search.php

<?php

if(isset($_POST['query']) && $_POST['query']!=''){
    $search_value = preg_replace('#[^a-z.]#i', '', $_POST['query']);
   include_once 'database_con.php';
    $sql = "Select * from search where contents like '%$search_value%'";
        $result = mysqli_query($db_connx, $sql);
        if(mysqli_num_rows($result)>0){
        while ($row = mysqli_fetch_array($result,MYSQLI_ASSOC))
        {
            $id = $row['id'];
            $search_string = $row['contents'];
            echo "<div style='height:35px;padding-left:15px;' >
                <a href='index.php?search=$search_string' style='text-decoration:none;
                padding-right:190px;
                text-allign:centre; padding-bottom:3px; padding-top:3px
                    ;cursor:pointer; '>
            $search_string </a>
                 <hr>   </div>";

        }
        }
    }

database_con.php

<?php

$db_connx = mysqli_connect("localhost", "root", "root", "data");
if(mysqli_connect_errno()){
    echo mysqli_connect_error();
    exit();
    }

I have kept everything simple.Only a simple styling.But you can extend it to whatever and however you want.
Happy Coding :)