JavaScript Login Page With Database
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this tutorial we will show you the solution of JavaScript login page with database, mainly we prefer php with html to create a login page with database.
But today on behalf of some developer we will understand how to create a login page with database using JavaScript.
To create a login page, we must require a login id and password with a button. On the based on these rules lets create a basic page first in html that is our login page.
Step By Step Guide On JavaScript Login Page With Database :-
<!doctype html>
<html lang=”en”>
<head>
<title>
JavaScript Validations
</title>
</head>
<body>
<h1>
TalkersCode – JavaScript Validations
</h1>
<h2>
JavaScript login page with database
</h2>
<form action="next_page.php" method="post">
<div class="container">
<label for="username">
<b>
Enter Username Here
</b>
</label>
<input type="text" placeholder=" Username " name="username" required>
<label for="password">
<b>
Enter Password here
</b>
</label>
<input type="password" placeholder=" Password" name="password" required>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
<button type="submit">
Sign in button
</button>
</div>
<div class="container" >
<button type="button" class="cncl">
Cancel
</button>
<span class="password"><a href="forgotpass.html">Forgot password?</a></span>
</div>
</form>
<script>
var connection = mysql.createConnection({
host : 'hostname',
user : 'username',
password : 'password',
database : 'databaseName'
});
</script>
</body>
</html>
- Here, above we show you an example in JavaScript.
- For this first of all we here create a basic structure of html. For this we use html, head, title and body with script tag. We hope you know about the basic structure of html and which html tag is used for which concept.
- Now, when we look inside body tag. Here, we see some headings tag and a script tag. Heading tag again is a concept of html, whereas script relates to JavaScript.
- JavaScript is written always inside script tag. Where script is a paired tag so it also has a closing tag. Now inside these script tag, we write our JavaScript code.
- Here, as we see that we create an input field for username, another for password with the button of Sign in. Rest are Remember me checkbox, a cancel button and forget password.
- These all above are basics of html, we hope that you easily understand them. Now, let us talk about our JavaScript codes. We write our JavaScript codes inside script tag that is under body of html. Now, here when we see that we only create a database connection with help of JavaScript. We can also apply validation on login page as we already previously discussed many times.
- But we want to make our article some different from another. Here, we use database connection here inside JavaScript. But till now this article is not declared to be completed. This is an instance of full article, and one thing more that you have to do RND and have to complete this using table and other connections in JavaScript.
Conclusion :-
At last, in conclusion here we can say that with the help of this article we are able to understand how to create a login page in JavaScript with database.
I hope this tutorial on JavaScript login page with database helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
