пятница, 6 июля 2012 г.

Залогиниться на сервере с помощью PhoneGap


Недавно делал один проект в котором нужно было сделать логин на сервер с помощью данной платформы. Смотрим что получилось ниже. Статья на английском более раскрытая находится по ссылке.

Я начал с создания нового приложения PhoneGap в Eclipse, и включить JQuery Mobile. Главная страница будет включать в себя регистрационную форму и поле успешного входа. После нажатия на кнопку Login мы получим уведомление что залогинились удачно.



Вот так вот выглядит html разметка страницы:
<!DOCTYPE html>
<html>
 <head>
 <title>Synhronization</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

 
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">

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

 <div data-role="content">

 <p id="output"></p>
 <p>
 <form method="post" id="loginForm">
 Who: <input type="text" name="who"><br /><br />
 Pass: <input type="password" name="pass"><br />
 <input type="submit" value="Login">
 </form>
 </p>

 </div><!-- /content -->

 <div data-role="footer">
 <h4>Page Footer</h4>
 </div><!-- /header -->
</div><!-- /page -->
</body>
</body>
</html>


Дальше нам нужно сделать обработчик который будет считывать поля «who» и «pass», для этого мы вставляем вот такой код в тег сюда.

 <script>
      $(document).ready(function() {
         $('#loginForm').submit(function() {
         $('#output').html('Connecting....'); //сообщение о том что происходит подключение к серверу
         var postTo = "http://91.228.199.95/ksiywFac63f2hs/login.php"; //сайт на который мы хотим зайти
             $.post(postTo, { who: $('[name=who]').val(), pass: $('[name=pass]').val() }, //крадем параметры из полей who и pass
                 function(data) { //принимаем то что посылает нам сервер
                    if(data != "") {
                        alert(data); //выводим то что нам прислал сервер в ответ
                    } else {
                        alert("Could not connect to server");
                    }
                 });

             return false;
         });
    });
 </script>


И так у нас получилось то что мы посылаем методом post данные и сервер принимает вот такую строку: http://91.228.199.95/ksiywFac63f2hs/login.php?who=«test»&pass=«12345», в ответ если пароль и логин верные он отправит нам json строку которую нужно распарсить, но это уже в другой раз.

 Картинки взяты с - http://shareourideas.com/
на

2 комментария: