Description: One of my recent projects involved creating a website that showcases public art installations throughout the city of Vancouver. The website serves as a platform for art enthusiasts to explore and learn more about the various public art pieces scattered across the city, and for tourists to discover new attractions to add to their itinerary.

Web Development: PHP, JavaScript, AJAX, HTML/CSS, Bootstrap, Google Maps API Implementation, XAMPP, MySQL, ER Diagrams.

Public Art Installations in Vancouver - Website

Project Description

Vancouver has more than 350 public art installations throughout the city and the goal of this project is to make information about them more accessible to the public and raise social awareness around this topic. We are going to develop a website for Vancouver’s public art where users will be able to login to the website, see all public art objects in list and google maps format, check out the individual public art page, and leave a comment about the selected art.

Website Structure

Data Acquisition and Table Population + ER Diagram

We are using data from the Vancouver’ open databases portal (Link is Here). The website allows you to download the data and import it as a csv format. We have also created our out tables for the users, favorite list and comments which are implemented on top of the provided database. In order to properly import an open source database we used a web service (Link is Here) to convert csv file to sql with allowance to change entries names and add custom entities. The first version of the converted csv can be found here. We have added more details as well as changed some of the names during the implementation process. Regarding the geo location data, we store geo json format as a varchar in our database and convert it to json with the javascript during the map initialization.

Data Requirements & Analysis

There is a portion of data required from a user, so that our website could support the login and authentication process. This is primarily needed for functional separation between regular viewers and registered website members. Moreover, our website provides an optional opportunity to input additional personal information, such as phone number and email address to support communication channels between admins and members for future updates and/or newsletter subscription.

Major part of our website content was collected from the Open Data Portal, which is an extensive collection of The City of Vancouver databases. The database that we utilized in this project contains detailed information on each registered public art installation, which includes, but not limited to: creators and date of the installation, materials used, site, specific location on site, coordinates etc.

Artist Table

Artist + Art Table

Dataset that we have utilized for this project didn’t have a connection between Artist and Public Art tables. Yet, we found it crucial to display by whom was each artwork created and therefore added this table manually by including primary keys of both tables.

User Table

Public Art Table

Comments Table

Also, the implementation of comments feature to our website required creation of a separate table that would contain the id of the comment’s author, the RegistryID of the public art post it referred to and the content of comment itself. The approach that we used for creating an individual art page, specifically the way how we retrieved and displayed information from the public_art table, influenced the decision to create a separate table for comments.

Favourite List Table

One of the personalization features implemented for the website members is adding an individual art post to the list of favourite installations. We stored favorite list data in a separate table, which was populated with primary keys of both users and public_art tables. Having a separate table solely for favourite lists allowed us an easier coding implementation approach and increased efficiency of SQL processing. Alternative approach that we found less efficient was storing comma separated public_art.RegistryIDs in users table.

Implementation Details

Login Page

Login Page uses https protocol. If a user enters from http link, the backend redirects to the https link. Login page takes username and password, checks if the combination matches the username and hashed password and adds user to the session. Otherwise, throws an error.

Registration Page

Register Page uses https protocol. If a user enters from http link, the backend redirects to the https link. Register page takes user data input, checks if username exists as well as password is in valid format and matches with confirm password, creates a new row in user database and redirects to the login page

Profile Page

Profile page is only visible for members(logged in users). The page shows all the user information. A member is able to change the personal information which will be updated in the database after clicking on update.

Public Art Installations List Page

Users can filter the arts based on year, type and material as well as search based on site name. All the searching and filtering features are implemented with url params. All filters are not hardcoded, they are based on available data.

Public arts list page shows all the available art objects. There are 25 per page with pagination enabled. Like button is visible only for members and allows to add the art object to the favorite list. Like functionality is implemented with AJAX, which allows users to make changes to the database without refreshing the page.

Individual Public Art Page

Individual public art page shows all the available information about the art object. Members (logged in users) are able to leave comments and visitors/members are able to view all the related to art comments.

Favourite List Page

Favorite list page is only visible to members (logged in users) and shows all the liked art objects. There are 25 per page with pagination enabled. Unlike button allows the user to remove the art object from the favorite list. Like/Unlike functionality is implemented with AJAX. All filters are not hardcoded, they are based on available data.

Public Art Installations list Page
(Map View)

Public arts maps page shows all the available art objects. This feature was integrated using Google Maps API. The data is displayed using clusters to group the markers. Like button is visible only for members and allows to add the art object to the favorite list. Users can filter the arts based on year, type and material as well as search based on site name. All the searching and filtering features are implemented with AJAX. Like functionality is also implemented with AJAX. All filters are not hardcoded, they are based on available data. A user can click on any marker, it will create an info window with some information about the art object and a button which can redirect a user to the individual art page.

Home Page

Home page shows either a greeting message for the members or a general message for the visitors. A user can go to public art list page, public art map page, and favorite list(only available for members)

Video Walk-Through

The highlighted video showcases the primary functionality and key features of the completed website.