GPS save in database

Expert Comment

by:Julian Hansen

ID: 418467812016-10-17

First up
The mysql library is deprecated - you should consider using mysqli instead.
Secondly,
The Components object is deprecated. It will soon be removed. - from console.
Third, after running your code Lattitude and Longitude show in the <div id="show"></div>

So need to understand what the question is?

Author Comment

by:RiccardoQuest

ID: 418467862016-10-17

It's shown as one variable in Show. I need it separated so it can be stored in the database as longitude and latitude separate fields. I just want the show id split into two and stored into database upon one click

Expert Comment

by:Ray Paseur

ID: 418467882016-10-17

Here is the code, in the code snippet so we can all see it without having to download a file.

<script>
    var latitude    = 0;
    var longitude   = 0;

    function geoFindMe() {
      var output = document.getElementById("show");

      if (!navigator.geolocation){
        output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
        return;
      }

      function success(position) {
        latitude  = position.coords.latitude;
        longitude = position.coords.longitude;

        output.innerHTML = '<p>Latitude is ' + latitude + 'Â° <br>Longitude is ' + longitude + 'Â°</p>';
        var img = new Image();
        img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=20&size=300x300&sensor=false";

        output.appendChild(img);
      };

      function error() {
        output.innerHTML = "Unable to retrieve your location";
      };

      output.innerHTML = "<p>Locating...</p>";
      fillLatitudeLongitudeElements();
      navigator.geolocation.getCurrentPosition(success, error);
    

    function fillLatitudeLongitudeElements(){
        document.getElementById("latitude").value = latitude;
        document.getElementById("longitude").value = longitude;
        
        var sql = "INSERT INTO gps(lat, long) VALUES (latitude,longitude)";
    }
}
    function prompt(window, pref, message, callback) {
        let branch = Components.classes["@mozilla.org/preferences-service;1"]
        .getService(Components.interfaces.nsIPrefBranch);

        if (branch.getPrefType(pref) === branch.PREF_STRING) {
            switch (branch.getCharPref(pref)) {
                case "always":
                return callback(true);
                case "never":
                return callback(false);
            }
        }

        let done = false;

        function remember(value, result) {
            return function() {
                done = true;
                branch.setCharPref(pref, value);
                callback(result);
            }
        }

        let self = window.PopupNotifications.show(
        window.gBrowser.selectedBrowser,
        "geolocation",
        message,
        "geo-notification-icon",
        {
            label: "Share Location",
            accessKey: "S",
            callback: function(notification) {
                done = true;
                callback(true);
            }
        }, [
        {
            label: "Always Share",
            accessKey: "A",
            callback: remember("always", true)
        },
        {
            label: "Never Share",
            accessKey: "N",
            callback: remember("never", false)
        }
        ], {
            eventCallback: function(event) {
                if (event === "dismissed") {
                    if (!done) callback(false);
                    done = true;
                    window.PopupNotifications.remove(self);
                }
            },
            persistWhileVisible: true
        });
    }

    prompt(window,
    "extensions.foo-addon.allowGeolocation",
    "Foo Add-on wants to know your location.",
    function callback(allowed) { alert(allowed); });
</script>

<p><button onclick="geoFindMe()">Locate</button></p>
<div id="show"></div>

 <?php include "../dbconnect.php";
 
 if(isset($_POST['sub'])){
     
     $l = $_POST['long'];
     
     $la = $_POST['lat'];
     
     $n = $_POST['name'];
 
 mysql_query("INSERT INTO `gps`(`lat`, `long`, `name`) VALUES ('".$la."','".$l."','".$n."')");
 
 echo "Done though";
 
 }
 ?>

<form action="#" method="post">
  <fieldset>
    Latitude3:<br>
    <input id="latitude" type="text" name="firstname" value="latitude" readonly><br>
    Longitude:<br>
    <input id="longitude" type="text" name="lastname" value="longitude" readonly><br><br>
    <input type="submit" value="Submit" name="sub">
  </fieldset>
</form>

I would like to separate the show output so i can later store the longitude and lattitude into my table in sql

Author Comment

by:RiccardoQuest

ID: 418467932016-10-17

i have changed the name="firstname" and name="lastname" to "lat" and "long"

Expert Comment

by:Ray Paseur

ID: 418467952016-10-17

Please have a look at the PHP script starting on line 107, and the HTML document starting on line 124. The $_POST associative array keys are usually expected to match the name= attributes in the HTML form, but they do not in this part of the code. Unless your JS is adding more form elements somewhere else, you might want to use var_dump($_POST) and see what is getting transmitted to the PHP script by the HTTP request.

Here is how to handle the MySQL remediation. This is no longer "optional" or a future issue. There is no current version of PHP that still has the MySQL extension, except in deprecated status.
https://www.experts-exchange.com/articles/11177/PHP-MySQL-Deprecated-as-of-PHP-5-5-0.html

Assisted Solution

by:Ray Paseur

Ray Paseur earned 250 total points

ID: 418467972016-10-17

changed the name="firstname" and name="lastname" to "lat" and "long"

Good idea! :-)

It also looks like you may have a UTF-8 character collision in this code:

output.innerHTML = '<p>Latitude is ' + latitude + 'Â° <br>Longitude is ' + longitude + 'Â°</p>';

You may also want to add an input control with the name="name" attribute.

Author Comment

by:RiccardoQuest

ID: 418468092016-10-17

Updated! If you press Locate twice it happens however i need it to work with one press as i want this to work in the background of another form and the output will be input type="hidden" then inserted in to the database
stack.html

Author Comment

by:RiccardoQuest

ID: 418468122016-10-17

<script>
    var latitude    = 0;
    var longitude   = 0;

    function geoFindMe() {
      var output = document.getElementById("show");

      if (!navigator.geolocation){
        output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
        return;
      }

      function success(position) {
        latitude  = position.coords.latitude;
        longitude = position.coords.longitude;

        output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
        var img = new Image();
        img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=20&size=300x300&sensor=false";

        output.appendChild(img);
      };

      function error() {
        output.innerHTML = "Unable to retrieve your location";
      };

      output.innerHTML = "<p>Locating...</p>";
      fillLatitudeLongitudeElements();
      navigator.geolocation.getCurrentPosition(success, error);
    

    function fillLatitudeLongitudeElements(){
        document.getElementById("latitude").value = latitude;
        document.getElementById("longitude").value = longitude;
    }
}
    function prompt(window, pref, message, callback) {
        let branch = Components.classes["@mozilla.org/preferences-service;1"]
        .getService(Components.interfaces.nsIPrefBranch);

        if (branch.getPrefType(pref) === branch.PREF_STRING) {
            switch (branch.getCharPref(pref)) {
                case "always":
                return callback(true);
                case "never":
                return callback(false);
            }
        }

        let done = false;

        function remember(value, result) {
            return function() {
                done = true;
                branch.setCharPref(pref, value);
                callback(result);
            }
        }

        let self = window.PopupNotifications.show(
        window.gBrowser.selectedBrowser,
        "geolocation",
        message,
        "geo-notification-icon",
        {
            label: "Share Location",
            accessKey: "S",
            callback: function(notification) {
                done = true;
                callback(true);
            }
        }, [
        {
            label: "Always Share",
            accessKey: "A",
            callback: remember("always", true)
        },
        {
            label: "Never Share",
            accessKey: "N",
            callback: remember("never", false)
        }
        ], {
            eventCallback: function(event) {
                if (event === "dismissed") {
                    if (!done) callback(false);
                    done = true;
                    window.PopupNotifications.remove(self);
                }
            },
            persistWhileVisible: true
        });
    }

    prompt(window,
    "extensions.foo-addon.allowGeolocation",
    "Foo Add-on wants to know your location.",
    function callback(allowed) { alert(allowed); });
</script>

<p><button onclick="geoFindMe()">Locate</button></p>
<div id="show"></div>

 <?php include "../dbconnect.php";
 
 if(isset($_POST['sub'])){
	 
	 $l = $_POST['long'];
	 
	 $la = $_POST['lat'];
	 
	 $n = $_POST['name'];
 
 mysql_query("INSERT INTO `gps`(`lat`, `long`, `name`) VALUES ('".$la."','".$l."','".$n."')");
 
 echo "Done though";
 
 }
 ?>

<form action="#" method="post">
  <fieldset>
    Latitude0:<br>
    <input id="latitude" type="text" name="lat" value="latitude" readonly><br>
    Longitude:<br>
    <input id="longitude" type="text" name="long" value="longitude" readonly><br><br>
    <input type="submit" value="Submit" name="sub">
  </fieldset>
</form>

Accepted Solution

by:Julian Hansen

Julian Hansen earned 250 total points

ID: 418468222016-10-17

Ok I think I see the problem. You need to get on top of asynchronous programing.

Lets break your code down

Line 5 you enter geoFindMe()
Line 13 - 22 you define a success handler
Line 24 - 26 you define an error handler
Line 29 You call fillLatitudeLongitudeElements

So far you have done no lookup yet and the global lat / lang values are 0 - so this function call is going to do nothing.
Line 30 you call getCurrentPosition with the success callback. This triggers an asynchronous operation that takes an indeterminate time to complete - meanwhile the main script continues executing - in this case exits.

When the success function is called (a long time later) latitude and longitude are updated to the values returned from the getCurrentPosition. The next time you click - these values are available.

There are essentially two things wrong with your code
1. You are calling fillLatitudeLongitudeElements(); before getting the values
2. Even if you called fillLatitudeLongitudeElements(); after getCurrentPosition it would still probably fail because the asynch call for getCurrentPosition will not complete before fillLatitudeLongitudeElements(); executes.

The solution is therefore to move the fillLatitudeLongitudeElements() inside your success handler i.e. move line 29 to after line 21 in the success handler.

Author Comment

by:RiccardoQuest

ID: 418468412016-10-17

Cant believe that was it. Its so annoying that i had it similair to that but i moved the bracket so it was outside the handler. Im unable to save it in the database though through "sub"

Author Comment

by:RiccardoQuest

ID: 418468782016-10-17

Silly me I forgot to rename the file .php Thank you again, Julian Hansen and Ray Paseur for both your help yet again :)

Author Comment

by:RiccardoQuest

ID: 418468872016-10-17

Is there anyway to get the "Submit" button to post the gps when submitting the form? So another words just one button to do all ?

Expert Comment

by:Julian Hansen

ID: 418468892016-10-17

Ok let's look at your server side
Firstly there is no name field being sent through - only lat and long.

A useful exercise is to add this line to the beginning of your <?php section

echo "<pre>" . print_r($_POST, true) . "</pre>";

Look at the output from that to understand what is being sent

What I would do is this
(NB: I am using your mysql_query code - but as mentioned above you should move to mysqli);

<?php
// Extract lat / long / name fields and sanitize the values
$latitude = isset($_POST['lat']) ? (float)$_POST['lat'] : false;
$longitude = isset($_POST['long']) ? (float)$_POST['long'] : false;
$name = isset($_POST['name']) ? mysql_real_escape_string($_POST['name']) : false;
// Only proceed if we have valid data
if ($latitude && $longitude && name) {
   // Construct query using HEREDOC
   // Cleaner. Also using embedded variables rather than messy string concat
   $query = <<< QUERY
INSERT INTO `gps` (`lat`,`long`,`name`)
VALUES ('{$latitude}','{$longitude}','{$name}')
QUERY;
   // NB: You don't include a connection resource in your mysql_query call
   // Assuming it is $conn.
   $result = mysql_query($query, $conn);
   if (!$result) {
      echo "Error: " . mysql_error($conn) . "<br/>";
   }
}

Don't forget to add the name field to the form or else the above code won't insert anything.
Also fix your mysql_query (seriously suggest you move to mysqli) but in the meantime you need to include a connection handle in the mysql_query() call

Expert Comment

by:Ray Paseur

ID: 418468912016-10-17

Here's a simplified solution. It might be easiest to start with something like this and build up the application a step at a time. This uses a GET-method request to display the location data, but by the time the web page is loaded, the location data has already been identified and stored in the HTML form input control values. So you could, in theory, skip the submit button and just display the location, or just pass the location through an AJAX request to a background PHP script that can write to your database.
https://iconoun.com/demo/temp_riccardo.php

<?php // demo/temp_riccardo.php
/**
 * https://www.experts-exchange.com/questions/28976860/GPS-save-in-database.html
 *
 * https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition
 *
 * https://www.experts-exchange.com/articles/4276/What-is-near-me-Proximity-calculations-using-PHP-and-MySQL.html
 * https://www.experts-exchange.com/articles/3350/Using-the-Google-Maps-API-in-PHP-and-JavaScript.html
 * https://www.experts-exchange.com/articles/9854/Using-GeoCodes-to-Find-an-Average-Location.html
 */
error_reporting(E_ALL);


// SHOW THE REQUEST VARIABLES, IF ANY
$get = NULL;
if (!empty($_GET)) $get = print_r($_GET, TRUE);


// CREATE OUR WEB PAGE IN HTML5 FORMAT
$htm = <<<HTML5
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<style type="text/css">
/* STYLE SHEET HERE */
</style>

<script>
function success(pos) {
    var location = pos.coords;
    document.getElementById("my_lat").value = location.latitude;
    document.getElementById("my_lon").value = location.longitude;
};

function error(err) {
    console.warn('ERROR(' + err.code + '): ' + err.message);
};

var options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
};

navigator.geolocation.getCurrentPosition(success, error, options);
</script>

<title>HTML5 Page With Simple Geo-Location</title>
</head>
<body>

<noscript>Your browsing experience will be much better with JavaScript enabled!</noscript>

<div>$get</div>

<form>
<input type="hidden" id="my_lat" name="lat" value="" />
<input type="hidden" id="my_lon" name="lon" value="" />
<input type="submit" value="Where am I?" />
</form>

</body>
</html>
HTML5;


// RENDER THE WEB PAGE
echo $htm;

Expert Comment

by:Julian Hansen

ID: 418468962016-10-17

So another words just one button to do all ?

Yes you can do this.
Simply add this

document.forms[0].submit();

After

fillLatitudeLongitudeElements();

In your success handler.

Expert Comment

by:Ray Paseur

ID: 418469202016-10-17

So another words just one button to do all ?

Or not even a button at all. Just get the geocode (latitude+longitude) and start the AJAX request to your background database script as soon as you have the geo data.

Author Comment

by:RiccardoQuest

ID: 418469442016-10-17

How would i go about that? On page load ?

Expert Comment

by:Ray Paseur

ID: 418469492016-10-17

Probably. This might be worth posting another question :-)