1. Conducător Ştiinţific: Asist. Dr. ing. Vlad GROSU Absolvent: Dan ARAMĂ
Universitatea“Politehnica” din București
Facultatea de Electronică, Telecomunicații și Tehnologia Informației
Concepţia unui sistem de administrare al conţinutului pentru crearea de site-uri de ştiri, evenimente, blog sau e-commerce
Buna ziua, numele meu este Arama Dan si proiectul meu se numeste ‘Conceptia unui sistem de administrare al continutului pentru crearea de ste-uri de stiri, evenimente, blog sau e-commerce’
Conducător Ştiinţific: Asist. Dr. ing. Vlad GROSU
Absolvent: Dan ARAMĂ
2013

2. Sumar Content Management System şi tehnologiile folosite in proiect
Prezentarea aplicaţiei si a funcţionalităţilor oferite
Concluzii si directii de dezvoltare ulterioară
Aplicatia realizata de mine este un Web CMS, un software care permite crearea si editarea website-urilor.
In aceasta prezentare voi defini in primul rand ce este un CMS, mentionand si tehnologiile folosite de mine pentru realizarea aplicatiei.
Apoi, voi detalia modul de functionare al sistemului proiectat de mine, precum si uneltele pe care le ofera.
In concluzie, voi prezenta directiile viitoare de dezvoltare in domeniu, precum si idei de implementare pentru imbunatatirea sistemului propriu.

3. Content Management System
Ce este un CMS?
Care este conţinutul?
Ce funcţii oferă?
De ce sunt necesare CMS-urile?
Pentru a explica termenul de CMS, am avut in vedere o serie de intrebari.
Un CMS reprezinta, in general, un sistem prin care se colecteaza, depoziteaza si publica continut.
Conceptul de CM are o arie de aplicabilitate mare, nu se limiteaza doar la domeniul web. Exista Document Management System, Enterprise Management System, Web Content Management System, si altele.
In proiectul de fata se urmareste realizarea unui WCMS, care are rolul de a automatiza procesul de creare si editare a site-urilor web. Astfel, utilizatorii fara cunostiinte de web development vor putea introduce si edita continutul dintr-un site cu usurinta cu care ar edita un document text, iar utilizatorii antrenati vor putea folosi uneltele disponibile pentru a lucra mai eficient.
In acest caz, prin continut se intelege informatia introdusa pe site, sub orice forma poate fi ea, text, imagine, video, etc.
Functionalitatea de baza a unui CMS este de deci a asigura utilizatorului posibilitatea de a introduce si edita informatiile dintr-un website. Realizeaza o separare intre continut si prezentare – utilizeaza templateuri. Alte feature-uri sunt : gestionarea utilizatorilor, crearea unui workflow, versionarea continutului, extensibilitatea, etc.
In mediul web curent, avand in vedere trecerea de la site-uri statice, de dimensiuni mici la site-uri dinamice si de volum mare, CMS-urile sunt necesare intrucat permit actualizarea usoara a site-urilor, si ofera oricarui utilizator accesul la crearea unui site propriu.

4. Tehnologii Limbaje folosite : PHP şi MySQL
HTML, CSS, Javascript (JQuery)
In realizarea unei aplicatii web uzual se lucreaza pe 3 nivele, asa cum sunt figurate in figura.
Stratul de baza este cel al continului. Acest nivel este cel care structureaza informatia prezenta pe pagina, realizat prin utilizarea limbajului HTML. Comunicarea cu baza de date este vitala in realizarea unei aplicatii dinamice. In proiectul de fata, am folosit duo-ul PHP, MySQL, datorita usurintei de folosire, a accesibilitatii si a compatibilitatii cu domeniul web.
Aspectul vizual al site-ului este realizat prin nivelul de prezentare. Folosind limbajul CSS, am definit interfata cu utilizatorul.
Nivelul de functionalitate ofera posibilitatea de interactionarea cu interfata, iar pentru acesta am folosit Javascript, in principal biblioteca JQuery. Aici sunt incluse functii care permit raspunsul la actiunile utilizatorului in functie de anumite event-uri (mouseover, click, focus, etc.).

