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

    +

Nous allons voir comment c'est que l'écran que nous avons créé dans la dernière partie sera utilisépour l'application réelle.
Comment fonctionne le dimensionnement de HTML?Pour dessiner l'écran, nous avons créé un fichier appelé register.html. Il s'agit simplement d'une présentation pour que vous puissiez testeravec ce qui se passe avant d'en faire une partie de l'application.
Nous avons vu que si vous voulez obtenir une distance stable de 20% à partir du haut, vous devez utiliserquelque chose appelé dimensions de viewport qui dit padding-top= ” 20 vh ”. Il divise la hauteur verticaleen 100 parties et en prend 20 pour parler de la quantité d'espace à utiliser, maisest quelque chose d'intéressant, si vous regardez la taille réelle du corps comme vous pouvez le voir, le navigateurvous montre que le corps est de 909,6 pixels par 259 et que le corps se termine bien après que les boutonssoient effectués.
Dès que cela sera fait, le corps se termine.
Quel est le reste de l'espace qui se trouvait sous cette partie de la page?
La réponse est que la hauteur du corps en html normal est déterminée par le contenu etqui n'est pas seulement le corps, toutes les balises en html sont exprimées en pourcentage de la taille de leur conteneur. Donc le conteneur pour le corps est en fait la balise appelée html et c'est la taille de la balise HTMLqui décide de la façon dont le corps sera mesuré et ainsi de suite en tant que parties de la structure.
L'exception à cette règle est l'utilisation directe de tailles de port d'affichage.
Le contenu disponible décide de la taille de la page et non de la page elle-même, mais lorsque vous pensez àà propos de ces types d'applications, ceux qui envoient des informations l'obtiennent et ainsi de suiten'ont pas vraiment besoin de documents, il est utile de pouvoir penser à l'ensemble de la vuedisponible comme page et de pouvoir étendre le corps au bas chaque fois que le contenu estplus petit.
Cela rend un peu plus facile de voir ce qui se passe et vous pouvez y arriver paren procédant comme suit:
Ajouter un style pour le corps qui dit: la marge du corps doit être 0, le remplissagedoit être égal à 0, et la hauteur minimale du corps, donc le minimum signifie que s'il n'y a pas assez de contenu, la hauteur doit être égale à 100% de la hauteur du port d'affichage.
Je vais le rendre si petit qu'une barre de défilement apparaît et, dans ce cas, le corps est maintenants'étendant sous le pli car la barre de défilement s'étendra sur le reste de la zone. Il s'agit donc decomment l'espace est utilisé dans le fichier html.Comme nous l'avons vu la dernière fois, nous avons créé cette chose entière à l'aide d'une table, bien que, dans certains autres cas,utilise des méthodes avancées pour utiliser CSS.
Tout d'abord lorsque nous visitons cette application, la page se présente comme suit:
Dans ce développement de l'application, nous allons uniquement examiner l'utilisation d'une partie de l'application quiextrait les informations qui se trouvent déjà dans la base de données. Ensuite, nous verrons ce qu'il faut pour placer les informationsdans la base de données ; d'abord sous la forme d'un programme Java simple, puis nous allonsinclure cela dans l'application réelle. Lors de l'interrogation de la base de données pour obtenir des données relativement simples,la mise à jour de la base de données n'est pas. La raison en est que les comportements que nous souhaitons à partir de l'application lorsqueest fourni aux mises à jour ne sont pas du tout simples à comprendre.
Pourquoi la mise à jour de la base de données à partir d'une application Web est-elle plus difficile que la mise en oeuvre?Supposons que vous disposez de trois fonctionnalités à implémenter: enregistrer les utilisateurs, entrer des dépenses et obtenir le rapport.Bien qu'il semble que les tâches soient simples, certaines complications surviennent lors de l'implémentation.
Exemple:● Enregistrer l'utilisateur: Si la même personne a déjà été enregistrée? Que faire si 2 personnes ont le même nom? Donc même quelque chose aussi simple que l'enregistrement n'est pas du toutsimple et en partie, nous réglons ce problème via certains mécanismes de la base de données et en partiepar certains mécanismes au sein du programme lui-même.
● Entrer les dépenses: Qu'en est-il s'il y a une erreur dans une dépense antérieure? Donc maintenant, tout d'un coup, nous réalisons que nous devons prendre en charge la suppression lorsque vous n'avez pas prévu dede ce genre. Que faire si vous entrez accidentellement des frais en double?
● Obtenir un rapport: car il s'agit d'une requête, les choses sont relativement simples.
Implémentation de requêtes uniquement dans l'application Web (aucune mise à jour)Dans le nptel de la base de données, il existe ces 3 tables (dépenses et utilisateurs, déjà vues dans la dernière conférence) Tandis que users2 est une nouvelle table.
Utilisation de la requête: description des dépenses ; elle affiche l'ID de dépense de zone, l'heure de création des dépenses, l'ID utilisateuret le montant dépensé comme indiqué dans la figure ci-dessus. Tous les 3 d'expid, ectime, usrid sont des identificateurs64 bits et l'expid est la clé primaire.
La table des utilisateurs possède une structure similaire avec un ID utilisateur, l'heure de création et le nom de l'utilisateur.Ici, la clé principale est l'utilisateur usrid.
L'heure standard unix, qui est en millisecondes à partir d'un instant donné en 1970, peut être utiliséepour les horodatages. Il y a différentes raisons d'utiliser cette notation particulière pour le temps. Entre autres choses,est facile à partager entre différents concurrents et vous pouvez le convertir endifférentes formes sur le côté de la sortie.
Enregistrez un nouvel utilisateur à l'aide de l'application Web, en entrant des données dans la zone d'entrée et en cliquant surle bouton d'enregistrement dans l'application Web. Le système va ignorer la nouvelle entrée sous la forme, nous n'avons pas encore implémenté la fonctionnalité d'enregistrement à partir du navigateur. Lorsque vous cliquez surbouton d'enregistrement, la table des utilisateurs préalablement renseignée s'affiche.
Cliquez sur le bouton d'enregistrement:
La chose intéressante est comparée à l'application Java que nous avons développée pour afficher le tableau des sers, nous avons une sortie bien structurée utilisant HTML.
En cliquant sur le bouton de dépenses:
Il affiche la table des dépenses dans la base de données nptel, sans l'ID de dépense, car il peut s'agir denon pertinent pour l'utilisateur final.
Le bouton de rapport met à jour l'application et affiche la table Rapport de dépenses, qui affiche les dépensesencourues et le temps converti de l'entier à un format plus lisible.
Comment avons-nous obtenu la table Rapport de dépenses ci-dessus?Tout d'abord, regardez la structure du fichier html
La table de rapport de dépenses combine les données de la table des utilisateurs, ce qui lui donne un nom et la table des dépensesqui sont écrites en termes d'ID et affiche le résultat
en conséquence.
Comme nous l'avons vu dans les chiffres ci-dessus, nous avons 4 écrans dans cette application. Une chose qui se passe estcar nous faisons cela en tant que succession de demandes de poste, comme vous le verrez ; toutes ces visitess'afficheront dans l'historique du navigateur.
Cette application récupère simplement toute la base de données et s'affiche sur le navigateur.
Qu'est-ce que le fichier war de cette application?
Premièrement, tvf dans la commande jar signifie:● v is for verbose● t is for afficher le contenu● f is for the war file itself
La commande jar crée les répertoires● META-INF et MANIFEST, comme nous l'avons déjà vu.● Dans le répertoire jsp, il y a 4 jsps correspondant aux 4 pages.● Il existe un fichier de classe dans le répertoire classes: fairShareShow.class.● Dans le répertoire lib, nous avons des bibliothèques de balises. Les bibliothèques de balises sont pour les balises jsp comme nous l'avons
vu précédemment.● web.xml montre comment les URL Web sont connectées aux méthodes de servlet Java● context.xml est destiné à connecter la base de données via JNDI comme nous l'avons également vuprécédemment.
Examinons le fichier web.xml de cette application:
1. <resource-ref> indique l'emplacement de la base de données.2. Le nom du servlet est app et la classe de servlet est nptel.FairShareShow3. Le mappage indique que l'URL /, qui est la seule URL de cette application, est mappée vers le servlet.4. Il n'existe pas d'URL spéciales, cette URL unique est réutilisée pour tout ce qui est dû au faitil n'y a pas de flux de pages. Nous réactuons la même page encore et encore. Ce styleest parfois appelé une application de page unique et si vous regardez les discussions sur le Web,ont tendance à être un peu plus élaborées sur ce que cette application est pour, n'a pas besoin d'être aussi compliqué quecomme ils le font. En même temps, il existe une raison technique pour laquelleces éléments sont appelés des applications de page unique, alors que le type d'application que nous sommes en train de construire, qui reconstruit la page entière à partir du serveur chaque fois n'est pas tout à fait, mais l'effet est le même.5. Nous ne changeons pas l'URL, nous conservons l'URL identique et en montrant la
les résultats de ce que nous obtenons. Nous pourrions faire une conception différente dans laquelle le rapportaffiché pour l'instance n'est pas sur la même page et chaque rapport a un résultat distinct, maisqui est une sorte de maladresse à utiliser pour une application comme celle-ci.
FairShareShow.java a beaucoup d'importations
FairShareShow étend HttpServlet comme d'habitude.
Les deux méthodes clés sont doGet et doPost, comme dans un servlet. En fait, la méthode doGet justedéfinit l'attribut à l'aide des zones de classe sans entrer explicitement la valeur et le transmettre au poste.
Nous avons défini un attribut pour le titre à l'aide de req.setAttribute, comme indiqué précédemment. Nous recherche les paramètresde demande à l'aide de req.getParameter (), qui renvoient les valeurs de bouton dans le formulaire, la valeurn'est pas null si le bouton est actuellement activé.
init.jsp:
La valeur du nom du bouton apparaît sous la forme d'un paramètre (ici, btnRegister).
Donc, vous pouvez avoir 3 types de boutons et si ce paramètre n'est pas null, cela signifie que le boutona été appuyé.
Dans une variable booléenne, nous faisons quelque chose d'assez simple. Vous vous connectez à la base de données. Siil s'agit d'une commande d'enregistrement, exécutez la requête qui est liée au registre, convertisons le contenu enune liste de hashmaps comme nous l'avons déjà vu, définissez les données de requête comme données utilisateur, puis incluonscette chose.
S'il s'agit d'un rapport, la requête est un peu compliquée comme nous l'avons vu lors des dernières conférences, elledeux tables à l'aide de la jointure.
Donc, nous prenons cette requête et la mettez dans une chaîne dans fairShareShow.java:
Comment utiliser les chaînes de requête?
Lorsque vous visitez l'URL pour la première fois, appelez init.jsp et le traitement reste le même. Siest un échec, vous disposez d'une exception SQL que vous pouvez effectuer.
S'il y a un autre incident, alors nous allons juste imprimer une trace de pile. En fin de compte,nous obtiens ces traces dans le journal et sur la page Web, mais pour l'instant, nous allons simplement laisser le vidage.
Le texte mis en évidence est destiné aux tests avec tomcat intégré. Si nous obtenons du temps, nous allons examiner le Tomcatimbriqué, au moins mentionner ce qui se passe ici.
Enfin, nous fermez la base de données.
Que contient init.jsp?init.jsp est la page de présentation dont nous avons discuté avec les attributs de hauteur et de largeur.
register.jsp.: Il a essentiellement le même code et ajoute une table appelée Utilisateurs enregistrés.
Nous avons une table et la largeur de la table est 22em. La raison du choix de la largeur est d'avoirune table légèrement plus large que la zone étendue par la table qui comporte une zone d'entrée et des boutons3.En créant la hauteur de la légende, j'ai créé un espace autour de lui et le style des bordures de table, de nombreux concepteurs de l'interface utilisateur ont appris au fil du temps que le type de tablele plus simple place ces lignes horizontales et laisse les colonnes sans séparations de colonnes, etce n'est pas si mal à la recherche, donc nous nous en tiendrons.
Dans ce tableau, ce que nous avons est des en-têtes de table et une partie de la boucle forEach produit les lignes. Ilextrait les données utilisateur et les données utilisateur se souviennent de FairShareShow.
Nous obtenons une mappe de hachage et la mappe de hachage nous indique l'ID utilisateur, l'heure et l'uname, qui sontles résultats renvoyés par la requête. Toutes les descriptions de cellule, les éléments td, ont quelque choseappelé classe, td bottom et les en-têtes ont une autre classe appelée th top et bottom. Ce type de classeest à nouveau une partie de CSS.
Pour chaque noeud en html, vous pouvez ajouter une classe qui indique que cet en-tête particulier est de
type th top and bottom, so table header with the top and bottom, and this table cell here is oftype td bottom, so it only has a single border is what we want to say.
Ce qu'une classe définit est un style, de sorte qu'au lieu d'utiliser des attributs de style explicites, comme nous l'avons déjà vu, nous serons en mesure d'obtenir des informations à partir de la section de style.
Nous rassemblons des informations dans une classe et nous disons qu'elle a une bordure inférieure et qu'elle a une bordure supérieure,et pour la table elle-même, ce que nous avons fait, c'est que nous n'avons pas spécifié de bordure à tout et doncil n'y a pas de frontière implicite. En fait, nous allons dire ce que c'est, et pour les cellules de la table, nousdire que l'alignement doit être au centre.
L'alignement pour l'en-tête est déjà un centre qui est donné simplement en utilisant th et doncavec ce CSS, nous avons l'apparence de table que nous voulions. Comme d'habitude, si vous voulez quejoue avec lui et qu'il examine certains détails, vous pouvez toujours ouvrir les outils de développement Webet commencer à examiner ce qui est impliqué.
C'est ainsi que nous obtenons une présentation relativement propre des informations.