Scribd
Upload
33 views6 pages

FSD Lab Manual

The document provides a series of code snippets for various web development projects using Node.js, Express, MongoDB, AngularJS, and ReactJS. It covers applications ranging from a simple 'Hello World' server to more complex systems like user login, food delivery, and online stores. Each section includes essential code examples to serve as a foundation for further development.

Uploaded by

bharathpatel612
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
33 views6 pages

FSD Lab Manual

The document provides a series of code snippets for various web development projects using Node.js, Express, MongoDB, AngularJS, and ReactJS. It covers applications ranging from a simple 'Hello World' server to more complex systems like user login, food delivery, and online stores. Each section includes essential code examples to serve as a foundation for further development.

Uploaded by

bharathpatel612
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/ 6

Let's break this down into smaller parts.

I can provide a framework for each project along with sample


code snippets where possible, but due to the complexity and length of full project implementations, I
will summarize the essential parts. You can then use these snippets as a foundation to develop each
application.

### 1. Node JS Hello World Application

```javascript
const http = require('http');

const server = http.createServer((req, res) => {


res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World\n');
});

server.listen(3000, () => {
console.log('Server running at http://localhost:3000/');
});
```

### 2. User Login System (Node.js with Express)

```javascript
const express = require('express');
const bodyParser = require('body-parser');

const app = express();


app.use(bodyParser.urlencoded({ extended: true }));

app.post('/login', (req, res) => {


const { username, password } = req.body;
// Authentication logic here
res.send(`Username: ${username}, Password: ${password}`);
});

app.listen(3000, () => {
console.log('Server running on port 3000');
});
```

### 3. File Operations in Node.js

```javascript
const fs = require('fs');

// Write to file
fs.writeFileSync('example.txt', 'Hello, World!');

// Read from file


const data = fs.readFileSync('example.txt', 'utf8');
console.log(data);

// Append to file
fs.appendFileSync('example.txt', ' Appending this text.');

// Delete file
fs.unlinkSync('example.txt');
```

### 4. Read Form Data from Query String

```javascript
const express = require('express');
const app = express();

app.get('/form', (req, res) => {


const name = req.query.name || 'Guest';
res.send(`Hello ${name}`);
});

app.listen(3000, () => {
console.log('Server running on port 3000');
});
```

### 5. Food Delivery Website (Simplified)

```javascript
const express = require('express');
const app = express();

app.get('/restaurants', (req, res) => {


const restaurants = ['Pizza Place', 'Sushi House', 'Burger Joint'];
res.json(restaurants);
});

app.listen(3000, () => {
console.log('Food Delivery Server running on port 3000');
});
```

### 6. MongoDB Basic Commands

```javascript
const { MongoClient } = require('mongodb');

async function run() {


const client = new MongoClient('mongodb://localhost:27017');
await client.connect();
const database = client.db('testdb');
const collection = database.collection('testcollection');

// Insert a document
await collection.insertOne({ name: 'John Doe' });

// Find a document
const results = await collection.findOne({ name: 'John Doe' });
console.log(results);

await client.close();
}

run().catch(console.error);
```

### 7. CRUD Operations in MongoDB

```javascript
async function crudOperations() {
// Assuming you have already established a connection to MongoDB

// Create
await collection.insertOne({ name: 'Jane Doe' });

// Read
const user = await collection.findOne({ name: 'Jane Doe' });

// Update
await collection.updateOne({ name: 'Jane Doe' }, { $set: { age: 30 } });

// Delete
await collection.deleteOne({ name: 'Jane Doe' });
}
```

### 8. Count, Limit, Sort, and Skip in MongoDB

```javascript
const count = await collection.countDocuments(); // Count

const results = await collection.find()


.sort({ name: 1 }) // Sort by name
.skip(10) // Skip first 10
.limit(5) // Limit to 5 results
.toArray();
```

### 9. AngularJS Form with CSS and Events

```html
<!DOCTYPE html>
<html ng-app="myApp">

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body ng-controller="MyController">
<form ng-submit="submitForm()">
<input type="text" ng-model="name" placeholder="Enter your name" required>
<button type="submit">Submit</button>
</form>
<p>Hello, {{ name }}</p>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
angular.module('myApp', []).controller('MyController', function($scope) {
$scope.submitForm = function() {
alert("Form submitted!");
};
});
</script>

</html>
```

### 10. Job Registration Form (AngularJS Validation)

```html
<form name="jobForm" novalidate>
<input type="text" ng-model="jobTitle" name="jobTitle" required>
<span ng-show="jobForm.jobTitle.$touched && jobForm.jobTitle.$invalid">Job title is
required.</span>

<input type="email" ng-model="email" name="email" required>


<span ng-show="jobForm.email.$touched && jobForm.email.$invalid">Email is required.</span>

<button type="submit" ng-disabled="jobForm.$invalid">Submit</button>


</form>
```

### 11. AngularJS Application Using $http Service

```javascript
app.controller('MyController', function($scope, $http) {
$http.get('employee.json').then(function(response) {
$scope.employees = response.data;
});
});
```

### 12. Student Information Management with Express and AngularJS

The implementation may require a backend API using Express, like the one outlined previously for
login, combined with an AngularJS front end to manage students.

### 13. Simple Calculator Application (ReactJS)

```javascript
import React, { useState } from 'react';

function Calculator() {
const [result, setResult] = useState("");

const calculate = (value) => {


setResult(result + value);
};

return (
<div>
<input type="text" value={result} readOnly />
<button onClick={() => calculate('1')}>1</button>
<button onClick={() => calculate('2')}>2</button>
<button onClick={() => setResult(eval(result))}>=</button>
</div>
);
}

export default Calculator;


```

### 14. Voting Application (ReactJS)

```javascript
import React, { useState } from 'react';

function VotingApp() {
const [votes, setVotes] = useState(0);

const vote = () => {


setVotes(votes + 1);
};

return (
<div>
<h1>Votes: {votes}</h1>
<button onClick={vote}>Vote</button>
</div>
);
}

export default VotingApp;


```

### 15. Leave Management System (ReactJS)

```javascript
import React, { useState } from 'react';

function LeaveManagement() {
const [leaveType, setLeaveType] = useState('Casual Leave');
const [days, setDays] = useState(10); // Available Days

const applyLeave = () => {


console.log(`Applied for ${leaveType}`);
setDays(days - 1); // Assuming 1 day leave applied
};

return (
<div>
<h2>Available Leave Days: {days}</h2>
<select value={leaveType} onChange={(e) => setLeaveType(e.target.value)}>
<option value="Casual Leave">Casual Leave</option>
<option value="Medical Leave">Medical Leave</option>
</select>
<button onClick={applyLeave}>Apply Leave</button>
</div>
);
}

export default LeaveManagement;


```
### 16. Music Store Application (ReactJS Routing)

You’d generally use `react-router-dom` for routing.

```javascript
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
return (
<Router>
<Switch>
<Route path="/products" component={Products} />
<Route path="/checkout" component={Checkout} />
</Switch>
</Router>
);
}
```

### 17. Online Store Application (ReactJS)

This will be similar to the food delivery concept but with additional pages for registration and product
viewing.

```javascript
function App() {
return (
<Router>
<Route path="/register" component={Registration} />
<Route path="/login" component={Login} />
<Route path="/products" component={Products} />
</Router>
);
}
```

You might also like