Projet associé : frontend

Tâche : Vous devez créer une interface utilisateur pour un backend CRUD en utilisant HTML, CSS, JS, jQuery. Nous créerons un panneau d'administration pour gérer les comptes de jeux en ligne.

1. Fork du référentiel : https://github.com/CodeGymCC/project-frontend.git
2. Téléchargez votre version du projet sur votre ordinateur.
3. Téléchargez Tomcat par vous-même : https://tomcat.apache.org/download-90.cgi .Important: Tomcat a besoin de la version 9 et non de la 10.
4. Configurer le lancement de l'application via Idea : Alt + Shift + F9 -> Edit Configurations… -> Alt + insert -> tom (dans la barre de recherche) -> Local.
• Après cela, vous devez cliquer CONFIGUREet indiquer où l'archive avec Tomcat a été téléchargée et décompressée.
• Dans l'onglet Deployment: Alt + insert -> Artifact… -> rpg:war éclaté -> OK.
• Dans le champ Application context: laisser uniquement / (barre oblique).
• Appuyez sur APPLY.
• Fermez la fenêtre des paramètres.
5. Lancez l'application. Pour ce faire : Alt + Maj + F9 -> (nom de la configuration, je l'ai nommé 'App') -> Exécuter.
6. Après avoir déployé l'application, un nouvel onglet s'ouvrira dans le navigateur sélectionné lors de la configuration. Super, le serveur est configuré, alors il faut travailler avec deux fichiers :
• <project_dir>/src/main/webapp/html/my.html- il y aura du balisage et des scripts.
• <project_dir>/src/main/webapp/css/my.css– ici seront les styles. Tout ce qui concerne les styles dépend de vous, il n'y a aucune exigence pour eux.
7. Dans le balisage ( my.html ) ajoutez un tableau (n'oubliez pas de lui donner un id) dans lequel préciser les noms des colonnes :
• #
• Nom
• Titre
• Course
• profession
• Niveau
• Anniversaire
• banni
8. Ajoutez une balise de paire <script>- nous écrirons des fonctions ici.
9. La première fonction doit envoyer une requête GET à l'URL "/rest/players"- obtenir la liste. Le résultat doit être ajouté au tableau du paragraphe 7 (c'est là que l'identifiant du tableau est devenu utile). Si vous avez tout fait correctement, après redémarrage du serveur, un tableau de 4 lignes s'affichera sur votre page. Dans la première ligne - les noms des colonnes, dans le reste - les données provenant du serveur.
10. Maintenant, il est souhaitable d'ajouter des bordures de cellule au tableau, sinon les informations sont généralement illisibles.
11. Passons maintenant à la pagination. Pour cela, vous avez besoin de :
• Sous le tableau, ajoutez une section, par exemple, <div>dans laquelle il y aura des boutons de pagination.
• Ajoutez une fonction qui enverra une requête GET au serveur qui renvoie le nombre total de comptes sur le serveur. URL : "/rest/players/count".
• Ajoutez une liste déroulante pour 3-4 valeurs numériques, combien de comptes afficher à la fois. Les nombres doivent être compris entre 3 et 20 inclus.
• Dans la méthode d'affichage de la liste des comptes (p. 9), nous ajouterons le calcul du nombre de pages nécessaires pour un nombre donné de comptes par page, afin que vous puissiez visualiser tous les comptes.
12. Dans la fonction d'affichage de la liste des comptes, ajoutez un paramètre qui sera responsable du numéro de la page à afficher. Corrigez l'URL afin qu'elle transmette "pageNumber" et "pageSize" comme paramètres de requête . Désormais, lors de la modification du nombre par page dans la liste déroulante, le nombre de comptes demandé doit s'afficher :
13. Teintons maintenant le numéro de page en cours, sinon c'est gênant...
14. Ajoutons 2 colonnes supplémentaires au tableau : Modifier et Supprimer. Pour chaque ligne, ajoutons des icônes qui seront responsables de l'édition et de la suppression de chaque entrée. Vous pouvez soit utiliser les images qui se trouvent dans <project_dir>/src/main/webapp/img/, soit utiliser les vôtres.
15. Écrivez une fonction qui sera responsable de la suppression d'un compte. Pour ce faire, envoyez une requête DELETE au serveur à l'URL "/rest/players/{id}". Lorsque vous cliquez sur l'image du panier, appelez cette fonction. Après l'appel - n'oubliez pas de mettre à jour la liste des comptes sur la page en cours.
• Avant de supprimer le compte avec id=23
• Après avoir supprimé le compte avec id=23 . Faites attention, aucun bouton, à l'exception du panier, n'a été enfoncé.
16. Maintenant, écrivez une fonction qui est responsable de l'édition d'un compte. Lorsque vous cliquez dessus, masquons le bouton "Supprimer" et changeons l'image du bouton "Modifier" en "Enregistrer".
17. Ajoutons maintenant une fonctionnalité pour modifier un compte. En cliquant sur le bouton "Modifier", en plus de changer l'image, vous devez rendre les champs modifiables :
• Nom
• Titre
• Course
• profession
• banni

Veuillez noter que la valeur dans les champs d'édition doit être celle qui se trouve dans le compte.

18. Nous allons maintenant envoyer les modifications en cliquant sur le bouton "Enregistrer". Pour ce faire, vous devez envoyer une requête POST à ​​l'URL “/rest/players/{id}”et transmettre les valeurs des cinq champs en tant que corps de la requête, qui peuvent être modifiées sous la forme de JSON. Utilisez JSON.stringify({...}); Après le changement, n'oubliez pas de recharger les données sur la page en cours.
19. Donc, tout devrait être fait depuis CRUD pour le moment, sauf pour "C" (Créer). Après les boutons de pagination, ajoutez une ligne horizontale et un texte indiquant que vous pouvez créer un nouveau compte ici. De plus, ajoutez des blocs de texte et des champs de saisie pour les paramètres de compte :
• Nom - texte, de 1 à 12 caractères.
• Titre - texte, de 1 à 30 caractères.
• Race - liste déroulante, voir API pour les valeurs valides.
• Profession - liste déroulante, voir API pour les valeurs valides.
• Le niveau est un nombre compris entre 0 et 100.
• Anniversaire - date (<input type="date" ...).
• Interdit est une valeur booléenne.
20. Ajoutez maintenant un bouton sur lequel toutes les données saisies seront envoyées au serveur. Utilisez une requête POST à ​​l'URL /rest/players. Après la réponse du serveur, n'oubliez pas d'effacer les champs de saisie et de redemander la liste des comptes sur la page en cours.
21. Maintenant, vous pouvez ajouter de la "beauté" à travers les styles - tout ici dépend de vous. je l'ai eu comme ça:

Utile : API du serveur :

Obtenir la liste des joueurs

Code: 200 OK
Code: 200 OK
Content: [
 {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 },
 …
]

public enum Race {
    HUMAN,
    DWARF,
    ELF,
    GIANT,
    ORC,
    TROLL,
    HOBBIT
}

public enum Profession {
    WARRIOR,
    ROGUE,
    SORCERER,
    CLERIC,
    PALADIN,
    NAZGUL,
    WARLOCK,
    DRUID
}

{
  “name”:[String],       --optional
  “title”:[String],     --optional
  “race”:[Race], --optional
  “profession”:[Profession], --optional
  “banned”:[Boolean]    --optional
}

Code: 200 OK
Content: {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 }

{
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean], --optional, default=false
  “level”:[Integer]
}

Code: 200 OK
Content: {
  “id”:[Long],
  “name”:[String],
  “title”:[String],
  “race”:[Race],
  “profession”:[Profession],
  “birthday”:[Long],
  “banned”:[Boolean],
  “level”:[Integer]
 },

Analyse du projet . Regardez après avoir terminé!