[TUTO] Appel de database dans Zspin

Some tutorials for starting with zspin.

Modérateurs: vik, Modérateurs

[TUTO] Appel de database dans Zspin

Messagepar Porko » 02 Oct 2015 - 18:47

Alors attention les yeux pour les spécialistes je vais expliquer ça comme je le comprend
Image
Donc le singe savant va expliquer aux autres singes ce qu'il comprend... Je compte sur ceux qui savent pour rectifier mes absurdités.




1) Récupérer les infos
Le but est de récupérer les infos du database pour les afficher dans notre theme

Dans un database il y a des balises, nous allons prendre l'exemple du genre.
Dans chaque jeu on retrouve ceci:
Code: Tout sélectionner
<genre>Sport</genre>


Pour l'appeler dans notre theme il faut créer une div (ne partez pas en courant) entre les balises "body"
Cette div est: zspin-genre

Pour pouvoir lui donner des propriétés css (plus tard dans le tuto) on va lui rajouter un nom "info_genre"

Code: Tout sélectionner
    <body>
         <div class="info_genre"><div class="zspin-genre"></div></div>
    </body>



2) Afficher les infos
Maintenant on va lui donner les instruction d'affichage (zone, police, couleur...)

Il faut pour cela l'appeler dans la zone "style"

Code: Tout sélectionner
    <style>
         .info_genre {
             position: absolute;                          /** laisser en absolute pour le moment le relative viendra avec votre futur skill**/
             top: 10%;                                        /** position par rapport au haut**/
             left: 32.2%;                                     /** position par rapport a la gauche**/
             width: 16.3%;                                  /**largeur de la zone**/
             height: 6%;                                     /** hauteur de la zone**/
             font-family: "Arial";     /** police de caractère**/
             color: #A9A9A9;                              /** couleur police**/
             line-height: 1vw;                            /** Hauteur interligne**/
             font-size: 1.3vw;                             /** Taille de police**/
             background: transparent;                /** couleur du fond**/
             text-align: left;                               /** alignement**/
             z-index: 3;                                      /** position Z c'est à dire devant ou derrière:  0=fond 42=facade**/
             }
    </style>


Il y a pleins d'autre outils pour afficher différemment mais ça je vous laisse chercher^^

Vous remarquez que la fonte est en vw car dans mon exemple je veux que la police ne change de taille que si l'on réduit la largeur
Si je voulais le contraire j'aurais mis vh et la police n'aurait réduit que sur la hauteur

Voila c'est tout pour les infos à afficher!! Déjà ça doit marcher


3) Afficher dans un tableau
Là ça se corse donc on va rester concentré!

On va prendre 1943 de la PC Engine (seul database à jour sur la HFSBox synchro pour le moment)

Code: Tout sélectionner
<game name="1943 Kai (Japan)" index="True" image="">
      <description>1943 Kai</description>
      <cloneof>...</cloneof>
      <crc>...</crc>
      <systems>PCE, ARC</systems>
      <manufacturer>Naxat Soft</manufacturer>
      <developer>Capcom</developer>
      <year>1991</year>
      <genre>Shoot them up</genre>
      <rating>CERO - NR</rating>
      <score>14</score>
      <players>2 joueurs</players>
      <language>JAP</language>
      <synopsis>Vous êtes un pilote du Stearman, un avion de chasse biplan, pendant la Seconde Guerre Mondiale, plus précisément pendant la Guerre du Pacifique. Vous avez pour mission de détruire des vagues d&apos;avions de chasse ennemis ,des bombardiers et des navires de guerre de grande taille de la force aérienne japonaise.</synopsis>
      <enabled>yes</enabled>
</game>


Appel des div dans le body
Chaque "tr" est une ligne et chaque "td" est une colone

Dans cet exemple je vais afficher dans la première colonne l'intitulé et dans la 2ème colonne les infos du database

Toujours dans le body on va ajouter une table (un tableau quoi) et lui donner un nom: position_tab

Code: Tout sélectionner
</body>
  <table class="position_tab"> </tab>
    <tr>
        <td>DEVELOPER :</td><td><div class="zspin-developer"<div></td>
    </tr>
    <tr>
        <td>MANUFACTURER :</td><td><div class="zspin-manufacturer"<div></td>
    </tr>
    <tr>
        <td>YEAR :</td><td><div class="zspin-year"<div></td>
    </tr>
    <tr>
        <td>GENRE :</td><td><div class="zspin-genre"<div></td>
    </tr>
    <tr>
        <td>RATING :</td><td><div class="zspin-rating"<div></td>
    </tr>
    <tr>
        <td>PLAYERS :</td><td><div class="zspin-players"<div></td>
    </tr>
    <tr>
        <td>LANGUAGE :</td><td><div class="zspin-language"<div></td>
    </tr>
    <tr>
        <td>SCORE :</td><td><div class="zspin-score"<div></td>
    </tr>
  </table>
</body>


Comme tout à l'heure on va lui donner un style MAIS en plus on vas lui appliquer un style par colonne avec le "td"

Code: Tout sélectionner
    <style>
          .position_tab {
             position: absolute;
             top: 22%;
             left: 29%;
             z-index: 3;
             font-family: "Arial";
             color: #383838;
             font-size: 1.7vw;
             background: transparent;
             text-align: left;
             text-transform: uppercase;     /**tout passer en majuscule**/
       }

td:nth-child(1) {
       width: 17vw;
       text-align: left;
}

td:nth-child(2) {
       width: 21vw;
       text-align: left;
}

tr {
       line-height: 2.3vh;
       height: 4vh;
}
    </style>


Voilà, avec ça vous devriez déjà vous amuser

Je vous mets le theme EmulationStation-like qui comporte des div standard et le tableau afin que vous puissiez vous entrainer (Il y a même l'auto scroll sur le synopsis si il est trop long)

Image
https://mega.nz/#!LBZ1USiJ!W13B0To4tuI3cZKJtpAbAER1HZ2hR3sJP0i5remY_bw


Appel à ceux qui savent: corrigez moi!
Dernière édition par Porko le 02 Oct 2015 - 20:57, édité 3 fois.
1 mercis !
(ryuuji)
Avatar de l’utilisateur
Porko
Modérateur
Modérateur
 
Messages: 2023
Inscription: 02 Fév 2014 - 00:00
OS: Windows 7
Frontend: ZSpin & HyperSpin
Launcher: HL2

Re: [TUTO] Appel de database dans Zspin

Messagepar Odissine » 02 Oct 2015 - 18:52

Très bon tuto pour comprendre le fonctionnement ;) après on a juste a l'adapter pour nos besoins ;)
Merci Porko !
Image
Avatar de l’utilisateur
Odissine
Virtuose
Virtuose
 
Messages: 1232
Inscription: 20 Fév 2014 - 00:00

Re: [TUTO] Appel de database dans Zspin

Messagepar lankou910 » 02 Oct 2015 - 18:55

merci porko

vais me le lire demain si j'ai un moment.

bon je viens de le lire attentivement , je pense avoir compris vais essayer de mettre en pratique
mais tu coup faut que modifie que que petite chose sur mon theme.

bon alle au boulot et je vous montre sa
Image

La différence entre Linux, Mac et Windows ? Windows bug tous le temps mais tu peux toujours réparer, Mac bug presque jamais, mais quand il bug, c'est fini, et quand Linux bug, c'est de ta faute^^
Avatar de l’utilisateur
lankou910
Gourou
Gourou
 
Messages: 648
Inscription: 16 Mai 2013 - 01:00
OS: Windows 10
Frontend: ZSpin
Launcher: RocketLauncher



Retourner vers Tutorials



Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités