Keskustelu: Nettisivujen teko: PHP, MySQL: Miten näytetään divejä?

Elikkäs miten saadaan aikaiseksi kysely MySQL tietokantaan, joka näyttää tietyn divin sisällä olevan, tietyn divin siällön?

esimerkki:

<div id="esimerkki">
<div id="sisältö">
sisältö 1
</div>
<div id="sisältö">
sisältö 2
</div>
<div id="sisältö">
sisältö 3
</div>
</div>

joten miten saan aikaiseksi kyselyn joka näyttää tietyllä hakusanalla vain divin jossa lukee "sisältö2" (tämä divi siis on tuon "pää divin" sisällä)

Helpoiten tämän tekisi javascriptilla, ensin sisältö viittaamalla elementin .innerHTML ja sen jälkeen ajaxilla sisältö php:lle. Mutta jos php:lla tämän haluaa ratkaista niin tämmösellä räpellyksellä voisi päästä alkuun.

$str = '<div id="esimerkki">
<div id="sisältö1">
sisältö 1...
</div>
<span id="sisältö2">
sisältö 2...
</span>
</div>';

function getContentsById($str, $elementType, $id) {

    preg_match(
        '/<' . $elementType . ' id="' . $id . '">([\s\S]*?)<\/' . $elementType . '>/',
        $str,
        $matches
    );

    return ($matches[0]) ? $matches[0] : '';

}

echo getContentsById($str, 'div', 'sisältö1'); //sisältö 1...
echo getContentsById($str, 'span', 'sisältö2'); //sisältö 2...

Lisäys: Ja huomasin samalla että tässä vastauksessa on ammottava aukko, koska pyydetyn elementin sisällä ei saa olla toista samansukuista elementtiä. esim <div id="id">12<div></div>3</div> palauttaa 12, eikä 123. Fuck me..

Älä tallenna tietokantaan tuollaista roskaa. Parsi tieto ulos ennen tallennusta.

The Alchemist kirjoitti:

Älä tallenna tietokantaan tuollaista roskaa. Parsi tieto ulos ennen tallennusta.

Mitä tuolla tarkoitat?

tekisin varmaan jotenkin tähän suuntaan, olettaen että noita sisältöosuuksia näytetään yksi kerrallaan.

<div id="example">
     <div id="content" style='display:none;'>
     </div>
</div>

<a href="javascript:GetContent('2');">Fetch!</a>

function GetContent(id) {
    $("#content").hide();
	$.ajax({
		type : 'POST',
		url : 'ajax.php',
		dataType : 'json',
		data : {
			contentId : id
		},
	    success : function(data) {
               $("#content").empty();
               $("#content").append(data);
               $("#content").show();
		},
		error : function(xhRequest, ErrorText, thrownError) {
				alert("Something happened :(");
		}
	});
}

//ajax.php

if($_GET["contentId"]) != null) {
   $id = $_GET["contentId"];
   //query something with the id
   $somethingThatTheQueryReturned = "Hello World!";
   $data = "<span>" . $somethingThatTheQueryReturned . "</span>";
   echo json_encode($data);
}

hyvä esimerkki on www.hdfin.com sivulla oleva haku ...sillä tavalla haun haluaisin toimiva (jos se nyt toimii niinkuin oletan sen toimivan)

Note to self, älä kommentoi krapulassa kun et ymmärrä edes koko kysymystä. Tai oikeastaan, älä kommentoi ollenkaan. ikinä

tsk955 kirjoitti:

joten miten saan aikaiseksi kyselyn joka näyttää tietyllä hakusanalla vain divin jossa lukee "sisältö2" (tämä divi siis on tuon "pää divin" sisällä)

Esimerkki:tehdään haku kolmeen eri sarakkeeseen.

SELECT * FROM hakemisto WHERE (paikka LIKE '%$hakusana%' OR
asiakas LIKE '%$hakusana%' OR ammatti LIKE '%$hakusana%') ORDER
BY asiakas

tsk955 kirjoitti:

hyvä esimerkki on www.hdfin.com sivulla oleva haku ...sillä tavalla haun haluaisin toimiva (jos se nyt toimii niinkuin oletan sen toimivan)

No ei ainakaan toimi niin kuin mitä avauspostauksessa yritit tehdä. Sanoinkin jo, että parsi tieto ulos html:stä ja tallenna se tietokantaan oikeaoppisesti. Yksikään hakukone ei toimi niin, että se tallentaisi kantaan raakaa html:ää ja vasta hakukyselyä suorittaessa alkaisi perata siitä dataa pihalle.

Niin, kysely itsessään on joku LIKE kysely, joka palauttaa arvoja n.

Esimerkiksi hakusana Stallone voisi palauttaa seuraavankaltaisia rivejä x määrän:

ID: 234
Actor: Sylvester Stallone
Movie: Rocky
Year: 198jotain
ImageUrl: RockyThumbnail.jpg
Description: Movie bout a boxer.

Näistä saaduista riveistä kasataan itse divit.

$data = "";
for($i = 0; $i < count($queryResults); ++$i) {

    $data .= "<div class='SearchResults' id='" . $queryResults[$i]->ID . "'>";
    $data .= "<img src='" . $queryResults[$i]->ImageUrl . "' alt='' />";
    $data .= "<h2>" . $queryResults[$i]->Movie . " (" . $queryResults[$i]->Year . ")</h2>";
    $data .= "<h3>" . $queryResults[$i]->Actor . "</h3>";
    $data .= "<p>" . $queryResults[$i]->Description . "</p>";
    $data .= "</div>";

}

echo json_encode($data); //jos nyt menisi samantyyppisesti ajaxilla kuin tuo edellinen malli jonka heitin.

En kyllä tuosta koodista älynnyt juuri yhtään mitään. Joten...tuo koodi vissiin pitäisi laittaa php sivulle siihen diviin johon haku ehtoja verrataan. Ognelma on se, että hakuehtoja pitäisi verrata useasta eri divistä...nämä ehdot sitten toteutuessaan tuovat ne "isommat" divit esiin, jotka täyttävät ehdot.

Jutuistasi ei saa mitään selvää. Voisitko nyt selittää kunnolla, mitä tietoja sinulla on, mistä tiedot tulevat ja missä muodossa, mitä käyttäjä tekee ja mitä pitäisi tapahtua? Älä sekoita selitykseen mitään arvauksiasi siitä, miten ongelma pitäisi ratkaista.

Divit ei liity siihen kyselyyn nyt mitenkään. Laita ihan piirustus, mitä yrität tehdä ja miten se pitäisi näkyä.

tsk955 kirjoitti:

Ognelma on se, että hakuehtoja pitäisi verrata useasta eri divistä...

Onko tiedot siis divissä vai tietokannassa?

Suosittelen että suunnittelisit järjestelmäsi alusta järkevämmin.

Kyllähän sinä saat hakuehtoja niin monesta paikkaa kuin haluat:

<!-- HTML page -->
<div id="example">
     <div id="content" style='display:none;'>
     </div>
</div>

<div>
    <span>Movie name: </span>
    <input type="text" id="movieField" />
    <br/>
    <span>Actor name: </span>
    <input type="text" id="actorField" />
    <br/>
    <span>Release year: </span>
    <input type="text" id="yearField" />
    <br/>

    <a href="javascript:GetContent();">Fetch!</a>
</div>

//Javascript (with jQuery)
function GetContent() {
    $("#content").hide();
	$.ajax({
		type : 'POST',
		url :  'ajax.php',
		dataType : 'json',
		data : {
			Actor: $("#actorField").val(),
            Year:  $("#yearField").val(),
            Movie: $"#movieField").val()
		},
	    success : function(data) {
            $("#content").empty();
            $("#content").append(data);
            $("#content").show();
		},
		error : function(xhRequest, ErrorText, thrownError) {
		    alert("Something happened :(");
		}
	});
}

<?php
//ajax.php

if($_GET["Actor"]) != null || $_GET["Movie"]) != null || $_GET["Year"]) != null ) {
   $actor = "";
   $movie = "";
   $year = "";
   if(isset($_GET["Actor"]) {
      $actor = $_GET["Actor"]
   }
   if(isset($_GET["Movie"]) {
      $movie = $_GET["Movie"];
   }
   if(isset($_GET["Year"]) {
      $year = $_GET["Year"];
   }
   //query something with $movie, $actor and $year

   $data = "";
   for($i = 0; $i < count($queryResults); ++$i) {
      $data .= "<div class='SearchResults' id='" . $queryResults[$i]->ID . "'>";
      $data .= "<img src='" . $queryResults[$i]->ImageUrl . "' alt='' />";
      $data .= "<h2>" . $queryResults[$i]->Movie . " (" . $queryResults[$i]->Year . ")</h2>";
      $data .= "<h3>" . $queryResults[$i]->Actor . "</h3>";
      $data .= "<p>" . $queryResults[$i]->Description . "</p>";
      $data .= "</div>";
   }
   echo json_encode($data);
}
?>

Mikä idea tuossa on wrapata yksittäinen html-stringi json-objektiksi? Eikö html-palaset kannattaisi lähettää ihan text/html muotoisena?

Itse jättäisin html-rakenteen kokonaan selaimessa ajettavan skriptin vastuulle ja työntäisin vain kunnollisia json-rakenteita ulos.

The Alchemist kirjoitti:

Itse jättäisin html-rakenteen kokonaan selaimessa ajettavan skriptin vastuulle ja työntäisin vain kunnollisia json-rakenteita ulos.

Mikä on json rakenne?

groovyb kirjoitti:

Kyllähän sinä saat hakuehtoja niin monesta paikkaa kuin haluat:

Miten nuo esimerkkisi liittyvät aloitusviestin kyselyyn:

tsk955 kirjoitti:

Elikkäs miten saadaan aikaiseksi kysely MySQL tietokantaan

eikös tässä juuri siitä ollut kyse:

_Kk kirjoitti:

Ognelma on se, että hakuehtoja pitäisi verrata useasta eri divistä.

Tämän käsitin siten, että OP:lla on hakukenttiä useassa eri divissä (onko sillä merkitystä on eri asia), ja haluaa saada mysql kyselyynsä hakuehtoja (keywordeja). Tähän tarkoitukseen laajensin aiempaa postaustani.

groovyb kirjoitti:

Tämän käsitin siten, että OP:lla on hakukenttiä useassa eri divissä (onko sillä merkitystä on eri asia), ja haluaa saada mysql kyselyynsä hakuehtoja (keywordeja). Tähän tarkoitukseen laajensin aiempaa postaustani.

Jos näin on ja tuo diveissä oleva tieto tulostetaan tietokannasta eikö olisi kätevämpi asettaa hakuehdot SQL-lauseessa. Vai onko divien sisällöt ihan käsipelillä kirjoiteltua htmällää? Epäilen hiukan, että ei ole..

niinhän tuossa esimerkissäni tehdäänkin; hakuehdot postataan html:n input -kentistä ajaxilla php:n puolelle, joilla sitten voi tehdä sellaisen kyselyn minkä lystää. kannasta palautuneesta kamasta tehdään div lohkoja, jotka palautetaan selaimeen.

groovyb kirjoitti:

//query something with $movie, $actor and $year

Katos vaan :) Siinäpä se kysely onkii... melkein piilossa. Mahtaako ketjun aloittajalla olla jQuery käytössä...

Lataamallahan sen saa. No problem.

Joku voisi nyt selittää mikä se jQyery edes on ja miten se tähän liittyy. Lisäksi kaikki divien sisältö on "käsinkirjoitettu" ja se teksti mitä divissä on sisällä, pitäisi olla verrattavisssa SQL tietokantaan. Kun esim kirjoitan hakupalkiin "White House Down" tai muuta vastaavaa niin haluan, että haku palauttaa divit joissa lukee tuo sama....ongelma on vain se, että haun pitäisi tuoda kaikki divit jotka on laitettu "samaan juttuun" hakusana divin kanssa eikä ole mitään ideaa mite sen saisi toimimaan niin.

Divejä siis on useampi yhdessä läjässä, kaikkien pitäisi näkyä haku ehdon täyttyessä, mutta hakuehdon saa hakea vain tietystä/tietyistä diveistä.

Toivottavasti selvensi asiaa :)

E: eli siis hakupalkkeja on yksi josta haetaan "lista" elokuvista, joiden tietyissä diveissä oleviin kohtiin hakusana vastaa

Ei selventänyt. Kerro nyt helvetti suomen kielellä, että mitä sinä yrität tehdä. Miksi puhut avauspostauksessa (sql-)tietokannasta mutta nyt vaihdoitkin puheet nettiselaimeen ja yhdellä sivulla näkyviin diveihin? Jos sulla on kuitenkin sql-kanta olemassa, niin miksi siellä on jotain ihmeen html-paskaa?

Diveillä ei pitäisi olla mitään tekemistä asian kanssa. Sulla on dataa paikassa X ja haluat viedä ne paikkaan Y jonkin tietyn käyttäjän suorittaman interaktion Z seurauksena. Nyt täytä tyhjät kohdat tuohon, niin aletaan ehkä päästä johonkin. Metabolixkin sanoi jo sinulle, että kerro selvästi mitä haluat tehdä sen sijaan, että sekoilet väliin päättömiä arvauksia siitä, miten asia ehkä teknisellä tasolla tapahtuu.

P.S. Josset tiedä mikä jQuery on, niin sitten googleta.

Yritetään nyt vielä. Täydennä tähän pohjaan:

MySQL-tietokannassa on seuraavat taulut: (mitä tarpeellisia tauluja?)

MySQL-tietokannan taulussa X on seuraavat kentät: (mitä kenttiä?)

MySQL-tietokannan taulussa X yksi rivi voisi näyttää vaikka tältä: (esimerkki yhdellä rivillä olevista tiedoista)

(Jos tietokantaa ei vielä ole tai jos et ole varma järkevästä rakenteesta, kerro vain, mistä olet hakemassa tietoja ja mitä varten.)

Hakulomakkeessa on tällaiset inputit: (mitä inputteja on?)

Käyttäjä voi syöttää niihin vaikka tällaiset arvot: (mitä arvoja käyttäjä syöttää?)

Silloin tietokannasta haetaan ne rivit, joilla... (mikä on hakuehto?)

Tulossivulla pitäisi näyttää näiltä riveiltä tiedot siten, että... (mitä tietoja näytetään ja missä muodossa?)

tsk955 kirjoitti:

hyvä esimerkki on www.hdfin.com sivulla oleva haku ...sillä tavalla haun haluaisin toimiva (jos se nyt toimii niinkuin oletan sen toimivan)

Ei toimi todellakaan niinkuin luulet.

Tuo haku tehdään tietokannasta, ei diveistä. Divit ja niiden sisältö generoidaan esim sillä php:llä.

tsk955: Homman tulisi toimia jotakuinkin näin (tätä koodia ei sitten ole testattu, mutta tähän suuntaan. datan voi toki postata php:lle ilman ajaxia, ihan perinteisesti formilla ja submittaamalla. siihen tarkoitukseen tämä esimerkki ei sovellu.)

1. Sinulla on kannassa taulu, esimerkiksi seuraavanlaisesti (jos nyt ilman relaatioita tehdään)

Movies - taulu
| ID | Actor | Title | Year | Description | Image |

2. Data kannassa voisi olla siis vaikka näin:

Movies -taulu
| ID | Actor | Title | Year | Description | Image |
| 1 | Sylvester Stallone | Rocky | 1986 | Nyrkkeilyelokuva | R.jpg |
| 2 | Sylvester Stallone | Rocky II | 1989 | Toinen nyrkkeilyelokuva | R2.jpg |
| 3 | Nicholas Cage | 8mm | 1999 | leffa jostain murhista | 8mm.jpg |
| 4 | Petteri Summanen | FC Venus | 2001 | Jalkapalloleffa | fc.jpg |

3. HTML sivu

Html sivu sisältää inputin, mihin syötetään hakusana, sekä containerin, johon hakutulokset lisätään.

<!-- HTML page -->
<div id="example">
     <div id="content" style='display:none;'> <!-- elementti, johon hakutulokset lisätään -->
     </div>
</div>

<div>
    <span>Search: </span>
    <input type="text" id="searchField" /> <!-- Kenttä, johon hakusana syötetään -->
    <br/>
    <a href="javascript:GetContent();">Fetch!</a> <!-- kun tätä painaa, kutsutaan javascriptistä GetContent -funktiota -->
</div>

4. Javascript

Javascriptin (jossa olen esimerkeissä käyttänyt jQuery -kirjastoa) tarkoituksena on lähettää hakusana serverille (PHP:lle), ja vastaanottaa serveriltä (PHP:ltä) hakutulokset, ja lisätä ne html:ssä sijaitsevaan containeriin (eli elementtiin, jonka id:nä tässä esimerkissä on 'content').

//Javascript (with jQuery)
function GetContent() {
    $("#content").hide(); //piilotetaan content -elementti, eli vanhat hakutulokset
    //jQueryn ajax -palikka, jolla lähdetään ajax -kutsua muodostamaan ajax.php:lle
    $.ajax({
        type : 'POST',
        url :  'ajax.php',                      //Mitä php filua kutsutaan
        dataType : 'json',                      //kerrotaan, että data lähetetään jsonina
        data : {
            searchWord: $("#searchField").val() //lähetään hakusanakentän arvo searchWord nimisenä objektina (eli muuntuu jsoniksi yllä määritetyn datatyypin mukaan: { dataType : Hakusanakentän_arvo } )
        },
        success : function(data) {
            //Tänne tullaan, jos kaikki on tapahtunut onnistuneesti
            $("#content").empty();              //tyhjennetään vanhat hakutulokset content elementistä
            $("#content").append(data);         //lisätään serverin muodostamat divit content elementtiin
            $("#content").show();               //näytetään hakutulokset
        },
        error : function(xhRequest, ErrorText, thrownError) {
            //Näytetään ilmoitus, jos ajax kutsu epäonnistuu (esim. php:n virheestä johtuen
            alert("Something happened :(");
        }
    });
}

5. PHP

<?php
//ajax.php

//Sisälle lohkoon mennään, jos filua kutsuttaessa $_GET["searchWord"] sisältää arvon. tässä tapauksessahan tuo searchWord määritettiin tuolla javascriptin GetContent funktiossa, $.ajax() -palikan data -osiossa.
if(isset($_GET["searchWord"])) != null) {
   $keyword = $_GET["searchWord"];  //Asetetaan javascriptin lähettämä hakusana muuttujaan

   //Oletetaan että hakusana on vaikka Stallone. Tässä tapauksessa kannasta pitäisi palautua kaksi riviä, koska actor kenttä sisältää kyseisen tekstin noiden rivien kohdalta

   //haetaan kannasta rivit, joiden kentät vastaa hakusanaa (käytin PDO:ta tässä esimerkissä, voi toki hakea perinteisin menetelminkin, jos siitä pitää.)
   $db = new PDO("mysql:host=localhost;dbname=moviedb","username","password");
   $query = "SELECT *  FROM Movies
           WHERE ( Movies.Title LIKE '%" . $keyword . "%' OR
                   Movies.Description LIKE '%" . $keyword . "%' OR
                   Movies.Actor LIKE '%" . $keyword . "%')
           ORDER BY Movies.Title DESC";
   $sql = $db->prepare($query);
   $sql->execute();
   $queryResults = $sql->fetchAll(PDO::FETCH_ASSOC);

   //Luodaan jokaiselle hakutulokselle oma div, joka sisältää saatuun leffaan liittyvät tiedot
   $data = "";  //Muuttuja, johon lähdetään muodostamaan kannasta saatuja hakutuloksia div -elementteinä
   for($i = 0; $i < count($queryResults); ++$i) {
      $data .= "<div class='SearchResults' id='" . $queryResults[$i]->ID . "'>";              //div alkaa
      $data .= "<img src='" . $queryResults[$i]->Image . "' alt='' />";                       //lisätään kuva jonka osoite tulee taulun Image kentästä
      $data .= "<h2>" . $queryResults[$i]->Title . " (" . $queryResults[$i]->Year . ")</h2>"; //Leffan nimi ja tekovuosi, taulun Title ja Year -kentistä
      $data .= "<h3>" . $queryResults[$i]->Actor . "</h3>";                                   //näyttelijän nimi taulun Actor -kentästä
      $data .= "<p>" . $queryResults[$i]->Description . "</p>";                               //Kuvaus taulun Description -kentästä
      $data .= "</div>";                                                                      //Div kiinni
   }
   //Palautetaan elementit ajax -kutsun success -osioon. (Eli tässä vaiheessa kulku jatkuu javascriptin GetContent -funktiossa, ajaxin success osiossa)
   echo json_encode($data);
}
?>

