Agen Terpercaya   Advertise
 
 
 
Pasang iklan, hanya lewat Contact Us.
Waspada penipuan iklan. Klik di sini untuk melihat daftar penipu.

SHARE [HAK AKSES LOKASI] Belajar Dan Memahami konsep terapan untuk HTML5 Geolocation

RayMantic

Moderator
Staff member
Moderator
Daftar
4 Oct 1988
Post
×
Like diterima
9.183
Bimabet
seberapa penting adanya hak akses lokasi dan hak akses perangkat :

1 untuk menghindari akun bot / spam dan akun yang di buat untuk kepentingan [untuk merekam kelemahan pada sistem dan menggunakan syntak apa dll]
2 untuk menghindari penyalah gunaan tool / web ke pihak yang salah karena lokasi pengguna ada di serv memudahkan dev untuk merotasi
3 memudahkan dev untuk mengetahui akun ganda yang di miliki user .
4 Melihat lokasi perangkat Android aktif yang digunakan login .
5 dev mampu mengembangkan prosedur control bila di perlukan

dan lain lain untuk keamanan dari dev dan sistem itu sendiri

Basic. Mendeteksi Koordinat Lokasi

kita akan mencoba mendeteksi lokasi kita dan menampilkan koordinat latitude dan longitudenya pada web. Script yang kita gunakan adalah:
JavaScript:
<script>
var view = document.getElementById("tampilkan");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        view.innerHTML = "Yah browsernya ngga support Geolocation bro!";
    }
}
 function showPosition(position) {
    view.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
 }
</script>

Penjelasan dari script diatas :
cek apakah browser support fitur geolocation, jika tidak support maka kita tampilkan tidak support, jika support selanjutnya kita panggil fungsi getCurrentPosition(), yang akan mengembalikan koordinat dari user. Fungsi showPositio() berguna untuk menampilkan koordinat dari lokasi kita ke dalam html .

code lengkapnya:
HTML:
<!DOCTYPE html>
<html>
<head>
    <title>Demo Cek Lokasi Geolocation HTML5</title>
</head>
 
<body>
<center>
<p>Cek lokasi anda! >> <button onclick="getLocation()">Cek</button></p>
 
 
<p id="tampilkan"></p>
</center>
<script>
var view = document.getElementById("tampilkan");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        view.innerHTML = "Yah browsernya ngga support Geolocation bro!";
    }
}
 function showPosition(position) {
    view.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
 }
</script>
</body>
</html>

Ketika pengguna mengklik button, maka fungsi getLocation akan dipanggil, dan user akan mendapat popup apakah mengizinkan web untuk mentrack lokasi user. Jika kita mengizinikannya, maka akan ditampilkan koordinat kita.

gambarnya :
fd12f71352048643.png

11ef201352048646.png


ada permasalahan atau akan terjadi beberapa eror :
Mengatasi Beberapa Error
biasanya :
  • Bagaimana jika ternyata browser kita ngga support?
  • atau trnyata user tidak mengizinkan mendeteksi lokasi kita,
  • atau lokasi tidak bisa ditemukan ataupun error2 lainnya?
Scriptnya adalah sebagai berikut:

JavaScript:
function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            view.innerHTML = "Yah, mau deteksi lokasi tapi ga boleh :("
            break;
        case error.POSITION_UNAVAILABLE:
            view.innerHTML = "Yah, Info lokasimu nggak bisa ditemukan nih"
            break;
        case error.TIMEOUT:
            view.innerHTML = "Requestnya timeout bro"
            break;
        case error.UNKNOWN_ERROR:
            view.innerHTML = "An unknown error occurred."
            break;
    }
 }
Dengan menggunakan switch error, kita mendeteksi beberapa error apakah bernilai true.
code lengkapnya jadi :
HTML:
<!DOCTYPE html>
<html>
<head>
    <title>Demo Cek Lokasi Geolocation HTML5</title>
</head>
 
<body>
<center>
<p>Cek lokasi anda! >> <button onclick="getLocation()">Cek</button></p>
 
 
<p id="tampilkan"></p>
</center>
<script>
var view = document.getElementById("tampilkan");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        view.innerHTML = "Yah browsernya ngga support Geolocation bro!";
    }
}
 function showPosition(position) {
    view.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
 }
 
 function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            view.innerHTML = "Yah, mau deteksi lokasi tapi ga boleh :("
            break;
        case error.POSITION_UNAVAILABLE:
            view.innerHTML = "Yah, Info lokasimu nggak bisa ditemukan nih"
            break;
        case error.TIMEOUT:
            view.innerHTML = "Requestnya timeout bro"
            break;
        case error.UNKNOWN_ERROR:
            view.innerHTML = "An unknown error occurred."
            break;
    }
 }
</script>
</body>
</html>

Menampilkan Dengan Menggunakan Google Maps
kalo cuma koordinat doang sih susah bacanya, ngga ketahuan juga lokasinya dimana? Nah kita juga bisa tampilin dengan menggunakan google maps ;
Langkahnya adalah kita perlu mengimport javascript API dari Google Maps: http://maps.google.com/maps/api/js lalu tambahkan script untuk menampilkan maps pada fungsi showLocation:

JavaScript:
function showPosition(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    latlon = new google.maps.LatLng(lat, lon)
    mapcanvas = document.getElementById('mapcanvas')
    mapcanvas.style.height = '500px';
    mapcanvas.style.width = '500px';
 
    var myOptions = {
    center:latlon,
    zoom:14,
    mapTypeId:google.maps.MapTypeId.ROADMAP
    }
    
    var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
    var marker = new google.maps.Marker({
        position:latlon,
        map:map,
        title:"You are here!"
    });
}

code lengkapnya menjadi :
HTML:
<!DOCTYPE html>
<html>
<head>
    <title>Demo Cek Lokasi Geolocation HTML5</title>
</head>
 
<body>
<center>
<p id="tampilkan"></p>
<p>Cek lokasi anda! >> <button onclick="getLocation()">Cek</button></p>
 
<div id="mapcanvas"></div>
</center>
<script src="http://maps.google.com/maps/api/js"></script>
 
<script>
var view = document.getElementById("tampilkan");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        view.innerHTML = "Yah browsernya ngga support Geolocation bro!";
    }
}
 
function showPosition(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    latlon = new google.maps.LatLng(lat, lon)
    mapcanvas = document.getElementById('mapcanvas')
    mapcanvas.style.height = '500px';
    mapcanvas.style.width = '500px';
 
    var myOptions = {
    center:latlon,
    zoom:14,
    mapTypeId:google.maps.MapTypeId.ROADMAP
    }
    
    var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
    var marker = new google.maps.Marker({
        position:latlon,
        map:map,
        title:"You are here!"
    });
}
 
function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            view.innerHTML = "Yah, mau deteksi lokasi tapi ga boleh :("
            break;
        case error.POSITION_UNAVAILABLE:
            view.innerHTML = "Yah, Info lokasimu nggak bisa ditemukan nih"
            break;
        case error.TIMEOUT:
            view.innerHTML = "Requestnya timeout bro"
            break;
        case error.UNKNOWN_ERROR:
            view.innerHTML = "An unknown error occurred."
            break;
    }
 }
</script>
 
</body>
</html>

Hasil akhirnya
443fa01352048680.png



Note : selalu upgrade script
 
Kalo cara pembagian akses pada setiap user bgmn suhu ?

Misal.
Superuser - midle - user

Pembagian menu yg bisa di akses

Punya ga caranya .minta tolong share .

Sebelumnya terimakasih
 
Kalo cara pembagian akses pada setiap user bgmn suhu ?

Misal.
Superuser - midle - user

Pembagian menu yg bisa di akses

Punya ga caranya .minta tolong share .

Sebelumnya terimakasih
Bisa di cari di google dengan keyword:
"Login multi user level"
Biasanya bikin dl database dengan penambahan level dan id per user ...
Atau di setting menurut config server yg ingin suhu buat ...
Misa:
Admin id 1 level admim
A id 2 level staff super
D id 3 level staff
F id 4 level user

Lalu di fungsi php bikin dari id itu hanya bisa mengakses menu apa misal :

Admin id 1 level admin semua type
F id 4 level user type input saja ....

Tergantung dari menu yg ada dan di sesuaikan fungsi dari tiap level nya...

Lagi sibuk RL sekarang suhu ...ntar coba kl pas longgar ya suhu...
 
Bimabet
Bisa di cari di google dengan keyword:
"Login multi user level"
Biasanya bikin dl database dengan penambahan level dan id per user ...
Atau di setting menurut config server yg ingin suhu buat ...
Misa:
Admin id 1 level admim
A id 2 level staff super
D id 3 level staff
F id 4 level user

Lalu di fungsi php bikin dari id itu hanya bisa mengakses menu apa misal :

Admin id 1 level admin semua type
F id 4 level user type input saja ....

Tergantung dari menu yg ada dan di sesuaikan fungsi dari tiap level nya...

Lagi sibuk RL sekarang suhu ...ntar coba kl pas longgar ya suhu...
Sudah tapi bingung di penetapan level dan menu . antara admin sama superuser itu kan bedanya sedikit .

Bole minta saran
 
Jav Toys
Gaple Online Indonesia
Pasang iklan hanya lewat CONTACT US
Back
Top
We are now part of LS Media Ltd