Known Participant

Answered

Login System Using PHP and JavaScript

Forum|Forum|8 years ago
February 17, 2018
3 replies
8008 views

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>

This topic has been closed for replies.

Correct answer Nancy OShea

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 OShea

Correct answer

Community Expert

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

G

guest48289919Author

Known Participant

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?

Nancy OShea

Community Expert

Did you save your document as protect.php?

Does your remote server support PHP code?

Nancy

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

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

BenPleysier

Community Expert

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 Tasmania 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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

BenPleysier

Community Expert

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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded