Loading

Alison's New App is now available on iOS and Android! Download Now

Study Reminders
Support
Text Version

Set your study reminders

We will email you at these times to remind you to study.
  • Monday

    -

    7am

    +

    Tuesday

    -

    7am

    +

    Wednesday

    -

    7am

    +

    Thursday

    -

    7am

    +

    Friday

    -

    7am

    +

    Saturday

    -

    7am

    +

    Sunday

    -

    7am

    +

Guardiamo a come è che lo schermo che abbiamo creato nell'ultima parte verrà utilizzatoper l'applicazione effettiva.
Come funziona il dimensionamento html?Per disegnare lo schermo abbiamo creato un file chiamato register.html. È solo un layout in modo da potersperimentare ciò che va avanti prima di renderla effettivamente parte dell'applicazione.
Abbiamo visto che se si desidera ottenere una distanza di 20% dalla parte superiore, allora bisogna usarequalcosa chiamato viewport dimensioni che dice riempimento - top= ” 20 vh ”. Divide l'altezza verticalein 100 parti e ne prende 20 per parlare di quanto spazio da usare, maè qualcosa di interessante, se si guarda alla dimensione reale del corpo come potete vedere il browservi mostra che il corpo è di 909,6 pixel per 259 e il corpo in realtà finisce subito dopo che i pulsantisono fatti.
Così non appena questo è fatto, il corpo si sta terminando.
E il resto dello spazio che era sotto questa parte della pagina?
La risposta è che l'altezza del corpo in html normale è determinata dal contenuto eche non è solo il corpo, tutti i tag in html sono espressi in percentuali delle dimensioni del loro contenitore. Quindi il contenitore per il corpo è in realtà il tag chiamato html ed è la dimensione del tag htmlche decide come verrà misurato il corpo e così via come parti della struttura.
L'eccezione a questo è l'uso diretto delle dimensioni viewport.
Il contenuto disponibile decide la dimensione della pagina e non la pagina stessa, ma quando si pensaa questi tipi di applicazioni, quelle che inviano informazioni lo ottengono e così via che sononon necessariamente necessariamente documentali, è utile poter pensare all'interaviewport disponibile come la tua pagina ed essere in grado di estendere il corpo in basso ogni qualvolta il contenuto èpiù piccolo.
Questo rende un po' più facile vedere cosa sta succedendo e si può effettivamente ottenere che dafare quanto segue:
Aggiungere stile per il corpo che dice il seguente: margine del corpo dovrebbe essere 0, l'imbottetodovrebbe essere 0, e l'altezza minima del corpo, quindi minimo significa se non c'è abbastanza contenuto, allora l'altezza dovrebbe essere pari al 100% dell'altezza di vista.
Lo renderò così piccolo che compare una scrollbar e in quel caso il corpo è orache si estende sotto la piega perché la scrollbar assumerà il resto della zona. Quindi questo ècome si usa lo spazio nell'html.Come abbiamo visto l'ultima volta, abbiamo creato questa cosa usando una tabella, sebbene in alcuni piùmodi avanzati per utilizzare CSS.
Così prima quando visitiamo questa app, la pagina sembra questa:
In questo sviluppo dell'app, andiamo a guardare solo utilizzando una parte dell'app cherichiama informazioni già presenti nella banca dati. Poi vedremo cosa ci vuole per inserire le informazioninella banca dati; prima nella forma di un semplice programma java e poi noiincluderemo quello nell'app vera e propria. Mentre interrogare il database per ottenere i dati è relativamente semplice,l'aggiornamento del database non lo è. Il motivo è che i comportamenti che vogliamo dall'app quandosi tratta di aggiornamenti non sono affatto semplici da capire.
Perché l'aggiornamento del database da parte di un'applicazione web è più difficile di implementare la query?Supporre di avere tre funzionalità da implementare: registrare gli utenti, inserire le spese e ottenere il report.Anche se sembrano compiti semplici, alcune complicazioni nascono durante l'implementazione.
Esempio:● Registro utente: E se la stessa persona si è già registrata? E se 2 persone hannolo stesso nome? Quindi anche qualcosa di semplice come la registrazione non è affattosemplice e in parte risolviamo questo problema tramite alcuni meccanismi del database e inparte da alcuni meccanismi all'interno del programma stesso.
● Inserisca le spese: E se ci fosse un errore in un precedente costo inserito? Quindi ora tutto di unimprovviso ci rendiamo conto di dover supportare la cancellazione quando non si pianificava realmente alcunatale cosa. E se accidentalmente inseriate le spese duplicate?
● Ottieni report: Perché è una query, le cose sono relativamente semplici.
Esecuzione solo query nell'applicazione web (no aggiornamenti)Nel nptel database ci sono queste 3 tabelle (spese e utenti, già viste nell'ultima lezione) mentre users2 è una nuova tabella.
Utilizzando la query: descrivere le spese; mostra i campi spese ID, il tempo di creazione delle spese, l'ID utentee l'importo speso come mostrato nella figura di cui sopra. Tutti i 3 di scadenza, ectime, usrid sono64 bit identificativi e la scadenza è la chiave primaria.
La tabella degli utenti ha una struttura simile con un ID utente, il tempo di creazione e il nome dell'utente.Qui, la chiave primaria è l'usrid.
Il tempo unix standard, che è di millisecondi da un certo istante scelto in 1970 può essere utilizzatoper i francobolli. Ci sono diverse ragioni per usare questa particolare notazione per il tempo. Tra lealtre cose, è facile condividere tra i diversi concorrenti e si può convertirla invarie forme sul lato output.
Registrare un nuovo utente utilizzando l'applicazione web, inserendo i dati nel campo di input e cliccando suil pulsante di registrazione nell'applicazione web. Il sistema sta per ignorare la nuova voce comenon abbiamo ancora implementato la funzionalità di registrazione dal browser. Cliccando suil pulsante di registro, viene visualizzata la tabella degli utenti precedentemente popolati.
Al click del pulsante di registrazione:
La cosa interessante è paragonata all'applicazione java che abbiamo sviluppato per visualizzare la tabella degli utenti, abbiamo un output ben strutturato utilizzando HTML.
Al click del pulsante di spesa:
Visualizza la tabella delle spese nel database di nptel, senza l'id delle spese in quanto potrebbe essere irrilevanteall'utente finale.
Il pulsante di report aggiorna l'app e visualizza la tabella Spese Report, che visualizza le spesesostenute e il tempo convertito da numero intero in un formato più leggibile.
Come abbiamo ottenuto il tavolo Scapito Report?Primo, date un'occhiata alla struttura del file html
La tabella dei report delle spese combina i dati della tabella degli utenti, che gli dà un nome e la tabella delle spesestesse scritte in termini di Ids e mostra il risultato
di conseguenza.
Come visto nelle figure sopra indicate, abbiamo 4 schermi in questa app. Una cosa che sta accadendo èperché lo stiamo facendo come una successione di richieste post, come vedrete; tutte queste visitesi presenteranno nella storia del browser.
Questa app richiama semplicemente qualunque sia il database, e i display sul browser.
Cosa c'è nel file di guerra di questa applicazione?
In primo luogo, tvf nel comando jar significa:● v è per verbose● t è per mostrare il contenuto● f è per il file di guerra stesso
comando jar crea● Le directory META - INF e MANIFEST, come abbiamo visto prima.● All'interno della directory jsp ci sono 4 jsps corrispondenti alle 4 pagine.● C'è un file di classe nella directory delle classi: fairShareShow.class.● Nella directory lib abbiamo librerie di tag. Le librerie di tag sono per i tag jsp come abbiamo
visto prima.● web.xml mostra come gli URL web sono connessi ai metodi del server java● context.xml è destinato a collegare il database via JNDI come abbiamo visto ancheprecedente.
Guardiamo a web.xml di questa applicazione:
1. <resource-ref> racconta dove si trova il database.2. Il nome del servlet è app e la classe di servlet è nptel.FairShareShow3. La mappatura dice che l'URL /, che è l'unico URL in questa app è mappato al server.4. Non ci sono URL speciali, quel singolo URL viene riutilizzato per tutto perchénon c'è flusso di pagine. Stiamo aggiornando di nuovo la stessa pagina e ancora. Questo stileè a volte chiamato app di una sola pagina e se si guardano le discussioni sul web, questitendono ad essere alquanto elaborati su ciò per cui questa app è per, non deve essere comecomplicata come si fa ad essere. Allo stesso tempo, c'è un motivo tecnico per cuiqueste cose si chiamano app di singole pagine, mentre il tipo di app che siamobuilding, che ricostruisce l'intera pagina dal server ogni singola volta non è abbastanzachiamato così, ma l'effetto è lo stesso.5. Non stiamo cambiando l'URL, stiamo mantenendo l'URL lo stesso e mostrando il
risultati di quello che siamo. Potremmo fare un design diverso in cui il report essendomostrato per l'istanza non è nella stessa pagina e ogni report ha un risultato distinto, mache è un po' goffo da usare per un'app del genere.
FairShareShow.java ha molte importazioni
FairShareShow estende HttpServlet come di consueto.
I due metodi chiave sono doGet e doPost, come in un servlet. Il metodo doGet effettivamente appenaimposta l'attributo utilizzando i campi di classe senza inserire esplicitamente il valore e lo passa apost.
Abbiamo impostato un attributo per il titolo utilizzando req.setAttivo come visto in precedenza. Cerchiamo i parametridi richiesta utilizzando req.getParametro (), che restituiscono i valori dei pulsanti nel modulo, il valorenon è nullo se il pulsante è attualmente clicdito.
init.jsp:
Il valore del nome del pulsante si mostra come un parametro (qui, btnRegister).
Così, è possibile avere 3 tipi di pulsanti e se quel parametro non è nullo, allora significa che è stato premuto il pulsante.
In una variabile booleana facciamo qualcosa di abbastanza semplice. Si collega al database. Seè un comando di registro, eseguire la query relativa al registro, convertire il contenuto inun elenco di hashmaps come abbiamo visto prima, impostare che i dati della query come dati utente e quindi includerequesta cosa.
Se si segnala, la query è alquanto complicata come abbiamo visto nelle ultime lezioni,combina due tabelle utilizzando l'unione.
Così, prendiamo questa query e la mettiamo in una stringa in fairShareShow.java:
Come utilizzare le stringhe di query?
Quando si visita l'URL per la prima volta, chiamare init.jsp e l'elaborazione rimane la stessa. Sevi è un guasto, allora si dispone di un'eccezione SQL che è possibile eseguire il dump.
Se ci sono altri guasti, allora stiamo attualmente solo per stampare una traccia di stack. Alla fine,riceveremo queste tracce nel log e nella pagina web, ma per ora, lo lasceremo solo per esserediscarica.
Il testo evidenziato è per la verifica con tomcat incorporato. Se avremo tempo, guarderemo il Tomcat incorporato, almeno accennando a quello che sta accadendo qui.
Finalmente chiudiamo il database.
Cosa contiene init.jsp?init.jsp è solo la pagina di layout che abbiamo discusso con attributi di altezza e larghezza.
register.jsp.: In sostanza ha lo stesso codice e aggiunge una tabella chiamata utenti registrati.
Abbiamo una tabella e la larghezza della tabella è 22em. Motivo della scelta della larghezza è quella di avereuna tabella leggermente più ampia rispetto alla superficie sottoposta a scansione dalla tabella che ha un campo di input e3 pulsanti.Per creare l'altezza della didascalia ho creato qualche spazio intorno ad esso e lo stile dei confini della tavola, molti designer di interfaccia utente hanno imparato nel tempo che il tipo più semplice della tabellamette queste linee orizzontali e lascia le colonne senza separazioni di colonne, enon è così male, quindi ci atterremo.
In questa tabella, quello che abbiamo sono le intestazioni di tabella e parte del loop forOgni produce le righe. Essoottiene i dati degli utenti e ricorda i dati degli utenti è di FairShareShow.
otteniamo una mappa hash e la mappa hash ci racconta quali sono gli utenti ID, cora e uname, che sonoi risultati restituiti dalla query. Tutte le descrizioni delle celle, gli elementi td, hanno qualcosachiamato classe, td bottom e le cuffie hanno un'altra classe chiamata cima e fondo. Questotipo di cosa di classe è di nuovo una parte di CSS.
Per ogni nodo in html è possibile aggiungere una classe che dice che questa particolare intestazione è del
tipo piano superiore e inferiore, quindi intestazione da tavolo con la parte superiore e inferiore e questa cella da tavolo qui è di fondotipo td, quindi ha solo un bordo unico è quello che vogliamo dire.
Quello che una classe definisce è uno stile, in modo che invece di utilizzare attributi di stile esplicito, come abbiamovisto prima, saremo in grado di ottenere alcune informazioni dalla sezione stile.
raccogliamo informazioni in una classe e diciamo che ha un bordo inferiore e ha un bordo superiore,e per la tabella stessa, quello che abbiamo fatto è che non abbiamo specificato affatto un bordo e quindinon c'è alcun confine implicito. In realtà riusciamo a dire di cosa si tratta, e per le celle da tavola, noidiciamo che l'allineamento deve essere al centro.
L'allineamento per l'intestazione è già centro che viene dato semplicemente utilizzando th e quindicon questo CSS, abbiamo l'aspetto da tavola che volevamo. Come di consueto, se vuoi davverogiocare con esso e guardare alcuni dettagli, puoi sempre aprire gli strumenti di web developere iniziare a guardare a cosa è tutto coinvolto.
Ecco come otteniamo un layout relativamente pulito delle informazioni.