Recommended
Recommended
More Related Content
Similar to Lär dig ajaxifiera dina tillägg med jQuery
Similar to Lär dig ajaxifiera dina tillägg med jQuery (16)
More from tdhftw
Lär dig ajaxifiera dina tillägg med jQuery
- 1. Lär dig ajaxifiera dina tillägg med jQuery Bygg ett säkert röstningstillägg med jQuery Kristian Erendi Reptilo.se
- 2. Reptilo WordPressbyrå • Kristian Erendi • @kaptenkrillo • kristian@reptilo.se • http://www.linkedin.com/in/kristianerendi • http://reptilo.se
- 3. Syftet med denna presentation • Grundläggande förståelse för plugin och jQuery • Hooks • Shortcodes • Gettext – Internationalization eller i18n • Ajaxapi - webbsida • Nonce – WP rekommenderade säkerhet • jQuery
- 4. reptilo-vote • En liten ajax-baserad plugin • jQuery - javascript bibliotek • Prova den live på: http://reptilo.se/reptilo-vote-plugin/
- 6. 6 Hook – add_action • Lägger till script i HTLM-headern med wp_enqueue_scripts
- 7. Shortcode
- 8. Sidan är laddad hos klienten • Med aktuell statistik från databasen
- 9. Ajax-API 9 • Ajaxanrop gör man till en publik webbsida • http://reptilo.se/wp-content/plugins/reptilo-vote/api/vote.php • Läser wp-config – så att allt i WP är tillgängligt • Returnerar data i json OBS webbsidan manipulerar databasen, detta kräver säkerhet! 1. Stoppa sql-injection, filtrera parametrarna 2. Kontrollera varifrån anropet kommer, referer 3. WP-nonce
- 10. WP-Nonce Nonce: • klockslag • unik sträng • saltet i wp-config.php • giltig i 24h • 837d46052a Skapa nonce på webbsidan innan man skickar posten wp_create_nonce(’reptilo-vote’. $post->ID); Ta emot nonce på servern och validera den check_ajax_referer('reptilo-vote’ . $_REQUEST['postid'],
- 11. api/vote.php - Ajax api
- 12. Ajaxsvaret som en array i json
- 13. jQuery-koden
- 14. 14 Vad jQuery-koden gör 1. Fångar klick på Ja eller Nej 2. Postparametrar (Ja/nej, post_id, WP_nonce) 3. Ajaxanropet 4. Uppdaterar HTML (siffrorna, klickmöjlighet) 5. Byter färg med CSS
- 15. Kort om klassen • wp_postmeta tabellen för att spara data get_post_meta($this->postId,… update_post_meta($this->postId,… • Räkna ut statistiken när den skapas! Inte när den behövs vid sidladdningen • spara färdig statistik och data i db get_option("reptiloVoteStats"); update_option('reptiloVoteStats’…
- 16. Internationalization – i18n • Alla texter ska vara översättningsbara • WP använder gettext • CodeStylingLocalization – plugin för överättn
- 17. • Presentationen: http://reptilo.se/reptilo-vote-plugin/ • Plugin-koden: https://github.com/reptilo/reptilo-vote
Editor's Notes
- Tanken är att alla ni som sitter här ska kunna göra enganajaxbaseradeplugins efter denna session. Allt ska bli solklart för er!
- Jag heter Egen firma sedan 1 årJobbar framför allt åt webbyråer extra resurserwp sedan 2008 Webb sedan 1998 programmering sedan 1995
- Tanken är att ni alla ska förstå hur man bör skriva en pluginjQuery hur lite kod det krävs för att göra så mycket och hur man kan tänka.
- Det enda den gör är att lägga till den här lilla rutan där man kan rata inläggetLiten plugin men visar tydligt hur man ska använda ajax och jQurey för att få en skön interaktion
- Måste förstå hur WP och plugins jobbarMin plugin besår av 4 delarPublik websidask APIHook - wp_enqueue_scriptsShortcode – All kod i klassen, snyggt och även säkerställa unika funktionsnamnGetext - språkhanteringHook - wp_enqueue_scripts - lägger till CSS-fil och länk till jQuery i HTML-headernShortcode –skapar en instans av klassen som hämtar data från databasen och skriver in HTML och javascript på webbsidanKlickar på JA eller NEJ kommer att fångas av jQuery på HTML-sidan som sen gör ett ajaxanrop till vårt API den publika webbsidanSkapar en ny instans av klassen ReptiloVote som räknar lite och skickar svar som ett jsonobjektjQurey uppdaterar sidanHookShortcodeAjax apiKlassen jQueryGettext - språkhantering
- *Avregistrerar alla jquery skriptHämtar den senaste versionen från jquery.comHär kan man diskutera varifrån man ska hämta jQuery biblioteket… googleapi,jquery eller från egen server!!!! Men den diskusionen kan vi ta senareLägger till en css-filDessa kommer att skrivas ut iHRML-headern
- Såhär ser att vanligt inlägg ut i adminSåhär lite kod krävs för en shortcodeDet enda som händer här är man gör en ny instans av klassen och anropar en funktionincludeCode()Funktionen hämtar data från db och bygger HTML och jQuerykod som sen retruneras och skrivs till sidan
- Såhär ser resultatet utKlicka på en av JA eller NEJ så börjar jQuery-scriptet att jobba
- Manilpulerar databasen - VAR FÖRSIKTIG!Jag kollar parametrar mot SQL-injections med - addslashes, det slår sönder sql satsen jag kollar att anropet kommer från samma domän som wordpress är installerad på man kan naturligtvis spoofahostenJson standardiserat sätt att serialisera dataWP-nonce är en unik nyckel som gäller i 24h, den baseras på KlockslagSaltet i WP-configValfri textsträng, som bör sättas ihop med texpostidFunkar dåligt för denna pluginen då det alltid är samma postid och blir således lätt att sniffa…I denna pluginen gör det skillnad hur många gånger man laddar sidan, inte i vanliga fall
- Wordpress vill att man ska använda Nonce varje gång man skickar en form eller gör ett ajaxanropNonce är en kod som är giltlg i 24 timmar * Eftersom saltet är unikt för varje wp-installation och strängen gör vi unik genom att lägga på post_Id, då validerar bara noncen bara för denna just denna requestI mitt fall hjälper den inte alls, för om man vill sabotera så är det just på en och samma sida som man vill skicka requesten
- Läs wp-configKolla Nonce, check_ajax_refererjag kollar att anropet kommer från samma domän som wordpress är installerad på (HTTP_REFERER)Tar emot parametrarna ochkollar mot SQL-injections med - addslashes, det slår sönder sql satsen
- Här skickar vi data som en array och json-encodeatI Firebug – konsol ser vi svaret
- noConflict för att det inte ska krocka med andra javascriptbilbliotekConsolen kan vara bra att ha under utveckling, man kan se utskriften i konsolen i texFirebugIE brukar bomba om man har kvar console.log() Ändra färg med nya css:eruppdatera tooltipTa bort klickmöjligheten på länkenObs datat kommer tillbaks som en array i json-format
- Initierar klassen med postidVäldigt enkelt att jobba med wp_postmeta tabellenEn snabb plugin – räkna ut statistikenGenerell data ska spars i wp_options tabellen
- Registrera språkfilerna i WP, unik sträng för just min plugin och var filerna ligger på filsystemetSåhär skriver man texterna, så att de blir översättningabara