Apprendre à programmer une page web

Bonjour,

Je suis toute nouvelle en programmation, je viens du domaine des langues. Mais je dois m’y atteler, car je ne peux me payer un programmeur professionnel. Je m’attaque donc au problème moi-même!
J’ai commencé un tutoriel en Ruby, puis j’ai jeté un coup d’oeil dans Python pour arriver au PHP et au site http://phpdebutant.org/article118.php. Comme mon ordi tourne sous Ubuntu et que j’ai eu quelques difficultés avec le localhost et l’installation du LAMP, je me suis fait aider sur le forum d’Ubuntu où j’ai atteint les limites de mon sujet, car maintenant j’ai "des problèmes de développement web plus vraiment liés à Ubuntu".

Je travaille sur un questionnaire en 5 ou 6 langues, je dois donc apprendre ce dont j’ai besoin pour que ce questionnaire tourne sur un site hébergé par Ouvaton Coop et que je puisse avoir et comparer les réponses en coulisses, je ne souhaite pas devenir programmeuse professionnelle.
Pour l’instant, je travaillais avec Calc, mais c’est devenu trop compliqué à gérer.
C’est le gars de Ubuntu qui m’a conseillé de m’inscrire ici.
Alors, je me réjouis de progresser avec votre soutien.

Voici le petit programme que j’ai écrit en php, mais qui ne fonctionne pas et je n’ai pas compris pourquoi. Je suis consciente qu'on n'utilise plus la fonction <center> pour centrer, mais pour l'instant, c'est ce que j'ai appris et donc la seule que je connaisse.

<?php
echo <b>'Où aimeriez-vous passer vos prochaines vacances'</b>;
print("<center>'1.1'</center>");
echo 'Sur le canal du Midi.';
print("<center>'1.2'</center>");
echo 'Dans les plaines au bas de l\'Himalaya au Népal.';
print("<center>'1.3'</center>");
echo 'Dans un parc au Costa Rica.';
print("<center>'1.4'</center>");
echo 'Marcher dans les Pyrénnées';
print("<center>'1.5'</center>");
echo 'A paresser sur une plage de Porquerolles.';
print("<center>'1.6'</center>");
echo 'Une croisière en Jamaïque.';

bonjour et bienvenue parmi nous,

1. Ici la communauté pourra souvent te donner un coup de pouce sur html/css/js/php. Alsacreations.com se base uniquement sur les standards du W3C. Le but étant le partage et non le fast food (je viens poser une question en grattant un script à la communauté et donner mon aide, je m'en balance... Paye ton égoïsme....).
2. moi même, je pourrais te donner un coup de main sur GNU/Linux et beaucoup d'autres choses. Après c'est suivant mes disponibilités.
3. En ce qui concerne ton souci, voici le correctif :
- il te manque ça "?>" à la fin. Tu peux l'omettre. Mais c'est dans certains cas et c'est même très pertinent. Pour le coup, je te conseille de le saisir.
- ta chaine de caractères n'est pas bien formatée (<b>....</b>):

<?php
echo '<b>Où aimeriez-vous passer vos prochaines vacances</b>';
print("<center>'1.1'</center>");
echo 'Sur le canal du Midi.';
print("<center>'1.2'</center>");
echo 'Dans les plaines au bas de l\'Himalaya au Népal.';
print("<center>'1.3'</center>");
echo 'Dans un parc au Costa Rica.';
print("<center>'1.4'</center>");
echo 'Marcher dans les Pyrénnées';
print("<center>'1.5'</center>");
echo 'A paresser sur une plage de Porquerolles.';
print("<center>'1.6'</center>");
echo 'Une croisière en Jamaïque.';
?>

4. que ce soit print ou echo, c'est à peu près la même chose. La différence est que tu peux afficher plusieurs choses avec echo. Il te suffit de les séparer par des virgules :

echo "quelque chose", "autre chose";

Cela dit, pour afficher plusieurs items à la suite, tu peux faire autrement de toute manière. exemple : printf(), la concaténation, etc.

5. tu peux utiliser print() sans les parenthèses.
6. ton code est plutôt fait à être édité dans un formulaire. Ne sachant pas si tu comptes le changer, je te l'ai laissé tel quel. Cependant, ça devrait être un truc comme :

<?php
    $holidays = [
        [
            'txt' => 'Sur le canal du Midi.',
            'value' => 'midi',
        ],
        [
            'txt' => 'Dans les plaines au bas de l\'Himalaya au Népal.',
            'value' => 'népal',
        ],
        [
            'txt' => 'Dans un parc au Costa Rica.',
            'value' => 'Costa Rica',
        ],
        [
            'txt' => 'Marcher dans les Pyrénées',
            'value' => 'pyrénées',
        ],
        [
            'txt' => 'A paresser sur une plage de Porquerolles.',
            'value' => 'Porquerolles',
        ],
        [
            'txt' => 'Une croisière en Jamaïque.',
            'value' => 'Jamaïque',
        ],
    ];
?>
<form action="mon-controller.php">
    <div class="question">
        <p>Où aimeriez-vous passer vos prochaines vacances ?</p>
        <?php foreach($holidays as $counter => $row): ?>
        <p class="align-center">1.<?= $counter + 1 ?></p>
        <div class="input radio">
            <input type="radio" name="holidays" id="holiday_<?= $counter + 1?>" value="<?= $row['value']?>">
            <label for="holiday_<?= $counter + 1?>"><?= $row['txt']?></label>
        </div>
    <?php endforeach; ?>
    </div>
    <div class="input submit">
        <input type="submit" value="envoyer">
    </div>
</form>

7. php, c'est bien, Python c'est largement mieux ! Y'a pas photo. Après tout dépend de ce dont tu as besoin. Perso, l'évolution de php --> beurk ! Enfin, si on parle d'une réelle évolution....
Modifié par niuxe (22 May 2020 - 12:53)

Merci niuxe pour la réponse

En la lisant et relisant, j’ai constaté que j’ai oublié de mentionner que le questionnaire tournera sur un site sous Wordpress qui a été programmé en php et où ruby et python ne fonctionnent pas, selon les informations qu’on m’a données.

C’est pareil pour ?> à la fin, on m’a dit qu’il valait mieux ne plus le mettre parce que ça crée trop souvent des problèmes. Toi, tu dis le contraire, alors je ne sais plus à quoi m’en tenir!!!
Je n’ai pas compris ce que tu voulais dire avec fast-food et égoïsme.

Tu as écrit: « ta chaîne de caractères n’est pas bien formatée » et pourtant le <b> … </b> est un code HTML pour écrire en gras, du moins il me semble, et c’est bien ainsi que mon titre apparaissait.

Et j’ai appris que echo est sans parenthèses et print toujours avec, donc echo=4 caractères et print=7, je choisis donc echo, puisqu’il paraît qu’en informatique, la paresse peut être une vertu! Mais tu as aussi écrit que print pouvait s’écrire sans parenthèses, alors encore une fois, il y a de quoi devenir dingo!

En fait, le programme avec les vacances est juste un petit test. Le véritable programme va avoir 19 questions différentes, et chaque question propose 6 réponses différentes. Il faudra alors graduer ces réponses avec des valeurs situées entre 0 et 8 afin que le total des 6 réponses donne 12 points.

Pour l’instant, pour moi, c’est déjà suffisamment compliqué ainsi, donc j’y vais pas à pas et aimerais alors voir et surtout aussi comprendre comment fonctionne mon programme. Pour la partie que tu as rajoutée à la fin avec tous ces codes, j’ai d’abord du travail d’apprentissage à faire.

La présentation à l’écran serait:
Question 1 – centré
Réponse 1.1 Réponse 1.2 Réponse 1.3 Réponse 1.4 Réponse 1.5 Réponse 1.6
Présenté sur la largeur de l’écran.
Chacune de ces réponses doit être centrée sur elle-même. C’est là que j’ai commencé à bloquer avec le site phpdebutant.org

Sonia67 a écrit :

En la lisant et relisant, j’ai constaté que j’ai oublié de mentionner que le questionnaire tournera sur un site sous Wordpress qui a été programmé en php et où ruby et python ne fonctionnent pas, selon les informations qu’on m’a données.

oui wp est un cms écrit en php. Cependant, c'est un cms qui a de gros défauts (failles de sécurité, module écrit avec les pieds, schémas de base de données laisse à désirer, les urls sont écrites en dur... (quand tu veux migrer => bonnes chances), etc.). Mais pourquoi est il si utilisé ? Parce que la communauté et son environnement sont énormes. En peu de temps, tu peux éditer un site web relativement potable. Perso, si tu comptes continuer à développer en php, je te conseille vivement de passer plutôt par Drupal par la suite. C'est largement mieux. Mais bon, c'est du php (....) et après tout dépend de ce que tu veux faire dans le développement. Pourquoi dois tu faire cet exercice ?

Sonia67 a écrit :

C’est pareil pour ?&gt; à la fin, on m’a dit qu’il valait mieux ne plus le mettre parce que ça crée trop souvent des problèmes. Toi, tu dis le contraire, alors je ne sais plus à quoi m’en tenir!!!

C'est lorsque tu utiliseras ce genre d'instruction : header(), setcookie(), etc. Interdiction de mettre un echo/print/espace blanc avant ces instructions. Sous peine d'erreur fatal (donc arrêt du programme). Quand je parle d'espace blanc, j'entends par là qu'il y a une ligne en plus avant <?php ou une ligne en plus après ?>.

Si on te dit pas pourquoi il faut faire ci ou ça, tu vas avoir du mal à comprendre certains concepts...

Sonia67 a écrit :

Je n’ai pas compris ce que tu voulais dire avec fast-food et égoïsme.

Certains membres nouveaux ou pas ont tendance à se comporter en égoïste alors qu'ils peuvent aider et partager leurs savoirs.

Sonia67 a écrit :

Tu as écrit: « ta chaîne de caractères n’est pas bien formatée » et pourtant le &lt;b&gt; … &lt;/b&gt; est un code HTML pour écrire en gras, du moins il me semble, et c’est bien ainsi que mon titre apparaissait.

Oui mais <b>'du text'</b> ne peut pas fonctionner. l'interpréteur php va comprendre que tu insères les instructions <b> et </b>. Or, ça ne fait pas parti du langage php, mais plutôt de l'html. Donc pour php, il faut que ce soit inclus dans une chaîne de caractères.

Aussi, tu peux faire ceci : (concaténation de chaine de caractères)

<?php 

$hello = "Hello tout le monde";
echo "<b>".$hello."</b>";
 // ou 
echo "<b>"."Hello tout le monde"."</b>";
// ou
echo "<b>","Hello tout le monde", "</b>"; // attention, les virgules ne s'applique qu'avec echo !!
//etc.
// etc.
?>

Au passage, il est plus pertinent d'écrire <strong> au lieu de <b>.

Sonia67 a écrit :

Et j’ai appris que echo est sans parenthèses et print toujours avec, donc echo=4 caractères et print=7, je choisis donc echo, puisqu’il paraît qu’en informatique, la paresse peut être une vertu! Mais tu as aussi écrit que print pouvait s’écrire sans parenthèses, alors encore une fois, il y a de quoi devenir dingo!

faux ! les légendes urbaines sont tenaces....
la différence entre echo et print, echo tu peux ajouter des virgules entres chaque item à afficher !
essaie ceci :

<?php 
echo 'bonjour ', 'tout le monde';
print 'bonjour tout le monde';
?>

Tu peux essayer sur ce site ou en local chez toi.

Sonia67 a écrit :

puisqu’il paraît qu’en informatique, la paresse peut être une vertu!

Oui mais là, c'est tourné à l'excès.

Sonia67 a écrit :

En fait, le programme avec les vacances est juste un petit test. Le véritable programme va avoir 19 questions différentes, et chaque question propose 6 réponses différentes. Il faudra alors graduer ces réponses avec des valeurs situées entre 0 et 8 afin que le total des 6 réponses donne 12 points.

Pour l’instant, pour moi, c’est déjà suffisamment compliqué ainsi, donc j’y vais pas à pas et aimerais alors voir et surtout aussi comprendre comment fonctionne mon programme. Pour la partie que tu as rajoutée à la fin avec tous ces codes, j’ai d’abord du travail d’apprentissage à faire.

La présentation à l’écran serait:
Question 1 – centré
Réponse 1.1 Réponse 1.2 Réponse 1.3 Réponse 1.4 Réponse 1.5 Réponse 1.6
Présenté sur la largeur de l’écran.
Chacune de ces réponses doit être centrée sur elle-même. C’est là que j’ai commencé à bloquer avec le site phpdebutant.org

Oui tu as tout à fait raison de commencer petit. J'abonde dans ton sens. Par contre, si ton html n'est pas parfait, tu vas droit dans le mur. Plus tu auras acquis des connaissances en html/css, mieux ce sera ! Quand une maison n'a pas des bases solides, je doute qu'elle tienne debout longtemps....

Peux tu stp, faire un formulaire avec 1 question et quelques réponses ? Comment comptes tu stocker les réponses des utilisateurs de ton questionnaire ? Comment comptes tu stocker les questions et réponses ?
Modifié par niuxe (22 May 2020 - 18:31)

Bonsoir Niux,
Je dois revenir à cette question d’égoïsme, je suppose que tu pensais à moi en l’écrivant puisque je suis néophyte, mais je n’ai aucune idée de ce que je pourrais partager puisque je n’y comprends rien ou disons pas grand-chose, je suis totalement dépendante du savoir des autres, je sais très bien que seule je n’y arriverai jamais.
Le gars du forum d’Ubuntu m’a écrit: « La bonne pratique, à garder au maximum à l’esprit en matière de webdev, c’est de cloisonner au maximum d’un côté la sémantique (et seulement elle) dans le HTML, de l’autre le style/l’apparence dans les feuilles de style CSS. »
Le programme simple avec une question et 6 réponses, tu l’as vu au début, mais je veux bien le répéter:
<?php
echo '<strong>Où aimeriez-vous passer vos prochaines vacances</strong>';

print("<center>'1.1'</center>");

echo 'Sur le canal du Midi parce que j\’aimerais voir les arbres sur les chemins de halage.';
((Une case pour inscrire la valeur de 0 à 8.)) Par exemple 4

print("<center>'1.2'</center>");

echo 'Dans les plaines au bas de l\'Himalaya au Népal parce que les sommets blancs me fascinent.';
((Une case pour inscrire la valeur de 0 à 8.))Par exemple 0

print("<center>'1.3'</center>");

echo 'Dans un parc au Costa Rica pour découvrir la diversité de la faune et de la flore de ce pays.';
((Une case pour inscrire la valeur de 0 à 8.)) Par exemple 8
?>
Le total est bien de 12, mais une fonction d’addition devra nous le dire!
Stocker les réponses de mes utilisateurs, il me semble que cela se fait dans une base de données, la plus connue et utilisée étant MySQL.
Si j’ai bien compris, les questions seront stockées dans un CSS.
Le tout sera hébergé par la coopérative OUVATON Coop dont je suis membre.

Sonia67 a écrit :

Je dois revenir à cette question d’égoïsme, je suppose que tu pensais à moi en l’écrivant puisque je suis néophyte, mais je n’ai aucune idée de ce que je pourrais partager puisque je n’y comprends rien ou disons pas grand-chose, je suis totalement dépendante du savoir des autres, je sais très bien que seule je n’y arriverai jamais.

Quand je parlais des états d'esprits égoïstes, c'est en général et aucunement vers toi. En aucun cas, c'est pour te faire peur. Au contraire, tu es la bienvenue. C'est juste que j'ai fait passer un point de la règle non dite sur le forum. Ça me saoule de voir des personnes qui viennent gratter un script et puis se barrent. Là par exemple, j'ai répondu à un sujet où j'ai donné une solution. 2 autres membres ont participé à la discussion et j'ai rebondi sur la solution. Résultat, la personne qui a posée la question à une solution beaucoup plus aboutie. Un forum, c'est selon moi un endroit de discussion et de partage. Un endroit où l'échange est enrichissant.

Bien sûr qu'au départ tu es dépendante. D'ailleurs, on les tous plus ou moins. Même si tu ne connais pas grand chose, le peu que tu sais, peut aider. C'est le principe même du projet GNU. Par exemple ce que je t'ai dit plus haut à propos de la différence entre print et echo. Plus tard quand tu passeras sur le forum et que tu vois une question dont tu as une solution, tu pourras aider le membre. Ici, il y a tous les niveaux.

Sonia67 a écrit :

Le gars du forum d’Ubuntu m’a écrit: « La bonne pratique, à garder au maximum à l’esprit en matière de webdev, c’est de cloisonner au maximum d’un côté la sémantique (et seulement elle) dans le HTML, de l’autre le style/l’apparence dans les feuilles de style CSS. »

oui c'est exactement ça. Et garde toujours cette règle à l'esprit (abstraction de toutes les couches). Pourquoi ?
1. travailler proprement (les fichiers bordéliques sont justes à mettre à la poubelle)
2. ton code sera nettement plus maintenable. Et souvent, tu n'auras qu'à changer un paramètre et ça fera un effet domino (tout se met à jour d'où notre fainéantise légendaire)

Pour faire court :
- le html c'est le contenu textuel (le texte et les éléments html qui chacun s'utilisent à bon escient)
- le css, c'est la mise en forme et très très peu d'interactivité (les couleurs, le positionnement, les mise en exergue, etc.)
- le javascript (côté navigateur) permet de dynamiser tout ça (le css / html). En somme, toute l'interactivité que tu vois dans une page web sur ton navigateur : carousel, modale, validation formulaire, menu déroulant animé, animation diverses, etc.
- le php/Ruby/Python/Java/etc. permettent de dynamiser le contenu et les éléments html (en général). On peut très bien dynamiser du css, mais c'est extrêmement rare. L'intéractivité se passe côté serveur. exemple : enregistrement en base, lecture fichiers, enregistrement fichiers, validation de formulaire, affichage des pages, etc. etc.

Bien que certaines choses soit commune en JS (côté navigateur) et un langage serveur tel que le Python, il est préférable de les faire suivant les bonnes pratiques à connaitre. exemple : validation des données pour qu'elles soient insérées en base de données par exemple.

Sonia67 a écrit :

Le programme simple avec une question et 6 réponses, tu l’as vu au début, mais je veux bien le répéter:
&lt;?php
echo '&lt;strong&gt;Où aimeriez-vous passer vos prochaines vacances&lt;/strong&gt;';

print("&lt;center&gt;'1.1'&lt;/center&gt;");

echo 'Sur le canal du Midi parce que j\’aimerais voir les arbres sur les chemins de halage.';
((Une case pour inscrire la valeur de 0 à 8.)) Par exemple 4

print("&lt;center&gt;'1.2'&lt;/center&gt;");

echo 'Dans les plaines au bas de l\'Himalaya au Népal parce que les sommets blancs me fascinent.';
((Une case pour inscrire la valeur de 0 à 8.))Par exemple 0

print("&lt;center&gt;'1.3'&lt;/center&gt;");

echo 'Dans un parc au Costa Rica pour découvrir la diversité de la faune et de la flore de ce pays.';
((Une case pour inscrire la valeur de 0 à 8.)) Par exemple 8
?&gt;

Il faudrait que tu lises tout ce tutoriel. Là, je viens de voir que tout le contenu est en vidéo (c'est alors plus facile à comprendre et apprendre !) Aussi, je t'invite par la suite à lire la plupart des articles qu'il y a sur alsacreations. Il y en a beaucoup où tu n'auras pas vraiment besoin de les lire puisque tu auras déjà des connaissances sur le sujet (via mon premier lien)

Sonia67 a écrit :

Le total est bien de 12, mais une fonction d’addition devra nous le dire!

Bonne idée ! Mais on fait plus simple et surtout plus efficace finalement. Tu sais, nous les informaticiens, on est flemmard.... Grosso modo, on attend une valeur sur X valeurs attendus. Si elle n'y est pas, on renvoie un message d'erreur.

Sonia67 a écrit :

Stocker les réponses de mes utilisateurs, il me semble que cela se fait dans une base de données, la plus connue et utilisée étant MySQL.

oui tu peux. Mais tu peux aussi stocker sur d'autres choses comme dans un fichier plat (fichier texte, fichier json, fichier xml, etc.

Sonia67 a écrit :

Si j’ai bien compris, les questions seront stockées dans un CSS.

Nop, le css, c'est la mise en forme (les couleurs, le souligner, les marges, etc.). Là où ça peut te dérouter, le html a quelques éléments qui sont spécifiques à la mise en forme. Cela fait suite à son historique. Avant le css (l'âge préhistorique), le html faisait la mise en forme.

Tes questions et réponses peuvent être stockées en base de données. Mais aussi dans des fichiers plats.

Pour ton questionnaire, ça se passe avec un formulaire en html. je t'invite fortement à parcourir les liens que je viens te donner. Ils vont être d'une grande aide.
Modifié par niuxe (22 May 2020 - 21:21)

J’avais déjà commencé à regarder ces vidéos (https://www.youtube.com/watch?v=zlzep1X9Jn8) avant que tu me parles de Openclassroom que je connais de Ruby. J’ai donc commencé ma petite programmation en html5.

<|DOCTYPE html>
<html>
      <head>
            <title> Où aimeriez-vous passer vos prochaines vacances</title>
      </head>
      <body>
          <h1>Un titre</h1>
          <p>Un paragraphe</p>
      </body>
</html>

Modifié par Sonia67 (22 May 2020 - 21:57)

Bonsoir,
Cela fait une semaine que je suis passée à HTLM5 et j'ai maintenant un premier fichier html qui comporte un titre h1 Question 1, puis un titre h2, centré, puis une rangée 1.1 à 1.6 avec en-dessous les six réponses, centrées sur chacune d'elle. Le tout sous forme de tableau sans bordure.
La ligne en-dessous, je ne sais pas encore comment la présenter, car ceux qui feront le test devront donner par exemple la valeur 3 à la réponse 1.1, 0 à 1.2, 4 à la réponse 1.3, 5 à la réponse 1.4 et 0 à 1.5 et 1.6, ce qui fait un total de 12. Le programme doit faire le total des valeurs entrées et arriver à 12, une autre réponse n'est pas acceptée, donc la répartition des valeurs doit être corrigée. Visiblement, je ne peux faire cela avec html, c'est un autre programme qui doit entrer dans la ronde?

Il y a 19 questions, donc 19 pages html et un fichier css.

Je voudrais aussi découvrir comment indiquer dans le CSS que je veux une couleur de fond différente pour chaque page.