Roll No:160122733163…….. Exp. No:…5..… Date:……………...

Aim:
Design a college admission enquiry form and store details in mongoDB using states and
events as a React Functional Component.

Description:

This file contains a React component that renders a form for college admission enquiries.
Key functionalities include:

• State Management: Uses the useState hook to manage the form data. The formData
state contains fields like name, email, phone, course, dob, father, mother, and message.
• Input Handling: The handleChange function updates the formData state whenever an
input field changes.
• Form Submission: The handleSubmit function handles form submission, preventing the
default form submission behavior, sending a POST request to
http://localhost:5000/api/enquiry with the form data using axios, logging the response, and
resetting the form fields on successful submission.
• Rendering: The component returns a form with labeled input fields for each piece of
required information and a submit button.

server.js

This file sets up a backend server using Express.js and MongoDB for handling and storing
the form data. Key functionalities include:

• Express Setup: Initializes an Express app with CORS and body parser middleware.
• MongoDB Connection: Connects to a MongoDB database named college_enquiry.
• Mongoose Schema and Model: Defines an EnquirySchema and a corresponding Enquiry
model for storing enquiry data.
• API Endpoint: Defines a POST /api/enquiry endpoint that logs the received data, saves
a new enquiry document to the MongoDB collection, and responds with the saved
document or an error status.
• Server Listening: Starts the server on port 5000 and logs a message indicating the
server is running.

App.js

This file contains the main React application component, which imports and renders the
EnquiryForm component. It serves as the entry point for the React application.

App.css

This file contains CSS styles for the form and heading in the application. Key styles include:

Page No. …………….. Signature of the Faculty………………………...

 Roll No:160122733163…….. Exp. No:…5..… Date:……………...

CODE:

EnquiryForm.js:
import React, { useState } from 'react';
import axios from 'axios';

function EnquiryForm() {
const [formData, setFormData] = useState({
name: '',
email: '',
phone: '',
course: '',
dob: '',
father: '',
mother: '',
message: ''
});

const handleChange = (e) => {

setFormData({
...formData,
[e.target.name]: e.target.value
});
};

const handleSubmit = async (e) => {

e.preventDefault();
try {
const response = await axios.post('http://localhost:5000/api/enquiry', formData);
console.log('Enquiry submitted:', response.data);
setFormData({
name: '',
email: '',
phone: '',
course: '',
dob: '',
father: '',
mother: '',
message: ''
});
} catch (error) {
console.error('Error submitting enquiry:', error);

Page No. …………….. Signature of the Faculty………………………...

 Roll No:160122733163…….. Exp. No:…5..… Date:……………...

}
};

return (
<div>
<h1>College Admission Enquiry Form</h1>
<form onSubmit={handleSubmit}>
<div>
<div>
<label>Name : </label>
<input type="text" name="name" value={formData.name}
onChange={handleChange} required />
</div>
<div>
<label>Email : </label>
<input type="email" name="email" value={formData.email}
onChange={handleChange} required />
</div>
<div>
<label>Phone : </label>
<input type="tel" name="phone" value={formData.phone}
onChange={handleChange} required />
</div>
<div>
<label>Course : </label>
<input type="text" name="course" value={formData.course}
onChange={handleChange} required />
</div>
<div>
<label>Date of Birth : </label>
<input type="date" name="dob" value={formData.dob}
onChange={handleChange} required />
</div>
<div>
<label>Father name : </label>
<input type="text" name="father" value={formData.father}
onChange={handleChange} required />
</div>
<div>
<label>Mother name : </label>
<input type="text" name="mother" value={formData.mother}
onChange={handleChange} required />
</div>
<div>

Page No. …………….. Signature of the Faculty………………………...

 Roll No:160122733163…….. Exp. No:…5..… Date:……………...

<label>Message : </label>
<textarea name="message" value={formData.message}
onChange={handleChange} required></textarea>
</div>
<button type="submit">Submit</button>
</div>
</form>
</div>
);
}

export default EnquiryForm;

server.js:
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();

app.use(cors());
app.use(bodyParser.json());

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/college_enquiry', { useNewUrlParser: true,
useUnifiedTopology: true });

const EnquirySchema = new mongoose.Schema({

name: String,
email: String,
phone: String,
course: String,
dob: String,
father: String,
mother: String,
message: String
});

const Enquiry = mongoose.model('Enquiry', EnquirySchema);

app.post('/api/enquiry', async (req, res) => {

try {
console.log('Received data:', req.body);

Page No. …………….. Signature of the Faculty………………………...

 Roll No:160122733163…….. Exp. No:…5..… Date:……………...

const enquiry = new Enquiry(req.body);

await enquiry.save();
res.status(201).send(enquiry);
} catch (error) {
res.status(400).send(error);
}
});

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

App.js:
import './App.css';
import React from 'react';
import EnquiryForm from './EnquiryForm';

function App() {
return (
<div className="App">
<EnquiryForm />
</div>
);
}
export default App;

App.css:
form{
background-color: beige;
width: 400px;
margin: auto;
padding-top: 20px;
}
form input{
margin-bottom: 4px;
/* margin-right: 10px; */
}
form button{
margin: 10px 10px 10px;
}
h1{
margin-left: 500px;
}

Page No. …………….. Signature of the Faculty………………………...

 Roll No:160122733163…….. Exp. No:…5..… Date:……………...

Output:

CONCLUSION:
The project is a simple full-stack web application for handling college admission enquiries.
The frontend is built with React, and it features a form for users to submit their information.
The backend, built with Express and MongoDB, handles storing these enquiries in a database.
The application demonstrates basic CRUD operations, form handling, state management in
React, and RESTful API development with Node.js and MongoDB.

Page No. …………….. Signature of the Faculty………………………...