eliafantini / polimusic-a-musical-playlist-website-purehtml-vs-ria-

A website that lets the user upload his songs on a server. It was made in two versions: Pure HTML (thin Client) and Thymeleaf Rich Internet Application (thick Client)

PoliMusic is a website that lets the user upload his songs on a server. The project was made for the course Information Technology for the Web (2020/2021) and its aim was to build from scratch a website. Designed with a fresh and minimal UI (using CSS only), the user can create albums and playlists, and associate them to the songs he uploaded. The user can listen to each song through an audio player.

The same website has been made in two versions:

• Pure HTML (thin Client): the client-side code utilizes HTML only, whereas the server-side uses Java EE and Thymeleaf
• Rich Internet Application (thick Client): in this version, the client-side code utilizes HTML and Javascript. This version's website includes the possibility to reorder songs inside a created playlist.

The server was made using Apache Tomcat 9 and the database was made with MySQL Workbench (an installation guide is included in the files).

The project uses the following languages: Java, Javascript, CSS, HTML, SQL.

Authors

• Elia Fantini
• Camillo Nicolò De Sabbata

Website's homepages screenshots (GIF demo is coming)

Pure HTML

RIA

Contents

• HTML_Pure: folder containing all files for the pure HTML website.
• RIA: folder containing all files for the RIA website.
• MATERIALE: folder containing all files used for the project presentations (websites' sequence diagrams and other schemas).
• DatabaseBuilder.sql: file to be imported in MySQL Workbench to build the database.
• Installation Guide Eclipse-Tomcat-MySQL-JDBC.pdf: pdf that explains how to install all the softwares.
• TIW_Project_Playlist.war: file to be imported in EclipseIDE to build the server for the pure HTML website.
• TIW_Project_Playlist_RIA.war: file to be imported in EclipseIDE to build the server for the RIA website.
• Presentazione TIW.pdf: pdf with the project presentation of the pure HTML website for the course ( in italian).
• Presentazione TIW RIA.pdf: pdf with the project presentation of the RIA website for the course ( in italian).

How to install

The installation process is quite long and requires the download of different softwares (MySQL Workbench, EclipseIDE, Apache Tomcat 9), a detailed explanation of how to do so is written in the file Installation Guide Eclipse-Tomcat-MySQL-JDBC.pdf.

How to import the project

The two versions of the project have been uploaded as a .war file to be imported into Eclipse IDE (TIW_Project_Playlist.war and TIW_Project_Playlist_RIA.war). For other IDE, all the single files have been uploaded too, in the HTML_Pure and RIA folders respectively.

The database structure has been uploaded as an SQL file (DatabaseBuilder.sql).

🛠 Skills

Java EE, Javascript, sql, HTML, css. Creation of a database using MySQL Workbench, coding of a whole backend server using Java EE and Apache Tomcat 9 for the thin client website. Coding of the thick client using Javascript and usage of EclipseIDE for Web Applications development. Design of a minimal, functional and visually appealing UI with CSS and HTML.

🔗 Links