himanshu-toolkit 1.0.4 → 1.0.5

package/App3.jsx

@@ -0,0 +1,226 @@
+import React, { useState, useEffect } from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+const API = 'http://localhost:5000/students';
+
+export default function App() {
+    const [students, setStudents] = useState([]);
+    const [form, setForm] = useState({ sid: '', sname: '', course: '' });
+    const [editId, setEditId] = useState(null);
+    const [showForm, setShowForm] = useState(false);
+    const [message, setMessage] = useState('');
+    const [error, setError] = useState('');
+
+    const loadStudents = async () => {
+        try {
+            const res = await fetch(API);
+            const data = await res.json();
+            if (!res.ok) throw new Error(data.error || 'Failed to load students');
+            setStudents(data);
+        } catch (e) {
+            setError(e.message);
+        }
+    };
+
+    useEffect(() => {
+        loadStudents();
+    }, []);
+
+    const handleChange = e =>
+        setForm({ ...form, [e.target.name]: e.target.value });
+
+    const handleSubmit = async e => {
+        e.preventDefault();
+        setMessage('');
+        setError('');
+
+        try {
+            const res = await fetch(
+                editId ? `${API}/${editId}` : API,
+                {
+                    method: editId ? 'PUT' : 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        ...form,
+                        sid: Number(form.sid),
+                        sname: form.sname.trim(),
+                        course: form.course.trim()
+                    })
+                }
+            );
+
+            const data = await res.json();
+            if (!res.ok) throw new Error(data.error || 'Operation failed');
+
+            setMessage(data.message);
+            setForm({ sid: '', sname: '', course: '' });
+            setEditId(null);
+            setShowForm(false);
+            await loadStudents();
+        } catch (e) {
+            setError(e.message);
+        }
+    };
+
+    const editStudent = student => {
+        setForm({
+            sid: student.sid,
+            sname: student.sname,
+            course: student.course
+        });
+        setEditId(student.sid);
+        setShowForm(true);
+        setMessage('');
+        setError('');
+    };
+
+    const deleteStudent = async sid => {
+        if (!window.confirm('Delete this student?')) return;
+
+        setMessage('');
+        setError('');
+
+        try {
+            const res = await fetch(`${API}/${sid}`, { method: 'DELETE' });
+            const data = await res.json();
+            if (!res.ok) throw new Error(data.error || 'Delete failed');
+
+            setMessage(data.message);
+            if (editId === sid) {
+                setEditId(null);
+                setShowForm(false);
+                setForm({ sid: '', sname: '', course: '' });
+            }
+            await loadStudents();
+        } catch (e) {
+            setError(e.message);
+        }
+    };
+
+    return (
+        <div className="container py-5">
+            <div className="card shadow">
+                <div className="card-header bg-primary text-white text-center">
+                    <h2>Student Management System</h2>
+                </div>
+
+                <div className="card-body">
+                    {message && <div className="alert alert-success">{message}</div>}
+                    {error && <div className="alert alert-danger">{error}</div>}
+
+                    <button
+                        className="btn btn-success mb-3"
+                        onClick={() => {
+                            setForm({ sid: '', sname: '', course: '' });
+                            setEditId(null);
+                            setShowForm(true);
+                            setMessage('');
+                            setError('');
+                        }}
+                    >
+                        Add New Student
+                    </button>
+
+                    {showForm && (
+                        <form onSubmit={handleSubmit} className="border rounded p-3 mb-4">
+                            <h5>{editId ? 'Edit Student' : 'Add Student'}</h5>
+
+                            <input
+                                className="form-control mb-3"
+                                type="number"
+                                name="sid"
+                                placeholder="Student ID"
+                                value={form.sid}
+                                onChange={handleChange}
+                                disabled={editId !== null}
+                                min="1"
+                                required
+                            />
+
+                            <input
+                                className="form-control mb-3"
+                                name="sname"
+                                placeholder="Student Name"
+                                value={form.sname}
+                                onChange={handleChange}
+                                required
+                            />
+
+                            <input
+                                className="form-control mb-3"
+                                name="course"
+                                placeholder="Course"
+                                value={form.course}
+                                onChange={handleChange}
+                                required
+                            />
+
+                            <button className="btn btn-primary me-2" type="submit">
+                                {editId ? 'Update Student' : 'Submit Student'}
+                            </button>
+
+                            <button
+                                className="btn btn-secondary"
+                                type="button"
+                                onClick={() => {
+                                    setShowForm(false);
+                                    setEditId(null);
+                                }}
+                            >
+                                Cancel
+                            </button>
+                        </form>
+                    )}
+
+                    <h4>Student Records</h4>
+
+                    <div className="table-responsive">
+                        <table className="table table-bordered table-striped table-hover">
+                            <thead className="table-dark">
+                                <tr>
+                                    <th>Student ID</th>
+                                    <th>Student Name</th>
+                                    <th>Course</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+
+                            <tbody>
+                                {students.map(student => (
+                                    <tr key={student.sid}>
+                                        <td>{student.sid}</td>
+                                        <td>{student.sname}</td>
+                                        <td>{student.course}</td>
+                                        <td>
+                                            <button
+                                                className="btn btn-warning btn-sm me-2"
+                                                onClick={() => editStudent(student)}
+                                            >
+                                                Edit
+                                            </button>
+
+                                            <button
+                                                className="btn btn-danger btn-sm"
+                                                onClick={() => deleteStudent(student.sid)}
+                                            >
+                                                Delete
+                                            </button>
+                                        </td>
+                                    </tr>
+                                ))}
+
+                                {students.length === 0 && (
+                                    <tr>
+                                        <td colSpan="4" className="text-center">
+                                            No students found.
+                                        </td>
+                                    </tr>
+                                )}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

package/database3.sql

@@ -0,0 +1,10 @@
+CREATE DATABASE student_db;
+USE student_db;
+
+CREATE TABLE students (
+    sid INT PRIMARY KEY,
+    sname VARCHAR(100) NOT NULL,
+    course VARCHAR(100) NOT NULL
+);
+
+select*from students

package/package.json

@@ -1,18 +1,21 @@
 {
   "name": "himanshu-toolkit",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "My reusable full-stack application toolkit",
   "main": "server.js",
   "files": [
     "App.jsx",
     "App1.jsx",
     "App2.jsx",
+    "App3.jsx",
     "database.sql",
     "database1.sql",
     "database2.sql",
+    "database3.sql",
     "server.js",
     "server1.js",
-    "server3.js"
+    "server3.js",
+    "server4.js"
   ],
   "keywords": [
     "react",

package/server4.js

@@ -0,0 +1,107 @@
+
+const express = require('express');
+const mysql = require('mysql2/promise');
+const cors = require('cors');
+
+const app = express();
+app.use(cors());
+app.use(express.json());
+
+const db = mysql.createPool({
+    host: 'localhost',
+    user: 'root',
+    password: process.env.DB_PASSWORD || 'Himanshu@0334',
+    database: 'student_db',
+    waitForConnections: true,
+    connectionLimit: 10
+});
+
+// GET: Display all students
+app.get('/students', async (req, res) => {
+    try {
+        const [rows] = await db.query('SELECT * FROM students ORDER BY sid');
+        res.json(rows);
+    } catch (err) {
+        console.error(err);
+        res.status(500).json({ error: 'Failed to fetch students.' });
+    }
+});
+
+// POST: Add a student
+app.post('/students', async (req, res) => {
+    const { sid, sname, course } = req.body;
+
+    if (!Number.isInteger(Number(sid)) || Number(sid) <= 0 ||
+        typeof sname !== 'string' || !sname.trim() ||
+        typeof course !== 'string' || !course.trim()) {
+        return res.status(400).json({ error: 'Enter a valid ID, name and course.' });
+    }
+
+    try {
+        await db.execute(
+            'INSERT INTO students (sid, sname, course) VALUES (?, ?, ?)',
+            [Number(sid), sname.trim(), course.trim()]
+        );
+        res.status(201).json({ message: 'Student added successfully.' });
+    } catch (err) {
+        if (err.code === 'ER_DUP_ENTRY')
+            return res.status(409).json({ error: 'Student ID already exists.' });
+
+        console.error(err);
+        res.status(500).json({ error: 'Failed to add student.' });
+    }
+});
+
+// PUT: Update a student
+app.put('/students/:sid', async (req, res) => {
+    const { sname, course } = req.body;
+    const sid = Number(req.params.sid);
+
+    if (!Number.isInteger(sid) || sid <= 0 ||
+        typeof sname !== 'string' || !sname.trim() ||
+        typeof course !== 'string' || !course.trim()) {
+        return res.status(400).json({ error: 'Enter a valid name and course.' });
+    }
+
+    try {
+        const [result] = await db.execute(
+            'UPDATE students SET sname = ?, course = ? WHERE sid = ?',
+            [sname.trim(), course.trim(), sid]
+        );
+
+        if (!result.affectedRows) {
+            const [rows] = await db.execute(
+                'SELECT sid FROM students WHERE sid = ?', [sid]
+            );
+            if (!rows.length)
+                return res.status(404).json({ error: 'Student not found.' });
+        }
+
+        res.json({ message: 'Student updated successfully.' });
+    } catch (err) {
+        console.error(err);
+        res.status(500).json({ error: 'Failed to update student.' });
+    }
+});
+
+// DELETE: Remove a student
+app.delete('/students/:sid', async (req, res) => {
+    try {
+        const [result] = await db.execute(
+            'DELETE FROM students WHERE sid = ?',
+            [Number(req.params.sid)]
+        );
+
+        if (!result.affectedRows)
+            return res.status(404).json({ error: 'Student not found.' });
+
+        res.json({ message: 'Student deleted successfully.' });
+    } catch (err) {
+        console.error(err);
+        res.status(500).json({ error: 'Failed to delete student.' });
+    }
+});
+
+app.listen(5000, () =>
+    console.log('Server running at http://localhost:5000')
+);