Explore the logic behind small WEB APPLICATIONS

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 :)

Saturday 23 March 2013

JavaScript WYSIWYG

A simple WYSIWYG

Cool yet Simple

JAVASCRIPT FILE

function iFrameOn(){
richTextField.document.designMode = 'On';
}
function iBold(){
richTextField.document.execCommand('bold',false,null);
}
function iUnderline(){
richTextField.document.execCommand('underline',false,null);
}
function iItalic(){
richTextField.document.execCommand('italic',false,null);
}
function iFontSize(){
var size = prompt('Enter a size 1 - 7', '');
richTextField.document.execCommand('FontSize',false,size);
}
function iForeColor(){
var color = prompt('Define a basic color or apply a hexadecimal color code for advanced colors:', '');
richTextField.document.execCommand('ForeColor',false,color);
}
function iHorizontalRule(){
richTextField.document.execCommand('inserthorizontalrule',false,null);
}
function iUnorderedList(){
richTextField.document.execCommand("InsertOrderedList", false,"newOL");
}
function iOrderedList(){
richTextField.document.execCommand("InsertUnorderedList", false,"newUL");
}
function iLink(){
var linkURL = prompt("Enter the URL for this link:", "http://");
richTextField.document.execCommand("CreateLink", false, linkURL);
}
function iUnLink(){
richTextField.document.execCommand("Unlink", false, null);
}
function iImage(){
var imgSrc = prompt('Enter image location', '');
if(imgSrc != null){
richTextField.document.execCommand('insertimage', false, imgSrc);
}
}

HTML FILE

<body onLoad="iFrameOn();">
<h2>Cool yet Simple</h2>
<form action="my_parse_file.php" name="myform" id="myform" method="post">

<p>Text goes here<br>
<div id="wysiwyg_cp" style="padding:8px; width:700px;">
<input type="button" onClick="iBold()" value="B">
<input type="button" onClick="iUnderline()" value="U">
<input type="button" onClick="iItalic()" value="I">
<input type="button" onClick="iFontSize()" value="Text Size">
<input type="button" onClick="iForeColor()" value="Text Color">
<input type="button" onClick="iHorizontalRule()" value="HR">
<input type="button" onClick="iUnorderedList()" value="UL">
<input type="button" onClick="iOrderedList()" value="OL">
<input type="button" onClick="iLink()" value="Link">
<input type="button" onClick="iUnLink()" value="UnLink">
<input type="button" onClick="iImage()" value="Image">
</div>

<textarea style="display:none;" name="myTextArea" id="myTextArea" cols="100" rows="14"></textarea>
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;"></iframe>

</p>
<br />
</form>
</body>

JavaScript digital clock

JAVASCRIPT,CSS DIGITAL CLOCK

Working demo:

Javascript CSS Digital Clock

This looks cool yet very easy to code.
Here comes the magical code that does this

<h2>Javascript CSS Digital Clock </h2>
<div id="clockDisplay" class="clockStyle"></div>
<script type="text/javascript" language="javascript">
function renderTime() { var currentTime = new Date();
var suf = "AM";
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
setTimeout('renderTime()',1000);
if (h == 0) { h = 12; }
else if (h > 12)
{ h = h - 12; suf="PM"; }
if (h < 10) { h = "0" + h; }
if (m < 10) { m = "0" + m; }
if (s < 10) { s = "0" + s; }
var myClock = document.getElementById('clockDisplay');
myClock.innerHTML = h + ":" + m + ":" + s + " " + suf; }
renderTime();
</script>

Textarea field counting

TEXTAREA FIELD COUNTING...

This is a pretty useful yet easy to code :)

Working Demo:

Textarea counter
Letters remaining-

For this you will require a single html file with the following script.

<html>
<head>
<title>Textarea counter</title>
<script type="text/javascript">
function count(txtid){
var limit = 150;
var current = document.getElementById(txtid).value;
if(current.length <= limit){

document.getElementById("stat").innerHTML = limit - current.length;
}
else{
alert("Dude max limit of letters reached");

}
}
</script>

</head>

<body>
<textarea id="txt" onkeydown="count(id)" onkeyup="count(id)"></textarea><br>
Letters remaining-
<span id="stat"></span>
</body>

</html>