Saturday, 27 July 2013
Explore the logic behind small WEB APPLICATIONS: Dynamic form validation using AJAX
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
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
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
This is a pretty useful yet easy to code :)
Working Demo:
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>
Friday, 22 March 2013
Dynamic form validation using AJAX
Dynamic form validation using JAVASCRIPT and AJAX
Hello...Web Application Developers(Beginners)
Today you will learn how to dynamically validate a form using AJAX and JAVASCRIPT.
If you already know how to do it then your are at wrong place DUDE.
So without wasting time lets start ....zzZZZz
#*The above example will take the username from username and dynamically checks whether this username is already taken by other user or not*#
Lets understand the logic behind validating form dynamically.
The block diagram clearly shows the flow of data through our system.
Files required.
1)form.html(To allow user to input data)
2)validate.js(Main validation function to send an AJAX request to find if user already exists in the system)
3)ajax.js(An AJAX module to create an AJAX request)
4)php file (to serach in database if username is already in use or not?}
1)form.html
code:
Username<input id="uname" type="text" onblur = "val(id)" /><span id = "valspan"></span>
Output
Username
*here we will be dealing with only username but you can apply the same logic to all your validation
2)validate.js
<script src="ajax.js"></script>
<script type= "text/javascript">
function val(txtid){
var username = document.getElementById(txtid).value;
var spanstatus = document.getElementById("valspan").value;
if(username.length == ' '){
spanstatus.innerhtml = "Please enter an username";
}
else{
var ajax = ajaxobj("POST","checkname.php");
ajax.onreadystatechange = function(){
if(ajaxreturn(ajax)==true){
var response = ajax.responseText;
if(response == "ok"){
spanstatus.innerhtml = "OK";
}
else{
spanstatus.innerhtml = "Sorry,but this username is already taken";
}
}
}
ajax.send("user="+username);
}
}
</script>
3)ajax.js
function ajaxobj(method,url){
var x = new XMLHttpRequest();
x.open(method, url,true);
x.setRequestHeader("Content-type","application/x-www-form-urlencoded");
return x;
}
function ajaxreturn(x){
if(x.readyState==4 && x.status==200){
return true;
}
}
4)php file
<?php
include_once("db_connect");
if(isset($_POST['user'])){
include_once("db_connect");
$user = $_POST['user'];
$sql = "select id from table where username='$user';
$query = mysqli_query($db_conx,$query);
$numrow = mysqli_num_rows($query);
if($numrow < 1){
echo "ok" //This is what goes back to ajax in val.js if username doesn't exists in the DB//
exit();
}
else{
echo "Username in use";
//This is what goes back to ajax in val.js if username exists in the DB//
exit();
}
}
exit();
?>