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.  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 in which I should do more research?