将登录页面从jquery更改为php-mysql

Question

I have made some page for show all data from DB. And also, I can edit the data from this page. Berofe do some editing, some JQuery Dialog will appear and then ask our user or password.

I have made some simple login use Jquery, like:

$("#enter").click(function(){
             if($('#user').val() == "admin" || $('#pass').val() == "qaubuntu") {
                            $("#dialog").dialog('close');
                            $("#segment").show();
                            }
             if($('#user').val() == "user" || $('#pass').val() == "user") {
                            $("#dialog").dialog('close');
                            $("#content").show();
                            }
             });

But, this only for one user. I need to add 5 user again for different page access. how should I do to change this login into php and mysql? I'm not really understand how to login for different access page for each user.

thanks for advance.

---

ex:
user = admin ---> just can access #segment
user = user and foo  --> can access #content

Answer 1

You culd use jQuery, Php, and mysql.

NOTE: Not tested but it will get you started

Well first off i wuld start by building a usertable in your DB, Lets say you have the following fields:

"Username" "password" "privilage" <-( set to INT where 1="admin" 2="user")

Then you shuld create the login form (lets say tou have the inputs id="username" and id="password") and a button "login" with id="login".

Now some jQuery:

$(document).ready(function(){
   $('#login').click(function(){ // Grab button "login" on click event
      var usr  = $("#username").val(); // Grab field value from input "username"
      var pas = $("#password").val(); // Grab field value from input "password"

      var dataString = "usr="+usr+"&pas="+pas; 

       //Now send your data to a backend file (Php) using $.ajax

         $.ajax({
             type:'POST', 
             data: dataString, 
             url:'backendfile.php', /// loaction and backend filename
             success: function(data){  //  Callback
                // DO STUFF LATER SEE jquery Callback below
             }
         });

   });
});

And for backend.php

//Create your DB connection first

// grab POST    
    $usr = $_POST['usr'];
    $pas = $_POST['pas'];

 //Sql call

    $sql = "SELECT privilage FROM tabel_name WHERE username='".$usr."' AND password='".$pas."'";

   if(myslq_query($sql)){
      $priv = mysql_fetch_assoc($sql);

       /*  will return 1 or 2 depending on the privilage set in you DB where 1 is admin and 2 is user */
       echo $priv['privilage'];  

   }else{
      echo 0; // If login fails
   }

Now go back to jQuery: (handle Callback)

In the success section of your previous ajax call.

 success: function(data){  //  Callback
      switch(data){
        case 1:
             // Do stuff if privilage is 1 (admin)
                    $("#dialog").dialog('close');
                    $("#segment").show();
        break;

        case 2:
             // do stuff if result is 2 (user)
              $("#dialog").dialog('close');
              $("#content").show();
        break;

        default:
            alert('wrong username or password');
        break;
      }
   }

There you go! Its not tested, so you may confront some problems but, hey it il get you started.

Tip! encrypt the password