Dariusmihaiceausesculicentafinal [310906]

Licență

Dariusmihaiceausesculicentafinal [310906]

Byadmin ianuarie 1, 2024

PROIECT DE DIPLOMĂ

Darius Mihai Ceaușescu

COORDONATOR ȘTIINȚIFIC

Conf. Dr. Ing. Daniela Danciu

Iulie, 2017

CRAIOVA

PLATFORMĂ DINAMICĂ ONLINE PENTRU PROMOVAREA CAMPUSURILOR UNIVERSITARE ȘI FACILITAREA SCHIMBURILOR DE STUDENȚI

Darius Mihai Ceaușescu

COORDONATOR ȘTIINȚIFIC

Conf. Dr. Ing. Daniela Danciu

Iulie, 2017

CRAIOVA

„Învățătura este o comoară care își urmează stăpânul pretutindeni.”

Proverb popular

DECLARAȚIE DE ORIGINALITATE

Subsemnatul DARIUS MIHAI CEAUȘESCU student: [anonimizat], Calculatoare și Electronică a [anonimizat], [anonimizat]:

[anonimizat]. [anonimizat], 2017.

[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],

PROIECTUL DE DIPLOMĂ

REFERATUL CONDUCĂTORULUI ȘTIINȚIFIC

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

[anonimizat]:

Data, [anonimizat], [anonimizat] – Student: [anonimizat], cu predilecție facultațile partenere corespunzătoare universităților de proveniență ale studenților.

Documentația proiectului de licență este structurată în următoarele capitole:

Capitolul I, Introducere, prezintă scopul si motivația in realizarea lucrării;

[anonimizat], conține noțiuni generale ale tehnologiilor folosite in realizarea platformei;

[anonimizat], unde este prezentată implementarea detaliată a tehnologiilor folosite;

[anonimizat]rală a platformei, în aceasta parte este prezentată platforma prin capturi de ecran alături de comentarii asupra fiecăreia;

Capitolul V, Concluzii;

Capitolul VI , Bibliografie.

Termenii cheie: Baza de date SQL, HTML, PHP, JAVASCRIPT, CSS, PHOTOSHOP, PLATFORMA DINAMICĂ

MULȚUMIRI

Mulțumiri tuturor profesorilor care, în cei patru ani petrecuți la Facultatea de Automatică și Calculatoare, ne-au ghidat spre o dezvoltare personală și profesională.

Mulțumiri doamnei Conf. Dr. Ing Daniela Danciu pentru toate sfaturile utile pe care le-a furnizat în legătură cu realizarea lucrării de licență și a informațiilor date de-a lungul semestrelor petrecute împreună.

Mulțumiri și colegilor, au fost 4 ani fantastici.

Și nu în ultimul rând, țin să mulțumesc domnului Șef de lucrări Dr. Ing Marius Marian, domnului Cosmin Spahiu, domnului Prof. univ. dr. ing. Dorian Cojocaru și celor care fac parte din personalul administrativ care au facut posibilă plecarea mea timp de un semestru prin programul de schimb Erasmus în Madrid – Universidad Autonoma de Madrid. A fost o experiență minunată care a oferit o mulțime de beneficii.

CUPRINSUL

LISTA FIGURILOR

Figure 1 – Sigla MySQL 2

Figure 2 – Exemplu tabela 3

Figure 3 – Sigla PHP 4

Figure 4 – Sigla HTML 6

Figure 5 – Sigla CSS 7

Figure 6 – Sigla JavaScript 9

Figure 7 – Sigla PhotoShop 10

Figure 8 – Interfata PhotoShop 11

Figure 9 – Instrumentul de selectare si mutare 12

Figure 10 – Bagheta magică 12

Figure 11 – Instrumentul de decupaj 12

Figure 12 – XAMPP 13

Figure 13 – Interfață XAMPP 14

Figure 14 – Adresa de conectare la platformă 14

Figure 15 – Interfață phpMyAdmin 15

Figure 16 – Crearea bazei de date 15

Figure 17 – Structura bazei de date maindb 16

Figure 18 – Crearea unui tabel 16

Figure 19 – tabelul adminusers 17

Figure 20 – Structura unui administrator 17

Figure 21 – Structură tabel comentarii 18

Figure 22 – Tabel comentarii 18

Figure 23 – Tabel formular de contact 19

Figure 24 – Tabel date de contact 19

Figure 25 – Tabel structură ziar 19

Figure 26 – Tabel abonați 20

Figure 27 – Permiterea aplicației de catre Gmail 20

Figure 28 – Introducere e-mail pentru abonare 24

Figure 29 – Comutarea in urma apăsării butonului de meniu 34

Figure 30 – Cele 2 coloane în care sunt afișate universitățile 36

Figure 31 – Adaptarea pe diferite dispozitive 39

Figure 32 – Buton accesare meniu 42

Figure 33 – Afișarea meniului în urma apăsării butonului 42

Figure 34 – SIGLA PLATFORMEI 45

Figure 35 – Interfață PhotoShop 45

Figure 36 – Editarea siglei 46

Figure 37 – Schema platformei 47

Figure 38 – Pagina de primire 48

Figure 39 – Introducerea adresei de e-mail pentru abonare 48

Figure 40 – Testare scalare 49

Figure 41 – Lista cu universitățile 50

Figure 42 – Subsolul paginii 50

Figure 43 – Meniul platformei 51

Figure 44 – Pagina "Despre Noi" 52

Figure 45 – Logare administrator 53

Figure 46 – Înregistrare administrator 54

Figure 47 – Eroare coincidere parole 54

Figure 48 – Formular trimitere notificări 55

Figure 49 – Confirmarea notificărilor primite 55

Figure 50 – Structură detalii universități 56

Figure 51 – Formular adăugare comentarii 57

Figure 52 – Pagina dedicată orașului Craiova 58

Figure 53 – Modalități transport Craiova 59

Figure 54 – Harta Craiovei 59

Figure 55 – Formular contactare administrator 60

CAPITOLUL I

Introducere

Scopul

Se realizează această lucrare (Student Exchange Program – Program de schimb pentru studenți) pentru a facilita și a încuraja schimbul de experiențe în rândul studenților diferitelor universități. Atunci când te angajezi într-un astfel de schimb de experiență întâmpini mici obstacole care, fără puțin ajutor, sunt destul de dificil de depășit. Prin această platformă dinamică se dorește reducerea unor astfel de obstacole, astfel încât studentul să beneficieze de o experiență cât mai plăcută încă de la început. Sunt oferite detalii despre universitățile disponibile din Craiova care sunt în parteneriat cu universități din afara țării. Site-ul este relatat atât în limba engleză, limbă de circulație internațională, cât și în limba română și este structurat în așa fel încât să fie interactiv și ușor de utilizat.

Motivația

Ideea de la care a plecat alegerea acestei teme a fost aceea de a crea un mediu cât mai plăcut studenților care vin în oraș, astfel încât aceștia să beneficieze de o experiență cât mai plăcută și să obțină toate detaliile de care au nevoie înainte de a se angaja într-un schimb de experiențe.

Se dorește sublinierea faptului că un student străin nu trebuie să se simtă singur atunci când ajunge la universitatea la care a a aplicat. Printr-o platformă bine structurată și ușor de navigat prin ea, acesta, la o distanță de câteva click-uri poate să obțină informații care îi sunt de folos. Aceștia pot lua și legătura cu persoanele aflate în măsură să dea informații prin completarea unui câmp cu adresa de e-mail . Aceștia, prin sectiunea de comentarii, pot lua legătura și cu ceilalți studenți, astfel realizându-se un grup.

Important este ca studenții, la finalul perioadei de schimb, să rămână cu o părere foarte bună despre universități, oameni și oraș, astfel încât să încurajeze și alți studenți ca să aplice.

CAPITOLUL II

TEHNOLOGII UTILIZATE IN REALIZAREA PLATFORMei

Baza de date MySQL

Figure 1 – Sigla MySQL

Noțiuni Generale

MySQL este cea mai populară baza de date și este accesibilă tuturor. Fie că ești o companie web în rapidă dezvoltare, fie că ești un simplu antreprenor, MySQL îți furnizează aplicații cu baze de date de înaltă performanță.

Denumirea își are bază de la numele fiicei cofondatorului Michael Widenius „My” și abrevierea „SQL” care provine de la „Structured Query Language” și este o platformă scrisă în C și C++.

