Student Project Portal - Copy this Html, Bootstrap Component to your project
Objective: Design and develop the frontend of a Student Project Upload Automation System using ASP.NET, HTML, and Bootstrap. The focus is to create a responsive, user friendly interface without using JavaScript, while ensuring compatibility with a backend SQL Server database. Pages and Their Functionalities KullaniciGiris.aspx (Login Page) Purpose: Allows users (students and teachers) to log in to the system. Displays announcements to all users. Components: Login Form: Username (Email) field. Password field (with secure input). Login button. Announcements Section: A collapsible or scrollable container displaying general updates or news. Styled using Bootstrap's card or list group components. YeniKayit.aspx (Registration Page) Purpose: Allows both students and teachers to create an account. Components: Registration Form: Fields: First Name (Ad), Last Name (SoyAd), Student Number (OgrenciNO for students only), Email, Phone Number, Password, and Account Type (KullaniciTip Radio Buttons for Teacher or Student). Form validations: Ensure all fields are filled correctly (e.g., email format, required fields, phone number length). Submit button styled with Bootstrap. Proje.aspx (Project Management Page) Purpose: For Students: List, edit, or delete their uploaded projects. For Teachers: Access and manage projects assigned to them. Components: Project List Table: Display project details (Project Name, Ratings, Uploaded Files). Include Edit and Delete buttons for students. For teachers: Add fields for feedback and notes (Hoca_Aciklama). Filters/Access Control: Show projects based on the user type (KullaniciTip). For teachers, only display projects linked to their ID (KontrolID). ProjeYkleme.aspx (Project Upload Page) Purpose: Allows students to upload project files and provide descriptions. Components: Upload Form: Fields: Project Name (ProjeAd), Description (Ogrenci_Aciklama), File Upload (Not_Dokuman). File input field: Ensure it accepts only specific formats (e.g., PDF, DOCX). Submit button styled with Bootstrap. Design Guidelines Responsive Design: Use Bootstrap's grid system to ensure pages are mobile and desktop compatible. Styling: Use Bootstrap components like cards, tables, buttons, forms, and alerts for a clean and modern look. Include a consistent navigation bar across pages for easy access. Add a footer with contact information or links to external resources. Validation: Use HTML5 validation attributes (required, pattern, maxlength) to enforce form input rules. Ensure all forms display error messages for invalid inputs using Bootstrap's form feedback styles. Frontend Structure Header and Navigation: A consistent header with navigation links (e.g., Login, Register, Upload Project, Manage Projects). Use Bootstrap's navbar component for responsive menus. Form Styling: Use form groups with labels and placeholders. Highlight required fields with * and include help text for inputs. Tables and Lists: Use Bootstrap's table classes (table, table striped, table hover) to display data. Include pagination for long lists, if necessary, using Bootstrap utilities. File Upload: Use an input type file element styled with Bootstrap for user friendly uploads. Add a progress bar to indicate upload status (optional for future enhancements). Deliverables HTML/ASP.NET Pages: Fully functional and styled pages for Login, Registration, Project Management, and Upload. CSS Integration: Bootstrap is integrated to ensure responsive and consistent styling. Documentation: Provide comments in the code explaining the structure and styles used. Include a brief guide on how to set up and test the frontend. Evaluation Criteria Design: Aesthetic, consistent, and responsive design. Functionality: All specified features implemented and working. Code Quality: Clean, organized, and well commented code. Accessibility: Ensure the system is easy to navigate and accessible for all users. This prompt will ensure the frontend development of the system meets the project requirements effectively. and make login and the rejester , edit, and list for each one of them has a page
