Error message

Deprecated function: implode(): Passing glue string after array is deprecated. Swap the parameters in drupal_get_feeds() (line 394 of /home1/tylerfra/public_html/includes/common.inc).

Drupal JSON Services Examples with PhoneGap and JQuery Mobile for Android

Submitted by tyler on Thu, 10/27/2011 - 16:43

Updated: 2013-06-14

Category:

Code

Tags:

android

drupal 6.x

jquery

jquery mobile

UPDATE: Please read this article for a much more detailed explanation on how to get PhoneGap up and running to communicate with Drupal Services.

UPDATE: There is security issue with the Services module prior to version 3.4. Now all autheticated service calls that use POST, PUT or DELETE need a CSRF token sent along in the request header. This article has NOT been udpated to show those changes! More Information and Workaround(s)

This info assumes you have Drupal 6.x, Services 3.x and PhoneGap/Eclipse/Android up and running. If you are new to Drupal Services, head over to the Drupal Services Examples article to get started. This page is a work in progress and I will continue to add more examples when days are 48 hours long.

System Connect, User Login, User Logout

assets/www/index.html

<!DOCTYPE html> 
<html>

  <head> 
    <title>Drupal JSON Services with PhoneGap and JQuery Mobile for Android</title> 
    <script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
    <link rel="stylesheet" href="jquery.mobile-1.0a1.min.css" /> 
    <script src="jquery-1.4.3.min.js"></script>
    <script src="jquery.mobile-1.0a1.min.js"></script>
  </head>

<body>

<div data-role="page" id="tf_page_dashboard">
  <script type="text/javascript" charset="utf-8" src="scripts/dashboard.js"></script>

  <div data-role="header">
    <h1>Dashboard</h1>
  </div><!-- /header -->

  <div data-role="content">
    <p><a href="#tf_page_login" data-role="button" id="tf_login_button">Login</a></p>
    <p><a href="#" data-role="button" id="tf_logout_button">Logout</a></p>
  </div><!-- /content -->

</div><!-- /page -->

<div data-role="page" id="tf_page_login">
  <script type="text/javascript" charset="utf-8" src="scripts/login.js"></script>

  <div data-role="header">
    <h1>Login</h1>
  </div><!-- /header -->

  <div data-role="content" class='content'>
    <div>
      <label for="tf_page_login_name">Username</label>
      <input type="text" id="tf_page_login_name" />
    </div>
    <div>
      <label for="tf_page_login_pass">Password</label>
      <input type="password" id="tf_page_login_pass" />
    </div>
    <fieldset>
      <div><button type="button" data-theme="b" id="tf_page_login_submit">Login</button></div>
    </fieldset>
  </div><!-- /content -->

</div><!-- /page -->

</body>

</html>

assets/www/scripts/dashboard.js

$('#tf_page_dashboard').live('pageshow',function(){
  try {
    // BEGIN: drupal services system connect (warning: don't use https if you don't have ssl setup)
    $.ajax({
      url: "https://www.tylerfrankenstein.com/my_services_path/system/connect.json",
        type: 'post',
        dataType: 'json',
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          alert('tf_page_login_submit - failed to login');
          console.log(JSON.stringify(XMLHttpRequest));
          console.log(JSON.stringify(textStatus));
          console.log(JSON.stringify(errorThrown));
        },
        success: function (data) {
          var tf_user = data.user;
          if (tf_user.uid == 0) { // user is not logged in, show the login button, hide the logout button
            $('#tf_login_button').show();
            $('#tf_logout_button').hide();
          }
          else { // user is logged in, hide the login button, show the logout button
            $('#tf_login_button').hide();
            $('#tf_logout_button').show();
          }
       }
    });
    // END: drupal services system connect
  }
  catch (error) { alert("tf_page_dashboard - " + error); }
});

$('#tf_logout_button').live("click",function(){
try {
  // BEGIN: drupal services user logout (warning: don't use https if you don't have ssl setup)
  $.ajax({
      url: "https://www.tylerfrankenstein.com/my_services_path/user/logout.json",
      type: 'post',
      dataType: 'json',
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert('tf_logout_button - failed to logout');
        console.log(JSON.stringify(XMLHttpRequest));
        console.log(JSON.stringify(textStatus));
        console.log(JSON.stringify(errorThrown));
      },
      success: function (data) {
        alert("You have been logged out.");
        document.location.href = "../index.html#tf_page_dashboard";
      }
  });
  // END: drupal services system connect
}
catch (error) { alert("tf_logout_button - " + error); }
return false;
});

assets/www/scripts/login.js

$('#tf_page_login').live('pageshow',function(){
  try {
    // do some stuff when the page is ready, if you want...
  }
  catch (error) { alert("tf_page_login - " + error); }
});

$('#tf_page_login_submit').live('click',function(){
  
  var name = $('#tf_page_login_name').val();
  if (!name) { alert('Please enter your user name.'); return false; }
  
  var pass = $('#tf_page_login_pass').val();
  if (!pass) { alert('Please enter your password.'); return false; }
  
  // BEGIN: drupal services user login (warning: don't use https if you don't have ssl setup)
  $.ajax({
      url: "https://www.tylerfrankenstein.com/my_services_path/user/login.json",
      type: 'post',
      data: 'username=' + name + '&password=' + pass,
      dataType: 'json',
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert('tf_page_login_submit - failed to login');
        console.log(JSON.stringify(XMLHttpRequest));
        console.log(JSON.stringify(textStatus));
        console.log(JSON.stringify(errorThrown));
      },
      success: function (data) {
        document.location.href="../index.html#tf_page_dashboard";
      }
  });
  // END: drupal services user login
  return false;
});

Comments

andorraclaim (not verified)

Sun, 11/20/2011 - 21:49

Search form

Error message

You are here

Drupal JSON Services Examples with PhoneGap and JQuery Mobile for Android

System Connect, User Login, User Logout

Comments

User login