I hope this type of "question" is accepted here - otherwise I understand if it's removed. And SORRY for the chunks of code!

I've created an admin login area for an application I am planning to code, and I've used the following login.html page to let the user type in his data (I left out parts like "id", "placeholder" etc. to make it shorter):

<form method="post" action="login.php">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="Login" name="submit">
</form>

The form is processed as is, no Javascript interfering here...the login.php then looks like this:

<?php
  if (isset($_POST['password']) && isset($_POST['userName'])) {
    if ($_POST['password'] == "myPassword" && $_POST['userName'] == "myUsername") {
      if (!session_id()) {
        session_start();
        $_SESSION['logon'] = true;
        header('Location: admin_area.php');
        die();
      }
    } else if ($_POST["password"] == "" || $_POST["userName"] == "") {
      echo "Please enter both a username and a password! You are sent back in 3 seconds";
      echo "<meta http-equiv='refresh' content='3;url=login.html'>";
    } else {
      echo "Wrong username and/or password! You are set back in 3 seconds";
      echo "<meta http-equiv='refresh' content='3;url=login.html'>";
    }
  } else {
    echo "This is a restricted area, you have to log in!";
    echo "<meta http-equiv='refresh' content='3;url=login.html'>";
  }
?>

The admin_area.php file, which the user is then being redirected to, has the following short placeholder code:

<?php
  if (!session_id()) session_start();
  if (!$_SESSION['logon']) { 
    echo "This is a restricted area, you have to log in!";
    echo "<meta http-equiv='refresh' content='3;url=login.html'>";
  } else {
    echo "<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>";
    echo "<script type='text/javascript' src='session_destroy.js'></script>";
    echo "Hello World!";
    echo "<br>";
    echo "<input type='button' id='exit_button' value='Exit' onclick='window.open(\"\", \"_self\", \"\"); window.close();'>";
  }
?>

The essential part of the session_destroy.js file on this page, contains this code snippet:

$(window).on("beforeunload", function() {
  $.get("session_destroy.php");
  return "You have left the page. Your session has been terminated.";
});

And finally, the session_destroy.php, which should terminate all session data, contains the following lines (taken from the php manual):

<?php
  if (!session_id()) session_start();
  if (!$_SESSION['logon']) { 
    echo "This is a restricted area, you have to log in!";
    echo "<meta http-equiv='refresh' content='3;url=login.html'>";
  } else {
    $_SESSION = array();
    if (ini_get("session.use_cookies")) {
      $params = session_get_cookie_params();
      setcookie(session_name(), '', time() - 42000,
        $params["path"], $params["domain"],
        $params["secure"], $params["httponly"]
      );
    }
    session_destroy();
    header('Location: login.html');
  }
?>

Now this "construct" seems to be working just fine, but I am wondering, if there are some improvements on these lines, as I have researched everything myself and I am not sure, how "secure" and correct these methods might be. I am thinking of possible security improvements to the form processing and session handling / destroying. Are there any areas which I should do more research about?

Thanks a lot!