Webbserverprogrammering 1

Show sourcecode

The following files exists in this folder. Click to view.

Webserver1/Ovningar/mySQL/

admin.php
fetch_car_things.php
fetch_kompisar.php
fetch_users.php
mysql1.php
mysql2.php
mysql3.php
mysql3_satt_att_sortera.php
mysql3car.php
mysql3garage.php
mysql3owner.php
welcome.php

mysql1.php

272 lines UTF-8 Windows (CRLF)
<!-- insertpost.php -->
<?php 
  session_start
()
?>
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Hantera kompisar</title>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>

<body>
  <?php
  $message 
null;
  
$SQLop = isset($_POST['SQLop']) ? $_POST['SQLop'] : "insert";
  
$id = isset($_POST['id']) ? $_POST['id'] : 0;
  
$firstname = isset($_POST['firstname']) ? $_POST['firstname'] : "";
  
$lastname = isset($_POST['lastname']) ? $_POST['lastname'] : "";
  
$tel = isset($_POST['tel']) ? $_POST['tel'] : "";
  
$epost = isset($_POST['email']) ? $_POST['email'] : "";

  function 
createEmail() : string {
    global 
$firstname$lastname;
    return 
mb_convert_case(substr($firstname03) . substr($lastname03), MB_CASE_LOWER) . "23@varmdogymnasium.se";
  }
  function 
isSameDataAsPrevious() : bool {
    
$is_same true;
    foreach (
$_POST as $key => $value) {
      if (
$_POST[$key] != $_SESSION[$key]) {
        
$is_same false;
      }
    }
    return 
$is_same;
  }

  include(
'../../incl/dbconnection.php');
  
/**
   * @var PDO $dbconn
   */
  // Se till så att den inte lägger in dubletter om man laddar om sidan
  
if (!isSameDataAsPrevious()) {
    try {
      
# sql code
      
$sqlInsert "INSERT INTO kompisar (first_name, last_name, phone_number, email) 
          VALUES (?, ?, ?, ?)"
;

      
$sqlSelect "SELECT * FROM kompisar WHERE id=$id";

      
$sqlUpdate "UPDATE kompisar
      SET first_name = ?, last_name = ?, phone_number = ?, email = ?
      WHERE id=?"
;

      
$sqlDelete "DELETE FROM kompisar
      WHERE id=?"
;

      
# Handle selected operations accordingly
      
$stmt;
      
$data;
      
// echo "we are here";
      
if ($SQLop == "insert") {
        global 
$stmt$data;
        
$stmt $dbconn->prepare($sqlInsert);
        
$epost $epost != "" $epost createEmail();
        
$data = array($firstname$lastname$tel$epost);
      } elseif (
$SQLop == "update") {
        global 
$stmt;

        
# Set all values to the current value in table if not given by form, otherwise it would erase data
        
$result $dbconn->query($sqlSelect);

        
$row $result->fetch(PDO::FETCH_ASSOC);
        if (
$row) {
          
$firstname $firstname $firstname $row["first_name"];
          
$lastname $lastname $lastname $row["last_name"];
          
$tel $tel $tel $row["phone_number"];
          
$epost $epost $epost $row["email"];
        }
        
# Update values in table
        
$stmt $dbconn->prepare($sqlUpdate);
        
$data = array($firstname$lastname$tel$epost$id);
      } elseif (
$SQLop == "delete") {
        global 
$stmt;
        
$stmt $dbconn->prepare($sqlDelete);
        
$data = array($id);
      }
      
# execute width array-parameter
      
$stmt->execute($data);

      
// echo "Data tillagd i tabell";
      
$lastId $dbconn->lastInsertId();
      echo 
"id på sista posten: $lastId";
    } catch (
PDOException $e) {
      echo 
"<br>" $e->getMessage();
    }
  } else {
    echo 
"<p>data är samma som innan, inget gjordes.</p>";
  }
  
$dbconn null;
  echo 
$message;
  
// Save previous data to compare in order to avoid duplicates
  
foreach ($_POST as $key => $value) {
    
$_SESSION[$key] = $value;
  }
  
?>
  <form method="post" action="">
    <table>
      <tr>
        <td>Läge:</td>
        <td>
          <select name="SQLop" id="SQLop">
            <option value="insert">Lägg till</option>
            <option value="update">Uppdatera</option>
            <option value="delete">Ta bort</option>
          </select>
        </td>
      </tr>
      <tr id="idRow" class="hidden">
        <td>id*:</td>
        <td><input type="number" id="idInput" name="id">
      </tr>
      <tr id="fnameRow">
        <td id="fnameLabel">Förnamn*:</td>
        <td><input type="text" id="fnameInput" name="firstname" size=40 maxlength=100 required>
        </td>
      </tr>
      <tr id="lnameRow">
        <td id="enameLabel">Efternamn*:</td>
        <td><input type="text" id="enameInput" name="lastname" size=40 maxlength=100 required></td>
      </tr>
      <tr id="telRow">
        <td>Telefonnummer:</td>
        <td><input type="text" name="tel" size=10 maxlength=10></td>
      </tr>
      <tr id="emailRow">
        <td>Epost:</td>
        <td><input type="email" name="email" size=40 maxlength=200></td>
      </tr>
      <tr id="infoRow">
        <td>* = obligatoriskt</td>
      </tr>
      <tr>
        <td><button type="submit" id="submitButton">Lägg till</button></td>
        <td><button type="button" id="showButton">Visa tabell</button></td>
      </tr>
    </table>
  </form>
  <!-- This div will hold the table we fetch from the database -->
  <div id="tableContainer"></div>
</body>

<script>
  let selector = document.getElementById("SQLop")
  let rows = {
    "idRow": document.getElementById("idRow"),
    "fnameRow": document.getElementById("fnameRow"),
    "lnameRow": document.getElementById("lnameRow"),
    "telRow": document.getElementById("telRow"),
    "emailRow": document.getElementById("emailRow"),
  }
  let labels = {
    "fnameLabel": document.getElementById("fnameLabel"),
    "enameLabel": document.getElementById("enameLabel"),
  }
  let inputs = {
    "fnameInput": document.getElementById("fnameInput"),
    "enameInput": document.getElementById("enameInput"),
    "idInput": document.getElementById("idInput"),
  }
  let submitButton = document.getElementById("submitButton")
  let showButton = document.getElementById("showButton")

  // Update layout depending on selected SQL operation
  selector.addEventListener('change', (event) => {
    let value = event.target.value;
    switch (value) {
      case "insert": {
        rows["idRow"].classList.add("hidden")
        rows["fnameRow"].classList.remove("hidden")
        rows["lnameRow"].classList.remove("hidden")
        rows["telRow"].classList.remove("hidden")
        rows["emailRow"].classList.remove("hidden")

        labels["fnameLabel"].innerText = "Förnamn*:"
        labels["enameLabel"].innerText = "Efternamn*:"

        submitButton.innerText = "Lägg till"

        inputs["fnameInput"].required = true
        inputs["enameInput"].required = true
        inputs["idInput"].required = false
        break
      }
      case "update": {
        rows["idRow"].classList.remove("hidden")
        rows["fnameRow"].classList.remove("hidden")
        rows["lnameRow"].classList.remove("hidden")
        rows["telRow"].classList.remove("hidden")
        rows["emailRow"].classList.remove("hidden")

        labels["fnameLabel"].innerText = "Förnamn:"
        labels["enameLabel"].innerText = "Efternamn:"

        submitButton.innerText = "Uppdatera"

        inputs["fnameInput"].required = false
        inputs["enameInput"].required = false
        inputs["idInput"].required = true
        break
      }
      case "delete": {
        rows["idRow"].classList.remove("hidden")
        rows["fnameRow"].classList.add("hidden")
        rows["lnameRow"].classList.add("hidden")
        rows["telRow"].classList.add("hidden")
        rows["emailRow"].classList.add("hidden")

        submitButton.innerText = "Ta bort"

        inputs["fnameInput"].required = false
        inputs["enameInput"].required = false
        inputs["idInput"].required = false
        break
      }
    }
  });

  // Show items in table by clicking button
  showButton.addEventListener("click", async () => {
    try {
      const response = await fetch('fetch_kompisar.php');
      console.log(response);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      console.log("we here")
      const data = await response.json();
      console.log(data)

      const tableContainer = document.getElementById("tableContainer");

      if (data.length === 0) {
        tableContainer.innerHTML = `<p>Tabellen är tom.</p>`
      }

      // Build the table HTML
      let tableHTML = '<h2>Kompisar</h2><table border="1"><thead><tr><th>ID</th><th>Förnamn</th><th>Efternamn</th><th>Telefon</th><th>E-post</th></tr></thead><tbody>';
      data.forEach(row => {
        tableHTML += `<tr>
                        <td>${row.id}</td>
                        <td>${row.first_name}</td>
                        <td>${row.last_name}</td>
                        <td>${row.phone_number}</td>
                        <td>${row.email}</td>
                      </tr>`;
      });

      tableHTML += '</tbody></table>';
      tableContainer.innerHTML = tableHTML;
    }catch (error) {
      console.error('Kunde inte hämta tabelldata:', error);
      document.getElementById('tableContainer').innerHTML = '<p>Ett fel uppstod vid hämtning av data.</p>';
    }
  })
</script>

</html>