Scribd
Upload
44 views4 pages

Operation Sheet 2.3

This document provides instructions for creating a simple grade computation application using Bootstrap. It details how to set up the necessary HTML, CSS, JavaScript and PHP code to build a form with inputs for student name, department, quiz, exam and project scores that will calculate a total grade and letter equivalent when submitted.

Uploaded by

Markos Mathewos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
44 views4 pages

Operation Sheet 2.3

This document provides instructions for creating a simple grade computation application using Bootstrap. It details how to set up the necessary HTML, CSS, JavaScript and PHP code to build a form with inputs for student name, department, quiz, exam and project scores that will calculate a total grade and letter equivalent when submitted.

Uploaded by

Markos Mathewos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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: Irwin C. Cansejo, MIT Page 1


Advanced Web Technology October 2016
Learning Guide 2 – Using Advanced Bootstrap Technology
Operation Sheet 2.3 Advanced Bootstrap Technology

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">

<!-- Here you will put the Panel -->

</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.

<div class="form-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>

Course Title: Author: Irwin C. Cansejo, MIT Page 2


Advanced Web Technology October 2016
Learning Guide 2 – Using Advanced Bootstrap Technology
Operation Sheet 2.3 Advanced Bootstrap Technology

9. Inserting the Total Quiz label and textbox. Insert the following tags after the department group.

<div class="form-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.

<div class="form-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.

<div class="form-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.

<div class="form-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.

<div class="form-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>

Course Title: Author: Irwin C. Cansejo, MIT Page 3


Advanced Web Technology October 2016
Learning Guide 2 – Using Advanced Bootstrap Technology
Operation Sheet 2.3 Advanced Bootstrap Technology

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';
}

}
?>

Course Title: Author: Irwin C. Cansejo, MIT Page 4


Advanced Web Technology October 2016

You might also like