[Résolu] Besoin d'aide pour améliorer un affichage HTML avec PHP.

Bonjour tout le monde !!

J'ouvre ce topic car j'ai besoin de votre aide pour améliorer une partie spécifique de mon site CV. En effet, j'ai utilisé le code HTML suivant pour lister mes compétences :

<ul>
    <li>
        <span class="nom-competence">PHP</span>
        <span class="score-competence">
            <span class="fa fa-star"></span>
            <span class="fa fa-star"></span>
            <span class="fa fa-star"></span>
            <span class="fa fa-star-o"></span>
            <span class="fa fa-star-o"></span>
        </span>
    </li>
</ul>

J'utilise les classes « fa, fa-star, fa-star-o » car elles proviennent de Font Awesome. La classe fa-star symbolise une étoile remplie et fa-star-o une étoile vide. Vous l'aurez compris, mon exemple donne donc une note de 3 sur 5 pour la compétence PHP.

Avec cette façon de faire, je dois dupliquer x fois ce code pour chacune de mes compétences. Au final, je me retrouve avec 30 fois ce code dans mon fichier *.php et du coup, c'est long et difficile à maintenir.

J'aimerais donc créer un petit script PHP avec quelques variables pour me simplifier la vie. L'idée c'est que pour ajouter ou supprimer une compétence, je n'ai qu'a toucher les variables du script. J'ai pensé à utiliser des tableaux pour le faire. Un tableau qui contiendrai le nom des compétences et un autre le score de la compétence. Mais je trouve que cette manière de faire est confuse. En effet, il est difficile de voir à qui appartient tel ou tel score.

Il faudrait également que le script puisse afficher les classes fa-star et fa-star-o en fonction du score de la compétence. Ayant un peu de mal à voir comment je peux développer ceci, je me tourne vers vous pour obtenir de l'aide.

Voilà le script tout pourri que j'ai fait :

$nomCompetence = array ('HTML', 'CSS', 'PHP', 'Photoshop');
$scoreCompetence = array (5, 5, 3, 5);

echo $nomCompetence[0] . '-->' . $scoreCompetence[0];

Comme vous pouvez le voir, je ne sais pas trop comment afficher le bon nombre d'étoile en fonction du score. Dans le tableau $scoreCompetence, les nombres correspondent au nombre d'étoiles pleines à afficher. Donc il me faudrait faire un soustraction. Comment puis-je faire ?

Merci d'avance pour votre aide .
Modifié par SilverFox (23 Mar 2016 - 15:30)

Salut,

Ton idée de tableau est bonne mais dans un seul :

$competences = array(
  'HTML' => 5,
  'PHP' => 5,
  'PHP' => 3,
  'Photoshop' => 5,
);

Ou mieux encore, un tableau associatif contenant des tableaux. Ca peut te permettre d'avoir des noms de compétences avec des espaces, des accents... et la clé reste un slug simple.
Ca peut également te permettre d'avoir d'autres infos sur chaque compétence (une description par exemple) :

$competences = array(
  'html' => array(
    'name' => 'HTML',
    'score' => 5,
  ),
  'css' => array(
    'name' => 'CSS',
    'score' => 5,
  ),
  'php' => array(
    'name' => 'PHP',
    'score' => 3,
  ),
  'ps' => array(
    'name' => 'Photoshop',
    'score' => 5,
  ),
);

Pour afficher tes compétences avec leur score tu peux faire comme ça :

/**
 * cette fonction permet d'afficher le bon nombre d'étoiles en fonction du score de la compétence
 * @param  str $competence le contenu du tableau de ta compétence
 * @return str le markup HTML
 */
function displayScore( $competence ){

  $output = '<li>';
  $output .= '<span class="nom-competence">' . $competence['name'] . '</span>';

  for ($i=1; $i <= $competence['score']; $i++) { 
    $output .= '<span class="fa fa-star"></span>';
  }
  for ($i=1; $i <= (5 - $competence['score']); $i++) { 
    $output .= '<span class="fa fa-star-o"></span>';
  }

  $output .= '</li>';

  return $output;

}

$competences = array(
  'html' => array(
    'name' => 'HTML',
    'score' => 5,
  ),
  'css' => array(
    'name' => 'CSS',
    'score' => 5,
  ),
  'php' => array(
    'name' => 'PHP',
    'score' => 3,
  ),
  'ps' => array(
    'name' => 'Photoshop',
    'score' => 5,
  ),
);

echo '<ul>';
foreach ($competences as $slug => $competence) {
  echo displayScore( $competence );
}
echo '</ul>';

La démo est là : Afficher le bon nombre d'étoiles des compétences
Modifié par MatthieuR (23 Mar 2016 - 16:13)