Walk on the ocean floor using Google map

Google map added a new  feature underwater panoramic images:
http://maps.google.com/help/maps/streetview/gallery.html#!/ocean
In future, you can explore the ocean in  the same way as current street map on Google.

Video: Explore the ocean with Google Maps 
 Google Maps strives to provide people around the globe with the most comprehensive, accurate and usable map of the world - including the underwater world.

Ultimate CSS Gradient Generator

We can use start color and stop color to make a CSS gradient to make background color better. We can use Ultimate CSS Gradient Generator to produce CSS gradient online:
http://www.colorzilla.com/gradient-editor/

The feature of  Ultimate CSS Gradient Generato:
1) Support for radial and diagonal linear gradients
2) Support hue/saturation adjustment and reverse
3)Support import from images and CSS

Download a hidden flash or video in a single step

In a complicated website containing a flash or video, it is very difficult to find the source file of flash to download via looking at HTML source.

There is  a simple way to download flash swf in Firefox.
1) Go to the website which embeds a flash.
2)  Right click on that page, select "view page info"
3) Click media, and find swf file in the list as following:

4) Click "save as" and the flash file will be saved to your local computer.


Video:

PHP Simple HTML DOM Parser

PHP simple HTML DOM Paser can be downloaded from:
http://sourceforge.net/projects/simplehtmldom/

Example:
http://simplehtmldom.sourceforge.net/

PHP Simple HTML DOM Parser:

• A HTML DOM parser written in PHP5+ let you manipulate HTML in a very easy way!
• Require PHP 5+.
• Supports invalid HTML.
• Find tags on an HTML page with selectors just like jQuery.
• Extract contents from HTML in a single line.

My example  to extract a swf link for a flash website as following test.php
 <?php
 // Create DOM from URL or file
 include_once('simple_html_dom.php');
$html = file_get_html('http://www.flash88.net/WishList/2012/9/2/List_1870.html');
// Find all images
foreach($html->find('EMBED') as $element)
      echo $element->src . '<br>';
?>

Return:
http://www.flash88.net/flash882004y12y9auto3ty//mtv/85.swf

Add Adsense in PHPBB3 forum

I have a PHPBB3 forum:
http://jiansenlu.comze.com

To add AdSense in PHPBB3 forum,
1) Go to Administrator Control Panel, Click styles at the top menu,
then click templates at right menu
2)  Click edit button near subsilver2
I do not want to show ads everywhere in the admin control, so I choose not to modify overall_header.html. I only modified viewforum_body.html, viewtopic_body.html, index_body.html.
In the drop down menu, select  these files and add the following code  under the first line:
(replace xxxxxxxxxx to your adsense ID)
<div class="adsense" style="width:728px;margin:auto;float:center">
<script type="text/javascript">
<!--
google_ad_client = "pub-xxxxxxxxxx";
/* 728x90, created 10/14/10 */
google_ad_slot = "4962036764";
google_ad_width = 728;
google_ad_height = 90;
</script>
 <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
<br />
<script type="text/javascript">
<!--
google_ad_client = "pub-xxxxxxxxxx";
/* 728x15, created 10/14/10 */
google_ad_slot = "3734232982";
google_ad_width = 728;
google_ad_height = 15;
</script>
 <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div>
<p />

Result can be seen in my PHPBB3 forum:
http://jiansenlu.comze.com

A Simple way to Add Adsense at Drupal

I have a Drupal website:
http://swf.site40.net

I found a simple way to add AdSense in Drupal.

1) Go to admin panel,
2) Click Block under Structure menu
3) Click "Add Block"
4) Fill block title and block description,  under Block body, click HTML ( I used TinyMce online editor) and paste my AdSense code.
5) Under Bartik (default theme), select content. Under Seven (administration theme), select none.
6)  Under Visibility settings:
Pages, check the check box: All pages except those listed 
Content types, check the check boxes, basic page, book page, blog entry  
Roles: anonymous user 
7) The ads will be shown in any pages except the pages when admin login.

Desing an online plot tool use flot library

Flot is an attractive JavaScript plotting for jQuery, can be download:
http://www.flotcharts.org/

I designed an online plot tool based on flot library, which can be found:
http://swf.site40.net/OnlinePlot/
or
http://www.jiansenlu.zoka.cc/OnlinePlot/

Users can enter and number of points (maximum 20) and data, click "Start Plot" to plot online.

Submit a form in jQuery

Below is the example code to submit a form in jQuery:
  <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<form id="myForm"  method="post" action="#">
    Name: <input type="text" name="username"   />
    Comment: <textarea name="comment"></textarea>
    <input type="submit" value="Submit Comment" />
</form>
<script type="text/javascript">
$('#myForm').submit(function() {
    alert($('input:text[name=username]').val());
  return false;
})
</script>

The form id is myForm. To submit a form, the jQuery  method $('#myForm').submit(function() {}) is used. To access the form data username in input text: $('input:text[name=username]').val()

Demo:

Name:

Comment:

excel, open csv file using space not comma as a delimiter

In default,Miscrosoft EXCEL only uses comma as a delimiter to open a csv file. If you want to open a CSV file using space as a delimiter in EXCEL, adding
sep=
at the top of your csv file will solve the problem.

Design a HTML color picker

Design a HTML color picker:
http://swf.site40.net/colorpicker/
or
http://www.jiansenlu.zoka.cc/colorpicker/ 

1) You can enter your color code to display the color in input
or
2) pickup the color from the box under input, the color code will be display in input.

The code is modified from js color library:
http://jscolor.com/

in jscolor.js: line 572 change
    function removePicker() {
          delete jscolor.picker.owner;
           document.getElementsByTagName('body')[0].removeChild(jscolor.picker.boxB);
        }
to
    function removePicker() {
        //    delete jscolor.picker.owner;
        //    document.getElementsByTagName('body')[0].removeChild(jscolor.picker.boxB);
        }

line 907 change
        // target
        jscolor.addEvent(target, 'focus', function() {
            if(THIS.pickerOnfocus) { THIS.showPicker(); }
        });
to
        THIS.showPicker();
        // target
        jscolor.addEvent(target, 'focus', function() {
            if(THIS.pickerOnfocus) { THIS.showPicker(); }
        });

Design an online IP tool using PHP

Design an online IP tool, be able to detect visit IP address, convert hostname to IP address by input, and convert hostname to IP address by input, the tool is located:
http://www.jiansenlu.zoka.cc/IPtools/
or
http://swf.site40.net/IPtools/

First we define a css ID jiansen for input box:background color:
 <style type="text/css">
  #jiansen
{
    background-color: #ccffcc;
    font-family: /* "Lucida console", */ Verdana, Arial, Helvetica, sans-serif;
}
</style>


 1. To get user IP address using $_SERVER["REMOTE_ADDR"]
<?php
function getip() {
    if (isSet($_SERVER)) {
        if (isSet($_SERVER["HTTP_X_FORWARDED_FOR"])) {
            $realip = $_SERVER["HTTP_X_FORWARDED_FOR"];
        } elseif (isSet($_SERVER["HTTP_CLIENT_IP"])) {
            $realip = $_SERVER["HTTP_CLIENT_IP"];
        } else {
             $realip = $_SERVER["REMOTE_ADDR"];
        }
    } else {
         if ( getenv( 'HTTP_X_FORWARDED_FOR' ) ) {
              $realip = getenv( 'HTTP_X_FORWARDED_FOR' );
         } elseif ( getenv( 'HTTP_CLIENT_IP' ) ) {
              $realip = getenv( 'HTTP_CLIENT_IP' );
         } else {
              $realip = getenv( 'REMOTE_ADDR' );
         }
    }
    return $realip;
} 

echo "<h2>1. Your IP:</h2><p>";
echo "<font color='red'> Your computer's IP address is </font> <font color='blue'>".getip()."</font>";
?>

2. Find a website IP address using gethostbyname
 <FORM name="search" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
Enter URL: <INPUT type="text" name="url" size=40 value=" " class="textbox" id='jiansen'>
<INPUT type="submit" name="submit" value="Get IP" class="button">
</form>
<?php
$url=strtolower(trim($_POST['url']));
$url=str_replace('http://','',$url);
$url=str_replace('https://','',$url);

If($url){
//$last = substr($url,-1);
//if($last=='/') $url=substr($url,0,-1);
//remove the string after /
if(strpos($url, '/')>0) $url=substr($url,0,strpos($url, '/'));
if($url==gethostbyname("$url"))
echo "Your URL is not valid";
else
echo "The IP address of ".$url." is ".gethostbyname("$url");

}
?>

3.  Find hostname from IP address:
<FORM name="form2" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
Enter IP: <INPUT type="text" name="host" size=40 value=" " class="textbox" id='jiansen'>
<INPUT type="submit" name="submit1" value="Get host" class="button">
</form>
<?php
$host=trim($_POST['host']);

