Keskustelu: Nettisivujen teko: Automaattinen päivitys tietokannasta

Hei mestarit.

En onnistunut löytämään kysymykseeni vastausta aiemmista aiheista suoraan.

Tarkoituksena olisi, että telkkarin selaimessa on auki sivu, joka hakee siihen vaikkapa kymmenen viimeisintä riviä tietokannan taulusta. Tulee taideyhdistyksemme mainoskäyttöön.

Jos tietokannan tauluun lisätään uusi rivi vaikkapa toisessa selaimessa, tämä telkkarissa näkyvä huomaisi sen, ja rullaisi sen siististi näkyviin pinon päällimmäiseksi.

Tämähän onnistuisi varmaan jollain sivun automaattipäivityksellä 5sekunnin välein, mutta en haluaisi että tuo tekstirivien esiintulo olisi töksähtelevää, tai jos tuona aikana on tullut vaikka useampi rivi lisää, seuraaminen olisi hankalaa.

Löytyisikö tähän jotain simppeliä ajax/jquery ratkaisua?

Kiitos etukäteen vastaajille!

Hei!

Oheinen toiminto onnistuu helposti jQueryllä: Tee funktio, jota kutsutaan säännöllisin väliajoin (setTimeout aina funktion lopussa tai setInterval). Hae tässä funktiossa ajaxilla uudet taulun rivit palvelimelta. Jotta saat vain uusimmat rivit, lähetä palvelimelle joko viimeisimmän näkyvän rivin id tai aikaleima ja palauta vain tätä uudemmat rivit. Kun saat palvelimelta vastauksen, lisää uudet rivit listaan jQueryn .prependTo()-funktiolla. Jotta saat elementit liukumaan kauniisti näkyville voit esimerkiksi kutsua .prependTo(elementti).hide().fadeIn().slideDown­() (lähde).

Jokaisen rivin id:n voi tallentaa esimerkiksi kyseisen rivin data-argumentiksi html:ssä. Tätä argumenttia voi sitten tarkastella ja muuttaa jQueryn .data()-funktiolla.

Huomaa, että jos selaimen ja palvelimen välissä on paljon latenssia, voi sama rivi palautua kahdessa peräkkäisessä kyselyssä. Tämän takia on hyvä tarkistaa riviä näyttäessä, ettei kyseistä riviä ole vielä lisätty näkyville.

Esimerkiksi SignalR:llä tuo olisi hyvin helppo toteuttaa, varmaan melkein esimerkkikoodeilla saisi aikaiseksi toiminnallisuuden hyvin nopeasti.

Kiitos vastauksista.
Koetan googletella myös mikä on tuollainen SignalR.
Äkisti näytti palauttavan jotain ASP.net hommiin liittyviä vastauksia.
Tällainen projekti vähän niinkuin lankesi itselle, vaikka en missään nimessä ole mikään tietokonevelho... PHP.netin esimerkeistä joskus jotain kyhäillyt kokeile ja erehdy periaatteella, mutta sanat jquery, ajax ja tuo asp ovat silkkaa mytologiaa itselle.

Kehtaanko pyytää valmista koodinpätkää tällaisesta? Jos ei ole kovin hankala juttu ammattimiehille? Tietokanta on mysql pohjainen. Yksi taulu, josta haetaan vaan näkyville kenttää viesti..

Perhana...

Oon koko päivän yrittänyt yhdistellä eri esimerkeistä eri tavoilla toimivaa,
ja ainut mitä oon saanut aikaiseksi on että sivulle ilmaantuu ensimmäinen rivi tietokannasta, feidaantuu pois ja tulee takaisin... ja sama sitten toistuu.

Ei taivu oma pää hiukkaakaan tähän jquery -juttuun...

Käsitin, että vaikkapa sql.php sivulla noudetaan tietokannasta tavaraa (nyt tämä poimii vain yhden rivin: mysql_fetch_row($result);) ja sitten vaikkapa show.php sivulla tuota sivua kutsutaan jollakin pitkällä funktiolistauksella, ja aina välissä puhutaan datatype:json hommasta...

Löytyisikö sellaista hyvää vinkkiä miten kannattaisi edetä?
Usea tunti kului siihen, että ymmärsin laittaa alkuun että jquery kirjasto noudetaan jostain googlen palvelimelta... että tätä tasoa oma osaaminen tämän kanssa :)

Idea siis oli, että kun vaikkapa show.php sivu ladataan, se noutaa kymmenen viimeistä riviä mysql -tietokannasta, ja pitää ne staattisena näkyvissä, paitsi jos sinne tietokantaan lisätään uusi rivi, näkyvissä olevat kymmenen menevät alaspäin ja se uusi putoaa siihen ylimmäksi.

