Hello friends! Today I am going to show you a nice tips. How to make a login page on your webpage. After you login your website you can see your all files and manage them.
You do not have to login your cpannel again and again to manage files. So this the best ways for you. This file manager will work for cpannel, MYSql server, PHP server.
Well, At first we make a login file named login.html . Then just copy and paste the following code on the file and save.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}
input[type=text], input[type=password] {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 50%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
color: white;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 20%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<form action="/Navbar/login/admin_page.php" method="post">
<div class="imgcontainer">
<img src="img_avatar.png" alt="Avatar" class="avatar">
</div>
<div class="container"><center>
<label for="uname"><b>Username:</b></label><br>
<input type="text" placeholder="Enter Username" name="username" required><br>
<label for="psw"><b>Password:</b></label><br>
<input type="password" placeholder="Enter Password" name="password" required><br>
<br>
<label>
<input type="checkbox" name="remember"> Remember me
</label>
<br>
<button type="submit" name="submit">Login</button>
</center>
</div>
</form>
</body>
</html>
Then we will make a file named admin_page.php . Then just copy and paste the following code on the file and save.
<?php
//print_r($_POST); //used for debugging
if (!empty($_POST)) //If form was POST
{
$username = $_POST['username'];
$password = $_POST['password'];
$logged_in = verify_login($username, $password);
if($logged_in)
{
//do whatever you want to do after login is verified
session_start();
$_SESSION['username'] = $username;
$_SESSION['logged_id'] = true;
//E.g. redirect to some secured page
header("Location: ./my-admin-files.php");
}
else
{
echo "<center><font color='red'>Incorrect Username or Password. </font></center>";
}
}
//function to verify login
function verify_login($username, $password)
{
//Easy way to check is hardcode username and password
if ($username == 'Admin' && $password == '1234') return true;
}
?>
Note: Replace the Password 1234 with your own in green background and save.
Then download the avatar image from the link bellow.
Login avatar download link
Then upload these two files and avatar image in login folder in cpannel.
After that link this login.html file on your web home psge.
After that make a php file named my-admin-files.php and paste the following code and save.
Then upload this my-admin-files.php in your public_html folder or root direcory. And that's done.
Now you can see all files and folders of your website in your webpage after successful login. Now enjoy !
Note: Replace the Password 1234 with your own hidden number and logout link in my-admin-files.php file and save.
Here's the script file for my-admin-files.php.