বাংলায় জ্যাঙ্গো

গত পর্বে nid verification করার জন্য একটি এপিআই তৈরী করেছিলাম। আজ আমরা দেখব কিভাবে যে কেউ এপিআইটি তার সাইটে ব্যাবহার করতে পারে। আমরা Javascript ব্যাবহার করে পোর্টালের api কল করব।  আপনার কম্পিউটারের যে কোন স্থানে check_nid.html তৈরী করুন।

<!doctype html>
  <html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div class=" container">
      <div class="jumbotron">
      <h2> Check National Identification Number </h2>
        <form>
          <div class="form-row align-items-center">
            <div class="col-md-8">
              <label class="sr-only" for="inlineFormInput">Name</label>
              <input type="text" class="form-control mb-4"id="id_nid" placeholder="NID card number">
            </div>
            <div class="col-md-3">
              <a id="button"class="btn btn-primary mb-4">Submit</a>
            </div>
          </div>
        </form>
        <p id="status"></p>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"crossorigin="anonymous"></script>
   </body>
</html>
একই স্থানে app.js নামে আরেকটি ফাইল তৈরী করুন
$(document).ready(function(){
    $("#button").click(function(){
      var nid = $('#id_nid').val();
      var api_url = 'http://localhost:8000/nid/check/'+nid
      $.ajax({
              url: api_url,
              method: 'get',
              success: function(data){
                  var status_msg = $('#status');
                  // if api return True
                  if (data.status){
                      status_msg.text("Status: Valid");
                      status_msg.css('color','green');
                  }
                  else // if api return False
                  {
                      status_msg.text("Status: Invalid");
                      status_msg.css('color','red');
                  }
              },

              error: function(err){
                  console.log("error",err);
              }
          });
    });
  });
এখন check_nid.html ফাইলটি ব্রাউজারে ওপেন করুন। সুন্দর একটি ফর্ম দেখতে পাবেন। আপনার ডাটাবেজে থাকা nid number প্রবেশ করিয়ে check বাটনে ক্লিক করুন। প্রত্যাশিত ফলাফল পাবেন না। console চালু করে একটা ইরর দেখতে পাবেন। আমরা কোন সার্ভার থেকে nid_server কে কল করছি তা nid server জানে না। nid_server তার নিজের আইপি ছাড়া অন্য কোন সার্ভার থেকে আসা কলকে গ্রহন করবে না। nid_server কে আমরা বলে দিতে পারি তুমি যে কোন সার্ভার থেকে আসা কলকেই গ্রহন করবে। nid_server প্রজেক্টে নিজের কাজগুলো করিঃ
django-cors-headers ইন্সটল করি
pip install django-cors-headers

nid_server/settings.py এ নিম্নোক্ত পরিবর্তণ করি।
INSTALLED_APPS এ যুক্ত করি
INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)
MIDDLEWARE এ যুক্ত করি
MIDDLEWARE = [  # Or MIDDLEWARE_CLASSES on Django < 1.10
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

সকল সার্ভারকে অনুমতি প্রদান করতে নিচের লাইনটি যুক্ত করি।
CORS_ORIGIN_ALLOW_ALL = True
পুনরায় সার্ভারটি চালু করে check_nid.html ফাইটি রিলোড দিই। এখন সঠিক nid number প্রবেশ করালে দখাবে status: valid.