2013年6月10日月曜日

How to customize your code on blogger ( SyntaxHighlighter )


Introduction

I want to show everyone how to make your source code looks neat and tidy like the sample code below.
    /**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }


What your have to do is pretty simple. There are only 3 steps.

  1. Configure your blog by copy and paste the links I given into your template header
  2. Copy your source code you want to show on your blog and paste it on HTML
  3. Wrap your source code with <pre> tag

Well, if you are still don’t understand what we are going to do. Just follow my instruction.

1st step


As what I have said on above, copy the following links .
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

Where to paste? Template header ! First login into your blogger dashboard.

1

Then, click “template” on left-hand-side.

2

Then, click “Edit HTML”

3


Find the header close tag </head> and paste the code above the header.

Here’s we are done with configuration. Let’s do some simple test on it.

Second Step


Open new post. And switch your edit mode from compose to HTML.

Let’s say you have following source code.
 
    /**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }

Paste the source code into your content. Remember, you must paste it in HTML mode but not Compose mode.

If there is any symbol like <> in your code, you must change them to &lt; and &gt; respectively.

4

It should looks like above.

Final Step


After you have paste your source code into content, we have to wrap your source code with <pre> tag.

5


Here’s we done! Save it and view it.

Link

The source code and library above is provided by SyntaxHighlighter. Check it out for more details.

Thank you.

2013年4月10日水曜日

Beginner Question - What is SSCCE?

For beginner programmer, you will found out this words comes out very often on java software developing forum such as stackOverflow. What does SSCCE mean?

If you have looks at the SSCCE link. 5 big words is highlighted on the top of the page.

sscce1

And the following things is the content that filled with dozens of words to explain what does it means and why do we need to do it.

I know many programming beginner is short of patient and want their answer comes out immediately instead of reading a long long article to understand the content. SO,

What is SSCCE? It is

  • Make your question as short as possible
  • Make your question easy to be understand
  • Post compilable code instead of parts of your work ( Simple code applying your problems. exp. public static void main )

Usually, people say “please post sscce”. It means post a runnable code that show the problems you are having and can be copy and paste and straight to be compiled on IDE (IDE means the software that used of developing application, exp. eclipse IDE, visual studio)

Why do we needs to do so?

No matter how well your English is, the best way to tell people what wrong on your code always is allow others compile you works and find the actual error.

For example,

Pretend that you are developing Java Swing application and you are having problems of label is not showing on windows. Here’s the code provided.

  1: public class createLabel extends JLabel {
  2:      
  3:      public createLabel() {
  4:           super();
  5:           setText("HELLO WORLD");          
  6:           setLayout(null);
  7:      }
  8: 
  9: }
 10: 

And the problems look like following.


eeccs2


Maybe you might think that label is not showing because there is an error on your label code so you only post the part of the label. However, you wouldn’t be able to solve it if you only post label code. Let’s me show you why. Take a look at following whole code.


 

  1: import javax.swing.JFrame;
  2: import javax.swing.JLabel;
  3: 
  4: public class createLabel extends JLabel {
  5: 
  6:      public static void main(String[] args) {
  7:           JFrame frame = new JFrame("Title");          
  8:           JLabel label = new createLabel();
  9:                     
 10:           frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 11:           frame.setLocation(300,200);
 12:           frame.setSize(200, 130);          
 13:           frame.setVisible(true);
 14:      }
 15:      
 16:      public createLabel() {
 17:           super();
 18:           setText("HELLO WORLD");          
 19:           setLayout(null);
 20:      }
 21: 
 22: }
 23: 

If you tried to provide the compilable code instead of part of the code. We are able to help you find out what exactly you are having.


From the source above, we can understand that the reason why label is not showing on windows is due to frame.add(label) is not added. There is no problems on label code. So if you are provided a part of the code, you wouldn’t be able to found out what exactly problems you are having.

2013年4月1日月曜日

Square Root algorithm for C


Introduction

For those who are looking for how square root algorithm is working and “YES !, Welcome to my blog”, but for those who are simply looking for performing square root your programming and I have to tell you, what you have to do is do some google searching on “math.h” header file to look for square root function that prepared inside it.
Well, let’s begin our lesson “How square root algorithm is working on c”
It’s not very difficult once you have understand how following equation is calculated
eq2 Left hand side of the diagram shows the square root of 152.2756 and right hand side shows the square root of 2.
For those who have understand how this calculation is been done, please skip to the code as I am going to explain the how to solve this equation.

Basic Principle of Square Root

Based on the question given above, we understand that square root of 152.2756 is 12.34 and the square root of 2 is 1.4142. If you do not believe, try calculator to find the answer.
Suppose we are finding the square root of 2 and the answer is 1.4142. We can expressed it such that
clip_image002[6]
If we expressed it to algebra expression as following.
clip_image002[8]
Suppose a is continue for n times, it can be expressed as following
ex3 Why I am treating it continue as n times but not 5 times? Because we cannot ensure that all positive number will give us a 5 digits answer after square root it. So we have to suppose there are n digits after square root.
Right-hand-side term can be expanded as following
ex4
From the equation above, we can understand square root equation can be solved by following equation.
ex5The most important rule of this equation is we pick a number from 1,2,3,4,5,6,7,8,9 and multiple it with 10^m, where m = Integer (exp. 3,2,1,0,-1,-2,-3,...) and substitute into  clip_image002[12]that must be smaller then the number we are going to minus or equal to it. It’s the most difficult part on square-root equation so lets understand it by solving square root of 2.

So, from the solution above, we understand that
eq8
And we sum up all the value, we get the answer 1.414 approximate to 1.4142

Algorithm

Based on the method above, what kind of works should we applied on algorithm as following
  • Create equation 
  • Create function of power of ten
  • Find suitable number that bigger then 0 for variable a from loop
  • Find suitable number that smaller then 0 but positive for variable a from loop
  • Sum all variable a and return it as double
First, we are going to create the equation as we mentioned above
ex5
We can expressed it as code as following
(( 2 * rst ) + ( j * powerOfTen(i)))*( j * powerOfTen(i))


where rst and j is declared as double and i is int. powerOfTen is a function that return a value of i times multiple of 10.

It’s code of function powerOfTen
  1: 
  2: double powerOfTen(int num){
  3:      double rst = 1.0;
  4:      if(num >= 0){
  5:           for(int i = 0; i < num ; i++){
  6:                rst *= 10.0;
  7:           }
  8:      }else{
  9:           for(int i = 0; i < (0 - num ); i++){
 10:                rst *= 0.1;
 11:           }
 12:      }
 13: 
 14:      return rst;
 15: }

We have to judge that variable a must be smaller then upper number. It’s how it looks like
if(z - (( 2 * rst ) + ( j * powerOfTen(i)))*( j * powerOfTen(i)) >= 0)

where z  is declared as double and treat as upper number.

There are two loops, one loop for finding the suitable number from 10000,1000,100,10… and another one loop for find suitable number from 1,2,3,4,5…
  1: for(i = max ; i > 0 ; i--){
  2:      // value must be bigger then 0
  3:      if(z - (( 2 * rst ) + ( j * powerOfTen(i)))*( j * powerOfTen(i)) >= 0)
  4:      {
  5:           while( z - (( 2 * rst ) + ( j * powerOfTen(i)))*( j * powerOfTen(i)) >= 0)
  6:           {
  7:                j++;
  8:                if(j >= 10) break;
  9:                     
 10:           }
 11:           j--; //correct the extra value by minus one to j
 12:           z -= (( 2 * rst ) + ( j * powerOfTen(i)))*( j * powerOfTen(i)); //find value of z
 13: 
 14:           rst += j * powerOfTen(i);     // find sum of a
 15:                
 16:           j = 1.0;
 17:           
 18: 
 19:      }          
 20: 
 21: }



Same loop as above but this times we are going to find the decimal number.
  1: for(i = 0 ; i >= 0 - max ; i--){
  2:      if(z - (( 2 * rst ) + ( j * powerOfTen(i)))*( j * powerOfTen(i)) >= 0)
  3:      {
  4:           while( z - (( 2 * rst ) + ( j * powerOfTen(i)))*( j * powerOfTen(i)) >= 0)
  5:           {
  6:                j++;
  7:                if(j >= 10) break;                    
  8:           }
  9:           j--;
 10:           z -= (( 2 * rst ) + ( j * powerOfTen(i)))*( j * powerOfTen(i)); //find value of z
 11: 
 12:           rst += j * powerOfTen(i);     // find sum of a               
 13:           j = 1.0;
 14:      }
 15: }

This is how the whole squareRoot algorithm looks like
  1: double squareRoot(double a)
  2: {
  3:      /*
  4:           find more detail of this method on wiki methods_of_computing_square_roots
  5: 
  6:           *** Babylonian method cannot get exact zero but approximately value of the square_root
  7:      */

  8:      double z = a;     
  9:      double rst = 0.0;
 10:      int max = 8;     // to define maximum digit 
 11:      int i;
 12:      double j = 1.0;
 13:      for(i = max ; i > 0 ; i--){
 14:           // value must be bigger then 0
 15:           if(z - (( 2 * rst ) + ( j * powerOfTen(i)))*( j * powerOfTen(i)) >= 0)
 16:           {
 17:                while( z - (( 2 * rst ) + ( j * powerOfTen(i)))*( j * powerOfTen(i)) >= 0)
 18:                {
 19:                     j++;
 20:                     if(j >= 10) break;
 21:                     
 22:                }
 23:                j--; //correct the extra value by minus one to j
 24:                z -= (( 2 * rst ) + ( j * powerOfTen(i)))*( j * powerOfTen(i)); //find value of z
 25: 
 26:                rst += j * powerOfTen(i);     // find sum of a
 27:                
 28:                j = 1.0;
 29:           
 30: 
 31:           }          
 32: 
 33:      }
 34: 
 35:      for(i = 0 ; i >= 0 - max ; i--){
 36:           if(z - (( 2 * rst ) + ( j * powerOfTen(i)))*( j * powerOfTen(i)) >= 0)
 37:           {
 38:                while( z - (( 2 * rst ) + ( j * powerOfTen(i)))*( j * powerOfTen(i)) >= 0)
 39:                {
 40:                     j++;
 41:                     if(j >= 10) break;                    
 42:                }
 43:                j--;
 44:                z -= (( 2 * rst ) + ( j * powerOfTen(i)))*( j * powerOfTen(i)); //find value of z
 45: 
 46:                rst += j * powerOfTen(i);     // find sum of a               
 47:                j = 1.0;
 48:           }
 49:      }
 50:      // find the number on each digit
 51:      return rst;
 52: }
 53: 

