Formulaire de réservation d'hôtel avec PHP

Dans cet article, nous allons créer un élégant formulaire de réservation d'hôtel avec PHP, qui permettra aux clients de soumettre des réservations à l'aide d'un formulaire HTML.

Le code consistera en un formulaire HTML et PHP pour envoyer les soumissions du formulaire de réservation à une adresse e-mail spécifique. De plus, nous ajouterons une validation au formulaire pour éviter les données invalides.

A quoi sert un formulaire de réservation d'hôtel ?

Eh bien, cela se passe d'explications. Le formulaire permettra aux clients de soumettre des réservations sur votre site Web. L'interface facile à utiliser offrira une expérience innovante à vos invités. Rapide et direct. Que vous soyez propriétaire d'un hôtel, d'un motel, d'un centre de villégiature ou d'un autre type d'hébergement. Le formulaire est idéal pour votre entreprise.

1. Mise en route

Avant de commencer à coder notre formulaire de réservation d'hôtel, nous devons nous assurer que nous disposons d'un serveur Web fonctionnel et que nous répondons à toutes les exigences ci-dessous. Nous ne pouvons pas exécuter de code PHP sans un serveur Web fonctionnel car il s'agit d'un langage de programmation côté serveur.

1.1. Exigences

Serveur Web — Si vous n'avez pas installé de package de solution de serveur Web local, je vous recommande de télécharger et d'installer XAMPP . XAMPP est un package de solution de serveur Web open source.
Serveur de messagerie (SMTP) — Sans un serveur de messagerie fonctionnel, vous ne pourrez pas recevoir les e-mails traités à l'aide du formulaire de réservation. Si vous hébergez votre site Web chez un fournisseur, vous ne devriez rien faire. Cependant, si vous avez votre propre serveur (dédié/vps), je vous recommande d'installer Postfix .

1.2. Ce que vous apprendrez dans ce tutoriel

Concevoir un formulaire de réservation d'hôtel — Nous utiliserons CSS pour concevoir notre formulaire de réservation d'hôtel et HTML pour structurer notre code.
Concevoir un modèle d'e-mail — Concevez un modèle adapté aux e-mails en utilisant HTML et CSS.
Validation du formulaire — Implémentez la validation des éléments individuels de notre formulaire.
Envoyer un e-mail — La fonction de messagerie PHP nous permettra d'envoyer un e-mail à une adresse e-mail spécifiée.

1.3. Configuration et structure des fichiers

Maintenant que nous avons installé un serveur Web, nous devons le démarrer. De plus, nous allons créer les répertoires et les fichiers que nous allons utiliser pour notre page de formulaire de réservation d'hôtel.

Ouvrez le panneau de configuration XAMPP
À côté du module Apache, cliquez sur Démarrer
À côté du module MySQL, cliquez sur Démarrer
Accédez au répertoire d'installation de XAMPP ( C:\xampp )
Ouvrez le répertoire htdocs
Créez les répertoires et fichiers suivants :

Structure du fichier

\--
    hotelreservationform |-- hotel.php
    |-- email-template.php
    |-- style.css

Les fichiers ci-dessus contiendront les éléments suivants :

hotel.php — Ce fichier contiendra notre modèle de formulaire de réservation d'hôtel et le code PHP qui traitera le formulaire.
email-template.php — Ce fichier contiendra le code du modèle d'e-mail.
style.css — La feuille de style qui structurera notre page et la rendra plus attrayante.

2. Conception du formulaire de réservation d'hôtel avec CSS

La feuille de style structurera notre mise en page et décrira comment chaque élément s'affichera à l'écran. Il comprend les polices, les couleurs et la taille des éléments.

Modifiez le fichier style.css et ajoutez :

CSS

html, body, div, input, span, a, select, textarea, option, h1, h2, h3, h4, main, aside, article, section, header, p, footer, nav, pre {

box-sizing: border-box;

font-family: Tahoma, Geneva, sans-serif;

}

html {

background-color: #F8F9F9;

background: linear-gradient(0deg, #f9f8f8 0%, #f9f8f8 80%, #cb5f51 80%, #cb5f51 100%);

padding: 30px;

height: 100%;

}

input,textarea,select {

outline: 0;

}

h1 {

margin: 0;

padding: 25px;

font-size: 20px;

text-align: center;

border-bottom: 1px solid #eceff2;

color: #6a737f;

font-weight: 600;

background-color: #f9fbfc;

}

h1 i {

padding-right: 10px;

font-size: 24px;

}

.hotel-reservation-form {

background-color: #fff;

width: 500px;

margin: 0auto;

box-shadow: 0px 0px 5px 0px rgba(0,0,0,.2);

}

.hotel-reservation-form .fields {

position: relative;

padding: 20px;

}

.hotel-reservation-form select {

appearance: none;

background-image: linear-gradient(45deg, transparent 50%, #c7c9cb 50%), linear-gradient(135deg, #c7c9cb 50%, transparent 50%), linear-gradient(to right, #dfe0e0, #dfe0e0);

background-position: calc(100% - 20px) 20px, calc(100% - 15px) 20px, calc(100% - 40px) 10px;

background-size: 5px 5px, 5px 5px, 1px 25px;

background-repeat: no-repeat;

}

.hotel-reservation-form select option:first-child {

display: none;

}

.hotel-reservation-form input[type="date"]::-webkit-calendar-picker-indicator {

color: #ddd;

filter: invert(0.8);

}

.hotel-reservation-form input[type="text"],

.hotel-reservation-form input[type="email"],

.hotel-reservation-form input[type="date"],

.hotel-reservation-form input[type="tel"],

.hotel-reservation-form select {

display: flex;

margin-top: 10px;

padding: 15px;

border: 1px solid #dfe0e0;

width: 100%;

flex-basis: 100%;

height: 47px;

}

.hotel-reservation-form input[type="text"]:focus,

.hotel-reservation-form input[type="email"]:focus,

.hotel-reservation-form input[type="tel"]:focus,

.hotel-reservation-form input[type="date"]:focus,

.hotel-reservation-form select:focus {

border: 1px solid #c6c7c7;

}

.hotel-reservation-form input[type="text"]::placeholder,

.hotel-reservation-form input[type="email"]::placeholder,

.hotel-reservation-form input[type="tel"]::placeholder,

.hotel-reservation-form input[type="date"]:invalid,

.hotel-reservation-form textarea::placeholder,

.hotel-reservation-form select:invalid {

color: #858688;

}

.hotel-reservation-form textarea {

resize: none;

margin-top: 15px;

padding: 15px;

border: 1px solid #dfe0e0;

width: 100%;

height: 150px;

}

.hotel-reservation-form textarea:focus {

border: 1px solid #c6c7c7;

}

.hotel-reservation-form input[type="submit"] {

display: block;

margin-top: 15px;

padding: 15px;

border: 0;

background-color: #cb5f51;

font-weight: bold;

color: #fff;

cursor: pointer;

width: 100%;

}

.hotel-reservation-form input[type="submit"]:hover {

background-color: #c15b4d;

}

.hotel-reservation-form input[name="email"] {

position: relative;

display: block;

}

.hotel-reservation-form .field {

display: inline-flex;

position: relative;

width: 100%;

padding-bottom: 20px;

}

.hotel-reservation-form label {

font-size: 14px;

font-weight: 600;

color: #8e939b;

}

.hotel-reservation-form .field i {

position: absolute;

color: #dfe2e5;

top: 25px;

left: 15px;

z-index: 10;

}

.hotel-reservation-form .field i ~ input {

padding-left: 45px !important;

}

.hotel-reservation-form .responses {

padding: 15px;

margin: 0;

}

.hotel-reservation-form .fields .wrapper {

display: flex;

justify-content: space-between;

}

.hotel-reservation-form .fields .wrapper > div {

width: 100%;

}

.hotel-reservation-form .fields .wrapper .gap {

width: 35px;

}

C'est tout ce que nous devons faire pour le fichier de feuille de style. Nous pouvons maintenant passer à la création du modèle de formulaire de réservation.

3. Structurer le formulaire de réservation d'hôtel avec HTML

Le formulaire de réservation permettra au client d'entrer ses coordonnées et de les soumettre. Nous allons créer un élément de formulaire HTML et ajouter les éléments d'entrée que nous allons utiliser. De plus, nous spécifierons des attributs qui valideront les éléments.

Editez le fichier hotel.php et ajoutez :

HTML

<!DOCTYPE html>

<head>

<title>Hotel Reservation Form</title>

</head>

<body>

<h1><i class="far fa-calendar-alt"></i>Hotel Reservation Form</h1>

</div>

</form>

</body>

</html>

Cela créera la structure de base de notre formulaire de réservation. Comme vous pouvez le voir, le fichier style.css est inclus dans la section head avec la bibliothèque Font Awesome, ce qui nous permettra de générer des icônes dans notre formulaire.

Nous avons défini la méthode du formulaire surPubliercar les données que nous allons envoyer doivent être enfermées dans le corps. La méthode est essentielle ; sans cela, nous ne pouvons pas récupérer les données du formulaire avec PHP.

Il n'est pas nécessaire de spécifier l'attribut action car le code qui traitera le formulaire sera dans le même fichier, et donc ce n'est pas nécessaire. La valeur vide soumettra le formulaire à l'URL actuelle.

Après:

Ajouter:

HTML

<div>

<label for="arrival">Arrival</label>

</div>

<div>

<label for="departure">Departure</label>

</div>

Le code ci-dessus créera les éléments d'entrée d'arrivée et de départ, les deux types étant déclarés comme une date. leobligatoireL'attribut garantira que les deux éléments d'entrée ont été saisis par l'invité. Ils ne peuvent pas soumettre le formulaire sans entrer la date.

Avec PHP, nous pouvons récupérer l'élément d'entrée par l'attribut name, ainsi, par exemple, nous pouvons récupérer la date d'arrivée avec $_POST['arrivée'], mais uniquement lorsque le formulaire a été soumis.

Astuce HTMLLorsque vous cliquez sur le texte à l'intérieur d'un élément d'étiquette, cela bascule l'élément d'entrée associé, qui est déterminé par l'attribut ID.

Les éléments d'étiquette apparaîtront au-dessus du champ de saisie et les conteneurs entourant les éléments de saisie structureront la mise en page.

Ajouter après :

HTML

<div>

<label for="first_name">First Name</label>

</div>

<div>

</div>

Le code ci-dessus ajoutera les éléments de prénom et de nom de famille, avec les deux attributs de type définis en tant que texte. Le texte de l'espace réservé apparaîtra en arrière-plan lorsque l'élément est vide.

Ajouter après :

HTML

<label for="email">Email</label>

</div>

Le code ci-dessus ajoutera le champ email avec l'attribut type de l'élément défini sur email.

Ajouter après :

HTML

<label for="phone">Phone</label>

</div>

Le code ci-dessus ajoutera l'élément de numéro de téléphone avec l'attribut type défini sur tel, qui est l'abréviation de numéro de téléphone.

Ajouter après :

HTML

<div>

<label for="adults">Adults</label>

</select>

</div>

<div>

<label for="children">Children</label>

</select>

</div>

Les éléments de formulaire ci-dessus sont différents de ceux que nous avons créés précédemment. Au lieu des éléments d'entrée, nous utilisons des éléments déroulants que nous pouvons remplir avec des nombres. Les éléments adultes et enfants seront une liste déroulante.

Pour ajouter d'autres éléments à l'élément déroulant, il vous suffit d'ajouter un élément d'option. Par exemple:

HTML

Ajouter après :

HTML

<label for="room_pref">Room Preference</label>

<option value="Standard">Standard</option>

<option value="Deluxe">Deluxe</option>

<option value="Suite">Suite</option>

</select>

</div>

Semblable à l'élément que nous avons implémenté précédemment, les deux utilisent l'élément select (liste déroulante). Avec l'élément de préférence de chambre, le client peut spécifier le type d'hébergement dans lequel il souhaite séjourner.

Ajouter après :

HTML

Enfin, nous pouvons inclure le code qui soumettra le formulaire.

Si nous accédons au fichier dans notre navigateur Web, nous devrions voir ce qui suit :

http://localhost/hotelreservationform/hotel.php

C'est tout ce que nous devons faire pour le modèle de formulaire de réservation. Nous pouvons maintenant procéder à la création du modèle d'e-mail.

4. Création du modèle d'e-mail

Toutes les soumissions de réservation seront envoyées à une adresse e-mail spécifiée en utilisant le modèle d'e-mail. Nous utiliserons la mise en mémoire tampon de sortie pour capturer le fichier et le lier à la fonction mail(), ce que nous ferons dans la section suivante.

Modifiez le fichier email-template.php et ajoutez :

PHPCopie

<!DOCTYPE html>

<html>

<head>

<title>Hotel Reservation</title>

</head>

<bodystyle="background-color:#F5F6F8;font-family:-apple-system, BlinkMacSystemFont, 'segoe ui', roboto, oxygen, ubuntu, cantarell, 'fira sans', 'droid sans', 'helvetica neue', Arial, sans-serif;box-sizing:border-box;font-size:16px;">

<divstyle="background-color:#fff;margin:30px;box-sizing:border-box;font-size:16px;">

<h1style="padding:40px;box-sizing:border-box;font-size:24px;color:#ffffff;background-color:#cb5f51;margin:0;">Hotel Reservation</h1>

<pstyle="padding:40px 40px 20px 40px;margin:0;box-sizing:border-box;font-size:16px;">A guest has booked a reservation for <b><?=$arrival?></b>and will departure on <b><?=$departure?></b>.</p>

<h2style="padding:20px 40px;margin:0;color:#394453;box-sizing:border-box;">Guest Details</h2>

<divstyle="box-sizing:border-box;padding:0 40px 20px;">

<tablestyle="border-collapse:collapse;width:100%;">

<tbody>

<tr>

<tdstyle="padding:15px 0;text-decoration:underline;">Email</td>

<tdstyle="text-align:right;"><?=$email?></td>

</tr>

<tr>

<tdstyle="padding:15px 0;text-decoration:underline;">Name</td>

<tdstyle="text-align:right;"><?=$first_name?> <?=$last_name?></td>

</tr>

<tr>

<tdstyle="padding:15px 0;text-decoration:underline;">Phone</td>

<tdstyle="text-align:right;"><?=$phone?></td>

</tr>

<tr>

<tdstyle="padding:15px 0;text-decoration:underline;">Adults</td>

</tr>

<tr>

<tdstyle="padding:15px 0;text-decoration:underline;">Children</td>

<tdstyle="text-align:right;"><?=$children?></td>

</tr>

<tr>

<tdstyle="padding:15px 0;text-decoration:underline;">Room Preference</td>

<tdstyle="text-align:right;"><?=$room_pref?></td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Les variables spécifiées dans le fichier de modèle d'email seront déclarées dans notre fichier hotel.php .

Lorsqu'un client effectue une réservation, nous recevons un e-mail qui ressemblera à :

C'est tout ce que nous devons faire pour le modèle d'e-mail. Dans la section suivante, nous allons implémenter le code qui traitera le formulaire de réservation.

5. Traitement du formulaire de réservation d'hôtel avec PHP

Enfin, nous devons inclure le code qui traitera les données du formulaire, qui consistera en la validation et l'envoi de l'e-mail à l'aide du modèle d'e-mail que nous avons créé précédemment.

Modifiez le fichier hotel.php et placez le code suivant tout en haut :

PHP

<?php

// Output messages

$responses = [];

// Check if the form was submitted

if (isset($_POST['arrival'],$_POST['departure'], $_POST['first_name'],$_POST['last_name'], $_POST['email'],$_POST['phone'], $_POST['adults'],$_POST['children'], $_POST['room_pref'])) {

// Process form data

}

Avec le code ci-dessus, nous avons déclaré le tableau de réponses que nous utiliserons pour générer les messages de validation et de réussite. Pour vérifier si le formulaire a été soumis, nous pouvons utiliser leisset() fonction car cela vérifiera si les variables sont déclarées.

Après:

// Process form data

Ajouter:

PHP

// Assign POST variables

$arrival = htmlspecialchars($_POST['arrival'], ENT_QUOTES);

$departure = htmlspecialchars($_POST['departure'], ENT_QUOTES);

$first_name = htmlspecialchars($_POST['first_name'], ENT_QUOTES);

$last_name = htmlspecialchars($_POST['last_name'], ENT_QUOTES);

$email = htmlspecialchars($_POST['email'], ENT_QUOTES);

$phone = htmlspecialchars($_POST['phone'], ENT_QUOTES);

$adults = htmlspecialchars($_POST['adults'], ENT_QUOTES);

$children = htmlspecialchars($_POST['children'], ENT_QUOTES);

$room_pref = htmlspecialchars($_POST['room_pref'], ENT_QUOTES);

Le code ci-dessus affectera toutes les variables de publication que nous allons utiliser et convertira les caractères spéciaux en entités HTML.

Astuce PHPLa htmlspecialchars()fonction convertit les caractères spéciaux en entités HTML et empêche ainsi les attaques XSS.

Ajouter après :

PHP

// Validate email adress

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {

$responses[] = 'Email is not valid!';

}

// First name must contain only alphabet characters.

if (!preg_match('/^[a-zA-Z]+$/', $first_name)) {

$responses[] = 'First name must contain only characters!';

}

// Last name must contain only alphabet characters.

if (!preg_match('/^[a-zA-Z]+$/', $last_name)) {

$responses[] = 'Last name must contain only characters!';

}

Le code ci-dessus ajoutera une validation de base aux champs e-mail, prénom et nom de famille. Vous êtes libre d'implémenter votre propre validation pour les autres champs.

Ajouter après :

PHP

// If there are no errors

if (!$responses) {

// Where to send the mail? It should be your email address

$to = 'reservations@yourwebsite.com';

// Mail from

$from = 'noreply@yourwebsite.com';

// Mail subject

$subject = 'A guest has booked a reservation';

// Mail headers

$headers = 'From: ' . $from . "\r\n" . 'Reply-To: ' . $from . "\r\n" . 'Return-Path: ' . $from . "\r\n" . 'X-Mailer: PHP/' . phpversion() . "\r\n" . 'MIME-Version: 1.0' . "\r\n" . 'Content-Type: text/html; charset=UTF-8' . "\r\n";

// Capture the email template file as a string

ob_start();

include 'email-template.php';

$email_template = ob_get_clean();

// Try to send the mail

if (mail($to, $subject, $email_template, $headers)) {

// Success

$responses[] = 'Thank you for your reservation!';

} else {

// Fail; problem with the mail server...

$responses[] = 'Message could not be sent! Please check your mail server settings!';

}

Enfin, le code ci-dessus enverra l'e-mail à l'adresse spécifiée en utilisant le modèle capturé. N'oubliez pas de mettre à jour le$ à et $à partir de variables.

Avant de:

Ajouter:

PHP

<?php if ($responses): ?>

<p class="responses"><?php echo implode('<br>', $responses); ?></p>

<?php endif; ?>

C'est tout ce que nous devons faire pour le fichier hotel.php . Si vous rencontrez une erreur de serveur de messagerie, vous devrez vérifier que vous disposez d'un serveur de messagerie SMTP fonctionnel et le configurer en conséquence. Sans un serveur de messagerie fonctionnel, vous ne recevrez pas d'e-mails.

Conclusion

Toutes nos félicitations! Vous avez créé avec succès votre propre formulaire de réservation d'hôtel avec HTML, CSS et PHP ! Et ensuite ? Envisagez d'implémenter la validation pour les autres champs et connectez le formulaire à une base de données MySQL.

Pensez à partager l'article en utilisant les liens sociaux ci-dessous si vous l'avez trouvé utile et déposez un commentaire ci-dessous. Nous apprécions grandement le soutien.

Bon codage et merci d'avoir lu !

Formulaire de réservation d'hôtel avec PHP

Post a Comment

Système de rendez-vous médical en ligne en PHP MY SQL avec code source

Contact form

Formulaire de réservation d'hôtel avec PHP

You may like these posts

Post a Comment

Contact form