Crearea Unui Plugin Pentru Platforme Cms

Pluginul “Design Programabil” este dezvoltat pentru cea mai mare platforma de website-uri si blogging din lume denumita WordPress.Pluginul consta intr-o interfata unde administratorul website-ului poate programa o data de incepere si de sfarsit, din viitor, si un fisier css care sa ruleze in intervalul datei respective pe paginile generate de WordPress.

In sub-meniul panoului de control WordPress se afla numele pluginului dezvoltat, link-ul care poate duce la interfata pluginului se numeste “Programeaza Design”. Odata ajunsi in pagina e administrare a pluginului putem selecta orice fisier css aflat in tema curenta a website-ului, sa ruleze pe o perioada pe care tot noi o alegem (cu data de incepere a rularii si data de sfarsit ) din pagina de administrare.

Asadar administratorul website-ului seteaza ca un fisier css sa ruleze de craciun cu o interfata de sarbatoare pentru utilizatorii lui.Inchipuiti-va ca se poate afla intr-un iglu la Polul Nord, fara o conexiune la internet si fara un device la el ca sa se poata loga in panoul de control, si interfata website-ului se schimba.

Cu ajutorul limbajului de programare PHP am reusit sa dezvolt unele functii ce pot fi manevrate si integrate in functiile principale ale WordPress.CSS-ul l-am folosit in crearea fisierului care schimba tema, precum si pentru interfata paginii de administrare a pluginului.

Calendarul care se afla pe pagina de administrare, ofera posibilitatea de a alege orice data in viitor si a fost dezvoltat cu ajutorul unei librarii j-Query pe nume “j-Query UI” care ofera o multime de functionalitati pentru website-uri cum ar fi : datepicker, gallery, icoane, meniuri care pot fi customizate dupa bunul plac.

1.INTRODUCERE

CMS

CMS (Content Management System ) sau pe romaneste Sistem de administrare al continutului este creat in PHP si este un sistem ce permite pe deplin gestiunea continutulul, in special a site-urilor web. CMS permite editare, modificare, publicare, stergere cat si mentenanta dintr-o interfata speciala a administratorului website-ului. Cele mai adesea CMS-urile se gasesc pe bloguri, site-uri de stiri cat si pe platformele comerciale.Scopul CMS-ului este de a evita interventia programatorilor in codul sursa, pentru modificarea elementelor pe site-uri.Concurenta in lumea CMS-urilor este acerba, fiecare platforma de website-uri dezvoltandu-si propriul CMS, insa si un programator cu cunostinte de PHP isi poate dezvolta propriul CMS. (1)

Anatomia CMS-ului:

Fig 1.Anatomia unui Sistem de administrare al Continutului

( Sursa : http://www.steptwo.com.au/papers/kmc_what/ )

Concluzia: CMS-ul este relativ nou pe piata si desi probabil mai sunt companii in lume care nu sunt familiarizate cu el, ele nu folosesc un instrument care are un potential atat de mare incat le-ar putea simplifica mentenanta website-urilor si a intranet-urilor.

WordPress

WordPress a fost fondat in 2003 de Matt Mullenweg si Mike Little si este cel mai mare instrument de creare a website-urilor si a blogurilor din lume de tip open-source, scris in PHP si MySql.Este cel mai popular sistem de blogging folosit, cu milioane de website-uri in intreaga lume.

Termenul de “blog” a aparut in anul 1997 cand John Berger si-a denumit propriul site “weblog”.Un blog este un text scris care contine articole periodice actualizate neintrerupt ce au de obicei un caracter personal.Ca regula actualizarea blog-urilor consta in adaugari de texte noi, asemenea unui jurnal, publicatiile fiind afisate in ordine cronologica.Acest gen de publicatii web sunt in principiu accesibile publicului larg. (2)

Ca sa va faceti o idee in jur de 40% din site-urile existente folosesc un sistem de administrare al continutului, iar din acestea, 60% sunt site-uri WordPress.La o distanta de 53% cu 7% se afla Joomla urmatorul competitor. Prin instalarea WordPress, se primeste un site cu functionalitati minime, care se poate customiza dupa placul fiecarui administrator din ceea ce se numeste : Panou de Control. Se pot schimba teme, se pot adauga functionalitati diferite, pluginuri pentru a face site-ul dinamic.

Cateva statistici despre WordPress (3):

Cuvantul WordPress este cautat in motoarele de cautare de 37 de milioane de ori pe luna.

WordPress poate sa traduca 40 de limbi straine.

Site-ul WordPress are mai multi vizitatori unici decat Amazon, avand doar 227 de angajati fata de 88,400 cat are Amazon-ul, cu 38,604% mai mult.

6 postari pe secunda se inregistreaza pe website-urile WordPress.

In februarie 2014 erau 172 de milioane de bloguri in intreaga lume din care 76 de milioane erau bloguri WordPress.

Exemple de site-uri renumite care folosesc WordPress.

TechCrunh ( unul dintre cele mai mari bloguri din lume )

The New Yorker

BBC America

MTV News

Ebay Inc

Generalitati Pluginuri

Pluginurile pot fi descrise ca modalitati de a extinde functionalitatile si caracteristicile unui website sau a unui software.Daca o aplicatie suporta instalarea unui plugin inseamna customizare.Poate cea mai multa lume cunoaste denumirea de plugin de la web-browser-urile instalate pe fiecare calculator.Pluginurile pentru web-browser sunt adesea pentru a optimiza motoarele de cautare, pentru a scana virusi sau cel mai comun exemplu este plugin-ul Adobe Flash Player care instaleaza un player pentru a permite utilizatorului vizionarea videoclipurilor pe Youtube.

Prin urmare si platforma WordPress suporta termenul de plugin instalat. Exista mii de pluginuri pentru WordPress, dezvoltate fie de companie, fie de dezvoltatori PHP din intreaga lume.

Top 10 pluginuri pentru WordPress (4):

All in One Seo Pack – plugin pentru optimizare a website-ului.

Akismet – plugin pentru blocarea mesajelor spam .

Acest plugin a avut atat de mult succes in randul utilizatorilor WordPress,incat compania a decis sa cumpere acest plugin si sa-l ofere cu instalarea default.

Google XML Sitemaps – plugin pentru creare Sitemaps.

Contact Form 7 – plugin pentru creare formulare.

NEXTGen Gallery – plugin pentru creare de galerii foto.

WP Super Cache – plugin care mareste viteza de incarcare a website-ului.

Google Analytics for WordPress – plugin pentru statistica.

WPTouch – plugin pentru afisarea website-ului pe dispozitive mobile.

WordPress Importer – plugin pentru a importa postari, pagini, comentarii, categorii, tag-uri si altele pe WordPress.

Jetpack – o platforma puternica ce mareste functionalitatea platformei WordPress.

Primul plugin aparut pentru WordPress se numeste “ Hello Dolly “.Tot ceea ce face este sa puna un vers aleatoriu din melodia Louis Armstrong – Hello Dolly, in stanga sus a fiecarei pagini a website-ului.Compania WordPress a ales sa adauge implicit acest plugin cu instalarea WordPress , fiindca e primul plugin creat.Foloseste la ceva acest plugin ? Nu serveste cu nimic, a fost creat doar pentru a arata lumii ce poate sa faca un plugin.In prezent Hello Dolly vine cu instalarea WordPress la pachet alaturi de pluginul Akismet.

In concluzie un plugin poate sa faca orice. Functionalitatea lui poate fi nelimitata si depinde de imaginatia dezvoltatorului care ii va fi scopul.

Motivatia si importanta lucrarii

Dezvoltarea unui plugin mi s-a parut o provocare pe care am vrut sa o duc pana la capat.Alegerea unei idei a fost deasemenea o mare provocare pentru ca trebuie sa fie ceva interesant.Integrarea pluginului mi se pare un lucru destul de complicat, iar manevrarea si editarea functiilor principale ale WordPress-ului poate fi un lucru ce dauneaza website-ului.

La inceput mi s-a parut destul de dificil sa integrez pluginul ca sa fie pe aceeasi “ lungime de unda “ cu platforma WordPress dar odata ce am inteles conceptul si bazele functionalitatii s-a dovedit o experienta interesant.

Mie personal mi se pare interesant un plugin care iti poate rula unui fisier css sau mai multe fisiere css pe o perioada mentionata de tine, de exemplu se poate strica oricand calculatorul si poate trebuie sa le transmiti utilizatorilor website-ului tau sarbatori fericite sau orice alt mesaj vizual.

In prezent blogging-ul este un ascensiune si va continua sa fie inca multi ani.Stirile online au luat fata ziarelor tiparite si continua sa se dezvolte rapid.

CAPITOLUL 2 – CREAREA SI INSTALAREA UNUI PLUGIN

2.1 Crearea unui plugin

Un plugin WordPress permite modificari, customizari si accesorii a unui website.In loc sa modificam codul sursa al website-ului WordPress, pentru a adauga o functionalitate sau o caracteristica, putem face acest lucru mai usor printr-un plugin pe care il vom integra.

Practic ce este un plugin ?

Este un program, format din mai multe seturi de functii scrise in limbajul de programare PHP care adauga o anumita caracteristica sau serviciu unui website WordPress, care apoi poate fi integrat in structura lui folosind puncte de access si metode furnizate de WordPress Plugin Application Program Interface ( API ). (5)

Primul pas este sa stabilesti ceea ce vrei sa faca pluginul, apoi sa-i alegi un nume.

Pasul al doilea este sa creezi un fisier PHP care va avea acelasi nume ca plugin-ul.Spre exemplu daca pluginul se va numi “abc” atunci fisierul se va numi abc.php.

Cum este foarte probabil ca fisierul sa foloseasca cod CSS, Javascript, imagini etc., atunci toate acestea alaturi de abc.php, se vor muta in folder-ul principal de pluginuri al WordPress-ului care se va gasi in:

locul unde ai instalat wordpress/wp-content/plugins/

Exemplu : wordpress/wp-content/plugins/abc/images/ imaginile pluginului

wordpress/wp-content/plugins/abc/css/ fisierele css ale pluginului

wordpress/wp-content/plugins/abc/js/ fisierele javascript ale pluginului

Acum este momentul pentru primele informatii ale pluginului.WordPress are niste informatii standard care trebuie puse in fisierul php.Prin aceste informatii WordPress recunoaste pluginul si il adauga in panoul de control, oferindu-ne posibilitatea sa-l instalam si prin urmare sa ii ruleze functiile.

<?php

* Plugin Name: Numele pluginului

* Plugin URI : optional , url-ul pluginului daca e instalat pe site-ul principal WordPress

* Description: O scurta descriere a pluginului si ce face el

* Version: Versiunea pluginului

* Author: Numele dezvoltatorului pluginului

* Author URI : optional site-ul dezvoltatorului daca are unul

?>

Informatiile minime necesare pentru ca WordPress sa recunoasca pluginul si sa-l adauge in panoul de control este Plugin Name, restul sunt doar optionale.

Asumand ca pluginul va avea de lucrat cu baza de date a WordPress-ului , atunci administratorul are nevoie sa modifice de undeva setarile pluginului, de aceea va trebui sa existe si o Pagina de Administrare a pluginului cu o interfata.

2.2 Instalarea unui plugin

Prin crearea folderului abc,precum si a fisierului abc.php (cu descrierile de mai sus in fisier) in interiorul folderului si plasarea lui in : wp-content/plugins/ (Figura 2)

Fig. 2

Atunci daca intram in panoul de control al site-ului si selectam din meniu “Plugins’ putem vedea ca pluginul nostru a aparut (Figura 3)

In panoul de control se poate intra introducand calea urmatoare :

website-ul nostru/wp-admin, in cazul in care website-ul e world wide

Daca rulam website-ul pe un server virtual cum ar fi WAMP atunci :

localhost/locul instalarii wordpress/wp-admin.

Fig. 3 Panoul de control WordPress – Plugins cu pluginul “abc”

WordPress ne recunoaste numele, descrierea, versiunea si autorul.Exact informatiile furnizate de noi.Daca vrem sa activam pluginul, apasam pe Activate si pluginul nostru se instaleaza.

CAPITOLUL 3 – PLUGIN API

Plugin Api ( Application Programing Interface ) are doar un concept care trebuie inteles pentru a-l putea folosi.El se numeste Hook si mai e denumit “ action “ si “ filter “. WordPress foloseste hook-urile pentru a putea pune pluginul in “miscare”.Hook-urile sunt furnizate de WordPress si permite pluginului practic sa se agate de restul website-ului.

Sunt doua feluri de hook-uri:

Actions

Filters

De multe ori putem sa ne indeplinim acelasi scop fie cu “actions” fie cu “filters” . De exemplu daca vrem ca pluginul nostru sa schimbe textul unui post putem sa adaugam o functie “add_action” functiei principale “publish_post” iar textul va fi schimbat de cum e salvat in baza de date.

Acelasi lucru putem sa-l facem si o functie “add_filter” adaugata functiei principale “the_content”, iar atunci postul va fi modificat cand este afisat din baza de date. (6)

3.1 Actions

Actiunile ( actions ) sunt declasante de un anumit eveniment care are loc in WordPress , precum publicarea unui post ,schimbarea unei teme sau afisarea unei pagini de administrare.O actiune este o functie PHP customizata care este definita in plugin si apoi este agatata (hooked) sa raspunda unor evenimente.Actiunile in general (6):

Modifica baza de date.

Trimit un mesaj de tip E-mail.

Modifica pagina de administrare generata sau pagina front-end care e trimisa userului.

Pasii de creare a unei functii de tip action sunt:

Crearea unei functii php care se va executa cand un anumit eveniment WordPress are loc , in pluginul care il cream.

Vom agata functia (hook) evenimentului utilizand functia “add_action()”.

Punem functia PHP in fisierul unde se afla pluginul si o activam.

3.1.1 Crearea unei functii de tip add_action()

Spre exemplu daca vrem ca prietenii nostrii sa primeasca un mesaj de tip e-mail de fiecare data cand un post este publicat , putem sa definim functia asa:

function email_prieteni($post_ID)

{

$prieteni = '[anonimizat],[anonimizat]';

mail($prieteni, "Blogul lui Cristi a fost updatat",

‘Am pus un post pe blogul meu: http://blogul-meu.ro');

return $post_ID;

}

Atentie mare ca numele functiei sa nu fie foarte simplu.Spun asta pentru ca mai pot fi pluginuri care din intamplare au acelasi nume pentru functii , precum si numele functiilor WordPress-ului ,nu trebuie sa fie la fel, pentru ca PHP nu permite ca doua functii cu acelasi nume sa ruleze simultan.

Dupa ce functia e definita , urmatorul pas este sa ii dam hook cu add_action pentru ca ea sa fie inregistrata in WordPress.

add_action ( 'hook_name, 'numele_functiei');

Unde :

Hook_name = este numele functiei principale , sau a evenimentului care se petrece in WordPress , care ne spune cu ce functie trebuie sa fie asociata functia noastra.

Numele_functiei = numele functiei noastre.

Atunci vom avea : add_action ( 'publish_post, 'email_prieteni');

3.2 Filters

Filtrele ( filters ) sunt functii prin care WordPress transmite datele , in anumite momente de executie , chiar inainte ca actiunile sa aiba loc cu datele ( adaugarea in baza de date sau trimiterea datelor in browser ).Filtrele stau intre baza de date si browser ( cand WordPress genereaza paginile) , si intre browser si baza de date ( cand WordPress adauga posturi noi sau comentarii in baza de date ).Fiecare iesire sau intrare in WordPress se transmite cel putin printr-un filtru.(6)

Pasii pentru a adauga propriul tau filter in WordPress sunt :

Creaza o functie PHP ce filtreza datele.

Agatam (hook) filtrul in WordPress , apeland functia “add_filter”.

Punem functia PHP in fisierul pluginului si o activam.

3.2.1 Crearea unei functii de tip add_filter.

O functie de tip filter ia ca intrare datele nemodificate si returneaza datele modificate ( sau in anumite cazuri o valoare nula care indica,ca datele ar trebui sterse sau ignorate).

Daca datele nu sunt modificate , atunci datele originale trebuie returnate pentru ca alte pluginuri sa le modifice daca este necesar.

De exemplu daca vrem ca si comentariile unui post sa nu contina cuvinte vulgare , am putea crea o functie :

function filtru_cuv_vulgare ( $content ) {

$cuv_vulgare = array('cuv_urat','cuv_urat2','…');

$content = str_ireplace( $cuv_vulgare, '{cenzura}', $content );

return $content;

}

Dupa ce functia e definita , o agatam (hook) in WordPress apeland functia “add_filter”;

add_filter( 'comment_text', 'filtru_cuv_vulgare' );

De asemenea putem sterge atat actiuni cat si filtre aplicand aceeasi metodologie folosind functiile :

Remove_filter('filter_hook','filter_function')

Remove_action('action_hook','action_function')

CAPITOLUL 4 – PREZENTAREA PLUGINULUI DEZVOLTAT

4.1 Tehnologii folosite

Fig. 4 – Diagrama a tehnologiilor folosite si conexiunea fisierelor

PHP

PHP este un limbaj de programare.Numele PHP provine din limba engleza si este un acronim recursiv: PHP Hypertext Preprocessor.Folosind initial pentru a produce pagini web dinamice,este folosit pe scara larga in dezvoltarea paginilor si aplicatiilor web.Se foloseste inglobat in codul HTML , dar incepand de la versiunea 4.3.0 se poate folosi si in mod “linie de comanda”, permitand crearea de aplicatii independente.Este unul dintre cele mai importante limbaje de programare web open-source si server-side , existand versiuni disponibile pentru majoritatea web serverelor si pentru toate sistemele de operare.Comform statisticilor este instalat pe 20 de milioane de site-uri web si pe 1 milion de servere web.

PHP insemna initial Personal Home Page si a fost inceput in 1994 ca o extensie a limbajului server-side Perl, apoi ca o serie de CGI-uri compilate de catre Rasmus Lerdorf ,pentru a genera un curriculum vitae si pentru a urmari numarul de vizitatori ai unui site.Apoi a evoluat in PHP 2.0 dar proiectul open-source a inceput sa ia amploare cand Zeev Suraski si Andi Gutmans de la Technion au lansat o versiune a interpretorului PHP in vara anului 1998 , aceasta versiune primind numele de PHP 3.0. (7)

HTML

Unul din primele elemente fundamentale ale WWW ( World Wide Web ) este HTML ( Hypertext Markup Language ), care descrie formatul primar in care documentele sunt distribuite si vazute pe Web. Multe din trasaturile lui, cum ar fi independenta fata de platforma, structurarea formatarii si legaturile hipertext, fac din el un foarte bun format pentru documentele Internet si Web.
Primele specificatii de baza ale Web-ului au fost HTML, HTTP si URL.
HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989. HTML a fost vazut ca o posibilitate pentru fizicienii care utilizeaza computere diferite si schimbe intre ei informatie utilizind Internetul. Erau prin urmare necesare citeva trasaturi : independenta de platforma, posibilitati hypertext si structurarea documentelor. Independenta de platforma inseamna ca un document poate fi afisat in mod asemanator de computere diferite ( deci cu fonte, grafica si culori diferite ), lucru vital pentru o audienta atat de variata.

Hipertext inseamna ca orice cuvint, fraza, imagine sau alt element al documentului vazut de un utilizator (client) poate face referinta la un alt document, ceea ce usureaza mult navigarea intre multiple documente sau chiar in interiorul unui aceluiasi document. Structurarea riguroasa a documentelor permite convertirea acestora dintr-un format in altul precum si interogarea unor baze de date formate din aceste documente. (8)

CSS

Css este acronimul pentru Cascading Style Sheets si este un limbaj (style language) care defineste layout-ul pentru documentele HTML.

Cand cei mai multi folosesc CSS-ul pentru a schimba design-ul paginilor web si interfetele utilizatorilor scrise in HTML si XHTML , limbajul poate fi aplicat oricarui document de tip XML, incluzand plain XML , SVG si XUI.Impreuna cu HTML si Javascript , Css-ul este una dintre fortele design-ului ce e folosit de majoritatea website-urilor din intreaga lume , pentru a crea pagini web , interfetele utilizatorilor pentru aplicatii web si interfetele utilizatorilor pentru aplicatiile mobile. (9)

j-Query

j-Query este o librarie JavaScript care ofera webmasterilor oportunitatea de a usura anumite procese ce pot implica managementul inter-b rowser al evenimentelor,traversarea arborelui DOM in HTML, animatii de tip AJAX si altele.De regula, aceasta librarie este utilizata indeosebi pentru a rezolva anumite problem ce tin de programarea web, astfel incat diferite task-uri (sarcini) dinamice care nu pot fi realizate prin intermediul unui limbaj de marcare – spre exemplu HTML.In momentul de fata, j-Query este disponibil si accesibil in fiecare web broser, fiind creat intr-o maniara cat mai simpla cu putinta in comparative cu Javascript. (10)

4.2 Diagrame aferente Pluginului

Diagrama Use Case a website-ului WordPress ( panoul de control ) (Figura 5)

Fig. 5 – Diagrama Use Case a panoului de control WordPress

In aceasta diagrama se poate observa ca pluginul “Design Programabil“ apare in sub-meniul “Appearance”. Deasemenea pluginul se poate gasi si in sub-meniul “ Plugins – Installed “.

Diagrama Use Case a pluginului “ Design Programabil” (Figura 6)

Fig. 6 – Diagrama Use Case a pluginului “ Design Programabil”

Diagrama Enviroment a pluginului “ Design Programabil“ (Figura 7)

Fig. 7 – Diagrama Enviroment a pluginului “Design Programabil“

Diagrama pe componente a pluginului “Design Programabil” (Figura 8)

Fig. 8 – Diagrama pe componente a pluginului “Design Programabil”.

Diagrama Enviroment a panoului de control WordPress (Figura 9)

Fig. 9 – Diagrama Enviroment a panoului de control WordPress.

In aceasta diagrama se poate observa ca pluginul “ Design Programabil “ apare in sub-meniul “Appearance”, dar numele link-ului care duce la interfata se numeste “Programeaza Design”. Deasemenea pluginul se poate gasi si in submeniul “ Plugins – Installed “.

Diagrama Activity a pluginului “ Design Programabil (Figura 10)

Fig.10 – Diagrama Activity a pluginului “ Design Programabil “

4.3 Dezvoltarea pluginului “Design Programabil“

In dezvoltarea pluginului “ Design Programabil “ am creat un site WordPress , l-am customizat ,am dezvoltat pluginul ,apoi instalandu-l pe website mi-am atins rezultatele pe care le-am avut ca obiectiv.

Pluginul se numeste “ Design Programabil “ si are ca rol schimbarea designului website-ului , intr-un anumit interval de zile ales de administrator.

Spre exemplu plecam intr-o excursie de craciun , si vrem ca website-ul nostru sa intampine utilizatorii cu o interfata care sa aiba legatura cu craciunul si sa le spune un calduros “ Sarbatori Fericite”.

Instalam pluginul “Design Programabil“ si in pagina de administrare a pluginului putem sa adaugam un fisier CSS care sa ruleze in intervalul 25 – 27 Decembrie.In 25 la ora 00:00 website-ul nostru va rula fisierul CSS si isi va schimba design-ul , iar in 27 la ora 00:00 design-ul va reveni la loc.

Desigur , daca va intrebati de ce nu am ales o tema de craciun care sa fie aplicata pe parcursul craciunului este pentru ca fiecare tema are o interfata diferita.De cele mai multe ori nu sunt bune schimbarile majore cand vine vorba de interfata website-urilor pentru ca utilizatorii tind sa plece in loc sa incerce sa se familiarizeze cu noua interfata.

Pentru inceput am creat informatiile in fisierul principal al pluginului pentru ca WordPress sa poata recunoaste pluginul.

<?php

/*

* Plugin Name: Design Programabil

* Description: Seteaza unul sau mai multe fisiere css sa ruleze in viitor pe o perioada aleasa de administrator.

* Author: Moldovan Cristian

* Version: 1.0

* Author URI: http://localhost/wordpress

*

*/

Dupa ce am furnizat informatiile necesare pluginului , il vom putea localiza in panoul de control al website-ului in meniul : Plugins – Design Programabil.

Fig.11 Pluginul se poate activa din meniul Plugins in Panoul de control

Dupa cum se vede , pluginul nostru e recunoscut de WordPress si poate fi activat.Contine numele pluginului, descrierea lui , versiunea si numele autorului.Se poate activa dar desigur nu face nimic deoarece nu contine nici o linie de cod.

Imediat cum activam pluginul , tabelul se instaleaza in baza de date ruland aceasta bucata de cod:

/**Instaleaza tabelul in baza de date

function install()

{

global $wpdb;

$table_name = $wpdb->prefix ."designprogramabil";

if($wpdb->get_var

("SHOW TABLES LIKE '$table_name'")!= $table_name)

{

$sql = "CREATE TABLE $table_name

(

id mediumint(3) NOT NULL AUTO_INCREMENT,

startTime datetime NOT NULL,

endTime datetime NOT NULL,

cssFile varchar(100) NOT NULL,

repeatYearly tinyint(1) NOT NULL,

status char(10) NOT NULL DEFAULT 'active',

UNIQUE KEY id (id)

);";

require_once(ABSPATH.'wp-admin/includes/upgrade.php');

dbDelta($sql);

add_option("designprogramabil_db_version","1.0");

}

}

Functia install , apeleaza la variabila globala $wpdb. Wpdb este o clasa WordPress care contine un set de functii care ne ajuta sa comunicam cu orice tabel din baza de date a website-ului.

Specificam ca vrem ca numele tabelului sa fie “designprogramabil” iar in fata sa aiba prefixul WordPress care este “wp_”.

Daca tabelul nu exista deja atunci vom vrea 6 campuri in tabel:

Id-ul , fiecare programare va avea id-ul lui.

startTime , timpul cand va incepe sa ruleze fisierul css.

endTime , pana in momentul in care va rula fisierul css.

cssFile , care va fi fisierul css pe care il va alege administratorul sa ruleze in perioada dorita.

repeatYearly , optiunea de a repeta in fiecare an rularea css-ului.

Status , va fi programarea in sine care va fi by default “active”.

Vom apela functia dbDelta() a WordPress-ului , care examineaza structura curenta a tabelului ,o compara cu structura pe care o dorim noi , si in final ori modifica ori adauga in tabel daca e necesar.

Vom gasi aceasta functie in fisierul upgrade.php al website-ului.Ca sa ajungem acolo va trebui sa facem un require_once cu calea absoluta a website-ului si a fisierului upgrade.php.

Dupa activarea pluginului ,tabelul nostru va aparea in baza de date. (Figura 12)

Fig.12 – Tabelul wp_design programabil al pluginului apare dupa instalare in baza de date WordPress

Fig.13 – Campuriile tabelului “wp_designprogramabil”

Daca selectam tabelul putem vedea campurile create mai sus.

Vom crea pagina de administrare pe care o vom putea accesa din Panoul de control WordPress – Appearance – Programeaza Design.

Pentru a verifica ce fisiere se afla in tema curenta a website-ului folosim

$designprogramabil = $this->read_program('active');

$theme = wp_get_theme();

$files = $theme->get_files();

$cssFiles = array();

foreach($files as $key => $value)

{

$length = strlen('.css');

if( (substr($key, -$length) === '.css') )

{

$cssFiles[]=$key;

}}

Unde read_program(); este functia ce va citi programul din baza de date dar o sa ne intalnim cu ea mai tarziu.

Wp_get_theme(); ne va stoca in variabila $theme tema care e activata.

Get_files(); va cauta toate fisierele din tema si le va stoca in $files.

Iar apoi cu “foreach” parcurgem toate fisierele din tema , stocam in variabila $length cat de mare este dimensiunea extensiei fisierelor css , iar apoi ne asiguram ca vom lua toate fisierele de tip css si le introducem intr-un array pentru a le putea prezenta administratorului.

Atunci cand salvam un program de rulare a fisierelor css si pe urma intram in interfata pluginului ca sa vedem ce avem salvat , avem nevoie de urmatoarea secventa de cod:

<div id="designprogramabil">

<?php

//verifica fiecare item programat , aratandu-i administratorului arhiva salvata

foreach($designprogramabil as $Itemprogramat)

{

$id=$Itemprogramat->id;

$startTime= $Itemprogramat->startTime;

$endTime=$Itemprogramat->endTime;

$cssFileSelected=$Itemprogramat->cssFile;

$repeatedYearly= '';

if($Itemprogramat->repeatYearly ==1)

$repeatedYearly= " checked";

?>

<div class='Itemprogramat' id='Itemprogramat-<?php echo $id; ?>'>

<div class='styleSheetCol ss-col'>

<select name='items<?php echo $id; ?>-stylesheet' class='required'>

<?php foreach($cssFiles as $cssFile){?>

<option value="<?php echo $cssFile;?>" <?php if($cssFileSelected==$cssFile) echo " selected='selected'";?>><?php echo $cssFile; ?></option>

<?php }?>

</select>

</div>

<div class='startTimeCol ss-col'>

<input name='items<?php echo $id; ?>-startTime' type='text' size='11' class='datePicker required' value='<?php echo $startTime; ?>' maxlength="10" />

</div>

<div class='endTimeCol ss-col'>

<input name='items<?php echo $id; ?>-endTime' type='text' size='11' class='datePicker required' value='<?php echo $endTime; ?>' maxlength="10" />

</div>

<div class='repeatYearlyCol ss-col'>

<input type='checkbox' name='items<?php echo $id; ?>-repeatYearly' <?php echo $repeatedYearly?> />

</div>

<div class='miscCol ss-col'>

<input type='checkbox' name='items<?php echo $id; ?>-delete' class='hiddenInput' />

<input type='hidden' name='itemKeys[]' class='hiddenInput' value='<?php echo $id; ?>' />

<a class='deleteLink' href='#'>Sterge</a>

</div>

</div><?php

}?>

Parcugem fiecare program din baza de date pe care l-am stabilit anterior si vom furniza administratorului arhiva.

ItemKeys[] , este array-ul ce contine valorile unice a fiecarei programari (programarile care sunt deja arhivate) , similar cu $id-ul ce se foloseste la baza de date dar in cazul acesta serveste altui scop , acela de a prelua fiecare programare si salvand-o in baza de date.

Interfata utilizatorului cand vrea sa vada daca un program este programat sau a fost.

Fig.14 – Interfata pluginului din pagina de administrare cand avem salvata o programare

Odata ce preluam datele specifice unei programari , va trebui sa le salvam in tabelul nostru din baza de date.

/**

*Salveaza programul in baza de date

*/

function save_program()

{

global $wpdb;

$tableName = $wpdb->prefix ."designprogramabil";

if($_POST['itemKeys'])

foreach ($_POST['itemKeys'] as $postKey)

{

$cssFile=$_POST["items$postKey-stylesheet"];

$startTime=$_POST["items$postKey-startTime"] . ' 00:00:00';

$endTime=$_POST["items$postKey-endTime"] . ' 23:59:59';

$repeat=0;

if($_POST["items$postKey-repeatYearly"]=='on')

$repeat=1; $isToDelete=$_POST["items$postKey-delete"];

if(!$isToDelete==1)

$sql = "UPDATE $tableName SET cssFile='$cssFile', startTime='$startTime', endTime='$endTime', repeatYearly='$repeat' WHERE id=$postKey;";

else

$sql = "DELETE FROM $tableName WHERE id=$postKey;";

$wpdb->query($sql);

}

if($_POST['newItemsKeys'])

foreach ($_POST['newItemsKeys'] as $newKey)

{

$cssFile=$_POST["newItems$newKey-stylesheet"];

$startTime=$_POST["newItems$newKey-startTime"] . ' 00:00:00';

$endTime=$_POST["newItems$newKey-endTime"] . ' 23:59:59';

$repeat=0;

if($_POST["newItems$newKey-repeatYearly"]=='on')

$repeat=1;

$sql=" INSERT INTO $tableName(cssFile,startTime,endTime,repeatYearly) values ('$cssFile','$startTime','$endTime',$repeat);";

$wpdb->query($sql);}}

Din nou cu clasa ajutorul clasei “wpdb” comunicam cu tabelul din baza de noastra de date.

Avem mai sus acest 'itemKeys' si 'newItemsKeys'. 'itemKeys' dupa cum spuneam mai sus este o valoare unica a unei programari sau a unui scenariu.De exemplu daca facem o programare pentru 2015 , intr-o oricare zi si salvam acea programare, iar apoi poate peste 2 saptamani vrem sa ne uitam daca am salvat vreo programare. Atunci cand intram in interfata pluginului vad pe anul 2015 o programare iar itemKeys-ul tine valoarea acelei programari pentru ca mai tarziu sa poata eventual sa o modifice.Sa spunem ca atunci mai vrem sa facem o programare si adaugam un nou fisier css si atunci 'newItemsKeys' apare si tine valoarea acelei noi programari.

Si atunci vom parcurge fiecare programare salvata ( daca avem ) , si vom lua id-ul acelei programari.

id=$postKey;

foreach ($_POST['itemKeys'] as $postKey)

Vom alege un alt fisier css daca dorim , vom alege o noua data de incepere sau de sfarsit , sau daca vrem putem sa stergem programarea.

if(!$isToDelete==1)

Daca administratorul nu sterge aceasta programare atunci se va face UPDATE-ul tabelului din baza de date.

Acelasi lucru se va intampla si cu

foreach ($_POST['newItemsKeys'] as $newKey) ,doar ca aici vom insera in tabelul nostru o noua programare.

Functia query() ne permite sa executam orice sql query dorim in baza de date WordPress.

“stylesheet” gaseste orice fisier cu extensia css din tema noastra.

Dupa ce am salvat programarea in baza de date avem nevoie de o functie sa si o citim la un moment dat.

/*

*Citeste programul din baza de date pentru un anumit scenariu

*/

function read_program($status)

{

global $wpdb;

$tableName = $wpdb->prefix ."designprogramabil";

$where = "WHERE status='$status'";

if($status=='current')

$where = "WHERE status='active' AND now() BETWEEN startTime AND endTime ";

$sql="SELECT id,date_format(startTime,'%Y-%m-%d') as startTime,date_format(endTime,'%Y-%m-%d') as endTime,cssFile,repeatYearly FROM $tableName $where ORDER BY startTime;";

$results = $wpdb->get_results($sql);

return $results;

}

Din tabelul wp_designprogramabil , daca,campul “status” este “active”

Now() ne returneaza data si ora curenta , iar “BETWEEN startTime AND endTime” intre data de incepere si data de sfarsit.

Toate programariile sunt ordonate de data cea mai apropiata pana la data cea mai indepartata de data curenta.

Functia get_results()ne poate returna randuri multiple dintr-un tabel din baza de date.Functia returneaza tot query-ul intr-un array.

Chiar daca am creat pagina de administrare (administrator.php) ,pana ca pagina sa fie afisata mai sunt cativa pasi si anume o functie care o arata efectiv ,iar apoi o functie care va spune unde de unde sa fie accesata.

/**

* Arata pagina de administrare (adminpage)

*/

function admin_options_page()

{

$this->save_program();

require_once($this->pluginDIR .'/administrator.php');

}

Avem functia “save_program()” care va fi apelata de fiecare data cand intram in pagina de administrare a pluginului , pentru a modifica o programare sau pentru a adauga una noua , apoi cu “require_once” cerem pagina “administrator.php” unde avem scris formul si alte date.

Ca interfata pluginului din administrator.php sa fie prezenta in panoul de control WordPress trebuie sa specificam unde.

/**

*Adauga link-ul de administrare (in sub-meniul Appearance din panoul de administrare ) in wordpress pentru administrator

*/

function admin_menu_link()

{

add_theme_page('DesignProgramabil','ProgrameazaDesign','administrator',basename(__FILE__),array(&$this,'admin_options_page'));

}

Functia add_theme_page()adauga o pagina noua in sub-meniul Appearance , in cazul acesta pagina de administrare a pluginului.Aceasta functie are 5 parametrii

Titlul paginii care va aparea sus in fereastra deschisa : Design Programabil.

Numele meniului ce va fi afisat : Programeaza Design.

Cine are acces la pagina : administratorul.

Fisierul unde ruleaza scriptul : basename(__FILE__) adica designprogramabil.php.

Functia care contine pagina de administrare a pluginului descrisa mai sus : admin_options_page

Ca sa determinam ce fisiere css trebuie incluse am folosit functia :

La inceputul programului , am denumit o variabila :

var $cssFilesToInclude=array(); care va fi un array din toate fisierele css de inclus.

function determine_styles_to_include()

{

$DP = $this->read_program('current');

foreach($DP as $style)

{

array_push($this->cssFilesToInclude, $style->cssFile);

}

}

Variabila “$DP” va retina toate programariile din tabelul pentru pluginul nostru.

Parcurgem toate programariile si le adaugam in array-ul “cssFilesToInclude”, apoi in variabila $style stocam fisierul css.

Pentru a suprascrie fisierele css si pentru a introduce un fisier css avem nevoie de o functie.

Am denumit-o enqueue_styles() pentru ca e un nume comun folosit in suprascrierea fisierelor de tip css , js , jquery, de alfel si functia principala a WordPress-ului care se ocupa de asta se numeste wp_enqueue_style.

function enqueue_styles()

{

$id=0;

foreach($this->cssFilesToInclude as $cssFile)

{

$id++;

$cssFilePath=get_bloginfo('stylesheet_directory')."/$cssFile";

wp_enqueue_style("designprogramabil$id",$cssFilePath);

}

}

Cu functia get_bloginfo()putem afla orice informatie vrem despre website,pe care o putem folosi oriunde in codul PHP.Asadar cu :get_bloginfo('stylesheet_directory')

putem obtine URL-ul directorului unde sunt fisierele de tip stylesheet din tema curenta.Acest foreach parcurge array-ul si enumera pe rand fiecare fisier css.

Apoi cu functia wp_enqueue_style putem adauga intr-un mod sigur si eficient fisiere css paginii generate de WordPress.

La inceput vorbeam despre “add_action” si “add_filter” cele doua hook-uri care se folosesc pentru a integra un plugin in platforma WordPress.

/*register hooks contine toate add action si add filters ce se folosesc in plugin*/

function register_hooks()

{

if(is_admin())

{

register_activation_hook(__FILE__, array(&$this,'install'));

add_action('admin_menu', array(&$this,'admin_menu_link'));

add_action('admin_enqueue_scripts',array(&$this,'admin_enqueue_scripts'));

}else{

add_action('wp_print_styles',array(&$this,'enqueue_styles'));

}

}

register_activation_hook este o functie ce seteaza ca o anumita functie sa mearga atunci cand pluginul este activat, in acest caz atunci cand instalam pluginul “Design Programabil” pe website , atunci tabelul “wp_designprogramabil” se creeaza in baza de date.

'admin_menu_link’ contine butonul din sub-meniul Appearance ce ne duce la interfata pluginului, activand aceasta functie ea ii va da o noua comanda functiei 'admin_menu'deja existenta in WordPress.

'admin_enqueue_scripts' contine toate fisierele CSS si j-Query pe care le-am folosit in dezvoltarea interfetei acestui plugin.

'enqueue_styles' este functia care va seta css-ul sa ruleze la data dorita de administrator.

La stergerea pluginului am creat un fisier css “uninstall.php” pentru a sterge tabelul din baza de date.

/* Sterge tabelul creat pentru plugin atunci pluginul va fi sters*/

global $wpdb;

$table_name = $wpdb->prefix ."designprogramabil";

$sql = "DROP TABLE $table_name;";

$wpdb->query($sql);

Daca denumesti fisierul “uninstall.php” atunci WordPress recunoaste fisierul din plugin si face legatura automat conexiunea la baza de date.

Datepicker-ul l-am creat cu ajutorul j-Query UI , care este o librarie ce vine de la User Interface.

j-Query UI ofera un puternic tool de creare a temelor.Permite crearea unei teme pentru site si aplicarea ei fara multe complicatii.Se pot fie descarca teme deja create sau fie se pot crea teme customizate cu J-Query ThemeRoller, care permite selectarea culorilor , donturilor , umbrelor , orice e potrivit website-ului.Cu ajutorul ThemeRoller, am selectat widget-ul DatePicker care ofera interfata unui calendar stilizat frumos.Apoi am downloadat intreg fisierul j-Query si am selectat doar Datepicker-ul.

Fisierul css care ruleaza pe site “craciun.css” , se afla in tema curenta a WordPress-ului.Pentru a putea stiliza paginile WordPress, id-urile si clasele div-urilor vor fi trecute in fisierul css dorit alaturi de noile proprietati dorite.

Fisierul CSS “craciun.css” care ruleaza pe data dorita de administrator are urmatorul cod:

body.custom-background {

background-image:url("http://localhost/wordpress/wp-content/themes/twentytwelve/winter.jpg") !important;

}

.main-navigation {

background-image:url("http://localhost/wordpress/wp- content/themes/twentytwelve/navmenu.jpg");

border-radius:15px;

}

.main-navigation li {

padding-left:15px;

}

.main-navigation a {

color: #cc0000 !important;

font-weight:bold;

}

.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {

text-align:left;

}

.site {

border-radius:45px;

}

4.4 Rularea pluginului

Dupa amplasarea fisierelor de in directorul principal al pluginului in wp-content/plugins/, in panoul de control activam pluginul.

Fig.15 – Din panoul de control – Plugins – putem instala activa pluginul

In baza de date WordPress , dupa instalare se creeaza automat tabelul “wp_designprogramabil”

Fig.16 – Tabelul “wp_designprogramabil” este creat imediat dupa activarea pluginului

Dupa instalarea pluginului pagina de administrare a o gasim in submeniul Appearance denumita “Programeaza Design”.

Fig.17 – Pagina de administrare a pluginului se gaseste in Panoul de control – submeniul Appearance sub denumirea “ Programeaza Design”

Interfata paginii de administrare a pluginului :

Fig.18-19 – Interfata pluginului din pagina de administrare

Revenind putin la inceput , odata cu instalarea WordPress , avem un website sau blog simplu fara prea multe functionalitati.Am customizat website-ul dupa bunul meu plac, adaugandu-i o un design nou si am ajuns la rezultatul de mai jos, pentru a testa pluginul dezvoltat.(Figura 20)

Fig.20 – Prima pagina a website-ului WordPress creat pentru a testa pluginul.

Apoi facem o programare pentru craciun , ca in cele 3 zile de craciun sa se ruleze un fisier css care are unele efecte de sarbatoare.

Fig.21 – Stabilim o data de incepere si de sfarsit pentru rularea fisierului css.

Deasemenea tabelul nostru din baza de date isi umple campurile cu informatiile furnizate de administrator.

Fig.22 – Campuriile din tabelul “wp_designprogramabil” cu informatiile furnizate

Apoi pe parcursul a cele 3 zile de decembrie , 24.12.2014 – 27.12.2014 , website-ul nostru va arata asa :

Fig.23 – Noul design al website-ului.

4.5 CONCLUZII

In concluzie consider ca pluginul “Design Programabil”, este foarte practic si eficient in rezultatele pe care le ofera.

Am facut o introducere a ceea ce inseamna Content Management System si cat de important este prezenta lui pe orice website existent.Am vorbit despre WordPress, mai mare platform din blogging din lume si nu in ultimul rand am aprofundat termenul de “plugin” care din aceasta lucrare reiese ca poate fi extraordinar de puternic.

Am dorit sa ofer si un tutorial in limba romana despre cum se creaza un plugin si instalarea lui pe platforma WordPress si am explicat cele mai importante functii “add_action” si “add_filter” fara de care nu se poate integra un plugin in platforma WordPress.Totodata am intalnit si am modificat functiile principale ale WordPress-ului, explicand pe larg functionalitatea lor.

Folosind tehnologiile in crearea acestui plugin precum si metodele alese in dezvoltarea lui, am incercat sa creez ceva interesant care poate fi de folos oricui.

O imbunatatire pentru pluginul “Design Programabil” ar fi dezvoltarea unei functionalitati care sa permita sa schimbe si textul nu doar design-ul.In momentul de fata pluginul schimba proprietatile css pe un termen setat de administrator in viitor dar ar fi interesant daca ar putea sa schimbe si textul dintr-un “div”.De exemplu alaturi de elementele de craciun care vor aparea pe site, sa apara si un post special creat de administrator pentru craciun.La o prima parere consider ca s-ar putea realiza tot sub forma metodologiei asteia, salvand postul in baza de date si apoi la data specificata de utilizator postul sa fie publicat pe website.

CAPITOLUL 5 – BIBLIOGRAFIE

(1) http://en.wikipedia.org/wiki/Content_management_system

(2) http://en.wikipedia.org/wiki/WordPress

(3) https://managewp.com/14-surprising-statistics-about-wordpress-usage

(4) http://goldensite.ro/blog/wp-plugin/cele-mai-populare-10-plugin-uri-din-toate-timpurile/

(5) http://codex.wordpress.org/Writing_a_Plugin

(6) http://codex.wordpress.org/Plugin_API

(7) http://ro.wikipedia.org/wiki/PHP

(8) http://html-tutor.net/ceestehtml/

(9) http://en.wikipedia.org/wiki/Cascading_Style_Sheets

(10) nevo.ro/blog/totul-despre-jquery-renunta-la-javascript-pentru-totdeauna

https://wordpress.org/support/

http://codex.wordpress.org/Main_Page

http://codex.wordpress.org/Administration_Panels

http://codex.wordpress.org/Function_Reference