UNIVERSITATEA ,,ALEXANDRU IOAN CUZA”, IAȘ I FACULTATEA DE ECONOMIE ȘI ADMINISTRAREA AFACERILOR
Proiect Groupware
Documentație site colaborativ “Cr ème De D e L a Cr è me ”
Gavriliță Eliza – Eliza – Grupa 2 Popescu Loredana – Grupa 1
2014
Cuprins : WampServer..................................................................................................................... 1.Tehnologia WampServer.................................................................... ................................................. 3
1.1 Descărcare WampServer ............................................................................................................ ............................................................................................................. .. 3 .................................................................................................................. ............. 3 1.2 Instalare WampServer ...................................................................................................... ......................................................................................................... ................................................ 10 1.3 Interfața WampServer -ului -ului ......................................................... ....................................................................................................................... .............. 10 1.4 Crearea unui alias .......................................................................................................... ......................................................................................................... 12 1.5 Introducerea unui nou user . ......................................................................................................... ............................................................................................................ ................................................ 14 1.6 Crearea unei baze de date ............................................................ 2. WordPress. Instalare. Realizare site colaborativ. ............................................................. ........................................................................... .............. 16
2.1 Descărcare WordPress ............................................................... ............................................................................................................... ................................................ 16 2.2 Instalare WordPress .................................................................... ................................................................................................................... ............................................... 17
2.3 Editare WordPress. Realizare site ............................................................................................... 19 ....................................................................................................... .................................... 20 2.3.1 Definirea temei site-ului...................................................................
2.3.2 Structurarea meniului site-ului .............................................................................................21 ..................................................................................... ......................... 23 2.3.3 Elementele de media a unei paginii ............................................................
2.3.4 Construirea meniului ............................................................................................................26 ........................................................................................................ 27 2.3.5 Customizarea Customizarea site-ului. ........................................................................................................ .................................................................................................... ..................................... 29 2.3.6 User. Formular Formular de logare logare ............................................................... ......................................................................................... ......................... 31 2.3.7 Crearea unui Forum. Comentarii.................................................................
2.3.8 Crearea formularului de contact ...........................................................................................34 Bibliografie:.................................................................................................................. ........................................................................................................................................... ......................... 39
2
Cuprins : WampServer..................................................................................................................... 1.Tehnologia WampServer.................................................................... ................................................. 3
1.1 Descărcare WampServer ............................................................................................................ ............................................................................................................. .. 3 .................................................................................................................. ............. 3 1.2 Instalare WampServer ...................................................................................................... ......................................................................................................... ................................................ 10 1.3 Interfața WampServer -ului -ului ......................................................... ....................................................................................................................... .............. 10 1.4 Crearea unui alias .......................................................................................................... ......................................................................................................... 12 1.5 Introducerea unui nou user . ......................................................................................................... ............................................................................................................ ................................................ 14 1.6 Crearea unei baze de date ............................................................ 2. WordPress. Instalare. Realizare site colaborativ. ............................................................. ........................................................................... .............. 16
2.1 Descărcare WordPress ............................................................... ............................................................................................................... ................................................ 16 2.2 Instalare WordPress .................................................................... ................................................................................................................... ............................................... 17
2.3 Editare WordPress. Realizare site ............................................................................................... 19 ....................................................................................................... .................................... 20 2.3.1 Definirea temei site-ului...................................................................
2.3.2 Structurarea meniului site-ului .............................................................................................21 ..................................................................................... ......................... 23 2.3.3 Elementele de media a unei paginii ............................................................
2.3.4 Construirea meniului ............................................................................................................26 ........................................................................................................ 27 2.3.5 Customizarea Customizarea site-ului. ........................................................................................................ .................................................................................................... ..................................... 29 2.3.6 User. Formular Formular de logare logare ............................................................... ......................................................................................... ......................... 31 2.3.7 Crearea unui Forum. Comentarii.................................................................
2.3.8 Crearea formularului de contact ...........................................................................................34 Bibliografie:.................................................................................................................. ........................................................................................................................................... ......................... 39
2
1.Tehnologia WampServer
1.1 Descărcare WampServer Un site colaborativ colaborativ reprezintă un mod de de interacționare între utilizatorii unui site prin intermediul a diverselor aplicații ce pot fi instalate . Acestea sunt din ce în ce mai cerute pe piața actuală a marketing-ului, motivul fiind de a păstra o legătură l egătură permanentă și directă cu consumatorii. Pentru a realiza un site de acest gen, am folosit tehnologia WampServer pentru
a ne putea face legătură cu platforma pe care vom dezvolta site -ul și anume, WordPress. WampServer reprezintă un mediu de dezvoltare pentru aplicații web. Acesta vă permite să vă creați creați aceste aplicații aplicații web prin intermediul a patru patru module ce se instalează odata cu instalarea tehnologiei. Acestea sunt: Apache2, PHP, o baz ă de date My
SQL și
PhpMyAdmin ce vă permite să gestionați cu ușurință bazele de date create de dvs. WampServer se poate descărca automat de la adresa http://www.wampserver.com/en/
și are o dimensiune de 41MB.
Figure 1 Site pentru pentru a descarca WampServer WampServer
Pe acest link vă este oferită tehnologia pentru tehnologia pentru 32 BITS și 64 64 BITS. 1.2 Instalare WampServer
După ce am descarcat aceste kit, începem să îl instalăm la fel ca orice altă aplicație ce necesită a fi instalată. Pașii de instalare sunt :
1. Deschidem Wizard-ul dând dublu-click pe kit-ul de instalare.
3
Figure 2 Wizard-ul de instalare pentru WampServer
2.
După ce am deschis wizard -ul, începem instalarea propriu-zis prin selectarea butonului Next. După această bifăm că suntem de acor d cu termenii și condițiile ce le implică WampServer.
Figure 3 Termenii și condiții la instalare
4
3.
În continuare trebuie să selectăm directorul unde vrem să îl instalăm pe calculator.
Figure 4 Selectarea directorului în care vrem să instalăm
4.
În următoarea fereastră putem selecta da/nu dacă dorim crearea unei iconițe pe desktop și a unei comenzii rapide de accesare.
Figure 5 Crearea unei iconițe/comanda rapidă de acces are
5
5.
Urmează o fereastră în care avem toate detalii legate de această tehnologie:
Figure 6 Caracteristicile WampServer-ului
6.
Urmează procesul de instalare ce durează aproximativ 1-2 minute în funcție de configurația calculatorului.
Figure 7 Procesul de instalare
6
7.
În acest moment vom fi întrebați cu ce browser vrem să lucrăm. În mod implicit acest pas va fi completat cu Internet Explorer, dar cel mai recomadat este Mozilla Firefox.
Figure 8 Alegerea browser-ului dorit
8.
Următoarea etapă constă în alegerea adresei de e-mail, putem lăsa deja cea implicit setată.
Figure 9 Stabilirea adresei de e-mail
7
9. Acum procesul de instalare s-a finalizat, iar fereastra de finalizare arată ca în
figură nr. 10.
Figure 10 Finalizarea instalării
După ce s-a terminat procesul de instalare în bara de stare din josul PC- ului va apărea o
iconiță cu WampServer -ul. Dând un simplu click putem observa cele patru module de care
am discutat și multe alte funcții (fig. 9).
Figure 11 Accesarea WampServer-ului
8
Pentru a fi siguri că WampServer -ul funcționează, există o metodă foarte ușor de accesat
și anume trebuie să verificăm dacă funcționează Test Port 80. Ea presupune să
accesăm opțiunea localhost (prima linie din WampServer) sau tot pentru a deschide localhost scriem pur și simplu în browser adresa 127.0.0.1.
Figure 12 Verificare dacă instalarea a fost făcută corect
Accesând Test Port 80 se deschide o fereastră în care dacă mesajul este ““Your port 80 is actually used by: Server: Apache/2.4.9
PHP/5.5.12 ”, atunci serverul este instalat corect.
Figure 13 Mesajul de confirmare
9
1.3 Interfața WampServer -ului După cum spuneam putem să scriem și
în browser. Fereastra următoare reprezintă
interfața WampServer-ului văzută în orice browser.
Figure 14 Interfață WampServer
1.4 Crearea unui alias Acum cel mai indicat este de a construi un Alias
ce va stabili locația unde vor avea
acces utilizatorii cu drepturi de vizualizare a paginilor web ce vor fi construite. Acesta se
accesează din meniul WampServerului Apache Alias directories Add an Alias.
Figure 15 Adăugar ea unui Alias
10
Pentru Alias trebuie să specificăm numele acestuia, cât și adresa în care îl vom salva. Dacă adresa este corect specificată atunci vom primi mesajul: “Alias created”.
Figure 16 Crearea Alias-ului
După ce ne-am configurat un alias, trebuie să accesăm secțiunea destinată adăugării
sau ștergerii urilizatorilor, precum ș i definirea unui utilizator principal. Pentru a realiza acest pas accesăm meniul WampServer phpMyAdmin, iar în acest moment ni se va deschide o fereastră prin browser ca cea din figura 17.
Figure 17 Interfață phpMyAdmin
11
În această fereastră putem observa bazele de date deja create, putem seta o nouă limbă de comunicare, putem schima tema de configurare, fontul,
putem adăuga sau șterge
utilizatori și multe alte opțiuni, toate aflându-se în cele 11 butoane din partea de sus a phpMyAdmin-ului. 1.5 Introducerea unui nou user
După cum am fost, vom crea un nou user. B utonul pentru a face acest lucru se numește Users, iar prin simplu click pe acesta fereastra de deschidere va fi la fel ca cea din figura 18.
Figure 18 Adăugare unui nou user
Aici după cum putem observa, există cinci user i deja creați iar mai jos avem o opțiune de a adăuga un nou user “ Add user ”. La selectarea acestei o pțiuni fereastră va arăta ca în figura 19.
12
Figure 19 Adăugarea unui nou user
Aici trebuie să completăm pentru noul user pentru care vrem să îl introducem numel e acestuia, parola precum și ce drepturi îi oferim. Noi am creat un Super User ce se numește admin_lore și beneficiază de toate drepturi le de acces și modificare.
Figure 20 Drepturi unui user
După ce am terminat de completat trebuie să primim mesaju l că user -ul pe care l-am introdus a fost inserat în sistem.
13
Figure 21 Mesajul de confirmare a înregistrării unui nou user
Noul user îl putem găsi în acest moment și în lista user -ilor prezentați la început.
Figure 22 Existența user -ului nou inserat
1.6 Crearea unei baze de date
În spatele unui site trebuie să existe și o bază de date pentru înregi strarea tuturor datelor necesare. Acest lucru se realizează la fel cum am introdus noul user, numai că de această dată selectăm alt buton. In strucțiunea de navigare este WampServer Databases Create
database.
14
phpMyAdmin
Figure 23 Crearea unei baze de date
Pentru baza de date pe care vrem s ă
o creem trebuie doar să specificăm numele
acesteia și tipul. Numele bazei de date introduse de noi se numște “CremeDeLaCreme” și am lăsat tipul implicit, “Collation”.
Figure 24 Verificarea existenței bazei de date noi introduse
15
2. WordPress. Instalare. Realizare site colaborativ.
WordPress este una dintre cele mai folosite platforme de dezvolatare a unui site
colaborativ, datorită funcțiilor cu care este înzestrată această tehnologie. Pentru a instala WordPress
este necesar ca serverul WAMP să fie descărcat, instalat și deschis și să avem
creată o bază de date în utilitarul MySQL. Aceste lucrui deja le -am realizat de aceea vom trece la descărcarea și instalarea WordPress -ului.
2.1 Descărcare WordPress WordPress
se
poate
https://wordpress.org/download/,
descărca
de
pe
site -ul
acestei
tehnologii
există mai multe versiuni, dar noi am ales versiunea
WordPress 3.9.1 ce are o memorie de 6.0 MB, iar procesul de instalare durează aproximativ 5 minute.
Figure 25 Descărcare WordPress
După ce acesta s -a descărcat, dezarhivăm arhiva de instalare, iar toate extragerile din arhivă trebuies mutate in directorul www aflat în directorul de instalare a WampServer-ului.
16
Figure 26 Stabilirea legăturii dintre WordPress ș i WampServer
2.2 Instalare WordPress
După ce am făcut transferul tut uror datelor WordPress-ului în WampServer, putem începe editarea propriu-zisă browser a adresei
a WordPress -ului, acesta deschizându-se fie prin tastarea în
http://localhost/wordpress/, fie din accesarea localhost-ului din
WampServer ce este deschis în bara de jos.
La accesarea adresei va trebui să începem să
configurăm WordPress -ul. Vom primi un mesaj în care vom fi întrebați dacă avem nevoie de ajutor în procesul de instalare, dacă nu apăsăm opțiunea Create a Configuration File.
Figure 27 Instalare WordPress
17
Următoarea fereastră ne înștiințează asupra datelor pe care trebuie să le completă m, precum că trebuie să ne definim baza de date.
Figure 28 Instalare WordPress
Deci pentru noua bază de date pe care vrem să o introducem trebuie să specificăm numele acesteia, user (implicit root), parola și o adresa de host.
Figure 29 Stabilirea detaliilor referitoare la baza de date
18
După ce am completat aceste date trebuie să ne definim utilizatorul ce va avea acces la editarea site-ului.
Figure 30 Definire user
Fereastra de logare va arăta ca cea din figura nr. 31.
Figure 31 Fereastra de acces user
2.3 Editare WordPress. Realizare site Fereastra cu care vom lucra arată
ca în figura ce urmează, toate opțiunile sunt
înregistrate în secțiunea Dashboard. Această cuprinde module de lucru pentru a realiza 19
meniul site-ului, elemente de grafică, de gestionare a user -ilor, dar toate aceste elemente vor
fi definte pe larg în cele ce urmează.
Figure 32 Interfață de lucru a WordPress -ului
2.3.1 Definirea temei site-ului
Pentru ca site-ul să arăte într -un mod plăcut utilizatorului, se alege de multe ori o pentru
temă
acestă, fapt care ne ușurează definirea în permanență a culorilor și de combinarea
acestora. Pentru a face acest lucru, avem în utilitarul de lucru, secțiunea Appereance
Themes, iar aici, ne putem alege una dintre cele deja instalate sau putem să ne încărcăm o alta, pe care o dorim. Noi
am optat pentru varianta a doua și ne-am ales o alta din cele deja
instalate. Tema a fost descărcată themes/, și a fost încarcată după
de la adresa http://cupcakecrystal.com/tag/wordpress-
cum arată figura de mai jos.
Figure 33 Incărcare temă
20
După ce ne-am încărcat temă această trebuie să fie activată, prin simpla alegere a acesteia dintre celelalte.
Figure 34 Activarea temei
2.3.2 Structurarea meniului site-ului
Pentru orice site, este foarte important ca navigarea în meniu să se realizeze foarte ușor, fără a întâmpină nici un fel de dificultăți. Meniul nou trebuie să fie ca in figura ce urmează: HOME
DESPRE NOI
PRODUSE
GALERIE
COFETARIE
PATISERIE
TORTURI
BRUTARIE
Figure 35 Schema meniului de navigare
21
FORUM
CONTACT
După cum se observă meniul este alcătuit din 10 pagini web ce trebuiesc a fi realizate înainte de întocmirea propriu zis a meniului. Crearea unei pagini se efectuează accesând Dashboard Pages Add New.
Figure 36 Crearea unei pagini
Pentru această trebuie să definim numele (Titlu) și toate elementele de media ce vrem
să fie inserate pe acestea. În continuare vom prezenta construirea paginii “ Despre noi” și toate elementele ce o conțin. Această pagină va conține un filmuleț video și două imagini ce vor fi combinate cu câteva informații. Structura ei este reprezentată în figura nr. 37.
Figure 37 Pagina Despre noi
22
2.3.3 Elementele de media a unei paginii
adăugarea unei imaginii. Se realizează prin apăsarea opțiunii Add Media, iar aici, ne putem alege una dintre
imaginile deja existente sau putem să ne upload -ăm o alta din
calculator.
Figure 38 Inserarea unei imagini
adăugarea unui filmuleț. Se realizează la fel ca și când am adăuga o imagine, numai că acesta trebuie descărcat în preal abil în calculator.
Figure 39 Inserarea unui video
23
construirea unei galerii. Pentru a realiza o galerie ceva mai avansată ne putem instala diferite
plugins ce o să ne fie de mare ajutor. Pentru a ne instala un plugin, accesăm
Dashboards Plugins
Add
New, iar aici putem verifica dacă cumva nu avem unul
deja instalat de care avem nevoie, dacă nu căutăm cu ajutorul butonul de Search sau putem să îl u pload-ăm.
Figure 40 Plugins Photo Gallery
După ce l -am instalat, acesta trebuie să fie activat și după putem să îl accesăm foarte ușor. Fereastra de construire a unei galerry arată ca în figura nr. 41.
Figure 41 Construirea unei galerii de imagini
24
Aici alegem numele acesteia, o descriere dacă dorim sau nu, apoi ne alegem imaginile și modul lor de afișare. Există 7 moduri de afișare pentru care putem alege sau schimba diferite opțiuni, printre care viteza de apariție a imaginilor, daca dorim sau nu o descriere a acestora, câte imagini să apară pe o coloană și multe alte opțiuni.
Figure 42 Modurile de afișare a unei galerii
Varianta finală a paginii “Despre noi” după ce am inserat elementele de media despre care am vorbit cum se construiesc arată ca în figura nr. 43.
Figure 43 Pagina Despre Noi
25
2.3.4 Construirea meniului Formula de accesare este Dashboard menu. Din partea st ângă
Appeareance Menus Create
a new
a ferestrei ce se va afișa alegem paginile, prin simpla drug -drop iar
aici dacă punem o pagină un pic mai la stânga, sub o altă pagină deja introdusă, vom pune respectiva pagină ca subpagină la cea inițială.
Figure 44 Structura meniului
Iar meniul din site va arăta ca în figura ce urmează:
Figure 45 Meniul site-ului
26
2.3.5 Customizarea site-ului WordPress conține o funcție
accesează din Dashboards
în care putem să ne configurăm site-ul realizat. Ea se
Customize
și oferă mai multe opțiuni după cum se poate
observa din figura următoare.
Figure 46 Funcția Customize
Prima opțiune Site Title & Tagline ne ajută să ne definim sau să modificăm titlul site-ului, precum și să adăugăm sau nu
un subtitlu la acesta.
Figure 47 Site Title & Tagline
O altă opțiune este cea de a ne alege un background al site -ului. Acesta poate fi ales din cele existente sau poate fi încărcat din calculator și îi stabilim poziția acestuia.
27
Figure 48 Background-ul site-ului
O altă opțiune foarte folositoare este “ Widgets: Sidebar”. Aceasta permite adăugarea de noi widgets în partea dreaptă a site-ului. Putem adăuga un calendar, buton de Search, informații legate de contact, formular de login și multe altele.
28
Figure 49 Widgets Sidebar
2.3.6 User. Formular de logare
WordPress conține o secțiune pentru gestionarea user-ilor, în care putem adăuga, șterge, modifica multe detalii asupra acestora. Pentru fiecare nou user inserat trebuie să specificăm username-ul, email-ul, numele, prenumele și o parolă de acces.
Figure 50 Adăugarea unui nou us er
Deci, noi putem să ne definim noi utilizatorii, dar cei care accesează site -ul nostru și vor să intercaționeze cu ceilalți utilizatori pentru a afla diverse păreri, pot să își facă cont prin intermediul secțiunii de Login discutată un pic mai sus, ce se află în partea dreaptă a site -ului.
29
Aici utilizatorul va găsi un formular simplu de înregistrare iar dacă acesta este la prima interacțiune cu acest site, atunci accesează opțiunea Register și va începe procesul de întocmire a unui nou cont.
Figure 51 Formular de login
Butonul Register ce este încadrat l-am realizat folosindu-ne de plugin-ul Register Plus Delux, plugin ce ne permite
să specificăm ce date să ne ofere viitorul subscriber (figura
nr. 52), dacă vrem sau nu să primească o confirmare pe mail că i -am aprobat cererea de înscriere, politicile de securitate și confidențialitate și modul cum va arăta ceea ce vrem.
Figure 52 Formular de înregistrare
După ce aceștia și -au completat datele de identificare, ei trebuie să aștepte ca Super User-ul/
Administratorul să îi accepte cererea. Aceste cereri vor fi înregistrate în secțiunea
30
User-ilor din Dashboars, la Users Pending Approval,
după cum se observă di n figura
următoare pentru “eliza” trebuie îi confirmăm(Approve) sau putem să o respingem(Deny)
Figure 53 Aprobare utilizatori
Toți utilizatorii, îi putem vedea în secțiunea All users, precum și starea acestora, numărul de comentarii și postări.
Figure 54 Useri
. 2.3.7 Crearea unui Forum. Comentarii.
31
Una dintre părțile colaborative a unui site o reprezintă forum -ul. Prin intermediul acestuia utilizatorii pot să își împărtășească diferite păreră în legătură cu un subiect pe care aceștia și-l pot stabili. Pentru a putea intermedia cu un forum, utilizatorii trebuiesc a fi în prealabil înregistrați. Forumul ce se observă din figura nr. 55 este realizat prin intermediul unui plugin Forum, în care putem să îi modificăm diferite opțiuni, iar pentru a îl insera în interiorul site ului, forum-ul odată creat va genera un shortcode (de exemplu pentru forum-ul pe care noi lam instalat acest cod este [bbp-forum-index]) pe care îl vom introduce în interiorul unei noi pagini ce o vom constitui în partea de Visual.
Figure 55 Forum pentru site
32
Figure 56 Pagina pentru forum
Comentarii sunt păreri ale utilizatorilor ce nu pot fi structurate după anumite subiecte, secțiunea este foarte simplu de completat, pur și simplu trebuie să fim înregistrați și să scriem comentariu, după care îl vom posta. WordPress dispune de o opțiune ce se bifează implicit la alcătuirea unei noi paginii web, în care putem insera sau nu comentarii.
Figure 57 Specificare dacă vrem sau nu comentarii pe o pagină web
Secțiunea de scriere a unor comentarii va arăta ca în fig ura nr. 58:
33
Figure 58 Scrierea unui comentariu
2.3.8 Crearea formularului de contact
Orice site conține o pagină destinată pentru contact. Pentru a o realiza pe aceasta, putem alege din diferite plugin-uri pe care le avem la dispoziție, noi am folosit Contact Form
7, ce reprezintă un formular în care specificăm exact ce câmpuri să apară, care sunt obligatorii de completat, unde vor veni mesajele ce vor fi trimise observate din figurile nr.
și multe alte detalii ce pot fi
59 și 60.
Figure 59 Câmpurile formularului de contact
34
Figure 60 Adresa une vom primi mesajele oferite prin contact
Multe formulare conțin și acea parte de scrierea a unui anumit cod, pentru verificarea anti-robot.
Formularul inițial oferit de Contact Form 7, nu avea acest lucru, dar noi l -am
inserat în următoarea manieră.
Am copiat această parte mai jos
Figure 61 Cod Anti-Robot1
35
Am schibat mesajul instrucțiunii pe
care o are de efectuat utilizatorul
Figure 62 Cod Anti-Robot2
Am selectat Generate Tag și am ales zona CAPTCHA
Figure 63 Cod Anti-Robot3
36
Formularul de contact final arată ca în figura următoare :
Figure 64 Formularul de contact
Toate mesajele oferite prin completarea acestui formular, vor fi trimise pe adresa de email a cofetăriei ([email protected]), iar pentru o gestionare cât mai buna am folosit plugin SMTP SERVER.
Figure 65 Adresa de primire a mesajelor
37
Figure 66 Mail primit pe adresa cofetăriei
Pagina principală a site -ului nostru colaborativ, arată ca în figura de mai jos, în care putem observa elementele de intercționare a utilizatorilor, elementele de grafică și structură.
Figure 67 Pagina de home
38