Learning Progression

Here in codeofaninja.com, we usually have three LEVELS of source code output. But WHY? Because I believe in "Learning Progression" to ensure efficient learning.

Not all of us can swallow a lot of information all at once. So we do it one at a time. By different levels. This way, learners will be forced to learn the essential basics of the subject.

Accoding to Dr. W. James Popham, an Emeritus Professor in the UCLA Graduate School of Education and Information Studies:

"Learning Progression is a sequenced set of skills and knowledge we believe students must learn on the way to mastering a more distant curricular outcome."

You can read more about the subject here, here and here.

So if you really want to learn, and serious about learning from our programming tutorials: I highly recommend studying the LEVEL 1 source code first, then the LEVEL 2, then the LEVEL 3 source code.

Some Changes in our Code Blog


Hey guys! As you can see there are some changes here in our blog, and how it works. For the past few months I've been really busy on these changes and on work that I haven't posted something that's of high quality to you. :D

Anyway, for those who are asking, YES, I'm still alive and this blog will continue to be updated as long as I live. Haha!

#1 Navigation Bar

Instead of long options in the site navigation bar, I grouped some of them and make it a drop-down. For instance, I added a "Programming Tutorials" item and under it are all the programming tutorials section available here in our blog.

I do this because want to achieve an easy and seamless navigation around web pages of codeofaninja. The navigation bar items on the home page is the same in the demo center, download center, and online tools. By the way, for those of you who doesn't know what Demo and Download centers are, you can refer to #2 below.

The new navigation bar.

#2 Demo and Download Centers

As I was saying in #1 above, the "Demo Center" is where you can find blog posts with a code "demo" or list of code demos that came from our tutorials. You can also see how popular the post becomes in the social media because I included the Facebook, Twitter and Google Plus buttons with their respective counts. And yes, the buttons are alive so you can click them yourself!

On the other hand, the "Download Center" is where you can find the code downloads of every post with a code download that it deserves. Only codeofaninja members can access this section of our site, you have to enter your email to be a member. Don't worry, I don't spam all those 14,000+ members.

It makes me happy to think that the members continue to grow every day, in fact, an average of 30 to 50 members are added everyday! Currently, I don't give updates via email since an email service like MailChimp cost too much. In the near future, more cool features will be added to the Download center and only members like you can enjoy it!

Another cool thing is that, these centers are integrated with my WordPress database. So, every time a new post was published, it will be an item on these centers - automatically! But a lot of items are still, have to be updated.

#3 Increasing Visitors and Members

My heart feels like I have purpose in this world, it's because of you guys! You give a little attention to my blog. Some of you love our tutorials and browse the different pages of our blog. I just wanna say, thank you very much, from the bottom of my heart! I know it sounds cheesy but, it's true. Gimme a hug!

#4 Most Requested Topics

I'm planning to post more of what you guys like. According to our analysis and feed back from you, the most requested topics include PHP, Bootstrap, jQuery UI and jQuery. Android still comes up although not that much for now.

#5 YouTube Channel


I was planning to convert most of my tutorials here to YouTube videos. But posted a question on our social media accounts, asking you on which tutorial format do you prefer, a programming tutorial on (A) a webpage or (B) a video?

Most of you answered the letter A. Some of you answerd "Both" and few answered B. So yes, I decided to remain on the webpage format. But some code demos will still be on videos, so please subscribe on our youtube channel for any updates. If there is an update on our channel, there is also a greater chance that there is a new post here on our blog.

#6 New Favicon

Our first favicon was ugly and I don't even wanna show it to you once again, so I removed it. Yesterday, I get the chance to udpate our favicon. I'm so happy I did, our website looks like it has a little more authority was added. I just want to give a big thanks to this website http://xiconeditor.com/ for doing a great job creating our beautiful favicon!

#7 Android Gallery

Yes, my first concept about the Android Gallery website sucks, so I'm changing it to a more useful and contextual content. I'm excited to bring you the new Android Gallery! But right now, most posts looks broken, but I'm also working to fix them.

We also changed the theme of the website to make it look more useful and easier to browse. We are also optimizing the images so that it will load faster even in mobile devices, yes the layout is responsive and looks good on mobile!

