Wyciąganie danych z bazy mysql i wykorzystywanie ich w funkcji javascript

Question

php musi być zwyczajnie uszkodzone spróbowałem wszystkiego i nic nie działa

Comments

Musisz wyciągnąć z bazy danych płeć i ją użyć, czego konkretnie nie potrafisz zrobić? Nie widzę kodu odpowiadającego za łączenie z bazą.

---

nie wiem jak się połączyć z bazą w java scripcie

---

AJAX.

---

Również dobre rozwiązanie

---

@SzkolnyAdmin, znalazłem już godzinny kurs i z chęcią przerobię dziękuję i pozdrawiam

Answer 1

Wydaje mi się, że nie masz pojęcia o podstawowym schemacie podziału strony internetowej na Frontend oraz Backend. W dużym skrócie frontend to warstwa widoku aplikacji, czyli to co widzisz (html, css, js), backend to kod, którego nie jest w stanie zobaczyć przeglądarka i tam wykonuje się takie działania jak łączenie z bazą, rejestracja, logowanie etc.

W twoim przypadku za backend odpowiada język PHP, więc to w nim musisz utworzyć połączenie z bazą, pobrać informacje, a następnie przekazać je do warstwy widoku (czyli do miejsca gdzie wykonujesz obliczenia).

Comments

mam plik connect.php gdzie jestem połączony z bazą danych używałem go do systemu rejestracji i logowania. to teraz mam php pobrać z bazy tą płeć użytkownika, następnie wstawić ją jakoś do scryptu js i wtedy powinno działać?

---

Tak, do javascriptu przekazujesz ją w podobny sposób do wyświetlania danych w html. Gdyby coś niedziałało odpal sobie devtoolsy (Ctrl + Shift + I) i zobacz tam swój kod js.

---

dziękuję bardzo

---

Ewentualnie Ajax, o którym wspomniał SzkolnyAdmin, ale myślę, że w tym wypadku może być to gorsze rozwiązanie, ze względu na asynchroniczność i konieczność utworzenia endpointu dla requesta ajaxowego.

---

Parse error: syntax error, unexpected end of file in C:\xampp\htdocs\testjs\kalkulator.php on line 476 

po dodaniu połączenia

---

a 476 linia to koniec pliku

---

 require_once "connection.php";
    mysqli_report(MYSQLI_REPORT_STRICT);
    
    try 
    {
        $polaczenie = new mysqli($host, $db_user, $db_password, $db_name);
        if ($polaczenie->connect_errno!=0)
        {
            throw new Exception(mysqli_connect_errno());
        }
        else
        {
           
        }

dodałem to do php na górze

---

@trixter310, pewnie masz coś niedomkniętego i parser najpierw znalazł koniec pliku niż domknięcie.

---

sorry, że jeszcze wam głowę męczę, ale teraz usunąłem to połączenie i jakby wyświetla mi rzeczy z bazy w sensie tylko zmienną $_SESSION['user']

a wszystkie inne nie działają

Answer 2

Możesz po prostu zapisać np., tak

przykład

kalkulator.php

<?php
 
    session_start();
     
    if (!isset($_SESSION['zalogowany']))
    {
        header('Location: index.php');
        exit();
    }

    require_once "connection.php";

    $polaczenie = new mysqli($host, $db_user, $db_password, $db_name);
    if ($polaczenie->connect_errno)
    {
       throw new Exception(mysqli_connect_errno());
    }
    else
    {
       // przykładowy sql
       $sql = "SELECT plec FROM zarejestrowani WHERE id=$_SESSION['zalogowany_id']";
       if ($rezultat = $polaczenie->query($sql))
       {
          $wynik = $rezultat->fetch_assoc();
          $plec = $wynik['plec'];
       }  else {
          // problem z wynikiem zapytania sql
          // dopisz tu sobie sam kod
          $plec = '';
       }   
    }
    $polaczenie->close();
 
?>
<!DOCTYPE html>
<html lang="pl">
<head>
<?php include('templates/head.php'); ?> 

<script>
    function calc() {
    let A = document.getElementById("age").value;
    let W = document.getElementById("weight").value;
    let H = document.getElementById("height").value;
 
    let S, R, activity;
    let P = "<?php echo $plec; ?>";
 
 
  
    if (document.getElementById("age").value.length == 0) {
 
        document.getElementById("ATT").style = "color: red;"
        document.getElementById("WTT").style = "display: none;"
        document.getElementById("HTT").style = "display: none;"
 
        return
 
    }
 
    if (document.getElementById("weight").value.length == 0) {
 
        document.getElementById("ATT").style = "display: none;"
        document.getElementById("HTT").style = "display: none;"
        document.getElementById("WTT").style = "color: red;"
         
        return
 
    }
 
    if (document.getElementById("height").value.length == 0) {
 
        document.getElementById("ATT").style = "display: none;"
        document.getElementById("WTT").style = "display: none;"
        document.getElementById("HTT").style = "color: red;"
         
        return
 
    }
 
    if (document.getElementById("male").checked) {
        S =  Math.round((9.99*W)+(6.25*H)-(4.92*A)+5)
        //P = "mężczyzna"
    } 
    else if (document.getElementById("female").checked) {
        S =  Math.round((9.99*W)+(6.25*H)-(4.92*A)-161)
        //P = "kobieta"
    }
 
   
    if (document.getElementById("0").selected) {
        R = S
    }
 
   
    if (document.getElementById("1").selected) {
        R = S*1.2
        activity = "1. Niewielka/Brak treningów"
 
    }
 
  
    if (document.getElementById("2").selected) {
        R = S*1.35
        activity = "2. Niska aktywność (treningi 1-3 razy/tydzień)"
    }
 
    
    if (document.getElementById("3").selected) {
        R = S*1.55
        activity = "3. Średnia aktywność (codzienna aktywność lub intensywne treningi 3-4 razy/tydzień)"
 
    }
     
   
    if (document.getElementById("4").selected) {
        R = S*1.75
        activity = "4. Wysoka aktywność (intensywne treningi 6-7 razy/tydzień)"
 
    }
 
 
    if (document.getElementById("5").selected) {
        R = S*1.95
        activity = "5. Bardzo wysoka aktywność (codzienne bardzo intensywne treningi lub praca fizyczna)"
 
    }
 
    document.getElementById("ATT").style = "display: none;"
    document.getElementById("HTT").style = "display: none;"
    document.getElementById("WTT").style = "display: none;"
 
    document.getElementById("age").placeholder = " "
    document.getElementById("weight").placeholder = "Kg"
    document.getElementById("height").placeholder = "Cm"
 
    document.getElementById("a").innerHTML = Math.round(R)
    document.getElementById("b").innerHTML = Math.round(R*0.80)
    document.getElementById("c").innerHTML = Math.round(R*1.20)
 
 
    document.getElementById("ak").innerHTML = Math.round(R)
    document.getElementById("ak-2").innerHTML = Math.round(S)
    document.getElementById("a-1k").innerHTML = Math.round((R*0.80)*0.25)
    document.getElementById("a-1g").innerHTML = Math.round(((R*0.80)*0.25)/4)
    document.getElementById("a-2k").innerHTML = Math.round((R*0.80)*0.50)
    document.getElementById("a-2g").innerHTML = Math.round(((R*0.80)*0.50)/4)
    document.getElementById("a-3k").innerHTML = Math.round((R*0.80)*0.25)
    document.getElementById("a-3g").innerHTML = Math.round(((R*0.80)*0.25)/9)
 
 
 
 
 
    document.getElementById("bk").innerHTML = Math.round(R)
    document.getElementById("bk-2").innerHTML = Math.round(S)
    document.getElementById("b-1k").innerHTML = Math.round((R*0.80)*0.25)
    document.getElementById("b-1g").innerHTML = Math.round(((R*0.80)*0.25)/4)
    document.getElementById("b-2k").innerHTML = Math.round((R*0.80)*0.50)
    document.getElementById("b-2g").innerHTML = Math.round(((R*0.80)*0.50)/4)
    document.getElementById("b-3k").innerHTML = Math.round((R*0.80)*0.25)
    document.getElementById("b-3g").innerHTML = Math.round(((R*0.80)*0.25)/9)
    document.getElementById("bs").innerHTML = Math.round(R-(R*0.80))
 
 
    document.getElementById("ck").innerHTML = Math.round(R)
    document.getElementById("ck-2").innerHTML = Math.round(S)
    document.getElementById("c-1k").innerHTML = Math.round((R*1.20)*0.25)
    document.getElementById("c-1g").innerHTML = Math.round(((R*1.20)*0.25)/4)
    document.getElementById("c-2k").innerHTML = Math.round((R*1.20)*0.50)
    document.getElementById("c-2g").innerHTML = Math.round(((R*1.20)*0.50)/4)
    document.getElementById("c-3k").innerHTML = Math.round((R*1.20)*0.25)
    document.getElementById("c-3g").innerHTML = Math.round(((R*1.20)*0.25)/9)
    document.getElementById("cs").innerHTML = Math.round((R*1.20)-R)
 
    document.getElementById("Final").style = " margin: auto; margin-top: 1em; border-radius: 20px; margin-bottom: 30px"
 
 
    if (document.getElementById("more").selected) {
        document.getElementById("less-text-1").style = "display: none;"
        document.getElementById("less-text-2").style = "display: none;"
        document.getElementById("constant-text-1").style = "display: none;"
        document.getElementById("constant-text-2").style = "display: none;"
        document.getElementById("more-text-1").style = "display: block;"
        document.getElementById("more-text-2").style = "display: table-row;"
        document.getElementById("more-text-1").scrollIntoView();
        dataLayer.push({
            'event': 'calc',
            'cel': 'chce przytyć',
            'waga': W,
            'wiek': A,
            'wzrost' : H,
            'płeć' : P,
            'aktywność' : activity
        });
 
    }
    if (document.getElementById("less").selected) {
        document.getElementById("more-text-1").style = "display: none;"
        document.getElementById("more-text-2").style = "display: none;"
        document.getElementById("constant-text-1").style = "display: none;"
        document.getElementById("constant-text-2").style = "display: none;"
        document.getElementById("less-text-1").style = "display: block;"
        document.getElementById("less-text-2").style = "display: table-row;"
        document.getElementById("less-text-1").scrollIntoView();
        dataLayer.push({
            'event': 'calc',
            'cel': 'chce schudnąć',
            'waga': W,
            'wiek': A,
            'wzrost' : H,
            'płeć' : P,
            'aktywność' : activity
        });
 
    }
    if (document.getElementById("constant").selected) {
        document.getElementById("more-text-1").style = "display: none;"
        document.getElementById("more-text-2").style = "display: none;"
        document.getElementById("less-text-1").style = "display: none;"
        document.getElementById("less-text-2").style = "display: none;"
        document.getElementById("constant-text-1").style = "display: block;"
        document.getElementById("constant-text-2").style = "display: table-row;"
        document.getElementById("constant-text-1").scrollIntoView();
        dataLayer.push({
            'event': 'calc',
            'cel': 'utrzymanie wagi',
            'waga': W,
            'wiek': A,
            'wzrost' : H,
            'płeć' : P,
            'aktywność' : activity
        });
 
      
    }
} 
</script>
</head>
<body>
    <section class="home">
    <div class="container2">
    <div class="title">Oblicz zapotrzebowanie kaloryczne</div>
    <div class="content">
    <div class="user-details">
 
 
  <div class="input-box">
<span class="details" id="AT"> Wiek</span>
    <input type="number" min="0" id="age" placeholder=""
    style="border-width: 2px; border-radius: 5px;">
    <div style="display: none;" id="ATT">Wpisz prawidłowy wiek</div>
    </div>
 
    <div class="input-box">
<span class="details">Waga</span>
    <input type="number" min="0" id="weight"
    style="border-width: 2px; border-radius: 5px;" placeholder="Kg">
    <div style="display: none;" id="WTT">Wpisz prawidłową wagę</div>
    </div>
 
    <div class="input-box">
<span class="details">Wzrost</span>
    <input type="number" min="0" id="height"
    style="border-width: 2px; border-radius: 5px;" placeholder="Cm">
    <div style="display: none;" id="HTT">Wpisz prawidłowy wzrost</div>
    </div>
 
 
 
 
    <div class="input-box">
<span class="details">Poziom aktywności</span>
<select class="I2">
  <option value="1" id="1">1. Niewielka/Brak treningów</option>
  <option value="2" id="2">2. Niska aktywność (treningi 1-3 razy/tydzień)</option>
  <option value="3" id="3">3. Średnia aktywność (codzienna aktywność lub intensywne treningi 3-4 razy/tydzień)</option>
  <option value="4" id="4">4. Wysoka aktywność (intensywne treningi 6-7 razy/tydzień)</option>
  <option value="5" id="5">5. Bardzo wysoka aktywność (codzienne bardzo intensywne treningi lub praca fizyczna)</option>
  <option value="0" id="0" style="display:none;">1. Bazowe zapotrzebowanie kaloryczne (BMR)</option>
</select>
</div>
 
<div class="input-box">
<span class="details">Jaki jest cel Twojej diety?</span>
<select class="I2"> 
  <option value="less" id="less">1. Chce schudnąć</option>
  <option value="constant" id="constant">2. Chcę utrzymać wagę</option>
  <option value="more" id="more">3. Chcę przytyć</option>
</select>
</div>
 
 
 
 
<div class="button">
<button id="button-calc" type="button" onclick="calc()">Oblicz</button>
</div>
 
</div>
</div>
</div>