groovyb kirjoitti:

Koodia

Hei. Ottamatta kantaa varsinaiseen kysymykseen, haluaisin kuitenkin mainita että groovyb esimerkki on aika kehno ja vaarallinen.

Esimerkissä käytetään PDO väärin, joten käyttäjä voi vapaasti lisätä omia SQL – kyselyitä hakulauseeseen.

Lisäksi siinä palautetaan HTML määrittelyä json - formaatissa, joka on aika eriskummallinen tapa. Datan voisi palauttaa ihan normaalisti json muodossa ja parsia käyttötapauksen mukaan asiakkaan päässä, eikä tarjota valmis esitysmuoto palvelimen päässä. Noin toteutettuna, json ei tuo mitään lisäarvoa ainoastaan herättää hämmennystä.

XYZ kirjoitti:

tsk955 kirjoitti:

hyvä esimerkki on www.hdfin.com sivulla oleva haku ...sillä tavalla haun haluaisin toimiva (jos se nyt toimii niinkuin oletan sen toimivan)

Ei toimi todellakaan niinkuin luulet.

Tuo haku tehdään tietokannasta, ei diveistä. Divit ja niiden sisältö generoidaan esim sillä php:llä.

Niin, mutta tuloset näytetään diveissä

Lisäys:

groovyb kirjoitti:

tsk955: Homman tulisi toimia jotakuinkin näin – –

Juuri noin sen ajattelin, mutta miten tuo loppuosio laitetaan, jos hakutuloksien pitää olla eri diveissä? Nyt kumminkin ollaan jo siinä pisteessä miten sen pitäsisi toimia...tuota loopuosiota lukuunottamatta.

qeijo: Olisihan nuo $keywordit voinut asettaa preparessa ja heittää kyssärit kyselyyn, en nyt jaksanut panostaa tähän ihan 100%. tuo php:n HTML palautus johtuu samaisesta syystä. (IDE jota php:n vääntämiseen käytän, on aika surkea javascriptin ja HTML:n tarkistuksessa. nämä esimerkit oli lähinnä sellaisia mitä nyt jaksoi minuutissa kirjoittaa, ja varmasti sisältävät virheitä.eli lähinnä suuntaa-antaviksi tarkoitettu.)

tsk955: Nythän ne tulee eri diveihin. for loopissa tehdään oma div (tuo rivi jossa kommentti "div alkaa") jokaiselle tietokannasta palautuneelle riville.

tuo $data joka palautetaan, näyttää siis tältä:

<div class='SearchResults' id='1'>
   <img src='1.jpg" alt='' />
   <h2>Rocky (1982)</h2>
   <h3>Sylvester Stallone</h3>
   <p>Nyrkkeilyelokuva</p>
</div>
<div class='SearchResults' id='2'>
   <img src='2.jpg" alt='' />
   <h2>Rocky II (1986)</h2>
   <h3>Sylvester Stallone</h3>
   <p>Toinen nyrkkeilyelokuva</p>
</div>

Pitäisi nyt ensinnäkin ymmärtää, mitä se pdo tekee ja mitä se ei voi tehdä. Prepare()-kutsu on täysin hyödytön, jos ei käytä lainkaan parametreja. Sitä ei pitäisi kutsua ollenkaan ilman parametreja. Muuttujia ei saa koskaan katenoida sokkona sql-kyselyyn.

Siistin koodin kirjoittaminen olisi myös hyvä alkaa oppia jo näin vuonna 2013.

<?php
// foo
// bar

foreach ($result as $i => $row) {
  ?>
  <div class="search-result" id="result<?= $i ?>">
    <img src="<?= h($row->image) ?>" alt="img <?= $i ?>"/>
    <h2><?= h($row->title) ?></h2>
    <h3><?= h($row->actor) ?></h3>
    <div><?= h($row->description) ?></div>
  </div>
  <?php
}

// More
// foo
// bar

groovyb kirjoitti:

qeijo: Olisihan nuo $keywordit voinut asettaa preparessa ja heittää kyssärit kyselyyn, en nyt jaksanut panostaa tähän ihan 100%. tuo php:n HTML palautus johtuu samaisesta syystä. (IDE jota php:n vääntämiseen käytän, on aika surkea javascriptin ja HTML:n tarkistuksessa. nämä esimerkit oli lähinnä sellaisia mitä nyt jaksoi minuutissa kirjoittaa, ja varmasti sisältävät virheitä.eli lähinnä suuntaa-antaviksi tarkoitettu.)

tsk955: Nythän ne tulee eri diveihin. for loopissa tehdään oma div (tuo rivi jossa kommentti "div alkaa") jokaiselle tietokannasta palautuneelle riville.

tuo $data joka palautetaan, näyttää siis tältä:

<div class='SearchResults' id='1'>
   <img src='1.jpg" alt='' />
   <h2>Rocky (1982)</h2>
   <h3>Sylvester Stallone</h3>
   <p>Nyrkkeilyelokuva</p>
</div>
<div class='SearchResults' id='2'>
   <img src='2.jpg" alt='' />
   <h2>Rocky II (1986)</h2>
   <h3>Sylvester Stallone</h3>
   <p>Toinen nyrkkeilyelokuva</p>
</div>

Okei...jos nuo jokainen rivi vielä saisi jotenkin omaan diviin niin sitten olisi jo se tulos jota etsin.

E: mihin tuohon voi määrittää sen id:n jolla diviä voi muokata CSS:ssä?

Katsohan nyt sitä koodia hetki, niin löydät kyllä id:n tuolta.

The Alchemist kirjoitti:

Katsohan nyt sitä koodia hetki, niin löydät kyllä id:n tuolta.

OK nyt älysin...elikkäs tuo id='1' tarkoittaa css tiedostossa olevaa vastaavaa id:tä jolla diviä voi muokata ja class='RearchResults' tarkoittaa taas haku koodissa olevaa määritettä.

Et älynnyt. Sekä class että id ovat html-standardissa määritettyjä attribuutteja. Ne toimivat molemmat myös css:n puolella valitsimina, mutta on niillä muitakin käyttötarkoituksia. Ne toki toimivat myös js:n puolella samalla tavalla valitsimina, kun käpistellään dom-puuta.

CSS:sä classien ja id:iden nimet eivät voi alkaa numerolla, ellen ihan väärässä ole.

Juu, eivät saa alkaa numerolla. Mielestäni muutenkin järkevintä aloittaa nimet aina aakkosella.

Samoin html4:ssä img-tagin alt-attribuutti ei saa olla tyhjä (eikä samalla sivulla saa olla kahta samaa arvoa eri elementeillä). Jos aikoo standardia rikkoa, niin järkevämpi jättää kokonaan kyseinen attribuutti pois. Html5:ssä alt ei edes ole pakollinen. Ihan perinteistä cargo culttia.

The Alchemist kirjoitti:

Et älynnyt. Sekä class että id ovat html-standardissa määritettyjä attribuutteja. Ne toimivat molemmat myös css:n puolella valitsimina, mutta on niillä muitakin käyttötarkoituksia. Ne toki toimivat myös js:n puolella samalla tavalla valitsimina, kun käpistellään dom-puuta.

Eli siis yksi id tai class voi toimia monessa eri paikassa valitsimena jos nyt iha oikein ymmärsin.

id = yksi ainut
class = monia

molemmat voi antaa diville, lisäksi jos jtn muuta tietoa esim. javascritpiä varten haluaa, niin data-{arvon nimi}
http://html5doctor.com/html5-custom-data-attributes/

(<div ... data-userid="2034412'">

The Alchemist yritti varmaan vain korostaa sitä teknistä seikkaa, että HTML-dokumentti on itsenäinen ja erillään CSS-tyyleistä ja viittaukset tapahtuvat toiseen suuntaan eli CSS:stä HTML:ään päin. Toisin sanoen HTML:ssä id vain on ja vasta CSS:n vastaava valitsin – lainatakseni sinun ilmaustasi – ”tarkoittaa HTML-koodissa olevaa vastaavaa id:tä”. Onpa vaikea selittää, selvensikö?

Metabolix kirjoitti:

The Alchemist yritti varmaan vain korostaa sitä teknistä seikkaa, että HTML-dokumentti on itsenäinen ja erillään CSS-tyyleistä ja viittaukset tapahtuvat toiseen suuntaan eli CSS:stä HTML:ään päin. Toisin sanoen HTML:ssä id vain on ja vasta CSS:n vastaava valitsin – lainatakseni sinun ilmaustasi – ”tarkoittaa HTML-koodissa olevaa vastaavaa id:tä”. Onpa vaikea selittää, selvensikö?

Juu uskon että älysin tämän nyt...voisin tuon koodin pohjalta nyt yrittää itse vääntää jonkinlaisen, tomivan haku systeemin.