Sign Up Form Using Bootstrap with PHP Function Using PDO

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

Sign Up Form Using Bootstrap with PHP Function Using PDO

In this article, we are going to learn on how to create sign up form using bootstrap with PHP function using PDO. We are going to use bootstrap for the input field where the user enters their information to sign up and PHP using PDO for the function.

Creating our Table

We are going to make our database.

  1. Open the PHPMyAdmin.
  2. Create a database and name it as "bootstrap_signup".
  3. After creating a database name, then we are going to create our table. And name it as "user_account".
  4. Kindly copy the code below.
  1. CREATE TABLE `user_account` (
  2. `user_account_id` INT(11) NOT NULL,
  3. `user_name` VARCHAR(100) NOT NULL,
  4. `email` VARCHAR(100) NOT NULL,
  5. `password` VARCHAR(100) NOT NULL,
  6. `confirm_password` VARCHAR(100) NOT NULL
  7. ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Sign Up Form

  1. <!-- form start -->
  2. <form method="post" action="add.php">
  3. <div class="body_style">
  4. <div class="form-group">
  5. <div class="input-group">
  6. <div class="input-group-addon" style="border:1px solid blue;"><span class="glyphicon glyphicon-user"></span></div>
  7. <input name="user_name" type="text" class="form-control" autofocus="autofocus" placeholder="User Name ....." style="border:1px solid blue;">
  8. </div>
  9. <span class="help-block" id="error"></span>
  10. </div>
  11. <div class="form-group">
  12. <div class="input-group">
  13. <div class="input-group-addon" style="border:1px solid blue;"><span class="glyphicon glyphicon-envelope"></span></div>
  14. <input name="email" type="text" class="form-control" placeholder="Email ....." style="border:1px solid blue;">
  15. </div>
  16. <span class="help-block" id="error"></span>
  17. </div>
  18. <div class="row">
  19. <div class="form-group col-lg-6">
  20. <div class="input-group">
  21. <div class="input-group-addon" style="border:1px solid blue;"><span class="glyphicon glyphicon-lock"></span></div>
  22. <input name="password" id="password" type="password" class="form-control" placeholder="Password ....." style="border:1px solid blue;">
  23. </div>
  24. <span class="help-block" id="error"></span>
  25. </div>
  26. <div class="form-group col-lg-6">
  27. <div class="input-group">
  28. <div class="input-group-addon" style="border:1px solid blue;"><span class="glyphicon glyphicon-lock"></span></div>
  29. <input name="confirm_password" type="password" class="form-control" placeholder="Re-type Password ....." style="border:1px solid blue;">
  30. </div>
  31. <span class="help-block" id="error"></span>
  32. </div>
  33. </div>
  34. </div>
  35. <div class="footer_style">
  36. <button type="submit" name="submit" class="btn btn-success" style="border:1px solid blue;">
  37. <span class="glyphicon glyphicon-ok"></span> Sign Up
  38. </button>
  39. </div>
  40. </form>

This is the result:

Result

PHP Function Using PDO

  1. <?php
  2. include ('database.php');
  3.  
  4. $user_name=$_POST['user_name'];
  5. $email=$_POST['email'];
  6. $password=$_POST['password'];
  7. $confirm_password=$_POST['confirm_password'];
  8.  
  9. $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  10. $sql = "INSERT INTO user_account (user_name, email, password, confirm_password)
  11. VALUES ('$user_name', '$email', '$password', '$confirm_password')";
  12.  
  13. $conn->exec($sql);
  14. echo "<script>alert('Successfully Added!'); window.location='view.php'</script>";
  15. ?>

This is the result after execute the PHP function using PDO.

Result

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.


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.