5. Contribuţia personală
Realizarea integrală a unei interfeţe dinamice si interactive
Asigurarea funcţionalităţilor de CM, integrate in interfaţă
Crearea unui sistem securizat, flexibil si optimizat
Pentru realizarea CMS-ul, am proiectat in primul rand interfata cu utilizatorul in totalitate, atat din punct de vedere al design-ului, cat si din punct de vedere al aspectului interactiv conferit de JQuery.
In concomitent, am asigurat integrarea functiilor de content management al sistemului. Acestea include gestionarea utilizatorilor, introducerea si editarea de articole si produse, administrarea comment-urilor, editarea vizuala a site-ului, etc.
Pe parcursul dezvoltarii, am incercat sa acord o importanta deosebita securitatii, precum si conceptelor de SEO (Search Engine Optimization) si RWD (Responsive Web Design) pe care le voi prezenta ulterior.

6. Sistemul de utilizatori
Diferite nivele de utilizatori
Vizitator
Autor
Editor
Administrator
Vizitatorii se pot inregistra printr-o pagină specială
Utilizatorii cu funcţii înalte – introdusi de administrator
Un prim element de CM al aplicatiei este gestionarea utilizatorilor.
In cadrul sistemului exista 2 tipuri mari de utilizatori: vizitatori si utilizatori de nivel inalt.
Vizitatorii sunt cei care vor accesa sistemul ca pe un website. Acestia nu au acces la functiile sistemului si pot doar vizualiza continutul, posta commentarii sau cumpara din magazinul virtual. Acestia se vor inregistra in sistem printr-o pagina dedicata.
Utilizatorii de nivel inalt pot introduce continut, pot edita site-ul din punct de vedere vizual si functional. Introducerea de astfel de utilizatori se face doar de catre un administrator.

7. Interfaţa Interfata cu utilizatorul este prezenta in figura.
Cel mai important element al sistemului este bara de administrare aflata in partea de sus a paginii. De aici, utilizatorii cu drepturile necesare vor putea accesa functiile de introduce a continutului, de editare vizuala, de schimbare a setarilor, precum si de gestionare a commenturior.
Titlul se observa in mijloc, si este editabil.
Continutul efectiv este cuprins in chenarul central. Bara aflata in partea de sus a chenarului este bara de navigare care contine link-uri catre paginile din cadrul site-ului, catre magazinul virtual si catre pagina principala. Deasupra acesteia se afla searchbox-ul care permite cautarea in site.
In partea stanga vor fi afisate articolele publicate, cuprinzand informatii despre titlu, autor, data postarii, categorie…
In partea dreapta este afisat meniul de widget-uri, care ofera o serie unelte de navigare a site-ului. Se pot vedea aici ultimele postari in site, ultimele comentarii, se pot selecta postarile dintr-o anumita luna sau categorie, si pot fi accesate paginile de inregistrare sau autentificare.

8. Introducerea articolelor
Introducerea de articole noi se face prin meniul din imagine.
Am folosit un editor de text numit CKEditor care permite editarea WYSIWYG a continutului. Pentru introducerea de imagini, am integrat propriul sistem de administrare media in editorul de text.
Toate datele articolul (titlu, continut, tip, categorie) ce sa doreste postat sunt preluate de un formular HTML si salvate in baza de date.
Se pot introduce si pagini noi, care sunt diferite fata de articole prin faptul ca sunt statice si accesbile prin bara de navigare.
Include uzual informatii generale despre site, despre compania care il detine, etc.

9. Introducerea de imagini
Figura prezinta sistemul de gestionare al imaginilor.
Meniul din partea stanga permite introducerea de imagini prin utilizarea unui tag <input> de tip file. Utilizatorul va selecta fisierul, va introduce optional un nume pentru acesta si va apasa butonul Upload image, urmand ca imaginea sa fie urcata pe server si o referinta catre aceasta sa fie salvata in baza de date.
Este permis doar introducerea de fisiere de tip imagine, altfel se va afisa un mesaj de eroare.
Tabelul din partea dreapta afiseaza imaginile salvate pe server, incluzand informatii despre nume, autor si data introducerii.

10. Administrarea comentariilor
Vizitatorii pot introduce comentarii
Este necesară moderarea acestor comentarii de către administrator
Utilizatorii site-ului pot introduce comentarii in cadrul articolelor, paginilor sau produselor postate.
Pentru a putea modera aceste comentarii, administratorilor li se ofera dreptul de a aproba sau dezaproba, si chiar de a sterge anumite intrari. Comentariile neaprobate nu vor fi afisate in cadrul site-ului.
De asemenea, am implementat o functie care interzice utilizatorilor sa posteze mai mult de 5 commenturi / 10 minute.

