esercitazione 03 SvelteForm

andruetto_lorenzo/TPSI/SvelteForm/src/routes/+page.server.js

@@ -18,12 +18,19 @@ export const actions = {
         const data = await request.formData();
         console.log("I VALORI DEL FORM SONO:", data);
 
-        utenti.push(
-            {
-                nome: data.get('nome'),
-                cognome: data.get('cognome'),
-                eta: data.get('eta'),
+        const user = {
+            nome: data.get('nome'),
+            cognome: data.get('cognome'),
+            eta: data.get('eta'),
+        }
+
+        if (user.nome && user.cognome && user.eta) {
+            utenti.push(user);
+        } else {
+            return {
+                form_error: true,
+                form_vals: user
             }
-        )
-    }
-}
+        }
+    },
+};

andruetto_lorenzo/TPSI/SvelteForm/src/routes/+page.svelte

@@ -1,16 +1,39 @@
 <script>
     export let data;
+    export let form;
+    let nome, cognome, eta;
+    let error = false;
+
+    if (form?.form_error) {
+        error = true;
+        nome = form.form_vals.nome;
+        cognome = form.form_vals.cognome;
+        eta = form.form_vals.eta;
+    }
 </script>
 
 <h1>Welcome to SvelteKit FORM Example</h1>
 
 <form method="POST">
     <div><label for="nome">Nome</label></div>
-    <div><input type="text" id="nome" name="nome" size="40"/></div>
-    <div><label for="cognome">Cognome</label></div>
-    <div><input type="text" id="cognome" name="cognome" size="40"/></div>
-    <div><label for="eta">Età</label></div>
-    <div><input type="number" id="eta" name="eta" min="15"/></div>
+    <div>
+        <input type="text" id="nome" name="nome" size="40" bind:value={nome}/>
+        <p class={error && nome?.length == 0? '': 'hidden'}>Nome invalido</p>
+    </div>
+    <div>
+        <label for="cognome">Cognome</label>
+    </div>
+    <div>
+        <input type="text" id="cognome" name="cognome" size="40" bind:value={cognome}/>
+        <p class={error && cognome?.length == 0? '': 'hidden'}>Cognome invalido</p>
+    </div>
+    <div>
+        <label for="eta">Età</label>
+    </div>
+    <div>
+        <input type="number" id="eta" name="eta" min="15" bind:value={eta}/>
+        <p class={error && eta?.length == 0? '': 'hidden'}>Età invalida</p>
+    </div>
     <div><input type="submit"></div>
 </form>
 
@@ -36,4 +59,13 @@
     label {
         line-height: 25px;
     }
+
+    p {
+        color: red;
+        font-weight: bold;
+    }
+
+    .hidden {
+        display: none;
+    }
 </style>

andruetto_lorenzo/TPSI/SvelteFormDB/.gitignore

@@ -0,0 +1,26 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Venv
+venv
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

andruetto_lorenzo/TPSI/SvelteFormDB/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

andruetto_lorenzo/TPSI/SvelteFormDB/README.md

@@ -0,0 +1,38 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

andruetto_lorenzo/TPSI/SvelteFormDB/andruetto_esercitazione3_db.js

@@ -0,0 +1,27 @@
+import Database from 'better-sqlite3';
+import { info } from 'console';
+import { queryObjects } from 'v8';
+
+const db = new Database('./USER.db');
+
+const query1 = db.prepare('INSERT INTO Utente (nome, cognome, eta) VALUES (?,?,?)');
+const utente1 = query1.run('Mario', 'Rossi', 17);
+const utente2 = query1.run('Giuseppe', 'Verdi', 19);
+const utente3 = query1.run('Giulia', 'Ramassalli', 23);
+
+const query2 = db.prepare('SELECT * FROM Utente WHERE eta> ?');
+const eta1 = query2.run(18);
+const query3 = db.prepare('SELECT * FROM Utente WHERE eta= ?');
+const eta2 = query3.run(16);
+
+const query4 = db.prepare('UPDATE Utente SET nome=@nome WHERE eta=@eta');
+const info5 = query4.run({nome: 'lorenzo', eta: 17});
+
+console.log(utente1, utente2, utente3);
+console.log(eta1, eta2);
+
+console.log(info5);
+
+const query5 = db.prepare('DELETE FROM Utente WHERE id= ?');
+const info6 = query5.run(2);
+console.log(info6);

andruetto_lorenzo/TPSI/SvelteFormDB/jsconfig.json

@@ -0,0 +1,13 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": false,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}