Scribd
Upload
4 views16 pages

PHP

The document outlines a hotel management dashboard that displays statistics such as current clients, occupied rooms, daily reservations, and recent revenue. It includes HTML, CSS, and JavaScript code for layout and functionality, as well as PHP for database interactions to fetch and display real-time data. The dashboard features a sidebar for navigation and a chart for monthly statistics, enhancing user experience and data visualization.

Uploaded by

mafeutie3
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views16 pages

PHP

The document outlines a hotel management dashboard that displays statistics such as current clients, occupied rooms, daily reservations, and recent revenue. It includes HTML, CSS, and JavaScript code for layout and functionality, as well as PHP for database interactions to fetch and display real-time data. The dashboard features a sidebar for navigation and a chart for monthly statistics, enhancing user experience and data visualization.

Uploaded by

mafeutie3
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

<?

php

header("Location: dashboard.php");

exit();

?>

<?php include 'includes/header.php'; ?>

<?php include 'includes/sidebar.php'; ?>

<link rel="stylesheet" href="style.css">

<script src="script.js" defer></script>

<div class="main-content">

<h1>Dashboard Hôtel</h1>

<div class="cards">

<div class="card">

<img src="images/clients.png" alt="Clients">

<div class="info">

<h2>125</h2>

<p>Clients actuels</p>

</div>

</div>

<div class="card">

<img src="images/chambres.png" alt="Chambres">

<div class="info">

<h2>80/100</h2>
<p>Chambres occupées</p>

</div>

</div>

<div class="card">

<img src="images/reservations.png" alt="Réservations">

<div class="info">

<h2>23</h2>

<p>Réservations du jour</p>

</div>

</div>

<div class="card">

<img src="images/revenus.png" alt="Revenus">

<div class="info">

<h2>320 000 FCFA</h2>

<p>Revenus récents</p>

</div>

</div>

</div>

<div class="chart-container">

<h2>Statistiques mensuelles</h2>

<canvas id="statsChart"></canvas>

</div>

</div>
<header class="header">

<h2>Gestion Hôtel</h2>

<div class="user-area">

<input type="text" placeholder="Recherche...">

<button> 🔍</button>
<img src="images/user.png" alt="Utilisateur" class="user-icon">

</div>

</header>

<aside class="sidebar">

<ul>

<li><a href="dashboard.php"> 🏠 Accueil</a></li>


<li><a href="#">👤 Clients</a></li>
<li><a href="#">📅 Réservations</a></li>

<li><a href="#">🛏Chambres</a></li>

<li><a href="#">💰 Paiements</a></li>

<li><a href="#">📊 Statistiques</a></li>

<li><a href="#">🏆 Récompenses</a></li>

<li><a href="#">📄 Rapports</a></li>

<li><a href="#">⚙ Paramètres</a></li>

🚪 Déconnexion</a></li>
<li><a href="#">

</ul>

</aside>

body {
margin: 0;

font-family: Arial, sans-serif;

display: flex;

background: #f4f6f8;

.sidebar {

width: 220px;

background-color: #263238;

color: white;

height: 100vh;

position: fixed;

padding-top: 20px;

.sidebar ul {

list-style: none;

padding: 0;

.sidebar ul li a {

color: white;

display: block;

padding: 15px;

text-decoration: none;
}

.sidebar ul li a:hover {

background-color: #37474F;

.header {

position: fixed;

left: 220px;

top: 0;

right: 0;

background-color: white;

padding: 15px 30px;

display: flex;

justify-content: space-between;

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

.main-content {

margin-left: 220px;

margin-top: 80px;

padding: 20px;

.cards {
display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

gap: 20px;

.card {

background: white;

border-radius: 10px;

padding: 20px;

display: flex;

align-items: center;

box-shadow: 0 2px 8px rgba(0,0,0,0.1);

.card img {

width: 50px;

height: 50px;

margin-right: 15px;

.chart-container {

margin-top: 40px;

background: white;

padding: 20px;

border-radius: 10px;
}

document.addEventListener('DOMContentLoaded', function () {

const ctx = document.getElementById('statsChart').getContext('2d');

new Chart(ctx, {

type: 'line',

data: {

labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin'],

datasets: [{

label: 'Réservations',

data: [40, 60, 80, 50, 90, 100],

borderColor: 'blue',

backgroundColor: 'rgba(0, 0, 255, 0.1)',

fill: true

}]

},

options: {

responsive: true

});

});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<?php
$host = 'localhost';

$dbname = 'hotel_db';

$user = 'root';

$pass = ''; // Mot de passe par défaut de XAMPP

try {

$pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $user, $pass);

$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch (PDOException $e) {

die("Erreur de connexion : " . $e->getMessage());

?>

<?php

include '../includes/db.php';

$stats = [];

// Clients actuels (présents aujourd’hui)

$today = date('Y-m-d');

$stmt = $pdo->query("SELECT COUNT(*) FROM clients WHERE date_arrivee <= '$today' AND
date_depart >= '$today'");

$stats['clients_actuels'] = $stmt->fetchColumn();

// Chambres occupées

$stmt = $pdo->query("SELECT COUNT(*) FROM chambres WHERE statut = 'occupée'");


$stats['chambres_occupees'] = $stmt->fetchColumn();

// Chambres totales

$stmt = $pdo->query("SELECT COUNT(*) FROM chambres");

$stats['chambres_total'] = $stmt->fetchColumn();

// Réservations aujourd'hui

$stmt = $pdo->query("SELECT COUNT(*) FROM reservations WHERE date_reservation =


'$today'");

$stats['reservations_jour'] = $stmt->fetchColumn();

// Revenus récents (7 derniers jours)

$stmt = $pdo->query("SELECT SUM(montant) FROM paiements WHERE date_paiement >=


DATE_SUB(NOW(), INTERVAL 7 DAY)");

$stats['revenus_recents'] = $stmt->fetchColumn() ?: 0;

echo json_encode($stats);

?>

document.addEventListener('DOMContentLoaded', function () {

fetch('data/stats.php')

.then(res => res.json())

.then(data => {

document.getElementById('clients-actuels').innerText = data.clients_actuels;

document.getElementById('chambres-occupees').innerText =
`${data.chambres_occupees}/${data.chambres_total}`;

document.getElementById('reservations-jour').innerText = data.reservations_jour;
document.getElementById('revenus-recents').innerText =
`${parseInt(data.revenus_recents).toLocaleString()} FCFA`;

});

// Graphique

const ctx = document.getElementById('statsChart').getContext('2d');

new Chart(ctx, {

type: 'line',

data: {

labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin'],

datasets: [{

label: 'Réservations',

data: [40, 60, 80, 50, 90, 100],

borderColor: 'blue',

backgroundColor: 'rgba(0, 0, 255, 0.1)',

fill: true

}]

},

options: {

responsive: true

});

});

<div class="card">

<img src="images/clients.png" alt="Clients">


<div class="info">

<h2 id="clients-actuels">...</h2>

<p>Clients actuels</p>

</div>

</div>

<div class="card">

<img src="images/chambres.png" alt="Chambres">

<div class="info">

<h2 id="chambres-occupees">...</h2>

<p>Chambres occupées</p>

</div>

</div>

<div class="card">

<img src="images/reservations.png" alt="Réservations">

<div class="info">

<h2 id="reservations-jour">...</h2>

<p>Réservations du jour</p>

</div>

</div>

<div class="card">

<img src="images/revenus.png" alt="Revenus">

<div class="info">

<h2 id="revenus-recents">...</h2>

<p>Revenus récents</p>

</div>
</div>

<?php

include 'includes/db.php';

$message = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {

$nom = $_POST['nom'];

$arrivee = $_POST['arrivee'];

$depart = $_POST['depart'];

if (!empty($nom) && !empty($arrivee) && !empty($depart)) {

$stmt = $pdo->prepare("INSERT INTO clients (nom, date_arrivee, date_depart) VALUES (?, ?,


?)");

$stmt->execute([$nom, $arrivee, $depart]);

$message = "Client ajouté avec succès !";

} else {

$message = "Tous les champs sont requis.";

?>

<!DOCTYPE html>

<html lang="fr">

<head>
<meta charset="UTF-8">

<title>Ajouter un client</title>

<link rel="stylesheet" href="style.css">

</head>

<body class="form-page">

<div class="form-container">

<h2>Ajouter un client</h2>

<?php if ($message): ?>

<p class="message"><?= $message ?></p>

<?php endif; ?>

<form method="POST">

<label>Nom du client :</label>

<input type="text" name="nom" required>

<label>Date d'arrivée :</label>

<input type="date" name="arrivee" required>

<label>Date de départ :</label>

<input type="date" name="depart" required>

<button type="submit">Ajouter</button>

</form>

</div>
</body>

</html>

.form-page {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background: #f4f6f8;

.form-container {

background: white;

padding: 30px;

border-radius: 12px;

box-shadow: 0 2px 10px rgba(0,0,0,0.1);

width: 100%;

max-width: 400px;

.form-container h2 {

margin-bottom: 20px;

.form-container label {
display: block;

margin-top: 10px;

.form-container input {

width: 100%;

padding: 8px;

margin-top: 5px;

border: 1px solid #ccc;

border-radius: 5px;

.form-container button {

margin-top: 20px;

width: 100%;

padding: 10px;

background: #007bff;

border: none;

color: white;

border-radius: 5px;

font-size: 16px;

.message {

background-color: #d4edda;
padding: 10px;

border-radius: 5px;

margin-bottom: 15px;

color: #155724;

You might also like