Project Feature blog write up / 5 things I did over 12 weeks

• 8 min read

Feature blog write up

Purpose: The purpose of my individual feature is to let presidents and other leaders of a club to announce events and make events easily. For example, if there is a competition, the president simply has to type their event on the form and click create on events tab, and other members will be able to view the event. In the form, there is club name part, which you can drag your mouse and click your club, event description, and the date of the event.

The Club Events Feature was developed to address the lack of organization and engagement in club-related activities. Many clubs struggle with effectively planning and managing events, leading to low participation and miscommunication among members. So, by using club events, I hope to let club leaders help label different events in one space to make club members easier to see the announcements or events. The feature increases club engagement and encourages active participation.

The events feature also includes a calendar, where users can view which date has an event easily without scrolling untill they find an event. There will be a white dot when there is an event that day. The events are also going to be displayed on the homepage.

The club leaders / event creaters can edit or delete the event. only the event creater, which is the president can edit or delete their clubs’ events.

5 things you did over 12 weeks

  1. Events Frontend

    • I matched the css styling with other group mates, which shows my collaboration skill and how we communicate with each other often.

    • The event form allows club leaders to create or update events. The form is displayed when the user clicks the “Create a New Event” button When the form is submitted, the input data (event name, description, date, and associated club) is collected and sent to the backend API via a POST request. If editing an existing event, the form fields are pre-filled with the event’s data, and the form sends a PUT request to update the event.

    • Club Selection Dropdown: To associate an event with a club, the form includes a dropdown list of clubs created by the logged-in user. The list of clubs is fetched from the backend, and only those created by the club leader are displayed.

    • Event List Display: The events are displayed in a paginated list. Each event includes the title, description, and date. The events are sorted by date in descending order (latest first).

    • Calendar Integration: The calendar view shows the days of the month, with event dots on the dates that have events. Users can click on a specific day to see all events scheduled for that day. The calendar is dynamically generated and updated based on the current month and year. Users can navigate between months using previous and next month buttons, and the event list will refresh based on the new month selected.

    • Edit / delete : Only the event creater, which is club president can view the buttons.

  2. Events Backend

    • Event CRUD Operations

    • Create (POST): Allows users to create new events by providing a title, description, and date. The data is validated to ensure all required fields are provided. If valid, a new Event object is created and stored in the database.

    • Read (GET): Retrieves and returns all events stored in the database as a list of dictionaries. Each event is converted into a JSON-friendly dictionary using the to_dict() method of the Event model.

    • Update (PUT): Allows updating an existing event by its ID. The event’s fields can be modified, and the changes are saved back to the database.

    • Delete (DELETE): Allows an authenticated user to delete an event by its ID. The event is removed from the database.

    • The EventAPI._USER class retrieves events for a specific user. It ensures that only authenticated users can access their own events by filtering the events using the user’s ID.

    • The Event class represents the event data in the database. This class is defined using SQLAlchemy

    • Made an data table called events

  3. backend UI for Club Hub Admin Page

    • styling (css)

    • The background uses a gradient from #FF4B2B to #FF416C for a vibrant and dynamic feel.

    • Custom buttons are styled with gradients and bold uppercase text, creating a professional yet stylish UI.

    • External Link button: Contains a button to direct users to the frontend website of Club Hub.

    • User/Club Management button: Provides links to manage users and clubs, where the admin can edit, delete, or add them.

    • Added descriptions and pictures to Admin Page

  4. Backend Clubs Table

    • Styling & Theme

    • Club Data Display: Clubs are displayed in a table with the columns ID, Name, Description, Topics, and Actions.

    • Edit and Delete Buttons: Admin users can edit or delete clubs via modals.

    • Add Club Button: There’s an “Add Club” button that opens a modal to create a new club.

    • Only admin can control them

  5. Init, Backup, Restore

    • Add init, backup, and restore functions to each features (did together)

    • Load Data from Files: Write a function to get data from files in the backup folder.

    • Generate Data Command: Create a command to add sample data to the database.

    • add each api to main.py

    • memorize commands for init, backup, and restore

CPT requirements

Requirement A database A procedure A call to the procedure Selection Iteration Sequencing Input from User
Step Tracker Y Y Y Y Y Y Y
  1. Database
__tablename__ = 'events' 

id = db.Column(db.Integer, primary_key=True)  
title = db.Column(db.String(255), nullable=False) 
description = db.Column(db.String(255), nullable=False)  
date = db.Column(db.Date, nullable=False)  

def create(self):  
    db.session.add(self)  
    db.session.commit()

explanation: The table is named “events” in the database, and each event is uniquely identified by an automatically generated id. Each event must have a title, description, and date, all of which are required fields. The create function is used to add a new event to the database by adding it to the session and then committing the changes, effectively saving the event in the database.

  1. A procedure
        def put(self):
            """
            Update an event.
            """
            current_user = g.current_user  # Retrieve data of current user
            data = request.get_json()  # Change JSON to Python dictionary

            if not data or 'id' not in data:
                return {'message': 'Event ID is required'}, 400

            event = Event.query.get(data['id'])  # Retrieve event by ID
            if event is None:
                return {'message': 'Event not found'}, 404

            updated_event = event.update(data)
            if updated_event:
                return jsonify(updated_event.to_dict())
            else:
                return {'message': 'An error occurred while updating the event. Please try again.'}, 500

explanation: The code defines a put method that updates an event. It retrieves the current user’s data and converts the incoming JSON request into a Python dictionary. It checks if the event ID is provided and retrieves the event from the database. If the event is found, it updates it with the new data and returns the updated event. If the event is not found or the update fails, it returns an appropriate error message (404 for not found, 500 for update failure).

  1. A call to a procedure
            try {
                const response = await fetch(`${pythonURI}/api/event`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    credentials: 'include',
                    body: JSON.stringify(payload),
                });

explanation: This code sends a PUT request to the server at the specified pythonURI for updating an event. It includes headers indicating the content type as JSON, includes the user’s credentials, and sends the event data (payload) as a JSON string in the request body.

Sequence, Selection, and Iteration

        def put(self):
            """
            Update an event.
            """
            current_user = g.current_user  # Retrieve data of current user
            data = request.get_json()  # Change JSON to Python dictionary

            if not data or 'id' not in data:
                return {'message': 'Event ID is required'}, 400

            event = Event.query.get(data['id'])  # Retrieve event by ID
            if event is None:
                return {'message': 'Event not found'}, 404

            updated_event = event.update(data)
            if updated_event:
                return jsonify(updated_event.to_dict())
            else:
                return {'message': 'An error occurred while updating the event. Please try again.'}, 500
  1. Selection
if not data or 'id' not in data:
    return {'message': 'Event ID is required'}, 400

if event is None:
    return {'message': 'Event not found'}, 404

explanation: Conditional checks determine which path to take based on conditions.

  1. Iteration
for event in events:
    event.update(data)

explanation: Repeated logic to process event update and check success.

  1. Sequencing
current_user = g.current_user 
data = request.get_json()  
event = Event.query.get(data['id'])

explanation: The code is executed step by step in a set order. First, g.current_user is accessed to get the current user’s information. Then, request.get_json() is called to retrieve the request body as a Python dictionary. These actions happen in a specific sequence, one after the other, without any condition or repetition.

  1. Input from User

eventForm.addEventListener('submit', async function (e) {  
    e.preventDefault();  
    const payload = {  
        title: clubName,  
        description: eventDescription,  
        date: eventDate, 
        user_id: currentUserId  
    };
});

explanation: This code listens for the form submission, prevents the default action, and creates a payload object with the event details and user ID to send to the server.