Va rugam dezactivati programul ad block pentru a vizualiza pagina!

Rezultate pentru tag: arii




Comentarii în codul HTML

Etichetele de comentarii sunt utilizate pentru a insera comentarii în codul sursă HTML.
Comentariile nu sunt afișate de browser, dar vă pot ajuta să vă documentați codul sursă HTML.Cu ajutorul comentariilor puteți plasa notificări și memento-uri în HTML.
Comentariile sunt de asemenea foarte bune pentru depanarea HTML, deoarece puteți comenta câteodată liniile de cod HTML pentru a căuta erori:

Element de imagine în HTML

Elementul de imagine ne permite să afișăm imagini diferite pentru diferite dispozitive sau dimensiuni de ecran.
Elementul HTML <picture>.
Elementul <picture> conține o serie de elemente <source>.
Elementul <img> este folosit de browserele care nu acceptă elementul <picture> sau dacă niciuna dintre etichetele <source> nu se potrivește.
Există două scopuri principale pentru elementul <picture>: Lățime de bandă (Bandwidth), Formatați suportul (Format Support).

HTML Responsive Web Design

Responsive Web Design vizează utilizarea HTML-ului și CSS-ului pentru redimensionarea, ascunderea, micșorarea sau mărirea unui site web automat, pentru a-l arăta bine pe toate dispozitivele (desktop-uri, tablete și telefoane).
Setarea Viewport. Când creați pagini web responsive, adăugați următorul element <meta> în toate paginile dvs. web.
Imaginile responsive sunt imagini care se dimensionează frumos pentru a se potrivi cu orice dimensiune a browserului.
Utilizarea proprietății lățime (width).
Utilizarea proprietății cu lățimea maximă (max-width).
Elementul HTML <picture> vă permite să definiți imagini diferite pentru dimensiuni diferite ale ferestrei browserului.
Responsive Text Size. Mărimea textului poate fi setată cu o unitate „vw”, ceea ce înseamnă „lățimea vizualizării” (viewport width).
Pe lângă redimensionarea textului și a imaginilor, este de asemenea obișnuit să folosești interogări media în paginile responsive web.
Cu interogări media, puteți defini stiluri complet diferite pentru diferite dimensiuni de browser.
O pagină Responsive Web ar trebui să arate bine pe ecrane desktop mari și pe telefoane mobile mici.
Există multe CSS Frameworks care oferă un Responsive Design.
O modalitate excelentă de a crea un Responsive Design este de a utiliza o responsive style sheet.
Un alt framework popular este Bootstrap, folosește HTML, CSS și jQuery pentru a face pagini web responsive.



 

Elemente de cod HTML pentru computer

Elementele de cod HTML pentru computer sunt:
<code> Defineste codul de programare.
<kbd> Definește introducerea tastaturii.
<samp> Definește ieșirea computerului.
<var> Definește o variabilă.
<pre>Definește un text preformatat.

Entități HTML

Caracterele rezervate în HTML trebuie înlocuite cu entități de caractere.
Caracterele care nu sunt prezente pe tastatură pot fi, de asemenea, înlocuite de entități.

Ghid de stil în HTML5

