CAPITOLUL 1. COMPONENTE SOFT UTILIZATE PENTRU REALIZAREA APLICAȚIEI 1.1. WEB SERVERS ȘI WEB APPLICATION SERVERS 1.1.1. Server Web 1.1.2. Pagini Web… [301806]

Cuprins

INTRODUCERE

CAPITOLUL 1. COMPONENTE SOFT UTILIZATE PENTRU REALIZAREA APLICAȚIEI

1.1. WEB SERVERS ȘI WEB APPLICATION SERVERS

1.1.1. Server Web

1.1.2. Pagini Web

1.1.3. Browsere Web

1.2. AVANTAJUL PAGINILOR WEB DINAMICE

1.2.1. Avantajele și dezavantajele de a avea un site Web dinamic

1.3. ÎNȚELEGEREA APLICAȚIILOR WEB

1.4. LIMBAJUL CSS3

1.4.1. NOU ÎN CSS3

1.4.2. Avantajele utilizării limbajului CSS3

1.5. LIMBAJUL HTML5

1.5.1. Nou in HTML5

1.5.2. Elementele eliminate din HTML5

1.5.3. Avantajele utilizării limbajului HTML5

1.5.4. Lista comenzi noi si descriere in HTML5

1.6. LIMBAJUL PHP

1.6.1. [anonimizat]

1.6.2. [anonimizat]

1.7. LIMBAJUL JAVASCRIPT

1.7.1. Cum se construiește limbajul JavaScript

1.7.2. Utilizări ale limbajului JavaScript

1.7.3. Inserarea codului JavaScript în pagină HTML

CAPITOLUL 2. TEHNOLOGII UTILIZATE

1.1. NOTEPAD++

1.2. XAMPP

1.3. PHOTOSHOP

1.4. NIVO SLIDER

1.5. SUBLIME TEXT

CAPITOLUL 3. DESCRIEREA APLICAȚIEI

1.1. [anonimizat]

1.2. [anonimizat]

1.3. [anonimizat] a resurselor hardware și software din domeniul tehnologiei informației oferă o mai bună comunicare și acces mult mai rapid la toate categoriile de informații. [anonimizat], printr-un simplu click de mouse se poate naviga prin miile de resurse informaționale din întreaga lume.

Această lucrare prezintă o [anonimizat], [anonimizat]3, HTML5 și JAVASCRIPT. Acest site reprezintă o implementare Web a unui site hotelier. Prin intermediul acestei aplicații web (site web), [anonimizat] . Site-ul web va facilita procesul de creeare a [anonimizat], [anonimizat], [anonimizat] e-mail prin funcția „mailto:….”.

[anonimizat], iar ultimul capitol reprezintă descrierea aplicației și modul în care aceasta a fost realizată.

Capitolul 1 – Componente soft utilizate pentru realizarea aplicației reprezintă o scurtă descriere a principalelor noțiuni legate de limbajele utilizate la realizarea aplicației.

Capitolul 2 – Tehnologii utilizate reprezinta o scurtă prezentare a tehnologiilor folosite pentru realizarea aplicației.

Capitolul 3 – Descrierea aplicației

Implementarea acestui site a fost realizată folosind tehnologiile HTML5,CSS3 si respectiv JavaScript.

Pentru formularul de contact s-a [anonimizat]-ul in aceasta lucrare.

Pentru setarea modalităților de afișare a [anonimizat]-ului s-a folosit un fișier .css, acesta putând fi modificat sau înlocuit și întregul site își schimba automat înfățișarea.

Capitolul 1. Componente soft utilizate pentru realizarea aplicației

Web Servers și Web Application Servers

Server Web

World Wide Web este contruit pe baza unui protocol numit Hypertext Transfer Protocol (HTTP). HTTP este un protocol mic și rapid care se potrivește foarte bine sistemelor informatice multimedia și distribuite și salturilor între site-uri.

Web-ul constă în pagini cu informații de pe gazde care rulează software de tip server Web. Serverele Web este un software care oferă (servește) pagini Web la cerere.

Serverul Web este un program, nu calculatorul în sine.

Fiecare server Web are o adresă IP și eventual un nume de domeniu. Orice calculator poate fi transformat într-un server Web prin instalarea software-ului de server și conectarea aparatului la Internet.

Există multe aplicații software de tip server Web. Două servere Web de conducere sunt Apache, serverul Web cel mai instalat, și Internet Information Server Microsoft (IIS). Alte servere Web sunt Novell Web Server pentru utilizatorii sistemului de operare NetWare și familia IMB de servere Lotus Domino, în primul rând pentru OS IBM/390 și AS/400 de clienți.

Apache este un server HTTP  și este de tip open source.

Conexiunile la serverele Web sunt realizate pe măsură ce sunt necesare. Dacă este solicitată o pagină de la un server Web, o conexiune IP este realizată prin Internet între gazda solicitantă și gazda pe care rulează serverul Web. Pagina Web solicitată este transmisă prin conexiunea respectivă. Conexiunea aceasta este întreruptă imediat ce pagina este primită. Daca acea pagină conține referințe la alte informații ce trebuiesc încărcate, fiecare va fi obținută folosind o nouă conexiune.

Pe același host pot rula mai multe aplicații de Internet. Un server Web, un server FTP, un server DNS și un server de mail SMTP POP3 pot rula în același timp. Un port îî este atribuit fiecărui server pentru a asigura că fiecare server o să răspundă numai cererilor din partea clienților corespunzători.

Majoritatea serverelor folosesc un set de porturi predefinite. Serverele Web folosesc de obicei portul 80, însă acesta poate fi schimbat. Pot fi instalate pe porturi nestandard pentru a fi ascunse. De asemenea, pot fi instalate mai multe servere Web pe un singur calculator asociindu-le porturi diferite.

Pagini Web

Informațiile din World Wide Web sunt stocate în pagini. O pagină poate conține oricare din următoarele:

Text

Header-e

Liste

Meniuri

Formulare

Elemente grafice

Script-uri

Stiluri (style sheets)

Obiecte multimedia

Paginile Web sunt realizate folosind o serie de tehnologii pe partea de client și sunt procesate și afișate de către browsere.

Browsere Web

Browserele Web sunt programe client folosite pentru a accesa site-uri și pagini Web. Scopul unui browser este de a procesa paginile Web primite și de a le prezenta utilizatorului. Browser-ul încearcă să afișeze grafice, tabele, formulare, text formatat și orice conține o pagină.

Cele mai populare browsere sunt Internet Explorer, Google Chrome, Mozilla Firefox, Safari și Opera.

Avantajul Paginilor Web Dinamice

Paginile statice sunt formate din text, imagini și tag-uri HTML pentru formatare. Paginile acestea sunt create și întreținute manual, astfel că, dacă informațiile se modifică și pagina trebuie modificată. Acest lucru implică încărcarea paginii într-un editor, realizarea modificărilor, reformatarea textului dacă este nevoie și apoi salvarea fișierului. Operațiile acestea necesită foarte mult timp dacă numarul paginilor care trebuiesc actualizate este mare.

Paginile dinamice conțin foarte puțin text, în schimb atrag informațiile din alte aplicații. Paginile dinamice pot comunica cu bazele de date, foi de calcul tabelar, sisteme de gestiune a bazelor de date client-server și multe alte aplicații.

Avantajele și dezavantajele de a avea un site Web dinamic

Avantajele de a avea un site Web dinamic sunt următoarele:

Interogarea aplicațiilor de baze de date existente pentru obținerea datelor;

Crearea de interogări dinamice care facilitează obținerea în mod flexibil a datelor;

Execuția procedurilor stocate;

Execuția codului condițional on-the-fly pentru a personaliza răspunsurile în funcție de situațiile specifice;

Sporirea capabilităților formularelor HTML standard prin folosirea unor funcții de validare;

Popularea în mod dinamic a elementelor din formulare;

Personalizarea modului de afișare a informațiilor legate de dată, timp și monedă folosind funcții de formatare;

Ușurarea creării aplicațiilor de introducere a datelor prin wizards;

Generarea automată de email.

Prin construirea site-ului cu capabilități dinamice se deschide o gamă largă de posibilități, cum ar fi rezervări, galerii foto on-line, Vot/Sondaje, forumuri, site-uri comerciale și coșuri electronice de cumpărături și multe altele.

Dezavantajele de a avea un site Web dinamic sunt de exemplu pentru companiile mici pentru care un site dinamic ar putea fi prea scump sau vazut inutil, astfel investiția să nu fie justificată.

Alt dezavantaj ar fi timpul inițial de dezvoltare mai scurt și costul punerii în aplicare a formării sistemului de management al conținutului Client/Staff.

Înțelegerea Aplicațiilor Web

Browserele Web trimit cereri către serverele Web, iar acestea le îndeplinesc. Trimit înapoi informațiile cerute către browser. Informațiile acestea sunt de obicei fișiere HTML, ca și alte tipuri de fișiere.

Serverele Web nu permit interacțiunea cu bazele de date, nu permit personalizarea paginilor Web, nu permit procesarea rezultatelor trimiterii unui formular de către utilizator.

Un Web Application Server este un software care propagă serverul Web, permițând acestuia să realizeze lucrurile pe care nu le poate face singur.

Atunci când un server Web recepționează o cerere de la un browser, el controlează acea cerere pentru a realiza dacă este o simplă pagină Web sau o pagină care are nevoie de prelucrări suplimentare de către un Web Application Server. Acest lucru îl realizează prin verificarea extensiei sau a tipului MIME (Multi-Purpose Internet Mail Extensions). Dacă tipul MIME indică o pagină simplă, atunci serverul Web îndeplinește cererea și trimite fișierul către browserul client nemodificată. În cazul în care tipul MIME indică faptul că fișierul cerut necesită procesarea de către un Web Application Server, atunci fișierul va fi trimis de către server. Web serverul trimite fișierul către Web Application Server-ul corespunzător și trimite browserului rezultatul pe care îl primește de la Web Application Server.

Web Application Servers sunt preprocesoare pentru pagini. Pagina cerută va fi procesată înainte ca aceasta să fie trimisă înapoi la client.

1.4. Limbajul CSS3

CSS, prescurtarea de la Cascading Style Sheets, este limbajul principal utilizat pentru a descrie aspectul si formatarea pentru pagini Web pe Internet și documentele de marcare (de exemplu HTML și XML) în general.

CSS este interpretat de browser (aplicația utilizată pentru a vizualiza pagina Web, de exemplu Internet Explorer sau Google Chrome) și apoi folosite pentru a decide cum ar trebui să arate pagina. Acest lucru înseamnă, de asemenea, că în timp ce există o specificație foarte amănunțită a limbajului CSS, multe browsere interpretează codul CSS în felul său.

CSS3 este cel mai recent standard de CSS.

CSS3 este complet compatibil cu versiunile anterioare de CSS.

1.4.1. Nou în CSS3

Unele dintre cele mai importante noi module CSS3 sunt:

Selectoarele (Selectors)

Model caseta (Box Model)

Fundaluri si Borduri (Backgrounds and Borders)

Image Values and Replaced Content

Efecte Text (Text Effects)

Transformări 2D/3D (3D/3D Transformations)

Animații (Animations)

Multiple Column Layout

Interfața Utilizator (User Interface)

1.4.2. Avantajele utilizării limbajului CSS3

Înainte de CSS, Web designerii s-au limitat la aspectul și opțiunile de stil aparținând HTML.

HTML formează încă fundamentul tuturor paginilor de pe World Wide Web dar nu este un instrument de design. Sigur, HTML oferă opțiuni de formatare de bază pentru text, imagini, tabele și alte elemente de pagină Web, ce pot face paginile Web să arate destul de bine folosind doar HTML. Dar rezultatul este de multe ori pagini Web lente încărcate cu coduri greoaie.

CSS, în schimb, oferă următoarele avantaje:

Foile de stil oferă mult mai multe opțiuni de formatare decât HTML. Cu CSS, putem formata paragrafele așa cum apar într-o revistă sau ziar (de exemplu prima linie indentată și lipsa spațiului între fiecare paragraf).

Când utilizăm CSS pentru a adăuga o imagine de fundal pentru o pagină, putem decide dacă și de câte ori să se repete imaginea de fundal. Cu HTML nu se poate face asta.

Stilurile CSS ocupă mult mai puțin spațiu decât opțiunile de formatare HTML, cum ar fi opțiunea <font>.

Foile de stil pot, de asemenea actualiza site-ul mai ușor. Putem colecta toate stilurile noastre într-o singură foaie de stil externă care este legată de fiecare pagină pe site-ul nostru. Putem schimba complet aspectul unui site doar prin editarea unei singure foi de stil.

1.5. Limbajul HTML5

HTML5 este un limbaj folosit pentru structurarea și prezentarea conținutului pentru World Wide Web, o tehnologie nucleu pentru Internet propusă inițial pentru software-ul Opera.

HTML5 este o extensie a HTML4 și XHTML prima variantă și este o specificație competitivă în raport cu XHTML 2, a cărui dezvoltare a fost abandonată in favoarea sprijinului HTML5.

Multe caracteristici ale HTML5 au fost create cu scopul că va trebui să devină capabil să ruleze pe dispozitive cum ar fi smart-phonuri sau tablete.

1.5.1. Nou in HTML5

Limbajul introduce mai multe elemente noi în comparație cu omologii săi mai in vârstă, printre altele:

Noi tag-uri, cum ar fi: article, header, footer, nav, video, audio, mark, progress, section;

Noi tipuri de câmpuri de formular: color, email, datetime-local, datetime, date, month, week, time, number, range, tel, search, url;

Noi atribute de elemente de formular: autofocus, required, autocomplete, min, max, multiple, pattern, step.

Programatorul primește o mulțime de facilități pentru programarea UI (User Interface).

Există, de asemenea, noi metode API (Application Programming Interface):

Desen 2D cu elementul nou – Canvas;

Drag and drop API, cu atributul draggable;

Redarea audio și video API;

Editarea API cu atributul contenteditable;