Majoritatea dintre cele mai mari și în continuă ascensiune companii de platforme online, se bazează pe MySQL pentru a salva timp și bani pentru încărcarea datelor. [MySQL1]

Structura unei baze de date

În continuare, este explicat modul cum funcționează o bază de date:

O bază de date poate conține unul sau mai multe tabele, fiecare tabel conținând informații stocate sub formă de coloane. De exemplu, următorul tabel este format din trei coloane :

„ id-ul” care se auto-incrementează pentru crearea unei liste

nume – care stochează numele introdus

an – stochează anul

Fiecărui id îi corespund numele și anul de pe aceeași linie.

Figure 2 – Exemplu tabela

Instruncțiunile folosite în MySQL sunt de tip Query. Pentru a face modificări într-o bază de date, se folosesc mai multe interogări de tip Query.

Pentru crearea tabelului de mai sus se folosește comanda CREATE, folosind următorul set de instructiuni:

CREATE TABLE tabel (

id int,

prenume varchar(25)

anNastere int );

S-a creat tabelul „tabel” cu următoarele caracteristici: s-a definit id-ul de tip „int” integer, prenumele de tip varchar (25) care reprezintă numărul maxim de litere pe care îl poate conține prenumele introdus și anNastere de același tip integer.

Cea mai utilizată interogare este interogarea SELECT. Folosind tabelul de mai sus se va exemplifica această interogare:

SELECT prenume FROM tabel WHERE id = 1 – S-a selectat numele corespunzător celei de-a două coloane(prenume) unde id-ul este 1. Afișarea va fi: Alex.

Un alt tip de interogare este DELETE

DELETE FROM table WHERE prenume=”Alex” – S-a șters din tabel numele selectat și anume „Alex”

Următorul tip de interogare este UPDATE

UPDATE table SET id =”5”

WHERE id=”2”

S-a actualizat tabelul prin modificarea valorii existente cu valoarea introdusă prin comanda ”SET”.

Avantajele unei baze de date MYSQL

Cel mai mare avantaj al utilizării unei astfel de baze de date, este acela că este accesibilă tuturor celor care vor să o folosească. Poate fi descărcată și utilizată gratis. Este o bază de date care este compatibilă cu orice sistem de operare, având o interfață foarte ușor de utilizat.

Descrierea limbajului PHP

Figure 3 – Sigla PHP

Noțiuni Generale

PHP, este un limbaj de programare accesibil tuturor, folosit pentru dezvoltarea web la nivel dinamic și care poate fi încorporat într-un alt limbaj de programare și anume, HTML. Versiunile de PHP sunt disponibile pentru toate sistemele de operare. Acronimul PHP provine de la Php: Hypertext Preprocessor. [PHP1]

Fișierele PHP pot să conțină HTML, JavaScript, CSS, cod PHP sau chiar text și au extensia.php. Scripturile PHP sunt executate pe un server, apoi rezultatele sunt direcționate către browser prin HTML.

Structura unui cod PHP

<!DOCTYPE HTML>

<html>

<head>

<title>Exemplu de structură</title>

</head>

<body>

<?php

echo "Salut, eu sunt un script PHP";

?>

</body>

</html>

Conform spuselor, codul PHP este încorporat în HTML prin formatul specific. Pentru crearea unui script PHP trebuie la început, să fie deschis prin ”<?php” urmând codul, în cazul nostru echo ”Salut, eu sunt un script PHP”; apoi este închis prin ”?>”. Comanda ”echo” este folosită atunci când vrem să afișăm ceva și apoi este închisă prin ”;”.

Variabilele sunt definite prin utilizarea semnului „$”, iar comentariile se definesc prin /* Comentariu */.

Avantajele limbajului PHP

Principalul avantaj al limbajului PHP, este acela de a fi un limbaj dinamic, fiind compatibil cu bazele de date. Cu ajutorul acestuia se poate crea, de exemplu, un formular de autentificare care preia datele introduse într-o bază de date. Limbajul este structurat în așa fel încât să fie foarte ușor de înțeles de către cineva care vrea să se familiarizeze cu el și oferă foarte multe avantaje pentru un programator profesionist.

Descrierea limbajului HTML

Figure 4 – Sigla HTML

Noțiuni Generale

HTML reprezintă limbajul standard atât pentru dezvoltarea păginilor web cât și pentru dezvoltarea aplicaților online. Acronimul HTML provine de la Hypertext Markup Language. Acesta este un limbaj de marcare pe care motoarele de căutare îl folosesc pentru a afișa conținut sub diferite forme: imagini, text sau orice alt conținut multimedia. Fiecare caracteristică a unui element HTML este afișată într-un browser, iar aceste caracteristici pot fi influențate în mod plăcut cu ajutorul CSS-ului.

Limbajul de programare este caracterizat prin utilizarea blocurilor. Aceste blocuri sunt indicate prin utilizarea parantezelor unghiulare, cum ar fi: “< >”.

“WWW” reprezintă totalitatea site-urilor care pot fi accesate prin rețeaua mondială de internet și are la baza fișiere HTML. [HTML1]

Structura unui cod HTML

<!DOCTYPE html>

<html>

<head>

<title>Titlu</title>

</head>

<body>

<p>Salut, eu sunt un paragraf</p>

<br/>

</body>

</html>

Declarația de început <!DOCTYPE html> este pentru HTML 5 și este utilizată pentru a clarifica, de la început ce fel de document va urma să creăm, și anume un fișier HTML.

Textul dintre <html> și </html> descrie toată pagină web. Ceea ce vedem în secțiunea <body> reprezintă conținutul vizibil al paginii. Conținutului secțiunii <title> reprezintă titlul care apare în fereastra de sus, iar <br> reprezintă o linie goală, folosită în general pentru a delimita 2 texte.

Comentariile se definesc prin <!—Comentariu –>. Fișierul de mai sus, poate fi scris într-un editor și apoi salvat cu extensia html, urmează apoi a fi deschis de un motor de căutare și se obține astfel o pagină web.

Avantajele limbajului HTML

HTML poate încorpora fișiere tip javascript, php sau css pentru îmbunătățirea performanței și a aspectului paginii web.

Principalele avantaje ale utilizării HTML sunt că acesta este un limbaj foarte popular și ușor de înțeles și folosit, fiind suportat de fiecare motor de căutare.

Descrierea limbajului CSS

Figure 5 – Sigla CSS

Noțiuni Generale

CSS-ul reprezintă un limbaj de programare folosind foi de stil în cascadă utilizate pentru descrierea prezentării unui document scris într-un limbaj de marcare. Acronimul CSS provine de la Cascading Style Sheets(foi de stil în cascadă), este folosit împreună cu HTML sau JavaScript de către toate platformele pentru crearea unui aspect sau a unei interfețe cât mai plăcute. [CSS1]

Structura unui cod CSS

Avem o simplă parte dintr-un cod html, care afișează un paragraf.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p id="paragraf1">Cod modificat cu ajutorul CSS-ului.</p>

<p>Cod nemodificat.</p>

</body>

</html>

Acum se va crea fișierul css denumit “stil.css” care este apelat de către fișierul HTML prin sintaxa de mai sus.

#paragraf1 {

text-align: center;

color: red;

background-color: blue;

}

S-a creat un id definit prin simbolul “#”. Această modalitate ne permite să modificăm paragraful din fișierul HTML, redenumit “paragraf1” cum dorim noi. În exemplul de față, este poziționat pe centru, are o culoare de roșu pe un fundal de culoare albastră. De precizat că paragraful nedenumit “paragraf1” nu va beneficia de nicio modificare din partea CSS-ului.

Avantajele limbajului CSS

HTML-ul este folosit pentru a structura conținutul, în schimb ce CSS-ul este utilizat pentru formatarea conținutului structurat.

Avantajul CSS-ului este acela că poate fi accesat dintr-un alt fișier, printr-o legătură specificata în fișierul HTML <link rel="stylesheet" type="text/css" href="stil.css"> acest lucru ducând la gestionarea codului cu mai multă ușurință.

CSS-ul a fost inventat pentru a simplifica un cod HTML, reducând posibilitățile că programatorul să uite să folosească etichete precum <font>, <table> și a păstra un cod cât mai clar, putând controla tot aspectul dintr-un fișier separat.

Descrierea limbajului JavaScript

Figure 6 – Sigla JavaScript

Noțiuni Generale

