Convert the attached chapter08-project01.html into a PHP file that looks similar
ID: 3887232 • 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
thanks
chapter08-project01.html code
<!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>
<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> <!-- 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
Well I couldn't find any comments as to where to add php. Also you didn't include your book-data.php, so I made a new one. I don't know what's in your book-data.php. Here is mine:
book-data.php
====
<?php
$email = "rj@email.com";
$password = "**********";
?>
index.php
====
<!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'); ?>
<?php if (!isset($email) || !isset($password)) { ?>
<?php echo "Error! No email / password"; ?>
<?php } ?>
<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">
<?php for ($i = 0; $i < 4; ++$i) { ?>
<option>Server <?php echo $i+1; ?></option>
<?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>
Notes: