This repository hosts the project for the exam of the Web Programming course of the Data Analysis degree of the University of Messina. The project requires building a web or mobile application that interacts with a database and manages users with various privileges with respect to the various functions implemented within the application. Use of HTML, CSS and JavaScript is also mandatory.
One of the project possibilities is the implementation of a web portal (or mobile application) to buy and sell products. I'll focus on this and specifically on a portal for selling and buying comic books. The data are stored in a relational database containing 5 entities providing information about the products (the actual comic book sold, the series to which it belongs, the editor that publishes it and the authors (writer and artist) and 3 relationships connecting them. One more entity is dedicated to store data about the transactions (the action of buying a comic book), which is connected to the comic book entity by means of the buying relationship.
The web site has a main page with a simple structure. I keep the head and body elements: the head stores the references to the stylesheets used to set the style properties and improve the presentation of the markup elements and to the scripts used to perform various types of client-side tasks. The content of the web page is in the body, which has four main elements:
Server-side interactions are performed by embedding PHP code within HTML elements. PHP is used in the publishers' pages and in the comic book pages. It is used not only to connect to the MySQL server to perform queries, but also to retrieve useful information from the request-response header which are stored in PHP superglobal variables like $_SERVER and $_GET. In particular, the publishers' pages, having .php extension embed PHP code in the body: it first calls the connect.php script to connect to the MySQL database where comic book information are stored. The connect.php script retrieves database and user information required for connection from a .ini file which is located in the root folder. It also retrieves the SCRIPT_FILENAME value from the $_SERVER superglobal. This value corresponds to the web page performing the HTML request. This page is one of the publisher pages, so by knowing this an "h3" element specific for the publisher is outputted in the same publisher page performing the request. This element is dinamically created, and it is useful because it allows for identical publisher pages: differentiating content is dinamically created either via PHP (like in this case) or via JavaScript. The result set of the query is then processed by the mysqli_fetch_assoc() function of the PHP mysqli MySQL driver. Each row of the query is converted to a PHP associative array by mysqli_fetch_assoc() (this means that each row is an array of key-value pairs where the keys are the attribute names of the projection performed in the query, while the values are the record instances resulting from the selection process of the query). A new PHP array is built by indexing the records of the query result set already processed as associative arrays.
I use two stylesheets to control the style of the website. The main one is custom, designed to control the appearance of the elements of the page and the page layout. It follows the organization of the web site, by stylizing the four main elements and their child elements. It makes use of classes and ids, which are mainly usde to identify descendants and specify their style. I also reference the Bootstrap 5.3.3 version via Content Delivery Network (CDN). However, Bootstrap is not used extensively, at the moment it just stylizes navigation buttons.
There is no JavaScript in the main page of the shop, but JavaScript is a central element in the construction of the publishers' pages and of the detailed comic books pages. This is performed by two main scripts, i.e. buildComicBookSmallCard.js and buildComicBookCard.js.
The first one is used by the publisher page. This page has php extension, because it perform some relevant server-side tasks. One of the challenges of using JavaScript was that of passing the PHP array built form the query result sets to Javascript for client-side manipulation. The json_encode() PHP function easily converts associative arrays to json objects: by embedding the PHP code with the function into JavaScript the object returned by the function can be assigned to a JavaScript variable for processing. At this point a for loop allows to loop through the array and retrieve information about the comic books returned by the query. This information is used by the buildComicBookSmallCard.js script to create small cards for the comic books in the query result set. The buildComicBookSmallCard.js script creates small card objects in the form of html "div" elements. Technically, it creates JavaScript objects where the objects' properties are the comic book attributes and only one method is present (makeElement), which exploits these properties to append elements to the main "div" element of the card. These elements are: the path where the comic book cover is stored, and information like the comic book series name, issue number and title, date of publication and price.
The second script is used by the comic_book.php web page which is present within the comics folder of each publisher folder. This is a standard page which references the buildComicBookCard.js script for creating a more detailed and larger version of the comic book card. This script is very similar to the previous one. It creates card objects in the form of html "div" elements. The comic book attributes used as properties of the object are those used by the previous script and other ones: the description of the story, the number of pages of the comic book and the authors. The makeElement method exploits these properties to append elements to the main "div" element of the card and build a detailed comic book section of the comic book page.