PHP & HTML For this assignment part 1, you will create a form and a PHP processo
ID: 3914147 • Letter: P
Question
PHP & HTML
For this assignment part 1, you will create a form and a PHP processor for it. The form will allow the user to select some styling options such as text color, font family, etc. (Include at least 3 style attributes.) The form will also contain a text area where the user can type a paragraph or more of text. The form processor will use the styling selections to style the text typed in the text area and produce a page displaying the content of the text area. For simplicity, use an embedded style sheet to achieve this effect. The contents of this style sheet will be produced by PHP from the submitted form data. Use a method that avoids relying on the form values being valid style attributes. In other words, for the form elements use your own choices for names, and then convert these to style attributes in the PHP. For example, instead of having a form menu option whose value is Times Roman and inserting that value directly into the style sheet, give that option a name like times and have the PHP convert it to "Times Roman" for the style sheet. You can have a static HTML form and a separate PHP processor script, or an all-in-one script that both generates the form and processes it.
Explanation / Answer
Here I have created two php files
1. PhpDataProcessor.php - For selecting the Color, Font-family and Font-Size and enter Text into TextArea from the form.
2. PrintData.php - For Displaying the text entered in the textarea by applying the selected style sheet values and applying the style to text.
1 PhpDataProcessor.php:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row" >
<form action="PrintData.php" method="POST" class="form-horizontal">
<fieldset>
<br /><br />
<!-- Select Color -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectColor">Select Color</label>
<div class="col-md-4">
<select id="selectColor" name="selectColor" class="form-control">
<option value="Red">RED</option>
<option value="Blue">BLUE</option>
<option value="Green">GREEN</option>
</select>
</div>
</div>
<!-- Select Font Family -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectFont">Select Font-Family</label>
<div class="col-md-4">
<select id="selectFont" name="selectFont" class="form-control">
<option value="Times">TIMES</option>
<option value="Arial">ARIAL</option>
<option value="Bodoni">BODONI</option>
</select>
</div>
</div>
<!-- Select Font-Size -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectFontSize">Select Font-Size</label>
<div class="col-md-4">
<select id="selectFontSize" name="selectFontSize" class="form-control">
<option value="20px">SMALL</option>
<option value="30px">MEDIUM</option>
<option value="40px">LARGE</option>
</select>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="textarea">Text Area</label>
<div class="col-md-4">
<textarea class="form-control" id="textData" name="textData">Enter your text</textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-4">
<input type="submit" class="btn btn-success" value="SUBMIT" />
</div>
</div>
</fieldset>
</form>
</div>
</div>
</body>
</html>
Explaination : Select Color, Font-family, Font-Size from the select list and Enter Text into the Textarea
Then Submit the form by clicking the submit button.
After submitting the form it will redirect to new page PrintData.php where php will process the form data and apply it to the text using css styling.
2. PrintData.php :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Print Data</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$color = $_POST['selectColor'];
$font_family = $_POST['selectFont'];
$font_size = $_POST['selectFontSize'];
$data = $_POST['textData'];
$font =null;
if($font_family == "Times")
$font='Times New Roman';
if($font_family == "Arial")
$font='Arial';
if($font_family == "Bodoni")
$font='Bodoni MT';
?>
<p>
<?php echo $data; ?>
</p>
<?php
}
?>
</div>
</div>
</div>
</body>
</html>
Note : Here I have included Bootstrap libraries for UI desgin purpose, so used bootstrap design class for formatting the html layout.
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.