Thursday, February 28, 2013

Access Apache Server on Windows 7 externally



I can only access my Apache server in local computer, not externally. To test this,
Go to control panel->System and Security->Windows Firewall
on left panel: Click "Turn Windows Firewall on or off", under "public network location settings"
select "Turn off Windows Firewall." and my external computer can connect to my local  Apache server.  Of course, this is not an ideal solution. Select "Turn on Windows Firewall", add new inbound rule instead.

  • Go to the Control Panel and launch "Windows Firewall"
  • Go to "Advanced Settings"
  • Select "Inbound Rules" in the left pane
  • Select "New Rule" in the right pane
  • In the New Inbound Rule Wizard, select "Port" as Rule Type, then click on "Next"
  • Select "TCP and put  80,443,1935,8081,8080-8090 in "Specific local ports", then click on "Next"
  • Select "Allow the connection", then click on "Next"
  • Give the  name  "jiansen TCP" and an optional description "Open port 80,443,1935,8081,8080-8090" for Apache server.
  • Click "jiansen TCP" and click enable Rule on right panel.
Now we should be able to connect to the Apache server externally with specific ports.

Apache openmeetings with IP access



I successfully installed Apache openmeetings [Incubating] for web conferences.
http://openmeetings.apache.org/
It works OK for
http://localhost:5080/openmeetings/
It failed  for my local IP 192.168.1.56
 http://192.168.1.56:5080/openmeetings/
The error messages:
 Error missing [556],
Error missing [204],
Error missing [642]
I realize I need to change configuration:
  • Server-Side configuration: $RED5_HOME/conf/red5.properties, you need to restart the red5-service so that changes are online.
  • Client-Side configuration: $RED5_HOME/webapps/openmeetings/config.xml, you need to clear your browser cache after changing the file. 
 http://openmeetings.apache.org/PortSettings.html

 In : $RED5_HOME/webapps/openmeetings/config.xml, line 29 change
<rtmphostlocal></rtmphostlocal>
to
<rtmphostlocal>192.168.1.56</rtmphostlocal>

 $RED5_HOME/conf/red5.properties
change  all 0.0.0.0 and localhost  to 192.168.1.56
restart red5.bat
Now  http://192.168.1.56:5080/openmeetings/ works but
http://localhost:5080/openmeetings/ failed. But it is OK for me.
For ports in openmeetings:
Config-Name Default-value Name in red5.properties Name in config.xml
HTTP 5080 http.port red5httpport
RTMP 1935 rtmp.port rtmpport
RTMPT 8088 rtmpt.host rtmpTunnelport
We need to keep port 5080, 1935 and 8088 open for firewall.

Red5 open source Flash media server:



Red5 is an Open Source Flash Server written in Java that supports:
* Streaming Audio/Video (FLV and MP3)
* Recording Client Streams (FLV only)
* Shared Objects
* Live Stream Publishing
* Remoting (AMF)

Red5 can be download from:
https://code.google.com/p/red5/
or
 http://www.red5.org/


Apache OpenMeetings is based on red5:
http://openmeetings.apache.org/

Monday, February 25, 2013

NBBC: PHP BBcode Parser



NBBC is an open source PHP BBcode Parser. The website:
http://nbbc.sourceforge.net/

After you download nbbc.php, you can create an new instance of  BBCode using
 $bbcode = new BBCode;  and using parse method to interpret the code. Demo code:
<?php 
require_once("nbbc.php");
 $bbcode = new BBCode; 
print $bbcode->Parse("[i]Hello, World![/i] This is the test of [b]BBCode[/b]!");
 ?>

PHP, difference between $_SERVER['SERVER_NAME'] and $_SERVER['HTTP_HOST']



In PHP, $_SERVER['SERVER_NAME']  refers to the name of the server host.
$_SERVER['HTTP_HOST']: Contents of the Host.
Look at the following code at http://localhost:8083/test..php
  <?php
echo($_SERVER['SERVER_NAME']).'<br />';
echo($_SERVER['HTTP_HOST']);
?>

$_SERVER['SERVER_NAME'] returns localhost, while  $_SERVER['HTTP_HOST'] returns localhost:8083.
When we use the web server with a port , we had better  use $_SERVER['HTTP_HOST'] instead of $_SERVER['SERVER_NAME'] to return correct  web address in PHP.

Sunday, February 24, 2013

PHP stores and extracts time



In PHP, we can use time() function to store time in UNIX time in MySQL  and use date function to display time in a format such as date, month and year.
Example code:
<?php
$time=time();
echo $time.'<br />';
$date=date('l,jS,M,Y', $time);
echo $date;
?>

output:
1361774216
Monday,25th,Feb,2013


In this example we store $time as 1361774216 unix time and convert to date as:
Monday,25th,Feb,2013

PHP, using implode to insert array in MySQL



PHP implode function is used to join array elements with a string.  We can use implode function to insert array in MySQL. In this way, we only need to change array configuration and use generic  insert function. Suppose we want to insert 'admin321', 'my_pass', 'admin321@gmail.com' into MySQL table my_table with column 'login_name', 'password' and 'email', we can use the following code. For insert new values, we only need to redefine  $array.
 Code:
<?php

  
// array containing data
  
$array = array(
     
"login_name" => "admin321",
     
"password" => "my_pass",
     
"email" => "admin321@gmail.com"
  
);

  
// build query...
  
$sql  = "INSERT INTO my_table";

  
// implode keys of $array...
  
$sql .= " (`".implode("`, `", array_keys($array))."`)";

  
// implode values of $array...
  
$sql .= " VALUES ('".implode("', '", $array)."') ";

  
// execute query...
  
$result = mysql_query($sql) or die(mysql_error());

?>

Friday, February 22, 2013

jQuery image change demo



In this demo, only images are changed when users click the 1, 2,3 link while other parts of the website keep unchanged. jUQery html, <img> attr method are used.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <h1> jQuery image change demo</h1>
<div id="container">
    <img src="http://www3.telus.net/public/jianlu58/belugas3D.jpg" />
</div>
<p id="menu">
    <a href="http://www3.telus.net/public/jianlu58/belugas3D.jpg">1</a> |
    <a href="http://www3.telus.net/public/jianlu58/brain.JPG">2</a>|
    <a href="http://www3.telus.net/public/jianlu58/pumpkin.JPG">3</a>
</p>
<script>
$("#menu a").click(function(){
    $("#container").html($("<img>").attr("src", this.href));;
    return false;
});
</script>
</body>
</html>


Demo: click link 1, 2,3 to see images changed.


jQuery image change demo

Thursday, February 21, 2013

HTML5 form validation


HTML5 has ability for form validation. Putting  'required' in input field shows that the field  has to be inputted before form submission. Using placholder to get a hint in input field.  For email fiedl, you have to enter *@-.-.  to be accepted.  in url field, I put  the pattern to only accept text starting with http:// or https:/. For number field, I put min and max for number range.
Code: 
    <form action=" " method="post">
        <label for="name">Name:</label>
        <input type="text" name="name" required placeholder="Name" />
        <br />
        <label for="email">Email:</label>
        <input type="email" name="email" required placeholder="email@example.com" />
       <br />
        <label for="website">Website:</label>
        <input type="url" name="website"  required pattern="https?://.+" />
<br />
        <label for="number">Number:</label>
        <input type="number" name="number" min="0" max="10" step="2" required placeholder="Even num < 10">
<br />
        <label for="range">Range:</label>
        <input type="range" name="range" min="0" max="10" step="2" />
<br />
        <label for="message">Message:</label>
        <textarea name="message" required></textarea>
    <br />
        <input type="submit" value="Send Message" />
            </form>

Demo:







Wednesday, February 20, 2013

A jQuery AJAX example: giving a hint in input box



In this example, when users type firstname in the text box, the suggestion will be given at the same time.
In test1.php:
<?php
$array = array("apple","cake", "jiansen", "foo", "bar", "hallo", "world","test");
foreach($array as $v1)
{
    $ss=$_POST['suggest'];
    if(preg_match("/$ss/i", "$v1"))
       echo $v1.'<br />';
}
?>

Here we get $_POST['suggest'] from ajax in jquery, "/$ss/i" is case insensitive search using PHP function preg_match. $array is the hint array stored in server.
index.html: using ajax  $.post to post suggest to test1.php
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").keyup(function(){
    txt=$("input").val();
    $.post("test1.php",{suggest:txt},function(result){
      $("span").html(result);
    });
  });
});
</script>
</head>
<body>
<p>Start typing a name in the input field below:</p>
First name:
<input type="text" />
<p>Suggestions: <span></span></p>
</html>

Demo:

Tuesday, February 19, 2013

Only update a div in HTML



Below is the example to only update one div in HTML USING JS timing function setInterval
 Part 1: using ajax and jquery to update content posted from test.php
Part 2: Only use Javascript
 <html>
 <head>
<!-- Part 1 For ease i'm just using a JQuery version hosted by JQuery- you can download any version and link to it locally -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var cacheData;
var data = $('#bottom-bar').html();
var auto_refresh = setInterval(
function ()
{
    $.ajax({
        url: 'test.php',
        type: 'POST',
        data: data,
        dataType: 'html',
        success: function(data) {
            if (data !== cacheData){
                //data has changed (or it's the first call), save new cache data and update div
                cacheData = data;
                $('#bottom-bar').html(data);
            }         
        }
    })
}, 300); // check every 30000 milliseconds
</script>
<!-- Part 2 Only using Javascript-->
            <script langauge="javascript">
                var counter = 0;
                window.setInterval("refreshDiv()", 500);
                function refreshDiv(){
                    counter = counter + 1;
                    document.getElementById("test").innerHTML = "Testing " + counter;
                }
            </script>