API pentru aplicații offline;

Stocare API (memorie) – locale;

Geolocalizare, micro și altele.

Există, de asemenea, noi metode DOM (Document Object Model):

activeElement ()

hasFocus ()

getElementsByClassName ()

getSelection ()

classList ()

relList () – pentru elementul HTML “a”

innerHTML () – pentru ferestre și documente

1.5.2. Elementele eliminate din HTML5

Următoarele elemente HTML4 au fost eliminate din HTML5:

Tabelul 1.1. Elemente eliminate din HTML5.

1.5.3. Avantajele utilizării limbajului HTML5

Una dintre cele mai mari noi îmbunătățiri in HTML5 este dezvoltarea de tag-uri bogate, cum ar fi mass-media audio și video. Complet programabile cu JavaScript, aceste tag-uri oferă ușurință incredibilă de utilizare în timp ce oferă, de asemenea, o flexibilitate puternică prin accesul larg la elementele media prin programare.

1.5.4. Listă comenzi noi și descriere în HTML5

<article>

Se foloseste pentru a defini un articol intr-un document;

<aside>

Se foloseste pentru a situa o informatie pe o parte a unei pagini;

<dialog>

Defineste o caseta sau o fereastra de dialog;

Are proprietatile:

<dialog open> caseta de dialog deschisa;

<dialog closed> caseta de dialog inchisa;

<figcaption>

Se foloseste pentru a adauga descrierea unei imagini

<footer>

Se foloseste pentru a defini sectiunea de footer a paginilor

<header>

Se foloseste pentru a defini sectiunea header a paginilor

<mark>

Defineste textul evidentiat

<nav>

Este tag-ul folosit pentru a construi meniul (navigatia) site-ului

Poate fi inlocuit cu un container (div) stilizat (vezi fig. 1.1)

fig 1.1 navigation

<section>

Se foloseste pentru a defini o sectiune a unui document

Tipuri noi Input

color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week

Atribute noi peentru Input

autocomplete

autofocus

form

formaction

formenctype

formmethod

list

min and max

height and width

multiple

placeholder

step

Limbajul PHP

PHP a început ca un mic proiect care a evoluat cum tot mai mulți oameni au aflat cât de util este. Rasmus Lerdorf a dezvoltat prima versiune de PHP în 1994.

PHP este un acronim recursiv pentru “PHP:Hypertext Preprocessor”.

PHP este un limbaj de scripting pe partea de server, care este încorporat in HTML. Acesta este utilizat pentru a gestiona conținut dinamic, baze de date și urmărirea sesiunii.

Acesta este integrat cu un număr de baze de date populare, inclusiv MYSQL, PostgreSQL, Oracle, Sybase, Informix și Microsoft SQL Server.

PHP este plăcut în executarea sa, în special atunci când este compilat ca modul Apache pe partea Unix. Serverul MYSQL, odata început, execută chiar interogări foarte complexe, cu seturi de rezultate uriașe în timp record.

Utilizări comune ale PHP-ului

PHP îndeplinește funcțiile sistemului, adică de la fișierele de pe un sistem se poate crea, deschide, citi, scrie și închide fișierele strânse pe server.

Cu PHP se pot aduna date din formulare, salva datele într-un fișier iar prin e-mail se pot trimite datele.

Se pot adăuga, șterge, modifica elemente din cadrul bazei de date prin PHP.

Poate trimite și primi cookie-uri.

Folosind PHP se pot restricționa utilizatorii să acceseze anumite pagini ale site-ului.

Se pot cripta datele.

Ca și alte limbaje de scripting pentru Web, PHP permite furnizarea unui conținut Web dinamic, adică un conținut Web care se schimbă automat de la un minut la altul sau de la o zi la alta. Conținutul Web este un element important în susținerea traficului unui site Web. Vizitatorii nu vor mai reveni la o pagină Web care conține aceleași informații ca și cele prezente la ultima vizită. Site-urile Web frecvent actualizate pot atrage cantități enorme de trafic.

Spre deosebire de limbajele de scripting, precum JavaScript, PHP rulează pe serverul Web, nu în browserul Web. PHP poate obține accesul la fișiere, baze de date și alte resurse inaccesibile programului JavaScript. Acestea constituie bogate resurse de conținut dinamic, care atrag multi vizitatori.

Caracteristici ale PHP-ului

Cinci caracteristici importante face PHP cât mai practic:

Simplitate

Eficiență

Securitate

Flexibilitate

Familiaritate

Folosind PHP, nu există limitare doar la afișare HTML. PHP permite afișarea de imagini, fișiere PDF și chiar filme Flash (utilizând libswf și Ming). Se poate afișa orice text, cum ar fi XHTML sau alt fișier XML.

În ultima perioada dezvoltarea limbajului PHP a avansat foarte mult prin apariția unor noi versiuni ale acestuia ajungând la momentul actual printre cele mai utilizate limbaje de programare Web.

Limbajul JAVASCRIPT

JavaScript este cel mai popular limbaj de programare în lume.

JavaScript rulează la nivelul browserului și a fost dezvoltat pentru a prelucra informațiile din formulare și pentru a oferi dinamism paginilor Web.

Denumirea inițială a limbajului JavaScript a fost LiveScript. Este un limbaj interpretat si dependent de mediu. Software-ul care rulează de fapt programul este browser-ul Web (Firefox, Opera, Internet Explorer, Safari, etc. ).

Folosind JavaScript se poate realiza: validarea formularelor, animarea textului și a imaginilor, crearea de meniuri drop-down și a controalelor de navigare, se pot realiza procesări de bază numerice asupra textelor și multe altele.

Scripting-ul permite programatorilor să detecteze și să proceseze evenimentele. O pagină care se încarcă, un formular trimis, mișcarea pointer-ului mouse-ului asupra unei imagini sunt toate evenimente, iar script-urile pot fi executate automat de browser atunci când aceste evenimente au loc.

Script-urile pot fi incluse în codul HTML sau pot fi stocate în fișiere externe și legate în interiorul codului HTML.

JavaScript este unul dintre cele 3 limbaje pe care toți dezvoltatorii Web trebuie sa îl invețe:

HTML – pentru a defini conținutul paginilor Web;

CSS – pentru a specifica structura paginilor Web;

JavaScript – pentru a programa comportamentul paginii Web.

Cum se construiește limbajul JavaScript

Limbajul JavaScript a fost realizat astfel încât sa reflecte sintaxa limbajului Java, multe dintre cuvintele cheie fiind aceleași.

La baza limbajului se află trei elemente fundamentale:

Valorile – sunt acele tipuri de date suportate de JavaScript;

Obiectele – sunt acele colecții de proprietăți care pot fi apelate cu un singur nume;

Funcțiile – sunt acele proceduri care pot fi executate de o aplicație.

Funcțiile asociate cu un anumit obiect se numesc metodele obiectului.

JavaScript este construit pe metafora obiectelor. Un obiect este o construcție cu proprietăți care sunt variabile sau alte obiecte. Limbajul vine cu un anumit număr de obiecte predefinite ( de exemplu math, location, history și document) care se creează ori de cate ori se încarcă o pagină în navigator. De altfel se pot construi și propriile obiecte.

Utilizări ale limbajului JavaScript

Cu ajutorul limbajului JavaScript poți executa scripturi la nivelul browserului.

Poți deasemenea citi și schimba conținutul unui element HTML.

Ai posibilitatea de a valida datele din formulare înainte de a fi trimise către server. Poate fi folosit acest limbaj pentru a detecta tipul browserului și in funcție de acest tip putem încărca o pagină sau alta.

Reacționează la evenimente, poate fi configurat să execute o anumită operație atunci când se întâmplă ceva (de exemplu dacă userul a facut click pe un element HTML).

JavaScript poate fi folosit pentru a seta cookie-uri și pentru a obține valoarea acestora.

Inserarea codului JavaScript în pagină HTML

Inserarea de cod Javascript într-o pagină HTML se face cu ajutorul tag-ului <script> :

<script type=”text/javascript”>

…

Instrucțiuni

…

</script>

Atributul type stabilește limbajul de scripting utilizat (implicit JavaScript).

Capitolul 2. Tehnologii utilizate

NOTEPAD++

NOTEPAD++ este un editor de text gratuit pentru Windows. NOTEPAD++ este găzduit la Sourceforge. Acest program permite editarea codului sursă specific unui număr mare de limbaje de programare, precum C, C++, Cobol, HTML, Pascal, PHP.

Are colorare sintactică pentru 48 de limbaje de programare. Aceasta se poate modifica de către utilizator. NOTEPAD++ are facilitatea de tipărire color a codului sursa, autocompletare (întregirea automată a cuvântului de cod din biblioteca utilizată). Are o interfață cu mai multe ferestre, utilizează deci tab-uri. Are deasemenea suport pentru căutări sau înlocuiri cu expresii regulate PERL și suport pentru macroinstrucțiuni.

NOTEPAD++ se bazează pe motorul Scintilla, fiind programat în C++ și utilizând Win32 API și biblioteca STL. Asigură astfel o execuție mai rapidă și un consum mai redus de resurse.

XAMPP

XAMPP este un pachet de programe open source,free software și cross-platform Web Server. Acest lucru constă în Apache HTTP Server, MYSQL Database și interpretoare pentru scripturile scrise în limbaje de programare PHP și Perl. Are și alte module precum OpenSSL și phpMyAdmin.

Numele XAMPP reprezintă o prescurtare de la:

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

Apache HTTP Server;

MYSQL;

PHP;

Perl.

Cea mai bună caracteristică a XAMPP este ușurința de instalare. Nu este necesar sa instalăm fiecare dintre componentele unui server Web individual și, prin urmare, instalarea este mai ușoară și mai rapidă. Nu trebuie să ne facem probleme cu privire la configurația PHP sau configurarea MYSQL, etc.

Este portabil și dacă nu dorim sa rulăm XAMPP automat de fiecare dată cand pornește computerul, nu este nevoie pentru a instala servicii.

XAMPP este lansat sub termenii licenței GNU și acționează ca un Web Server capabil de a servi pagini dinamice. Este disponibil pentru Microsoft Windows, Solaris, Linux și Mac OS X. Este deasemenea utilizat în principal pentru dezvoltarea proiectelor Web.

XAMPP este util pentru crearea paginilor dinamice, utilizând limbaje de proramare ca PHP, JSP, Servlets.

Poți folosi adresa de localhost a serverului XAMPP ca pe un server la distanta, prin conectare utilizând protocolul client FTP.

1.3. PHOTOSHOP

Un software de editare al imaginilor dezvoltat și fabricat de Systems Inc. Adobe Photoshop este considerat unul dintre liderii în editare foto. Software-ul permite utilizatorilor să manipuleze , sa decupeze fotografii, să le redimensioneze și să corecteze culoarea la fotografiile digitale. Software-ul Photoshop este foarte popular printre fotografii profesioniști și designerii de grafică.

Prin utilizarea programului Photoshop se asigură sporirea și îmbunătățirea calității fotografiilor. Fotografii au posibilitatea de a edita imagini la nevoile și specificațiile exacte ale dorințelor clientului.

1.4 NIVO SLIDER

Nivo slider este considerat cel mai popular jQuery slider plugin. Acest lucru se datoreaza faptului ca este foarte usor de utilizat, si, pe deasupra, este gratuit.

Acesta include 16 efecte de tranzitie:

sliceDown

sliceDownLeft

sliceUp

sliceUpLeft

sliceUpDown

sliceUpDownLeft

fold

fade

random

slideInRight

slideInLeft

boxRandom

boxRain

boxRainReverse

boxRainGrow

boxRainGrowReverse

Poate fi personalizat intr-o maniera foarte simpla, adaugand tranzitia, pozitia, opacitatea, dimensiunea dorita si multe alte optiuni. (vezi fig.1.2)

De asemenea, nivo slider este responsive in totalitate.

Fig. 1.2

1.5 Sublime Text

Sublime Text este un editor de text, distribuit gratuit, dar care are o versiune premium disponibilă pentru achiziționare

Deși am menționat deja un editor de text, notepad++, în lucrare, am lucrat o perioadă destul de mare pe Linux iar acolo am folosit Sublime Text pentru creearea site-ului care face obiectul acestei lucrări.

Spre deosebire de Notepad++ Sublime Text poate fi folosit atât pe Windows cât și pe Mac OS sau Linux. Acesta a fost dezvoltat de către Sublime HQ cu sediul în Woollahra, Sydney. Acesta permite editarea codului sursă pentru un număr mare de limbaje de programare (Fig. 1.3).

Fig 1.3. Interfață și listă limbaje Sublime Text

Editorul de text a fost scris in Python și C++.

Printre facilitățile oferite sunt:

Paletă de culori editabilă de către utilizator pentru fiecare limbaj în parte;

Autocompletare, o dată folosit un tag acesta îl memorează.

În mare oferă aceleași facilități pe care le oferă și Notepad++, însă, pe mine m-a cucerit cu tool-ul Emmet,acesta fiind preinstalat.

Emmet este un tool foarte util mai ales pentru partea de web developement, deoarece putem scrie doar abrevierile iar emet le transformă în cod. Spre exemplu:

ul#nav>li, item$*2>a(Item $)

devine, cu ajutorul lui Emmet:

<ul id=”nav”>

<li class=”item1”><a href=””>Item 1</a></li>

<li class=”item2”><a href=””>Item 2</a></li>

<ul>

Capitolul 3. Descrierea aplicației

Descrierea site-ului

Am ales sa construiesc site-ul web cu tehnologie responsive pentru a fi în pas cu trendurile din industrie, dar si datorită faptului că, în prezent, în România procentul majoritar de trafic pe paginile web este reprezentat de dispozitivele mobile (smartphone-uri, tablete etc.). De asemenea, un site web responsive se poate adapta pentru o vizionare corecta și pe notebook-urile de 13 inchi de exemplu.

Aceste avantaje asigură o experiență de navigare cât mai aproape de perfecțiune pentru fiecare utilizator, deoarece elimină multe probleme, cum ar fi apariția scroll-urilor pe orizontală, poziționarea incorectă a butoanelor, sau vizionarea problematică a articolelor respectiv a imaginilor datorita dimensiunilor neadaptabile ale acestora.

Acest site web, cum am precizat și în introducere, este unul hotelier, de prezentare a hotelului Armando din Caransebeș.

Este mportant precizăm că:

Toate informațiile folosite în construcția site-ului și a lucrării sunt reale și nu pot fi folosite în alte scopuri.

Site-ul web este unul funcțional, a fost achiziționat de către client. În momentul de față site-ul se află intr-un dosar temporar, până când clientul va considera că trebuie pus online.

Site-ul web prezintă avantajele și dotările hotelului, iar pentru o localizare cât mai ușoară are incorporată o hartă google maps, aceasta fiind și ea responsive pentru a se plia cât mai bine pe dispozitivele mobile sau ecranele mai mici.

În construcția lui s-au folosit tehnologiile PHP, HTML5, CSS3 și JavaScript.

A fost construit în așa fel încât să aibă un design cât mai aerisit, să nu fie încărcat, pentru a putea fi utilizat cu cât mai multă ușurință și de către persoanele mai în vârstă, acest segment reprezentând un procent important din clientela fidelă a hotelului.

Un site web responsive a fost soluția problemei pe care a prezentat-o clientul, și anume, lipsa vizibilității în mediul online.

Lipsa de vizibilitate din mediul online s-a datorat faptului că vechiul site este unul static, greu de utilizat.

Structura site-ului

Site-ul web este construit în 2 variante, engleză respectiv română.

Varianta În limba română a site-ului este structurată pe urmatoarele pagini:

ACASA Pagina principală

FACILITĂȚI

CAZARE

GALERIE FOTO

RESTAURANT

REZERVĂRI

CONTACT

ENGLISH

În varianta în limba engleză, site-ul are urmatoarea structură:

HOME Pagina principală

FACILITIES

HOSTING

GALLERY

RESTAURANT

RESERVATIONS

CONTACT

ROMANIAN

Când utilizatorul navighează pe o pagină în limba română, butonul afișat este english (fig. 3.1).

Acesta are ca destinație varianta în limba engleză a site-ului.

Fig.3.1 Meniu română

Când utilizatorul navighează pe o pagină în limba engleză, butonul afișat este romanian (fig. 3.2).

Fig.3.2 Meniu engleză

Acesta are ca destinație varianta în limba română a site-ului.

Fiecare element din site, mai puțin navigația (meniul), se află în interiorul unui container format cu ajutorul instrucțiunii <div>, acesta fiind stilizat cu ajutorul clasei .paginație în așa fel încât să își îndeplinească rolul, acela de a oferi o spațiere.Aceasta are rol de a păstra site-ul aerisit.(fig. 3.3)

Fig.3.3 DIV paginație

Fig.3.4 CSS DIV paginație

În fig. 3.4 se observă proprietățile instrucțiunii div stilizate cu ajutorul clasei .paginație.

Mai exact, acesta lasă o margine de 15% din ecran în marginea stângă respectiv dreaptă.

Dacă dimensiunea marginii ar fi fost scrisă în pixeli, având sufixul px după număr, cum se obișnuia până acum câțiva ani, containerul nu s-ar mai fi putut plia pe dimensiunile ecranelor iar site-ul nu ar mai fi fost responsive. Scrierea dimensiunilor în procente, cum este in fig. 3.4 îi permite site-ului să se adapteze la dimensiunile ecranelor de pe care este vizionat.

Navigația (meniul)

Site-ul web fiind unul responsive bara de navigare a acestuia poate lua mai multe forme, în funcție de dimensiunea ecranului:

Pe ecran de laptop/pc bara de navigare este cea din fig. 3.1 respectiv 3.2

Daca lățimea ecranului scade sub 1201 px navigarea site-ului ia forma de „burger menu” (fig.3.5 și 3.6)

Fig. 3.5 Navigație restrânsă

Fig. 3.6 Navigație activă

Denumirea de Burger Menu este dată de forma butonului folosit pentru activarea meniului (fig. 3.7)

Fig. 3.7 Burger Button

Pentru acest buton am folosit o proprietate a HTML5, mai exact fa-fa bars (fig. 3.8)

Fig. 3.8 HTML5 burger button

Pentru a evidenția butoanele din meniu am folosit proprietatea hover din css3. Aceasta permite evidențierea unui cuvânt odată ce este atins cu cursorul (fig. 3.9).

Am făcut asta cu ajutorul codului din fig 3.10.

Fig.3.9 Meniu hover

Fig. 3.10 CSS meniu hover

Pentru construirea meniului am folosit un script pentru navigație responsive care să declanșeze burger menu prin intermediul onclick din javascript (fig. 3.11).

Fig. 3.11 Functie JavaScript meniu

Pentru a construi butoanele și a face trimiterea către destinația dorită am folosit link-uri <a>(fig. 3.12)

Fig.3.12 Cod Meniu

Pragul de transformare a meniului din mobil în meniu normal este 1200px. Pentru stabilirea acestui prag am folosit proprietatea de media querie din intermediul CSS-ului.

Prin media query (@media) se stabilesc pragurile necesare pentru a trece de la o înfățișare la alta, în funcție de dimensiunea sau orientarea dispozitivului(orientare în cazul smartphone-urilor sau tabletelor când se trece din modul portret în landscape sau invers).

Fig. 3.13. media query nav

De asemenea pragurile creeate prin intermediul tag-ului media querry putem seta ca anumite elemente sa fie vizibile doar în anumite dimensiuni.

De exemplu, link-urile care au id=”nu” în fig. 3.12 au fost creeate pentru a facilita apariția cuvântului NAVIGAȚIE numai în momentul în care meniu de mobil este activ, iar in cel normal sa fie invizibile (fig. 3.13.)

Un alt exemplu în care am folosit media tag-urile pentru limitarea conținutului a fost în limitarea înălțimii harții google maps cand browserul este în width maxim (fig. 3.14).

Fig.3.14. media query Hartă

Prin intermediul atributului max-height am setat înălțimea maximă a hărții la 550px atunci când ecranul are lățimea maximă de 1400px.

Dacă nu ar fi avut limita setată cu max-height, datorită presetărilor din google harta si-ar fi păstrat o formă pătrată indiferent de lățimea ecranului.

Media query mai pot fi folosite și în galeriile foto pentru a seta dimensiunile cu exactitate pentru diferite dimensiuni de ecran. (Fig. 3.15)

Fig. 3.15 Media query Galerie

În Fig 3.15 am folosit meddia query pentru a seta distanțele dintre imagini în funcție de ecran.

Procesul de implementare a Nivo Slider-ului este foarte simplu.

Se descarcă apoi se implementeaza JavaScript-ul, css-ul respectiv codul html5 in site-ul propriu zis.

Fig. 3.16. Html Nivo Slider

În Fig. 3.16 este codul html necesar funcționării nivo slider-ului.

După cum bine se vede este foarte simplist, imaginile trebuie doar să fie incluse în containterele cu clasele slider area container și slider-wrapper theme-default respectiv nivoSlider.

Rolul acestor containere este de a implementa direct, fără alte greutăți CSS-ul aferent, care este gata făcut. Putând fi personalizat foarte ușor.

În Fig. 3.17 se află cea mai importantă parte din CSS-ul necesar slider-ului.

Partea de CSS aferentă Nivo Slider-ului este destul de complexă, dar a fost construită într-o manieră care permite personalizarea cu ușurință chiar dacă cel care efectuează mpdoficările are cunoștințe minimale de HTML, CSS sau JavaScript.

Singura restricție care se impune este aceea de a păstra comentariile cu Copyright prezente și în Fig 3.17.

Fig.3.17

În ceea ce privește partea de JavaScript, Nivo Slider folosește doar 2 scripturi.

Acestea pun în mișcare caruselul de imagini respectiv controlează funcționalitatea butoanelor de Left Right pentru a putea comuta imaginile manual când se dorește acest lucru (Fig. 3.18)

Fig. 3.18 Script Nivo Slider

Pe de altă parte, pentru editarea JavaScript-urilor aferente slider-ului sunt necesare cunoștințe mai profunde de JavaScript. Mai jos am atașat un fragment în care se poate vedea complexitatea scriptului (Fig. 3.19.).

Fig. 3.19 fragment JavaScript Nivo Slider

Complexitatea scriptului se datorează numărului mare de posibilități de personalizare oferite, de la animații până la tipul butoanelor și bulinelor de sub slider.

Cât despre Harta Google Maps, aceasta este foarte ușor de implementat.

Se preia codul html aferent zonei dorite de pe google, apoi se implementează în fișierul html (Ffig. 3.20). Fig 3.20

Pentru editare se editează partea de CSS(Fig. 3.21):

Fig.3.21 Css Google Maps

În CSS putem edita atât poziția cât și dimensiunile, minime respectiv maxime, dacă este cazul.

Tag-ul <iframe> ne permite să edităm si poziția hărții, dacă vrem să fie în lateral sau centrată.

Fig. 3.22 Hartă

După cum se vede în Fig.3.22 , eu am optat pentru poziționare centrală, cu un width cât mai mare, pentru a putea oferi cât mai multe informații utilizatorilor cu privire la locație și împrejurimi, dar și pentru a oferi un plus de design.

Fig.3.23 Footer

În secțiunea footer, vizibilă în Fig. 3.23 , în partea stângă, am integrat atât informațiile de contact cât și un link către pagina de facebook a hotelului.

În partea dreaptă am adaugat un buton cu poziție fixă, rolul acestuia fiind de a face scroll-up atunci când este acționat printr-un click (Fig. 3.36).

Fig. 3.34 Footer cod HTML

În Fig. 3.34 este codul folosit pentru creearea secțiunii footer.

Pentru a facilita contactul între utilizatorii site-ului si responsabilii hotelului, pe lângă datele de contact din footer, am adaugat, prin intermediul funcției mailto(Fig. 3.35) un link care deschide direct outlock-ul în pc cu adresa de email a hotelului completată în câmplu destinatarului, doritorului rămânându-i doar de scris e-mailul.

Fig. 3.35 funcția mailto

Fig. 3.36 buton scroll-up

Deși multă lume nu îl folosește, butonul de scroll-up este un buton foarte util, deoarece scutește utilizator, îmbunătățind astfel experiența acestuia.

În ceea ce privește CSS-ul pentru footer, în dorința de a păstra footer-ul aerisit și curat, acesta este unul minimal, având toate funcționalitățiile necesare (Fig. 3.37).

Fig. 3.37. CSS footer

Fig. 3.38 Privire ansamblu Pagină principală

Pentru un plus de design am adaugat imaginilor mici proprietatea de border-radius sau colțuri rotunde atunci când sunt în stadiu de hover, cu alte cuinte când cursorul se află pe ele (Fig. 3.38).

Această proprietate se folosește foarte ușor, vezi Fig. 3.39

Fig. 3.39 Border radius css

Fig. 3.40 Privire de ansamblu pagina facilitati/facilities

Tot un efect pe baza proprietății hover am folosit și în pagina FACILITATI / FACILITIES, doar că de această dată este puțin diferit.

Galeria de imagini din pagina Facilitati/Facilities, are efectul de hover cu un blur.

Imaginile peste care nu se află cursorul au un ușor procentaj de blurare, iar în momentul în care cursorul se află peste o imagine, acel efect dispare (vezi Fig 3.40). Acest efect a fost obținut cu ajutorul proprietățiilor de opacity și hover(Vezi Fig. 3.41)

Fig. 3.41 CSS galerie pagina facilitati/facilities

Este un efect care presupune un efort minim, dar aduce un plus de design galeriei. Galeria a fost obținută printr-o combinație de imagini grupate pe coloane (Fig. 3.42).

Fig 3.42 Cod HTML galerie pagină facilitati/facilities

Acest tip de galerie este responsive, deoarece imaginile își modifică numarul de coloane în funcție de lățimea ecranului.

Pagina de cazare/hosting este una simplă, minimală, în care sunt prezentate dotările camerelor, unele dintre dotările hotelului, dar și alte facilități, cum ar fi telefonie internă și internațională, legătură la internet, parcare gratuită.

În această pagină se precizează faptul că toate tarifele sunt supuse taxei hoteliere. Tot în această pagină se precizează ora la care ss servește micul dejun respectiv oreke la care începe și se termină ziua hotelieră. (Fig. 3.43)

Însă, așa cum spune și numele, această pagină se concentrează pe prețurile fiecărei camere

Fig 3.43 Privire de ansamblu pagina cazare/hosting

Această pagină a fost realizată în așa fel încât și pe ecranele mici, preturile și pozele camerelor să atragă atenția (Fig 4.44)

Fig. 4.44

Fig 4.45 Cod HTML cazare/hosting

Codul HTML folosit pentru obținerea acelui tablou de preturi și imagini (Fig. 4.45) este unul repetitiv, am folosit același cod pentru fiecare imagine și preț, apoi le-am repetat, îmbinându-le asemenea unor zale dintr-un lanț, de aceea în fig 4.45 am ilustrat doar un fragment din cod.

Pagina GALERIE FOTO/GALLERY este cea mai complexă pagină din site, atât din punct de vedere al codului HTML respectiv al CSS-ului cât și din punct de vedere al funcționalităților.

Este singura pagină din site care folosește tehnologia LightBox1.

LightBox este o librărie JavaScript care afișează imagini și conținut media pe tot ecranul, punând în plan secund celelalte elemente (Fig. 4.46). Fig. 4.46 LightBox full view image

1 https://en.wikipedia.org/wiki/Lightbox_(JavaScript)

Prin această manieră de afișare a fotografiilor și/sau altor fișiere media, acestea sunt cel mai bine puse în valoare, deoarece atenția privitorului nu poate fi captată de nimic altceva, celelalte elemente fiind mutate în plan secund, practic sub elementul pus în valoare.

