CENTRUL UNIVERSITAR NORD DIN BAIA MARE FACULTATEA DE ȘTIINȚE DEPARTAMENTUL DE MATEMATICĂ ȘI INFORMATICĂ SPECIALIZAREA INFORMATICĂ Baia Mare 2020… [305052]

CENTRUL UNIVERSITAR NORD DIN BAIA MARE

FACULTATEA DE ȘTIINȚE

DEPARTAMENTUL DE MATEMATICĂ ȘI INFORMATICĂ

SPECIALIZAREA INFORMATICĂ

Baia Mare

2020

[anonimizat] o decizie importantă pentru aceasta. Acesta trebuie ales încât să evidențieze și să o scoată în evidență. [anonimizat]. [anonimizat]-l deosebească de ceilalți și să ii ofere un plus de valoare. [anonimizat], imaginea lui urmând să apară pe toate materiale folosite online cât și fizice.

Noțiunea de logo reprezintă reprezentarea grafică a numelui companiei și a serviciilor tale. Există cinci tipuri de bază pentru logo:

text

simbol

letter mark

text cu simbol

emblemă.

Logo-[anonimizat], design și culoare. De exemplu Facebook este un brand renumit care a folosit această tehnică.

Logo-ul de tip simbol este un simbol care descrie activitatea sau numele companiei. De exemplu Apple este ușor de recunoscut doar prin imaginea mărului mușcat.

Logo-[anonimizat], reușesc să rămână întipărite în mintea consumatorilor. Atunci când vezi simbolul HP îți dai seama despre ce brand este vorba din prima.

Logo-[anonimizat] o tehnică folosită de multe branduri de renumite. Asocierea unei imagini cu un cuvânt poate oferi mai multă claritate față de clienți. De exemplu McDonalds a folosit această tehnică.

Logo-[anonimizat] o [anonimizat]-ului așa cum se observă la cei de la Starbucks.

Acestă platformă este un loc unde clienți și freelanceri coexista. [anonimizat], iar freelanceri să iși demonstreze abilitățiile și creativitatea lor.

Proiectul este structurat în 3 [anonimizat] 3 tipuri de utilizatori diferiți:

[anonimizat], iar datele personale a [anonimizat].

Nivelul structural al proietului:

[anonimizat] s-a publicat pe pagină.

[anonimizat], pentru a [anonimizat], [anonimizat], creați.

[anonimizat], [anonimizat], acestea sunt: cuprins, introducere, [anonimizat], [anonimizat], [anonimizat].

[anonimizat]. În capitolul medii de dezvoltare folosite am prezentat toate mediile de dezvoltare folosite. În partea de specificații tehnice și descrierea aplicației am prezentat detalile tehnice si descrierea aplicației. [anonimizat]. În manual de instalare și utilizare am prezentat pe scurt de ce este nevoie pentru a folosi aplicatia și cum se folosește aceasta.

CAPITOLUL I – Tehnologii folosite

O aplicație web este un sistem software bazat pe tehnologiile și standardele consorțiului World Wide Web (W3C) care oferă resurse web specifice cum ar fi conținut și servicii prin intermediul unei interfețe numită browser web. O aplicație web este un sistem software bazat pe tehnologiile și standardele consorțiului World Wide Web (W3C) care oferă resurse web specifice cum ar fi conținut și servicii prin intermediul unei interfețe numită browser web. Această definiție include în mod explicit tehnologiile, dar și interacțiunea utilizatorului. De aici putem deduce că tehnologiile în sine, la fel că și serviciile web, nu sunt aplicații web, dar pot fi o parte a acestora. În plus, această definiție implică ca site-urile web lipsite de componente software, cum sunt paginile HTML statice, să nu fie considerate aplicații.

Elementul distinctiv al aplicațiilor web, comparativ cu aplicațiile software tradiționale, este modul în care este utilizat web-ul: de exemplu tehnologiile și standardele sale sunt utilizate ca o platformă de dezvoltare și ca platforma utilizator în același timp.

Limbajele folosite pentru designul unei aplicații web (HTML, CSS) necesită doar un program simplu de editare de texte ( cum ar fi Notepad++) și un browser pentru vizualizare. Însă limbajele de programare pentru web, în cazul acesta PHP, Sistem de gestiune a continutului necesită un server, care interpretează și rulează codul. Cel mai cunoscut și răspândit server în zilele noastre este Apache. Desigur, pe lângă server mai este nevoie și de o bază de date. MySQL este alegerea evidentă, datorită simplicității și gratuității lui. Că să pot folosi aceste servicii, am descărcat și instalat programele XAMPP și HeidiSQL cu care am putut crea un server local și o bază de date locală. După pornirea serviciilor Apache și MySQL în programul XAMPP, din HeidiSQL am putut crea baza de date și a urmări toate modificările aduse pe parcurs.

După setarea serverului și a bazelor de date am mai avut nevoie de un mediu de dezvoltare. Ca și la alte proiecte implementate în cursul facultății, am ales programul PhpStorm și Sublime Text 3, care oferă o interfață prietenoasă și ușurează munca programatorului.

1.1 APACHE- server WEB

Apache este un server HTTP open source. Apache va juca mereu un rol important în dezvoltarea webului, fiind folosit în prezent în circa 65.2 % din paginile web. Cuvântul apache provine din numele apașilor, triburi de amerindieni.

Apache este un server web care are o contribuție notabilă la dezvoltatea Internetului (world wide web). Apache a reprezentat prima alternativă viabilă la Netscape Communications Corporation, și a evoluat rapid în funcționalitate și performanță ca un rival competitiv pentru alte servere web bazate pe Unix.

Apache Software Foundation este o comunitate de programatori care au dezvoltat Apache. Aplicația rulează pentru mai multe sisteme de operare incluzând Unix, FreeBSD, Linux, Solaris, Novell NetWare, Mac OS X, Microsoft Windows si OS/2.

