Pages

Find Us On Facebook

Featured Video

Breaking News

Looped Slider

Gagdet

Flickr Images

Video Of Day

Membuat form pencarian alamat Autocomplete mengunakan Geocoder Google Maps


Hai All ketemu lagi sama saya portgastea, si ganteng asli sunda hehe, tutorial kali ini saya mau membuat form pencarian alamat autocomplete mengunakan geocoder google maps, mungkin di antara temen-temen ada yang sudah tau dan dan ada yang lebih mengerti dari saya. Autocomplete disini maksudnya ketika kita ketika alamat langsung otomastis keluar nama-nama alamat mengambil data dari google maps mengunakan geocoder.
Ok langsung saya kita buat file baru dengan nama index.html atau terserah anda dan masukan script dibawah ini :
index.html   
<!DOCTYPE html>
<html>
  <head>
    <title>Membuat form pencarian alamat Autocomplete, mengunakan Geocoder</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
 <link href="assets/css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
 <link href="assets/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
    <script>
 
var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};
 
function initialize() {
 
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
      { types: ['geocode'] });
 
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
  });
}
 
 
function fillInAddress() {
 
  var place = autocomplete.getPlace();
 
  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }
 
 
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}
 
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = new google.maps.LatLng(
          position.coords.latitude, position.coords.longitude);
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}
 
 
    </script>
  </head>
 
  <body onload="initialize()">
 
 <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="http://andeznet.com">AndezNet</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="index.php">Home</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div> 
  </div>
 
  <div class="container">
     <div class="hero-unit">
    <div id="locationField">
      <input id="autocomplete" class="span6" placeholder="Ketik Alamat yang anda cari"
             onFocus="geolocate()" type="text"></input>
    </div>
 
    <table id="address">
      <tr>
        <td class="label">Nama Jalan</td>
        <td class="slimField"><input class="field" id="street_number"
              disabled="true"></input></td>
        <td class="wideField" colspan="2"><input class="field" id="route"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">Kota</td>
        <td class="wideField" colspan="3"><input class="field" id="locality"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">Provinsi</td>
        <td class="slimField"><input class="field"
              id="administrative_area_level_1" disabled="true"></input></td>
        <td class="label">Kode Pos</td>
        <td class="wideField"><input class="field" id="postal_code"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">Negara</td>
        <td class="wideField" colspan="3"><input class="field"
              id="country" disabled="true"></input></td>
      </tr>
    </table>
 </div>
</div>
 
 
 
 <div class="row-fluid">
   <div class="span12">
     <div class="row-fluid">
    <div class="alert alert-info">
     <a name="contact"></a>
      <h2>www.andeznet.com</h2>
      <p class="text-info">Gudang Teknologi & Informasi</p>
      <p>&copy; <a href="http://andeznet.com">www.andeznet.com</a>&nbsp<?php echo date("Y");?></p>
    </div><!--/span-->
     </div><!--/row-->
   </div><!--/span-->
 </div><!--/row--> 
  </body>
</html>
Untuk lebih menarik saya menambahkan boostrap di head seperti dibawah ini
Source code   
<link href="assets/css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
 <link href="assets/css/bootstrap.min.css" rel="stylesheet" media="screen

Ok, Mudah kan??? untuk menjalan ini harus mengunakan internet karena langsung terhubung ke google maps,  jika sudah selesai maka kita jalankan index.html di localhost, apabila sudah benar maka akan tampil seperti dibawah ini
Membuat form pencarian alamat Autocomplete, mengunakan Geocoder
Ok sekian Tutorial kali ini , sampai ketemu lagi bye
Happy Coding & Programing

BY  · JUNE 7, 2015
READ MORE - Membuat form pencarian alamat Autocomplete mengunakan Geocoder Google Maps

Paging with jScroll

About jScroll

jScroll is a jQuery plugin for infinite scrolling, written by Philip Klauzinski. Infinite scrolling; also known as lazy loading, endless scrolling, autopager, endless pages, etc.; is the ability to load content via AJAX within the current page or content area as you scroll down. The new content can be loaded automatically each time you scroll to the end of the existing content, or it can be triggered to load by clicking a navigation link at the end of the existing content.
An example of infinite scrolling is your Facebook "News Feed" page. You may notice that when you scroll to the bottom of this page, new content will often load automatically, or you will be given a link to "Older Posts" which will load more content when clicked.

