SleepingTux

Friday, February 22, 2013

Simple Calculator Javascript

Hehe, iseng-iseng ngerjain soal yang ada di majalah nyankod tentang javascript kalkulator dan akhirnya selesai juga. .

untuk memulainya yang diperlukan hanyalah text editor(notepad) dan browser biasa saja karena javascript bisa berjalan di sisi client. Berikut adalah hasil dari program kalkulator javascript yang telah selesai dibuat.

untuk membuatnya kita hanya membutuhkan kode javascript dan html yang cukup sederhana seperti di bawah ini

<html>
<head>
    <script type="text/javascript">
        function hasil(a,b,x){
            if(x=="plus"){
            c=parseFloat(a)+parseFloat(b);
            document.getElementById("hasil").value=c;
            }
            else if(x=="min"){
            c=parseFloat(a)-parseFloat(b);
            document.getElementById("hasil").value=c;
            }
            else if(x=="kali"){
            c=parseFloat(a)*parseFloat(b);
            document.getElementById("hasil").value=c;
            }
            else if(x=="bagi"){
            c=parseFloat(a)/parseFloat(b);
            document.getElementById("hasil").value=c;
            }
            }
    </script>
</head>
<body>
    <input type="text" id="a" />
    <select id="x">
        <option value="plus">+</option>
        <option value="min">-</option>
        <option value="kali">*</option>
        <option value="bagi">/</option>
    </select>
    <input type="text" id="b" />
    <button id="proses" onclick="hasil(document.getElementById('a').value,document.getElementById('b').value,document.getElementById('x').value) ">
    =
    </button>
    <input type="text" id="hasil" />
</body>
</html>

inti dari kode diatas adalah mengambil nilai yang ada di text box pertama(a) dan text box kedua(b), juga mengambil value dari drop down list(x) lalu melemparnya ke fungsi javascript yang ada (hasil). . proses penghitngan menggunakan if else condition karena penghitungannya berdasarkan nilai dari x(nilai dropdown list yang dipilih). Setelah dilakukan penghitungan maka hasil akan akan ditampilkan di textbox hasil.

»» READMORE...

Sunday, February 17, 2013

Menggunakan SQL di Google Maps Javascript

Kali ini akan ditunjukkan cara untuk menampilkan marker menggunakan database dari MySQL. Langkah langkah dibawah ini hanyalah tutorial singkat yang saya ambil dan modifikasi dari developers.google.com

untuk menampilkan marker yang berasal dari SQL, tentu saja pertama kita harus membuat koneksi ke SQL kita menggunakan bahasa php yang ada. Untuk mengkoneksikan kita buat file php dengan isi sebagai berikut dan simpan dengan nama phpsqlajax_dbinfo.php

<?php
$username="username anda";
$password="password anda";
$database="nama database yang ingin anda pakai";
?>

setelah itu kita buat file php untuk mengubah database sql kita menjadi bentuk XML yang dapat dimengerti oleh google map javascript v3 API, sebenarnya ada 3 cara untuk mengubah sql menjadi bentuk xml tetapi kali ini yang akan saya jelaskan adalah cara yang bisa dilakukan jika kita menggunakan PHP 5. Buat dan simpan file berikut dengan nama phpsqlajax_genxml.php

<?php  
require("phpsqlajax_dbinfo.php"); 
// Start XML file, create parent node

$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node); 
// Opens a connection to a MySQL server

$connection=mysql_connect (localhost, $username, $password);
if (!$connection) {  die('Not connected : ' . mysql_error());} 
// Set the active MySQL database

$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
} 
// Select all the rows in the markers table

$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {  
  die('Invalid query: ' . mysql_error());
} 

header("Content-type: text/xml"); 
// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){  
  // ADD TO XML DOCUMENT NODE  
  $node = $dom->createElement("marker");  
  $newnode = $parnode->appendChild($node);   
  $newnode->setAttribute("name",$row['name']);
  $newnode->setAttribute("address", $row['address']);  
  $newnode->setAttribute("lat", $row['lat']);  
  $newnode->setAttribute("lng", $row['lng']);  
  $newnode->setAttribute("type", $row['type']);
} 

echo $dom->saveXML();
?>

dari script diatas diasumsikan bahwa anda telah membuat database sql dengan tabel marker dan kolom sebagai berikut: name, address, lat, lng, type. Perlu diperhatikan kolom lat dan lng adalah hal yang penting karena tanpa data lat, lng atau koordinat dari marker maka marker yang diinginkan tidak akan tampil di google maps.
Script diatas melakukan iterasi untuk melakukan pengubahan ke dalam bentuk XML. Untuk mengecek apakah file xml kita sukses dibuat dapat langsung dilihat melalui browser dari file phpsqlajax_genxml.php(dapat dilakukan dengan local webserver).

