Skocz do zawartości
SOYER

Arduino MEGA i BLYNK, LCD odchodzi do lamusa...

Pomocna odpowiedź

(edytowany)

@ethanak chodziło o takie coś:

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="utf-8" />
    
    <script type="text/javascript">
    
        function liczenie()
        {
            var liczba = document.getElementById("pole").value;
            var wynik = liczba*liczba;
            document.getElementById("wynik").innerHTML=wynik;
        }
    </script>
</head>

<body>
<h1>Liczymy kwadrat wartości</h1><br/>
<h2>Wpisz jakąś liczbę:<h2/>
    <input type="text" id="pole" />
    <input type="submit" value="Policz" onclick="liczenie()"/>
    <h1>Kwadratem tej liczby jest: </h1>
    <h1 id="wynik">wynik</h1>

</body>

</html>

?

W javascript, działa, ale gdzie tu php?

Edytowano przez SOYER

Udostępnij ten post


Link to post
Share on other sites
36 minut temu, SOYER napisał:

W javascript, działa, ale gdzie tu php?

Zaraz będzie, spokojnie. Chodziło mi o to, żeby nie robić dwóch rzeczy na raz 🙂

Uprośćmy teraz do granic możliwości program w PHP który wyświetlał kwadrat liczby. Niech wynikiem jego działania będzie tylko liczba wynikowa:

<?php
    $a=$_REQUEST['factor'];
    echo $a * $a;
?>

Wrzuć go na serwer pod nazwą square.php i sprawdź czy działa, np tak (za "cośtam" wiesz co podstawić):

http://cośtam/square.php?factor=5

Teraz możemy lekko przerobić Twój kod, aby zamiast sam liczyć zwalił czarną robotę na serwer. Oczywiście, i tu można się obejść bez jQuery - ale to nie ma większego sensu, kod wywołania requestu jest zależny od przeglądarki, jeśli się będziesz nudzić poczytaj sobie kiedyś o XMLHttpRequest, po prostu aby wiedzieć co tam siedzi pod maską.

A więc przede wszystkim: musimy dołączyć bibliotekę jQuery. Oprócz tego stwórzmy funkcję odpowiedzialną za wyświetlanie (dobrym zwyczajem jest oddzielenie wyświetlania od obliczeń czy komunikacji z serwerem - choćby ze względu na łatwość wprowadzania zmian). Funkcja będzie baaaaaardzo prosta, po prostu z lenistwa ukradnę jedną linijkę z Twojej funkcji "liczenie":

function wyswietl(wynik)
{
	document.getElementById("wynik").innerHTML=wynik;
}

Pozostaje nam jeszcze kwestia poinformowania serwera że ma coś tam policzyć i odebrania wyników. W tym celu zmodyfikuję funkcję "liczenie" dodając minimalne wywołania AJAX-a:

function liczenie()
{
	var liczba = document.getElementById("pole").value;
	$.ajax({
                'url' : 'square.php',
                'data': {'factor': liczba},
                'success': wyswietl
                });
}

Znaczenie chyba jest jasne. 'url' to adres programu w PHP wykonującego obliczenia, 'data' to słownik zawierający przesyłane dane (czyli to samo co po znaku zapytania w URL-u), 'success' to funkcja wywołana po otrzymaniu danych.

Tak więc cała sekcja head będzie wyglądać tak:

<head>
    <meta charset="utf-8" />

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"><
    <script type="text/javascript">

        function wyswietl(wynik)
        {
            document.getElementById("wynik").innerHTML=wynik;
        }
        function liczenie()
        {
            var liczba = document.getElementById("pole").value;
            $.ajax({
                'url' : 'square.php',
                'data': {'factor': liczba},
                'success': wyswietl
                });
        }
    </script>
</head>

Sprawdź czy działa... jeśli tak, to masz bojowe zadanie:

zmodyfikować kod Twojej strony wyświetlającej dane o jakości powietrza tak, aby korzystała z serwera. Skrypt PHP powinien przyjmować dwa parametry: jakie dane mamy wyświetlić oraz miano liczby, czyli coś w stylu:

'data' : {'what': 'pm10', 'name': 'µg/m³'}

Użyj na razie funkcji symulującej pobieranie z bazy danych (gdzieś tam podawałem) zwracającej losowy wynik.

Z ciekawości: dlaczego tak się bronisz przed zastosowaniem "a"?

Udostępnij ten post


Link to post
Share on other sites
(edytowany)
31 minut temu, ethanak napisał:

Z ciekawości: dlaczego tak się bronisz przed zastosowaniem "a"?

Na razie tylko odpowiedź na to ostatnie pytanie, nic nie wiem o "a", korzystam z kursów Mirka Zelenta, poprzedni kod napisałem dzięki {(http://miroslawzelent.pl/kurs-php/programowanie-tworzenie-stron-www/)jeśli ten link to reklama to proszę moderatora o usunięcie }on tam głównie operuje na "div", ale jak widzisz w ostatnim kodzie używałem "h", co zauważyłem, sterowanie klawiaturą(tab) działa;-). Oprócz tego w3school, fajne przykłady i da się coś zrozumieć pomimo mojej "takiej sobie" znajomości angielskiego. Po prostu nikt mi jeszcze praktycznie nie pokazal jak stosowac a...

Co zauważyłem: MIELIŚCIE RACJĘ WSZYSCY, kiedy pisaliście mi na co sie porywam, pisząc własną stronę....

Arduino to była igraszka;-)... ale zaczynam łapać, gdzie kluczowe jest słowo zaczynam;-)

Edytowano przez SOYER

Udostępnij ten post


Link to post
Share on other sites
4 minuty temu, SOYER napisał:

Po prostu nikt mi jesycye praktzcynie nie pokazal jak stosowac a...

Rozumiem że na http://www.rivendell.eu.org/soyer/test_01.html to się nie chciało zajrzeć? Przecież podawałem link...

 

8 minut temu, SOYER napisał:

korzystam z kursów Mirka Zelenta,

Ja bym jednak poszukał czegoś innego - nie sprawdzałem więc sie nie będę autorytatywnie wypowiadać, ale jakiś divitis na dzień dobry to nie jest dobry sygnał.

 

Udostępnij ten post


Link to post
Share on other sites
1 minutę temu, ethanak napisał:

Ja bym jednak poszukał czegoś innego - nie sprawdzałem więc sie nie będę autorytatywnie wypowiadać, ale jakiś divitis na dzień dobry to nie jest dobry sygnał.

Sprawdź, choćby ten link co podałem w poprzednim poście.... myslę, że warto chociaż wiedzieć o co mi chodzi... 

Ja na razie układam sobie w głowie Twoje zadanie...

Udostępnij ten post


Link to post
Share on other sites
34 minuty temu, SOYER napisał:

Sprawdź, choćby ten link co podałem w poprzednim poście.... myslę, że warto chociaż wiedzieć o co mi chodzi... 

Kurs video... nie, dziękuję.

  • Lubię! 1

Udostępnij ten post


Link to post
Share on other sites

Wspomniany kurs: http://miroslawzelent.pl/kurs-html/ Drugi artykuł od góry: http://miroslawzelent.pl/kurs-html/hiperlacza-linki-w-html/

1 godzinę temu, SOYER napisał:

Co zauważyłem: MIELIŚCIE RACJĘ WSZYSCY, kiedy pisaliście mi na co sie porywam, pisząc własną stronę....

Arduino to była igraszka;-)... ale zaczynam łapać, gdzie kluczowe jest słowo zaczynam;-)

Moim zdaniem Arduino i elektronika jest trudniejsza do opanowania od html/css. Twój problem polega na tym, że rzuciłeś się teraz na 5-6 nowych technologii jednocześnie 😉

  • Pomogłeś! 1

Udostępnij ten post


Link to post
Share on other sites
(edytowany)

@Treker Ja chcę tylko prosta stronke zrobić i żeby ładna była i żeby pobierała dane z serwera i żeby ten serwer był na malince i żeby każdy mógł tą stronę zobaczyć i żeby na ten serwer moje arduino wysyłało dane i już nic wiecej....😉

@ethanakZrobiłem coś takiego:

pliki w kolejnosci: logMeteo.php, getData.php,  ostatne to funkcje w głównym kodzie...

<?php
$host = "localhost";
$db_user = "xxxi";
$db_pass = "xxx";
$db_name = "meteokryry";
?>
<?php
require_once "logMeteo";
$polaczenie = new mysqli($host, $db_user, $db_pass, $db_name);
if($polaczenie->connect_errno!=0){
    echo "Error: ".$polaczenie->connect_errno."Opis: ".$polaczenie->connect_error;
}
else{
    $sqlTemp='SELECT aktualna FROM meteo WHERE czujniki="temperatura"';
    $temperatura=$polaczenie->query($sqlTemp);
    $polaczenie->close();
    }
?>
<script>
function wpiszTemp($temperatura){
    document.getElementById("wyniki").innerHTML = $temperatura+" *C ";};
}
</script>
<script>
function pobierzTemp(){
   $.ajax({url:"getData.php", 
          success:wpiszTemp($temperatura),
   });
}
</script>
document.getElementById("temp").addEventListener("click", function(){pobierzTemp();});

 

W którym z tych przykładów nie ma błędów;-)?

Edytowano przez SOYER

Udostępnij ten post


Link to post
Share on other sites

"logMeteo" != "logMeteo.php"

w success w ajaksie podajesz funkcję a nie wywołujesz funkcję (delikatna różnica).

W SQL-u stringi się chowa w apostrofy.

A poza tym miałeś zrobić coś innego.

I zostaw ten addEventListener, używaj onclick jak wszyscy normalni.

  • Lubię! 1
  • Pomogłeś! 1

Udostępnij ten post


Link to post
Share on other sites
24 minuty temu, ethanak napisał:

w success w ajaksie podajesz funkcję a nie wywołujesz funkcję (delikatna różnica).

no właśnie z tym success-em mam problem... po pierwsze co mi zwraca getData.php?, a po drugie co z tym successem? 

Udostępnij ten post


Link to post
Share on other sites
2 minuty temu, SOYER napisał:

po pierwsze co mi zwraca getData.php?

Sprawdź... możesz się zdziwić 😉

Co do success: rozumiesz, jaka jest różnica między funkcją a wywołaniem funkcji?

Udostępnij ten post


Link to post
Share on other sites

funkcja to facet który robi jakąś konkretną robotę, a wywołanie to poproszenie tego gościa by zrobił swoje... 

Udostępnij ten post


Link to post
Share on other sites

Otóż to. Więc po co w success prosisz tego faceta o wyświetlenie temperatury zamiast pokazać Ajaxowi którego faceta ma zawołać?

Udostępnij ten post


Link to post
Share on other sites

czyli co samo:

succes:wpiszTemp, 

Udostępnij ten post


Link to post
Share on other sites

Dokładnie tak

  • Lubię! 1

Udostępnij ten post


Link to post
Share on other sites

Bądź aktywny - zaloguj się lub utwórz konto!

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto w ~20 sekund!

Zarejestruj nowe konto, to proste!

Zarejestruj się »

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się »

×