Dima,s Blog: Web developing using angularjs bootstrap and php

Hi, I did an assignment given by our university. I think this will help you to understand how to use angularjs, bootstrap and php to develop dynamic web sites. I'll put the question and the answer I developed as well.

Task 03
Prepare a HTML form to get subject marks for each student (three subjects for each student) and put them into an array.
Array should be like;
Student 01 marks01 marks02 marks03
Student02 marks01 marks02 marks03
…………
Number of students is 10
Calculate the total marks for each student and save them in an array under “Total”
Calculate the average for each student and save them in the same array under “Average”
Sort the array based on the average marks
Print the results on a table including the student id/name, total, average

Answer

marks.html file

<!doctype html>  
      <html ng-app><head>  
      <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.css">  
      <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css">  
      <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap-responsive.css">  
      <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap-responsive.min.css">  
      <script type="text/javascript" src="lib/angular.min.js"></script>  
      <script type="text/javascript" src="lib/jquery-2.0.0.min.js"></script>  
      <script type="text/javascript" src="lib/jstorage.js"></script>  
      <script type="text/javascript" src="lib/bootstrap/js/bootstrap.js"></script>  
      <script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>  
      <script type="text/javascript" src="marks.js"></script>  
 </head>  
 <body ng-controller="marks">  
      <div class="container" >  
           <div class="row">  
                <div class="span2">  
                     <ul class="nav nav-list">  
                      <li class="active"><a href="#">{{name}}</a></li>   
                      <li class="active">Dimantha M.G.T</li>   
                      <li class="active">CST</li>   
                     </ul>  
                </div>  
                <div class="span10">  
                     <form action="marks.php" method="post">  
                     <ul>  
                          <li ng-repeat="student in data" class="control-group success">  
                               <input type="text" ng-model="student.Name" name="stu[]"/><input type="text" ng-model="student.mks1" name="m1[]"/><input type="text" ng-model="student.mks2" name="m2[]"/><input type="text" ng-model="student.mks3" name="m3[]"/></li>  
                               <li class="control-group info"><input type="text" placeholder="Name" ng-model="stdName"/><input type="text"placeholder="mks1" ng-model="mrk1"/><input type="text"placeholder="mks2" ng-model="mrk2"/><input type="text"placeholder="mks3" ng-model="mrk3"/></li></li>  
                               <li><input type="button" ng-click="addStudent()" value="Add Student" class="btn btn-success"/></li><br>  
                               <li><input type="submit" value="Submit" class="btn btn-info"/></li>  
                     </ul>  
                     </form>  
                </div>  
           </div>  
      </div>  
 </body>  
 </html>

marks.js file

function marks ($scope) {
 // body...
 $scope.name="CST/10/0011";
 $scope.data=[{
  "Name":"bbw","mks1":54,"mks2":67,"mks3":71
  },{"Name":"thilina","mks1":44,"mks2":84,"mks3":90}]

 $scope.current={
  
 }

 $scope.addStudent=function(){
  //alert("bbbb")
  $scope.data.push({"Name":$scope.stdName,"mks1":$scope.mrk1,"mks2":$scope.mrk2,"mks3":$scope.mrk3})
  $scope.stdName=""
  $scope.mrk1=""
  $scope.mrk2=""
  $scope.mrk3=""
  console.log($scope.data)
 }

 $scope.submit=function(){

 }
 
 console.log($scope.data)


}

marks.php file

<html>
<head>
<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.css">
 <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap-responsive.css">
 <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap-responsive.min.css">
</head>
<body>
<div class="row">
 <div class="span2">
  <ul class="nav nav-list">
   <li class="active"><a href="#">CST/10/0011</a></li> 
   <li class="active">Dimantha M.G.T</li> 
   <li class="active">CST</li> 
  </ul>
 </div>
 <div class="span10">
<?php

$name=$_POST["stu"];
$marks1=$_POST["m1"];
$marks2=$_POST["m2"];
$marks3=$_POST["m3"];


for ($i=0; $i<count($marks1); $i++){
 $tot= $marks1[$i]+$marks2[$i]+$marks3[$i];
 $av=$tot/3;
 $total[$i]=array('Total'=>$tot,'Average'=>$av);

}

//sort($total);

foreach ($total as $key => $row) {
    $t[$key]  = $row['Total'];
    $avg[$key] = $row['Average'];
 $id[$key] = $name[$key];
}

array_multisort($avg, SORT_DESC, $t, SORT_ASC,$id, SORT_ASC, $total,$name);

echo "<table class='table table-hover'>";
echo "<tr><th>Student</th><th>Average</th><th>Total Marks</th></tr>";
for ($i=0; $i<count($marks1); $i++){
 printf("<tr><td>%s</td><td>%.2f</td><td>%.2f</td></tr>",$name[$i],$total[$i]['Average'],$total[$i]['Total']);
}
echo "</table>";
?>
</div>

</div>
</body>
</html>

Download the full project with resources http://www.mediafire.com/download/73hzigoh8xxwvdb/answer.zip

Dima,s Blog

Saturday, May 25, 2013

Web developing using angularjs bootstrap and php

No comments:

Post a Comment

Followers