Thursday, May 31, 2012

Chrome JavaScript Console



Chrome JavaScript Console can help you  inspect  the DOM, debug  JavaScript  and  analyze HTML parse errors.

To start Chrom JavaScript Console:
 Select the Wrench menu  at the top-right of Chrome browser window, then select Tools -> Developer tools -> JavaScript Console

To use JavaScript console, for example I used www.google.com.
When I type body in prompt in console, it returns:
<span class="ctr-p" id="body">...</span>
At the right frame,  under style shown the body CSS, such as
body {
        background:white;
        color: #222;
}

You can type any CSS id or class to inspect. More for reference:
https://developers.google.com/chrome-developer-tools/docs/console

Sunday, May 27, 2012

Install Moodle



Moodle is a free open source learning management written in PHP.
Moodle can be downloaded from:
 http://download.moodle.org/

Somw tips to install Moodle.
In php.ini, you need to enable following:
extension=php_curl.dll
extension=php_intl.dll
extension=php_mysqli.dll
extension=php_soap.dll


Configure httpd.conf for Moodle path in Apache.
Run index.php in Moodle directory and follow instructions step by step.


Saturday, May 26, 2012

Reset admin password




Sometimes you installed Open source software such as Moodle in local host. You forgot the admin password and smtp password reminder is not set properly. You can access MySQL database, but password is md5 encrypted.

There is one way to solve this. In password field enter:
d41d8cd98f00b204e9800998ecf8427e 
Because MD5("") = d41d8cd98f00b204e9800998ecf8427e, so now your password is a empty string.
So you can login as admin without password. And reset password after login.

You can also directly  reverse md5 encrpted password online via:
 http://md5.gromweb.com/
Then you know the admin login password.

Friday, May 25, 2012

Install Java in Firefox




  • To test that Java is installed and working properly on your computer, run this test applet. If Java is working, the message will be "You Java is working", or "Agree and start download" button will show.
If you found Java is is not installed, you can also go to:
http://www.java.com/en/download/help/firefox_online_install.xml



Thursday, May 24, 2012

PHP quiz




The following PHP quiz is written using Java Script.   You can answer each question only once. Your score will be shown.
1.All variables in PHP start with which symbol?
&
$
!
#
2. In PHP you can use both single quotes ( ' ' ) and double quotes ( " " ) for strings:
True
False
I do not know
Not Always
3. Which is correct to include a file in PHP:
include('header.php');
#
include('header.php');
#require('header.php');
$require_once('header.php');
4.What can you use to replace dog with cat
preg_replace("dog", "cat", "I like dog");
preg_replace("cat", "dog", "I like dog");
preg_replace("/dog/", "cat", "I like dog");
preg_replace("dog", "/cat/", "I like dog");
5. Which syntax write "Hello World" in PHP
write('Hello World");
echo 'Hello World';
document.write("Hello World");
cout<<"Hello World";
6. What does PHP stand for?
Personal Homepage Preprocessor
PHP: Hypertext Preprocessor
Permanent Header Profile
Preprocessor Header Profile
7. PHP server scripts are surrounded by which delimiters?
<?php> <?>
<?php        ?>
<??            ??>
<?       php?>
8. What is the correct way to connect to a MySQL database localhost?
connect_db("localhost");
connect_mysql("localhost");
mysql_connect("localhost");
db_connect("localhost");
9. PHP comments have the following syntax:
//
#
!
<--?
10. Award!!! -- This blog is written by?
Jessie
Andy Lu
Jiansen Lu
All of Above























add videobar in this blog



Blogspot has a videobar gadget, where you can put 4 youtube videos in your blogspot sidebar.
Go to layout, add gadget, find videobar and add, in search box input: album music.
Result is shown in my blog right sidebar.
Click each video to get a bigger video. Click "I have finished watching this video" to close video window,

How to search other blogs in blogspot.com?



There are millions of blogs in blogspot.com. How to choose your favorite blogs and follow?

 One way is to use your blogspot.com profile.  For example, you can add "computer programming" in your interest if you want to search "computer programming" in blogspot.  Then you can click the link in "computer programming" in your profile and all related blogs will be shown.

Another way is to use Google search. You can type 
site: blogspot.com, computer programming
to  search "computer programming" blogs in blogspot.com.

You can follow the blogs you are interested and your blogs will be getting more visitors too.

Example:
 

Friday, May 18, 2012

Create a new Wordpress in Wordpress.com



 Create a Wordpress blog in wordpress.com
http://jiansenlu.wordpress.com/
Although I installed  two other wordpress  in my personal sites, I  appreciate to join wordpress community in wordpress.com.

Wednesday, May 16, 2012

Design a flash website



Design a flash website for myself, the link is:
 http://jiansenlu.comze.com/music-flash/
The result is as below:

Tuesday, May 15, 2012

Create your network free space at dropbox



You can get free 2GB space from dropbox:
 https://www.dropbox.com
You will install dropbox in your local computer.  You can access your files via dropbox.com or  share by computers. You can make links to files or folders in your Dropbox., quickly share your photos, docs, and videos with friends and colleagues — even if they don't have Dropbox. This is especially good for sharing large files and entire folder which is difficult to be sent by email.

Sunday, May 13, 2012

MySQL FULLTEXT Indexing in database Searching



To define the FULLTEXT index in your MySQL tables, you can search it using MATCH and AGAINST statements to search your database more efficiently.
1) To add FULLTEXT index:
CREATE TABLE blog_entries
(
  entryID INT(9) UNSIGNED NOT NULL DEFAULT '0' AUTO_INCREMENT,
  title CHAR(255) NOT NULL DEFAULT '',
  entry TEXT NOT NULL DEFAULT '',
  FULLTEXT(title,entry)
);


2) Using MATCH and  AGAINST in search:
SELECT title, entry FROM blog_entries
WHERE MATCH (title,entry) AGAINST ('Canada');
 
Here you  search Canada in title and entry.

If you do not use FULLTEXT index, you can use like in MySQL. But it is slow and inefficient.
Example:
 (SELECT FROM blog_entries WHERE title LIKE '%Canada%')
UNION
 (SELECT FROM blog_entries WHERE body LIKE '%Canada%')

3) IN PHP

 <?php

    MySQL_connect
("hostname""username""password");

    MySQL_select_db("my_db");

    
$query "

       

SELECT title, entry FROM blog_entries
WHERE MATCH (title,entry) AGAINST ('Canada')

    "
;

    
$sql MySQL_query($query);


    /* output results */
?>

Friday, May 11, 2012

Add full screen button in flash, AS3



I have design a bouncing ball  in
 http://jiansenlu.blogspot.ca/2012/05/design-bouncing-ball-flash.html
Now I want to add full screen button to make it full screen.
I follow the instruction in:
  http://circlecube.com/2009/03/how-to-use-fullscreen-in-as3-stage-display-state-tutorial/
There is one extra  thing which needs to be token care. When you embed your swf, you needto add
allowfullscreen parameter
<object>
    ...
    <param name="allowFullScreen" value="true" />
    <embed ... allowfullscreen="true" />
</object>
In my case:
<object>
<embed allowfullscreen="true" allownetworking="internal" allowscriptaccess="never" height="400" src="http://www3.telus.net/jianlu58/full_screen.swf" width="550"></embed>
</object>
Result: Click "Go FullScreen" button to see full screen effect.

Extra ActionScript code:
stage.scaleMode    = StageScaleMode.SHOW_ALL;
stage.align    = StageAlign.TOP;

var stageDisplayAdjustCounter:uint = 0;

fsb.addEventListener(MouseEvent.CLICK, fullscreenToggle);
ssb.addEventListener(MouseEvent.CLICK, fullscreenToggle);
stage.addEventListener(FullScreenEvent.FULL_SCREEN, onFullscreenChange);

fsb.buttonMode = true;
ssb.buttonMode = true;

//fullscreen buttons need this to adjust the stage display state.
//pressing escape to exit fullscreen bypasses this function
function fullscreenToggle(e:MouseEvent = null):void {
    status.appendText(stageDisplayAdjustCounter+". fullscreenToggle from "+stage.displayState+"\n");
    //normal mode, enter fullscreen mode
    if (stage.displayState == StageDisplayState.NORMAL){
        //set stage display state
        stage.displayState = StageDisplayState.FULL_SCREEN;
    }
    //fullscreen mode, enter normal mode
    else if (stage.displayState == StageDisplayState.FULL_SCREEN){
        //set stage display state
        stage.displayState = StageDisplayState.NORMAL;
    }
    status.appendText((stageDisplayAdjustCounter-1)+". fullscreenToggle to "+stage.displayState+"\n");
    status.scrollV = status.maxScrollV;   
}

//this function is called every and anytime the stage display state is adjusted
//either by pressing our buttons or
function onFullscreenChange(e:FullScreenEvent = null):void {
    status.appendText(stageDisplayAdjustCounter+". onFullscreenChange\n");
    status.scrollV = status.maxScrollV;
    if (stage.displayState == StageDisplayState.FULL_SCREEN) {
        fsb.visible = false;
        ssb.visible = true;
    }
    else {
        fsb.visible = true;
        ssb.visible = false;
    }
    stageDisplayAdjustCounter++;
}

onFullscreenChange();

Edit your photo online free using Photoshop



You may not have PhotoShop in your computer. But you can edit your photo online free. The web link is:
http://www.photoshop.com

You can  sign up for a free account and get online tools to edit, create, and share; A personal gallery and profile page, 2GB of free storage, slideshow templates and creation, video storage and streaming.
Below is my example after using online photoshop


Original photo

Design a bouncing ball flash



 To design a bouncing ball  in flash using ActionScript 3.0,

1) Start Flash CS5, click new-> actionscript 3.0, create a rectangle at Center using Rectangle Tool, convert it  to MovieClip with name mb  and the instance name: mybox
2) Create a ball and convert it to a MovieClip with name mc, in linkage select check box: Export to ActionScriot and Export to frame 1, name class as mc.
3) Press F9, input following ActionScript (require mybox  at center)
var mymc:mc=new mc();
mybox.addChild(mymc);
var ball_radius=20;
var maxx:int=mybox.width/2-ball_radius;
var maxy:int=mybox.height/2-ball_radius;
var xflay:Boolean,yflay:Boolean;
var p:uint=1;
setInterval(peng,10);

function peng(){
   
//trace(mymc.y);
    if(mymc.x>maxx-10 || mymc.x<-maxx) xflay=!xflay;
    if(mymc.y>maxy || mymc.y<-maxy) yflay=!yflay;
    if(xflay) mymc.x-=p;
    else mymc.x+=p;
    if(yflay) mymc.y-=p;
    else mymc.y+=p;
}
4) Export flash, below is the result:

Thursday, May 10, 2012

Formatting my post



Design a format to let my post look better:






























Li Po - Alone Looking at The Mountain
------------------------------------------------------------------------------------------------------------

All the birds have flown up and gone;
------------------------------------------------------------------------------------------------------------

A lonely cloud floats leisurely by.
------------------------------------------------------------------------------------------------------------

We never tire of looking at each other -
------------------------------------------------------------------------------------------------------------

Only the mountain and I.
------------------------------------------------------------------------------------------------------------


------------------------------------------------------------------------------------------------------------


------------------------------------------------------------------------------------------------------------





HTML: a text box with moving text Using Marquee tag



You do not have to use JavaScript to generate dynamic text. You can use Marquee tag to generate
dynamic text. The Marquee tag creates a scrolling effect and can be tailored to include any HTML content. The detail of how to use Marquee text can be found in:
http://www.htmlmarquee.com/

