Upload 9 files

.env

@@ -0,0 +1,6 @@
+# MongoDB Atlas configuration
+MONGO_URI=mongodb+srv://Farhan:Banyuwangi2005@peweb-10.zoelhgg.mongodb.net/?retryWrites=true&w=majority&appName=Peweb-10
+MONGO_DB_NAME=student_reports
+
+# Port configuration
+PORT=7860

Dockerfile

@@ -0,0 +1,24 @@
+# Use a lightweight Python base image
+FROM python:3.9-slim-buster
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy the requirements file and install dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+RUN pip install gunicorn
+
+# Copy the rest of your application code
+COPY . .
+
+# Set default environment variables (can be overridden at runtime)
+ENV MONGO_URI=mongodb+srv://username:password@cluster.mongodb.net/ \
+    MONGO_DB_NAME=student_reports \
+    PORT=7860
+
+# Expose the port that Gunicorn will run on
+EXPOSE ${PORT}
+
+# Command to run the Flask application using Gunicorn
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "app:app", "--timeout", "120"]

app.py

@@ -0,0 +1,119 @@
+from flask import Flask, render_template, request, redirect, url_for, send_file, Response
+from fpdf import FPDF
+import database
+import io
+from datetime import datetime
+import os # Import os module for environment variables
+
+app = Flask(__name__)
+
+@app.route('/')
+def index():
+    mahasiswa_data = database.get_all_mahasiswa()
+    status = request.args.get('status')
+    return render_template('index.html', mahasiswa=mahasiswa_data, status=status)
+
+@app.route('/tambah_siswa', methods=['GET', 'POST'])
+def tambah_siswa():
+    if request.method == 'POST':
+        NRP = request.form['NRP']
+        nama_lengkap = request.form['nama_lengkap']
+        no_hp = request.form['no_hp']
+        tanggal_lahir = request.form['tanggal_lahir'] # Format YYYY-MM-DD from HTML date input
+
+        if database.add_mahasiswa(NRP, nama_lengkap, no_hp, tanggal_lahir):
+            return redirect(url_for('index', status='success'))
+        else:
+            # Handle error, maybe show an error message on the form
+            return "Error adding data. Please check server logs.", 500
+    return render_template('tambah_siswa.html')
+
+@app.route('/cetak_pdf')
+def cetak_pdf():
+    try:
+        pdf = FPDF('L', 'mm', 'A5')
+        pdf.add_page()
+
+        # School Header
+        pdf.set_font('Arial', 'B', 16)
+        pdf.cell(190, 7, 'SEKOLAH MENENGAH KEJURUAN NEGERI 5 Cilegon', 0, 1, 'C')
+        pdf.set_font('Arial', 'B', 12)
+        pdf.cell(190, 7, 'DAFTAR SISWA KELAS IX JURUSAN REKAYASA KECERDASAN ARTIFISIAL', 0, 1, 'C')
+        pdf.cell(10, 7, '', 0, 1)  # Space
+
+        # Table Header
+        pdf.set_font('Arial', 'B', 10)
+        pdf.cell(30, 6, 'NRP', 1, 0, 'C')
+        pdf.cell(80, 6, 'NAMA MAHASISWA', 1, 0, 'C')
+        pdf.cell(40, 6, 'NO HP', 1, 0, 'C')
+        pdf.cell(40, 6, 'TANGGAL LHR', 1, 1, 'C')
+
+        # Table Data
+        pdf.set_font('Arial', '', 10)
+        mahasiswa_data = database.get_all_mahasiswa()
+        for row in mahasiswa_data:
+            # Get NRP/NIM value
+            nim_value = str(row.get('NRP', row.get('nim', '')))
+            pdf.cell(30, 6, nim_value, 1, 0, 'C')
+            pdf.cell(80, 6, row['nama_lengkap'], 1, 0)
+            pdf.cell(40, 6, str(row['no_hp']), 1, 0, 'C')
+            
+            # Format date for display - handle both datetime object and string
+            tanggal = row['tanggal_lahir']
+            if isinstance(tanggal, datetime):
+                formatted_date = tanggal.strftime('%d-%m-%Y')
+            else:
+                # If it's already a string, use it directly
+                formatted_date = tanggal
+                
+            pdf.cell(40, 6, formatted_date, 1, 1, 'C')
+
+        # Create a BytesIO object to hold the PDF data
+        pdf_buffer = io.BytesIO()
+        pdf_buffer.write(pdf.output(dest='S'))
+        pdf_buffer.seek(0)
+        
+        # Return PDF as a response
+        return send_file(
+            pdf_buffer,
+            mimetype='application/pdf',
+            as_attachment=True,
+            download_name='daftar_siswa.pdf'
+        )
+    
+    except Exception as e:
+        print(f"Error generating PDF: {str(e)}")
+        return f"Error generating PDF: {str(e)}", 500
+
+@app.route('/edit_siswa/<id>', methods=['GET', 'POST'])
+def edit_siswa(id):
+    if request.method == 'POST':
+        nama_lengkap = request.form['nama_lengkap']
+        no_hp = request.form['no_hp']
+        tanggal_lahir = request.form['tanggal_lahir']
+
+        if database.update_mahasiswa(id, nama_lengkap, no_hp, tanggal_lahir):
+            return redirect(url_for('index', status='updated'))
+        else:
+            return "Error updating data. Please check server logs.", 500
+    
+    # GET request - show the edit form with current data
+    student = database.get_mahasiswa_by_id(id)
+    if student:
+        return render_template('edit_siswa.html', student=student)
+    else:
+        return "Student not found", 404
+
+@app.route('/hapus_siswa', methods=['POST'])
+def hapus_siswa():
+    id = request.form['id']
+    if database.delete_mahasiswa(id):
+        return redirect(url_for('index', status='deleted'))
+    else:
+        return "Error deleting data. Please check server logs.", 500
+
+if __name__ == '__main__':
+    # Use environment variable for port (Hugging Face default is 7860)
+    port = int(os.environ.get('PORT', 7860))
+    # Run the Flask app
+    app.run(host='0.0.0.0', port=port, debug=True) # Set debug=False for production

