Converting Checkbox function to Radio Button with Javascript

In this article, we will discuss a little about how to turn a Checkbox into a Radio using Javascript.

The use of the :checked selector is compatible in every browser. This selector selects input elements of type radio or checkbox.


However, designers may be confused. what type will be used? whether the input type radio or checkbox type.


The reason is that if the input element has different radio name type, then its function is the same as input with checkbox type.

Radio only functions as a chooser of course if the names are the same to form an array of keys. On the other hand, input of type checkbox is unaffected by its name , forming an array of values. As an alternative. then element input=Radio can only use input=checkbox. just use the script below:
More about this source textSource text required for additional translation information
Send feedback
Side panels

AngularJS Basic Tutorial

AngularJS is a front-end framework for javascript developed by Google. With the powerful features of AngularJS, the development process can be much shorter. On the other hand, the organization of Javascript code becomes more structured and “clean” because the use of this framework encourages the application of the MVC pattern—or MV-Whatever—in the applications we develop. AngularJs

Simple Example
Let’s start with the simplest example: addition. Previously, first download the AngularJS framework file from the official page: Or you can also use the provided CDN file:
Here is our first AngularJS code. Use your favorite text editor and save the following code as an HTML file.

10 + 30 = {{ 10 + 30 }}
If you open the HTML file in a browser, you will get the number “40” as a result of adding between “10” and “30”. Display in Browser You must have noticed that there are additional attributes in the tag. ng-app is the main directive of AngularJS. It acts as the root-element of AngularJS. Simply put, this ng-app directive will tell you where to fire AngularJS, in this case the body element—that means the entire document. You’ll also notice the double curly braces in our example: {{…}}. For those of you who have used templating-engines such as Mustache, Hogan, or Handlebars, you must be familiar with this notation. In AngularJS, these double curly braces are called data binding expressions. What is inserted between these double curly braces will be evaluated by AngularJS, before finally outputting the results to the browser. In our example, we inserted an addition expression between double curly braces. Therefore, the addition expression will be evaluated before we finally get the result of the addition in the browser. Well, not so magical isn’t it?.

Add Some Magic
The previous example is certainly not very magical, so let’s add a little “magic” from AngularJS. Now we will create a simple multiplication application, but this time we will also add interaction with the user. Now the user can enter the number to be multiplied. Here is the full code:

= {{ x * y }}
Save it again as an HTML file and run the file in the browser. Now try to enter the number that will be multiplied through the two text inputs, please change the value. Voil! Immediately you will get the result of the multiplication. How? You didn’t even write any Javascript code! Display in Browser In the above example, you have another directive: ng-model. ng-model is an AngularJS directive that works for two-way data binding purposes. In simple terms it will bind the input control with the data used by AngularJS. So when the value of the input control changes, the data in AngularJS will also change; even vice versa. This is the elegance of AngularJS. We don’t touch the DOM directly: no more $(#blabla), no onchange(blabla), or .html(blabla). All manipulations of the DOM are magically abstracted away by AngularJS. As a result our code becomes more concise and structured. Of course the discussion here is still very simple and limited, only a small part of the elegance of AngularJS. You can dive deeper into AngularJS from the documentation: and discover its true power!

Share To Social Media

Node.js Basic Introduction & Tutorial

Node.JS is a serverside javascript(JS) implementation. Why should JS? because JS has reliability on the eventing and callback side. For your information, until now server side applications are very difficult to make event-based, in fact most of them are thread-based.

Then Node.JS was born, the point is, with only one source coding, you can run lots of commands in parallel, that can happen because it’s based on events and callbacks.

Image by by Pedro Lozano

So computer resources such as processor and I/O can work independently. For example, we need to read data from the hard disk, the reading process is usually relatively long compared to the process in the processor. If in normal programming (eg PHP), we wait until the reading process is complete, then the next step. Now, while waiting for this, the processor is actually a waste because it doesn’t do anything.

In NodeJS, the read command was sent to I/O, then NodeJS doesn’t wait, but does the next command. When the I/O read process was finished, I/O sent an event to NodeJS. Just now the NodeJS program consumes the results of the previous reading.

So it can be seen that the processor is not completely redundant, 100% is used to run useful processes. then if we see, most servers are actually just routing from one I/O to another, for example from file to network, from database to network or from network to other network.

In ordinary programming, it is very difficult to create applications that run several commands in parallel. It’s the opposite with Node.JS… making parallel simultaneous jobs is very easy, but the opposite makes commands for serial jobs a bit difficult.

Well, the explanation is complete, let’s go straight to the tutorial 🙂

Step 1: Installation
Download the latest version of Node.js at
The version of Node.js I use is node-v0.10.25-x64 with windows 8.1 operating system 🙂
Install the node.js file that was downloaded earlier
Step 1 installation of Node.js
Step 1 installation of Node.js
Step 2 Node.js installation
Step 2 Node.js installation
Step 3 Node.js installation
Step 3 Node.js installation

Step 4 Node.js installation
Step 4 Node.js installation

Step 2: Hello World!
Well, every new technology usually starts with the words “Hello World!” here. So let’s try to create Hello World with Node.js 🙂

So we’re going to create a simple HTTP server that displays that message. First, you must understand the Node.js module system. In Node.js, functions are defined in modules that must be loaded in order to be used. There are many modules listed in the Node.js documentation which can be seen here

Now let’s create a file named index.js , then fill in the following code:

var http = require(‘http’);

http.createServer(function (req, res) {
res.writeHead(200, {‘Content-Type’: ‘text/plain’});
res.end(‘Hello Worldn’);
}).listen(8090, ‘’);
console.log(‘Server running at’);


Then open a command prompt, navigate to the location where the index.js file is stored
Then type "node index.js" (without the quotes)
So the result is something like this picture:

Node.js Output output
Node.js Output output

then open the browser, because we set the port to 8090, then open http://localhost:8090/

and the display will look something like this:

Hello World Node.js
Hello World Node.js

That's my tutorial about Node.js .

Wait for the next article :)

