Below is a complete program that demonstrates how to create a College Enrollment System using Mongoose and a local MongoDB server.
The program includes:
defining JSON schemas : schema is JavaScript class which we use to make JSON data documents
CREATE JSON records: inserting sample data,
update, delete operations work with getting a handle on a set of JSON data documents using a FIELD FILTER
Do predicate join between collections using the aggregation pipeline to register students into classes.
Step-by-Step Guide
1. **Set Up MongoDB and Mongoose**: Make sure you have MongoDB installed and running on your local premises. Install Mongoose in your project directory.
Make a new project (new directory) in VSC
npm init -y
npm install mongoose
```
2. Create the Project Structure**: Create the following files in your project directory:
- `models.js`
- `insertData.js`
- `enrollStudents.js`
- `aggregateEnrollments.js`
This program demonstrates how to create a College Enrollment System with MongoDB and Mongoose on a local premises server, including inserting sample data, enrolling students into classes, and using the aggregation pipeline to register students into classes.
Lab Part 2: Bolting on the Front End HTTP Server
Lab Lesson: Building a College Enrollment System with MongoDB and Express.js
#### Objective
In this lesson, students will learn how to create a College Enrollment System using MongoDB, Mongoose, and Express.js.
The system will include functionality for adding, updating, and deleting student records through an Express.js web server with HTML forms.
### Table of Contents
1. Set Up MongoDB and Mongoose
2. Create Project Structure
3. Define Mongoose Schemas
4. Insert Sample Data
5. Create Express.js Web Server
6. Create HTML Forms for CRUD Operations
7. Demonstrate Predicate Join with Aggregation Pipeline
8. Running and Testing the Application
---
1. Set Up MongoDB and Mongoose
Ensure MongoDB is installed and running on your local machine.
Initialize a new Node.js project and install required packages:
2. **Enroll Students into Classes**:
```bash
node enrollStudents.js
```
3. **Start the Express.js Server**:
```bash
node app.js
```
4. **Open Browser**:
- Go to `http://localhost:3000/` to view the student list.
- Add a new student using the form at `http://localhost:3000/student/add`.
- Edit a student using the edit link in the student list.
- Delete a student using the delete button in the student list.
By following these steps, students will gain hands-on experience in building a full-stack application using MongoDB, Mongoose, and Express.js, and will understand how to manage data and perform operations using HTML forms and the aggregation pipeline.
Next steps:
Add routes for other Student Enrollment Management and reporting Functions
Add to the Application base to include functionality to display room utilization and availability by day/time
How would you go about adding a Calendar display for Classes and Students?
Here are some notable calendar display libraries that you can use for simple HTML web displays:
CSS-Only Colorful Calendar Concept
- Designed with vibrant colors and only utilizing HTML and CSS, this calendar provides an exciting art style and smooth scrolling functionality [citation:2][citation:10].
```html
<div class="calendar">
<div class="month">
<ul>
<li class="prev">❮</li>
<li class="next">❯</li>
<li>August<br><span style="font-size:18px">2023</span></li>
</ul>
</div>
<ul class="weekdays">
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul>
<ul class="days">
<!-- Dates will go here -->
</ul>
</div>
```
3. **Event Calendar Widget**
- Displays upcoming events clearly beneath the calendar itself, making it easy to navigate to desired dates with a sleek and simple user experience [citation:10].
4. **JavaScript Libraries
- **FullCalendar.js:
A powerful and versatile JavaScript library that supports calendar views, date and event management, and integration with various frameworks like React, Angular, and Vue [citation:8][citation:6].
```html
<link href='https://unpkg.com/@fullcalendar/core/main.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/daygrid/main.css' rel='stylesheet' />
<script src='https://unpkg.com/@fullcalendar/core/main.js'></script>
<script src='https://unpkg.com/@fullcalendar/daygrid/main.js'></script>
<div id='calendar'></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ],
defaultView: 'dayGridMonth',
events: [
{ title: 'Event 1', start: '2023-07-01' },
{ title: 'Event 2', start: '2023-07-02' }
]
});
calendar.render();
});
</script>
```
FullCalendar provides extensive customization options, theming, and responsive designs, making it suitable for complex calendar needs [citation:8].
### 5. **DayPilot Lite**
- An open-source JavaScript calendar and scheduler library with drag-and-drop functionality, ideal for creating project management and booking applications [citation:8].
### 6. **Webix JS Calendar**
- A highly customizable JavaScript library allowing users to choose specific days, months, years, and time selections. It ensures easy localization and adapts to different regions [citation:6].
These libraries and methods offer various levels of customization and functionality, ensuring that you can find one that best suits your needs for simple HTML web calendar displays.
Want to print your doc? This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (