Hướng dẫn Cách tạo Form đa chức năng với Jquery AJAX + PHP & MYSQL

2,277 0 0
PVS

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,829
Được Like
12,687
Cách tạo Form đa chức năng với Jquery AJAX + PHP & MYSQL

Khi các bạn lướt qua các trang web trên mạng có một số trang khi đăng ký một tài khoản người ta thiết kế một Form để mình vừa đăng ký tài khoản, vừa đăng nhập, quên mật khẩu để bạn có thể thực hiện những công việc này một cách nhanh chóng và bây giờ mình sẽ hướng dẫn các bạn cách tạo một Form đa chức năng với Jquery AJAX + PHP & MYSQL.

Trước khi bắt đầu các bạn nên xem lại các bài cơ bản vì đây là bài viết nâng cao nên các bạn cũng cần phải có một chút kiến thức về PHP & MYSQL.

Hình ảnh, database, demo được đính kèm tronng file download.

Bước 1 – SETUP HTML
Mã: 
<?php session_start(); ?>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Jquery AJAX Supper Form</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/style.css" media="all">
    <script type="text/javascript" src="js/jquery.1.7.2.min.js"></script>
    <script type="text/javascript" src="js/AJAX.js"></script>
</head>
<body>
    <div id="wrapper">
        <div id="container">
            <div class="title">Jquery AJAX Supper Form</div>
                <div id="signup">
                <div class="loader"></div>
                <div class="success">Successfully !!!</div>
                <div class="error">Error !!! Please try.</div>
                <form action="" method="POST" id="form_signup">
                    <p>
                        <label for="name">Username</label>
                        <input type="text" name="name" placeholder="Please insert your Name" id="name">
                        <div class="warning nameError">Vui lòng nhập Username</div>
                    </p>
 
                    <p>
                        <label for="password">Password</label>
                        <input type="password" name="password" placeholder="Please insert your Password" id="password">
                        <div class="warning passwordError">Vui lòng nhập Password</div>
                    </p>
 
                    <p>
                        <label for="email">Email</label>
                        <input type="email" name="email" placeholder="Please insert your Email" id="email">
                        <div class="warning emailError">Email không hợp lệ</div>
                    </p>
 
                    <p>
                        <label for="captcha">Security Code</label>
                        <input type="text" name="captcha" placeholder="Please insert Captcha" id="captcha">
                        <div class="warning captchaError">Vui lòng nhập Captcha</div>
                    </p>
 
                    <p>
                        <img src="captcha.php" id="img_captcha">
                        <img src="images/load.png" id="load_captcha">
                    </p>
 
                    <p>
                        <input type="submit" id="signup_form" value="Signup">
                    </p>
                </form>
            </div><!-- End #signup -->
 
 
            <div id="login">
                <div class="loader"></div>
                <form action="" method="POST" id="form_login">
                    <p>
                        <label for="name">Username</label>
                        <input type="text" name="name" placeholder="Please insert your Name" id="user-name">
                        <div class="warning nameError">Vui lòng nhập Username</div>
                    </p>
 
                    <p>
                        <label for="password">Password</label>
                        <input type="password" name="password" placeholder="Please insert your Password" id="user-password">
                        <div class="warning passwordError">Vui lòng nhập Password</div>
                    </p>
 
                    <p>
                        <input type="submit" id="login_form" value="Login">
                    </p>
 
                    <p>
                        <label for="forgot" id="getpass">I forgot your password</label>
                    </p>
                </form>
            </div><!-- End #login -->
 
 
            <div id="mail">
                <div class="loader"></div>
                <form action="" method="POST" id="get_pass_form">
                    <p>
                        <label for="name">Username</label>
                        <input type="text" name="name" placeholder="Please insert your Name" id="get-name">
                        <div class="warning nameError">Vui lòng nhập Username</div>
                    </p>
 
                    <p>
                        <label for="password">Email</label>
                        <input type="email" name="email" placeholder="Please insert your Email" id="get-email">
                        <div class="warning emailError">Email không hợp lệ</div>
                    </p>
 
                    <p>
                        <input type="submit" id="get_pass" value="Submit">
                    </p>
                </form>
            </div><!-- End #mail -->
 
            
        </div><!-- End #container -->
    </div><!-- End #wrapper -->
</body>
</html>

Bước 2 – CSS
Mã: 
*{margin: 0; padding: 0; }
 
@font-face {
    font-family: 'UTM Avo';
    src:url('../font/UTM-Avo.ttf') format('truetype')
}
 
@font-face {
    font-family: 'UTM DaxMedium';
    src:url('../font/UTM-DaxMedium.ttf') format('truetype')
}
 
@font-face {
    font-family: 'Lobster';
    src:url('../font/Lobster.otf') format('truetype')
}
 
body {
    font-size: 62.5%;
    font-family: Arial, Helvetica, sans-serif;
}
 
a {
    text-decoration: none;
}
 
ol, ul {
    list-style: none;
}
 
#wrapper {
    width: 1000px;
    margin: 0 auto;
}
 
#container {
    width: 540px;
    margin-left: 200px;
    margin-top: 50px;
    border: 1px solid #d4d4d4;
    border-top: none;
    background: -moz-linear-gradient(top,#fff,#ebebeb);
    background: -webkit-linear-gradient(top,#fff,#ebebeb);
    background: -o-linear-gradient(top,#fff,#ebebeb);
    background: -ms-linear-gradient(top,#fff,#ebebeb);
    position: relative;
    overflow: hidden;
    padding-bottom: 20px;
}
 
#container .title {
    width: 100%;
    background: -moz-linear-gradient(top,#FbC3A4,#E65100);
    background: -webkit-linear-gradient(top,#FbC3A4,#E65100);
    background: -o-linear-gradient(top,#FbC3A4,#E65100);
    background: -ms-linear-gradient(top,#FbC3A4,#E65100);
    font-size: 2.0em;
    color: #fff;
    font-family: DaxMedium;
    padding: 5px 0px;
    text-align: center;
    text-transform: uppercase;
    border-top: 1px solid #E65100;
}
 
#signup {
    position: relative;
}
 
#signup .loader {
    position: absolute;
    top: 297px;
    left: 130px;
}
 
#signup .success {
    border: 1px solid green;
    padding: 5px;
    width: 202px;
    color: green;
    font-size: 1.4em;
    margin-left: 170px;
    margin-bottom: 5px;
    margin-top: 5px;
    display: none;
}
 
#signup .error {
    border: 1px solid red;
    padding: 5px;
    width: 202px;
    color: red;
    font-size: 1.4em;
    margin-left: 170px;
    margin-top: 5px;
    display: none;
}
 
#login .loader {
    position: absolute;
    top: 175px;
    right: 110px;
}
 
#mail .loader {
    position: absolute;
    top: 355px;
    right: 110px;
}
 
#signup form {
    float: left;
    margin-top: 20px;
    margin-left: 20px;
    border-right: 1px solid #777;
    width: 250px;
}
 
#signup form div.warning {
    border: 1px solid red;
    padding: 5px;
    width: 202px;
    color: red;
    font-size: 1.4em;
    display: none;
}
 
#signup form p {
    padding-bottom: 5px;
}
 
#signup form label {
    display: block;
    padding-bottom: 5px;
    font-size: 1.4em;
    color: #999;
}
 
#signup form input {
    width: 200px;
    height: 25px;
    font-family: UTM Avo;
    padding: 0px 5px;
}
 
#signup form input[type="submit"] {
    width: 100px;
    height: 30px;
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    padding-bottom: 5px;
    font-size: 1.4em;
    text-align: center;
    text-shadow: 0 1px 0 #396715;
}
 
#signup form input[type="submit"]:hover {
    opacity:.85;
    cursor: pointer;
}
#signup form input[type="submit"]:active {
    border: 1px solid #20911e;
    box-shadow: 0 0 10px 5px #356b0b inset;
    -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
    -moz-box-shadow: 0 0 10px 5px #356b0b inset;
    -ms-box-shadow: 0 0 10px 5px #356b0b inset;
    -o-box-shadow: 0 0 10px 5px #356b0b inset;
}
 
#signup form img#load_captcha {
    background: #fff;
    padding: 3px; 
    margin-left: 5px;
    cursor: pointer;
}
 
#login form {
    float: right;
    margin-top: 20px;
    margin-right: 30px;
}
 
#login form div.warning {
    border: 1px solid red;
    padding: 5px;
    width: 202px;
    color: red;
    font-size: 1.4em;
    display: none;
}
 
#login form p {
    padding-bottom: 5px;
}
 
#login form label {
    display: block;
    padding-bottom: 5px;
    font-size: 1.4em;
    color: #999;
}
 
#login form input {
    width: 200px;
    height: 25px;
    font-family: UTM Avo;
    padding: 0px 5px;
}
 
#login form input[type="submit"] {
    width: 100px;
    height: 30px;
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    padding-bottom: 5px;
    font-size: 1.4em;
    text-align: center;
    text-shadow: 0 1px 0 #396715;
}
 
#login form input[type="submit"]:hover {
    opacity:.85;
    cursor: pointer;
}
#login form input[type="submit"]:active {
    border: 1px solid #20911e;
    box-shadow: 0 0 10px 5px #356b0b inset;
    -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
    -moz-box-shadow: 0 0 10px 5px #356b0b inset;
    -ms-box-shadow: 0 0 10px 5px #356b0b inset;
    -o-box-shadow: 0 0 10px 5px #356b0b inset;
}
 
#login form label[for="forgot"] {
    padding-top: 5px;
    font-size: 1.4em;
    color: blue;
    cursor: pointer;
}
 
 
#mail form {
    float: right;
    margin-right: 30px;
    display: none;
}
 
#mail form div.warning {
    border: 1px solid red;
    padding: 5px;
    width: 202px;
    color: red;
    font-size: 1.4em;
    display: none;
    
}
 
#mail form p {
    padding-bottom: 5px;
}
 
#mail form label {
    display: block;
    padding-bottom: 5px;
    font-size: 1.4em;
    color: #999;
}
 
#mail form input {
    width: 200px;
    height: 25px;
    font-family: UTM Avo;
    padding: 0px 5px;
}
 
#mail form input[type="submit"] {
    width: 100px;
    height: 30px;
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    padding-bottom: 5px;
    font-size: 1.4em;
    text-align: center;
    text-shadow: 0 1px 0 #396715;
}
 
#mail form input[type="submit"]:hover {
    opacity:.85;
    cursor: pointer;
}
#mail form input[type="submit"]:active {
    border: 1px solid #20911e;
    box-shadow: 0 0 10px 5px #356b0b inset;
    -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
    -moz-box-shadow: 0 0 10px 5px #356b0b inset;
    -ms-box-shadow: 0 0 10px 5px #356b0b inset;
    -o-box-shadow: 0 0 10px 5px #356b0b inset;
    
}

Bước 3 – SIGNUP FORM + JQUERY AJAX
Mã: 
session_start();
 
    if($_SESSION['security_code'] == $_POST['captcha']) {
 
    $db = mysqli_connect("localhost","root","","ajax_form");
        $username = mysqli_real_escape_string($db,$_POST['name']);
        $password = mysqli_real_escape_string($db,$_POST['password']);
        $hash_pass = sha1($password);
        $email = $_POST['email'];
 
        $query = "INSERT INTO signup(user_name,password,email) VALUES ('".$username."','".$hash_pass."','".$email."')";
        $result = mysqli_query($db,$query);
        echo "true";
    } else {
        echo "false";
    }

Mình giải thích một chút trong này nhé, Form đăng ký lúc nào cũng có Captcha thì việc đầu tiên mình sẽ kiểm tra xem người dùng đã nhập đúng Captcha hay chưa, nếu đúng thì mình thực hiện nhiệm vụ của Form và ngược lại thì trả về kết quả là “false”.

Các bạn chú ý là ở bài này mình sẽ hướng dẫn các bạn dùng Jquery AJAX để xử lý Form thì luôn luôn có kết quả trả về để khi Form được success thì mình gọi hàm truy hồi để so sánh chuỗi trả về. Nếu đúng thì mình thực hiện lấy các giá trị của Form, password của mình lưu trong CSDL là một chuỗi được mã hóa 40 ký tự với hàm sha1 nên mình sẽ mã hóa nó trước khi lưu vào CSDL. Sau đó mình insert vào CSDL và trả về kết quả là “true” thôi.

Do bài này mình sử dụng Jquery AJAX để xử lý nhiều Form nên mình sẽ viết một hàm là ajax_loader để khi mình cần sử dụng thì mình gọi nó ra.
Mã: 
function ajax_loader(type,url,data_form) {
    $.ajax({
    type: type,
    url: url,
    data: data_form,
    success: function(data_success) {
        if(data_success == "true") {
            $('.loader').fadeOut('fast');
            $(".success").slideDown('slow').delay(3000).slideUp('slow');
            clear_form();
            change_captcha();
        } else {
            $('.loader').fadeOut('fast');
            $(".error").slideDown('slow').delay(3000).slideUp('slow');
        }
    }
    });
}

  • Hàm này của mình sẽ truyền vào cho nó 3 tham số :
  • Type => Phương thức truyền dữ liệu
  • Url => Đường dẫn tới file xử lý dữ liệu
  • Data_form => Dữ liệu của Form
Tiếp theo mình sẽ xử lý Form đăng ký như sau:
Mã: 
$(document).ready(function() {   
    $("#signup_form").click(function() {
    var name = $("#name").val();
    var password = $("#password").val();
    var email = $("#email").val();
    var email_regex = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
    var captcha = $("#captcha").val();
    var data_signup = 'name=' + name + '&password=' + password + '&email=' + email + '&captcha=' + captcha;
    var type = "POST";
    var url = "signup.php";
    var form = "#form_signup";
});

Khi Form được click thì mình thực hiện lấy các giá trị của Form thông qua id của input và lưu vào một biến là data_signup, chuỗi trong biến data_signup là thuộc tính name của input nhé.

Sau đó mình sẽ khai báo 3 biến tiếp theo là type, url, form. Form này mình sử dụng phương thức là POST thì gán giá trị là POST, file xử lý dữ liệu của mình là signup.php, còn biến form mình khai báo thêm để khi mình select trong Jquery gọn hơn. Các tham số này các bạn cũng không cần khai báo và viết vào luôn cũng được nhưng mình khai báo biến ra để các bạn thấy rõ hơn.

Tiếp theo mình sẽ kiểm tra dữ liệu được nhập vào.
Mã: 
if(name == "") {
    $(form + " > .nameError").slideDown('slow').delay(2000).slideUp('slow');
    $("#name").focus();
    return false;
}
if(password == "") {
    $(form + " > .passwordError").slideDown('slow').delay(2000).slideUp('slow');
    $("#password").focus();
    return false;
}
if(!email_regex.test(email)) {
    $(form + " > .emailError").slideDown('slow').delay(2000).slideUp('slow');
    $("#email").focus();
    return false;
}
if(captcha == "") {
    $(form + " > .captchaError").slideDown('slow').delay(2000).slideUp('slow');
    $("#captcha").focus();
    return false;
}

Trong bài này mình sử dụng class Error chung cho tất cả các Form nên mình khai báo thêm một biến form để select đúng Form của mình đang được submit, nếu không khi mình submit Form này thì lỗi của các Form khác cũng được show ra. Nhắc lại một chút là nối chuỗi trong Jquery là “ + “ và dấu “ > “ tức là thuộc con của thành phần đứng trước. Vậy Form mình đang submit có id là #signup_form thì mình sẽ select lỗi của Form này và hiển thị ra ngoài.

Tiếp theo mình sẽ gọi hàm ajax_loader mà mình đã viết ở trên ra để xử lý Form
Mã: 
$("#signup > .loader").html("<img src='images/loader.gif'/>").fadeIn('fast');
    ajax_loader(type,url,data_signup);
return false;

Hình ảnh loading của mình cũng phải select cho đúng Form của nó nhé, tham số mình truyền vào hàm này thì mình đã khai báo 3 biến ở trên và bây giờ mình truyền 3 biến này vào cho hàm và return false là xong ^^.

Một điều nữa là nếu các bạn muốn test hoàn chỉnh bài này thì khi đăng ký Form các bạn vui lòng điền Email có thật để phần tiếp theo mình phục hồi mật khẩu nó sẽ gửi mật khẩu về đúng Email của bạn nhé.

Bước 4 – LOGIN FORM + JQUERY AJAX
Mã: 
session_start();
    $db = mysqli_connect("localhost","root","","ajax_form");
    $username = mysqli_real_escape_string($db,$_POST['name']);
    $password = mysqli_real_escape_string($db,$_POST['password']);
    $hash_pass = sha1($password);
 
    $query = "SELECT user_name,password FROM signup WHERE user_name='".$username."'";
    $result = mysqli_query($db,$query);
    $row = mysqli_fetch_array($result);
 
    if(mysqli_num_rows($result) > 0) {
        if(strcmp($row['password'],$hash_pass)==0) {
            echo "true";
            $_SESSION['user_name'] = $username;
        } else {
            echo "false";
        }
    } else {
        echo "false";
    }

Đầu tiên mình kết nối CSDL, lấy giá trị của Form và dùng hàm sha1 để mã hóa password, sau đó mình sẽ SELECT username, password với điều kiện là username đang login vào.

Tiếp theo mình sẽ kiểm tra xem, password họ nhập vào có đúng với password lưu trong CSDL hay không, mình dùng hàm strcmp để so sánh 2 chuỗi này nếu nó == 0 có nghĩa là 2 cái này giống nhau thì mình trả về kết quả là “true” và lưu username này vào SESSION và ngược lại thì trả về kết quả là “false”.

Lưu ý là khi mình so sánh password phải so sánh với cái password mình đã mã hóa nhé, đừng so sánh với password mà họ nhập vào thì sẽ không đúng đâu vì password mình lưu trong CSDL đã được mã hóa nhé.

Tiếp theo mình sẽ sử dụng AJAX để xử lý Form như sau :
Mã: 
$("#login_form").click(function() {
    var name = $("#user-name").val();
    var password = $("#user-password").val();
    var data_login = 'name=' + name + '&password=' + password;
    var form = "#form_login";
if(name == "") {
    $(form + " > .nameError").slideDown('slow').delay(2000).slideUp('slow');
    $("#user-name").focus();
    return false;
}
if(password == "") {
    $(form + " > .passwordError").slideDown('slow').delay(2000).slideUp('slow');
    $("#user-password").focus();
    return false;
}
$("#login > .loader").html("<img src='images/loader.gif'/>").fadeIn('fast');
$.ajax({
    type: "POST",
    url: "login.php",
    data: data_login,
    success: function(data_success) {
        if(data_success == "true") {
            $('.loader').fadeOut('fast');
            document.location='page.php';
        } else {
            $('.loader').fadeOut('fast');
            $(".error").slideDown('slow').delay(3000).slideUp('slow');
        }
    }
});
    return false;
});

Khi Form được click thì mình thực hiện lấy giá trị của Form và lưu nó vào biến data_login sau đó kiểm tra lỗi và gọi AJAX để thực hiện xử lý Form. Các bạn thấy ở đây mình không gọi lại hàm ajax_loader mà phải viết lại AJAX vì trong đoạn xử lý của mình sẽ khác đi một chút đó là khi thực hiện thành công thì mình sẽ chuyển nó sang một trang mới mà cấu trúc trong hàm ajax_loader của mình là khác nên mình không thể sử dụng lại nó được.
Mã: 
document.location='page.php';  // gọi trang này khi AJAX xử lý trả về kết quả là “true”

Trang page.php của mình chỉ đơn giản vậy thôi, mình chỉ cần kiểm tra xem nếu không có SESSION thì mình trỏ nó về lại file index.php.
Mã: 
session_start();
if(empty($_SESSION['user_name'])) {
    header("Location: index.php");
}
if(isset($_GET['logout'])){
    session_destroy();
    header("Location:index.php");
}
echo "<a href='page.php?logout'><b>Logout</b></a>";
echo "<div align='center'>Login successfully</div>";

Nếu người dùng thực hiện logout thì mình hủy SESSION và trỏ về index.php, ở dưới mình echo thẻ a ra và truyền cho nó tham số logout để khi họ logout thì mình sẽ GET được tham số này và hủy SESSION và cuối cùng mình xuất ra thông báo thôi.

Bước 5 – FORGOT PASSWORD + JQUERY AJAX
Mã: 
$user_name = $_POST['name'];
        $email = $_POST['email'];
        $password = sha1($user_name);
        $db = mysqli_connect("localhost","root","","ajax_form");
 
        $querys = "SELECT user_name, email FROM signup WHERE user_name='".$user_name."'";
        $results = mysqli_query($db,$querys);
        $row = mysqli_fetch_array($results);
 
        if(mysqli_num_rows($results) > 0) {
            if(strcmp($row['email'],$email)==0) {
                $query = "UPDATE signup
                          SET password='".$password."'
                          WHERE user_name='".$user_name."'";
                $result = mysqli_query($db,$query);
 
                $to = $_POST['email'];
                $header = "Jquery AJAX Supper Form + PHP & MYSQL";
                $subject = "New Password";
 
                $body = "Ngày: ". date('d/m/Y')."\n";
                $body .= "Username: ".$user_name . " - Email:" . $email . "\n";
                $body .= "Your password: ".$user_name;
                $headers = "From: $header \n";
 
                mail($to, $subject, $body, $headers);
                echo "true";
            } else {
                echo "false";
            }
        } else {
            echo "false";
        }

Đầu tiên mình sẽ lấy giá trị của Form sau đó kết nối CSDL và SELECT username, email với điều kiện là username đang thực hiện phục hồi password.

Tiếp theo mình sẽ thực hiện so sánh chuỗi Email từ người dùng nhập vào và Email lưu trong CSDL với hàm strcmp xem có giống nhau không, nếu đúng thì mình thực hiện nhiệm vụ của Form là khôi phục mật khẩu cho họ rồi trả về kết quả là “true” và ngược lại thì trả về kết quả là “false”.

Nếu đúng username và email đó thực hiện lấy lại mật khẩu thì mình thực hiện câu lệnh truy vấn SQL để UPDATE mật khẩu mới cho họ với điều kiện là chính username đang thực hiện phục hồi password, mình sẽ lấy chính tên username đó làm mật khẩu cho họ để họ khỏi bị quên ^^.

Lưu ý là mật khẩu này mình lưu vào CSDL thì phải mã hóa nó với hàm sha1 nhé, ở trên mình đã mã hóa biến $username và lưu nó vào biến $password rồi nhé. Và mình UPDATE password cho họ chính là biến $password mình đã mã hóa nhé, sau đó mình sẽ thực hiện gửi một Email có nội dung là mật khẩu của họ kiểm tra và đăng nhập trở lại thì password của mình gửi đến Email cho họ sẽ là password chưa được mã hóa và khi họ thực hiện đăng nhập vào thì nó sẽ tự động mã hóa và so sánh với CSDL của mình. Sau đó mình thực hiện hàm mail và trả về kết quả là “true”.

Tiếp theo mình sẽ sử dụng AJAX để xử lý Form như sau :
Mã: 
$("#get_pass").click(function() {
    var name = $("#get-name").val();
    var email = $("#get-email").val();
    var email_regex = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
    var data_get_pass = 'name=' + name + '&email=' + email;
    var type = "POST";
    var url = "get_pass.php";
    var form = "#get_pass_form";
if(name == "") {
    $(form + " > .nameError").slideDown('slow').delay(2000).slideUp('slow');
    $("#get-name").focus();
    return false;
}
if(!email_regex.test(email)) {
    $(form + " > .emailError").slideDown('slow').delay(2000).slideUp('slow');
    $("#get-email").focus();
    return false;
}
$("#mail  > .loader").html("<img src='images/loader.gif'/>").fadeIn('fast');
ajax_loader(type,url,data_get_pass);
return false;
});
$("#getpass").click(function() {
    $("#mail  > form").slideToggle('normal');
});

Khi Form được click thì sẽ thực hiện lấy giá trị của Form và lưu vào biến data_get_pass, sau đó khai báo thêm 2 biến nữa để truyền vào cho hàm ajax_loader và thêm biến form nữa để mình select jquery cho chính xác ^^.

Tiếp theo mình kiểm tra lỗi của Form, nếu có lỗi mình sẽ show nó ra, sau đó mình sẽ gọi hàm ajax_loader để xử lý Form này. Mình nói thêm 1 chút nữa là ở cái Form Login mình có cái label để click hiển thị ra cái Form Forgot password nó có id là #get_pass thì mình thêm một chút Jquery cho nó cho đẹp ^^. Khi nó được click thì nó sẽ kéo lên kéo xuống cái Form khi mình sử dụng Event slideToggle.

Chúc các bạn thành công.


Nguồn: izwebz.com​
 

Đính kèm

  • supper-form.rar
    421.1 KB · Lượt xem: 15
Bài viết liên quan
Giúp mình bài code này với huhu bởi Traidau04,
Tìm hiểu về Javascript từ cơ bản đến nâng cao bởi anhngan21,
Hỏi về cách lấy id trong jquery bởi logitech,
Xây dựng một DropDown menu với jQuery bởi PVS,
Cách tạo ra các hiệu ứng chuyển động phần tử DOM HTML trong jQuery bởi PVS,
Cách dùng jQuery để ẩn hiện phần tử HTML DOM có kèm hiệu ứng bởi PVS,
Bài viết mới
Js lúc hoạt động lúc không web xổ số bởi wdasd,
Giúp mình bài code này với huhu bởi Traidau04,
Sử dụng Console của Chrome hoặc Firefox bởi 70211119,
Tìm hiểu về Javascript từ cơ bản đến nâng cao bởi anhngan21,
Xin trợ giúp main.js bởi rubicstudio,
Nhờ code thêm tìm sản phẩm cho Input "Search" và thêm nút Share cho từng sản phẩm. bởi Hoa Lan Vang,
Bạn phải đăng nhập hoặc đăng ký để bình luận.
Người đăng Chủ đề tương tự Diễn đàn Trả lời Ngày đăng
PVS Cách tạo ra các hiệu ứng chuyển động phần tử DOM HTML trong jQuery JavaScript/jQuery 0
PVS Cách dùng JavaScript tạo các ảnh trượt Image Slider đơn giản JavaScript/jQuery 0
PVS Cách tạo ra các đối tượng chuyển động bằng JavaScript JavaScript/jQuery 0
PVS Hướng dẫn Tìm hiểu và cách tạo Tooltip bằng jQuery JavaScript/jQuery 0
PVS Hướng dẫn Cách tạo hiệu ứng Dialog Box đơn giản với jQuery JavaScript/jQuery 0

Chủ đề tương tự


Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Xử lý sự cố (Troubleshooting)

Texlink

Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom