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] Menghapus File Migrations Yang Salah Nama

Bismillah…

trick kali ini kita bisa menghapus file migration di laravel dengan hardcode lewat interface editor kita, tapi itu 2x kerja, terus kita harus dump autoload, biar 1 halaman kita pake console, the power of console.. haha, alkisah gw pengen buat migration file namanya ‘master_anggaran_wilayah’ tapi gw lupa nambahin master, bisa aja direname, yah bisa aja, tapi ada langkah yang bisa dilakukan kalo sudah di laravel, ini tricknya, silahkan ikuti:

https://stackoverflow.com/a/17830269

[trick] 1 Perintah Bash Untuk Buat Virtual Host di Apache 2.4

Bismillah…

pernah share, cara membuat virtual host untuk pengembangan web terutama laravel ya masa kudu akses dari loclhost/laravel/public, soal akses url, ini dia:

https://topidesta.wordpress.com/2017/11/18/trick-cara-jitu-setting-virtual-host-untuk-laravel-di-linuxlite-ubuntu-16-04/

#! /bin/bash

# May need to run this as sudo!
# I have it in /usr/local/bin and run command 'vhost' from anywhere, using sudo.

#
#   Show Usage, Output to STDERR
#
function show_usage {
cat <<- _EOF_
Create a new vHost in Ubuntu Server
Assumes /etc/apache2/sites-available and /etc/apache2/sites-enabled setup used
    -d    DocumentRoot - i.e. /var/www/yoursite
    -h    Help - Show this menu.
    -s    ServerName - i.e. example.com or sub.example.com
    
    how: sudo vhost -d /var/www/myproject  -s myproject.local
    
_EOF_
exit 1
}


#
#   Output vHost skeleton, fill with userinput
#   To be outputted into new file
#
function create_vhost {
cat <<- _EOF_
<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    ServerName $ServerName
    ServerAlias www.$ServerName
    DocumentRoot $DocumentRoot
    <Directory $DocumentRoot>
        Options -Indexes +FollowSymLinks +MultiViews
        AllowOverride All
        Order allow,deny
        Allow from all
        Require all granted
    </Directory>
    ErrorLog \${APACHE_LOG_DIR}/$ServerName-error.log
    # Possible values include: debug, info, notice, warn, error, crit,
    # alert, emerg.
    LogLevel warn
    CustomLog \${APACHE_LOG_DIR}/$ServerName-access.log combined
</VirtualHost>
_EOF_
}

#Sanity Check - are there two arguments with 2 values?
if [ $# -ne 4 ]; then
	show_usage
fi

#Parse flags
while getopts "d:s:" OPTION; do
    case $OPTION in
        h)
            show_usage
            ;;
        d)
            DocumentRoot=$OPTARG
            ;;
        s)
            ServerName=$OPTARG
            ;;
        *)
            show_usage
            ;;
    esac
done

if [ ! -d $DocumentRoot ]; then 
    mkdir -p $DocumentRoot
    #chown USER:USER $DocumentRoot #POSSIBLE IMPLEMENTATION, new flag -u ?
fi

if [ -f "$DocumentRoot/$ServerName.conf" ]; then
    echo 'vHost already exists. Aborting'
    show_usage
else
    sudo sh -c "echo \"127.0.0.0    ${ServerName}\" >> \/tmp\/hosts"
    create_vhost > /etc/apache2/sites-available/${ServerName}.conf
    cd /etc/apache2/sites-available/ && a2ensite ${ServerName}.conf #Enable site
    service apache2 reload #Optional implementation
fi

kalo males copy past donwload aja ini url:
https://gist.github.com/mdestafadilah/2aff0ebefefcd79a7932393d8dec5f1d

Langkahnya:

  1. $ cd /tmp
  2. wget -s https://gist.github.com/mdestafadilah/2aff0ebefefcd79a7932393d8dec5f1d
  3. sudo mv vhosts.sh vhosts
  4. sudo mv /tmp/hosts /usr/local/bin/vhosts
  5. Run: vhost -h

Done. caranya ada kok di sourcenya.

Have a nice day.

source: https://gist.github.com/fideloper/2710970

[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.

[share] Modul Modular di Laravel – Management MVC

Bismillah…

entah kenapa setiap pengembangan web, gw juga selalu tertarik berbau modular, dahulu kala ketika ngembangin aplikasi kepuasan pelanggan, dengan modular, dengan plugin HMVC.. sekarang dapet project, leadernya pengen sistem modular juga, alhasil, gw searching di google di github, ada banyak yang ngembangin berupa package (packagist) dengan bbrp perintah via commandline, nanti gw share atu atu, dan repiew, insyaAllah.

Oke, diantarnya, dan udah gw fork ūüôā ialah,

  1. https://github.com/mdestafadilah/laravel-modules
  2. https://github.com/mdestafadilah/laravel_module_manager
  3. https://github.com/mdestafadilah/modules-1
  4. https://github.com/mdestafadilah/laravel-modular
  5. https://github.com/mdestafadilah/laravel-nestedset

Nah loh, buat pemula kayak gw ini bikin fusing … beda waktu pengembangan dengan CI, cuman cukup pake HMVC udah mantep bener dah, yaudah gpp namanya juga artis, maklum, artisan (artis-kan) ….

sekian share kali ini.. kalo butuh ebook liat aja dimari: https://topidesta.wordpress.com/download/ebook/

Have a nice day

Advertisements