Membuat Aplikasi Petunjuk jalan dengan google api

Kita mungkin pernah berfikir bagaimana caranya ya membuat aplikasi seperti ojek online dengan dengan google map api. nah kali ini saya akan coba menambah wawasan kita. sebenarnya tutorial seperti banyak , hanya saja keinginan untuk menulis saja , karena sudah lama tidak menulis blog ini. ūüôā .

langsung saja berikut codenya :


<!DOCTYPE html>
<html>
<head>
<title>MENAMPILKAN PETUNJUK ARAH</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCTzjb-g5lJmButPqyNn9y6Q1x8d3JPGyo"></script>
<script type="text/javascript">
function init(){
var service = new google.maps.DirectionsService;
var view = new google.maps.DirectionsRenderer;

var info_window = new google.maps.InfoWindow();
var zoom = 5;

var pos = new google.maps.LatLng(-3.050444,116.323242);
var options = {
'center': pos,
'zoom': zoom,
'mapTypeId': google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('maps'), options);
view.setMap(map);
info_window = new google.maps.InfoWindow({
'content': 'loading...'
});

var result = function(){
lihat(service, view);
}

document.getElementById('lihat').addEventListener('click', result)
}

function lihat(service, view){
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;

var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};

service.route(request, function(response, status){
if(status == google.maps.DirectionsStatus.OK){
view.setDirections(response);
}else{
window.alert('Directions request failed due to ' + status);
}
});
}

google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<input type="text" id="start" size="50" placeholder="Lokasi sekarang">
<input type="text" id="end" size="50" placeholder="Tujuan">
<button id="lihat">lihat</button>
<br><br>
<div id="maps" style="width: 800px; height: 400px;"></div>
</body>
</html>

untuk hasil bisa dilihat di bawah ini, sebagai sample kita akan menunjukkan arah dari ciputat ke blok m

Advertisements

Share Pengalaman Interview Web Programmer

Dalam Interview untuk web programmer yang paling banyak adalah algoritma, padahal dalam kasus nyata kita jarang memakai, entahlah kenapa perusahaan begitu, tapi itulah kebijakan mereka. meskipun ng semua perusahaan seperti itu, nah kali ini gw share pengalaman aja , sering menghadapi interview jadi tau beberapa kesamaan diantara perusahaan.

  1. Startup

Kalau di perusahaan startup yang sangat dibutuhkan adalah kemampuan yang luar biasa karena mereka di                   kejar target dan terbatas dengan dana investor. terkadang juga di tekan dengan deadline produk yang di                      bangun biasanya di startup kalau kita interview ng jauh-jauh dari algoritama seperti contoh:

-> Membuat Segitiga Bintang dengan bahasa pemograman yang dikuasi

-> Membuat Ketupat Bintang  dengan bahasa pemograman yang dikuasi

-> Membuat Bilangan Prima

-> Membuat Bilangan Ganjil dan Genap

-> Membuat Bilangan Fibonasi

-> Membuat Bilangan Desimal Menjadi Biner

-> Memindahkan nilai a ke b dan ke c supaya tidak bentrok.

-> Biasanya Juga ditanya apa itu class, function, abstract, contruct, inherit / Konsep OOP

-> Perbedaan Include, required, include_once, required_once

->prosedure sql, on cascade, on delete sql , dll

2. Consultan IT

Jika Konsultan biasanya lebih kepada skill Interface atau pun Pemograman Inti yang akan di pakai, karena                   mereka mengerjakan project luar, biasanya yang di test adalah

-> Membuat Layout Website

->crud Aplikasi

->aplikasi Lengkap ditentukan sesuai project yang akan di garap.

3. Perusahaan Menengah Keatas

Sepangalaman saya untuk di test pemograman hampir ng ada, karena yang mereka lihat adalah attitude bukan    skill , biasanya kalau attitudenya baik , bisa langsung di proses.

[trick] Cara Jitu Setting Virtual Host Untuk Laravel di LinuxLite (Ubuntu 16.04)

Bismillah…

Alkisah, setting apache 2.2 berbeda dengan apache 2.4, alasan mereka karena alasan security… alhasil, gw sampe unistall ulang apache2 berkali kali, sampe akhirnya nemu langkah yang pas! ini dia, Sumbernya:

https://lowendbox.com/blog/how-to-setup-apache-virtual-hosts-on-ubuntu-16-04/ 

http://www.itzgeek.com/how-tos/linux/ubuntu-how-tos/setup-apache-virtual-hosts-on-ubuntu-15-04-14-04.html

Oke, dari tutorial diatas gw berhasil akses aplikasi laravel via laravel.local tanpa localhost/laravel/public.. berikut spseifikasinya:

  1. LinuxLite 3 (Ubuntu 16.04)
  2. LAMPP (Linux, Apache 2.4, Php7, Pma)
  3. Laravel 5.*

Oke, kali ini gw ringkas ya versi gw … kita akan buat nama aplikasi simbada.local, berikut langkahnya:

1 buat sebuah folder laravel dimana saja, kita coba di folder /var/www/simbada

2 copy file simbada.conf dari source sites-avaliable/000-default.conf

3 ubah code simbada.conf sesuai folder dimana ‘simbada’ berada

4 tambahkan host local, untuk akses simbada.local, ada di /etct/hosts

5 Aktifkan virtual host dengan printah a2ensite dan restart apache

6. Sekrang bisa akses simbada.local tidak lagi localhost/simbada/public

oya, nanti kalo pake chromium akan muncul warning, seperti ini, tinggal klik aja ok.

Done.

Have a nice day.

[tutorial] #2 Install CMS Canvas Untuk Website Profile Perusahaan

Bismillah…

Kali ini gw lagi pengen nulis teknik install cms canvas, just Info, halaman utama CMS Canvas sudah tidak ditemukan, alhamdulillah berhasil menemukan developer yang mengembangkan, yaitu pagestudiocms.com bisa diakses ya, next tutoral ke #3 bakal gw jelasin perbedaan yang lumayan banyak dari CMS Canvas dan PageStudio CMS, tapi kalo sekarang kita akan bahas CMSCanvas berbasis Codeigniter.

Upload seluruh folder di localhost/ hosting yang ada, kurang lebih nanti tampilannya seperti ini:

todo … proses upload ke hosting.

[share] Menambahkan Fungsi OTP Di SMS Gateway Gratisan Zenziva.NET

Bismillah…

Selagi santai dikantor dengan bejibun module yang sudah ada, iseng research and development tentang SMS Gateway yang Gratis dari Zenziva.net bisa gunakan API (Application Programable Interface) dimana kita bisa kirim sms geratis tapi dengan nomor random dari Web Zenziva (orang geratisan, haha) eh, keingetan dengan Fitur dari TokoCash.com Tokopedia, dimana mengirimkan kode OTP (One Time Password)¬† ke nomor handphone yang sudah didaftarkan, ibaratnya ada validasinya … keren keren … oya, sebelumnya penulis topidesta yaitu uda rifki juga pernah share tentang sms gateway bisa baca disini.

Nah, akhirnya jajal dulu, API dari Zenziva kalo kirim sms gimana, terus bisa!!… silahkan dilihat di github:

https://github.com/RSUP/ZENZIVA-PHP

nah, kan targetnya biar bisa OTP (One Time Password) akhirnya ubek ubek source github tentang otp-php … kan pake PHP test nya hahha, terdamparlah di sini:

https://github.com/anoopsg/Otp-php

Ternyata kagak langsung bisa coy, butuh oprek lagi … nah ada beberapa baris yang gw ubah (gw fork dulu githubnya),¬† berikut bbrp yang gw ubah, sedikit sih

public function __construct(){
		$this->url = "https://reguler.zenziva.net/apps/smsapi.php";
		$this->userkey = "USERKEY";       //include api key here
		$this->passkey = "PASSKEY";		
		$this->message = urlencode($this->message);
		$this->otp = 4;			
	}

udah kan ya, oya kalo butuh userkey dan passkey bisa daftar di zenziva langsung:

https://reguler.zenziva.net/

Okaylah, silahkan unduh/ fork github gw yang udah gw ubah ada dialamat ini:

https://github.com/RSUP/Otp-php/

Kagak usah gw jelasain ya, baca postingan uda rifki aja yang udah jelasin SMS GATEWAY.. kalo pada bingung komentar ajah, kalo sempet gw bales, maaf kalo lama bales, kadang males buka blog soalnya… hahaha

Have a Nice Day

[trick] Pemanfaatan DropzoneJS dengan Codeigniter 2

Bismillah…

Kali ini ada trick memanfaatkan plugin js ke module API Prima SIMRS … berikut contoh video GIF singkatnya:

*Catatan: Divideo saya menggunakan Plugin Facebox.js untuk popup seperti itu.

Ikuti ajah tutorialnya disini ya:

  1. https://www.sandro.id/artikel/26-tutorial-upload-multiple-foto-dengan-ajax-dan-codeigniter-dropzone-js (Pemahaman Awal)
  2. https://www.startutorial.com/articles/view/dropzonejs-php-how-to-display-existing-files-on-server (Advanced)
  3. https://github.com/edomaru/ci_dropzone (Advanced)

Inget, sampai faham betul yah ikutin… kalo kali ini gw cuman share trick ajah, berupa script potongan. Kalo ikutin tutorial di Point 1 pasti akan menemukan script js berikut ini:

	Dropzone.autoDiscover = false;

	var foto_upload= new Dropzone(".dropzone",{
		url: "upload.php",
		maxFilesize: 2,
		method:"post",
		acceptedFiles:"image/*",
		paramName:"userfile",
		dictInvalidFileType:"Type file ini tidak dizinkan",
		addRemoveLinks:true,
	});


	//Event ketika Memulai mengupload
	foto_upload.on("sending",function(a,b,c){
		a.token=Math.random();
		c.append("token_foto",a.token); //Menmpersiapkan token untuk masing masing foto
	});


	//Event ketika foto dihapus
	foto_upload.on("removedfile",function(a){
		var token=a.token;
		$.ajax({
			type:"post",
			data:{token:token},
			url: "remove.php",
			cache:false,
			dataType: 'json',
			success: function(){
				console.log("Foto terhapus");
			},
			error: function(){
				console.log("Error");

			}
		});
	});

Ternyata script tersebut berhasil tapi yang gw butuhin tuh habis upload terus refresh halaman foto sebelumnya muncul lagi, nah ternyata ada di Point 3 script tersebut, berikut scriptnya:

// source: https://github.com/edomaru/ci_dropzone/
Dropzone.autoDiscover = false;

var myDropzone = new Dropzone(".dropzone", {
	url: "upload.php",
	acceptedFiles: "image/*",
	maxFilesize: 2,
	paramName:"userfile",
	dictInvalidFileType:"Type file ini tidak dizinkan",
	addRemoveLinks: true,
    // previewTemplate: document.querySelector('#preview-template').innerHTML,
    clickable: true,

	sending: function(a,b,c) {
		a.token 	= Math.random();
		c.append("token_foto",a.token); //Menmpersiapkan token untuk masing masing foto
	},

	removedfile: function(file) {

		var token= file.token;

		$.ajax({
			type: "post",
			url: "remove.php"+token,
			data:{token:token},
			dataType: 'json',
			cache:false,
		});
		// remove the thumbnail
		var previewElement;
		return (previewElement = file.previewElement) != null ? (previewElement.parentNode.removeChild(file.previewElement)) : (void 0);
	},

	init: function() {
		var me = this;
		$.get("<?php echo site_url();?>api/website/dokter/list_foto/", function(data) { //alert(data);
			// if any files already in server show all here
			if (data.length > 0) {
				$.each(data, function(key, value) {
					var mockFile = value;
					me.emit("addedfile", mockFile);
					me.emit("thumbnail", mockFile, "<?php echo ROOTURL; ?>/foto/real/" + value.name);
					me.emit("complete", mockFile);

				    var a = document.createElement('a');
				    a.setAttribute('href',"<?php echo ROOTURL; ?>/foto/real/" + value.name);
				    a.innerHTML = "Download<b>";
				    value.previewTemplate.appendChild(a);

				});
			}
		});
	}
});

Nah udah deh, foto yang pernah ke upload keliatan juga akhirnya.

Done.

Have a Nice Day!

Advertisements