11. Personalizarea vizuală
In cadrul meniului din figura, utilizatorii cu privilegii corespunzatoare pot edita aspectul vizual al site-ului.
In dreapta este afisata pagina principala a site-ului care va reflecta schimbarile efectuate in timp real.
In stanga vor fi disponibile optiuni pentru a schimba titlul si descrierea site-ului (importante pentru SEO), culorile folosite, imaginea de fundal si asezarea continutului.
Toate setarile se vor salva in baza de date si vor fi implementate utilizand un fisier numit config.php, care functioneaza ca un fisier .css, permitand in acelasi timp accesul la variabile PHP.

12. Personalizarea vizuală

13. Personalizarea vizuală

14. Modulul e-commerce Figura reprezinta pagina de magazin virtual.
La fel ca in cazul articolelor, produsele vor fi afisate in partea stanga succesiv, iar in partea dreapta vor fi incluse o serie de widget-uri care permit cautarea de produse.
Fiecare produs din magazin contine o imagine reprezentativa, o scurta descriere, precum si pretul si stocul disponibil.

15. Modulul e-commerce
Coşul de cumpărături – permite vizitatorilor să cumpere din magazin
Cosul de cumparaturi este pus la dispozitia vizitarilor si este vital pentru functionalitatea de e-commerce.
Astfel, utilizatorii pot adauga produse in cos apasand butonul Add to Cart din dreptul prosului respectiv. Se pot si elimina produse din cos. Am implementat functiile necesare pentru a limita numarul de produse care pot fi introduse la numarul produselor disponibile.
Totalul va fi afisat pe bara de administrare.
Cand doreste sa cumpere produsele, utilizatorul va apasa butonul Send order si va fi redirectionat catre un formular care va necesita introducerea adresei si a numarului de telefon pentru a valida comanda.

16. Securitatea Criptarea parolelor utilizatorilor Protejarea sesiunii
Utilizarea comenzii PDO ‘prepare’ pentru protecţia împotriva MySQL Injection

17. Optimizarea pentru motoarele de cautare
SEO (Search Engine Optimization)
optimizarea vizibilităţii site-ului in lista rezultatelor motoarelor de căutare
Metode:
Modificarea titlului
Titlurile articolelor
Link-urile si imaginile introduse in articole
Termenul de SEO defineste un proces prin care se incearca plasarea in mod natural a unui site intr-o pozitie superioara in lista rezultatelor motoarelor de cautare.
Beneficiile acestui proces sunt evidente : un site plasat mai sus va avea mai multi vizitatori si un trafic mai intens.
Reprezinta o modalitate de marketing foarte puternica.
In cadrul aplicatiei mele, am implementat conceptul prin metodele : …

18. Responsive Web Design (RWD)
Compatibilitatea cu majoritatea browserelor şi dispozitivelor pe care este accesibil un site
Adaptarea dimensiunea ecranului
Asigurarea functionalităţilor pe toate dispozitivele
RWD se transpune in practica prin asigurarea compatibilitatii aplicatiei web cu browserele disponibile, precum si prin adaptarea vizuala si functionala a aplicatiei la dimensiunile ecranelor dispozitivelor pe care este acesata.
Altfel spus, un site ‘responsive’ va fi la fel de usor de utilizat si vizualizat pe un smartphone cum este pe un desktop.
RWD este un concept de mare actualitate, avand in vedere cresterea exponentiala a pietii dispozitivelor de tip smartphone sau tableta.

19. Concluzii si dezvoltari ulterioare
S-au respectat cerinţele de proiectare iar sistemul indeplineşte funcţiile principale ale unui CMS
Idei de imbunătăţire a sistemului
Utilizarea bazei de date de tip NoSQL
Utilizarea unuia din limbajele noi de programare – Python sau Ruby (on Rails)
Rafinare SEO
Găzduire online

20. Concluzii si dezvoltari ulterioare
Direcţii ulterioare de dezvoltare in web development:
Accent puternic pe RWD
Importanţa crescândă a SEO
Integrare cu Social Media
API şi Open-source