Page 1 sur 1

[TUTO] Appel de database dans Zspin

Publié : 02 oct. 2015 - 18:47
par Porko
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!W13B0To4tuI3 ... 0i5remY_bw


Appel à ceux qui savent: corrigez moi!

Re: [TUTO] Appel de database dans Zspin

Publié : 02 oct. 2015 - 18:52
par Odissine
Très bon tuto pour comprendre le fonctionnement ;) après on a juste a l'adapter pour nos besoins ;)
Merci Porko !

Re: [TUTO] Appel de database dans Zspin

Publié : 02 oct. 2015 - 18:55
par lankou910
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