That's it for the updates guys, be sure to follow us on social media or subscribe via email (all links on the sidebar), I'll see you on the next post! ~ Mike

Yo App Super Funny Comments

yo app super funny comments

Few days ago, an app called "Yo" was released. Like the name suggests, the "Yo" app has one simple function: sending a single message: Yo.

How it works? You create a list of contacts. You tap one of those contacts, and they get a "Yo" message. According to the app's description, it can mean pretty much whatever the sender wants it to mean, depending on context:

Wanna say "good morning"? just Yo.
Wanna say "Baby I'm thinking about you"? -- Yo.
"I've finished my meeting, come by my office" -- Yo.
"Are you up?" -- Yo.

The app has received $1 million in angel funding from a group of investors. Sounds stupid and funny, right? But do you know what is funnier? The user comments and testimonials about it. I've compiled some of them below, read and laugh! (I don't know if we have the same level of humor, so don't hate me if you didn't find the list below funny enough)

1. "YOlo. This app changed my life. I used to work in a dead end job making minimum wage but YO changed all of that. I've finally learned that with the right networking tools, anything is possible. Now I drive a Ferrari and own a pet unicorn. This app is amazeballs." Source

2. "My life will never be the same. I started out work at this new place where I felt shy in communicating with my co-workers. Life was already rough with me, with my gf asking to break up and my parents feeling that their son had drifted apart. So tough, that I had to even sell off my gf's shoes to make ends meet. But then, Yo happened. I started communicating much more efficiently. Boss gave me the "Best Communicator Award". My parents were proud that I could finally convey what I felt. And my gf, well, getting married :D"

3. "The best. I was fat, ugly, highly depressed and suicidal, but ever since i installed yo, my life just turned into awesome, my fat burned easily, and suddenly i have six pack on my stomach, seriously, best app ever!"

4. "Yo was the best thing that's ever happened to me. I started college and I really didn't know anyone.I had no one to talk to I ate all my meals alone and I was becoming extremely depressed. I saw this app in the app store and downloaded it because I though that maybe something like this could get me to smile. But suddenly I started to get yo's from so many people on campus! It's the best feeling in the world when someone sends me a yo. I know when a yo is meant to simply say hello and when it means I'm madly in love with you! There's no ambiguity!I Love yo!"

5. "Life changing. Before Yo I was a sad, lonely individual that couldn't even string a sentence together. I had no friends, no family, no money, no house, no nothing. Since installing Yo everything has changed. I'm married, have 2 beautiful children, a Ferrari and homes throughout the world. Thank you Yo."

6. "Saved my life. I thought I was going nowhere in life; my girlfriend left me, I got fired from my job, and I just got evicted from my apartment even though I had been paying rent. I was so distraut I stood on the side of a bridge about to jump. When I got a Yo from my friend I realized that my life could mean so much more. I started Yo'ing everybody and they Yo'ed me back. Everything changed: I got hired with a billion dollar signing bonus, I married Emma Watson and got super ripped. Yo changed my life."

7. "Yo. I don't have time for 140 characters, or texting people. Yo has replaced every communication tool I use. Boss "is your presentation ready to go"...YO. Girlfriend Why don't you look me in the eyes when were intimate" ...YO. Dad "Your mom died"...YO."

8. "Yo. My girlfriend and I always had arguments with no resolution. I think communication was the problem. One day, my girlfriend decided to leave me for good without any hopes of returning. Life was tough and it wasn't easy for me. There wasn't a single night I slept without dreaming of her. I needed to get myself back on my feet. All this changed with Yo. One day, I decided to Yo at my girlfriend. Since then, we've got back together and never looked back. We only communicate with Yo nowadays."

9. "This app is life. After the the divorce of my parents this app has brought happiness back into the hearts of my family members. So much has happened and I just didn't even know what to say. My mother is an emotional wreck and my dad has been suffering from random fits of anger. Finding this app has finally been able to help me communicate and find the words to do so. Now that my mother and father use this app they have been able to say yo to each other! They haven't talked to each other in months. Thank you yo..."

10. "I was once blind but now I see. Thanks to this revolutionary application, communication with my co-workers has never been more efficient. Need to reach someone on the other side of the office? Just shoot me a Yo. Need a fix because of a deadline crunch? Yo it up; your message can't get across any clearer! We can honestly say we have achieved a 20% productivity boost upon discovering Yo, and hope you can experience it today. 10/10 would Yo again"

