full stack practical assignment msc cs.pdf

Index
Assignment
NO:
Name of Practical Assignment Signature
1 Create an HTML form that contain the Student Registration
details and write a JavaScript to validate Student first and last
name as it should not contain other than alphabets and age
should be between 18 to 50.
2 Create an HTML form that contain the Employee Registration
details and write a JavaScript to validate DOB, Joining Date,
and Salary.
3 Create an HTML form for Login and write a JavaScript to
validate email ID using Regular Expression.
4 Write angular JS by using ng-click Directive to display an alert
message after clicking the element
5 Write an AngularJS script for addition of two numbers using
ng-init, ng-model & ng bind. And also Demonstrate ng-show,
ng-disabled, ng-click directives on button component.
6 Using angular js display the 10 student details in Table format
(using ng-repeat directive use Array to store data
7 Using angular js Create a SPA that show Syllabus content of all
subjects of MSC(CS) Sem II (use ng-view)
8 Using angular js create a SPA to accept the details such as
name, mobile number, pincode and email address and make
validation. Name should contain character only, SPPU M.Sc.
Computer Science Syllabus 2023-24 59 mobile number should
contain only 10 digit, Pincode should contain only 6 digit,
email id should contain only one @, . Symbol
9 Create an HTML form using AngularJS that contain the Student
Registration details and validate Student first and last name as it
should not contain other than alphabets and age should be
between 18 to 50 and display greeting message depending on
current time using ng-show (e.g. Good Morning, Good
Afternoon, etc.)(Use AJAX).
10 Create angular JS Application that show the current Date and
Time of the System(Use Interval Service)
11 Using angular js create a SPA to carry out validation for a
username entered in a textbox. If the textbox is blank, alert
„Enter username‟. If the number of characters is less than three,
alert ‟ Username is too short‟. If value entered is appropriate
the print „Valid username‟ and password should be minimum 8
characters
12 Create a Node.js file that will convert the output "Hello
World!" into upper-case letters
13 Using nodejs create a web page to read two file names from
user and append contents of first file into second file
14 Create a Node.js file that opens the requested file and returns
the content to the client If anything goes wrong, throw a 404
erro

15 Create a Node.js file that writes an HTML form, with an upload
field
16 Create a Node.js file that demonstrate create database and table
in MySQL
17 Create a node.js file that Select all records from the "customers"
table, and display the result object on console
18 Create a node.js file that Insert Multiple Records in "student"
table, and display the result object on console
19 Create a node.js file that Select all records from the "customers"
table, and delete the specified record.
20 Create a Simple Web Server using node js
21 Using node js create a User Login System
22 Write node js script to interact with the file system, and serve a
web page from a File

Assignment no: 1
Create an HTML form that contain the Student Registration details and write a
JavaScript to validate Student first and last name as it should not contain other than
alphabets and age should be between 18 to 50.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function validateName() {
var firstName = document.querySelector("#first-name").value;
var lastName = document.querySelector("#last-name").value;
var namePattern = /^[A-Za-z]+$/;
if (!namePattern.test(firstName) || !namePattern.test(lastName)) {
alert("Please enter valid first and last names (only alphabets).");
return false;
}
return true;
}
function validateAge() {
var age = parseInt(document.querySelector("#age").value);
if (isNaN(age) || age < 18 || age > 50) {
alert("Age must be between 18 and 50.");
return false;
}
return true;
}
function validateForm() {
var isValidName = validateName();
var isValidAge = validateAge();
if (isValidName && isValidAge) {
alert("Registration successful!");
return true;
} else {
alert("One or more fields are incorrectly set.");
return false;
}

}
</script>
</head>
<body>
<h2>STUDENT REGISTRATION FORM</h2>
<form name="registrationForm" method="post" onsubmit="return
validateForm()">
<label for="first-name">First Name:</label>
<input type="text" id="first-name" required><br>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" required><br>
<label for="age">Age:</label>
<input type="number" id="age" min="18" max="50" required><br>
<input type="submit" value="Register">
</form>
</body>
</html>
Output:
Assignment no: 2
Create an HTML form that contain the Employee Registration details and write a
JavaScript to validate DOB, Joining Date, and Salary.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Employee Registration Form</title>

</script>
</head>
<body>
<h2>EMPLOYEE REGISTRATION FORM</h2>
<form name="employeeForm" onsubmit="return validateForm()">
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" required><br>
<label for="joining-date">Joining Date:</label>
<input type="date" id="joining-date" required><br>
<label for="salary">Salary:</label>
<input type="number" id="salary" min="1" step="any" required><br>
<input type="submit" value="Register">
</form>
</body>
</html>
Output:

Assignment no: 3
Create an HTML form for Login and write a JavaScript to validate email ID using
Regular Expression.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login Form</title>
function validateEmail() {
var email = document.querySelector("#email").value;
var emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/;
if (!emailPattern.test(email)) {
alert("Please enter a valid email address.");
return false;
}
return true;
}
var isValidEmail = validateEmail();
if (isValidEmail) {
alert("Login successful!");
return true;
} else {
alert("Invalid email address.");
return false;
}
}
</script>
</head>
<body>
<h2>LOGIN FORM</h2>
<form name="loginForm" onsubmit="return validateForm()">
<label for="email">Email:</label>
<input type="email" id="email" required><br>
<input type="submit" value="Login">
</form>
</body>
</html>
Output:

Assignment no: 4
Write angular JS by using ng-click Directive to display an alert message after clicking
the element
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login Form</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<h2>LOGIN FORM</h2>
<div ng-controller="LoginController">
<label for="email">Email:</label>
<input type="email" id="email" ng-model="userEmail" required><br>
<button ng-click="showAlert()">Login</button>
</div>
<script>
angular.module('myApp', [])
.controller('LoginController', function ($scope) {
$scope.showAlert = function () {
alert('Login successful!'); // Display an alert message
};
});
</script>
</body>
</html>
Output:

Assignment no: 5
Write an AngularJS script for addition of two numbers using ng-init, ng-model &
ng bind. And also Demonstrate ng-show, ng-disabled, ng-click directives on button
component.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script
</head>
<body ng-controller="myCtrl">
<h2>Calculator</h2>
<p>First Number: <input type="number" ng-model="a" /></p>
<p>Second Number: <input type="number" ng-model="b" /></p>
<p>Sum: <span ng-bind="a + b"></span></p>
<button ng-click="calculateSum()" ng-show="a && b" ng-disabled="!a ||
!b">Calculate</button>
<script>
.controller('myCtrl', function ($scope) {
$scope.calculateSum = function () {
$scope.sum = $scope.a + $scope.b;
};
});
</script>
</body>
</html>
Output:

Assignment no: 6
Using angular js display the 10 student details in Table format (using ng-repeat
directive use Array to store data )
<!DOCTYPE html>
<head>
<script
</head>
<h2>Student Details</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Roll Number</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in students">

<td>{{ student.name }}</td>
<td>{{ student.rollNumber }}</td>
<td>{{ student.grade }}</td>
</tr>
</tbody>
</table>
<script>
// Sample student data (you can replace this with your actual data)
$scope.students = [
{ name: 'Alice', rollNumber: '101', grade: 'A' },
{ name: 'Bob', rollNumber: '102', grade: 'B' },
{ name: 'Charlie', rollNumber: '103', grade: 'C' },
// Add more student objects here...
];
});
</script>
</body>
</html>

Assignment no: 7
Using angular js Create a SPA that show Syllabus content of all subjects of MSC(CS)
Sem II (use ng-view)

<!DOCTYPE html>
<head>
<script
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-
route.min.js"></script>
</head>
<body>
<h1>MSC (CS) Semester II Syllabus</h1>
<p><a href ="#subject1">Design and Analsis of Algorithm</a></p>
<p><a href ="#subject2">Full Stack Development</a></p>
<div ng-view></div>
<script>
angular.module('myApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/subject1', {
templateUrl: 'subject1.html',
controller: 'Subject1Controller'
})
.when('/subject2', {
templateUrl: 'subject2.html',
controller: 'Subject2Controller'
})
// Add more routes for other subjects
.otherwise({
redirectTo: '/subject1' // Default route
});
})
.controller('Subject1Controller', function ($scope) {
// Load syllabus data for subject 1
// Example: $scope.syllabus = getSubject1Syllabus();

})
.controller('Subject2Controller', function ($scope) {
// Load syllabus data for subject 2
// Example: $scope.syllabus = getSubject2Syllabus();
});
</script>
</body>
</html>
Output:

Assignment no: 8
Using angular js create a SPA to accept the details such as name, mobile number,
pincode and email address and make validation. Name should contain character
only, SPPU M.Sc. Computer Science Syllabus 2023-24 59 mobile number should
contain only 10 digit, Pincode should contain only 6 digit, email id should contain
only one @, . Symbol
<!DOCTYPE html>
<head>
<script
</head>
<h2>User Details</h2>
<form name="userForm">
<p>
<label for="name">Name:</label>
<input type="text" id="name" ng-model="user.name" required pattern="[A-
Za-z ]+">
</p>
<p>
<label for="mobile">Mobile Number:</label>
<input type="tel" id="mobile" ng-model="user.mobile" required pattern="[0-
9]{10}">
</p>
<p>
<label for="pincode">Pincode:</label>
<input type="text" id="pincode" ng-model="user.pincode" required
pattern="[0-9]{6}">
</p>
<p>
<label for="email">Email Address:</label>
<input type="email" id="email" ng-model="user.email" required>
</p>
<button ng-click="validateUser()" ng-
disabled="userForm.$invalid">Submit</button>
</form>
<div ng-show="submitted">
<h3>Submitted Details:</h3>
<p>Name: {{ user.name }}</p>
<p>Mobile Number: {{ user.mobile }}</p>
<p>Pincode: {{ user.pincode }}</p>
<p>Email Address: {{ user.email }}</p>

</div>
<script>
$scope.user = {}; // Initialize user object
$scope.submitted = false;
$scope.validateUser = function () {
// Perform additional validation if needed
// For now, just mark as submitted
$scope.submitted = true;
};
});
</script>
</body>
</html>

Output:
Assignment no: 9
Create an HTML form using AngularJS that contain the Student Registration details
and validate Student first and last name as it should not contain other than
alphabets and age should be between 18 to 50 and display greeting message
depending on current time using ng-show (e.g. Good Morning, Good Afternoon,
etc.)(Use AJAX).

<!DOCTYPE html>
<html ng-app="studentApp">
<head>
<title>Student Registration Form</title>
<script
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body ng-controller="StudentController">
<h1>Student Registration Form</h1>
<form name="registrationForm" novalidate>
<p>
First Name:
<input
type="text"
name="firstName"
ng-model="student.firstName"
ng-pattern="/^[a-zA-Z]*$/"
required
/>
<span ng-show="registrationForm.firstName.$error.pattern">
First name should contain only alphabets.
</span>
</p>
<p>
Last Name:
<input
type="text"
name="lastName"
ng-model="student.lastName"
ng-pattern="/^[a-zA-Z]*$/"
required
/>
<span ng-show="registrationForm.lastName.$error.pattern">
Last name should contain only alphabets.
</span>
</p>
<p>
Age:
<input
type="number"
name="age"

ng-model="student.age"
min="18"
max="50"
required
/>
<span ng-show="registrationForm.age.$error.min ||
registrationForm.age.$error.max">
Age must be between 18 and 50.
</span>
</p>
<p>
<button type="submit">Register</button>
</p>
</form>
<div ng-show="greetingMessage">
<p>{{ greetingMessage }}</p>
</div>
<script>
angular.module('studentApp', []).controller('StudentController', function ($scope)
{
$scope.student = {
firstName: '',
lastName: '',
age: null,
};
// Determine the greeting message based on the current time
var currentTime = new Date().getHours();
if (currentTime >= 5 && currentTime < 12) {
$scope.greetingMessage = 'Good Morning!';
} else if (currentTime >= 12 && currentTime < 18) {
$scope.greetingMessage = 'Good Afternoon!';
} else {
$scope.greetingMessage = 'Good Evening!';
}
});
</script>
</body>
</html>
Output:

Assignment no: 10
Create angular JS Application that show the current Date and Time of the
System(Use Interval Service)
<!DOCTYPE html>
<head>
<title>Current Date and Time</title>
<script
</head>
<body ng-controller="MyController">
<h1>Current Date and Time</h1>
<p>The current time is: {{ theTime }}</p>
<script>
angular.module('myApp', []).controller('MyController', function ($scope,
$interval) {

$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
</script>
</body>
</html>
Output:
Assignment no: 11
Using angular js create a SPA to carry out validation for a username entered in a
textbox. If the textbox is blank, alert „Enter username‟. If the number of characters
is less than three, alert ‟ Username is too short‟. If value entered is appropriate the
print „Valid username‟ and password should be minimum 8 characters
<!DOCTYPE html>
<head>
<title>Username Validation</title>
<script
</head>
<body ng-controller="ValidationController">
<h1>Username Validation</h1>
<input type="text" ng-model="username" placeholder="Enter username">
<button ng-click="validateUsername()">Validate</button>
<div ng-show="validationMessage">

{{ validationMessage }}
</div>
<script>
.controller('ValidationController', function ($scope) {
$scope.validateUsername = function () {
if (!$scope.username) {
$scope.validationMessage = 'Enter username';
} else if ($scope.username.length < 3) {
$scope.validationMessage = 'Username is too short';
} else {
$scope.validationMessage = 'Valid username';
}
};
});
</script>
</body>
</html>
Output:

Assignment no: 12
Create a Node.js file that will convert the output "Hello World!" into upper-case
letters
var http = require('http');
var uc = require('upper-case');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(uc.upperCase("Hello World!"));
res.end();
}).listen(8080);
Output:
Assignment no: 13
Using nodejs create a web page to read two file names from user and append
contents of first file into second file
// Import necessary modules
const fs = require('fs');

});
}
});
});
// Start the server
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});
Output:
Assignment no: 14
Create a Node.js file that opens the requested file and returns the content to the
client If anything goes wrong, throw a 404 error
const http = require('http');
const path = require('path');
const server = http.createServer((req, res) => {
// Extract the requested file name from the URL
const fileName = req.url.slice(1); // Remove the leading slash
// Construct the file path
const filePath = path.join(__dirname, fileName);
// Check if the file exists
fs.access(filePath, fs.constants.F_OK, (err) => {
if (err) {
// File not found (404 error)
res.writeHead(404, { 'Content-Type': 'text/plain' });
res.end('File not found');

} else {
// Read the file and return its content
fs.readFile(filePath, 'utf8', (readErr, data) => {
if (readErr) {
// Error reading the file
res.end('Internal server error');
} else {
// Successful response
res.end(data);
}
});
}
});
});
const port = process.env.PORT || 3000;
server.listen(port, () => {
console.log(`Server running on port ${port}`);
});
Output:

Assignment no: 15
Create a Node.js file that writes an HTML form, with an upload field
// Import the required modules
const formidable = require('formidable');
// Create an HTTP server
http.createServer(function (req, res) {
if (req.url === '/fileupload') {
// Handle file upload
const form = new formidable.IncomingForm();
form.parse(req, function (err, fields, files) {
if (err) {
res.end('Error parsing form data.');
return;
}
// Move the uploaded file to a desired location
const oldPath = files.filetoupload.path;
const newPath = 'C:UsershrushDesktopcoding practiceweb' +
files.filetoupload.name; // Specify your desired path
fs.rename(oldPath, newPath, function (err) {
if (err) {
res.end('Error moving file.');
return;
}
res.end('File uploaded and moved successfully!');
});
});
} else {
// Display the upload form
res.write('<form action="fileupload" method="post" enctype="multipart/form-
data">');
res.write('<input type="file" name="filetoupload"><br>');
res.write('<input type="submit">');
res.write('</form>');
res.end();
}

}).listen(3000);
Output:
Before
After submitting

Assignment no: 16
Create a Node.js file that demonstrate create database and table in MySQL
const mysql = require('mysql2');
const con = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '1234'
});
con.connect(function (err) {
if (err) throw err;
console.log('Connected to MySQL server!');
con.query('CREATE DATABASE mydb', function (err, result) {
if (err) throw err;
console.log('Database "mydb" created successfully!');
});
//const mysql = require('mysql');
const con2 = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '1234',
database: 'mydb' // Specify the database you created earlier
});
con2.connect(function (err) {
if (err) throw err;
const createTableQuery = `
CREATE TABLE authors (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255),
email VARCHAR(255)
)
`;
con2.query(createTableQuery, function (err, result) {
if (err) throw err;
console.log('Table "authors" created successfully!');
});

});
});
Output:
Assignment no: 17
Create a node.js file that Select all records from the "customers" table, and display
the result object on console
host: 'localhost',
user: 'root',
password: '1234',
database: 'mydb' // Replace with your actual database name
});
con.connect(function(err) {
if (err) throw err;
con.query('SELECT * FROM authors', function (err, result, fields) {
if (err) throw err;
console.log(result);
});
});
Output:

Assignment no: 18
Create a node.js file that Insert Multiple Records in "student" table, and display the
result object on console.
host: 'localhost',
user: 'root',
password: '1234',
database: 'mydb' // Replace with your actual database name
});
con.connect(function(err) {
if (err) throw err;
// Data for multiple student records
const students = [
{ name: 'Alice', age: 20 },
{ name: 'Bob', age: 22 },
{ name: 'Charlie', age: 21 }
// Add more student objects as needed
];
// Prepare the SQL query for bulk insertion
const insertQuery = 'INSERT INTO student (name, age) VALUES ?';
const values = students.map(student => [student.name, student.age]);
// Execute the query
con.query(insertQuery, [values], function(err, result) {
if (err) throw err;
console.log('Inserted ' + result.affectedRows + ' rows into the "student" table.');
console.log('Last insert ID:', result.insertId);
});
con.query('SELECT * FROM student', function (err, result, fields) {
if (err) throw err;
});
});
Output:

Assignment no: 19
Create a node.js file that Select all records from the "customers" table, and delete
the specified record.
// select_and_delete.js
host: 'localhost',
user: 'root',
password: '1234',
database: 'mydb', // Replace with your database name
});
con.connect((err) => {
if (err) throw err;
// Select all records from the "customers" table
con.query('SELECT * FROM customers', (err, result) => {
if (err) throw err;
console.log('All records from "customers" table:');
});
// Add this after the SELECT query
const addressToDelete = 'pune';
const deleteQuery = `DELETE FROM customers WHERE address =
'${addressToDelete}'`;
con.query(deleteQuery, (err, result) => {
if (err) throw err;
console.log(`Number of records deleted: ${result.affectedRows}`);
});

});
Output:
Assignment no: 20
Create a Simple Web Server using node js.
// index.js
const server = http.createServer((req, res) => {
res.write('This is the response from the server');
res.end();
});
server.listen(3000, () => {
console.log('Server is running at http://localhost:3000/');
});
Output:

Assignment no: 21
Using node js create a User Login System.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple User Login</title>
</head>
<body>
<h1>User Login</h1>
<form action="/login" method="post">
<label for="username">Enter Username:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Enter Password:</label>
<input type="password" id="password" name="password" required>
<br>
<button type="submit">Login</button>
</form>
</body>
</html>
// app.js
const express = require('express');
const app = express();
const PORT = 3000;
const db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '1234',
database: 'mydb', // Replace with your database name
});
db.connect((err) => {
if (err) throw err;
console.log('Connected to MySQL database');
});
// Middleware to parse form data
app.use(express.urlencoded({ extended: true }));

// Serve the HTML form
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
// Handle form submission
app.post('/login', (req, res) => {
const username = req.body.username;
const password = parseInt(req.body.password);
const query = `SELECT * FROM users WHERE username = '${username}' AND
password = '${password}'`;
db.query(query, [username, password], (err, results) => {
if (err) throw err;
if (results.length > 0) {
res.send(`Hello! ${username} Welcome to Dashboard`);
console.log(results);
} else {
res.send('Invalid credentials. Please try again.');
}
});
});
// Start the server
app.listen(PORT, () => {
console.log(`Server is running, and app is listening on port ${PORT}`);
});

Output:
Before login:
After login:

Assignment no: 22
Write node js script to interact with the file system, and serve a web page from a File
// File: server.js
const path = require('path');
const PORT = 8080;
http.createServer((req, res) => {
// Read the HTML file (index.html)
const filePath = path.join(__dirname, 'sample.html');
fs.readFile(filePath, (err, data) => {
if (err) {
res.end('Error reading file');
} else {
res.end(data);
}
});
}).listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}/`);
});
Output:

full stack practical assignment msc cs.pdf

Recommended

More Related Content

What's hot (20)

Similar to full stack practical assignment msc cs.pdf (20)

Recently uploaded (20)

full stack practical assignment msc cs.pdf