Implement: Database Configuration for Event table and event page

build.gradle

@@ -32,6 +32,8 @@ dependencies {
 	testImplementation 'org.springframework.boot:spring-boot-starter-test'
 	testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
 	implementation 'org.springframework.boot:spring-boot-starter-validation'
+	implementation 'org.springframework.boot:spring-boot-starter-jdbc'
+	implementation 'org.mariadb.jdbc:mariadb-java-client:2.1.2'
 }
 
 tasks.named('test') {

src/main/java/polish_community_group_11/polish_community/event/controllers/EventController.java

 package polish_community_group_11.polish_community.event.controllers;
+import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.servlet.ModelAndView;
-import polish_community_group_11.polish_community.event.models.Event;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
+import polish_community_group_11.polish_community.event.services.EventRepository;
 
 @Controller
 public class EventController {
-    @GetMapping("/event")
-    public ModelAndView getEventDetails() {
-        Event event = new Event("Sample Event",
-                "Join us for an exciting event full of fun and learning!",
-                "December 15, 2024",
-                "5:00 PM",
-                "Main Hall, City Center",
-                1,
-                "/assets/event-poster.jpg"
-        );
-
-        //Added a scope to have multiple events
-        //eventService.addEvent(event);
+    private EventRepository eventService;
+    public EventController(EventRepository eventService){
+        this.eventService = eventService;
+    }
 
-        ModelAndView modelAndView = new ModelAndView("event/event");
+    //To get the details of the event page
+    @GetMapping("event/{event_id}")
+    public ModelAndView getEventDetails(@PathVariable int event_id) {
+        // Fetch the event details using the eventId
+        ModelAndView modelAndView = new ModelAndView("event/event-detail");
 
+        //Add event to the object model
+        modelAndView.addObject("event",eventService.getEventById(event_id) );
 
-        modelAndView.addObject("event", event);
 
-        return modelAndView;  // This will load event.html in the templates folder
+        // Return the view for event details
+        return modelAndView;
     }
 
-
 }

src/main/java/polish_community_group_11/polish_community/event/models/Event.java

 package polish_community_group_11.polish_community.event.models;
 
-public class Event {
-    private String name;
-    private String description;
-    private String date;
-    private String time;
-    private String location;
-    private int id;
-
-    //Made the image url dynamic so that it can be used to get the images
-    private String imageUrl;
-
-    // Constructors, Getters, Setters
-
-    public Event(String name, String description, String date, String time, String location, int id,String imageUrl) {
-        this.name = name;
-        this.description = description;
-        this.date = date;
-        this.time = time;
-        this.location = location;
-        this.id = id;
-        this.imageUrl = imageUrl;
-    }
-
-    public String getName() {
-        return name;
-    }
-
-    public void setName(String name) {
-        this.name = name;
-    }
-
-    public String getDescription() {
-        return description;
-    }
-
-    public void setDescription(String description) {
-        this.description = description;
-    }
-
-    public String getDate() {
-        return date;
-    }
-
-    public void setDate(String date) {
-        this.date = date;
-    }
-
-    public String getTime() {
-        return time;
-    }
-
-    public void setTime(String time) {
-        this.time = time;
-    }
-
-    public void setId(int id) {
-        this.id = id;
-    }
-
-    public String getLocation() {
-        return location;
-    }
-
-    public void setLocation(String location) {
-        this.location = location;
-    }
-
-    public int getId() {
-        return id;
-    }
-
-    public String getImageUrl() {
-        return imageUrl;
-    }
-
-    public void setImageUrl(String imageUrl) {
-        this.imageUrl = imageUrl;
-    }
+import java.time.LocalDate;
+import java.time.LocalTime;
+
+public interface Event {
+    public int getEvent_id();
+    public void setEvent_id(int event_id);
+    public String getEvent_title();
+    public void setEvent_title(String name);
+    public String getDescription();
+    public void setDescription(String description);
+    public LocalDate getEvent_date();
+    public void setEvent_date(LocalDate event_date);
+    public LocalTime getEvent_time();
+    public void setEvent_time(LocalTime event_time);
+    public String getLocation();
+    public void setLocation(String location);
+    public int getUser_id();
+    public void setUser_id(int user_id);
+    public String getImageUrl();
+    public void setImageUrl(String imageUrl);
+    public String getWhyJoin();
+
+    public void setWhyJoin(String whyJoin);
+
+    public String getBenefits();
+
+    public void setBenefits(String benefits);
 }

src/main/java/polish_community_group_11/polish_community/event/models/EventImpl.java

+package polish_community_group_11.polish_community.event.models;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+
+import java.time.LocalDate;
+import java.time.LocalTime;
+
+@Data
+@AllArgsConstructor
+public class EventImpl implements Event{
+    private int event_id;
+    private String event_title;
+    private String description;
+    private LocalDate event_date;
+    private LocalTime event_time;
+    private String location;
+    private int user_id;
+    //Made the image url dynamic so that it can be used to get the images
+    private String imageUrl;
+    private String whyJoin;
+    private String benefits;
+
+}

src/main/java/polish_community_group_11/polish_community/event/services/EventRepository.java

+package polish_community_group_11.polish_community.event.services;
+
+import polish_community_group_11.polish_community.event.models.Event;
+import java.util.List;
+
+public interface EventRepository {
+     Event getEventById(int id);
+}

src/main/java/polish_community_group_11/polish_community/event/services/EventRepositoryImpl.java

+package polish_community_group_11.polish_community.event.services;
+
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.jdbc.core.RowMapper;
+import org.springframework.stereotype.Repository;
+import polish_community_group_11.polish_community.event.models.Event;
+import polish_community_group_11.polish_community.event.models.EventImpl;
+import java.util.List;
+
+@Repository
+public class EventRepositoryImpl implements EventRepository {
+    private JdbcTemplate jdbc;
+    private RowMapper<Event> eventItemMapper;
+    public EventRepositoryImpl(JdbcTemplate aJdbc) {
+        this.jdbc = aJdbc;
+        setEventItemMapper();
+    }
+
+    public void setEventItemMapper() {
+        try{
+            eventItemMapper = (rs, i) -> new EventImpl(
+                    rs.getInt("event_id"),
+                    rs.getString("event_title"),
+                    rs.getString("event_description"),
+                    rs.getDate("event_date").toLocalDate(),
+                    rs.getTime("event_time").toLocalTime(),
+                    rs.getString("location"),
+                    rs.getInt("user_id"),
+                    rs.getString("event_poster_url"),
+                    rs.getString("whyJoin"),
+                    rs.getString("benefits")
+            );
+        }
+        catch (Exception ex){
+            System.out.println(ex.getMessage());
+        }
+    }
+
+
+    public Event getEventById(int id){
+
+            String sql = "select * from event where event_id = ?";
+            Event event = jdbc.queryForObject(sql, eventItemMapper, id);
+            return event;
+    }
+
+}
+
+
+

src/main/java/polish_community_group_11/polish_community/event/services/EventService.java

-package polish_community_group_11.polish_community.event.services;
-
-import polish_community_group_11.polish_community.event.models.Event;
-import org.springframework.stereotype.Service;
-
-import java.util.ArrayList;
-import java.util.List;
-
-
-@Service
-    public class EventService {
-        private List<Event> eventList = new ArrayList<Event>();
-
-
-        //Added a getAllEvents so that it can be used to implement a list of dynamic events
-        public List<Event> getAllEvents() {
-            return eventList;
-        }
-
-        public Event addEvent(Event event) {
-            eventList.add(event);
-            return event;
-        }
-    }
-

src/main/resources/application.properties

-spring.application.name=polish-community
+spring.application.name=polish_community
+spring.datasource.url=jdbc:mariadb://localhost:3306/polish_community
+spring.datasource.username=root
+spring.datasource.password=comsc
+spring.sql.init.mode=always
\ No newline at end of file

src/main/resources/data.sql

+delete from event;
+
+insert into event (event_title, event_description, location, event_date, event_time,user_id, event_poster_url,whyJoin,benefits)
+values ('Science Fair', 'Students explore through the science fair', 'Cardiff', current_date,current_time, 1, 'https://marketplace.canva.com/EAE53TNAVD8/1/0/1131w/canva-event-present-science-fair-promotion-poster-1abqT-GiCNQ.jpg','Participating in the Science Fair offers you a unique opportunity to dive deep into the world of science, innovation, and discovery. Whether you''re a student eager to showcase your scientific knowledge or an individual with a passion for learning, this event is the perfect platform to fuel your curiosity. Here’s why you should join:
+
+Engage with Innovative Ideas: Explore cutting-edge scientific projects that challenge the status quo and inspire new ways of thinking.
+Collaborate with Like-Minded Individuals: Meet fellow science enthusiasts, students, and professionals who share your interests and passion for discovery.
+Boost Your Critical Thinking: Through the process of research, experimentation, and presentation, you’ll develop critical problem-solving skills that are invaluable in any field.
+Expand Your Knowledge: Learn about new technologies, scientific theories, and groundbreaking advancements that will shape the future of science and innovation.
+Be a Part of a Larger Community: Join a global community of science advocates and future scientists, making valuable connections that could open doors to future opportunities.', 'Hands-On Experience: Gain practical, hands-on experience in the scientific method, from research and hypothesis testing to data analysis and presentation.
+Develop Presentation Skills: Sharpen your ability to communicate complex scientific concepts in an engaging and accessible way, an essential skill for any future career.
+Exposure to Career Opportunities: Connect with professionals in science, education, and industry, opening up potential career pathways, internships, and scholarships.
+Recognition and Prizes: Stand a chance to win awards and gain recognition for your hard work and creativity. Whether you’re awarded for your innovation, research, or presentation, your efforts will be acknowledged.
+Confidence Building: Presenting your work to peers, teachers, and judges builds confidence in your abilities and boosts self-esteem, allowing you to grow as both a scientist and an individual.
+Inspire Future Projects: Your participation could spark new ideas and motivate others to start their own scientific endeavors, contributing to a culture of curiosity and learning.
+Stay Ahead of the Curve: By participating, you gain knowledge about the latest trends in science and technology, giving you an edge in academic and professional fields.
+By joining this science fair, you are not only enriching your own learning experience but also contributing to a vibrant community of innovators and explorers.');
+insert into event (event_title, event_description, location, event_date, event_time,user_id, event_poster_url,whyJoin,benefits)
+values ('Games Fair', 'Gamers explore through the game fair', 'Bristol', current_date,current_time, 1, 'https://d1csarkz8obe9u.cloudfront.net/posterpreviews/game-event-poster-template-c54aaeed440befaacf79e6dd35deb8f5_screen.jpg?ts=1486132851',"Abc", "Def");
+insert into event (event_title, event_description, location, event_date, event_time,user_id, event_poster_url,whyJoin,benefits)
+values ('Bikes Fair', 'Riders explore through the Ride fair', 'Newport', current_date,current_time, 1, 'https://d1csarkz8obe9u.cloudfront.net/posterpreviews/bike-fest-poster-design-template-fb1cc1ab4b2aee783f8ee75476c4c92d_screen.jpg?ts=1637012682',"Abc", "Def");
\ No newline at end of file

src/main/resources/schema.sql

+drop table if exists event;
+
+create table if not exists event(
+    event_id int primary key auto_increment,
+    event_title varchar(255),
+    event_description varchar(255),
+    location varchar(255),
+    event_date date,
+    event_time time,
+    user_id int,
+    event_poster_url varchar(255),
+    whyJoin text,
+    benefits text
+    )engine = InnoDB;
\ No newline at end of file

src/main/resources/static/css/events/event-detail.css

+/* Basic reset to ensure consistent styling across browsers */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #E3E2DF;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    height: 100vh; /* Full height of the viewport */
+    margin: 0;
+    padding-top: 10px;
+}
+
+#event-detail-container {
+    width: 80%;
+    max-width: 90%;
+    background-color: #fff;
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0 0 15px 2px #E3AFBC;
+    margin-top: 2rem;
+    background-image: linear-gradient(to right, #e3e2df,white);
+}
+
+.event-detail-card {
+    text-align: center; /* Center the text */
+    padding: 20px;
+}
+
+.event-detail-card h1 {
+    font-size: 2rem;
+    color: #5D001E;
+    margin-bottom: 20px;
+}
+
+/* Center the image and resize it */
+.image-container {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+}
+
+.event-image {
+    max-width: 80%; /* Resizes the image to 80% of the container */
+    height: auto;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Style for event description, date, and location */
+p {
+    font-size: 1rem;
+    color: #555;
+    line-height: 1.6;
+    margin-bottom: 15px;
+}
+
+strong {
+    font-weight: bold;
+}
+
+.text-details{
+    text-align: left;
+}
+
+/* Container for all the event-benefits sections */
+.event-benefits {
+    margin: 20px 0; /* Adds vertical spacing between sections */
+    padding: 15px; /* Adds padding inside the sections */
+    background-color: #E3E2DF; /* White background for each section */
+    border: 1px solid #E3AFBC; /* Light border to separate sections */
+    border-radius: 8px; /* Rounded corners for the section */
+}
+
+/* Styling for the headings inside the event-benefits sections */
+.event-benefits h2 {
+    font-size: 24px; /* Sets a larger font size for the headings */
+    color: #EE4C7C; /* Blue color for the headings */
+    margin-bottom: 10px; /* Adds space below the heading */
+}
+
+/* Styling for the paragraphs inside the event-benefits sections */
+.event-benefits p {
+    font-size: 16px; /* Sets a standard font size for paragraphs */
+    line-height: 1.6; /* Increases line height for better readability */
+}
+
+/* Styling for the list items inside the event-benefits sections */
+.event-benefits ul {
+    text-align: left;
+    list-style-type: disc; /* Adds bullet points to the list */
+    padding-left: 20px; /* Indents the list items */
+}
+
+.event-benefits li {
+    font-size: 16px; /* Standard font size for list items */
+    margin-bottom: 8px; /* Adds spacing between list items */
+}
+
+/* Optional: Hover effect for the headings */
+
+
+.register-button {
+    background-color: #EE4C7C;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    font-size: 1rem;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+}
+
+.register-button:hover {
+    background-color: #9A1750;
+}

src/main/resources/static/css/events/events.css

-/* General Styles */
-body {
-    font-family: Arial, sans-serif;
-    margin: 0;
-    padding: 0;
-    background-color: #f4f4f4;
-}
-
-/* Event Poster */
-.event-container {
-    display: flex;
-    justify-content: center;
-    margin-top: 20px;
-}
-
-.event-poster {
-    cursor: pointer;
-    width: 300px;
-    text-align: center;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    overflow: hidden;
-    background-color: white;
-}
-
-.event-poster img {
-    width: 100%;
-    height: auto;
-    border-bottom: 1px solid #ddd;
-}
-
-.event-poster h3 {
-    padding: 10px;
-    font-size: 1.2em;
-    background-color: #333;
-    color: white;
-    margin: 0;
-}
-
-/* Event Details Modal */
-.event-details {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.7);
-    display: none;
-    justify-content: center;
-    align-items: center;
-}
-
-.event-details-content {
-    background-color: white;
-    padding: 30px;
-    border-radius: 10px;
-    max-width: 500px;
-    text-align: center;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-}
-
-.event-details h2 {
-    margin-bottom: 10px;
-    color: #333;
-}
-
-.event-details p {
-    margin: 8px 0;
-}
-
-.register-button {
-    padding: 10px 20px;
-    background-color: #28a745;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    margin-top: 20px;
-}
-
-.register-button:hover {
-    background-color: #218838;
-}
-
-.close-button {
-    padding: 10px 20px;
-    background-color: #dc3545;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    margin-top: 10px;
-}
-
-.close-button:hover {
-    background-color: #c82333;
-}

src/main/resources/static/js/event/event.js

-// Show event details when the event poster is clicked
-function showEventDetails() {
-    const eventDetails = document.getElementById("event-details");
-    eventDetails.style.display = "flex";  // Show the details modal
-}
+document.addEventListener('DOMContentLoaded', function () {
+    var image = document.getElementById('myImage');
+    var fallbackImagePath = 'assets/fallback_image_image_not_found.jpg';
 
-// Close event details modal
-function closeEventDetails() {
-    const eventDetails = document.getElementById("event-details");
-    eventDetails.style.display = "none";  // Hide the modal
-}
-
-function registerEvent(){
-
-}
+    image.addEventListener('error', function() {
+        image.src = fallbackImagePath;  // Replace with your fallback image URL
+        image.alt = 'Fallback image';  // Optional: Set alt text for fallback image
+        console.log('Image failed to load, fallback is now shown.');
+    });
+});

src/main/resources/templates/event/event-detail.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Event Details</title>
+    <link rel="stylesheet" href="/css/events/event-detail.css">
+</head>
+<body>
+<div id="event-detail-container">
+    <div class="event-detail-card">
+        <div class="image-container">
+            <img th:src="${event.getImageUrl()}" alt="Event Image" class="event-image">
+        </div>
+        <h1 th:text="${event.getEvent_title()}">Event Name</h1>
+        <div class = "text-details">
+            <p><strong>Description:</strong> <span th:text="${event.getDescription()}">Event description</span></p>
+            <p><strong>Date and Time:</strong> <span th:text="${event.getEvent_date()}">Event date</span>, <span th:text="${event.getEvent_time()}">Event time</span></p>
+            <p><strong>Location:</strong> <span th:text="${event.getLocation()}">Event location</span></p>
+        </div>
+
+        <!-- Additional Event Information -->
+        <div class="event-benefits">
+            <h2>Why Should You Join?</h2>
+            <p th:text="${event.getWhyJoin()}">Reasons to join the event</p>
+        </div>
+        <div class="event-benefits">
+            <h2>Benefits of Joining</h2>
+            <ul>
+                <li th:each="benefit : ${event.getBenefits()}">
+                    <span th:text="${benefit}">Benefit 1</span>
+                </li>
+            </ul>
+        </div>
+        <button class="register-button">Register Now</button>
+    </div>
+</div>
+</body>
+</html>

src/main/resources/templates/event/event.html

-<!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Event Details</title>
-    <link rel="stylesheet" href="/css/events/events.css">
-</head>
-<body>
-
-<div class="event-container">
-    <div class="event-poster" onclick="showEventDetails()">
-        <img th:src="${event.getImageUrl()}" alt="Event Poster">
-        <h3 th:text="${event.name}">Sample Event</h3>
-    </div>
-</div>
-
-<div id="event-details" class="event-details">
-    <div class="event-details-content">
-        <h2 th:text="${event.name}">Sample Event</h2>
-        <p><strong>Description:</strong> <span th:text="${event.description}">Event description</span></p>
-        <p><strong>Date and Time:</strong> <span th:text="${event.date}">Event date</span>, <span th:text="${event.time}">Event time</span></p>
-        <p><strong>Location:</strong> <span th:text="${event.location}">Event location</span></p>
-        <button class="register-button" onClick = "registerEvent()">Register Now</button>
-        <button class="close-button" onclick="closeEventDetails()">Close</button>
-    </div>
-</div>
-
-<script src="/js/event/event.js"></script>
-</body>
-</html>