Scribd
Upload
0 views7 pages

Practical 4 5 6

The document outlines practical exercises for an Advance Web Programming course, focusing on creating HTML forms and displaying student registration details using AngularJS. It includes code snippets for three practicals: a registration form, a table displaying student details, and a modified version with search and sort functionalities. Each practical is accompanied by HTML and AngularJS code to implement the required features.

Uploaded by

fomoda5195
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
0 views7 pages

Practical 4 5 6

The document outlines practical exercises for an Advance Web Programming course, focusing on creating HTML forms and displaying student registration details using AngularJS. It includes code snippets for three practicals: a registration form, a table displaying student details, and a modified version with search and sort functionalities. Each practical is accompanied by HTML and AngularJS code to implement the required features.

Uploaded by

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

Advance Web Programming (3161611)

Practical 4: Create a HTML form that will accept Enrollment No., Name, Semester, Branch, Mobile Number, Email,
Address etc. from the student and display them on the page using Angular JS Directives and Expressions.

Solution:

Prerequisite: Download AngularJS from https://angularjs.org/

Practical 4.html

<!DOCTYPE html>
<html>
<script src="angular-1.8.2/angular.min.js"></script>
<body ng-app="">
<center>
<div>
<h3>... Student Registration Details ...</h3>
<form method="get" action="">
<table border="1" cellpadding="5px">
<tr>
<td>Enrollment No.</td>
<td><input type="text" ng-model="eno"></td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" ng-model="name"></td>
</tr>
<tr>
<td>Semester</td>
<td>
<select ng-model="semester">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</td>
</tr>
<tr>
<td>Branch</td>
<td>
<select ng-model="branch">
<option value="E.C.">E.C.</option>
<option value="Electrical">Electrical</option>
<option value="I.T.">I.T.</option>
</select>
</td>
</tr>
6th Semester IT (SSEC, Bhavnagar) Page No: xx
Advance Web Programming (3161611)
<tr>
<td>Gender</td>
<td>
<input type="radio" name="radgender" ng-model="gender" value="Male">Male
<input type="radio" name="radgender" ng-model="gender" value="Female">Female
</td>
</tr>
<tr>
<td>Mobile</td>
<td><input type="text" ng-model="mobile"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" ng-model="email"></td>
</tr>
<tr>
<td>Address</td>
<td><textarea ng-model="address"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset">
</td>
</tr>
</table>
</form>
<br/><br/>
<h3>... Filled Student Registration Details ...</h3>
<div>
<table border="1" cellpadding="5px">
<tr>
<td>Enrollment No. :</td>
<td width="300px">{{ eno }}</td>
</tr>
<tr>
<td>Name : </td>
<td>{{ name }}</td>
</tr>
<tr>
<td>Semester : </td>
<td>{{ semester }}</td>
</tr>
<tr>
<td>Branch : </td>
<td>{{ branch }}</td>
</tr>
<tr>
<td>Gender : </td>
<td>{{ gender }}</td>
</tr>

6th Semester IT (SSEC, Bhavnagar) Page No: xx


Advance Web Programming (3161611)
<tr>
<td>Mobile : </td>
<td>{{ mobile }}</td>
</tr>
<tr>
<td>Email : </td>
<td>{{ email }}</td>
</tr>
<tr>
<td>Address : </td>
<td>{{ address }}</td>
</tr>
</table>
</div>
</div>
</center>
</body>
</html>

Output :

6th Semester IT (SSEC, Bhavnagar) Page No: xx


Advance Web Programming (3161611)

Practical 5: Create a webpage using AngularJS that displays details of students' objects (such as Enrollment No., Name,
Semester, Branch, Mobile Number, Email Address, Address etc.) in a tabular format with appropriate CSS effects.

Solution:

Practical 5.html

<!DOCTYPE html>
<html>
<script src="angular-1.8.2/angular.min.js"></script>
<style>
.striped {
color:black;
background-color:cyan;
}
</style>
<body>
<center>
<div ng-app="myApp" ng-controller="myCtrl">
<table border='1' cellpadding="5px">
<tr>
<th>Enrollment No.</th>
<th width="100px">Name</th>
<th>Branch</th>
<th>Semester</th>
</tr>
<tr ng-repeat="x in students" ng-class-odd="'striped'">
<td>{{x.enrollment}}</td>
<td>{{x.name}}</td>
<td>{{x.branch}}</td>
<td>{{x.semester}}</td>
</tr>
</table>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.students=[
{enrollment:'301',name:'Rajesh',semester:'3',branch:'I.T.'},
{enrollment:'501',name:'Ishwar',semester:'5',branch:'Production'},
{enrollment:'701',name:'Ronit',semester:'7',branch:'Mechanical'}];
});
</script>
</center>
</body>
</html>

6th Semester IT (SSEC, Bhavnagar) Page No: xx


Advance Web Programming (3161611)

Output :

6th Semester IT (SSEC, Bhavnagar) Page No: xx


Advance Web Programming (3161611)
Practical 6: Modify Practical 5 and provide a search field to search records on the top of the page and also allow user to
sort table according to the column values when user clicks on a column using filter.

Solution:

Practical 6.html

<html>
<script src="angular-1.8.2/angular.min.js"></script>
<style>
.striped {
color:black;
background-color:cyan;
}
</style>
<body>
<center>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Enter Search String : <input type="text" ng-model="test"></p>
<table border='1' cellpadding="5px">
<tr>
<th ng-click="orderByMe('enrollment')">Enrollment No.</th>
<th width="200px" ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('branch')">Branch</th>
<th ng-click="orderByMe('semester')">Semester</th>
</tr>
<tr ng-repeat="x in students | orderBy:myOrder | filter:test" ng-class-odd="'striped'">
<td>{{x.enrollment}}</td>
<td>{{x.name}}</td>
<td>{{x.branch}}</td>
<td>{{x.semester}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.students=[
{enrollment:'301',name:'Rajesh',semester:'3',branch:'I.T.'},
{enrollment:'501',name:'Ishwar',semester:'5',branch:'Production'},
{enrollment:'701',name:'Ronit',semester:'7',branch:'Mechanical'}];
$scope.orderByMe = function(x) {
$scope.myOrder = x;
}
});
</script>
</center>
</body>
</html>
6th Semester IT (SSEC, Bhavnagar) Page No: xx
Advance Web Programming (3161611)

Output :

6th Semester IT (SSEC, Bhavnagar) Page No: xx

You might also like