← Torna a tutti i progetti
v1.0.0 PHP Web Application MySQL Notes Tools

SLD-Blocknotes

Un'applicazione web moderna e senza dipendenze per l'organizzazione di note strutturate a blocchi, comandi di terminale e snippet tecnici. Realizzata in Pure PHP, Vanilla CSS, Vanilla JS e MySQL/MariaDB, include note richiudibili, comandi con copia con 1-click, ricerca in tempo reale, import/export JSON, interfaccia multilingua (IT, EN, ES, FR), temi HSL personalizzati e un wizard di primo avvio automatico.

Ambiente Demo Live Scarica (.ZIP) (v1.0.0) Repository Gitea
SLD-Blocknotes Web Application Interface

Overview of the SLD-Blocknotes interface displaying notes, terminal command blocks, and real-time live search.

Funzionalità Principali

SLD-Blocknotes è una Web Application moderna, leggera e completamente priva di dipendenze esterne (Zero-Dependency), progettata per organizzare in modo chiaro ed efficiente appunti tecnici, documentazione, istruzioni operative e comandi da terminale. Costruita con Pure PHP, Vanilla CSS, Vanilla JavaScript e MySQL/MariaDB, offre prestazioni elevate e massima facilità di installazione su qualsiasi server Linux o ambiente LAMP/LEMP.

  • Struttura Gerarchica a Blocchi: Organizzazione multilivello a tre stadi: Blocknotes → Note → Sottonote.
  • Note Richiudibili (Collapsible): Le note sono compresse di default per ottimizzare lo spazio a video. Include comodi controlli globali per espandere o comprimere tutti i blocchi con un solo click.
  • Sottonote di Tipo Comando Terminale: Rendering dedicato per i comandi di terminale con riquadro ad alto contrasto stile IDE/Terminale, barra di scorrimento per comandi lunghi e pulsante di copia negli appunti con 1-click con notifica visiva (✓ Copiato!).
  • Ricerca dal Vivo in Tempo Reale: Barra di ricerca istantanea che filtra per titolo nota, descrizione, testo delle sottonote e contenuto dei comandi, espandendo automaticamente i blocchi che corrispondono ai criteri.
  • Motore di Archiviazione JSON con Import & Export: Ogni blocknote è archiviato come file JSON indipendente in blocknotes/. È possibile esportare/scaricare i file con un click per backup rapido o importarli con supporto per i formati standard e legacy.
  • Interfaccia Multilingua Nativa (IT, EN, ES, FR): Localizzazione completa in Italiano 🇮🇹, Inglese 🇬🇧, Spagnolo 🇪🇸 e Francese 🇫🇷. Selettore rapido nella barra di navigazione e preferenza della lingua salvata nel profilo utente su database.
  • Landing Page di Accesso Personalizzabile: Ciascun utente può decidere dalle preferenze se atterrare sulla Dashboard globale (tutti i blocknotes) o essere indirizzato immediatamente al proprio Blocknote predefinito al momento del login.
  • Gerarchia Ruoli & Protezione Owner: Struttura a 3 livelli (owner > admin > user). L'account Owner principale è blindato: non può essere eliminato da nessun amministratore né da se stesso e non può essere retrocesso di ruolo.
  • Personalizzazione Globale del Sito (Esclusiva Owner): L'Owner può modificare il nome/titolo globale dell'applicazione e caricare una Favicon ad alta risoluzione (con validazione del formato e controllo di risoluzione minima a 64x64px).
  • Personalizzazione Temi HSL: Ogni utente può personalizzare la tavolozza grafica della propria interfaccia regolando le tonalità cromatiche (Primaria, Secondaria e Terziaria).
  • Wizard di Primo Avvio Automatico (first_start.php): Installatore guidato e multilingua che rileva il primo avvio, crea automaticamente il database e le tabelle, configura le credenziali dei primi account (Owner e Admin) e si blocca in modo sicuro a fine procedura.
  • Ambiente Demo Live con Auto-Ripristino Orario: Istanza dimostrativa pubblica accessibile online che si rigenera automaticamente ogni ora per consentire test completi e immediati.

Ambiente di Prova Online (Live Demo)

Per consentire a chiunque di esplorare l'interfaccia, creare note, testare la ricerca dal vivo e verificare tutte le funzionalità di SLD-Blocknotes senza dover configurare un server locale, è disponibile un'istanza dimostrativa pubblica online sempre attiva:

Parametro Dettaglio Accesso
URL Ambiente Demo https://test-sld-blocknote.sld-server.org/
Nome Utente Admin admin
Password Admin admin123
Frequenza di Ripristino Reset automatico ogni ora (il database e i file JSON dei blocknote vengono azzerati e ripristinati allo stato iniziale)
Avviso di Sicurezza & Privacy Anche se l'ambiente di prova viene ripristinato e azzerato automaticamente ogni 60 minuti, si raccomanda vivamente di non inserire dati personali, password reali, credenziali riservate o informazioni sensibili all'interno delle note create durante le sessioni di prova nell'ambiente pubblico.

Struttura del Progetto

L'albero dei file è organizzato secondo un'architettura modulare e pulita, senza cartelle node_modules/ o dipendenze vendor/:

📁 sld-blocknotes/
├── 📂 assets/
│   ├── 📂 css/
│   │   ├── 📄 animations.css        # Animazioni e transizioni CSS
│   │   ├── 📄 style.css             # Foglio di stile principale e responsive design
│   │   └── 📄 variables.css         # Variabili HSL e design system
│   ├── 📂 js/
│   │   └── 📄 main.js               # Gestione modali, ricerca live, copia appunti e accordion
│   └── 📂 img/                      # Immagini, loghi e favicon dinamiche caricate
├── 📂 blocknotes/                   # Cartella di memorizzazione JSON dei blocknote
│   └── 📄 .gitkeep
├── 📂 config/
│   ├── 📄 constants.php             # Definizione delle costanti di percorso e URL
│   ├── 📄 db.php                    # Connessione MySQL, auto-migrazione e router installer
│   ├── 📄 functions_init.php        # Router e sanificazione dei parametri di pagina
│   ├── 📄 init.php                  # Inizializzazione sessione e caricamento moduli
│   └── 📄 settings.php              # File generato con le credenziali del database
├── 📂 functions/
│   ├── 📄 auth.php                  # Autenticazione, gestione sessioni e permessi gerarchici
│   ├── 📄 blocknotes.php            # Logica CRUD per blocknotes, note, sottonote e importatore JSON
│   ├── 📄 functions.php             # Autoloader di tutti i moduli di supporto
│   ├── 📄 lang.php                  # Dizionario di traduzione multilingua (IT, EN, ES, FR)
│   └── 📄 site_settings.php         # Gestione titolo sito e validatore upload favicon ad alta risoluzione
├── 📂 includes/
│   ├── 📄 head_links.php            # Inclusione CSS e meta tag header
│   └── 📄 js_footer.php             # Inclusione script JS a fondo pagina
├── 📂 pages/
│   ├── 📄 404.php                   # Pagina di errore risorsa non trovata
│   ├── 📄 about.php                 # Pagina informativa del progetto
│   ├── 📄 admin_users.php           # Gestione utenti admin e configurazioni sito Owner
│   ├── 📄 db-error.php              # Schermata di errore connessione al database
│   ├── 📄 env-error.php             # Schermata di errore ambiente PHP/estensioni
│   ├── 📄 export_blocknote.php      # Endpoint per il download del JSON di un blocknote
│   ├── 📄 home.php                  # Dashboard principale dei blocknote
│   ├── 📄 login.php                 # Pagina di autenticazione multilingua
│   ├── 📄 logout.php                # Chiusura sessione e logout
│   ├── 📄 profile.php               # Gestione profilo, cambio password, lingua, tema e landing page
│   └── 📄 view_blocknote.php        # Vista di dettaglio del blocknote con note richiudibili e ricerca
├── 📂 templates/
│   ├── 📄 footer.php                # Template footer comune
│   └── 📄 header.php                # Barra di navigazione, logo, indicatore utente e selettore lingua
├── 📄 .gitignore
├── 📄 .htaccess                     # Regole di riscrittura e protezione directory
├── 📄 first_start.php               # Procedura di installazione guidata primo avvio
├── 📄 index.php                     # Router principale dell'applicazione
└── 📄 LICENSE                       # Licenza Open Source MIT

Responsabilità dei Moduli Principali

Modulo / File Descrizione & Responsabilità
first_start.php Installatore interattivo primo avvio per la configurazione DB MySQL, creazione schema e utenti privileged (Owner / Admin).
config/db.php Gestisce la connessione al database MySQL tramite mysqli, esegue le migrazioni automatiche dello schema e intercetta le installazioni non completate.
functions/auth.php Implementa l'autenticazione tramite password hashate con password_hash(), controlla i ruoli utente (owner, admin, user) e applica le regole di immunità dell'Owner.
functions/blocknotes.php Gestore CRUD per la creazione, modifica ed eliminazione di blocknotes, note e sottonote su disco in formato JSON, con funzioni di importazione compatibili con versioni legacy.
functions/lang.php Motore di internazionalizzazione completo con dizionari in 4 lingue (IT, EN, ES, FR) e funzione helper __('chiave').
functions/site_settings.php Gestisce la tabella delle impostazioni del sito su DB (titolo globale) e il caricamento con validazione di sicurezza delle Favicon ad alta risoluzione.
assets/js/main.js Gestisce l'interattività client: modali responsive, accordion richiudibili per le note, motore di ricerca in tempo reale e copia istantanea dei comandi da terminale con notifica.

Requisiti di Sistema

  • Web Server: Apache (con modulo mod_rewrite abilitato), Nginx oppure il server interno di sviluppo di PHP.
  • Versione PHP: PHP 7.4 o PHP 8.x (testato su 8.0, 8.1, 8.2, 8.3).
  • Estensioni PHP richieste: mysqli, json, session, mbstring, gd (opzionale, per verifica dimensioni favicon raster).
  • Database: MySQL 5.7+ o MariaDB 10.3+.
  • Permessi Cartelle: Permessi di scrittura per l'utente web server su blocknotes/, config/ e assets/img/.

Guida all'Installazione

1. Clonazione del Repository o Download

Scarica l'archivio ZIP del progetto oppure clona il repository Git sul tuo server:

git clone https://gitea.sld-server.org/sld-admin/sld-blocknotes.git
cd sld-blocknotes

2. Configurazione dei Permessi del Web Server

Assicurati che l'utente del server web (ad esempio www-data su Debian/Ubuntu o nginx su CentOS/RHEL) abbia i permessi di scrittura nelle cartelle necessarie:

chmod -R 775 blocknotes/ config/ assets/img/
chown -R www-data:www-data .

3. Avvio del Server Web

Se utilizzi un ambiente di sviluppo locale, puoi avviare rapidamente il server integrato di PHP con il comando:

php -S localhost:8000

4. Esecuzione del Wizard di Primo Avvio

Apri il browser all'indirizzo del tuo sito (es. http://localhost:8000/ o http://tuo-dominio.com/). Il sistema rileverà che l'applicazione non è ancora configurata e reindirizzerà automaticamente a first_start.php:

  1. Parametri Database MySQL: Inserisci Host (es. localhost), Nome Database (es. sld_blocknotes), Utente MySQL e Password. Se il database specificato non esiste, il wizard tenterà di crearlo in automatico.
  2. Account Owner (Super-Amministratore): Inserisci username e password per l'account Owner principale. Questo account possiede privilegi assoluti e non potrà essere eliminato da nessun altro utente.
  3. Primo Account Amministratore: Inserisci username e password per il primo account amministratore secondario.
  4. Completamento: Clicca su ⚡ Completa Installazione & Configura Sistema. Il sistema scriverà il file config/settings.php, creerà il file di blocco di sicurezza config/installed.lock e ti reindirizzerà alla pagina di login.

Approfondimento Funzionalità

1. Note Richiudibili e Organizzazione Visiva

All'interno di ciascun blocknote, le note sono strutturate a blocchi visualizzati in modalità compressa/richiusa. Questo layout permette di avere una panoramica immediata di elenchi molto lunghi di comandi o procedure senza dover scorrere decine di schermate.

  • Cliccando sulla barra del titolo della nota, il blocco si espande o si richiude con un'animazione fluida.
  • Tramite i pulsanti in testata "Espandi Tutte" e "Riduci Tutte" è possibile aprire o chiudere tutti i blocchi contemporaneamente.

2. Comandi di Terminale con Copia in 1-Click

Le sottonote supportano due tipologie di visualizzazione:

  • Testo Standard: Per descrizioni discorsive, promemoria e spiegazioni operative.
  • Comando Terminale: Visualizzato in un box in stile console scura con caratteri a spaziatura fissa (monospace). Include un pulsante Copia posizionato nell'angolo in alto a destra che memorizza istantaneamente l'intero comando negli appunti di sistema, mostrando una conferma visiva immediata senza ricaricare la pagina.

3. Ricerca Live Istantanea

La barra di ricerca posizionata in alto nella vista del blocknote permette di digitare liberamente qualsiasi parola chiave. Il filtro client-side in JavaScript analizza in tempo reale:

  • I titoli e le descrizioni delle note genitore.
  • I titoli delle sottonote.
  • I frammenti di codice o comandi da terminale contenuti all'interno.

Le note corrispondenti rimangono visibili e vengono aperte automaticamente per mostrare subito il punto in cui la parola chiave è presente.

4. Esportazione & Importazione JSON

Ciascun blocknote è completamente autonomo e salvato su disco in blocknotes/[id].json. Dalla barra azioni è possibile:

  • Esportare (Download JSON): Scaricare il file .json del blocknote corrente con un click per effettuarne il backup o trasferirlo su un'altra istanza.
  • Importare JSON: Caricare un file JSON locale. L'applicazione include un parser resiliente in grado di convertire sia il formato nativo attuale, sia strutture JSON legacy generate da versioni precedenti.

Gerarchia Utenti e Sicurezza

Ruolo Privilegi e Capacità
Owner (Proprietario) Possiede il controllo totale dell'istanza. Può gestire tutti i blocknotes, creare/modificare/eliminare amministratori e utenti, modificare il Titolo Globale dell'applicazione e caricare la Favicon del sito. È immune da eliminazione e non può essere retrocesso.
Admin (Amministratore) Può visualizzare e gestire tutti i blocknotes del sistema e gestire gli utenti standard. Non può eliminare né modificare il ruolo dell'Owner e non può accedere alle impostazioni globali del sito riservate all'Owner.
User (Utente Standard) Può creare, modificare ed eliminare esclusivamente i propri blocknotes personali e modificare le proprie impostazioni di profilo (password, lingua, tema, landing page).

Personalizzazioni & Temi HSL

Ogni utente può personalizzare l'aspetto della propria area riservata dalla pagina Profilo (?page=profile):

  • Tonalità Primaria, Secondaria e Terziaria: Selettori cromatici basati sullo spazio colore HSL per adattare lo stile ai propri gusti visivi.
  • Lingua Preferita: Imposta la lingua predefinita tra Italiano, English, Español e Français.
  • Blocknote di Atterraggio: Scegli se accedere alla dashboard principale o se aprire automaticamente uno specifico blocknote all'accesso.

Struttura del File JSON di un Blocknote

Di seguito un esempio della struttura dati standard salvata nella directory blocknotes/:

{
  "id": "bn_66cb12345678a",
  "title": "Server Administration Notes",
  "description": "Comandi e procedure per la manutenzione dei server Linux",
  "username": "admin",
  "created_at": "2026-08-25 15:30:00",
  "updated_at": "2026-08-26 10:15:00",
  "notes": [
    {
      "id": "note_66cb12998765b",
      "title": "Gestione Servizi Systemd",
      "description": "Comandi principali per verificare e riavviare i servizi di sistema",
      "subnotes": [
        {
          "id": "sub_66cb1300a1b2c",
          "title": "Verifica stato del demone Nginx",
          "type": "command",
          "content": "sudo systemctl status nginx --no-pager -l"
        },
        {
          "id": "sub_66cb1300d3e4f",
          "title": "Note sul riavvio del processo",
          "type": "text",
          "content": "Prima del reload verificare sempre la sintassi della configurazione con nginx -t."
        }
      ]
    }
  ]
}

Licenza & Informazioni

Il progetto SLD-Blocknotes è distribuito come software Open Source sotto licenza MIT.

Codice sorgente ufficiale disponibile su: https://gitea.sld-server.org/sld-admin/sld-blocknotes