Modèles de page JQuery Mobile et Cordova

J'ai été chargé de créer une application mobile pour notre conseil scolaire de taille moyenne afin de promouvoir nos écoles. A l'origine, cela semblait assez simple - j'ai attrapé Cordova et Eclipse, jeté la bibliothèque jQuery Mobile et mis en place quelques pages pour ma première école (je pense 5 au total). Copiez/collez/modifiez le contenu/mettez à jour les liens pour les autres 17.Modèles de page JQuery Mobile et Cordova

Ensuite, mon patron a dit "Fais les pages dans les couleurs de chaque école". Encore une fois, facile-peasy. Une poignée de classes CSS plus tard, et toutes les centaines de pages étaient jolies et correspondaient aux écoles.

Puis vint la bombe. Toutes les données, jusqu'à présent, étaient des fichiers .htm locaux qui s'installaient à côté de l'application et qui étaient simplement chargés par l'application lorsque l'utilisateur les cliquait: Aucune connexion de données nécessaire. Ce matin, on m'a demandé si nous pouvions changer l'information à la volée sans une mise à jour de l'application. Moi, bêtement mais sincèrement, j'ai dit "Non" - et vous pouvez deviner quelle était la prochaine requête.

Donc, j'ai besoin d'un moyen d'accomplir cela. Mon processus de réflexion consiste maintenant à exécuter quelque chose qui reçoit un numéro d'identification (appdata.schoolbord.web/123) et qui retourne un objet JSON contenant les données - probablement un titre, le nom d'un modèle de page (de sorte que je peux réduire mes 93 pages à quelques-uns), certains CSS (juste pour arrêter la prochaine demande), puis les données à glisser dans le modèle.

Existe-t-il un moyen facile de faire cela en utilisant Cordova et jQuery Mobile? Les pointeurs dans n'importe quelle direction seraient géniaux. Merci.

Source

2013-02-04 Allen Sester

Quel type de technologie côté serveur utilisez-vous? – Gajotres

Le serveur est une pile LAMP standard sur Redhat. –

Voici un exemple simple. J'ai créé une page de connexion jQM, vous devez entrer votre nom d'utilisateur et votre mot de passe. Ces données seront utilisées pour vérifier si le nom d'utilisateur existe dans la base de données, s'il existe true est retourné, false dans les autres cas. Je vous conseille de créer une meilleure logique de lecture db, celle-ci est une solution simple, sujette à l'injection SQL, mais elle fonctionnera bien pour votre mission.

index.php:

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQM Complex Demo</title> 
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <style> 
     #login-button { 
      margin-top: 30px; 
     }   
    </style> 
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>  
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
    <script src="js/custom.js"></script> 
</head> 
<body> 
    <div data-role="page" id="login"> 
     <div data-theme="a" data-role="header"> 
      <h3>Login Page</h3> 
     </div> 

     <div data-role="content"> 
      <label for="username">Enter your username:</label> 
      <input type="text" value="" name="username" id="username"/> 
      <label for="password">Enter your password:</label> 
      <input type="password" value="" name="password" id="password"/> 
      <a data-role="button" id="login-button" data-theme="b">Login</a> 
     </div> 

     <div data-theme="a" data-role="footer" data-position="fixed"> 

     </div> 
    </div> 
    <div data-role="page" id="index"> 
     <div data-theme="a" data-role="header"> 
      <h3></h3> 
     </div> 

     <div data-role="content"> 
      Here goes content 
     </div> 

     <div data-theme="a" data-role="footer" data-position="fixed"> 
      <h3>Page footer</h3> 
     </div> 
    </div>  
</body> 
</html>

json.php:

<?php 
    $var1 = $_REQUEST['action']; // We dont need action for this tutorial, but in a complex code you need a way to determine ajax action nature 
    $jsonObject = json_decode($_REQUEST['outputJSON']); // Decode JSON object into readable PHP object 

    $username = $jsonObject->{'username'}; // Get username from object 
    $password = $jsonObject->{'password'}; // Get password from object 

    mysql_connect("localhost","root",""); // Conect to mysql, first parameter is location, second is mysql username and a third one is a mysql password 
    @mysql_select_db("test") or die("Unable to select database"); // Connect to database called test 

    $query = "SELECT * FROM users WHERE user_name = '".$username."' and user_pass = '".$password."'"; 
    $result=mysql_query($query); 
    $num = mysql_numrows($result); 

    if($num != 0) { 
     echo "true"; 
    } else { 
     echo "false";   
    } 
?>

custom.js:

$(document).on('pagebeforeshow', '#login', function(){ 
    $('#login-button').on('click', function(){ 
     if($('#username').val().length > 0 && $('#password').val().length > 0){ 
      userObject.username = $('#username').val(); // Put username into the object 
      userObject.password = $('#password').val(); // Put password into the object 
      // Convert an userObject to a JSON string representation 
      var outputJSON = JSON.stringify(userObject); 
      // Send data to server through ajax call 
      // action is functionality we want to call and outputJSON is our data 
      ajax.sendRequest({action : 'login', outputJSON : outputJSON}); 
     } else { 
      alert('Please fill all nececery fields'); 
     } 
    });  
}); 

$(document).on('pagebeforeshow', '#index', function(){ 
    if(userObject.username.length == 0){ // If username is not set (lets say after force page refresh) get us back to the login page 
     $.mobile.changePage("#login", { transition: "slide"}); // In case result is true change page to Index 
    } 
    $(this).find('[data-role="header"] h3').append('Wellcome ' + userObject.username); // Change header with wellcome msg 
    //$("#index").trigger('pagecreate'); 
}); 

// This will be an ajax function set 
var ajax = { 
    sendRequest:function(save_data){ 
     $.ajax({url: 'http://localhost/JSONP_Tutorial/json.php', 
      data: save_data, 
      async: true, 
      beforeSend: function() { 
       // This callback function will trigger before data is sent 
       $.mobile.showPageLoadingMsg(true); // This will show ajax spinner 
      }, 
      complete: function() { 
       // This callback function will trigger on data sent/received complete 
       $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner 
      }, 
      success: function (result) { 
       if(result == "true") { 
        $.mobile.changePage("#index", { transition: "slide"}); // In case result is true change page to Index 
       } else { 
        alert('Login unsuccessful, please try again!'); // In case result is false throw an error 
       } 
       // This callback function will trigger on successful action 
      }, 
      error: function (request,error) { 
       // This callback function will trigger on unsuccessful action     
       alert('Network error has occurred please try again!'); 
      } 
     }); 
    } 
} 

// We will use this object to store username and password before we serialize it and send to server. This part can be done in numerous ways but I like this approach because it is simple 
var userObject = { 
    username : "", 
    password : "" 
}

Si vous voulez, contactez m e sur mon email (vous pouvez le trouver dans un profil de ma) et je vais vous envoyer un projet avec le code source et le script SQL utilisé.

Source

2013-02-04 16:26:13 Gajotres

Ce n'est pas vraiment ce que j'allais faire - je peux atteindre un serveur et récupérer des données sans problème ... J'ai plus de problèmes à essayer de faire du template sur le côté client. –

Modèles de page JQuery Mobile et Cordova

Répondre

Questions connexes