CREATE TABLE IF NOT EXISTS `logindemo` (
  `fullname` varchar(50) NOT NULL,
  `username` varchar(50) NOT NULL,
  `credential` varchar(50) NOT NULL
) 

Practice Queries here

  
      
        Username:
      
      

      
        Password:
      
      
      
    ';
    echo htmlentities($content);
    ?>
    

Your typical login form. An event listener will need to be applied the button and the value of each field appended to a query string and sent to a server where php will take over.


$("#loginbtn").click(function(){
var dataStr = 'username=' + $("#username").val() +
+ '&password=' + $("#password").val();
});

 
$( document ).ready(function() {
       $("#loginbtn").click(function(){
var dataStr = 'username=' + $("#username").val() + 
              + '&password=' + $("#password").val();
          $.ajax({
            url: "http://mm214.com/colemandemo/logindemo/login.php",
            type: "post",
            dataType: "html",
            data: dataStr,
            success:
            function (data){
              console.log(data);
              $("#loginresponse").html(data);
            }
          })
    });
   });

This is the jquery that will grab the form data and create a post string that is sent to the external web server.

$dbh = new PDO("mysql:host=localhost;dbname=databasename","username","password");
$username = $_POST['username'];
$password = md5($_POST['password']);//note the encryption. Not safe. Used only for this presentation
$sql = $dbh->prepare("select fullname from logindemo where username = ? and credential = ?");
//data is bound to the the query with a string filter
$sql->bindParam(1,$username,PDO::PARAM_STR);
$sql->bindParam(2,$password,PDO::PARAM_STR);
$sql->execute();
$row = $sql->fetch();
$fullname = $row['fullname'];
if ($fullname) echo 'Welcome, '.$fullname;
else echo 'No Match';

This is the recipient of the data from your phone.
It takes the post data, encrypts the password and then runs a binded query against what currently exists in the db!

// use localStorage for persistent storage
// use sessionStorage for per tab storage
saveButton.addEventListener('click', function () {
  sessionStorage.setItem('value', area.value);
  sessionStorage.setItem('timestamp', (new Date()).getTime());
}, false);
textarea.value = sessionStorage.getItem('value');

Your app has to remember that the user is logged in so we use sessionStorage.
Save text value on the client side (crash-safe)

The following screencast replicates what we just did: Mobile Authentication

Download the files here

You have just learned how to pass data from a mobile device to a server. Why is this important?

What are some other functionalities that can be created with the technologies you just learned?

For homework turn your form into a one product shopping cart.
Allow the user to communicate that they want to purchase that product.

Go to our classpage at mm214.com for more.