11. App Store Review by Appbot: "This app changed my life. I am a professional scientist who has been scouring the earth for 7 years in search of a program or application so revolutionary, so outside of the box, so groundbreaking, that it could actually reverse the effects of clinical depression and bipolar disorder. "Yo" seems to be a fit. I have tested the effects of yo on several samples of depressed and bipolar tigers. Tigers were a natural choice for testing due to the little known fact that their anatomy is nearly identical to that of a humans. In a sample of depressed tigers, 8 out of 10 became happier due to the app yo and in an all male sample, 9 out of 10 experienced increased libido. I have taken my findings to Pfizer in hopes of negotiating some sort of three way contract between the creators of yo, Pfizer, and myself, Chisley Winsett M.D. So my message is this, creators of yo, this app that you have so sweetly crafted is not just an app, nay, but a highly scientific piece of medical innovation. We could do great things together. Please respond. Regards, Chisley Winsett M.D."

12. "Yo dawg. I heard I used to be a poor stonemason in Gotham City, when the Fire nation attacked and the war in Westeros broke out. What's worse, I forgot to renew my internet subscriptions. But all that changed when I installed this app, after which I became Batman AND High King. Now excuse me for I need to drive up to my homies Snoop Dogg and Xzibit, who love me for this app."

If you found other funny comments or testimonials about this Yo app. Please add it in the comment section below! Thanks! And make sure to check the full list of all current sign up offers for the 2018 betting.

Product Unit of Measure Conversion Pseudocode

Unit of Measure Conversion Pseudocode

I don't know if we will have the same term in mind, but here in our country we call it Product Unit of Measure or UOM. For example, we have a "candy" product. Possible unit of measures could be: pieces, packs and boxes.

The purpose of this post is to solve the problem of converting product quantity or inventory values in different unit of measures. I think SAP has this functionality. Just in case you want to have the same in your current program, keep on reading!

The following questions might give you some more ideas about this post:

How many box are 132 pieces?
How many box are 309 packs?
How much of a box are 33 pieces?
How much of a box are 5 packs?

...and many other combinations. So let's get started!

Example Product

For example we have a product with 3 unit of measures.

Product code: COF_A1
UOMs: box, pack, pcs

Three Objects to Consider

In this post, when I say "upload", it generally refers to saving the value in the system database. Anyways, when working with unit of measure conversion, the user usually deals with three objects:

1. Product (above)
2. Unit of Measures (UOM)
3. UOM Conversion Values

Uploading Unit of Measures (UOM)

Tell the user to upload their UOMs from biggest to smallest. It will look like this in the list or CSV:


Uploading UOM Conversion Values

When uploading UOM conversion, the bigger UOM/s are on the left side and the smallest UOM is always on the right side. For example:

1 box = 24 pcs
1 pack = 12 pcs

UOM Conversion in Action (Examples)

Now apply it in the following input based on the above UOM conversion.

Convert the following pcs to box:

8 pcs = ? box:

First, convert to smallest UOM:

8 pcs = 8 pcs (since pcs is already the smallest UOM, no need to multiply to any value)

Second, divide the smallest UOM to "box" conversion value:

8 / [24] = [0.34 box]

Final answer:

8 pcs = 0.34 box

Convert the following pcs to pack:

15 pcs = ? pack:

Convert to smallest UOM:

15 pcs = 15 pcs (since pcs is already the smallest UOM)

Divide the smallest UOM to "pack" conversion value:

15 / [12] = [1.25 pack]

Final answer:

15 pcs = 1.25 pack:

Convert the following packs to pcs

9 pack = ? pcs:

Convert to smallest UOM.

9 pack = 9 * [12] = [108 pcs]

Final answer. No need to divide to a value since we already get the pcs value

9 pack = 108 pcs

Convert the following pack to box

11 pack = ? box:

Convert to smallest UOM.

11 pack = 11 * [12] = [132 pcs]

Divide the smallest UOM to "box" conversion value:

132 / [24] = [5.5 box]

Final answer.

11 pack = 5.5 box

Convert the following box to pcs

3 box = ? pcs:

Convert to smallest UOM.

11 box = 11 * [24] = [264 pcs]

Final answer. No need to divide to some value since we got the "pcs" value already.

11 box = 264 pcs

Convert the following box to pack

7 box = ? pack:

Convert to smallest UOM. Multiply by "box" conversion value.

7 box = 7 * [24] = [168 pcs]

Divide the smallest UOM to "pack" conversion value:

168 / [12] = [14 pack]

Final answer.

7 box = 14 pack

Convert the following "box and pack" to pcs

2 box and 8 pack = ? pcs

First, convert them to smallest UOM:

2 box = 2 * [24] = [48] pcs
8 pack = 8 * [12] = [96] pcs

Second, add them:

48 pcs + 96 pcs = [144 pcs]

Final answer. No need to divide some values since pcs is the smallest UOM.

2 box and 8 pack = 144 pcs

Convert the following "box and pcs" to pack

4 box and 18 pcs = ? pack

Convert them to smallest UOM:

4 box = 4 * [24] = [96] pcs
18 pcs = [18] pcs (as is since pcs is the smallest UOM)

Add them:

96 + 18 = [114 pcs]

Divide the total smallest UOM to "pack" conversion value:

114 pcs / [12] = [9.5 pack] (yes, we divide this time!)

Final answer:

4 box and 18 pcs = 9.5 pack

Convert the following "pack and pcs" to box

3 pack and 13 pcs = ? box

Convert them to smallest UOM:

3 pack = 3 * [12] = 36 pcs
13 pcs = [13] pcs (as is since pcs is the smallest UOM)

Add them:

36 pcs + 13 pcs = 49 pcs

Divide the total smallest UOM to "box" conversion value:

49 pcs / [24] = [2.04 box]

Final answer:

3 pack and 13 pcs = 2.04 box

Major rules:

Here are some noticeable rules during the process:
1. When converting to smallest UOM, use multiplication.
2. Smallest UOM does not need to be converted.
3. When converting from smallest UOM to bigger UOM, use division.

Unit of Measure Conversion Pseudocode

Of course, all the examples above can be automated. The first is step is making a pseudo code.

Problem: 3 pack and 13 pcs is how many box?

// initialize converted value
converted_value = 0;

// set the product code
product_code = 'prod-1'

// set the target uom
target_uom = 'box';

// prepare objects (should be in loop and retrieved from database)
obj_1 = new obj();
obj_1.val = 3;
obj_1.uom = 'pack';

obj_1 = new obj();
obj_1.val = 3;
obj_1.uom = 'pack';

// put in array (if you're using PHP, you can use array_push while looping values from database)
input_obj_arr = {

// variable for accumulated smallest uom
accumulated_smallest_uom_val = 0;

// loop through the array
foreach(input_obj_arr as input){

	// get the conversion value
	uom_conversion = getConversionValue(product_code, input.uom);

	// convert to smallest uom
		// if uom_conversion is null, it means it is already the smallest uom
		// uom_conversion will be null since getConversionValue() method DO NOT get the smallest uom conversion value

		// use multiplication to convert to smallest uom
		smallest_uom_val = input.val * uom_conversion.va;

		// accumulate smallest_uom
		accumulated_smallest_uom_val += smallest_uom_val;

// now convert to the target uom
// getConversionValue() method will return null if it tries to get the smallest uom
target_uom_conversion = getConversionValue(product_code, target_uom);

// if target_uom_conversion is null, the accumulated_smallest_uom_val is as is the converted_value
	converted_value = accumulated_smallest_uom_val;

// compute the converted value by division
	converted_value = accumulated_smallest_uom_val / target_uom_conversion.val;

3 pack and 13 pcs is 2.04 box (See example 5.9 above)

If you have any other way of solving this unit of measure conversion problem, please tell us in the comment section below. I am willing to change my current solution if yours is better.

Thanks for reading this post about unit of measure conversion pseudocode. If it helps you, please like or share it. Or if you have a friend or colleague that needs this type of solution, please share this to them, you'll be happy you did. It's always nice to help others.

How To Make Things Happen?

It's simple.

How about not looking and not thinking about the things that can hold you back? You will feel lighter, excited, happy and empowered.

Just focus on how you can help other people, businesses or customers. They will feel it. You're sincere. You provide value. You have the skills. You can solve real world problems.

Stop "guessing" a solution. Stop wasting time. Act now and talk directly to the people you want to help and deserve your help.

What if you were rejected, or they didn't agree with you? It's their loss, not yours. They missed the opportunity to get the best possible solution.

So just keep on trying. :)

make things happen

There will be people who will absolutely love you for what you are doing. Let go of those who don't. You will learn a lot along the way and discover exciting things you never think of before.

This post isn't actually about programming. This is about life as I see it in another window. It can be related.

In real life programming or software development, it requires a strong mind, skills, patience and effort to come up with a good output or solution. In the game called "life", the same kind of stuff is needed to succeed and give the world a good service.

Back to making things happen, I think I have a good history of doing it.

When I was a kid

They told me not to speak up to avoid any trouble in school or anywhere. So I grew up shy and unsociable. I fear being with other people. I can't do so much when I was at this stage.

I didn't enjoy it. Other children won't play with me. I think they didn't like me because I'm too quiet and look paralyzed.

When I was in high school

I had these setbacks but a friend noticed that I love reading books. He told me to recite more in class because he's sure I can say something better than the others.

I tried it. Even if I fail sometimes, he still believed in me. I let go of the thoughts that won't help me be a better person.

I think of the good things that can happen if I will do it. My future will be bright and wealthy if I overcome this fear.

So I kept on trying and improving my skills. And that changed my whole high school life. I can speak when I want to. I got a girlfriend. I became a lead guitarist of a band. I graduated with flying colors. I was known as "The Christmas tree" on our little school.

When I was in college

I didn't get a full scholarship. But I am a scholar. My parents had no enough money to send me to college, they suggested I should work first on a fast food chain. And I did.

Every second I was there, I felt completely miserable. I quit the fast food chain job after 2 months. They told me I can't work on that large company of fast food chain anymore. I didn't care. I said I'm more than that, I'm meant for something bigger.

My relatives told me I can't make it to college with the school I like. But I said "no". There are people and friends who still believed in me.

Again, I let go of negative thoughts and skeptics whether I can make it to college or not. It won't help me anyway, so I just got to try. My plan is to maintain my scholarship until my graduation.

I focused on empowering thoughts. Positive mindset.

I went to college and maintained my scholarship every single semester, from freshmen to senior years. I made it, even without flying colors this time, I still made it.

What a sweet success. What a sweet victory.

They've been telling me that I cannot make it, but I made it. It's like a hard slap on their faces. All of those people who have been expressing negative things about me. I proved them wrong.

Seeing my success is a real pain for them. I didn't have any plans of hurting them, but that is what people get when they try to bring a positive person down.

After college

My parents wanted me to go and work abroad. But I didn't want to. I was only 19 years old at the time. I don't want to be away with my family and people I love. I wanted to enjoy my youth and experience being part of the workforce here in our country.

They told me I'm making a wrong decision. I didn't believe it. For me, if it feels like a burden, something is wrong.

So I got a job at the corporate world. A software development job, this is what I love doing. I enjoy it. I'm making some good cash. I get recognitions. I'm not bragging about it but it just feels good and light, I want it to serve as an inspiration so don't get me wrong.

After sometime, it was also unexpected that I will be in a relationship with the most beautiful woman in college, regarded as the muse of our batch. She's God fearing, smart, beautiful, fun to be with, an angel and she makes me a better man. I get a lot of inspiration from her, she's my soul-mate. All of the negative things I went through were washed away. She is really a blessing and a victory for me. :)

How about another victory?

As of today, I want to add another victory in my life. I want to be a successful entrepreneur. I think I am born to be an entrepreneur. I'm meant to do this.

I want to solve real world problems and get some income from it.

I want to contribute more value to the world. I want to continuously create positive impact and reach out to as many people as I can. I want to be a great teacher, leader and servant. I can't maximize myself and do this well when I'm an employee.

I believe I can have this sweet victory again.

So... how do I make things happen?

