Monday, December 31, 2012

Add shadow in flash using drop shadow filter



I will introduce two methods to add shadow in a shape in flash CS6 using "add shadow filter" directly and actionscript 3.0
 1) method 1 "add show filter"
a) open Flash CS6->New actionscript 3.0, designer mode
b) using rectangle tool to create a square shape
c) Right click square, convert to MovieClip symbol.
d) left panel, under properties->filter, at the bottom, the left icon, add filters
a menu popup, select "add  drop shadow"

2) Method 2 using ActionScript 3.0
a) open Flash CS6->New actionscript 3.0, designer mode
b) using rectangle tool to create a square shape
c) Right click square, convert to MovieClip symbol, name it as s1 and  check export to actionscript
in the left panel, name the instanace of s1 as s2
d) Press F9 to enter following ActionScript:

function init() {
    var dropShadow:DropShadowFilter = new DropShadowFilter();

    dropShadow.distance=1;
    dropShadow.angle=30;
    dropShadow.color=0x555333;
    dropShadow.alpha=1;
    dropShadow.blurX=5;
    dropShadow.blurY=5;
    dropShadow.strength=1;
    dropShadow.quality=15;
    dropShadow.inner=false;
    dropShadow.knockout=false;
    dropShadow.hideObject=false;

    s2.filters=new Array(dropShadow);
}
init();
e)export or test Movie and done
video:

Posted by Jiansen Lu at 5:37 PM 0 comments
Labels:

Sunday, December 30, 2012

HTML5 Jigsaw puzzle



Below is the example to use HTML5 and jQuery to create a Jigsaw puzzle.
First we call jQuery library
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
Then we create canvas in html5
 <canvas id="gamer" width="800" height="600"></canvas>
We call jQuery 
    <script type="text/javascript">
        $().ready(function () {
              $("#gamer").Jigsaw("http://swf.site40.net/AlbertEinstein.JPG" );
                   });
<script>
to call function  Jigsaw when the web page is loaded.
The detail of Jigsaw function is below:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>HTML5 Jigsaw</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<h1 style="color:red;text-align:center">HTML5 Jigsaw puzzle, Jiansen Lu </h1>
<hr />

    <canvas id="gamer" width="800" height="600"></canvas>

    <script type="text/javascript">

        $().ready(function () {
       
        $("#gamer").Jigsaw("http://swf.site40.net/AlbertEinstein.JPG" );
           
        });

        $.fn.Jigsaw = function (imagePath) {
            var gamer = this;
            var context = $(this)[0].getContext("2d");
            var pieces = [];
            var drawPoints = [];
            var xCount = 3;
            var yCount = 3;
            var pieceWidth = parseInt(gamer.width() / (xCount + 1));
            var pieceHeight = parseInt(gamer.height() / yCount);
            var whitePiece = {};
            var startGame = function () {
                var validWidth = img[0].width - img[0].width % xCount;
                var validHeight = img[0].height - img[0].height % yCount;

                for (var y = 0; y < yCount; y++) {
                    for (var x = 0; x < xCount; x++) {
                        pieces.push({ index: x + y, point: { x: x * validWidth / xCount, y: y * validHeight / yCount, width: validWidth / xCount, height: validHeight / yCount } });
                        drawPoints.push({ x: x * pieceWidth, y: y * pieceHeight });
                    }
                }

                //randon draw points
                for (var i = 0; i < pieces.length; i++) {
                    var index = parseInt(Math.random() * drawPoints.length);
                    var drawPoint = drawPoints[index];
                    drawPoints.splice(index, 1);
                    pieces[i].DrawPoint = drawPoint;
                }
                //swap the top right
                for (var i = 0; i < pieces.length; i++) {
                    if (pieces[i].DrawPoint.x == (xCount - 1) * pieceWidth && pieces[i].DrawPoint.y == 0 && i != (xCount - 1)) {
                        var oldDP = pieces[xCount - 1].DrawPoint;
                        pieces[xCount - 1].DrawPoint = pieces[i].DrawPoint;
                        whitePiece = { x: pieces[xCount - 1].DrawPoint.x, y: pieces[xCount - 1].DrawPoint.y};
                        pieces[xCount - 1].DrawPoint.x += pieceWidth;
                        pieces[i].DrawPoint = oldDP;
                        break;
                    }
                }

                draw();
               
            }

            var draw = function () {
                context.clearRect(0, 0, gamer.width(), gamer.height());
                for (var i = 0; i < pieces.length; i++) {
                    drawPiece(pieces[i]);
                }
            };

            var drawPiece = function (piece) {
                var x = piece.point.x;
                var y = piece.point.y;
                var width = piece.point.width;
                var height = piece.point.height;
                var drawX = piece.DrawPoint.x;
                var drawY = piece.DrawPoint.y;
                context.drawImage(img[0], x, y, width, height, drawX, drawY, pieceWidth, pieceHeight);
            }

            var move = function (x, y) {
                var clickPiece = null;
                for (var i = 0; i < pieces.length; i++) {
                    var p = pieces[i].DrawPoint;
                    if (p.x < x && p.x + pieceWidth > x
                         && p.y < y && p.y + pieceHeight > y) {
                        clickPiece = pieces[i];
                        break;
                    }
                }

                if (clickPiece != null && canMove(clickPiece)) {
                    swap(clickPiece);
                    draw();
                }

                if (success()) {
                    alert('bingo!');
                }
            }

            var canMove = function (p) {
                return (Math.abs(p.DrawPoint.x - whitePiece.x) == pieceWidth && p.DrawPoint.y == whitePiece.y)
                        || (Math.abs(p.DrawPoint.y - whitePiece.y) == pieceHeight && p.DrawPoint.x == whitePiece.x);
            };

            var swap = function (p) {
                var oldDP = {x: p.DrawPoint.x, y: p.DrawPoint.y};
                p.DrawPoint.x = whitePiece.x;
                p.DrawPoint.y = whitePiece.y;
                whitePiece = oldDP;
            }

            var success = function () {
                for (var i = 0; i < pieces.length; i++) {
                    var x = i % 3;
                    var y = parseInt(i / 3);
                    if (pieces[i].DrawPoint.x != x * pieceWidth || pieces[i].DrawPoint.y != y * pieceWidth) {
                        return false;
                    }
                }

                return true;
            }

            var img = $(new Image());
            img.load(function (e) {
                startGame();
            });
            img.attr("src", imagePath);

            gamer.click(function (e) {
                var offsetX = e.pageX - $(this).offset().left;
                var offsetY = e.pageY - $(this).offset().top;
                move(offsetX, offsetY);
            });
        };
    </script>
</body>
</html>
Demo: to restore Albert Einstein picture by sliding each pieces.


Posted by Jiansen Lu at 1:04 PM 0 comments
Labels:

Friday, December 28, 2012

Actionscript 3.0 demo: Add a button to toggle full screen in flash



Below is the example to add a button in Flash CS6 using ActionScript 3.0.
1) Open Adobe Flash CS6 File->New->ActionScript 3.0
2) File-> import to stage with background image in layer 1.
3) add button .under user interface in component too, change the button label to "toggle full screen", and name the instance as "btn_fullscreen"
5) Press F9 to input the following actionscritpt

 6) Export or test flash, done.

flash output, remember to put allowfullscreen="true" in embed code

<object>
<embed allowfullscreen="true" allownetworking="internal" allowscriptaccess="never" height="400" src="http://swf.site40.net/flashdemo/togglefull.swf" width="550"></embed>
</object>


video:
Posted by Jiansen Lu at 11:08 PM 0 comments
Labels:

ActionScript 3.0 demo: create a falling snow in flash CS6



Below is the example to create falling snow in Flash CS6 using ActionScript 3.0.
1) Open Adobe Flash CS6 File->New->ActionScript 3.0
2) Stage width 640, height 400, File-> import to stage with background image (640*400) in layer 1.
Create static text, "SUM" and author name.  input web address under the author name link property.
3) Create layer 2. Using  oval tool to create   a circle with stroke color and fill color white..
4) Using  select tool, to convert the white circle to MovieClip with name snowflake and select "export to actionscript" with class name snowflake.
5) Press F9 to input the following actionscritpt

addEventListener (Event.ENTER_FRAME,snow);
function snow (event:Event):void {
   
    var scale:Number=Math.random()*.6;
    var _sf:snowflake=new snowflake();
    _sf.x=Math.random()*640;
    _sf.scaleX=scale;
    _sf.scaleY=scale;
    var speed:Number=Math.random()*2;
    var RA:Array=new Array(-1,1);
    var lf:int=RA[Math.round(Math.random())];

    stage.addChild (_sf);
    _sf.addEventListener (Event.ENTER_FRAME,snowfall);
   

    function snowfall (event:Event):void {
       
        _sf.y+=speed;
        _sf.rotation+=Math.random()*20;
        _sf.x+=(Math.random()*2)*lf;
    }
}
6) Export or test flash, done.

flash output

video: ActionScript 3.0 demo: create a falling snow in flash CS6
Posted by Jiansen Lu at 1:50 PM 5 comments
Labels:

Thursday, December 27, 2012

ActionScript 3.0 demo: sum of two numbers in Flash CS6



Below is the example to get the sum of two numbers in Flash CS6 using ActionScript 3.0.
1) Open Adobe Flash CS6 File->New->ActionScript 3.0
2) Stage width 500, height 350, File-> import to stage with background image (500*350) in layer 1.
Create static text, "SUM" and author name.  input web address under the author name link property.
3) Create layer 2. Using rectangular tool to create   a box.
4) Using component tool, under user interface in component tool, create three TextArea, name
them as tx1, tx3 and tx3. tx3 is output, uncheck editable under property.
Create a button using component tool, name it as "but" and change the label to "="
add static text "+"
5) Press F9 to input the following actionscritpt
 var sty1:TextFormat=new TextFormat();
sty1.size=20;
tx1.setStyle("textFormat",sty1);
tx2.setStyle("textFormat",sty1);
tx3.setStyle("textFormat",sty1);
function buttonclick1(event:MouseEvent):void
{
    var a:Number=Number(tx1.text);
    var b:Number=Number(tx2.text);
    var d:Number=a+b;
    tx3.text=String(d);
   
}
but.addEventListener(MouseEvent.CLICK,buttonclick1);
6) Export or test flash, done.

flash output




video:
Posted by Jiansen Lu at 4:26 PM 0 comments
Labels: ,

Tuesday, December 25, 2012

Add Google +1 button in your blog



You can add  Google +1 button in your blog to increase your blog popularity and attract more potential readers. The JavaScript code Google +1 button:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>
More about Google +1 button:
https://developers.google.com/+/plugins/+1button/#utm_source=asfe3&utm_medium=recommendations&utm_campaign=promo
Posted by Jiansen Lu at 9:07 AM 2 comments
Labels: ,

Sunday, December 23, 2012

Upload file in PHP demo



Upload file to a destination in PHP, put upload information in MySQL database and users can download the files.
1) upload.html
<html>
<head>
<title>PHP file upload</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="description" />
</head>
<body>
  <form enctype="multipart/form-data" action="upload.php" method="post">
    <table border="1" width="55%" id="table1" cellspacing=0>
      <tr>
        <td colspan="2">
            <h1>PHP Upload file Demo, Jiansen Lu:</h1>
        </td> </tr><tr>
        <td width="71%">
            <input name="userfile" type="file">
              <input type="submit" value="upload" >
        </td>
      </tr>
    </table>
    allowed file type:jpg|jpeg|gif|bmp|png|swf|mp3|wma|zip|rar|doc
 </form>
</body>
</html>
2) config.inc.php, connect to a database
<?php
session_start();
define('DB_HOST', 'localhost'); 
define('DB_USER', 'root');            
define('DB_PW', '');                
define('DB_NAME', 'test');
define('DB_CHARSET', 'utf8');    
define('DB_PCONNECT', 0);            
define('DB_DATABASE', 'mysql');
$con=mysql_connect(DB_HOST,DB_USER,DB_PW) or die('fail to connect to database"');
mysql_query('set names utf8');
mysql_select_db(DB_NAME);
?>
3) Create a table
CREATE TABLE `f_detail` (
  `id` int(11) NOT NULL auto_increment,
  `filename` varchar(100) NOT NULL,
  `des` varchar(64) NOT NULL,
  `fsize` varchar(10) NOT NULL,
  `ftype` varchar(100) NOT NULL,
  `utime` datetime NOT NULL,
  PRIMARY KEY  (`id`)
);
4) upload.php, used in form in upload.html
<?php
header("content-Type: text/html");
include("config.inc.php");
$uptypes=array('image/jpg',  //allowed file type
 'image/jpeg',
 'image/png',
 'image/pjpeg',
 'image/gif',
 'image/bmp',
 'application/x-shockwave-flash',
 'image/x-png',
 'application/msword',
 'audio/x-ms-wma',
 'audio/mp3',
 'application/vnd.rn-realmedia',
 'application/x-zip-compressed',
 'application/octet-stream');

 $max_file_size=20000000;   //max file size in BYTE
$path_parts=pathinfo($_SERVER['PHP_SELF']); //current path
$destination_folder="up/"; //upload path for storage
$imgpreview=1;   //if set preview;
$imgpreviewsize=1/2;  //preview ratio
$file=$_FILES['userfile'];
 if( $file["size"] > $max_file_size )
 {
 echo "<font color='red'>FIle too large</font>";
 exit;
  }

 if(!in_array(strtolower($file["type"]), $uptypes))
{
 echo "<font color='red'>upload file type not matched</font>";
 exit;
}
//Create upload directory
if(!file_exists($destination_folder)){
mkdir($destination_folder);
}
$filename=$file["tmp_name"];
$image_size = getimagesize($filename);
$pinfo=pathinfo($file["name"]);
// remove image in 'image/jpeg', only keep jpeg
$ftype=$file['type'];
$ftype= explode("/", $ftype);
$ftype= end($ftype);

 $destination = $destination_folder.time().".".$ftype;
$fname = time().".".$ftype;
if (file_exists($destination) && $overwrite != true)
{
     echo "<font color='red'>ͬfile exsited</a>";
     exit;
  }
//exit;
 if(!move_uploaded_file ($filename, $destination))
 {
   echo "<font color='red'>file not moved.</a>";
     exit;
  }else{
      //add to database
    $sql = "INSERT INTO `f_detail`
    (`id` ,`filename` ,`des` ,`fsize` ,`ftype` ,`utime` )
    VALUES
 (NULL ,'".$fname."' , '', '".$file["size"]."', '".$file["type"]."',NOW());";
        $result =mysql_query($sql);
        if (!$result) {
                mysql_free_result($result);
                mysql_close($db);
                echo 'Fail to insert in database!';
        exit;
            }
       
}
$pinfo=pathinfo($destination);
$fname=$pinfo['basename'];
echo 'File name:'.$fname;
echo "<table><tr><td>Upload file address:<br />
 http://".$_SERVER['SERVER_NAME'].$path_parts["dirname"].
 "/".$destination_folder.$fname."</td></tr></table>";
echo " Width:".$image_size[0].'px';
echo " height:".$image_size[1].'px';
if($imgpreview==1)
{
echo "<br>Upload Preview:<br>";
echo "<a href=\"".$destination."\" target='_blank'>
<img src=\"".$destination."\" width=".($image_size[0]*$imgpreviewsize).
" height=".($image_size[1]*$imgpreviewsize);
echo " alt=\"preview:\r filename:".$fname."\r
uploadtime:".date('m/d/Y h:i')."\" border='0'></a>";
}
?>
5. list.php list all the files uploaded
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>File list</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8"><LINK
href="base.css" type=text/css rel=stylesheet>
<STYLE>.bodytitle {
    CLEAR: both; MARGIN-TOP: 8px; BACKGROUND: url(../plus/img/body_title_bg.gif) repeat-x left top; MARGIN-LEFT: auto; WIDTH: 96%; MARGIN-RIGHT: auto; HEIGHT: 33px
}
.bodytitleleft {
    BACKGROUND: url(../plus/img/body_title_left.gif) no-repeat right bottom; FLOAT: left; WIDTH: 30px; HEIGHT: 33px
}
.bodytitletxt {
    PADDING-RIGHT: 8px; MARGIN-TOP: 6px; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FONT-SIZE: 14px; BACKGROUND: url(../plus/img/body_title_right.gif) #fff no-repeat right bottom; FLOAT: left; LINE-HEIGHT: 27px; LETTER-SPACING: 2px; HEIGHT: 27px
}
.np {
    BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
</STYLE>
<BODY>
<DIV class=bodytitle>
<DIV class=bodytitleleft></DIV>
<DIV class=bodytitletxt>File list table</DIV></DIV>
<TABLE class=tbtitle style="MARGIN-TOP: 6px; BACKGROUND: #e2f5bc" height=31
cellSpacing=1 cellPadding=1 width="96%" align=center border=0>
  <TBODY>
  <TR>
    <TD class=tbtitletxt><STRONG>&nbsp;Please select files to download：</STRONG></TD>
  </TR></TBODY></TABLE>
<TABLE class=tblist
style="BORDER-RIGHT: #e2f5bc 1px solid; BORDER-TOP: #e2f5bc 1px solid; MARGIN: 0px 0px 6px; BORDER-LEFT: #e2f5bc 1px solid; BORDER-BOTTOM: #e2f5bc 1px solid"
cellSpacing=1 cellPadding=1 width="96%" align=center border=0>
  <TBODY>
  <TR align=middle>
    <TD class=tbsname
    style="PADDING-RIGHT: 6px; PADDING-LEFT: 6px; PADDING-BOTTOM: 20px; PADDING-TOP: 6px"
    vAlign=top align=left height=120>
      <TABLE cellSpacing=0 cellPadding=6 width="90%" border=0>
        <TBODY>
        <TR>
          <TD><STRONG>Download：</STRONG><BR>
            1. Click download link；</TD>
        </TR></TBODY></TABLE>
      <TABLE cellSpacing=1 cellPadding=3 width="98%" bgColor=#cae886 border=0>
        <TBODY>
        <TR align=middle height=20>
          <TD width="8%" bgColor=#dcf4bd><STRONG>ID</STRONG></TD>
          <TD width="17%" bgColor=#dcf4bd><STRONG>File name</STRONG></TD>
          <TD width="11%" bgColor=#dcf4bd><strong>File size</strong></TD>
          <TD width="18%" bgColor=#dcf4bd><strong>File type</strong></TD>
          <TD width="18%" bgColor=#dcf4bd><strong>Upload time</strong></TD>
          <TD width="10%" bgColor=#dcf4bd><STRONG>Download link</STRONG></TD>
           <TD width="18%" bgColor=#dcf4bd><STRONG>Preview</STRONG></TD>
          </TR>
        <?php
include("config.inc.php");
$sql = "SELECT * FROM `f_detail`";
$result = mysql_query($sql, $con);

    while ($row = mysql_fetch_array($result, MYSQL_NUM)) {
?>
        <!--loop start-->
        <TR align=middle bgColor=#ffffff height=20>
          <TD><?php echo $row[0]?></TD>
          <TD><?php echo $row[1]?></TD>
          <TD><?php echo $row[3]?></TD>
          <TD><?php echo $row[4]?></TD>
          <TD><?php echo $row[5]?></TD>
          <TD><A href="download.php?id=<?php echo $row[0]?>">file download
              </A> </TD>
        <TD><img src="<?php echo 'up/'.$row[1]?>" width="40px" /></TD>
        <!--loop end-->
        <?php
            }
         mysql_free_result($result);
       
        ?>
        </TBODY></TABLE>
      <TABLE cellSpacing=0 cellPadding=0 width="90%" border=0>
      </TABLE></TD></TR></TBODY></TABLE>
<DIV align=center>&nbsp;</DIV></BODY></HTML>
6. download.php, used in download link
<?php
       include("config.inc.php");
        $sql = "SELECT * FROM `f_detail` WHERE `id` ='".$_GET['id']."' LIMIT 0 , 30";
        $result = mysql_query($sql,$con);
                $row=mysql_fetch_row($result);
                if (!$result) {
                mysql_free_result($result);
                mysql_close($db);
                echo 'Select failed';
        exit;
            }

 $file_name = $row[1];

$file_dir = "up/";

if (!file_exists($file_dir . $file_name)) {
    echo "file not exsited";
    exit;
    }else {
    $file = fopen($file_dir . $file_name,"r");
    Header("Content-type: application/octet-stream");
    Header("Accept-Ranges: bytes");
    Header("Accept-Length: ".filesize($file_dir . $file_name));
    Header("Content-Disposition: attachment; filename=" . $file_name);
// read file to export
    echo fread($file,filesize($file_dir . $file_name));
    fclose($file);
    exit;
}
?>
video for this demo

Posted by Jiansen Lu at 2:29 PM 1 comments
Labels: ,

Saturday, December 22, 2012

A simple Javascript Caculator demo



A simple JavaScript calculator demo:
1) Design a table, first part title "Calculator",  second part form for input  button
2) In the form, when a button is clicked. the value is added to the string in outputbox
3) When "=" button is clicked, the string in the output box is evaluated
4)  When "reset" button is clicked, the string in the output box is set to empty.
JSCaculator.js:
function calculate (form)
{form.outputbox.value = eval (form.outputbox.value)}

