Page 1 sur 2
HELP : Upload d'image
Posté : 08 janv. 2020, 16:06
par CarlosAngeles
Bonjour !
Etant débutant en programmation, je vous demande de l'aide pour m'aiguiller sur mon problème.
Dans le cadre de mes études, je dois rendre un site internet codé en html, css et php. J'ai choisi de créer un site d'hébergement d'image. En gros, la personne upload l'image et celle-ci s'affiche dans la page d'accueil de mon site internet.
La partie html et css du site a été créée mais désormais je bloque sur la partie php, je ne sais pas comment m'y prendre, malgré le fait que j'ai regardé beaucoup de tutos mais ceci ne m'a pas aidé.
Je vous remercie d'avance pour vos réponses !
Code html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Ma galerie photo</title>
<!--FONTS-->
<link href="https://fons.googleapis.com/css?family=Amaranth" rel="stylesheet">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Upload une photo</a></li>
<li><a href="#">A propos</a></li>
</ul>
</nav>
</header>
<div class="mygallery">
<div class="column">
<img src="images/skate1.jpg">
<img src="images/skate4.jpg">
<img src="images/skate7.jpg">
<img src="images/skate10.jpg">
<img src="images/skate13.jpg">
<img src="images/skate16.jpg">
<img src="images/skate19.jpg">
<img src="images/skate22.jpg">
<img src="images/skate25.jpg">
<img src="images/skate28.jpg">
</div>
<div class="column">
<img src="images/skate2.jpg">
<img src="images/skate5.jpg">
<img src="images/skate8.jpg">
<img src="images/skate11.jpg">
<img src="images/skate14.jpg">
<img src="images/skate17.jpg">
<img src="images/skate20.jpg">
<img src="images/skate23.jpg">
<img src="images/skate26.jpg">
<img src="images/skate29.jpg">
</div>
<div class="column">
<img src="images/skate3.jpg">
<img src="images/skate6.jpg">
<img src="images/skate9.jpg">
<img src="images/skate12.jpg">
<img src="images/skate15.jpg">
<img src="images/skate18.jpg">
<img src="images/skate21.jpg">
<img src="images/skate24.jpg">
<img src="images/skate27.jpg">
<img src="images/skate30.jpg">
</div>
</div>
</body>
</html>
Code css :
html, body{
font-family: Verdana, Calibri, sans-serif;
margin: 0;
padding: 0px;
}
header{
width: 100%;
height: 60px;
color: #fff;
padding-top: 15px;
background-color: #34ace0;
font-size: 30px;
text-align: center;
font-family: 'Amaranth', sans-serif;
position: fixed;
top: 0;
z-index: 100000;
}
*{
margin: 0px;
padding: 0px;
font-family: Avenir, sans-serif;
}
nav{
width: 100%;
margin: 0px auto 40px auto;
background-color: white;
position: sticky;
top: 0px;
}
nav ul{
list-style-type: none;
}
nav li{
float: left;
width: 33.33%;
text-align: center;
}
nav ul::after{
content: "";
display: table;
clear: both;
}
nav a{
display: block;
text-decoration: none;
color: black;
border-bottom: 2px solid transparent;
padding: 10px 0px;/*Agrandit le menu et espace la bordure du texte*/
}
nav a:hover{
color: orange;
border-bottom: 2px solid gold;
}
.conteneur{
margin: 0px 20px;
height: 1500px;
}
.mygallery{
position: absolute;
top: 75px;
display: flex;
display: -ms-flexbox;
-ms-flex-wrap : wrap;
flex-wrap: wrap;
background-color: #34ace0
}
.column{
flex : 31.5%;
-ms-flex : 31.5;
max-width: 31.5%;
padding: 0 10px;
margin-top: 10px;
}
.column img{
width: 100%;
margin-top: 8px;
vertical-align: middle;
}
.column img:hover{
cursor: pointer;
-webkit-box-shadow: 0px 0px 5px 2px rgba(5,5,5,1);
-moz-box-shadow: 0px 0px 5px 2px rgba(5,5,5,1);
box-shadow: 0px 0px 5px 2px rgba(5,5,5,1);
}
@media screen and (max-width: 800px){
.column{
flex : 45%;
-ms-flex : 45%;
max-width: 45%;
padding: 0 10px;
}
}
@media screen and (max-width: 600px;){
.column{
flex : 100%;
-ms-flex : 100%;
max-width: 100%;
}
Re: HELP : Upload d'image
Posté : 08 janv. 2020, 16:08
par CarlosAngeles
Pour plus de détails, je code sur l'application SublimeText et j'héberge le serveur en local avec MAMP sur Mac
Re: HELP : Upload d'image
Posté : 08 janv. 2020, 16:22
par Saian
Salut, effectivement on dirait bien que tu es bloqué, pas une seule ligne de code php dans tout ça. ^^
As tu essayé d'en parler avec ton professeur de php ? avec un collègue étudiant ? par quoi veux tu commencer l'intégration php ? comment compte tu stocker les images ? l'utilisateur peut il se connecter au site ou le dépôt de fichier est il anonyme ? les images doivent elles être hébergées indéfiniment ou temporairement ? veux tu proposer un lien spécifique à chaque image ?
Essaie de répondre à toutes ces questions et prends les problèmes dans l'ordre et petit à petit tu devrais avancer.
Re: HELP : Upload d'image
Posté : 08 janv. 2020, 16:29
par CarlosAngeles
Salut, effectivement on dirait bien que tu es bloqué, pas une seule ligne de code php dans tout ça. ^^
Salut ! Alors pour répondre plus précisément à tes questions, je suis dans des études qui n'ont rien à voir avec l'informatique (d'où mon niveau haha) et du coup le professeur nous a donné cet exercice comme examen final et je n'ai plus de cours avec lui donc plus moyen de le contacter :/
Pour rentrer dans le vif du sujet, je compte stocker les images dans le dossier ou se trouve toutes mes lignes de codes (sous Mamp dans htdocs/site internet/images.
Ensuite il y aura un seul utilisateur (moi) puisque le site ne sera pas rendu public. Il n'aura donc pas besoin de se connecter, juste à cliquer sur l'onglet "Upload une image", uploader son image et cette dernière doit apparaître dans l'accueil.
Puis, les images doit être hébergées indéfiniment pour pas qu'elles ne disparaissent.
Pour finir, je n'ai pas très bien compris ta dernière question "veux tu proposer un lien spécifique à chaque image ?".
je te remercie pour ta réponse !
Re: HELP : Upload d'image
Posté : 08 janv. 2020, 16:35
par Saian
Et bien dans ce cas tu n'as qu'a faire une page d'upload.
https://www.google.com/search?q=php+upload+image
Et ensuite il te restera à passer ta page d'accueil en php pour y ajouter le code permettant d'afficher les images présentes dans le dossier.
https://www.google.com/search?q=php+dis ... rom+folder
Re: HELP : Upload d'image
Posté : 08 janv. 2020, 16:41
par CarlosAngeles
ok merci !
Dernière question : j'aimerais faire en sorte que quand j'upload une photo, elle se renomme automatique dans le dossier image en suivant le schéma suivant : skate1.jpg, skate2.jpg, skate3.jpg etc.. Est-ce que tu as une idée de comment faire?
Re: HELP : Upload d'image
Posté : 08 janv. 2020, 17:08
par Saian
Lors de l'upload d'un fichier, à un moment tu vas probablement utiliser la fonction move_uploaded_file avec laquelle tu peux nommer le fichier comme tu veux.
Si tu veux toujours mettre le même nom suivi d'une numérotation, il faudra alors que le script regarde combien il y a d'images dans le dossier pour déterminer à combien doit être la numérotation de la nouvelle image.
Re: HELP : Upload d'image
Posté : 08 janv. 2020, 17:40
par CarlosAngeles
Ok je vois, est-ce que tu as un lien d'un Tuto qui explique comment faire pour déterminer à combien doit être la numérotation de la nouvelle image? Je n'ai rien trouvé sur internet
Re: HELP : Upload d'image
Posté : 08 janv. 2020, 17:57
par Saian
Et bien déjà si tu es capable de faire une boucle pour afficher les images présentes dans le dossier, tu devrais être capable de faire une boucle afin de compter les fichiers. Tu sais c'est vraiment pas compliqué, ouverture du répertoire avec opendir, lecture avec readdir et filtrage des fichiers images et incrémentation d'un compteur. Y a rien de vraiment sorcier la dedans.
Vas y pas à pas, par exemple essaye déjà de lire le contenu du répertoire et afficher le nom de chaque fichier pour petit à petit comprendre comment fonctionne php.
PS : sinon une manière très simple :
$total = count(glob('skate*.jpg'));
$number = $total ? $total + 1 : 1;
Si les fichiers images sont dans le même répertoire que le script c'est bon comme ça, sinon il faut rajouter le chemin relatif vers le répertoire d'image au début du pattern ('images/skate*.jpg')
Re: HELP : Upload d'image
Posté : 08 janv. 2020, 18:40
par CarlosAngeles
Ok je retiens ça pour plus tard !
Pour le moment, j'ai réussi à créer mon formulaire d'upload d'image, qui télécharge bien la photo que j'upload dans un dossier "images". Maintenant le soucis est que, quand j'affiche mon uploader d'image sur ma page sans le CSS, il l'affiche bien, mais dès que je le relie au css pour designer mon menu il disparait. Je te montre en photo :
Sans le CSS
Avec le CSS
Re: HELP : Upload d'image
Posté : 08 janv. 2020, 18:52
par Saian
Et bien à priori quelque chose dans ta CSS perturbe le bon affichage de l'input. Utilises les outils de développement de ton navigateur (en particulier l'inspecteur) pour essayer de déterminer qu'est ce qui empêche son affichage (par exemple sélectionne l'input via le tree du DOM pour voir ou il est positionné et déterminer quel style pose problème).
Re: HELP : Upload d'image
Posté : 08 janv. 2020, 18:54
par CarlosAngeles
Ok je vais essayer merci!
Maintenant j'essaye d'insérer les lignes de codes suivantes
$total = count(glob('skate*.jpg'));
$number = $total ? $total + 1 : 1;
dans mon code mais je ne sais pas ou les mettre
Voici mon code fileupload.php
<?php
echo $uploadPath;
$currentDir = getcwd();
$uploadDirectory = "tuto3";
$errors = []; // Store all foreseen and unforseen errors here
$fileExtensions = ['jpeg','jpg','png']; // Get all the file extensions
$fileName = $_FILES['myfile']['name'];
$fileSize = $_FILES['myfile']['size'];
$fileTmpName = $_FILES['myfile']['tmp_name'];
$fileType = $_FILES['myfile']['type'];
$fileExtension = strtolower(end(explode('.',$fileName)));
$uploadPath = $currentDir . $uploadDirectory . basename($fileName);
if (isset($_POST['submit'])) {
if (! in_array($fileExtension,$fileExtensions)) {
$errors[] = "This file extension is not allowed. Please upload a JPEG or PNG file";
}
if ($fileSize > 2000000) {
$errors[] = "This file is more than 2MB. Sorry, it has to be less than or equal to 2MB";
}
if (empty($errors)) {
$didUpload = move_uploaded_file($fileTmpName, $uploadPath);
if ($didUpload) {
echo "The file " . basename($fileName) . " has been uploaded";
} else {
echo "An error occurred somewhere. Try again or contact the admin";
}
} else {
foreach ($errors as $error) {
echo $error . "These are the errors" . "\n";
}
}
}
?>
PS : j'ai trouvé où mon formulaire était bloqué, il est tout en haut à gauche de ma page donc il faudrait simplement que je centre mon formulaire mais je n'ai pas trouvé comment faire via le CSS
Re: HELP : Upload d'image
Posté : 08 janv. 2020, 19:02
par Saian
Tu déplaces le fichier uploadé dans le répertoire final grâce à la fonction move_uploaded_file ici :
$didUpload = move_uploaded_file($fileTmpName, $uploadPath);
La destination du fichier est le deuxième paramètre, ici $uploadPath. Cette variable est défini ici :
$uploadPath = $currentDir . $uploadDirectory . basename($fileName);
Tu dois donc générer le numéro juste avant de définir cette variable. $currentDir et $uploadDirectory concernent le répertoire de destination et le nom du fichier est basename($fileName).
Toi tu veux nommer tous les fichiers skate{number}.jpg. Donc tu vas faire un :
$uploadPath = $currentDir . $uploadDirectory . 'skate'.$number.'.jpg';
ATTENTION ce code ne fonctionnera que tant que tu uploaderas des fichiers jpg. Si tu veux supporter d'autres formats de fichier il faudra alors aussi prendre en compte l'extension du fichier qui dans mon exemple est mis en dur à .jpg.
Re: HELP : Upload d'image
Posté : 08 janv. 2020, 19:07
par CarlosAngeles
Ca marche, dans tout les cas je ne veux uploader que des fichiers jpg pour l'instant, mais ma grande question est, où je dois insérer ces lignes dans mon code (au milieu, au début..
).
(Désolé de te déranger en tout cas mais je débute dans le milieu
)
Re: HELP : Upload d'image
Posté : 08 janv. 2020, 19:13
par Saian
où je dois insérer ces lignes dans mon code
Comme je t'ai dit : "Tu dois donc générer le numéro juste avant de définir cette variable" ($uploadPath).
Pour tes problèmes de CSS tu peux jouer avec les styles dans l'inspecteur. Ajouter des propriétés en désactiver, etc. La comme ça au feeling d'après ce que tu me dis, en haut à gauche (caché derrière un élément) je pense que la balise avant ton input doit être en float et du coup l'input se retrouve derrière, classique. Si c'est bien le cas il faudrait mettre un clear: both; sur l'input.
