title: How to secure my login page
body: <p>I have a login.html webpage that lets user enter his username and password. When he clicks on submit I collect the entered value using Javascript and then make a Ajax POST Call to the php file and send the username and password. </p>
  
  <p>My concern here is that is this a safe way of sending username and password ? If not how can i secure this transaction of sending data from html file to php running the backend?</p>
  
  <p>The php file then connects to the MySql Db and checks if the user exits and if the password is correct If Yes it simply sends a Valid text back to the ajax calls to the javascript function if not I determine it is an invalid user ? </p>
  
  <p>I am not quite happy with this logic ? Is there a better way to implement this process ? Since i am putting my code to production I want to secure it as much as possible.  </p>
  
  <p>The below code works fine i just need tips to secure it.</p>
  
  <p>login.html </p>
  
  <pre><code>&lt;div&gt;
      &lt;h3&gt;Login information&lt;/h3&gt;
  
      &lt;input type="text" name="user" id="usrnm" placeholder="Username/Email"&gt;
      &lt;input type="password" name="pswdlogin" id="pswdlogin" placeholder="Password"&gt;
      &lt;input type="checkbox" name="keepmeloggedin" id="keepmeloggedin" value="1" data-mini="true"&gt;
      &lt;input type="submit" data-inline="false" onclick="logmein()" value="Log in"&gt;
      &lt;div id="loginstatus"&gt;    &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>logmein.js</p>
  
  <pre><code>function logmein() {
  
    var usrnm = document.getElementById("usrnm").value;
    var pswdlogin = document.getElementById("pswdlogin").value;
  
    $.post("http://xyz/mobile/php/logmein.php",
      {
        usrnm: usrnm,
        pswdlogin: pswdlogin
      },
      function(data, status) {
  
        if (data == 'Valid') {
  
          window.open("http://xyz/mobile/home.html?email=" + usrnm + "", "_parent");
  
        } else {
          alert(data);
          document.getElementById("loginstatus").innerHTML = data;
        }
      });
  }
  </code></pre>
  
  <p>logmein.php</p>
  
  <pre><code>&lt;?php
  
  $usrnm_original = $_POST['usrnm'];
  $pswdlogin_original = $_POST['pswdlogin'];
  
  $con = mysqli_connect("localhost", "cSDEqLj", "4GFU7vT", "dbname", "3306");
  
  if (mysqli_connect_errno())
      {
      echo "Failed to connect to MySQL: " . mysqli_connect_error();
      }
  
  mysqli_select_db($con, "dbname");
  $usrnm = mysqli_real_escape_string($con, $usrnm_original);
  $pswdlogin = mysqli_real_escape_string($con, $pswdlogin_original);
  
  $result = mysqli_query($con, "SELECT * FROM registration WHERE email = '" . $usrnm . "' AND password='" . $pswdlogin . "' ");
  $rows = mysqli_num_rows($result);
  
  if ($rows == 1)
      {
      echo "Valid";
      }
    else
      {
      echo "In Valid Credentials Entered";
      }
  
  mysqli_close($con);
  ?&gt;
  </code></pre>