create_db.py

@@ -0,0 +1,43 @@
+import os
+from pymongo import MongoClient
+from datetime import datetime
+from dotenv import load_dotenv
+
+# Load environment variables
+load_dotenv()
+
+# MongoDB Atlas connection
+MONGO_URI = os.environ.get('MONGO_URI')
+DB_NAME = os.environ.get('MONGO_DB_NAME', 'student_reports')
+
+def create_database_and_collection():
+    try:
+        # Connect to MongoDB Atlas
+        client = MongoClient(MONGO_URI)
+        db = client[DB_NAME]
+        
+        # Check if collection exists, create it if not
+        if 'mahasiswa' not in db.list_collection_names():
+            db.create_collection('mahasiswa')
+            print(f"Collection 'mahasiswa' created successfully.")
+        
+        # Check if collection is empty and insert sample data if it is
+        if db.mahasiswa.count_documents({}) == 0:
+            sample_data = [
+                {'NRP': '5054231012', 'nama_lengkap': 'Budi Santoso', 'no_hp': '089699935552', 'tanggal_lahir': datetime(2017, 9, 2)},
+                {'NRP': '5054231013', 'nama_lengkap': 'Dewi Lestari', 'no_hp': '089699935553', 'tanggal_lahir': datetime(2017, 9, 2)},
+                {'NRP': '5054231014', 'nama_lengkap': 'Ahmad Suryanto', 'no_hp': '089699935554', 'tanggal_lahir': datetime(2017, 9, 3)},
+                {'NRP': '5054231015', 'nama_lengkap': 'Siti Rahayu', 'no_hp': '089699935555', 'tanggal_lahir': datetime(2017, 9, 3)}
+            ]
+            db.mahasiswa.insert_many(sample_data)
+            print("Sample data inserted.")
+        else:
+            print("Collection already contains data. Skipping sample data insertion.")
+        
+        print(f"Database '{DB_NAME}' and 'mahasiswa' collection ensured successfully.")
+        
+    except Exception as e:
+        print(f"Error: {e}")
+
+if __name__ == '__main__':
+    create_database_and_collection()

database.py

@@ -0,0 +1,136 @@
+import os
+from pymongo import MongoClient
+from datetime import datetime
+from dotenv import load_dotenv
+
+# Load environment variables
+load_dotenv()
+
+# MongoDB Atlas connection string
+MONGO_URI = os.environ.get('MONGO_URI')
+DB_NAME = os.environ.get('MONGO_DB_NAME', 'student_reports')
+
+def get_db_connection():
+    try:
+        client = MongoClient(MONGO_URI)
+        db = client[DB_NAME]
+        return db
+    except Exception as e:
+        print(f"Error connecting to MongoDB: {e}")
+        return None
+
+def get_all_mahasiswa():
+    db = get_db_connection()
+    if db is None:
+        return []
+    
+    try:
+        # Convert MongoDB documents to dictionaries
+        mahasiswa = list(db.mahasiswa.find({}, {'_id': 0}))
+        
+        # Convert string dates to datetime objects for compatibility with the app
+        for student in mahasiswa:
+            if isinstance(student['tanggal_lahir'], str):
+                student['tanggal_lahir'] = datetime.strptime(student['tanggal_lahir'], '%Y-%m-%d')
+        
+        return mahasiswa
+    except Exception as e:
+        print(f"Error fetching data: {e}")
+        return []
+
+def add_mahasiswa(NRP, nama_lengkap, no_hp, tanggal_lahir):
+    db = get_db_connection()
+    if db is None:
+        return False
+
+    try:
+        # Create a document
+        student = {
+            "NRP": NRP,
+            "nama_lengkap": nama_lengkap,
+            "no_hp": no_hp,
+            "tanggal_lahir": datetime.strptime(tanggal_lahir, '%Y-%m-%d')
+        }
+        
+        # Insert into collection
+        db.mahasiswa.insert_one(student)
+        return True
+    except Exception as e:
+        print(f"Error adding data: {e}")
+        return False
+
+def get_mahasiswa_by_id(id):
+    db = get_db_connection()
+    if db is None:
+        return None
+    
+    try:
+        # Find student by NRP/NIM
+        student = db.mahasiswa.find_one({"NRP": id})
+        
+        # If not found with NRP, try with nim
+        if student is None:
+            student = db.mahasiswa.find_one({"nim": id})
+            
+        if student:
+            # Remove MongoDB _id field before returning
+            student.pop('_id', None)
+            
+            # Convert string dates to datetime objects if needed
+            if isinstance(student['tanggal_lahir'], str):
+                student['tanggal_lahir'] = datetime.strptime(student['tanggal_lahir'], '%Y-%m-%d')
+                
+        return student
+    except Exception as e:
+        print(f"Error fetching student: {e}")
+        return None
+
+def update_mahasiswa(id, nama_lengkap, no_hp, tanggal_lahir):
+    db = get_db_connection()
+    if db is None:
+        return False
+    
+    try:
+        # Find if student exists with NRP or nim
+        student = db.mahasiswa.find_one({"NRP": id})
+        id_field = "NRP"
+        
+        if student is None:
+            student = db.mahasiswa.find_one({"nim": id})
+            id_field = "nim"
+            
+        if student is None:
+            return False
+            
+        # Update the document
+        result = db.mahasiswa.update_one(
+            {id_field: id},
+            {"$set": {
+                "nama_lengkap": nama_lengkap,
+                "no_hp": no_hp,
+                "tanggal_lahir": datetime.strptime(tanggal_lahir, '%Y-%m-%d')
+            }}
+        )
+        
+        return result.modified_count > 0
+    except Exception as e:
+        print(f"Error updating data: {e}")
+        return False
+
+def delete_mahasiswa(id):
+    db = get_db_connection()
+    if db is None:
+        return False
+    
+    try:
+        # Try to delete by NRP
+        result = db.mahasiswa.delete_one({"NRP": id})
+        
+        # If nothing was deleted, try with nim
+        if result.deleted_count == 0:
+            result = db.mahasiswa.delete_one({"nim": id})
+            
+        return result.deleted_count > 0
+    except Exception as e:
+        print(f"Error deleting data: {e}")
+        return False

requirements.txt

@@ -0,0 +1,5 @@
+Flask
+fpdf2
+pymongo
+python-dotenv
+gunicorn

templates/edit_siswa.html

@@ -0,0 +1,250 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Edit Data Siswa</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <style>
+        :root {
+            --primary-color: #6d28d9; /* Purple */
+            --secondary-color: #7c3aed;
+            --accent-color: #4f46e5;
+            --success-color: #10b981;
+            --danger-color: #ef4444;
+            --background-color: #f3f4f6;
+            --card-color: #ffffff;
+            --text-color: #374151;
+            --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: var(--background-color);
+            color: var(--text-color);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 2rem;
+        }
+
+        .container {
+            width: 100%;
+            max-width: 600px;
+            background-color: var(--card-color);
+            border-radius: 1rem;
+            box-shadow: var(--shadow);
+            overflow: hidden;
+            transition: transform 0.3s ease;
+        }
+
+        .container:hover {
+            transform: translateY(-5px);
+        }
+
+        .header {
+            background-color: var(--primary-color);
+            color: white;
+            padding: 1.5rem;
+            text-align: center;
+            position: relative;
+        }
+
+        .header h1 {
+            font-size: 1.8rem;
+            margin-bottom: 0.5rem;
+        }
+
+        .header p {
+            font-size: 0.9rem;
+            opacity: 0.9;
+        }
+
+        .form-container {
+            padding: 2rem;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+            position: relative;
+        }
+
+        .form-group i {
+            position: absolute;
+            top: 42px;
+            left: 12px;
+            color: var(--primary-color);
+        }
+
+        label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: 600;
+            color: var(--text-color);
+            font-size: 0.95rem;
+        }
+
+        input[type="text"],
+        input[type="date"] {
+            width: 100%;
+            padding: 0.8rem 0.8rem 0.8rem 2.5rem;
+            border: 1px solid #e5e7eb;
+            border-radius: 0.5rem;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            background-color: #f9fafb;
+        }
+
+        input[type="text"]:focus,
+        input[type="date"]:focus {
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.2);
+            outline: none;
+        }
+
+        input[type="date"] {
+            padding-left: 2.5rem;
+        }
+
+        .button-group {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 2rem;
+        }
+
+        .btn {
+            padding: 0.8rem 1.5rem;
+            border: none;
+            border-radius: 0.5rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1rem;
+        }
+
+        .btn i {
+            margin-right: 0.5rem;
+        }
+
+        .btn-primary {
+            background-color: var(--primary-color);
+            color: white;
+            flex: 1;
+            margin-right: 1rem;
+        }
+
+        .btn-primary:hover {
+            background-color: var(--secondary-color);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+
+        .btn-secondary {
+            background-color: #e5e7eb;
+            color: #4b5563;
+        }
+
+        .btn-secondary:hover {
+            background-color: #d1d5db;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+
+        /* Animation for form input focus */
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.02); }
+            100% { transform: scale(1); }
+        }
+
+        .form-group:focus-within {
+            animation: pulse 0.5s ease;
+        }
+
+        /* Responsive */
+        @media (max-width: 640px) {
+            .container {
+                border-radius: 0;
+            }
+            .button-group {
+                flex-direction: column;
+            }
+            .btn-primary {
+                margin-right: 0;
+                margin-bottom: 1rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>Edit Data Siswa</h1>
+            <p>Perbarui informasi siswa</p>
+        </div>
+        
+        <div class="form-container">
+            <form action="{{ url_for('edit_siswa', id=student.NRP if student.NRP is defined else student.nim) }}" method="POST">
+                <div class="form-group">
+                    <label for="NRP"><i class="fas fa-id-card"></i> NRP/NIM:</label>
+                    <input type="text" id="NRP" name="NRP" value="{{ student.NRP if student.NRP is defined else student.nim }}" readonly>
+                </div>
+                
+                <div class="form-group">
+                    <label for="nama_lengkap"><i class="fas fa-user"></i> Nama Lengkap:</label>
+                    <input type="text" id="nama_lengkap" name="nama_lengkap" value="{{ student.nama_lengkap }}" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="no_hp"><i class="fas fa-phone"></i> Nomor HP:</label>
+                    <input type="text" id="no_hp" name="no_hp" value="{{ student.no_hp }}" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="tanggal_lahir"><i class="fas fa-calendar-alt"></i> Tanggal Lahir:</label>
+                    <input type="date" id="tanggal_lahir" name="tanggal_lahir" 
+                           value="{{ student.tanggal_lahir.strftime('%Y-%m-%d') if student.tanggal_lahir is not string else student.tanggal_lahir }}" required>
+                </div>
+                
+                <div class="button-group">
+                    <button type="submit" class="btn btn-primary">
+                        <i class="fas fa-save"></i> Simpan Perubahan
+                    </button>
+                    <a href="{{ url_for('index') }}" class="btn btn-secondary">
+                        <i class="fas fa-arrow-left"></i> Batal
+                    </a>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <script>
+        // Animasi sederhana untuk input saat form loading
+        document.addEventListener('DOMContentLoaded', function() {
+            const inputs = document.querySelectorAll('input');
+            inputs.forEach((input, index) => {
+                setTimeout(() => {
+                    input.style.opacity = '0';
+                    input.style.transform = 'translateY(20px)';
+                    input.style.transition = 'all 0.5s ease';
+                    
+                    setTimeout(() => {
+                        input.style.opacity = '1';
+                        input.style.transform = 'translateY(0)';
+                    }, 100);
+                }, index * 100);
+            });
+        });
+    </script>
+</body>
+</html>

templates/index.html

@@ -0,0 +1,482 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sistem Laporan Siswa</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <style>
+        :root {
+            --primary-color: #6d28d9; /* Ungu - matching with tambah_siswa.html */
+            --secondary-color: #7c3aed;
+            --success-color: #10b981; /* Green */
+            --background-color: #f3f4f6;
+            --card-color: #ffffff;
+            --text-color: #374151;
+            --border-color: #e5e7eb;
+            --shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: var(--background-color);
+            line-height: 1.6;
+            color: var(--text-color);
+        }
+
+        .container {
+            max-width: 1100px;
+            margin: 0 auto;
+            background-color: var(--card-color);
+            padding: 30px;
+            border-radius: 1rem;
+            box-shadow: var(--shadow);
+            animation: fadeIn 0.5s ease;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .header {
+            text-align: center;
+            margin-bottom: 30px;
+            padding-bottom: 20px;
+            border-bottom: 2px solid var(--border-color);
+            position: relative;
+        }
+
+        .header::after {
+            content: '';
+            position: absolute;
+            bottom: -2px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 100px;
+            height: 4px;
+            background-color: var(--primary-color);
+            border-radius: 2px;
+        }
+
+        h1 {
+            color: var(--primary-color);
+            margin: 0;
+            font-size: 28px;
+            font-weight: 700;
+            letter-spacing: -0.5px;
+        }
+
+        h2 {
+            color: #555;
+            font-size: 22px;
+            margin: 15px 0;
+            font-weight: 600;
+        }
+
+        h3 {
+            color: var(--text-color);
+            margin: 25px 0 15px 0;
+            font-size: 18px;
+            font-weight: 600;
+            position: relative;
+            padding-left: 15px;
+        }
+
+        h3::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 5px;
+            height: 20px;
+            background-color: var(--primary-color);
+            border-radius: 3px;
+        }
+
+        .action-buttons {
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            margin: 25px 0;
+        }
+
+        .action-btn {
+            padding: 12px 25px;
+            border-radius: 8px;
+            color: white;
+            text-decoration: none;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+        }
+
+        .action-btn i {
+            margin-right: 8px;
+            font-size: 16px;
+        }
+
+        .action-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        }
+
+        .btn-print {
+            background-color: var(--success-color);
+        }
+
+        .btn-print:hover {
+            background-color: #0da76f;
+        }
+
+        .btn-add {
+            background-color: var(--primary-color);
+        }
+
+        .btn-add:hover {
+            background-color: var(--secondary-color);
+        }
+
+        .table-container {
+            overflow-x: auto;
+            border-radius: 8px;
+            box-shadow: var(--shadow);
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+
+        th, td {
+            padding: 15px 20px;
+            text-align: left;
+        }
+
+        th {
+            background-color: var(--primary-color);
+            color: white;
+            font-weight: 600;
+            text-transform: uppercase;
+            font-size: 14px;
+            letter-spacing: 0.5px;
+        }
+
+        tr:nth-child(even) {
+            background-color: #f9fafb;
+        }
+
+        tr:not(thead tr) {
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        tr:last-child {
+            border-bottom: none;
+        }
+
+        tr:hover:not(thead tr) {
+            background-color: #f3f4f6;
+        }
+
+        td {
+            transition: all 0.2s ease;
+        }
+
+        .alert {
+            padding: 15px 20px;
+            background-color: #ecfdf5;
+            border-left: 4px solid var(--success-color);
+            color: #065f46;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            opacity: 1;
+            transition: opacity 0.5s ease, transform 0.5s ease;
+            transform: translateY(0);
+            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+            {% if status != 'success' %}display: none;{% endif %}
+        }
+
+        .alert i {
+            margin-right: 10px;
+            font-size: 20px;
+            color: var(--success-color);
+        }
+
+        .alert.fade-out {
+            opacity: 0;
+            transform: translateY(-20px);
+        }
+
+        .empty-state {
+            text-align: center;
+            padding: 40px 20px;
+            color: #6b7280;
+        }
+
+        .empty-state i {
+            font-size: 48px;
+            color: #d1d5db;
+            margin-bottom: 15px;
+        }
+
+        .empty-state p {
+            font-size: 16px;
+            margin-bottom: 20px;
+        }
+
+        /* Action icons styling */
+        .actions {
+            width: 100px;
+            text-align: center;
+        }
+        
+        .action-icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            color: white;
+            margin: 0 3px;
+            transition: all 0.2s ease;
+        }
+        
+        .edit-icon {
+            background-color: #3b82f6;
+        }
+        
+        .edit-icon:hover {
+            background-color: #2563eb;
+            transform: translateY(-2px);
+        }
+        
+        .delete-icon {
+            background-color: #ef4444;
+        }
+        
+        .delete-icon:hover {
+            background-color: #dc2626;
+            transform: translateY(-2px);
+        }
+        
+        /* Modal styles */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .modal-content {
+            background-color: white;
+            padding: 2rem;
+            border-radius: 1rem;
+            width: 90%;
+            max-width: 500px;
+            box-shadow: var(--shadow);
+            text-align: center;
+            animation: modalFadeIn 0.3s ease;
+        }
+        
+        @keyframes modalFadeIn {
+            from { opacity: 0; transform: translateY(-50px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        .modal h3 {
+            color: #dc2626;
+            margin-bottom: 1rem;
+            padding: 0;
+        }
+        
+        .modal h3::before {
+            display: none;
+        }
+        
+        .modal p {
+            margin-bottom: 1.5rem;
+        }
+        
+        .modal-buttons {
+            display: flex;
+            justify-content: center;
+            gap: 1rem;
+        }
+        
+        .modal-btn {
+            padding: 0.75rem 1.5rem;
+            border-radius: 0.5rem;
+            font-weight: 600;
+            cursor: pointer;
+        }
+        
+        .btn-confirm {
+            background-color: #ef4444;
+            color: white;
+        }
+        
+        .btn-cancel {
+            background-color: #e5e7eb;
+            color: #4b5563;
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .action-buttons {
+                flex-direction: column;
+                gap: 10px;
+            }
+            
+            .action-btn {
+                width: 100%;
+            }
+            
+            th, td {
+                padding: 12px 15px;
+            }
+            
+            h1 {
+                font-size: 24px;
+            }
+            
+            h2 {
+                font-size: 18px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>SEKOLAH MENENGAH KEJURUAN NEGERI 5 CILEGON</h1>
+            <h2>Sistem Laporan Siswa</h2>
+        </div>
+        
+        <div class="alert">
+            <i class="fas fa-check-circle"></i>
+            <span>Data berhasil disimpan!</span>
+        </div>
+        
+        <div class="action-buttons">
+            <a href="{{ url_for('cetak_pdf') }}" class="action-btn btn-print" target="_blank">
+                <i class="fas fa-file-pdf"></i> Cetak Laporan PDF
+            </a>
+            <a href="{{ url_for('tambah_siswa') }}" class="action-btn btn-add">
+                <i class="fas fa-user-plus"></i> Tambah Data Siswa
+            </a>
+        </div>
+        
+        <h3>Daftar Siswa Kelas IX Jurusan Rekayasa Kecerdasan Artifisial</h3>
+        
+        <div class="table-container">
+            {% if mahasiswa and mahasiswa|length > 0 %}
+            <table>
+                <thead>
+                    <tr>
+                        <th>NRP/NIM</th>
+                        <th>Nama Lengkap</th>
+                        <th>No HP</th>
+                        <th>Tanggal Lahir</th>
+                        <th>Aksi</th>
+                    </tr>
+                </thead>
+                <tbody>
+    {% for student in mahasiswa %}
+    <tr>
+        <td>{{ student.NRP if student.NRP is defined else student.nim }}</td>
+        <td>{{ student.nama_lengkap }}</td>
+        <td>{{ student.no_hp }}</td>
+        <td>{{ student.tanggal_lahir.strftime('%d-%m-%Y') if student.tanggal_lahir is not string else student.tanggal_lahir }}</td>
+        <td class="actions">
+            <a href="{{ url_for('edit_siswa', id=student.NRP if student.NRP is defined else student.nim) }}" class="action-icon edit-icon" title="Edit">
+                <i class="fas fa-edit"></i>
+            </a>
+            <a href="#" onclick="confirmDelete('{{ student.NRP if student.NRP is defined else student.nim }}')" class="action-icon delete-icon" title="Hapus">
+                <i class="fas fa-trash-alt"></i>
+            </a>
+        </td>
+    </tr>
+    {% endfor %}
+</tbody>
+            </table>
+            {% else %}
+            <div class="empty-state">
+                <i class="fas fa-user-graduate"></i>></i>
+                <p>Tidak ada data siswa ditemukan.</p>ak ada data siswa ditemukan.</p>
+            </div>
+            {% endif %} endif %}
+        </div>div>
+    </div>    </div>
+
+    <!-- Modal for delete confirmation -->
+    <div id="deleteModal" class="modal">
+        <div class="modal-content">3>
+            <h3><i class="fas fa-exclamation-triangle"></i> Konfirmasi Hapus</h3>
+            <p>Apakah Anda yakin ingin menghapus data siswa ini?</p>}}" method="POST">   <p>Apakah Anda yakin ingin menghapus data siswa ini?</p>
+            <form id="deleteForm" action="{{ url_for('hapus_siswa') }}" method="POST"> action="{{ url_for('hapus_siswa') }}" method="POST">
+                <input type="hidden" id="deleteId" name="id">" name="id">
+                <div class="modal-buttons">lass="modal-btn btn-cancel" onclick="closeModal()">Batal</button>
+                    <button type="button" class="modal-btn btn-cancel" onclick="closeModal()">Batal</button>e="button" class="modal-btn btn-cancel" onclick="closeModal()">Batal</button>
+                    <button type="submit" class="modal-btn btn-confirm">Hapus</button>Hapus</button>
+                </div>
+            </form>
+        </div>
+    </div>
+    <script>
+    <script>tion confirmDelete(id) {
+        // Add this JavaScript to the existing script = id;/ Add this JavaScript to the existing script
+        function confirmDelete(id) {'deleteModal').style.display = 'flex';ion confirmDelete(id) {
+            document.getElementById('deleteId').value = id;d;
+            document.getElementById('deleteModal').style.display = 'flex';;
+        }unction closeModal() {        }
+        
+        function closeModal() {
+            document.getElementById('deleteModal').style.display = 'none';
+        }
+        
+        // Close modal when clicking outside of it
+        window.onclick = function(event) {
+            const modal = document.getElementById('deleteModal');
+            if (event.target == modal) {
+                closeModal();
+            }
+        }
+    </script>
+</body>
+</html></body>    </script>        }            }                closeModal();            if (event.target == modal) {            const modal = document.getElementById('deleteModal');        window.onclick = function(event) {        // Close modal when clicking outside of it                }            document.getElementById('deleteModal').style.display = 'none';        
+        function closeModal() {
+            document.getElementById('deleteModal').style.display = 'none';
+        }
+        
+        // Close modal when clicking outside of it
+        window.onclick = function(event) {
+            const modal = document.getElementById('deleteModal');
+            if (event.target == modal) {
+                closeModal();
+            }
+        }
+    </script>
+</body>
+</html>

templates/tambah_siswa.html

@@ -0,0 +1,249 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tambah Data Siswa</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <style>
+        :root {
+            --primary-color: #6d28d9; /* Purple */
+            --secondary-color: #7c3aed;
+            --accent-color: #4f46e5;
+            --success-color: #10b981;
+            --danger-color: #ef4444;
+            --background-color: #f3f4f6;
+            --card-color: #ffffff;
+            --text-color: #374151;
+            --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: var(--background-color);
+            color: var(--text-color);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 2rem;
+        }
+
+        .container {
+            width: 100%;
+            max-width: 600px;
+            background-color: var(--card-color);
+            border-radius: 1rem;
+            box-shadow: var(--shadow);
+            overflow: hidden;
+            transition: transform 0.3s ease;
+        }
+
+        .container:hover {
+            transform: translateY(-5px);
+        }
+
+        .header {
+            background-color: var(--primary-color);
+            color: white;
+            padding: 1.5rem;
+            text-align: center;
+            position: relative;
+        }
+
+        .header h1 {
+            font-size: 1.8rem;
+            margin-bottom: 0.5rem;
+        }
+
+        .header p {
+            font-size: 0.9rem;
+            opacity: 0.9;
+        }
+
+        .form-container {
+            padding: 2rem;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+            position: relative;
+        }
+
+        .form-group i {
+            position: absolute;
+            top: 42px;
+            left: 12px;
+            color: var(--primary-color);
+        }
+
+        label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: 600;
+            color: var(--text-color);
+            font-size: 0.95rem;
+        }
+
+        input[type="text"],
+        input[type="date"] {
+            width: 100%;
+            padding: 0.8rem 0.8rem 0.8rem 2.5rem;
+            border: 1px solid #e5e7eb;
+            border-radius: 0.5rem;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            background-color: #f9fafb;
+        }
+
+        input[type="text"]:focus,
+        input[type="date"]:focus {
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.2);
+            outline: none;
+        }
+
+        input[type="date"] {
+            padding-left: 2.5rem;
+        }
+
+        .button-group {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 2rem;
+        }
+
+        .btn {
+            padding: 0.8rem 1.5rem;
+            border: none;
+            border-radius: 0.5rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1rem;
+        }
+
+        .btn i {
+            margin-right: 0.5rem;
+        }
+
+        .btn-primary {
+            background-color: var(--primary-color);
+            color: white;
+            flex: 1;
+            margin-right: 1rem;
+        }
+
+        .btn-primary:hover {
+            background-color: var(--secondary-color);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+
+        .btn-secondary {
+            background-color: #e5e7eb;
+            color: #4b5563;
+        }
+
+        .btn-secondary:hover {
+            background-color: #d1d5db;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+
+        /* Animation for form input focus */
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.02); }
+            100% { transform: scale(1); }
+        }
+
+        .form-group:focus-within {
+            animation: pulse 0.5s ease;
+        }
+
+        /* Responsive */
+        @media (max-width: 640px) {
+            .container {
+                border-radius: 0;
+            }
+            .button-group {
+                flex-direction: column;
+            }
+            .btn-primary {
+                margin-right: 0;
+                margin-bottom: 1rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>Tambah Data Siswa</h1>
+            <p>Silakan isi formulir di bawah dengan lengkap</p>
+        </div>
+        
+        <div class="form-container">
+            <form action="{{ url_for('tambah_siswa') }}" method="POST">
+                <div class="form-group">
+                    <label for="NRP"><i class="fas fa-id-card"></i> NRP/NIM:</label>
+                    <input type="text" id="NRP" name="NRP" placeholder="Masukkan NRP siswa" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="nama_lengkap"><i class="fas fa-user"></i> Nama Lengkap:</label>
+                    <input type="text" id="nama_lengkap" name="nama_lengkap" placeholder="Masukkan nama lengkap siswa" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="no_hp"><i class="fas fa-phone"></i> Nomor HP:</label>
+                    <input type="text" id="no_hp" name="no_hp" placeholder="Masukkan nomor HP" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="tanggal_lahir"><i class="fas fa-calendar-alt"></i> Tanggal Lahir:</label>
+                    <input type="date" id="tanggal_lahir" name="tanggal_lahir" required>
+                </div>
+                
+                <div class="button-group">
+                    <button type="submit" class="btn btn-primary">
+                        <i class="fas fa-save"></i> Simpan Data
+                    </button>
+                    <a href="{{ url_for('index') }}" class="btn btn-secondary">
+                        <i class="fas fa-arrow-left"></i> Kembali
+                    </a>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <script>
+        // Animasi sederhana untuk input saat form loading
+        document.addEventListener('DOMContentLoaded', function() {
+            const inputs = document.querySelectorAll('input');
+            inputs.forEach((input, index) => {
+                setTimeout(() => {
+                    input.style.opacity = '0';
+                    input.style.transform = 'translateY(20px)';
+                    input.style.transition = 'all 0.5s ease';
+                    
+                    setTimeout(() => {
+                        input.style.opacity = '1';
+                        input.style.transform = 'translateY(0)';
+                    }, 100);
+                }, index * 100);
+            });
+        });
+    </script>
+</body>
+</html>