User
3 / 3

le index2.html 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">

  <title>Guide de voyage</title>
  <link rel="stylesheet" href="styles.css" />
  <script src="app.js"></script>
</head>
<body>
  <header>
    <div class="header-conteneur">
      <div class="centre-contenu">
        <img src="download.jpg" alt="Votre image" class="image_en_plein_site" />
        <h1 class="titre">Agence de voyage</h1>
      </div>
    </div>
  </header>

  <div class="content">
    <nav class="navigation-laterale">
      <section>
        <h2>Étudiants</h2>
        <ul id="etudiants">
          <li>Nom: Hamdi Islem</li>
          <li>Spécialité: Informatique</li>
          <li>Section: 1</li>
          <li>Groupe: 4</li>
          <li>Email: <PRESIDIO_ANONYMIZED_EMAIL_ADDRESS></li>
        </ul>
      </section>
      <div class="separateur-section"></div>
      <section>
        <h2><span class="puce">&bull;</span><a href="formulaire.html">Ajouter une ville</a>
        </h2>
      </section>
    </nav>

    <section class="section">
      <h2>Recherche</h2>
      <div class="ligne-champs">
        <div>
          <label for="continent">Continent:</label>
          <input type="text" id="continent" placeholder="Saisir un continent">
        </div>
        <div>
          <label for="pays">Pays:</label>
          <input type="text" id="pays" placeholder="Saisir un pays">
        </div>
      </div>
      <div class="ligne-champs">
        <div>
          <label for="ville">Ville:</label>
          <input type="text" id="ville" placeholder="Saisir une ville">
        </div>
        <div>
          <label for="site">Site:</label>
          <input type="text" id="site" placeholder="casbah">
        </div>
      </div>
      <button id="valider">Valider</button>
      <section id="resultats">
        <h2>Résultats de la recherche</h2>
        <ul id="resultats-liste"></ul>
      </section>
    </section>
    <section id="ville-details" style="display: none;">
      <h2>Détails de la ville</h2>
      <form id="ville-form">
        <div class="ligne-champs">
          <div>
            <label for="nom-ville">Nom de la ville:</label>
            <input type="text" id="nom-ville" placeholder="Nom de la ville">
          </div>
          <div>
            <label for="pays-ville">Pays:</label>
            <input type="text" id="pays-ville" placeholder="Pays">
          </div>
        </div>
        <div class="ligne-champs">
          <div>
            <label for="continent-ville">Continent:</label>
            <input type="text" id="continent-ville" placeholder="Continent">
          </div>
          <div>
            <label for="site-ville">Site:</label>
            <input type="text" id="site-ville" placeholder="Site">
          </div>
        </div>
        <button type="button" id="apply-button">Appliquer</button>
      </form>
    </section>
  </div>
  <script src="app.js"></script>
</body>
</html>
et voici sont css si ta besions* {
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
}

header {
  position: relative;
}

.header-conteneur {
  position: relative;
  text-align: center;
  height: 50vh;
  border: 1px solid #333;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.image_en_plein_site {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-height: 60%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.titre {
  position: absolute;
  top: 60%;
  left: 60%;
  transform: translate(-50%, -50%);
  color: rgb(253, 253, 253);
  font-size: 50px;
  font-family: Georgia, sans-serif;
  font-style: italic;
  width: 130%;
  text-align: center;
  z-index: 1;
}

.navigation-laterale {
  position: fixed;
  top: 0;
  left: 0;
  width: 255px;
  height: 100vh;
  background-color: #f8f4f4;
  color: #100c0c;
  border: 1px solid #333;
  padding: 20px;
}

.navigation-laterale h2 {
  margin-top: 20px;
}

.navigation-laterale ul {
  list-style-type: none;
  padding: 20px;
}

.navigation-laterale li {
  margin-bottom: 10px;
}

.puce {
  margin-right: 5px;
}

.separateur-section {
  height: 3px;
  background-color: #333;
  width: 50%;
  margin: 20px auto;
}

.section {
  margin-left: 285px;
  margin-top: 20px;
  padding: 20px;
  text-align: center;
}

.section h2 {
  font-size: 20px;
  font-style: italic;
  margin-bottom: 10px;
  text-decoration: underline;
  color: #1f74ea;
}

.section .ligne-champs {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.section .ligne-champs div {
  margin-right: 10px;
}

.section label {
  display: inline-block;
  width: 100px;
  text-align: right;
  margin-right: 10px;
}

.section input[type="text"] {
  width: 200px;
}

.section button {
  padding: 5px 10px;
  background-color: rgb(240, 240, 167);
  color: rgb(0, 0, 0);
  border: none;
  cursor: pointer;
  font-style: italic;
  margin-left: 500px;
  width: 100px;
  height: 40px;
  font-size: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

#resultats {
  margin-top: 20px;
}

#resultats h2 {
  font-size: 20px;
  font-style: italic;
  margin-bottom: 10px;
  text-decoration: underline;
  color: #1f74ea;
}

#resultats-liste {
  list-style-type: none;
  padding: 0;
  margin-top: 10px;
}

#resultats-liste li {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

#resultats-liste a {
  color: #007bff;
  text-decoration: none;
  margin-left: 5px;
}

