Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică [302023]

Licență

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică [302023]

Byadmin ianuarie 1, 2024

[anonimizat]. Univ. Dr. Ing. RĂDULESCU VIRGINIA MARIA

Septembrie 2015

[anonimizat]-

[anonimizat]. Univ. Dr. Ing. RĂDULESCU VIRGINIA MARIA

Septembrie 2015

[anonimizat]-Gabriel, student: [anonimizat], Calculatoare și Electronică a [anonimizat], [anonimizat]:

cu titlul “[anonimizat]-,

coordonată de Asist. Univ. Dr. Ing. [anonimizat] 2015.

[anonimizat]:

reproducerea exactă a [anonimizat]-o [anonimizat]-o [anonimizat],

[anonimizat], [anonimizat] a unor aplicații realizate de alți autori fără menționarea corectă a [anonimizat] a [anonimizat].

Pentru evitarea acestor situații neplăcute se recomandă:

plasarea între ghilimele a citatelor directe și indicarea referinței într-o [anonimizat] a [anonimizat] a sursei originale de la care s-a [anonimizat] s-[anonimizat], figuri, imagini, statistici, [anonimizat], a căror paternitate este unanim cunoscută și acceptată.

Data, Semnătura candidat: [anonimizat],

TEZA DE DIPLOMĂ

REFERATUL CONDUCĂTORULUI ȘTIINȚIFIC

În urma analizei lucrării candidat: [anonimizat]:

[anonimizat]:

Data, [anonimizat].

[anonimizat].

Tehnologii CSS/HTML utilizate în dezvoltarea aplicației

Proiectare baze de date

Tehnologii PHP utilizate în dezvoltarea aplicației

Concluzii

Bibliografie

Introducere

1.1 [anonimizat], atractiv. [anonimizat], [anonimizat]6 a celor 3 website-uri pe care am dorit să le aducem la viață ( Main Page / Forum / Sections ). Astfel, am creat o [anonimizat].

Ideea de Main Page întrunește necesitatea unui enviroment cât mai accesibil pentru viitori utilizatori, o interfața atractivă și ușurința de comunicare prin intermediul internetului. Ne-am gândit să facem o pagină cât mai simplă folosind o nouă tehnologie HTML/CSS și anume “Materialize”, tehnologie ce aduce un nou stil și aspect plăcut paginilor web, urmând să fie discutată în continuare.

Forumul a fost adus în discuție de necesitatea studenților facultații de a comunica intre ei folosind o platformă internă cât mai simplă și utilă. De asemenea, nevoia profesorilor de a transmite studențiilor anumite informații cât mai ușor, rapid și sigur este îndeplinită.

Pe această platformă online, se pot regăsi și informații, detalii despre secțiile pe care facultatea le oferă, o descriere în detaliu împreună cu o modalitate de accesare a unor fișiere puse la dispoziție atât de profesori cât și de studenți.

Platforma JQuerry

JQuery este o platformă de dezvoltare JavaScript, care are menirea de a ușura și îmbunătăți procese precum traversarea arborelui DOM în HTML, managementul inter-browser al evenimentelor, animații precum și a cereri tip AJAX. jQuery a fost gândit să fie cât mai mic posibil, disponibil în toate versiunile importante de browsere existente.

jQuery se poate folosi pentru a rezolva anumite probleme specifice programării web,dupa cum urmează:

selecții de elemente în arborele DOM folosind propriul motor de selecții open source Sizzle

proiect născut din jQuery

parcurgere și modificarea arborelui DOM (incluzând suport pentru selectori CSS 3 și XPath simpli)

înregistrarea și modificarea evenimentelor din browser

manipularea elementelor CSS

efecte și animații

cereri tip AJAX

extensii

utilităti – versiunea browser-ului, funcția each.

JQuery este un software open source, licentiat sub MIT si GNU.

Cea mai simpla sintaxa JQuery este urmatorul program de afisare Hello World:

$(document).ready(function(){

$('body').html('Hello world!');

});

Cele mai interesante aspecte legate de JQuery sunt Plugin-urile și extensiile pe care acesta le ofera. Programatorii isi pot dezvolta subaplicatii bazate pe biblioteca principală, extinzand astfel biblioteca principala cu functii specific plugin-ului.

Astfel, aceasta ocupa foarte putin spațiu, iar extensiile pe care dorim să le folosim pe anumite site-uri pot fi încarcate la cerere, doar cand este nevoie de ele.

De altfel, există si un set de extensii principal pe care îl ofera JQuery, numit JQuery UI ( sau JQuery User Interface ). Acesta oferă programatorilor un set de extensii pentru interactivitate, efecte mai complexe și teme de culori.

Programatorii pot crea extensii, iar JQuery oferă publicarea pe pagina principală sub diferite categorii disponibile.

Pentru a lucra cu JQuery trebuie mai întai inclusă libraria de functii pe pagina HTML, ca orice fisier cu cod.

Aceasta se poate descărca de pe pagina oficială, apoi salvată sub extensia “.js” si inclusă în documentul HTML folosind următoarea sintaxă:

O alternativă mai simplă pentru a nu downloada librăria este folosirea acesteia prin Google:

</script>

Sintaxa JQuery este:

$(document).ready(function() {

// tot codul jQuery se scrie aici

});

Toate comenzile și funcțiile de manipulare al elementelor se vor adauga in acest document-ready.

Pentru a utiliza elementele de tip HTML se pot folosi ghilimele duble sau simple. De exemplu dacă dorim să selectam un element după un id unic id=”mesaj”, se va scrie:

$(“#mesaj”)

Proiectare si Design

Pentru crearea si editarea imaginilor folosite in design-ul website-ului nostru am folosit programul Adobe Photoshop CS6.

Adobe Photoshop este un software produs de Adobe Systems, folosit pentru editarea imaginilor digitale pe calculator.

Photoshop CS6 este vârful de lance al software-urilor pentru editarea de imagini, fotografii, grafica, video si web.

Acesta este un program cu o interfată intuitivă care permite o multitudine de modificari necesare pentru editare.

Avantajele acestui software prin care se diferențiaza de alte aplicatii sunt:

Selectiile

Straturile ( Layers )

Măstile ( Masks )

Canalele ( Channels )

Retușarea

Optimizarea imaginilor pentru Web

Principală utilizare a photoshop-ului în dezvoltarea temei noastre de licentă a fost crearea de content web folosind vector art design.

Pentru a ne usura munca, am desenat pe hartie prima dată conceptul website-ului, apoi am detaliat fiecare zona în parte prin desene si calcule.

In photoshop CS6 am lucrat în mare parte cu Pen tool, pentru a creea imagini vectoriale , scalabile ca rezolutie.

Layer-ul pe care am făcut desenele avea rezolutia standard de 1000 x 1000 cu 300 ppi.

Fiecare imagine creată in Photoshop a fost facută folosind grid line pentru a fi siguri ca liniile sunt drepte si curbele sunt asa cum le dorim noi să fie.

De asemenea am lucrat pe layers pentru un mod de lucru cât mai organizat si pentru o editare usoară a fisierelor în caz de probleme.

Notiuni despre proiectarea site-urilor web

Notiunea de site web provine din expresia ”website” care desemnează un grup de pagini web care conțin texte, imagini, animații, auto/video, accesibile prin internet.

Cand a apărut internetul, fiecare website se accesa prin introducerea adresei IP specific, ulterior, acestora li s-au alocat domenii, permitând astfel ca fiecare site sa fie accesat pe internet folosind o adresă aleasă de dezvoltatorul acestuia ( www.ace.ucv.ro ), usurând astfel accesarea.

Un site web este creeat cu ajutorul limbajului HTML si, optional, limbajele de programare PHP, ASP… Aceasta se numeste asa deoarece poate fi afisată de pe orice dispozitiv conectat la internet ( telefon, tableta, calculator, laptop ).

Un site care contine mai multe pagini are de obicei o pagină principală numita si homepage care face legatura catre celelalte pagini din domeniul sau.

Site-urile web se pot clasifica după content in principal:

Website Static ( de prezentare ).

Website de tip forum sau cameră de discuții.

Website de tip E-shopping ( magazin online ).

Website tip content multimedia ( youtube, soundcloud ).

In zilele noastre se pune foarte mare accent pe aspectul site-ului. Acesta poate fi stilizat folosind o varietate de limbaje specifice ( CSS, Jquerry, Javasript, etc ).

Pentru a capta atentia unui utilizator si a face site-ul să fie accesat de foarte multe ori, contentul trebuie structurat cat mai usor si mai citet, sa fie folosită o paletă de culori fară a se exagera cu numarul acestora.

Structura unui fisier HTML

Odata cu aparitia motorului de căutare Google, principala inclinatie a paginilor web a fost advertisingul si SEO ( Search Engine Optimization ). Un site foarte bine optimizat si descris apare mereu pe prima pagina a motorului de căutare, ceea ce creste numarul de utilizatori unici ce accesează site-ul.

Incepand cu anul 2008, odata cu inclinația spre design, au apărut un număr foarte mare de limbaje de design care combină principiile clasice ale unui design de succes impreună cu tehnologia si inovația ( Materialize CSS, Bootstrap CSS, etc. )

Un exemplu de Materialize CSS am folosit și noi in creearea paginii principale, rezultatul fiind un aspect plăcut si atragător.

Tehnologii CSS/HTML utilizate in dezvoltarea aplicației

Am pornit de la ideea de a creea o platformă de socializare care imbină elemente de:

HTML

CSS

JQuerry

JavaScript

PHP

MySQL

Photoshop Vector Design

Ideea de baza a fost să facem 2 website-uri total diferite dar care se vor mula unul peste celălalt pentru a creea ceea ce noi am dorit sa fie o alternativă pentru website-ul facultății / grupurile de facebook.

Pentru a fi ușor de accesat ne-am hotărat sa facem o a 3-a pagina care le va uni pe celelalte doua pentru un acces cat mai ușor. Un fel de alternativa de Homepage.

Așa a aparut conceptul de “ Main Page” pentru noi.

După un studiu amănuntit pe google ne-am decis să facem această primă pagină pe o tehnologie nou aparuta, “ Materialize CSS “, o creeatie google, care îmbină elemente de design alături de paleta de culori “FLAT” care aduce un stil aparte oricărui design.

Am încercat să folosim aceleasi culori ca si pe pagina oficială a facultătii ( ace.ucv.ro ) pentru a nu schimba in totalitate stilul si aspectul acesteia.

Am inceput prin a importa scriptul specific materialize, asa cum l-am importat si pe cel de la JQuerry. Acesta se gaseste pe internet.

Voi discuta mai detaliat despre acestea in capitolul care urmeaza.

In continuare , in tag-ul < head> </head> am descris tipul fișierului pe care l-am creat pentru ca browserul sa îl poată citii cu usurintă.

Tag-ul meta se initializeaza numai in sectiunea head, http-equiv anunta browserul ce urmează să citească, content reprezintă tipul conținutului fișierului nostru.

Atunci când deschidem pagina intr-un browser, am dorit ca acesta sa afiseze numele paginii impreuna cu logo-ul acesteia sus in bara. Exemplu:

Am realizat acest lucru folosind un link de relatie care specifica logo-ul ( href reprezintă adresa de unde isi importă imaginea ), impreuna cu tag-ul <title> care dă numele paginii in browser.

În continuare am inițializat corpul principal al site-ului. Ne-am gândit sa împărțim în <div>-uri pentru a ușura munca. Fiecare secție din pagina principală, headerul cu logo-ul, cele 2 poze, descrierea secțiilor și contactul au fost grupate in <div>-uri pe care le-am stilizat separat pentru a nu avea probleme.

Interiorul <div>-ului contine un hyperlink a care acceseara site-ul principal al facultatii printr-un buton imagine.

Target=”_blank” face ca hyperlink-ul să se deschidă pe o pagina secundară in browser.

Pentru un aspect at mai placut si mai “user friendly” am folosit tehnologia parrallax pentru pozele din interiorul paginii, care consta in formatarea pozelor pentru website, pentru a le face responsive și pentru a le da aspectul de încasetare ăn pagină. De asemenea am creeat un buton peste imagine împreună cu o descriere pentru a da un plus de stil.

In footer-ul paginii am pus date de contact formatate prin tag-ul < p> care reprezintă paragraful.

Toate pozele si designul paginii au fost create in photoshop, prelucrate sau prin vector art.

În continuare ne-am îndreptat atentia spre partea de sectii din tema noastra de licentă.

Am dorit să facem un website cu un afisaj cât mai interesant si captivant care să iti ramană în minte dupa ce veti iesi de pe pagina noastra. După o documnetație amănunțită am decis să facem un slider pe orizontală cu zoom dezactivat pe pagină, prin care se poate naviga folosindu-se de ancore atasate paginii principale.

Ne-am axat mai mult pe partea de user interactivity în acest website si am folosit o bară de meniu prin care poti naviga înapoi pe pagina principală, dupa ce userul naviga pe una din paginile secundare ale site-ului.

De data aceasta fisierul l-am facut de tip php, deoarece am avut un fisier index.php apelat în interior pe pagina -9- unde apare un script scris de noi care afisează un upload/download din baza noastră de date.

Pentru realizarea acestei pagini am folosit 4 tehnologii diferite.

Am început cu un slider pe orizontală fară scroll, a fost nevoie să calculăm dimensiunea browserului și să calculăm fiecare pagină in parte ce dimensiune va avea pentru a îl face să se incadreze exact in pagină.

Noi am avut nevoie de 10 pagini pentru informațiile pe care urma să le încărcăm:

1 pagina principala

7 pagini de content despre fiecare secție în parte

1 pagină pentru fișierul php de upload/download

1 pagină finală de descriere.

Am început prin presupunearea ca fiecare pagină ocupă 100% din width-ul unui browser. Pentru a folosi 10 pagini lipite una de alta a fost nevoie să facem un container de 10 * 100% = 1000%. Ca un exemplu ar insemna 10 monitoare lipite unu in dreptul celuilalt.

Cele 10 pagini au fost apoi încarcate într-un <div> denumit mask. Căruia i-am dat un width de 1000%, iar fiecare pagina din interiorul acestui mask a fost creeată cu un alt <div> care a avut un width de 10% deoarece se presupune ca acel 1000% este defapt 100% din totalul site-ului tau, iar fiecare pagină pe care dorești să o faci reprezintă un procent din 100%.

100% / 10 ( numărul de pagini ) = 10% width per pagină.

După delimitările celor 10 pagini, am creeat un meniu cu un z-index adecvat pentru a fi mereu deasupra oricarui content de pe website. De asemenea meniul este creat din 3 <div>-uri diferite , primele 2 sunt pentru delimitările pe stânga si dreapta, acestea nu au content pe ele și sunt folosite pur și simplu pentru a stiliza bara de meniu.

Cel de-al treilea div este containerul pentru meniul format din liste.

Aceste liste sunt stilizate cu imagini de fundal și un –webkit- cu interactiune pe mouse ( când ducem mouse-ul deasupra unui element din lista, acesta iși schimbă dimensiunea pe height cu 10 pixeli pentru a da o senzatie de tranzitie. )

În continuare ne-am concentrat asupra paginii principale.

Am dorit inițial să facem designul pentru ancore din imaginii, dar am avut probleme legate de așezarea acestora in pagină. De asemenea , folosirea tag-urilor <a> pentru creeare hyperlink-urilor ne-au creeat probleme deoarece se suprapuneau limitele imaginilor asupra celorlalte si utilizatorul putea să intampine problema de a apăsa pe o sectie si a fi trimis pe alta sectie in interiorul site-ului.

Am fost nevoiti să schimbăm abordarea.

Am folosit o metodă destul de dificilă, si anume SVG Path-urile.

Path-urile reprezintă delimitarea in linii a unor forme, care poate fi umplută cu o culoare, ingroșată pe margini sau decuparea unor forme si orice combinație intre aceste trei utilizari.

Path-urile sunt descrise ca forme desenate pe hartie cu un pix. Acestea pornesc de la un punct si pot fi trasate prin linii creând diferite forme 2d.

In general, path-urile reprezintă geometria liniei de contur al unui obiect.

Astfel am plecat de la design-ul creeat în photoshop si am trasat conturul a 7 hexagoane. Mai dificil a fost că fiecare hexagon trebuia creeat independent si punctele trebuiau calculate cu exactitate inainte de a fi notate in cod.

Un fisier SVG se initializează prin tag-ul <svg> si se inchide tot prin tag-ul </svg>

Tag-ul <path> a fost folosit pentru a delimita fiecare hexagon în parte.

Fiecare hexagon a fost creeat din 6 puncte care aveau 2 coordonate pe axe.

Definirea coordonatelor se face în “d=” unde primele 2 numere reprezintă coordonatele primului punct și asa mai departe.

Luăm ca exemplu primul hexagon:

Punctul 1 : 180 , 0

Punctul 2 : 90 , 54

Punctul 3 : 90 , 154

Punctul 4 : 180 , 208

Punctul 5 : 270 , 154

Punctul 6 : 270 , 54

Punctul 1 : 180 , 0

Prin urmare am fost nevoiți să definim 7 path-uri diferite pentru a creea interfata, dar acest lucru ne-a ajutat mai departe la realizarea hoverului pe ele, deoarece aceste path-uri mascau elementele plasate în stânga si în dreapta la fiecare dintre forme și erau afișate numai în interiorul path-ului.

Stilizarea fiecarui hexagon a fost facută prin clase și id-uri numerotate de la 1 la 7 pentru fiecare în parte.

O altă problemă pe care am întampinat-o în crearea acestui SVG a fost legarea ancorelor din interiorul website-ului la fiecare path în parte.

Aceste path-uri nu acceptă classic-ul tag de atribuire a unui hyperlink <a href> si a fost nevoie de folosirea tag-ului special <a xhref> pentru atribuirea hyperlink-urilor.

De asemenea am avut nevoie și de un mic script jquerry pentru a putea efectua tranzițiile între slide-uri.

După terminarea SVG-ului, am continuat cu stilizarea acestuia și definirea secțiunilor de hover ce se vor suprapune peste path-uri atunci când utilizatorul va actiona cu mouse-ul peste acestea.

Fiecarui path i-a fost asignat un <div> why_hover ce conține 4 sub div-uri:

Primul div de clasa left_side contine o imagine de opacitate 0.7 orientată spre dreapta care este în stare pasivă cu atributele de stil.

~ display: none

~ width: 0%

Al doilea div de clasa right_side este similar cu primul div , conține de asemenea o imagine de opacitate 0.7, de aceasta dată cu orientarea spre stânga și cu aceleași atribute de stil.

~ display: none

~ width: 0%

Div-ul de clasa text conține informatii generale despre fiecare secție în parte și este stilizat prin folosindu-se numai atributul display : none, deoarece acesta iși va menține aceeasi poziție atunci când mouse-ul va suprapune path-ul, fiind afectată numai vizibilitatea text-ului.

Div-ul final este home_title. Acesta contine un paragraf cu numele sectiei. Acel paragraf va fi afectat de catre mouse prin decorarea acestuia cu un underline.

text-decoration : none – > text-decoration : underline

Un exemplu vizual al hover-ului pe website-ul realizat de noi:

Paginile urmatoare au fost concepute sub acelasi design, folosind un slider j querry. Fiecare pagina din slider conține informatii referitoare despre secția slectată cât și informații despre materiile pe care viitorul student le va întalni în cadrul profilului selectat.

Fiecare pagină din slider este marcată printr-un container pentru a putea fi stilizat cu ușurință.

Fiecare informatie din slider a fost introdusă folosind tag-ul <p> , iar fiecare slide are o imagine specifică acesteia introdusă prin intermediul tag-ului <img>. Aceste imagini au fost concepute sub aceeași idee de design folosind vector art. Am încercat să ne axăm pe o singură gamă de culoare pentru a nu enerva utilizatorul cu o paletă prea mixtă de culori.

Deși au la bază același script, fiecare slider este independent fată de celelalte, prin urmare, atunci cand utilizatorul va actiona sliderul de pe pagina “ Calculatoare Romana”, trecând de la prima pagină la a 2-a pagină, celelalte slidere vor rămâne mereu pe aceeași pozitie “1”.

Pentru a realiza acest lucru a fost nevoie de modificarea in cod a denumirii sliderului pentru fiecare pagină în parte și de asemenea de modificarea scriptului pentru a putea permite manipularea unui număr mai mare de slideuri.

Un exemplu de slider de pe pagina “Calculatoare Engleza”:

1.

2.

3.

4.

5.

O alta problemă pe care am întalnit-o în dezvoltarea acestui website a fost crearea si introducerea unei metode de “share” de fisiere intre utilizatori.

Folosind baza de date creeată atât pentru forum cât si pentru unele zone din interiorul website-ului am creeat o tabelă nouă specială pentru sectia de upload / download de fisiere. Aceasta contine un id prin auto incrementare, folosit și cu scopul de a numerota totalitatea fișierelor care au circulat prin baza de date, cât și numele fișierului, tipul acestuia si marimea in kilobytes.

Partea de upload si download a fost facută în totalitate in PHP, dar pentru a putea importa aceasta optiune în interiorul website-ului nostru a trebuit sa modificam tipul site-ului din extensia .html în extensia .php si de asemenea a trebuit sa o mutăm în totalitate pe serverul WAMP.

Apoi am introdus script-ul php în interiorul site-ului prin comanda:

<? include (‘path’); ?>

Am incărcat acest script în interiorul unui container pentru a putea umbla cu usurinta la chestiunea de afisaj si pozitionare în interiorul site-ului.

Fisierul index.php contine pe prima linie de cod o apelare a unui alt fisier php unde am făcut conexiunea la baza de date.

Am decis să facem conexiunea la baza de date separata deoarece nu am știut numarul exact de pagini php pe care trebuia să le facem, iar fiecare necesită o conexiune. Și a fost mai ușor să facem una globală care doar trebuia apelatp în fiecare pagina.

În continuare, în interiorul corpului principal avem un container care ține în acesta formularul de upload al paginii. Acesta este format din 3 linii de cod.

Form action=”upload.php” care este initializarea formularului și căruia îi este alocat scriptul upload.php pentru a stii ce apela in momentul în care butonul este acționat.

Input type=”file” este zona în care utilizatorul va încarca fisierele pe are doreste să le uploadeze în baza noastra de date și mai departe pe site-ul nostru.

Button type=”submit” este butonul care semnalează ca user-ul a terminat de selectat fisierul si doreste sa îl incarce in baza de date.

În continuare am creeat un tabel care va afișa fisierele extrase din baza de date printr-o apelare sql.

Lățimea de 80% a tabelului îl face să fie afișat corect in browser indiferent de dimensiunea acestuia. Prima linie a tabelului, < tr> < th> reprezintă headerul tabelului, un text de dimensiune mai mare care servește ca informatie despre conținutul tabelului.

Următoarele 2 linii <td> sunt sub headere care informează user-ul ce se află pe fiecare coloană.

Scriptul php de apelare a informatiilor din baza de date extrage toate randurile și coloanele din baza de date apoi are rolul de a le sorta pe coloane în interiorul tabelei noastre și de a creea prin intermediul unei apelari hyperlink , butonul de preview al fisierului uploadat.

De asemenea, am schimbat in totalitate aspectul paginii folosind o tehnologie “ Dots 3D “, tehnologie ce permite încarcarea unei imagini transparente de tip .png, care va fi pozitionată peste imaginea de fundal a website-ului și care va interactiona cu mouse-ul prin simpla mișcare a acestuia.

Pentru a realiza acest lucru am folosit un script Jqueryy , iar pentru a-l introduce in interiorul website-ului a fost nevoie de o simplă apelare la începutul codului, imediat dupa deschiderea corpului principal al paginii.

Pentru a vedea în detaliu mișcarea imaginii in browser am atasat o poza live preview din Google Chrome care arăta cum se schimbă coordonatele imaginii în functie de mouse.

Proiectare bază de date

Când proiectăm o bază de date, trebuie să fim atenți la orice detaliu legat de tabele, interogari, pentur ce vom folosi această baza de date si cum o vom structura.

Proiectarea atentă si corectă este esentială pentru a atinge cu exactitate scopurile utilizării unei baze de date.

Pornind de la o simpla baza de date, putem avea doar un singur tabel, dar in general, majoritatea bazelor de date contin un numar mai mare.

Ca exemplu, se poate avea o bază de date care stocheaza în trei tabele diferite informatii despre un forum (useri, categorii si postari).

Fiecare rând se numeste inregistrare, iar fiecare coloană se numeste câmp. Un rând conține date diferite despre aceeași înregistrare. O coloană conține acelasi tip de date despre inregistrări diferite.

De exemplu, in tabela “users”, fiecare rând conține informații despre userul respectiv ( nume , parola, email, profesor da/nu ). Fiecare coloană conține un anumit tip de informații despre acelasi user ( parola sau email ).

Pentru o proiectare bună a unei baze de date se urmaresc anumite principii. Fiecare informație care apare de mai multe ori consuma spatiu si prin urmare ingreuneaza incarcarea bazei de date si cresc sansele apariției erorilor. De asemenea, este important ca informațiile introduse sa fie corecte, deoarece orice interogare care extrage din baza de date anumite informatii poate extrage date incorecte.

In creearea unei baze de date corecte se urmaresc urmatorii pași:

Scopul bazei de date.

Colectarea informatiilor necesare.

Datele se impart în tabele în functie de subiect.

Denumirea cheilor primare.

Se vor creea legăturile intre tabele în funcție de necesităti.

Se va urmarii introducerea corecta a informatiilor in tabele.

Pentru a creea o bază de date folositoare, ideile principare vor fi notate prima dată pe hârtie – cum se doreste să se folosească baza de date și cine o va folosi.

Informatiile care trebuie stocate vor fi colectate și legate între ele pe o foaie de hârtie pentru a ușura munca atunci când ne vom apuca de introducerea datelor. De asemenea se va urmări sortarea pe tabele în functie de subiect sau scop.

Cheile primare sunt foarte importante deoarece acestea reprezintă identificatorii unici a unor inregistrări în bază. Cheia primară va fi întotdeauna o valoare care nu se va altera niciodată. De obicei aceasta este asignată unui numar unic arbitrar care se auto-incremetează cu fiecare nouă înregistrare.

Relațiile între tabele se fac în funcție de necesităti. Un exemplu folositor din baza noastră de date este tabela de postari care, prin coloana “post_by” este legată de coloană “user_id” din tabela users.

Informațiile care vor fi introduse in baza de date se vor face printr-o interogare SQL de tipul INSERT into “nume_baza” WHERE …

Tehnologii PHP utilizate in dezvoltarea aplicatiei

PHP(Hypertext Preprocessor) este un limbaj de programare Open Source folosit în special pentru dezvoltarea paginilor WEB , putând fi inclus într-un fișier HTML. Instrucțiunile scrise în acest limbaj trebuie incluse între <?php si ?>.Codul scris este executat de server, poate genera paginile HTML care sunt trimise ulterior catre vizitator. Acesta primește rezultatul scriptului, nefiind nevoit să inteleaga codul scris.

Pentru a implementa un forum în care studenții din ani diferiti și de la secții diferite să gasească informații, cursuri scrise, postate de profesori sau de către alți studenți, am folosit PHP și baze de date MySQL.

Prin intermediul instructiunilor puse la dispozitie de catre limbajul de programare PHP, am creat conectarea la baza de date “ace”.

Dupa ce am initializat variabilele, creăm o instructiune prin care verificam daca s-a conectat sau nu baza de date.

Dupa ce conectarea s-a realizat cu success, se apelează fisierul index.php cu ajutorul căruia afisăm informatii din baza de date legate de anii I, II, III sau IV.

Ceea ce vede utilizatorul:

În cazul în care a intervenit o eroare în scriere, în tabela sau în baza de date, prin intermediul instructiunii de mai jos, utilizatorii pot vedea și pot anunța administratorul.

Tot în cadrul acestei instrucțiuni, se testează dacă utilizatorul este înregistrat sau nu pe site. În cazul în care nu este autentificat, utilizatorul nu poate vedea nicio informatie din baza de date, dar se poate autentifica sau își poate crea un cont nou.

Acest lucru este folosit pentru securizarea informațiilor din baza de date.

În cadrul fișierului index.php, se apeleaza și fișierele header.php și footer.php.

In header.php regăsim instrucțiuni HTML prin care se specifică relația cu fișierul style.css din care se folosesc clasele create pentru stilizare. Tot aici, se specifică dimensiunile logo-ului și detalii legate de bara de meniu.

In fișierul signin.php sunt incluse, de asemenea, și fișierele header.php și footer.php. Se verifică daca utilizatorul este autentificat prin interogarea tabelei “users”; dacă numele de utilizator sau parola nu corespund cu inregistrările din această tabelă, se afisează un mesaj de eroare. În cazul în care utilizatorul are deja cont creat și numele de utilizator și parola corespund cu inregistrările din baza de date, se afisează mesaj de bun venit.

Un nou utilizator iși poate crea cont nou (se apelează fisierul signup.php); se completează toate campurile.

Inregistrările scrise in campuri, sunt completate in baza de date în tabela “users”. În cazul în care deja există numele de utilizator în tabela, se returnează un mesaj de eroare.

În cazul în care numele de utilizator nu există deja în tabelă, se crează contul.

Orice utilizator care este înregistrat în baza de date ca și profesor poate sa creeze sectiuni din cadru forumului, pe cand utilizatorii inregistrați ca și studenți pot doar să vizualizeze si să posteze comentarii în “Topic”. Orice cont nou creat este, inițial, ca și “student”, putând fi ulterior modificat din baza de date de catre administrator, ca și “profesor”.

Inainte:

După:

Un utilizator care este autentificat ca “profesor” poate să creeze categorii, secții, topicuri. Codurile pentru acestea se regăsesc în fisierele: creat_cat.php, create_sectie.php, respectiv create_topic.php. În fiecare fișier există instrucțiuni prin care se verifică dacă utilizatorul este autentificat si dacă este profesor. Este o modalitate de a asigura securitatea forumului si de a preveni postarea unor lucruri neprevizibile.

Exemplu: ne autentificăm cu numele de utilizator “student”; primim urmatoarea eroare:

Un utilizator ce are drepturi limitate precum un “student” poate posta în topicurile deja existente; datorită securității, acesta nu poate modifica și șterge alte comentarii/postari decat cele ale lui.

Un utilizator conectat cu un cont ce are drepturi ca cele ale unui “profesor” poate șterge și edita orice comentariu.

Ca un plus în securitatea forumului, am realizat și sesiune de iesire din cont implementata prin fisierul “signout.php”; ne asigurăm astfel că un alt utilizator în afara de cel care foloseste contul nu va accesa informatiile puse la dispozitie pe forum si nu va posta comentarii in numele celui care detine contul.

Prin intermediul limbajului de scripting PHP am reusit sa creăm fisierele ce sunt accesate în acest forum; am realizat astfel un mod de comunicare mai accesibil și securizat între profesori și studenți.

Concluzii

În concluzie, prin dezvoltarea acestei platforme multimedia, am subliniat importanța unei platforme multimedia în comunicarea dintre studenții unei facultăti de automatică. Cele mai importante aspecte de subliniat sunt avantajele unei comunicari rapide între cadrele didactice și studenți.

Un avantaj de subliniat este faptul că se poate folosi o retea internă pentru comunicări, fară un acces continuu la internet, ce poate impune anumite riscuri.

În dezvoltarea acestei platforme au fost utilizate tehnologii de ultimă ora din domeniul HTML, CSS, PHP si JQuery.

Am insistat și pe securitatea datelor in forumul creeat. De aceea am limitat accesul la utilizatorii care nu aveau cont și de asemenea restricții în editarea, stergerea și vizualizarea anumitor topic-uri fară drept.

Concluzii

Importanța Internetului în zilele noastre este deja cunoscută iar exploatareaoportunitaților oferite de acesta trebuie sa fie o prioritate pentru o firmă modernă mai alesdacă concurența are deja prezență online. Un web site costă o singură dată și rămâne permanent, 24 de ore din 24 în atenția publicului din orice zonă a lumii. Oricând, conținutulunui web site poate fi actualizat sau modificat după bunul Dumneavoastră. plac.La baza aplicației Sistem de management al Școlarității Elevilor stă limbajul de programare PHP, care este un limbaj foarte puternic, și foarte des folosit. Din aceste motiveam ales acest limbaj pentru implementarea aplicației. În zilele noastre cele mai multe aplicațiidistribuite sunt scrise în PHP, care este o soluție convenabilă pentru proiectare a unei aplicațiide comerț electronic pentru clienții care dispun de un buget redus.Lumea se schimbă de la o zi la zi, tehnologiile avansează, apar noi și noi aplicații,software care ne vor conduce într-o lume computerizată. Eu cred că PHP ocupă un loc foarteimportant în această lume și are un rol deosebit în dezvoltarea noilor tehnologii.Aplicația Sistem de management al Școlarității Elevilor este doar o mică parte dinaceastă lume imensă a limbajului PHP, dar o parte semnificativă, deoarece folosirea luiușurează munca multor oameni cu vârste diferite.

Bibliografie

Wikipedia

https://en.wikipedia.org/wiki/JQuery

Materialize

http://materializecss.com/

W3Schools

http://www.w3schools.com/svg/svg_path.asp

Microsoft Office

https://support.office.com/ro-ro/article/Noțiuni-de-bază-despre-proiectarea-bazelor-de-date

Anexa Cod HTML

Cod Pagina Principala

<!DOCTYPE html>

<head>

<title>ACE Lounge</title>

<!– CSS –>

</head>

<body>

<li><a href="#">Navbar Link</a></li>

</ul>

</div>

</nav>

<h1 class="header center teal-text text-lighten-2">ACE Forum</h1>

<h5 class="header col s12 light">Un forum dedicat profesorilor si studentilor ACE</h5>

</div>

<a target="_blank" href="http://localhost/source/index.php" id="download-button" class="btn-large waves-effect waves-light teal lighten-1">Check out our Forum</a>

</div>

</div>

</div>

<!– Icon Section –>

<h5 class="center">•Sectii Licenta•</h5>

<p style="text-align: center;" class="light">Ingineria Sistemelor Multimedia</p>

<p style="text-align: center; margin-top: -10px" class="light">Calculatoare Romana</p>

<p style="text-align: center; margin-top: -10px" class="light">Calculatoare Engleza</p>

<p style="text-align: center; margin-top: -10px" class="light">Mecatronica</p>

<p style="text-align: center; margin-top: -10px" class="light">Robotica</p>

<p style="text-align: center; margin-top: -10px" class="light">Automatica si Informatica Aplicata</p>

<p style="text-align: center; margin-top: -10px" class="light">Electronica Aplicata</p>

</div>

<h5 style="margin-top: -20px" class="center">•Sectii Master•</h5>

<p style="text-align: center;" class="light">Automatica Sistemelor Complexe</p>

<p style="text-align: center; margin-top: -10px" class="light">Information Systems for e-Business</p>

<p style="text-align: center; margin-top: -10px" class="light">Inginerie Software</p>

<p style="text-align: center; margin-top: -10px" class="light">Ingineria Calculatoare și Comunicațiilor</p>

<p style="text-align: center; margin-top: -10px" class="light">Sisteme de Conducere în Robotică</p>

<p style="text-align: center; margin-top: -10px" class="light">Tehnologii Informatice în Ingineria Sistemelor</p>

</div>

<h1 class="header center teal-text text-lighten-2">ACE Website</h1>

</div>

<a href="http://localhost/Sectii/test.php" target="_blank" id="download-button" class="btn-large waves-effect waves-light teal lighten-1">Check out our Website</a>

</div>

</div>

</div>

<h4>~Contact Us~</h4>

<p class="left-align light" style="text-align: center">Facultatea de Automatică, Calculatoare și Electronică,

Universitatea din Craiova</p>

<p class="left-align light" style="text-align: center">Bulevardul Decebal nr. 107</p>

<p class="left-align light" style="text-align: center">Codul poștal RO-200440</p>

<p class="left-align light" style="text-align: center">Craiova, județul Dolj, România</p>

</div>

<!– Scripts–>

</body>

</html>

Cod Sectii.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>ACE Sections</title>

</noscript>

$(document).ready(function() {

$('a.panel1').click(function () {

$('#wrapper').scrollTo($(this).attr('xlink:href'), 800);

return false;

});

$(window).resize(function () {

resizePanel();

});

$(document).ready(function() {

$('a.panel').click(function () {

$('#wrapper').scrollTo($(this).attr('href'), 800);

return false;

});

$(window).resize(function () {

resizePanel();

});

$('.path1').click(function() {

window.location = "#item2";

});

function resizePanel() {

width = $(window).width();

height = $(window).height();

mask_width = width * $('.item').length;

$('#debug').html(width + ' ' + height + ' ' + mask_width);

$('#wrapper, .item').css({width: width, height: height});

$('#mask').css({width: mask_width, height: height});

$('#wrapper').scrollTo($('a.selected').attr('href'), 0);

}

</script>

<style>

body {

height:100%;

width:100%;

margin:0;padding:0;

overflow:hidden;

}

#wrapper {

width:100%;

height:100%;

position:absolute;

top:0;left:0;

background-color:#ccc;

overflow:hidden;

}

#mask {

width:1000%;

height:100%;

background-color:#eee;

}

.item {

width:10%;

height:100%;

float:left;

}

.content {

width:400px;

height:300px;

top:20%;

margin:0 auto;

background-color:#aaa;

position:relative;

}

.clear {

clear:both;

}

</style>

</head>

<body>

</div>

<ul>

<li class="block_3"><a href="http://localhost/source/index.php" target="_blank" title="Forum">Forum</a></li>

<li id="logo" class="block_1"><a class="panel" href="#item1" title="ACE Lounge" style="color: rgb(249, 252, 251);">Lounge<br><p style="margin-top:-1px;">ACE</p></a></li>

<li class="block_4"><a class="panel" href="#item9" title="Upload/Download">Files</a></li>

</ul>

</div>

</a>

</a>

</a>

</a>

</a>

</a>

</a>

</svg>

</div>

<div class="text" style="opacity: 0;">Specializare: dezvoltare de software de baza si aplicativ, constructia calculatoarelor si tehnologii informatice pentru comunicatii de date.</div>

<div class="home_title" style="text-decoration: none;"><span class="color">Calculatoare</span><br>Engleza</div>

</div>

<div class="text1" style="opacity: 0;">Specializare: dezvoltare de software de baza si aplicativ, constructia calculatoarelor si tehnologii informatice pentru comunicatii de date.</div>

<div class="home_title" style="text-decoration: none;"><span class="color">Calculatoare</span><br>Romana</div>

</div>

<div class="text2" style="opacity: 0;">Specializare: robotica industriala si neindustriala, automate bancare, industria mijloacelor de transport terestre, navale si aeriene, aparatura electrocasnica, medicala.</div>

<div class="home_title" style="text-decoration: none;"><span class="color">Mecatronica</span></div>

</div>

<div class="text3" style="opacity: 0;">Specializare: utilizarea limbajelor de programare, prelucrarea sunetelor si imaginilor, utilizarea echipamentelor de studio, dezvoltare de aplicatii.</div>

<div class="home_title" style="text-decoration: none;"><span class="color">Ingineria Sistemelor</span><br>Multimedia</div>

</div>

<div class="text4" style="opacity: 0;">Specializare: robotica industriala si neindustriala, automate bancare, industria mijloacelor de transport terestre, navale si aeriene, aparatura electrocasnica, medicala.</div>

<div class="home_title" style="text-decoration: none;"><span class="color">Robotica</span></div>

</div>

<div class="text5" style="opacity: 0;">Specializare: automotive, electronica, electro si termoenergetica, robotica,mecanica, fabricatie flexibila, actionari electrice.</div>

<div class="home_title" style="text-decoration: none;"><span class="color">Automatica si Informatica</span><br>Aplicata</div>

</div>

<div class="text6" style="opacity: 0;">Specializare: aplicatii industriale/medicale, calculatoare si comunicatii, transmisii date, televiziune/internet/telefonie, aplicatii multimedia, automotive.</div>

<div class="home_title" style="text-decoration: none;"><span class="color">Electronica</span><br>Aplicata</div>

</div>

<h5>Calculatoare Engleza</h5>

<p>Specializarea Calculatoare asigură pregătirea în domeniul utilizării şi construcţiei calculatoarelor prin următoarele forme de învăţământ: Secţia de Calculatoare (ingineri, cu predare în limba engleză). Direcţiile de specializare la învăţământul universitar ingineri sunt: dezvoltare de software de bază şi aplicativ, construcţia calculatoarelor şi tehnologii informatice pentru comunicaţii de date.</p>

</div>

<p style="font-size: 30px; text-decoration: underline; margin-left: 40px;">Semestrul I</p>

<p style="margin-top: 35px;font-size: 15px; color:white;">Logical design</p>

<p style="margin-top: 70px;font-size: 15px; color:white;">Linear algebra, analytical and differential geometry</p>

<p style="margin-top: 105px;font-size: 15px; color:white;">Physics</p>

<p style="margin-top: 140px;font-size: 15px; color:white;">Mathematical analysis</p>

<p style="margin-top: 175px;font-size: 15px; color:white;">Computer programming </p>

<p style="font-size: 30px; text-decoration: underline; margin-left: 540px;">Semestrul II</p>

<p style="margin-top: 35px;font-size: 15px; margin-left: 500px; color:white;">Logical Design II</p>

<p style="margin-top: 70px;font-size: 15px; margin-left: 500px; color:white;">Electrotechnics</p>

<p style="margin-top: 105px;font-size: 15px; margin-left: 500px; color:white;">Physics II</p>

<p style="margin-top: 140px;font-size: 15px; margin-left: 500px; color:white;">Principles of Accounting and General Economics</p>

<p style="margin-top: 175px;font-size: 15px; margin-left: 500px; color:white;">Computer Programming – Programming Techniques</p>

</div>

<p style="font-size: 30px; text-decoration: underline; margin-left: 40px;">Semestrul I</p>

<p style="margin-top: 35px;font-size: 15px; color:white;">Data Structures and Algorithms</p>

<p style="margin-top: 70px;font-size: 15px; color:white;">Object Oriented Programming</p>

<p style="margin-top: 105px;font-size: 15px; color:white;">Systems Theory </p>

<p style="margin-top: 140px;font-size: 15px; color:white;">Computers architecture </p>

<p style="margin-top: 175px;font-size: 15px; color:white;">Project Management </p>

<p style="font-size: 30px; text-decoration: underline; margin-left: 540px;">Semestrul II</p>

<p style="margin-top: 35px;font-size: 15px; margin-left: 500px; color:white;">Artificial Intelligence </p>

<p style="margin-top: 70px;font-size: 15px; margin-left: 500px; color:white;">Algorithm Complexity Analysis</p>

<p style="margin-top: 105px;font-size: 15px; margin-left: 500px; color:white;">Measurements Techniques</p>

<p style="margin-top: 140px;font-size: 15px; margin-left: 500px; color:white;">Assembly Language Programming</p>

<p style="margin-top: 175px;font-size: 15px; margin-left: 500px; color:white;">Accounting</p>

</div>

<p style="font-size: 30px; text-decoration: underline; margin-left: 40px;">Semestrul I</p>

<p style="margin-top: 35px;font-size: 15px; color:white;">Digital Integrated Circuits </p>

<p style="margin-top: 70px;font-size: 15px; color:white;">Operating Systems </p>

<p style="margin-top: 105px;font-size: 15px; color:white;">Visual programming environments </p>

<p style="margin-top: 140px;font-size: 15px; color:white;">Computer Structure and Organization </p>

<p style="margin-top: 175px;font-size: 15px; color:white;">Databases </p>

<p style="font-size: 30px; text-decoration: underline; margin-left: 540px;">Semestrul II</p>

<p style="margin-top: 35px;font-size: 15px; margin-left: 500px; color:white;">Database Design </p>

<p style="margin-top: 70px;font-size: 15px; margin-left: 500px; color:white;">Microprocessors System Design</p>

<p style="margin-top: 105px;font-size: 15px; margin-left: 500px; color:white;">Software Engineering </p>

<p style="margin-top: 140px;font-size: 15px; margin-left: 500px; color:white;">Distributed Network Application Development</p>

<p style="margin-top: 175px;font-size: 15px; margin-left: 500px; color:white;">Computer Systems Modeling</p>

</div>

<p style="font-size: 30px; text-decoration: underline; margin-left: 40px;">Semestrul I</p>

<p style="margin-top: 35px;font-size: 15px; color:white;">Real Time Computing Systems</p>

<p style="margin-top: 70px;font-size: 15px; color:white;">Computer Networks</p>

<p style="margin-top: 105px;font-size: 15px; color:white;">Web Applications’ Design </p>

<p style="margin-top: 140px;font-size: 15px; color:white;">Models and Algorithms for Parallel Computing </p>

<p style="margin-top: 175px;font-size: 15px; color:white;">E-Commerce </p>

<p style="font-size: 30px; text-decoration: underline; margin-left: 540px;">Semestrul II</p>

<p style="margin-top: 35px;font-size: 15px; margin-left: 500px; color:white;">Algorithms for Information Retrieval</p>

<p style="margin-top: 70px;font-size: 15px; margin-left: 500px; color:white;">Information Systems Management</p>

<p style="margin-top: 105px;font-size: 15px; margin-left: 500px; color:white;">Embedded Systems</p>

<p style="margin-top: 140px;font-size: 15px; margin-left: 500px; color:white;">DSP in communication</p>

<p style="margin-top: 175px;font-size: 15px; margin-left: 500px; color:white;">High Speed Networks</p>

</div>

</nav>

</div>

<?php include ('index.php'); ?>

</div>

</div>

$(function() {

$('#da-slider,#da-slider1,#da-slider2,#da-slider3,#da-slider4,#da-slider5,#da-slider6').cslider({

bgincrement : 0

});

</script>

$(".path1").mouseenter(function() {

$(".why_hover_1 .left_side").css("opacity", "0.9").css("width", "90px");

$(".why_hover_1 .right_side").css("opacity", "0.9").css("width", "90px");

$(".why_hover_1 .text").css("opacity", "1");

$(".why_hover_1 .home_title").css("text-decoration", "underline");

}).mouseleave(function() {

$(".why_hover_1 .left_side").css("opacity", "0").css("width", "0px");

$(".why_hover_1 .right_side").css("opacity", "0").css("width", "0px");

$(".why_hover_1 .text").css("opacity", "0");

$(".why_hover_1 .home_title").css("text-decoration", "none");

});

</script>

$("#simple3D").simple3D({

moveX:2, // 1 – 5

moveY:2, // 1 – 5

bgImage:true, // use background image mode

targetAll:true,

reverseX: false,

reverseY: false

});

</script>

</body>

</html>

Cod Forum

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>ACE Forum</title>

</head>

<body>

</br>

<a style="margin-left: 250px; text-decoration: none; color:white;" class="button" href="http://localhost/Sectii/Test.php"target="_blank">Sectii <img alt="image" src="Design/forum.png" width="20" height="20"></a>

<a class="item" href="/source/index.php">Home</a> –

<a class="item" href="/source/create_cat.php">Create a category</a>

<?php

if(isset($_SESSION['signed_in']) && $_SESSION['signed_in'] == true)

{

echo 'Hello <b>' . htmlentities($_SESSION['user_name']) . '</b>. Not you? <a class="item" href="signout.php">Sign out</a>';

}

else

{

echo '<a class="item" href="signin.php">Sign in</a> or <a class="item" href="signup.php">create an account</a>';

}

?>

</div>

</div><!– content –>

</div><!– wrapper –>

<div id="footer">Created by ISM 2015</div>

</body>

</html>

Copyright Notice

© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.

Acest articol: Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică [302023] (ID: 302023)

Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică [302023]

Copyright Notice

CREȘTEREA ȘI DEZVOLTAREA NORMALĂ ȘI PATOLOGIC Ă [609593]

Master: Consiliere în asistență socială, anul II [614279]

SPECIALIZAREA FRANCEZĂ -CHINEZĂ LUCRARE DE LICENȚĂ Coordonator științific: Prof. univ. dr. RUXANDRA CESEREANU Absolvent: MĂRIOARA VANCEA Cluj-Napoca… [602990]

Școala Națională de Studii Politice și Administrative [621339]

EFECTELE BREXIT ASUPRA ECONOMIEI ROMÂNEȘTI. PROVOCĂRI ȘI [608837]

Archivetempcursul Nr.7 2017 [628143]

Copyright Notice

Similar Posts