Come salvare i dati direttamente su PC

**GiovanniV** · 18-11-2024, 16:26

Ciao a tutti,
ho creato questo schema diario giornaliero per così dire.

Apro il file direttamente in Edge.

Il problema è che quello che inserisco poi viene perso alla chiusura del file.

Ho provato in moltissimi modi, ma non riesco a far salvare i dati.

Come posso risolvere questo problema?

Metto qui il codice, non sono esperto di html e mi sono fatto aiutare in più punti da GPT.

codice:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Diario e Clienti</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .tabs { display: flex; cursor: pointer; margin-bottom: 10px; }
        .tab { margin-right: 10px; padding: 10px; background-color: #ddd; border-radius: 5px; }
        .tab.active { background-color: #aaa; }
        .content { display: none; }
        .content.active { display: block; }
        .textarea-container { margin-top: 10px; }
        .client-form { margin-bottom: 20px; }
        .client-form label { display: block; margin-top: 5px; }
        textarea { width: 100%; height: 50px; margin-top: 5px; }
        table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        th, td { border: 1px solid #ccc; padding: 5px; text-align: left; }
        .settimana-container { margin-bottom: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
        .settimana-header { font-weight: bold; margin-bottom: 10px; }
        select { width: 100%; margin-top: 5px; }
       /* Colori per le categorie */
    th.design, td.design { background-color: #cce7ff; }  /* Azzurro chiaro */
    th.studio, td.studio { background-color: #d4f7cc; }  /* Verde chiaro */
    th.scrittura, td.scrittura { background-color: #fff3cc; }  /* Giallo chiaro */
    th.personale, td.personale { background-color: #ffd1dc; }  /* Rosa chiaro */
 /* Stile checklist */
        .checklist-container { margin-bottom: 20px; }
        .checklist-header { font-size: 18px; font-weight: bold; margin-bottom: 10px; }
        .checklist-block { margin-bottom: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
        .checklist-block ul { padding-left: 20px; }
        .checklist-block li { margin-bottom: 5px; }
        .checklist-input-container { display: flex; gap: 10px; margin-top: 10px; }
        .checklist-input-container input { flex-grow: 1; padding: 5px; border: 1px solid #ccc; border-radius: 5px; }
        .checklist-input-container button { padding: 5px 10px; border: none; border-radius: 5px; background-color: #007bff; color: white; cursor: pointer; }
        .checklist-input-container button:hover { background-color: #0056b3; }
    </style>
</head>
<body>
    <div class="tabs">
        <div class="tab active" data-tab="diario">Diario</div>
        <div class="tab" data-tab="clienti">Clienti</div>
        <div class="tab" data-tab="checklist">Checklist</div>
        <div class="tab" data-tab="riflessioni">Riflessioni</div> <!-- Nuova tab -->
    </div>
    <!-- Contenuto della tab DIARIO -->
    <div class="content active" id="diario">
        <button id="nuova-settimana">Nuova Settimana</button>
        <div id="contenitore-settimane"></div>
    </div>
    <!-- Contenuto della tab CLIENTI -->
    <div class="content" id="clienti">
        <button id="nuovo-cliente">Nuovo Cliente</button>
        <div id="contenitore-clienti"></div>
    </div>
 <!-- Contenuto della tab CHECKLIST -->
    <div class="content" id="checklist">
        <div class="checklist-container">
            <div class="checklist-block" id="oggi">
                <div class="checklist-header">OGGI</div>
                <ul id="list-oggi"></ul>
                <div class="checklist-input-container">
                    <input type="text" id="input-oggi" placeholder="Aggiungi un'attività...">
                    <button onclick="aggiungiElemento('oggi')">Aggiungi</button>
                </div>
            </div>
            <div class="checklist-block" id="sito">
                <div class="checklist-header">SITO</div>
                <ul id="list-sito"></ul>
                <div class="checklist-input-container">
                    <input type="text" id="input-sito" placeholder="Aggiungi un'attività...">
                    <button onclick="aggiungiElemento('sito')">Aggiungi</button>
                </div>
            </div>
            <div class="checklist-block" id="articoli">
                <div class="checklist-header">ARTICOLI</div>
                <ul id="list-articoli"></ul>
                <div class="checklist-input-container">
                    <input type="text" id="input-articoli" placeholder="Aggiungi un'attività...">
                    <button onclick="aggiungiElemento('articoli')">Aggiungi</button>
                </div>
            </div>
            <div class="checklist-block" id="idee">
                <div class="checklist-header">IDEE</div>
                <ul id="list-idee"></ul>
                <div class="checklist-input-container">
                    <input type="text" id="input-idee" placeholder="Aggiungi un'idea...">
                    <button onclick="aggiungiElemento('idee')">Aggiungi</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Contenuto della tab RIFLESSIONI -->
    <div class="content" id="riflessioni">
        <textarea id="riflessioni-text" placeholder="Scrivi le tue riflessioni qui..."></textarea>
    </div>
    <script>
        // Tabs logica
        const tabs = document.querySelectorAll(".tab");
        const contents = document.querySelectorAll(".content");
        tabs.forEach(tab => {
            tab.addEventListener("click", () => {
                tabs.forEach(t => t.classList.remove("active"));
                contents.forEach(c => c.classList.remove("active"));
                tab.classList.add("active");
                document.getElementById(tab.getAttribute("data-tab")).classList.add("active");
            });
        });
        // Funzionalità della tab DIARIO
        const contenitoreSettimane = document.getElementById("contenitore-settimane");
        const nuovaSettimanaButton = document.getElementById("nuova-settimana");
        const opzioni = {
            design: ["Progettazione clienti", "Progettazione anelli shop", "Laboratorio"],
            studio: ["Psicologia", "Scultura", "Sviluppo personale"],
            scrittura: ["Blog", "Social", "Substack"],
            personale: ["Sport", "Famiglia", "Riflessione"]
        };
        function aggiungiSettimana(settimana = "Settimana dal... al...", dati = {}) {
            const container = document.createElement("div");
            container.classList.add("settimana-container");
            // Intestazione settimana
            const header = document.createElement("div");
            header.classList.add("settimana-header");
            const inputSettimana = document.createElement("input");
            inputSettimana.type = "text";
            inputSettimana.value = settimana;
            inputSettimana.style.width = "100%";
            header.appendChild(inputSettimana);
            container.appendChild(header);
            // Tabella settimanale
            const table = document.createElement("table");
            const intestazioni = ["Giorni", "Design", "Studio", "Scrittura", "Personale"];
            const classi = ["design", "studio", "scrittura", "personale"];
            const thead = document.createElement("thead");
            const headerRow = document.createElement("tr");
            intestazioni.forEach((intestazione, index) => {
                const th = document.createElement("th");
                th.textContent = intestazione;
                th.classList.add(classi[index - 1 ]);
                headerRow.appendChild(th);
            });
            thead.appendChild(headerRow);
            table.appendChild(thead);
            const tbody = document.createElement("tbody");
            const giorni = ["Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato", "Domenica"];
            giorni.forEach(giorno => {
                const row = document.createElement("tr");
                const giornoCell = document.createElement("td");
                giornoCell.textContent = giorno;
                row.appendChild(giornoCell);
                classi.forEach(classe => {
                    const taskCell = document.createElement("td");
                    taskCell.classList.add(classe);
                    const select = document.createElement("select");
                    select.innerHTML = `<option value="">-- Seleziona --</option>`;
                    opzioni[classe].forEach(opzione => {
                        const option = document.createElement("option");
                        option.value = opzione.toLowerCase().replace(/\s/g, "-");
                        option.textContent = opzione;
                        select.appendChild(option);
                    });
                    taskCell.appendChild(select);
                    row.appendChild(taskCell);
                });
                tbody.appendChild(row);
            });
            table.appendChild(tbody);
            container.appendChild(table);
            // Blocco testo
            const textareaContainer = document.createElement("div");
            textareaContainer.classList.add("textarea-container");
            const textarea = document.createElement("textarea");
            textarea.value = dati.riflessioni || "";
            textareaContainer.appendChild(textarea);
            container.appendChild(textareaContainer);
            contenitoreSettimane.appendChild(container);
        }
        nuovaSettimanaButton.addEventListener("click", () => aggiungiSettimana());
        // Funzionalità della tab CLIENTI
        const contenitoreClienti = document.getElementById("contenitore-clienti");
        const nuovoClienteButton = document.getElementById("nuovo-cliente");
        function aggiungiCliente() {
            const form = document.createElement("div");
            form.classList.add("client-form");
            const labels = [ "Nome", "Metallo", "Misura", "Finitura", "Incisione interna"];
            labels.forEach(labelText => {
                const label = document.createElement("label");
                label.textContent = labelText;
                const input = document.createElement("input");
                input.type = "text";
                label.appendChild(input);
                form.appendChild(label);
            });
            const faseLabel = document.createElement("label");
            faseLabel.textContent = "Fase";
            const faseSelect = document.createElement("select");
            ["Disegno", "Prototipi", "Produzione", "Completamento", "Verifica"].forEach(fase => {
                const option = document.createElement("option");
                option.value = fase.toLowerCase();
                option.textContent = fase;
                faseSelect.appendChild(option);
            });
            faseLabel.appendChild(faseSelect);
            form.appendChild(faseLabel);
            const noteLabel = document.createElement("label");
            noteLabel.textContent = "Note";
            const textarea = document.createElement("textarea");
            noteLabel.appendChild(textarea);
            form.appendChild(noteLabel);
            contenitoreClienti.appendChild(form);
        }
        nuovoClienteButton.addEventListener("click", () => aggiungiCliente());
 // Funzione per aggiungere elementi alla checklist
        function aggiungiElemento(blocco) {
            const input = document.getElementById(`input-${blocco}`);
            const ul = document.getElementById(`list-${blocco}`);
            if (input.value.trim() !== "") {
                const li = document.createElement("li");
                li.textContent = input.value;
                // Aggiungi pulsante per rimuovere
                const removeButton = document.createElement("button");
                removeButton.textContent = "X";
                removeButton.style.marginLeft = "10px";
                removeButton.style.color = "red";
                removeButton.style.cursor = "pointer";
                removeButton.addEventListener("click", () => li.remove());
                li.appendChild(removeButton);
                ul.appendChild(li);
                input.value = "";
            }
        }
    </script>
</body>
</html>

**Vincent.Zeno** · 18-11-2024, 21:45

Ciao Giovanni e benvenuto,
quando posti codice sul forum racchiudilo nel tag [CODE][/CODE] (tasto cancelletto) in modo che venga correttamente esposto per una comoda lettura, grazie

I dati che vuoi raccogliere devono essere racchiusi all'interno di un modulo (form) e quindi inviati "da qualche parte" perché vengano salvati e richiamati alla bisogna.

Per il form non avrai particolari problemi, qui una guida di base:
https://www.w3schools.com/tags/tag_form.asp
per inviare i dati a te servirà utilizzare il metodo post, non get;
specificando nel action l'indirizzo di destinazione

Ora dovrai costruire un file che recepisca quanto invii e che lo salvi, verosimilmente, in un database.

Questo a grandi linee è il lavoro che ti aspetta

**GiovanniV** · 19-11-2024, 09:59

Originariamente inviata da Vincent.Zeno

Ciao Giovanni e benvenuto,
quando posti codice sul forum racchiudilo nel tag [CODE][/CODE] (tasto cancelletto) in modo che venga correttamente esposto per una comoda lettura, grazie

I dati che vuoi raccogliere devono essere racchiusi all'interno di un modulo (form) e quindi inviati "da qualche parte" perché vengano salvati e richiamati alla bisogna.

Per il form non avrai particolari problemi, qui una guida di base:
https://www.w3schools.com/tags/tag_form.asp
per inviare i dati a te servirà utilizzare il metodo post, non get;
specificando nel action l'indirizzo di destinazione

Ora dovrai costruire un file che recepisca quanto invii e che lo salvi, verosimilmente, in un database.

Questo a grandi linee è il lavoro che ti aspetta

Grazie mille!

Discussione: Come salvare i dati direttamente su PC

Strumenti discussione

Ricerca discussione

Visualizza

Come salvare i dati direttamente su PC

Permessi di invio