Serverul Apache este un software gratuit și open source, acesta făcând ca, începând din aprile 1996, el devenind cel mai popular server HTTP. Din noiembrie 2005 încet a început să piardă din cota de piață, dar în aprilie 2008 Apache totuși era încă la baza a peste 50 % din siturile web, iar cu 65.2% în iunie 2013. În 46,91% din totalul domeniului românesc este folosit Apache.

Robert McCool a creat prima versiune a serverului, care la vremea aceea era implicat în proiectul National Center for Supercomputing Applications, cunoscut pe scurt ca NCSA HTTPd. A doua versiune a serverului a fost o rescriere substanțială, de data aceasta punându-se accentul pe crearea unui layer prioritar (Apache Portable Runtime) și a suportului de module.

Apache suportă o mare varietate de module care îi extind funcționalitatea, acestea variază de la server side programming și până la scheme de autentificare. Câteva limbaje suportate sunt: mod_perl, mod_python, Tcl si PHP. Ca alte module putem enumera : SSL si TLS support (mod_ssl), un modul proxyun, modul de rescriere URL (cunoscut ca un motor de rescriere mod_rewrite), custom log files (mod_log_config) și suport de filtrare (mod_include și mod_ext_filter). O altă calitate a serverului Apache este virtual hosting (găzduirea virtuală), care constă în posibilitatea de a găzdui mai multe situri simultan pe același server.

Microsoft Internet Information Services (IIS) este principalul competitor al serverului Apache, urmat de Sun Java System Web Server al companiei Sun Microsystems și multe altele, cum ar fi Zeus Web Server.

Unele dintre cele mai site-uri din lume folosesc Apache. Google Web Server(GWS) este motorul de căutare de la Google, acesta este o versiune modificată de Apache, Wikipedia rulează de asemenea pe un server Apache.[ 1]

1.2 SQL

SQL (numele englez Structured Query Language – limbaj de interogare structurat – care se pronunță [es kiu el]) este un limbaj de programare specific pentru manipularea datelor în sistemele de manipulare a bazelor de date relaționale (RDBMS), iar la origine este un limbaj bazat pe algebra relațională. Acesta are ca scop inserarea datelor, interogații, actualizare și ștergere, modificarea și crearea schemelor, precum și controlul accesului la date. A devenit un standard în domeniu (standardizat ANSI-ISO), fiind cel mai popular limbaj utilizat pentru crearea, modificarea, regăsirea și manipularea datelor de către SGBD-urile (Sistemele de Gestiune a Bazelor de Date) relaționale. Pe lângă versiunile standardizate ale limbajului, există o mulțime de dialecte și variante, unele proprietare, fiind specifice anumitor SGBD-uri și de asemenea conținând extensii pentru a suporta SBD-urile (Sistemele de Baze de Date) obiectuale (obiectual-relaționale).

SQL permite accesul la conținutul bazelor de date și la structura acestora.

Limbajul SQL este divizat în următoarele elemente:

Clauze, care sunt componente ale instrucțiunilor și interogărilor.

Expresii, al căror efect este producerea de valori scalare sau tabele.

Predicate, pot specifica condiții care sunt evaluate de SQL conform logicii ternare sau logicii booleene, în scopul limitării efectelor instrucțiunilor, sau pentru a influența cursul programului.

Interogările, au ca scop regăsirea datelor după criterii specifice.

Instrucțiunile, pot avea un efect persistent asupra datelor sau structurii datelor, sau pot controla tranzacțiile, conexiunile sau cursul programului. În general, instrucțiunile SQL se termină cu caracterul punct-virgulă (";"), deși acest lucru nu este obligatoriu în toate platformele SQL. Spațiile albe suplimentare sunt ignorate, dar ele pot fi folosite pentru lizibilitatea codului SQL.

Oricărei coloane (sau câmp) dintr-un tabel SQL îi este asignat un tip de dată, la fel ca în toate celelalte limbaje de programare. Tipurile de date sunt următoarele:

CHARACTER (sau CHAR) – șir de caractere

INTEGER (sau SMALLINT) – număr întreg

FLOAT, REAL sau DOUBLE PRECISION – număr real

NUMERIC(precision, scale) sau DECIMAL(precision, scale) – număr zecimal , unde “precision” înseamnă numărul de cifre din partea întreagă, “scale” înseamnă numărul de zecimale.

DATE – data zilei.

TIME – ora.

Funcția sistem NOW întoarce data și ora curentă.

Limbajul de manipulare a datelor (DML) este un subset al SQL utilizat pentru a adăuga, actualiza sau șterge date.

Instrucțiunile limbajului de manipulare a datelor:

INSERT – inserează un articol într-o tabelă:

INSERT INTO tabel (câmp1, câmp2, …) fVALUES (valoare1, valoare2, …);

UPDATE – actualizează un set de articole:

UPDATE tabel SET câmp = valoare [WHERE condiție];

DELETE – șterge un set de articole:

DELETE FROM tabel [WHERE condiție];[2]

1.3 PHP

PHP (Hypertext Preprocessor)

este un limbaj de scripting de uz general, cu cod-sursă deschis (open source), utilizat pe scară largă, și care este potrivit în special pentru dezvoltarea aplicațiilor web și poate fi integrat în HTML.

Un exemplu introductiv:

În locul unei mulțimi de comenzi pentru a afișa HTML (cum este cazul în C sau Perl), paginile PHP conțin HTML cu cod-sursă încorporat, care realizează "ceva" (în acest caz, afișează "Salut, sunt un script PHP!"). Codul-sursă PHP este încorporat între niște instrucțiuni de procesare de început și de sfârșit speciale <?php și ?>, care vă permit să intrați și să ieșiți din "modul PHP".

Ceea ce face PHP să difere de un JavaScript de partea clientului este că codul său este executat pe server, generând HTML care este apoi trimis către client. Clientul va primi rezultatele rulării acelui script, fără a putea cunoaște codul-sursă ce stă la bază. Dumneavoastră chiar puteți să configurați web server-ul să proceseze toate fișierele HTML cu PHP, și atunci într-adevăr nu va fi nici o modalitate ca utilizatorii să afle ce aveți ascuns în mânecă.

Cel mai bun lucru la PHP este simplitatea extremă pentru un începător, dar totodată existența multor facilități avansate pentru un programator profesionist.

PHP-ul este unul din cele mai folosite limbaje de programare server-side.

Popularitatea de care se bucură acest limbaj de programare se datorează următoarelor caracteristici :

Familiaritatea : sintaxa limbajului este foarte ușoară combinând sintaxele unora din cele mai populare limbaje Perl sau C;

Simplitatea : sintaxa limbajului este destul de liberă. Nu este nevoie de includere de biblioteci sau de directive de compilare, codul PHP inclus într-un document executându-se între marcajele speciale;

Eficiența : PHP-ul se folosește de mecanisme de alocare a resurselor, foarte necesare unui mediu multiutilizator, așa cum este web-ul;

Securitate : PHP-ul pune la dispoziția programatorului un set flexibil și eficient de măsuri de siguranță;

Flexibilitate : fiind apărut din necesitatea dezvoltării web-ului, PHP a fost modularizat pentru a ține pasul cu dezvoltarea diferitelor tehnologii. Nefiind legat de un anumit server web, PHP-ul a fost integrat pentru numeroasele servere web existente: Apache, IIS, Zeus, server, etc.;

Gratuitate : este probabil cea mai importantă caracteristică a PHP-ului. Dezvoltarea PHP-ului sub licența open-source a determinat adaptarea rapidă a PHP-ului la nevoile web-ului, eficientizarea și securizarea codului.

PHP poate rula pe majoritatea sistemelor de operare, de la UNIX, Windows, sau Mac OS X și poate interacționa cu majoritatea serverelor web. Codul dumneavoastră PHP este interpretat de serverul WEB și generează un cod HTML care va fi văzut de utilizator (clientului -browserului- fiindu-i transmis numai cod HTML).

PHP foloseste extensii specifice pentru fișierele sale: .php, .php3, .ph3, .php4, .inc, .phtml. Aceste fișiere sunt interpretate de catre serverul web iar rezultatul este trimis în formă de text sau cod HTML către browser-ul clientului.[3]

1.4 JavaScript

JavaScript (JS) este un limbaj de programare orientat obiect bazat pe conceptul prototipurilor. Este folosit mai ales pentru introducerea unor funcționalități în paginile web, codul JavaScript este rulat de către browser. Limbajul este binecunoscut pentru folosirea sa în construirea siturilor web, dar este folosit și pentru accesul la obiecte încapsulate (embedded objects) în alte aplicații. A fost dezvoltat inițial de către Brendan Eich de la Netscape Communications Corporation sub numele de Mocha, apoi LiveScript, și denumit în final JavaScript.

Între JavaScript și limbajul Java nu există nicio legătură, în ciuda numelui și a unor similarități în sintaxă. JavaScript, ca și Java are o sintaxă apropiată de cea a limbajului C, dar are mai multe în comun cu limbajul Self decât cu Java.

Scriptarea paginilor web este cea mai des utilizare întâlnită a JavaScript. Programatorii web pot îngloba în paginile HTML script-uri pentru diverse activități cum ar fi verificarea datelor introduse de utilizatori sau crearea de meniuri și alte efecte animate.

Browserele rețin în memorie o reprezentare a unei pagini web sub forma unui arbore de obiecte și pun la dispoziție aceste obiecte script-urilor JavaScript, care le pot citi și manipula. Arborele de obiecte poartă numele de Document Object Model sau DOM. Există un standard W3C pentru DOM-ul pe care trebuie să îl pună la dispoziție un browser, ceea ce oferă premiza scrierii de script-uri portabile, care să funcționeze pe toate browserele. În practică, însă, standardul W3C pentru DOM este incomplet implementat. Deși tendința browserelor este de a se alinia standardului W3C, unele din acestea încă prezintă incompatibilități majore, cum este de exemplu Internet Explorer.[4]

1.5 CSS

CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document HTML. Stilurile se pot atașa elementelor HTML prin intermediul unor fișiere externe sau în cadrul documentului, prin elementul <style> și/sau atributul style. CSS se poate utiliza și pentru formatarea elementelor XHTML, XML și SVGL.

CSS3 reprezintă un upgrade ce aduce câteva atribute noi și ajută la dezvoltarea noilor concepte in webdesign.

Unele dintre cele mai importante segmente (module) noi adăugate acestui standard pentru formatarea elementelor HTML aduc un plus considerabil in dezvoltarea activități webdesign.

Mai jos sunt prezente in listă cele mai importante modulele adăugate in CSS3:

Selectors

Box Model

Backgrounds and Borders

Image Values and Replaced Content

Text Effects

2D/3D Transformations

Animations

Multiple Column Layout

User Interface

Chiar dacă au apărut unele deficiențe de compatibilitate între browsere, majoritatea proprietăților CSS3 au fost implementate cu succes in variantele browserelor noi.[5]

1.6 HTML

HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru crearea paginilor web ce pot fi afișate într-un browser (sau navigator). Scopul HTML este mai degrabă prezentarea informațiilor – paragrafe, fonturi, tabele ș.a.m.d. – decât descrierea semanticii documentului.

Specificațiile HTML sunt dictate de World Wide Web Consortium (W3C).

HTML este o formă de marcare orientată către prezentarea documentelor text pe o singura pagină, utilizând un software de redare specializat, numit agent utilizator HTML, cel mai bun exemplu de astfel de software fiind browserul web. HTML furnizează mijloacele prin care conținutul unui document poate fi adnotat cu diverse tipuri de metadate și indicații de redare. Indicațiile de redare pot varia de la decorațiuni minore ale textului, cum ar fi specificarea faptului că un anumit cuvânt trebuie subliniat sau că o imagine trebuie introdusă, până la scripturi sofisticate, hărți de imagini și formulare. Metadatele pot include informații despre titlul și autorul documentului, informații structurale despre cum este împărțit documentul în diferite segmente, paragrafe, liste, titluri etc. și informații cruciale care permit ca documentul să poată fi legat de alte documente pentru a forma astfel hiperlink-uri (sau web-ul).

HTML este un format text proiectat pentru a putea fi citit și editat de oameni utilizând un editor de text simplu. Totuși scrierea și modificarea paginilor în acest fel solicită cunoștințe solide de HTML și este consumatoare de timp. Editoarele grafice (de tip WYSIWYG) cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft FrontPage permit ca paginile web sa fie tratate asemănător cu documetele Word, dar cu observația că aceste programe generează un cod HTML care este de multe ori de proastă calitate.

HTML se poate genera direct utilizând tehnologii de codare din partea serverului cum ar fi PHP, JSP sau ASP. Multe aplicații ca sistemele de gestionare a conținutului, wiki-uri și forumuri web generează pagini HTML.

HTML este de asemenea utilizat în e-mail. Majoritatea aplicațiilor de e-mail folosesc un editor HTML încorporat pentru compunerea e-mail-urilor și un motor de prezentare a e-mail-urilor de acest tip. Folosirea e-mail-urilor HTML este un subiect controversat și multe liste de mail le blochează intenționat.

HTML folosește așa numitele marcaje, numite TAG-uri în limba engleză.

Tagurile apar între semnele < și >, și reprezintă comenzi ce spun navigatorului cum să interpreteze textul dintre taguri (bold, italic, dacă se definește un tabel, o listă, inserarea unei imagini, etc.) și astfel poate afișa corespunzător pagina web.

Majoritatea tagurilor au două părți: tagul de deschidere ce indică unde începe textul și tagul de închidere ce spune navigatorului unde se termină textul ce trebuie formatat conform tagului respectiv. Tagurile de închidere încep cu semnul / (slash) chiar după simbolul < . De exemplu:

tagul <BODY> indică unde începe conținutul paginii web,

iar tagul </BODY> indică sfârșitul conținutului paginii web.

În acest fel navigatorul știe că tot ce se află între aceste tag-uri este conținutul paginii web și îl va afișa în fereastra browser-ului.[6]

1.7 Bootstrap

Bootstrap este un framework CSS gratuit și opend-source, direcționat către dezvoltarea web front-end receptivă și mobilă. Conține șabloane de design bazate pe CSS și JavaScript pentru tipografie, formulare, butoane, navigare și alte componente de interfață.

Caracteristici:

Bootstrap este un framework care se concentrează pe simplificarea dezvoltării paginilor web informative (spre deosebire de aplicațiile web). Scopul principal al adăugării la un proiect web este de a aplica opțiunile Bootstrap de culoare, dimensiune, font și aspect la acel proiect. Ca atare, factorul principal este dacă dezvoltatorii responsabili găsesc acele alegeri după bunul lor plac. Odată adăugat la un proiect, Bootstrap oferă definiții de bază ale stilului pentru toate elementele HTML. Rezultatul este un aspect uniform pentru proză, tabele și elemente de formă din browserele web. În plus, dezvoltatorii pot profita de clasele CSS definite în Bootstrap pentru a personaliza în continuare aspectul conținutului lor. De exemplu, Bootstrap a prevăzut tabele cu culori deschise și închise, titluri de pagină, citate de tragere mai proeminente și text cu evidențiere.

Bootstrap vine de asemenea cu mai multe componente JavaScript sub formă de plugin-uri jQuery. Ele furnizează elemente suplimentare de interfață pentru utilizator, cum ar fi casetele de dialog, fișele de unelte și caruselele. Fiecare componentă Bootstrap constă dintr-o structură HTML, declarații CSS și, în unele cazuri, însoțitoare de cod JavaScript. De asemenea, extind funcționalitatea unor elemente de interfață existente, inclusiv de exemplu o funcție auto-completă pentru câmpurile de intrare.

Cele mai proeminente componente ale Bootstrap sunt componentele sale de aspect, deoarece acestea afectează o întreagă pagină web. Componenta de bază a layout-ului se numește "Container", deoarece orice alt element din pagină este plasat în ea. Dezvoltatorii pot alege între un container cu lățime fixă și un recipient cu lățime de fluid. În timp ce acesta din urmă completează întotdeauna lățimea paginii web, prima folosește una dintre cele patru lățimi fixe predefinite, în funcție de dimensiunea ecranului care arată pagina:

Mai mic decât 576 pixeli

576–768 pixeli

768–992 pixeli

992–1200 pixeli

Mai mare de 1200 pixeli

Odată ce un container este plasat, alte componente ale layout-ului Bootstrap implementează un layout CSS Flexbox prin definirea rândurilor și coloanelor.[7]

CAPITOLUL II – Medii de dezvoltare folosite

Un mediu de dezvoltare (engl. software development environment, sau integrated development environment – "mediu integrat de dezvoltare) este un set de programe care ajută programatorul în scrierea programelor. Un mediu de dezvoltare combină toți pașii necesari creării unui program (ex.: editarea codului sursă, compilarea, depanarea, testarea, generarea de documentație) într-un singur soft, care, de regulă, oferă o interfață cu utilizatorul grafică, prietenoasă.

Principalele componente ale unui mediu de dezvoltare sunt editorul de cod sursă și depanatorul. Mediile de dezvoltare apelează compilatoare, sau interpretoare, care pot veni în același pachet cu mediul însuși, sau pot fi instalate separat de către programator. Printre facilitățile prezente în mediile de dezvoltare mai sofisticate se numără: exploratoare de cod sursă, sisteme de control al versiunilor, designere de interfețe grafice, sau unelte de ingineria programării (ex. generarea de diagrame UML).

De obicei un mediu de dezvoltare este specific cu un anumit limbaj de programare, însă există la ora actuală și medii de dezvoltare care pot lucra cu mai multe limbaje, de ex. Eclipse sau Microsoft Visual Studio.[8]

Beneficiile utilizării unui sistem IDE:

Reducerea timpului: ideea centrală a soluțiilor IDE este aceea de a reduce timpul prin faptul că ajută utilizatorul să-și organizeze resursele, să prevină eventualele greșeli și să aibă la dispoziție comenzi rapide.

Asigură respectarea standardelor de proiect sau a standardelor companiei: IDE oferă template-uri predefinite.

Managementul proiectelor: multe soluții IDE au instrumente de documentare, ce automatizează comentariile date de dezvoltatori.

Dezavantajele utilizării unui sistem IDE:

Greutatea învățării: soluțiile IDE sunt complicate. Învățarea lor necesită timp și răbdare.

soluție IDE sofisticată nu este recomandată programatorilor începători: caracteristicile și comenzile rapide pentru programatori cu experiență de multe ori ascund detalii de bază ale unei limbi.

IDE nu repară un cod greșit: IDE nu va elimina probleme unei aplicații.

Atunci când trebuie să alegem dintre mai multe variante, trebuie să luăm în vedere mai multe lucruri esențiale în luarea unei decizii:

Platforma de dezvoltare utilizată

Limbajul de programare

Tipul soluției ce urmează a fi dezvoltată și eventualele restricții ce pot apărea în momentul alegerii unei platforme dedicate

Limitări temporale ce pot favoriza dezvoltarea rapidă a unei aplicații sau, după caz, încetinirea acesteia

Capacitate

Preț

Licență

2.1 PhpStorm

PhpStorm este un IDE comercial (cross-platform IDE) (mediu de dezvoltare integrat) pentru PHP, construit de compania JetBrains din Republica Cehă.

PhpStorm oferă un editor pentru PHP, HTML și JavaScript cu analize de cod pe zbor, prevenirea erorilor și refactorii automate pentru codul PHP și JavaScript. Finalizarea codului PhpStorm acceptă PHP 5.3, 5.4, 5.5, 5.6, 7.0, 7.1, 7.2, 7.3 și 7.4 (proiecte moderne și vechi), inclusiv generatoare, coroutine, ultimul cuvânt cheie, listă în foreach, spații de nume, închideri, trăsături și scurt array sintaxă. Include un editor SQL complet, cu rezultate de interogare editabile.

PhpStorm este scris în Java. Utilizatorii pot extinde IDE instalând pluginuri create pentru PhpStorm sau își pot scrie propriile lor pluginuri. Software-ul comunică de asemenea cu surse externe precum XDebug.[9]

2.2 HeidiSQL

HeidiSQL este foarte ușor de învățat și de încredere conceput pentru dezvoltatorii web folosind popularul server MySQL, bazele de date Microsoft SQL și PostgreSQL. Vă permite să răsfoiți și să editați date, să creați și să editați tabele, vizualizări, proceduri, declanșatoare și evenimente programate. De asemenea, puteți exporta structura și datele fie în fișier SQL, clipboard sau către alte servere.

2.3 SublimeText 3

Sublime Text este un editor de coduri sursă multiplă platformă cu o interfață de programare a aplicațiilor Python (API). Suporta nativ multe limbaje de programare și limbaje de marcare, iar funcțiile pot fi adăugate de utilizatori cu plugin-uri, construite în mod obișnuit în comunitate și întreținute sub licențe de software liber.[10]

2.4 XAMPP

XAMPP este un pachet de programe free software, open source și cross-platform web server, care constă în Apache HTTP Server, MySQL database și interpretoare pentru scripturile scrise în limbajele de programare PHP și Perl.

Numele XAMPP este un acronim pentru:

X (de la "cross", care înseamnă cross-platform)

Apache HTTP Server

MySQL

PHP

Perl

Acest program are la bază termenii licenței GNU și acționează ca un web server capabil de a servi pagini dinamice. XAMPP este disponibil pentru mai multe sisteme de operare: Windows, Linux, Solaris, și Mac OS X, și este utilizat în principal pentru dezvoltarea proiectelor web. Acest software este util pentru crearea paginilor dinamice, utilizând limbaje de programare ca PHP, JSP, Servlets.

În mod oficial, designerii XAMPP au avut intenția de a îl utiliza numai ca utilitar de dezvoltare, pentru a permite designerilor și programatorilor web să își testeze munca pe calculatoarele proprii, fără a avea nevoie de acces la Internet. Pentru a face posibil acest lucru, multe caracteristici de securitate importante sunt dezactivate în mod implicit. In practică, totuși, XAMPP este uneori utilizat pentru a servi pagini web în World Wide Web. Un utilitar special este asigurat pentru a proteja prin parolă cele mai importante părți ale pachetului.

XAMPP deasemeni asigură suport pentru crearea și manipularea bazelor de date în MySQL și SQLite între utilizatori.[11]

CAPITOLUL III – Specificații tehnice

3.1 Structură DB

Baza de date este o componentă esențială a proiectului, în ea se păstrează diferite informații fără de care site-ul nu ar putea să funcționeze.

Proiectarea bazei de date presupune cunoașterea problemei ce trebuie rezolvată de către aplicație și în primul rând cunoașterea datelor ce trebuie salvate(dimensiune, tipologie, etc).

Conectarea bazei de date am făcut-o folosind:

Baza de date este o baza de date normalizată.

Baza de date contine 8 tabele: client, comacc, freelancer, images, login, logo, membri_adresa, membri_contact.

Fig 3.1.2 lista tabele

În tabela client sunt salvate datele pentru fiecare comandă

Fig 3.1.3 tabela client

În tabela “comacc” găsim comenzile la care freelanceri au decis să le accepte și să lucreze la ele.

Fig 3.1.4 tabela comacc

În tabela “freelancer” găsim numele fiecărui freelacer, dacă este disponibil sau nu, ultima dată când a fost online;

Fig 3.1.5 tabela freelancer

În tabela “images” sunt salvate imaginile expuse pe dashboard de freelancers, care conține numele imagini, prețul și categoria;

Fig 3.1.6 tabela images

În tabela “login” se salvează username-ul și tipul fiecarui utilizator;

În tabela membri_adresa” găsim adresa fiecărui utilizator;

Fig 3.1.7 tabela membri_adresa

În tabela “membri_contact” găsim date de contact pentru fiecare utilizator;

Fig 3.1.8 tabela membri_contact

3.2 Diagrama UML de activitate

Diagrama UML de activitate pentru administrator:

Diagrama UML de activitate pentru freelacer:

Diagrama UML de activitate pentru user:

3.3 Securitate

Pentru fiecare pagină se verifică dacă utilizatorul este autentificat și tipul de utilizator(user, freelancer sau administrator).

De exemplu în această secvență de cod se verifică dacă utilizatorul logat este freelancer, dacă nu este freelancer și este logat ca și administrator sau user acesta va fi trimis înapoi pe pagina de home, dacă nu este logat sub nici un tip de utilizator acesta va fi trimis înapoi spre pagina de log in.

Fiecare session id se salveză prin urmatoarea secventa de cod, iar dacă nu exista un session id acesta va fi redirecționat din nou pe lagina de Log in:

CAPITOLUL IV – Descrierea aplicației

4.1 Tema proiectului

Tema acestui proiect este realizarea unei aplicatii responsive ce poate fi accesata de toate platformele cum ar fii desktop, laptop, telefon, etc.

Am ales această temă pentru ai ajuta să-și obțină logo-ul dorit pe cei care iși încep o nouă afacere sau doresc să-și schimbe logo-ul actual cu unul mai bun, iar freelanceri să-și obțină un venit suplimentar în timpul lor liber.

Fiecare pagină este împărțită în trei părți și anume:

• Header

Header-ul se găsește în partea de sus a aplicației, el conține zona de meniu al aplicației, aceasta fiind aceeași pentru fiecare pagină în parte în functie de tipul de utilizator logat.

• Content (Conținut)

Conținutul este acea parte din pagină unde se afișează toate datele pe care utilizatorul, poate să le vadă, acesta fiind diferit de la o pagină la alta.

• Footer

Footer-ul este reprezentat de zona inferioară a paginii și este același pentru toate paginile.

4.2 Pagina de log in

Pe prima pagină utilizatorul se poate conecta, poate alege să rămână conectat sau dacă nu este deja înregistrat are posibilitatea de a se înregistra.

Această pagină face și câteva verificări înainte de a se putea loga, cum ar fi:

Toate câmpurile trebuie complectate

Se verifică parola, în cazul în care aceasta sau numele de utilizator nu sunt corecte se va afisa:

“Invalid Username and Password Combination”

4.3 Înregistrare

În pagina de înregistrare utilizatorul are 2 optiuni de înregistrare, dacă dorește să fie user sau freelancer.

În funcție de câmpul ales, va avea de completat un form cu câmpuri diferite.

4.4 Forgot Password

Dacă se întâmplă ca un utilizator să-și uite parola, acesta poate poate da click pe “Forgot Password?” din pagina de log in pentru a fi trimis să complecteze un form cu username-ul și adresa de mail

Ambele câmpuri sunt verificate cu javascript dacă sunt completate sau nu.

Verificare username câmp:

Verificare email câmp:

Validare adresă de email:

4.5 Dashboard

Dashboardul este pagina în care toate tipurile de utilizator au acces, aici freelancerii iși expun creațiile spre vanzare, completând un pret și categoria din care fac parte. Utilizatori normali pot sa contacteze freelanceri pentru a cumpara logo-ul sau a plasa o comanda pentru un logo asemanator. Adminstratorul pagini poate edita sau șterge logo-urile greșite.

Avem și un buton de log out poziționat în partea dreaptă

Cod html, care ne trimite la fișierul logout.php.

Aici sesiunea curentă este distrusă și suntem redirecționați din nou la pagina de Log in.

Fig 4.5.3 Cod php buton

4.6 Freelancers

În pagina de freelancers putem să vedem toți freelancerii înregistrati în momentul actual pe platformă, dacă sunt disponibili sau nu și ultima dată când au fost online, dacă selectăm acțiunea de view, avem posibilitatea de a vedea detaliile de contact a freelancerului pentru al contactata.

Dacă apasăm pe view o să putem vedea detali suplimentare despre freelancerul respectiv, putem să-i vedem datele de contact și adresa.

Fig 4.6.2 pagina freelancer

4.7 Comenzi

În pagina de viziualizare comenzi vedem toate comenzile plasate în momentul actual pe platformă, de către cine au fost plasate comenziile, statusul lor dacă sunt terminate sau nu, bugetul lor, data la care au fost create, dacă au fost modificate și posibilitatea de a vedea mai multe detali despre o anumită comandă dacă selectăm butonul de view.

După ce apasăm pe view o să fim redirectionăm într-o altă pagină unde sunt afișate detalii suplimentare despre comandă, precum sloganul ales, o descriere complectată de utilizator despre cum dorește să fie logo-ul sau datele sale de contact. Iar dacă este freelancer are opțiunea de a accepta comanda și de a informa utilizatorul ca lucrează la comanda sa.

4.8 Comenzile mele

Pagina “comenzile mele” este asemănătoare cu cea de comenzi, doar că aici fiecare utilizator iși poate vedea proprile comenzi plasate pe site. Pagina este unică pentru fiecare utilizator, dacă nu are nici o comandă activă, pagina va fi goală.

Dacă apasăm pe view, o să putem vedea toate detalile comenzi, adresa noastră, datele de contact, data la care am adăugat comanda, posibilitatea de a edita comanda sau dacă vrem să renunțăm la ea, avem posibilitatea de a o șterge.

Fig 4.8.2 Comenzile mele

Dacă dorim să ștergem comanda o să primim un mesaj de alertă unde trebuie să confirmăm că dorim să ștergem comanda.

4.9 Comenzi preluate

În această pagină vedem comenzile care au fost acceptate de freelancers și au decis să lucreze la ele.

Putem vedea id-ul comenzi care a fost acceptată, nume și domeniul pentru logo, numele freelancerului care a acceptat comanda și datele sale de contact.

4.10 Setări cont

În pagina ”setari cont”, avem posibilitatea de a ne vedea detalile contului, dacă dorim să ne schimbăm parola, datele de contact sau adresa introdusă, sau ștergerea contului de pe website. Pentru administrator si pentru clienți pagina de setări este la fel.

Dacă dorim să ne schimbăm parola, va trebui să introducem parola curentă și noua parolă. Dacă utilizatorii greșesc parola, ei nu o vor recunoaște. Confirmarea parolei verifică dacă parolele sunt identice, solicitând utilizatorilor să își tasteze noua parolă de două ori.

Dacă suntem logați ca și freelancer pe site, pagina de setări cont, diferă față de utilizator. Aici găsim creațiile adăugate de noi, avem posibilitatea de a le editate sau de a le șterge de pe slideshow. Pe langă creații putem să ne edităm și detalile personale la fel ca și ceilalți utilizatori.

Pentru editarea creațiilor, avem posibilitatea să le schimbăm numele, prețul și categoria din care fac parte.

Fig 4.10.4 editare creație publică

Pentru a șterge o postare, trebuie să confirmăm un mesaj de alertă.

Fig 4.10.5 mesaj de alerta

4.11 Adăugare comandă

În colțul de sus al pagini “comenzile mele” găsim un buton care ne permite să adăugăm noi comenzi pe site.

Pentru a adăuga o nouă comandă trebuie să completăm urmatorul form:

Toate câmpurile trebuie completate obligatoriu daca dorim să salvăm comanda introdusă. Fiecare câmp este verificat cu javascript dacă este complectat sau nu.

Verificare dacă câmpul “nume client” este completat:

Verificare dacă câmpul “domeniu” este completat:

Verificare dacă câmpul “Slogan” este completat:

Verificare dacă câmpul “Descriere” este completat:

Verificare dacă câmpul “Buget” este completat:

4.12 Comenzi acceptate

În această pagină freelancerul poate vedea comenzile pe care le-a acceptat și a decis să lucreze la ele.

El are posibilitatea să renunțe la comenzile la care dorește sau dacă a terminat comanda respectivă poate să trimită un preview clientului care a postat comanda.

Dacă freelancerul este hotărât să trimită un preview la comandă, poate da click pe “send the order” de unde va fi redirecționat pe „trimite comandă”, unde acesta poate încărca imaginea și prețul dorit pentru munca depusă de el.

Dacă freelancerul decide că vrea să renunțe la o comandă, apasă pe butonul de “give up” după care trebuie să confirme pritr-un mesaj alert că vrea să renunțe.

4.13 Adăugare creații publice

Aici freelanceri au posibilitatea de a încărca propriile lor creații care vor fi expuse pe dashboard, în pagina de home.

Freelancerul trebuie să introducă un preț și o categorie pentru fiecare logo uploadat pe site. Apasând pe “alege fișierul” are posibilitatea să aleagă un fișier cu formatul '.jpg', '.jpeg', '.gif' sau '.png'.

4.14 Comenzi terminate

În această pagină utilizatori care au plasat comenzi, pot să vadă dacă anumiți freelanceri au terminat comenzile plasate de ei. Dacă o comandă a fost terminată avem posibilitatea de a apăsa pe Vizualizare pentru a vedea preview-ul trimis de freelancer.

De aici o să fim redirecționați pe altă pagină unde ne este afișat numele freelancerului care a lucrat la comandă, prețul dorit și un preview la logo-ul făcut de el după criterile impuse de noi.

4.15 Membri

Această pagină este disponibilă doar pentru administrator.

Aici adminstratori pagini pot vedea toți membrii înregistrați pe site și nivelul lor de acces.

Dacă un nume este necorespunzător sau există dublicate-uri administratorul poate decide dacă dorește să-i editeze numele sau să-i șteargă contul de pe site.

Capitolul V – Manual de instalare și utilizare

5.1 Specificații de instalare

Pentru a rula proiectul avem nevoie de un pachet software care ar permite suportul rulării sistemului, dar să ofere și posibilatea de dezvoltare ulterioară a acestuia.

Pentru rularea proiectului sunt necesare:

Apache compilator

Php

Mysql server

Spatiu de stocare

Pentru dezvoltarea ulterioara a proiectului sunt necesare:

Un mediu de dezvoltare ( PhpStorm / Sublime Text 3)

Un instrument de administrare pentru MySQL

Pașii pentru instalarea proiectului și rularea acestuia sunt:

Pentru Windows sau Os X, se poate instalarea soft-ului XAMPP, care beneficează de o interfață grafică, acces rapid la fișierele de configurare. XAMPP vine la pachet cu serviciul de baze de date MySQL și cu o versiune actualizată de PHP.

Pentru sistemul de operare Linux XAMPP nu este disponibil, dar avem o solutie alternativă LAMP.

Se pornesc MySQL și Apache

Se copiază proiectul in folderul htdocs (unde este instalat XAMPP)

Se accesează în browser url-ul: localhost

5.2 Manual de utilizare

5.2.1 Înregistrarea și logarea în sistem

Această platformă oferă 2 posibilități de înregistrare a utilizatorilor, prima este de client, introducând datele: username, password, tara, judet, oras, cod postal, telefon, adresa de mail, și a doua metodă: freelancer introducând: username, password, nume freelancer, disponibil, tara judet, oras, cod postal, telefon, adresa de mail. După ce utilizatorul s-a înregistrat este gata pentru a se loga pe site.

5.2.2 Meniul aplicației

După logare toți utlizatori sunt trimiși pe pagina de home, aici găsim un slideshow unde vedem toate creațile freelancerilor expuse.

În fuctie de tipul de utlizator logat meniu diferă. Fiecare tip de utilizator beneficează de alt meniu.

Meniu client:

Meniu “Home” în această fereastră clienți pot doar să vadă pe slidershow creațile, prețul și categoria respectivă.

Meniu “comenzile mele” în această fereastră iși poate vedea toate comenzile plasate pe site.

Meniu “Comenzi preluate” în această fereastră poate vedea dacă freelanceri au decis să lucreze la comenzile sale.

Meniu “Vizualizare Freelancers” în acastă fereastră poate vizualiza toți freelanceri înregistrati pe site, dacă sunt disponibili sau nu, ultima data online.

Meniu “setari cont” în această fereastra își poate vedea datele contului, modifica parola, editarea datelor sau ștergerea contului.

Meniu freelancer:

Meniu “Home” în această fereastră freelanceri pot să vadă pe slidershow creațile, prețul și categoria respectivă.

Meniu “vizualizare comenzi” în această fereastră poate vedea toate comenzile plasate pe site, data la care au fost create, bugetul acestora, statusul comenzi și posibilitatea de a vedea mai multe informații despre comenzi.

Meniu “Vizualizare Freelancers” în acastă fereastră poate vizualiza toți freelanceri înregistrati pe site, dacă sunt disponibili sau nu, ultima data online.

Meniu “Comenzi acceptate” în această fereastră poate vedea comenzile la care a decis să lucreze, să trimită un preview de logo sau să renunte la comandă.

Meniu “Adaugare creati publice” în această fereastră poate să-și încarce proprile creați introducând un preț si o categorie pentru logo-ul respectiv.

Meniu “detalii cont cont” în această fereastra își poate vedea creațile publice, să le editeze sau să le șteargă, să-și vadă datele contului, modifice parola, editeze date sau să-și ștergă contul.

Meniu adminstrator:

Meniu “Home” în această fereastră adminstratori pot să vadă toate creațile, să le editeze sau să le șteargă.

Meniu “Membri” în acestă fereastră poate vizualiza toti membri înregistrați, modifica nivelul de acces al utilizatorilor sau să steargă anumite conturi.

Meniu “vizualizare comenzi” în această fereastră poate vedea toate comenzile plasate pe site, data la care au fost create, bugetul acestora, statusul comenzi și posibilitatea de a vedea mai multe informații despre comenzi.Dacă observă nereguli le poate edita sau sa le steargă.

Meniu “Vizualizare Freelancers” în acastă fereastră poate vizualiza toți freelanceri înregistrati pe site, dacă sunt disponibili sau nu, ultima data online.

Meniu “setari cont” în această fereastra își poate vedea datele contului, modifica parola, editarea datelor sau ștergerea contului.

5.2.3 Adăugare comenzi

Pentru a adauga o comandă trebuie să urmăm câțiva pasi simpli. După ce ne-am logat accesăm pagina de comenzi din meniu. O dată ajunși aici o să observăm un “plus” în colțul din dreapta, o să dăm click pe el și o sa fim redirecționați pe alta pagină unde o sa complectăm un form în care introducem detalile despre comanda pe care dorim să o plasăm după care apasăm pe butonul de save și am plasat comanda.

5.2.4 Acceptare comenzi

Pentru a accepta o comandă, freelancerul trebuie să intre în fereastra cu comenzi, să apese pe buton „view more” pe o comandă specifică, iar dacă s-a decis ca vrea să construiasca logo-ul ales va putea apasa pe butonul “take it” disponibil.

Concluzii

Logo-ul este cel mai important instrument al identității vizuale. Asta pentru că, întreaga identitate a brandului este concentrată în această reprezentare grafică care are rolul de a transmite esența business-ului tău.

Logo-ul promovează afacerea, este un element central în orice strategie de marketing.

Logo-ul poate atrage potențialii clienți.

Logo-ul oferă o identitate unică a afacerii tale.

Logo-ul nu reprezintă doar un nume ori un simbol sau o imagine, logo-ul este chiar esența unui brand. La orice pas suntem înconjurați de logo-uri, iar pentru a ne face loc in acesta aglomerație trebuie să venim cu ceva nou și memorabil.

Lumea noastra este într-o continuă dezvolare și tot mai mult se întamplă în mediul online. Orice informație o găsim în ziua de astăzi pe internet, însă ca anumite persoane fără cunoștințe de design pot folosi această platformă pentru a obține logo-ul dorit.

Obiectivul principal al acestei platforme este de a crea logo-urile dorite pentru utilizatori care plasează comenzi, iar freelanceri să-și câștige existenta prin crearea de logo-uri.

Posibilități de dezvoltare

Aplicația web pe care am creat-o este doar la prima versiune(alfa). Multe funcționalități pot fi îmbunătățite. De asemenea se pot adăuga multe functionalitati noi. Printre functionalitățile care s-ar putea adauga la această aplicatie ar fi:

posibilititatea ca utilizatori să aleagă dintre mai multe fonturi când plasează o comandă

utilizatori să-și modeleze la început un logo

posibilitatea de a încărca imagini la comenzi

posibilitatea de fi în mai multe limbi

un sistem de backup bun

Bibliografie

[1] https://ro.wikipedia.org/wiki/Apache_(server)

[2] https://ro.wikipedia.org/wiki/SQL

[3] https://ro.wikipedia.org/wiki/PHP

[4] https://ro.wikipedia.org/wiki/JavaScript

[5] https://ro.wikipedia.org/wiki/Cascading_Style_Sheets

[6] https://ro.wikipedia.org/wiki/HyperText_Markup_Language

[7] https://ro.wikipedia.org/wiki/Bootstrap

[8] https://ro.wikipedia.org/wiki/Mediu_de_dezvoltare

[9] https://en.wikipedia.org/wiki/PhpStorm

[10] https://en.wikipedia.org/wiki/Sublime_Text

[11] https://ro.wikipedia.org/wiki/XAMPP