<div data-role="page">

     <div data-role="header">

     </div>

     <div data-role="content">                         

     </div>

     <div data-role="footer">

     </div>

</div>

]]>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />      

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

                <div data-role="page" id="page1">

                                <div data-role="header" data-position="fixed" data-theme="d">

                                                <h1>Ini Header</h1>

                                </div>

                                <div data-role="content">

                                                <a href="#page2" data-role="button" data-transition="slide">

                                                                Peta

                                                </a>

                                </div>

                                <div data-role="footer" data-position="fixed" data-theme="d">

                                                <h1>Ini Footer</h1>

                                </div>

                </div>

<div data-role="page" id="page2">

                                <div data-role="header" data-theme="d" data-position="fixed">

                                                <div data-role="navbar" data-iconpos="right">

                                                                <ul>

                                                                                <li><a href="#pagenav" data-icon="info" data-transition="none">Navigation</a></li>

                                                                                <li><a href="#optionNear" data-icon="gear" data-transition="none">Options</a></li>                                  

                                                                </ul>

                                                </div><!-- /navbar -->

                                </div>

                                <div data-role="content" id="map_canvas">       

                                </div>

                                <div data-role="footer" data-theme="d" data-position="fixed">

                                                <div data-role="navbar">

                                                                <ul>

                                                                                <li>

                                                                                                <a href="#">

                                                                                                                <div id="ruteinfo">My Maps</div>

                                                                                                </a>

                                                                                </li>                                       

                                                                </ul>

                                                </div>

                                </div>

                </div>

#map_canvas { width: 100%; height: 90%; padding: 0; position:absolute;}

                $(document).ready(function(){

                                                $(document).on('pageshow', '#page2',function(e,data){

                                                                initialize();

                                                });

                                });

                function initialize()

                                {

                                                var center = new google.maps.LatLng(-7.809069,110.267853);

                                                var mapOptions =

                                                {

                                                                center : center,

                                                                zoom : 14,

                                                                mapTypeId : google.maps.MapTypeId.ROADMAP,

                                                                panControl : false,

                                                                streetViewControl : false,

                                                                mapTypeControl : false,

                                                                navigationControl : false,

                                                }

                                                var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

                                                var marker = new google.maps.Marker({

                                                                position : center,

                                                                map : map,

                                                                title : 'Im Here',

                                                });           

                                                var infoWindow = new google.maps.InfoWindow();

                                                google.maps.event.addListener(marker, 'click', function()

                                                {

                                                                $('#ruteinfo').html(marker.title);

                                                                infoWindow.setContent(marker.title);

                                                                infoWindow.open(map,marker);

                                                });

                                }

Map yang dipanggil melalui fungsi initialize diatas mempunyai option seperti berikut

                                                var mapOptions =

                                                {

                                                                center : center,

                                                                zoom : 14,

                                                                mapTypeId : google.maps.MapTypeId.ROADMAP,

                                                                panControl : false,

                                                                streetViewControl : false,

                                                                mapTypeControl : false,

                                                                navigationControl : false,

                                                }

                                google.maps.event.addListener(marker, 'click', function()

                                                {

                                                                $('#ruteinfo').html(marker.title);

                                                                infoWindow.setContent(marker.title);

                                                                infoWindow.open(map,marker);

                                                });

Jikalau yang ini sudah bisa, silakan baca tutorial kedua, menambahkan direction service


 

SOAL JAVA

Membuat bentuk pola seperti berikut

*
*
*****
*
*

kode java nya adalah seperti berikut

public class pola1 {
    public static void main(String[] args)
    {
        for(int i=0;i<5;i++)
        {
            if(i==2)
            {
                for(int j=0;j<5;j++)
                {
                    System.out.print("*");
                }
                System.out.println("");
            }
            else
            {
            System.out.println("*");
            }
        }
    }
}

untuk membuat bentuk seperti diatas maka langkah awal yang paling gampang adalah membuat persegi 5 x 5 terlebih dahulu, lalu diberi kondisi dimana ketika baris ke 2 dari variabel i akan dicetak dan yang lain tidak.

Contoh soal yang kedua adalah membuat bentuk seperti berikut
* *
* *
*
* *
* *

dan kode javanya adalah sebagai berikut
public class pola2 {
    public static void main(String[] args)
    {
        for(int i=0;i<5;i++)
        {
            for(int j=0;j<2;j++)
            {
                if(i==2&&j==1)
                {
                    System.out.print(" ");
                }
                else
                {
                    System.out.print("*");
                }
            }
            System.out.println("");
        }
    }
}

untuk membuat kode yang kedua cara yang paling gampang langkah pertamanya adalah membuat persegi dengan ukuran 5 x 2 dan memberi kondisi bagian mana yang tidak ingin di print.

Sekian , GBu
:)

SOAL JAVA

Pada kode java dibawah akan menghasilkan output seperti gambar berikut:

# # # # # # # # # #
#                         #
#                         #
#                         #
#                         #
#                         #
#                         #
#                         #
#                         #
# # # # # # # # # #

public class persegilubang {
    public static void main(String[] args)
    {
        //2 for pertama membuat kotak 10x10
        for(int i=0;i<10;i++)
        {
            for(int j=0;j<10;j++)
            {
                //kondisi untuk baris/kolom pertama dan terakhir
                //cetak baris pertama dan terkahir, kolom pertama dan terakhir
                if(i==0||i==9||j==0||j==9)
                {
                System.out.print("# ");
                }
                else {
                    System.out.print("  ");
                    }
            }
            System.out.println();
        }
    }
}

Untuk membuat bentuk seperti diatas memerlukan beberapa kali for(nested for) dan beberapa kondisi if.
Selamat mencoba, GBU

Kali ini akan membahas bagaimana menggunakan while di java dengan contoh kasus sebagai berikut:

"Buatlah sebuah program untuk menampilkan bilangan ganjil antara 1-20"

Jika dikerjakan dengan while maka codingan java nya adalah sebagai berikut

public class Main {
    public static void main(String[] args)
    {
        System.out.println("Angka Ganjil Antara 1-20");
        int angka=1;
        while(angka<=20)
        {
           if(angka%2!=0)
           {
               System.out.println(angka+" ");
           }
           angka++;
        }
    }    
}

Pada kode diatas terdapat inisiasi variabel angka dengan nilai satu, ini digunakan untuk membuat nilai awal variabel yang akan dicari bilangan ganjilnya. Setelah itu terdapat struktur while dengan parameter angka <=20, yang dimaksud dalam parameter kurang dari 20 adalah fungsi while ini tidak akan berakhir jika angka belum melebihi nilai parameter yang ditentukan yaitu 20.
If yang terdapat diatas digunakan untuk mendeteksi angka ganjil yang ada, fungsi (%) modulo digunakan untuk mencari sisa dari pembagian suatu bilangan, jika habis dibagi dua maka dia adalah bilangan genap dan sebaliknya jika tidak habis dibagi dua dia adalah bilangan ganjil (angka%2!=0). Setelah ditemukan mana yang ganjil maka dilakukan print untuk menampilkan.
Fungsi dari angka++ dibagian paling bawah adalah untuk melakukan penambahan pada nilai angka, penambahan satu pada nilai angka setiap kali while dijalankan. Ketika nilai variabel angka sudah mencapai lebih dari 20 maka fungsi while ini selesai dan tidak akan mencetak angka ganjil lagi. .

Sekian, Gbu