O utilizare constantă a stilului face mai ușor pentru alții să înțeleagă HTML-ul.
În viitor, programe precum cititorii XML ar putea dori să citească HTML-ul.
Utilizarea unei sintaxe bine formate - „aproape de XHTML” poate fi inteligentă.
Vă recomandăm să folosiți numele elementelor scrise cu litere mici, deoarece:
În HTML5, nu trebuie să închideți toate elementele (de exemplu elementul <p>).
Vă recomandăm să închideți toate elementele HTML.
Închideți elementele HTML goale
În HTML5, este opțional să închideți elementele goale.
HTML5 permite amestecarea literelor mari și a literelor mici în nume de atribute.
Vă recomandăm să folosiți nume de atribute scrise culitere mici.
HTML5 permite ca valorile atributelor să fie scrise fără ghilimele.
Vă recomandăm să puneți între ghilimele valorile atributului.
Adăugați întotdeauna atributul alt la imagini. Acest atribut este important atunci când imaginea din anumite motive nu poate fi afișată. De asemenea, definiți întotdeauna lățimea și înălțimea (width și height) imaginii. Reduce pâlpâirea, deoarece browserul poate rezerva spațiu pentru imagine înainte de încărcare.
HTML5 permite spații în jurul semnelor egale. Dar fără spațiu este mai ușor de citit și grupează entitățile mai bine împreună.
Când utilizați un editor HTML, este incomod să derulați la dreapta și la stânga pentru a citi codul HTML.
Încercați să evitați liniile de cod mai lungi de 80 de caractere.
Nu adăugați linii necompletate fără un motiv.
Pentru lizibilitate, adăugați linii goale pentru a separa blocuri de coduri mari sau logice.
Pentru lizibilitate, adăugați două spații de indentare. Nu folosiți tasta tab.
Nu folosiți linii necompletate și indentate. Nu este necesar să indentizați fiecare elemen
În HTML5, eticheta <html> și eticheta <body> pot fi omise.
Nu vă recomandăm să omiteți etichetele <html> și <body>.
Elementul <html> este rădăcina documentului. Este locul recomandat pentru specificarea limbii paginii.
Omiterea <html> sau <body> poate bloca software-ul DOM și XML.
Omiterea <body> poate produce erori în browserele mai vechi (IE9).
În HTML5, eticheta <head> poate fi omisă.
În mod implicit, browserele vor adăuga toate elementele înainte de <body> la un element implicit <head>.
Puteți reduce complexitatea HTML prin omiterea etichetei <head>
Elementul <title> este necesar în HTML5. Faceți titlul cât mai semnificativ posibil
HTML5 a introdus o metodă pentru a permite proiectanților web să preia controlul asupra viewport-ului, prin eticheta <meta>.
Viewport este zona vizibilă a utilizatorului unei pagini web. Acesta variază în funcție de dispozitiv și va fi mai mic pe un telefon mobil decât pe ecranul computerului.
Lățimea (width) = partea lățimii dispozitivului (width=device-width part) - stabilește lățimea paginii pentru a urma lățimea ecranului dispozitivului (screen-width) (care va varia în funcție de dispozitiv).
Partea inițială = 1,0 setează nivelul de zoom inițial atunci când pagina este încărcată prima dată de browser
Comentariile scurte trebuie scrise pe o singură linie
Comentariile lungi sunt mai ușor de observat dacă sunt indentate în două spații.
Utilizați sintaxa simplă pentru a face legătura cu foile de stil (atributul tip nu este necesar)
Regulile scurte pot fi comprimate
Regulile lungi trebuie scrise pe mai multe rânduri
Puneți suportul de deschidere (opening bracket) pe aceeași linie cu selectorul.
Utilizați un spațiu înainte de suportul de deschidere (opening bracket).
Folosiți două spații de indentare.
Utilizați punct și virgulă după fiecare pereche proprietate-valoare, inclusiv ultima.
Utilizați ghilimele în jurul valorilor numai dacă valoarea conține spații.
Plasați suportul de închidere (opening bracket) pe o linie nouă, fără spații de conducere.
Evitați liniile de peste 80 de caractere.
Se încarcă JavaScript în HTML
Accesarea elementelor HTML cu JavaScript
Utilizați numele de fișiere scrise cu litere mici
Fișierele HTML ar trebui să aibă o extensie .html sau .htm.
Fișierele CSS ar trebui să aibă o extensie .css.
Fișierele JavaScript ar trebui să aibă o extensie .js.
Nu există nicio diferență între extensiile .htm și .html. Ambele vor fi tratate ca HTML de orice browser web sau server web.
Când o adresă URL nu specifică un nume de fișier (cum ar fi https://www.lectii-virtuale.ro/css/), serverul returnează un nume de fișier implicit. Numele de fișiere implicite obișnuite sunt index.html, index.htm, default.html și default.htm.
Dacă serverul dvs. este configurat doar cu "index.html" ca nume de fișier implicit, fișierul dvs. trebuie numit "index.html", nu "index.htm."

HTML APIs

API Geolocalizare HTML este utilizat pentru a localiza poziția unui utilizator.
Localizați Poziția Utilizatorului
API Geolocalizare în HTML este utilizat pentru a obține poziția geografică a unui utilizator.
Deoarece acest lucru poate compromite confidențialitatea, poziția nu este disponibilă decât dacă utilizatorul o aprobă.
Geolocalizarea este cea mai precisă pentru dispozitivele cu GPS, cum ar fi smartphone-ul.
Începând cu Chrome 5.0, API-ul de geolocalizare va funcționa numai pe contexte sigure, cum ar fi HTTPS. Dacă site-ul dvs. este găzduit pe o origine nesigură (cum ar fi HTTP), solicitările pentru a obține locația utilizatorilor nu vor mai funcționa.
Utilizarea geolocalizării în HTML
Metoda getCurrentPosition () este utilizată pentru a returna poziția utilizatorului.
Al doilea parametru al metodei getCurrentPosition () este utilizat pentru a gestiona erorile. Specifică o funcție care trebuie executată dacă nu reușește să obțină locația utilizatorului:
Pentru a afișa rezultatul într-o hartă, aveți nevoie de acces la un serviciu de hartă, cum ar fi Google Maps.
Geolocalizarea este de asemenea foarte utilă pentru informații specifice locației, cum ar fi:
Informații locale actualizate.
Afișare Puncte de interes în apropierea utilizatorului.
Navigare rotativă (GPS).
Metoda getCurrentPosition () returnează un obiect de succes. Proprietățile de latitudine, longitudine și precizie sunt întotdeauna returnate. Celelalte proprietăți sunt returnate dacă sunt disponibile:
coords.latitude -  Latitudinea ca număr zecimal (întors întotdeauna)
coords.longitude - Longitudinea ca număr zecimal (întors întotdeauna)
coords.acuratetă - Precizia poziției (întoarsă întotdeauna)
coords.altitude - Altitudinea în metri peste nivelul mării medii (returnat dacă este disponibil)
coords.altitude - Accarity Precizia altitudinii de poziție (returnată dacă este disponibilă)
coords.heading - Titlul ca grade în sensul acelor de ceasornic dinspre nord (returnat dacă este disponibil)
coords.speed - Viteza în metri pe secundă (returnată dacă este disponibilă)
timestamp -  Data / ora răspunsului (returnat dacă este disponibil)
Obiect de geolocalizare - Alte metode interesante
watchPosition () - returnează poziția actuală a utilizatorului și continuă să returneze poziția actualizată pe măsură ce utilizatorul se mișcă (precum GPS-ul într-o mașină).
clearWatch () - Oprește metoda watchPosition ().

CSS Sintaxă

Un set de reguli CSS constă dintr-un selector și un bloc de declarații.
Selectorul indică elementul HTML pe care doriți să-l creeze în stil.
Blocul de declarație conține una sau mai multe declarații separate prin punct și virgulă.
Fiecare declarație include un nume de proprietate CSS și o valoare, separate de două puncte.
O declarație CSS se încheie întotdeauna cu punct și virgulă, iar blocurile de declarație sunt înconjurate de acolade.
Comentariile sunt utilizate pentru a explica codul și pot fi utile atunci când editați codul sursă la o dată ulterioară.
Comentariile sunt ignorate de browsere.
Un comentariu CSS începe cu / * și se termină cu * /. De asemenea, comentariile pot cuprinde mai multe linii.

CSS Overflow

Proprietatea CSS overflow controlează ce se întâmplă cu conținutul prea mare pentru a se încadra într-o zonă.
CSS Overflow
Proprietatea de overflow specifică dacă trebuie să decupați conținutul sau să adăugați bare de defilare atunci când conținutul unui element este prea mare pentru a se încadra în zona specificată.
Proprietatea de overflow are următoarele valori:
visible (vizibil) - implicit. Depășirea nu este tăiată. Conținutul este redat în afara casetei elementului.
hidden (ascuns) - preaplinul este tăiat, iar restul conținutului va fi invizibil.
scroll (defilare) - overflow-ul este tăiat și este adăugată o bară de defilare pentru a vedea restul conținutului.
auto - Similar cu defilarea, dar adaugă bare de defilare doar atunci când este necesar.
Elementul overflow: visible (revărsat: vizibil)
În mod implicit, revărsarea este vizibilă (overflow: visible), ceea ce înseamnă că nu este tăiată și se redă în afara casetei elementului.
Elementul overflow: hidden (revărsat: ascuns)
Odată cu valoarea ascunsă (overflow: hidden), preluarea este tăiată, iar restul conținutului este ascuns.
Elementul overflow: scroll (revărsat: defilare)
Setând valoarea pentru a derula (overflow: scroll), revărsarea este decupată și este adăugată o bară de defilare pentru a derula în interiorul casetei. Rețineți că aceasta va adăuga o bară de defilare atât pe orizontală cât și pe verticală (chiar dacă nu aveți nevoie de ea).
Elementele overflow-x și overflow-y
Proprietățiile de overflow-x și overflow specifică dacă trebuie să schimbe overflow-ul de conținut doar orizontal sau și vertical (sau ambele):
overflow-x specifică ce trebuie făcut cu marginile stânga / dreapta ale conținutului.
overflow-y specifică ce trebuie făcut cu marginile de sus / de jos ale conținutului.
Toate proprietățiile CSS  de overflow:
overflow - Specifică ce se întâmplă dacă conținutul revărsă caseta unui element.
overflow-x - Specifică ce se poate face cu marginile stânga / dreapta ale conținutului dacă acesta revărsă zona de conținut a elementului.
overflow-y - Specifică ce trebuie făcut cu marginile de sus / de jos ale conținutului dacă acesta revărsă zona de conținut a elementului.

CSS Align

CSS Layout - Aliniere orizontală și verticală
Elemente de aliniere de centru
Pentru a centra orizontal un element de block (cum ar fi <div>), utilizați margin: auto;
Setarea lățimii elementului îl va împiedica să se întindă până la marginile containerului său.
Elementul va prelua apoi lățimea specificată, iar spațiul rămas va fi împărțit în mod egal între cele două margini.
Notă: Alinierea la centru nu are efect dacă proprietatea lățimii nu este setată (sau setată la 100%).
Centrare aliniere text (Center Align Text)
Pentru a centra doar textul în interiorul unui element, utilizați text-align: center;
Centrați o imagine
Pentru a centra o imagine, setați marginea stângă și dreaptă pe auto și transformați-o într-un element block.
Aliniere stânga și dreapta - Folosire position
O metodă de aliniere a elementelor este utilizarea position: absolut ;:
Aliniere stânga și dreapta - Folosire float
O altă metodă pentru alinierea elementelor este utilizarea proprietății float.
Dacă un element este mai înalt decât elementul care îl conține și este float, acesta se va revărsa (overflow) în afara containerului său. Puteți utiliza hackul „clearfix” pentru a remedia acest lucru (a se vedea exemplul de mai jos).
The clearfix Hack
Putem adăuga overflow: auto; la elementul conținut pentru a remedia această problemă.
Centrare vertical - Folosire padding
Există multe moduri de a centra un element pe verticală în CSS. O soluție simplă este utilizarea paddingu-ului de sus și de jos.
Centru vertical - Folosire line-height
Un alt truc este să folosiți proprietatea line-height cu o valoare egală cu proprietatea height.
Centru vertical - Folosire position și transform
Dacă padding și line-height nu sunt opțiuni, o a treia soluție este utilizarea poziționării și a proprietății de transformare.

CSS Pseudo-clase

Ce sunt Pseudo-clasele?
O pseudo-clasă este utilizată pentru a defini o stare specială a unui element.
De exemplu, poate fi folosit pentru:
Stilează un element atunci când un utilizator trece cu mouseul peste el.
Stileaza linkurile vizitate și nevizitate diferit.
Stilează un element când se focusează.
Pseudo-clase ancorare
Linkurile pot fi afișate în diferite moduri.
a: hover TREBUIE să vină după  a:link și a:visited în definiția CSS pentru a fi eficiente! a: active TREBUIE să vină după a:hover în definiția CSS pentru a fi eficient! Numele pseudo-class nu sunt case-sensitive.
Pseudo-clase și clase CSS
Pseudo-clasele pot fi combinate cu clase CSS.
Hover pe <div>
Simple Tooltip Hover
Hover peste un element <div> pentru a afișa un element <p> (cum ar fi un tooltip).
Pseudo-clasa CSS - :first-child
Pseudo-clasa :first-child se potrivește cu un element specificat care este primul copil al unui alt element.
Potriviți primul element <p>.
Potriviți primul element <i> din toate elementele <p>.
Potriviți toate elementele <i> din toate elementele primului copil <p>.
Pseudo-clasa CSS - :lang
Pseudo-clasa CSS - :lang vă permite să definiți reguli speciale pentru diferite limbi.
:lang definește ghilimele pentru elementele <q> cu lang = "no".
Toate clasele CSS Pseudo. Toate elementele CSS  Pseudo.

CSS Pseudo-elemente

Un pseudo-element CSS este utilizat pentru a stabili părțile specificate ale unui element.
De exemplu, poate fi folosit pentru:
Stilizarea primei litere sau linia unui element.
Inserarea de conținut înainte sau după, conținutul unui element.
Observați notația dublă colon - :: first-line versus :first-line
Dublul colon a înlocuit notația cu un singur colon pentru pseudo-elemente în CSS3. Aceasta a fost o încercare din partea W3C de a distinge pseudo-clasele și pseudo-elementele.
Sintaxa cu un singur colon a fost folosită atât pentru pseudo-clase, cât și pentru pseudo-elemente în CSS2 și CSS1.
Pseudo-element :: first-line este utilizat pentru a adăuga un stil special la prima linie a unui text.
Pseudo-elementul :: first-line poate fi aplicat numai elementelor la nivel de block.
Următoarele proprietăți se aplică pentru pseudo-element :: first-line: font properties, color properties, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear
Pseudo-elementul :: first-letter este utilizat pentru a adăuga un stil special la prima literă a unui text.
Pseudo-elementul :: first-letter poate fi aplicat numai elementelor la nivel de block.
Următoarele proprietăți se aplică pentru pseudo-elementul :: first-letter: font properties, color properties , background properties, margin properties, padding properties, border properties, text-decoration, vertical-align (only if "float" is "none"), text-transform, line-height, float, clear
Pseudo-elemente și clase CSS
Pseudo-elementele pot fi combinate cu clase CSS.
Pseudo-elemente multiple
Mai multe pseudo-elemente pot fi, de asemenea, combinate.
Pseudo-elementul ::before poate fi utilizat pentru a insera un anumit conținut înainte de conținutul unui element.
Pseudo-elementul ::after poate fi utilizat pentru a insera un anumit conținut după conținutul unui element.
Pseudo-element ::selection se potrivește cu porțiunea unui element selectat de un utilizator.
Următoarele proprietăți CSS pot fi aplicate la ::selection: culoare, fundal, cursor și contur (color, background, cursor, și outline).
Toate Pseudo-elementele CSS:
::after p ::after - Inserați ceva după conținutul fiecărui element <p>
::before p ::before - Introduceți ceva înainte de conținutul fiecărui element <p>
::first letter p ::first letter -  Selectează prima literă a fiecărui element <p>
::first-line p ::first-line - Selectează prima linie a fiecărui element <p>
::selection p ::selection - Selectează porțiunea unui element selectat de un utilizator
Toate Pseudo-clasele CSS:
:active a:active - Selectează legătura activă
:checked :input checked - Selectează fiecare element <input> bifat
:disabled :input disabled - Selectează fiecare element dezactivat <input>
:empty p:empty - Selectează fiecare element <p> care nu are copii
:enabled input:enabled - Selectează fiecare element activat <input>
:first-child p:first-child  - Selectează toate elementele <p> care este primul copil al părintelui său
:first-of-type p:first-of-type - Selectează fiecare element <p> care este primul element <p> al părintelui său
:focus input:focus - Selectează elementul <input> care are focus
:hover a:hover - Selectează linkurile peste mouse
:in-range input:in-range - Selectează elementele <input> cu o valoare dintr-un interval specificat
:invalid :input invalid - Selectează toate elementele <input> cu o valoare nevalidă
:lang(language)    p:lang(it) -  Selectează fiecare element <p> cu o valoare a atributului lang începând cu „it”
:last-child    p:last-child - Selectează toate elementele <p> care este ultimul copil al părintelui său
:last-of-type    p:last-of-type - Selectează fiecare element <p> care este ultimul element <p> al părintelui său
:link a:link - Selectează toate linkurile nevizitate
:not (selector) :not (p) - Selectează fiecare element care nu este un element <p>
:nth-child (n) p:nth-child (2) - Selectează fiecare element <p> care este al doilea copil al părintelui său
:nth-last-child (n) p:nth-last-child (2) - Selectează fiecare element <p> care este al doilea copil al părintelui său, numărând de la ultimul copil
:nth-last-of-type (n) p:nth-last-of-type (2) - Selectează fiecare element <p> care este al doilea element <p> al părintelui său, numărând de la ultimul copil
:nth-of-type (n) p:nth-of-type (2) - Selectează fiecare element <p> care este al doilea element <p> al părintelui său
:only-of-type p:only-of-type - Selectează fiecare element <p> care este singurul element <p> al părintelui său
:only-child p:only-child - Selectează fiecare element <p> care este singurul copil al părintelui său
:optional  input:optional - Selectează elementele <input> fără atribut "necesar"
:out-of-range    input:out-of-range - Selectează elementele <input> cu o valoare în afara unui interval specificat
:read-only  input:read-only - Selectează elementele <input> cu atributul „readonly” specificat
:read-write input:read-write - Selectează elementele <input> fără atribut "readonly"
:required  input:required - Selectează elementele <input> cu atributul „necesar” specificat
:root root - Selectează elementul rădăcină al documentului
:target #news:target - Selectează elementul #news activ curent (faceți clic pe o adresă URL care conține numele ancorării)
:valid  input:valid - Selectează toate elementele <input> cu o valoare valabilă
:visited  a:visited - Selectează toate linkurile vizitate

CSS Formulare

Formulare CSS
Aspectul unui formular HTML poate fi îmbunătățit mult cu CSS.
Stilizarea câmpurilor de intrare (Styling Input Fields)
Utilizați proprietatea width pentru a determina lățimea câmpului de intrare (input field).
Dacă doriți să stilați un tip de intrare specific, puteți utiliza selectori de atribute:
input [type=text] - va selecta doar câmpurile de tip text
input [type=password] - va selecta doar câmpuri de tip parolă
input [type=number] - va selecta doar câmpuri numerice
Padded Inputs
Utilizați proprietatea padding pentru a adăuga spațiu în câmpul text.
Când aveți multe intrări una după cealaltă, este posibil să doriți să adăugați și o anumită marjă (margin), pentru a adăuga mai mult spațiu în afara lor.
Bordered Inputs
Utilizați proprietatea border pentru a modifica dimensiunea și culoarea border-ului și utilizați proprietatea border-radius pentru a adăuga colțuri rotunjite(corners rounded).
Dacă doriți doar un bottom border, utilizați proprietatea border-bottom.
Colored Inputs
Utilizați proprietatea background-color pentru a adăuga o culoare de fundal la intrare și proprietatea color pentru a schimba culoarea textului.
Focused Inputs
În mod implicit, unele browsere vor adăuga un contur (outline) albastru în jurul intrării atunci când va fi focalizat (faceți click pe). Puteți elimina acest comportament adăugând outline: none; la intrare.
Utilizați selectorul :focus pentru a face ceva cu câmpul de introducere atunci când este focalizat.
Intrare cu pictogramă / imagine(Input with icon/image)
Dacă doriți o pictogramă (icon) în interiorul intrării, utilizați proprietatea background-image și poziționați-o cu proprietatea background-position. Rețineți, de asemenea, că adăugăm un left padding mare pentru a rezerva spațiul pictogramei (icon).
Intrare de căutare animată(Animated Search Input)
În acest exemplu, utilizăm proprietatea CSS transition pentru a anima lățimea (width) intrării de căutare atunci când devine focus. 
Styling Textareas
Utilizați proprietatea resize pentru a împiedica redimensionarea textului (dezactivați „grabber” din colțul din dreapta jos):
Styling Select Menus
Stilizarea butoanelor de intrare(Styling Input Buttons)
Formular responsiv(Responsive Form)
Redimensionați fereastra browserului pentru a vedea efectul. Când ecranul are o lățime mai mică de 600px, faceți ca cele două coloane să se stivească una peste alta, în loc de una lângă alta.
Interogări media pentru a crea un formular cu răspuns.

CSS Transformări 3D

CSS Transformări 3D
CSS acceptă, de asemenea, transformări 3D.
În acest capitol veți afla despre următoarele proprietăți CSS: transform
Asistență browser (Browser Support)
Prefixuri specifice browserului
Unele browsere mai vechi au nevoie de prefixe specifice (-webkit-) pentru a înțelege proprietățiile de transformare 3D.
CSS Metode de transformare 3D
Cu proprietatea de transformare CSS puteți utiliza următoarele metode de transformare 3D: rotateX(), rotateY(), rotateZ()
Metoda rotateX() roteste un element in jurul axei X la un anumit grad.
Metoda rotateY() roteste un element in jurul axei sale Y la un anumit grad.
Metoda rotateZ() roteste un element in jurul axei Z la un anumit grad.
Proprietăți de transformare CSS
transform - Aplică o transformare 2D sau 3D la un element
transform-origin - Vă permite să schimbați poziția asupra elementelor transformate
transform-style - Specifică modul în care sunt redate elementele nested în spațiul 3D
perspective - Specifică perspectiva asupra modului în care sunt vizualizate elementele 3D
perspective-origin - Specifică poziția de jos a elementelor 3D
backface-visibility - Vizualizează dacă un element trebuie să fie vizibil atunci când nu este orientat către ecran
CSS Metode de transformare 3D
matrix3d
(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) - Definește o transformare 3D, folosind o matrice 4x4 cu 16 valori
translate3d(x, y, z) - Definește o traducere 3D
translateX(x) - Definește o traducere 3D, folosind doar valoarea pentru axa X
translateY(y) - Definește o traducere 3D, folosind doar valoarea pentru axa Y
translateZ(z) - Definește o traducere 3D, folosind doar valoarea pentru axa Z
scale3d(x, y, z) - Definește o transformare la scară 3D
scaleX(x) - Definește o transformare a scării 3D dând o valoare pentru axa X
scaleY(y) - Definește o transformare a scării 3D dând o valoare pentru axa Y
scaleZ(z) - Definește o transformare a scării 3D dând o valoare pentru axa Z
rotate3d(x, y, z, angle) - Definește o rotație 3D
rotateX(angle) - Definește o rotație 3D de-a lungul axei X
rotateY(angle) - Definește o rotație 3D de-a lungul axei Y
rotateZ(angle) - Definește o rotație 3D de-a lungul axei Z
perspective(n) - Definește o vedere în perspectivă pentru un element transformat 3D

CSS Animații

Animații CSS
CSS permite animarea elementelor HTML fără a utiliza JavaScript sau Flash!
În acest capitol veți afla despre următoarele proprietăți: @keyframes, animation-name, animation-duration, animation-delay, animation-iteration-count, animation-direction, animation-timing-function, animation-fill-mode, animation.
Asistență browser pentru animații (Browser Support for Animations)
Prefixuri specifice browserului
Unele browsere mai vechi au nevoie de prefixe specifice (-webkit-) pentru a înțelege proprietățiile de animație.
Ce sunt animațiile CSS?
O animație permite unui element să se schimbe treptat de la un stil la altul.
Puteți modifica câte proprietăți CSS doriți, de câte ori doriți.
Pentru a utiliza animația CSS, trebuie mai întâi să specificați câteva cadre cheie pentru animație.
Cadrele cheie conțin ce stiluri va avea elementul în anumite momente.
Regula @keyframes
Când specificați stiluri CSS din regula @keyframes, animația se va schimba treptat de la stilul curent la noul stil în anumite momente.
Pentru ca animația să funcționeze, trebuie să legați animația de un element.
Legarea animației „exemplu” de elementul <div>. Animația va dura 4 secunde și va schimba treptat culoarea de fundal a elementului <div> de la „red” la „yellow”.
Proprietatea animation-duration definește cât timp ar trebui să dureze o animație. Dacă proprietatea animation-duration nu este specificată, nu va apărea nicio animație, deoarece valoarea implicită este 0s (0 secunde).
Am specificat când stilul se va schimba folosind cuvintele cheie „from” și „to” (care reprezintă 0% (start) și 100% (complet)).
Este posibilă utilizarea procentului. Utilizând procente, puteți adăuga oricâte modificări de stil doriți.
Schimbarea culorii de fundal (background-color) a elementului <div> atunci când animația este completă 25%, 50% completă și din nou când animația este 100% completă:
Întârziere animație (Delay an Animation)
Proprietatea animation-delay specifică o întârziere pentru începerea unei animații.
De asemenea, sunt permise valori negative. Dacă utilizați valori negative, animația va începe ca și cum ar fi jucat deja N secunde.
Setați de câte ori ar trebui să ruleze o animație
Proprietatea animation-iteration-count specifică numărul pe care trebuie să-l ruleze o animație.
Valoarea „infinite”  - pentru a face animația să continue pentru totdeauna
Rulați animația în direcție inversă sau cicluri alternative
Proprietatea animation-direction specifică dacă o animație trebuie să fie redată înainte, înapoi sau în cicluri alternative.
Proprietatea animation-direction poate avea următoarele valori:
normal - Animația este redată normal (înainte). Aceasta este implicită
reverse - animația este redată în sens invers (înapoi)
alternate - animația este redată mai întâi, apoi înapoi
alternate-reverse - animația este redată mai întâi înapoi, apoi înainte
Rulare animație în sens invers (înapoi)(backwards).
Valoarea "alternate" pentru a face ca animația să fie difuzată mai întâi înainte (forwards), apoi înapoi (backwards).
Valoarea „alternate-reverse” pentru a face ca animația să fie rulată mai întâi înapoi(backwards), apoi înainte (forwards)
Rulați animația în direcție inversă sau cicluri alternative
Proprietatea animation-direction specifică dacă o animație trebuie să fie redată înainte, înapoi sau în cicluri alternative.
Proprietatea animation-direction poate avea următoarele valori:
normal - Animația este redată normal (înainte)(forwards). Aceasta este implicită
reverse - animația este redată în sens invers (înapoi)
alternate - animația este redată mai întâi înainte(forwards), apoi înapoi(backwards)
alternate-reverse - animația este redată mai întâi înapoi(backwards), apoi înainte(forwards)
Rulare animație în sens invers (înapoi)(backwards):
Valoarea "alternate" pentru a face ca animația să fie difuzată mai întâi înainte (forwards), apoi înapoi (backwards).
Valoarea „alternate-reverse” pentru a face ca animația să fie rulată mai întâi înapoi(backwards), apoi înainte(forwards).
Precizați curba de viteză (Speed Curve) a animației
Proprietatea animation-timing-function specifică curba de viteză (speed curve) a animației.
Proprietatea animation-timing-function  poate avea următoarele valori:
ease - Specifică o animație cu început lent, apoi rapid, apoi sfârșit încet (aceasta este implicit)
linear - Specifică o animație cu aceeași viteză de la început până la sfârșit
ease-in - Specifică o animație cu pornire lentă
ease-out - Specifică o animație cu sfârșit lent
ease-in-out - Specifică o animație cu început și sfârșit lent
cubic-bezier(n,n,n,n) - Vă permite să definiți propriile valori într-o funcție cubic-bezier
Precizați modul de completare (fill-mode) pentru o animație
Animațiile CSS nu afectează un element înainte de a fi redat primul cadru-cheie (keyframe) sau după ce ultimul cadru-cheie (keyframe) este redat. Proprietatea animation-fill-mode poate înlocui acest comportament.
Proprietatea animation-fill-mode specifică un stil pentru elementul țintă atunci când animația nu se joacă (înainte de a începe, după ce se termină, sau ambele).
Proprietatea animation-fill-modepoate avea următoarele valori:
none - Valoare implicită. Animația nu va aplica niciun stil la element înainte sau după executarea acestuia
forwards - Elementul va pastra valorile stilului setate de ultimul cadru cheie (keyframe) (depinde de animation-direction și animation-iteration-count)
backwards - Elementul va obține valorile de stil setate de primul cadru-cheie (keyframe) (depinde de animation-direction) și îl va păstra în timpul perioadei de întârziere a animației
both - Animația va respecta regulile atât în ​​față cât și înapoi (forwards și backwards), extinzând proprietățiile de animație în ambele direcții
Elementul <div> păstrează valorile stilului de la ultimul cadru cheie (keyframe) la încheierea animației.
Exemple animation-fill-mode
Elementul <div> obține valorile style setate de primul cadru cheie (keyframe) înainte de începerea animației (în perioada de întârziere a animației (animation-delay)).
Elementul <div> obține valorile style setate de primul cadru cheie (keyframe) înainte de începerea animației și să păstreze valorile stilului de la ultimul cadru de cheie (keyframe) atunci când animația se încheie.
Proprietatea Shorthand Animation
Proprietăți CSS animation
@keyframes - Specifică codul de animație
animation - O proprietate shorthand pentru setarea tuturor proprietăților de animație
animation-delay - Specifică o întârziere pentru începerea unei animații
animation-direction - Specifică dacă o animație trebuie să fie redată înainte, înapoi sau în cicluri alternative
animation-duration - Specifică cât timp trebuie să dureze o animație pentru a finaliza un ciclu
animation-fill-mode - Specifică un stil pentru element atunci când animația nu se joacă (înainte de a începe, după ce se termină sau ambele)
animation-iteration-count - Specifică numărul de ori când trebuie să fie redată o animație
animation-name - Specifică numele animației @keyframes
animation-play-state - Specifică dacă animația este în curs de execuție sau în pauză
animation-timing-function - Specifică curba de viteză a animației

CSS Paginare

CSS Paginare
Aflați cum puteți crea o paginare responsive folosind CSS.
Paginare simplă
Dacă aveți un site web cu o mulțime de pagini, poate doriți să adăugați un fel de paginare la fiecare pagină.
Paginarea activă și hoverable
Evidențiați pagina curentă cu o clasă .active și folosiți selectorul :hover pentru a schimba culoarea fiecărei linii de pagină atunci când deplasați mouse-ul peste ele.
Butoane rotunjite active și hoverable
Dacă doriți un buton rotund „active” și „hover” adăugați proprietatea border-radius.
Efect de tranziție hoverable (Hoverable Transition Effect)
Adăugați proprietatea transition la link-urile paginii pentru a crea un efect de tranziție în timpul trecerii (hover).
Paginare mărginită (Bordered Pagination)
Utilizați proprietatea border pentru a adăuga borduri la paginație.
Margini rotunjite (Rounded Borders)
Adăugați rounded borders la prima și ultima dvs. legătură (link) din paginare.
Spațiu între legături (Space Between Links)
Adăugați proprietatea margin dacă nu doriți să grupați linkurile paginii.
Mărimea paginării (Pagination Size)
Modificați dimensiunea paginării cu proprietatea font-size.
Paginarea centrată (Centered Pagination)
Pentru a centra paginarea, wrap un element de tip container (cum ar fi <div>) în jurul lui cu text-align:center
Paginare Breadcrumbs
O altă variantă a paginării este așa-numita "breadcrumbs"

CSS Box Sizing

CSS Box Sizing
Proprietatea CSS box-sizing ne permite să includem padding și border în lățimea și înălțimea totală (width și height) a unui element.
Fără proprietatea CSS box-sizing
În mod implicit, lățimea și înălțimea (width și height) unui element sunt calculate astfel:
width + padding + border = lățimea reală a unui element
height + padding + border = înălțimea reală a unui element
Aceasta înseamnă: Când setați lățimea / înălțimea (width/height) unui element, elementul pare adesea mai mare decât ați setat (deoarece border-ul și padding-ul elementului sunt adăugate la lățimea / înălțimea (width/height) specificată a elementului).
Cu proprietatea CSS box-sizing
Proprietatea CSS box-sizing ne permite să includem padding și border în lățimea și înălțimea (width și height) totală a unui element.
Dacă setați box-sizing: border-box; pe un element padding și border sunt incluse în lățime și înălțime (width și height).
Deoarece rezultatul utilizării box-sizing: border-box; este cu atât mai bine, mulți dezvoltatori doresc ca toate elementele din paginile lor să funcționeze astfel.
Codul de mai jos asigură în acest mod mai intuitiv dimensiunea tuturor elementelor. Multe browsere folosesc deja box-sizing: border-box; pentru multe elemente de formă (dar nu toate - motiv pentru care inputs și text areas arată diferit la width: 100%;).
Aplicarea acestui lucru pe toate elementele este sigur și înțelept.
Proprietatea CSS Box Sizing
box-sizing - Defineste modul în care se calculează lățimea și înălțimea (width și height) unui element: trebuie să includă padding și borders, sau nu.

CSS Interogări media

CSS Interogări media (CSS Media Queries)
CSS2 Tipuri de suport introduse (CSS2 Introduced Media Types)
Regula @media, introdusă în CSS2, a făcut posibilă definirea regulilor de stil (style rules) diferite pentru diferite tipuri de media.
Ați putea avea un set de reguli de stil (style rules) pentru ecrane de computer, una pentru imprimante, una pentru dispozitive portabile, una pentru dispozitive tip televizor și așa mai departe.
Din păcate, aceste tipuri de suporturi nu au primit niciodată multă asistență din partea dispozitivelor, în afară de tipul de printare (print media type).
CSS3 Interogări media introduse (CSS3 Introduced Media Queries)
Interogările media (Media queries) din CSS3 au extins ideea tipurilor de media CSS2: În loc să caute un tip de dispozitiv, ele analizează capacitatea dispozitivului.
Interogările media (Media queries) pot fi utilizate pentru a verifica multe lucruri, cum ar fi:
lățimea și înălțimea vizualizării (width and height of the viewport)
lățimea și înălțimea dispozitivului (width and height of the device)
orientare (tableta / telefonul este în mod landscape sau portret?) (orientation (is the tablet/phone in landscape or portrait mode?))
rezoluţie (resolution)
Asistență browser(Browser Support)
Numerele din tabel specifică prima versiune a browserului care acceptă integral regula @media.
Sintaxa interogare media (Media Query Syntax)
O interogare media (media query) constă dintr-un tip media și poate conține una sau mai multe expresii, care se rezolvă returnand  fie valoarea adevărat, fie valoarea fals.
Rezultatul interogării este adevărat dacă tipul de media (media type) specificat se potrivește cu tipul de dispozitiv pe care este afișat documentul și toate expresiile din interogarea media (media query) sunt adevărate. Când o interogare media (media query) este adevărată, se aplică foaia de stil (stylesheets) sau regulile de stil (style rules) corespunzătoare, urmând regulile normale în cascadă.
Cu excepția cazului în care utilizați operatorii not sau only, tipul media este opțional și tot tipul va fi implicat.
Puteți avea, de asemenea, foi de stil (stylesheets) diferite pentru media diferite.
CSS3 Tipuri media (CSS3 Media Types)
all - Utilizat pentru toate dispozitivele de tip media
print - Utilizat pentru imprimante
screen - Utilizat pentru ecrane, tablete, telefoane inteligente etc.
speach - Utilizată pentru ecranizatorii care „citesc” pagina cu voce tare
O modalitate de a utiliza interogări media (media queries) este să aveți o secțiune CSS alternativă chiar în foaia de stil (style sheet).

CSS Responsive Web Design - Viewport

Responsive Web Design - Viewport
Ce este Viewport?
Viewport este zona vizibilă a utilizatorului unei pagini web.
Viewportul variază în funcție de dispozitiv și va fi mai mic pe un telefon mobil decât pe un ecran al computerului.
Înainte de tablete și telefoane mobile, paginile web erau concepute doar pentru ecranele computerului și era comun ca paginile web să aibă un design static și o dimensiune fixă.
Apoi, când am început să navigăm pe internet folosind tablete și telefoane mobile, paginile web cu dimensiuni fixe erau prea mari pentru a se potrivi cu ecranul. Pentru a remedia acest lucru, browserele de pe aceste dispozitive au redus întreaga pagină web pentru a se potrivi ecranului.
Nu a fost perfect !! Dar o rezolvare rapidă.
Setarea Viewport
HTML5 a introdus o metodă pentru a permite proiectanților web să preia controlul asupra viewport-ului, prin intermediul etichetei <meta>.
Ar trebui să includeți următorul element viewport <meta> în toate paginile dvs. web.
Un element viewport <meta> oferă instrucțiuni browserului cu privire la modul de control al dimensiunilor și scalării paginii.
width=device-width part stabilește lățimea paginii pentru a urma lățimea ecranului dispozitivului (screen-width) (care va varia în funcție de dispozitiv).
initial-scale=1.0 setează nivelul inițial de zoom atunci când pagina este încărcată prima dată de browser.
Iată un exemplu de pagină web fără viewport meta tag și aceeași pagină web cu viewport meta tag.
Mărimea conținutului la Viewport (Size Content to The Viewport)
Utilizatorii sunt folosiți pentru a derula site-urile pe verticală atât pe desktop cât și pe dispozitive mobile - dar nu pe orizontală!
Așadar, dacă utilizatorul este obligat să defileze orizontal sau să mărească, pentru a vedea întreaga pagină web, rezultă o experiență slabă a utilizatorului.
Câteva reguli suplimentare de urmat:
NU folosiți elemente cu lățime fixă ​​mare - De exemplu, dacă o imagine este afișată la o lățime mai largă decât cea din portofoliu, aceasta poate determina derularea portofoliului pe orizontală. Nu uitați să ajustați acest conținut pentru a se încadra în lățimea vizualizării.
NU lăsați conținutul să se bazeze pe o anumită lățime a viewportului (viewport width) pentru a fi redat - Deoarece dimensiunile ecranului și lățimea în pixeli CSS variază foarte mult între dispozitive, conținutul nu ar trebui să se bazeze pe o anumită lățime a viewportului pentru a fi redat.
Utilizați interogări CSS media (media queries) pentru a aplica stiluri diferite pentru ecrane mici și mari - Setarea lățimilor CSS mari pentru elementele paginii va face ca elementul să fie prea larg pentru viewport de pe un dispozitiv mai mic. În schimb, luați în considerare utilizarea unor valori de lățime relative, cum ar fi lățimea: 100%. De asemenea, aveți grijă să folosiți valori mari de poziționare absolută. Poate determina elementul să iasă în afara ecranului pe dispozitive mici.

SQL Valori NULL

Valori SQL NULL
Un câmp cu o valoare NULL este un câmp fără nici o valoare.
Dacă un câmp dintr-un tabel este opțional, este posibil să inserați o înregistrare nouă sau să actualizați o înregistrare fără a adăuga o valoare la acest câmp. Apoi, câmpul va fi salvat cu o valoare NULL.
O valoare NULL este diferită de o valoare zero sau un câmp care conține spații. Un câmp cu o valoare NULL este unul care a fost lăsat liber în timpul creării înregistrărilor!
Nu este posibil să se testeze valorile NULL cu operatori de comparație, cum ar fi =, < sau <>.
În schimb, va trebui să utilizăm operatorii IS NULL și IS NOT NULL.
Sintaxa IS NULL
SELECT column_names
FROM table_name
WHERE column_name IS NULL;
Sintaxa IS NOT NULL 
SELECT column_names
FROM table_name
WHERE column_name IS NOT NULL;
Operatorul IS NULL
Operatorul IS NULL este utilizat pentru testarea valorilor goale (valori NULL).
Următorul SQL listează toți clienții cu o valoare NULL în câmpul „Address”:
SELECT CustomerName, ContactName, Address
FROM Customers
WHERE Address IS NULL;
Folosiți întotdeauna IS NULL pentru a căuta valorile NULL.
Operatorul IS NOT NULL
Operatorul IS NOT NULL este utilizat pentru testarea valorilor care nu sunt goale (valori IS NOT NULL).
Următorul SQL listează toți clienții cu o valoare în câmpul „Address”:
SELECT CustomerName, ContactName, Address
FROM Customers
WHERE Address IS NOT NULL;

SQL Alias

Alias-urile SQL
Alias-urile SQL sunt utilizate pentru a da un nume temporar unei tabele sau unei coloane dintr-un tabel.
Alias-urile sunt adesea folosite pentru a face citirea numelor de coloane.
Un alias există doar pe durata interogării.
Sintaxa Coloanei Alias
SELECT column_name AS alias_name
FROM table_name;
Alias Table Syntax
SELECT column_name(s)
FROM table_name AS alias_name;
Exemple Alias pentru coloane
Următoarea instrucțiune SQL creează două alias-uri, unul pentru coloana CustomerID și unul pentru coloana CustomerName:
SELECT CustomerID AS ID, CustomerName AS Customer
FROM Customers;
Următoarea instrucțiune SQL creează două alias-uri, unul pentru coloana CustomerName și unul pentru coloana ContactName.
Este nevoie de ghilimele duble sau paranteze pătrate dacă numele alias conține spații:
SELECT CustomerName AS Customer, ContactName AS [Contact Person]
FROM Customers;
Următoarea instrucțiune SQL creează un alias numit „Address” care combină patru coloane (adresă, cod poștal, oraș și țară/Address, PostalCode, City and Country):
SELECT CustomerName, Address + ', ' + PostalCode + ' ' + City + ', ' + Country AS Address
FROM Customers;
Pentru ca instrucțiunea SQL de mai sus să funcționeze în MySQL, utilizați următoarele:
SELECT CustomerName, CONCAT(Address,', ',PostalCode,', ',City,', ',Country) AS Address
FROM Customers;
Exemplu Alias pentru tabele
Următoarea instrucțiune SQL selectează toate comenzile de la client cu CustomerID = 4 (Around the Horn). Folosim tabelele „Customers” și „Orders” și le oferim aliasul tabelului „c” și respectiv „o” (Aici folosim alias-uri pentru a face SQL-ul mai scurt):
SELECT o.OrderID, o.OrderDate, c.CustomerName
FROM Customers AS c, Orders AS o
WHERE c.CustomerName="Around the Horn" AND c.CustomerID=o.CustomerID;
Următoarea instrucțiune SQL este aceeași ca mai sus, dar fără alias:
SELECT Orders.OrderID, Orders.OrderDate, Customers.CustomerName
FROM Customers, Orders
WHERE Customers.CustomerName="Around the Horn" AND Customers.CustomerID=Orders.CustomerID;
Alias-urile pot fi utile atunci când:
Există mai multe tabele implicate într-o interogare
Funcțiile sunt utilizate în interogare
Numele coloanelor sunt mari sau nu sunt foarte citibile
Două sau mai multe coloane sunt combinate între ele

SQL UNION

Operatorul SQL UNION
Operatorul UNION este utilizat pentru a combina setul de rezultate a două sau mai multe declarații SELECT.
Fiecare declarație SELECT din UNION trebuie să aibă același număr de coloane
Coloanele trebuie să aibă, de asemenea, tipuri de date similare
Coloanele din fiecare instrucțiune SELECT trebuie să fie, de asemenea, în aceeași ordine
Sintaxa UNION
SELECT column_name(s) FROM table1
UNION
SELECT column_name(s) FROM table2;
Sintaxa UNION ALL
Operatorul UNION selectează în mod implicit doar valori distincte. Pentru a permite valori duplicate, utilizați UNION ALL:
SELECT column_name(s) FROM table1
UNION ALL
SELECT column_name(s) FROM table2;
Numele coloanelor din setul de rezultate sunt de obicei egale cu numele coloanelor din prima declarație SELECT din UNION.
Exemplu SQL UNION
Următoarea instrucțiune SQL returnează orașele (doar valori distincte) atât din „Clienți” (Customers), cât și din „Furnizori” (Suppliers):
SELECT City FROM Customers
UNION
SELECT City FROM Suppliers
ORDER BY City;
Dacă unii clienți (customers) sau furnizori (suppliers) au același oraș, fiecare oraș va fi listat o singură dată, deoarece UNION selectează doar valori distincte. Utilizați UNION ALL pentru a selecta, de asemenea, valori duplicate!
Exemplu SQL UNION ALL
Următoarea instrucțiune SQL returnează orașele (de asemenea, valori duplicate) atât din tabela „Clienți” (Customers), cât și din „Furnizori” (Suppliers):
SELECT City FROM Customers
UNION ALL
SELECT City FROM Suppliers
ORDER BY City;
SQL UNION cu WHERE
Următoarea instrucțiune SQL returnează orașele germane (doar valori distincte) atât din tabela „Clienți” (Customers), cât și din „Furnizori” (Suppliers):
SELECT City, Country FROM Customers
WHERE Country='Germania'
UNION
SELECT City, Country FROM Suppliers
WHERE Country='Germania'
ORDER BY City;
SQL UNION ALL cu WHERE
Următoarea instrucțiune SQL returnează orașele germane (de asemenea, valori duplicate) atât din tabela „Clienți” (Customers), cât și din „Furnizori” (Suppliers):
SELECT City, Country FROM Customers
WHERE Country='Germania'
UNION ALL
SELECT City, Country FROM Suppliers
WHERE Country='Germania'
ORDER BY City;
Un alt exemplu UNION
Următoarea instrucțiune SQL listează toți clienții (customers) și furnizorii (suppliers):
SELECT 'Customer' As Type, ContactName, City, Country
FROM Customers
UNION
SELECT 'Supplier', ContactName, City, Country
FROM Suppliers;
Observați „AS Type” de mai sus - este un alias. Alias-urile SQL sunt utilizate pentru a da un nume temporar unei tabele sau unei coloane. Un alias există doar pe durata interogării. Așadar, aici am creat o coloană temporară numită „Tip” (Type), care listează dacă persoana de contact este „Client” (Customer) sau „Furnizor” (Supplier).

SQL Comentarii

Comentarii SQL
Comentariile sunt utilizate pentru a explica secțiunile instrucțiunilor SQL sau pentru a preveni executarea de instrucțiuni SQL.
Exemplele din acest capitol nu vor funcționa în Firefox și Microsoft Edge!
Comentariile nu sunt acceptate în bazele de date Microsoft Access. Firefox și Microsoft Edge folosesc baza de date Microsoft Access în exemplele noastre.
Comentarii cu o singură linie
Comentariile cu o singură linie încep cu -.
Orice text între - și sfârșitul liniei va fi ignorat (nu va fi executat).
Următorul exemplu utilizează un comentariu cu o singură linie ca explicație:
--Select all:
SELECT * FROM Customers;
Următorul exemplu utilizează un comentariu cu o singură linie pentru a ignora sfârșitul unei linii:
SELECT * FROM Customers -- WHERE City='Berlin';
Următorul exemplu utilizează un comentariu cu o singură linie pentru a ignora o afirmație:
--SELECT * FROM Customers;
SELECT * FROM Products;
Comentarii cu mai multe linii
Comentariile cu mai multe linii încep cu / * și se termină cu * /.
Orice text între / * și * / va fi ignorat.
Următorul exemplu utilizează un comentariu cu mai multe linii ca explicație:
/*Selectați toate coloanele
din toate înregistrările
în tabelul Clienți (Customers): * /
SELECT * FROM Customers;
Următorul exemplu utilizează un comentariu cu mai multe linii pentru a ignora multe afirmații:
/*SELECT * FROM Customers;
SELECT * FROM Products;
SELECT * FROM Orders;
SELECT * FROM Categories;*/
SELECT * FROM Suppliers;
Pentru a ignora doar o parte dintr-o afirmație, utilizați și / * * / comentariu.
Următorul exemplu utilizează un comentariu pentru a ignora o parte a unei linii:
SELECT CustomerName, /*City,*/ Country FROM Customers;
Următorul exemplu utilizează un comentariu pentru a ignora o parte dintr-o afirmație:
SELECT * FROM Customers WHERE (CustomerName LIKE 'L%'
OR CustomerName LIKE 'R%' /*OR CustomerName LIKE 'S%'
OR CustomerName LIKE 'T%'*/ OR CustomerName LIKE 'W%')
AND Country='USA'
ORDER BY CustomerName;

SQL Vizualizări

Vizualizări SQL (SQL Views)
Instrucțiunea SQL CREATE VIEW
În SQL, o vizualizare (view) este un tabel virtual bazat pe setul de rezultate al unei instrucțiuni SQL.
O vizualizare (view) conține rânduri și coloane, la fel ca un tabel real. Câmpurile dintr-o vizualizare (view) sunt câmpuri dintr-una sau mai multe tabele reale din baza de date.
Puteți adăuga funcții SQL, WHERE și instrucțiuni JOIN într-o vizualizare (view) și prezentați datele ca și cum datele proveneau dintr-un singur tabel.
Sintaxă CREATE VIEW
CREATE VIEW view_name AS
SELECT column1, column2, ...
FROM table_name
WHERE condition;
O vizualizare (view) afișează întotdeauna date actualizate! Motorul bazei de date recreează datele, folosind instrucțiunea SQL a vizualizării (view), de fiecare dată când un utilizator solicită o vizualizare (view).
Exemple SQL CREATE VIEW
Următorul SQL creează o vizualizare (view) care arată toți clienții (customers) din Brazilia:
CREATE VIEW [Brazilia Customers] AS
SELECT CustomerName, ContactName
FROM Customers
WHERE Country = "Brazilia";
Putem consulta întrebarea de mai sus după cum urmează:
SELECT * FROM [Brazilia Customers];
Următorul SQL creează o vizualizare (view) care selectează fiecare produs din tabelul „Produse” (Products) cu un preț mai mare decât prețul mediu:
CREATE VIEW [Products Above Average Price] AS
SELECT ProductName, Price
FROM Products
WHERE Price > (SELECT AVG(Price) FROM Products);
Putem consulta întrebarea de mai sus după cum urmează:
SELECT * FROM [Products Above Average Price];
SQL Actualizarea unei vizualizări (SQL Updating a View)
O vizualizare (view) poate fi actualizată cu comanda CREATE SAU REPLACE VIEW.
Sintaxă SQL CREATE SAU REPLACE VIEW
CREATE OR REPLACE VIEW view_name AS
SELECT column1, column2, ...
FROM table_name
WHERE condition;
Următorul SQL adaugă coloana „Oraș” (City) la vizualizarea (view) „Clienții din Brazilia” (Brazilia Customers):
CREATE OR REPLACE VIEW [Brazil Customers] AS
SELECT CustomerName, ContactName, City
FROM Customers
WHERE Country = "Brazil";
SQL Eliminarea unei vizualizări (SQL Dropping a View)
O vizualizare (view) este ștersă cu comanda DROP VIEW.
Sintaxă SQL DROP VIEW
DROP VIEW view_name;
Următorul SQL renunță la vizualizarea (view) „Clienții din Brazilia” (Brazilia Customers):
DROP VIEW [Brazilia Customers];

SQL Injection

Injecția SQL (SQL Injection)
Injecția SQL (SQL Injection) este o tehnică de injecție de cod (code injection) care ar putea distruge baza de date.
Injecția SQL (SQL Injection) este una dintre cele mai frecvente tehnici de hacking web.
Injecția SQL (SQL Injection) este plasarea codului rău intenționat în declarațiile SQL, prin introducerea paginii web.
SQL în paginile web
Injecția SQL (SQL Injection) are loc de obicei atunci când ceri utilizatorului o introducere, cum ar fi numele său de utilizator / userid (username/userid), iar în loc de nume / id (name/id), utilizatorul vă oferă o declarație SQL pe care o veți rula în mod neștiut pe baza de date.
Uitați-vă la următorul exemplu care creează o instrucțiune SELECT adăugând o variabilă (txtUserId) la un șir selectat. Variabila este preluată din intrarea utilizatorului (getRequestString):
txtUserId = getRequestString("UserId");
txtSQL = "SELECT * FROM Users WHERE UserId = " + txtUserId;
Restul acestui capitol descrie pericolele potențiale ale utilizării intrării utilizatorului în declarațiile SQL.
Injecția SQL pe baza 1 = 1 este întotdeauna adevărată
Privește din nou exemplul de mai sus. Scopul inițial al codului a fost crearea unei instrucțiuni SQL pentru a selecta un utilizator, cu un id de utilizator (user id) dat.
Dacă nu există nimic care să împiedice un utilizator să introducă o intrare „greșită” (wrong), utilizatorul poate introduce unele intrări „inteligente” (smart) ca aceasta:
UserId: 105 SAU 1 = 1
Apoi, instrucțiunea SQL va arăta astfel:
SELECT * FROM Users WHERE UserId = 105 OR 1=1;
SQL-ul de mai sus este valid și va întoarce TOATE (ALL) rândurile din tabelul „Utilizatori” (Users), deoarece OR 1 = 1 este întotdeauna TRUE.
Exemplul de mai sus pare periculos? Ce se întâmplă dacă tabelul „Utilizatori” (Users) conține nume și parole?
Instrucțiunea SQL de mai sus este la fel ca aceasta:
SELECT UserId, Name, Password FROM Users WHERE UserId = 105 or 1=1;
Un hacker ar putea avea acces la toate numele de utilizator și parolele (user names și passwords) dintr-o bază de date, introducând pur și simplu 105 OR 1 = 1 în câmpul de introducere.
Injecția SQL Bazată pe "" = "" este întotdeauna adevărată
Iată un exemplu de autentificare a utilizatorului pe un site web:
Nume utilizator: John Doe
Parola: myPass
Exemplu:
uName = getRequestString("username");
uPass = getRequestString("userpassword");
sql = 'SELECT * FROM Users WHERE Name ="' + uName + '" AND Pass ="' + uPass + '"'
Rezultat:
SELECT * FROM Users WHERE Name ="John Doe" AND Pass ="myPass"
Un hacker ar putea avea acces la numele de utilizator și parolele (user names și passwords) dintr-o bază de date, introducând pur și simplu "OR" "=" în caseta de text a numelui de utilizator sau a parolei (user name sau password):
Nume utilizator: "sau" "="
Parola: "sau" "="
Codul de la server va crea o declarație SQL validă astfel:
Rezultat:
SELECT * FROM Users WHERE Name ="" or ""="" AND Pass ="" or ""=""
SQL de mai sus este valid și va returna toate rândurile din tabelul „Utilizatori” (Users), deoarece OR „„ = „„ este întotdeauna TRUE.
Injecție SQL bazată pe declarații SQL Batched (SQL Injection Based on Batched SQL Statements)
Majoritatea bazelor de date acceptă declarația SQL batched.
Un batch (lot) de instrucțiuni SQL este un grup de două sau mai multe instrucțiuni SQL, separate prin punct și virgulă.
Instrucțiunea SQL de mai jos va returna toate rândurile din tabelul „Utilizatori” (Users), apoi va șterge tabelul „Furnizori” (Suppliers).
SELECT * FROM Users; DROP TABLE Suppliers
txtUserId = getRequestString("UserId");
txtSQL = "SELECT * FROM Users WHERE UserId = " + txtUserId;
User id: 105; DROP TABLE Suppliers
SELECT * FROM Users WHERE UserId = 105; DROP TABLE Suppliers;
Utilizați parametrii SQL pentru protecție
Pentru a proteja un site web de injecția SQL, puteți utiliza parametrii SQL.
Parametrii SQL sunt valori care sunt adăugate la o interogare SQL la momentul executării, într-o manieră controlată.
Exemplu Razor ASP.NET:
txtUserId = getRequestString("UserId");
txtSQL = "SELECT * FROM Users WHERE UserId = @0";
db.Execute(txtSQL,txtUserId);
Rețineți că parametrii sunt reprezentați în instrucțiunea SQL de către un marker@.
Motorul SQL verifică fiecare parametru pentru a se asigura că este corect pentru coloana sa și sunt tratate literal, și nu ca parte a SQL-ului care trebuie executat.
txtNam = getRequestString("CustomerName");
txtAdd = getRequestString("Address");
txtCit = getRequestString("City");
txtSQL = "INSERT INTO Customers (CustomerName,Address,City) Values(@0,@1,@2)";
db.Execute(txtSQL,txtNam,txtAdd,txtCit);
Următoarele exemple arată cum să construiți interogări parametrizate în unele limbaje web comune.
SELECTAȚI DECLARAȚIA ÎN ASP.NET:
txtUserId = getRequestString("UserId");
sql = "SELECT * FROM Customers WHERE CustomerId = @0";
command = new SqlCommand(sql);
command.Parameters.AddWithValue("@0",txtUserID);
command.ExecuteReader();
INSERAȚI ÎN DECLARAȚIE ÎN ASP.NET:
txtNam = getRequestString("CustomerName");
txtAdd = getRequestString("Address");
txtCit = getRequestString("City");
txtSQL = "INSERT INTO Customers (CustomerName,Address,City) Values(@0,@1,@2)";
command = new SqlCommand(txtSQL);
command.Parameters.AddWithValue("@0",txtNam);
command.Parameters.AddWithValue("@1",txtAdd);
command.Parameters.AddWithValue("@2",txtCit);
command.ExecuteNonQuery();
INSERAȚI ÎN DECLARAȚIE ÎN PHP:
$stmt = $dbh->prepare("INSERT INTO Customers (CustomerName,Address,City)
VALUES (:nam, :add, :cit)");
$stmt->bindParam(':nam', $txtNam);
$stmt->bindParam(':add', $txtAdd);
$stmt->bindParam(':cit', $txtCit);
$stmt->execute();

PHP Comentarii

Comentarii în PHP
Un comentariu în cod PHP este o linie care nu este executată ca parte a programului. Singurul său scop este să fie citit de cineva care se uită la cod.
Comentariile pot fi folosite pentru:
Lasă-i pe alții să înțeleagă codul tău
Reamintește-ți ce ai făcut - Majoritatea programatorilor s-au confruntat cu revenirea la propria muncă un an sau doi mai târziu și trebuie să-și dea seama ce au făcut. Comentariile îți pot aminti la ce te gândeai când ai scris codul
PHP acceptă mai multe moduri de a comenta:
Sintaxă pentru comentarii cu o singură linie (single-line comment):
<!DOCTYPE html>
<html>
<body>
<?php
//  Acesta este un comentariu cu o singură linie (single-line comment)
# Acesta este, de asemenea, un comentariu cu o singură linie (single-line comment)
?>
</body>
</html>
Sintaxa pentru comentarii cu mai multe linii (multiple-line comments):
<!DOCTYPE html>
<html>
<body>
<?php
/*
Acesta este un block de comentarii cu mai multe linii (multiple-lines comment block)
care se întinde pe multiple linii
*/
?>
</body>
</html>
Folosire comentarii pentru a lăsa părți din cod:
<!DOCTYPE html>
<html>
<body>
<?php
// De asemenea, puteți utiliza comentarii pentru a lăsa părți dintr-o linie de cod
$x = 5 /* + 15 */ + 5;
echo $x;
?>
</body>
</html>

PHP Manipularea formularelor

PHP Form Handling
Superglobalele PHP $_GET și $_POST sunt utilizate pentru colectarea datelor de formular.
PHP - Un formular HTML simplu
Exemplul de mai jos afișează un formular HTML simplu cu două câmpuri de introducere și un buton de trimitere (input fields și submit button):
<html>
<body>
<form action="welcome.php" method="post">
Nume: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
</body>
</html>
Când utilizatorul completează formularul de mai sus și face click pe butonul de trimitere (submit), datele formularului sunt trimise pentru procesare într-un fișier PHP numit „welcome.php”. Datele formularului sunt trimise cu metoda HTTP POST.
Pentru a afișa datele trimise, pur și simplu puteți echo toate variabilele. „Welcome.php” arată astfel:
<html>
<body>
Bun venit <?php echo $_POST["name"]; ?><br>
Adresa dvs. de e-mail este: <?php echo $_POST["email"]; ?>
</body>
</html>
Rezultatul ar putea fi ceva de genul:
Bun venit Ion
Adresa dvs. de e-mail este [email protected]
Același rezultat ar putea fi obținut și folosind metoda HTTP GET:
<html>
<body>
<form action="welcome_get.php" method="get">
Nume: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
</body>
</html>
și „welcome_get.php” arată astfel:
<html>
<body>
Bun venit <?php echo $_GET["name"]; ?><br>
Adresa dvs. de e-mail este: <?php echo $_GET["email"]; ?>
</body>
</html>
Codul de mai sus este destul de simplu. Cu toate acestea, cel mai important lucru lipsește. Trebuie să validați datele formularului pentru a vă proteja scriptul împotriva codului rău intenționat.
Gândiți-vă la SECURITATE când prelucrați formularele PHP!
Această pagină nu conține nicio validare a formularului, ci doar arată cum puteți trimite și recupera datele de formular.
Cu toate acestea, paginile următoare vor arăta cum să procesați formularele PHP cu securitate în minte! Validarea corectă a datelor formularului este importantă pentru a vă proteja formularul de hackeri și spameri!
GET vs. POST
Atât GET, cât și POST creează un tablou (array) (de exemplu, array( key1 => value1, key2 => value2, key3 => value3, ...)). Acest tablou (array) conține perechi cheie/valoare (key/value), unde cheile (keys) sunt numele controalelor de formular (form controls) și valorile sunt datele de intrare (input data) de la utilizator.
Atât GET, cât și POST sunt tratate ca $_GET și $_POST. Acestea sunt superglobale, ceea ce înseamnă că sunt întotdeauna accesibile, indiferent de sfera de aplicare - și le puteți accesa din orice funcție, clasă sau fișier (function, class or file) fără a fi nevoie să faceți nimic special.
$_GET reprezintă o serie de variabile transmise scriptului curent prin parametrii URL.
$ _POST reprezintă o serie de variabile transmise scriptului curent prin metoda HTTP POST.
Când să folosiți GET?
Informațiile trimise dintr-un formular cu metoda GET sunt vizibile tuturor (toate numele variabilelor și valorile (variable names/ values) sunt afișate pe adresa URL). GET are, de asemenea, limite privind cantitatea de informații care trebuie trimise. Limitarea este de aproximativ 2000 de caractere. Cu toate acestea, deoarece variabilele sunt afișate în adresa URL, este posibilă marcarea paginii. Acest lucru poate fi util în unele cazuri.
GET poate fi utilizat pentru trimiterea de date non-sensibile (non-sensitive data).
GET nu ar trebui niciodată utilizat pentru trimiterea de parole sau alte informații sensibile!
Când să folosiți POST?
Informațiile trimise dintr-un formular cu metoda POST sunt invizibile pentru alții (toate numele/valorile (names/values) sunt încorporate în corpul solicitării (body) HTTP) și nu au limite privind cantitatea de informații de trimis.
Mai mult, POST acceptă funcționalități avansate, cum ar fi asistența pentru intrarea binară în mai multe părți (multi-part binary input) în timp ce încărcați fișiere pe server.
Cu toate acestea, deoarece variabilele nu sunt afișate în adresa URL, nu este posibilă marcarea paginii.
Dezvoltatorii preferă POST pentru trimiterea datelor de formular (form data).

PHP Validare formular

Validare formular PHP
Acesta și capitolele următoare arată cum să folosești PHP pentru a valida datele formularului.
Validare formular PHP
Gândiți-vă la SECURITATE când prelucrați formularele PHP!
Aceste pagini vor arăta cum să procesați formularele PHP din punct de vedere al securitatii. Validarea corectă a datelor din formular este importantă pentru a vă proteja formularul de hackeri și spameri!
Formularul HTML la care vom lucra în aceste capitole, conține diferite câmpuri de introducere: câmpuri de text obligatorii și opționale, butoane radio și un buton de trimitere (required and optional text fields, radio buttons, and a submit button):
Name - Obligatoriu. + Trebuie să conțină doar litere și spațiu alb
E-mail - Obligatoriu. + Trebuie să conțină o adresă de e-mail validă (cu @ și.)
Website - Obligatoriu. Dacă este prezent, trebuie să conțină o adresă URL validă
Comment - Opțional. Câmp de introducere pe mai multe linii (textarea)
Sex - Obligatoriu. Trebuie să selectați una
Mai întâi vom analiza codul HTML simplu pentru formular:
Câmpuri text (Text Fields)
Câmpurile nume, e-mail și website sunt elemente de introducere ale textului (input elements), iar câmpul de comentarii este textarea. Codul HTML arată astfel:
Nume: <input type="text" name="name">
E-mail: <input type="text" name="email">
Website: <input type="text" name="website">
Comment: <textarea name="comment" rows="5" cols="40"></textarea>
Butoane radio (Radio Buttons)
Câmpurile gen (gender fields) sunt butoane radio, iar codul HTML arată astfel:
Gen:
<input type="radio" name="gender" value="female">Femeie
<input type="radio" name="gender" value="male">Bărbat
<input type="radio" name="gender" value="other">Altele
Elementul form (The Form Element)
Codul HTML al formularului arată astfel:
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Când formularul este trimis, datele formularului sunt trimise cu method = "post".
Ce este variabila $_SERVER["PHP_SELF"] ?
$_SERVER["PHP_SELF"] este o variabilă super globală care returnează numele de fișier al scriptului care se execută în prezent.
Așadar, $_SERVER["PHP_SELF"] trimite datele formularului (submitted form data) trimis către pagina în sine, în loc să sară pe o altă pagină. În acest fel, utilizatorul va primi mesaje de eroare pe aceeași pagină ca și formularul.
Ce este funcția htmlspecialchars()?
Funcția htmlspecialchars() convertește caracterele speciale în entități HTML. Aceasta înseamnă că va înlocui caractere HTML precum <and> cu &lt; și &gt;. Acest lucru împiedică atacatorii să exploateze codul prin injectarea codului HTML sau a javascriptului (Cross-site Scripting attacks) în formulare.
Notă imporantă privind securitatea formularului PHP
Variabila $_SERVER["PHP_SELF"] poate fi utilizată de hackeri!
Dacă PHP_SELF este utilizat în pagina dvs., un utilizator poate introduce un slash (/) și apoi unele comenzi de Cross Site Scripting (XSS) pentru a executa.
Scripturi încrucișate (Cross-site scripting) (XSS) este un tip de vulnerabilitate a securității computerului care se găsește de obicei în aplicațiile Web. XSS le permite atacatorilor să injecteze scripturi din partea clientului în paginile Web vizualizate de alți utilizatori.
Presupunem că avem următorul formular într-o pagină numită "test_form.php":
<form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
Acum, dacă un utilizator introduce URL-ul normal în bara de adrese precum "http://www.example.com/test_form.php", codul de mai sus va fi tradus în:
<form method="post" action="test_form.php">
Până acum, bine.
Cu toate acestea, considerați că un utilizator introduce următoarea adresă URL în bara de adrese:
http://www.example.com/test_form.php/%22%3E%3Cscript%3Ealert('hacked')%3C/script%3E
În acest caz, codul de mai sus va fi tradus în:
<form method="post" action="test_form.php/"><script>alert('hacked')</script>
Acest cod adaugă o etichetă script (script tag) și o comandă de alertă (alert command). Și atunci când pagina se încarcă, codul JavaScript va fi executat (utilizatorul va vedea o casetă de alertă (alert box)). Acesta este doar un exemplu simplu și inofensiv cum poate fi exploatată variabila PHP_SELF.
Fiți conștienți de faptul că orice cod JavaScript poate fi adăugat în eticheta <script>! Un hacker poate redirecționa utilizatorul către un fișier de pe alt server, iar respectivul fișier poate conține cod rău intenționat care poate modifica variabilele globale sau poate trimite formularul la o altă adresă pentru a salva datele utilizatorului, de exemplu.
Cum să evitați exploatările $_SERVER["PHP_SELF"]?
Exploatările $_SERVER["PHP_SELF"] pot fi evitate folosind funcția htmlspecialchars().
Codul formularului ar trebui să arate astfel:
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Funcția htmlspecialchars() convertește caracterele speciale în entități HTML. Acum, dacă utilizatorul încearcă să exploateze variabila PHP_SELF, va rezulta următoarea ieșire (output):
<form method="post" action="test_form.php/&quot;&gt;&lt;script&gt;alert('hacked')&lt;/script&gt;">
Validați datele formularului cu PHP
Primul lucru pe care îl vom face este să trecem toate variabilele prin funcția PHP htmlspecialchars().
Când folosim funcția htmlspecialchars(); atunci dacă un utilizator încearcă să trimită următoarele într-un câmp text:
<script>location.href('http://www.hacked.com')</script>
- acest lucru nu ar fi executat, deoarece va fi salvat ca și cod HTML scăpat, astfel:
&lt;script&gt;location.href('http://www.hacked.com')&lt;/script&gt;
Codul este acum sigur pentru a fi afișat pe o pagină sau în interiorul unui e-mail.
De asemenea, vom face alte două lucruri atunci când utilizatorul va trimite formularul:
Scoateți caracterele inutile (spațiu suplimentar, filă, linie nouă (extra space, tab, newline)) din datele de intrare ale utilizatorului (cu funcția PHP trim() )
Eliminați backslashes (\) din datele de intrare ale utilizatorului (cu funcția PHP stripslashes())Următorul pas este să creem o funcție care să facă toate verificările pentru noi (ceea ce este mult mai convenabil decât scrierea aceluiași cod încă o dată).
Vom numi funcția test_input().
Acum, putem verifica fiecare variabilă $_POST cu funcția test_input(), iar scriptul va arata astfel:
<?php
// definiți variabilele și setați valorile goale
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = test_input($_POST["name"]);
  $email = test_input($_POST["email"]);
  $website = test_input($_POST["website"]);
  $comment = test_input($_POST["comment"]);
  $gender = test_input($_POST["gender"]);
}
function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
?>
Observați că la începutul scriptului, verificăm dacă formularul a fost trimis folosind $_SERVER ["REQUEST_METHOD"]. Dacă REQUEST_METHOD este POST, atunci formularul a fost trimis - și ar trebui validat. Dacă nu a fost trimis, săriți validarea și afișați un formular necompletat.
Cu toate acestea, în exemplul de mai sus, toate câmpurile de introducere sunt opționale. Scriptul funcționează bine chiar dacă utilizatorul nu introduce date.
Următorul pas este de a face necesare câmpurile de intrare și de a crea mesaje de eroare, dacă este nevoie.

PHP Filtre

Filtre PHP
Validarea datelor = Determinați dacă datele sunt într-o formă corectă.
Sanitizarea datelor = Eliminați orice caracter ilegal din date.
Extensia de filtrare PHP
Filtrele PHP sunt utilizate pentru validarea și igienizarea intrărilor externe.
Extensia de filtru PHP are multe dintre funcțiile necesare pentru verificarea intrării utilizatorului (user input) și este concepută pentru a face validarea datelor mai ușoară și mai rapidă.
Funcția filter_list() poate fi utilizată pentru a enumera ce oferă extensia de filtru PHP:
<table>
  <tr>
    <td>Nume filtru</td>
    <td>ID filtru</td>
  </tr>
  <?php
  foreach (filter_list() as $id =>$filter) {
      echo '<tr><td>' . $filter . '</td><td>' . filter_id($filter) . '</td></tr>';
  }
  ?>
</table>
De ce să folosești filtrele?
Multe aplicații web primesc input extern. Intrarea/datele externe pot fi:
Intrarea utilizatorului dintr-un formular (User input from a form)
Cookies
Date despre servicii web (Web services data)
Variabilele serverului (Server variables)
Rezultatele interogării bazei de date (Database query results)
Ar trebui să validați întotdeauna datele externe!
Datele trimise nevalide pot duce la probleme de securitate și vă pot break pagina web!
Folosind filtre PHP puteți fi sigur că aplicația dvs. primește introducerea corectă!
Funcția PHP filter_var()
Funcția filter_var() validează și igienizează datele.
Funcția filter_var() filtrează o singură variabilă cu un filtru specificat. Este nevoie de două bucăți de date (pieces of data):
Variabila pe care doriți să o verificați
Tipul de verificare de utilizat
Sanitizarea unui string
Următorul exemplu utilizează funcția filter_var() pentru a elimina toate etichetele HTML dintr-un șir (string):
<?php
$str = "<h1>Hello World!</h1>";
$newstr = filter_var($str, FILTER_SANITIZE_STRING);
echo $newstr;
?>
Validarea unui număr întreg (integer)
Următorul exemplu utilizează funcția filter_var() pentru a verifica dacă variabila $int este un număr întreg (integer). Dacă $int este un număr întreg (integer), rezultatul codului de mai jos va fi: „Integer este valid”. Dacă $int nu este un număr întreg (integer), rezultatul va fi: „Integer nu este valid”:
<?php
$int = 100;
if (!filter_var($int, FILTER_VALIDATE_INT) === false) {
    echo("Integer este valid");
} else {
    echo("Integer nu este valid");
}
?>
filter_var() și Problema cu 0
În exemplul de mai sus, dacă $int a fost setat pe 0, funcția de mai sus va returna „Integer nu este valid”. Pentru a rezolva această problemă, utilizați codul de mai jos:
<?php
$int = 0;
if (filter_var($int, FILTER_VALIDATE_INT) === 0 || !filter_var($int, FILTER_VALIDATE_INT) === false) {
    echo("Integer este valid");
} else {
    echo("Integer nu este valid");
}
?>
Validați o adresă IP
Următorul exemplu utilizează funcția filter_var() pentru a verifica dacă variabila $ip este o adresă IP validă:
<?php
$ip = "127.0.0.1";
if (!filter_var($ip, FILTER_VALIDATE_IP) === false) {
    echo("$ip este o adresă IP validă");
} else {
    echo("$ip nu este o adresă IP validă");
}
?>
Sanitizarea și validarea unei adrese e-mail
Următorul exemplu utilizează funcția filter_var() pentru a elimina mai întâi toate caracterele ilegale din variabila $e-mail, apoi verificați dacă este o adresă e-mail validă:
<?php
$email = "[email protected]";
// Eliminați toate caracterele ilegale din e-mail
$email = filter_var($email, FILTER_SANITIZE_EMAIL);
// Validați e-mail
if (!filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
    echo("$email este o adresă e-mail validă");
} else {
    echo("$email nu este o adresă e-mail validă");
}
?>
Sanitizarea și validarea unei adrese URL
Următorul exemplu utilizează funcția filter_var() pentru a elimina mai întâi toate caracterele ilegale dintr-o adresă URL, apoi verificați dacă $url este o adresă URL validă:
<?php
$url = "https://www.w3schools.com";
// Eliminați toate caracterele ilegale dintr-un URL
$url = filter_var($url, FILTER_SANITIZE_URL);
// Validați adresa URL
if (!filter_var($url, FILTER_VALIDATE_URL) === false) {
    echo("$url este o adresă URL validă");
} else {
    echo("$url nu este o adresă URL validă");
}
?>

PHP - OOP

PHP - OOP
PHP - Ce este OOP?
De la PHP5, puteți scrie și cod PHP într-un stil orientat pe obiecte (object-oriented style).
Programarea orientată pe obiecte (Object-Oriented programming) este mai rapidă și mai ușor de executat.
PHP Ce este OOP?
OOP înseamnă programare orientată pe obiecte (Object-Oriented Programming).
Programarea procedurală (Procedural programming) se referă la scrierea procedurilor sau a funcțiilor care efectuează operațiuni asupra datelor, în timp ce programarea orientată pe obiect (object-oriented programming) este despre crearea de obiecte care conțin atât date cât și funcții.
Programarea orientată pe obiecte (object-oriented programming) are mai multe avantaje față de programarea procedurală (procedural programming):
OOP este mai rapid și mai ușor de executat
OOP oferă o structură clară pentru programe
OOP ajută la păstrarea codului PHP DRY „Nu vă repetați” (Don't Repeat Yourself) și face codul mai ușor de întreținut, modificat și depanat
OOP face posibilă crearea de aplicații reutilizabile complete, cu mai puțin cod și timp de dezvoltare mai scurt
Principiul „Nu vă repetați” (Don't Repeat Yourself) (DRY) se referă la reducerea repetării codului. Ar trebui să extrageți codurile care sunt comune pentru aplicație și să le așezați într-un singur loc și să le reutilizați în loc să le repetați.
PHP - Ce sunt clasele și obiectele?
Clasele și obiectele sunt cele două aspecte principale ale programării orientate pe obiecte (object-oriented programming).
Diferența dintre clasă și obiecte.
O clasă este un șablon pentru obiecte (template for objects), iar un obiect este o instanță a unei clase.
Când obiectele individuale sunt create, moștenesc toate proprietățiile și comportamentele din clasă, dar fiecare obiect va avea valori diferite pentru proprietăți.
Uitați-vă la capitolele următoare pentru a afla mai multe despre OOP.

PHP MySQL Declarații pregătite

PHP MySQL Declarații pregătite
Declarațiile pregătite (prepared statements) sunt foarte utile împotriva injecțiilor SQL (SQL injections).
Declarații pregătite și parametri legați
O declarație pregătită (prepared statements) este o caracteristică utilizată pentru a executa aceleași (sau similare) instrucțiuni SQL cu o eficiență ridicată.
Declarațiile pregătite (prepared statements) funcționează astfel:
Pregătiți: Un șablon de instrucțiuni SQL (SQL statement template) este creat și trimis în baza de date. Anumite valori sunt lăsate nespecificate, numite parametri (etichetat (labeled ) "?"). Exemplu: INSERT INTO MyGuests VALUES(?, ?, ?)
Baza de date analizează, compilează și efectuează optimizarea interogării pe șablonul de instrucțiuni SQL (SQL statement template) și stochează rezultatul fără a-l executa
Executați: ulterior, aplicația leagă valorile la parametri, iar baza de date execută instrucțiunea. Aplicația poate executa instrucțiunea ori de câte ori dorește cu valori diferite
Față de executarea directă a instrucțiunilor SQL, instrucțiunile pregătite (prepared statements) au trei avantaje principale:
Instrucțiunile pregătite (prepared statements) reduc timpul de analiză (parsing time), deoarece pregătirea pe interogare se face o singură dată (deși instrucțiunea este executată de mai multe ori)
Parametrii legați (bound parameters) minimizează lățimea de bandă (bandwidth) către server, deoarece trebuie să trimiteți de fiecare dată doar parametrii și nu întreaga interogare (query)
Instrucțiunile pregătite (prepared statements) sunt foarte utile împotriva injecțiilor SQL (SQL injections), deoarece valorile parametrilor, care sunt transmise ulterior folosind un protocol diferit, nu trebuie eliberate corect (correctly escaped). Dacă șablonul de instrucțiune originală (original statement template) nu este derivat de la intrarea externă (external input), nu poate apărea injecția SQL (SQL injection).
Declarații pregătite în MySQLi (Prepared Statements in MySQLi)
Următorul exemplu utilizează instrucțiuni pregătite și parametri legați (prepared statements and bound parameters) în MySQLi:
Exemplu (MySQLi cu declarații pregătite/MySQLi with Prepared Statements)
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Creați conexiunea
$conn = new mysqli($servername, $username, $password, $dbname);
// Verificați conexiunea
if ($conn->connect_error) {
    die("Conexiunea a eșuat: " . $conn->connect_error);
}
// pregătiți și legați
$stmt = $conn->prepare("INSERT INTO MyGuests (firstname, lastname, email) VALUES (?, ?, ?)");
$stmt->bind_param("sss", $firstname, $lastname, $email);
// setați parametrii și executați
$firstname = "Ion";
$lastname = "Popescu";
$email = "[email protected]";
$stmt->execute();
$firstname = "Maria";
$lastname = "Gheorghe";
$email = "[email protected]";
$stmt->execute();
$firstname = "Iulia";
$lastname = "Filipescu";
$email = "[email protected]";
$stmt->execute();
echo "Înregistrări noi create cu succes";
$stmt->close();
$conn->close();
?>
Linii de cod pentru a explica exemplul precedent:
"INSERT INTO MyGuests (firstname, lastname, email) VALUES (?, ?, ?)"
În SQL-ul nostru, introducem un semn de întrebare (?) unde vrem să înlocuim o valoare întreagă, string, dublă sau blob (integer, string, double or blob).
Apoi, aruncați o privire la funcția bind_param():
$stmt->bind_param("sss", $firstname, $lastname, $email);
Această funcție leagă parametrii la interogarea SQL (SQL query) și îi spune bazei de date care sunt parametrii. Argumentul „sss” listează tipurile de date (types of data) care sunt parametri. Caracterul s spune mysql-ului că parametrul este un șir (string).
Argumentul poate fi unul din următoarele patru tipuri:
i - număr întreg (integer)
d - dublu (double)
s - șir (string)
b - BLOB
Pentru fiecare parametru trebuie să avem una dintre acestea .
Spunând mysql-ului la ce tip de date (type of data) trebuie să se aștepte, reducem la minimum riscul de injecții SQL (SQL injections.).
Dacă dorim să introducem date din surse externe (cum ar fi intrarea utilizatorului (user input)), este foarte important ca datele să fie igienizate ( sanitized) și validate.
Declarații pregătite în PDO (Prepared Statements in PDO)
Următorul exemplu utilizează declarații pregătite și parametri legați (prepared statements and bound parameters) în PDO:
Exemplu (PDO cu declarații pregătite)
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDBPDO";
try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    // setați modul de eroare PDO la excepție
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    // pregătiți parametrii sql și bind
    $stmt = $conn->prepare("INSERT INTO MyGuests (firstname, lastname, email)
    VALUES (:firstname, :lastname, :email)");
    $stmt->bindParam(':firstname', $firstname);
    $stmt->bindParam(':lastname', $lastname);
    $stmt->bindParam(':email', $email);
    // introduceți un rând
    $firstname = "Ion";
    $lastname = "Popescu";
    $email = "[email protected]";
    $stmt->execute();
    // introduceți un alt rând
    $firstname = "Maria";
    $lastname = "Gheorghe";
    $email = "[email protected]";
    $stmt->execute();
    // introduceți un alt rând
    $firstname = "Iulia";
    $lastname = "Filipescu";
    $email = "[email protected]";
    $stmt->execute();
    echo "Înregistrări noi create cu succes";
    }
catch(PDOException $e)
    {
    echo "Eroare: " . $e->getMessage();
    }
$conn = null;
?>

PHP MySQL Delete Data

PHP MySQL Ștergere date
Ștergeți datele dintr-un tabel MySQL folosind MySQLi și PDO
Instrucțiunea DELETE este utilizată pentru a șterge înregistrările dintr-un tabel:
DELETE FROM table_name
WHERE some_column = some_value
Observați clauza WHERE în sintaxa DELETE: clauza WHERE specifică ce înregistrare sau înregistrări trebuie șterse. Dacă omiteți clauza WHERE, toate înregistrările vor fi șterse!
Următoarele exemple șterg înregistrarea cu id=3 din tabelul „MyGuests”:
Exemplu (MySQLi Orientat pe obiect/MySQLi Object-oriented)
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Creați conexiunea
$conn = new mysqli($servername, $username, $password, $dbname);
// Verificați conexiunea
if ($conn->connect_error) {
    die("Conexiunea a eșuat: " . $conn->connect_error);
}
// sql pentru a șterge o înregistrare
$sql = "DELETE FROM MyGuests WHERE id=3";
if ($conn->query($sql) === TRUE) {
    echo "Înregistrare ștersă cu succes";
} else {
    echo "Eroare la ștergerea înregistrării: " . $conn->error;
}
$conn->close();
?>
Exemplu (MySQLi Procedural)
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Creați conexiunea
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Verificați conexiunea
if (!$conn) {
    die("Conexiunea a eșuat: " . mysqli_connect_error());
}
// sql pentru a șterge o înregistrare
$sql = "DELETE FROM MyGuests WHERE id=3";
if (mysqli_query($conn, $sql)) {
    echo "Înregistrare ștersă cu succes";
} else {
    echo "Eroare la ștergerea înregistrării: " . mysqli_error($conn);
}
mysqli_close($conn);
?>
Exemplu (PDO)
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDBPDO";
try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    // setați modul de eroare PDO la excepție
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    // sql pentru a șterge o înregistrare
    $sql = "DELETE FROM MyGuests WHERE id=3";
    // utilizați exec() deoarece nu se returnează niciun rezultat
    $conn->exec($sql);
    echo "Înregistrare ștersă cu succes";
    }
catch(PDOException $e)
    {
    echo $sql . "<br>" . $e->getMessage();
    }
$conn = null;
?>

PHP MySQL Update Data

PHP MySQL Actualizare date
Actualizarea datelor într-un tabel MySQL folosind MySQLi și PDO
Instrucțiunea UPDATE este utilizată pentru a actualiza înregistrările existente într-un tabel:
UPDATE table_name
SET column1=value, column2=value2,...
WHERE some_column=some_value 
Observați clauza WHERE în sintaxa UPDATE: clauza WHERE specifică ce înregistrare sau înregistrări ar trebui actualizate. Dacă omiteți clauza WHERE, toate înregistrările vor fi actualizate!
Următoarele exemple actualizează înregistrarea cu id = 2 în tabelul „MyGuests”:
Exemplu (MySQLi Orientat pe obiect/MySQLi Object-oriented)
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Creați conexiunea
$conn = new mysqli($servername, $username, $password, $dbname);
// Verificați conexiunea
if ($conn->connect_error) {
    die("Conexiunea a eșuat: " . $conn->connect_error);
}
$sql = "UPDATE MyGuests SET lastname='Popescu' WHERE id=2";
if ($conn->query($sql) === TRUE) {
    echo "Înregistrare actualizată cu succes";
} else {
    echo "Eroare la actualizarea înregistrării: " . $conn->error;
}
$conn->close();
?>
Exemplu (MySQLi Procedural)
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Creați conexiunea
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Verificați conexiunea
if (!$conn) {
    die("Conexiunea a eșuat: " . mysqli_connect_error());
}
$sql = "UPDATE MyGuests SET lastname='Popescu' WHERE id=2";
if (mysqli_query($conn, $sql)) {
    echo "Înregistrare actualizată cu succes";
} else {
    echo "Eroare la actualizarea înregistrării: " . mysqli_error($conn);
}
mysqli_close($conn);
?>
Exemplu (PDO)
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDBPDO";
try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    // setați modul de eroare PDO la excepție
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $sql = "UPDATE MyGuests SET lastname='Popescu' WHERE id=2";
    // Pregătirea declarației (statement)
    $stmt = $conn->prepare($sql);
    // executați interogarea (query)
    $stmt->execute();
    // echo un mesaj pentru a spune că UPDATE a reușit
    echo $stmt->rowCount() . " records UPDATED successfully";
    }
catch(PDOException $e)
    {
    echo $sql . "<br>" . $e->getMessage();
    }
$conn = null;
?>

Despre Lecții-Virtuale.ro

Lecții-Virtuale este o platformă educațională care oferă suport în vederea pregătirii pentru Evaluare Națională și Bacalaureat la Matematică, Fizică și Chimie. Lecțiile noastre sunt alcătuite din filme și exerciții și probleme cu tot cu rezolvări. Platforma noastră este o soluție ideală pentru școala online. Pentru facilitarea activității profesorilor în cadrul ecosistemului GSuite de la Google am implementat butonul Google Classroom. Scopul nostru este să ne concentrăm pe prezentarea noțiunilor și fenomenelor într-o manieră care să stimuleze înțelegerea și nu memorarea mecanică. Ne propunem să facilităm accesul la conținut educațional de calitate mai ales elevilor cu venituri mai modeste care nu își pemit meditații particulare. Sperăm să vă simțiti bine alături de noi și să invățați lucruri folositoare. Hai România!

Newsletter

Abonează-te la Newsletter pentru a fi la curent cu toate ofertele noastre.

Parteneri

EduApps partener Lectii Virtuale UiPath partener Lectii Virtuale Scoala365 partener Lectii Virtuale CCD Galați partener Lectii Virtuale

2024 © Lecții-virtuale.ro Toate drepturile rezervate
Termeni   Despre   Contact   Confidenţialitate   Cariere Parteneri