Based on my statements above, I think it will boil down to the following important points, with some addition...

  • Be clear about "WHY" you want to do or achieve something.
  • Mindset is really important, be positive. Always.
  • Surround yourself with people who believed in you. That's how you gain absolute confidence.
  • If it feels light, its right. There's something wrong if you feel weight down or compressed right now. Be honest about your feelings and don't kid yourself.
  • Ask for help.
  • Carefully assess and let go of the things that holds you back.
  • If you believe in God, pray multiple times a day. If you don't, maybe do a daily meditation or rituals.

I'm not saying it's easy, but you see, it's simple.

You can add your own way, techniques or stories of making things happen on the comments section below! We would love to read those things!

Have a happy life and make things happen, Ninjas! :)

I’m Making Some Simple But Useful Online Tools for Developers

Hey guys! How are you? Today I'm sharing these three simple but useful (well, at least for me) online tools for developers like you.

I developed it using Bootstrap to have a decent user interface, .htaccess for clean URL location, PHP for input processing and of course, jQuery AJAX requests to prevent reloading the whole page get what you want faster. It's really fun to built knowing that other developers might find it useful too.

simple online tools for developers

For now we only have three tools, but I'm planning to make more. But first, let's take a look!

Read more

How To Make TextBox with Search Icon in HTML and CSS?

Search boxes are a common requirement in almost every website you'll create. It is very useful when users want to find certain data, it may have auto complete functions for assisting users to search.

But it this post I'll guide you on how to create an input box or TextBox with search icon in HTML and CSS.

Recently I was asked to create this search box with a style that looks like the YouTube search box. Although not exactly the same as YouTube, I still made it with the same style. This can be useful for you too if you want a search box with decent style instantly.

TextBox with Search Icon in HTML and CSS

Step by Step HTML and CSS Search Box Guide

Create the index.html with its basic structure.

<!doctype html>
        <title>TextBox with Search Icon in HTML and CSS - Tutorial from www.codeofaninja.com</title>

Add the input box inside the tag.

Also include the placeholder saying "Search..." and an ID of "search-text-input".

<input type='text' placeholder='Search...' id='search-text-input' />

Download a search icon.

Since we want to have a search box with search icon, download a magnifying glass icons which is a standard icon for search. It must be a transparent PNG icon. Size depends on what you need but in this example we have a 32 x 32 px icon. Put in in the same directory as the index.html.

Step 4: Add a div with the image icon inside.

The "div" tag should have an ID of "button-holder". My magnifying glass icons was named magnifying_glass.png.

<div id='button-holder'>
    <img src='magnifying_glass.png' />

Add the magical CSS

We have three elements with IDs that we should style. Again, you can play or experiment with the CSS to suite your visual needs. I put the code below inside the "head" tag, after the "title" tag.

    border-top:thin solid  #e5e5e5;
    border-right:thin solid #e5e5e5;
    border-left:thin solid  #e5e5e5;
    box-shadow:0px 1px 1px 1px #e5e5e5;
    margin:.8em 0 0 .5em; 
    padding:.4em 0 .4em .6em; 
    border-top:thin solid #e5e5e5;
    box-shadow:1px 1px 1px 1px #e5e5e5;
    margin:11px 0 0 0;
#button-holder img{

Download Source Code

You can download all the code used in this tutorial for only $9.99 $5.55!

[purchase_link id="12487" text="Download Now" style="button" color="green"]

Online Resources

You can also use the following resources for other techniques in doing this task.

How do I create a search button within a textbox?
search icon inside search box
TextBox with Search icon as background image

If you made other TextBox with search icon in HTML and CSS, please let us see it by dropping the demo link on the comments section below, we love to see your own creations! Thanks for visiting and take care. :)

12 HTML and CSS animations

You guys seem to like the first one, so here’s another one for you: 12 HTML and CSS animations. HTML and CSS are really amazing technologies that humanity has to celebrate.

Okay, that may be exaggerated, but here are a dozen more amazing web demos with source code that might inspire you to be a better web developer.

I hope you guys get some help out of them. Just click the linked title of each item below, enjoy!

1. Melting Cube

12 Animated Web Demos Made Only with HTML and CSS3

2. Ironman Login Form


3. Acromantula


4. Beach Ball of Death


5. CSS Balls


6. BoldMedia Logo Variation


7. Become a Traveller Today


8. Color Picker


9. Animated Atom


10. Funny Loading


11. Social Flip Cards


12. Beating Heart