<?php
// (A) LOGIN CHECKS
require "check.php";
// (B) LOGIN PAGE HTML
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Portfolio</title>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="portfolio_style.css" />
<link rel="stylesheet" href="login_style.css" />
</head>
<body>
<div class="container1">
<header class="header1">
<h1 class="title1">My name</h1>
<p class="subtitle"><i>Hello World!</i></p>
</header>
<section class="section1">
<nav class="nav1">
<ul>
<li>
<a href="portfolio_page1.html"><span class="nav2"></span>About Me</a>
</li>
<li>
<a href="portfolio_page2.html"><span class="nav2"></span>Experience</a>
</li>
<li class="active">
<a href="blog.php"><span class="nav2"></span>Blog</a>
</li>
</ul>
</nav>
<div class="container2">
<div class="content">
<?php
if (isset($failed)) { echo "<div>invalid username or password</div>"; }
?>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
<div id="id01" class="modal">
<form class="modal-content animate" method="post" target="_self">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="container4">
<label for="user"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="user" required>
<label for="password"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="password" required>
<button type="submit">Login</button>
</div>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</div>
</div>
</section>
</div>
</body>
</html>
//this is the file used to check and store the passes and users: check.php
<?php
// (A) START SESSION
session_start();
// (B) HANDLE LOGIN
if (isset($_POST["user"]) && !isset($_SESSION["user"])) {
// (B1) USERS & PASSWORDS - SET YOUR OWN !
$users = [
"abc" => "123",
"def" => "456",
"ghi" => "789"
];
// (B2) CHECK & VERIFY
if (isset($users[$_POST["user"]])) {
if ($users[$_POST["user"]] == $_POST["password"]) {
$_SESSION["user"] = $_POST["user"];
}
}
// (B3) FAILED LOGIN FLAG
if (!isset($_SESSION["user"])) { $failed = true; }
}
// (C) REDIRECT USER TO HOME PAGE IF SIGNED IN
if (isset($_SESSION["user"])) {
header("Location: blog.php"); // SET YOUR OWN HOME PAGE!
exit();
}
//landing page for my blog: blog.php
<?php
session_start();
//LOGOUT
if (isset($_POST["logout"])) {
unset($_SESSION["user"]);
}
//BACK TO LOGIN PAGE IF NOT SIGNED IN
if (!isset($_SESSION["user"]))
{
header("Location: login.php");
exit();
}
?>
//html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Manel's Portfolio</title>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="portfolio_style.css" />
</head>
<body>
<div class="container1">
<header class="header1">
<h1 class="title1">My name</h1>
<p class="subtitle"><i>Hello World!</i></p>
</header>
<section class="section1">
<div class="container2">
<div class="content">
<h2 class="title2">My Blog</h2>
<p>
</p>
</div>
<!-- LOGOUT -->
<form method="post">
<input type="hidden" name="logout" value="1"/>
<input type="submit" value="logout"/>
</form>
</div>
</section>
</div>
</body>
</html>