Hvordan vise forsinket databaseverdi på nettside?

r2d290 · 17. februar 2014

Heisann

Har laget en enkel nettside som sender to verdier til en MySQL database når jeg trykker på Send. Disse to verdiene leses av fra et program på en mikrokontroller som i sin tur bruker et sekund på å beregne gjenomsnittet av disse to verdiene, for så å sende det tilbake til databasen (Det er ikke egentlig dette som skjer, men prinsippet blir det samme).

Tabellen har 3 felt: verdi1, verdi2, og gjennomsnitt

Det er kun verdi1 og verdi2 som blir lagt inn når man sender verdiene fra websiden, og når mikrokontrolleren er ferdig med å regne gjennomsnittet så oppdaterer den denne linja, så gjennomsnitt-verdien blir plassert i samme rad.

Så langt har jeg fått til. Det jeg lurer på er hvordan jeg på en mest mulig elegant måte kan presentere svaret til brukeren.

Vedlagt bilde av den aktuelle .php-siden.

17. februar 2014

I PHP kan man jo:

$start = new DateTime();
/* DIN KODE HER */
$end = new DateTime();
$end = $start->diff($end);
echo $end->format( '%I:%S' ); // -> 05:25 (Minutter : Sekunder)

Endret 19. februar 2014 av Gjest

r2d290 · 17. februar 2014

Leste noe snakk om at man ikke kunne oppdatere variabler direkte i PHP, siden den sto på serversiden og ikke klientsiden. At man måtte bruka Ajax og no sånt? Er det mye jobb å få til?

Endret 17. februar 2014 av r2d290

19. februar 2014

Det stemmer det, PHP er et serverside språk hvor serveren behandler data og presenterer til brukes på klientside.

For at klientside skal kunne endre data på serverside i realtime er Ajax ofte brukt via Javascript.

Man kan også se på Socket.IO + Node.JS som fungerer fint sammen. Da kan man slippe PHP på serversiden, og man får et rent Javascript-miljø (server -> klient, vice versa til å snakke sammen).

quantum · 19. februar 2014

Leste noe snakk om at man ikke kunne oppdatere variabler direkte i PHP, siden den sto på serversiden og ikke klientsiden.

Hm, vet ikke helt hva du mener, men php kan ikke "se" f.eks. javascriptkode på klienten og aksessere variable der. Men du kan likevel assigne verdier til javascriptvariable ved å kalle php-kode på klienten, eller være litt mer avansert og bruke ajax som du selv foreslår.

Det enkleste for deg må vel bare være å la php-koden sove i 1.5 sek og så lese opp alt fra databasen og vise som html?

r2d290 · 19. februar 2014

Det enkleste for deg må vel bare være å la php-koden sove i 1.5 sek og så lese opp alt fra databasen og vise som html?

Definitivt ikke en dum idé. Kanskje verdt å vurdere, men ikke like fancy da.

Jeg har prøvd litt frem og tilbake. Fant et eksempel på bruk av jQuery som virket interessant. Den sender verdi til en database, og printer ut verdien fra databasen når den har blitt lagt inn. Et tilsvarende system hadde jo kunne fungert, men får det ikke helt til å settes i systemet mitt der jeg har 3 kolonner, putter inn de to verdiene jeg skal sende i de to første kolonnene, for så å vente på oppdatering til det kommer noe inn i 3. kolonne.

En annen ting jeg merker meg er at den utprintede verdien i dette eksempelet bare dukker opp "live" i den nettsiden jeg har oppe. Har jeg oppe to faner, kommer ikke siste beskjeden ut på den andre fanen før jeg oppdaterer siden eller poster en ny kommentar i den andre fanen. Jeg trodde halve poenget skulle være at dette var en form for "live" oppdatering?

comment.php

<html>
   <head>
 
       <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
       <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
        
       <script type="text/javascript">
               $(document).ready(function(){
 
                    function showComment(){
                      $.ajax({
                        type:"post",
                        url:"process.php",
                        data:"action=showcomment",
                        success:function(data){
                             $("#comment").html(data);
                        }
                      });
                    }
 
                    showComment();
 
 
                    $("#button").click(function(){
 
                          var name=$("#name").val();
                          var message=$("#message").val();
 
                          $.ajax({
                              type:"post",
                              url:"process.php",
                              data:"name="+name+"&message="+message+"&action=addcomment",
                              success:function(data){
                                showComment();
                                  
                              }
 
                          });
 
                    });
               });
       </script>
   </head>
 
   <body>
        <form>
               name : <input type="text" name="name" id="name"/>
               </br>
               message : <input type="text" name="message" id="message" />
               </br>
               <input type="button" value="Send Comment" id="button">
                
               <div id="info" />
               <ul id="comment"></ul>
        </form>
   </body>
