Développement des parents pour atteindre les petits enfants...

Bonjour,

je ne comprends pas trop, le serveur sur lequel tourne le php n'est pas le même que celui sur lequel sont stockés les photos?
Si oui, pourquoi ne pas mettre cela sur le même serveur? Cela simplifierait les choses.

Bonjour,
En effet, j'ai un serveur que j'ai monté moi même avec un vieux pc et des disques dur sur lequel j'ai installé freenas. Il me sert pour stocker mes photos, musiques, et films. Jusqu'à présent, tout le monde utilisait la porte Webdav pour voir ce qu'il y a sur mon serveur et Filezilla pour importer ou récupérer des fichiers.
Mon site est hébergé gratuitement, car privé et ne concerne qu'une 10ene de personnes (donc pas l'utilité de payer), et je ne veux pas stocker de trop sur l'hébergeur. D'ailleurs, vu la quantité de photos, je n'aurais pas assez de place.

Depuis mon site, je souhaite voir les dossiers et les ouvrir pour afficher in finé les photos version galerie. En gros, utiliser mon site comme plateforme principale pour accéder à mon serveur. D'où l'utilité d'utiliser JS pour interagir coté client. C'est là que je bloque...
Modifié par johuv (28 Jan 2019 - 19:20)

Bonjour,

Rien compris à la question.

Quand tu dis "mon site", il est où ce site ?

Amicalement,

héhé. Bon, je vais essayer de m'expliquer mieux...
J'ai, chez moi, un serveur multimédia. Il est accessible via Webdav et Filezilla depuis l'extérieur, mais l'utilisation est trop compliquée pour certains des utilisateurs.

Je me suis fait un site internet actuellement hébergé gratuitement chez hebergratuit.net .
Ce site internet à une page blog, une page photos, une autre vidéos et encore une autre musique. Ce site est accessible seulement par moins de 10 personnes, ma famille.
Il sert à faire en sorte que les membres de la famille voient des fichiers photos, camescope, etc... car tout le monde est éparpillé en France et en Espagne: ça permet de garder le contact.

Actuellement, mes pages photos, musiques et vidéos retranscrivent seulement les titres des dossiers existants dans le serveur sous forme de liste cliquable: quand le membre clique sur un titre de dossier, il est dirigé dans un nouvel onglet sur une page Webdav.

Ce que je veux faire, c'est créer un script en JS pour que mon site soit capable d'ouvrir et d'afficher les dossiers enfants, sans sortir de la page de mon site, et afficher lors du clique du dernier dossier enfant la galerie photo


Plus haut, vous avez le script que j'ai fait pour afficher les dossiers et rendre cliquable. Maintenant, je suis bloqué par manque de connaissance. Je ne sais pas comment procéder: je ne trouve pas de piste sur laquelle me lancer et je viens chercher votre aide pour m'aiguiller..
Merci

Bonjour,

2 solutions parmi d'autres (en supposant que j'ai bien compris le problème, ce dont je ne suis pas sûr) :

Solution 1 : tu génères l'ensemble de tes liens vers les dossiers et sous-dossiers avec php dans ta page principale.

Mais y en a peut-être trop. Disons que trop de liens, c'est au moins quelques milliers : est-ce le cas ?

Ensuite, tu n'affiches au départ que la liste des dossiers à la racine du site (ou son équivalent), tu caches le reste avec du css approprié, et tu utilises du code JS pour développer/réduire l'arborescence (y a surement des trucs tout faits qui font ça, mais ce n'est pas très dur à écrire de toute façon).

Si un dossier enfant ne contient que des images, tu les récupères via JS en utilisant ce qu'on appelle de l'AJAX, ce qui aura pour effet de déclencher un script php (se trouvant sur le serveur hébergeant ton site) qui construira ta galerie d'images (par exemple en html, ou bien sous-forme de données en JSON) (voir ci-dessous).

Solution 2 : tu ne génères en php au départ que la liste des dossiers à la racine du site (ou son équivalent), et ensuite, quand tu cliques sur un sous-dossier, ça déclenche une fonction javascript qui fera de l'AJAX pour récupérer la liste des sous-dossiers d'un dossier. Ce code JS/AJAX déclenchera un script php (se trouvant sur le serveur hébergeant ton site) qui construira la liste des sous-dossiers (par exemple en html, ou bien sous-forme de données en JSON). Ou bien, si le sous-dossier ne contient que des images, ce script php construira la galerie image (par exemple en html, ou bien sous-forme de données en JSON).

Les exemples de code JS/AJAX trainent partout. On peut faire plus ou moins simple. Mais ce code devrait être relativement basique. Les scripts php déclenchés par le code JS/AJAX devraient être eux aussi pas très durs à mettre au point.

Concrètement, pour lancer une fonction JS/AJAX, tu remplaces dans le php de ta page principale la ligne :

$a->target="_blank";

par quelque chose du genre

$a->onclick="myGetByAJAX('".$ref."')";

où $ref contient ce qu'il faut pour indiquer à php dans quel sous-dossier chercher (en gros ref sera l'url du dossier parent).

Ensuite, il faut aussi inclure dans le code php de la page principale une balise script qui inclura un fichier js. Si ce script s'appelle "myJs.js", la ligne à ajouter sera :

<script src="myJs.js"></script>

Ensuite, il faudra ajouter dans la page principale une balise (par exemple une div) ayant pour id par exemple "data".

<div id="data"></div>

Il faudra aussi empêcher le lien d'ouvrir une autre page ou un autre onglet en remplaçant dans le php de la page principale le lien dans $a->href par un lien pointant vers une ancre de la page. Par exemple :

$a->href="#data";

Ta liste de liens initiale peut être éventuellement incluse dans cette div.

Dans le fichier js, tu définiras la fonction myGetByAJAX(). Par exemple, si tu décides que le script php lancé par AJAX s'appelle makeHtml.php et contient du code qui génère du html représentant soit une liste de liens vers des sous-dossiers, soit une galerie image, et que ce code html sera affiché dans ta page principale dans l'élément html ayant pour id "data", cette fonction myGetByAJAX() pourrait être (j'ai réduit au minimum) :

function myGetByAJAX(ref) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById('data').innerHTML = this.responseText;
    }
  };
  xhr.open("POST", "makeHtml.php",true);
  xhr.send("ref="+ref);
}

Ensuite, il faut écrire le script makeHtml.php qui va récupérer la valeur de ref dans $_POST["ref"], et qui va construire soit une liste de sous-dossiers, soit une liste d'images, en utilisant des instructions du même genre que ce que tu fais déjà pour générer ta page principale.

Amicalement,

Je crois que tu as saisie mon problème.

Je vais me pencher sur ces méthodes dès que possible et te tiendrais au courant. Merci !

En fait la question était que vu que tu as déjà un serveur web sur ton serveur maison, que tu interroge pour parser l'arborescence, pourquoi ne pas mettre ton site php sur ce même serveur? (Plutôt que le contraire).

Si tout est sur le même serveur, tu peux construire une arborescence très facilement avec php et tu n'as qu'à cacher/montrer le contenu des dossiers en javascript sans avoir à te prendre le chou avec de l'ajax.

Si tu as trop de fichiers, tu peux utiliser quand même de l'ajax mais ce sera plus performant car tu auras un intermédiaire en moins.

Bonjour Kustolovic,

Je n'ai pas très envie de mettre autre chose que mes medias sur le serveur. Si un disque dur lache, ça m'embèterais de devoir tout recommencer. De plus, il est en language linux que je ne connais pas. J'apprends déjà PHP à la maison depuis presque deux ans, je n'ai pour le moment pas le temps d'apprendre un autre langage en même temps ^^. Mais je prends bonne note et t'en remercie.

Bonjour parsimonhi,

Merci pour le temps consacré à mon problème.

- J'ai placé l'ancre et je ne me suis pas foulé, j'ai repris #data. L'ancre fonctionne.
- J'ai placé la direction du script sur ma page principale nommée "photos", avant </body>

 <script src="http://XXX/webroot/js/fonctiondevelop.js"></script>

- J'ai modifié mon script avec Dom

<?php 
// Connection au serveur
$url = 'http://xxxx/Medias/Photo/'; 
Require_once CORE.DS.'connectwebdav.php';
//-------------------------
require_once CORE.DS.'simple_html_dom.php';
$html = new simple_html_dom();
$html->load($serveur);
foreach ($html->find('h1') as $title):{
    $title->outertext = ''; // je supprime le titre venue de WebDav
}
endforeach;

foreach ($html->find('a') as $a):{                 // je cherche les liens
    $a->id="lien1";
    $newhref = $url.$a->href;                      //je fabrique la nouvelle adresse
    $a->href = '#data';                                // je change l'adresse du lien vers une ancre
    $a->onclick="myGetByAJAX('".$newhref."')";  // Je dirige vers la nouvelle adresse au "CLIC"
    
}
endforeach;

$photo = $html->save();  //je sauvegarde

echo $photo; // j'affiche 

Jusque ici, tout fonctionne: en voici l'exemple dans la vue-source:

<li><a href="#data" id="lien1" onclick="myGetByAJAX('http://XXXXX/Medias/Photo/Noel%202017/')"> Noel 2017/</a></li> <li><a href="#data" id="lien1" onclick="myGetByAJAX('http://XXXXXX/Medias/Photo/Noel%202018/')"> Noel 2018/</a></li>

Apparaissent bien l'ancre et l'Onclick.

-J'ai créé (ou plûtot recopié ^^) la fonction JS

function myGetByAJAX(ref) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById('contPhoto').innerHTML = this.responseText;
    }
  };
  xhr.open("POST", "CORE.DS.'makeHtml.php'",true);
  xhr.send("ref="+ref);
}

Et enfin, j'ai créé la page "makehtml.php"(toujours pas foulé^^)

if (exif_imagetype('image.JPEG') != IMAGETYPE_JPEG) {
// Connection au serveur
$url = $ref; 
Require_once CORE.DS.'connectwebdav.php';
//------------------



	// Je modifie $html pour avoir une page avec des liens qui fonctionnent.
	require_once CORE.DS.'simple_html_dom.php';
	$html = new simple_html_dom();
	$html->load($serveur);
	foreach ($html->find('h1') as $title):{
	    $title->outertext = '';
	}
	endforeach;
	foreach ($html->find('a') as $a):{ // je cherche les liens
	    $a->id="lien1";                    // je lui donne une Id pour faire du css
	    $newhref = $url.$a->href; //je fabrique la nouvelle adresse
	    $a->href = '#data'; // je change l'adresse du lien vers une ancre
	    $a->onclick="myGetByAJAX('".$newhref."')"; // je lui donne une nouvelle adresse au "CLIC"
	    

	}
	$photo = $html->save();  //je sauvegarde
	echo $photo;  // je vois ce que j'ai fais
}else{
	echo "tu feras l'affichage des photos plus tard, vois déjà si ça marche jusque là !!!";
}

Je n'ai pas de message d'erreur, mais quand le clic, ça me retourne à l'ancre mais sur la même liste de dossier. J'ai donc fait une erreur quelque part. je crois que c'est les variables que je ne maîtrise pas...
Modifié par johuv (31 Jan 2019 - 06:50)

Bonjour,

Il manque déjà une div vide ayant pour id "contPhoto" dans la page principale, car la fonction myGetByAJAX() essaie de remplir cet élément, mais ne le crée pas (on pourrait aussi le créer avec javascript : à voir par la suite car ce sera sans doute mieux). Mais déjà, ajoute là via ton script php générant la page principale.

EDIT: dans ton "makehtml.php", le $ref n'est pas défini. Il faut rajouter just avant de l'utiliser :

$ref = $_POST['ref'];

EDIT2: je ne comprends pas trop comment tu retrouves via webDave les liens correspondant aux sous-dossiers de l'url contenu dans $ref.

