Fusionner un lien JS avec du HTML/PHP

Version imprimable

2 pièce(s) jointe(s)

Bonjour à tous,

J'essaie de faire une gymnastique qui me fait tourner la tête.. Je vais essayer d'être clair.

Sur mon site, j'ai une animation ludique en JS qui propose de "gagner" de manière aléatoire un dossier zip contenant des choses en lien avec le thème de mon site.

J'ai 2 articles, dans chaque article je propose 3 dossiers zip, donc 6 au total.

Voici comment se présente mon code HTML pour 3 de ses dossiers :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <div class="hasard-choix anim-f"> <a href="#"> <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin"> <use xlink:href="#img-question"></use> </svg> <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin"> <use xlink:href="#img-question"></use> </svg> <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin"> <use xlink:href="#img-question"></use> </svg> </a> </div>
Ici, les liens dans mon fichier JS :
Code:

1 2 3 const ar_liens = ["images/test1.zip", "images/test2.zip", "images/test3.zip"]; const ar_liens2 = ["images/test4.zip", "images/test5.zip", "images/test6.zip"];
Jusque là, pas de problème. Là ou ça se complique, c'est que je souhaite voir la popularité des téléchargements, donc j'ai crée une petite interface administrateur sur mon site, qui me permettrait de compter le nombre de clics sur mes liens. :

Pièce jointe 599566
(Les "0" sont le nombre de clic sur les liens)

Pour tester que tout fonctionnait correctement avant d'integer le tout à mon animation JS j'ai mis des simples liens dans mon code HTML en dehors de mon animation, comme ceci :
Code:

1 2 3 4 5 6 7 <a href="click.php?id=1">1</a> <a href="click.php?id=2">2</a> <a href="click.php?id=3">3</a> <a href="click.php?id=4">4</a> <a href="click.php?id=5">5</a> <a href="click.php?id=6">6</a>
Tout fonctionne, c'est comptabilisé dans ma base de donnée ainsi que dans ma page d'administration.

BDD :

