Sistem Informatic Dedicat Procesului De Management Al Activitatilor De Secretariat Dintr O Facultate Bip [311409]

PROIECT DE DIPLOMĂ

Coordonator Științific Absolventă

S. L. Dr. Ing. Giorgian NECULOIU Iulia Patricia BÎZGAN

București 2017

Sistem informatic dedicat procesului de management al activităților de secretariat dintr-o facultate

Coordonator științific: Absolvent: [anonimizat] 2017

[anonimizat], cât și în domeniul resurselor umane.

Sistemele de gestiune a activităților de secretariat existente au apărut din necesitatea integrării mijloacelor și tehnicilor de comunicație și de prelucrare automată a datelor, urmărind creșterea performanței și calității activității de secretariat.

Principalele îndatoriri care revin departamentului de resurse umane în prezent sunt următoarele: [anonimizat].

[anonimizat], atribuții și sarcini individuale complexe.

Sistemele de management existente urmăresc o [anonimizat] a [anonimizat].

Figura 1

Termenul de “management” [anonimizat] “manus” din latină care înseamnă mână și implică acțiunea de manevrare. În italiană, s-a format apoi cuvântul “mannegio” care se referă la prelucrarea cu mâna și de aici, a apărut termenul francez “manège” cu semnificația de loc unde sunt dresați caii. Ulterior, a apărut în limba engleză cuvântul “manage” [anonimizat] “management”, care înseamnă conducător.

[anonimizat], metodele de management etc. se schimbă permanent. El este în același timp și stabil deoarece urmărește folosirea unor structuri cunoscute în preluarea informațiilor și adoptarea deciziilor. [anonimizat]-[anonimizat], schimb și consum. Totodată, [anonimizat] a [anonimizat], reluarea procesului de management.

[anonimizat], o nouă terminologie aplicată unei stări de fapt. La această oră aproape oricine a auzit de sisteme informatice dedicate procesului de management al secretariatelor.

Sistemul informatic este un nou mod de gestionare a activităților de secretariat prin utilizarea calculatoarelor și a devenit posibilă o dată cu dezvoltarea pe scară largă a [anonimizat].

Un sistem informatic dedicat procesului de management al documentelor este o [anonimizat], module cu rol de stocare, securitate, indexare și de identificare rapidă a documentelor. Astfel de aplicații sunt din ce în ce mai răspândite în domeniul resurselor umane deoarece oferă utilizatorilor funcționalități multiple în procesul de gestionare, prelucrare și stocare a datelor.

Motivarea alegerii temei

Unul dintre motivele principale, care a dus la alegerea acestei teme de diplomă, a fost necesitatea facilitării gestiunii activităților de secretariat prin crearea unei platforme web, care să permită interacțiunea facilă între personalul secretariatului și viitorii studenți, actualii studenți sau personalul didactic.

Un alt motiv este determinat de studiul pe care l-am realizat asupra limbajelor și tehnicilor de programare web care m-a ambiționat să creez o platformă web în care sunt înglobate mai multe funcționalități necesare pentru o bună gestiune a activităților de secretariat.

Platforma web de față oferă mai multe aplicații individualizate pentru fiecare segment în parte, mai exact conține cinci tipuri diferite de roluri ce pot fi atribuite în funcție de preferințele utilizatorilor.

O noutate pe care acest proiect o aduce constă în organizarea și stocarea informațiilor în format electronic, utilizând o bază de date pentru interacțiunea eficientă cu datele stocate. Astfel, asigurându-se o securitate sporită a informațiilor confidențiale deținute de secretariat prin limitarea utilizatorilor în funcție de rolul deținut în cadrul facultății. Mai exact, organizarea se compune din module complexe cu funcționalități individualizate împărțite în : modulul vizitator sau candidat, modulul student, modulul profesor sau cadru didactic, modulul secretariat și modulul administrator.

Aceste segmente conțin aplicații precum : formular de înscriere online cu posibilitatea de salvare în format pdf, vizualizare , editare și ștergere informații stocate în baza de date, formulare pentru crearea și atribuirea rolurilor, crearea și gestionarea solicitărilor utilizatorilor și limitarea accesului în baza de date.

O astfel de aplicație este necesară într-o organizație social-culturală, cum ar fi instituții de învățământ sau societăți care dețin în organigramă un departament de secretariat, deoarece oferă posibilitatea îmbunătățirii procesului de management al departamentului specificat. Mai exact, reduce consumul de resurse achiziționate pentru arhivele tipărite, crește productivitatea prin eficiența interacțiunii cu arhivele stocate în format electronic și optimizează procesele de gestiune întreprinse de personalul departamentului de secretariat.

Multe întreprinderi social-culturale au adoptat varianta utilizării unor platforme similare, de aceea am considerat că reprezintă o oportunitate pentru nișa de piață a acestui tip de societăți.

Figura 2

Obiectivele propuse in cadrul lucrarii

În realizarea acestui proiect de diplomă mi-am stabilit mai multe obiective de atins cu ajutorul cărora am elaborat etapele de proiectare.

În primă fază pentru a crea produsul informatic, m-am documentat despre activitățile de secretariat existe în Facultatea de Hidrotehnică și am analizat necesitățile departamentului pentru a facilita și eficientiza munca personalului de la secretariat.

Următorul pas important în elaborarea acestei lucrări a fost analiza de piață și informarea despre produsele software existente și utilizate de alte organizații și instituții social-culturale.

După identificarea activităților ce ar putea fi transformate în funcționalități utilizând o platformă web, am aprofundat teoria limbajelor de programare web prin parcurgerea unor tutoriale și aplicarea lor în aplicații similare pentru acomodarea cu mediul de lucru php Laravel.

Având toate aceste informații, am elaborat etapele de proiectare împărțind proiectul în cinci module cu funcționalități specifice fiecărui rol de utilizator în parte.

Figura 3

În definirea și crearea funcționalităților mi-am propus să îmi organizez obiectivele pe fiecare etapă în parte, astfel pentru primul modul, mai exact rolul de vizitator la care am atribuit permisiuni pentru accesarea platformei web în scopul autentificării și am întocmit un formular de înscriere pentru admiterea la facultate, care se poate descărca după completare în format pdf, facilitând astfel procesul de admitere din cadrul facultății.

Figura 4

Atribuirea permisiunilor și funcționalităților devine din ce în ce mai complexă în construirea celorlalte roluri de utilizatori, astfel am creat o ierarhie pentru a începe implementarea de la utilizatorul cu cele mai puține funcționalități până la rolul cu cele mai multe.

În cadrul rolului de student am identificat necesare funcționalități precum vizualizare performanțe academice și permisiuni de efectuare a solicitărilor către secretariat.

Diferența majoră dintre rolul de student și cel de profesor este permisiunea de editare, astfel utilizatorului cu rol de profesor i se atribuie printr-o funcționalitate să modifice informații în baza de date.

Cele mai complexe roluri sunt cele de secretar și administrator, acestea conțin aplicații de gestiune a activităților celorlalți utilizatori precum și posibilitatea de creare, editare și ștergere a informațiilor stocate în baza de date.

Figura 5

Structura lucrării de diplomă

Documentul de față este structurat în patru capitole, fiecare dintre acestea tratând într-o anumită măsură diverse noțiuni referitoare la sistemul informatic dedicat activităților de secretariat dintr-o facultate.

Primul capitolul am vorbit despre aplicațiile web din domeniul de aplicabilitate al produsului software existente pe piață.

Al doilea capitolul este divizat în zece subcapitole și se compune din teoria aplicabilă a limbajelor de programare web utilizate în realizarea sistemului informatic. Mai exact, în acest capitol se definesc noțiuni teoretice, ce stau la baza conceperii aplicațiilor web similare cu aceasta, ca limbajul php, limbajul html, limbajul css, limbajul javascript, etc, dar și tehnici de programare web precum tehnica model-vizualizare-controller, AJAX, Bootstrap și despre mediul de dezvoltare utilizat.

Capitolul al treilea este compus din patru subcapitole ce fac referire la partea aplicată a acestei lucrări, având în vedere limitările sistemului creat, modului de proiectare, structura sistemului informatic și procedeul de testare a produsului software creat.

În capitolul al patrulea este descris modul de funcționare al platformei web creată detaliat în patru subcapitole și sunt descrise complet toate funcționalitățile și permisiunile produsului software creat.

Lucrarea se încheie cu concluziile, contribuțiile personale și perspectivele de viitor.

1. APLICAȚII SIMILARE EXISTENTE PE PIAȚĂ

O dată cu expansiunea pe care programele software o au în ultima perioadă de timp, au apărut diverse platforme web pentru automatizarea resurselor utilizate în diferite arii comerciale și non-comerciale. Astfel întâlnim din ce în ce mai des utilizarea acestor programe web, limitând astfel interacțiunea inter-umana directă.

Organizațiile particulare au fost primele care au adoptat acest mod de lucru pentru gestiunea activităților de secretariat, spre exemplu Universitatea „Spiru Haret” din București utilizează o platformă cu funcționalități multiple atât pentru studenți, cadre didactice, cât și pentru casierie și secretariat.

Printre funcționalitățile studenților se numără posibilitatea vizualizării performanțelor academice, interacțiunea prin platformă cu cadrele didactice, plata taxelor școlare, etc.

Figure 1-

Figure 1-

În prezent, majoritatea instituțiilor utilizează aplicații similare, spre exemplu Biblioteca Națională a României , Universitatea „Dunărea de Jos” din Galați, Facultatea de Automatică și Calculatoare din cadrul Universității Politehnica București.

Figure 1-

Figure 1-

Figure 1-

Figure 1-

Figure 1-

2. Tehnologii INFORMATICE UTILIZATE ÎN REALIZAREA APLICAȚIEI

O aplicație Web reprezintă o colecție interconectată de pagini Web având un conținut generat dinamic, creată cu scopul de a oferi o funcționalitate specifică.

Utilizatorii folosesc pentru vizualizarea paginilor Web un program-client cunoscut sub numele de browser sau navigator Web.

O aplicație Web rezidentă pe un server, fiind accesată – prin intermediul unei rețele– de către utilizatori, care folosesc un client Web , funcționează în mod obișnuit pe trei niveluri browser-ul Web, server de aplicații, baze de date.

Funcționalitățile aplicațiilor Web sunt oferite, în cea mai mare parte, de server, fiind livrate utilizatorilor prin intermediul unei rețele. Din acest motiv, utilizatorii folosesc un client care nu necesită performanțe deosebite, numit thin client. În schimb, aplicațiile desktop sunt bazate pe un client cu performanțe deosebite, numit thick client, care oferă cea mai mare parte a funcționalităților acestora.

Pentru a implementa, depana si extinde aplicațiile Web este necesar un ansamblu de instrumente software, cunoscut sub numele de mediu de lucru. Excluzând software-ul de sistem, mediul de lucru utilizat pentru crearea și utilizarea aplicațiilor Web are următoarele componente:

un browser Web – folosit pentru afișarea interfeței cu utilizatorul a aplicației

un server Web – livrează conținutul browser-ului

un server de aplicații – utilizat pentru generarea dinamică a conținutului și pentru interacțiunea cu sursele de date

un server de baze de date – folosit pentru stocarea și gestionarea unor date folosite de aplicație

un instrument software – utilizat pentru facilitarea dezvoltării aplicației

Tehnologiile informatice utilizate în aplicațiile Web reprezintă în general, acele limbaje de programare utilizate la crearea de site-uri web complexe, interactive, al căror concept presupune stăpânirea cât mai detaliată a unor limbaje de scripting sau de programare și baze de date.

Se pot enumera o serie de tehnologii folosite mai des în programarea aplicațiilor web dinamice, și anume:

html- Apărut la începutul anilor '90, datorită lipsei unui limbaj universal care să permită publicarea informației la nivel global, html a determinat dezvoltarea spectaculoasă a Internetului. Marcajele de tip html din cadrul documentului spun browser ului cum să afișeze conținutul util al fișierului;

xhtml – reprezintă prescurtarea de la EXtensible Hypertext Markup Language. Practic este un înlocuitor modern al mai vechiului limbaj html;

css – Fișierul CSS este un fișier text cu extensia ".css" definind stiluri pentru paginile html. Fișierele CSS permit stilizarea în bloc a documentelor html cu un efort semnificativ mai mic decât în cazul stilizării elementelor de pagină în cadrul fiecărui document html în parte, prin intermediul atributelor tag-urilor.

javascript – este un limbaj de scripting dezvoltat la origine de Netscape, permițând scrierea de secvențe de program care se execută la apariția unui eveniment utilizator.

mysql – este un sistem de gestiune a bazelor de date relaționale, fiind o componentă cheie a limbajului PHP.

cgi – Common Gateway Interface – sunt script-uri scrise în orice limbaj de programare indiferent dacă sunt compilate sau interpretate, script-uri care sunt executate pe server;

isapi – Internet Server API – reprezintă alternativa celor de la Microsoft la CGI (Common Gateway Interface), rulabilă bineînțeles pe platforme Windows. Acesta poate fi scris în orice limbaj cu suport pentru dll-uri.

php și asp apărute în 1994, respectiv 1996, sunt două limbaje puternice care au adus o schimbare în design-ul aplicațiilor web. Acestea, deși sunt diferite, au totuși o serie de similarități: ambele sunt interpretate, ambele generează scripturi (.php respectiv .asp), care pot fi combinate cu html, date de tip text, etc. Limbajele oferă suport și pentru lucrul cu baze de date (SQL, Mysql, PostgreSQL, Oracle) – de fapt sunt intens folosite în acest sens. Limbajul ASP nu este un concept nou ci se bazează pe limbajele VBScript și JScript. Principalul dezavantaj al acestor doua limbaje este viteza. Acestea sunt lente deoarece fiecare accesare presupune procesarea și interpretarea lor și nu pot construi controale reutilizabile.

jsp – Java Server Pages – reprezintă o tehnologie de design al aplicațiilor web ce permite crearea acestor aplicații independente de platformă. Tehnologia se bazează pe limbajul de programare Java și marcatori XML Avantajul JSP este reprezentat de administrarea facilă, independentă de platformă, separarea logicii aplicației de partea de interfață utilizator, performanța.

Lucrarea de față a fost realizată utilizând limbaje și tehnici de programare web complexe, cum ar fi limbajele PHP, HTML, CSS, JAVASCRIPT, SQL și tehnicile Model-Vizualizare-Controller, schimbarea datelor din format dinamic în static.

Îmbinarea acestor tehnologii informatice și dezvoltarea prototipului stabilit s-a produs cu ajutorul platformei multifuncționale PHPSTORM JETBRAINS 2016.3.3 utilizând mediul de lucru LARAVEL.

Figura 2-

2.1. Limbajul HTML

Html este prescurtarea de la HyperText Markup Language, limbajul utilizat în World Wide Web pentru descrierea hipertextelor.

Html nu este un limbaj de programare propriu zis, ci doar un limbaj de descriere, conținând elemente ce permit construirea paginilor Web.

Documentele html sunt exclusiv de tip text (ASCII); prin urmare ele pot fi editate direct, prin comenzi specifice sistemului de operare folosit.

De exemplu, pentru crearea unui document html în Windows XP se pot utiliza unul din editoarele de texte incluse în sistemul de operare (Notepad, Wordpad) sau orice alt editor de texte.

Documentele descrise în html pot fi vizualizate cu ajutorul unor aplicații speciale denumite browser-e, care lucrează pe diferite tipuri de sisteme de calcul; prin urmare, documentele html sunt independente de platforma de lucru.

Html utilizează pentru descrierea documentelor Web etichete (denumite și tag-uri) specifice pentru fiecare element descris; etichetele stabilesc atât structura documentului, cât și aspectul acestuia.

O etichetă (tag) este un identificator care furnizează browser-ului instrucțiuni de formatare a documentului. Pentru a fi delimitate, etichetele html sunt încadrate între paranteze unghiulare (‘<’ ‘>’).

Un document html este delimitat de perechea de etichetele <html> și </html> și este constituit din:

Antetul documentului, delimitat de etichetele <head> și </head>, care conține informații generale referitoare la document, cum ar fi titlul documentului, autorul acestuia etc.

Corpul documentului, care conține textul propriu zis al documentului, precum și elementele specifice de descriere a formatului acestuia.

Corpul documentului poate fi delimitat de: etichetele <body> și </body> sau (în cazul în care este descrisă structura cadrelor din document) de etichetele pereche <frameset> și </frameset>.

URL este un șir de caractere ce reprezintă adresa Web a unei imagini care va fi utilizată de către browser ca fundal (background) pentru document. Dacă imaginea nu ocupa întreaga zonă din fereastra browser-ului destinată vizualizării paginii respective, ea va fi multiplicată, ca într-un mozaic.

Atributul BGCOLOR (Background COLOR) stabilește culoarea fundalului (culoarea zonei din fereastra browser-ului în care este vizualizat documentul). În html culorile se pot specifica în două moduri: utilizând denumiri predefinite asociate unor culori (de exemplu RED semnificând roșu, GREEN verde, BLUE albastru etc.) sau "construind" culori proprii prin combinarea a trei culori de baza – roșu, verde și albastru (modelul RGB). În acest caz, specificarea unei culori se face indicând în ordinea roșu, verde, albastru trei valori hexazecimale cuprinse între 00 și FF, câte una pentru fiecare culoare de bază, astfel: #rrggbb.

În cadrul unui document este bine să inserați comentarii, pe care browser-ul nu le va afișa, dar care pot fi utile celor care citesc sau editează documentul. Comentariile html încep cu <! și se termina cu ->. De exemplu, <! Acesta e un comentariu. Browser-ul nu îl "vede"! ->

În tehnoredactare, prin paragraf se înțelege o zonă de text cuprinsă între două caractere de trecere la linie noua denumite NewLine sau Enter).

În html, delimitarea paragrafelor se realizează cu ajutorul etichetei <p>, eticheta de sfârșit </p> fiind opțională.

Precizarea informațiilor referitoare la fontul utilizat de browser pentru vizualizarea textului se realizează cu ajutorul etichetelor pereche <font> și </font>.

Dacă în document nu sunt precizate nici un fel de informații referitoare la font, browser-ul va utiliza fontul său implicit.

Pentru a aplica unei zone un anumit efect, se încadrează textul între eticheta de început și cea de sfârșit, corespunzătoare efectului respectiv.

Cele mai utilizate efecte ce se pot aplica asupra textului în html sunt:

<I> Textul este scris cursiv </I>

<U> Textul este scris subliniat </U>

<B> Textul este scris îngroșat </B>

<BIG> Textul este scris mai mare </BIG>

<SMALL> Textul este scris mai mic </SMALL>

<STRIKE> Textul este scris tăiat </STRIKE>

Grosimea unui caracter poate fi definita cu ajutorul atributului weight al etichetei.

Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800 si 900 (100 pentru fontul cel mai subțire și 900 pentru cel mai gros).

Imaginile sunt stocate în fișiere cu diverse formate. Formatele acceptate de browser-e pentru fișierele imagine sunt:

GIF (Graphics Interchange Format) cu extensia .gif

JPPEG (Joint photographic Experts Group) cu extensia .jpeg sau .jpg

XPM (X pixMap) cu extensia .xmp

XBM (X BitMap) cu extensia .xbm

BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer)

TIFF (Tagged Image File Format) cu extensia .tif sau .tiff

PNG (Portable Network Graphic) cu extensia .png

Cele mai răspândite formate sunt:

GIF (8 biți pentru o culoare, 256 culori posibile)

JPEG (24 biți pentru o culoare, 16777216 de culori posibile).

URL ("Uniform Resourse Locator“) = identificator unic al resursei este un standard folosit în identificarea unică a unei resurse în Internet.

Toate imaginile cu care vom lucra vor avea adresa URL exprimată în funcție de directorul ce conține documentul HTML care face referire la imagine.

Elementul img se utilizează pentru a atașa unei pagini o imagine.

Forma generală a acestui element este: <img atribute>

SRC identifică fișierul care conține imaginea respectivă (de tip .jpg, .gif etc.).

Fișierul care conține imaginea se va găsi într-un folder oarecare (în exemplul următor el se găsește în același folder în care găsim și fișierul cu extensia .html (cel care conține pagina).

Din acest motiv, sursa nu conține și calea, dar, dacă este cazul, calea poate fi conținută.

ALIGN – tipul de aliniere – reține una din valorile de mai jos și specifică browser-ului modul în care va alinia imaginea în raport cu textul: Right, Left, Top, Middle, Bottom

Fie fișierul text de mai jos (scris în Notepad):

<p> Un paragraf așezat înaintea imaginii</p>

<p> <img src=”mihai24.jpg” align=”right”>

Se observă cum se aliniază imaginii în al doilea paragraf </p>

<p> alt text este scris pentru a evidenția alinierea !!</p>

Observăm că am scris un prim paragraf care nu conține nici o imagine. Apoi, am scris un paragraf care, la început, conține o imagine, apoi text. În final, avem un paragraf numai cu text.

Right – dacă ALIGN reține această valoare, imaginea se aliniază în dreapta, iar textul care urmează este scris în locul rămas.

Top – numai primul rând al textului este scris în dreapta imaginii, în partea de sus. Apoi, textul continuă după imagine, ocupând întreaga lățime a ecranului.

Left – dacă ALIGN reține această valoare, imaginea se aliniază în stânga, iar textul care urmează este scris în locul rămas.

Middle – numai primul rând al textului este scris în dreapta imaginii, la jumătatea înălțimii ei. Apoi, textul continuă după imagine, ocupând întreaga lățime a ecranului.

Bottom – numai primul rând al textului este scris în dreapta imaginii, în partea de jos. Apoi, textul continua după imagine, ocupând întreaga lățime a ecranului.

alt="nume" – există posibilitatea ca imaginea să nu se poată încărca. Pentru astfel de situații este folosit parametrul ALT, unde nume conține un text (alternativ) care va fi afișat în locul imaginii.

height="număr pixeli" – înălțimea imaginii.

width="număr pixeli" – lățimea imaginii.

border ="nr_pixeli" – Opțional, imaginea poate fi înconjurată de un chenar.

hspace="nr_pixeli"- determină distanța minimă care separă imaginea de celelalte obiecte pe orizontală.

vspace="nr_pixeli"- determină distanța minimă care separa imaginea de celelalte obiecte pe verticală.

Principala caracteristică a hipertextelor o constituie utilizarea legăturilor (links).

Un link este o conexiune către o altă resursă Web (un alt hipertext sau o imagine, o secvență video sau audio, un program etc.), resursă care poate fi accesată din fereastra browser-ului printr-un simplu clic.

Limbajul HTML conține multiple elemente prin intermediul cărora se poate crea o legătură către resurse Web:

img (creează o legătură către o imagine)

LINK (specifică legături către resurse utile)

A (creează o legătură către o resursă Web într-un document HTML)

Applet (creează o legătură către un program executabil pe calculatorul utilizatorului)

Figura 2-

2.2. Limbajul CSS

CSS, prescurtarea de la Cascading Style Sheets, sunt etichete folosite pentru formatarea paginilor web (de exemplu formatare text, background sau aranjare in pagina, etc.).

Beneficiile sintaxei CSS sunt:

formatarea este introdusa într-un singur loc pentru tot documentul

editarea rapida a etichetelor

datorita introducerii într-un singur loc a etichetelor se obține o micșorare a codului paginii, implicit încărcarea mai rapida a acesteia

Sintaxa CSS este structurata pe trei nivele:

nivelul 1 fiind proprietățile etichetelor din documentul HTML, tip inline

nivelul 2 este informația introdusa in blocul HEAD, tip embedded

nivelul 3 este reprezentat de comenzile aflate in pagini separate, tip externe

Cea mai mare importanta (suprascrie orice alt parametru) o are sintaxa de nivelul 1 iar cea mai mica importanta o are cea de nivelul 3.

Folosirea unui fișier extern sau nivel 3 care sa conțină comenzi CSS este foarte practic deoarece poate fi utilizat in mai multe situații (mai multe fișiere HTML pot folosi același fișier extern CSS) eliminând timpul necesar introducerii codului corespunzător in fiecare pagina si totodată editarea lor într-un singur loc pentru mai multe fișiere.

Extensia acestor fișiere este .css.

Legătura paginilor HTML cu fișierele externe CSS se face prin introducerea următoarei linii:

<link rel="stylesheet" type="text/css" href="fisier_css.css">

Atributele indica următoarele:

rel – fișierul este tip styleshhet

type – tip text ce conține comenzi CSS

href – fișierul sau adresa fișierului CSS.

Comenzile de nivel 2 sau embedded sunt cele găzduite oriunde intre perechea de etichete <head> si </head> conform sintaxei:

Figura 2-

Unde style -specifica unde începe si unde se termina blocul CSS iar type este folosit pentru a ascunde de browser-ele vechi, care nu cunosc sintaxa CSS, conținutul blocului style.

Comenzile CSS de nivel 1 sau inline sunt cele mai folosite, ele suprascriind orice alte comenzi CSS. Sunt amplasate in interiorul etichetelor HTML aflate in zona BODY si au sintaxa:

Figura 2-

Este permisa folosirea comentariilor in CSS utilizând /* pentru începerea comentariului și */ pentru închiderea comentariului.

Eticheta <div> funcționează asemănător cu eticheta <p>, putând găzdui comenzi CSS aplicabile la un bloc sau mai multe din conținutul paginii.

Eticheta <span> este similara cu eticheta <font> aplicându-se elementelor dintr-un paragraf.

Etichetele CSS sunt cunoscute sub numele de elemente sau selectori având un layout asemănător cu etichetele HTML.

Figura 2-

Elementul poate fi o eticheta HTML, un id sau un class, iar argumentul si valoarea sunt aceleași ca in HTML.

Exemplu: același text realizat in HTML si in HTML cu CSS

Figura 2-

Comenzile de CSS pot fi plasate si in zona HEAD rezultând o funcționare identica, chiar mai mult, aceleași comenzi putând fi folosite in mai multe locuri in aceeași pagina.

CSS, prescurtarea de la Cascading Style Sheets, sunt etichete folosite pentru formatarea paginilor web (de exemplu formatare text, background sau aranjare in pagina, etc.).

Beneficiile sintaxei CSS sunt:

formatarea este introdusa într-un singur loc pentru tot documentul

editarea rapida a etichetelor

datorita introducerii într-un singur loc a etichetelor se obține o micșorare a codului paginii, implicit încărcarea mai rapida a acesteia

Sintaxa CSS este structurata pe trei nivele:

nivelul 1 fiind proprietățile etichetelor din documentul HTML, tip inline

nivelul 2 este informația introdusa in blocul HEAD, tip embedded

nivelul 3 este reprezentat de comenzile aflate in pagini separate, tip externe

Cea mai mare importanta (suprascrie orice alt parametru) o are sintaxa de nivelul 1 iar cea mai mica importanta o are cea de nivelul 3.

Folosirea unui fișier extern sau nivel 3 care sa conțină comenzi CSS este foarte practic deoarece poate fi utilizat in mai multe situații (mai multe fișiere HTML pot folosi același fișier extern CSS) eliminând timpul necesar introducerii codului corespunzător in fiecare pagina si totodată editarea lor într-un singur loc pentru mai multe fișiere.

Extensia acestor fișiere este .css.

Legătura paginilor HTML cu fișierele externe CSS se face prin introducerea următoarei linii:

<link rel="stylesheet" type="text/css" href="fisier_css.css">

Atributele indica următoarele:

rel – fișierul este tip styleshhet

type – tip text ce conține comenzi CSS

href – fișierul sau adresa fișierului CSS.

Comenzile de nivel 2 sau embedded sunt cele găzduite oriunde intre perechea de etichete <head> si </head> conform sintaxei:

Figura 2-

Unde style -specifica unde începe si unde se termina blocul CSS iar type este folosit pentru a ascunde de browser-ele vechi, care nu cunosc sintaxa CSS, conținutul blocului style.

Comenzile CSS de nivel 1 sau inline sunt cele mai folosite, ele suprascriind orice alte comenzi CSS. Sunt amplasate in interiorul etichetelor HTML aflate in zona BODY si au sintaxa:

Figura 2-

Este permisa folosirea comentariilor in CSS utilizând /* pentru începerea comentariului și */ pentru închiderea comentariului.

Eticheta <div> funcționează asemănător cu eticheta <p>, putând găzdui comenzi CSS aplicabile la un bloc sau mai multe din conținutul paginii.

Eticheta <span> este similara cu eticheta <font> aplicându-se elementelor dintr-un paragraf.

Etichetele CSS sunt cunoscute sub numele de elemente sau selectori având un layout asemănător cu etichetele HTML.

Figura 2-

Elementul poate fi o eticheta HTML, un id sau un class, iar argumentul si valoarea sunt aceleași ca in HTML.

Exemplu: același text realizat in HTML si in HTML cu CSS

Figura 2-

Comenzile de CSS pot fi plasate si in zona HEAD rezultând o funcționare identica, chiar mai mult, aceleași comenzi putând fi folosite in mai multe locuri in aceeași pagina.

Figura 2-

Figura 2-

Figura 2-

Figura 2-

Figura 2-

2.3. Limbajul JavaScript

JavaScript (JS) este unul dintre cele mai populare limbaje de programare din lume, fiind utilizat pentru realizarea unor task-uri (sarcini) dinamice, care nu pot fi obținute prin intermediul unui simplu limbaj de marcare – spre exemplu, HTML. In marea majoritate a cazurilor, chestionarele (quizzes) si sondajele de opinie (polls) utilizează JS pentru a fi mai atrăgătoare si interactive, odată publicate pe un website. Cunoștințele in HTML, PHP sau in alte limbaje similare nu sunt necesare pentru utilizarea JS atâta vreme cat exista un fișier cheie (de regula, fișierul HTML al unui website) si, eventual, scripturi scrise in prealabil.

Multe persoane au tendinta sa asocieze limbajul de programare mai sus mentionat cu Java datorita asemanarilor de nume. Cu toate acestea, exista multe diferente intre cele doua, prima si cea mai importanta fiind insusi caracterul lor distinct. Pe cand JS este un limbaj de programare orientata obiectual (sau POO, denumire provenita din englezescul “Object Oriented Programming”, sau OOP) utilizat pentru introducerea unor functionaliti in website-uri, Java este un limbaj de programare orientat obiectual utilizat doar pentru scrierea aplicatiilor pentru dispozitive precum computer-urile, smartphone-urile, etc.

In plus, codurile Java trebuie sa fie compilate pentru a fi utilizabile, necesitand alte plugin-uri sau tool-uri (unelte) pentru a deveni palpabile.

Dat fiind faptul ca JS este un limbaj interpretativ, nu sunt necesare programe sau software-uri speciale pentru a crea coduri utilizabile. De regula, nu este necesar decat un editor simplu, precum Notepad, pentru a putea scrie coduri JS. Pentru incepatori se recomanda formatter-uri speciale care pot ajuta la identificarea erorilor de coding, astfel inca ele sa poata fi remediate din timp.

Din fericire, JS nu este un limbaj de programare precum HTML, care necesita cunostinte de coding. Persoanele ce nu poseda astfel de abilitati pot utiliza cu succes coduri deja scrise pentru a dinamiza paginile web ale site-urilor lor, ceea ce poate face intregul proces mult mai simplu si direct. Cu toate acestea, cunostintele de baza in HTML sau coding sunt recomandate daca planuiesti sa lucrezi cu JS, intrucat va fi necesar sa cunosti locul unde fiecare cod trebuie pozitionat astfel incat el sa prinda forma in pagina web.

O intrebare intr-adevar buna pentru cei ce nu sunt familiarizati cu acest limbaj de programare. De multe ori, cele doua se afla in acelasi fisier, insa exista posibilitatea crearii unui nou fisier individual pentru JavaScript utilizand o extensie de tip JS. In plus, fisierul nou creat poate fi utilizat si pentru alte pagini, ceea ce va face totul mult mai usor pentru tine.

O problema comuna este constituita de ustensilele sau software-urile necesare pentru a rula JS. Majoritatea browser-urilor includ suport pentru JS, ceea ce inseamna ca el va rula atunci cand pagina sau paginile de pe website-ul tau sunt accesate. Este bine sa iei in calcul si eventualitatea in care 1/100 web surferi nu utilizeaza un browser ce suporta JS, pentru a putea fi sigur ca scopul website-ului tau va fi bine definit si inteles.

Figura 2-

Figura 2-

Figura 2-

2.4. Limbajul PHP

PHP (inițial, acronimul pentru Personal Home Page, ulterior pentru PHP: Hypertext Preprocessor) – este un limbaj (combinație de C, Perl și Java) ale cărui baze au fost puse de Rasmus Lerdorf in 1994.

PHP este limbajul ideal pentru construirea de pagini web dinamice. Este ușor de învățat, open-source, poate fi rulat pe mai multe platforme și se poate conecta la mai multe tipuri de baze de date. Cel mai important aspect al limbajului este însă posibilitatea de a fi imbricat cu cod HTML. Putem astfel crea pagini HTML statice și din loc în loc, acolo unde este nevoie, să introducem dinamism cu ajutorul PHP.

Limbajul PHP s-a "născut" in 1994 din nevoia lui Rasmus Lerdorf de a afla câte persoane îi vizitează CV-ul online. El a denumit setul de scripturi create PHP, acronimul pentru Personal Home Page. Pe parcursul următorilor trei ani limbajul a evoluat, dar adevăratul succes a început să îl cunoască de când Zeev Suraski și Andi Gutmans au rescris motorul PHP de la cap la coadă, motor care poartă din versiunea a patra a PHP numele Zend, o combinație de litere din prenumele creatorilor săi: Zeev și Andi.

Fiind open-source, PHP beneficiază de suport activ din partea comunității online, acesta fiind și motivul creșterii explozive a numărului site-urilor bazate pe PHP.

Interpretorul PHP este cel mai cunoscut limbaj de scripting folosit în acest moment pentru crearea site-urilor Web interactive. Denumirea este un "acronim recursiv" pentru Hypertext PreProcessor. Diferența esențială față de alte limbaje de scripting este faptul că PHP este un interpretor server-side. Pentru a putea testa pagini PHP aveți nevoie de un server de web și de pachetul PHP instalat.

PHP permite folosirea unor elemente specifice limbajelor de programare. Ieșirea standard a script-ului PHP devine intrarea standard pentru programul de navigare care vizualizează pagina. Așadar, la ieșirea standard poate fi scris (de exemplu, prin intermediul comenzii echo) orice tip de cod HTML, acesta fiind interpretat de catre borwser.

Pe lângă manipularea conținutului paginilor de web, PHP poate trimite headere HTTP pentru autentificare, seta cookie-uri sau redirecționa utilizatorii. Mai mult, cu ajutorul bibliotecilor externe de funcții poate păstra fișiere XML, crea si manipula imagini, animații Shokwave Flash, PDF-uri sau se poate conecta la un server de mail, iar acestea sunt doar câteva din funcțiile pe care le poate îndeplini.

Interpretorul PHP parcurge documentul accesat până în momentul în care întâlnește un marcaj de deschidere care indică faptul că textul care urmează trebuie interpretat ca fiind cod PHP. În continuare, textul este interpretat ca fiind cod PHP până în momentul în care este întâlnit marcajul de închidere. Întreg textul care nu este interpretat ca fiind cod PHP este furnizat la ieșire în forma în care a fost primit ca intrare de către interpretor. Există mai multe marcaje care indică începerea unei secvențe de cod PHP, dar doar două dintre ele sunt folosite de obicei.

Dacă dorim ca documentul să respecte specificațiile XML, atunci singura posibilitate de inserare a codului PHP este folosirea unei secvențe de tipul:

Figura 2-

Cea de-a doua posibilitate este utilizarea marcajului <SCRIPT> într-o maniera asemănătoare celei folosite pentru includerea de script-uri JavaScript. Sintaxa este următoarea:

Figura 2-

Există alte două posibilități, dar acestea sunt folosite rar, în situații particulare.

Este permisă "ieșirea" și "intrarea" în "modul PHP" de oricâte ori este necesar în pagină. Aceasta este util când se lucrează cu texte de mari dimensiuni.

Pentru ca instrucțiunile PHP sa fie interpretate corect, acestea trebuie separate prin caracterul ';'.

În PHP, comentariile pot fi inserate folosind sintaxele din C, C++ si shell-urile Unix.

Apariția secvenței de caractere '//' sau a caracterului '#' indică faptul că restul liniei reprezintă un comentariu. Pentru a insera comentarii pe mai multe linii, acestea trebuie delimitate de secvența '/*' la început și de secvența '*/' la sfârșit.

Figura 2-

2.5. Baza de date

Baza de date reprezinta una sau mai multe colectii de date aflate in interdependenta, impreuna cu descrierea datelor si a relatiilor dintre ele. Colectia de date reprezinta un ansamblu de date organizat dupa anumite criterii.

Descrierea datelor se intalneste sub denumirile de catalog de sistem, dictionar de date sau metadata (adica date despre date).

Sistemul de programare care permite construirea bazelor de date, introducerea informatiilor in bazele de date si dezvoltarea unor aplicatii care le exploateaza se numeste sistem de gestiune a bazelor de date (SGBD)

Un SGBD ofera posibilitatea utilizatorului de a avea acces la date folosind un limbaj de nivel inalt, apropiat de cel natural, pentru a obtine informatii, utilizatorul facand abstractie de algoritmii aplicati privind selectionarea datelor implicate si a modului de memorare a lor.

Principalele functii SGBD sunt:

functia de descriere – folosind un model de structura a unei baze de date, SGBD-ul realizeaza definirea entitatilor, a caracteristicilor si legaturilor dintre acestea, prin intermediul unui limbaj de descriere a bazelor de date

functia de manipulare – introducerea datelor in baza de date se realizeaza prin intermediul unui limbaj de manipulare care dispune de anumite instructiuni. De asemenea, limbajul de manipulare permite consultarea si actualizarea bazei de date

functia de utilizare – este realizata, in general, in cadrul limbajului de manipulare, care permite scrierea unor algoritmi de prelucrare a datelor

Pentru organizarea bazelor de date sunt utilizate o serie de modele conceptuale (sau structurale), cele mai cunoscute fiind cele numite:

retea

ierarhic

relational

obiectual

modele hibride (obiectual-relational)

Pentru implementarea sistemelor de gestiune a bazelor de date sunt utilizate urmatoarele modele arhitecturale:

mainframe

integrat

file-server

client-server

Cel mai des utilizat model conceptual este cel relational.

Sistemul software care implementeaza modelul rational se numeste SGBDR (sistem de gestiune a bazelor de date relationale). Pentru implementarea SGBDR-urilor este utilizata arhitectura client-server.

Utilizarea majoritatii serviciilor internetului se desfasoara in regim client/server, astfel ca devine naturala folosirea SGBD-urilor in aplicatii Internet (e-business, e-commerce). In ceea ce priveste costurile, SGBD-urile se pot clasifica in doua categorii:

comerciale (proprietare)

open source (gratuite)

Sistemele comerciale – dintre care amintim Oracle, SQL SERVER (Microsoft), DB2(IBM), sunt scumpe, motiv pentru care sunt practic inaccesibile unor companii/organizatii mici, institutii de invatamant sau persoane particulare.

Cele mai multe sisteme incluse in ultima categorie sunt folosite ca backend pentru aplicatiile Web dinamice. Procesul de creare si exploatare a bazelor de date necesita existenta unor utilizatori avand diverse functii.

Principalele tipuri de utilizatori ai bazelor de date sunt:

administratorul bazei de date – persoana care stabileste si descrie modelul bazei de date, dupa ce, in prealabil, realizeaza o analiza detaliata a sistemului informatic caruia ii este destinata. Acesta va descrie toate entitatile, structura lor si legaturile dinte ele

administratorul aplicatiei – persoana care, pe modelul bazei de dtae si a structurii acesteia, analizeaza cerintele concrete ale unei aplicatii, stabilind un submodel al bazei de date care va fi utilizat ( include o parte a bazei de date, vazuta din punctual de vedere al aplicatiei ) de catre toti programatorii de aplicatii

programatorii de aplicatii – persoanele care scriu programe pentru exploatarea bazei de date, folosind descrierea data de administratorul aplicatiei.

In acest scop, vor folosi limbajul de manipulare al sistemului de gestiune a bazei de date utilizatorii bazei de date – persoane care utilizeaza baza de date prin intermediul aplicatiilor realizate de programatorii de aplicatii.

MySQL dezvoltat de MySQL AB, este cel mai popular sistem de gestiune a bazelor de date relationale open source utilizat in Internet, avand versiuni pentru majoritatea platfomelor.

Serverul MySQL este multifir si multiutilizator.

Dintre caracteristicile sale, pot fi mentionate stabilitatea si rapiditatea.

Adresa MySQL este http://www.mysql.com/.

O distributie MySQL contine numai o parte sau toate componentele urmatoare:

serverul mysqld (sau diverse variante; distributia standard client-server pentru Windows ofera urmatoarele servere: mysqld, mysqld-opt, mysqald-nt) – indeplineste urmatoarele functii principale:

gestioneaza bazele de date si conturile de acces

primeste cererile clientilor

obtine accesul de date

furnizeaza clientilor informatiile solicitate

programe-client (mysql) – sunt utilizate in principal pentru conectarea la server, transmiterea comenzilor si afisarea rezultatelor primate

programe utilitare (mysqladmin, mysqldump, myiscamchk) – sunt folosite pentru administrarea sistemului MySQL

fisiere de tip antet si fisiere de tip biblioteca

documentatie sub forma unui manual MySQL

baza de date mysql – contine, printre altele, tabelele de acordare a privilegiilor pentru utilizatori

Clientul Mysql lucreaza in modul text, fara interfata grafica. Daca se doreste utilizarea unor clienti cu interfata grafica, ei trebuie procurati separat. Dintre acestia amintim SQL-Front.

Distributiile MySQL sunt de doua tipuri:

distributii client – nu contin nici un server, dar contin programele de tip client necesare pentru transmiterea comenzilor catre un server MySQL instalat pe un alt calculator

distributii server – contin atat programele-server, cat si programele-client si utilitare

Figura 2-

Figura 2-

2.6. Tehnica Model-View-Controller

Un cadru de lucru software (software framework) este un proiect reutilizabil pentru dezvoltarea aplicatiilor si poate include programe, biblioteci, un limbaj de scripting, precum si un alt software menit sa ajute la dezvoltarea si conectarea diverselor componente ale unui proiect software.

Diversele parti ale unui cadru de lucru pot fi expuse (si accesate) prin intermediul unor API-uri (Application Programming Interface).

Majoritatea cadrelor de lucru utilizeaza arhitectura MVC (Model-View-Controller), scopul acesteia fiind de a separa modulul de date de interfata cu utilizatorul (view), astfel incat schimbarile de interfata sa nu afecteze datele, iar acestea sa poata fii reorganizate fara schimbari de interfata.

Arhitectura MVC rezolva aceasta problema prin decuplarea accesului la date si a logicii aplicatiei de prezentarea datelor si interactiunea cu utilizatorul, introducand o componenta intermediara, numita Controller.

Astfel, arhitectura MVC este constituita din trei componente principale:

componenta Model – constituie o reprezentare specifica (sub forma de date) a informatiilor cu care opereaza aplicatia

componenta View (vedere) – interpreteaza modelul intr-o forma potrivita pentru interactiune (in mod obisnuit intr-un element de interfata). Pentru un singur model, pot fi dezvoltate mai multe vederi, in diverse scopuri

componenta Controller (controlor) – reprezinta clasele care realizeaza comunicarea intre cele doua componente anterioare:

proceseaza evenimentele din interfata (in mod obisnuit, actiunile utilizatorilor) si raspunde la acestea

poate invoca schimbari in model

Dintre numeroasele cadre de lucru open source avand PHP ca limbaj de scripting, se remarca urmatoarele:

Smarty – este unul dintre primele cadre de lucru (din punct de vedere cronologic) care au implementat modelul MVC, fiind preferat de un numar mare de programatori (http://smarty.php.net/)

Symfony – este un cadru de lucru pentru proiectele PHP 5. Invatarea acestuia este relativ simpla pentru programatorii PHP care cunosc sabloanele de proiectare ale aplicatiilor Web (http://www.symfony-project.org/)

Zend Framework – este un cadru de lucru pentru PHP 5, dezvoltata de firma Zend software din Israel. Acesta a fost proiectat cu scopul de a elimina detaliile plictisitoare legate de scrierea efectiva a codului, lasand programatorul sa-si concentreze atentia asupra intregului proiect pe care il dezvolta (http://framework.zend.com/).

Figura 2-

2.7. PHP-Laravel

Definit ca un limbaj de programare Open Source, asemănător PHP, Laravel a câștigat prin simplitatea și facilitatea interfaței prezentate un număr mare de programatori. Considerat nu doar simplu de instalat și folosit, ci și elegant, Laravel prezintă acea doză de atractivitate care poate încânta ochiul tehnic al dezvoltatorului web, care își dorește să creeze layout-uri aspectuoase, fără cunoștințe avansate de web design sau design de produs. Este vorba despre o revoluționare a tot ceea ce înseamnă, de ani buni, PHP și WordPress (în ceea ce privește blogurile specializate).

Laravel rezolvă una dintre cele mai întâlnite probleme ale dezvoltatorilor: aceea a livrării rapide a unui produs validat și bine cotat la nivelul pieței. Extrem de importantă este și dezvoltarea unui produs care să exprime profesionalism, seriozitate sau care să convingă consumatorii să treacă la următoarea etapă, aceea a achiziției.

Toate aceste probleme par a fi facil rezolvate de o soluție Open Source, cunoscută în rândul programatorilor sub numele de Laravel. Ușurința în folosirea Laravel este consolidată și de manualul de utilizare, complet și extrem de bine documentat.

De asemenea, în jurul acestui framework s-a construit o comunitate puternică de dezvoltatori și testeri, pregătită prin experiența proprie, să ofere soluții reale problemelor pe care le punctează dezvoltatorii.

În momentul lansării, Laravel a creat rumoare prin asumarea promisiunilor referitoare la minimalizarea efortului și a transformării acțiunilor de programare în ceea ce programatorii numesc fun mood. De asemenea, Laravel scoate la iveală un alt set de algoritmi, departe de a fi plictisitori, lăsând o mai mare libertate programatorului în vederea concentrării asupra arhitecturii unei aplicații, nu scrierea propriu-zisă a liniilor de cod. De asemenea, modificarea ulterioară pe care un programator Laravel o face pe un segment de cod sau într-o funcție nu afectează alte module ale aplicației, fapt ce oferă un plus de siguranță și de relaxare.

Laravel a introdus proceduri logice și intuitive, ce vizează denumirea dată fișierelor salvate, claselor sau bazelor de date apelate. Prin alegerea funcționalității Smart Defaults, Laravel permite focusarea programatorului asupra bunei funcționări a aplicației, precum și pe dezvoltarea rapidă și corectă (fără erori) a structurii de cod.

Laravel promovează DRY (Don’t-Repeat-Yourself), un principiu prin care o funcționalitate este scrisă pentru o singură dată și fără eventuale erori. De asemenea, Laravel oferă un mediu tehnic prielnic împărtășirii facile a liniilor de cod între modulele unui program.

Toate aceste avantaje ale folosirii Laravel sunt susținute de unul dintre cele mai recente trenduri din domeniul IT, ce recunosc viitorul industriei online prin tot ceea ce înseamnă FIA (Future Internet Architecture program).

Figura 2-

Figura 2-

2.8. AJAX

AJAX este prescurtarea pentru Asynchronous JavaScript and XML (JavaScript si XML asincron) si reprezinta o colectie de tehnologii utilizate in dezvoltarea site-urilor Internet. Intentia este de a adauga o interactivitate mai mare in paginile web si de a micsora timpul de incarcare al acestora. In masura in care Internetul este in continua dezvoltare, unde numarul de pagini web se dubleaza la o perioada de cateva luni, si se dezvolta foarte mult servicii de comert electronic, magazine virtuale sau site-uri sociale, tehnologia AJAX devine o componenta de baza pentru orice astfel de site.

AJAX presupune un schimb mic de date intre browser si server, astfel incat sa nu mai fie necesara reincarcarea intregii pagini web de fiecare data cand userul face o schimbare in aceasta. AJAX reprezinta o colectie de tehnologii, fiecare utilizata si in mod de sine-statator, dar care combinate permit obtinerea unei unelte foarte puternice:

Prezentarea in mod standard a paginilor, prin HTML sau mai noul XHTML, si CSS (Cascading Style-Sheets) pentru aranajrea in pagina a continutului;

Afisare dinamica si interactiune folosind DOM (Document Object Model), accesat printr-un limbaj de scripting, pentru a modifica in mod dinamic si a asigura interactiunea cu informatia prezentata;

Schimb bidirectional de date si manipulare prin XML intre client si server, desi orice format poate fi folosit, inclusiv HTML, XSLT sau text simplu;

Schimbul de date asincron se realizeaza prin obiectul XMLHttpRequest, desi in unele implementari AJAX se poate folosi un IFrame pentru schimbul de date, sau chiar tag-uri script adaugate dinamic.

JavaScript folosit pentru a lega toate aceste elemente intr-un pachet puternic.

Modelul clasic al aplicatiilor web este urmatorul: actiunile utilizatorilor in interfata din browser conduc la o cerere HTTP catre serverul web. Serverul efectueaza niste procesari (extrage date din baze de date, efectueaza calcule, interogheaza alte sisteme) si apoi returneaza o pagina HTML catre client. Este modelul clasic, sincron, dezvoltat odata cu aparitia Internetului ca retea la nivel mondial. Este calea cea mai simpla, dar in timp ce serverul proceseaza cererea, utilizatorul asteapta si nu poate interactiona in alt mod cu pagina web.

AJAX elimina aceasta modalitate de interactiune start-stop-start-stop a Web-ului introducand un nivel intermediar intre utilizator si server – motorul AJAX. Adaugarea unui nou nivel intr-o aplicatia de obicei o face sa lucreze mai greu, dar in acest caz este adavarata afirmatia opusa. In loc sa incarce pagina la inceputul sesiunii, browserul incarca un motor AJAX, scris in JavaScript si plasat de obicei intr-un cadru (frame) invisibil. Acest motor este apoi responsabil atat cu interfata pe care o afiseaza utilizatorului, cat si cu comunicatia cu serverul pentru folosul utilizatorului. Motorul AJAX permite interactiunea utilizatorului cu aplicatia in mod asincron, independent de comunicatia cu serverul. Prin urmare utilizatorul nu mai priveste o fereastra goala, asteptand ca aceasta sa se incarce direct de pe server.

Prima utilizare a termenului AJAX in mod public a fost in februarie 2005. Jesse James Garrett sustine ca a gandit aceasta denumire realizand necesitatea unui termen simplu, scurt si usor de pronuntat in momentul cand urma sa prezinte unor clienti o suita de tehnologii propuse pentru implementare.

Desi termentul AJAX are mai putin de doi ani, istoria tehnologiilor care au dus la implementarea acestuia incepe acum 10 ani, cand Microsoft avea initiativa in a dezvolta Remote Scripting. Tehnici pentru incarcarea asincrona a continutului intr-o pagina web, fara necesitatea reincarcarii totale, au aparut de pe vremea elementului IFRAME (introdus in Internet Explorer 3 in 1996) si a elementului LAYER (introdus in Netscape 4 in 1997 si abandonat la aparitia browserului Mozilla). Ambele elemente aveau campul src pentru incarcarea unui URL extern, si prin utilizarea JavaScript se putea manipula pagina mama, obtinandu-se un efect asemanator cu AJAX. Astfel de tehnici au fost implementate in DHTML, si chiar si produsul Macromedia Flash putea incarca fisiere XML sau CSV de pe un server fara a necesita un refresh in browser. Remote Scripting de la Microsoft functiona ca un inlocuitor mai elegant al acestor tehnologii, datele fiind extrase de un applet Java cu care clientul comunica prin JavaScript, tehnica disponibila in IE versiunea 4. Microsoft a creat pentru Internet Explorer 5 obiectul XMLHttpRequest si a aratat avantajele lui in Outlook Web Access, care face parte din pachetul Microsoft Exchange Server 2000.

Comunitatea Web, suficient de dezvoltata la inceputul anilor 2000, a preluat initiativa in dezvoltarea acestui tip de tehnologie. Prin colaborare publica, s-a imbunatatit tehnica de scripting pentru a permite utilizarea pe alte browsere. In 2002 a fost modificat Remote Scripting pentru a inlocui applet-ul Java cu XMLHttpRequest, care a devenit modelitatea preponderenta de comunicare cu serverul. Microsoft a introdus tehnologia Callback in ASP.NET, dar XMLHttpRequest a ramas cel mai folosit deoarece este bine implementat in toate browserele, celelalte tehnologii nefiind folosite decat in cazuri de incompatibilitate.

Figura 2-

2.9.Bootstrap

Framwevork-ul dezvoltat initial de Twitter, ajuns acum la versiunea 3, permite realizarea de site-uri web responsive, care se adapteaza la orice rezolutie de dispozitiv: desktop, tablete si telefoane mobile.

Este in momentul de fata cel mai utilizat framework pentru dezvoltarea interfetelor web devenind foarte rapid standardul in crearea template-urilor pentru principalele sisteme CMS cum sunt WordPress si Joomla.

Framework-urile de tip Bootstrap se folosesc de catre acei web-designeri si dezvoltatori care cunosc bine sau foarte bine macar limbajul HTML si CSS si au nevoie de o baza solida pentru inceperea construirii proiectului.

Putem spune deci ca Boostrap este un instrument utilizat pentru a gestiona cat mai bine faza initiala a unui proiect deoarece putem conta pe o serie de componente care pot fi reutilizate si personalizate oferindu-ne o baza solida de pornire a proiectelor noastre pentru a nu fi nevoiti sa incepem de la zero.

Acesta functie este sugerata si de numele framework-ului, termenul “bootstrap” insumand procesele necesare pentru pornirea computerelor la fel cum framework-ul Bootstrap ne pune la dispozitie instrumentele pentru pornirea proiectului nostru web.

Figura 2-

2.10. JetBrains PHPStorm IDE 2016.3.3

PHP Storm este aplicația de editare a codului preferată de majoritatea programatorilor, ce suportă versiunile toate versiunile de PHP. Aplicația include un instrument de autocompletare a structurii de cod, permite asocieri de mai multe limbaje, notifică și previne eventuale erori.

PHP Storm este compatibil cu tehnologii de tip front-end ce includ: THML5, CSS, Sass SCSS, Less, Stylus, Compass, Coffee Script, Type Script, ECMA Script Harmony, Jade, Emmet și Java Script.

Ca principala unealta a dezvoltatorilor PHP, PhpStorm evolueaza constant si isi imbunatateste setul de functii pentru a permite utilizatorilor sai sa urmeze – si chiar sa formeze – cele mai noi tendinte in dezvoltarea web. Aceasta lansare simplifica utilizarea tehnologiilor web emergente, cuprinzand atat dezvoltare backend cat si frontend, de la prototipare la implementare si mentenanta.

PhpStorm faciliteaza fluxul de lucru al dezvoltatorului cu o intelegere mai completa a codului, incluzand editare mixta (ex. SQL in PHP), analiza codului static, si suport complet pentru PHP 5.6. Dezvoltatorii pot sta mai mult 'in flux' datorita multiplelor paranteze/editari de sectiuni, completarii rafinate a codului, si a performantei imbunatatite din PhpStorm .

La un nivel mai inalt, utilizatorii PhpStorm pot acum beneficia de avantajele editarii sabloanelor Laravel Blade, si pot utiliza complet dezvoltarea bazata pe comportament pentru PHP datorita integrarii Behat. PhpStorm simplifica si lucrul cu WordPress, oferind intelegere a codului WordPress si functii de productivitate marca JetBrains. Arsenalul fronted a fost extins cu tehnologii web performante incluzand spy-js, Grunt, gulp.js, Bower, si multe altele. Pentru DevOps, PhpStorm 8 include capabilitati de interpretare PHP de la distanta, asigurand o interactiune IDE fluida atat cu mediile clasice cat si cu cele moderne de virtualizare (precum Vagrant sau Docker).

Solutia JeBrains PhpStorm, precum si celelalte solutii JetBrains sunt disponibile in Romania prin intermediul Simple IT, partener JetBrains.

JetBrains este o companie de dezvoltare specializata in crearea uneltelor inteligente, care cresc productivitatea in dezvoltarea software. Compania are sediul central in Praga, Cehia.

SIMPLE IT este distribuitor de produse si solutii software, completate de servicii de consultanta, training, instalare, configurare si mentenanta, sustinute de un personal specializat, pentru a oferi cea mai buna experienta IT clientilor. Categoriile de solutii includ: descoperirea si monitorizarea retelei, controlul accesului la retea, managementul informatiei de securitate, securitatea si criptarea e-mailului, retele virtuale private, optimizarea traficului, securitatea retelei, antivirus, firewall, optimizarea PC-ului, antivirus, antispam, detectia intrusilor, backup si restaurare, design, dezvoltare si publicistica web, audio si video.

Figura 2-

Figura 2-

Figura 2-

Figura 2-

3. ProIECTAREA, REALIZAREA ȘI TESTAREA SISTEMULUI INFORMATIC

În acest capitol se vor detalia procesele înfăptuite în cadrul creării produsului software dedicat procesului de secretariat dintr-o facultate.

Această lucrare a fost inspirată din necesitatea actuală a facultății de Hidrotehnică, în cadrul căreia am finalizat cei patru ani ai ciclului I de licență.

Având în vedere complexitatea aplicației propuse, am constatat că există funcționalități pentru care implementarea necesită cunoștințe și abilități avansate cu(de) o complexitate peste nivelul ciclului I universitar și un timp îndelungat.

Am realizat un prototip compus din modulele necesare funcționării sistemului informatic pentru facilitarea activităților principale întreprinse de personalul biroului de secretariat dintr-o organizație social-culturală.

Am adăugat în componența platformei de gestiune module opționale pe care le-am considerat utile atât secretariatului cât și celorlalte roluri predefinite în cadrul modulelor necesare.

Am utilizat preponderent ca tehnică de proiectare arhitectura model-view-controller pe care o consider bine structurată și adecvată viziunii mele asupra produsului finit.

De asemenea, îl consider un alt punct important modul organizat și structurat, în cadrul procesului de creație și inovație, al stilului de lucru abordat.

Nu în ultimul rând, menționez că cel mai dificil stadiu parcurs a fost analizarea și rezolvarea erorilor apărute în urma diferitelor încercări ale ansamblului creat.

Figura 3-

3.1. Constrângerile sistemului software

Aplicația operațională ruleaza pe orice dispozitiv cu sistem de operare Windows care au conexiune la server.

Aplicația este o platformă web ce poate fi accesată de pe orice calculator cu minim doi GB DDR3 cu o frecvență de 1066Mhz și un procesor Intel Core i5 cu 2,60GHz.

Aplicația web funcționează pe urmatoarele browsere: Internet Explorer (>= version 8), FireFox, Chrome, Safari, Opera.

Aplicația se instalează prin copierea pe un server. La prima rulare a aplicației, se configurează liniile de producție și baza de date. Acestea se pot modifica ulterior de către un utilizator cu drepturi de Administrator.

3.2. Etapele și activitățile desfășurate în procesul de proiectare

Procesul de proiectare al sistemului software dedicat procesului de management al activităților de secretariat dintr-o facultate l-am realizat în trei etape.

Sistemul informatic propus este compus din sapte module implementate pe o platforma web locala si cu stocare intr-o baza de date creata cu limbajul mysql.

Fiecare modul contine diverse functionalitati obligatorii si optionale personalizate in functie de necesitatile utilizatorilor.

Figura 3-

Modulul vizitatori este o aplicatie web prin care permite oricarei persoane care acceseaza adresa locala a platformei sa completeze formularul de inscriere si sa se autentifice daca detine un cont valid.

Figura 3-

Aceast modul populeaza baza de date cu datele completate in formular si in momentul unei autentificari se interogheaza automat informatiile stocate local pentru a permite accesul in contul specificat de utilizator.

Figura 3-

Proiectarea propriu-zisa a acestei portiuni a constat in mai multe etape, mai exact crearea, implementarea si testarea codului.

Codul implementat pentru crearea formularului de inscriere este compus dintr-o sectiune dinamica si o sectiune statica de salvare si imprimare a datelor completate.

Astfel, sectiunea dinamica propriu-zisa include peste o mie de linii de cod si a fost implementata utilizand preponderent limbajul php si limbajul javascript.

In cadrul acestei sub etape am setat aranjarea in pagina a formularului si a campurilor continute, am creat liste cu date culese din baza de date, am creat legaturi dinamice intre campuri, am implementat o functie care permite adaugarea unor noi campuri predefinite si o functie care permite stergerea unor campuri optionale.

Figura 3-

Figura 3-

Figura 3-

Codul de mai sus reprezinta o mica portiune a blocului de aranjare in pagina a formularului si a campurilor continute.

Urmatoarea sectiune de cod a fost implementata pentru liste interactive prin interogari sql, legaturi dinamice și respectiv funcții de adăugare și ștergere câmpuri opționale.

Figura 3-

Figura 3-

Figura 3-

Figura 3-

Modulul student include mai multe functionalitati specifice interactiunilor pe care le poate avea un student cu personalul secretariatului.

Accesul in aceasta sectiune a platformei se face prin autentificarea valida cu o adresa de mail si o parola, pe care studentul le va primi, la inscrierea in primul an, de la secretariat.

Codul de implementare pentru modulul student se regăsește structurat în trei fișiere conform tehnicii informatice model-view-controller.

Figura 3-

Figura 3-

Aplicația web include pentru modulul de profesor funcționalități personalizate, mai exact doar dintr-un cont cu rolul de profesor în platformă se pot adăuga note în catalog.

Modulul profesor este implementat cu aplicații complexe și limitări multiple având posibilitatea să adauge și să modifice note în catalog doar la materiile pe care le susține ca titular de curs, își poate adăuga materiile pe care le susține și i se permite să trimită cereri către secretariat.

Figura 3-

Următorul modul implementat este cel de secretar care permite vizualizarea, modificarea și ștergerea înscrierilor, vizualizarea cererilor primite de la utilizatori, vizualizarea catalogului pentru toți studenții facultății, adăugarea și modificarea materiilor de studiu și vizualizarea, modificarea și adăugarea utilizatorilor cu roluri de student sau profesor.

Figura 3-

Figura 3-

Figura 3-

Cel mai bogat în funcționalități este modulul administrator care conține toate funcționalitățile implemntate la ceilalți utilizatori, fără permisiunea de a adăuga sau modifica notele studenților și are în plus permisiune totală asupra bazei de date. Mai exact, crearea utilizatorilor noi pentru rolul de admin sau secretar se poate efectua doar dintr-un cont de admin.

Figura 3-

3.3. Structura sistemului informatic

Produsul software creat este structurat în secțiuni. Mai exact, am implementat pe o platformă web locală aplicații cu funcționalități personalizate pentru fiecare tip de cont permis.

Figura 3-

Din secțiunea vizitatori este permis oricarei persoane care acceseaza adresa locala a platformei să se autentifice dacă deține un cont valid creat de admin sau de secretar.

Accesul în această secțiune a platformei se face prin autentificarea validă cu o adresă de mail și o parolă, pe care studentul le va primi, la înscrierea în primul an, de la secretariat.

Figura 3-

În cadrul modulului de creare cont menționez că doar administratorul are drepturi depline, astfel poate crea orice tip de utilizator și secretarul poate să adauge doar conturi de profesor sau student cu permisiunea administratorului.

Structura bazei de date este compusă din șapte tabele cu stocare locală utilizând server-ul PHPMyAdmin și limbajul MySQL.

Structura tabelei admitere conține cincizeci de coloane care stochează toate informațiile din formularul de înscriere.

Figura 3-

Figura 3-

Figura 3-

Figura 3-

Tabela materii conține doisprezece coloane definite pentru susținerea datelor referitoare la materiile universitare susținute în facultate.

Figura 3-

Următoarele tabele existente în baza de date sunt utilizate pentru stocarea informațiilor despre notele studenților, detalii utilizatori și detalii despre acțiunile realizate.

Figura 3-

Figura 3-

Figura 3-

Figura 3-

Figura 3-

3.4. Modalități de testare a sistemului software

Sistemul software creat l-am testat populând prin platformă baza de date, astfel am testat funcționalitățile tuturor utilizatorilor permiși pe platformă, mai exact vizitatori, student, profesor, secretar și administrator.

Am accesat platforma din toate conturile permise și am rezolvat fiecare eroare apărută.

Testarea a fost realizată structural în cinci etape.

În cadrul primei etape am testat modulul vizitator prin crearea multiplelor tipurilor de formular de înscriere pentru verificarea încadrării în pagină a datelor din pdf-ul generat.

În următoarele etape am testat modul de vizualizare a datelor în platformă pentru fiecare rol de utilizator și a modului de transmitere a datelor între aplicație și baza de date.

Figura 3-

4. scenariu de funcționare

În acest capitol am descris modul de funcționarea produsului software creat și uneltele necesare rulări aplicațiilor înglobate în platforma web.

4.1. Instalarea și pornirea platformei web

Pentru a porni aplicația este necesar sa deschidem XAMPP Control Panel v3.2.2 pentru a da comanda de pornire a modulelor Apache și MySQL și programul JetBrains PhpStorm 2016.3.3 pentru comanda de pornire a server-ului local utilizând în consolă linia de cod php artisan serve.

Figura 4-

Figura 4-

Platforma se accesează local din orice browser utilizând adresa localhost:8000.

Figura 4-

4.2. Modulul de creare utilizatori

Acest modul este accesibil doar din contul de administrator sau secretar cu mențiunea că din contul de secretar se pot crea doar conturi cu rol de profesor sau student și necesită aprobarea administratorului pentru adăugarea și modificarea datelor în baza de date.

Figura 4-

Figura 4-

Figura 4-

4.3. Modulul de autentificare

Acest modul permite autentificarea în contul deținut prin introducerea unei adrese de mail și a parolei setată.

În momentul trimiterii datelor spre validare se face automat o interogare pe baza de date și se verfică dacă există vreun tip de cont cu informațiile specificate.

Figura 4-

Figura 4-

4.4. Modulul de utilizator

În momentul unei autentificări corecte, utilizatorul este redirecționat direct pe pagina principală a contului deținut.

4.4.1. Administrator

Pagina principală a contului de administrator conține panoul principal cu toate funcționalitățile platformei web, statistici și grafic dinamic.

Figura 4-

Figura 4-

Vizualizarea înscrierilor se face prin acționarea cu un simplu click pe butonul Inscrieri atât de pe partea stângă a paginii, cât și de pe statistica care contorizează numărul de înscrieri efectuate pe platformă.

Figura 4-

Înscrierile se pot șterge, vizualiza în format pdf și modifica, utilizând butoanele din partea dreaptă din dreptul fiecărei cereri.

Figura 4-

Figura 4-

Figura 4-

Figura 4-

Figura 4-

Figura 4-

Figura 4-

Figura 4-

Figura 4-

Accesarea meniului utilizatori din partea stângă a platformei web va afisa utilizatorii înscriși în baza de date. Posibilitatea adăugării de noi utilizatori și solicitările primite pentru aprobare.

Figura 4-

Figura 4-

Figura 4-

Figura 4-

Figura 4-

Figura 4-

Figura 4-

Din meniul pentru Catalog se pot vizualiza, adăuga și modifica materii și se pot vizualiza rezultatele studenților.

Figura 4-

Figura 4-

Figura 4-

Figura 4-

Meniul secretariat cuprinde solicitări standard pentru secretariat.

Figura 4-

Figura 4-

Figura 4-

4.4.2. Secretar

Contul de secretar permite vizualizarea, modificarea și ștergerea înscrierilor.

Figura 4-

Figura 4-

Permite vizualizarea, modificarea și ștergerea utilizatorilor cu rol de professor sau student cu mențiunea că modificările se vor realiza după aprobarea administratorului.

Figura 4-

Figura 4-

În meniul Catalog regăsim permisiunile de la administrator pentru adăugarea, modificarea și ștergerea materiilor și vizualizarea notelor obținute de studenți.

Figura 4-

Figura 4-

4.4.3. Cadru didactic

Secțiunea cadrului didactic are permisiuni restrânse având doar meniul catalog și secretariat. În plus, acest tip de cont are permisiunea de a adăuga note doar la materiile unde este titular de curs.

Figura 4-

Figura 4-

Figura 4-

Figura 4-

4.4.4. Student

Acest modul permite doar vizualizarea datelor și trimiterea cererilor către secretariat.

Figura 4-

Figura 4-

Figura 4-

4.4.5. Vizitator

Toate secțiunile menționate au implementate modulul vizitator. Acesta permite autentificarea într-un cont deținut, prin furnizarea unei adrese de mail și o parolă setată, înregistrate prin platformă, și completarea formularului de înscriere online la concursul de admitere pentru cursuri universitare de licență.

Figura 4-

Figura 4-

Figura 4-

Figura 4-

Figura 4-

Figura 4-

După completarea formularului datele se trimit automat către baza de date și se stochează local temporar până la aprobarea secretariatului și permanent după. Utilizatorul primește un mesaj digital pe ecranul monitorului că datele au fost înregistrate și se deschide într-o nouă fereastră formularul official de înscriere la concursul de admitere pentru ciclul I de licență în cadrul Universității Tehnice de Construcții București, care se poate descărca în format pdf sau printa direct din browser dacă deține o conexiune la o imprimantă.

Concluzii si contributii personale

Concluzii

Prin dezvoltarea acestui sistem software dedicat procesului de management al activităților de secretariat dintr-o facultate am atins mai multe obiective propuse în anul al treilea de studiu când am participat la Sesiunea de Comunicări Științifice organizată în cadrul Facultății de Hidrotehnică în colaborare cu Asociația PDPVI*, cu un site de promovare al Facultăți de Hidrotehnică și a APDPVI și un formular online de înscriere la specializarea AIA. Primul si cel mai important a fost dezvoltarea unui sistem de organizare a atribuțiilor de secretariat pentru a facilita conexiunea dintre secretariat și studenți. Utilizatorii cu rol de student vor putea vizualiza rezultatele academice opținute și vor putea trimite cereri către secretariat. Iar, conturile de secretar vor avea funcționalități și drepturi asupra înscrierilor, conturilor de student și profesor și evidența fluxului de date fuzionat între servere.

Un alt obiectiv important a fost utilizarea tehnologii Bootstrap pentru a permite aplicatiei sa isi modifice rezolutia si sa afiseze informatiile in cazul micșorării dispozitivului de redare video, extinzand astfel limitările pe care aplicatia le poate avea, oferind posibilitatea utilizarii de pe un ecran cu rezoluție redusă..

De asemenea am considerat ca este important pentru o instituție digitalizată utilizarea acestui produs software pentru gestionarea eficientă a activităților de resurse umane.

Contributii personale

In dezvoltarea acestui sistem informatic am înglobat tehnologi și limbaje mai puțin aprofundate în cursul a patru ani de studiu întâlnite in produsele software de resurse umane cum ar fi dezvoltarea unui sistem de aprobare prin care doar administratorul poate efectua modificări în baza de date cu ajutorul tehnologiei AJAX, astfel datele nefiind stocate la fiecare modificare solicitată de alți utilizatori.

In timpul pe care l-am petrecut dezvoltand aceasta aplicatie, mi-am aprofundat cunostintele in materie de limbaje de programare, invatand astfel limbaje precum Php, JavaScript, JQuery, Html, Css, MySQL si am avut ocazia de a folosi tehnologii noi, care sunt foarte utlizate in acest domeniu precum AJAX, Bootstrap, MVC, PhpLaravel.

În procesul de dezvoltarea al produsului software si implementarea acestuia in forma prezentată am lucrat in total 10 luni de zile, cumuland peste 30000 de linii de cod. In acest moment, aplicatia este propusă spre comercializare, urmand ca eu sa o dezvolt în funcție de oferta primită.

Perspective de viitor

În concordanță cu analiza întemeiată a necesităților actuale ale activităților de secretariat mi-am stabilit două categorii principale de caracteristici, mai exact caracteristici prioritare și, respectiv, facultative.

Pe parcursul dezvoltării aplicației am constatat că funcționalitățile facultative pot fi nenumărate, în rolul pe care îl poate deține un utilizator.

Platforma web creată și dedicată utilizări în cadrul organizațiilor social-culturale nu este exclusivă doar pentru această nișă de piață deoarece poate fi ușor remodelată după cerințele potențialilor cumpărători.

Având în vedere destinația propusă și resursele hardware limitate pe care le dețin, am considerat că anumite module opționale, mai puțin utilizate în activitatea de secretariat, le pot propune ca perspectivă de dezvoltare a sistemului software creat.

Un astfel de modul opțional ar fi secțiunea orar care conține o aplicație cu funcționalități personalizate pentru fiecare rol de utilizator. Mai exact, autentificarea în cont ar permite pe lângă funcționalitățile deja implementate și posibilitatea vizualizării orarului personalizat, astfel studentul își va putea verifica orarul actualizat al cursurilor și laboratoarelor din semestrul respectiv, profesorul și-ar vizualiza orarul și ar avea posibilitatea să solicite stabilirea și schimbarea zilei și a sălii și secretarul ar genera prin aplicație orarul.

Alt modul opțional pe care l-aș propune pentru o dezvoltare viitoare este cel de avizier în cadrul căruia s-ar afișa informații selectate în funcție de rolul utilizatorului.

Modul adeverințe compus dintr-un formular dinamic, o aplicație de salvare în format static a formularului și o aplicație pentru semnătură digitală.