Archive for Januari 2009
Are you looking for a simple form validation javascript functions? just take a look at this article.
This is very simple javascript functions that I have developed and used in some of my web projects useful to add client side information.
Form Validation innerHTML
Simple and clean javascript validation innerHTML message like Facebook.
<script language="javascript" src="validatepost.js"></script>
Download Script 
Live DemoClear Click and Recall Click
This tip when you focus or select a field with the cursor the field value will be clear and if you are not fill any thing again recall the default value name.
<script type="text/javascript">
function clear_click(thisfield, defaulttext)
{
if (thisfield.value == defaulttext) {
thisfield.value = "";
}
}
function recall_click(thisfield, defaulttext)
{
if (thisfield.value == "") {
thisfield.value = defaulttext;
}
}
</script>
function clear_click(thisfield, defaulttext)
{
if (thisfield.value == defaulttext) {
thisfield.value = "";
}
}
function recall_click(thisfield, defaulttext)
{
if (thisfield.value == "") {
thisfield.value = defaulttext;
}
}
</script>
HTML Code :
Now we will add a link that call onclick=clear_click() and onblur=recall_click() functions:
<input name="name" id="name" value="Name" onclick="clear_click(this, 'Name')" onblur="recall_click(this,'Name')" type="text">
Toggle Message
When you focus or select a field with the cursor a toggle message appears on the right side of the field with a short information about the field.
<script type="text/javascript">
function toggleMessage(idElement)
{
element = document.getElementById(idElement);
if(element.style.visibility!='hidden')
{
element.style.visibility='hidden';
}
else
{
element.style.visibility='visible';
}
}
</script>
function toggleMessage(idElement)
{
element = document.getElementById(idElement);
if(element.style.visibility!='hidden')
{
element.style.visibility='hidden';
}
else
{
element.style.visibility='visible';
}
}
</script>
Toggle Message HTML Code.
Here we will add a link that call the toggleMessage() function:
<input onFocus="javascript:toggleMessage('msg-1')" onBlur="javascript:toggleMessage('msg-1')" type="text" name="Email" > <span id="msg-1" class="msg" style="visibility:hidden;" >Enter Valide Email. </span>
Download Script Live DemoRelated Posts
Delete a Record with animation fade-out effect using jQuery and Ajax.
jQuery Username Live validation.
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Some Javascript Tips - Form Validation, Toggle Messages
This is PHP function split_url_fuction() writter for twitter like application that i am developing, useful to split URL from the updated sentence(posted message), then URL changing like tinyurl and link to the resource.
This function is break up the URL from the sentence, if the URL string length greater than 30 words it's change like TinyURL.
Live Demo
Step 1. You have to include the file split_url_function.php into the PHP file that will use the function.
include("split_url_function.php");
Now you have to pass the updated data:
<?php echo split_url_function($message); ?>
Here $message is the value from a SQL query.( Table structure )
This is the code of split_url_funtion() PHP function:
<?php
include("tiny_url.php"); //tinyurl function
function split_url_function($update)
{
//----URL Checking in Update.
$http= substr_count($update,"http://");
$www=substr_count($update,"www.");
$htp=substr_count($update,"http//");
if($http==1)
{
$str="http://";
$h=1;
}
if($www==1)
{
$str="www.";
$w=1;
}
if($h==1 && $w==1)
{
$str='http://www.'; //--Both
}
if($htp==1)
{
$comb_str=$update; //--No url
}
//--- explode the update
$fa=explode($str,$update);
$cnt_fa=count($fa);
$se=explode(" ",$fa[1]);
$cnt_se=count($se);
for($i=1;$i<=$cnt_se;$i++)
{
$sep.=$se[$i].' ';
}
// Split URL
$split_url=$str.$se[0];
if($split_url=='')
{
$final_update=$update;
}
else
{
// URL link sting lenght verfication
if(strlen($split_url)>=30)
{
$tiny = tiny_url($split_url);
$final_update=$fa[0].'<a href="'.$tiny.'" target="_blank">'.$tiny.'</a>'.$sep;
echo $final_update;
}
else
{
// Combine all the explode parts
$final_update=$fa[0].'<a href="'.$split_url.'" target="_blank">'.$split_url.'</a>'.$sep;
echo $final_update;
}
}
}
?>
tiny_url.php Original reference http://davidwalsh.name/create-tiny-url-php
<?php
function tiny_url($url)
{
$ch = curl_init();
$timeout = 5;
curl_setopt($ch,CURLOPT_URL,'http://tinyurl.com/api-create.php?url='.$url);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
$data = curl_exec($ch);
curl_close($ch);
return $data;
}
?>
function tiny_url($url)
{
$ch = curl_init();
$timeout = 5;
curl_setopt($ch,CURLOPT_URL,'http://tinyurl.com/api-create.php?url='.$url);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
$data = curl_exec($ch);
curl_close($ch);
return $data;
}
?>
Download Source Code Live DemoIf you feel free post a comment.
Related post:
Delete a Record with animation fade-out effect using jQuery and Ajax.
Add Security to your PHP projects using .htaccess file
Twitter Like Parsing URLs with JavaScript.
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Analyzing URLs as Links to the resource using a PHP function.
Finally I am very happy with my 9lessons blog traffic. Starting It was getting only hundred visits per day, but now just see the below scree shots. Thanks to everybody it's been encouraging.
Traffic was mostly referring sites for this month. Thanks to great community sites like Dzone.com, Del.ico.us and Script&Style.
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Month Traffic Details
This tutorial explains about how to Parsing URLs within the posted text like Twitter with Javascript. My last post I had included this Script. I was developing project I found this nice javascript prototype property script in mozilla labs site.
If you want to suggest any other alternate scripts, feel free post a comment.
Download Source Code Live DemoJavaScript
Method String.prototype property invoked parseURL. When called on a String the regular expression finds any case of a URL and will enclose the URL with a HTML anchor tag.
<head>
String.prototype.parseURL = function()
{
return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(url) {
return url.link(url);
});
};
</head>
String.prototype.parseURL = function()
{
return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(url) {
return url.link(url);
});
};
</head>
index.php
Here we applying the parseURL() method to text variable called posted update contains a URL. But in database the update does not contain any anchor HTML tag.
<body>
<form action="" method="post">
<span class="what">What are you doing?</span>
<textarea ="" cols="55" id="update" maxlength="145" name="update" rows="3"></textarea>
<input type="submit" value=" Update " class="update_button" />
</form>
<?php
include("dbconfig.php");
$sql="select * from updates order by ms_id desc";
$result = mysql_query($sql);
while($row=mysql_fetch_array($result))
{
$message=stripslashes($row["message"]);
?>
<tr>
<td>
//---------------------------------------------------------------
<script type="text/javascript">
var test = "<?php echo $message; ?>";// Variable text = Updates from the database
document.write(test.parseURL());
</script>
//---------------------------------------------------------------
</td><td>
<a href="#" id="<?php echo $row["ms_id"]; ?>" class="delbutton"><img src="trash.png" alt="delete"/></a> </td></tr>
<?php
}
?>
</body>
Download Source Code Live DemoIf you want to suggest any other alternate scripts, feel free post a comment.
Related Posts :
Delete a Record with animation fade-out effect using jQuery and Ajax.
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Twitter Like Parsing URLs with JavaScript.
Are you like Twitter and Yammer API? This post about how to delete a record with animation fade-out effect using Ajax and jQuery. I like Twitter API very much, it's clean and faster. So i prepared this jQuery tutorial delete action with out refreshing page.
Part II: Delete Records with Random Animation Effect using jQuery and Ajax.
This is a simple tutorial just change some lines of database code! I was developing some what Twitter like API. Today I published small part that explains how to Delete a Record with animation fade-out effect using jQuery and Ajax.
- index.php
- dbconfig.php(Database configuration )
- delete.php
js-jquery.js
- dbconfig.php(Database configuration )
- delete.php
js-jquery.js
Download Source Code Live DemoDatabase Table Code
CREATE TABLE updates(
ms_id INT PRIMARY KEY AUTO_INCREMENT,
message TEXT);
ms_id INT PRIMARY KEY AUTO_INCREMENT,
message TEXT);
Step 1. index.php(user interface page)
Here Displaying records form database using while loop. Delete button included in <a> anchor tag attribute id=<?php echo $row['ms_id']; ?>. This we are passing to delete.php page.
<body>
<form action="" method="post">
<span class="what">What are you doing?</span>
<textarea ="" cols="55" id="update" maxlength="145" name="update" rows="3"></textarea>
<input type="submit" value=" Update " class="update_button" />
</form>
<?php
include("dbconfig.php");$sql="select * from updates order by ms_id desc";
$result = mysql_query($sql);
while($row=mysql_fetch_array($result))
{
$message=stripslashes($row["message"]);
?>
<tr><td><?php echo $message; ?></td><td><a href="#" id="<?php echo $row["ms_id"]; ?>" class="delbutton"><img src="trash.png" alt="delete"/></a> </td></tr>
<?php
}
?>
</body>
Step 2. delete.php
Simple php script delete data from Updates table.
<?php
include("dbconfig.php");
if($_POST['id'])
$sql = "delete from {$prefix}updates where ms_id='$id'";
mysql_query( $sql);
}
?>
include("dbconfig.php");
if($_POST['id'])
{
$id=$_POST['id'];$sql = "delete from {$prefix}updates where ms_id='$id'";
mysql_query( $sql);
}
?>
Step 3 Ajax and jQuery Code
Included jQuery plugin in head tag and ajax code included in this jquery function $(".delbutton").click(function(){}- delbutton is the class name of anchor tag. Using element.attr("id") calling delete button value.
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript"
$(function() {
$(".delbutton").click(function(){
var del_id = element.attr("id");
var info = 'id=' + del_id;
if(confirm("Sure you want to delete this update? There is NO undo!"))
{
$.ajax({
type: "POST",
url: "delete.php",
data: info,
success: function(){
}
});
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
}
return false;
});
});
</script>
</head>
Step 4.dbconfig.php
You have to change the database configuration like database name, username and password.
Download Source Code Live DemoRelated Links
Twitter Like Parsing URLs with JavaScript.
jQuery Username Live Validation check.
Insert and Load Record using jQuery and Ajax
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Delete a Record with animation fade-out effect using jQuery and Ajax.
Some days back I published an article about SQL Injection. In this article very small discussion about .htaccess file. After lots of requests I publish this article to add more security to your php application using .htaccess file.
In this tutorial I want to explain about hiding .php extensions and URL rewriting. So improve your Web projects security and quality.
Making .htaccess file
Very simple open any editor like notepad just file save as into .htaccess with in double quotations(".htacess"). You have to upload this file in to hosting root folder, my experience .htaccess file supports only Unix based servers.
Download Sample .htaccess FileHide .php extension with URL Rewriting
For example if we want to project like Twitter API URLs (Note: Twitter API Developed in Ruby on Rails)
Add this following code in your .htaccess file
RewriteEngine on
RewriteRule ^(.*)\$ $1.php
RewriteRule ^(.*)\$ $1.php
We can Rewrite index.php into index.html,index.asp,index.sri also
Below code for index.php to index.html
RewriteEngine on
RewriteRule ^(.*)\.html$ $1.php
If you want .asp extension just replace html to aspRewriteRule ^(.*)\.html$ $1.php
Redirecting www URL to non www URL
If you type www.twitter.com in browser it will be redirected to twitter.com.
Add this Following Code:
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.srinivas.com
RewriteRule (.*) http://srinivas.com/$1 [R=301,L]
RewriteCond %{HTTP_HOST} ^www.srinivas.com
RewriteRule (.*) http://srinivas.com/$1 [R=301,L]
Rewriting 'site.com/profile.php?username=foxscan' to 'site.com/foxscan'
My twitter profile http://twitter.com/foxscan its original link passing GET values (http://twitter.com/profile.php?username=foxscan) but this URL is ugly in browser address bar, For user friendly we can change like this.
RewriteEngine On
RewriteRule ^([a-zA-Z0-9_-]+)$ profile.php?username=$1
RewriteRule ^([a-zA-Z0-9_-]+)/$ profile.php?username=$1
RewriteRule ^([a-zA-Z0-9_-]+)$ profile.php?username=$1
RewriteRule ^([a-zA-Z0-9_-]+)/$ profile.php?username=$1
Download Sample .htaccess FileIf any suggestions post a Comment.
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Add Security to your PHP projects using .htaccess file
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Tempat Ngobrol Bareng
Few days back I received one request about Mysql WorkBench Usage. So in this post I want to explain with screen shots to create a visual database design, follow these steps.
I prepared this tutorial to improve your Database design Skills in Visual style.
Download Mysql WorkbenchFor example if we want to project like Twitter web site updating user profile, our database will have these entities:
1 - Users( User_name, password, email, some registration data....)
2 - Updates( Updates/Messages added by the Users)
Step 1 -> Add EER Diagram
Step 2 -> Place a New Table
Ok now... edit the table just right click.
You have to add Column and fix the Data types.
Set the table Primary Key in Column details
Same way you have to create Update table also.
Step 3->Link the both table with Relationship tools
Link the Updates table to Users table automatically generate Foreign key column.
Finally export project SQL script.
We can export ERR Diagram image *.png formate also.
If you feel free post a Comment..
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Visual Database Design with MySQL Workbench
The year 2008 I was addicted some interesting Applications. Take a look at this fantastic applications list.
1.Zenbe Email
Zenbe is a powerful free email it's really enlighten nice Ajax applications. configure all the email pop3 setting easy way and extra applications Facebook, twitter, and G talk. Click Here
2.Blogger
eBlogger is an excellent platform for bloggers without any investment. Just customize the XML template code.Click Here
3.Twitter
Twitter is a micro blogging service for friends, family, and co–workers to communicate and stay connected through the exchange of quick, frequent answers to one simple question: What are you doing?My Profile Here
4.ReadwriteWeb: Technology News blog.
Readwriteweb is a Technology news blog, Richard MacManus is the Founder and Editor. My daily Web technology news paper.Read Here
5.Delicious:Music Player
Delicious is an social bookmarking site, save a new bookmark in delicious Server .My Bookmarks Here
6.SongBird:Music Player
SongBird is is an open-source Mozilla product customizable music player that's under active development.Download Here
Indian Stock Market Story
Rating: 4.5
Reviewer: Unknown
ItemReviewed: My Best Applications in Year 2008
One week back I received this email from Chris Kenworthy(DreaminCode.net's owner) which said:
Srinivas,
I'm the owner of http://www.DreamInCode.net, a leading online community for programmers and web developers. We currently have 130,000+ members and over 1 million visitors each month. In the near future, we will be launching an "articles" section for our visitors. I've read your blog and think our visitors would be interested in some of the topics. Our audience is primarily Computer Science students who are craving information on the "right way" to program. I'm curious if you would be interested in writing or contributing articles similar to your blog entries? Your articles would be seen by thousands of programmers and web developers and you would be welcome to include a link back to your own blog as well as your name and an author bio. We are not looking for any sort of commitment, just the occasional interesting article that you would like to share with the programming community.
Please let me know if you are interested. I'd be happy to discuss an arrangement that is mutually beneficial.
Best Regards,
Chris Kenworthy
Thanks Chris for your encouragement.
Rating: 4.5
Reviewer: Unknown
ItemReviewed: 9lessons articles in DreamInCode.net