Reference


I am referring to this wiki website. For more details, please refer on this website. Thank you.

2013年2月23日土曜日

Simple Sync Apps

About Download

Click here to download. The zip file contains 2 projects and 1 php file.

Introduction

I begin to learn programming is still half of a years ago and I begin to write this application is about one months ago. Begin from 0 knowledge to network and server. So I couldn’t make sure that I have wrote a very perfect program. But, this application do exactly what I need for that is synchronizing between android and desktop. 
It is how it’s look like. Check it out with the following video.



How it's work

sync_pic1Picture above shows how the data is transferred. Database server is a bridge to allow data move from android to desktop and move from desktop to android. That’s all, simple right!
Of course that’s other way such as cloud computing or others. Based on my knowledge, this is easier way I know.

Develop Environment

My develop environment is Java JDK version 1.7.0_13, Eclipse SDK (Juno version 4.2.1), XAMPP 1.8.1, MySQL Connector/J 5.1.23, android 4.2
Because every software I used to develop this application is open-source, I spent a zero cost on this project.

Program Flow Chart


sync_pic2

Flow chart beside shows how data is passing through between android and desktop.
When user press a button on UI thread to ask android read what desktop have written, android will begin access to MySQL server.
In server side, 2 php files ( update database and read database php files) is created and located at htdocs. After android will success to access into server, then android will begin searching the php files requested (either update or read php files) through HTTP protocol.
Request ask for read database php file to work. When read database php file is executed, php file will begin it’s work by log in to database and retrieve the data requested that what desktop have written into database. After, php get the data it wants from database, it will pass it again to android and android get the data and put it on UI thread to show user what data have retrieved from database.
If the desktop ask for what android have written, it (desktop) will do exactly same things as what android did. desktop will going into database adapter request for data it wants. Then database adapter will log in to database server through Java-MySQL connector and search for what android have written into database. After database adapter get what their want, it will pass the data to desktop and desktop will put it on screen to show user what data it ( desktop ) got.

Source Code

  • mysqlAndroid is an android project. Inside this project contains three java source code. (JsonParser, JsonPost and MainThread)
  • JsonParser.java contains HttpGet method. There is no input data to url, only retrieve data from php file.
  • JsonPost.java contains HttpPost method. This method allow data post into php file.
  • MainThread.java is a UI thread work that called the button or textView method allow user talk with machine.

  • mysqlDesktop is an java Swing project. Inside this project contains three java source code and one external jar that is DatabaseAdapter.java, jConnector.java and MainFrame.java and mysql-java Connector.
  • jConnector.java contains the source code that allow java project connect to MySQL database.
  • DatabaseAdapter.java used to make database work getting easier to carry out.
  • MainFrame.java is a source code allow user to talk with device through window form