Operation Sheet 2.3

Learning Guide 2 – Using Advanced Bootstrap Technology
Operation Sheet 2.3 Advanced Bootstrap Technology
Simple Grade Computation
1. Create a new php file using your Dreamweaver and save it as operation2.3.php inside the folder you
created.
2. Insert the line of code below the <meta charset="utf-8"> tag.
<meta name="viewport" content="width=device-width, initial-scale=1">
3. After your </title> tag, link the following CSS.
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="vendor/bootstrap-social/bootstrap-social.css" rel="stylesheet">
<link href="dist/css/customized.css" rel="stylesheet">
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
4. After the </body> tag, add the following scripts.
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/metisMenu/metisMenu.min.js"></script>
<script src="dist/js/customized.js"></script>
Course Title: Author: Tesfaye Yirga Page 1

Advanced Web Technology October 2024
5. Insert the following html tags inside the <body> ….</body> tags.
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">

</div>
</div>
</div>
6. Designing the Panel. Insert the following tags inside the <div class="col-md-4">
<div class=" panel panel-red">

<div class="panel-heading"> Simple Grade Computation</div>
<div class="panel-body">
<form action = "<?php $_PHP_SELF ?>" method = "POST">
</form>
</div>
<div class="panel-footer"> Please type the necessary information</div>
</div>
7. Inserting the name label and textbox. Insert the following tags inside the <form> tag.
<div class="form-group">
<label for="Name"> Name:</label>
<input type="text" class="form-control" name="txtname" placeholder="Enter your name">
</div>
8. Inserting the Department label and select. Insert the following tags after the txtname group.
<label for="Department">Department</label>
<select class="form-control" name="txtdepartment">
<option>ICT</option>
<option>Automotive</option>
<option>Construction</option>
<option>Manufacturing</option>
<option>Electrical-Electronics</option>
<option>Garments</option>
<option>Railways</option>
</select>
</div>

9. Inserting the Total Quiz label and textbox. Insert the following tags after the department group.
<label for="Quiz">Total Quiz (1-20):</label>
<input type = "number" class="form-control" name = "txtquiz" min="0" max="20" required/>
</div>
10. Inserting the LAP Test label and textbox. Insert the following tags after the Quiz group.
<label for="LAP">Total LAP Test (1-20):</label>
<input type = "number" class="form-control" name = "txtlap" min="0" max="20" required/>
</div>
11. Inserting the Project label and textbox. Insert the following tags after the LAP Test group.
<label for="Project"> Total Project (1-20):</label>
<input type = "number" class="form-control" name = "txtproj" min="0" max="20" required/>
</div>
12. Inserting the Final Exam label and textbox. Insert the following tags after the Project group.
<label for="FinalExam"> Total Final Exam (1-40):</label>
<input type = "number" class="form-control" name = "txtfinal" min="0" max="40" required/>
</div>
13. Inserting the Submit and Reset Button. Insert the following tags after the password group.
<button type="submit" class="btn btn-block btn-social btn-danger" name="submit"> <i class="fa fa-table"></i>Compute</button>
<button type="reset" class="btn btn-block btn-social btn-danger" name="reset"> <i class="fa fa-refresh"></i>Reset Inputs</button>
</div>

14. Insert the following php scripts after the </form> tag.
<?php
if (isset($_REQUEST['submit']))
{
extract($_REQUEST);
$name=$_POST['txtname'];
$department=$_POST['txtdepartment'];
$quiz=$_POST['txtquiz'];
$lap=$_POST['txtlap'];
$proj=$_POST['txtproj'];
$final=$_POST['txtfinal'];
$total=$quiz+$lap+$proj+$final;
echo 'Hello '. $name;

echo '<br>';
echo 'Your Department is '. $department;
echo '<br>';
echo 'Your Total Grade is '. $total;
echo '<br>';
if ($total>=85)
{
echo 'Your Grade is Equivalent to A';
}
elseif ($total>=80)
{
echo 'Your Grade is Equivalent to A-';
}
elseif ($total>=75)
{
echo 'Your Grade is Equivalent to B+';
}
elseif ($total>=70)
{
echo 'Your Grade is Equivalent to B';
}
elseif ($total>=65)
{
echo 'Your Grade is Equivalent to B-';
}
elseif ($total>=60)
{
echo 'Your Grade is Equivalent to C';
}
elseif ($total>=55)
{
echo 'Your Grade is Equivalent to D';
}
else
{
echo 'Your Grade is Equivalent to F';
}
echo '<br>';
if ($total>=55)
{
echo 'Your Grade Passed';
}
else
{
echo 'Your Grade Failed';
}
}
?>

Operation Sheet 2.3

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Operation Sheet 2.3

Uploaded by

Copyright:

Available Formats

Learning Guide 2 – Using Advanced Bootstrap Technology

Operation Sheet 2.3 Advanced Bootstrap Technology

Simple Grade Computation

<meta name="viewport" content="width=device-width, initial-scale=1">

3. After your </title> tag, link the following CSS.

<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<link href="vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

<link href="vendor/bootstrap-social/bootstrap-social.css" rel="stylesheet">

<link href="dist/css/customized.css" rel="stylesheet">

<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

4. After the </body> tag, add the following scripts.

Course Title: Author: Tesfaye Yirga Page 1

<div class=" panel panel-red">

Course Title: Author: Tesfaye Yirga Page 2

Course Title: Author: Tesfaye Yirga Page 3

echo 'Hello '. $name;

Course Title: Author: Tesfaye Yirga Page 4

You might also like