Web programming tips and tricks : September 2013

Saturday, September 28, 2013

Implement captcha in static web page

This below code is very useful for static web page (Html). Implement captcha in static web page solving problem using iframe

How to implement captcha in static web page

Step 1 . Make Form with captcha (Include two files - I js "jquery.min.js" and II Php "create_image.php" && also Loading images).
Create file "html-form-captcha.php" and Added Following Files

ajax-loader.gif
blank-loader.gif
create_image.php
jquery.min.js (Downlaod)http://jquery.com/download/

Step 2 . Backend Code with Email Function Code using php
Create file "formsu.php" and Add Mail function PHP Code

Step 3 . Simple Make js and Add url pass in Iframe tage
Create file "formurlcall.js" and Added one file "html-form-captcha.php" in iframe code

Step 4. Calling js in Static webpage (HTML)
Create file "form.html" and Added one file "formurlcall.js" in call js file in static Webpage

Main files
Step 1. html-form-captcha.php
Create file "html-form-captcha.php" and Added Following Files

ajax-loader.gif
blank-loader.gif
create_image.php
jquery.min.js (Downlaod)http://jquery.com/download/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HTML Form With captcha</title>

<script src="jquery.min.js" TYPE="text/Javascript"></script>
<script language="javascript">
function submitForm()
{var objForm=document.userForm;if(validateForm())
{$("#loadImg").attr('src','ajax-loader.gif');var order=$("#contact").serialize();$.post("formsu.php",order,function(theResponse){if(theResponse=='success')
{$("#loadImg").attr('src','blank-loader.gif');alert("Thanks You! submitted successfully.");objForm.fullname.value='';objForm.email.value='';objForm.captcha.value='';reloadCaptcha();}
else
{$("#loadImg").attr('src','blank-loader.gif');alert("Error: "+theResponse);reloadCaptcha();}});}}
function reloadCaptcha()
{d=new Date();$("#captchacode").attr('src',"create_image.php?"+d.getTime());}
function validEmail(str)
{mailRE=new RegExp();mailRE.compile('^[\._a-z0-9-]+@[\.a-z0-9-]+[\.]{1}[a-z]{2,4}$','gi');return(mailRE.test(str));}
function validateForm(){if(document.userForm.fullname.value=="")
{alert("Put your name");document.userForm.fullname.focus();return false;}
else if(document.userForm.email.value=="")
{alert("Please enter Email ID");document.userForm.email.focus();return false;}
else if(validEmail(document.userForm.email.value)==false){alert("Please Check your Email ID");document.userForm.email.focus()
return false;}
else if(document.userForm.captcha.value=="")
{alert("Enter Security Code");document.userForm.captcha.focus();return false;}

return true;}</script>

</head>
<body>
<h1>Static web page with Implement Captcha </h1>
<div id="contact-form" style="width:320px; height:150px; background:gray; overflow:hidden; padding:0 0 0 2px;">
<form name="userForm" id="contact" action="" method="post">
<table width="300" border="0" cellpadding="1" cellspacing="7">
<tr> <td width="100px">Name *</td> <td width="200px">
<input type="text" name="fullname" style="width:100px;height:20px;"/>
</td></tr>
<tr> <td >Email *</td> <td >
<input type="text" name="email" style="width:100px;height:20px;" />
</td></tr>
<tr> <td >Enter Code *</td> <td >
<img align="absmiddle" src="create_image.php" id="captchacode"> <input type="text" name="captcha" value="" maxlength="4" style="width:100px;height:20px;" /><img align="absmiddle" src="blank-loader.gif" id="loadImg" style=" position:relative; right:-60px; top:-20px;">
</td></tr>
<tr><td style="text-align:center; padding:0px 0 0 0px;">    <button type="button" onclick="submitForm()">Go Add !</button> </td> </tr> </table>
</form></div></body>
</html>

Support Files create_image.php code
<?php

//Start the session so we can store what the security code actually is
session_start();

//Send a generated image to the browser
create_image();
exit();

function create_image()
{
    //Let's generate a totally random string using md5
    $md5_hash = md5(rand(0,999));
    //We don't need a 32 character long string so we trim it down to 5
    $security_code = substr($md5_hash, 15, 4);

    //Set the session to store the security code
    $_SESSION["security_code"] = $security_code;

    //Set the image width and height
    $width = 50;
    $height = 20;

    //Create the image resource
    $image = ImageCreate($width, $height);

    //We are making three colors, white, black and gray
    $white = ImageColorAllocate($image, 255, 255, 201);
    $black = ImageColorAllocate($image, 0, 0, 0);
    $grey = ImageColorAllocate($image, 204, 204, 204);

    //Make the background black
    ImageFill($image, 0, 0, $black);

    //Add randomly generated string in white to the image
    ImageString($image, 3, 10, 3, $security_code, $white);

    //Throw in some lines to make it a little bit harder for any bots to break
    ImageRectangle($image,0,0,$width-1,$height-1,$grey);
   // imageline($image, 0, $height/2, $width, $height/2, $grey);
    //imageline($image, $width/2, 0, $width/2, $height, $grey);

    //Tell the browser what kind of file is come in
    header("Content-Type: image/jpeg");

    //Output the newly created image in jpeg format
    ImageJpeg($image);

    //Free up resources
    ImageDestroy($image);
}
?>

Step 2. formsu.php
Create file "formsu.php" and Add Mail function PHP Code
<?php
session_start();

//Make sure that the input come from a posted form. Otherwise quit immediately
if ($_SERVER["REQUEST_METHOD"] <> "POST")
die("You can only reach this page by posting from the html form");

//Check if the securidy code and the session value are not blank
//and if the input text matches the stored text
if ( ($_REQUEST["captcha"] == $_SESSION["security_code"]) &&
(!empty($_REQUEST["captcha"]) && !empty($_SESSION["security_code"])) ) {
// echo "<h1>Test successful!</h1>";
echo 'success';

$name=ucwords(stripslashes($_REQUEST['fullname']));
$email=$_REQUEST['email'];

$cu_date=date("Y-m-d");
$to = "abc@gmail.com";
$subject = "Admain Subjetc";
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";
//$headers .= "Bcc: $bcc"."\r\n";

$headers .= "From: $email" . "\r\n";
$body = "Admin";

mail($to, $subject, $body, $headers);
$to1 = $email;
$headers1 = 'MIME-Version: 1.0' . "\r\n";
$headers1 .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers1 .= "From: $to" . "\r\n";
$subject1 = 'Thanks You :user';
$message="User Section";
mail($to1, $subject1, $message, $headers1);

}
else {
echo 'code worng ';

}
?>

Step 3 formurlcall.js
Create file "formurlcall.js" and Added one file "html-form-captcha.php" in iframe code

// JavaScript Document
document.write('<iframe scrolling="no" src="html-form-captcha.php" width="405" height="360px" frameborder="0" style="background-color:#FFF"></iframe>');

Support Files html-form-captcha.php Already Above code

Step 4 form.html
Create file "form.html" and Added one file "formurlcall.js" in call js file in static Webpage
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
Implement captcha in static web page solving problem using iframe
<BODY>
<div style="width:400px; height:auto; overflow:hidden; margin:15px 0 0 0px">
<script language="javascript" src="formurlcall.js"></script>
</div>
</BODY>
</HTML>

Support Files formurlcall.js Already Above code

Thursday, September 26, 2013

Different value Passing without query string in Lightbox POP

This Code Passing Different value same dynamic/static Page without query string in Lightbox Form Using JavaScript.Using Following code save as .html/ any script Language like .php etc.

<!DOCTYPE html>
<html>
<head>
<title>
Different value Passing without query string in Lightbox POP

</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>

#shadowing
{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #64D272;
z-index:10;
opacity:0.5;
filter: alpha(opacity=50);
}

#box
{
display: none;
position: fixed;
top: 20%;
left: 20%;
width: 270px;
height: 150px;
padding: 10px 0 0 8px;;
margin:0;
border: 1px solid black;
background-color: white;
z-index:101;
overflow: auto;
}

#boxtitle
{
position:absolute;
float:center;
top:0;
left:0;
width:277px;
height:24px;
padding:0;
padding-top:4px;
left-padding:8px;
margin:0;
border-bottom:4px solid #3CF;
background-color: #800040;
color:white;
text-align:center;
}

.btn_close
{

position:relative;
top:-15px;
right:-232px;
z-index:99999px;
}

</style>
<script language="javascript" type="text/javascript">
function openbox(formtitle, fadin)
{

var box = document.getElementById('box');
document.getElementById('shadowing').style.display='block';

var btitle = document.getElementById('boxtitle');
// var btitle2 = document.getElementById('boxtitle');
btitle.innerHTML =formtitle;

var abc=btitle.innerHTML.toLowerCase();
abc= abc.replace(/^\s+|\s+$/g,"");
abc= abc.replace(/[^a-zA-Z 0-9]+/g,'');
abc= abc.replace(/ /g,"-");
abc= abc.replace(/---/g,"-");
abc= abc.replace(/--/g,"-");

document.form1.pdf_name.value = abc;

//document.form1.pdf_name.value = ;

if(fadin)
{
gradient("box", 0);
fadein("box");
}
else
{
box.style.display='block';
}
}

// Close the lightbox

function closebox()
{
document.getElementById('box').style.display='none';
document.getElementById('shadowing').style.display='none';
}

function gradient(id, level)
{
var box = document.getElementById(id);
box.style.opacity = level;
box.style.MozOpacity = level;
box.style.KhtmlOpacity = level;
box.style.filter = "alpha(opacity=" + level * 100 + ")";
box.style.display="block";
return;
}

function fadein(id)
{
var level = 0;
while(level <= 1)
{
setTimeout( "gradient('" + id + "'," + level + ")", (level* 1000) + 10);
level += 0.01;
}
}

</script>

</head>

<body>
<h1>Form open in a Lightbox Using Sample Javascript</h1>

<p> <B>Different value passing without Query String </B><b><br><br><br>
Link Test Ex 1 (with fading effect) <a href="#" onClick="openbox('Test Box1', 1)">click here1</a>. <br><br>

Link Test Ex 2 (with fading effect) <a href="#" onClick="openbox('Test Box2', 1)">Click here2</a>. <br><br>

Link Test Ex 3 (withot fading effect) <a href="#" onClick="openbox('Test Box3', 0)">Click here3</a>. <br><br>

Link Test Ex 4 (withot fading effect) <a href="#" onClick="openbox('Test Box4', 0)">Click here4</a>. <br><br>


<div id="shadowing"></div>

<div id="box">
<form method="POST" action="#" target="_parent" name="form1">
<span id="boxtitle"></span>
<table cellpadding="2"        cellspacing="2" >
<tr><td><a href="#" onClick="closebox()" ><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></td><td>
<input type="hidden" name="pdf_name" value="" maxlength="60" size="25"> </a>
</td> </tr>
<tr><td>Name: </td><td>
<input type="text" name="fname" value="" maxlength="60" size="25" >
</td> </tr>
<tr><td>Email : </td><td>
<input type="text" name="email" value="" maxlength="60" size="25">
</td> </tr>
<tr><td colspan="2" style="text-align:center" align="center">      <input type="submit" name="submit" class="buttonnewlink">
<input type="button" name="cancel" value="Cancel" onClick="closebox()">
</td></tr>
</table>
</form>
</div>

</body>
</html>

Wednesday, September 25, 2013

Submit Query without Pass Query String in Pop Window

1)make a search button on your web page and define type = submit
2)onclick of that button do the following:
// create the pop-up window
// make sure you give it a name
window.open("g.php", "targetSearchResult",
"width=400,height=300");
// adjust your forms target and action as:
mysearchform.target = 'targetSearchResult';
mysearchform.action = 'g.php';
mysearchform.submit();
That way, you have pre-created a pop-up window ; later you
submitted the search queries (via POST/GET method if you don't want queries)

Please Below code using solving Submit Query without Pass Query String. in Pop Window

File save any name . for EX. abc.html
<!DOCTYPE html>
<html>
<head>

<script language="javascript">
function doTheSubmit()
{
//document.mysearchform.theField.value='5';
mysearchform.target = 'targetSearchResult';
mysearchform.action = 'g.php';
mysearchform.submit();
}
</script>
<meta charset=utf-8 />
<title>Submit Query without Pass Query String</title>

</head>
<body>
<form id="mysearchform" name="mysearchform" method="POST" onSubmit="doTheSubmit();">
<input type="hidden" id="theField" name="theField" value="6">
<br><input type="submit" value="Send" onclick="window.open('g.php','targetSearchResult','height=400,width=400');">

</form>
</body>
</html>
.............................
Another File g.php
<?php
print_r($_POST);
echo $_REQUEST['theField'];
?>

Tuesday, September 17, 2013

Print area defined using css and javascript in webpage

if you want to print particular area in webpage . These problem Solve using css and js in HTML Web page. Please below Example save as html file and run any browser (IE, Firfox and Crome Etc).

Ex-

<html>
    <head>
        <style type="text/css">
        @media print {
            body * {
                visibility:hidden;
            }
            #printable, #printable * {
                visibility:visible;
            }
            #printable { /* aligning the printable area */
                position:absolute;
                left:40;
                top:40;
            }
        }
        </style>
    </head>
    <body>
    <A HREF="javascript:window.print()">Click to Print This Page</A>
        <div id="printable">
            printable area
            <br>
            printable area
            <br>
            printable area
        </div>
        <div>
            Curabitur tempus hendrerit semper. Nulla vel felis est. Cras nec mattis mauris.
            Vestibulum volutpat urna viverra mi viverra non ultrices leo semper.
            Maecenas scelerisque, augue quis scelerisque aliquam, magna velit scelerisque urna,
            in aliquet lectus dolor vitae urna. Nullam faucibus mattis hendrerit.
            Nam tortor elit, vulputate quis viverra vitae, dapibus id magna.
            Ut ultricies rhoncus erat, id pharetra dui tincidunt at.
            In lorem lorem, suscipit nec elementum vitae, venenatis id ligula.
            Suspendisse et erat id neque facilisis ultricies ac in neque.
            Vestibulum suscipit risus sed erat varius molestie.
        </div>
    </body>
</html>