Partage

Formulaire d'ajout de nouvelles photos

5 août 2009 à 23:06:51

Bonsoir,

j'ai récemment ajouté un système de galeries photos sur mon site web disponible içi. Tout marche parfaitement mais maintenant je voudrais installer la partie pour envoyer les images.

Je sais envoyer les images sur le serveur mais il me manque des compétences pour faire ce que je veux. Les photos sont affichées grace au code suivant :

var photoArray = new Array(
	// Source, Width, Height, Caption
	new Array("IMG_0470.jpg", "600", "450", "Cycling from Telluride to Moab"),
	new Array("IMG_2441.jpg", "582", "350", "Mt. Toll as seen from the slopes of Mt. Audubon"),
	new Array("IMG_2449.jpg", "600", "300", "Taking flight from the summit of Paiute"),
	new Array("IMG_0677.jpg", "650", "488", "Plodding up Queen's Way Couloir on Apache"),
	new Array("P3220073.jpg", "600", "400", "A storm brews in the distance (Red Rocks, NV)")
	);

Je ne sais pas si l'on peut ajouter du code via un formulaire avec javascript. Dans me formulaire je marquerais le nom de l'image, la hauteur, la largeur et le commentaire.

Merci de m'indiquer la marche à suivre.

Salutations
Twiners 13

TrexXx

5 août 2009 à 23:10:55

Je ne comprends pas vraiment ce que tu veux faire. Pourrais-tu préciser ou réexpliquer ?

Twiners 13

5 août 2009 à 23:19:50

Partie Visiteur :

içi

Partie administration :

- formulaire d'envoi du fichier
- nom de l'image (possibilité d'automatiser en reprenant le nom de l'image avec l'extension la photo ?)
- hauteur (possibilité d'automatiser en reprenant la hauteur de la photo ?)
- largeur (possibilité d'automatiser en reprenant la largeur de la photo ?)
- formulaire pour un commentaire

Action du formulaire sur...

- envoi du fichier sur le serveur
- ajout d'un nouveau champ avec les données du formulaire.

var photoArray = new Array(
	// Source, Width, Height, Caption
	new Array("IMG_0470.jpg", "600", "450", "Cycling from Telluride to Moab"),
	new Array("IMG_2441.jpg", "582", "350", "Mt. Toll as seen from the slopes of Mt. Audubon"),
	new Array("IMG_2449.jpg", "600", "300", "Taking flight from the summit of Paiute"),
	new Array("IMG_0677.jpg", "650", "488", "Plodding up Queen's Way Couloir on Apache"),
	new Array("P3220073.jpg", "600", "400", "A storm brews in the distance (Red Rocks, NV)")
	);

Voilà j'espère que ca sera plus clair

Twiners 13

TrexXx

5 août 2009 à 23:28:24

Si j'ai bien compris tu veux donc que ton tableau JS, où sont stockée les images que tu dois afficher, soit construit en fonction des différentes images que tu auras uploadées et qui donc seront stockées dans ta base de données.
Si c'est bien le cas je pense qu'il te faudra utiliser AJAX pour faire le lien entre la BDD (en PHP, ou autre langage serveur) et JS.

Twiners 13

5 août 2009 à 23:31:40

oui c'est ca que je veux faire mais je n'ai aucune connaissances en javascript donc je ne sais pas non plus AJAX.

Est ce que c'est un gros code à faire ?
L'automatisation dont j'ai parlé est t'elle possible ?

Golmote

6 août 2009 à 3:14:25

Pas forcément besoin d'Ajax.

Je suppose que les données envoyées via le formulaire sont stockées dans une BDD.

A partir de là, il te suffit d'écrire ton JS personnalisé grâce à PHP. Tu vois l'idée ?

TrexXx

6 août 2009 à 9:11:19

Oui c'est vrai j'avais pas pensé à ça, tu peux écrire le JS en PHP !

Twiners 13

6 août 2009 à 13:04:29

salut,

j'ai fait ça mais ça na pas l'air de marcher :

<?php
	   mysql_connect("", "", "");
       mysql_select_db("");
	
	   $affichage_photos = mysql_query('SELECT * FROM photos WHERE section=1');
	   
	   while ($photos = mysql_fetch_array($affichage_photos) )
{
    ?>	
	new Array("<?php echo stripslashes($photos['nom_photo']); ?>", "<?php echo stripslashes($photos['hauteur']); ?>", "<?php echo stripslashes($photos['largeur']); ?>", "<?php echo stripslashes($photos['commentaire']); ?>"),
<?php
}
mysql_close();
?>
	
	new Array("IMG_0470.jpg", "600", "450", "Cycling from Telluride to Moab"),
	new Array("IMG_2441.jpg", "582", "350", "Mt. Toll as seen from the slopes of Mt. Audubon"),
	new Array("IMG_2449.jpg", "600", "300", "Taking flight from the summit of Paiute"),
	new Array("IMG_0677.jpg", "650", "488", "Plodding up Queen's Way Couloir on Apache"),
	new Array("P3220073.jpg", "600", "400", "A storm brews in the distance (Red Rocks, NV)")
	);

Le problème c'est que je sais pas inclure du php dans du javascript.

Twiners 13

Golmote

6 août 2009 à 13:26:43

Montre le HTML généré (le code source de la page dans le navigateur) : les erreurs apparaîtront surement plus clairement.

Twiners 13

6 août 2009 à 13:38:08

voilà

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Club Nautique Marignanais</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="icon" type="image/png" href="/design/images/logohaut.png" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="/design/voile.css" />

		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Language" content="fr" />
		
		<title>Couloir.org: Resizing, Fading Slideshow Demo (November 28, 2005)</title>

		
		<meta name="ROBOTS" content="ALL" />
		<meta http-equiv="imagetoolbar" content="no" />
		<meta name="MSSmartTagsPreventParsing" content="true" />
		
				<!-- scriptaculous -->
		<script type="text/javascript" src="js/prototype.js"></script>
		<script type="text/javascript" src="js/scriptaculous.js"></script>
		<script type="text/javascript" src="js/behaviour.js"></script>

		<script type="text/javascript" src="js/soundmanager.js"></script>
		<script type="text/javascript" src="js/slideshow.js"></script>
		
		<link rel="stylesheet" href="css/master.css?nov282005" type="text/css" media="screen" />
</head>
<body>

<center>

<table id="table_corps" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td id="one" colspan="1" rowspan="4"></td>

      <td id="two" colspan="2" rowspan="1"></td>
      <td id="three" colspan="1" rowspan="4"></td>     
    </tr>
    <tr>
      <td id="four" colspan="2" rowspan="1">

<center>
Bienvenue twiners13 !<a href="/espace_members.php">      l Espace Membre     l           </a>
<a href="/mp.php">       Messagerie Privée     l           </a>

<a href='/deconnexion.php?deconnection=1'>déconnexion l</a> </center>
      </td>
    <tr>
      <td id="five" valign="top">

<table id="table_menu" border="0" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
 <td id="boutton_menu">

<a href="/index.php">Accueil</a>
      </td> 
	  </tr>
<tr>	       <td id="boutton_menu">
<a href="/sections.php">Les sections</a>
      </td>
    </tr>
<tr>	       <td id="boutton_menu_sections">
<a href="/catamaran/catamaran.php">Catamaran</a>

      </td>
    </tr>
<tr>	       <td id="boutton_menu_sections">
<a href="/deriveur/deriveur.php">Dériveur</a>
      </td>
    </tr>
<tr>	       <td id="boutton_menu_sections">
<a href="/funboard/fun_board.php">Fun Board</a>
      </td>

    </tr>
<tr>	       <td id="boutton_menu_sections">
<a href="/optimist/optimist.php">Optimist</a>
      </td>
    </tr>
<tr>	       <td id="boutton_menu_sections">
<a href="/planche/planche_a_voile.php">Planche à voile</a>
      </td>
    </tr>

<tr>	       <td id="boutton_menu">
<a href="/forum/index.php">Forum</a>
      </td>
    </tr>
	<tr>	       <td id="boutton_menu">
<a href="/livre_d_or.php">Livre d'or</a>
      </td>
    </tr>

	
	<tr>	       <td id="boutton_menu">
<a href="/liens-utiles.php">Liens utiles</a>
      </td>
    </tr>
	
	<tr>	       <td id="boutton_menu">
<a href="/contact.php">Contact</a>
      </td>
    </tr>

	
  </tbody>
</table>
      </td>
      <td> 
<center>

<p>
Bienvenue dans la section Catamaran !<br/><br/>

</p>

<!-- slideshow -->
		<div id="Masthead">&nbsp;</div>

		<div id="OuterContainer">
			<div id="Container">
				<img id="Photo" src="img/c.gif" alt="Photo: Couloir" />
				<div id="LinkContainer">
				    <a href="#" id="PrevLink" title="Previous Photo"><span>Previous</span></a>
				    <a href="#" id="NextLink" title="Next Photo"><span>Next</span></a>
			    </div>
			    <div id="Loading"><img src="img/loading_animated2.gif" width="48" height="47" alt="Loading..." /></div>

			</div>
		</div>
		
		<div id="CaptionContainer">
		    <p><span id="Counter">&nbsp;</span> <span id="Caption">&nbsp;</span></p>
		</div>
		
		<script type="text/javascript">
 		// <![CDATA[
 		Behaviour.register(myrules);
 		// ]]>
 		</script>
<br/><br/>
 </center>

	  </td>
    </tr>
    <tr>
      <td colspan="2" rowspan="1" id="foot"><center>
<small><small>
&#0169; CopyRight 2008-2009 | 
<a href="/administration/connexion.php" target="_blanck">Administration</a> | 
<script language="JavaScript" src="http://sitexw.free.fr/domaine.js"></script>
</small></small>

	  <br/><br/><small><small>Nous sommes le 06/08/2009 et il est exactement 13 h 32 .</small></small>      </center></td>
    </tr>
    <tr>
      <td id="deg_angle_gauche" colspan="1" rowspan="1"> </td>
      <td id="deg_bas" colspan="2" rowspan="1"> </td>
      <td id="deg_angle_droit" colspan="1" rowspan="1"> </td>

    </tr>
</table>

</center>

</body>
</html>

Golmote

6 août 2009 à 16:46:28

Euh... où est le JS avec les new Array() machin ? o_O

Twiners 13

6 août 2009 à 17:03:54

je t'ai envoyé mon adresse msn ca sera plus simple pour se parler

Golmote

6 août 2009 à 17:18:10

Bah non... J'ai aucune envie d'ouvrir MSN (que je n'utilise jamais) juste pour t'aider à résoudre ce problème.

La résolution de ce problème a entièrement sa place sur le forum.

Je crois donc comprendre que tu as mis ton PHP directement dans le fichier JS (externe).

Si tu fais ça, je crois qu'il faut que tu mettes l'extension .php et le header adapté. (si quelqu'un peut confirmer ? :euh:

)

Twiners 13

6 août 2009 à 17:29:35

j'ai fait mit l'extension .php et j'ai entouré de balises script mais ca marche toujours pas. Je remets le code source dessous:

<script type="text/javascript">

// -----------------------------------------------------------------------------------
// 
// This page coded by Scott Upton
// http://www.uptonic.com | http://www.couloir.org
//
// This work is licensed under a Creative Commons License
// Attribution-ShareAlike 2.0
// http://creativecommons.org/licenses/by-sa/2.0/
//
// Associated APIs copyright their respective owners
//
// -----------------------------------------------------------------------------------
// --- version date: 11/28/05 --------------------------------------------------------


// get current photo id from URL
var thisURL = document.location.href;
var splitURL = thisURL.split("#");
var photoId = splitURL[1] - 1;

// if no photoId supplied then set default
var photoId = (!photoId)? 0 : photoId;

// CSS border size x 2
var borderSize = 10;

// Photo directory for this gallery
var photoDir = "photos/01/";

// Define each photo's name, height, width, and caption
var photoArray = new Array(
	// Source, Width, Height, Caption
	
	<?php 
	   mysql_connect("", "", "");
       mysql_select_db("");
	
	   $affichage_photos = mysql_query('SELECT * FROM photos WHERE section=1');
	   
	   while ($photos = mysql_fetch_array($affichage_photos) )
{
    ?>	
	new Array("<?php echo stripslashes($photos['nom_photo']); ?>", "<?php echo stripslashes($photos['hauteur']); ?>", "<?php echo stripslashes($photos['largeur']); ?>", "<?php echo stripslashes($photos['commentaire']); ?>"),
<?php
}
mysql_close();
?>
	
	new Array("IMG_0470.jpg", "600", "450", "Cycling from Telluride to Moab"),
	new Array("IMG_2441.jpg", "582", "350", "Mt. Toll as seen from the slopes of Mt. Audubon"),
	new Array("IMG_2449.jpg", "600", "300", "Taking flight from the summit of Paiute"),
	new Array("IMG_0677.jpg", "650", "488", "Plodding up Queen's Way Couloir on Apache"),
	new Array("P3220073.jpg", "600", "400", "A storm brews in the distance (Red Rocks, NV)")
	);

// Number of photos in this gallery
var photoNum = photoArray.length;

/*--------------------------------------------------------------------------*/

// Additional methods for Element added by SU, Couloir
Object.extend(Element, {
	getWidth: function(element) {
   	element = $(element);
   	return element.offsetWidth; 
	},
	setWidth: function(element,w) {
   	element = $(element);
    	element.style.width = w +"px";
	},
	setHeight: function(element,h) {
   	element = $(element);
    	element.style.height = h +"px";
	},
	setSrc: function(element,src) {
    	element = $(element);
    	element.src = src; 
	},
	setHref: function(element,href) {
    	element = $(element);
    	element.href = href; 
	},
	setInnerHTML: function(element,content) {
		element = $(element);
		element.innerHTML = content;
	}
});

/*--------------------------------------------------------------------------*/

var Slideshow = Class.create();

Slideshow.prototype = {
	initialize: function(photoId) {
		this.photoId = photoId;
		this.photo = 'Photo';
		this.photoBox = 'Container';
		this.prevLink = 'PrevLink';
		this.nextLink = 'NextLink';
		this.captionBox = 'CaptionContainer';
		this.caption = 'Caption';
		this.counter = 'Counter';
		this.loader = 'Loading';
	},
	getCurrentSize: function() {
		// Get current height and width, subtracting CSS border size
		this.wCur = Element.getWidth(this.photoBox) - borderSize;
		this.hCur = Element.getHeight(this.photoBox) - borderSize;
	},
	getNewSize: function() {
		// Get current height and width
		this.wNew = photoArray[photoId][1];
		this.hNew = photoArray[photoId][2];
	},
	getScaleFactor: function() {
		this.getCurrentSize();
		this.getNewSize();
		// Scalars based on change from old to new
		this.xScale = (this.wNew / this.wCur) * 100;
		this.yScale = (this.hNew / this.hCur) * 100;
	},
	setNewPhotoParams: function() {
		// Set source of new image
		Element.setSrc(this.photo,photoDir + photoArray[photoId][0]);
		// Set anchor for bookmarking
		Element.setHref(this.prevLink, "#" + (photoId+1));
		Element.setHref(this.nextLink, "#" + (photoId+1));
	},
	setPhotoCaption: function() {
		// Add caption from gallery array
		Element.setInnerHTML(this.caption,photoArray[photoId][3]);
		Element.setInnerHTML(this.counter,((photoId+1)+'/'+photoNum));
	},
	resizePhotoBox: function() {
		this.getScaleFactor();
		new Effect.Scale(this.photoBox, this.yScale, {scaleX: false, duration: 0.3, queue: 'front'});
		new Effect.Scale(this.photoBox, this.xScale, {scaleY: false, delay: 0.5, duration: 0.3});
		// Dynamically resize caption box as well
		Element.setWidth(this.captionBox,this.wNew-(-borderSize));
	},
	showPhoto: function(){
		new Effect.Fade(this.loader, {delay: 0.5, duration: 0.3});
		// Workaround for problems calling object method "afterFinish"
		new Effect.Appear(this.photo, {duration: 0.5, queue: 'end', afterFinish: function(){Element.show('CaptionContainer');Element.show('PrevLink');Element.show('NextLink');}});
	},
	nextPhoto: function(){
		// Figure out which photo is next
		(photoId == (photoArray.length - 1)) ? photoId = 0 : photoId++;
		this.initSwap();
	},
	prevPhoto: function(){
		// Figure out which photo is previous
		(photoId == 0) ? photoId = photoArray.length - 1 : photoId--;
		this.initSwap();
	},
	initSwap: function() {
		// Begin by hiding main elements
		Element.show(this.loader);
		Element.hide(this.photo);
		Element.hide(this.captionBox);
		Element.hide(this.prevLink);
		Element.hide(this.nextLink);
		// Set new dimensions and source, then resize
		this.setNewPhotoParams();
		this.resizePhotoBox();
		this.setPhotoCaption();
	}
}

/*--------------------------------------------------------------------------*/

// Establish CSS-driven events via Behaviour script
var myrules = {
	'#Photo' : function(element){
		element.onload = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.showPhoto();
		}
	},
	'#PrevLink' : function(element){
		element.onmouseover = function(){
			soundManager.play('beep');
		}
		element.onclick = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.prevPhoto();
			soundManager.play('select');
		}
	},
	'#NextLink' : function(element){
		element.onmouseover = function(){
			soundManager.play('beep');
		}
		element.onclick = function(){
			var myPhoto = new Slideshow(photoId);
			myPhoto.nextPhoto();
			soundManager.play('select');
		}
	},
	a : function(element){
		element.onfocus = function(){
			this.blur();
		}
	}
};

// Add window.onload event to initialize
Behaviour.addLoadEvent(init);
Behaviour.apply();
function init() {
	var myPhoto = new Slideshow(photoId);
	myPhoto.initSwap();
	soundManagerInit();
}

</script>

Cette partie est inclut grâce à ce bout de code :

<script type="text/javascript" src="js/slideshow.php"></script>

Voila tout le code de la page où il y a cette ligne:

<?php session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Club Nautique Marignanais</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="icon" type="image/png" href="/design/images/logohaut.png" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="/design/voile.css" />

		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Language" content="fr" />
		
		<title>Couloir.org: Resizing, Fading Slideshow Demo (November 28, 2005)</title>
		
		<meta name="ROBOTS" content="ALL" />
		<meta http-equiv="imagetoolbar" content="no" />
		<meta name="MSSmartTagsPreventParsing" content="true" />
		
				<!-- scriptaculous -->
		<script type="text/javascript" src="js/prototype.js"></script>
		<script type="text/javascript" src="js/scriptaculous.js"></script>
		<script type="text/javascript" src="js/behaviour.js"></script>
		<script type="text/javascript" src="js/soundmanager.js"></script>
		<script type="text/javascript" src="js/slideshow.php"></script>
		
		<link rel="stylesheet" href="css/master.css?nov282005" type="text/css" media="screen" />
</head>
<body>

<center>

<table id="table_corps" border="0" cellpadding="0" cellspacing="0">
    <tr>
<?php
include("includes/haut.php");
?>     
    </tr>
    <tr>
      <td id="four" colspan="2" rowspan="1">

<?php
include("includes/speedbarre.php");
?>

      </td>
    <tr>
      <td id="five" valign="top">

<?php
include("includes/menu.php");
?>

      </td>
      <td> 
<center>

<p>
Bienvenue dans la section Catamaran !<br/><br/>

</p>

<!-- slideshow -->
		<div id="Masthead">&nbsp;</div>
		<div id="OuterContainer">
			<div id="Container">
				<img id="Photo" src="img/c.gif" alt="Photo: Couloir" />
				<div id="LinkContainer">
				    <a href="#" id="PrevLink" title="Previous Photo"><span>Previous</span></a>
				    <a href="#" id="NextLink" title="Next Photo"><span>Next</span></a>
			    </div>
			    <div id="Loading"><img src="img/loading_animated2.gif" width="48" height="47" alt="Loading..." /></div>
			</div>
		</div>
		
		<div id="CaptionContainer">
		    <p><span id="Counter">&nbsp;</span> <span id="Caption">&nbsp;</span></p>
		</div>
		
		<script type="text/javascript">
 		// <![CDATA[
 		Behaviour.register(myrules);
 		// ]]>
 		</script>
<br/><br/>
 </center>
	  </td>
    </tr>
    <tr>
<?php
include("includes/bas.php");
?>

    </tr>
</table>

</center>

</body>
</html>

voilà j'espère être pas loin de la solution.
A+

Golmote

6 août 2009 à 19:21:17

Non, enlève les balises scripts et mets tout en haut du fichier... :

<?php
Header("content-type: application/x-javascript");
?>

xavierm02

6 août 2009 à 19:42:30

Citation : Golmote

(si quelqu'un peut confirmer ? )

Je confirme

Twiners 13

6 août 2009 à 21:44:04

merci beaucoup pour vos réponses, çà marche

.

j'ai encore une chose à vous demander

.

Est ce que ce code peut marcher ?

<?php     if ($section=="deriveur" AND in_array($extension_upload, $extensions_autorisees))
	   {
	     $section=2;
		move_uploaded_file($_FILES['monfichier']['tmp_name'], '../deriveur/photos/01/' . basename($_FILES['monfichier']['name']));
        echo "L'envoi a bien été effectué dans la section dériveur !";
	   }
?>

et plus particulierement sur cette section de code :

<?php move_uploaded_file($_FILES['monfichier']['tmp_name'], '../deriveur/photos/01/' . basename($_FILES['monfichier']['name']));
?>

Car en fait l'image n'est pas envoyé dans le dossier cible et en plus il n'y a aucune erreur.

Je vous explique en détail ce que je veux faire vous comprendrez mieux :

à la racine de mon serveur j'ai plusieurs dossiers dont le dossier "Administration" qui contient "traitement_photos.php" qui est chargé d'envoyé la photo sur le serveur et "Dériveur" le dossier qui contient ma page web qui affiche les photos. Je veux que "traitement_photos.php" aille enregistrer dans le dossier "Deriveur/photos/01" toutes les photos que j'envoie sur le serveur.

J'ai essayé la solution au dessus mais visiblement les photos que j'envoie ne s'enregistrent pas à cet endroit.

quel est le problème de mon code ?

salutations

Twiners 13

xavierm02

6 août 2009 à 21:59:10

On est sur le forum JS... -.-
Et pourquoi t'utilises basename() ?
Si tu l'utilisais sur le tmp_name, je comprendrais... (même si ça serait un peu bête)... mais là...

Et je mettrais bien la logne dans un if()...

Twiners 13

6 août 2009 à 22:39:57

désolé mais je ne connais pas javascript et en plus je n'ai pas très bien comprit ce que tu m'a dit.

Moi je veux simplement savoir d'où vient le problème dans la ligne de code que j'ai mis.

Je sais que c'est n'est plus du javascript mais comme c'est dans le suite de mon sujet, j'aimerais bien avoir ton aide pour finaliser cette partie du site.

salutations

Twiners 13

EDIT : j'ai suivit ce qu'il y a marqué dans le tutoriel php de mateo

EDIT 2 : j'ai trouvé une solution j'ai mis le fichier "traitement_photos.php" à la racine du site et non plus dans administration. Mais j'ai peur que çà crée des failes dans l'administration du site est ce que ce sera le cas ? est ce que vous avez une solution pour que le fichier "traitement_photos.php" reste dans le dossier "Administration" ?

Golmote

7 août 2009 à 2:56:53

Citation : xavierm02

Citation : Golmote

(si quelqu'un peut confirmer ? )

Je confirme

Merci