Creating a Registration Page Part I

Submitted by GeePee on Sunday, April 19, 2015 - 23:21.

In this tutorial, I will show you how create our Registration Page using Bootstrap framework. The Registration form together with the Login form will welcome you when you access the site. And it will require the new member to register on the site, so that they can login and to have access to the site. First, create a PHP file named “index.php”, save it inside “philsocial” folder. And this PHP file is composed of different parts. For the first part, add the following code: This part of the code, will handle the declaration of your HTML document before the tag. And it is an instruction to the web browser about the version of the written HTML page. Next is, we specify the language code, then we defines what character coding is used in the page and so on. And for the head portion of the page wherein we set our desired company title, and specify the Customize template to be used.

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta content="" name="description">
  <meta content="" name="author">
  <link href="#" rel="shortcut icon">
 
  <title>Philsocial</title><!-- Bootstrap core CSS -->
  <link href="css/bootstrap.css" rel="stylesheet"><!-- Custom styles for this template -->
  <link href="jumbotron.css" rel="stylesheet">
 
</head>

Next in the second part, add the following code: This code will serve later as our menu bar and as of the moment we only display here the company name. And this part also we set our login form. And we will go back here later when we are dealing with login logout system.

<body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type=
        "button"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class=
        "icon-bar"></span></button> <a class="navbar-brand" href="#" style=
        "font-weight: bold">Philsocial</a>
      </div>
 
      <div class="navbar-collapse collapse">
        <form action="home.php" class="navbar-form navbar-right" method="post">
          <div class="form-group">
            <input class="form-control" placeholder="Email" type="text">
          </div>
 
          <div class="form-group">
            <input class="form-control" placeholder="Password" type="password">
          </div>
		   <div class="form-group">
		  <button class="btn btn-success" name="login" type="submit">Sign in</button>
			</div>
		</form>
      </div><!--/.navbar-collapse -->
    </div>
  </div><!-- Main jumbotron for a primary marketing message or call to action -->

Then for the third part will focus on the Registration Form add the following code:

<div class="container">
      <div class="rows">
        <div class="col-xs-6">
        <h3>Philsocial helps you connected and share with the other people in your
        life</h3><img src="img/background.png" width="500px"></div>
 
        <div class="col-xs-6">
          <form action="#" class="form-horizontal" id="register" method=
          "post" name="register" ">
            <fieldset>
              <legend>Sign Up</legend>
 
              <h4>It’s free and always will be.</h4>
 
              <div class="rows">
                <div class="col-xs-12">
                  <div class="form-group">
                    <div class="rows">
                      <div class="col-md-12">
                        <div class="col-lg-6">
                          <input class="form-control input-lg" id="fName" name="fName" placeholder=
                          "First Name" type="text">
                        </div>
 
                        <div class="col-lg-6">
                          <input class="form-control input-lg" id="lName" name="lName" placeholder=
                          "Last Name" type="text">
                        </div>
                      </div>
                    </div>
                  </div>
 
                  <div class="form-group">
                    <div class="rows">
                      <div class="col-md-12">
                        <div class="col-lg-12">
                          <input class="form-control input-lg" id="email" name="email" 
						    placeholder="Your Email" type="text">
                        </div>
                      </div>
                    </div>
                  </div>
 
                  <div class="form-group">
                    <div class="rows">
                      <div class="col-md-12">
                        <div class="col-lg-12">
                          <input class="form-control input-lg" id="reemail" name="reemail"
     						  placeholder="Re-enter Email" type="text">
                        </div>
                      </div>
                    </div>
                  </div>
 
                  <div class="form-group">
                    <div class="rows">
                      <div class="col-md-12">
                        <div class="col-lg-12">
                          <input class="form-control input-lg" id="password" name="password"
                          placeholder="New Password" type="password">
                        </div>
                      </div>
                    </div>
                  </div>
 
                  <div class="form-inline">
                    <div class="rows">
                      <div class="col-md-12">
                        <div class="col-md-3">
                          <label>Birthday</label>
                        </div>
 
                        <div class="col-lg-3">
                          <select class="form-control input-sm" name="month">
 
                            <option>Month</option>
							<?php
							  $m = array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
							  foreach ($m as $month) {
								  echo '<option value='.$month.'>'.$month.'</option>';
							  }
     						  ?>
                          </select>
                        </div>
 
                        <div class="col-lg-3">
                          <select class="form-control input-sm" name="day" title="Day">
 
                         <option>Day</option>
							<?php 
								$d = range(31, 1);
								foreach ($d as $day) {
									echo '<option value='.$day.'>'.$day.'</option>';
								}
 
							?>
                          </select>
                        </div>
 
                        <div class="col-lg-3">
 
                            <option>Year</option>
							<?php 
								  $years = range(2010, 1900);
								  foreach ($years as $yr) {
									  echo '<option value='.$yr.'>'.$yr.'</option>';
								  }
 
    						  ?>
                          </select>
                        </div>
                      </div>
                    </div>
                  </div>
 
                  <div class="form-group">
                    <div class="rows">
                      <div class="col-md-12" style="text-align: left">
 
					  <div class="col-lg-3">
                        <div class="radio">
                          <label><input checked id="optionsRadios1" name="optionsRadios" type=
                          "radio" value="Female">Female</label>
                        </div>
					 </div>
					  <div class="col-lg-3">
 
                        <div class="radio">
                          <label><input id="optionsRadios2" name="optionsRadios" type="radio"
                          value="Male"> Male</label>
                        </div>
					</div>	
						</div>
                    </div>
                  </div>
				   <div class="form-inline">
                    <div class="rows">
                      <div class="col-md-12">
						<p>  By clicking Sign Up, you agree to our Terms and that you have
						 read our Data Use Policy, including our Cookie Use.</p>
						</div>
					 </div>
					</div>					 
                  <div class="form-group">
                    <div class="rows">
                      <div class="col-md-8">
                        <div class="col-lg-12">
                          <button class="btn btn-success btn-lg" type="submit">Sign Up</button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </fieldset>
          </form>
        </div>
      </div><!--rows-->
    </div><!--container-->

And for the last part, the footer and some javascripts link for loading the pages faster. Then add the following code:

<hr>
  <footer>
    <p style="text-align: center">© Philsocial 2013</p>
  </footer><!-- /container -->
  <!-- Bootstrap core JavaScript
    ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="assets/js/jquery.js"></script> 
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

After completing, it looks like as shown below: registration_page

And here’s the different classes used in this tutorial:

class="navbar navbar-inverse navbar-fixed-top"
class="container"
class="navbar-header"
class="navbar-toggle"
class="navbar-collapse collapse"
class="navbar-form navbar-right"
class="form-group"
class="form-control"
class="rows"
class="col-xs-6"
class="form-horizontal" 
class="form-control input-lg"
class="form-inline"
class="form-control input-sm"
class="radio"

If you want to see more of my works, new Source Code or Application and Tutorials Just click here.

Add new comment

123 views

Creating a Registration Page Part I

Tags

Add new comment