Après, on aura surement d'autres trucs à modifier (ne garder dans le html généré par "makehtml.php" que la partie qui est entre les balises body (puisqu'on va inclure cette partie dans une page ayant déjà une balise html, head, etc.), cacher le menu principal initial, ou bien tout garder et ne développer que la branche de l'arborescence courante ? que se passe-t-il si on a des sous-dossiers de sous-dossiers ? etc.). Il faudrait que je vérifie sur un exemple, car c'est quand même assez complexe de tout faire de tête, mais c'est un peu long à coder, et du coup, je ne l'ai pas encore fait.

On va avancer pas à pas.

Amicalement,
Modifié par parsimonhi (30 Jan 2019 - 23:21)

johuv a écrit :
Bonjour Kustolovic,

Je n'ai pas très envie de mettre autre chose que mes medias sur le serveur. Si un disque dur lache, ça m'embèterais de devoir tout recommencer. De plus, il est en language linux que je ne connais pas. J'apprends déjà PHP à la maison depuis presque deux ans, je n'ai pour le moment pas le temps d'apprendre un autre langage en même temps ^^. Mais je prends bonne note et t'en remercie.

Juste pour la précision, Linux n'est pas un langage mais un système d'exploitation. Ce système est le plus couramment utilisé pour les serveurs web, l'hébergement que tu utilises tourne très probablement sur Linux. PHP est un langage de développement pour le web, qui peut fonctionner sous tous les systèmes. Ce que je te proposais c'est d'utiliser le serveur web dont tu te sers déjà (apache, nginx?) pour y héberger tes pages PHP.

Merci Kustolovis, tu as raison. Je me pencherais dessus. Ce que je voulais dire pour le langage, c'est que, par exemple, pour installer Minidlna sur Freenas, j'ai galéré un peu et je faisais bêtement sans comprendre réellement, du coup, je suis un peu échaudé pour le môment.

Parsimonhi, en premier lieu, j'avais utiliser un id existant pour mon css comme ancre. j'ai fait marche arrière en mettant une div vide comme indiqué, mais j'ai zappé de modifié

document.getElementById('contPhoto')

C'est maintenant fait.

Pour ton édit2, je ne suis pas sûr de comprendre ta question, mais je vais tenté de te répondre, ce qui va induire, je pense ton édit1. Pardonnes moi par avance si tu trouves mon explication trop longue et inutile, mais je pense que tu comprendras mieux comment j'ai pensé. Ce sera plus facile pour toi de me comprendre.

Prenons le premier code:
J'ai une page "connectwebdav.php" qui me sert pour 3 pages html (page photo, musique et vidéo). Ces 3 pages sont quasiment les mêmes. C'est pourquoi je n'utiliserais que la page "photo.php" ensemble.

$timeout = 10; 
$http_auth_ident = 'YYYYYY:XXXXX'; // identifiant:mot de passe 
$ch = curl_init($url); 

curl_setopt($ch, CURLOPT_FRESH_CONNECT, true); 
curl_setopt($ch, CURLOPT_TIMEOUT, $timeout); 
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout); 

if (preg_match('`^http://`i', $url)) { 
   curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); 
   curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0); 
} 
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); // Retourner le contenu téléchargé dans une chaine (au lieu de l'afficher directement)
curl_setopt($ch, CURLOPT_HEADER, false); // Ne pas inclure l'entête de réponse du serveur dans la chaine retournée)         => false, // Ne pas inclure l'entête de réponse du serveur dans la chaine retournée

// Définition de la méthode d'authentification du serveur 
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_ANY); 

// Définition des identifiants 
curl_setopt($ch, CURLOPT_USERPWD, $http_auth_ident); 

$serveur = curl_exec($ch); // Le contenu téléchargé est enregistré dans la variable $serveur_content.

curl_close($ch);

Comme tu peux le voir, j'utilise la variable $url. Comme les urls sont différentes pour les 3 pages, j'ai choisi de la définir sur les dites pages juste avant le require.
(page "photo.php")

// Connection au serveur
$url = 'http://xxxx/Medias/Photo/'; 
Require_once CORE.DS.'connectwebdav.php';

Une fois connecté au Webdav, je récupère le html grâce à SimpleDom

require_once CORE.DS.'simple_html_dom.php';
$html = new simple_html_dom();
$html->load($serveur);

a ce moment là, ce qui est retranscrit est nommé $html. En l'état, ça ressemble à ça:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<html>
 <head>
  <title>Index of /Medias/Photo</title>
 </head>
 <body>
<h1>Index of /Medias/Photo</h1>
<ul><li><a href="/Medias/"> Parent Directory</a></li>
<li><a href="Accordanse/"> Accordanse/</a></li>
<li><a href="Lys/"> Lys/</a></li>
<li><a href="Manon%20et%20Zoe/"> Manon et Zoe/</a></li>
<li><a href="Michel%20et%20Lily/"> Michel et Lily/</a></li>
<li><a href="Noel%202015/"> Noel 2015/</a></li>
[...]

Je peux alors manipuler tout ceci pour que mes <a href></a> soient de vrais liens:

foreach ($html->find('h1') as $title):{
    $title->outertext = ''; // je supprime le titre venue de WebDav
}
endforeach;

foreach ($html->find('a') as $a):{                 // je cherche les liens
    $a->id="lien1";                                        // je créé un id pour, entre autre, le css.
    $newhref = $url.$a->href;                      // je fabrique la nouvelle adresse
    $a->href = '#data';                                // je change l'adresse du lien vers une ancre
    $a->onclick="myGetByAJAX('".$newhref."')";  // Je dirige vers la nouvelle adresse au "CLIC"    
}
endforeach;

$photo = $html->save();  //je sauvegarde
echo $photo; // j'affiche

Donc mon nouveau lien nommé $newhref, c'est mon $url du début de la connection + le lien recherché avec le dom ($a)
$url = 'http://xxxx/Medias/Photo/' + <a href="Manon%20et%20Zoe/">
soit $newhref="http://xxxx/Medias/Photo/Manon%20et%20Zoe/"
ce qui donne réellement, pour reprendre l’exemple du html plus haut:

<li><a href="#data" id="lien1" onclick="myGetByAJAX('http://xxx/Medias/Photo/Accordanse/')"> Accordanse/</a></li> <li><a href="#data" id="lien1" onclick="myGetByAJAX('http://xxx/Medias/Photo/Lys/')"> Lys/</a></li> <li><a href="#data" id="lien1" onclick="myGetByAJAX('http://xxx/Medias/Photo/Manon%20et%20Zoe/')"> Manon et Zoe/</a></li> <li><a href="#data" id="lien1" onclick="myGetByAJAX('http://xxx/Medias/Photo/Michel%20et%20Lily/')"> Michel et Lily/</a></li> <li><a href="#data" id="lien1" onclick="myGetByAJAX('http://xxx/Medias/Photo/Noel%202015/')"> Noel 2015/</a></li>

Voilà où j'en suis.

Maintenant que je t'ai exposé tout ça, tu comprends pourquoi j'ai voulu adapter ceci
$a->onclick="myGetByAJAX('".$newhref."')";

Edit,
Du coup je ne suis pas sûr de devoir utiliser $_POST["ref"] et "$ref" dans le script ajax. j'ai un peu de mal à saisir les dernières lignes pour pouvoir m'adapter...
Modifié par johuv (02 Feb 2019 - 16:54)

Bonjour,

Je vois maintenant à peu près comment tu retrouves via webDave les liens correspondant aux sous-dossiers.

Mais si tu n'utilises pas le $_POST["ref"], comment feras-tu pour savoir si c'est 'http://xxxx/Medias/Photo/' ou 'http://xxxx/Medias/Musique/' ou 'http://xxxx/Medias/Video/' qu'il faudra mettre dans la variable $url dans le script "makehtml.php" ?

Et ensuite, quand tu cliqueras sur un lien d'un sous-dossier de 'http://xxxx/Medias/Photo/', comment feras-tu pour savoir de quel sous-dossier il s'agit (comment donner à $url la bonne valeur) ?

Amicalement,

Oui. Ce que je voulais dire, c'est que je ne comprends pas ce que veulent dire toutes les lignes, du coup je ne sais pas si c'est $_POST["ref"] ou $_POST["newhref"] ou autre choses...