function addString(form, str)
{ form.outputbox.value += str}

function reset(form)
{form.outputbox.value = ""}

 JSCaculator.html:
 <html>
<head>
<title>A Simple JavaScript Caculator</title>
<script  type="text/javascript" src="JSCaculator.js">
</script>
</head>
<body>
<table  border="4"  bgcolor="#C0C0C0">
  <tr>
    <th><tt>
      <h2 align="center"><font color="#0000A0">Caculator</font></h2>
    </tt></th>
  </tr>
  <tr align="center">
    <th><form  name="myform">
      <table  border="1">
        <tr><td  colspan="4" align="center">
               <input  type="text" name="outputbox"  size="20">
           </td>
</tr>
        <tr align="center">
        <td><input type="button"  value=" 7 " onClick="addString(this.form,'7')">
</td>  
          <td><input type="button"  value=" 8 " onClick="addString(this.form, '8')"></td>
          <td><input type="button"  value=" 9 " onClick="addString(this.form, '9')"></td>
          <td><input type="button"  value=" / " onClick="addString(this.form, '/')"></td>
        </tr>
     <tr align="center">
          <td><input type="button"  value=" 4 " onClick="addString(this.form, '4')"></td>
          <td><input type="button"  value=" 5 " onClick="addString(this.form, '5')"></td>
          <td><input type="button"  value=" 6 " onClick="addString(this.form, '6')"></td>
          <td><input type="button"  value=" * " onClick="addString(this.form, '*')"></td>
        </tr>
     <tr align="center">
          <td><input type="button"  value=" 1 " onClick="addString(this.form, '1')"></td>
          <td><input type="button" value=" 2 " onClick="addString(this.form, '2')"></td>
          <td><input type="button" value=" 3 " onClick="addString(this.form, '3')"></td>
          <td><input type="button" value=" - " onClick="addString(this.form, '-')"></td>
        </tr>
     <tr align="center">
          <td><input type="button" value=" 0 " onClick="addString(this.form, '0')"></td>
          <td><input type="button" value=" . " onClick="addString(this.form, '.')"></td>
          <td><input type="button" value=" + " onClick="addString(this.form, '+')"></td>
          <td><input type="button" value=" % " onClick="addString(this.form, '%')"></td>
        </tr>
     <tr align="center">
          <td colspan="2">
              <input type="button" value=" = " onClick="calculate(this.form)"></td>
          <td colspan="2">
              <input type="button" value="Clear" onClick="reset(this.form)"></td>
</tr>
   </table>
    </form>
    </th>
  </tr>
</table>
</body>
</html>
Video for this demo:

Posted by Jiansen Lu at 3:18 PM 1 comments
Labels: ,

Friday, December 21, 2012

A simple CSS layout demo



A simple CSS layout as in  this picture: header, sidebar, content, footer
 csslayout.html:
<html>
<head>
  <title>A Simple CSS lyaout demo, Jiansen Lu</title>
  <link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
  <div id="header">This is  Header</div>
  <div id="mainContent">
    <div id="sidebar">This is sidebar</div>
    <div id="content">This is content</div>
  </div>
  <div id="footer">This is footer<span style="display:none">
  </span></div>
</div>
</body>
</html>
layout.css
/* CSS Document */
#header, #mainContent, #footer{
    /*defaut all margin 0,  The browser calculates a margin*/
    margin:0 auto;
    width:760px
    }
#header {
    height:100px;
    background:#9c6;
    /* header and main content distance 5 px */
    margin-bottom:5px;
    }
#mainContent {
    position:relative;
    height:400px;
    }
#sidebar {
    position:absolute;
    top:0;
    left:0;
    width:200px;
    height:398px;
    background:#cf9;
    }
#content {
    margin-left:202px;   
    width:558;
    height:398px;
    background:#ffa;
    }
#footer {
    height:60px;
    background:#9c6;
    }

Video for this demo:


Posted by Jiansen Lu at 4:31 PM 0 comments
Labels: ,

Thursday, December 20, 2012

marquee tag and img tag in HTML



Gave two examples of marquee tag and img tag in HTML. Show how to stop and start scrolling using marque.
1) Simple scroll effect using marquee tag:
<marquee direction="up" height="200px">Welcome to my homepage
    </marquee>
2)Nice block and able to stop and start scroll using mouse over and left
<html>
<body bgcolor="#FFFFFF" text="#000000">
<table width="176" bgcolor="#339999" align="left">
<tr>
<td height="17" align="center">
     <font color="#ffffff">Marquee example 2</font>
</td>
</tr>
<tr style="line-height:18pt" bgcolor="#eeffee">
<td height="140">
<marquee scrollamount="1" scrolldelay="50" direction="up"
     onMouseOver="this.stop()" onMouseOut="this.start()">
       <a href="http://www.sohu.com">Sohu</a><br>
       <a href="http://www.163.com">163</a><br>
       <a href="http://www.yahoo.com">yahoo</a><br>
</marquee>
</td>
</tr>
</table>
</body>
</html>
3) image at the top of text
  <p><img src="gps.JPG" hspace="10" vspace="20" /></p>
    This is a test.  This is a test. This is a test.
4) image at the left and text right using  align="left"
 <p><img src="gps.JPG" hspace="10" vspace="20"  align="left" /></p>
      This is a test.  This is a test. This is a test.<br />
Video for this demo
   

Posted by Jiansen Lu at 6:21 PM 0 comments
Labels:

Introduction to HTML form



I am making a series of videos for  web development, which are in my youtube channel.
Introduction to use form, radio, checkbox, select, option text, password, textarea, hidden, file, submit, reset in HTML form.

Example of HTML form:
<html>
<head>
   <title>HTML form</title>
</head>
<body>
    <h1>HTML form</h1>
<form id="form1" name="form1" method="post" action="test.php">
  <p>
  User Name: <input type="text" name="name"   size="20" /> <br>
  Password: <input  type="password" name="psd" size="20"><br>
  <br>
  <input type="submit" name="Submit" value="submit" />
  <input type="reset" name="Submit2" value="reset" />
 </p>
</form>
</body>
</html>
radio type: used checked to mark default, you can only make one choice
 Gender<input type="radio" name="gender" value="male" checked> male
        <input   type="radio" name="gender"  value="female">female
checkbox: : used checked to mark default, you can only make multiple choice
 Hobby<input type="checkbox" name="ah1" value="swim"> swim
<input type="checkbox" name="ah2" value="hiking">hiking
<input type="checkbox" name="ah3" value="basketball">basketball
<input type="checkbox" name="ah4" value="hockey" checked>hockey
select from list: used selected as default
 Country<select name="jg">
              <option value="Canada" >Canada</option>
            <option value="USA">USA</option>
            <option value="China">China</option>
            <option value="Korea">Korea</option>
            <option value="Japan" selected >Japan</option>
          </select>
textarea: for long text
 <textarea name="bz" cols="30" rows="3" ></textarea>
hidden: will not shown, but the value will be assigned to the name when the form is submitted
 <input  type="hidden" name="x"  value="20" > 
file: upload a file, a file will be selected from your computer:
Upload<input type="file" name="upload" />
The video for this demo


Posted by Jiansen Lu at 2:48 PM 0 comments
Labels:

Scale an image under GIMP



GIMP is the GNU Image Manipulation Program. It is a free and works on many operating systems, in many languages. It is very similar to Photoshop. GIMP can be downloaded from:
http://www.gimp.org/

Below is the example I used GIMP to scale a JPG image with 3648X2736 pixels (2.5MB) to 1000X750 pixels (0.2 MB).
1) Open GIMP
2) Click File->Open
3) Click Image->Scale image
4) Click View->New View
5) Click File->Export

Below is the video for this demo:


Posted by Jiansen Lu at 10:10 AM 0 comments
Labels:

Tuesday, December 18, 2012

A simple PHP login system


To build a simple PHP login system. Here we used PHP session to login and logout, and a form and MySQl database to manage user login.
First we need to create a user table and create two entries
CREATE TABLE `user` (
  `id` int(11) NOT NULL auto_increment,
  `username` varchar(20) NOT NULL,
  `pwd` varchar(64) NOT NULL,
  `email` varchar(50) NOT NULL,
  `lasttime` datetime NOT NULL,
  `regtime` date NOT NULL,
  PRIMARY KEY  (`id`)
);

INSERT INTO `user` VALUES (1, 'admin', '123456', 'admin@example.com',
'0000-00-00 00:00:00', '0000-00-00');
INSERT INTO `user` VALUES (2, 'jiansen', '123456', 'jiansen@example.com',
 '0000-00-00 00:00:00', '0000-00-00');

config.inc.php to connect to database
<?php
 //Example of using MySQL in PHP 
$db_host = "localhost";
$db_username = "root";
$db_pass = "";
$db_name = "test";
$con=mysql_connect("$db_host","$db_username","$db_pass");
if($con)
{echo "connect to MySQL server ".$db_host."<br />";}
else die ("could not connect to mysql");
if(mysql_select_db("$db_name"))
{echo "connect to dtabase ".$db_name."<br />";}
else die("no database");            
?>

login.html to post a from using  login.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>User Login</title>
</head>
<body>
<form name="Login" method="post" action="login.php">
<table border="0" cellpadding="8" width="350" align="center">
    <tr>
        <td colspan="2" align="center" class="alert">User Login Interface</td>
    </tr><td>Login</td>
   <td><input name="username" type="text" id="username" class="textinput" /></td>
    </tr><tr><td>Password</td>
    <td><input name="pwd" type="password" id="pwd" class="textinput" /></td></tr>
    <tr><td colspan="2" align="center">
    <input type="submit" class="btn" value="login">&nbsp;&nbsp;
    <input type="reset" class="btn" value="reset">
    </td></tr></table>
</form>
</body>
</html>

login.php
<?php
include('config.inc.php');
//remove white space and prevent MySQL injection
 session_start();
$username = addslashes(trim($_POST['username']));
$password = addslashes(trim($_POST['pwd']));
 if (empty($username)||empty($password)){
 echo "User name or password is empty";
 exit();
 }else{
       $sql = "SELECT * FROM user WHERE username='$username' AND pwd='$password'";
            $result = mysql_query($sql);
           if ($result && mysql_num_rows($result)==1) {             
              
                $_SESSION['login'] = 'true';
                   $_SESSION['user']=$username;
                echo "User ".$username." log in";
                 mysql_free_result($result);
                 mysql_close($con);
          }else{
                 echo "User ".$username." not matched";
          }
          
 }
?>
is_login.php to test if user already login
<?php
session_start();
if (empty($_SESSION['login'])) {
    echo "You are not login";
}else{
    echo "You are  login";
}
?>
logout.php
<?php
 session_start();
 unset( $_SESSION['login']);
 echo "You are log out";
?>
Vedio for this demo: 
Posted by Jiansen Lu at 9:14 PM 0 comments
Labels: ,

A Simple PHP Visitor Counter



Design a simple PHP counter without using MySQL database, only using an external file 'visitorcounter.txt'. PHP functions used here: file_exists, fopen, fwrite,fgetc,fclose.
 visitorcounter.php
<?php
//A simple PHP counter
//Using external file visitorcounter.txt
//to store counter instead using MySQl database
function visitorcounter()
{
    $file='visitorcounter.txt';
    if(!file_exists($file)){
        $counter = 0;
        $cf=fopen($file,"w");
        fwrite($cf,$counter);
        fclose($cf);
    }else{
        $cf=fopen($file,"rw");
        $counter=fgetc($cf);
        fclose($cf);}
    $counter++;
    $cf=fopen($file,"w");
    fwrite($cf,$counter);
    fclose($cf);
    return $counter;   
}
?>
index.php, call visitorcounter.php
 <?php
      require("visitorcounter.php");
?>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Visitor Counter</title>
        <meta name="author" content="Jiansen" />
        <!-- Date: 2012-12-18 -->
    </head>
    <body>

    <h1>Welcome to visit  My Homepage</h1>
    <br /> <hr />
    <font size=7 color=red>
    You are  visitor <?php echo visitorcounter(); ?>.
    </font>
    </body>
</html>
Video for this demo:

Posted by Jiansen Lu at 4:40 PM 1 comments
Labels: ,

Using MySQL In PHP Demo



Give a brief introduction how to connect to MySQL in PHP (mysql_connect), how to use mysql_fetch_row and mysql_fetch_array.
1) Connect to MySQL dataase
config.inc.php
<?php
 //Example of using MySQL in PHP 
$db_host = "localhost";
$db_username = "root";
$db_pass = "";
$db_name = "test";
$con=mysql_connect("$db_host","$db_username","$db_pass");
if($con)
{echo "connect to MySQL server ".$db_host."<br />";}
else die ("could not connect to mysql");
if(mysql_select_db("$db_name"))
{echo "connect to dtabase ".$db_name."<br />";}
else die("no database");            
?>
2) Create guestbook table and insert three rows
CREATE TABLE `guestbook` (
  `id` int(11) NOT NULL auto_increment,
  `FirstName` varchar(100) NOT NULL default '',
  `LastName` varchar(100) NOT NULL default '',
  UNIQUE KEY `id` (`id`)
);

INSERT INTO `guestbook` (`FirstName`,`LastName`)
VALUES ('John', 'Smith'), ('Tom', 'Lu'), ('Mike','Xu');

3) Example of  mysql_fetch_row
 <?php
 include('config.inc.php');
 $query = "SELECT * from guestbook";
 $result = mysql_query($query);
   //Fetch  each row
 while($thisrow=mysql_fetch_row($result))
  {
      $i=0;
      //Fetch each column
      while ($i < mysql_num_fields($result))
     {
       $field_name=mysql_fetch_field($result, $i);
       //Display all the fields on one line
       echo $thisrow[$i] . " "; 
       $i++;
      }
   echo "<br>";
  }
  mysql_close($con);
 
  ?>

4) Example of  mysql_fetch_array.
<?php
 include('config.inc.php');
 $query = "SELECT * from guestbook";
 $result = mysql_query($query);
  echo "<table border='1'>
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    </tr>";

  while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['FirstName'] . "</td>";
  echo "<td>" . $row['LastName'] . "</td>";
  echo "</tr>";
  }
  echo "</table>";

  mysql_close($con);
 ?>

Video of this tutorial

Posted by Jiansen Lu at 1:05 PM 0 comments
Labels: , ,

Monday, December 17, 2012

A JavaScript to toggle HTML content



