PHP Login using Twitter Bootstrap Progressbar

Submitted by: 
Language: 
Visitors have accessed this post 32130 times.

Hi guys, in these source code you will learn how to make a simple login page in PHP using twitter bootstrap progress bar. This code is a simple login script that beginners can easily understand how progress bar works that add beauty to your program. Hope you like this simple but useful source code thank you.

Database name: login.sql in db folder

Sample code:

  1. <?php
  2. include('header.php');
  3. ?>
  4. <html>
  5. <body>
  6. <br>
  7. <br>
  8. <div class="container">
  9. <div class="row-fluid">
  10. <form class="form-horizontal" method="POST">
  11. <div class="control-group">
  12. <label class="control-label" for="inputEmail">Username</label>
  13. <div class="controls">
  14. <input type="text" id="inputEmail" name="username" placeholder="Username" required>
  15. </div>
  16. </div>
  17. <div class="control-group">
  18. <label class="control-label" for="inputPassword">Password</label>
  19. <div class="controls">
  20. <input type="password" id="inputPassword" name="password" placeholder="Password" required>
  21. </div>
  22. </div>
  23. <div class="control-group">
  24. <div class="controls">
  25. <button id="h-default-trigger" name="login" type="submit" class="btn btn-info">Sign in</button>
  26. </div>
  27. </div>
  28. </form>
  29. <?php
  30. if (isset($_POST['login'])){
  31. $username=$_POST['username'];
  32. $password=$_POST['password'];
  33.  
  34.  
  35. $query=mysql_query("select * from user where username='$username' and password='$password'")or die(mysql_error());
  36. $count=mysql_num_rows($query);
  37.  
  38. if ($count > 0){
  39. header('location:progressbar.php');
  40. }
  41. }
  42. ?>
  43. </div>
  44. </div>
  45. </body>
  46. </html>

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Comments

You have to change your file as

Index.php
--------------------------------------------------
<?php include_once ('dbcon.php'); ?>
<?php
if (isset($_POST['login'])){
$username=$_POST['username'];
$password=$_POST['password'];
$query=mysql_query("select * from user where username='$username' and password='$password'")or die(mysql_error());
$count=mysql_num_rows($query);
if ($count > 0){
header('location:progressbar.php');
}
}
?>
<?php include('header.php');?>

Username

Password

Sign in

------------------------------------------------------------------
2- Header.php
-----------

bootstrap-progressbar

.progress .bar.six-sec-ease-in-out {
-webkit-transition: width 6s ease-in-out;
-moz-transition: width 6s ease-in-out;
-ms-transition: width 6s ease-in-out;
-o-transition: width 6s ease-in-out;
transition: width 6s ease-in-out;
}
.progress.vertical .bar.six-sec-ease-in-out {
-webkit-transition: height 6s ease-in-out;
-moz-transition: height 6s ease-in-out;
-ms-transition: height 6s ease-in-out;
-o-transition: height 6s ease-in-out;
transition: height 6s ease-in-out;
}
.progress.wide {
width: 60px;
}
.vertical-progressbar-span {
height: 100px;
}

$(document).ready(function() {
$('.progress .bar.text-filled-1').progressbar({
display_text: 1,
refresh_speed: 200,
transition_delay: 500,
});

});

When I login:

"Warning: Cannot modify header information - headers already sent by (output started at /Applications/XAMPP/xamppfiles/htdocs/progressbar_login/header.php:54) in /Applications/XAMPP/xamppfiles/htdocs/progressbar_login/index.php on line 41"

try .. ob_start(); at the beginning of the file .

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.