Search jQuery

jQuery Forum

Baic login form Jquery mobile

in jQuery Mobile • 10 years ago

Hi there. Must say what an excellent tool jquery mobile is!

This is my first time using jquery and all i have ever done before is HTML and css pages. Basically for a prototype im developing i need to make sure only registered users can view any of the pages.

Problem is i have no idea what im doing at all.

What is the easiest method? Do i need to create a DB with some usernames and passwords? I do not want people to register. It does not need to be secure its just a prototype.

what is the best method to allow the user to login? and how do i make sure the pages are only visible if loged in.

Thank you very much

Replies(3)

nbsp

Re: Baic login form Jquery mobile

10 years ago

the "easiest" way would be

<?php

if( $_GET("username") == "root" && $_GET("passwd") == "toor"){

//set session

}else{

//not logged in

}

i recomend to learn some basic php and google about the session-thing

bernarddi..

Re: Baic login form Jquery mobile

9 years ago

Haha yea I'm in the same boat... please let me know if you found a good way to do this...

So far from what I can tell is the best way is to run a javascript function in the head of the page that would call to the server to run a php file on the server that would call to your database and authenticate if there is a match and return that result in a json and then redirect the user to the proper #ID.....

The reason to run a javascript for the connection is I have read that that is the best way to set up your mobile app to port to a native app via PhoneGap

Now this may seem simple enough but its very complicated if your new to web development...

I have not found the right code to make all this work...

I personally am trying to call to my WordPress database because it is easy to add users and it gives you some unique fields for them to hopefully help load unique content to that user...

Currently I am trying to run this javascript in the head of my index.html...(this is ment to call to the server and deliver the user/pass combo to the php file to be processed)

$(document).ready(function() {

$('#loginForm').submit(function() {

$('#output').html('Connecting....');

var postTo = 'http://what-ever-your-server-is-that-the-config.php-file-is-on';

$.post(postTo,{username: $('[name=user_name]').val() , password: $('[name=user_pass]').val()} ,

function(data) {

if(data.message) {

$('#output').html(data.message);

} else {

$('#output').html('Could not connect');

}

},'json');

return false;

});

</script>

(I don't see where you would enter where you want the user to be redirected to after login is successful)

This is the html that the javascript is supposed to be tied to (the actual UI: where the user would enter their name and pass)

<h1>User Login</h1>

</div>

<h3>title</h3>

<p>

<label for="username">Example:</label>

<label for="password">Password:</label>

<hr />

</fieldset>

</form>

</div>

<h4>footer</h4>

</div>

The idea is that the above html is what will be presented to the user and when the user fills out the fields that will run the javascript (top code) and that javascript will call the (var postTo = 'http://what-ever-your-server-is-that-the-config.php-file-is-on';) and that php file will contain some code to run a query on your database and return the result in json to allow the user to pass to the private area of the app...

Here is the php code that I have on the server

<?php

$host="http://yoruserver.com"; // Host name

$username="example"; // Mysql username

$password="example"; // Mysql password

$db_name="db_name"; // Database name

$tbl_name="users"; // Table name

// Connect to server and select databse.

mysql_connect("$host", "$username", "$password")or die("cannot connect");

mysql_select_db("$db_name")or die("cannot select DB");

// username and password sent

$user_name=$_POST['user_name'];

$user_pass=$_POST['user_pass'];

// To protect MySQL injection

$myusername = stripslashes($myusername);

$mypassword = stripslashes($mypassword);

$myusername = mysql_real_escape_string($myusername);

$mypassword = mysql_real_escape_string($mypassword);

if(isset($_POST['username']) and isset($_POST['password'])) {

// do logic for logining in (usually query your db)

if ($_POST['username'] == 'user_name' and $_POST['password'] == 'user_pass') {

$data['success'] = true;

$data['message'] = 'Login succesful';

} else {

$data['success'] = false;

$data['message'] = 'Login failed';

}

// return json

echo json_encode($data);

}

So this code delvers a json back to the script and the should pushes the user to the private area...

From what I understand about json is it just a wrapper for containing the data ( I don't really understand how the script makes sense of the data is.. ie.. if the users is authenticated or not..) And as for the redirect to the secure content I cant find where you would enter that #url to take the user to the secure area...

This approach obviously has holes but its a good start and a seasoned developer could probably very easy fill them in... Please please someone fill them in!!! Haha

The last concern would be how this will translate and work as a native app once PhoneGap dose its thing....

Thank you anyone for your help!!