</head>
<body>

<div id="bottom-bar">test
</div>

            <div id="test">
                Testing
            </div>
            <div id="staticBlock">
                This is a static block
            </div>
</body>
</html>


test.php
 <?php
echo "Hello World <br />";
$counter = rand();
echo $counter;
?>


Demo

Sunday, February 17, 2013

Using CSS to draw different shapes



We can use CSS to design different shapes. Examples CSS:
     <style>
            /*square*/
.Square { width: 100px; height: 100px; background: #669; }
/*rectangle*/
.rectangle { width: 200px; height: 100px; background: #669; }
/*trapezoid*/
.trapezoid { border-bottom: 100px solid #669; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }
/*parallelogram*/
.parallelogram { width: 150px; height: 100px; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); background: #669;margin-left:20px; }
        </style>
In HTML:
    <div class="Square"></div><br />
     <div class="rectangle"></div><br />
 <div class="trapezoid"></div> <br />
  <div class="parallelogram"></div>
Reference:
http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html
Final demo:





Tuesday, February 5, 2013

Draggable in jQuery User Interface



In jQuery Unser Interface:
http://jqueryui.com
There are a lot of useful demo, such as: Draggable, Droppable, ResizableSelectable, Sortable.
 There are alot of widgets and effects. Example of Draggable:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#draggable { width: 150px; height: 150px; padding: 2.5em;background-color: blue }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p><br />Drag me around</p>
</div>
</body>
</html>
 Demo: Drag the block around

Friday, February 1, 2013

Extract XML in PHP



Suppose we have following XML file:
<?xml version="1.0" encoding="UTF-8"?>
<main>
   <config>

  <controlsWidth type="Number">640</controlsWidth>
      <controlsHeight type="Number">480</controlsHeight>
  </config>
</main>

We want to extract  640 in controlsWidth using PHP.
Define a PHP function:
function get_camtasia_width($file){
//call xml2Array class
  $objXML = new xml2Array();
  $data=implode("", file($file));
   $configxml = $objXML->parse($data);
   $lecture_map=$configxml[0]['
childNodes'];
 // print_r($lecture_map);
    foreach($lecture_map as $lecture){
           foreach($lecture['childNodes'] as $childNode){
             if ($childNode['name']=="CONTROLSWIDTH") 
             $slide_width = $childNode['text'];
               }
          }
        return        $slide_width;
}

External class xml2Array class as following:
<?php
/* Usage
 Grab some XML data, either from a file, URL, etc. however you want.
Assume storage in $strYourXML;

 $objXML = new xml2Array();
 $arrOutput = $objXML->parse($strYourXML);
 print_r($arrOutput); //print it out, or do whatever!

*/
class xml2Array {

   var $arrOutput = array();
   var $resParser;
   var $strXmlData;
   //var $tag_name;

   function parse($strInputXML) {

           $this->resParser = xml_parser_create ();
           xml_set_object($this->
resParser,$this);
           xml_set_element_handler($this-
>resParser, "tagOpen", "tagClosed");
           xml_set_character_data_
handler($this->resParser, "tagData");
           $this->strXmlData = xml_parse($this->resParser,$
strInputXML );
           if(!$this->strXmlData) {
               die(sprintf("XML error: %s at line %d",
           xml_error_string(xml_get_
error_code($this->resParser)),
           xml_get_current_line_number($
this->resParser)));
           }

           xml_parser_free($this->
resParser);
           return $this->arrOutput;
   }

   function tagOpen($parser, $name, $attrs) {
       $tag=array("name"=>$name,"
attrs"=>$attrs);
       //$tag=array($name=>$attrs);
       //$this->tag_name = $name;
       array_push($this->arrOutput,$
tag);
   }

   function tagData($parser, $tagData) {
       if(trim($tagData) != '') {
           if(isset($this->arrOutput[
count($this->arrOutput)-1]['text'])) {
               $this->arrOutput[count($this->
arrOutput)-1]['text'] .= $tagData;
           }
           else {
               $this->arrOutput[count($this->
arrOutput)-1]['text'] = $tagData;
           }
       }
   }

   function tagClosed($parser, $name) {
       $this->arrOutput[count($this->
arrOutput)-2]['childNodes'][] =
$this->arrOutput[count($this->
arrOutput)-1];
       array_pop($this->arrOutput);
   }
}
?>