9lessons Programming Blog - Tutorials about Angular, ReactJS, PHP, MySQL and Web Development
Thursday, March 05, 2009

Perfect Javascript Form Validation using Regular Expressions.

I had designed a perfect form validation using javascript regular expression. Simple code and works perfect in all conditions. It's very useful and supporting all the web browsers just take a look at post live demo.

Server Side Form Validation using Regular Expressions

Monday, March 02, 2009

Clean User Interface CSS Tips

So in this post i want to explain how to design a clean user interface using CSS (Cascading Style Sheets). It's useful to make your web pages more simple and neat.

Better than images to use CSS buttons the web page download faster.
CSS Buttons
Monday, February 23, 2009

Backup your Web Projects Database using MySQL Administrator.

Some days back I had posted an article about MySQL WorkBench Usage. So in this post I want to explain how to take backup your database using MySQL Administrator. It's a part of MySQL GUI Tools.

It's very easy to use and using this we can take backup and restore web projects database.



Wednesday, February 18, 2009

Awesome Vector Graphics Flash Movies List.

Are you looking for nice flash vector graphics movies. Take a look at this post you feel relax. I hope you like this sites.

First you have to enable flash player plugin.



aBowman
Fish gadget - Click on the movie and give food. link .

Orange Orage Company Website - link
Suilen.net Graphic designer profile presentation. link
Jonathanyuen.com Art and design presentation.
27bobs Flash tutorials and smooth real graphics link
Bugzilla.mozilla.org I found this rich gif image in buzill.mozilla.org. Eating mozill browsers bugs.

If you know any inserting flash website links just post a comment.
Monday, February 16, 2009

Auto Scrolling Effect with javascript and DHTML.

Take a look at this post a nice auto scrolling effect using javascript and dynamic HTML. It's useful to display your website headlines and latest news . Just you have to do very few modifications.

Watch this demo.
Live Demo


Download Script     Live Demo

Add these three javascript files within the tag HEAD of the page.
<script language="javascript" src="js/dhtmllib.js"></script>
<script language="javascript" src="js/scroller.js"></script>
<script language="javascript" src="js/mydata.js"></script>

Demo.html
Contains javascript and HTML code. Div tag id placeholder to present your data.
<script language="javascript">
function runmikescroll() 
{
  var layer;
  var mikex, mikey;
  // Locate placeholder layer so we can use it to 
  // position the scrollers.
  layer = getLayer("placeholder");
  mikex = getPageLeft(layer);
  mikey = getPageTop(layer);
  // Create the first scroller and position it.
  myScroller1.create();
  myScroller1.hide();
  myScroller1.moveTo(mikex, mikey);
  myScroller1.setzIndex(100);
  myScroller1.show();
}
window.onload=runmikescroll
</script>

<DIV id="tempholder"></DIV>
<DIV id="placeholder"></DIV>

mydata.js
Add headlines in mydata.js. Include your HTML tags inadditem(" ")

var myScroller1 = new Scroller(0, 0, 385,130, 0, 0);
//(xpos, ypos, width, height, border, padding)

myScroller1.addItem(" <span><h3>Scrolling Data 1</h3></span> ");
myScroller1.addItem(" <span><h3>Scrolling Data 2</h3></span> ");
myScroller1.addItem(" <span><h3>Scrolling Data 3</h3></span> ");

myScroller1.setPause(2000);
//set pause beteen msgs, in milliseconds

Download Script     Live Demo

Note : Best view open with Firefox and Safari brower.
Thursday, February 12, 2009

Displaying RSS Feed with PHP

This article explains to displaying RSS(XML format) feed like popurls.com (popular urls in one place) using simplexml_load_file() a PHP function. It's very useful to display your blog feeds as like Recent articles(headlines) list.

RSS- Really Simple Syndication.

Reading XML data and presenting with HTML.

Download Script     Live Demo

Index.php RSS display page:
File contains HTML tags and PHP included rssclass.php. You have to change the RSS feed URL.
<div>
  <?php
  include('rssclass.php');
  $feedlist = new rss('http://feeds2.feedburner.com/9lesson');
  echo $feedlist->display(9,"9lessons");
 
  $feedlist = new rss('http://feeds.feedburner.com/nettuts');
  echo $feedlist->display(9,"Nettuts");
 
  $feedlist = new rss('http://feeds.labnol.org/labnol');
  echo $feedlist->display(9,"Labnol");
  ?> 
  </div>
Popurls.com screen shot

