DEVELOPMENT
Step 1: Set Up the [Link] Server
1. Initialize a new [Link] project:
(step 1) Cd backend
(step 2) npm run dev
Install necessary dependencies:
You'll need [Link], MySQL2, Sequelize (ORM) for database interaction, and dotenv for
environment variables.
npm install express
Create the Express server ([Link]):
Set up an Express server with a route to handle student registration.
const PORT = [Link] || 5000;
const app = express();
[Link](
cors({
origin: "*",
methods: ["POST", "GET"],
credentials: true,
})
);
[Link]([Link]());
[Link]("/api", router);
[Link](PORT, () => {
[Link](`[✓] Server is running on [Link]
});
Step 2: Create the MySQL Database Configuration (config/[Link])
Set up a Sequelize connection to MySQL.
import { Sequelize } from "sequelize";
import db from "./[Link]";
const database = new Sequelize(
db.DB_NAME,
db.DB_USER,
db.DB_PASSWORD,
{
host: db.DB_HOST,
dialect: db.DB_DIALECT,
logging: false,
define: {
timestamps: false,
}
}
);
try {
await [Link](); // CHECK THE CONNECTION OF DATABASE
[Link]('[✓] Connection to database established successfully.');
}
catch(error) {
[Link]('[X] Unable to connect to the database:', error);
}
export default database;
Step 3: Define the Student Model (models/[Link])
Define the Sequelize model for students, which will represent a student in the MySQL database.
const Application = [Link]("Application", {
LRN_number: {
type: [Link](100),
allowNull: false,
primaryKey: true,
},
firstname: {
type: [Link](100),
allowNull: false,
},
middlename: {
type: [Link](100),
allowNull: false,
},
lastname: {
type: [Link](100),
allowNull: false,
},
suffix: {
type: [Link](100),
allowNull: false,
},
birthdate: {
type: [Link](100),
allowNull: false,
},
age: {
type: [Link](100),
allowNull: false,
},
nationality: {
type: [Link](100),
allowNull: false,
},
sex: {
type: [Link](100),
allowNull: false,
},
religion: {
type: [Link](100),
allowNull: false,
},
email: {
type: [Link](100),
allowNull: false,
},
civil_status: {
type: [Link](100),
allowNull: false,
},
citizenship: {
type: [Link](100),
allowNull: false,
},
language: {
type: [Link](100),
allowNull: false,
},
address_home: {
type: [Link](255),
allowNull: false,
},
contact_number: {
type: [Link](100),
allowNull: false,
},
mother_name: {
type: [Link](100),
allowNull: false,
},
mother_occupation: {
type: [Link](100),
allowNull: false,
},
father_name: {
type: [Link](100),
allowNull: false,
},
father_occupation: {
type: [Link](100),
allowNull: false,
},
contact_person: {
type: [Link](100),
allowNull: false,
},
contact_person_number: {
type: [Link](100),
allowNull: false,
},
contact_person_relationship: {
type: [Link](100),
allowNull: false,
},
previous_school: {
type: [Link](100),
allowNull: false,
},
previous_school_address: {
type: [Link](100),
allowNull: false,
},
year_graduated: {
type: [Link](100),
allowNull: false,
},
section: {
type: [Link](100),
allowNull: false,
},
school_type: {
type: [Link](100),
allowNull: false,
},
strand: {
type: [Link](100),
allowNull: false,
},
tech_voc: {
type: [Link](100),
allowNull: false,
},
specialized: {
type: [Link](100),
allowNull: false,
},
health_history: {
type: [Link](100),
allowNull: false,
},
health_history_description: {
type: [Link](100),
allowNull: false,
},
reference_number: {
type: [Link](255),
allowNull: false,
}
}, {
tableName: "application",
timestamps: false,
});
export default Application;
2. Front-End Development ([Link])
Next, we'll build the front-end using [Link] where students can register by filling out a form.
Step 1: Set Up the React Project
1. Create a new React app:
If you haven’t already installed create-react-app, do so by running:
(step 1) npx create-react-app FEPC-REGISTRATION SYSTEM
(step 2) cd FEPC-REGISTRATION-SYSTEM
2. Install Axios for making HTTP requests:
Axios will be used to communicate with the back-end API.
npm install axios
Step 2: Create the Registration Form Component (components/[Link])
This component will allow students to enter their personal information for registration.
import React, { useState, } from 'react';
import { Check, AlertCircle } from 'lucide-react';
import axios from "axios";
interface FormData {
lrnNumber: string;
firstName: string;
middleName: string;
lastName: string;
suffix: string;
birthdate: string;
age: string;
nationality: string;
sex: string;
religion: string;
email: string;
civilStatus: string;
citizenShip: string;
language: string;
addressHome:string;
contactNumber: string;
motherName: string;
occupation: string;
fatherName: string;
occupations: string;
personContact: string;
emergencyContactNumber: string;
address: string;
previousSchool: string;
section: string;
yearGraduated: string;
typeSchool: string;
strand: string;
techvoc: string;
specialized: string;
guardianRelationship: string;
healthHistory: string;
healthDescription: string;
uploadedFiles: {
id?: File[];
card?: File;
documents: File[]
};
}
const STRANDS = [
{ id: 'abm', name: 'ABM - Accountancy, Business, and Management' },
{ id: 'humss', name: 'HUMSS - Humanities and Social Sciences' },
{ id: 'gas', name: 'GAS - General Academic Strand' },
];
const TECH_VOC_STRANDS = [
{ id: 'he', name: 'HE - Home Economics '},
{ id: 'ia', name: 'IA - Equips students with practical skills and
knowledge for various trades and industries, focusing on technical
aspects like carpentry, automotive services, and electronics. ' },
{ id: 'ict', name: 'ICT - Information and Communication Technology' },
]
[Link] Component ([Link]):
Import the RegistrationForm and render it.
import { Routes, Route } from 'react-router-dom';
import LandingPage from './pages/LandingPage';
import RegistrationPage from './pages/RegistrationPage';
import Header from './components/Header';
import Footer from './components/Footer';
function App() {
return (
<div className="min-h-screen flex flex-col bg-gradient-to-br
from-blue-50 to-indigo-100">
<Header />
<div className="flex-grow">
<Routes>
<Route path="/" element={<LandingPage />} />
<Route path="/register" element={<RegistrationPage />} />
</Routes>
</div>
<Footer />
</div>
);
}
export default App;
Conclusion
This development example covers the creation of both back-end and front-end components for the
Senior High School Registration System. The back-end is developed using [Link] to handle requests
and communicate with the MySQL database, while the front-end uses [Link] to build a dynamic and
responsive UI. The system allows students to register for various strands, and the back-end ensures that
the data is securely processed and stored in the database.
By integrating the front-end and back-end, the system is fully functional, allowing students to submit
their information, while administrators can manage and review registrations efficiently.