If($host){
if($host==gethostbyaddr("$host"))
echo "Your IP is not valid";
else   
echo "The hostname of IP address  ".$host." is ".gethostbyaddr("$host");
   
}   
?>

Design an online text to pdf conversion tool

Design an online text to pdf tool. Convert text in online editor to pdf, remote image and paste from Microsoft Words are enabled. My online  text to pdf tool is located at:
http://swf.site40.net/texttopdf/
or
http://www.jiansenlu.zoka.cc/texttopdf/

Enter the text in online editor or paste from Word and click "Convert to pdf button" and yoy will get 
a pdf file. The conversion is secure.

The online editor I used is Tinymce, detail can be found:
http://www.tinymce.com/

The pdf library I used is dompdf:
http://code.google.com/p/dompdf/

Browser type: window.navigator in JavaScript

window.navigator returns a reference to the navigator object:
 The detail of properties and methods of window.navigato can be found:
https://developer.mozilla.org/en-US/docs/DOM/window.navigator

One of the method navigator.userAgent

Returns the user agent string for the current browser.

Example:
    <script type="text/javascript">
       document.write(window.navigator.userAgent);    
    </script>
Return in my local computer:
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:15.0) Gecko/20100101 Firefox/15.0.1  
To get Firefox/x.x or Firefox x.x, string.match is to find the match pattern
 var firefox= /Firefox[\/\s](\d+\.\d+)/;
 window.navigator.userAgent.match(firefox);
which returns 
Firefox/15.0,15.0
Use Number(RegExp.$1)
to return Firefox version 15 and convert to number.

Final code to detect Firefox and return version in JavaScript:
     <script type="text/javascript">
        var firefox= /Firefox[\/\s](\d+\.\d+)/;
       if( window.navigator.userAgent.match(firefox))  
       document.write("Firefox version "+Number(RegExp.$1));
    </script>
Note RegExp.$1 returns the first match pattern in the last memory, i.e.(\d+\.\d+),
x.x in firefox
Similarly, for Internet Explorer:
var MSIE=/MSIE (\d+\.\d+);/;
For Opera
Var Opera=/Opera[\/\s](\d+\.\d+)/ ;
To detect operation system we can use the following JavaScript:
    <script type="text/javascript">   
      var ua=window.navigator.userAgent.toLowerCase();
      if(ua.indexOf("win")>-1)
         document.write("It is Windows") 
      else if(ua.indexOf("linxu")>-1)
          document.write("It is Linux")
       else if(ua.indexOf("mac")>-1)
              document.write("It is Mac");    
    </script>

Add a flash clock in your blog

There are a lot of flash clocks  for download:
http://flash-clocks.com/documents/flash-clocks-gallery.html 
 

Note, this clock gets time from your local computer. If your local computer time is wrong, the display will be wrong. You can choose one to embed.  I choose one and embed it to my blog sidebar, the embed code:
<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-61.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>
Demo:

PHP, check if a file is modified using md5_file

To check if a file is modified in PHP,  we use md5 algorithm and PHP function md5_file() function
1)  First, we store the file for example " test.txt" md5 in  md5test.txt using PHP function   md5_file
<?php
    $md5file = md5_file("test.txt");
    file_put_contents("md5test.txt",$md5file);
  ?>
2)  As the time goes by, we can compare the md5 of the file to the md5 stored.
<?php
    $md5file = file_get_contents("md5test.txt");
    if (md5_file("test.txt") == $md5file)
    {
        echo "The file test.txt does not change.";
    }
    else
    {
        echo "The file test.txt has been changed.";
    }
   ?> 

PHP MySQL pagination design

When we have many records in MySQL database, we need PHP MySQL pagination design to display MySQL data.

1) First we need to define how many records to display per page, for example 100
  $pageCount =100;
 2)  Use limit to extract MySQL data per page, for first page in MySQL table members

SELECT  * FROM members LIMIT 0,100;

similary, for second page:

SELECT  * FROM members LIMIT 100,100;

For third page 
SELECT  * FROM members LIMIT 200,100;

3)Use PHP GET method to obtain the page number in URL, such as
index.php?page=2
for second page

Example code: index.php
   <?php 
//Connect to MySQL server
        $conn = @mysql_connect("localhost","root","") || die("MySQL connection error"); 
//Connect to database test
        @mysql_select_db("test") || die("test database not exsit!"); 
          
//Get data from table members
        $sql = "SELECT * FROM member"; 
        $result = mysql_query($sql) ; 
//Total number of records
        $rowsNum = mysql_num_rows($result);