rssclass.php
A beautiful PHP function simplexml_load_file() to load and read XML file. simplexml_load_string() XML string reader.
<?php
 class rss {
     var $feed;

  function rss($feed) 
    {   $this->feed = $feed;  }
 
  function parse() 
    {
    $rss = simplexml_load_file($this->feed);
    
    $rss_split = array();
    foreach ($rss->channel->item as $item) {
    $title = (string) $item->title; // Title
    $link   = (string) $item->link; // Url Link
    $description = (string) $item->description; //Description
    $rss_split[] = '<div>
        <a href="'.$link.'" target="_blank" title="" >
            '.$title.' 
        </a>
   <hr>
          </div>
';
    }
    return $rss_split;
  }
  function display($numrows,$head) 
  {
    $rss_split = $this->parse();

    $i = 0;
    $rss_data = '<div class="vas">
           <div class="title-head">
         '.$head.'
           </div>
         <div class="feeds-links">';
    while ( $i < $numrows ) 
   {
      $rss_data .= $rss_split[$i];
      $i++;
    }
    $trim = str_replace('', '',$this->feed);
    $user = str_replace('&lang=en-us&format=rss_200','',$trim);
    $rss_data.='</div></div>';
    return $rss_data;
  }
}
?>

CSS code :
Style just view the Live Demo
.vas{
    float:left;
    width:270px;
    padding:10px;
}
.title-head {
    font-size:18px;
    font-weight:bold;
    text-align:left;
    background-color:#006699;
    color:#FFFFFF;
    padding:5px;}
.feeds-links {
    text-align:left;
    padding:5px;
    border:1px solid #dedede;
 }
Download Script     Live Demo
Thursday, February 05, 2009

SMTP Feedback Mail class with jQuery Slide Effect.

This post about feedback mail with nice slide effect using php SMTP class and jQuery. It's very useful to add your php websites as like contact/feedback page.
I have downloaded this SMTP class from phpclasses.org. Include with jQuery Slide effect just you have to upload these files into hosting server.

Feedback page with slide effect.


Download Script     Live Demo

You have to add this jquery script in feedback.php:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/
1.3.0/jquery.min.js">type="text/javascript" </script>
 
<script type="text/javascript">
$(document).ready(function(){
 
 $(".button-slide").click(function(){

  $("#board").slideToggle("slow");
  $(this).toggleClass("active"); return false;

 });
  
});
</script>
feedback.php
Contains simple PHP and HTML script. You have to change feedback email id.
<?php
require ("smtpclass.php");
if($_SERVER["REQUEST_METHOD"] == "POST")
 {
$smtp=new SMTPMAIL;

$from=$_POST['email']; 
$body=$_POST['msg']; 
$to="Admin<[email protected]>";

$cc="";
$subject="Feedback Mail";
 
  if(!$smtp->send_smtp_mail($to,$subject,$body,$cc,$from))

 $error="Error in sending mail!<BR>Error: ".$smtp->error;
  else
 $report="Mail sent succesfully!";
}
?>
<div style="display: none;" id="board" align="center"><br />
<form id="form1" name="form1" method="post" action="">

  Your Email : <input type="text" name="email" size="25"/>
  Message :<textarea name="msg"  rows="5" cols="23"></textarea>

  <input type="submit" value=" Send " />
  <?php echo $report; echo $error; ?>

  </form></div>
<div align="center"><a href="#" class="button-slide">
Feedback </a></div>

SMTPclass.php
Upload this file into your hosting space. No need to touch this code it's automatically detects your website SMTP mail address.

Download Script

CSS Code :
Include this CSS code in feedback.php.
#board {
  background:#dedede;
 height: 205px;display: none;
  width: 300px;border-bottom: solid 4px #006699;
  position:absolute;
 }
.button-slide {
 text-align: center;background-color:#006699;
  width: 94px;height: 21px;
  padding: 6px 6px 0 0;margin: 0 auto;display: block;
  font: bold 120%/100% Arial, Helvetica, sans-serif;
  color: #fff;text-decoration: none;
 position:fixed;
}
Download Script     Live Demo
Note : I was hosting my demos is 110mb.com. Its a free php hosting area they are not providing any SMTP support.


Related Post :
Delete a Record with animation fade-out effect using jQuery and Ajax.
Twitter Like Flash Message with jQuery.
Perfect Javascript Form Validation using Regular Expressions.
Analyzing URLs as Links to the resource using a PHP function.
Exactly Twitter like Follow and Remove buttons with jQuery and Ajax
Saturday, January 31, 2009

Some Javascript Tips - Form Validation, Toggle Messages

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.
You have to add a link to validatepost.js into your page:

<script language="javascript" src="validatepost.js"></script>

Download Script     Live Demo

Clear 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.
The code :
<script type="text/javascript"&gt;
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>

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" >
&nbsp;&nbsp;<span id="msg-1" class="msg" style="visibility:hidden;"  >Enter Valide Email. </span>

Download Script     Live Demo
Related Posts
Delete a Record with animation fade-out effect using jQuery and Ajax.
jQuery Username Live validation.
Tuesday, January 27, 2009

Analyzing URLs as Links to the resource using a PHP function.

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;
}
?>

Download Source Code     Live Demo

If 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.
mailxengine Youtueb channel
Make in India
X