Example code of generating of a text box with moving text using  Marquee tag  as below:
<TABLE height=300 cellSpacing=0 cellPadding=0 width=500 align=center border=3>
<TBODY>
<TR>
<TD>
<P align=center>
<MARQUEE scrollAmount=3 direction=up>
<P align=center><FONT  color=#228c45 size=18>Welcome</FONT></P>
<P align=center><FONT  color=#228c45 size=18>To</FONT></P>
<P align=center><FONT  color=#228c45 size=18>My Blog </FONT></FACE></SIZE></COLOR></P></MARQUEE></P></TD></TR></TBODY></TABLE>

Result:

Welcome
To
My Blog

HTML, move picture up



HTML code for move picture and text up
 <DIV id=Layer2 style="Z-INDEX: 2; LEFT: 10px; WIDTH: 211px; POSITION: absolute; TOP: 100px; HEIGHT: 120px">
<TABLE cellSpacing=10 cellPadding=0 width="60%" border=0>
<TBODY>
<TR class=unnamed1>
<TD vAlign=top width="90%" height=274>
<DIV align=center>
<MARQUEE style="FLOAT: none; MARGIN-LEFT: auto; MARGIN-RIGHT: auto" scrollAmount=10 scrollDelay=99 direction=up width=400 height=600 border="0"><FONT color=#0ff000><FONT face=?? color=red size=5><B>Jiansen Lu</B></FONT><BR><BR><BR>
<IMG src=http://www.thepoolpeople.com/images/small_ball.png>
</FONT></MARQUEE>
</TD></TR></TBODY></TABLE></DIV>
Result:









Jiansen Lu


HTML, up and down sentences merge



Code for up and down sentences merge
  <P align=center>
<CENTER>
<MARQUEE direction=down height=60 scrollAmount=2>
<CENTER><FONT color=#a25e6b  size=8><B>Jiansen Lu</FONT></CENTER></B></MARQUEE>
<CENTER>
<MARQUEE direction=up height=60 scrollAmount=2>
<CENTER><FONT color=#a25e79 size=8><B>Jiansen Lu</FONT></CENTER></B></MARQUEE></CENTER></CENTER>

Result:

Jiansen Lu
Jiansen Lu

Tuesday, May 8, 2012

Copy entire directory in PHP



In PHP, we can copy a file using function copy, rename a file using rename function.
 How about copy entire directory?
Below is the function to copy entire directory.
<?
//string $source      the source directory
//string $dest         the destination directory
function copys($source,$dest)
{
   if (!is_dir($source)) {
      return false;
   }
   if (!is_dir($dest))   {
      mkdir($dest);
   }
 
   $h=@dir($source);
   while (@($entry=$h->read()) !== false) {
      if (($entry == '.') || ($entry == '..')) {
         continue;
      }

      if (is_dir("$source/$entry") && $dest!=="$source/$entry") {
         copys("$source/$entry", "$dest/$entry");
      } else {
         @copy("$source/$entry", "$dest/$entry");
      }
   }
   $h->close();
   return true;
}

?>

Monday, May 7, 2012

Test if mysql query returns no results in PHP




 Run MySQL query script to see if the query returns no results using mysql_num_rows function in PHP.
PHP Code:
<?php
global $db;
$sql = "SELECT event_id FROM cesei_activity"
 $result = mysql_query($sql, $db);
 if(mysql_num_rows($result)!=0){
           echo 'Number of rows returned = '.mysql_num_rows($result);
 } else{
            echo "No row returned";
}
?>      

Friday, May 4, 2012

Unix timestamp in PHP and MySQL



In PHP and MySQL, we often need to compare time. As there are a lot of time formats, it is better to compare time using Unix timestamp..  Unix timestamp is the number of seconds between the Unix Epoch (January 1 1970 00:00:00 GMT) and the time specified.

 PHP function mktime returns unix timestamp, the detail is as follows:
int mktime (int $hour, int $minute, int $second, int $month, int $day, int $year, int $is_dst )