#resultats-liste i {
  margin-right: 5px;
  cursor: pointer;
}
le javascripts app.js
// Event listener for the "Valider" button
document.getElementById('valider').addEventListener('click', () => {
  const continentInput = document.getElementById('continent').value.toLowerCase();
  const paysInput = document.getElementById('pays').value.toLowerCase();
  const villeInput = document.getElementById('ville').value.toLowerCase();
  const siteInput = document.getElementById('site').value.toLowerCase();

  // Clear previous search results
  document.getElementById('resultats-liste').innerHTML = '';

  // Send AJAX request to the PHP script
  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'search.php', true);
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhr.onload = function () {
    if (xhr.status === 200) {
      const searchResults = JSON.parse(xhr.responseText);

      // Display search results
      searchResults.forEach(city => {
        const li = document.createElement('li');
        const a = document.createElement('a');
        const editIcon = document.createElement('i');
        const deleteIcon = document.createElement('i');

        a.textContent = city.ville;
        a.href = city.site;
        editIcon.className = 'fa fa-pencil';
        deleteIcon.className = 'fa fa-trash';

        li.appendChild(a);
        li.appendChild(editIcon);
        li.appendChild(deleteIcon);

        document.getElementById('resultats-liste').appendChild(li);

        // Event listener for the edit icon
        editIcon.addEventListener('click', () => {
          populateCityDetails(city);
          showCityDetails();
        });

        // Event listener for the delete icon
        deleteIcon.addEventListener('click', () => {
          const confirmDelete = confirm('Are you sure you want to delete this city?');
          if (confirmDelete) {
            deleteCity(city.id, li);
          }
        });
      });
    }
  };
  const params = `continent=${continentInput}&pays=${paysInput}&ville=${villeInput}&site=${siteInput}`;
  xhr.send(params);
});

// Function to populate city details in the form
function populateCityDetails(city) {
  document.getElementById('nom-ville').value = city.ville;
  document.getElementById('pays-ville').value = city.pays;
  document.getElementById('continent-ville').value = city.continent;
  document.getElementById('site-ville').value = city.site;
}

// Function to show city details section
function showCityDetails() {
  document.getElementById('resultats').style.display = 'none';
  document.getElementById('ville-details').style.display = 'block';
}

// Function to hide city details section and show search results
function hideCityDetails() {
  document.getElementById('ville-details').style.display = 'none';
  document.getElementById('resultats').style.display = 'block';
}

// Event listener for the apply button
document.getElementById('apply-button').addEventListener('click', () => {
  // Get the modified city details from the form
  const villeInput = document.getElementById('nom-ville').value.toLowerCase();
  const paysInput = document.getElementById('pays-ville').value.toLowerCase();
  const continentInput = document.getElementById('continent-ville').value.toLowerCase();
  const siteInput = document.getElementById('site-ville').value.toLowerCase();

  // Update the city details in the database (you need to implement this in update_city.php)
  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'update_city.php', true);
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhr.onload = function () {
    if (xhr.status === 200) {
      const response = JSON.parse(xhr.responseText);
      if (response.success) {
        alert('City details updated successfully');
        hideCityDetails();
      } else {
        alert('Failed to update city details');
      }
    }
  };
  const params = `ville=${villeInput}&pays=${paysInput}&continent=${continentInput}&site=${siteInput}`;
  xhr.send(params);
});

// Function to delete a city
function deleteCity(cityId, listItem) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'delete_city.php', true);
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhr.onload = function () {
    if (xhr.status === 200) {
      const response = JSON.parse(xhr.responseText);
      if (response.success) {
        alert('City deleted successfully');
        listItem.remove();
      } else {
        alert('Failed to delete city');
      }
    }
  };
  const params = `id=${cityId}`;
  xhr.send(params);
}
et les php deletecity de html 
<?php
// Database connection parameters
$host = 'localhost:8080';
$username = 'islem';
$password = 'islem';
$database = 'voyage';

// Create a connection to the database
$connection = mysqli_connect($host, $username, $password, $database);

// Check if the connection was successful
if (!$connection) {
    die("Connection failed: " . mysqli_connect_error());
}

// Retrieve the city ID from the AJAX request
$cityId = $_POST['id'];

// Delete the city from the database
$query = "DELETE FROM cities WHERE id='$cityId'";

// Execute the query
$result = mysqli_query($connection, $query);

// Check if the delete was successful
if ($result) {
    $response = array('success' => true);
} else {
    $response = array('success' => false);
}

// Close the database connection
mysqli_close($connection);

// Send the response as JSON
echo json_encode($response);
?>
et celui de rcherche
<?php
// Database connection parameters
$host = 'localhost:8080';
$username = 'islem';
$password = 'islem';
$database = 'voyage';


// Create a connection to the database
$connection = mysqli_connect($host, $username, $password, $database);

// Check if the connection was successful
if (!$connection) {
    die("Connection failed: " . mysqli_connect_error());
}

// Retrieve the search inputs from the AJAX request
$continentInput = strtolower($_POST['continent']);
$paysInput = strtolower($_POST['pays']);
$villeInput = strtolower($_POST['ville']);
$siteInput = strtolower($_POST['site']);

// Prepare the SQL query
$query = "SELECT * FROM cities WHERE continent LIKE '%$continentInput%' AND pays LIKE '%$paysInput%' AND ville LIKE '%$villeInput%' AND site LIKE '%$siteInput%'";

// Execute the query
$result = mysqli_query($connection, $query);

// Create an array to store the search results
$searchResults = array();

// Fetch the rows from the result
while ($row = mysqli_fetch_assoc($result)) {
    $searchResults[] = $row;
}

// Close the database connection
mysqli_close($connection);

// Send the search results as JSON
echo json_encode($searchResults);
?>