Bonus Question (3 Marks) You are required to create 2 web pages that does the fo
ID: 3686326 • Letter: B
Question
Bonus Question (3 Marks)
You are required to create 2 web pages that does the following:
1) Page 1: HTML Page that contains a form that collect information from user and pass it on to the next page.
a) You need to validate user information (String, number, email,..)
b) Validation can be made on the same page or on the next page.
2) Page 2: PHP page that will receive data from previous page.
a) The page need to add the received information to a list in the same page.
b) You can either use cookies, arrays or database to store
Explanation / Answer
Answer:
1)
index.html
<html>
<body>
<section class="properties">
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<h3>Register</h3>
<div class="divider"></div>
<p>Already have an account? <a href="#/adminlogin">Login here!</a></p>
<div class="filterContent sidebarWidget">
<form method="post" action="#">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-6">
<div class="formBlock"><h4>Fields marked with * are mandatory</h4>
<label for="email">Email ID <span>*</span></label><br/>
<input type="text" name="" id="inputEmail" placeholder="" data-ng-model="obj.emailId"/><h4 id="inputEmail"></h4>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-6">
<div class="formBlock">
<label for="pass">Password <span>*</span></label><br/>
<input type="password" name="" id="inputPassword" placeholder="" data-ng-model="obj.password" /><h4 id="inputPassword"></h4>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-6">
<div class="formBlock">
<label for="confirmPass">Confirm Password <span>*</span></label><br/>
<input type="password" name="" id="inputRetypePassword" placeholder=" " data-ng-model="obj.confirmpassword"/><h4 id="inputRetypePassword"></h4>
</div>
</div>
<div></div>
</div>
</form>
<div>
<input class="buttonColor" type="submit" value="Register" data-ng-disabled="!obj.emailId||!obj.password||!obj.confirmpassword" data-ng-click = "register()">
</div>
<span data-ng-show="failUser=='fail'"><span>error: </span>Already registered Email Id</span>
</div>
</div>
</div>
</div>
</section>
<!-- <script src="js/jquery.js"></script> Jquery
<script src="js/bootstrap.min.js"></script> bootstrap 3.0
<script src="js/respond.js"></script> -->
</body>
</html>
validation.js :
function validateAlpha(id)
{
var value = $("#"+id).val();
if(value == "")
{
$("#"+id).addClass("errorClass");
$("#"+id).next().html("You can't leave this empty.");
}
else
{
$("#"+id).removeClass("errorClass");
$("#"+id).next().html("");
}
}
function onchangeEmail(){
var email = $("#inputEmail").val();
var emailReg=/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
if (email == null || email == "") {
$("#inputEmail").addClass("errorClass");
$("#inputEmail").next().html("Please enter your email address.");
}
else if(!email.match(emailReg)){
$("#inputEmail").addClass("errorClass");
$("#inputEmail").next().html("Please enter a valid email address.");
}
else
{
$("#inputEmail").next().html("");
}
}
function onchangePassword(){
var password=$("#inputPassword").val();
var str=$("#inputPassword").val();
var retypepassword=$("#inputRetypePassword").val();
if (password == null ||password=="") {
$("#inputPassword").addClass("errorClass");
$("#inputPassword").next().html("Please enter your password.");
} else if(str.length<6){
$("#inputPassword").addClass("errorClass");
$("#inputPassword").next().html("Short passwords are easy to guess. Try one with at least 6 characters.");
} /*else if(retypepassword!=password){
$("#inputRetypePassword").addClass("errorClass");
$("#inputRetypePassword").next().html("These passwords don't match. Try again?");
} */
else
{
$("#inputPassword").next().html("");
}
}
function onchangeRetypePassword(){
var retypepassword=$("#inputRetypePassword").val();
var password=$("#inputPassword").val();
var str=$("#inputPassword").val();
if (retypepassword==null || retypepassword == "") {
$("#inputRetypePassword").addClass("errorClass");
$("#inputRetypePassword").next().html("Please enter confirm password.");
} else if(retypepassword !=password ){
$("#inputRetypePassword").addClass("errorClass");
$("#inputRetypePassword").next().html("These passwords don't match. Try again?");
} else if(retypepassword ==password){
$("#inputRetypePassword").removeClass("errorClass");
$("#inputRetypePassword").next().html("");
}
else
{
$("#inputRetypePassword").next().html("");
}
}
function adminRegistration() {
var email = $("#inputEmail").val();
var emailReg=/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
var password=$("#inputPassword").val();
var str=$("#inputPassword").val();
var retypepassword=$("#inputRetypePassword").val();
var flag = 1
if (email == null || email == "") {
$("#inputEmail").addClass("errorClass");
$("#inputEmail").next().html("Please enter email address.");
flag = 0;
}
else if(!email.match(emailReg)){
$("#inputEmail").next().html("Please enter a valid email address.");
flag = 0;
}
else
{
$("#inputEmail").next().html("");
}
if (password == null || password == "") {
$("#inputPassword").addClass("errorClass");
$("#inputPassword").next().html("Please enter your password.");
flag = 0;
} else if(str.length<6){
$("#inputPassword").next().html("Short passwords are easy to guess. Try one with at least 6 characters.");
flag = 0;
} else if(retypepassword==password){
$("#inputRetypePassword").removeClass("errorClass");
$("#inputRetypePassword").next().html("");
}
else if(retypepassword !=password){
$("#inputRetypePassword").addClass("errorClass");
$("#inputRetypePassword").next().html("These passwords don't match. Try again?");
}
else
{
$("#inputPassword").next().html("");
}
if (retypepassword==null || retypepassword == "") {
$("#inputRetypePassword").addClass("errorClass");
$("#inputRetypePassword").next().html("Please enter confirm password.");
flag=0;
} else if(retypepassword !=password){
$("#inputRetypePassword").addClass("errorClass");
$("#inputRetypePassword").next().html("These passwords don't match. Try again?");
flag=0;
} else if(retypepassword==password){
$("#inputRetypePassword").removeClass("errorClass");
$("#inputRetypePassword").next().html("");
}
else
{
$("#inputRetypePassword").next().html("");
}
if(flag)
{
return true;
}
else
{
return false;
}
}
2)
Creating a sample Database table :
CREATE TABLE user (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`email` VARCHAR( 100 ) NOT NULL ,
`password` VARCHAR( 100 ) NOT NULL ,
'confirmpassword' VARCHAR( 100 ) NOT NULL
) ENGINE = INNODB;
Connecting to Database :
database.php
<?php
class DatabaseConnection
{
private static $dbName = 'sampledb' ;
private static $dbHost = 'localhost' ;
private static $dbUsername = 'root';
private static $dbUserPassword = 'root';
private static $content = null;
public function __construct() {
die('Here the Init function is not used');
}
public static function connect()
{
if ( null == self::$content )
{
try
{
self::$content = new PDO( "mysql:host=".self::$dbHost.";"."dbname=".self::$dbName, self::$dbUsername, self::$dbUserPassword);
}
catch(PDOException $exc)
{
die($exc->getMessage());
}
}
return self::$content;
}
public static function disconnect()
{
self::$content = null;
}
}
?>
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<h3>PHP Record Operation</h3>
</div>
<div class="row">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Password</th>
<th>ConfirmPassword</th>
</tr>
</thead>
<tbody>
<?php
include 'database.php';
$pdo = DatabaseConnection::connect();
$sql = 'SELECT * FROM user ORDER BY id DESC';
foreach ($pdo->query($sql) as $row) {
echo '<tr>';
echo '<td>'. $row['email'] . '</td>';
echo '<td>'. $row['password'] . '</td>';
echo '<td>'. $row['confirmpassword'] . '</td>';
echo '</tr>';
}
DatabaseConnection::disconnect();
?>
</tbody>
</table>
</div>
</div>
</body>
</html>