Share To Social Media

Terms on the Internet (chapter 2)

There are many terms on the Internet, many of which you may not know. This article will discuss some terms that are quite important to know on the internet, including the meaning of blogs, seo, cloud computing, tagging, javascript, social media, and others.

This article is a continuation of Internet Terms (chapter 1).


Content Management System is a web application used to create and edit web content. This CMS is usually integrated with the website itself. CMS was created to make it easier to create and edit web content because of its user-friendly interface without having to deal with HTML code.

If we need a CMS, we can ask a web programmer to make it or we can use an open source CMS that has been proven reliable and free such as Joomla, WordPress, Drupal and many more.

Derived from the word web log which is an online journal or diary. Consists of articles that discuss a subject such as technology, software, design, health, environment, fashion and so on.

Social Media
A web-based application that facilitates people in their community to talk about an idea, topic or share certain ideas, topics and content such as photos, videos, articles, links. For example, the popular social media are Facebook, Twitter, Instagram, Google+.

The amount of data that can be carried from one point to another in a certain period of time or often called the data transfer rate. Bandwidth is measured in bps (bits per second), the higher the value means the more data that can be carried or the higher the data transfer rate.


We often encounter the term tagging on blogs, where the owner gives a name/label to the content (article/image) with the aim of grouping the article/image based on tagging. For example, we find on blogs about web design that in the left or right column there is a collection of tagging in the form of certain names such as CSS3, HTML, design, layout, responsive web design, and so on. When each tagging is clicked, a web page with articles will appear. -articles that represent the tagging.

A scripting language that is commonly used with HTML code on web pages. Its main function is to allow users and web pages to interact, which HTML code cannot do. Some examples that can be done by javascript: detecting the user’s browser, validating form data, loading new content on web pages dynamically without having to refresh the web page.

Efforts are made to get a good position (high rank) on search engines such as Google, Yahoo, Bing. SEO involves techniques and tricks that are applied to a website such as choosing the right keywords, creating search-engine-friendly web pages, integration into social media and many other techniques.

Internet Service Provider is an internet connection service provider for every who wants to get an internet connection for both personal and business/company interests.

Keywords are references used by search engines in finding information/data on the internet. Search engines such as Google, Yahoo, Bing will search and then display the information/data on web pages based on the keywords we provide.

Short for malicious software, malicious applications that are spread via email, websites, downloaded files that aim to interfere with normal computer operations, steal important information, gain access to computer systems. Included in the malware include viruses, worms, trojans.

Cloud Computing
Application services that are connected via the internet. Changing the ownership model of the application that was previously purchased and then installed on the user’s computer into a subscription system where the application is no longer accessed directly from the computer but from the internet.

Open Source Software
The term used in the context of computer software, where open source software is software that can be used freely by anyone (free / without a license). Besides anyone can use it for free, everyone can access the source code of the software, change the source code and distribute it freely. Examples of open source software: Linux, Firefox, Chrome, Joomla, WordPress, OpenOffice, Apache, mySQL.

Update Your Website Footer Dynamically With Javascript and PHP

It’s already December 30, 2014 now, yes, two days from now the year has changed to 2015. Usually dynamic websites always follow developments, and can always look up to date even though they are not changed manually. Yes, that’s the nature of dynamic websites, it’s easier to make changes.

Usually the date in the footer, to be precise in the copyright section, is always filled with the current year. At the end of this year, have you prepared the changes for the year for your website footer?

Date Time Year Footer

If not, you can use the Javascript or PHP script below so that the year writing on your website automatically changes when you enter a new year. Usually website owners forget this little thing, they don’t make the year change dynamically, and make the website look old.

Read also:

Review of 2013 Web Design Trends
Trend Web Design 2012 version of T-WD
There are several examples that you can follow, just copy and paste them into the footer of your website.

  1. Using Javascript
    For the first example you can use javascript, with javascript you can put it anywhere on your HTML web page, whatever platform you use you can put this script to display the current year.

Result: 2014

  1. Using Javascript 2
    To make it more interesting, you can add complementary words so that what appears is not only the year. Maybe you want to add copyright, and so on

© 2011, Company.
Results: © 2010-2014, Company.

  1. Using PHP
    If you use php you can put the following script in the footer of your website, or if you use a CMS like wordpress, you can simply find the footer.php file in the theme folder you are using and paste the following code.

Result: 2014

  1. Using PHP 2
    If you want to add additional information such as complementary words, you can follow the steps below

© <?php