Login System Using PHP and JavaScript

Report · Feb 16, 2018

Hello, I am trying to create a login system for my website, however I am confused as how to implement a PHP code that will make my login system work. I have tried using codes from various YouTube tutorials; however, people have said that some codes don't work because they have a newer version of XAMPP. I am using XAMPP version 3.2.2 and have seen that in many tutorials, people use MySQL and/or Apache. Could you please provide a PHP code in which if a username or password is wrong, an alert will pop-up saying, "Incorrect username or password." and if a username and password is correct, the user will be directed to another web page?

Here is my code:

<!doctype html>

<head>

<title>Business Department</title>

<style>

.navbar {

margin-bottom: 0;

border-radius: 0;

/* background-color; he put it purple make it stay gray or change to dark gray */

color: #474747; /* text color */

padding: 1% 0;

font-size: 1.2em; /* This increases text font */

border: 0; /* the black thing */

}

.navbar-brand {

float: left;

min-height: 55px;

padding: 0 15px 5px;

}

.navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active a:focus, .navbar-inverse .navbar-nav .active a:hover {

color: #FFF;

background-color: #222222; /* for the black thing in home */ /* #232323 try to change later on if it does not match with anything else */

}

.navbar-inverse .navbar-nav li a { color: #D5D5D5; /* text color?? */ }

.btn { /* LOGIN button */

font-size: 18px;

color: #FFF;

padding: 12px 22px;

background: #000000;

border: 2px solid #FFF;

}

#icon {

max-width: 200px; /* to change the size of 3 images */

margin: 1% auto;

margin-top: 30px;

margin-bottom: 26px;

}

footer {

width: 100%;

background-color: #222;

padding: 5%;

color: #FFF;

}

.fa {

padding: 15px; /* social media pics size */

font-size: 25px;

color: #FFF;

}

.fa:hover {

color: #D5D5D5;

text-decoration: none;

}

@media (max-width: 900px) {

.fa {

font-size: 20px;

padding: 10px;

}

@media (max-width: 600px) { /* this is to not show the getting started buttons and header on mobile */

#icon { max-width: 150px; }

h2 { /* h4 size in mobile */ font-size: 1.7em; }

}

body {

height: 100%;

/**FULL SCREEN BACKGROUND IMAGE**/

background: url('img/hallway2.jpg') no-repeat center center fixed;

background-size: cover;

}

.center-block { float: none; }

form {

margin: 15% auto 15% auto;

padding: 5%;

background: rgba(0,0,0,0.7);

color: #FFF;

}

</style>

</head>

<body>

<li><a href="about.html">About</a></li>

<li><a href="courses.html">Courses</a></li>

<li><a href="schoolstore.html">School Store</a></li>

<li><a href="resources.html">Resources</a></li>

<li><a href="contacts.html">Contacts</a></li>

</ul>

</div>

</nav>

<label for="Email">Email address</label>

</div>

<label for="Password">Password:</label>

</div>

</form>

</div>

<h3><b>Contact Us</b></h3>

<h4 style="line-height: 90%">Address: xx<h4>

<h4 style="line-height: 90%">Phone:xx<h4>

<h4 style="line-height: 90%">Email: xxxx.com</h4>

</div>

<h3><b>Stay Connected</b></h3>

</div>

</a>

</div>

</footer>

</body>

</html>

Report · Feb 16, 2018

I am not familiar with XAMMP, all you need to be sure of is that the PHP version is 5.6 or above. Preferably version 7+ because these will be maintained for the foreseeable future.

The way a login form works:

user details are entered into the login form
upon form submit, the form data is sent to the server
server side script validates the user, comparing it to the data held in a database
if valid, the server side script will direct the user to a secure page
if not valid, the server side script will do something else. I would send them to Christian Community Churches in Victoria and Tasmania - Christian Community Churches in Victoria and... where they can repent.

This is a lot of information to divulge and sure as anything, I would probably forget a step or two on the way. Therefore it is much better to do a Google search. One such a search gave me this excellent article/tutorial PHP User Registration & Login Form - PDO.

Good luck!

Wappler, the only real Dreamweaver alternative.

Report · Feb 16, 2018

In the above, I have assumed that you have need for different login details for a multitude of users. If you have need for just a few users, .htaccess combined with .htpasswd may be a simpler system for you. It is not quite as elegant.

Google the subject or have a look at How do I do BASICAuth using .htaccess and .htpasswd? | OIT Frequently Asked Questions

Wappler, the only real Dreamweaver alternative.

Report · Feb 17, 2018

This is a very simple password protected page. Copy code below into a new blank PHP document and save as protect.php. You define the username and password in the script -- no database required.

<!doctype html>

<head>

<title>Password Protected</title>

<style>

.center-block {float:none}

</style>

</head>

<body>

<?php

// Define your username and password here

$username = "admin";

$password = "pass123";

if (isset($_POST['txtUsername']) != $username || $_POST['txtPassword'] != $password) {

?>

<p><label for="txtUsername">Username:</label>

<p><label for="txtPassword">Password:</label>

<button type="submit" class="btn btn-lg btn-primary">Submit</button>

</fieldset>

</form>

</div>

<?php

}

else {

?>

<div class="row">

<div class="col-sm-8 center-block">

<div class="alert-success text-center">

<h2>Log-In Success!</h2>

<p>You have reached a password protected area of this page. What would you like to do next?</p>

</div>

<ul class="nav nav-pills">

<li role="presentation" class="active"><a href="#">Download Files</a></li>

<li role="presentation"><a href="#">Upload Files</a></li>

<li role="presentation"><a href="#">Watch Videos</a></li>

<li role="presentation"><a href="#">Play a Game</a></li>

</ul>

</div>

</div>

<?php

}

?>

</div>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 17, 2018

If you want this to look like the log-in page in your post from a few weeks ago,

Login page Using Bootstrap and JavaScript

This is the code I would use.

<!doctype html>

<head>

<title>Business Department</title>

<style>

.navbar {

margin-bottom: 0;

border-radius: 0;

/* background-color; he put it purple make it stay gray or change to dark gray */

color: #474747; /* text color */

padding: 1% 0;

font-size: 1.2em; /* This increases text font */

border: 0; /* the black thing */

}

.navbar-brand {

float: left;

min-height: 55px;

padding: 0 15px 5px;

}

.navbar-inverse .navbar-nav .active a, .navbar-inverse .navbar-nav .active a:focus, .navbar-inverse .navbar-nav .active a:hover {

color: #FFF;

background-color: #222222; /* for the black thing in home */ /* #232323 try to change later on if it does not match with anything else */

}

.navbar-inverse .navbar-nav li a { color: #D5D5D5; /* text color?? */ }

.btn { /* LOGIN button */

font-size: 18px;

color: #FFF;

padding: 12px 22px;

background: #000000;

border: 2px solid #FFF;

}

#icon {

max-width: 200px; /* to change the size of 3 images */

margin: 1% auto;

margin-top: 30px;

margin-bottom: 26px;

}

footer {

width: 100%;

background-color: #222;

padding: 5%;

color: #FFF;

}

.fa {

padding: 15px; /* social media pics size */

font-size: 25px;

color: #FFF;

}

.fa:hover {

color: #D5D5D5;

text-decoration: none;

}

@media (max-width: 900px) {

.fa {

font-size: 20px;

padding: 10px;

}

@media (max-width: 600px) { /* this is to not show the getting started buttons and header on mobile */

#icon { max-width: 150px; }

h2 { /* h4 size in mobile */ font-size: 1.7em; }

}

body {

height: 100%;

/**FULL SCREEN BACKGROUND IMAGE**/

background: url(https://placeimg.com/1200/500/tech) no-repeat center center fixed;

background-size: cover;

}

.center-block { float: none; }

.form {

margin: 15% auto 15% auto;

padding: 5%;

background: rgba(0,0,0,0.7);

color: #FFF;

}

</style>

</head>

<body>

<li><a href="about.html">About</a></li>

<li><a href="courses.html">Courses</a></li>

<li><a href="schoolstore.html">School Store</a></li>

<li><a href="resources.html">Resources</a></li>

<li><a href="contacts.html">Contacts</a></li>

</ul>

</div>

</nav>

<?php

// Define your username and password here

$username = "admin";

$password = "pass123";

if (isset($_POST['txtUsername']) != $username || $_POST['txtPassword'] != $password) {

?>

<label for="txtUsername">Username:</label>

</div>

<label for="txtPassword">Password:</label>

</div>

</form>

</div>

<?php

}

else {

?>

<h2>Log-In Success!</h2>

<p>You have reached a password protected area of this page. What would you like to do next?</p>

</div>

<li role="presentation" class="active"><a href="#">Download Files</a></li>

<li role="presentation"><a href="#">Upload Files</a></li>

<li role="presentation"><a href="#">Watch Videos</a></li>

</ul>

</div>

</div>

</section>

<?php

}

?>

</div>

<h3>Contact Us</h3>

Our Address and contact info here.

</address>

</div>

<h3>Connect</h3>

</div>

</div>

</footer>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 17, 2018

I have tried the code; however, the Login-Success area appears under the login box before I enter the username and password. Rather than creating the PROTECTED CONTENT section of the code, how could I redirect the user to another web page?

Report · Feb 18, 2018

Did you save your document as protect.php?

Does your remote server support PHP code?

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 18, 2018

Yes, I fixed this problem but now, when I enter the correct username and password and press Log-in, nothing happens.

Report · Feb 19, 2018

Below is a live example running as expected on my Linux/Apache web server.

Test Log-in username = admin

password = pass123

If the same exact code fails to work on your server, maybe you don't have PHP support. Ask your web host which server-side scripts you can use.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 19, 2018

OK, I got the code to work. Just one more thing, how would I be able to go to another web page such as index.html after entering the correct username and password and then pressing Log-in?

Report · Feb 20, 2018

What I provided is a bare bones example of a basic password protected page.

If you want more than that, you'll need a more sophisticated script with sessions, an SQL query of your MySQL database where usernames and passwords are stored and a success (index.php) page and a failure.php page. This gets a lot more complicated.

An alternative is Ben's suggestion of using .htaccess and .htpasswd file to protect a directory of pages.

htpasswd – The file to store passwords - Htaccess Tools

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 20, 2018

I see. Alright, thanks for the support.

Report · Feb 21, 2018

https://forums.adobe.com/people/Nancy+OShea wrote
Below is a live example running as expected on my Linux/Apache web server.
Test Log-in username = admin
password = pass123
If the same exact code fails to work on your server, maybe you don't have PHP support. Ask your web host which server-side scripts you can use.

You never provided the php code in TEST/protect.php so Im not sure how the OP could work that one out?

However if the OP uses the html code at the link you provided then its easy to go to another page If the username and password information is correct

Just add the below to the top of the code BEFORE any other code:

<?php

session_start();

if(isset($_POST['txtUsername'])) {

$username = $_POST['txtUsername'];

$password = $_POST['txtPassword'];

if($username != "admin" && $passsword != "pass123") {

$loginError ="Your username and password is not valid";

}

else {

$_SESSION['username'] = true;

$_SESSION['password'] = true;

header('Location: secure_page.php');

}

?>

Add the loginError <div>/php code as shown below, just after the <form> tag:

<?php

if(isset($loginError)) { ?>

<?php echo $loginError; ?>

</div>

<?php } ?>

<label for="txtUsername">Username:</label>

</div>

<label for="txtPassword">Password:</label>

</div>

</form>

Add a bit of css to style the loginError <div> container

.loginError {

background-color: red;

color: #fff;

text-align: center;

padding: 15px 0;

}

Add the below at the top of the secure_page .php

<?php

session_start();

if(!isset($_SESSION['username']) && !isset($_SESSION['password'])) {

header('Location: TEST/protect.php');

}

?>

Login System Using PHP and JavaScript

1 Correct answer