LightBox este responsive de la sine, imaginile fiind scalate perfect, fără a le distorsiona sau afecta calitatea vizuală, acest lucru făcându-l extensia ideeală pentru toate tipurile de dispozitive, fie că vorbim de ecrane mari sau mici.

Are butoanele de înapoi și înainte integrate în el, oferind utilizatorului posibilitatea de customizare atât a poziției cât și a tipului de butoane.

Cu cunoștințe minimale de Html5, CSS3 și JavaScript putem face o galerie foto full responsive, imaginile modificându-și dimensiunile pe baza dimensiunii ecranului.

Din aceste motive, LightBox este opțiunea ideală pentru a crea galerii foto responsive dar și atrăgătoare din punct de vedere vizual.

LightBox folosește imagini miniaturale, thumbnail-uri care conduc către imaginile mari(Fug. 4.47).

Fig. 4.47 Galerie foto. Vedere Thumbnail-uri

Fiind responsive, LightBox poate modifica numărul de coloane, respectiv distanța dintre acestea atunci când ecranul este mai mic.

Pentru a înțelege mai bine acest lucru, îl voi ilustra mai jos printr-o comparație de imagini.

După cum se poate vedea în Fig. 4.48, am scăzut lățimea ferestrei la 1333px iar galeria și-a modificat numărul de coloane, nu mai are 8 coloane cum avea în Fig 4.47, cand era la dimensiune full, acum are 6 coloane.

De asemenea, în mobil view, LightBox reduce numărul coloanelor la 2, pentru a putea fi vizualizate într-o manieră optimă pe dispozitivele mobile(Fig. 4.50).

Fig. 4.48 Galerie Foto la 1333px Width Fig. 4.49 Imagine văzută în mobile view

Fig. 4.50 Galerie foto

Dacă comparăm Fig. 4.46 și Fig. 4.49 devine foarte clar că imaginile din galeriile formate cu LightBox se comportă bine pe orice dispozitiv, chiar și pe telefoane mobile.

Fig. 4.51 Cod HTML creeare thumbnails

În Fig. 4.51 se poate vedea codul folosit pentru creearea thumbnail-urilor.

Pentru creearea acestora pur și simplu se scrie calea imaginii și se adaugă open modal cand se accesează miniatura.

Funcția open modal are rolul de a deschide caseta caracteristică LightBox în care se vizualizează galeria la mărimea sa.

Clasa “hover-shadow” are rolul de a seta timpul tranziției(Fig.4.52).

Pentru această acțiune se folosește scriptul din Fig. 4.53.

Acest script nu este unul complicat, însă este foarte eficace

Funcția openModal deschide vizualizarea imaginii, vezi Fig 4.46 și Fig.4.49.

Funcția closeModal are rolul de a închide vizualizarea imaginii, aceasta poate fi acționată dând click pe X când modalBox este deschisă.

Cea mai mare parte a scriptului este reprezentată de funcția showSlides. Aceasta este nucleul principal al LightBox-ului. În el se găsesc toate instrucțiunile necesare pentru prelucrarea imaginilor, a legăturilor dintre slidere și thumbnail-uri, instrucțiunea pentru afișarea descrierilor pentru fiecare imagine în parte.

Fig. 4.52 instrucțiune hover-shadow pentru LightBox

Fig.a 4.53 Script modal box

Fig 4.54 Modal/LightBox HTML code

În Fig 4.54 este ilustrat un fragment din codul HTML aferent Modal/LightBox.

Am ilustrat două exemple de cod, din cele două exemple se poate observa că codul este unul repetitiv, pentru fiecare imagine folosindu-se același cod, schimbându-se doar sursa imaginii pentru a evita afișarea unei singure imagini de două sau mai multe ori.

După cum se poate vedea este foarte ușor să lucrezi cu LightBox, acesta este făcut în așa manieră încât să se bazeze pe clase nu pe inline CSS. Acest lucru perimite editarea rapidă a mai multor elemente cu modificări într-un singur loc.

Fig. 4.55 CSS LightBox

În Fig. 4.55 vedem un fragment din codul CSS pentru galeria foto LightBox.

Clasa modal se referă la învelișul, ca să-i spun așa, modal. În această clasă proprietățile importante care au fost setate sunt: Poziția fixă, marginea superioară, înălțimea, lățimea și culoarea de background.

Clasa modal-content se referă la conținutul modal, fotografiile.

Cu ajutorul clasei close am stilizat și poziționat X-ul folosit pentru închiderea cutiei modale.

Clasele prev și next au fost folosite pentru a stiliza respectiv poziționa butoanele de imagine anterioară respectiv posterioară.

Pagina restaurant este construită din elemente despre care am discutat deja:

Fig. 4.56 Privire ansamblu pagină restaurant

Aceasta este compusă din bara de navigare, o scurtă prezentare a restaurantului un sample pentru meniu și partea de footer.

Deoarece clientul a spus că dorește să schimbe meniul până când site-ul v-a fi pus online, rubrica preparate reprezentative este una de model, cu rolul de a ilustra design-ul ei clientului de aceea nu au fost trecute nici numele preparatelor, nici descrierile sau prețurile, iar pozele sunt cele de la cazare și nu cu preparate culinare, așa cum ar fi normal.

Fig. 4.57 HTML meniu restaurant

În Fig. 4.57 am ilustrat codul folosit pentru a crea rubrica meniului, după cum se vede nu e un cod complicat, este unul simplu bazat pe clase și pe câteva intervenții inline CSS pentru a seta locul imaginii, float right.

În ceea ce privește pagina de rezervari/reservations aceasta este mai specială, deoarece pentru formularul de contact am folosit PHP, acest formular fiind motivul pentru care am introdus în lucrare Limbajul PHP.

Indiferent de tipul de site web pe care îl deți sau pe care îl ai în întreținere, cel mai probabil ai nevoie de un formular de contact. Rolul acestuia este de a ajuta utilizatorii să intre în contact cu staff-ul hotelului.

Fig. 4.58 Vedere ansamblu pagina rezervari/reservations

După cum se poate vedea pagina are un design minimalist, punându-se accent pe funcționalitate.

Formularul de contact este securizat cu reCHAPTA pentru un plus de siguranță.

ReCHAPTA este un serviciu gratuit, implementat de GOOGLE, care protejează site-urile web de spam-uri și utilizări abuzive. Acesta folosește un motor de analiză de risc avansat care este capabil să se adapteze provocărilor pentru a putea lupta cât mai eficient contra activităților abuzive pe site-urile web.

Fig. 4.59 Exemplu verificare reCHAPTA

Fig. 4.60 Alt exemplu verificare reCHAPTA

Există foarte multe tipuri de verificări reCHAPTA, de exemplu:

Fig. 4.59 folosește simțul audio al omului și puterea de înțelegere pentru verificare. Acestuia i se cere să asculte un fișier audio după care să introducă în spațiul special numerele auzite.

Fig 4.60 folosește percepția vizuală și concentrarea pentru a trece de verificare. Utilizatorului i se cere să selecteze, în cazul ilustrat, toate imaginile care conțin munți din cele 9 imagini prezentate. Odată ce utilizatorul a selectat toate imaginile în care el consideră că apar minți, acesta trebuie să dea clic pe butonul VERIFY. O dată acționat butonul de verificare, algoritmii implementați în reCHAPTA vor verifica alegerile făcute, iar dacă au fost alese toate imaginile, conform cerinței, utilizatorul va trece de verificarea de securitate, fiind redirecționat în siguranță către destinația dorită.

Dacă utilizatorul nu a îndeplinit cerința, cu alte cuvinte nu a selectat toate imaginile, acesta va trebui să o ia din nou de la capăt, acest ciclu repetându-se până când utilizatorul îndeplinește cerința.

Din acest motiv am asigurat și eu formularul cu reCHAPTA, pentru a împiedica pe cât posibil trimiterea de mesaje abuzive prin intermediul formularului de contact.

Fig. 4.60 CSS contact form

În Fig. 4.60 este ilustrat codul de CSS folosit pentru stilizarea formularului de contact.

După cum se vede, am folosit media query și în cadrul CSS-ului formularului de contact, deoarece cu ajutorul lui am setat ce se va întâmpla cu formularul de contact atunci când ecranul este mai mare de 768px. O dată depășită acea limită formularului de contact i se va adăuga un padding de 5%. În rest am folosit proprietăți obișnuite, manipularea culorilor, am adăugat border, am specificat lățimea maximă , pentru a nu arăta aiurea și am aliniat textul.

Fig. 4.61 Cod HTML form contact

În Fig. 4.61 este ilustrat codul HTML folosit pentu implementarea formularului de contact.

Acesta conține un script care să asigure funcționarea corectă a verificării reCHAPTA.

Am definit câmpurile care trebuie completate și dimensiune maximă acceptată a informației completate, spre exemlpu:

<label for=”name”>Nume:</label> se introduce numele utilizatorului;

<label id=”name” type=”text” name=”Nume” required maxlength=”50”> am setat ca lungimea maximă permisă a șirului ce urmează a fi introdus să fie de 50 de caractere, lungime mai mult decât suficientă pentru scrierea numelui.

<label for=”email”>Email:</label> se introduce numele utilizatorului;

<label id=”email” type=”email” name=”Email” required maxlength=”50”> am setat ca lungimea maximă permisă a șirului ce urmează a fi introdus să fie tot de 50 de caractere, iar tipul informației introduse de această dată este setat pe email.

În locul sintaxei “Insert your rechapta site key here” o dată ce site-ul va fi pus online pe domeniu propriu, va fi scrisă cheia rechapta a site-ului,

Acest lucru va remedia și eroarea vizibilă în Fig. 4.58 prin care proprietarul site-ului este notificat de faptul că cheia de site nu este corectă.

Așa cum am spus mai sus, în acest formular am folosit și limbajul PHP, mai exact instrucțiunea include, <? include ‘form.php’; ?>

Instrucțiunea include îmi permite să includ în acest fișier alte fișiere scrise, fără a le scrie în interiorul acestuia.

Această instrucțiune îmi permite să creez formularul o singură dată și să îl includ în orice pagină, de oricâte ori este nevoie.

Instrucțiunea <? include ‘form.php’; ?> preia fișierul în cauză și îl include în pagina în care este utilizată instrucțiunea.

Fig. 4.62 Cod PHP form

Codul din Fig. 4.62, este cel folosit pentru creearea firmularului de contact, după cum se poate vedea este scris în PHP.

Linia de cod prin care se folosește pentru a declara limbajul în php este: <?php ?>.

Codul se scrie în interiorul linie, în maniera:

<?php

“cod”

?>.

Această manieră de scriere a codului este recomandată deoarece permite o indentare frumoasă și curată a codului. Un cod bine indentat este mult mai ușor de editat și de refolosit ulterior.

ini_set(‘display_errors’ , 1);

ini_set(‘display_starterrors’ , 1);

Istrucțiunile mai sus menționate au rolul de a afișa erorile, iar instrucțiunea error_reporting(E_ALL); are rolul de a raporta toate erorile.

$validatorfields([‘Name’,’Email’])areRequired()maxLength(50)

Are rolul de a seta pentru câmpurile Name respecitv Email lungimea maximă acceptată, și anume 50 de caractere.

$validatorfield(‘Email’)isEmail();

Are rolul de a seta câmpul Email ca fiind unul cu destinația Email. Acest lucru ajută la îndosarierea corespunzătoare a mesajelor primite.

$validatorfields(’Message’) maxLength(6000);

Are rolul de a seta numărul maxim de caractere acceptate în câmpul Message la 6000. Acest lucru este util pentru a evita înșiruirea de lucruri irelevante în mesaj, pentru ca echipa care se ocupă de mesajele primite să le poată citi și soluționa, dacă este cazul, în cel mai scurt timp.

$ppgetReCaptcha()initSecureKey(‘Your ReCaptcha Secret Key Here’);

Poate fi considerată o linie de securitate deoarece în locul textului Your ReCaptcha Secret Key Here trebuie introdusă cheia secretă reCaptcha. Această cheie remediază și eroarea vizibilă în Fig. 4.58.

Cheia secretă se poate procura de pe site-ul https://www.google.com/recaptcha/intro/v3.html

Fig. 4.63 Site-ul de înregistrare ReCaptcha

Pentru procurarea cheii sunt necesari 3 pași simpli:

Accesarea site-ului menționat mai sus și acționarea butonului Admin console

Înregistrarea aplicației prin selectarea tipuilui de verificare reCaptcha dorit

Copierea cheii de site și a cheii secrete create pentru site-ul în cauză

Fig. 4.64 Formular înregistrare cerere pentru ReCaptcha

După cum se poate vedea în Fig. 4.46 formularul necesar pentru obținerea cheii secrete este foarte ușor de completat.

Sunt necesare:

completarea unui nume pentru etichetă;

alegerea versiunii de ReCaptcha dorită;

precizarea domeniului;

precizarea solicitantului, prin scrierea unei adrese de email valide.

Administrarea site-ului

Pentru administrarea site-ului se va folosi un serviciu de FTP(File Transfer Protocol sau protocol pentru transferul de fișiere-în română).

Administrarea unui site prin FTP nu presupune o soluție de tip CMS.

Aceasta se face prin intermediul unui client FTP. În funcție de clientul FTP folosit, acesta poate permite utilizarea soluțiilor FTP, FTPS sau SFTP.

Fig. 4,65 Panou de administrare a site-ului în clientul FTP

Eu personal folosesc FileZilla pentru a administra site-uri prin protocolul FTP. Acesta este un client FTP distribuit în mod gratuit, compatibil cu toate sistemele de operare.

Suportă toate protocoalele de transfer menționate mai sus.

Suportă limba română, ceea ce reprezintă un mare plus, ajutând la eficientizarea procesului de administrare.

Interfața sa este una curată, foarte ușor de utilizat.

Un alt mare plus îl reprezintă faptul că salvează datele de logare o dată introdu-se și creează un fel de bază de date (vezi Fig. 4.66)

Fig. 4.66 Exemplu site-uri salvate pe filezilla