Scribd
Upload
2 views9 pages

TY5-30 [WebX.0 CIAP (Component-1)]

The document outlines the creation of a web application for checking SEM V results using HTML, CSS, and JavaScript, along with a Node.js server connected to a MongoDB database. It includes instructions for setting up the project, creating necessary files, and implementing functionality to fetch and display student results based on a PRN number. The application features a user interface for inputting PRN and displaying results, along with error handling for various scenarios.

Uploaded by

RAJ KAMDAR
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
2 views9 pages

TY5-30 [WebX.0 CIAP (Component-1)]

The document outlines the creation of a web application for checking SEM V results using HTML, CSS, and JavaScript, along with a Node.js server connected to a MongoDB database. It includes instructions for setting up the project, creating necessary files, and implementing functionality to fetch and display student results based on a PRN number. The application features a user interface for inputting PRN and displaying results, along with error handling for various scenarios.

Uploaded by

RAJ KAMDAR
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/ 9

Name : Raj Kamdar

Class : TY5
Batch : B
Roll No: 30
PRN : 22UF16978IT087

WEB X.0 CIAP (COMPONENT -1)

1. Create a folder (sem5-result-app):

2. Initialize project & Install dependencies :

3. Create two files:


index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SEM V Results</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div>
<h1>Check Your SEM V Result</h1>
<input type="text" id="prnInput" placeholder="Enter PRN Number">
<button onclick="fetchResult()">Check Result</button>
</div>

<div id="resultBox" class="result-box" style="display: none;">


<h2>Student Result</h2>
<p><strong>Name:</strong> <span id="name"></span></p>
<p><strong>Email:</strong> <span id="email"></span></p>
<p><strong>Class:</strong> <span id="class"></span></p>
<h3>Marks:</h3>
<table id="marksTable">
<tr>
<th>Subject</th>
<th>Marks</th>
</tr>
</table>
</div>

<script src="script.js"></script>

</body>
</html>
Script.js

async function fetchResult() {


const prn = document.getElementById('prnInput').value.trim();

if (!prn) {
alert("⚠️ Please enter a PRN number.");
return;
}
try {
const response = await fetch(`http://localhost:5000/results/${prn}`);
const resultBox = document.getElementById('resultBox');
const marksTable = document.getElementById('marksTable');

if (!response.ok) {
alert("❌ Result not found!");
resultBox.style.display = 'none';
return;
}

const data = await response.json();

// Populate Student Details


document.getElementById('name').innerText = data.name || "N/A";
document.getElementById('email').innerText = data.email || "N/A";
document.getElementById('class').innerText = data.class || "N/A";

// Clear previous results


marksTable.innerHTML = "<tr><th>Subject</th><th>Marks</th></tr>";

// Populate Marks
if (data.marks && typeof data.marks === "object") {
Object.entries(data.marks).forEach(([subject, mark]) => {
const row = marksTable.insertRow();
row.insertCell(0).innerText = subject;
row.insertCell(1).innerText = mark;
});
} else {
const row = marksTable.insertRow();
row.insertCell(0).innerText = "No subjects found";
row.insertCell(1).innerText = "--";
}

resultBox.style.display = 'block';
} catch (error) {
alert("⚠️ Error fetching result. Please check your connection.");
console.error("Fetch Error:", error);
}
}
sever.js
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();


const PORT = 5000;

// Middleware
app.use(cors());
app.use(express.json());

// MongoDB Connection
mongoose.connect('mongodb://127.0.0.1:27017/sakec_db', {
useNewUrlParser: true,
useUnifiedTopology: true
})
.then(() => console.log(" Connected to MongoDB"))
.catch(err => console.error(" MongoDB Connection Error:", err));

// Define Schema
const resultSchema = new mongoose.Schema({
prn: { type: String, required: true, unique: true },
name: String,
email: String,
class: String,
marks: Object
});

// Create Model
const Result = mongoose.model('Result', resultSchema);

// Route: Fetch Result by PRN


app.get('/results/:prn', async (req, res) => {
try {
const student = await Result.findOne({ prn: req.params.prn });
if (!student) {
return res.status(404).json({ message: "Result not found" });
}
res.json(student);
} catch (error) {
console.error("Error fetching student result:", error);
res.status(500).json({ message: "Server error" });
}
});

// Start Server
app.listen(PORT, () => {
console.log(` Server running on http://localhost:${PORT}`);
});
Styles.css
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
text-align: center;
margin: 0;
padding: 20px;
}

h1 {
color: #333;
margin-bottom: 20px;
}

input {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}

button {
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}

button:hover {
background-color: #0056b3;
}

.result-box {
background: white;
width: 50%;
margin: 20px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
display: none;
}

h2, h3 {
color: #444;
}

table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
background: white;
}

th, td {
padding: 10px;
border: 1px solid #ddd;
text-align: center;
}

th {
background-color: #007bff;
color: white;
}

td {
background-color: #f9f9f9;}
4. Output :

➢ Front Page
➢ Check

5. Establish Connection:
6. DataBase:

You might also like