#CStrapJSStudio© Vue.js 3 Bootstrap 5.2 - Gestione degli spuntisti [mercato] con ricarica PagoPa©

Gestione degli spuntisti [mercato] con ricarica PagoPa©.

POSTED BY GIULIANO PAGNINI, 28 DIC 2023 

In questo esempio un semplice case studies di un applicazione web destinata agli operatori del Comune per registrare le presenze degli spuntisti nei vari mercati comunali.

Lo spuntista acquista le ricariche con tagli predefiniti (€.20 /30/ 50) e l'operatore registra le presenza con l'app web collegata al database di UNICOXE

Il server web espone una serie di API-REST per l'autenticazione dell'operatore, l'elenco dei mercati comunali,il saldo disponibile, il calcolo del dovuto, e il salvataggio nel DB delle presenze.

Autenticazione dell'operatore

Selezione del mercato

Ricerca dello spuntista per IDUTENTE,NOME COGNOME,CODICE FISCALE - P.IVA

Ricerca dello spuntista per IDUTENTE,NOME COGNOME,CODICE FISCALE - P.IVA

Calcolo con le tariffe di UNICOXE e nuovo saldo disponibile.

Dettaglio del calcolo

Stampa e assegna posto se saldo disponibile.

Accesso diretto al database di UNICOXE

Novità della nuova versione di CStrapJS

Anteprima dei componenti e delle pagine del Router con aggiornamento automatico del layout al variare delle proprietà

New Controller  della logica dei componenti Vue.js e delle pagine del Routers

New Editor  con accesso diretto alle variabili, funzioni, metodi e proprietà del controller. Nuova gestione degli snipping

New Editor! Nuovi editor per gli snipping l'auto correzione del  codice e il completamento automatico

 

Molto altro in arrivo.... Buon fine e Buon inizio!!!!

#CStrapJSStudio© e #ChatGPT©. Come creare un componente form dinamico con bootstrap© e axios.js

Come creare un componente form dinamico con bootstrap© e axios.js.

POSTED BY GIULIANO PAGNINI, 01 DIC 2023

In questo esempio vedremo come creare un form dinamico per il post dei dati che si adatta a ogni schema tabella.

Partiamo da un database Excel che verrà trasformato in MemTable e salvato nel server REST per testare le nostre API-REST

Con ImpolyzerDataStudio apriamo il file Excel (ODBC Source o CDATA connector)

Salviamo la tabella nella sottocartella TABLE del server REST (Esporta in MemTable)

Da ImpolyzerDataStudio testiamo il collegamento  [GET] http://127.0.0.1:8081/memtable?table=budget.bin

Inseriamo un componente Form in CStrapJSStudio

In CStrapJSStudio tutti i componenti che contengono un Form vengono evidenziati nello schema manager con 

E il comando Add Field si attiva

Con il comando Add Field è possibile aggiungere al form i campi di qualsiasi MemTable creata con ImpolyzerDataStudio

Confermare i campi desiderati e selezionare il comando Crea Campi

Nel Form verranno aggiunti in automatico tutti i campi della MemTable con la rispettiva Type

e sarà possibile testare il funzionamento del form con i salvataggi sulla MemTable

ogni input box può essere personalizzato con il type desiderato:

L'impaginazione degli elementi con anteprima immediata per tutti i dispositivi

(con bootstrap nella dodicesima parte dello schermo)

Il codice JS del form 

const form = document.getElementById('myForm-pg-id:'); rende unico il form nell'applicazione

#C++Builder #RadStudio #ImpolyzerDataStudio #Citizen Developer #RadWebBuilder

CSTRAPJSSTUDIO© e ChatGPT©. Come creare un componente DBGrid dinamico con bootstrap© e campo ricerca.

 #CStrapJSStudio© e  #ChatGPT©.  Come creare un componente DBGrid dinamico con bootstrap© e campo ricerca.

POSTED BY GIULIANO PAGNINI, 27 NOV 2023

In questo esempio vediamo come utilizzare la proprietà SCRIPT_SERVICE,  la proprietà ID e lo switch RELEASE/DEBUG

Quando si lavora con le API-REST è fondamentale avere un ambiente di test (magari senza autenticazione per testare i vari controlli/funzioni)

