Public Homepage: Displaying Trip Listings

by Henrik Larsen 42 views

Hey guys! Today, we're diving deep into Issue #7, which is all about creating a public homepage that displays a list of available trips. This is a crucial step in making our platform user-friendly and accessible to everyone. Let's break down the tasks, acceptance criteria, and how we can make this page shine!

Description

The main goal here is to design and develop a publicly accessible homepage that showcases a list of trips that users can browse. Think of it as the front door to our application – it needs to be inviting, informative, and easy to navigate. This page will be the first thing potential travelers see, so it’s super important to get it right!

Why is this important?

  • First Impressions: The homepage is often the first interaction users have with our platform.
  • User Engagement: A clear and well-organized homepage encourages users to explore available trips.
  • Accessibility: Making trip information easily accessible improves the overall user experience.

Tasks to be Done

Let's get into the nitty-gritty of what needs to be done to bring this homepage to life. We've got a few key tasks on our plate, so let’s tackle them one by one.

1. Creating the HomeController

First up, we need a controller to handle the logic for our homepage. The HomeController will be responsible for fetching trip data and passing it to the view. Think of it as the conductor of our homepage orchestra. It’s the brain that organizes all the information before presenting it to the user.

  • What it does: The HomeController will receive requests for the homepage, interact with the model to retrieve trip data, and prepare the data for the view.
  • Why it's important: Controllers are essential for maintaining a clean separation of concerns in our application. They handle the application's logic, keeping it separate from the presentation (view) and data (model) layers.

Here’s a simple breakdown of what the HomeController should do:

  1. Receive a request to display the homepage.
  2. Call the Trip model to get a list of trips.
  3. Pass the trip data to the home.php view.

2. Creating the Trip Model with Retrieval Methods

Next, we need a Trip model to represent our trip data and provide methods for retrieving trips from the database. This model will act as our data interface, allowing us to interact with trip information in a structured way. It's like our trip data librarian, keeping everything organized and accessible.

  • What it does: The Trip model will define the structure of a trip (e.g., departure location, arrival location, dates, available seats) and provide methods to fetch trips from the database.
  • Why it's important: Models encapsulate the data and business logic related to trips, making it easier to manage and maintain our application's data.

The Trip model should include the following:

  • Attributes: Properties to store trip information (e.g., departureAgency, arrivalAgency, departureDate, arrivalDate, availableSeats).
  • Methods:
    • getAllTrips(): Retrieves all trips from the database.
    • getFutureTripsWithAvailableSeats(): Retrieves only future trips with available seats (we'll dive into this in more detail later).

3. home.php - The Trip List View

Now, let's talk about the visual representation of our trip list. The home.php view will be responsible for displaying the trip data to the user. This is where we put on our designer hats and think about how to present the information in a clear and appealing way. It's like the stage where our trip data takes the spotlight.

  • What it does: The home.php view will take the trip data provided by the HomeController and render it in a user-friendly format.
  • Why it's important: Views are crucial for separating the presentation layer from the application logic, making our code more maintainable and easier to understand.

In home.php, we'll need to:

  1. Receive the trip data from the HomeController.
  2. Loop through the trips and display their information (departure/arrival agencies, dates, available seats).
  3. Handle the case where no trips are available (more on that later).

4. Automatic Sorting by Ascending Departure Date

To make it easier for users to find the trips they're interested in, we need to sort the list by departure date. This means trips with earlier departure dates should appear at the top of the list. Think of it as organizing our trips chronologically so users can quickly see what’s coming up soon.

  • What it does: Sorts the list of trips in ascending order based on the departure date.
  • Why it's important: Sorting enhances the user experience by presenting information in a logical and intuitive order.

We can achieve this sorting in the Trip model, specifically within the getFutureTripsWithAvailableSeats() method. We'll use a database query to sort the trips by the departureDate column in ascending order.

5. Filtering: Future Trips with Available Seats Only

We only want to show users trips that are in the future and have available seats. This ensures that users are seeing relevant information and aren’t getting their hopes up for trips that are already full or have passed. It's like making sure our trip list is always up-to-date and accurate.

  • What it does: Filters the list of trips to include only those that are in the future and have available seats.
  • Why it's important: Filtering prevents users from seeing irrelevant or unavailable trips, improving their experience and saving them time.

This filtering will be implemented in the getFutureTripsWithAvailableSeats() method of the Trip model. We'll add conditions to our database query to filter trips based on the following criteria:

  1. departureDate is in the future (i.e., greater than the current date).
  2. availableSeats is greater than 0.

6. Responsive Design with Bootstrap

In today's world, it's crucial that our website looks good and works well on all devices, whether it’s a desktop, tablet, or smartphone. That’s where responsive design comes in. We'll be using Bootstrap, a popular CSS framework, to ensure our homepage is responsive. It's like giving our homepage a wardrobe that fits every device perfectly.

  • What it does: Ensures that the homepage adapts to different screen sizes and devices.
  • Why it's important: Responsive design provides a consistent and user-friendly experience across all devices, reaching a wider audience.

With Bootstrap, we can use its grid system and pre-built components to create a layout that adjusts automatically to different screen sizes. This will save us a lot of time and effort compared to writing our own responsive CSS from scratch.

7. Displaying Information: Departure/Arrival Agency, Dates, Seats

Users need to see the key details of each trip at a glance. This includes the departure and arrival agencies, the dates of the trip, and the number of available seats. Think of it as giving users a quick snapshot of each trip so they can decide if they want to learn more. It’s like the highlights reel for each journey!

  • What it does: Displays the essential information for each trip in a clear and concise manner.
  • Why it's important: Providing key details upfront helps users quickly assess the relevance of each trip and make informed decisions.

In home.php, we’ll need to display the following information for each trip:

  • Departure Agency
  • Arrival Agency
  • Departure Date and Time
  • Arrival Date and Time
  • Available Seats

We'll use HTML elements and Bootstrap classes to format this information in an appealing and readable way.

8. Handling the