Lokale Webseite mit SQL erstellen

yllug · 14.09.14, 14:01

Hallo,

ich nutze zu Hause Funksteckdosen die ich mitells eines Microcontrollers auch über ein Webinterface steuern kann.
Nun möchte ich mir eine eigene Webseite erstellen mit dem Grundriss meiner Wohnung und den dem Standort der Funksteckdosen. Ich möchte mit einem Klick auf ein Lampen Icon die Lampe einschalten, worauf sich auch das Icon in eine eingaschaltete Lampe verändert und umgekehrt. Den Zustand der Lampen/Funksteckdosen möchte ich in einer Mysql Datenbank abspeichern.

Nun weiß ich nicht, wie ich eine Abfrage der Datenbank mit dem anzeigen des richtigen Icons herstellen kann. Habe schon mit PHP, AJAX und JAvas***** rumgespielt, leider steh ich grad ziemlich auf dem Schlauch und komme nicht weiter. Unten seht Ihr meinen aktuellen Code, ohne Datenbankabfrage. Ich hofe ihr könnt mir weiterhelfen!

PHP-Code:


			
<html>

<head>



<style type="text/css">

body {background-color: #818181;} 



#LampTv {

    position: absolute;

    left: 900px;

    top: 1000px;

    z-index: 1;

}

#LampSofa {

    position: absolute;

    left: 1280px;

    top: 1000px;

    z-index: 1;

}

#XBMC {

    position: absolute;

    left: 900px;

    top: 850px;

    z-index: 1;

}

</style>







<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Home-Page</title>

</head>

<body>

<?php

    //Verbindung zur Datenbank herstellen

    mysql_connect("localhost", "root","") or die ("Verbindung nicht möglich");

    mysql_select_db("homecontrol") or die ("Datenbank existiert nicht");

 

    //Lampe Couch auswählen

    $Funk1 = mysql_query(SELECT zustand FROM 'funksteckdosen' WHERE standort='Lampe Couch');

    //Funktion für DB Abfrage ob Lampe an oder aus.

    boolean $Lampengrafik = False;

    if Funk1 = "Aus" {

    $Lampengrafik = False;

    }else{

    $Lampengrafik = True;}

    

?>



<s*****>



//Funktion für Lampen

function Lampe(Url) {

    var xmlhttp;

    if (window.XMLHttpRequest) {

        xmlhttp = new XMLHttpRequest();

    }

    else 

    {

    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

    }

    xmlhttp.onreadystatechange = function () 

    {

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 

        {

        //document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

        }

        }

        xmlhttp.open("GET", Url , true);

        xmlhttp.send();

    }    

    

//Grafikewechsel bei klick Funktion

var SwitchImg = new Array();



// hier werden die URLs der Grafiken eingetragen



SwitchImg[1] = "ligthbulb_off.png";

SwitchImg[2] = "ligthbulb_on.png";

SwitchImg[3] = "raspi_off.png";

SwitchImg[4] = "raspi_on.png";





LampFlag = 'on'



    function Tauschen(DeviceId, x, y)

    {

      if (LampFlag == 'on'){

      document.getElementById(DeviceId).src = SwitchImg[x];

      LampFlag='off'

      }

      else

      {

      document.getElementById(DeviceId).src = SwitchImg[y];

      LampFlag='on'

      }

    }







        

</s*****>



<!Hintergrundbild = Wohnung>

<img src="bg_image.svg" id="background">

<!Link zur TV Lampe Wohnzimmer >

<img id="LampTv" onclick="Tauschen('LampTv', '1', '2'), Lampe('http://192.168.1.66/index.html?schalte&3')" src="ligthbulb_off.png">

<!Link zur Sofa Lampe Wohnzimmer>

<img id="LampSofa" onclick="Tauschen('LampSofa', '1', '2'), Lampe('http://192.168.1.66/index.html?schalte&1')" src="ligthbulb_off.png">

<!Link zum XBMC Raspberry Pi>

<img id="XBMC" onclick="Tauschen('XBMC', '3', '4'), Lampe('http://192.168.1.66/index.html?schalte&2')" src="raspi_off.png">

</body>

</html>

Delta538 · 15.09.14, 19:51

Ich habe zwar schon Jahrelang nichts mehr in dem Bereich gemacht aber sollte ich dich richtig verstanden haben kannst du das ohne weiteres mit PHP lösen.

Pseudocode:

Code:

werte = datenbank.ladeDaten("SELECT...") //du gibtst dir einen oder alle Werte zurück

while(werte.hasNext)  || alle Ergebnisse aus der Datenbank durchlaufen bis es keine mehr gibt //ich weiß nicht genau wie das in PHP gemacht wird
{
    val = werte.getValue() || einen Wert betrachten 
    if(val == true)
    {
        HTML-CODE ZUM LAMPE ANSCHALTEN
    }
    else
    {
       HTML-CODE ZUM AUSSCHALTEN  
     }
   

}

Das ganze ist jetzt vielleicht ein wenig unschön aber ich hab die PHP-Syntax nicht mehr drauf. Wenn ich dich aber richtig verstanden habe, sollte das Beispiel oben für dein Problem funktionieren. Du musst dir nur nocheinmal anschauen wie SQL-Abfragen in PHP realisiert werden, da du eventuell das Beispiel nicht 1zu1 übernehmen, da ich nicht weiß wie die Datenstrukturen aussehen die du in PHP mit einem SQL-Statement zurückbekommst.

Eine ganz simple Datenbankstruktur wäre z.B. folgende:

Code:

CREATE TABLE lamps
(lampID Integer primary key,
 isOn Integer  check(isOn between 0 and 1),
 name text not null);

Da kannst du nun alle:
1.

Code:

SELECT lampID, isOn FROM lamps;

zurückgeben lassen oder auch nur eine:
2.

Code:

SELECT isOn FROM lamps WHERE id=4

Bei dem ersten kannst du dann durch iterieren jeweils den Zustandabfragen und dementsprechend auch die Lampen (wie in dem kleinen Beispiel) setzten. Beim zweiten kannst du dass dann individuell anpassen undzwar für jede Lampe einzelnt.

weberleins · 16.09.14, 00:40

@yllug:
1. Wenn Du eine Antwort willst -> Dann stelle eine Frage und poste nicht einfach nur nen langen Code.
1.2. Hast du ein Problem mit einer Code-Stelle, dann poste diese - besser aber: Stelle Deine "Verständnis"-Frage. Den darum geht es hauptsächlich: wenn jemand etwas nicht versteht, es ihm/ihr so zu erklären, das die Person damit dann was anfangen kann. Und dann hat der jeweilige Thread zusätzlich auch noch Sinn für andere.
2. Wenn Du ein Problem einfach nur gelöst haben willst (ohne zu verstehen, warum es dann gelöst ist) -> es gibt unzählige Anleitungen UND fertige Codes (was Du willst ist nicht erkenntlich, da keine Frage) im Netz und die findet man z.B. dank Google und kann sie dann einfach verwenden. Idiotensicher.
3. Delta538 war so frei hat und Dir eine technische Möglichkeit (die bei mir Google-Ergebnis 4 ist) gepostet. SOLLTE das Deine Frage gewesen sein, dann dürfte sie ja jetzt beantwortet sein und Du kannst Dich freuen.

Wodddy · 20.06.18, 12:12

Zitat:

Zitat von weberleins

@yllug:
1. Wenn Du eine Antwort willst -> Dann stelle eine Frage und poste nicht einfach nur nen langen Code.
1.2. Hast du ein Problem mit einer Code-Stelle, dann poste diese - besser aber: Stelle Deine "Verständnis"-Frage. Den darum geht es hauptsächlich: wenn jemand etwas nicht versteht, es ihm/ihr so zu erklären, das die Person damit dann was anfangen kann. Und dann hat der jeweilige Thread zusätzlich auch noch Sinn für andere.
2. Wenn Du ein Problem einfach nur gelöst haben willst (ohne zu verstehen, warum es dann gelöst ist) -> es gibt unzählige Anleitungen UND fertige Codes (was Du willst ist nicht erkenntlich, da keine Frage) im Netz und die findet man z.B. dank Google und kann sie dann einfach verwenden. Idiotensicher.
3. Delta538 war so frei hat und Dir eine technische Möglichkeit (die bei mir Google-Ergebnis 4 ist) gepostet. SOLLTE das Deine Frage gewesen sein, dann dürfte sie ja jetzt beantwortet sein und Du kannst Dich freuen.

Was eine Mumu!

ChuckVinyard · 25.08.18, 18:38

Hallo,

ohne, dass ich jetzt selbst etwas geschrieben haben....

Zur Funktion der Lampe kann ich leider wenig sagen. Ich gehe mal davon aus, dass du die Funktion aus irgendeiner Doku hast und die Funktioniert.

Ich gebe mal zu viele Informationen (Besser als zu wenige :-D und vielleicht liest es auch noch jemand anders):
Zum allgemeinen Verständnis: JavaS***** wird auf deinem PC (in deinem Browser) ausgeführt. PHP hingegen auf eine Server. Bei einem lokalen Server wahrscheinlich auch dein PC, aber eben ein Server. MySQL läuft ebenfalls auf einem Server. Du kannst daher von PHP nach MySQL. Aus JavaS***** kommst du allerdings nicht auf MySQL, da du dich auf einer Anderen Ebene bewegst. Wenn du AJAX benutzt setzt du mit JavaS***** aus deinem Browser einen neuen Aufruf/Abfrage gegen deinen Server ab.
Du kannst also mit AJAX von JavaS***** wieder PHP und damit dann auch MySQL benutzen.
Das Ergebnis davon (das Ergebnis des PHP-S*****s welches du Aufrufst) kannst du verarbeiten und benutzen.

In deinem Fallbeispiel:
1. Du lädst deine Seite --> Abfrage PHP welches Icon passt.
2. PHP wird verarbeitet und erstellt eine Seite die vom Server an deinen Browser zurückgegeben wird.
2.1. Das bedeutet, dass du keine Variablen von PHP mehr im JavaS***** zur Verfügung hast. Gib mit "Echo" zurück, was auf der Seite stehen soll. Heißt für dich: In PHP kannst du schreiben "Echo '<div id="ergebnis">'.$VARIABLE_MIT_ERGEBNIS.'</div>' ([ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ])
3. Seite wird in deinem Browser gerendert
4. Du kannst mir JavaS***** abfragen, was in dem in PHP zurückgegebenen Div steht und benutzen um das Richtige Icon anzuzeigen.
5. Du Klickst auf das Icon
6. Der klick löst einen AJAX Aufruf aus (Vielleicht mal jQuery oder so benutzen. Dann wird AJAX deutlich leichter) [ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]
7. Das Skript das aufgerufen wird sollte auf deinem Server sein und aus PHP bestehen und dann die Datenbank verändern

Ist jetzt sehr quick and dirty und auch keine so richtig schöne lösung, aber wenn du mit den technologien ein bisschen herumspielst und der ablauf erstmal deutlich wird, dann wird auch der rest schöner :-)

Ich hoffe ich konnte einigermaßen helfen. Verlass dich nicht darauf, dass ich in einem Texteditor am Samstag abend keinen fehler gemacht habe :-)
Sollte ich zu viele Informationen gegeben oder Rechtschreibfehler gemacht haben ignorier sie einfach.

Viele Grüße

gopropsycho · 27.11.18, 04:55

@ChuckVinyard
Du weisst aber schon, dass die Frage von 2014 war?