Pièce jointe 599567
(Tout est à 0 pour l'exemple)

Mon problème :

J'ai essayé plusieurs façons de faire mais je n'arrive pas à "fusionner" mon test :
Code:

1 2 3 4 5 6 7 <a href="click.php?id=1">1</a> <a href="click.php?id=2">2</a> <a href="click.php?id=3">3</a> <a href="click.php?id=4">4</a> <a href="click.php?id=5">5</a> <a href="click.php?id=6">6</a>
avec ma version finale :
Code:

1 2 3 const ar_liens = ["images/test1.zip", "images/test2.zip", "images/test3.zip"]; const ar_liens2 = ["images/test4.zip", "images/test5.zip", "images/test6.zip"];
Est-ce que quelqu'un saurait comment procéder ?

J'espère ne pas avoir été trop confus.

10/06/2021, 16h05
tag9724

Si j'ai bien saisit tu aimerais que ton compteur de téléchargements se fasse quand un utilisateur ouvre un lien testX.zip ?

Si oui il suffirais en PHP de faire une page qui renvoie elle même le zip, par exemple une page telecharger.php?zip=1 qui enregistrera les statistiques puis renverras le fichier ( soit en redirigeant vers le zip ou en lançant le téléchargement directement ).

Une autre solution moins idéale serais d'effectuer une requête Ajax vers le lien click.php?id=1 puis seulement ensuite lancer le téléchargement du fichier.
10/06/2021, 16h18
jeicko

Merci de m’avoir répondu si rapidement.

Citation:

Si j'ai bien saisit tu aimerais que ton compteur de téléchargements se fasse quand un utilisateur ouvre un lien testX.zip ?

Oui c’est ça.

Citation:

par exemple une page telecharger.php?zip=1 qui enregistrera les statistiques puis renverras le fichier ( soit en redirigeant vers le zip ou en lançant le téléchargement directement ).

Hum, je crois que ça dépasse mes compétences.. :? Il n’y a aucun moyen d’intégrer directement les ID dans mon animation JS ? :(

Tu as déjà ton code en PHP qui enregistre le nombre de clicks sur les pages click.php?id=X il suffit juste que quand un utilisateur visite une des pages click.php ça le redirige vers le lien testZipX.zip.

Le code en PHP de click.php devrais ressembler à quelque chose comme ça donc :
Code:

1 2 3 4 5 6 7 8 9 10 <?php // Récupère le numéro du zip dans l'url $id = $_GET["id"]; // Enregistre le nombre de téléchargements dans la BDD enregistrerStatistiques( $id ); // Redirige vers le fichier zip ( "testZip1.zip" ) header('Location: /testZip'.$id.'.zip'); exit;
L'utilisateur ouvre /click.php?id=1
Le code en PHP enregistre les statistiques
Le code en PHP redirige l'utilisateur vers /zipTest1.zip

Comme dit précédemment en l'état avec juste du Javascript il faudra effectuer une requête vers click.php?id=1 pour avoir les statistiques, puis seulement après ouvrir testZip1.zip.

Ce n'est pas impossible en soit tu pourrais effectuer une requête Ajax vers click.php et en parallèle ouvrir testZip.zip dans un nouvel onglet ou en utilisant l'attribut download sur ta balise <a download href="testZip1.zip">.

Citation:

Tu as déjà ton code en PHP qui enregistre le nombre de clicks sur les pages click.php?id=X

Je ne sais pas si on est sur la même longueur d'onde ^^ ou alors je n'y comprends vraiment plus rien.. (dsl je suis novice en JS/PHP)

Je te propose de te montrer l'essentiel de mon code, si jamais tu me confirmes ta proposition précédente, je vais continuer de persister pour comprendre.

(Le but étant de faire en sorte que le compteur de téléchargement soit actif dans mon animation JS)

HTML et JS : https://codepen.io/jeicko/pen/BaWGByL

administration.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
error_reporting(0);
include ("click-config.php");
?>
 
 
 
                <?php
$sql = "SELECT * FROM " . $SETTINGS["data_table"] . " ORDER BY clicks DESC";
$result = $mysqli->query($sql) or die('request "requete SQL impossible" ' . $sql);
if ($result->num_rows > 0)
{
    while ($row = $result->fetch_assoc())
    {
?>
 
                       <a href="<?php echo $row["url"]; ?>" target="_blank"><?php echo $row["url"]; ?></a>
                            <?php echo $row["clicks"]; ?>
 
                        <?php
    }
}
else
{
?>
                <p>Auncuns résultats trouvés</p>
                    <?php
}
?>

click.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
 
error_reporting(0);
include ("click-config.php");
 
// obtenir les détails du lien en fonction de l'ID
$sql = "SELECT * FROM " . $SETTINGS["data_table"] . " WHERE id='" . intval($_REQUEST["id"]) . "'";
$result = $mysqli->query($sql) or die('request "requete SQL impossible" ' . $sql);
 
// vérifier si l'identifiant du lien existe
if ($result->num_rows > 0)
{
 
    $lien = $result->fetch_assoc();
 
    // augmente le nombre de clic d'1
    $sql = "UPDATE " . $SETTINGS["data_table"] . " SET clicks=clicks+1 WHERE id='" . intval($_REQUEST["id"]) . "'";
    $mysqli->query($sql) or die('request "requete SQL impossible" ' . $sql);
 
    header("Location: " . $lien["url"]);
 
}
else
{
 
    echo "Le lien est manquant";
 
}
 
?>

click-config.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
 
$SETTINGS["mysql_user"] = '***';
$SETTINGS["mysql_pass"] = '***';
$SETTINGS["hostname"] = '***';
$SETTINGS["mysql_database"] = '***_telechargements';
$SETTINGS["data_table"] = 'telechargements';
 
$mysqli = new mysqli($SETTINGS["hostname"], $SETTINGS["mysql_user"], $SETTINGS["mysql_pass"], $SETTINGS["mysql_database"]);
/* Je verifie la connexion */
if (mysqli_connect_errno())
{
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}
?>

Merci pour ta patience ;)

12/06/2021, 18h52
tag9724

1 pièce(s) jointe(s)
Si j'ai bien compris donc tu cherche à :
- Afficher a l'utilisateur une page contenant une liste de .zip téléchargeables avec le nombres de téléchargements totals effectués pour chacun d'entre eux.
- A chaque téléchargement d'un .zip mettre à jour le nombre de fois que celui-ci a été téléchargé dans la BDD
Je crois comprendre qu'un de tes soucis est de savoir comment afficher le nombre de téléchargements avec l'animation ou plutôt après l'animation ?
Est-ce que tu voudrais afficher le nombre de fois que le zip a été téléchargé s'affiche après l'animation par exemple ?

Pièce jointe 599711

Ou est-ce que tu voudrais que sous chacune des icones le nombre de téléchargements soient affichés ?

Pour ce qui est de la seconde problématique à savoir mettre à jour la BDD a chaque téléchargement du .zip la solution déjà donnée qui consiste a modifier le lien click.php pour rediriger l'utilisateur vers le fichier zip fonctionnerais.

En gros dans click.php à la ligne 20 il faudrais que la ligne :

Code:

header("Location: " . $lien["url"]);

Soit remplacée pour que la redirection se fasse vers le lien du fichier .zip,

Code:

header("Location: /images/test" . $_REQUEST["id"] . ".zip");

Il faudra aussi remplacer les liens vers les fichiers zip dans le JS
Code:

1 2 const ar_liens = ["images/test1.zip", "images/test2.zip", "images/test3.zip"]; const ar_liens2 = ["images/test4.zip", "images/test5.zip", "images/test6.zip"];
Par
Code:

1 2 const ar_liens = ["click.php?id=1","click.php?id=2","click.php?id=3"]; const ar_liens2 = ["click.php?id=4","click.php?id=5","click.php?id=6"];
12/06/2021, 22h16
jeicko
Citation:

Si j'ai bien compris donc tu cherche à :

Afficher a l'utilisateur une page contenant une liste de .zip téléchargeables avec le nombres de téléchargements totals effectués pour chacun d'entre eux.
A chaque téléchargement d'un .zip mettre à jour le nombre de fois que celui-ci a été téléchargé dans la BDD

Pas exactement : Je ne souhaite pas montrer à l'utilisateur le nombre de téléchargement effectué, je souhaite que ça apparaisse dans ma page d'administration, ma page d'administration et ma base de donnée communiquaient déjà correctement. Mon problème était de faire communiquer ma page JS avec ma base de donnée.

Dsl si je ne suis pas clair. En tout cas avec :
Citation:
En gros dans click.php à la ligne 20 il faudrais que la ligne :

Code:

header("Location: " . $lien["url"]);

Soit remplacée pour que la redirection se fasse vers le lien du fichier .zip,

Code:

header("Location: /images/test" . $_REQUEST["id"] . ".zip");

Il faudra aussi remplacer les liens vers les fichiers zip dans le JS

Code:

1 2 const ar_liens = ["images/test1.zip", "images/test2.zip", "images/test3.zip"]; const ar_liens2 = ["images/test4.zip", "images/test5.zip", "images/test6.zip"];

Par

Code:

1 2 const ar_liens = ["click.php?id=1","click.php?id=2","click.php?id=3"]; const ar_liens2 = ["click.php?id=4","click.php?id=5","click.php?id=6"];
Tu as résolu mon problème.

C'est donc tout ce que je souhaitais faire.

Un grand merci à toi ! Je n'aurais jamais trouvé seul.. Je passe le sujet en résolu, MERCI !
12/06/2021, 23h56
jeicko

1 pièce(s) jointe(s)

Mince je me suis avancé trop vite..

Quand je clique sur l'animation ça communique bien avec mon JS mais on dirait que ça ne va pas chercher le chemin dans ma BDD. Ca me télécharge seulement le nom présent dans le JS :

Pièce jointe 599723

Une idée ? :?

Je vois le problème, c'est vrais que je n'avais pas testé le code en PHP de mon coté, ton zip se télécharge bien mais le fichier n'as pas le bon nom.
De mon coté je vient juste de tester de reproduire le bug sans succès, j'ai créer un fichier click.php avec juste une ligne dedans
Code:

1 2 3 <?php header('Location: /images/fileTest'. $_REQUEST["id"] .'.zip'); ?>
Et un fichier HTML avec un simple lien

Code:

<a href="/click.php?id=1">Télécharger zip</a>

Et je ne suis pas parvenus a reproduire ton problème, le fichier se télécharge bien avec le bon nom sans aucun souci.

A la rigueur une façons de fixer le nom du fichier téléchargé est de rajouter un attribut download sur la balise <a> dans ton code HTML

Code:

<a download="leNomDuFichier.zip" href="click.php?id=1">Télécharger le zip</a>

Je pense que ça devrais être la solution la plus simple à implémenter pour toi, une autre solution qui pourrais être testée serais de changer de méthode pour lancer le téléchargement, en gros renvoyer le fichier directement dans le code PHP plutôt que de rediriger dessus.
Code:

1 2 3 4 5 6 7 8 $file = "/images/fileTest". $_REQUEST["id"] .".zip"; header("Content-Description: File Transfer"); header("Content-Type: application/octet-stream"); header("Content-Disposition: attachment; filename=\"". basename($file) ."\""); readfile ($file); exit();
Ce serais donc a la place de header("Location: /images/test" . $_REQUEST["id"] . ".zip");

Si vraiment tu n'arrivais pas a fixer ce problème tu devrais peut être te rediriger vers la partie PHP du forum qui sera surement plus apte à t'aider pour ce cas la.

2 pièce(s) jointe(s)

Salut, merci pour ta réponse.

Citation:

De mon coté je vient juste de tester de reproduire le bug sans succès

Pour reproduire le bug, il faut le fichier JS car moi aussi ça fonctionne avec ton test en dehors de l'animation.

Citation:

A la rigueur une façons de fixer le nom du fichier téléchargé est de rajouter un attribut download sur la balise <a> dans ton code HTML
Code html :

Code:

<a download="leNomDuFichier.zip" href="click.php?id=1">Télécharger le zip</a>

Je ne vois pas comment faire ça car mon HTML est lié au JS de cette manière :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!-- Article 1 -->
 
<div class="hasard-choix anim-f">
            <a href="#">
              <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1"
                preserveAspectRatio="xMinYMin">
                <use xlink:href="#img-question"></use>
              </svg>
              <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1"
                preserveAspectRatio="xMinYMin">
                <use xlink:href="#img-question"></use>
              </svg>
              <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1"
                preserveAspectRatio="xMinYMin">
                <use xlink:href="#img-question"></use>
              </svg>
            </a> 
           </div>
 
 
<!-- Article 2 -->
 
<div class="hasard-choix anim-g">
            <a href="#">
              <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1"
                preserveAspectRatio="xMinYMin">
                <use xlink:href="#img-question"></use>
              </svg>
              <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1"
                preserveAspectRatio="xMinYMin">
                <use xlink:href="#img-question"></use>
              </svg>
              <svg width="63.8" height="63.6" viewBox="0 0 63.8 63.6" xmlns="http://www.w3.org/2000/svg" version="1.1"
                preserveAspectRatio="xMinYMin">
                <use xlink:href="#img-question"></use>
              </svg>
            </a> 
          </div>

Citation:

une autre solution qui pourrais être testée serais de changer de méthode pour lancer le téléchargement

Ca ne fonctionne pas non plus :/

Pièce jointe 599730
Pièce jointe 599731

13/06/2021, 11h04
tag9724
Citation:

Pour reproduire le bug, il faut le fichier JS car moi aussi ça fonctionne avec ton test en dehors de l'animation.

Oh j'ai fini par comprendre en recherchant ton code JS sur un autre post du forum, tu as fait exactement ce que je t'avais proposé de faire avec l'attribut download sauf que tu as mis comme nom click.ph?id=X
Code:

1 2 // Peut être lu <a download="click.php?id=X"> ob_lien.download = lien.substr(lien.lastIndexOf("/") + 1);
Il faudra donc que tu remplace par

Code:

ob_lien.download = ""

Du coup ton code PHP fonctionnais effectivement bien hier soir l'erreur venais d'une ligne de code dans ton JS.
13/06/2021, 11h52
jeicko

Cette fois c'est bon !

Je ne sais pas ou j'en serais sans toute ton aide.. Encore une fois MERCI ;)

Je passe le sujet en résolu.

3 pièce(s) jointe(s)

Bonjour,

J'ouvre une nouvelle fois le sujet (sans doute pour la dernière fois..).
Je suis en train de finaliser mon site, du coup j'essaie d'intégrer les fichiers réels qui vont remplacer test1 test2 test3 test4 test5 test6.

Quelque chose doit m'échapper car avec les nouveaux noms je n'arrive plus à faire le lien entre les fichiers.

Voici ce que j'ai fait :

Dans mon code JS j'ai remplacé
Code:

1 2 const ar_liens = ["click.php?id=1","click.php?id=2","click.php?id=3"]; const ar_liens2 = ["click.php?id=4","click.php?id=5","click.php?id=6"];
par
Code:

1 2 const ar_liens = ["click.php?id=Fille-La-boîte-à-message","click.php?id=Fille-L'oeuf-à-craquer","click.php?id=Fille-La-cocotte-en-papier"]; const ar_liens2 = ["click.php?id=Garçon-La-boîte-à-message","click.php?id=Garçon-L'oeuf-à-craquer","click.php?id=Garçon-La-cocotte-en-papier"];
Dans click.php j'ai remplacé

Code:

header("Location: /images/test" . $_REQUEST["id"] . ".zip");

par

Code:

header("Location: /images/" . $_REQUEST["id"] . ".zip");

Voici ce que ça me télécharge :

Pièce jointe 600133

Si je clique sur le fichier :

Pièce jointe 600134

Et voici mes fichiers zip dans mon dossier "images" :

Pièce jointe 600135

Ca me paraissait logique de faire comme ça mais si quelqu'un voit ou je me suis trompé je suis preneur ;)

Je pense que l'erreur se situe dans ton click.php avec le système pour enregistrer le nombre de téléchargements.
Tu vérifiais si l'id du zip existait bien dans la base de données et si il existait bien tu mettais à jour la table et redirigeais vers le fichier zip.

click.php
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <?php error_reporting(0); include ("click-config.php"); // obtenir les détails du lien en fonction de l'ID $sql = "SELECT * FROM " . $SETTINGS["data_table"] . " WHERE id='" . intval($_REQUEST["id"]) . "'"; $result = $mysqli->query($sql) or die('request "requete SQL impossible" ' . $sql); // vérifier si l'identifiant du lien existe if ($result->num_rows > 0) { $lien = $result->fetch_assoc(); // augmente le nombre de clic d'1 $sql = "UPDATE " . $SETTINGS["data_table"] . " SET clicks=clicks+1 WHERE id='" . intval($_REQUEST["id"]) . "'"; $mysqli->query($sql) or die('request "requete SQL impossible" ' . $sql); header("Location: " . $lien["url"]); } else { echo "Le lien est manquant"; } ?>
Les 20 octets que pèse ton click.php-8.html correspondent bien au message d'erreur dans click.php "Le lien est manquant" ce qui montre bien que la partie dans click.php qui sélectionne dans la base de données ne fonctionne pas.
Code:

1 2 3 // obtenir les détails du lien en fonction de l'ID $sql = "SELECT * FROM " . $SETTINGS["data_table"] . " WHERE id='" . intval($_REQUEST["id"]) . "'"; $result = $mysqli->query($sql) or die('request "requete SQL impossible" ' . $sql);
Ce qui est d'ailleurs normal, intval($_REQUEST["id"]) convertiras "id" en nombre sauf que désormais tes identifiants pour les fichiers zip sont du texte ( intval("Fille-La-boîte-à-message"); donnera 0 ).

Il faudra aussi voir si la colonne "id" dans la BDD peux bien enregistrer du texte et pas seulement des nombres entiers, il faudra probablement créer une nouvelle colonne pour préciser le nom du zip ( en plus de la colonne id donc ).

18/06/2021, 16h27
jeicko

Aïe.. Pour ne pas tout repenser sinon j’ai la possibilité de ruser.. Je vais peut-être simplement remplacer «test1» par «Kit-a-imprimer-N1» etc. Et en décompressant le zip ça ouvrira le dossier «Fille-La-boîte-à-message»

Si je ne dis pas de bêtise je risque de tout faire bug si je mets un accent grave sur le «a» est-ce juste ?

(Je pars essayer tout ça)
20/06/2021, 10h26
jeicko

Je n’ai pas réussi à trouver l’équivalent de

Citation:

intval($_REQUEST["id"])

pour que ce soit interprété comme du texte du coup j’ai fait comme j’avais dit précédemment.