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

SOYER · Styczeń 20, 2019

@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 Styczeń 20, 2019 przez SOYER

ethanak · Styczeń 20, 2019

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"?

SOYER · Styczeń 20, 2019

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 Styczeń 20, 2019 przez SOYER

ethanak · Styczeń 20, 2019

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ł.

Produkcja i montaż PCB - wybierz sprawdzone PCBWay!
   • Darmowe płytki dla studentów i projektów non-profit
   • Tylko 5$ za 10 prototypów PCB w 24 godziny
   • Usługa projektowania PCB na zlecenie
   • Montaż PCB od 30$ + bezpłatna dostawa i szablony
   • Darmowe narzędzie do podglądu plików Gerber
Zobacz również » Film z fabryki PCBWay

SOYER · Styczeń 20, 2019

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...

ethanak · Styczeń 20, 2019

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ę.

Treker · Styczeń 20, 2019

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 😉

SOYER · Styczeń 20, 2019

@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 Styczeń 20, 2019 przez SOYER

ethanak · Styczeń 20, 2019

"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.

SOYER · Styczeń 20, 2019

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?

ethanak · Styczeń 20, 2019

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?

SOYER · Styczeń 20, 2019

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

ethanak · Styczeń 20, 2019

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

SOYER · Styczeń 20, 2019

czyli co samo:

succes:wpiszTemp,

?

ethanak · Styczeń 20, 2019

Dokładnie tak

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

Pomocna odpowiedź

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Polecacz 101

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Treker (Damian Szymański)

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Link do komentarza

Share on other sites

Dołącz do dyskusji, napisz odpowiedź!

Najnowsze posty w innych tematach