</html>

process.php

<?php
  mysql_connect("localhost","root","");
  mysql_select_db("php_databaseajax");
 
   
  $action=$_POST["action"];
 
  if($action=="showcomment"){
     $show=mysql_query("Select * from comment order by id desc");
 
     while($row=mysql_fetch_array($show)){
        echo "<li><b>$row[name]</b> : $row[message]</li>";
     }
  }
  else if($action=="addcomment"){
    $name=$_POST["name"];
    $message=$_POST["message"];
 
     $query=mysql_query("INSERT INTO comment(name,message) values('$name','$message') ");
 
     if($query){
        echo "Your comment has been sent";
     }
     else{
        echo "Error in sending your comment";
     }
  }
?>

Kilde: http://phpseason.wordpress.com/2013/02/15/ajax-add-retrieve-mysql-records-using-jquery-php/

Endret 19. februar 2014 av r2d290

19. februar 2014

Ajax i seg selv, lar deg ikke live oppdatere meldinger på klient siden. Skal du absolutt ha live, må du se på Socket.IO.

Ellerså må du se på setTimeout-funksjonen til Javascript, som lar deg kjøre en funksjon etter hvist antall sekunder.

F.eks:
PSUDO KODE:

function getData() {
// kjør ajax her
}
 
document.ready() {
var timeoutID; // lagrer timeoutID slik at man også kan stoppe setTimeout om nødvendig
 
timeoutID = setTimeout(getData, 5000); // kjører getData hvert 5 sekund
}

Dette er ikke den mest elegante måten, men fungerer helt fint

r2d290 · 20. februar 2014

Takk, det hjalp meg et stykke på vei i videre søk etter eksempel. Liker å starte med et fungerende eksempel, og jobbe ut ifra det.

Fant følgende kode som virker som å være akkurat det jeg trenger. Den skal oppdatere siden x antall sekunder etter at det har skjedd en endring i databasen, og bare da. Han som skrev koden, skriver at dette kan brukes på tekst så vell som bilder. For min del er det jo tekst jeg skal ha ut.

Noen innspill om hvordan tabellen må settes opp, og hvilke endringer som må gjøres for å få det til å fungere for meg? Altså at jeg først fyller inn 2 av 3 felt i en tabell, og så skal den lytte til når det skjer en oppdatering i tredje feltet.

timer.php

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
        $(document).ready(function(){


            setInterval(function(){
                $("#quotex a").load("check.php?tim=<?php print date("Y-m-d H:i:s"); ?>");
            }, 5000);

        });
        </script>

        <div id="quote"><a></a></div>


        <div id="quotex"><a></a></div>

check.php

 <?php 
     // Connects to your Database 
     mysql_connect("localhost", "username", "password") or die(mysql_error()); 
     mysql_select_db("database name") or die(mysql_error()); 



     // SQL query
        $strSQL = "SELECT * FROM wp_posts WHERE   post_mime_type LIKE 'image/jpeg' ORDER BY `wp_posts`.`id`  DESC LIMIT 1";

        // Execute the query (the recordset $rs contains the result)
        $rs = mysql_query($strSQL);

        // Loop the recordset $rs
        // Each row will be made into an array ($row) using mysql_fetch_array
        while($row = mysql_fetch_array($rs)) {

        $atime = $row['post_date'];

    $tizz = $_GET['tim'];    

    $dsff = $row['post_date'];;

    $duff = date("Y-m-d H:i:s");

    //convert the date-time into seconds so we can extract 6 seconds from it
    $six = strtotime(date("Y-m-d H:i:s"))-6; 

    //convert the latest image date-time too from database so we can compare it
     $sox = strtotime("$dsff");

     if ($six < $sox)
      {
      echo '<script type="text/javascript">$(document).ready( function(){ $("#quote a").load("display.php?timm='. $tizz .'"); } ); </script>';
      }
          }

        // Close the database connection
        mysql_close();


     ?>

display.php

<?php 
$tipp = $_GET["timm"];
 // Connects to your Database 
 mysql_connect("localhost", "username", "password") or die(mysql_error()); 
 mysql_select_db("database name") or die(mysql_error()); 




 // SQL query
    $strSQL = "SELECT * FROM wp_posts WHERE   post_mime_type LIKE 'image/jpeg' AND post_date > '$tipp' ORDER BY `wp_posts`.`id`  DESC LIMIT 10";
    // Execute the query (the recordset $rs contains the result)
    $rs = mysql_query($strSQL);

    // Loop the recordset $rs
    // Each row will be made into an array ($row) using mysql_fetch_array
    while($row = mysql_fetch_array($rs)) {
    //guid is the column where the image url is located in the wordpress database table
    $atime = $row['guid'];

     echo "<img src='". $atime ."' /><br />";
      }
    // Close the database connection
    mysql_close();


 ?>

http://stackoverflow.com/questions/12424795/refresh-a-divs-content-only-if-new-content-is-added-to-the-database

r2d290 · 23. februar 2014

Ingen?

quantum · 24. februar 2014

Det enkleste for deg må vel bare være å la php-koden sove i 1.5 sek og så lese opp alt fra databasen og vise som html?

Definitivt ikke en dum idé. Kanskje verdt å vurdere, men ikke like fancy da.

Du ser ut til å forveksle "fancy" med "støy". Så lenge du ikke modifiserer programmet som legger den tredje verdien i databasen til også å få nettsiden til å oppdatere seg (noe som sikkert er en utfordring siden det kjører på en microchip), er ikke alle de fancy'e løsningen du ser for deg med ajax og jquery og whatnot annet enn støy. Du må enten ha en sleep i koden din ett eller annet sted, eller en løkke som står og poller (men det er ikke så vakkert akkurat), og det kan du enklest gjøre rett i php-koden din. Om det derimot er den *morsomste* løsningen ... nei se det blir et helt annet spørsmål

r2d290 · 24. februar 2014

Fant en slags løsning ved å kombinere to eksempler:

http://stackoverflow.com/questions/9406950/updating-html-element-every-second-with-content-from-mysql-database

og

http://openenergymonitor.org/emon/node/107

api.php

<?php

  //--------------------------------------------------------------------------
  // Example php script for fetching data from mysql database
  //--------------------------------------------------------------------------
  $host = "localhost";
  $user = "root";
  $pass = "123456";

  $databaseName = "ajax01";
  $tableName = "variables";

  //--------------------------------------------------------------------------
  // 1) Connect to mysql database
  //--------------------------------------------------------------------------
  include 'DB.php';
  $con = mysql_connect($host,$user,$pass);
  $dbs = mysql_select_db($databaseName, $con);

  //--------------------------------------------------------------------------
  // 2) Query database for data
  //--------------------------------------------------------------------------
  $result = mysql_query("SELECT * FROM $tableName");          //query
  $array = mysql_fetch_row($result);                          //fetch result

  //--------------------------------------------------------------------------
  // 3) echo result as json
  //--------------------------------------------------------------------------
  echo json_encode($array);

?>

client.php

<!---------------------------------------------------------------------------
Example client script for JQUERY:AJAX -> PHP:MYSQL example
---------------------------------------------------------------------------->

<html>
  <head>
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
  </head>
  <body>

  <!-------------------------------------------------------------------------
  1) Create some html content that can be accessed by jquery
  -------------------------------------------------------------------------->
  <h2> Client example </h2>
  <h3>Output: </h3>
  <div id="output">this element will be accessed by jquery and this text replaced</div>

  <script id="source" language="javascript" type="text/javascript">

  var statusIntervalId = window.setInterval(update, 1000);

  function update()
//  $(function ()
  {
    //-----------------------------------------------------------------------
    // 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/
    //-----------------------------------------------------------------------
    $.ajax({
      url: 'api.php',                  //the script to call to get data
      data: "",                        //you can insert url argumnets here to pass to api.php
                                       //for example "id=5&parent=6"
      dataType: 'json',                //data format
      success: function(data)          //on recieve of reply
      {
        var id = data[0];              //get id
        var vname = data[1];           //get name
        //--------------------------------------------------------------------
        // 3) Update html content
        //--------------------------------------------------------------------
        $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname); //Set output element html
        //recommend reading up on jquery selectors they are awesome
        // http://api.jquery.com/category/selectors/
      }
    });
//  });
  }

  </script>
  </body>
</html>

quantum · 26. februar 2014

husk å bruke clearInterval når den kalkulerte verdien er blitt lest ...

edit: siden dette ikke egentlig har noe med database å gjøre får du kanskje enda smartere svar i en gruppe som omhandler webprogrammering ...

Endret 26. februar 2014 av quantum

Logg inn

Hvordan vise forsinket databaseverdi på nettside?

Anbefalte innlegg

r2d290

Lenke til kommentar

Videoannonse

Gjest

Lenke til kommentar

r2d290

Lenke til kommentar

Gjest

Lenke til kommentar

quantum

Lenke til kommentar

r2d290

Lenke til kommentar

Gjest

Lenke til kommentar

r2d290

Lenke til kommentar

r2d290

Lenke til kommentar

quantum

Lenke til kommentar

r2d290

Lenke til kommentar

quantum

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Grønnskjær på tv bilde

AP går inn for fri abort til uke 18 1 2 3 4 56

Presidentvalget i USA 2024 1 2 3 4 515

Tesla - kaféen 1 2 3 4 433

Hvem er aktive 0 medlemmer