Peux tu m'expliquer ton code ?

function myGetByAJAX(ref) {          //    on nomme la fonction
  var xhr = new XMLHttpRequest();              // on stock une nouvelle requête dans la variable xhr
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById('data').innerHTML = this.responseText;
    }
  };
  xhr.open("POST", "CORE.DS.'makeHtml.php'",true);
  xhr.send("ref="+ref);
}

Bonjour,

La fonction javascript myGetByAJAX() dit au serveur php de lancer le script 'makeHtml.php'. La ligne xhr.send("ref="+ref); dit au serveur que l'élément du tableau $_POST["ref”] dans le script 'makeHtml.php' aura pour valeur le contenu de la variable javascript ref. Cela permet d'envoyer depuis le code javascript (qui s'exécute dans la navigateur) un paramètre au script php 'makeHtml.php' (qui s'exécute sur le serveur).

C'est un peu le même principe qu'un formulaire html (si tu connais le principe de fonctionnement d'un formulaire html, ça devrait t'aider à comprendre).

EDIT: ensuite, 'makeHtml.php' s'exécute sur le serveur et renvoie au navigateur dans this.responseText le contenu généré par 'makeHtml.php' (le code html fabriqué par 'makeHtml.php' n'est pas "affiché" par tes echo, en fait il est mis dans this.responseText).

EDIT2: et finalement, la ligne document.getElementById('data').innerHTML = this.responseText; met le contenu de this.responseText dans l'élément html ayant pour id ici "data" dans ta page principale.

Amicalement,
Modifié par parsimonhi (02 Feb 2019 - 17:58)

Merci. j'ai compris.
Vu que ça ne fonctionne pas, je vais récapituler ce que j'ai exactement.

Mon script "affichephotolistserv.php" (classé dans le "dossier" CORE) modifie la liste des dossiers du serveur en remplaçant les liens <a> inutilisables pour les envoyer vers l'ancre "#data". Ceci fonctionne car quand je clique, l'adresse devient http://localhost:8080/xxxx/pages/photo#data ; et inscrit le onclick envoyant vers le script JS. Ce qui donne

<li><a href="#data" id="lien1" onclick="myGetByAJAX('http://xxx/Medias/Photo/Noel%202017/')"> Noel 2017/</a></li>

Le onclick envoie donc au script "myGetByAJAX(ref)" qui renvoie le script php "makeHtml.php" (également dans mon dossier core) qui demande donc d'ouvrir le fichier de la nouvelle adresse: celle des liens.

Ma page "photo.php" (page principale contenant l'html) affiche dans une div le script php que "affichephotolistserv.php" décrite ci dessus.

Question:
* Dans le script JS, est-ce que cette forme fonctionne 'CORE.DS."makeHtml.php"' ?

Je dois avoir un soucis d'adresse...
Voici l'erreur qui est affichée dans l'outil developpement:

fonctiondevelop.js:11 POST  http://localhost:8080/xxx/pages/CORE.DS.'makeHtml.php'  404 (Not Found)

Modifié par johuv (03 Feb 2019 - 00:44)

Bonjour,

Tu es encore très loin d'avoir fini.

Il faut y aller étape par étape. N'espère pas que par un coup de baguette magique, tout ceci se mette à marcher sans problème. Il y a encore plein de détails à régler.

En ce qui concerne ton erreur, il y a des guillemets en trop autour de makeHtml.php.

Il faut utiliser, d'après ce que je comprends de l'arborescence de tes fichiers :

xhr.open("POST", "CORE.DS.makeHtml.php",true);

Amicalement,

Malgré celà, l'adresse n'est pas la bonne:

fonctiondevelop.js:9 POST  http://localhost:8080/xxx/pages/core/makeHtml.php  404 (Not Found)

J'ai donc modifié comme suit:

xhr.open("POST", "../core/makeHtml.php",true);

du coup, ça rectifie correctement l'adresse. mais ne trouve pas l'adresse je ne comprends pas pourquoi...

fonctiondevelop.js:9 POST  http://localhost:8080/xxx/core/makeHtml.php  404 (Not Found)