Question

In: Computer Science

log in form Requirements: Form: There should be at least 2 input fields for username and...

log in form

Requirements:

Form:
- There should be at least 2 input fields for username and password.
Use an array as a database in which there are several usernames and passwords:
- Usernames can be either emails or nick names (WITHOUT WHITE SPACE)

After the user submitted the form, students must:
- sanitize the inputs
- check if there is a match with one username and one password in the array.
- If there is no match, print out an error message to user on the form.
- If it is a match, redirect the user to a welcome page.

//code to adjust

//code

<?php

if(isset($_GET['submit'])){

//sanitize the input

/* Check the error from the input:
if input from user is empty
-> get an error string variable
if input is not empty
-> use preg_match() to match the pattern
$pattern = "/^[1-9][0-9]{2}(\.|\-)[0-9]{3}(\.|\-)[0-9]{4}$/";
-> if it's a matched, get a success string variable
*/

   }
?>
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="">
<title>Lab 2-Part1</title>
</head>
<body>

<form action="" class="main-form needs-validation">
<div class="form-group">
<label for="numbers">Phone Number</label>
<input type="text" id="numbers" class="form-control" value=<?php //use PHP to print out the value the use typed in if any ?>>
<small class="form-text text-muted">xxx.xxx.xxx or xxx-xxx-xxxx</small>

      <div class="alert alert-danger">
          Must enter a valid phone number! 
          </div>
          <div class="alert alert-success">
          Phone number is valid! 
          </div>
</div>

<button type="submit" class="btn btn-primary" >Submit</button>
</form>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

Expert Solution

Here is the answer for your question in PHP and HTML Languages.

Kindly upvote if you find the answer helpful.

#####################################################################

CODE :

loginForm.php

<?php

if(isset($_GET['submit'])){
//Create arrays
$usernames = array("user123","user345","[email protected]");
$passwords = array("12345","34567","89079");
//Get user input
$username = $_GET['username'];
$password = $_GET['password'];
$phnNumber = $_GET['numbers'];
$error = "";
$success = "";

//sanitize the input
/* Check the error from the input:
if input from user is empty
-> get an error string variable
if input is not empty
-> use preg_match() to match the pattern
$pattern = "/^[1-9][0-9]{2}(\.|\-)[0-9]{3}(\.|\-)[0-9]{4}$/";
-> if it's a matched, get a success string variable
*/
$pattern = "/^[1-9][0-9]{2}(\.|\-)[0-9]{3}(\.|\-)[0-9]{4}$/";
if(empty($phnNumber)){
$error = "Must enter a valid phone number!";
}else if(preg_match($pattern,$phnNumber) != 1){
$error = "Must enter a valid phone number!";
}else{
//If phone number is correct
$success .= "Phone number is valid!";
$matched = 0;
//Check whether username and password given y user matches any array values.
for($i = 0;$i<count($usernames);$i++){
if((strcmp($usernames[$i],$username) == 0) && (strcmp($passwords[$i],$password) == 0)){
$matched = 1;
}
}
//If matched
if($matched == 1){
//Alert success message and redirect to welcome page
echo "<script>alert('Successfully Logged In');</script>";
echo "<script>window.location.href = 'welcome.html';</script>";

}else{
//Alert error message
echo "<script>alert('Invalid Credentials...Try again');</script>";
}
}

}
?>
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="">
<title>Lab 2-Part1</title>
<style>
label{
padding : 20px;
}
</style>
</head>
<body>

<form action="<?php echo $_SERVER['PHP_SELF'];?>" class="main-form needs-validation" method="GET">
<div class="form-group">
<label for="username">User Name : </label><input type="text" name="username" class="form-control"required/><br/>
<label for="password">Password : </label><input type="password" name="password" class="form-control"required/><br/>
<label for="numbers">Phone Number</label>
<input type="text" name="numbers" class="form-control" value=<?php //use PHP to print out the value the use typed in if any ?>>
<small class="form-text text-muted">xxx.xxx.xxx or xxx-xxx-xxxx</small>

<div class="alert alert-danger" id="error">
<?php
if(!empty($error)){
echo $error;
}
?>
</div>
<div class="alert alert-success" id="success">
<?php
if(!empty($success)){
echo $success;
}
?>

</div>
</div>

<button type="submit" name='submit' class="btn btn-primary" >Submit</button>
</form>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

#########################################################################

welcome.html

<!DOCTYPE html>
<html>
<head>
<title>WELCOME PAGE</title>
</head>
<body>
<center>
<h1 style="color:green;">Congratulations</h1>
<h1 style="color:yellow;">Logged In successfullt</h1>
</center>
</body>
</html>

#################################################################

SCREENSHOTS :

Please see the screenshots of the code below for the indentations of the code.

loginForm.php

###########################################################################

welcome.html

############################################################################

OUTPUT :

Initially the page looks like,

When you give any username and password but empty phone number,

when you click "submit",

When you give any user name and password but invalid Phone number,

Whe you click on "submit",

Whe you give valid phone number but invalid username and passwords.

An alert message wil be displayed

Given all valid values,(Please check the arrays in code to enter valid values)

Redirected to welcome.html page,

Any doubts regarding this can be explained with pleasure :)

venereology answered 1 year ago

Create an HTML form with the following: 2 text input fields 1 text area 2 radio...

Create an HTML form with the following: 2 text input fields 1 text area 2 radio buttons or 3 checkboxes 1 button Include labels for fields

Write a JavaScript function to get the values of form containing the following input fields: fname...

Write a JavaScript function to get the values of form containing the following input fields: fname lname address city state

Q-1) a client wants to log into a server by using username and password first name...

Q-1) a client wants to log into a server by using username and password first name a suitable http mechanism like cookie or session to make it happen and then make a signal flow diagram to show that how does it happen

Is there a simple way to create a username and password for a registeration form? The...

Is there a simple way to create a username and password for a registeration form? The username should be between 4 and 20 characters. The password should be between 4 and 12 characters, contain at least one digit, and contain at least one uppercase and one lowercase character. Select four special characters and require that the password contain at least one of them.

Using PHP and MySQL Create a simple web form with at least 5 fields Include validation...

Using PHP and MySQL Create a simple web form with at least 5 fields Include validation and error messages Create a MySQL Database Create a table to store submissions from the form Only insert new data into the database when all validation is passed Use PHP to create an HTML table showing all the content of the database New submissions should appear in table

PHP The database should have at least two tables with, at minimum, the following fields: Table...

PHP The database should have at least two tables with, at minimum, the following fields: Table customers: Fields: Table billing: Fields: customer_ID customer_ID customer_L_Name customer_L_Name customer_F_Name service customer_Title (Mr, Ms, Dr. etc,) customer_bill street_Address amt_paid city_State_Zip bill_date customer_Phone date_paid customer_Email Create a PHP page that will extract a customer’s bill amount and the amount paid. Then it will calculate the amount due. If the amount due is greater than 0, an email should be generated and sent to the customer...

For each of the models below, provide me with: The functional form used (log-log, lin-lin, lin-log...

For each of the models below, provide me with: The functional form used (log-log, lin-lin, lin-log or log-lin) Where the coefficients in bold is an elasticity, a semi-elasticity or none of them The interpretation of the coefficient in bold, i.e. “if X (say the variable name) increases by 1 unit (or 1 %) then Y (say the variable name) increases (or decreases) by --- unit (or %)”. Model 1: ln (YIELDi) = 0.56 + 0.76 x RAINFALL - 2.24 x...

in the c programming language input is given in the form The input will be of...

in the c programming language input is given in the form The input will be of the form [number of terms] [coefficient k] [exponent k] … [coefficient 1] [exponent 1] eg. 5 ─3 7 824 5 ─7 3 1 2 9 0 in this there are 5 terms with -3x^7 being the highest /* Initialize all coefficients and exponents of the polynomial to zero. */ void init_polynom( int coeff[ ], int exp[ ] ) { /* ADD YOUR CODE HERE...

Answer one of the following questions in essay form. Your submission should be at least one...

Answer one of the following questions in essay form. Your submission should be at least one page long. The essay is worth 10 points. Topic: Addiction Choose one Essay Topic for 10 points Are you addicted to technology? Does your use of technology negatively affect your daily life? Is there addiction in your family? Do you want to share your experience with addiction in family member's or friend's life?

Utilize AHP in any part of your life. Requirements: You should have at least three criteria...

Utilize AHP in any part of your life. Requirements: You should have at least three criteria and at least three options. If you cannot find anything, compare the three laptops given in the product details attachment in three criteria of your choosing using AHP.