Get data from MySQL in PHP

To get data from MySQl is a base for PHP programming.
First we create a table in XAMPP: (go to http://localhost/phpmyadmin/
or http://localhost/xampp if you installed XAMPP)
CREATE TABLE income
(
   username VARCHAR(20) NOT  NULL,
   income_type CHAR(1) NOT NULL,
    income DECIMAL(18,2)NOT NULL
   ) ENGINE  =  MYISAM;

Then insert some data:
INSERT INTO income(username,income_type,income) VALUES
 ('j1','A','2000.0' ),
 ('j2','B','2050.5' ),
 ('j3','A', '300.0'),
 ('j4','B', '400.0');

Now we fetch  this 2d array data using 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 exist!"); 
   $income_data = Array();

 $sql = 'SELECT * FROM income';
  $result = mysql_query($sql);
   while($row = mysql_fetch_assoc($result)){
      // Assign  MySQL result to a multi-dimensional array
       $income_data[] = $row;
    }
//Extract data from the multi-dimensional  array
echo '<h2>';
echo 'username, income_type, income <br />';
foreach($income_data as $my_data){
       foreach($my_data as $key=>$data) echo  $data.',   ';
        echo '<br />';
}
echo '</h2>';
?>

Display all folder size in WIndows 7.

It is easy to the size of only one folder in Windows 7. Just right click the folder to see properties or mouse hover over the folder. But I want to see all the folders size at the same time.  There is a freeware for folder size can be downloaded from  the following link:
http://www.mindgems.com/products/Folder-Size/Folder-Size.html
Demo picture: you can see the folder size,  total number of files and sub-folders

verlet-js: physics engine written in javascript.

You can construct a lot of things based on particles, distance constraints, and angular constraints using verlet-js:
You can download it from:
 https://github.com/subprotocol/verlet-js/archive/master.zip
The software website:
 https://github.com/subprotocol/verlet-js
Demo link:

1. Shapes (Hello world)
2. Fractal Trees
3. Cloth
4. Spiderweb

The demo of web and spider using verlet-js is shown below. You can drag web and spider around. It is a cool animation effect.

PHP/MySQL store time and compare time

1)Using MySQl datetime to create timestamp in year-month-day hour-minute-second
CREATE TABLE  `cnsh_lms`.`cesei_member_extra` (
  `member_id` mediumint(8) unsigned NOT NULL,
  `dept_type` tinyint(4) NOT NULL default '0',
  `edu_type` tinyint(4) NOT NULL default '0',
  `modify_date` datetime default '0000-00-00 00:00:00',
  PRIMARY KEY  (`member_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
2)  Using PHP function date('Y-m-d H:i:s') to create time compatible with MYSQL datetime
 $modify_date = date('Y-m-d H:i:s');   
3) Create a form to select month, day and year.
                      <select name="s_m" id="s_m">
                        <?php
                           for($time = 1; $time <= 12; $time++){
                              echo('<option value="'.$time.'"');
                                  if($_GET['s_m'] == $time)
                              {
                                 echo(' selected="selected"');
                              }                  
                            
                              if(date("n") == $time){
                                  if(!isset($_GET['s_d'])) echo(' selected="selected"');
                              }
                              echo('>'.date("F",mktime(0,0,0,$time)).'</option>');
                           }
                        ?>
                     </select> -
                     <select name="s_d" id="s_d">
                        <?php
                           for($time = 1; $time <= 31; $time++){
                              echo('<option value="'.$time.'"');
                              if($_GET['s_d'] == $time)
                              {
                                 echo(' selected="selected"');
                              }
                            
                              if(date("j") == $time){
                                 if(!isset($_GET['s_d'])) echo(' selected="selected"');
                              }
                            
                              echo('>'.sprintf("%02d", $time).'</option>');
                           }
                        ?>
                     </select> -
                     <select name="s_y" id="s_y">
                        <?php
                           for($time = 2005; $time <= 2025; $time++){
                              echo('<option value="'.$time.'"');
                             if($_GET['s_y'] == $time)
                              {
                                 echo(' selected="selected"');
                              }                        
                              if(date("Y") == $time){
                                  if(!isset($_GET['s_y'])) echo(' selected="selected"');
                              }
                              echo('>'.$time.'</option>');
                           }
                        ?>
                     </select>
4)  using PHP function mktime to return unix time
$search_date  = mktime(0,0,0,intval($_POST['s_m']),intval($_POST['s_d']),intval($_POST['s_y']));
5) Using MySQl UNIX_TIMESTAMP to transfer datetime to UNIX time to compare.
$sql="SELECT * FROM cesei_member_extra WHERE UNIX_TIMESTAMP(modify_date)  >= ".$search_edate;

CSS3 box shadow, border radius and rotate

CSS3 box shadow syntax:
box-shadow:inset x-offset y-offset blur-radius spread-radius color
This is for Firefox4.0+, Google Chrome 10.0+, Opera10.5+ and IE9
For Safari and Google Chrom10.0-, which used webkit core -webkit, i.e.we use
-webkit-box-shadow
For Firefox 4.0-, which used Mozilla core -moz, i,e we use:
-moz-box-shadow
Example code for shadow box: here I also use CSS3 transform to rotate the box,
use  border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius for box corner radius.
<html>
    <head>
       <style>
      .demo1 {
      /*box-shadow:inset x-offset y-offset blur-radius spread-radius color*/
      /*Safari and Google Chrom10.0-*/
          -webkit-box-shadow: 3px 3px 3px;
     /*Firefox 4.0-*/
        -moz-box-shadow: 3px 3px 3px;
       /*Firefox4.0+, Google Chrome 10.0+, Opera10.5+ and IE9*/
     box-shadow: 3px 3px 3px;
       width: 50%;
        height:200px;
       background-color:lightblue; 
      transform:rotate(-5deg); 
       border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
   border-bottom-left-radius: 10px;
      }            
        </style>
    </head>
    <body>
    <h1>CSS3 box shadow</h1>   
        <div class="demo1">test</div>   
    </body>   
</html>

Demo result:

test

morris.js - Plot nice charts using jQuery

morris.js website:
http://www.oesmith.co.uk/morris.js/

 Add morris.js and its dependencies (jQuery & Raphaël) to your page to plot nice charts.
Example code:

<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.2.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.2.min.js"></script> 

 <div id="myfirstchart" style="height: 250px;"></div>

<script> 

new Morris.Line({

  // ID of the element in which to draw the chart.

  element: 'myfirstchart',

  // Chart data records -- each entry in this array corresponds to a point on

  // the chart.

  data: [

    { year: '2008', value: 20 },

    { year: '2009', value: 10 },

    { year: '2010', value: 5 },

    { year: '2011', value: 5 },

    { year: '2012', value: 20 }

  ],

  // The name of the data record attribute that contains x-values.

  xkey: 'year',

  // A list of names of data record attributes that contain y-values.

  ykeys: ['value'],

  // Labels for the ykeys -- will be displayed when you hover over the

  // chart.

  labels: ['Value']

});

 </script>

DEMO:

Wayback Machine - see archived versions of web pages across time

Wayback Machine see archived versions of web pages across time  URL:
http://archive.org/web/web.php

Wayback Machine has done a backup to the entire Internet  since 1996, and now accumulated a total of 150 billion pages. It is very simple to use: enter the URL at URL box at the top of the page, click on the "Go Wayback" button, and then select the date you want to view (not every day that backup), you can see a retrieve lost or modified page. Want to see a site what it was like in the past? To pass through it!

My CSS Video tutorial

Click each link, a video will popup.
 CSS basic (1) - ID and class
  CSS basic (2) - font, table and links
  CSS baisc (3) - margin, padding, border and float
  CSS baisc (4) - media
  CSS Basic(5) - Vertical and horizontal menus
  CSS basic(6) - CSS3 box shadow, border radius and rotate

Webplayer - play your audio and video easily online

Webplayer website:
http://webplayer.yahoo.com/
HTML code: very simple: include the first line js script and add your video/audio links
<script type="text/javascript" src="http://webplayer.yahooapis.com/player.js"></script>
<a href="http://mediaplayer.yahoo.com/example3.mp3">Yodel (mp3 link)</a> <br />
<a href="http://www.youtube.com/watch?v=i56XeM0-b8Y">Zoetrope (YouTube link)</a> 

Demo: click the following links to play online, videos or music will popup

Yodel (mp3 link)
Zoetrope (YouTube link)

Speech recognition in search box in Google Chrome

HTML speech input API only works for Google Chrome. To use speech input API in search box:
1) embed the following in your site:

<form method="get" action="http://www.google.com/search">
 <input type="text" name="speech" size="40" x-webkit-speech/>
 <input type="submit" value="Google Search" />
</form>

 2) The following search box will appear:

3)Only in Google Chrome, you can see a microphone icon at the end of search box
4) Click on microphone icon at the end of search box, speak to your microphone, you can see the voice volume is changing
5) Your speech will be converted to text in the search box
6) Click search.

Convert midi file to wav or mp3 using itune

We can Convert midi file to wav or mp3 using itune.
1) Download  itune for free for Windows or Mac from:
http://www.apple.com/asia/itunes/download/
2)Run itune, at the top left corner, click and select show menu
3)In Menu, File->New->Playlist, click add file to library or drag .mid files to itune Window
4)Click Edit->Preference, click General->Import Settings (same row as when you insert a CD)
5) Select import using WAV Encoder or  MP3 Encoder for output for wave or mp3 format.
6) File->Create New version->Create Wav version to output audio in .wav format.
7) Output file location:   Edit->Preference->Advanced, under ITunes Media folder location.

Export animation from synfig to YouTube format

If you do not have money to buy Adobe CS6, you may think about  synfig for your animation.  Synfig Studio is a free and open-source 2D animation software and creates film-quality animation using a vector and bitmap artwork. You can create  animation easily frame-by frame using sygfig built-in tools.
Synfig can be downloaded from:
 http://www.synfig.org/cms/

.To export the animation to youtube format:
Right click on animation, in pop-up menu, select File->render, in pop-up window,  change filename ending .yuv, target Auto. For example you produce twilight1.yuv file. Tying following command in Windows command prompt with same directory of yuv file:
ffmpeg -i twilight1.yuv -sameq twilight1.mpg 
You will produced a mpg file twilight1.mpg, which can be uploaded to YouTube.
Reference:
 http://wiki.synfig.org/wiki/Render_options