[RESOLU] Est-ce que ce modèle de base de donnée est correct ?

19 déc. 2020, 18:49

je n'ai pas dit que c'était moi qui l'avait dit. c'est ryle qui avait déjà mentionné le limit.

20 déc. 2020, 12:52

@Ryle
Bon je suis assez fier de moi ! Merci pour tes indications.

Résultat actuel: https://drive.google.com/file/d/1JAXPrQ ... sp=sharing

Mais... (forcément y allais y avoir un mais :p)

Question 1
J'arrive pas à aller chercher l'image du pays en question dans la DB.

Dans SQL j'ai une table pays avec pays [pays_nom] et drapeau [flag_nom] champs VARCHAR 255.
J'ai 2 valeurs pour les pays inscrite avec le chemin relatif de l'image qui est dans le fichier du projet "flags/BE.png.

J'ai fait la requête suivante dans le code (mais je me doute que quelque chose cloche car je vaux juste le drapeau de la Belgique. Pas tous les drapeau.
Mais il n'affiche rien.

Question 2
Je n'arrive pas à mettre l'un à côté de l'autre le pays et le comté.
Comment faire ?

Question 3 (tant qu'on y est^^)
C'est bien j'ai été chercher mon image dans le dossier image et réussi à la mettre dans la <div> mais elle est pas du tout centrée ou dans la résolution que je voudrais.
Je dois les créer manuellement pour que ca "fit" à la case ????

Où j'ai bug docteur ?

Merci !!!!!!!!!!

20 déc. 2020, 15:59

Hello !

Ça avance, c'est cool

Pour ta première question, il manque la requête pour pouvoir te dire ce qui cloche (à mon avis il manque une condition de jointure, mais c'est dur à dire à l'aveugle

)

Pour la 2, idem, montre ton code. Les seules choses qui peuvent engendrer un retour à la ligne, c'est un <br>, le fait que les éléments soient dans des blocs distincts (paragraphe ou autre), ou s'il n'y a pas assez de place sur la ligne...

Quant à l'image, elle est affichée par défaut dans ses dimensions d'origine. Tu peux modifier l'affichage en css en jouant sur les attributs width et/ou height pour définir une taille en pixels (par défaut si tu ne mets qu'une valeur, les proportions sont conservées).
Tu peux aussi définir un width à 100% et l'image prendra la largeur du div dans lequel elle se trouve

(et gardera une hauteur proportionnelle).

Après tu peux aussi générer des miniatures, mais commence déjà simplement en jouant sur l'affichage

20 déc. 2020, 18:43

Hello Ryle,

Yes mais encore beaucoup d'interrogation.
On pourrait peut etre se faire une video conf ca irait plus vite :p
Si ok dis moi en MP.

Pour le point 3 j'ai compris donc cool

Pour le point 1, je te laisse check.
Mais de manière générale je n'arrive à rien afficher.
Je crois que je fais une erreur dans la structure de mon code mais je capte pas.

Enfin, au niveau de l'image c'est étrange. Elle sort de la bordure : https://drive.google.com/file/d/16MSbW_ ... sp=sharing
Si je met le code sur la première ligne elle va bien dans la div mais alors c'est le texte qui n'est plus affiché : https://drive.google.com/file/d/12jme8F ... sp=sharing

Voici le code en html

Code : Tout sélectionner

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style3.css" />
    <title>Visit Earth</title>
</head>

<body>
    <div id="bloc_page">

<header>

    <p><img src="img/logo.png" alt="logo" id="logo"></p>
    <h1>Découvrez les meilleures choses à voir et à faire dans les Monde. </h1><br />

</header>

<div id="filters">
    <div class="filters">Filtres </div>
    <form>
        <select name="lieux">
            <option value="lieux" selected>Lieux à découvrir</option>
            <option value="autre">Autre</option>
        </select>

        <select name="pays">
            <option value="afghanistan" selected>afghanistan</option>
            <option value="alabama">alabama</option>
            <option value="australie">Australie</option>
            <option value="belgique">Belgique</option>
        </select>

        <select name="tri">
            <option value="montagne" selected>Montagnes</option>
            <option value="volcan">Volcans</option>
            <option value="desert">Déserts</option>
            <option value="plage">Plages</option>
        </select>
    </form>
</div>

<br>
<br />
**** ENDROITS À DÉCOUVRIR <br><br />

<?php
try
{
	// On se connecte à MySQL
	$bdd = new PDO('mysql:host=localhost;dbname=visitearth;charset=utf8', 'root', 'root');
}
catch(Exception $e)
{
	// En cas d'erreur, on affiche un message et on arrête tout
        die('Erreur : '.$e->getMessage());
}

$reponse = $bdd->query('SELECT lieu_nom, pays_nom FROM lieux');

 ?>

<div class="vignette">    
    <div class="lieu">Nom du pays,  </div>
    <div class="pays">Nom du pays,  </div>      
    <div class="comte">Nom du comté </div>
    <img src="img_lieux/fagnes.jpg" alt="Fagnes" /> 
</div>


</body>
</html>

Et voici le code CSS:

Code : Tout sélectionner

@font-face {
    font-family: 'montserrat';
    src: url('montserrat.eot');
    src: url('montserrat?#iefix') format('embedded-opentype'),
         url('montserrat.woff') format('woff'),
         url('montserrat.ttf') format('truetype'),
         url('montserrat.svg#montserrat') format('svg');
}

#bloc_page
{
    width: 1100px;
    margin: auto;
}

#logo
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#filters
{
    flex:auto;
}

h1 {
    color: #232838;
    font-family: Montserrat;
    font-size: 28px;
    letter-spacing: 0;
    line-height: 34px;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 68px;
    width: 490px;
}

/* Vignette */

.vignette
{
    width: 270px;
    height: 302px;
    opacity: 0.8;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #000000 100%);
}

.flag
{
    color: white;
    font-size: 20px;
    position: relative;
    left: 124px;
    top: 183px;
}

.lieu
{
    font-size: 20px;
    color: white;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    top: 200px;

}

.pays
{
    font-size: 15px;
    color: white;
    position: relative;
    top: 200px;
}

.comte
{
    font-size: 15px;
    color: white;
    position: relative;
    top:200px;
    display: inline-flex;
}

.vignette img
{
    object-fit: cover;
    width: 270px;
    height: 302px;
    object-position: 100% 0;
}

21 déc. 2020, 19:54

Alors dans le désordre, pour la 2, c'est bien parce que tes infos sont dans des balises avec un attribut "display" à "block" (p, div, etc.) plutôt que "inline" (span, a, strong, em...).

En gros, les éléments de type block commencent toujours une nouvelle ligne et prennent toute la largeur disponible alors que les autres ne prennent que la largeur dont ils ont besoin. Tu peux donc soit regrouper les deux informations dans le même élément, ou utiliser des éléments des éléments de type inline (en modifiant l'attribut css div ou en changeant l'élément).

<div class="pays">Nom du pays, Nom du comté</div>
OU
<span class="pays">Nom du pays</span>, <span class="comte">Nom du comté</span>

Ou garder tes éléments en l'état et changer l'attribut display des classes .pays et .comte

Et pour la question 1, il te faut joindre ta table lieux et ta table pays sur la clé qui permet de faire le lien entre les deux. Cela te permet de lire les informations présentent dans les colonnes des deux tables :

SELECT l.lieu_nom, l.pays_nom, p.flag_nom 
  FROM lieux l LEFT JOIN pays p ON l.pays_nom = p.pays_nom

Concrètement, cette requête sélectionne (SELECT) :
- le champ lieu_nom de la table "l" (alias de lieux),
- le champ pays_nom de la table "l" (alias de lieux),
- le champ flag_nom de la table "p" (alias de pays)
(FROM) Au sein de la table lieux (alias l) et de la table pays (alias p)
(LEFT JOIN) en joignant ces deux tables de façon à ce que
(ON) le champ pays_nom de la table lieux (l) ait la même valeur que le champ pays_nom de la table pays (p)

22 déc. 2020, 13:59

Salut @Ryle !
Bon ben je viens de faire ca mais ca ne fonctionne pas

Rien ne bug mais pas d'affichage de données.
Est-ce que l'ordre de mon code est bon ?
Le seul truc qui s'affiche c'est la virgule entre pays et comte (petite victoire !

).

2. Il y a toujours ce décalage entre la vignette et le background

Je te joins aussi un schéma de bdd: https://drive.google.com/file/d/1bKy7FC ... sp=sharing.

Code : Tout sélectionner

**** ENDROITS À DÉCOUVRIR <br><br />

<?php
try
{
	// On se connecte à MySQL
	$bdd = new PDO('mysql:host=localhost;dbname=visitearth;charset=utf8', 'root', 'root');
}
catch(Exception $e)
{
	// En cas d'erreur, on affiche un message et on arrête tout
        die('Erreur : '.$e->getMessage());
}

$reponse = $bdd->query('SELECT l.lieu_nom, l.pays_nom, p.flag_nom 
FROM lieux l LEFT JOIN pays p ON l.pays_nom = p.pays_nom');

 ?>

<div class="vignette">    
    <div class="lieu"><?php echo $donnees['lieu_nom']; ?></p></div>
    <div class="pays"><?php echo $donnees['pays_nom']; ?>, <?php echo $donnees['comte_nom']; ?></div>   
    <img src="img_lieux/fagnes.jpg" alt="Fagnes" /> 
</div>

22 déc. 2020, 15:49

<div class="lieu"><?php echo $donnees['lieu_nom']; ?></p></div>

le résultat de la requête est donc sensé être dans la variable $donnees. où cette variable est-elle initialisée ? ah nulle part (vu qu'il n'y a plus de while).

22 déc. 2020, 16:46

Ahhhhhhhhh bien vu @Or 1. Merci !
Je suis retourné voir dans le code et 'jai oublié de mettre la boucle et les {} dans la div !!!!
C'est ca que je ne comprenais pas depuis le début !!!
Bon maintenant si on regarde le résultat final, y a comme qui dirait un soucis

https://drive.google.com/file/d/1HclXDQ ... sp=sharing
Mais on y est presque !!!!!!

Mon code ressemble à ca maintenant:

Code : Tout sélectionner

**** ENDROITS À DÉCOUVRIR <br><br />

<?php
try
{
	// On se connecte à MySQL
	$bdd = new PDO('mysql:host=localhost;dbname=visitearth;charset=utf8', 'root', 'root');
}
catch(Exception $e)
{
	// En cas d'erreur, on affiche un message et on arrête tout
        die('Erreur : '.$e->getMessage());
}

$reponse = $bdd->query('SELECT l.lieu_nom, l.pays_nom, p.flag_nom
FROM lieux l LEFT JOIN pays p ON l.pays_nom = p.pays_nom');

?>

<?php while ($donnees = $reponse->fetch()) { ?>

<div class="vignette">    
    <div class="lieu"><?php echo $donnees['lieu_nom']; ?></p></div>
    <div class="pays"><?php echo $donnees['pays_nom']; ?>, <?php echo $donnees['comte_nom']; ?></div>   
    <img src="img_lieux/fagnes.jpg" alt="Fagnes" /> 
</div>
<?php } ?>

</body>
</html>

Je sais pas :
1. comment ajouter mon champs "comte_nom".
2. Mettre correctement l'image sur la background au niveau ALIGNEMENT et faire en sorte que le GRADIENT soit pris en compter car c'est pas le cas pour le moment.

22 déc. 2020, 17:26

*UPDATE*

1. J'ai réussi à afficher le "comte" !!!
J'ai mis au début la ligne "l.comte_lieu" et ca fonctionne.
Je l'avais mis à la fin avant la fonction FROM mais ca ne fonctionnait pas (je sais pas pourquoi).

2. Avec une inline block j'ai reussi à mettre les vignettes l'une a coté de l'autre.

Résultat: https://drive.google.com/file/d/1CWvSIY ... sp=sharing

Je cherche encore pour le décalage et le gradient.
Et aussi pour LIMIT, il veut pas le mettre à la fin. Je comprends pas pourquoi.

23 déc. 2020, 11:39

*UPDATE*

Ok j'ai reussi à TOUT faire !!!!

Il me manque juste ce décalage et le fait que le background n'erst pas pris en compte.
Une idée ?

Résultat: https://drive.google.com/file/d/1PFhVf2 ... sp=sharing

code html:

Code : Tout sélectionner

**** ENDROITS À DÉCOUVRIR <br><br />

<?php
try
{
	// On se connecte à MySQL
	$bdd = new PDO('mysql:host=localhost;dbname=visitearth;charset=utf8', 'root', 'root');
}
catch(Exception $e)
{
	// En cas d'erreur, on affiche un message et on arrête tout
        die('Erreur : '.$e->getMessage());
}

$reponse = $bdd->query('SELECT l.comte_nom, l.lieu_nom, l.pays_nom, p.flag_nom, l.lieu_url
FROM lieux l LEFT JOIN pays p ON l.pays_nom = p.pays_nom');

?>

<?php while ($donnees = $reponse->fetch()) { ?>

<div class="vignette"> 
    <div class="lieu"><?php echo $donnees['lieu_nom']; ?></p></div>
    <div class="pays"><?php echo $donnees['pays_nom']; ?>, <?php echo $donnees['comte_nom']; ?></div>   
    <img src="<?php echo $donnees['flag_nom']; ?>" alt="drapeau" class="flag">
    <img src="<?php echo $donnees['lieu_url']; ?>" alt="Lieu"/>
</div>
<?php } ?>

</body>
</html>

Code CSS:

Code : Tout sélectionner

/* Vignette */

.vignette
{
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #000000 100%);
    font-family: montserrat;
    display: inline-block;
    width: 270px;
    height: 302px;
    border-radius: 2px;
}

.flag
{
    max-width: 20px;
    max-height: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 100px;
}

.lieu
{
    font-size: 20px;
    color: white;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    top: 200px;
}

.pays
{
    font-size: 15px;
    color: white;
    position: relative;
    top: 200px;
    text-align: center;
}

.vignette img
{
    object-fit: cover;
    width: 270px;
    height: 302px;
    object-position: 100% 0;
}

Merci pour votre aide !

[RESOLU] Est-ce que ce modèle de base de donnée est correct ?

Qui est en ligne