The following JavaScript function  toggleLayer is used to toggle content in HTML
        <script type="text/javascript" language="javascript">
       
        function toggleLayer(layer) {
          var d = document.getElementById(layer);
          d.style.display = (d.style.display == "") ? "none" : "";
        }
   
        </script>';

Example, when users click the lik Add a comment,  "This is Guesbook between id addToGuestbook
is toggled.

<a href="javascript:toggleLayer('addToGuestbook');">Add a comment</a>

 <div id="addToGuestbook">This is Guestbook</div>

Posted by Jiansen Lu at 3:25 PM 0 comments
Labels: , ,

A simple PHP class demo




I'll give two examples of basic PHP classes here. PHP class definitions begin with the keyword class,
followed by a class name, followed by a pair of curly braces which includes the definitions of the properties and methods  belonging to the class.

 PHP class is also object oriented, with inheritance, encapsulation and  polymorphism.
SimpleClass.php
<?php
//Simple PHP class demo, Jiansen Lu
class SimpleClass
{
    // property declaration
    public $var = 'Hello World!';

    // method declaration
    public function displayVar() {
        echo $this->var;
    }
}
?>
example1.php, calls SimpleClass.php
<?php
include 'SimpleClass.php';
$instance = new SimpleClass();
$instance->displayVar();
?>

Run example1.php, produces "Hello World!"
inheritance.php, inheritance class redefined constructor and method displayVar()
 <?php
//PHP inheritance demo
include 'SimpleClass.php';
class ExtendClass extends SimpleClass
{
    // Redefine the parent method
    public function __construct($var) {
    $this->var = $var;
  }
    function displayVar()
    {
        echo $this->var.'<br />';
        echo "Extending class <br />";
        parent::displayVar();
    }
}

$extended = new ExtendClass("PHP inheritance demo");
$extended->displayVar();
?>
Run inheritance.php, produced:
"PHP inheritance demo
Extending class
PHP inheritance demo"
More in this video:




Posted by Jiansen Lu at 12:14 AM 0 comments
Labels: ,

Sunday, December 16, 2012

Run php under Aptana Studio




Aptana is open source development tool for the open web, similar to DreamWeaver.
It supports HTML5, CSS3, JavaScript, Ruby, Rails, PHP and Python.
Aptana can be downloaded from:
http://www.aptana.com/products/studio3
We need to install XAMPP or Apache to run php.
XAMPP for Windows can be downloaded from:
http://www.apachefriends.org/en/xampp-windows.html#641
Start Apache  and MySQL under XAMPP.
Create a directory phptest under
C:\xampp\htdocs\xampp
Start Apatana, set default directory as:
C:\xampp\htdocs\xampp\phptest
File->New->PHP project, typ project name such as test
File->New file, file name test.php, click next, a default file will appear:
<?php
    phpinfo();
?>
Click Run->Run Configuration (the default run not working)
Server, set as base URL
 http://localhost/xampp/phptest/
Start action: use current page
Video: Run php under Aptana Studio tutorial

Posted by Jiansen Lu at 12:48 PM 1 comments
Labels: ,

Friday, December 14, 2012

Check safety level of any website online



You can check safety level of any website online via safeweb:
 http://safeweb.norton.com/ 

For example I inputed:  jiansenlu.comze.com
The result returned:
Norton Rating
Site Owner? Click here

comze.com
Summary
Norton Safe Web found no issues with this site.
•Computer Threats:
0
•Identity Threats:
0
•Annoyance factors:
0



Total threats on this site:
0

•Community Reviews:
2
Safeweb Share

The Norton rating is a result of Symantec's automated analysis system. Learn more.
The opinions of our users are reflected separately in the community rating on the right.
General Info
Web Site Location     United States of America

Norton Safe Web has analyzed comze.com for safety and security problems.
comze.com

Threat Report

Total threats found: 0
Small-whitebg-green Viruses (what's this?)
Threats found: 0
Small-whitebg-green Drive-By Downloads (what's this?)
Threats found: 0
Small-whitebg-green Malicious Downloads (what's this?)
Threats found: 0
Small-whitebg-green Worms (what's this?)
Threats found: 0
Small-whitebg-green Suspicious Applications (what's this?)
Threats found: 0
Small-whitebg-green Suspicious Browser Changes (what's this?)
Threats found: 0
Small-whitebg-green Security Risks (what's this?)
Threats found: 0
Small-whitebg-green Heuristic Viruses (what's this?)
Threats found: 0
Small-whitebg-green Adware (what's this?)
Threats found: 0
Small-whitebg-green Trojans (what's this?)
Threats found: 0
Small-whitebg-green Phishing Attacks (what's this?)
Threats found: 0
Small-whitebg-green Spyware (what's this?)
Threats found: 0
Small-whitebg-green Backdoors (what's this?)
Threats found: 0
Small-whitebg-green Remote Access Software (what's this?)
Threats found: 0
Small-whitebg-green Information Stealers (what's this?)
Threats found: 0
Small-whitebg-green Dialers (what's this?)
Threats found: 0
Small-whitebg-green Downloaders (what's this?)
Threats found: 0
Small-whitebg-green Embedded Link To Malicious Site (what's this?)
Threats found: 0
Posted by Jiansen Lu at 11:09 AM 0 comments
Labels:
Subscribe to: Posts (Atom)