daterangerpicker_form.php

<!-- This is an exemple of a simple form used to send an email with PHP, the comments are in French, sorry about that :) -->

<!-- Desole pour le manque d'accent, c'est super chiant avec un clavier qwerty ^^ -->

<!-- On ouvre le PHP, tout ce qui est contenu entre ces balises sera executé par le serveur. Le reste sera traité comme du HTML classique.-->
<?php 

// $_POST['submit']) sera présent si un formulaire a été rempli à la page precedente et qu'elle pointait 
// sur cette page (via l'attribut 'action' de la balise form). Bon je simplifie, en fait ca fait appel aux notions de protocol HTTP, tres interessant et important mais c'est pas le sujet.
// Ici en l'occurence 'action' n'etant pas rempli, la page pointe sur elle-meme. Ainsi le PHP (la partie qui sert à quelque chose tout du moins) est executé si le formulaire a ete rempli, sinon il affiche simplement la page.
// La valeur de tous les inputs du formulaire recus peut etre retrouvee grace à son attribut name via $_POST['leName'].
if (isset($_POST['submit'])) {
    // addresse email où on envoi toutes les demandes
    $to = "lululanantaise@hotmail.fr"; 

    // on recupere toutes les valeurs du formulaire et on leur donne des noms plus cool
    $from = $_POST['email']; 
    $first_name = $_POST['first_name'];
    $last_name = $_POST['last_name'];
    $daterange = $_POST['daterange'];
    
    // on test à l'arrache si les champs ne sont pas vides. trim() permet d'enlever les espaces et autre caracteres 
    // speciaux avant et apres la valeur.
    // '||' est un 'ou' logique, en reference à la logique booléenne que tu connais peut etre.
    // c'est à l'arrache parce qu'on devrait aussi verifier que l'email et les dates sont bien formés. Le code se trouve en une recherche Google.
    if (trim($from) == '' || trim($first_name) == '' || trim($last_name) == '' || trim($daterange) == '') {
    	// si tout n'est pas rempli on affiche un joli message d'insulte, on n'envoi pas le mail et on réaffiche le formulaire.
    	// le 'echo' permet d'afficher quelque chose dans la sortie standard qui ici est la page elle-meme. 
    	echo "<div class='row'><div class='alert alert-danger col-md-6 col-md-offset-3' role='alert'>Please fill all the fields.</div></div>";
    }
    else {
    	// si tout est bien rempli, on decoupe la valeur de la date 'MM/dd/yyyy - MM/dd/yyyy' en un tableau contenant les deux dates.
		$dates = explode(" - ", trim($daterange));
		// on les attribu à des variables histoire de s'y retrouver, c'est important de mettre un nom sur les choses.
	    $fromDate = $dates[0];
	    $toDate = $dates[1];

	    // le sujet du mail
	    $subject = "Asking for reservation";

	    // on crée le message du mail en concaténant les variables. Le '.' en PHP permet de concaténer les chaines de caractères.
	    // le '\n' c'est le retour à la ligne, valable un peu dans tous les contextes en informatique.
	    $message = $first_name . " " . $last_name . " asked for a reservation from " . $fromDate . " to " . $toDate . ".\n\n";

	    // expediteur du mail, comme ca on peut repondre directement à la personne :)
		$headers = "From: ". $first_name ." ". $last_name ." <" . $from . ">";

		// PHP a une fonction toute prete pour envoyer des mails ! Elle prend en paremetres l'expediteur, le destinataire, 
		// le message et eventuellement les headers qu'on voudrait ajouter pour aller plus dans les details.
	    $result = mail($to, $subject, $message, $headers);

	    // Si $result == true, tout s'est bien passé
	    if ($result) {
			// On ajoute un message de succes et on affiche le formulaire à la suite. 
	    	// Si tu veux diriger vers une autre page tu peux faire "header('Location: taPage.html');"
	    	echo "<div class='row'><div class='alert alert-info col-md-6 col-md-offset-3' role='alert'>Mail Sent. Thank you " . $first_name . ", we will contact you shortly.</div></div>";
	    }
	    else {
			// Sinon bah on indique qu'il y a eu une merde sans trop pouvoir dignostiquer je pense.
			echo "<div class='row'><div class='alert alert-danger col-md-6 col-md-offset-3' role='alert'>An error occured ... Please contact the administrator.</div></div>";
	    }
    } 
}
// on ferme de PHP
?>

<!DOCTYPE html>
<head>
	<title>Form submission</title>
	<!-- on inclu les CSS de bootstrap (dependance de daterangepicker) et daterangepicker -->
	<!-- on va chercher les libs directement via des serveurs CDN histoire de pas avoir à les importer sur notre serveur -->
	<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />
	<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
</head>
<body>
	<!-- aah le fameux grid system de bootstrap ! -->
	<div class="row">
		<div class="col-md-6 col-md-offset-3">
			<!-- on commence le formulaire, acton est vide donc on redirige sur la page courante par defaut -->
			<form action="" method="post" class="form-horizontal">
				<div class="form-group">
					<label for="firstName" class="col-md-2 control-label">First Name</label>
					<div class="col-md-10">
						<input required type="text" class="form-control" name="first_name" id="firstName" placeholder="First Name">
					</div>
				</div>
				<div class="form-group">
					<label for="lastName" class="col-md-2 control-label">Last Name</label>
					<div class="col-md-10">
						<input required type="text" class="form-control" name="last_name" id="lastName" placeholder="Last Name">
					</div>
				</div>
				<div class="form-group" class="col-md-2 control-label">
					<label for="emailName" class="col-md-2 control-label">Email</label>
					<div class="col-md-10">
						<!-- on remarquera le type 'email' et l'attribut 'required' apportés par HTML5 pour faire automatiquement de la validation de formulaires coté client -->
						<!-- malheureusement tous les browsers ne gerent pas ca par defaut (ie. Safari ...), donc j'ai aussi fait une validation à l'arrache coté serveur (ligne 22) -->
						<input required type="email" class="form-control" name="email" id="email" placeholder="Email">
					</div>
				</div>
				<div class="form-group" class="col-md-2 control-label">
					<label for="dates" class="col-md-2 control-label">Dates</label>
					<div class="col-md-10">
						<input required type="text" class="form-control" name="daterange" id="dates" placeholder="Dates"/>
					</div>
				</div>
				<div class="form-group">
				    <div class="col-md-offset-2 col-md-10">
						<input type="submit" class="btn btn-default" name="submit" value="Submit">
					</div>
		  		</div>
			</form>
		</div>
	</div>
	<!-- On inclu le Javascript à la fin pour ne pas ralentir le chargement de la partie graphique de la page -->
	<!-- Il y a jQuery qui apporte beaucoup de fonctions cool en complement à Javascript. C'est une dependance de bootstrap et donc de daterangepicker -->
	<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
	<!-- MomentJs est une lib de gestion de dates, un probleme courant en programmation. C'est une dependance de daterangepicker. -->
	<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
	<!-- Le code de daterangepicker qui sera appelé ligne 132 -->
	<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
	<!-- On declare un script JS directement dans la page, on pourrait le mettre dans un fichier à part bien sûr. -->
	<script type="text/javascript">
		// le "$(function() {...})" permet d'executer le code dès sa déclaration
		$(function() {
			// La premiere partie est l'appel jQuery pour selectionner l'element input sur lequel on va appliquer le daterangepicker.
			// La seconde partie (apres le point) est l'appel de la fonction principale de la lib sur l'input qui servira de support.
			// En gros ca va creer un input caché (tu peux le voir dans le html dans ton browser) qui sera appelé lors du clique
			// sur l'element donné, en l'occurence l'input dont l'attribut 'name' est 'daterange'.
			// Je t'invite à aller voir la doc de la lib si tu veux ajouter/enlever les options au datepicker pour que ca fit bien
			// tes requierements, y'a beaucoup d'exemples et de code : http://www.daterangepicker.com
		    $('input[name="daterange"]').daterangepicker({
		    	// j'ai ajouté ces arguments pour avoir un champs vide à l'initialiation. Petit mot sur le JS, c'est tres tourné
		    	// autour des objets, qui se declarent entre {} avec dedans un suite de clés/valeurs. Les valeurs peuvent etre
		    	// elles-meme des objets comme ligne 137.
		    	autoUpdateInput: false,
      			locale: {
          			cancelLabel: 'Clear'
  				}
			});

		    // Bon, ca c'est pour implementer les actions à executer lors du clique les boutons qui sont dans le datepicker.
		    // Je vais pas detailler ici l'utilisation des listeners mais on pourra en parler si tu veux ^^
			$('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
				// tu vois qu'on modifie la date pour qu'elle corresponde à un format particulier. Chaque pays à son format donc c'est le bordel.
		    	$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
			});

			$('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
			    $(this).val('');
			});
		});
	</script>
</body>
</html>