// Number of records per page is 100 
       $pageCount =100;
        $pageSize = ceil($rowsNum / $pageCount);  ; 
//Get  the page number, default is 1 first page
        $pageno = $_GET["pageno"]; 
        if ($pageno == "") $pageno = 1; 
        $offset = ($pageno -1) * $pageSize; 
     
        $sql .= " limit {$offset},{$pageSize}"; 
        $result = mysql_query($sql); 
    ?> 
    <table width="850" border="0" cellpadding="5" cellspacing="1" bgcolor="#666666"> 
    <?php if($rowsNum) {?> 
    <tr> 
    <td bgcolor="#FFFFFF">ID</td> 
    <td bgcolor="#FFFFFF">User Name</td> 
    </tr> 
    <?php while($row = mysql_fetch_array($result)){ ?> 
    <tr> 
    <td bgcolor="#FFFFFF"><?php  echo $row['id']; ?></td> 
    <td bgcolor="#FFFFFF"><?php echo $row['name']; ?></td> 
    </tr> 
    <?php } ?> 
    <tr> 
    <td colspan="2" bgcolor="#FFFFFF"> 
        <?php 
            if($rowsNum <= $pageSize) 
            { 
            echo "1"; 
            } 
            else  
            { 
                for($i=1;$i<=$pageCount;$i++) 
                echo "<a href=\"{$_SERVER['PHP_SELF']}?pageno={$i}\">{$i}</a>  "; 
            } 
        ?> 
    </td> 
    </tr> 
    <?php } else { ?> 
    <tr> 
    <td bgcolor="#FFFFFF">Sorry, nor record found!</td> 
    </tr> 
    <?php }?> 
    </table>     

PHP: Produce random string for password

Below is the PHP function to produce random string for passwords:
Method 1:  Random pickup letters and number

 <?php
//$length is the string length to produce
    function generate_rand($length){
  $c= "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  //microtime() return microsecond part of unix time, betwee 0-1
  srand((double)microtime()*1000000);
 
  for($i=0; $i<$length; $i++) {
      $rand.= $c[rand()%strlen($c)];
  }
  return $rand;
}
 //Produce password with 6 letters+number
  echo generate_rand(6);
?>

Method2: Produce a password more like a word, easy to remember, such as ninotu
 <?php
function readable_random_string($length){
   $conso=array("b","c","d","f","g","h","j","k","l", "m","n","p","r","s","t","v","w","x","y","z");   
   $vocal=array("a","e","i","o","u");
   $password="";
   $max = $length/2;
//For random number rand() initialization

  srand((double)microtime()*1000000); 

    for($i=1; $i<=$max; $i++)    {
      $password.=$conso[rand(0,19)];
      $password.=$vocal[rand(0,4)];
 }
    return $password;

}
  echo readable_random_string(6);
  ?>

Desigh an online JavaScript and Jquery tool

--> -->


Basic idea to  design an online JavaScript and Jquery tool to run  and  display JS script online:
1) Left panel is the source code of JavaScript and JQuery code, Jquery library is already loaded. Right panel is the running result of JavaScript code:
2)  Use HTML form:
<form id="diy_form" action="test1.php" method="post" target="diy_result">
<textarea name="code">
</textarea>
</code>
<p><span><input id="diy_submit" name="submit" value="Run the code" type="submit"></span>
</form>

In test1.php:
 <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<?php
    echo $_POST['code'];
?>

Due to that  my server default is to addslashes for all POST data, I need to add  stripslashes to reverse
 <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<?php
    echo stripslashes($_POST['code']);
?>

The result:

 http://swf.site40.net/jstools/
or 
http://www.jiansenlu.zoka.cc/jstools/

To test jQuery: you can use the following code to the left panel:
 <a href="http://jquery.com/">jQuery</a>
   <script>
     $(document).ready(function(){
       $("a").click(function(event){
         alert("As you can see, the link no longer took you to jquery.com");
         event.preventDefault();
       });
     });
   </script>

DOM, add text node

Below is the JavaScript to add a text node in DOM when the usersclick the add text node button:
The parent node is p1: <p id="p1">First line of paragraph.<br /></p>
 Using appendChild function to add extra text node
    <script type="text/javascript">
var i=0;
    function addTextNode()
    {
    var newtext = document.createTextNode(" Some text added dynamically. "+(++i));
    var para = document.getElementById("p1");
    para.appendChild(newtext);
    }
 </script>
<div style="border: 1px solid red">
    <p id="p1">First line of paragraph.<br /></p>
    </div>
  <button onclick="addTextNode();">add another textNode.</button>

Demo:

First line of paragraph.

To get p1 node (id is p1) and all its child nodes:
  <script type="text/javascript">
     function getText(n) {
        // Repeated string concatenation can be inefficient, so we collect
        // the value of all text nodes into an array, and then concatenate
        // the elements of that array all at once.
        var strings = [];
        getStrings(n, strings);
        //return strings.join("");

        // This recursive function finds all text nodes and appends
        // their text to an array.
        function getStrings(n, strings) {
            if (n.nodeType == 3 /* Node.TEXT_NODE */)
                strings.push(n.data);
            else if (n.nodeType == 1 /* Node.ELEMENT_NODE */) {
                // Note iteration with firstChild/nextSibling
                for(var m = n.firstChild; m != null; m = m.nextSibling) {
                    getStrings(m, strings);
                }
            }
        }
        alert(strings);
    }
    </script>
 <button onclick="getText(p1);">GetText</button>
Demo:

List of LMS (Learning Management System)

List of LMS (Learning Management System):
Moodle
Docebolms
ACheker
Atutor
Acontent
Logicampus 

More:
http://www.phpkode.com/projects/tag/lms/1/

JavaScript: Force background color

Below is the example to force HTML webpage background color  lightblue:

 <script type="text/javascript">
  function changeBackground(color) {
   document.body.style.background = color;
}
</script>
<body onload="changeBackground('lightblue');">

PHP security Sources

PHP security is mainly from：
1、Command Injection
2、Eval Injection
3、Script Insertion
4、Cross Site Scripting, XSS
5、SQL injection
6、Cross Site Request Forgeries, CSRF
7、Session Hijacking
8、Session Fixation
9、HTTP Response Splitting
10、File Upload Attack
11、Directory Traversal
12、Remote Inclusion
13、Dynamic Variable Evaluation
14、URL attack
15、Spoofed Form Submissions
16、Spoofed HTTP Requests

Prevent your webpage from copy and paste

To prevent your webpage from copy and paste, you can use following CSS style in your HTML body:
     <body  style="user-select: none; -moz-user-select: none; -webkit-user-select: none; 
   -o-user-select: none;">
        Your body content here
    </body>

For only part of the content, using div tag instead of body tag,  for example:

     <div  style="user-select: none; -moz-user-select: none; -webkit-user-select: none; 
   -o-user-select: none;">
        Here select, copy and past disabled.
    </div>
Demo:

Here select, copy and past disabled.

4 ways to apply CSS to HTML

There are 4 ways to apply CSS to HTML:
1) Using style attribute-inline:

Code:

<td STYLE="COLOR:BLUE; font-size:9pt;" > </td>

2) Using style tag:

Code:

<STYLE TYPE="text/css">
<!--
BODY {
　　color: BLUE;
　　background: #FFFFCC;
　　font-size: 9pt}
TD, P {
　　COLOR: GREEN;
　　font-size: 9pt}
-->
</STYLE>

It is better to put style between <head> and </head>

3. Using external link

Code:

<LINK REL="stylesheet" TYPE="text/css" HREF="example.css">

4. Using @import

Code:

<STYLE TYPE="text/css">
<!--
　　@import url(http://yourweb/ example.css);
-->
</STYLE>

Note HTML tags are not case sensitive.

Three name notations in computer coding

There are three name notations in computer coding: Pascal, Camel and Hungarian. It is better to use the same notation in all your codes.

Pascal notation:
first character of all words  is uppercase.
Example:  HelloWorld

Camel notation:
the first character of all words, except the first word,  is uppercase
Example: helloWorld

Hungarian notation:
the prefix encodes the  data type
Example:
bHelloWorld  is   Boolean data  type.

HTML comment lines and JavaScript comment lines

It is important to write comment lines to HTML files and JavaScript files for web designer. It can help web designers to well organize the code.
1. HTML comment line
start with <!-- (no space between <! and --), end with --> (it is OK to have space between -- and >)
Example
<!--
This is HTML comment line
-->

2. JavaScript comment line
single line comment starts with //
Example

// This is JS single line comment

Multiple lines start with /* and end with */
Example

/*
This JS multiple line
comment
*/

For JavaScript document line, start with /** and end with */
Example:

/**
  * This is function Helloworld()
 * @author Jiansen
  * @version 1.1.0
*/

Add spell check in Firefox

To add spell check in Firefox, go to
https://addons.mozilla.org/EN-us/firefox/addon/spell-checker/
under spell check, click add to Firefox and you have spell check for your online posts.