Download Latest Version

The latest version of jScroll is available for download from GitHub.

Usage

The jscroll method is called on the selector for which you want your scrollable content contained within. For example:
$('.infinite-scroll').jscroll();
The jscroll method takes an optional object literal as a parameter for overriding the default options. An example of how this can be done is shown below.
$('.infinite-scroll').jscroll({
    loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...',
    padding: 20,
    nextSelector: 'a.jscroll-next:last',
    contentSelector: 'li'
});

Options

Option KeyDefault ValueDescription
debugfalseWhen set to true, outputs useful information to the console display if the console object exists.
autoTriggertrueWhen set to true, triggers the loading of the next set of content automatically when the user scrolls to the bottom of the containing element. When set to false, the required next link will trigger the loading of the next set of content when clicked.
autoTriggerUntilfalseSet to an integer great than 0 to turn offautoTrigger of paging after the specified number of pages. Requires autoTrigger to be true.
loadingHtml'<small>Loading...</small>'The HTML to show at the bottom of the content while loading the next set.
padding0The distance from the bottom of the scrollable content at which to trigger the loading of the next set of content. This only applies when autoTrigger is set to true.
nextSelector'a:last'The selector to use for finding the link which contains the href pointing to the next set of content. If this selector is not found, or if it does not contain a href attribute, jScroll will self-destroy and unbind from the element upon which it was called.
contentSelector''A convenience selector for loading only part of the content in the response for the next set of content. This selector will be ignored if left blank and will apply the entire response to the DOM.
callbackfalsePass a function to this option and it will be called at the end of each page load. Alternatively, you can pass a function as the only argument to the jScroll instantiation instead of an options object, and it will be returned as a callback.
For more information on the contentSelector option and how it loads a response fragment, see the jQuery documentation for the .load() method.

Example 1

For a real-world example of jScroll, visit Hang3 | Social Classifieds.
The following is an example of jScroll out of the box, using all default options.
Note: An additional page load time has been intentionally added for each scroll request so that you may more easily observe what is happening in the examples.

Page 1 of jScroll Example - jQuery Infinite Scrolling Plugin

This is the content of page 1 in the jScroll example. Scroll to the bottom of this box to load the next set of content.
This is example text for the jScroll demonstration. jScroll is a jQuery plugin for infinite scrolling, endless scrolling, lazy loading, auto-paging, or whatever you may call it.
With jScroll, you can initialize the scroller on an element with a fixed height and overflow setting of "auto" or "scroll," or it can be set on a standard block-level element within the document and the scrolling will be initialized based on the brower window's scroll position.
jScroll is open-source and can be downloaded from my GitHub repository atgithub.com/pklauzinski/jscroll.

The HTML (abbreviated)

<div class="scroll">
    <h3>Page 1</h3>
    <p>Content here...</p>
    <a href="example-page2.html">next page</a>
</div>

The JavaScript

$('.scroll').jscroll();
It's that easy!

Example 2 - Using autoTrigger = false

// Don't automatically load content on scroll, require user to click the link instead
$('.scroll').jscroll({
    autoTrigger: false
});

Page 1 of jScroll Example - jQuery Infinite Scrolling Plugin

This is the content of page 1 in the jScroll example. Scroll to the bottom of this box to load the next set of content.
This is example text for the jScroll demonstration. jScroll is a jQuery plugin for infinite scrolling, endless scrolling, lazy loading, auto-paging, or whatever you may call it.
With jScroll, you can initialize the scroller on an element with a fixed height and overflow setting of "auto" or "scroll," or it can be set on a standard block-level element within the document and the scrolling will be initialized based on the brower window's scroll position.
jScroll is open-source and can be downloaded from my GitHub repository atgithub.com/pklauzinski/jscroll.

Example 3 - Using autoTriggerUntil

// autoTrigger on scroll until after the third request is loaded
$('.scroll').jscroll({
    autoTriggerUntil: 3
});

Page 1 of jScroll Example - jQuery Infinite Scrolling Plugin

This is the content of page 1 in the jScroll example. Scroll to the bottom of this box to load the next set of content.
This is example text for the jScroll demonstration. jScroll is a jQuery plugin for infinite scrolling, endless scrolling, lazy loading, auto-paging, or whatever you may call it.
With jScroll, you can initialize the scroller on an element with a fixed height and overflow setting of "auto" or "scroll," or it can be set on a standard block-level element within the document and the scrolling will be initialized based on the brower window's scroll position.
jScroll is open-source and can be downloaded from my GitHub repository atgithub.com/pklauzinski/jscroll.


READ MORE - Paging with jScroll

Mengenal Trigger di MySQL

Pernahkan menemukan kasus saat men-develop aplikasi, dimana perlu melakukanupdate terhadap suatu field, berdasarkan isi dari field lain? Contoh: men-update fieldstatus menjadi disabled, apabila tanggal input lebih kecil dari tanggal hari ini. Biasanya, yang kita lakukan adalah dengan melakukan pengecekan di script (baik itu PHP, Java, atau lainnya) sebelum menyimpan data ke table.

Definisi Trigger

Di MySQL, ada suatu mekanisme bernama TRIGGER yang bisa digunakan sebagai alternatif untuk kasus di atas. Trigger akan menjalankan suatu perintah SQL yang bisa terjadi pada saat sebelum atau sesudah kita melakukan perintah INSERT, UPDATE, dan DELETE. Secara sederhana, syntax trigger adalah sebagai berikut:
CREATE TRIGGER nama_trigger [BEFORE/AFTER] [INSERT/UPDATE/DELETE]
ON nama_table
FOR EACH ROW
BEGIN

   //defisi trigger

END;

Di dalam blok BEGIN...END; kita bisa memasukkan sebanyak mungkin perintah SQL dengan memisahkan masing-masing perintah menggunakan tanpa titik-koma ;.

Persiapan Table Untuk Latihan

Sebelum kita berkenalan lebih jauh dengan Trigger, mari kita buat terlebih dahulu, struktur table yang dibutuhkan.
CREATE TABLE `table_master` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(60) NOT NULL,
  `rating` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1;

CREATE TABLE `table_master_backup` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(60) NOT NULL,
  `rating` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1;

CREATE TABLE `table_log` (
  `tanggal` date NOT NULL,
  `master_id` int(11) NOT NULL,
  `rating` int(11) DEFAULT NULL,
  UNIQUE KEY `tanggal` (`tanggal`,`master_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Penjelasan penggunaan table di atas adalah sebagai berikut:
  • table_master adalah master data user
  • table_master_backup adalah backup dari table master data untuk user2 yang sudah dianggap tidak aktif lagi
  • table_log adalah catatan kegiatan dari user.
Strukturnya tidak masuk akal? cuekin saja, soalnya saya juga bingung ingin membuat contoh kasus yang seperti apa :D.

Membuat Trigger Sederhana

Untuk contoh kasus yang akan kita lakukan adalah, setiap kali melakukan proses insert table master, hitung rating berdasarkan panjang nama. Untuk sederhananya, kita buat saja dengan formula:
rating = panjang_nama * 2
Maka, syntax trigger yang akan kita buat adalah sebagai berikut:
DELIMITER //
DROP TRIGGER IF EXISTS trigger_insert_master;
CREATE TRIGGER trigger_insert_master BEFORE INSERT ON table_master
FOR EACH ROW
BEGIN

   SET NEW.rating = LENGTH(NEW.nama) * 2;

END;//
DELIMITER ;

Setelah Trigger berhasil dibuat, sekarang kita test dengan melakukan operasi INSERT:
INSERT INTO table_master(nama) VALUES('Jagung Agung');
Perhatikan bahwa kita hanya mengisikan nama pada operasi INSERT. Coba kita lihat apa yang terjadi dengan data yang kita simpan:
mysql> SELECT * FROM table_master;
+----+--------------+--------+
| id | nama         | rating |
+----+--------------+--------+
|  1 | Jagung Agung |     24 |
+----+--------------+--------+
1 row in set (0.04 sec)
Bisa dilihat bahwa field rating juga ikut terisi.
Sebelum melangkah lebih jauh, mari kita tambahkan beberapa data terlebih dahulu:
INSERT INTO table_master(nama) VALUES('Jagung Agung');
INSERT INTO table_master(nama) VALUES('Badi Bangor');
INSERT INTO table_master(nama) VALUES('Mad Dog');

INSERT INTO table_master_backup(id, nama, rating) VALUES(5, 'Success Kids', 24);
INSERT INTO table_master_backup(id, nama, rating) VALUES(6, 'Interesting Man', 30);
INSERT INTO table_master_backup(id, nama, rating) VALUES(7, 'Yao Ming', 16);

Ok, data sudah siap. Sekarang, yang akan kita lakukan adalah saat melakukan INSERT data log, cari nilai rating user dari table master atau master_backup dan isikan nilainya sebagai nilai rating saat ini. Bagaimana syntax-nya? Silahkan dipelajari:
DELIMITER //
DROP TRIGGER IF EXISTS trigger_insert_log;
CREATE TRIGGER trigger_insert_log BEFORE INSERT ON table_log
FOR EACH ROW
BEGIN

   SET NEW.rating = (SELECT rating FROM table_master WHERE id = NEW.master_id);

   IF NEW.rating IS NULL THEN
       SET NEW.rating = (SELECT rating FROM table_master_backup WHERE id = NEW.master_id);
   END IF;

END;//
DELIMITER ;
Sekarang kita test dengan query berikut:
INSERT INTO table_log(tanggal, master_id) VALUES('2012-11-25', 3);
INSERT INTO table_log(tanggal, master_id) VALUES('2012-11-25', 7);
Bagaimana hasilnya?
mysql> SELECT * FROM table_log;
+------------+-----------+--------+
| tanggal    | master_id | rating |
+------------+-----------+--------+
| 2012-11-25 |         3 |     22 |
| 2012-11-25 |         7 |     16 |
+------------+-----------+--------+
2 rows in set (0.00 sec)
Wowrating langsung terisi!

Menampilkan Pesan Pada Trigger

Trik terakhir yang akan saya bagi adalah, bagaimana menampilkan pesan apabila terjadi suatu kesalahan. Yaitu, dengan membuat variable dummy dan melakukan SELECT yang berisi pesan kesalahan ke variable dummy tersebut. Contohnya:
DELIMITER //
DROP TRIGGER IF EXISTS trigger_insert_log;
CREATE TRIGGER trigger_insert_log BEFORE INSERT ON table_log
FOR EACH ROW
BEGIN
   DECLARE dummy INT;

   SET NEW.rating = (SELECT rating FROM table_master WHERE id = NEW.master_id);

   IF NEW.rating IS NULL THEN
       SET NEW.rating = (SELECT rating FROM table_master_backup WHERE id = NEW.master_id);
   END IF;

   IF NEW.rating IS NULL THEN
       SELECT `Master ID tidak ditemukan` INTO dummy
       FROM table_log
       WHERE master_id = NEW.master_id AND tanggal = NEW.tanggal;
   END IF;

END;//
DELIMITER ;

Apabila Anda mencoba melakukan query INSERT dengan data master_id yang tidak ada di table_master dan table_master_backup, maka yang terjadi adalah:
mysql> INSERT INTO table_log(tanggal, master_id) VALUES('2012-11-25', 25);
ERROR 1054 (42S22): Unknown column 'Master ID tidak ditemukan' in 'field list'

Penutup

Trik penggunaan Trigger dibandingkan pengecekan melalui script ada banyak sekali manfaatnya. Di antaranya adalah memusatkan business logic menjadi satu di database. Selain itu juga dengan pengecekan yang di lakukan di sisi database, maka mengurangi traffic data antara database dengan script. Seberapa signifikan? Saya sendiri kurang mengerti, karena belum melakukan penelitian mengenai hal ini :D. Selamat menikmati
READ MORE - Mengenal Trigger di MySQL
 

Sponsor

Mengenai Saya

Most Reading

Powered by Blogger.