Monday, 4 December 2017

HTML5 Get Geolocaton Latitude and Longitude value Stored in Mysql display in html Page

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

Latitude<p id="demo"></p><br>
Longtitude<p id="demo1"></p><br>
 
     

<script>
var x = document.getElementById("demo");
var y=document.getElementById("demo1");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
        y.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML =+ position.coords.latitude ;
 
    y.innerHTML =  + position.coords.longitude;
    console.log(x.innerHTML);


//Test for browser compatibility
if (window.openDatabase) {
    //Create the database the parameters are 1. the database name 2.version number 3. a description 4. the size of the database (in bytes) 1024 x 1024 = 1MB
    var mydb = openDatabase("map_db", "0.1", "A Database of Contact I Like", 1024 * 1024);

    //create the cars table using SQL for the database using a transaction
    mydb.transaction(function (t) {
        t.executeSql("CREATE TABLE IF NOT EXISTS map (id INTEGER PRIMARY KEY ASC, lati TEXT, long TEXT)");
    });



}
else {
  alert("WebSQL is not supported by your browser!");
  }
 
 
    //check to ensure the mydb object has been created
    if (mydb) {
        //get the values of the make and model text inputs
     

        var lati = document.getElementById("demo").innerHTML;
        var long= document.getElementById("demo1").innerHTML;
  alert(lati);
    alert(long);
 

        //Test to ensure that the user has entered both a make and model
        if (lati !== "" && long !== "" ) {
            //Insert the user entered details into the cars table, note the use of the ? placeholder, these will replaced by the data passed in as an array as the second parameter
            mydb.transaction(function (t) {
                t.executeSql("INSERT INTO map (lati,long) VALUES (?,?)", [lati,long]);
                outputContacts();
            });
        } else {
            alert("You must enter a make and model!");
        }
    } else {
        alert("db not found, your browser does not support web sql!");
    }
 
 
 
 

    function outputContacts() {
    //check to ensure the mydb object has been created
    if (mydb) {
        //Get all the cars from the database with a select statement, set outputCarList as the callback function for the executeSql command
        mydb.transaction(function (t) {
            t.executeSql("SELECT * FROM map", []);
        });
    } else {
        alert("db not found, your browser does not support web sql!");
    }
}
 
 
}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
 
                                             
 
 

</script>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

Latitude<p id="demo"></p><br>
Longtitude<p id="demo1"></p><br>
   
   
<div id="carlistholder">
     <h3>Your Cars</h3>

    <ul id="carlist"></ul>
</div>
<script>
var x = document.getElementById("demo");
var y=document.getElementById("demo1");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
        y.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML =+ position.coords.latitude ;
   
    y.innerHTML =  + position.coords.longitude;
    console.log(x.value);
   
    //check to ensure the mydb object has been created
    if (mydb) {
        //get the values of the make and model text inputs
       

        var lati = document.getElementById("demo").value;
        var long= document.getElementById("demo1").value;
alert(lati.value);

        //Test to ensure that the user has entered both a make and model
        if (lati !== "" && long !== "" ) {
            //Insert the user entered details into the cars table, note the use of the ? placeholder, these will replaced by the data passed in as an array as the second parameter
            mydb.transaction(function (t) {
                t.executeSql("INSERT INTO contact (lati,long) VALUES (?,?)", [lati,long]);
                outputContacts();
            });
        } else {
            alert("You must enter a make and model!");
        }
    } else {
        alert("db not found, your browser does not support web sql!");
    }
   
   
   
   
                //function to output the list of contact in the database

function updateContactList(transaction, results) {
    //initialise the listitems variable
    var listitems = "";
    //get the car list holder ul
    var listholder = document.getElementById("carlist");

    //clear cars list ul
    listholder.innerHTML = "";

    var i;
    //Iterate through the results
    for (i = 0; i < results.rows.length; i++) {
        //Get the current row
        var row = results.rows.item(i);

        listholder.innerHTML += "<li>" + row.uname + " - " + row.email + " - "+row.adress+"-"+row.password+"-"+row.cpassword+"(<a href='javascript:void(0);' onclick='deleteContact(" + row.id + ");'>Delete Car</a>)";
    }

}
    function outputContacts() {
    //check to ensure the mydb object has been created
    if (mydb) {
        //Get all the cars from the database with a select statement, set outputCarList as the callback function for the executeSql command
        mydb.transaction(function (t) {
            t.executeSql("SELECT * FROM contact", [], updateContactList);
        });
    } else {
        alert("db not found, your browser does not support web sql!");
    }
}

 
}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
   
                                              //Test for browser compatibility
if (window.openDatabase) {
    //Create the database the parameters are 1. the database name 2.version number 3. a description 4. the size of the database (in bytes) 1024 x 1024 = 1MB
    var mydb = openDatabase("map_db", "0.1", "A Database of Contact I Like", 1024 * 1024);

    //create the cars table using SQL for the database using a transaction
    mydb.transaction(function (t) {
        t.executeSql("CREATE TABLE IF NOT EXISTS contact (id INTEGER PRIMARY KEY ASC, lati TEXT, long TEXT)");
    });



}
else {
alert("WebSQL is not supported by your browser!");
}
   
   
   

</script>

</body>
</html>