Another similar function in PHP is: int strtotime ( string $time ), which parses about string datetime description into a Unix timestamp.
Example:
<?php
$date1='2009-08-18 00:02:00'; 
strtotime($date1);
?>
In MySQL, UNIX_TIMESTAMP(time) is used to get Unix timestamp. the column variable time should have  the format: 2009-08-18 00:02:00 (y-m-d h:m:s)

To change Unix timestamp back to time string format, the PHP function date can be used. Example:
$start_date = date("Y-m-d H:i:s", $_POST['start_date']);
where  $_POST['start_date']  is Unix timestamp format and $start_date   is normal string time format.
.
Below is the example to select time interval in HTML form to narrow down MySQL selection.
<?php
global $db;
$search_date = mktime(0,0,0,intval($_POST['s_m']),intval($_POST['s_d']),intval($_POST['s_y']));
$search_edate = mktime(23,59,59,intval($_POST['e_m']),intval($_POST['e_d']),intval($_POST['e_y']));
$time_filter .= ' AND UNIX_TIMESTAMP(last_accessed) >= '.$search_date.' AND UNIX_TIMESTAMP(last_accessed) <= '.$search_edate;

$sql = "SELECT *, SEC_TO_TIME(duration) AS time FROM edu_member_track
WHERE member_id=$member_id AND course_id=$module_id
ORDER BY last_accessed";
$result = mysql_query($sql, $db);
?>

Thursday, May 3, 2012

appendchild in Document Object Model



Document Object Model (DOM) contains node, element and attribute.
1)  Node is a reference to an element, including node name, nodeValue and nodeType
example:
<p id="intro">Hello World!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
Here nodeName of a text node is always #text, i.e. document.write(x.firstChild.nodeValue) return #text
document.write(x.firstChild.nodeType) return 3 as text nodtype is 3. document.write(x.firstChild.nodeValue); return Hello World!
Element type NodeType is shown as follows:
Element 1; Attribute 2; Text 3; Comment 8; Document 9

2) Element is  a representation of a <TAG>.  element.getElementsByTagName(tagName) returns a list of elements with the given tag name, where element can be obtained  via document.getElementById.

3) Attribute is a  property of an element. For example HREF is an attribute of <A>.

 Below is the code example using node and appendchild:
 <div id="extra-dates"></div>
                      <script>
                  var count = 0;
                  function add_date(){
                     count ++;
                     var date_table     = document.getElementById('date-table');
                     var new_date_table = date_table.cloneNode(true);
                     new_date_table.id  = 'd'+count+'_table';
                   
                     var elms = new_date_table.getElementsByTagName('*');
                     for(var i=0; i<elms.length; i++){
                        elms[i].id = 'd'+count+'_'+elms[i].id;
                     }
                   
                     var date_selects     = date_table.getElementsByTagName('select');
                     var new_date_selects = new_date_table.getElementsByTagName('select');
                     for(var i=0; i<date_selects.length; i++){
                        new_date_selects[i].selectedIndex = date_selects[i].selectedIndex;
                     }
                     document.getElementById('extra-dates').appendChild(new_date_table);
                  }
                  function remove_date(link_id){
                     var id_parts = link_id.split('_');
                     var table_id = id_parts[0]+'_table';
                     var date_table = document.getElementById(table_id);
                     date_table.parentNode.removeChild(date_table);
                  }
               </script>

I used cloneNode to create a new node and use appendChild to add node content between
 <div id="extra-dates"> and </div> and use removeChild to remove the node.

Add facebooklike button in phpBB3 forum



 I followed the procedure to add facebook like in phpBB3 forum, I used style subsilver2.
1) Under /public_html/phpBB3/styles/subsilver2/template/viewtopic_body.html
Before <div class="postbody">{postrow.MESSAGE}</div>, add
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fjiansenlu.comze.com%2FphpBB3%2Fviewtopic.php%3Ff%3D{S_FORUM_ID}
%26t%3D{S_TOPIC_ID}&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:25px"></iframe>
    <fb:like href="http://jiansenlu.comze.com/phpBB3/viewtopic.php?f={S_FORUM_ID}&amp;t={S_TOPIC_ID}" layout="standard" show_faces="true" width="450" action="like" colorscheme="light" />

