We will make a simple homepage with a login service.
The structure will be:
- index.php - handles the login
- style.css - with cssstyle
- script.js - with javascript
These files will be the base for our page. I might add other files later on when more services will be added.
The index file
The index file souhld handle the login. It should have a form and a way to check inf the data is correct if you press login. So the form will send the data back to itself and we will check if there has been a POST action. in that case we should check the user login. If that wasnt the case we should just present the loginform as usual.
<?php
if(isset($_POST['loginname']) && isset($_POST['password'])) {
$loginname = $_POST['loginname'];
$password = $_POST['password'];
if ($loginname=='stefan' && $password=='password') {
echo "Login successful! Welcome, " . htmlspecialchars($loginname) . "!";
} else {
echo "Please enter both username and password.";
}
} else {
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webtastic</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="index.php" method="post">
<label>Username: </label><input type="text" name="loginname" id="loginname" />
<br/>
<label>Password: </label><input type="password" name="password" id="password" />
<br/>
<button>Login please!</button>
</form>
</body>
</html>
<?php
}
The css-file
The css file is the file where we set our design for the page. Im not going thru all the settings here but here is the file.
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
h1{
background-color: aqua;
margin:10px;
padding:10px;
}
body{
width: 100%;
height: 100vh;
display: flex;
flex-wrap: wrap;
align-content: center;
}
body.home{
display:flex;
flex-direction: column;
align-items: center;
}
input{
width: 100%;
height: 30px;;
margin: 10px 0;
border: 1px solid #6c5252;
border-radius: 5px;
}
form{
width:200px;
margin: 0 auto;
padding: 20px;
border: 1px solid #fdc3c3;
border-radius: 5px;
background-color: #f6c5c5;
button{
width: 100%;
padding: 10px;
border: 1px solid #6c5252;
border-radius: 5px;
background-color: #654d4d;
cursor: pointer;
color:azure;
}
}
The Javascript-file
We leave the js file be right now.
TL;DR
So we have a page were we get a loginform. When we login we check the credentials and let us login or just show the form again.
.png)