JavaScript, uneori abreviata JS este un limbaj asemănător cu C, chiar dacă denumirea duce cu gândul la Java, între cele două limbaje nu este nicio legătură. Este un limbaj de programare ușor, orientat pe obiecte, cu funcții de primă clasă și cel mai mult, este cunoscut ca fiind un limbaj cu multe funcționalități dinamice pentru paginile online. [javascript1]

JavaScript rulează pe partea pe care clientul o vede la o pagină web și care poate fi folosită pentru a proiecta sau programa pagina astfel încât atunci când clientul interacționează cu ea să beneficieze de diverse funcționalități.

Structura unui cod Javascript

var iepure= {colour: "white", name: "Bugs", size: 35};

iepure.size = 47;

show(cat.size);

delete iepure.size;

show(iepure.size);

show(iepure);

Ca și variabilele, fiecare proprietate atașată unui obiect este etichetată de un șir. Prima declarație creează un obiect în care proprietatea "color" deține șirul "white", proprietatea "name" este atașată la șirul "Bugs", iar proprietatea "size" se referă la numărul 35. A doua afirmație dă proprietății name o nouă valoare, care se face în același mod ca și modificarea unei variabile.

Cuvântul cheie delete sterge proprietățile. Încercarea de a citi o proprietate inexistentă dă o valoare nedefinită. Dacă o proprietate care nu există încă este setată cu operatorul =, ea este adăugată la obiect.

Avantajele limbajului Javascript

Sunt foarte multe motive pentru a folosi JavaScript în tehnologiile web, fiind un limbaj de programare foarte interactiv cu utilizatorul. Comanda introdusă de către utilizator este procesată și afișata acestuia sub formă de mesaj.

JavaSCript este un limbaj de programare care nu necesită compilare. Motorul de căutare interpretează JavaScript prin etichetele HTML. Fiind un program ușor de învățat, este foarte ușor de dezvoltat aplicații dinamice și pagini atractive. Este princiapala modalitate de a crea butoane care îndeplinesc diferite funcționalități.

Descrierea programului Adobe PhotoShop

Figure 7 – Sigla PhotoShop

Adobe PhotoShop

Adobe PhotoShop este cel mai popular program pentru crarea și modificarea imaginilor pentru mediul online.

Acest lucru este valabil nu numai pentru că Photoshop este disponibil pe o gamă largă de platforme dar și pentru că, după multe actualizări, Adobe Photoshop are cea mai interactivă interfață pentru utilizator. Este atât de utilizat încât, denumirea a devenit un verb "să îți photoshopezi pozele". Acest lucru li se datorează fraților Thomas și John Knoll care în anul 1988 au pus bazele realizării acestui program. [PHTSHP]

Denumirea versiunilor de PhotoShop, a fost inițial bazată pe numărul acestora. Însă, în anul 2002, datorită introducerii mărcii "Creative Suite", fiecare versiune a fost denumită cu "CS" alături de un număr, de exemplu PhotoShop CS2.

Familiarizarea cu interfața PhotoShop

Figure 8 – Interfata PhotoShop

Deasupra, se observă o serie de butoane, care arată familiar. Butonul File reprezintă unul dintre butoanele cele mai importante. Cu ajutorul acestuia se pot adăuga fotografii pentru editare, se poate salva proiectul după ce este modificat, acesta putând fi salvat sub 2 forme, în format de imagine sau în format cu extensia .ps, un fișier care poate fi ulterior modificat. Secțiunea Edit prezintă proprietăți pentru modificarea elementelor introduse.

Bară de instrumente de pe partea stângă, este alcătuită din mai multe butoane, fiecare cu funcționalitatea sa, însă cele mai importante le reprezintă:

Instrumentul de mutare

Figure 9 – Instrumentul de selectare si mutare

Acesta este utilizat pentru a muta dintr-o parte în alta a ecranului, o porțiune selectată dintr-o imagine, sau chiar toata imaginea.

Bagheta magică

Figure 10 – Bagheta magică

Este utilizată pentru a selecta culoarea dintr-o anumită imagine. Culoarea este deschisă în paleta de culori, de unde se poate lua, de exemplu, codul corespunzător culorii și apoi poate fi utilizat în alte zone ale imaginei.

Intrumentul de decupare

Figure 11 – Instrumentul de decupaj

Acest instrument este utilizat pentru a selecta într-un chenar, o anumită porțiune dintr-o imagine, pentru a fi decupată. Conținutul care rămâne în afara chenarului nu mai este vizibil, însă se poate reveni la forma inițială prin comanda “Undo”.

CAPITOLUL III

IMPLEMENTAREA TEHNOLOGIILOR IN CADRUL PLATFORMEI “EXCHANGE PROGRAM”

Baza de date MySQL

Cea mai importantă parte a realizării acestei platforme dinamice, de unde și numele, o reprezintă crearea bazei de date, fără de care nu se poate avea acces la partea de conținut dinamic a platformei. Pentru început, după cum s-a precizat, fiind o bază de date accesibilă tuturor, se poate descărca de pe portalul online al companiei https://www.apachefriends.org/download.html, urmând a se descărca programul XAMPP în funcție de sistemul de operare folosit.

Figure 12 – XAMPP

Scopul utilizării acestui program este acela de a genera o adresă de accesare în portalul de căutare fără a fi nevoie de un domeniu, fiind o alternativă a unui domeniu cumpărat. După instalarea programului se deschide următoarea interfață, de unde trebuie pornită baza de date MySQL.

Apoi, în motorul de căutare trebuie introdusă adresa URL corespunzătoare adresei din calculator unde este instalat programul si apoi fișierul cu platforma:

http://localhost:1234/Licenta1/index.php

Localhost reprezintă un domeniu local, urmat de un port IP;

Licenta1 este folderul în care se află platforma situată în fișierul htdocs al programului

Index.php reprezintă pagina de start care este accesată din motorul de căutare

Figure 13 – Adresa de conectare la platformă

Crearea bazei de date

Pentru crearea bazei de date se accesează adresa phpmyadmin în felul urmator: http://localhost:1234/phpmyadmin, urmând a fi deschisă interțata corespunzătoare realizării bazei de date.

Figure 14 – Interfață phpMyAdmin

Pentru a crea o bază de date nouă, se accesează din meniul aflat pe partea stânga, butonul “New”, urmând apoi a fi dat un nume bazei de date, după care se apasă butonul “Create”.

Figure 15 – Crearea bazei de date

Baza de date folosită pentru stocarea informației platformei se numește “maindb” și este structurată în felul următor.

Figure 16 – Structura bazei de date maindb

Ce se observă în partea stângă, sub denumirea bazei de date, reprezintă tabelele, denumite într-un anumit fel pentru a fi ușor de deosebit. Pentru crearea unui nou tabel, în interiorul bazei de date se apasă butonul “New” urmând a fi afișată următoarea interfață.

Figure 17 – Crearea unui tabel

În partea de sus, se introduce denumirea unui tabel pe care dorim să îl creăm, iar sistemul setează automat 4 coloane, având opțiunea de a adăuga, pe rând câte coloane dorim. Urmează să fie explicat tabelul adminusers pentru obținerea unei idei mai clare asupra acestui aspect.

Figure 18 – tabelul adminusers

Tabelul “adminusers” conține 4 coloane: “id”, “username”, “email” și “password”.

Pe prima poziție se află id-ul care este de tip integer și are o dimensiune maximă de 11 caractere. Cel mai important lucru la acest câmp este acela că id-ul trebuie auto-incrementat, bifând butonul A.I afișat în prima poză, astfel încât id-ului 1, să zicem, îi corespund numele, email-ul și parola de pe același rând.

Figure 19 – Structura unui administrator

Pe a doua poziție se află username-ul care este de tip varchar și poate avea o dimensiune de 100 de caractere, urmând email-ul și password-ul cu aceleași setări. Acest tabel se completează automat, atunci când admininistratorul, completând un formulat de pe portal, înregistrează un alt utilizator cu funcții de administrator, lucru care va fi detaliat în capitolul următor, “Prezentarea Platformei”.

Următorul tabel îl reprezintă “comentariiace” având 2 coloane: “Name” și “Comment”. Coloana name fiind restricționată la o limită de 20 caractere, iar cea de comentarii la o limită de 500 de caractere.

.

Figure 20 – Structură tabel comentarii

Atunci când un utilizator intră pe această pagină, după ce completează cele 2 câmpuri, trebuie să depășească și un mic rECAPTCHA test, în așa fel asigurându-ne de evitarea aglomerării bazei de date prin mesaje generate automat de către roboți.

