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

Dołącz do dyskusji, napisz odpowiedź!

Jeśli masz już konto to zaloguj się teraz, aby opublikować wiadomość jako Ty. Możesz też napisać teraz i zarejestrować się później.
Uwaga: wgrywanie zdjęć i załączników dostępne jest po zalogowaniu!

Gość
Dołącz do dyskusji! Kliknij, aby zacząć pisać...

×   Wklejony jako tekst z formatowaniem.   Przywróć formatowanie

  Dozwolonych jest tylko 75 emoji.

×   Twój link będzie automatycznie osadzony.   Wyświetlać jako link

×   Twoja poprzednia zawartość została przywrócona.   Wyczyść edytor

×   Nie możesz wkleić zdjęć bezpośrednio. Prześlij lub wstaw obrazy z adresu URL.


×
×
  • Utwórz nowe...