Check Mail Final

Check Email ไม่ให้ซ้ำก่อน Submit Form

Check Email สำหรับการเข้าเป็น user ภายในระบบ นับว่าเป็นเรื่องจำเป็น เพราะส่วนใหญ่แล้ว 1 คนจะใช้เพียง 1 Email ในการเข้าใช้ระบบต่างๆ งั้นเรามาดูวิธีการ สร้างระบบสมัครสมาชิก แบบไม่ให้ Email ซ้ำกันครับ

Check Email ก่อนส่ง Form

เป็นเรื่องที่สามารถ นำไปประยุกต์ใช้งานได้ หลากหลาย เพราะจริงๆแล้ว การทำงานสว่นนี้ ผมจะหยิบเอา พื้นฐานของการใช้ Ajax Post กับ PHP มาใช้งานนั้นเอง ทีนี้มาลองดู เงื่อนไข หรือแนวคิดกันก่อนนะครับ ว่าเราจะเช็คอย่างไร ก่อนการส่ง Submit Form หมายความว่า ถ้าเราเข้าสู่หน้าที่มี form สมัครสมาชิกให้กรอก เราจำเป็นจะต้อง เช็ค Email ในหน้านี้เลย ทันทีที่มีการกรอกเสร็จ ว่าเจ้าเมล์ที่ผู้ใช้ กรอกเข้ามาใหม่อันนี้ มันมีอยู่ในระบบของเราแล้วรึยัง

ดังนั้นวิธีการก็ เราจะให้ผู้ใช้ กรอกข้อมูลในส่วนต่างๆ และพอมาถึงช่อง Email เมื่อกรอกเสร็จ เราจะทำการส่ง Ajax เข้าไปหาดูว่า ในระบบของเรา มีการใช้งาน Email นี้ไปรึยัง ถ้ามีให้ทำการแจ้งเตือนว่า email นี้ถูกใช้งานไปแล้ว ไม่สามารถใช้งานได้อีก

ทีนี้เรามาสร้าง Form สำหรับสมัครสมาชิก เพื่อใช้งานเป็นตัวอย่างกันดูครับ

เริ่มต้นด้วยโครงสร้างของ HTML กันก่อนนะครับ และ Save เป็นไฟล์ชื่อ index.php


<html>
<head>
    <title>Post Ajax</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../bootstrap/js/jquery-1.11.1.min.js"></script>
</head>
<body>

</body>
</html>

จากนั้นก็มาตบด้วย แบบ Form ง่ายๆ มาทำไว้ 3 ช่องคือ username, email, password


<div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-6">
      <!-- Post With Text Input -->
        <form action="get.php">
         <div class="panel panel-default">
           <div class="panel-heading">Post AJAX</div>
             <div class="panel-body">
               <div class="form-group">
                 <label for="username">Username</label>
                 <input type="text" class="form-control" id="username" name="username" value="">
               </div>
               <div class="form-group">
                 <label for="email">Email address</label>
                 <input type="email" class="form-control" id="email" name="email" value="">
                 <span class='glyphicon form-control-feedback' aria-hidden='true'></span>
               </div>
               <div class="form-group">
                 <label for="password">Password</label>
                 <input type="password" class="form-control" id="password" name="password" value="">
               </div>
               <button type="submit" class="btn btn-default">Submit</button>
            </div>
          </div>
        </form>
      </div><!--/ .col-md-6 -->
      <div class="col-md-3"></div>
</div><!--/ .row -->

Form

Form

ตอนนี้เราได้ Form แล้ว ทีนี้เราจะมาตรวจสอบตัว Email กัน ผมเลยใส่


<span class='glyphicon form-control-feedback' aria-hidden='true'></span>

เข้าไปในตำแหน่งของ Email เพื่อให้เตรียมแสดงกรอบสีแจ้งเตือน หากข้อมูลไม่ถูกต้อง หรือถูกต้อง โดยส่วนนี้เป็นความสามารถของทาง bootstrap เค้าเตรียมไว้ให้ ในสว่นของ form validate ทีนี้ เราจะทำการส่งค่านี้ ออกไปอย่างไร ในเมื่อเรายังไม่ได้ทำการ submit กรณีแบบนี้ อันที่จริงเราเรียกมันว่า

Event

ใช่ครับ มันคือการดักจับ Event ของทาง Javascript นั้นเอง ซึ่งตรงนี้จจริงๆมีให้เลือกใช้งานเยอะเลย หลากหลายรูปแบบ ทั้ง keyup, keypress, focus หรืออื่นๆอีกเพียบ อันนี้ไปดูได้ในส่วนของ jquery event เพิ่มเติมนะครับ แต่ที่เราจะใช้คือ เมื่อกรอกข้อมูลจบ ค่อยทำการส่งค่า ดังนั้น event ที่ง่าย และเหมาะสมก็เลยใช้เป็น change ธรรมดานี่แหละครับ คือ ถ้ามีการกรอกข้อมูลอะไร ที่ทำให้ value เปลี่ยนไปจากเดิม ให้ทำการ trigger ได้เลย

ทีนี้เราก็ต้องมาสร้าง ส่วนของการ POST AJAX กันออกไปก่อนครับ ผมจะใส่ไว้ล่างสุดของไฟล์เลย


<script type="text/javascript">
  $(document).ready(function(){
    $("#email").change(function() {
      var email = $('#email').val();
    });
  });
</script>

Code ด้านบนนี้ก็คือ ผมทำการ ดึงค่า Value จากทาง input ที่มี ID เป็น email ออกมาประกาศตัวแปรในรูปแบบของ javascript จากนั้น ผมก็จะได้ค่า value ออกมาเมื่อมีการกรอกข้อมูลลงไปใน email เดี๋ยวผมลองโชว์ค่าให้ดูครับ

show email

show email

ทีนี้ขั้นตอนต่อไปก็คือ การส่งค่าไปที่ อีกไฟล์เพื่อที่จะไปเช็คข้อมูลในฐานข้อมูลของเราดูครับ โดยเราต้องสร้างตัวแปรขึ้นมาตามนี้ก่อนคือ ตัวแปรที่จะเก็บ function ajax ซึ่งด้านใน function ajax จะประกอบไปด้วย 3 อย่างสำคัญพื้นฐาน ต่อไปนี้ (อันที่จริงมีเยอะ แต่เราจะใช้แค่นี้ก่อนนะครับ หาข้อมูลเพิ่มเติมได้จาก jquery.com) URL, type, data

URL คือหน้าหรือไฟล์ที่เราจะส่งข้อมูลออกไปหา
TYPE คือชนิดรูปแบบของ HTTP ที่เราส่งไป GET, POST
DATA คือข้อมูลที่เราแนบออกไปในลักษณะของ JSON


var request = $.ajax({

url: "get.php",

type: "POST",

data: {email: email},

success: function(data, textStatus, jQxhr){

  // OK

},

error: function(jqXhr, textStatus, errorThrown){

  // Not OK

  console.log(errorThrown);

}

});

จาก Code ตัวอย่าง จะเห็นว่าผม สร้างตัวแปรขึ้นมาตามที่ อธิบายไว้ด้านบน แล้วต่อด้วย status ที่ว่า Success หรือ Error หมายถึงถ้าส่งไปแล้วผ่าน ก็ OK ไม่ผ่านก็ไม่ Not OK ไปแทน แบบนี้ แค่นี้เราก็จะส่งค่าไปได้แล้วครับ แต่เรายังไม่มีหน้ารับเลย ส่งไปยังไงมันก็ไม่ผ่านอยู่ดี งั้นเรามาสร้างหน้ารับกัน


<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "zendtut";
mysql_query("SET NAMES utf8");

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

$m = $_POST['email'];
$sql = "SELECT * FROM customer_tbl WHERE email LIKE '$m' ";
$result = $conn->query($sql);

if ($result->num_rows >= 1){
    echo "Not";
} else {
    echo "OK";
}
?>

จากในตัวอย่างนะครับ ผมสร้างไฟล์ชื่อ get.php ขึ้นมา แล้วติดต่อเข้าไปกับ database ที่ชื่อ zendtut แล้วก็ รับค่าตัวแปรแบบตรงๆตามหลักของ PHP นั้นแหละคือ ไอ้หน้าที่ส่งมา มันส่งค่าออกมาเป็น Post ตรงนี้ก็รับเป็น Post ไป $m = $_POST[’email’]; แบบนั้นนะครับ ทีนี้ เราก็เอาไปใส่ SQL แล้วลองนับค่าดู ว่าถ้ามีมากกว่า หรือเท่ากับ 1 ให้ส่งออกไปบอกหน่อยว่า Not ถ้า mail นี้สามารถสมัครใช้งานได้ ก็ส่งไปว่า OK แบบนี้ครับ

ทีนี้ข้อมู,ที่ส่งไปนะ มันส่งกลับไปที่หน้าเดิม เมื่อกี้ ในรูปแบบของ data ตรงๆเลย เราเลย echo ตรงๆได้เลย แล้วก็ให้หน้าเมื่อกี้ เอาไปเช็คว่า เป็น OK หรือเป็น Not แทน แบบนี้ครับ


success: function( data, textStatus, jQxhr ){
  if(data == 'OK'){
  } else {
  }
},

ทีนี้เราจะมาเพิ่มความสวยงาม ด้วยการใช้ bootstrap ในการแจ้งบอกไปว่า Mail นี้ใช้งานได้ไหม ถ้าได้ให้เป็น สีเขียวถ้าไม่ได้ให้เป็นสีแดง เราก็ใส่ class ต่างๆของ bootstrap ลงไปเพิ่มสีสันแบบนี้ครับ


success: function( data, textStatus, jQxhr ){
if(data == 'OK'){
    $('.form-group:nth-child(2)').addClass('has-success has-feedback');
    $('.form-group:nth-child(2)').removeClass('has-error');
    $('.form-group:nth-child(2) > span').addClass('glyphicon-ok');
    $('.form-group:nth-child(2) > span').removeClass('glyphicon-remove');
} else {
    $('.form-group:nth-child(2)').addClass('has-error has-feedback');
    $('.form-group:nth-child(2) > span').removeClass('glyphicon-ok');
    $('.form-group:nth-child(2) > span').addClass('glyphicon-remove');
}
},

จบแ้วจะได้ออกมาเป็นแบบนี้ ลองมาดูรูปตอนจบงานกันครับ

Check Mail Final

Check Mail Final

ยาวมากๆเลย หวังว่าคงจะพอเป็นประโยชน์ สำหรับผู้ที่สนใจนะครับ ใครมีอะไร ติดขัดหรืออยากพูดคุยกันก็ไปที่หน้าเพจ Teerapuch ได้นะครับ ขอบคุณที่ติดตามครับ