În urma completării acestor câmpuri, va fi generat un tabel de forma:

Figure 21 – Tabel comentarii

Tabelul “contactmsg” este structurat sub forma a 5 coloane și anume: “id”, “name”, “city”, “email”, “message”. Id-ul este delimitat în 8 caractere de tip integer, având cheia primară bifată, pentru a se auto-incrementa. Name-ul, city-ul și email-ul fiind de tip varchar cu o limită de 50 de caractere, și nu în ultimul rând secțiunea de “message” având o limită de 255 de caractere. Fiecarui id, având o anumită valoare îi corespunde o valoare aflată pe același rând din cele 4 coloane rămase.

Figure 22 – Tabel formular de contact

În urma completării acestui tabel, utilizatorul este automat introdus în baza de date, unde urmează să fie preluat de către un administrator, unde acesta văzând detaliile poate lua legătura ușor cu utilizatorul pentru soluționarea problemei.

Figure 23 – Tabel date de contact

Următorul tabel îl reprezintă “newsletter” având un “id” de tip bigint cu o limită de 20 de caractere și un “email” de tip varchar cu o limită de 250 de caractere..

Figure 24 – Tabel structură ziar

Aceste câmpuri sunt completate de către utilizatorii care doresc să se aboneze la ziarul platformei pentru a primi notificări saptămânale în legătură cu diferite activități sau ultimele noutăți.

Toate adresele de e-mail adăugate sunt stocate în acest tabel, urmând apoi ca notificările să fie trimise de către administrator tuturor adreselor de e-mail simultan.

Figure 25 – Tabel abonați

Pentru a se putea trimite e-mail-uri de pe o adresă a unui administrator, acesta trebuie să intre în setările contului de Gmail și să activeze trecerea sigură a mesajelor.

Figure 26 – Permiterea aplicației de catre Gmail

Apelarea bazei de date din cod, pe fișiere

Următoarea etapă, după crearea bazei de date, o reprezintă accesarea acesteia. Fiecare tabel este apelat din fișiere separate, redenumite astfel încât să fie recunoscute mai ușor.

Legaturile pentru abonarea la ziar

Conectarea la baza de date se face printr-o structură foarte simplă, explicată mai jos.

Se dorește conectarea la baza de date, prin “mysql_connect” având detaliile introduse de creator cu:

localhost – reprezentând adresa locală, gazda

root – denumirea bazei de date

“” – reprezintă un spațiu gol deoarece nu s-a dorit sa aibă o parolă

Apoi, din interfața phpmyadmin se selectează baza de date dorită, si anume “maindb”.

În codul de mai jos este realizată conexiunea la baza de date, în momentul în care un utilizator vrea să se aboneze la ziar.

Dacă sunt îndeplinite condițiile necesare, prin interogarea mysql_query, se folosește comanda “INSERT INTO” pentru a introduce în tabela newsletter, valoarea e-mail-ului și anume adresa de e-mail furnizată de către utilizator.

Conexiuniile pentru trimiterea notificărilor de către administratori

Este nevoie de conectarea la baza de date”maindb” folosind fișierul connect.php, cum este exemplificat mai sus.

Se execută interogarea mysql_query prin care, folosind comanda SELECT * se selectează toate datele din tabelul “newsletter” unde sunt stocate adresele de e-mail ale utilizatorilor înregistrați.

Conexiunea folosită pentru înregistrarea unui nou administrator

Primul pas care trebuie să fie îndeplinit, îl reprezintă conectarea la baza de date.

Apoi, folosind comanda INSTERT INTO, se inserează în tabela “adminusers” valorile introduse de către cel care dorește să creeze un utilizator cu funcții de administrator. Aceste valori sunt luate din câmpurile tabelului adminusers și anume: “username”, “email”, “password”.

Conexiunea folosită pentru logarea ca administrator pentru a trimite notificări

Primul pas, de asemenea, conectarea la baza de date.

Apoi, folosind cea mai utilizată interogare, se dorește selectarea tuturor informațiilor din tabela “adminusers” prin “SELECT * FROM WHERE” unde username-ul și parola corespund valorilor introduse pentru crearea administratorului.

Legaturile folosite pentru postarea comentariilor

Pentru introducerea datelor se inserează prin comanda “INSERT INTO” a valorilor corespunzătoare numelui și mesajului celui care scrie comentariul din tabela comentariiace.

Pentru afișarea datelor se selectează toate datele din tabela comentariiace care cuprind numele celui care a postat mesajul și mesajul acestuia.

Conexiunea folosită pentru completarea campurilor de contact

În fișierul aferent acestui cod se afla comanda include("contactConnection.php"), care conține:

În urma conectării la baza de date prin comenziile utilizate mai sus , se trece la pasul următor.

Pentru adăugarea datelor în tabelul contactmsg se folosește interogarea INSERT INTO și se inserează în câmpurile create, valorile introduse de către utilizator(nume, oraș, email, mesaj).

IMPLEMENTAREA PHP-ului

După ce a fost creată baza de date, împreună cu toate tabelele, e timpul să fie inserata în cod cu ajutorul PHP-ului, deoarece este un limbaj de programare care face posibilă programarea dinamică.

Pe pagina de start este prezentă opțiunea de abonare la ziarul săptămânal, urmând ca în urma introducerii unei adrese de e-mail, utilizatorul să fie introdus într-o bază de date.

Figure 27 – Introducere e-mail pentru abonare

Acest lucru este posibil, utilizând următorul cod, aflat in fișierul “add.php”.

Un fișier php este ușor de recunoscut deoarece, are etichetele specifice acestuia <?php pentru deschidere și ?> pentru închidere. Acesta, pentru a fi funcțional este introdus într-un fișier HTML.

Pentru început, este realizat un formular, având o etichetă cu un text sugestiv, urmat de un spațiu unde se poate introduce adresa de e-mail. Cu ajutorul codului ce urmează, sunt folosite informațiile din baza de date. În urma conexiunii la baza de date, la apăsarea butonului dacă adresa de e-mail a fost introdusă corect, aceasta se introduce în baza de date. Dacă nu este corectă, sau nu a fost completat deloc spațiul alocat, se afișează un mesaj prin comanda “echo” specifică PHP-ului.

Fișierul contactConnection.php este următorul și rerezintă conexiunea la baza de date, cu ajutorul căreia utilizatorul folosește formularul de contact pentru a i se adresa administratorului.

Sunt definite adresa de găzduire, numele utilizatorului bazei de date, parola bazei de date și numele bazei de date, urmând ca apoi printr-o interogare să se facă conexiunea la aceasta. Dacă totul este în regulă, conexiunea a fost un succes, iar dacă nu, apare o eroare folosind comanda “echo” pentru afișare.

Fișierul contact.php conține următoarele secvențe de cod php:

În imaginea de mai sus este inclus fișierul care asigură conexiunea și anume”contactConnetion.php” și este declarată o variabilă $note care în momentul apăsării butonului de trimitere afisează un mesaj că formularul a fost completat cu succes.

În fișierul contact_ușer_process.php se introduc datele rezultate în urma completării formularului în tabela contactmsg. Sunt declarate variabilele, pe rând, “name”, “city”, “email”, “msg” urmând ca apoi datele furnizate în ele să coincidă cu cele din baza de date. Dacă totul a fost realizat cu succes, se închide conexiunea și se afișează un mesaj de confirmare, dacă nu s-a completat corect se afișează prin comanda “echo” un mesaj corespunzător.

În fișierul “drept.php”, precum și în fișierele corespunzătoare celorlalte universități, avem o porțiune de cod php care este folosită pentru postarea comentariilor de către studenți, în scopul lăsării unor păreri despre universitățile la care au fost, astfel încât ceilalți să își facă o idee. Aceste comentarii sunt finalizate prin completarea unui test “rECAPTCHA” pentru a se evita trimitea mesajelor de către roboți.

Este apelat fișierul recaptchalib.php, pentru utilizarea corectă a acestui test. În urma completării, dacă testul nu este valid, se primește o eroare și este sugetarata refacerea acestuia. Dacă testul s-a completat corect, se introduce în baza de data maindb, în tabelul comentariiDrept, numele celui care a scris comentariul și comentariul respectiv, urmând ca acesta să fie afișat în secțiunea de comentarii.În cazul unor alte tipuri de erori, se primește un mesaj privind conectarea nereușită la baza de date.

Mai departe este declarată o variabilă $connect, ce conține detaliile conectării la baza de date.

Dacă conectarea a fost înregistrată cu succes, se selectează baza de date “maindb”. Se realizează o interogare prin selectarea tuturor elementelor din tabela “comentariidrept” apoi, printr-o mică instrucțiune, cât timp variabilă creată $row se potrivește valorilor luate din tabel, să se afișeze informațiile despărțite prin comanda <br> care lasa un spațiu liber între numele utilizatorului și comentariul acestuia. Dacă apare o eroare, se execută funcția die pentru inchierea procesului.

Fișierul login.php conține următoarea structură de cod php care reprezintă în primul rând startul unei sesiuni, apoi conectarea la baza de date.

Sunt definite variabilele “username”, “password”, “sql” care selectează toate datele din tabela adminusers, le analizează, iar dacă sunt introduse corect ne redirecționează către pagina “newsletter.php” de unde administratorul trimite notificările săptămânale celor abonați la ziar.

În fișierul newsletter.php, partea în care este folosit codul php este folosită pentru crearea unui formular pe care administratorul trebuie să îl completeze pentru a trimite notificările.

Sunt declarate variabilele $webmaster, $subject, $message, urmând a fi completate cu informațiile corespunzătoare și anume: “webmaster-ul” este prestabilit ca fiind denumirea programului de schimb, urmat de adresa de e-mail de la care se trimite. Este solicitată conexiunea la baza de date prin fișierul connect.php și apoi este stabilită o interogare prin care se selectează toate informațiile introduse de către administrator în tabelul newsletter al bazei de date maindb. Procesul este confirmat sau infirmat prin afișarea a două mesaje în funcție dacă procedura s-a realizat cu succes sau nu.

Fișierul register.php conține cod php care reprezintă adăugarea de noi administratori care să se ocupe de gestionarea notificărilor trimise. Este creată o variabilă $db care face conexiunea la baza de date.

Atunci când este apăsat butonul de înregistrare și toate variabilele necesare declarate, se analizează dacă parolele corespund, iar parola este împărțită într-un cod pe 128 de biți pentru a nu se vedea. Dacă parolele corespund se face interogarea prin inserarea în tabela “adminusers” a numelui, adresei de e-mail și a parolei. După completarea câmpurilor, se face o redirecționare către pagina de start.

IMPLEMENTAREA HTML-ului si a CSS-ului

Atunci când se vrea realizarea unui fișier HTML acesta trebuie să înceapă cu următoarea sintaxa <!DOCTYPE html> pentru a “anunța” programul de editat ce fișier urmează să fie realizat.

În pagina de start “index.php”, secțiunea <head> o reprezintă denumirea platformei, care este vizibilă în filele din motorul de căutare. În cazul de față “Exchange Program”. Pe lângă titlu, în secțiunea <head> se introduc și legăturile cu fișierele externe, de exemplu fișierul foaie de stil în cascadă, care este folosit pentru stilizarea paginii. Pentru acest lucru trebuie indicat folderul în care se afla. O altă legătură o reprezintă o adresă care a fost folosită pentru obținerea butonului de Meniu. Ultima legătură este folosită pentru ca alături de titlu să fie și imagina sugestivă a programului de schimb.

În fișierul HTML sunt realizate diviziunile, uramnd că acestea să fie editate în fișierul CSS – foi de stil în cascadă. Atunci când o diviziune este de tip id în fișierul CSS, denumirea se realizează adăugând la începutul acesteia ‘#’. Când este vorba de clase se adăugă la început ‘.’.

Codul este structurat pe diviziuni, astfel încât să fie modificate doar părțile dorite. Diviziunea cu id-ul ‘sidenav’ o reprezintă valorile aduse conținutului meniului care este vizibil numai atunci când se apasa pe butonul de deschidere a acestuia. Diviziunea cu id-ul ‘sidenav-content-wrapper’ o reprezintă editarea textului astfel încât acesta ajunge la formele dorite.

Figure 28 – Comutarea in urma apăsării butonului de meniu

<h1> este acronimul de la ‘highlight’ având valoarea 1, cea mai mare, astfel încât cuvântul aflat între aceste parenteze are o dimensiune mai mare decât celelalte. Detaliile sunt definite prin apelarea id-ului la care se adăugă h1.

<a href=”index.php”>HOME</a> – Aceasta sintaxă, în momentul când apeși pe textul care se afla la mijloc, redirecționează utilizatorul către pagina indicată.

Eticheta <li> este folosită pentru definirea unei liste de elemente.

Antetul îl reprezintă partea pe care utilizatorul o vede pentru prima oară la o pagină, înainte de a derula pagina sau alte acțiuni. De aceea, reprezintă un capitol foarte important în estetica paginii.

Mai jos, este explicat cum funcționează acest antet în paralel cu fișierul css.

În prima poză avem codul html, diviziunile create, iar apoi acestea sunt influențate de comenzile băgate în fișierul css.

Antetul are o imagine de fundal, de dimensiuni foarte mari, sugestivă. Fiecare pagină are în antet o imagine reprezentativă. Prin comanda “width” este dată lățimea acesteia, fiind setată la dimensiunea maximă a ecranului. În caz că imaginea durează câteva milisecunde să se încarce, prin comanda background-color: silver; este introdusă în spatele acesteia o culoare de gri. Poziția este specificată de comanda background-position: center center, fiind situată în centrul perfect, urmând ca textul să fie aliniat și el în centru.

Elementele evidențiate prin eticheta h4, sunt modificate în fișierul css astfel: au o culoare albă, spațiul dintre litere fiind de 0.2em, dimensiunea scrisului este de 25 de pixeli, de asemenea aliniat în centru și multe alte modificări pentru a crea o estetică cât mai plăcută.

Reprezentarea celor 2 coloane cu facultățile partenere din Craiova, s-a realizat împărțind ecranul în 2 secțiuni egale(50%).

Figure 29 – Cele 2 coloane în care sunt afișate universitățile

Clasa “univ1 left” reprezintă coloana din stânga, în timp ce clasa “univ1 right” reprezintă coloana din dreapta. Fiecărei clase îi sunt atribuite diverse specificații: prin comanda “float” este specificată poziția coloanei respective, în cazul de față, stânga pt prima coloană și dreapta pentru cea de-a doua.

Prin id-ul univ1Ace se selectează imaginea reprezentativă a primul bloc, și anume o poză cu Facultatea de Automatică, Calculatoare și Electronică. Este setată în mijlocul absolut al blocului respectiv și afișată o singură dată.

Univ1AceContent reprezintă tot conținutul blocului. Aici, prin eticheta “a href” se face redirecționarea către pagina facultății, apăsându-se pe titlul acesteia aflat între cele 2 etichete. Textul este personalizat, declarându-se în css prin folosirea clasei univ1 urmată de eticheta “a”, așa cum este precizat în pozele de mai sus.

Imaginea cu dungă albă, ce separa denumirile în cele 2 limbi ale facultății este personalizată prin adăugarea etichetei “img” în continuarea clasei univ1.

Adaptarea platformei pentru orice dispozitiv se realizează prin următoarea structura de cod:

Prin comanda “display: block”, blocurile sunt așezate unul sub celălalt, atunci când rezoluția ecranului scade sub 650 de pixeli, creându-se astfel un aspect plăcut. Textul din interiorul blocului este centrat în mijloc, la o distanță de 30 de pixeli de marginea stângă și cea dreaptă.

Figure 30 – Adaptarea pe diferite dispozitive

Subsolul paginii este impartit in 2 sectiuni, una care specifica paginile prezente si in meniul de tip comutare, pentru a putea fi accesat din partea de jos a ecranului. Cea de-a doua sectiune este delimitata prin eticheta <hr> care creeaza o linie de-a lungul latimii ecranului, iar acolo sunt prezente depturile de autor impreuna cu 3 pagini de retele de socializare.

Prima secțiune este divizată în două coloane, care ocupa 50% din lățimea ecranului, poziționarea primului în stânga, al doilea urmând să se alinieze automat, lângă el. Prin proprietatea “hover”, atunci când cursorul este îndreptat către text, acesta își schimbă culoarea în negru, urmând apoi a reveni la culoarea inițială.

Fiind un conținut, compatibil pe mai multe dispozitive și subsolul trebuie structurat corespunzător, aplicând aceeași structură. Când dispozitivul are dimensiunea mai mică de 650 pixeli, acesta se micșorează automat.

Prin tag-ul “a” se specifică textul care atunci când este apăsat, redirecționează utilizatorul prin tag-ul <a href=” ”> către paginile indicate între cele 2 ghilimele.

Cea de-a doua secțiune, unde sunt prezentate drepturile de autor, centrate pe mijloc și butoanele pentru rețele de socializare, a fost realizată în felul următor:

Id-ul “copy-footer” cuprinde proprietăți astfel încât, textul să fie centralizat, imaginile care reprezintă adresele sociale au grosimea de 30 de pixeli și înălțimea de 25 de pixeli.

Implementarea Java Script și Jquery

Secvențele de cod javascript, sunt utilizate atunci când se dorește realizarea unei acțiuni asupra, de exemplu, a unui buton.

Figure 31 – Buton accesare meniu

Butonul de meniu este definit prin următoarea secvență de cod. “javascript:void(0)” ne permite ca accesând acel buton, acesta să facă ceva. Folosind javascript, este defenit id-ul slide-toggle.

Fișierul functions.js conține codul care permite, în momentul apăsării pe buton să se deschidă meniul.

Figure 32 – Afișarea meniului în urma apăsării butonului

În momentul apăsării, se deschide meniul aflat în partea dreaptă, iar antentul și corpul platformei sunt deplasate în partea stângă cu 330 de pixeli, folosind metoda toggleClass. În fișierul CSS, este prezentă clasă .toggled adăugată antetului “header.toggled”Meniul fiind prezent pe toate paginile, trebuie selectat id-ul fiecărui atent corespunzător paginii respective.

Pentru închiderea meniului, sunt 2 posibilități.

Apăsarea, din nou pe buton care este posibilă datorită urmatoarei structuri:

Conținutul din corp revine la forma inițială prin apelarea metodei “removeClass”, meniul dispărând, putând fi apoi accesat tot prin apăsarea butonului.

Apăsarea oriunde pe ecran pentru a închide meniul, folosind urmatorul cod:

După cum se poate vedea în prima linie, atunci când este apăsat în afara”funcției” definită de butonul de meniu, se înlătură procedura de comutare, revenind la forma inițială, atât antetul cât și corpul platformei.

Acest lucru a fost posibil, utilizându-se următoarea porțiune de jQuery.

Codul funcționează pe principiul, dacă sidenav are o clasă”toggle”, atunci când dăm click undeva pe ecran, în afară butonului de meniu, atunci se înlătură clasa “toggled”.

Utilizarea meniului fiind disponibilă pe fiecare pagină, trebuie apelat fișierul “functions.js” de pe fiecare pagină.

Codul javascript este folosit și pentru realizarea unei derulări automate de imagini. Este definită o variabilă “picPaths” unde sunt introduse locațiile fotografiilor. Se pornește de la o valoare 0 și apoi este incrementată până ajunge la numărul fotografiilor, urmând apoi să se reia procesul.

Realizarea siglei cu ajutorul PhotoShop-ului

Figure 33 – SIGLA PLATFORMEI

Pentru realizarea acestei sigle se folosește programul Adobe PhotoShop. Din meniul File se selectează cele 2 poze care alcătuiesc sigla, automat generându-se un fișier cu extensia .php care poate fi modificat de câte ori se dorește.

Figure 34 – Interfață PhotoShop

Figure 35 – Editarea siglei

Cele două poze au fost aranjate în așa fel încât să se realizeze un tot unitar. S-a realizat multiplicarea stelelor și introducerea unui text care reprezintă și denumirea platformei “Exchange Program”.

Fundalul a fost complet înlăturat, astfel încât sigla să se poată potrivi oriunde se dorește a fi amplasată.

Pentru alegerea textului se folosește tipul “Lithos Pro”, de culoare albă, fiind înconjurat de o ușoară umbră pentru a ieși în evidență.

CAPITOLUL IV

PREZENTAREA PLATFORMEI

Schema platformei

Pagina principală

Atunci când un utilizator accesează adresa platformei, este întâmpinat de pagina principală care este formată dintr-o imagine de fundal sugestivă. Studentul își face o idee despre ce este vorba, citind textul evidențiat. În imagine utilizatorul are opțiunea de a își alege în ce limbă să fie relatată platforma, cea de engleză fiind pre-stabilita, deoarece este un site adresat în special studenților străini. Deasupra adresei se mai afla titlul paginii împreună cu sigla.

Figure 37 – Pagina de primire

Utilizatorul este întâmpinat încă de la început cu un buton de abonare la ziar. Acesta este rugat să introducă o adresă de e-mail, iar prin abonarea la acest ziar, utilizatorul este introdus în baza de date, aștept notificările din partea administratorului. După ce a completat câmpul și a apăsat butonul, acesta este redirecționat către pagina principală pentru a-și continua navigarea.

Figure 38 – Introducerea adresei de e-mail pentru abonare

Figure 39 – Testare scalare

Platforma este concepută în așa fel încât să fie accesată de către orice dispozitiv. Derulând pagina, utilizatorului îi sunt prezentate universitățile partenere programului de schimb, fiecare universitate putând fi accesată și automat, iar in urma accesării uneia este redirecționat către pagina cu universitatea respectivă.

Figure 40 – Lista cu universitățile

După ce trece de cele 6 universități structurate pe 2 coloane, utilizatorul ajunge la subsolul paginii. Subsolul prezintă 2 coloane, prima coloană conținând paginile în care se afla și în meniul de tip comutare, nefiind vizibil decât prin apăsare, utilizatorul poate să acceseze unele pagini și din subsol. Cealaltă coloană o reprezintă partea de informații externe privind orașul, utilizatorul fiind redirecționat către 2 ziare ale orașului.

Figure 41 – Subsolul paginii

Îi sunt prezentare și 2 opțiuni de a aprecia aceasta pagină printr-o rețea de socializare sau opțtiunea de distribuire a paginii pentru a fi vizionată de toți prietenii acestuia.

În ultima parte, sub linie, sunt informații privind drepturile de autor ale creatorului, împreună cu 3 butoante pentru rețele de socializare.

Meniul

Urmatoarea parte o reprezinta accesarea meniului.

Figure 42 – Meniul platformei

Studentul, în momentul accesării butonului prezent pe pagina principală, i se deschide meniul din partea dreaptă, acesta fiind structurat pe 4 capitole: “MENU”, “UNIVERSITIES”, “DISCOVER OUR CITY”, “CONTACT” sau, în limba romana: “MENIU”, “UNIVERSITĂȚI”, “DESCOPERĂ CRAIOVA”, “CONTACT”. Fiecare urmând a fi detaliat ulterior. [BGPH]

Secțiunea MENIU

Aici sunt prezente 3 optiuni:

Optiunea HOME / Acasa – in momentul apasarii ne duce la pagina principala, cea de inceput.

Optiunea About Us / Despre Noi

In aceasta sectiune, studentului ii sunt furnizate informatii referitoare la asociatia programului de schimb.

Figure 43 – Pagina "Despre Noi"

Structura paginii “Despre noi” este prezentată în colajul ce conține 3 poze de mai sus. În secțiunea de atent mesajul este același, butonul de abonare fiind și el prezent, toate însoțite de o poză sugestivă. Urmează un text unde sunt informații referitoare la asociație, toate terminându-se cu subsolul prezentat mai sus.

Panoul de administrator

Figure 44 – Logare administrator

Ajuns la secțiunea de administrare, studentul dacă îndeplinește funcții de administrator, se loghează cu datele acestuia. Administratorii folosesc cont-ul pentru a trimite notificări tuturor adreselor de e-mail introduse în secțiunea de abonare din antentul fiecărei pagini.

Atunci când se dorește crearea unui nou admin în baza de date, se adăugă fișierul “register.php” la adresa platformei și este deschis următorul formular:

Figure 45 – Înregistrare administrator

În urma completării câmpurilor, informațiile introduse sunt inserate în baza de date, iar apoi administratorul nou are acces la trimitera notificărilor. În caz că informațiile nu sunt completate corect, sunt afișate erori în funcție de problemă. De exemplu, dacă parola nu a fost introdusă corect în ambele câmpuri, următorul mesaj este afișat:

Figure 46 – Eroare coincidere parole

Administratorul după ce introduce numele și parola corect, este redirecționat către pagina de unde se completează formularul ce urmează să fie trimis tuturor adreselor abonate la ziar.

Figure 47 – Formular trimitere notificări

În urma completării formularului, acesta dacă este completat corect este trimis tuturor abonaților pe adresa de e-mail.

Figure 48 – Confirmarea notificărilor primite

Universități partenere

Această parte din meniu reprezintă o secțiune care cuprinde cele 6 universități parternere, la care studenții care vin pot să se înscrie.

În momentul accesării uneia dintre ele, studentul este redirecționat către pagina corespunzătoare.

Figure 49 – Structură detalii universități

S-a dorit afișarea cât mai multor informații într-o singură pagină, astfel încât, ca imagine în antent, avem o imagine sugestivă cu aula facultății de medicină. Urmează sigla facultății împreună cu informațiile de bază despre facultate împreună cu adresele URL ale facultății.

Avem structurate 3 blocuri:

“About” / “Despre” – Unde sunt prezente informații generale despre facultate

“Contact” – Adresele de contact alte facultății

“ERASMUS” – Detalii privind o altă asociație cu studenți străini. O mică descriere și redirecționare către platforma lor

.

Cea mai importantă secțiune a paginilor ce descriu universitățile o reprezintă câmpul unde fiecare vizitator poate lăsa un comentariu privind experiența sa de-a lungul perioadei de schimb.

Figure 50 – Formular adăugare comentarii

În urma completării câmpurilor din partea dreaptă cu un nume și un comentariu, datele furnizate sunt introduse în baza de date, apoi afișare în spațiul special din partea stângă, care este vizibil tuturor vizitatorilor. Pentru validarea postării mesajelor este folosit un cod rECAPTCHA din motive de securitate. Completarea eronată a acestuia, ducând la o eroare.

Toate celelalte 5 universități au o estetică structurata identic, doar informațiile fiind diferite, pentru a se merge pe un șablon clar, astfel încât platforma să fie ușor de utilizat.

Orașul Craiova

Figure 51 – Pagina dedicată orașului Craiova

În această pagină se prezintă obiectivele turistice ale orașului Craiova, astfel încât studenții să poată observa frumusețea orașului și multitudinea de activatati pe care le pot desfășura de-a lungul perioadei.

Figure 52 – Modalități transport Craiova

La secțiunea de transport sunt oferite informații utile care facilitează efortul studenților pentru găsirea unui mijloc de transport. Este prezentă și o hartă a orașului unde pot să urmărească cum este structurat și cum are legate străzile de-a lungul orașului.

Figure 53 – Harta Craiovei

Contact

Ultima pagină o reprezintă pagina de contact, unde studentul, în urma completării unui formular, dacă este scris corect este inserat în baza de date, unde este vizualizat de către un administrator, acesta urmând să îi răspundă în cel mai scurt timp pentru clarificarea problemei.

Figure 54 – Formular contactare administrator

Concluzii

În concluzie, scopul realizării acestei lucrări, justificând tema aleasă, este acela de a ajuta studenții străini, care vin prin diverse programe de schimb, să se integreze mai ușor. Este cunoscut faptul că studenții străini întâmpină anumite dificultăți în cadrul acestor programe de schimb, dificultăți care îi maturizează, însă, în același timp îi pot și speria, determinându-i să renunțe la înscrierea în cadrul unui astfel de program. Astfel, această platformă se poate spune că poate reprezenta un pas important înspre ajutorarea studenților pentru a depăși obstacolele pe care le pot întâmpina încă dinainte să plece din țara în care se află spre o nouă destinație pentru o durată determinată de timp cu scopul de a trăi experiența unui semestru într-o instituție de învățămând dintr-o țară străină.

Prin această platformă dinamică se dorește reducerea unor astfel de obstacole, astfel încât studentul să beneficieze de o experiență cât mai plăcută încă de la început. Platforma este structurata în așa fel încât să fie ușor de utilizat, să fie atractivă, păstrând în același timp o notă de seriozitate care să fie potrivită, totuși, pentru mediul academic.

BIBLIOGRAFIE

[MySQL1] MySQL Database: https://www.mysql.com/why-mysql/

[PHP1] PHP: http://www.homeandlearn.co.uk/php/php1p1.html

[HTML1] HTML: https://en.wikipedia.org/wiki/HTML

[CSS1] CSS: https://en.wikipedia.org/wiki/Cascading_Style_Sheets

[javascript1] JavaScript: https://en.wikipedia.org/wiki/JavaScript

[PHTSHP] PhotoShop: https://ro.wikipedia.org/wiki/Adobe_Photoshop

[BGPH] Pozele de fundal: https://unsplash.com

Codul sursă

Codul pentru baza de date

connect.php

<?php

mysql_connect("localhost", "root", "");

mysql_select_db("maindb");

?>

contact_user_process.php

<?php

include("contactConnection.php");

$name=$_REQUEST['name'];

$city=$_REQUEST['city'];

$email=$_REQUEST['email'];

$msg=$_REQUEST['message'];

//INSERAREA DATELOR IN TABELA

if($name && $city && $email && $msg){

$query=mysqli_query($db_connect, "INSERT INTO contactmsg(name, city, email, message) VALUES('$name','$city','$email','$msg')") or die(mysqli_error($db_connect));

mysqli_close($db_connect);

header("location:contact.php?note=success");

}

else

{

echo "You did not fill the form correctly!";

}

?>

contactConnection.php

<?php

$db_host="localhost";

$db_username="root";

$db_password="";

$db_name="maindb";

$db_connect=mysqli_connect($db_host, $db_username, $db_password, $db_name);

//Check the connection

if(mysqli_connect_error())

{

echo "Failed to connect to MySQL: ".mysqli_connect_error();

}

?>

register.php

<?php

session_start();

//Conectare la baza de date

$db = mysqli_connect("localhost", "root", "", "maindb");

if(isset($_POST['register_btn'])){

$username = mysql_real_escape_string($_POST['username']);

$email = mysql_real_escape_string($_POST['email']);

$password = mysql_real_escape_string($_POST['password']);

$password2 = mysql_real_escape_string($_POST['password2']);

if($password == $password2){

//creare user

$password = md5($password); // bash password before storing for security purposes

$sql = "INSERT INTO adminusers(username, email, password) VALUES('$username', '$email', '$password')";

mysqli_query($db, $sql);

$_SESSION['message'] = "You are now logged in";

$_SESSION['username'] = $username;

header("location: index.php"); //redirect to homepage

}else{

//fail

$_SESSION['message'] = "The two password do not match";

}

?>

<!DOCTYPE html>

<html>

<head>

<title>Admin Register</title>

</head>

<nav>

</a>

</a>

</nav>

<body>

<h1>Admin Registration</h1>

<?php

if(isset($_SESSION['message'])){

echo"<div id='error_msg'>".$_SESSION['message']."</div>";

unset($_SESSION['message']);

}

?>

<table>

<tr>

<td>Username:</td>

</tr>

<tr>

<td>Email:</td>

</tr>

<tr>

<td>Password:</td>

</tr>

<tr>

<td>Password again:</td>

</tr>

<tr>

</tr>

</table>

</form>

</div>

</section>

</body>

</html>

login.php

<?php

session_start();

//Conectare la baza de date

$db = mysqli_connect("localhost", "root", "", "maindb");

if(isset($_POST['login_btn'])){

$username = mysql_real_escape_string($_POST['username']);

$password = mysql_real_escape_string($_POST['password']);

$password = md5($password);

$sql = "SELECT * FROM adminusers WHERE username='$username' AND password = '$password'";

$result = mysqli_query($db, $sql);

if(mysqli_num_rows($result) == 1) {

$_SESSION['message'] = "You are now logged in";

$_SESSION['username'] = $username;

header("location: newsletter.php"); //redirect to home page

}else{

$_SESSION['message'] = "Username/Password incorrect";

}

?>

<!DOCTYPE html>

<html>

<head>

<title>Admin | Exchange Programme</title>

</head>

<nav>

</a>

</a>

</nav>

<body>

<h1>Admin Panel</h1>

<?php

if(isset($_SESSION['message'])){

echo"<div id='error_msg'>".$_SESSION['message']."</div>";

unset($_SESSION['message']);

}

?>

<table>

<tr>

<td>Username:</td>

</tr>

<tr>

<td>Password:</td>

</tr>

<tr>

</tr>

</table>

</form>

</div>

</section>

</body>

</html>

Fisierul paginii principale – index.php

<!DOCTYPE html>

<html>

<head>

<title>Exchange Program</title>

</head>

<body>

<!– Facebook share&like !–>

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.9";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

</a>

<li>About Us</li>

</a>

<li><span style="color:blue">Admin Panel</span></li>

</a>

<br/>

<h1>Universities</h1>

<li>Faculty of Automation, Computer and Electronics</li>

</a>

<li>University of Medicine and Pharmacy Craiova</li>

</a>

<li>University of Craiova</li>

</a>

<li>Faculty of Mechanics</li>

</a>

<li>Faculty of Agronomy</li>

</a>

<li>Faculty of law</li>

</a>

<br />

<h1>DISCOVER OUR CITY</h1>

<li>Craiova</li>

</a>

<li>Public Transport</li>

</a>

<br />

<hr />

<br />

<h1> Contact </h1>

<p id='tweet-desk'> Contact Us for any kind of problem!</p>

</a>

</div>

<a href="index.php">»English</a>

<a href="ro/indexro.php">»RomânÄƒ</a>

</div>

<nav>

</a>

</a>

</nav>

<h1 id='moto'>Exchange isn't a year in your life, it's a life in your year</h1>

<a href='add.php' id='subscribeForm-cta'>Subscribe for weekly updates</a>

The official enrollment period has just started

<br />

Come and join us in a wonderful experience!

<br>

– CRAIOVA –

</h4>

<br />

</header>

<h1 id='univiesTitle'>Proud Universities of Craiova</h1>

Faculty of Automation, Computers and Electronics

</a>

<p>

</p>

<h5>

Facultatea de Automatica, Calculatoare si Electronica

</h5>

</div>

University of Medicine and Pharmacy Craiova

</a>

<p>

</p>

<h5>

Universitatea de Medicina si Farmacie

</h5>

</div>

University of Craiova

</a>

<p>

</p>

<h5>

Universitatea din Craiova

</h5>

</div>

Faculty of Mechanics

</a>

<p>

</p>

<h5>

Facultatea de Mecanica

</h5>

</div>

Faculty of Agronomy

</a>

<p>

</p>

<h5>

Facultatea de Agronomie

</h5>

</div>

Faculty of Law

</a>

<p>

</p>

<h5>

Facultatea de Drept

</h5>

</div>

<h3>RECENT POSTS</h3>

Discover our city</a>

Who we are?

</a>

Contact form

</a>

Subscribe for weekly updates

</a>

<br />

</div>

<h3> Local Newspappers</h3>

<a href="http://www.gds.ro"><p>Gazeta de Sud</p></a>

<a href="http://www.craiovaforum.ro"><p>Craiova Forum</p></a>

</div>

</footer>

<hr/>

</div>

</div>

</script>

</script>

</body>

</html>

contact.php

<!DOCTYPE html>

<html>

<head>

<title>Contact | Exchange Programme</title>

<script

src="https://code.jquery.com/jquery-3.2.1.js"></script>

$(document).ready(function(){

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

$('.toggle').toggleClass('active')

})

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

$('.box').toggleClass('active')

})

</script>

</head>

<body>

<!– Facebook share&like !–>

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.9";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<hr/>

</a>

<li>About Us</li>

</a>

<li><span style="color:blue">Admin Panel</span></li>

</a>

<br/>

<h1>Universities</h1>

<li>Faculty of Automation, Computer and Electronics</li>

</a>

<li>University of Medicine and Pharmacy Craiova</li>

</a>

<li>University of Craiova</li>

</a>

<li>Faculty of Mechanics</li>

</a>

<li>Faculty of Agronomy</li>

</a>

<li>Faculty of law</li>

</a>

<br />

<h1>DISCOVER OUR CITY</h1>

<li>Craiova</li>

</a>

<li>Public Transport</li>

</a>

<br />

<hr />

<br />

<h1> Contact </h1>

<p id='tweet-desk'> Contact Us for any kind of problem!</p>

</a>

</div>

<nav>

</a>

</a>

</nav>

<h1 id='moto'>Exchange isn't a year in your life, it's a life in your year.</h1>

<a href='add.php' id='subscribeForm-cta'>Subscribe for weekly updates</a>

The official enrolment period has just started.

<br />

Come and join us in a wonderful experience!

<br>

– CRAIOVA –

</h4>

</div>

<h1 id='contactTitle1'><i>Do not hesitate to contact us for any kind of problem!

<br>

<span style="color:red">We will respond shortly!</span> </i></h1>

<?php

error_reporting(0);

include("contactConnection.php");

$note=$_REQUEST['note'];

?>

<html>

<head>

</head>

<body>

<?php

if($note=='success')

{

echo"Form submitted successfully";

}

?>

Name: <input type="text" name="name" placeholder="NAME" value=""><br>

City: <input type="text" name="city" placeholder="CITY" value=""><br>

Email: <input type="text" name="email" placeholder="EMAIL" value=""><br>

Message: <textarea name="message" placeholder="MESSAGE"></textarea>

</form>

</div>

</section>

</body>

</html>

<h3>RECENT POSTS</h3>

Discover our city</a>

Who we are?

</a>

Contact form

</a>

Subscribe for weekly updates

</a>

<br />

</div>

<h3> Local Newspappers</h3>

<a href="http://www.gds.ro"><p>Gazeta de Sud</p></a>

<a href="http://www.craiovaforum.ro"><p>Craiova Forum</p></a>

</div>

</footer>

<hr/>

</div>

</div>

</script>

</script>

</body>

</html>

fisierul main.css – o parte

body{

margin: 0;

}

body.toggled {

overflow: hidden;

}

.clearfix:after{

content: '';

display: table;

clear:both;

}

/* Main CSS */

header {

position: relative;

top: 0;

left: 0;

width: 100%;

background-color: silver;

background-position: center center;

background-size: cover;

background-repeat: no-repeat;

padding-bottom: 110px;

text-align: center;

transition: all 200ms cubic-bezier(0.3, 0.4, 0.35, 0.8);

z-index: 100;

margin: 0;

}

.header1 {

position: relative;

top: 0;

left: 0;

width: 100%;

height: 700px;

background-color: grey;

background-position: center center;

background-size: cover;

background-repeat: no-repeat;

padding-bottom: 59px;

text-align: center;

transition: all 200ms cubic-bezier(0.3, 0.4, 0.35, 0.8);

z-index: 100;

margin: 0;

}

#header1content {

background-color: rgba(0, 0, 0, 0.43);

}

#language{

text-align: center;

}

#language a{

color: white;

text-transform: uppercase;

font-family: 'Raleway', sans-serif;

text-decoration: none;

text-shadow: 1px 1px #000;

}

#language a:hover{

color: #ccc;

}

#language hr{

border: 0.1px solid #000;

}

/* med */

.headermed {

position: relative;

top: 0;

left: 0;

width: 100%;

height: 700px;

background-color: grey;

background-position: center center;

background-size: cover;

background-repeat: no-repeat;

padding-bottom: 59px;

text-align: center;

transition: all 200ms cubic-bezier(0.3, 0.4, 0.35, 0.8);

z-index: 100;

margin: 0;

}

#headermedcontent {

background-color: rgba(0, 0, 0, 0.43);

}

CD / DVD

Index

A

antet 36

B

Baza de date 2

baze de date 4

Bibliografie 62

blocuri 6

butoane 10

C

Codul sursă 63

crearea bazei de date 15

CSS 8

CUPRINSUL x

E

eroare 57

I

informații 50

Instruncțiunile 3

Introducere 1

L

limbaj dinamic 5

LISTA FIGURILOR xii

M

Meniul 51

modificarea imaginilor 11

Motivația 1

MULȚUMIRI ix

P

Pagina principală 48

programarea dinamică 24

R

REZUMATUL PROIECTULUI viii

S

Schema platformei 47

Scopul 1

sigla 45

Structura unui cod PHP 5

Subsolul 39

T

tabela 29

Termenii cheie viii

U

utilizatorul 24

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: Dariusmihaiceausesculicentafinal [310906] (ID: 310906)

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.

Dariusmihaiceausesculicentafinal [310906]

Copyright Notice

Rezumat … … … … … 4 [621892]

I. Cadrul conceptual 5 [308596]

În prezenta lucrare mi -am propus să analizez într -o manieră extinsă formele atipice ale [614113]

Despre Lupus.pdf [614360]

ȘCOALA NAȚIONALĂ DE STUDII POLITICE ȘI ADMINISTRATIVE [614518]

Unitatea de învățare nr. 1 [628942]

Copyright Notice

Similar Posts