Nel menu progetto è possibile configurare le proprietà globali Release e Debug

La finestra con nome della proprietà Globale e il codice/testo da inserire in Debug/Release

Abbiamo rivolto a ChatGPT la seguente domanda: il codice per creare una tabella dinamica, che legge i dati da API-Rest, con campo ricerca. 

Questo lo script. 

Questo il codice HTML:

                                                        Lo style:

Per creare il componente in CStraJSStudio, dal menu File - Crea componente/Blocco con ChatGPT

Lo script è stato creato come service con il suo JID identificativo unico, in questo modo non sarà mai duplicato e sarà inserito dal compilatore prima di tutti gli altri script e disponibile a tutti i componenti.

Come rendere lo script di ChatGPT una funzione disponibile a tutti i controlli DBGrid? basta trasformarlo in funzione.

Questo il codice originale:

Queste le modifiche per renderlo Service:

Alla funzione bisogna passare gli ID della tabella relativi all'header, body e edit di ricerca oltre all'URL e al nome del nodo della response

(IDtableHeaders,IDTableBody,IDsearchInput,URLLink,table)

Come rendere il componente autonomo? con la proprietà ID e Script_Bottom

Aggiungiamo al componente le proprietà ID e script_pg_bottom

nella proprietà script_pg_bottom inseriamo il seguente codice

InitTableRest('tableHeaderspg-id:','tableBodypg-id:','searchInputpg-id:'

,'pg-URLLink:','table');

Aggiorniamo il codice HTML del componente aggiungendo ai vari elementi ID il terminatore pg-id:

<tbody id="tableBody">

<input type="text" id="searchInput" 
 <tr id="tableHeaders">
diventano:
<tbody id="tableBodypg-id:">
<input type="text" id="searchInputpg-id:" 
 <tr id="tableHeaderspg-id:">

Con poche modifiche abbiamo creato un componente DBGrid dinamico autonomo con ricerca su tutti i campi della tabella, da utilizzare nei progetti bootstrap.

Salvare il nuovo blocco come componente riutilizzabile con la funzione Salva Blocco come componente

Il componente disponibile per nuovi progetti

Un esempio di due tabella nella stessa pagina collegate a comuni.bin e vie.bin.

Personalizzare lo stile a proprio piacimento.

Ne vedremo delle belle!!!!!!!

CSTRAPJSSTUDIO© e ChatGPT© Creare tabelle con dati da API-REST

#CStrapJSStudio© e  ChatGPT©  Creare tabelle con dati da API-REST 

POSTED BY GIULIANO PAGNINI, 24 NOV 2023

New!!  Nuova funzione crea componente/blocco da ChatGPT

Per testate le API Rest è possibile usare il server REST con ImpolyzerDataStudio.

Creare una query e salvare il risultato nella sottocartella TABLE del server REST

Avviare il server REST

Dalla schermata principale di ImpolyzerDataStudio selezionare REST TESTER

E' possibile leggere,scrivere,aggiornare le tabelle MEMTable salvate nella sottocartella TABLE del ServerRest

Es. di API per la lettura della tabella

http://127.0.0.1:8081/memtable?table=comuni.BIN

Avviare CStrapJSStudio

Ho fatto la seguente domanda a ChatGPT: Come creare una tabella bootstrap con dati da API e axios.js

questo il codice proposto da ChatGPT

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tabella Bootstrap con dati da API</title> <!-- Collegamento a Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body>

</body> </html>

Nella finestra nuovo componente inserire il codice nella corrispondenti finestre

HTML, JS e eventuale CSS.

Nella finestra Link Footer inserire i link ai file JS esterni proposti da ChatGPT

Selezionare Crea Componente:

Il software analizza il codice e crea le proprietà per facilitare la configurazione del componente.

Il risultato:

Personalizzare le proprietà create in automatico:

URLLink: es,: http://127.0.0.1:8081/memtable?table=comuni.BIN

ResponseDataSet: il nome della tabella nel JSON di ritorno es. data.table

Fields: i nomi dei campi da visualizzare nella tabella

Che dire... ChatGPT offre grandi opportunità....

Ne vedremo delle belle...