2) Go to phpBB3 ACP board, under General and find purge cache and select run now at right panel.
3) The facebook like button is shown nicely in at the post body in each post.
 4)  But when I click the facebook like button. The red error is shown.
I Google the web and found comze.com is blocked by facebook like.
My phpBB3 forum:
 http://jiansenlu.comze.com/phpBB3/

Wednesday, May 2, 2012

Setup a forum using phpBB



Now there are many websites can allow you create a forum. But there are too many restrictions and ads.
You can find a free host website and install a  forum for yourself.

Below are the steps I installed phpBB forum
1) Download phpBB software from:
http://www.phpbb.com/downloads/olympus.php
2) Create a database in your free host website. I used http://www.000webhost.com
Remember database host, database name, login name and password.
3) Upload phpBB to your website, for example, I uploaded to
http://jiansenlu.comze.com/
The default directory is phpBB3.
run index.php, in my case: http://jiansenlu.comze.com/phpBB3/index.php
There are some tips:
a) rename .htaccess under phpBB3 and phpBB33/cache  to .htaccess.old
b) The original content of  config.php is empty. If you installed once and fail, you will see database information is added to config.php. You need to remove the content in config.php to reinstall phpBB.

4) Following the instruction step by step. After you successfully install phpBB, you need to rename install directory to such as install.old.

5) I also find default template  prosilver some problem. Text background repeated. After I choose another style subsilver2. The problem is fixed.




My new forum: 
http://jiansenlu.comze.com/phpBB3/


I am able to modify php code to customize my forum.

Tuesday, May 1, 2012

DatePicker and timepicker using anytine JavaScript library



Anytime time picker Javascript  library  allows your visitors to easily input a date/time into a form field, by selecting it from a popup window.

First you need to download anytime.css, anytime.js and  jquery.js from:
http://www.ama3.com/anytime/
For example, I put it in my website:
http://jiansenlu.comze.com/anytime/

Additional I also used calendar.png and clock.png at the end of date and time input boxes.

My code using Anytime date picker and time picker as below:
<link href="http://jiansenlu.comze.com/anytime/anytime.css" rel="stylesheet" type="text/css"></link>
<script src="http://jiansenlu.comze.com/anytime/jquery.js">
</script>
<script src="http://jiansenlu.comze.com/anytime/anytime.js">
</script>
<style>
        #field2 { background-image:url("http://jiansenlu.comze.com/anytime/clock.png");
          background-position:right center; background-repeat:no-repeat;
          border:1px solid #FFC030;color:#3090C0;font-weight:bold}
        #AnyTime--field2 {background-color:#EFEFEF;border:1px solid #CCC}
        #AnyTime--field2 * {font-weight:bold}
        #AnyTime--field2 .AnyTime-btn {background-color:#F9F9FC;
          border:1px solid #CCC;color:#3090C0}
        #AnyTime--field2 .AnyTime-cur-btn {background-color:#FCF9F6;
            border:1px solid #FFC030;color:#FFC030}
        #AnyTime--field2 .AnyTime-focus-btn {border-style:dotted}
        #AnyTime--field2 .AnyTime-lbl {color:black}
        #AnyTime--field2 .AnyTime-hdr {background-color:#FFC030;color:white}
     
</style>
<br />
<form action="/anytime/" method="GET">
Date:<input id="field1" size="50" style="background-image: url('http://jiansenlu.comze.com/anytime/calendar.png'); background-position: right center; background-repeat: no-repeat;" type="text" value="enter your date" /><br />
Time: <input id="field2" type="text" value="12:00" />
</form>
<script>
  AnyTime.picker( "field1",
    { format: "%W, %M %D in the Year %z %E", firstDOW: 1 } );
$("#field2").AnyTime_picker(
    { format: "%H:%i", labelTitle: "Hour",
      labelHour: "Hour", labelMinute: "Minute" } );
</script>


Result:

Date:
Time: