Convert the attached chapter08-project01.html into a PHP file that looks similar
ID: 3887755 • 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. MCIS 5413 – Web Programming Fall 2017 Test 1. Test the page. Remember that you cannot simply open a local PHP page in the browser using its open command. Instead you must have the browser request the page from a server. If you are using a local server such as XAMMP, the file must exist within the htdocs folder of the server, and then the request will be localhost/some-path/chapter08project01.php. 2. Verify that the logic works by editing the values of the two variables in the book-data.php file. All the required files are attached. A sample chapter08-project01.php is also provided for your convenience with comments on where to insert your PHP code. There comments are in between XAMMP could you please give me how to connect to htdocs and reuest this file to called ----- comments on how to do this
*** 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>
'book-data.php'
<?php
$email = "randy@abc.net";
$password = "zxzx";
?>
Explanation / Answer
I am not sure whether i understand your question completely or not but i have tried my best to work with the limited details provided.
So here is my code that includes "book-data.php" and check for errors.
I don't know what to put inside options , so i left comments for you to fill in and i have also added important points where ever i thought necessary.
<!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>
<?php
include 'book-data.php';
$i = 0;
?>
<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 echo $email; ?>">
*** Write PHP code to display an error message if email variable is empty below ***
<p class="help-block"><?php if($email == ""){echo "Email Field is empty";} ?></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 echo $password; ?>">
*** Write PHP code to display an error message if password variable is empty below ***
<p class="help-block"><?php if($password == ""){echo "Password Field is empty";} ?></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
// This loop run's for five times.
for (int $i=0;$i<5;$i++)
{
// The values of value attribute and Its presented value can be desided by you.
echo "<option value='anyvalue'>Name of option</option>";
}
// Read more: http://html.com/tags/select/#ixzz4tFK4koSe
?>
</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>