connecté
Bonjour a tous,
je viens de commencer le dev pour intégrer une formation en septembre, je dois réaliser une page d’accueil pour les inscriptions a cette formation. Avant de poser ma question, je vous demande pas de me mâcher le boulot. Je voudrais que l'on m'aide simplement a m'orienter sur les bonnes lignes de codes que je puissent configurer par moi même la page du site.

Ma question est donc:
Je dois mettre en page horizontalement 3 grandes idées suivis d'un petit texte explicatif, mais impossible de faire ce que je voudrai, par quelle commande puis je réaliser ce type de mise en page?
J'ai présenter mes 3 idées de la sorte:

  <section id="perfo">
      <h2>Performances</h2>
      <!-- TODO: En utilisant du css place ces trois performances ("lough", "dream, "marvel at") sur la même ligne en enlevant le point généré par la balise "li". Attention, utilise bien le css pour aligner les éléments, tu ne dois pas enlever les balises "li"-->
      <ul>
        <!-- performance 1 -->
        <li>
    <div class="Laugh">       
            <h3>Laugh</h3>
            <p>As an adult, come and discover our irresistible clowns, between practical jokes and pranks let yourself be carried away by their joy and fall back into childhood.</p>
         </li>
        </div>
        <!-- performance 2 -->
         <li>
           <div class="Dream">
            <h3>Dream</h3>
            <p>Let yourself be carried away in a world where the real and the imaginary are one, in the company of our talented magicians, discover a wonderful world limited only by your imagination.</p>
         </li>
           </div>
         <!-- performance 3 -->
         <li>
           <div class="Marvel">
            <h3>Marvel at</h3>
            <p>Tame the untameable in the company of our tamers, between roar and razor-sharp claws, watch these fierce felines turn into sweet kittens.</p>
         </li>
  </div>
      </ul>
    </section>

    <hr/>



J'ai eu l'idée de créer un block principal pour y intégrer mes 3 autres blocks de cette manière avec le css:



.perfo{
  display: block;
  width: 100%;    
}
.Laugh {
  display: block;
    width: 30%;
  float: left;
}
.Dream{
  display: block;
  width: 30%;
  text-align: center; 
}
.Marvel{
  display: block;
  width: 30%;
  float: right;  
}


J'ai essayer pas mal de choses mais qui me demandais de supprimer des lignes du htlm de base ce que je ne dois pas faire normalement. Pouvez m'aiguillez sur la direction a prendre pour ce genre de chose s'il vous plait je bûche un peu malgré les cours sur le web. Smiley biggol
salut, normalement oui.

j'ai encore modifié un peu le code https://jsfiddle.net/tankarasu/5kb9jody/48/

la pas de problème avec l'option quitter si la valeur entrée est vide sauf que maintenant si je rentre une string il quitte aussi alors qu'il devrait redemander un nombre valide. Je sens à chaque fois que je suis proche de la solution mais il me manque qq chose pour cerner la logique à 100pcent.
Bonjour,

Je cherche a créer une application de réservations de chambres d'hôtels.
Voici le code actuel qui marche très bien.

Mais, car il y a un mais, j'aimerais que lorsque une chambre est déjà occupée, pour des dates déjà enregistrées elle ne puisse plus être réservée pour ces dates et que la réservation se fasse sur une autre chambre du même hôtel pour ces mêmes dates.
J'aimerais pour cela effectuer un filtrage en fonction des dates, mais après plusieurs essais infructueux je ne sais pas comment procéder pour y arriver.

Tables:
bookings
id | client_id | arrival_date | departure_date | booking_date | room_id

clients
id | name | email

resorts
id | name | address
-------------------
1 | hotel A | adresse A
-------------------
2 | hotel B | adresse B
------------------
3 | hotel C | adresse C
------------------
4 | hotel D | adresse D

rooms
id | resort_id | number
-------------------------
1 | 1 | 1
-------------------------
2 | 1 | 2
-------------------------
3 | 2 | 3
-------------------------
4 | 2 | 4
-------------------------
5 | 3 | 5
-------------------------
6 | 3 | 6
-------------------------
7 | 4 | 7
-------------------------
8 | 4 | 8

index.php

<?php
require('Class/Client.php');
require('Class/Clientmanager.php');

require('Class/Booking.php');
require('Class/Bookingmanager.php');

if (isset($_POST['submitForm'])) 
{
	////////////////////////////////////////////////////////////////////////////////////////////////////
	///////////////                           insertion client                          ////////////////
	////////////////////////////////////////////////////////////////////////////////////////////////////

	$name = $_POST['name'];
	$email = $_POST['email'];
	$client_data = array('name' => $name,'email' => $email);
	$client = new Client($client_data);
	$db = new PDO('mysql:host=localhost;dbname=booking;charset=UTF8', 'root', '');
	$clientManager = new clientManager($db);
	$client_id = $clientManager->addclient($client);

	////////////////////////////////////////////////////////////////////////////////////////////////////
	///////////////                           get rooms by resort id 			        ////////////////
	////////////////////////////////////////////////////////////////////////////////////////////////////

	$arrival = $_POST['arrival'];
	$departure = $_POST['departure'];
	$booking_data = array('client_id' => (int) $client_id);
	$booking = new Booking($booking_data);
	$bookingManager = new bookingManager($db);
	$resort_id = $bookingManager->getRoomsByResortid($booking);
	var_dump($resort_id);

	$addClient = $bookingManager->addBooking($booking);

	

}
?>

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>Accueil</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id="wrapper">
		<h1>Booking Application</h1>
		<nav class="main-nav" role="navigation">
			<ul>
				<li><a href="index.php" role="menuitem">Accueil</a></li>
				<li><a href="resorts.php" role="menuitem">Hôtels</a></li>
			</ul>	
		</nav>

		<section>
			<div class="formulaire">
				<?php if(isset($error_msg)) : ?>	
				<p class="error_msg"><?php echo $error_msg ?></p>
				<?php endif ?>

				<?php if(isset($success_msg)) : ?>	
				<p class="success_msg">
					<?php echo $success_msg ?></p>
				<?php endif ?>

				<form method="post" action="index.php">
					<h2>Réservez votre hôtel</h2>
					<p>
						Votre nom: <input type="text" name="name" value="<?php $name ?>" placeholder="Nom">
					</p>

					<p>
						Votre email: <input type="email" name="email" value="<?php $email ?>" placeholder="votre@mail">
					</p>

					<p>
						Votre hôtel:<select name="resort">
										<option value=""></option>
										<?php 
											$resorts = array(1 => 'Atlantis The Palm, Dubaï 5*', 'Burj Al Arab, Dubaï 7*', 'Krabi La Playa, Thaïlande 4*', 'Four Seasons, Bora Bora 4*', 'Atlantis Paradise Island, Bahamas 4*');
											foreach ($resorts as $resort_id => $resort) 
											{
												echo '<option value="'.$resort_id.'">' .$resort. '</option>';
											}

										?>
									</select>
						
					</p>

					<p>
						Du: <input class="mr-30" type="date" name="arrival" value="">
						Au: <input class="mr-30" type="date" name="departure" value="">
					</p>

					<p>
						<?php $today = date("Y-m-d") ?>
						<input type="hidden" name="bookingCreation" value="<?php echo $today ?>" >
					</p>

					<p>
						<input class="submit-bt" type="submit" name="submitForm" value="Réserver">
					</p>
					
					
				</form>
			</div>
		</section>
	</div>
</body>
</html>


Client.php

<?php

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////                                                                           ///////////////////////
///////////////                             CLIENT                                        ///////////////////////
///////////////                                                                           ///////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////

class Client
{
	private $_name;
	private $email;

	public function __construct(array  $client_data)
	{
		$this->setName($client_data['name']);
		$this->setEmail($client_data['email']);
	}

	////////////////////////////////////////////////////////////////////////////////////////////////////
	///////////////                           setters                                   ////////////////
	////////////////////////////////////////////////////////////////////////////////////////////////////

	public function setName($name)
	{
		$this->_name = $name;
	}

	public function setEmail($email)
	{
		$this->_email = $email;
	}

	////////////////////////////////////////////////////////////////////////////////////////////////////
	///////////////                           getters                                   ////////////////
	////////////////////////////////////////////////////////////////////////////////////////////////////

	public function getName()
	{
		return $this->_name;
	}

	public function getEmail()
	{
		return $this->_email;
	}
}
?>


Clientmanager.php

<?php

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////                                                                           ///////////////////////
///////////////                           CLIENT MANAGER                                  ///////////////////////
///////////////                                                                           ///////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Class clientManager
{
	private $_db;

	public function __construct($db)
	{
		$this->setDb($db);
	}

	public function setDb(PDO $dbh)
	{
		$this->_db = $dbh;
	}

	////////////////////////////////////////////////////////////////////////////////////////////////////
	///////////////                           insertion client                          ////////////////
	////////////////////////////////////////////////////////////////////////////////////////////////////

	public function addClient(Client $client)
	{
		$sql = 'INSERT INTO clients (name, email) VALUES (:name, :email)';
		$stmnt = $this->_db->prepare($sql);
		$name = trim($client->getName());
		$email = trim($client->getEmail());
		$stmnt->bindParam(':name', $name);
		$stmnt->bindParam(':email', $email);
		if ($stmnt->execute()) 
		{
			return $this->_db->lastInsertId();
		}
		return false;

		//gestion des erreurs
		$errors = $stmnt->errorInfo();
		if ($errors[0] != '00000') 
		{
			echo 'Erreur SQl ' . $errors[2];
		}
		else
		{
			$success_msg = 'Le nom ' .$name. ' et l\'email ' .$email. ' ont bien été enregistrés en base de données';
		}
	}
}
?>


Booking.php

<?php

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////                                                                           ///////////////////////
///////////////                               BOOKING                                     ///////////////////////
///////////////                                                                           ///////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////

class Booking
{
	private $_client_id;
	private $_arrival_date;
	private $_departure_date;
	private $_today;
	private $_room_id;

	public function __construct(array $booking_data)
	{
		$this->setClientId($booking_data['client_id']);
		$this->setArrivalDate();
		$this->setDepartureDate();
		$this->setToday();
		$this->setRoomId();

	}

	////////////////////////////////////////////////////////////////////////////////////////////////////
	///////////////                           setters                                   ////////////////
	////////////////////////////////////////////////////////////////////////////////////////////////////

	public function setClientId($client_id)
	{
		if ((is_int($client_id)) && $client_id > 0) 
		{
			$this->_client_id = $client_id;
		}
	}

	public function setArrivalDate()
	{
		$arrival = $_POST['arrival'];
		$this->_arrival_date = $arrival;
	}

	public function setDepartureDate()
	{
		$departure = $_POST['departure'];
		$this->_departure_date = $departure;
	}

	public function setToday()
	{
		$today = date("Y-m-d"); 
		$this->_today = $today;
	}

	public function setRoomId()
	{
		try
		{
			$dbh = new PDO('mysql:host=localhost;dbname=booking;charset=UTF8', 'root', '');
		}
		catch(Exception $e)
		{
			echo 'Message d\'erreur SQL ' .$e->getMessage(). '<br>';
			exit;
		}


		$resort_id = trim($_POST['resort']);
		$sql= 'SELECT number FROM rooms as o 
			   INNER JOIN resorts as r 
			   ON r.id = o.resort_id
			   WHERE r.id = "'.$resort_id.'"';
		$stmnt = $dbh->prepare($sql);
		$stmnt->execute();
		$result = $stmnt->fetchAll();
		$room_id = $result[(array_rand($result))]['number'];
		$this->_room_id = $room_id;
	}

	////////////////////////////////////////////////////////////////////////////////////////////////////
	///////////////                           getters                                   ////////////////
	////////////////////////////////////////////////////////////////////////////////////////////////////

	public function getClientId()
	{
		return $this->_client_id;
	}

	public function getArrivalDate()
	{
		return $this->_arrival_date;
	}

	public function getDepartureDate()
	{
		return $this->_departure_date;
	}

	public function getToday()
	{
		return $this->_today;
	}

	public function getRoomId()
	{
		return $this->_room_id;
	}
}
?>


Bookingmanager.php

<?php

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////                                                                           ///////////////////////
///////////////                             BOOKING MANAGER                               ///////////////////////
///////////////                                                                           ///////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////

class bookingManager
{
	private $_db;

	public function __construct($db)
	{
		$this->setDb($db);
	}

	public function setDb(PDO $dbh)
	{
		$this->_db = $dbh;
	}

	////////////////////////////////////////////////////////////////////////////////////////////////////
	///////////////                           Obtenir la liste des chambres 			////////////////
	///////////////                                 pour un hôtel                       ////////////////
	////////////////////////////////////////////////////////////////////////////////////////////////////

	public function getRoomsByResortid($resort_id)
	{
		$resort_id = $_POST['resort'];
		$sql = 'SELECT number, arrival_date, departure_date, room_id FROM rooms as o
				LEFT JOIN bookings as b on b.room_id = o.id
				INNER JOIN resorts as r on r.id = o.resort_id
				WHERE r.id = "'.$resort_id.'"';
		$stmnt = $this->_db->prepare($sql);
		$stmnt->execute();
		while ($row = $stmnt->fetch(PDO::FETCH_ASSOC)) 
		{
			$result[] = $row;
		}
		return $result;
		
	}

	////////////////////////////////////////////////////////////////////////////////////////////////////
	///////////////                           ajouter un client                         ////////////////
	////////////////////////////////////////////////////////////////////////////////////////////////////

	public function addBooking(Booking $booking)
	{
		$arrival = $_POST['arrival'];
		$sql = 'INSERT INTO bookings (client_id, arrival_date, departure_date, booking_date, room_id)
				VALUES (:client_id, :arrival, :departure, :today, :room_id)';
		$stmnt = $this->_db->prepare($sql);
		$clientId = $booking->getClientId();
		$arrival = $booking->getArrivalDate();
		$departure = $booking-> getDepartureDate();
		$today = $booking->getToday();
		$roomId = $booking->getRoomId();
		$stmnt->bindParam('client_id', $clientId);
		$stmnt->bindParam('arrival', $arrival);
		$stmnt->bindParam('departure', $departure);
		$stmnt->bindParam('today', $today);
		$stmnt->bindParam('room_id', $roomId);
		$stmnt->execute();

		//gestion des erreurs
		$errors = $stmnt->errorInfo();
		if ($errors[0] != '00000') 
		{
			echo 'Erreur SQL ' . $errors[2];
		}
		else
		{
			$success_msg = 'Les données ont bien été enregistrées en base de données';
		}
	}
}
?>


D'avance merci à ceux qui prendront le temps de m'aider
Salut,
Je cherche à créer un message d'erreur et redemander la saisie lorsque l'heure sélectionnée par l'utilisateur est < 2h (par rapport à l'heure actuelle). L'heure choisie par l'utilisateur doit être au minimum 2 heures plus tard que celle de la saisie. Pouvez-vous m'aider ? Merci d'avance.


<!-- HEURE -->

					<input type="time" name="Datetimepicker2" id="Datetimepicker2">
							<script>

								jQuery('#Datetimepicker2').datetimepicker({
 								datepicker:false,
 								format: 'H:i',
 								inline:true,
 								
 								step:15,
 								minTime:'7:00',//7h00=minimum time
 								maxTime:'21:30'//21h00=maximum time
								});
							
								$timevalue = (isset($_POST['Datetimepicker2'])) ? $_POST['Datetimepicker2'] : '';
							
							</script>

Modifié par gpazzi (24 Jul 2019 - 02:30)
THIRT05 a écrit :

....
Qu'entendez-vous par enlever la dépendance ? Je suppose que c'est pour l'événement click sur le bouton like ou dislike que je dois simplement tester sur la classe "vote_like" ou "vote_dislike".

Je dois donc simplement mettre :


$('.vote_like').click(function(e)


à la place de :


$('.vote_like', $vote).click(function(e)

....


oui, puisque $vote est #vote (de mémoire (j'ai pas le code sous les yeux))
THIRT05 a écrit :

Et par boucler, vous voulez dire que je dois utiliser une boucle "each" sur les classes "vote_like" ou "vote_dislike" ?


oui puisqu'il faudra bien que tu saches où placer ton compteur +1 ou compteur -1. Là pour le coup, tu cliques pour tout le monde....
bonjour
j'ai pu tester le bon fonctionnement de mes mécaniques sur Mac avec
safari opera chrome et firefox, ca fonctionne parfaitement.
Mais je voudrais aussi tester ces 2 mécaniques sur Edge. ou peut être sur explorer (la j'ai un gros doute)
Si une bonne âme sur PC qui n'a rien à faire pendant 1 minute pourrait me dire si mes 2 machines fonctionnent de manière fluide sur Edge, merci. bcp

https://royal-playa-club.alwaysdata.net/mushroom-counting-machine.html[/url

et
https://royal-playa-club.alwaysdata.net/horloge.html
J'ai trouvé !

Je ne sais pas par quel phénomène mais la vue adaptative de l'inspecteur c'est déréglé.
C'est en sortant l'outil règle que j'ai pus constaté le problème.
J'ai donc passé la vue adaptative en paysage puis je suis revenu en portrait et les mesures coïncidaient à nouveau..

Merci quand même, j'aurais passé 3h la dessus Smiley bawling Smiley bawling Smiley fache
Modifié par steven22 (23 Jul 2019 - 21:46)
Bonsoir

@niuxe : Merci pour ton commentaire.

J'écris le JS d'aujourd'hui.
const et let sont venus avec ES2015, quatre ans déjà !
var est une abomination source de bien des problèmes de portée et de valeur dans les boucles for.

Si personne ne donne des exemples de code actuels et que l'on continue d'écrire des codes compatibles avec IE 9, les débutants resteront dans cet état longtemps encore.
Bonjour à tous, voici mon problème :

j'utilise un media queries pour du responsive (Le principe étant de passer d'un display block à un display flex ), seulement cette fois-ci je suis un peu perturbé puisque la valeur que je renseigne "@media only screen and (min-width: 900px) " ne s'applique pas, ou plutôt elle ne s'applique pas correctement puisque en inspectant, le breakpoint s'effectue à 805px exactement... Smiley eek



Ce n'est pas dérangeant puisque je peux adapter le (min-width) en fonction de la marge d'erreur mais j'aimerais comprendre. Smiley hum
(Je pense que c'est un problème au niveau de l'inspecteur, peut-être quelque chose que j'aurais changé.)

Est-ce que quelqu'un pourrait m'aider s'il vous plait ?

Merci d'avance.
Modifié par steven22 (23 Jul 2019 - 21:06)
Bonsoir Niuxe,

tout d'abord, merci pour votre réponse.

Qu'entendez-vous par enlever la dépendance ? Je suppose que c'est pour l'événement click sur le bouton like ou dislike que je dois simplement tester sur la classe "vote_like" ou "vote_dislike".

Je dois donc simplement mettre :


$('.vote_like').click(function(e)


à la place de :


$('.vote_like', $vote).click(function(e)


Et par boucler, vous voulez dire que je dois utiliser une boucle "each" sur les classes "vote_like" ou "vote_dislike" ?

Merci d'avance

Bonne soirée

Thierry
Bonjour Francis,

merci pour votre aide.

Je ne savais pas que je devais rajouter la référence à la librairie jQuery dans codepen. C'est logique mais il fallait le savoir. -:)

En effet, maintenant, la page réagit bien au code jQuery.

https://codepen.io/anon/pen/OKMZor

Par contre, je me demande comment faire pour que ça réagisse également sur les autres articles et pas seulement sur le 1er article ?

Le but est de rendre le système de like/dislike dynamique.

La div qui a l'id "vote_1", "vote_2", "vote_3" est généré dynamiquement comme vous vous en doutez c'est-à-dire la chaîne de caractères "vote_" + le numéro de l'article.


 var $vote = $('#vote_1');


Donc, je me demande comment faire pour intercepter le bon click sur l'article concerné ?

Merci d'avance

Bonne journée
Thierry
Bon, je me réponds à moi-même et je viens de trouver une solution avec le CSS qui n'intègre aucune propriété de position mais juste la hauteur+largeur de mon bloc texte soit :
.row h1 {
	transform: rotate(-90deg);
	text-align: right;
	width: 240px!important;/*Position gauche*/
	height: 240px!important;/*Position haut*/
}


Je n'ai pas compris le principe mais ça fonctionne Smiley rolleyes
Bonjour à tous,

en fait, j'essaie de mettre en place un système de vote sur plusieurs articles mais je n'arrive pas à intercepter les événements sur les boutons like et dislike de ces différents articles.

J'ai un id sur chaque article qui concerne le vote à propos de cet article. En fait, l'id est composé de la chaîne de caractères "vote_" + le numéro de l'article qui est dynamique et qui se trouve notamment dans la "variable" <data-ref_id>.

Vous pouvez avoir un aperçu du code à l'adresse suivante :

https://codepen.io/anon/pen/rXObpL

Avez-vous une idée de comment je peux m'y prendre pour que les boutons réagissent convenablement en fonction de l'article auquel ils sont attachés ?

Merci d'avance

Bonne soirée

Thierry
Et l'eau,

@danielhagnoul : ta syntaxe est avancée et certains membres peuvent avoir du mal à te suivre. Cela dit, j'aime bien te lire. Smiley smile

tankarasu a écrit :

j'ai fait un tableau qui affiche des contacts et j'utilise la méthode push. Je ne comprends pas pourquoi le console.log me renvoie la longueur du tableau après le push alors que précédemment à la ligne 10 il me renvoie le contenu du tableau. Puis je me demande pourquoi j'était obligé de prendre un nouveau tableau pour affecter les résultats. Ex: nom[] et nom1[] . Si je ne fais pas cela après le push le console.log me renvoie les valeurs d'avant le push.
....

Merci du coup je me pose la question pourquoi utiliser ici "let" et que signifie "const [i, item] of nom.entries())" ?


la méthode log de l'objet console permet de déboguer ton script. Du moins, afficher dans la console du navigateur, la valeur de la variable passée en paramètre. Si tu passes une chaîne de caractères, ça t'affichera celle là. Si tu passes un objet litéral ou un array, ça t'affichera tout le contenu.

const est une façon de déclarer une variable. Mais celle ci ne sera disponible/accessible qu'en lecture et non en lecture/écriture.
En général et par convention d'écriture, on utilise des majuscules pour déclarer une constante. À noter que la portée d'une constante en Javascript est la même avec le mot clef var

Personnellement, je trouve qu'il y a des excès d'utilisation de ce type de mot clef.

Sinon, voilà un exemple de déclaration d'une constante :

const TVA_FRANCE = 19.6;


let permet de déclarer une variable dont la portée est réduite à celle du bloc (if, for, while, function, etc.) dans lequel tu la déclares

Pour finir, et pour éviter qu'on te balance RTFM je t'invite à aller régulièrement sur la mdn lorsque tu te poses des questions de ce type. Il y a un autre site dont je te recommande pour apprendre et comprendre le javascript au début : toutjavascript . Bien qu'il soit intéressant, il est moins fournis que la mdn.
Modifié par niuxe (23 Jul 2019 - 14:00)
25 Dernières réponses