PHP: Hantera/presentera data dynamiskt? php<->javascript

[JimmyAndersson]

Kort sagt så försöker jag lära mig att uppdatera en websidas innehåll dynamiskt på ett lite smidigare sätt.

I slutändan vill jag bl.a kunna ange ett filnamn, läsa från filen och presentera resultatet i webläsaren
utan att behöva uppdatera websidan. (Både filen och php-filerna finns på servern.)
Jag behöver även läsa/skriva till/från en databas och generera lite grafik.
Så jag kan alltså inte lösa allt med enbart javascript.

Helst, om jag får välja, så skulle jag gärna göra så mycket det bara är möjligt i php
eftersom jag föredrar det språket framför javascript, men lite javascript måste jag förstås använda
och jag kan "i värsta fall" tänka mig att göra det mesta med javascript om jag måste.



Men för att ta en del i taget så har jag istället gjort ett litet läroexempel
som består av en tabell med två celler. En till vänster och en till höger på skärmen.
I varje cell finns en knapp. Ett tryck på någon av dem ska ge resultatet att
den aktuella tiden (timmar:minuter:sekunder) visas på motsatta cellen.
(Dvs trycker man på knappen i vänster cell så visas tiden i höger cell och tvärt om.)
Tiden fås med php's date-funktion.


Jag har provat med både DIV-taggar och iFrames samt javascript,
men som bäst fick jag hela sidan att hamna i (och uppdateras i) dessa iframes...
Jag har ingen kod kvar som visar detta, då jag provat mig fram väldigt mycket
och inte sparat de olika försöken.



Sedan gav jag mig på det jag hört mycket bra om, men aldrig lyckats lära mig: Ajax.
Jag har helt enkelt inte hittat någon "Ajax for dummies" som riktigt fått polletten att trilla ner.
Jag har följt en del guider (har tyvärr ingen sparad länk) men det har mest resultaterat
i en massiv samling kod som känts på tok för snårig för det (i mitt tycke) lilla som den ska utföra.

Nästa försök innebar JQuery. Exemplen såg inte så svårbegripliga ut, men jag tyckte mest att exemplen
visade sådant som man lika gärna kunde göra i enbart javascript.


Tillslut stötte jag på jQuery-PHP som är ett PHP-library "that allows to tie jQuery with PHP most natural way."
Men jag fattade inte guiderna där. Ingen riktig förklaring till var man skulle skriva de olika kodsnuttarna.

Kodexemplen (t.ex rad 3 under koden för "JavaScript: call AJAX (example)") generarar bara fel
av typen "Parse error: syntax error, unexpected '{', expecting ')' " hos mig och med knapphändig
nybörjar-info på sajten så är det inte lätt att veta om det beror på att jag skrivit koden
på fel ställe eller om det är något annat som är fel.


Så nu vet jag inte riktigt var/hur jag ska gå vidare.
Någon som kan hjälpa mig åt rätt håll?

Jag är inte låst till något speciellt språk eller "struktur" (div/iframes/annat) eftersom jag börjar från början,
men som jag skrev inledningsvis så föredrar jag php framför javascript.
(Ja, jag är väldigt medveten om vad som "körs" på server side och client side. )


edit: Några av alla länkar som jag studerat: (De som fanns kvar i min textfil.)
http://docs.jquery.com/Tutorials
http://www.cryer.co.uk/resources/javascript/script4.htm
http://jquery.hohli.com/
http://elektronikforumet.com/forum/view ... 13&t=46064

[Klas-Kenny]

Tja, vet inte riktigt vad jag ska säga, men, jQuery "is the shit" till sånt här enligt mig, det behändigaste jag använt till det i alla fall.
Och då är jag långt ifrån någon fan av JS

Lite klurigt det där med AJAX (Eller ja, XML som "proffsen" absolut ska säga) i början, men när man väl förstått det hela så är det inga problem alls.

Allt för längesen jag kodade något alls till annat än µC nu dock, så jag kan inte direkt ge några praktiska exempel eller så.

Det mesta blir ju i PHP, men det är tvunget att ha lite JS/XML (jQuery) till att plocka datan från servern till klienten och att visa resultatet för användaren.

[JimmyAndersson]

Det låter som att du är ungefär på samma lag som mig då alltså. Bra.

JQuery verkar väldigt trevligt, men jag hittar inget exempel där php används.
Många av exempelkoderna här hade lika gärna kunnat göras med enbart Javascript..

Tyvärr vet jag inte riktigt exakt vad jag behöver för att göra det jag vill,
så det är lite svårt att försöka hitta exempel som visar det jag vill göra.
Har du något litet kodexempel som gör det jag beskriver som "läroexemplet" i mitt förra inlägg?
(Eller något som visar grunderna iallafall.)

Jag glömde förresten en sak i förra inlägget:
Hemskt gärna skulle jag vilja göra detta i 1st php-fil.
Jag tycker det kan bli lite svårt att hitta i koden om man har många php-filer.


edit: Här finns kodexempel på nästan det jag vill göra.
Men frågan är hur man får all kod där att ligga i en enda php-fil.
De apropar ju en separat fil där.

[Klas-Kenny]

Alltså, vad du gör är att du har en PHP-fil, denne lämnar ut det du vill via echo, precis som vanligt.

Säg att du vill hämta en slumpad mening ur en SQL-databas, då skriver du en PHP-fil som gör följande:
Plocka ur den slumpade meningen ur databasen.
sen 'echo "meningen som togs ur databasen";'

För att då komma åt detta använder du AJAX (Antingen genom "ren" JS eller jQuery) och anropar PHP-sidan, och kommer då att ta emot allt som "ekats" ut i PHP'n.

Kolla på exemplet här hos W3schools:
http://w3schools.com/ajax/ajax_aspphp.asp

Där använder de visserligen "ren" JS, vilket gör att det blir en hel del mera kod för det hela, men du kan nog förstå hur samspelet med PHP fungerar.

De har helt enkelt en PHP-fil som exekverar en del kod och sätter $response till någonting, och javascriptet tar då den texten och sätter in i rätt div.

W3schools har även en sida om AJAX med jQuery, bra läsning tycker jag, ganska lätt att förstå och man kan om man kollar båda dessa sidor se de stora skillnaderna på hur lite kod som behövs med jQuery, och hur mycket som behövs utan.
http://w3schools.com/jquery/jquery_ajax.asp

Enklast att få fram en tabell innehållande diverse saker är då att ha en PHP-fil som beräknar vad som ska vara i tabellen, och sen skriver ut all HTML för hela tabellen, sen använder du AJAX för att ta emot hela tabellen och skriva den direkt in på rätt ställe på sidan.

(Hrrm, krånglig osammanhängande text, skyller på sent klockslag och för lite sömn )

[JimmyAndersson]

Det är samma status här, så det är ingen fara.

Men nu förstår jag betydligt mer, iallafall själva principen.
Det är precis sådär som jag ville att det skulle fungera!

Jag ska läsa på och testa det. Sedan sova och goto "läsa på och testa".
Återkommer med eller i morgon.


Tack för förklaringen!

[sodjan]

Altså...

För det första så måste vi skillja på server-side processig (PHP, Python, whatever)
och client-side processing (vanligtsvis Javascript).

Vilket är det du vill göra ? PHP och Javascript, som du nämner, är liksom inte
två verktyg som gör samma sak, det är inte bara två olika språk, och den
största skilnaden är att de körs i två helt olika miljöer (server resp client).

Och AJAX och liknande verktyg behövs igentligen inte om du kan acceptera
att hela sidan laddas om, d.v.s att du inte behöver dynamisk ändring av
innhållet på sidan on-the-fly, utan istället plockas all data fram under
serverns processering av URL'en (via embedded PHP eller liknande).
Dessutom behöver du då ingen Javascript alls, för klienten ser det hela
ut som en statisk HTML sida, den ser aldrig att servern dynamiskt
plockade ihop sidan...

[PHermansson]

Det är ju den stora poängen med Ajax, man slipper en ful tidsödande omladdning av hela sidan. Det här är nog det enklaste Ajax-exemplet som jag hittade på hårddisken:

test.htm:

Kod: Markera allt

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>

<script language="JavaScript" type="text/javascript">
function createRequestObject() {
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}

var http = createRequestObject();

function sndReq(action) {
    http.open('get', 'rpc.php?action='+action);
    http.onreadystatechange = handleResponse;
    http.send(null);
}

function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        var divname = "foo";
        document.getElementById(divname).innerHTML = response;
    }
}
</script>
</head>
<body>
<a href="javascript:sndReq('foo')">[foo]</a>
<br>
<a href="javascript:sndReq('2')">[foo]</a>
<br>
<a href="#" onClick="sndReq('3')">[foo]</a>
<br><br>
  <div id="foo">
  </div>
</body>
</html>

rpc.php:

Kod: Markera allt

<?php
  switch($_REQUEST['action']) {
    case 'foo':
      // do something /
      echo "foo|foo done";
      break;
    case '2':
      echo "2";
      break;
    case '3':
      echo "3";
      break;
  }
?>

"function createRequestObject() {" skapar ett objekt.
"function sndReq(action) {" - Körs när man klickar på en länk. http.open anger vilken php-sida som ska anropas, action anger en variabel att skicka med till php-sidan.
"function handleResponse() {" - Körs när sndReq arbetat klart. Svaret från php-sidan finns i http.responseText, och visas på sidan i en CSS-div som heter "foo". För att JS ska hitta denna används följande rad: document.getElementById(divname).innerHTML = response;

Om man använder denna kod som bas så är det bara att anpassa php-filen, den kan i princip fungera som en vanlig php-fil och hämta data och annat. Det som är intressant är som skrevs ovan vad den skriver ut ("echo").

[henkebus]

Hej

Eftersom jag också gillar jquery så snickrade jag ihop ett litet exempel så att vi har nåt att prata om.

Först rpc.php för att generera tiden.

Kod: Markera allt

<?php
  echo date("D M j G:i:s"); 

?>

Sedan index.php

Kod: Markera allt

<!DOCTYPE html>
<html>
<head>
	<title>Ett litet test</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">

	  function updatediv1()
	  {
	    alert("uppdaterar div1");

	    $.get('rpc.php', function(data) {
	         $('#div1').html(data);

	    });

	  }

	  function updatecell2()
	  {
	    alert("uppdaterar cell2");
	    $.get('rpc.php', function(data) {
	         $('#cell2').html(data);

	    });
	  }
	</script>
</head>

<body>

<?php

# bara för att visa att det är php genererad sida. Detta är bara för exemplets skull och fyller egentligen ingen funtion.
   $table = '<table';
   $table .= '<tr><td><input type="button" value="Uppdater div1" onclick="updatediv1();return false;"/></td><td><span onclick="updatecell2(); return false;">Uppdatera cell2</span></td></tr>';
   $table .= '<tr><td><div id="div1">Ingen info</div></td><td id="cell2">Ingen info</td></tr>';
   $table .= '</table>';

   echo $table;
?>


</body>
</html>

Jag gjorde 2 exempel. Det första är med en knapp som uppdaterar en div. Det andra för att visa att du kan göra det mesta klickbart (och dessutom mer formbart via css än en knapp) samt att det är cellens innehåll som uppdateras istället för div-taggens.

såå... frågor?

Mvh H

<edit: stavning>

[henkebus]

... och förresten, ska du pyssla med javascript så är firebug ett måste!

Mvh H

[JimmyAndersson]

Tack!

Väldigt givande när man får två exempel där man kan se gemensamma nämnare och dessutom lite olika sätt att använda det på.

Jag har testat och förstått hur det fungerar,
men jag ska göra ett eget lite större testcase innan jag kan säga att jag behärskar det.

Då kanske frågorna kommer.


edit:
Glömde skriva att jag installerade Firebug. Mycket trevligt!
Jag har definitivt saknat något att debugga/logga javascript med.
(Hur många gånger har man inte missat en liten ; och websidan blir helt vit.. )

[4kTRB]

Ska du generera grafik är ett alternativ att skapa en Java applet och
skicka data till appleten från JavaScript. Det går även att starta
metoder i appleten från JavaScript och även läsa returvärden och
returobjekt från Javametoder. I IE sköts det hela via Active-X.

[elf98]

Ganska enkla exempel på AJAX/Livesearch:
http://www.temperatur.nu/orter.html
http://www.temperatur.nu//javascript/livesearch.js

PHP-filen livesearch.php är ganska ointressant, den hämtar helt enkelt relevant info från databasen utifrån de parametrar javascriptet skickar och kör en echo på det formaterade resultatet. Javascriptet uppdaterar sedan rätt div med informationen.

[4kTRB]

Jag kan inte så mycket om just det här men
ska du köra skript på servern kanske även
Rhino och SpiderMonkey är alternativa val.
Helma tex bygger på Rhino.
http://helma.org/

[hannes91]

Ifall du vill använda en mysql-databas och använda en dynamisk meny som presenterar data dynamiskt, så kan du besöka min sida http://svenskphp.blogspot.com/
Där går jag igenom php funktioner också, vilket är väldigt användbart ifall du vill ha en bred grund att stå på sen.

Lycka till!

[AndLi]

Du kunde inte hittat en lite nyare tråd med en TS som faktiskt är aktiv innan du bumpar en 6 mån gammal tråd och gör reklam för din hemsida?