Convert the attached chapter08-project01.html into a PHP file that looks similar
ID: 3870262 • Letter: C
Question
Convert the attached chapter08-project01.html into a PHP file that looks similar to the one shown below.
Instructions :
1. You have been provided with an HTML file (chapter08-project01.html) that includes all the necessary markup. Save this file as chapter08-project01.php.
2. Use the PHP include() function to include the file book-data.php. This file sets the values of two variables: $email and $password.
3. Use a for loop to output the elements.
4. Use an if...else statement to display an error message if the $email variable is empty.
5. Do the same thing as Step 4 for the $password variable.
please fulfill the above instructions in php file which i am pasting below and also write the php code where ever its written as write php code
chapter08-project01.html
*** Write PHP code to include 'book-data.php' ***
*** Write PHP code (if-else statements) to set error messages to appropriate variables
if $email and $password variables are empty ***
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapter 8</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap3_defaultTheme/dist/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="chapter08-project01.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="bootstrap3_defaultTheme/assets/js/html5shiv.js"></script>
<script src="bootstrap3_defaultTheme/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<div id="login">
<div class="page-header">
<h2>Login</h2>
</div>
<form role="form">
<div class="form-group has-error">
<label for="exampleInputEmail1">Email address</label>
*** Write PHP code to set the value of email field below ***
<input type="email" class="form-control" name="email" value="<?php ?>">
*** Write PHP code to display an error message if email variable is empty below ***
<p class="help-block"><?php ?></p>
</div>
<div class="form-group has-error">
<label for="exampleInputPassword1">Password</label>
*** Write PHP code to set the value of password field below ***
<input type="password" class="form-control" name="password" value="<?php ?>">
*** Write PHP code to display an error message if password variable is empty below ***
<p class="help-block"><?php ?></p>
</div>
<div class="form-group">
<label for="exampleInputFile">Server</label>
<select name="server" class="form-control">
*** Write PHP code (using a for loop) to output the <option> elements below ***
<?php
?>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div> <!-- end container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="bootstrap3_defaultTheme/assets/js/jquery.js"></script>
<script src="bootstrap3_defaultTheme/dist/js/bootstrap.min.js"></script>
</body>
</html>
Explanation / Answer
Project 1.php
-------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapter08-Project01</title>
<link href="bootstrap3_defaultTheme/dist/css/bootstrap.css" rel="stylesheet">
<link href="Chapter 8 - Project 1.css" rel="stylesheet">
</head>
<?php include 'book-data.php';?>
<?php
$name_E = $email_E = $password_E = "";
$name = $email = $password = "";
if ($_SERVER["REQUEST_METHOD"] == "POST" || $_SERVER["REQUEST_METHOD"] == "GET") {
if (empty($_POST["email"])) {
$email_E = "Email is required";
}
if (empty($_POST["password"])) {
$gender_E = "Password is required";
}
}
?>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<div id="login">
<div class="page-header">
<h2>Login</h2>
</div>
<form role="form">
<div class="form-group has-error">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" name="email" value="<?php echo htmlentities($email) ?>">
<p class="help-block">
<?php echo $password_E; ?>
</p>
</div>
<div class="form-group has-error">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" name="password" value="<?php echo htmlentities($password) ?>">
<p class="help-block">
<?php echo $password_E; ?>
</p>
</div>
<div class="form-group">
<label for="exampleInputFile">Server</label>
<select name="server" class="form-control">
<?php
for($i=1; $i<=4; $i++)
{
echo "<option value=".$i.">".$i."</option>";
}
?>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<script src="bootstrap3_defaultTheme/assets/js/jquery.js"></script>
<script src="bootstrap3_defaultTheme/dist/js/bootstrap.min.js"></script>
</body>
</html>
---------------------------------------------------------------------------------------------------
book-data.php
-----------------------------------------
<?php
$email = "randy@abc.net";
$password = "zxzx";
?>
-----------------------------------------------------------------------------------------------------
Project 1.html
-----------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chapter08-Project01</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="Chapter 8 - Project 1.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<div id="login">
<div class="page-header">
<h2>Login</h2>
</div>
<form role="form">
<div class="form-group has-error">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" name="email" value="">
<p class="help-block">Enter an email</p>
</div>
<div class="form-group has-error">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" name="password">
<p class="help-block">Email and password not found</p>
</div>
<div class="form-group">
<label for="exampleInputFile">Server</label>
<select name="server" class="form-control">
<option>Server 1</option>
<option>Server 2</option>
<option>Server 3</option>
<option>Server 4</option>
<option>Server 5</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<script src="jquery.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
----------------------------------------------------------------------------------------------------
Project 1.css
--------------------------------------------------------
body {
background-color: gray;
}
div#login {
background-color: white;
padding: 1em;
margin-top: 3em;
}