En oikein osaa ajatella, pitäisikö sen alimmaisen rivin kadota samalla...
Vai voiko noita olla määrättömästi näkyvillä, jos tuo telkkarinäyttö on pitkäänkin putkeen päällä? Listahan se vaan kasvaa...

Pahoittelen että selvitän tätä näkemystä sekavasti, ja olen kovin otettu hyvistä neuvoista.

Sun vaan pitää opetella tekemään. Pura iso ongelma pienempiin osaongelmiin ja ratko ne yksitellen. Sen jälkeen voit yhdistää omat ratkaisusi toimivaksi kokonaisuudeksi. Paljon järkevämpi lähestymistapa kuin yrittää kursia jotain järkevää kasaan täysin irrallisista sinne päin tehdyistä koodinpätkistä. Ei oo oikein mitään järkeä lähteä tekemään jotain isoa ja monimutkaista, ellei osaa edes ainuttakaan välivaihetta tehdä itse.

Tässä niitä vinkkejä:
- Tee ensin php-puoli kuntoon, niin että se tekee sen mitä piti.
- Opettele tekemään ajax-pyyntöjä selaimessa ja ymmärtämään palautetun datan rakenne.
- Opettele lisäämään listaan rivejä ihan vaan demodatalla, jonka syötät suoraan js-koodiin etkä yritä kikkailla ajaxin kanssa samalla.

Jos tuo pyörii telkkarissa, niin voit yksinkertaisuudessaan tehdä tuon ilman ajaxiakin, eli lataat aina viimeisimmät x kpl php:lla. esim. javascriptillä ajoitat sivun latautumaan uudelleen t minuutin välein.

Se, että ruutu välähtää latauksen aikana on hyvinkin pieni ongelma. Rivejä tuskin tulee niin tiuhaan tahtiin, että esim. 10 minuutin viiveellä näkyminen on mikään ongelma. Ja ainahan voit tehdä sivunlataukseen omat kivat animaatiot jquery/tweenlight/css3 -animoinnilla.

Muista KISS-periaate!

Noiden animointien rakentelu on aivan yhtä työlästä kuin sen ajax-latauksen toteuttaminen, joten ehkäpä tekisin asiat kunnolla sen sijaan että alkaisin korjata huonon toteutuksen puutteita puuterilla.

Jos tulokset tulevat oman php sivunsa kautta, on tuo aika helppo tehdä pelkällä loadillakin.

(function lataaTulokset() {
    $("#Tulokset").empty(); //poistetaan olemassaoleva sisältö divistä, jonka id='Tulokset'
    //Haetaan tulokset
    $('#Tulokset').load('Tulokset.php', function() {
       setTimeout(lataaTulokset, 60000); //Tyhjennä ja hae tulokset uudestaan, aina 60sek välein
    });
})();

ja jos tuohon nyt jotain animointia haluaa niin tässä pieni esimerkki

groovyb kirjoitti:

Jos tulokset tulevat oman php sivunsa kautta, on tuo aika helppo tehdä pelkällä loadillakin.

(function lataaTulokset() {
    $("#Tulokset").empty(); //poistetaan olemassaoleva sisältö divistä, jonka id='Tulokset'
    //Haetaan tulokset
    $('#Tulokset').load('Tulokset.php', function() {
       setTimeout(lataaTulokset, 60000); //Tyhjennä ja hae tulokset uudestaan, aina 60sek välein
    });
})();

Varmaan hän halusikin, että ajaxilla ladataan sisältö, tarksitetaan mitkä rivit on jo näkyvissä ja vain uudet ilmaantuisivat näkyviin. Tuossa pitäisi siis käsitellä lisäykset javascriptissä, tai vastaavasti jo php:n päässä (tarkistaa esim. jonkin sortin aikaleimalla tai yksilöidyillä id-tunnisteilla).

Siksi itse lähtisin tekemään kokonaan juuri koko sivun latauksella, tämä kun ei juurikaan eroaisi lopputuloksesta, jos näytettävien rivien sisältö kuitenkin ladataan ja _korvataan_ ajaxilla.

Pitäisin kuitenkin tuota animointia vielä "hieman" pienempänä työnä vasta-alkajalle.

Teinkin tuon sillä olettamuksella, että "10 uusinta" pamahtaisi tulille oman php sivunsa kautta (joka suorittaisi tuon haun), jolloin voisi pelkällä loadilla selvitä (wrapperihan se vaan on ajaxin getille, jos data -objektia ei lyö mukaan).