Untuk menampilkan data yang sudah dalam bentuk xml tadi bersamaan dengan google map sebenarnya caranya cukuplah sederhana. Untuk contoh dibawah hanyalah file javascript nya saja, jadi anda harus membuat sendiri file HTML yang menampilkan javascript dibawah ini, untuk tutorial menampilkannya dapat dilihat dalam http://sleepingtux.blogspot.com/2012/11/hello-world-google-map-api.html
Berikut javascript untuk menggabungkan map dan xml yang telah ada.

    function initialize() {
        var myposition=new google.maps.LatLng(-6.231518,106.866674)
        var mapOptions = {
          center: myposition,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
        downloadUrl("phpsqlajax_genxml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var point=new google.maps.LatLng(markers[i].getAttribute("lat"),markers[i].getAttribute("lng"));
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            title: name,
            icon: 'link icon, bisa dihilangkan jika ingin default'
          });

        }
      });
      }
    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
        }

    function doNothing() {}

Selamat mencoba ^_^v , GBU

»» READMORE...

Tuesday, February 12, 2013

Fasilitas Sorting di Java

Java telah menyediakan suatu fasilitas untuk mengurutkan data dalam suatu array, metode ini bernama sort() yang terdapat pada kelas Arrays, kelas ini terdapat pada pake java.util

untuk memanggilnya gunakan Arrays.sort(array), array yang dimaksud disini adalah data yang ingin kita urutkan. Adapun secara lengkap cara penggunaannya adalah sebagai berikut:

import java.util.*;
public class sortingjava {
    public static void main(String[] args){
        System.out.println("Masukkan size array");
        int n=input();
        int[] data=new int[n];
        System.out.println("input array");
        for(int i=0;i<data.length;i++){
            data[i]=input();
        }
        Arrays.sort(data);
        System.out.println("Hasil pengurutan ");
        show(data.length,data);
    }
    static void show(int n,int[] data){
        for(int i=0;i<n;i++){
            System.out.print(data[i]+" ");
        }

    }
    static int input(){
        Scanner a=new Scanner(System.in);
        int b=a.nextInt();
        return b;
    }
}

»» READMORE...

Selection Sort Java

The algorithm divides the input list into two parts: the sublist of items already sorted, which is built up from left to right at the front (left) of the list, and the sublist of items remaining to be sorted that occupy the rest of the list. Initially, the sorted sublist is empty and the unsorted sublist is the entire input list. The algorithm proceeds by finding the smallest (or largest, depending on sorting order) element in the unsorted sublist, exchanging it with the leftmost unsorted element (putting it in sorted order), and moving the sublist boundaries one element to the right.(wikipedia)

import java.util.*;
public class SelectionSort {
    public static void main(String[] args){
         System.out.println("input array size");
        int n=input();

        int data[]=new int[n];
        System.out.println("input array value");
        for(int i=0;i<data.length;i++){
            data[i]=input();
        }
        urutkanSelection(data.length, data);
        System.out.print("hasil akhir : ");
        show(data.length,data);
    }
    public static void urutkanSelection(int n,int[] data){
        int posisi;
        for(int i=0;i<n-1;i++){
            posisi=i;
            for(int j=i+i;j<n;j++){
                if(data[posisi]>data[j]){
                    posisi=j;
                }}
                //Tukarkan
                int tmp=data[i];
                data[i]=data[posisi];
                data[posisi]=tmp;
                System.out.print("Hasil pada tahap ke-"+i+" :");
                show(n,data);
                System.out.println("");
        }

    }
    static void show(int n,int[] data){
        for(int i=0;i<n;i++){
            System.out.print(data[i]+" ");
        }

    }
    static int input(){
        Scanner a=new Scanner(System.in);
        int b=a.nextInt();
        return b;
    }
}

»» READMORE...

Bubble sort Java

Bubble sort, sometimes incorrectly referred to as sinking sort, is a simple sorting algorithm that works by repeatedly stepping through the list to be sorted, comparing each pair of adjacent items and swapping them if they are in the wrong order. The pass through the list is repeated until no swaps are needed, which indicates that the list is sorted. The algorithm gets its name from the way smaller elements "bubble" to the top of the list. Because it only uses comparisons to operate on elements, it is a comparison sort. Although the algorithm is simple, most of the other sorting algorithms are more efficient for large lists.(wikipedia)

import java.util.*;
public class BubbleSort {
    public static void main(String[] args){
        System.out.println("input array size");
        int n=input();

        int data[]=new int[n];
        System.out.println("input array value");
        for(int i=0;i<data.length;i++){
            data[i]=input();
        }
        urutkanBubble(data.length, data);
        System.out.print("hasil akhir : ");
        show(data.length,data);
    }
    static void show(int n,int[] data){
        for(int i=0;i<n;i++){
            System.out.print(data[i]+" ");
        }

    }
    static void urutkanBubble(int n,int[] data){
        for(int i=1;i<n;i++){
            for(int j=0;j<n-i;j++){
                if(data[j]>data[j+1]){
                    int tmp=data[j];
                    data[j]=data[j+1];
                    data[j+1]=tmp;
                }
            }System.out.print("Hasil pada tahap ke-"+i+" :");
            show(n,data);
            System.out.println("");
        }
    }
    static int input(){
        Scanner a=new Scanner(System.in);
        int b=a.nextInt();
        return b;
    }
}

»» READMORE...

SleepingTux

Friday, February 22, 2013

Simple Calculator Javascript

Sunday, February 17, 2013

Menggunakan SQL di Google Maps Javascript

Tuesday, February 12, 2013

Fasilitas Sorting di Java

Selection Sort Java

Bubble sort Java

Blogroll

Blogstats

About Me