First Web Application

First Web Application assigned as coursework in a course @ Athens Tech College

An intro to Web Applications, where it was required with a team of co-students to select our own project idea and write a web app in php without using a framework.

Among other ideas my suggestions was a web app related to my favourite hobby, where the sky is only a memory, diving!
What is missing from the diving community in Greece, is a site where all dive operatarors (dive centers) would host their upcoming dive events and divers would be able to search what they are interested into and book their place in.
Like a hotel booking site, but this one would be for your underwater adventures 🐬🐬

A lot of coding was required as not using a framework, added more hassle in place. Being introduced to Template inheritance and passing variables into rendered pages by messing around with Python’s Jinja2 in Flask, I searched for a similar solution for php. Eventually I came up into a php template engine called twig which addresses both. So it was added into the game, for our convenience.

Two user types were defined Divers & Dive centers
Additional entities Dive Spots, Dive Events, Images.
Spots are locations where Events would take place.
Images table stores the name (‘string’) of the file stored inside the server.
MySQL was used for DB, hosted in a personal VM and managed through phpMyAdmin interface.

DB Schema exported in phpMyAdmin

DB Schema - Click image to zoom

HERE Maps

In Gallery’s Screenshots at the bottom of this page, you may see that at Dive Spot’s page there is a map with a Marker to display the location. This feature was added through Here Maps API for JavaScript, following the documentation example on their site. The version of this app can be found at views/map.js in repository.
The only difference between the two, is that spot coordinates are being passed as variables spotLat & spotLng in map.js :

function moveMapTo(map){
    map.setCenter({lat:spotLat, lng:spotLng});
    map.setZoom(14);
}

function addMarkersToMap(map) {
    var Marker = new H.map.Marker({lat:spotLat, lng:spotLng});
    map.addObject(Marker);
}

spotLat & spotLng are defined in dive_spot.html and they get their value from variables lat, lng passed to rendered page by twig.

<script type="text/javascript">
    var spotLat = parseFloat("{{ lat }}");
    var spotLng = parseFloat("{{ lng }}");
</script>

echo $twig->render('dive_spot.html', ['id' => $id, 'spot_name' => $name, 'depth' => $depth, 'type' => $type, 'lat' => $posLat, 'lng' => $posLng ...]);

Current functionality:

• Visitors can search for dive spots and check scheduled upcoming & past events on the calendar at home page.
• Both divers & dive centers can signup through the sign up page.
• Both users can upload photos to a Dive Spot, but uploading requires log in. Visitors are able to see already uploaded photos of the Dive Spot.
• Divers can book their place in dive events, as long as the maximum amount of allowed participants of the event is not exceeded. They are able to see their history log of past & upcoming events.
• Dive centers can create a dive event for a Dive Spot by setting required parameters such as maximum divers allowed, price, date, etc. They can check history log of their scheduled events too.

Improvements/Features to be done:

• Typing through search bar gets available Dive Spots by letters
• Create new Dive Spot for Diver or Dive Center

Screenshots - Click to view gallery

Github – Live Demo

Learning Python’s Flask through Miguel Grinberg’s book, elicited the interest to rewrite the same application in Flask for practicing purposes, which I have started in this repository.