Aggiunte un po' di dipendenze, primi esperimenti routing, aggiunto Dockerfile per server apache, aggiunto database di base, prima prova di API

.idea/PHP_progettoPrimoQuadrimestre.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,21 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="PyPep8NamingInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <option name="ignoredErrors">
+        <list>
+          <option value="N802" />
+          <option value="N806" />
+          <option value="N801" />
+        </list>
+      </option>
+    </inspection_tool>
+    <inspection_tool class="PyUnresolvedReferencesInspection" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="ignoredIdentifiers">
+        <list>
+          <option value="int.setEnabled" />
+        </list>
+      </option>
+    </inspection_tool>
+  </profile>
+</component>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/PHP_progettoPrimoQuadrimestre.iml" filepath="$PROJECT_DIR$/.idea/PHP_progettoPrimoQuadrimestre.iml" />
+    </modules>
+  </component>
+</project>

.idea/php.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="MessDetectorOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PHPCSFixerOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PHPCodeSnifferOptionsConfiguration">
+    <option name="highlightLevel" value="WARNING" />
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PhpStanOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+  <component name="PsalmOptionsConfiguration">
+    <option name="transferred" value="true" />
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

backend/Dockerfile

@@ -0,0 +1,9 @@
+FROM php:8.2-apache
+
+RUN docker-php-ext-install mysqli pdo pdo_mysql
+
+RUN a2enmod rewrite
+
+COPY . /var/www/html/
+
+WORKDIR /var/www/html

backend/api/search.php

@@ -0,0 +1,22 @@
+<?php
+
+use services\Search;
+
+header("Access-Control-Allow-Origin: http://localhost:3000");
+header("Access-Control-Allow-Methods: GET");
+header("Access-Control-Allow-Headers: Content-Type");
+header("Content-Type: application/json");
+require_once __DIR__ . '/../services/Search.php';
+
+// Get the search query parameter
+$username = isset($_GET['username']) ? $_GET['username'] : '';
+$result = Search::searchByUsername($username);
+if ($result->num_rows == 0) {
+    echo "Utente " . $username . " non trovato";
+    return;
+} else {
+    echo json_encode(array_values($result->fetch_assoc()));
+
+}
+
+?>

backend/config/database-connection.php

@@ -0,0 +1,7 @@
+<?php
+$servername = "db";
+$username = "root";
+$password = "password";
+$dbname = "libreriadb";
+error_log("Connessione al database");
+$conn = new mysqli($servername, $username, $password, $dbname);

backend/index.php

@@ -1,2 +0,0 @@
-<?php
-echo "CIAOOO";

backend/libreriadb.sql

@@ -0,0 +1,170 @@
+/*M!999999\- enable the sandbox mode */ 
+-- MariaDB dump 10.19-11.7.2-MariaDB, for debian-linux-gnu (x86_64)
+--
+-- Host: localhost    Database: i5ai2_db
+-- ------------------------------------------------------
+-- Server version	11.7.2-MariaDB-ubu2404
+
+/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
+/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
+/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
+/*!40101 SET NAMES utf8mb4 */;
+/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
+/*!40103 SET TIME_ZONE='+00:00' */;
+/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
+/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
+/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
+/*M!100616 SET @OLD_NOTE_VERBOSITY=@@NOTE_VERBOSITY, NOTE_VERBOSITY=0 */;
+
+--
+-- Table structure for table `permessi`
+--
+
+DROP TABLE IF EXISTS `permessi`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8mb4 */;
+CREATE TABLE `permessi` (
+  `ID_USER` int(11) NOT NULL,
+  `ID_RUOLO` int(11) NOT NULL,
+  `DATA_ASSEGNAZIONE` datetime NOT NULL,
+  UNIQUE KEY `PERMESSI_UNIQUE` (`ID_USER`,`ID_RUOLO`,`DATA_ASSEGNAZIONE`),
+  KEY `PERMESSI_RUOLI_FK` (`ID_RUOLO`),
+  CONSTRAINT `PERMESSI_RUOLI_FK` FOREIGN KEY (`ID_RUOLO`) REFERENCES `ruoli` (`ID`) ON DELETE CASCADE ON UPDATE CASCADE,
+  CONSTRAINT `PERMESSI_USERS_FK` FOREIGN KEY (`ID_USER`) REFERENCES `users` (`ID`) ON DELETE CASCADE ON UPDATE CASCADE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Dumping data for table `permessi`
+--
+
+LOCK TABLES `permessi` WRITE;
+/*!40000 ALTER TABLE `permessi` DISABLE KEYS */;
+INSERT INTO `permessi` VALUES
+(1,1,'2025-10-10 00:00:00'),
+(2,1,'2025-10-10 00:00:00'),
+(3,1,'2025-10-10 00:00:00'),
+(4,1,'2025-10-10 00:00:00'),
+(5,1,'2025-10-10 00:00:00'),
+(6,1,'2025-10-10 00:00:00'),
+(7,1,'2025-10-10 00:00:00'),
+(8,1,'2025-10-10 00:00:00'),
+(9,1,'2025-10-10 00:00:00'),
+(10,2,'2025-10-10 00:00:00');
+/*!40000 ALTER TABLE `permessi` ENABLE KEYS */;
+UNLOCK TABLES;
+
+--
+-- Table structure for table `persone`
+--
+
+DROP TABLE IF EXISTS `persone`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8mb4 */;
+CREATE TABLE `persone` (
+  `ID` int(11) NOT NULL AUTO_INCREMENT,
+  `NOME` varchar(100) NOT NULL,
+  `COGNOME` varchar(100) NOT NULL,
+  `DATA_NASCITA` date NOT NULL,
+  `LUOGO_NASCITA` varchar(100) NOT NULL,
+  `CF` varchar(16) NOT NULL,
+  PRIMARY KEY (`ID`)
+) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Dumping data for table `persone`
+--
+
+LOCK TABLES `persone` WRITE;
+/*!40000 ALTER TABLE `persone` DISABLE KEYS */;
+INSERT INTO `persone` VALUES
+(1,'Greha','Brugnatti','2007-02-20','GENOVA','GRH1123'),
+(2,'Grato','Brugnara','2001-11-11','GENOVA','GRH1123'),
+(3,'Gruto','Bermuda','2001-01-20','GENOVA','GRH1123'),
+(4,'Pluto','Permuta','2005-10-20','GENOVA','GRH1123'),
+(5,'Maruto','Perpetuo','2005-10-20','GENOVA','GRH1123'),
+(6,'Rutto','Serpetuo','2005-10-20','GENOVA','GRH1123'),
+(7,'Ratto','Serpento','2005-10-20','GENOVA','GRH1123'),
+(8,'Matto','Serato','2005-10-20','GENOVA','GRH1123'),
+(9,'Santo','Stefano','2005-10-20','GENOVA','GRH1123'),
+(10,'Sergio','Bianchi','2007-05-07','Genova','BNCSRG07E07D969F');
+/*!40000 ALTER TABLE `persone` ENABLE KEYS */;
+UNLOCK TABLES;
+
+--
+-- Table structure for table `ruoli`
+--
+
+DROP TABLE IF EXISTS `ruoli`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8mb4 */;
+CREATE TABLE `ruoli` (
+  `ID` int(11) NOT NULL AUTO_INCREMENT,
+  `DESCRIZIONE` varchar(100) NOT NULL,
+  PRIMARY KEY (`ID`)
+) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Dumping data for table `ruoli`
+--
+
+LOCK TABLES `ruoli` WRITE;
+/*!40000 ALTER TABLE `ruoli` DISABLE KEYS */;
+INSERT INTO `ruoli` VALUES
+(1,'utente'),
+(2,'admin'),
+(3,'scrittore');
+/*!40000 ALTER TABLE `ruoli` ENABLE KEYS */;
+UNLOCK TABLES;
+
+--
+-- Table structure for table `users`
+--
+
+DROP TABLE IF EXISTS `users`;
+/*!40101 SET @saved_cs_client     = @@character_set_client */;
+/*!40101 SET character_set_client = utf8mb4 */;
+CREATE TABLE `users` (
+  `ID` int(11) NOT NULL AUTO_INCREMENT,
+  `DESCRIZIONE` varchar(100) NOT NULL,
+  `DATA_CREAZIONE` datetime DEFAULT NULL,
+  `ID_PERSONA` int(11) NOT NULL,
+  `PASSWORD` varchar(30) NOT NULL,
+  PRIMARY KEY (`ID`),
+  UNIQUE KEY `USERS_UNIQUE` (`ID_PERSONA`,`ID`),
+  CONSTRAINT `USERS_PERSONE_FK` FOREIGN KEY (`ID_PERSONA`) REFERENCES `persone` (`ID`) ON DELETE CASCADE ON UPDATE CASCADE
+) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
+/*!40101 SET character_set_client = @saved_cs_client */;
+
+--
+-- Dumping data for table `users`
+--
+
+LOCK TABLES `users` WRITE;
+/*!40000 ALTER TABLE `users` DISABLE KEYS */;
+INSERT INTO `users` VALUES
+(1,'utente-1','2025-10-10 00:00:00',1,'password-1'),
+(2,'utente-2','2025-10-10 00:00:00',2,'password-2'),
+(3,'utente-3','2025-10-10 00:00:00',3,'password-3'),
+(4,'utente-4','2025-10-10 00:00:00',4,'password-4'),
+(5,'utente-5','2025-10-10 00:00:00',5,'password-5'),
+(6,'utente-6','2025-10-10 00:00:00',6,'password-6'),
+(7,'utente-7','2025-10-10 00:00:00',7,'password-7'),
+(8,'utente-8','2025-10-10 00:00:00',8,'password-8'),
+(9,'utente-9','2025-10-10 00:00:00',9,'password-9'),
+(10,'utente-10','2025-10-10 00:00:00',10,'password-10');
+/*!40000 ALTER TABLE `users` ENABLE KEYS */;
+UNLOCK TABLES;
+/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;
+
+/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
+/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
+/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
+/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
+/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
+/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
+/*M!100616 SET NOTE_VERBOSITY=@OLD_NOTE_VERBOSITY */;
+
+-- Dump completed on 2025-10-24  7:39:43

backend/services/Access.php

@@ -0,0 +1,15 @@
+<?php
+
+namespace services;
+include 'config/database-connection.php';
+
+class Access
+{
+    static function login($username, $password)
+    {
+        // ADORO L'SQL INJECTION ' OR '1'='1
+        global $conn;
+        $query = "SELECT * FROM users WHERE DESCRIZIONE = '$username' AND PASSWORD = '$password'";
+        return $conn->query($query);
+    }
+}

backend/services/Search.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace services;
+include __DIR__.'/../config/database-connection.php';
+
+class Search
+{
+    static function searchByUsername($username)
+    {
+        global $conn;
+        $query = "SELECT persone.* 
+          FROM users 
+          RIGHT JOIN persone ON persone.ID = users.ID_PERSONA 
+          WHERE users.DESCRIZIONE = ?";
+
+        $stmt = $conn->prepare($query);
+        $stmt->bind_param("s", $username);
+        $stmt->execute();
+        $result = $stmt->get_result();
+        return $result;
+    }
+
+}

docker-compose.yml

@@ -12,10 +12,10 @@ services:
       - backend
 
   backend:
-    image: php:8.2-apache
+    build: ./backend
     container_name: libreria-php-backend
     ports:
-      - "8000:80"         # PHP server
+      - "8000:80"
     volumes:
       - ./backend:/var/www/html
     depends_on:

frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:21
+FROM node:20
 LABEL authors="Sergio Bianchi"
 
 WORKDIR /app

frontend/package-lock.json

@@ -9,7 +9,9 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^19.1.1",
-        "react-dom": "^19.1.1"
+        "react-dom": "^19.1.1",
+        "react-router": "^7.9.4",
+        "react-router-dom": "^7.9.4"
       },
       "devDependencies": {
         "@eslint/js": "^9.36.0",
@@ -57,7 +59,6 @@
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -1428,7 +1429,6 @@
       "integrity": "sha512-QoiaXANRkSXK6p0Duvt56W208du4P9Uye9hWLWgGMDTEoKPhuenzNcC4vGUmrNkiOKTlIrBoyNQYNpSwfEZXSg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -1439,7 +1439,6 @@
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1500,7 +1499,6 @@
       "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.2",
         "@typescript-eslint/types": "8.46.2",
@@ -1753,7 +1751,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1872,7 +1869,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.9",
         "caniuse-lite": "^1.0.30001746",
@@ -1969,6 +1965,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2094,7 +2099,6 @@
       "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -2915,7 +2919,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2942,6 +2945,44 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.9.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.4.tgz",
+      "integrity": "sha512-SD3G8HKviFHg9xj7dNODUKDFgpG4xqD5nhyd0mYoB5iISepuZAvzSr8ywxgxKJ52yRzf/HWtVHc9AWwoTbljvA==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.9.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.9.4.tgz",
+      "integrity": "sha512-f30P6bIkmYvnHHa5Gcu65deIXoA2+r3Eb6PJIAddvsT9aGlchMatJ51GgpU470aSqRRbFX22T70yQNUGuW3DfA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.9.4"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3045,6 +3086,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -3145,7 +3192,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3198,7 +3244,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -3285,7 +3330,6 @@
       "integrity": "sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -3379,7 +3423,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },

frontend/package.json

@@ -11,7 +11,9 @@
   },
   "dependencies": {
     "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react-dom": "^19.1.1",
+    "react-router": "^7.9.4",
+    "react-router-dom": "^7.9.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",

frontend/src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

frontend/src/App.tsx

@@ -1,33 +1,28 @@
-import { useState } from 'react'
+import {useState} from 'react'
-import reactLogo from './assets/react.svg'
+import Topbar from "./components/Topbar.tsx"
-import viteLogo from '/vite.svg'
+import Login from "./components/Login.tsx"
-import './App.css'
+import {BrowserRouter, Routes, Route} from "react-router-dom";
+
 
 function App() {
-  const [count, setCount] = useState(0)
 
     return (
         <>
-      <div>
+            <BrowserRouter>
-        <a href="https://vite.dev" target="_blank">
+
-          <img src={viteLogo} className="logo" alt="Vite logo" />
+                <Routes>
-        </a>
+                    <Route path="/" element={
-        <a href="https://react.dev" target="_blank">
+                        <>
-          <img src={reactLogo} className="logo react" alt="React logo" />
+                            <Topbar />
-        </a>
+                        </>
-      </div>
+                    }/>
-      <h1>Vite + React</h1>
+                    <Route path="/login" element={
-      <div className="card">
+                        <>
-        <button onClick={() => setCount((count) => count + 1)}>
+                            <Login />
-          count is {count}
+                        </>
-        </button>
+                    }/>
-        <p>
+                </Routes>
-          Edit <code>src/App.tsx</code> and save to test HMR
+            </BrowserRouter>
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
         </>
     )
 }

frontend/src/components/Login.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import '../styles/login.css'
+
+
+function Login() {
+    return (
+        <>
+            <div id="login-container">
+                <div id="login-form-container">
+                    <h1> Accedi </h1>
+
+                    <form>
+                        <div className="spacer-50"></div>
+                        <input type="text" placeholder="username"/>
+                        <input type="password" placeholder="password"/>
+                        <button type="submit">Entra</button>
+                        <div className="spacer-fill"></div>
+                    </form>
+                </div>
+            </div>
+
+        </>
+
+    );
+}
+
+export default Login

frontend/src/components/Navbar.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+function Navbar(props) {
+    return (
+        <nav id="menu" className="navbar navbar-default navbar-fixed-top">
+            <div className="container">
+                <div className="navbar-header">
+                    <button
+                        type="button"
+                        className="navbar-toggle collapsed"
+                        data-toggle="collapse"
+                        data-target="#bs-example-navbar-collapse-1"
+                    >
+                        {" "}
+                        <span className="sr-only">Toggle navigation</span>{" "}
+                        <span className="icon-bar"></span>{" "}
+                        <span className="icon-bar"></span>{" "}
+                        <span className="icon-bar"></span>{" "}
+                    </button>
+                    <a className="navbar-brand page-scroll" href="#page-top">
+                        Progetto libreria
+                    </a>{" "}
+                </div>
+
+                <div
+                    className="collapse navbar-collapse"
+                    id="bs-example-navbar-collapse-1"
+                >
+                    <ul className="nav navbar-nav navbar-right">
+                        <li>
+                            <a href="#contact" className="page-scroll">
+                                Login
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#contact" className="page-scroll">
+                                Registrati
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    );
+}
+
+export default Navbar

frontend/src/components/Topbar.tsx

@@ -0,0 +1,57 @@
+import React, {useRef, useState} from "react";
+
+function Topbar() {
+
+    const [isSearchCollapsed, setIsSearchCollapsed] = useState(true)
+    const [searchQuery, setSearchQuery] = useState('')
+    const searchInputRef = useRef<HTMLInputElement | null>(null)
+    const handleSearchButton = () => {
+        alert("search button clicked")
+    }
+
+    const handleSearchKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            alert("Searching")
+        }
+    }
+
+    return (
+        <>
+            <nav className="topbar">
+                <div id="topbar-left" className="topbar-container">
+                    <div className="topbar-spacer-20"></div>
+                    <h2> Biblioteca digitale</h2>
+                </div>
+                <div id="topbar-right" className="topbar-container">
+                    <div className="topbar-spacer-20"></div>
+
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" className="hamburger">
+                        <path
+                            d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/>
+                    </svg>
+                    <div className="topbar-spacer-20"></div>
+                    <a>Registrati</a>
+                    <div className="topbar-spacer-10"></div>
+                    <a href="/login">Accedi</a>
+                    <div className="topbar-spacer-50"></div>
+                    <div className="topbar-search">
+                        <div className="topbar-spacer-20"></div>
+                        <input onKeyDown={handleSearchKeyDown} type="text" placeholder="Cerca"/>
+                        <div className="topbar-spacer-10"></div>
+
+                        <svg onClick={handleSearchButton} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
+                             className="topbar-search-button">
+                            <path
+                                d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
+                        </svg>
+                        <div className="topbar-spacer-20"></div>
+
+                    </div>
+
+                </div>
+            </nav>
+        </>
+    )
+}
+
+export default Topbar

frontend/src/index.css

@@ -1,68 +1,11 @@
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

frontend/src/main.tsx

@@ -1,10 +1,13 @@
-import { StrictMode } from 'react'
+import {StrictMode} from 'react'
-import { createRoot } from 'react-dom/client'
+import {createRoot} from 'react-dom/client'
 import './index.css'
+import './styles/topbar.css'
+import './styles/base.css'
 import App from './App.tsx'
+import Topbar from "./components/Topbar.tsx";
 
 createRoot(document.getElementById('root')!).render(
     <StrictMode>
         <App />
-  </StrictMode>,
+    </StrictMode>
 )

frontend/src/styles/base.css

@@ -0,0 +1,5 @@
+body {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+}

frontend/src/styles/login.css

@@ -0,0 +1,80 @@
+:root {
+    --login-button-1: #414fcb;
+    --login-button-2: rgb(255, 255, 255);
+    --login-background: rgb(220, 220, 220);
+}
+
+#login-form-container {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -70%);
+    width: 500px;
+    height: 400px;
+    border: 1px solid black;
+    box-shadow: 2px 2px 2px grey;
+    border-radius: 20px;
+    margin: auto;
+    background: white;
+    display: flex;
+    flex-direction: column;
+}
+
+#login-form-container > * {
+    margin: 0;
+    flex-grow: 10;
+}
+
+#login-form-container > form {
+    display: flex;
+    flex-direction: column;
+}
+
+#login-form-container > form > .spacer-50 {
+    height: 50px;
+}
+
+#login-form-container > form > input {
+    width: 60%;
+    height: 40px;
+    margin: 10px auto;
+    border: none;
+    font-size: 20px;
+    border-bottom: 1px solid black;
+}
+
+#login-form-container > form > button {
+    width: 30%;
+    height: 50px;
+    margin: auto;
+    border-radius: 20px;
+    border: none;
+    background: var(--login-button-1);
+    color: var(--login-button-2);
+    font-size: 20px;
+}
+
+#login-form-container > form > button:hover {
+    background: var(--login-button-2);
+    color: var(--login-button-1);
+    border: 1px solid var(--login-button-1);
+    cursor: pointer;
+}
+
+#login-form-container > h1 {
+    flex-grow: 1;
+    margin-top: 10px;
+    align-content: center;
+    text-align: center;
+}
+
+#login-form-container > form {
+
+}
+
+#login-container {
+    background: var(--login-background);
+    width: 100vw;
+    height: 100vh;
+}
+

frontend/src/styles/topbar.css

@@ -0,0 +1,71 @@
+.topbar {
+    height: 70px;
+    width: 100%;
+    box-shadow: 0 1px 10px grey;
+    display: inline-flex;
+
+}
+
+.topbar-container {
+    height: 100%;
+    flex-grow: 1;
+    display: flex;
+    align-content: center;
+    align-items: center;
+}
+
+.topbar-container > .hamburger {
+    width: 20px;
+}
+
+.topbar-spacer-10 {
+    width: 10px;
+    height: 100%;
+}
+.topbar-spacer-20 {
+    width: 20px;
+    height: 100%;
+}
+.topbar-spacer-50 {
+    width: 20px;
+    height: 100%;
+}
+
+
+.topbar-search {
+    border: 1px solid black;
+    height: 30px;
+    width: 200px;
+    border-radius: 20px;
+    display: inline-flex;
+    align-items: center;
+}
+.topbar-search > input {
+    height: 25px;
+    border: 0;
+}
+.topbar-search > input:focus {
+    border: 0;
+    outline: none;
+}
+.topbar-search-button {
+    width: 50px;
+}
+.topbar-search-button:hover {
+    cursor: pointer;
+}
+
+#topbar-left {
+    display: inline-flex;
+}
+
+#topbar-right {
+    display: inline-flex;
+    flex-direction: row-reverse;
+}
+
+
+a:hover{
+    cursor: pointer;
+    color: blue;
+}

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "PHP_progettoPrimoQuadrimestre",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}