Rezultate pentru tag: modul

Noţiuni de cinematică.

Introducem noţiunile şi mărimile de bază ale cinematicii. Discutăm ecuaţia de mişcare. Prezentăm definiţia şi proprietăţile vectorilor.

Viteza şi acceleraţia.

Metode de adunare şi scadere a vectorilor. Viteza medie şi viteza momentană. Acceleraţia medie şi acceleraţia momentană.

Mişcarea circulară uniformă.

Definiţie, ecuaţia de mişcare, mărimi caracteristice, acceleraţia centripetă.

Acţiunea şi reacţiunea. Problemă de dinamică.

Principiul III, al acţiunii şi reacţiunii. Exemplu de problemă dinamică rezolvată.

Elasticitatea. Legea Hooke.

Elasticitatea. Forţa elastică. Legea Hook. Efortul unitar.

Lucrul mecanic.

Definiţie. Interpretare geometrică. Forţe conservative. Lucrul mecanic al forţelor elastică şi de greutate.

Calorimetrie II.

Calorimetrul şi utilizarea lui. Ecuaţia calorimetrică. Energia internă.

Legea Coulomb. Câmpul electric.

Sarcina electrică. Legea Coulomb a interacţiunii electrostatice. Câmpul electric, linii de câmp.

Mărimile câmpului electric. Capacitatea electrică.

Potenţialul electric, tensiunea electrică, lucrul mecanic electric. Energia potenţială electrostatică. Capacitatea electrică.

Inducţia electromagnetică.

Inducţia electromagnetică. Fluxul câmpului magnetic. Regula Lenz. Exemplu.

Reprezentarea fazoriala.

Ipotezele Planck şi Einstein.

Ipoteza Planck: cuantele de energie. Ipoteza Einstein: fotonul. Explicarea efectului fotoelectric cu formula Einstein şi modelul corpuscular.

Experimentul Franck-Hertz.

Dispozitiv experimental, rezultate, concluzii. Cuantificarea energiei atomice.

Nivelele energetice ale atomului de hidrogen.

Nivelele energetice Bohr ale atomului de hidrogen. Tranziţiile atomului de hidrogen. Energia de ionizare.

Configurația electronică a elementelor din primele 3 perioade (Z 1-18)

Straturi electronice, substraturi electronice, orbitali. Spin electronic. Configurația electronică. Reguli de ocupare cu electroni a straturilor şi substraturilor. Principiul lui Pauli. Regula lui Hund.

Poziţia elementelor în tabelul periodic şi proprietăţile periodice

Tabelul periodic. Poziţia elementelor în tabelul periodic. Proprietăţile periodice. Raza atomică, volumul atomic. Ion, cation, anion.

Legătura ionică. Compuşii ionici.

Regula octetului. Legături chimice. Cedare şi primire de electroni. Punere în comun de electroni. Compuşi ionici. Ioni pozitivi – cationi. Ioni negativi – anioni. Simboluri Lewis. Substanţe cristaline. Proprietăţile compuşilor ionici. 

Forţe intermoleculare. Legături de hidrogen.

Forțe intramoleculare şi forțe intermoleculare. Legătura de hidrogen, forțe dipol-dipol, forțe de dispersie London, forțe van der Waals. Proprietățile influențate de forțele intermoleculare: punct de fierbere, punct de topire, stare de agregare. 

Ordonarea numerelor întregi

Compararea numerelor întregi. Ordonarea numerelor întregi.

Modulul unui număr întreg

Noțiunea de modul. Valoarea absolută a unui număr întreg. Numere întregi opuse.

Adunarea şi scăderea numerelor întregi

Operaţii cu numere întregi. Adunarea numerelor întregi. Scăderea numerelor întregi.

Înmulţirea şi împărţirea numerelor întregi

Operaţii cu numere întregi. Înmulţirea numerelor întregi. Împărţirea numerelor întregi. Regula semnelor. 

Legătura dintre numitorul unei fracții ordinare ireductibile și numărul zecimal obținut

Modul în care numitorul unei fracții ordinare ireductibile determină obținerea unei fracții zecimale finite sau periodice

Intervale de numere reale

Noțiunea de interval. Intervale mărginite de numere reale, intervale nemărginite.  Interval deschis, interval închis. Legătura dintre intervale și modul.  Determinarea soluțiilor unor inecuații (în mulțimea numerelor reale) care au necunoscuta în modul.

Structura compuşilor organici – formule moleculare şi formule structurale

Structură chimică. Analiza elementală. Determinarea formulei procentuale, a formulei brute şi a formulei moleculare (exemple de calcul). Formule structurale: formule de proiecţie, formule de proiecţie restrânse (plane). Izomerie. Izomeri geometrici (izomeri cis-trans). 

Izomerie optică – chiralitatea

Clasificarea izomerilor în izomeri de constituţie şi stereoizomeri. Clasificarea stereoizomerilor în izomeri de conformaţie şi izomeri de configuraţie. Clasificarea izomerilor de configuraţie în enantiomeri şi diastereoizomeri. Chiralitate. Obiecte chirale şi obiecte achirale. Atom de carbon asimetric. Centru de chiralitate. Molecule chirale şi molecule achirale. Enantiomeri

Săpunuri şi detergenţi

Reacţia de saponificare. Agenţi activi de suprafaţă (surfactanţi). Clasificarea şi structura surfactanţilor. Modul de acţiune al săpunurilor şi detergenţilor. Clasificarea detergenţilor.

Proteine - structura primară

Proteine - polimeri ai aminoacizilor. Policondensarea aminoacizilor. Hidroliza proteinelor. Structura proteinelor. Structura primară - secvenţa resturilor de aminoacizi. Corelaţia structură - funcţie. Conformaţie. Legătura peptidică - proprietăţi.

Acizi nucleici - ADN, ARN, codul genetic

Structura de dublu helix a ADN-ului. Perechi de baze complementare în ADN şi perechi de baze complementare in ARN. Secvenţa mononucleotidelor. ARN mesager, ARN de transport, ARN ribozomal. Sinteza proteinelor - transcriere, traducere. Cod genetic, codon, genă, universalitatea codului genetic. 

Ecuații în mulțimea numerelor întregi

Rezolvarea ecuațiilor în mulțimea numerelor întregi

Inecuații în mulțimea numerelor întregi

Rezolvarea inecuațiilor în mulțimea numerelor întregi. Inecuații cu modul

Înmulțirea numerelor raționale

Înmulțirea numerelor raționale scrise sub formă de fracție ordinară.

Valoarea absolută a unui numar real

Noțiunea de modul. Proprietățile modulului unui număr real.

Inecuații cu coeficienți reali

Inecuații de gradul I cu coeficienți reali.

Valoarea absolută a unui numar rațional

Modulul unui numar rațional. Proprietățile modulului.

Adunarea numerelor raționale

Adunarea numerelor raționale având același semn sau semne diferite.

Influenţa catalizatorilor asupra vitezei de reacţie

Catalizatori – definiţie şi mod de funcţionare. Reprezentarea grafică a energiei de activare pentru o reacţie necatalizată şi o reacţie catalizată. Etapa determinantă de viteză. Reacţii catalitice. Proprietăţile catalizatorilor - activitatea catalitică, selectivitatea. Promotorii şi otrăvurile. Tipuri de reacţii catalitice –reacţii omogene, eterogene şi enzimatice. Suport catalitic. Inhibitori. 

Inecuații de gradul I

Forma generală a inecuațiilor de gradul I cu o necunoscută. Modalitatea teoretică de rezolvare a unei inecuații de gradul întâi. Ecuații cu modul, explicitarea modulului.

Inecuații de gradul al doilea ce conțin modul

Inecuații de gradul II ce conțin modul. Explicitarea modulului unei inecuații de gradul doi.

Numere complexe scrise sub formă algebrică

Forma algebrică a numerelor complexe. Partea reală a unui număr complex. Partea imaginară a unui număr complex. Definirea operațiilor algebrice cu numere complexe. Puterile numărului complex i. Numere complexe conjugate. Determinarea raportului dintre două numere complexe. Modulul unui număr complex. Conjugatul unui număr complex.

Reprezentarea geometrică a numerelor complexe

Imaginea geometrică a unui număr complex. Interpretarea geometrică a modulului unui număr complex. Interpretarea geometrică a sumei și a diferenței a două numere complexe. Interpretarea geometrică a numerelor complexe opuse și a numerelor complexe conjugate.

Semnul funcției de gradul I

Semnul funcției de gradul I. Exerciții de stabilire a semnului funcției de gradul I. Semnul unor expresii algebrice. Rezolvarea unor ecuații cu modul și inecuații cu modul, folosind semnul funcției de gradul I.

Relațiile lui Viete. Natura și semnele rădăcinilor ecuației de gradul II

Legătura dintre rădăcinile reale ale ecuației de gradul al doilea și coeficienții acesteia. Formarea ecuației de gradul al doilea când se cunosc rădăcinile. Natura rădăcinilor și semnele rădăcinilor ecuației de gradul al doilea.

Vectori

Direcția unei drepte. Segmente cu aceeași direcție. Segmente orientate. Segmente echipolente. Noțiunea de vector. Vector nul. Vector unitate. Vectori egali. Vectori opuși.

Înmulțirea vectorilor cu scalari

Înmulțirea unui vector cu un scalar. Proprietăți ale înmulțirii vectorilor cu scalari.

Descompunerea unui vector într-un reper cartezian

Noțiunea de versor. Descompunerea unui vector după doi vectori dați. Coordonatele unui vector. Înmulțirea unui vector cu un scalar. Suma vectorilor. Coliniaritatea vectorilor. Vectori egali. Formula de calcul pentru lungimea unui vector exprimat cu ajutorul versorilor. Modulul unui vector. Expresia analitică a unui vector.

Vectori în reper cartezian

Vectori exprimați cu ajutorul versorilor: coordonatele unui vector, modulul unui vector.

Operații cu numere complexe scrise sub formă algebrică

Adunarea numerelor complexe. Scăderea numerelor complexe. Modulul unui număr complex. Conjugatul unui număr complex. Înmulțirea numerelor complexe. Raportul a două numere complexe. Egalitatea a două numere complexe.

Produsul scalar a doi vectori

Produsul scalar a doi vectori. Proprietățile produsului scalar. Produs scalar: expresia analitică. Unghiul a doi vectori. Modulul unui vector.

Înmulțirea numerelor complexe scrise sub formă trigonometrică

Operații cu numere complexe exprimate trigonometric: înmulțirea numerelor complexe. Modulul produsului. Argumentul produsului.

Ridicarea la putere a numerelor complexe sub formă trigonometrică

Operații cu numere complexe exprimate trigonometric: ridicarea la putere a unui număr complex. Formula lui Moivre. Modulul puterii. Argumentul puterii.

Împărțirea numerelor complexe sub formă trigonometrică

Operații cu numere complexe exprimate trigonometric: împărțirea numerelor complexe. Modulul câtului. Argumentul câtului.

Proprietăţile limitei unui şir

Principalele proprietăţi ale şirurilor care au limită.

Proprietăţi ale integralei definite

Proprietăţi ale integralei definite: proprietatea de liniaritate, proprietatea de aditivitate la interval, pozitivitatea integralei, monotonia integralei, inegalitatea mediei, modulul integralei.

Lege de compoziţie internă

Lege de compoziţie pe o mulţime. 

Elemente caracteristice ale unei serii statistice

Interpretarea datelor statistice: media, mediana, modulul, dispersia, abaterea medie pătratică.

Variabile aleatoare

Variabile aleatoare: tabelul de distribuţie, media, modulul, dispersia şi amplitudinea unei variabile aleatoare.

Introducere în HTML

HTML este limbajul marcant standard pentru crearea de pagini Web.
HTML reprezintă un început pentru realizarea site-urilor profesionale.
Declarația <! DOCTYPE html> definește acest document ca fiind HTML5.
Elementul <html> este elementul rădăcină al unei pagini HTML.
Elementul <head> conține meta informații despre document.
Elementul <titlu> specifică un titlu pentru document.
Elementul <body> conține conținutul paginii vizibile.
Elementul <h1> definește o rubrică mare.
Elementul <p> definește un alineat.

Stiluri CSS în HTML

Modelarea HTML cu CSS.
CSS descrie modul în care elementele HTML trebuie să fie afișate pe ecran, pe hârtie sau în alte suporturi. Poate controla aspectul mai multor pagini web simultan.
Utilizați atributul HTML style pentru stilul CSS în linie (inline).
Utilizați elementul HTML <style> pentru a defini stilul CSS intern.
Utilizați elementul HTML <link> pentru a vă referi la un fișier CSS extern.
Utilizați elementul HTML <head> pentru a stoca elementele <style> și <link>.
Utilizați proprietatea CSS color pentru culorile de text.
Utilizați proprietatea CSS font-family pentru fonturile text.
Utilizați proprietatea CSS font-size pentru dimensiunile textului.
Utilizați proprietatea CSS border pentru margini.
Utilizați proprietatea CSS padding pentru spațiu în interiorul border.
Utilizați proprietatea CSS margin pentru spațiu în afara border.
Pentru a defini un stil specific pentru un element special, adăugați un atribut id elementului:
Pentru a defini un stil pentru tipuri speciale de elemente, adăugați un atribut de clasă elementului:
Foile de stil externe (external style sheets ) pot fi trimise cu o adresă URL completă sau cu o cale relativă la pagina web curentă.

Elementul HTML head

Elementul <head> este un container pentru metadate (date despre date) și este plasat între eticheta <html> și eticheta <body>.
<head> Definește informații despre document.
<titlu> Defineste titlul unui document.
<base> Definește o adresă implicită sau o țintă implicită pentru toate linkurile dintr-o pagină.
<link> Definește relația dintre un document și o resursă externă.
<meta> Definește metadatele despre un document HTML.
<script> Definește un script din partea clientului.
<style> Definește informațiile despre stil pentru un document.
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. Aceasta variază în funcție de dispozitiv și va fi mai mică pe un telefon mobil decât pe ecranul computerului.
Ar trebui să includeți următorul element viewport <meta> în toate paginile web.
Partea width=device-width stabilește lățimea paginii pentru a urma lățimea ecranului dispozitivului (care va varia în funcție de dispozitiv).
Partea initial-scale=1.0  setează nivelul inițial de zoom când prima pagină este încărcată de browser. 

Elemente HTML Layout

Site-urile web deseori afișează conținut în mai multe coloane (cum ar fi o revistă sau un ziar).
<header> - definește un antet pentru un document sau o secțiune
<nav> - definește un container pentru link-uri de navigație
<section> - definește o secțiune dintr-un document
<article> - definește un articol independent de sine stătător
<aside> - definește conținutul în afară de conținut (precum o bară laterală)
<footer> - definește un subsol pentru un document sau o secțiune
<detalii> - definește detalii suplimentare
<summary> - definește un titlu pentru elementul <details>
Tehnici Layout HTML. Există cinci moduri diferite de a crea multicolumn layouts: HTML tables (not recommended), CSS float property, CSS flexbox, CSS framework, CSS grid.
Elementul <table> nu a fost proiectat pentru a fi un instrument de aspect! Scopul elementului <tabel> este afișarea datelor tabulare. 
Dacă doriți să vă creați rapid un layout, puteți utiliza un framework cum ar fi Bootstrap.
Este ceva comun să faceți machete web (web layouts) întregi folosind proprietatea CSS float. 
Flexbox reprezintă un nou mod de dispunere în CSS3.
Modulul CSS Grid Layout oferă un sistem de dispunere bazat pe grilă, cu rânduri și coloane, ceea ce facilitează proiectarea paginilor web fără a fi nevoie să folosiți floats și poziționare.

HTML Atribute Input

Atributul value specifică valoarea inițială pentru un câmp de intrare.
Atributul readonly specifică faptul că un câmp de intrare este doar citit (nu poate fi modificat).
Atributul disabled specifică faptul că un câmp de intrare este dezactivat.
Atributul size specifică dimensiunea (în caractere) pentru câmpul de intrare.
Atributul maxlength specifică lungimea maximă permisă pentru câmpul de intrare.
Restricțiile de intrare nu sunt ignorate, iar JavaScript oferă multe modalități de a adăuga input-uri ilegale.
HTML5 a adăugat următoarele atribute pentru <input>: autocomplete, autofocus, form, formaction, formenctype, formmethod,
formnovalidate, formtarget, height and width, list, min and max, multiple, pattern (regexp), placeholder, required, step
și următoarele atribute pentru <form>: autocomplete, novalidate.
Atributul formaction este utilizat cu type="submit" și type="image".
Atributul formenctype este utilizat cu type = "submit" și type = "image".
Atributul formmethod poate fi utilizat cu type = "submit" și type = "image".
Atributul step funcționează cu următoarele tipuri de intrare (input types): number, range, date, datetime-local, month, time și week.
Atributul pattern funcționează cu următoarele tipuri de intrare (input types): text, search, url, tel, email, și password.
Utilizați atributul global title pentru a descrie pattern-ul care să ajute utilizatorul.
Atributul placeholder funcționează cu următoarele tipuri de intrare (input types): text, search, url, tel, email, și password.
Atributul required funcționează cu următoarele tipuri de intrare (input types): text, search, url, tel, email, password, date pickers, number, checkbox, radio, și file.
Atributul multiple funcționează cu următoarele tipuri de intrare (input types): e-mail și file.
Atributele min și max funcționează cu următoarele tipuri de intrare (input types): number, range, date, datetime-local, month, time și week.
Atributul list se referă la un element <datalist> care conține opțiuni predefinite pentru un element <input>.
Atributele înălțime și lățime (height și width) specifică înălțimea și lățimea unui element <input type = "image">.
Atributul formnovalidate poate fi utilizat cu type="submit".
Atributul formtarget înlocuiește atributul țintă (target) al elementului <form>.
Atributul formtarget poate fi utilizat cu type = "submit" și type = "image".
Atributul novalidate este un atribut <form>.
Atributul autocomplete funcționează cu <form> și următoarele tipuri <input>:text, search, url, tel, email, password, datepickers, range, și color.

Introducere în HTML5

WHATWG a dorit să dezvolte HTML ca un „standard de viață”. Un nivel de viață este mereu actualizat și îmbunătățit. Se pot adăuga noi funcții, dar funcționalitățile vechi nu pot fi eliminate.
Declarația DOCTYPE pentru HTML5.
Declarația de codare a caracterelor (charset).
Codificarea implicită a caracterelor în HTML5 este UTF-8.
Elementesemantice noi precum: <header>, <footer>, <article> și <section>.
Atribute ale elementelor de formular noi, cum ar fi: number, date, time, calendar, și range.
Elemente grafice noi: <svg> și <canvas>.
Elemente multimedia noi: <audio> și <video>.
Cele mai interesante API-uri noi în HTML5 sunt: HTML Geolocation, HTML Drag and Drop, HTML Local Storage, HTML Application Cache, HTML Web Workers, HTML SSE.
Următoarele elemente HTML4 au fost eliminate în HTML5: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, 
<noframes>, <strike>, <tt>.
Folosiți în schimb: <abbr>, <object>, CSS, <ul>, <s>, <del>.

Migrare în HTML5

Acest capitol se referă în întregime la modul de migrare de la HTML4 la HTML5.
Acest capitol arată cum se poate converti o pagină HTML4 într-o pagină HTML5, fără a distruge nimic din conținutul sau structura originală.
Migrarea de la HTML4 la HTML5:
<div id="header"> -   <header>
<div id="menu">  -   <nav>
<div id="content">  -   <section>
<div class="article">  -   <article>
<div id="footer">  -   <footer>
Modificați doctype la doctype HTML5.
Modificați informațiile de codificare la codarea HTML5.
Adăugați HTML5Shiv.
Schimbare la elemente semantice HTML5.
CSS-ul existent conține ID-uri și clase pentru stilizarea elementelor.
Înlocuiți cu stiluri CSS egale pentru elemente semantice HTML5.
Schimbați elementele în elemente semantice HTML5​​​​​​.
Există o diferență confuză (lipsa) în standardul HTML5, între <article> <section> și <div>.
În standardul HTML5, elementul <secțiune> este definit ca un bloc de elemente conexe.
Elementul <article> este definit ca un bloc complet, de sine stătător, al elementelor conexe.
Elementul <div> este definit ca un bloc de elemente pentru copii.
<article> în <article>.
<div> în <article>.
<div> în <section> în <article>.
 

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."

CSS Introducere

CSS este un limbaj care descrie stilul unui document HTML.
CSS descrie modul în care trebuie afișate elementele HTML.
CSS reprezintă Cascading Style Sheets.
CSS descrie modul în care elementele HTML trebuie să fie afișate pe ecran, pe hârtie sau în alte suporturi.
CSS economisește multă muncă. Poate controla aspectul mai multor pagini web simultan.
Fișele de stil externe (external stylesheets) sunt stocate în fișiere CSS.
CSS este utilizat pentru a defini stiluri pentru paginile dvs. web, inclusiv designul, aspectul și variațiile de afișare pentru diferite dispozitive și dimensiuni de ecran.
HTML nu a fost niciodată destinat să conțină etichete pentru formatarea unei pagini web!
HTML a fost creat pentru a descrie conținutul unei pagini web.
Când etichete ca <font> și atribute de culoare au fost adăugate la specificația HTML 3.2, a început un coșmar pentru dezvoltatorii web. Dezvoltarea de site-uri web mari, unde fonturile și informațiile despre culoare erau adăugate la fiecare pagină, a devenit un proces lung și scump.
Pentru a rezolva această problemă, World Wide Web Consortium (W3C) a creat CSS.
Definițiile de stil sunt salvate în mod normal în fișiere .css externe.
Cu un fișier de foi de stil externe (external stylesheet file), puteți schimba aspectul unui întreg site web schimbând doar un singur fișier!

Cum să adăugați CSS

Când un browser citește o foaie de stil, acesta va format documentul HTML în conformitate cu informațiile din foaia de stil.
Trei modalități de a insera CSS.
Există trei moduri de inserare a unei foi de stil:
CSS extern
CSS intern
CSS inline
CSS extern
Cu o foaie de stil extern, puteți schimba aspectul unui întreg site web schimbând doar un singur fișier!
Fiecare pagină HTML trebuie să includă o trimitere la fișierul de stil extern din interiorul elementului <link>, în secțiunea head.
Stilurile externe sunt definite în elementul <link>, în secțiunea <head> a unei pagini HTML.
O foaie de stil extern poate fi scrisă în orice editor de text și trebuie salvată cu o extensie .css.
Fișierul .css extern nu trebuie să conțină nicio etichetă HTML.
Nu adăugați un spațiu între valoarea proprietății și unitate (cum ar fi margin-left: 20 px;). Modul corect este: margin-left: 20px;
CSS intern
Poate fi utilizată o foaie de stil internă (internal style sheet) dacă o singură pagină HTML are un stil unic.
Stilul intern este definit în elementul <style>, în interiorul secțiunii head.
CSS inline
Se poate folosi un stil inline pentru a aplica un stil unic pentru un singur element.
Pentru a utiliza stiluri în linie, adăugați atributul stylela elementul relevant. Atributul de stil poate conține orice proprietate CSS.
Stilurile în linie sunt definite în atributul „style ” al elementului relevant.
Fișe de stil multiple (Multiple Style Sheets)
Dacă unele proprietăți au fost definite pentru același selector (element) în foi de stil diferite, se va utiliza valoarea din ultima foaie de stil citită.
Comandă în cascadă
Toate stilurile dintr-o pagină se vor „încadra” într-o nouă foaie de stil „virtuală” după următoarele reguli, unde numărul unu are cea mai mare prioritate:
Stil în linie (în interiorul unui element HTML).
Fișe de stil externe și interne (în secțiunea cap).
Setare implicită a browserului.
Deci, un stil inline are cea mai mare prioritate și va înlocui stilurile externe și interne și valorile implicite ale browserului.

CSS Fundaluri

Proprietățile de fundal CSS sunt utilizate pentru a defini efectele de fundal pentru elemente.
Proprietăți de fundal CSS: culoare de fundal, imagine de fundal, fundal repetare, background-attachment, background-position.
Culoare de fundal CSS ( CSS background-color).
Proprietatea de culoare de fundal specifică culoarea de fundal a unui element.
Cu CSS, o culoare este cel mai des specificată de: un nume de culoare valid - precum „roșu”, o valoare HEX - ca „# ff0000”, o valoare RGB - ca „rgb (255,0,0)”.
Imagine de fundal CSS (CSS background-image)
Proprietatea de fundal imagine specifică o imagine pe care să o folosească ca fundal al unui element.
În mod implicit, imaginea este repetată, astfel încât acoperă întregul element.
Când utilizați o imagine de fundal, utilizați o imagine care nu perturba textul.
Repetare de fundal CSS (CSS background-repeat)
În mod implicit, proprietatea imaginii de fundal repetă o imagine atât pe orizontală cât și pe verticală.
Unele imagini trebuie repetate doar pe orizontală sau vertical sau vor arăta ciudat, astfel:
Pentru a repeta o imagine pe verticală, setați background-repeat: repeat-y;
Fundal CSS-repetare: nu se repetă (CSS background-repeat: no-repeat)
Afișarea imaginii de fundal o singură dată este, de asemenea, specificată de proprietatea background-repeat.
În exemplul de mai sus, imaginea de fundal este plasată în același loc cu textul. Vrem să schimbăm poziția imaginii, astfel încât să nu deranjeze prea mult textul.
Poziția de fundal CSS (CSS background-position).
Proprietatea poziție fundal este utilizată pentru a specifica poziția imaginii de fundal.
Atasament de fundal CSS (CSS background-attachment).
Proprietatea de atașare de fundal specifică dacă imaginea de fundal trebuie să se deruleze sau să fie fixată (nu va defila cu restul paginii).
Fundal CSS - proprietatea shorthand
Pentru a scurta codul, este de asemenea posibil să specificați toate proprietățile de fundal într-o singură proprietate. Aceasta se numește o proprietate shorthand.
Proprietatea shorthand pentru fundal este fundal.
Când folosiți proprietatea shorthand ordinea valorilor proprietății este:
background-color
background-image
background-repeat
background-attachment
background-position
Nu contează dacă lipsește una din valorile proprietății, atât timp cât celelalte sunt în această ordine.
background - Setează toate proprietățile fundalului într-o singură declarație
background-attachment - Setează dacă o imagine de fundal este fixă sau defilează cu restul paginii
background-clip - Specifică zona de pictură a fundalului
background-color - Setează culoarea de fundal a unui element
background-image - Setează imaginea de fundal pentru un element
background-origin - Specifică unde este / sunt poziționate imaginile de fundal
background-position - Setează poziția de pornire a unei imagini de fundal
background-repeat - Setează modul în care se va repeta o imagine de fundal
background-size - Specifică dimensiunea imaginii de fundal

CSS Borders

Proprietăți CSS Borders.
Proprietățiile CSS Borders vă permit să specificați stilul, lățimea și culoarea chenarului unui element.
CSS Border Style.
Proprietatea CSS Border Style specifică ce fel de chenar trebuie afișat.
Sunt permise următoarele valori:
dotted (punctat) - Definește un chenar (border) punctat.
dashed - Definește o bordură (border) punctată.
solid - Definește o bordură (border) solidă.
double (dublu) - Definește o bordură (border) dublă.
groove - Definește un chenar cu caneluri 3D. Efectul depinde de valoarea culorii bordurii (border-color).
ridge - Definește un chenar (border) ridicat 3D. Efectul depinde de valoarea culorii bordurii (border-color).
inset - Definește un chenar (border) de inserție 3D. Efectul depinde de valoarea culorii bordurii (border-color).
outset - Definește un chenar (border) de declanșare 3D. Efectul depinde de valoarea culorii bordurii (border-color).
none - Nu definește nici o frontieră (border).
hidden (ascuns) - definește un chenar (border) ascuns.
Proprietatea border-style poate avea de la una până la patru valori (pentru top border, right border, bottom border, left border).
Niciuna dintre celelalte proprietăți CSS border descrise mai jos nu va avea NICIUN efect, decât dacă este setată proprietatea border-style!
Lățimea marginilor CSS (CSS Border Width)
Proprietatea border-width specifică lățimea celor patru chenare.
Lățimea poate fi setată ca o dimensiune specifică (în px, pt, cm, em, etc.) sau folosind una dintre cele trei valori predefinite: subțire, medie sau groasă (thin, medium, thick.).
Proprietatea border-width poate avea de la una până la patru valori (pentru marginea superioară, granița dreaptă, limita de jos și marginea din stânga/ top border, right border, bottom border, left border).
CSS Border Color
Proprietatea border-color este utilizată pentru a seta culoarea celor patru chenare.
Culoarea poate fi setată de:
name - Specificați un nume de culoare, cum ar fi „red”.
Hex - Specificați o valoare hexagonală, cum ar fi „# ff0000”.
RGB - Specificați o valoare RGB, cum ar fi „rgb (255,0,0)”.
transparent.
Proprietatea border-color poate avea de la una până la patru valori (pentru marginea de sus, marginea dreaptă, limita de jos și marginea din stânga/top border, right border, bottom border, left border).Dacă border-color nu este setată, moștenește culoarea elementului.
CSS Border - Individual Sides
Din exemplele de mai sus, ați văzut că este posibil să specificați o frontieră diferită pentru fiecare parte.
În CSS, există, de asemenea, proprietăți pentru specificarea fiecărui chenar (sus, dreapta, jos și stânga/top, right, bottom, left).
Dacă proprietatea border-style are patru valori:
border-style: punctat dublu punctat solid.
top border este punctat.
right border este solid.
bottom border este dublu.
left border este punctat.
Dacă proprietatea border-style are trei valori:border-style: dublu solid punctat.
top border este punctat.
right și left borders sunt solide.
bottom border este dublu.
Dacă proprietatea border-style are două valori:
border-style: solid punctat.
top și bottom borders sunt punctate.
right și left borders sunt solide.
Dacă proprietatea border-style are o valoare:
border-style: punctat.
toate cele patru granițe sunt punctate.
Proprietatea border-style este folosită în exemplul de mai sus. Cu toate acestea, funcționează, de asemenea, cu border-width și border-color.
CSS Border - Proprietatea Shorthand
După cum puteți vedea din exemplele de mai sus, există multe proprietăți de luat în considerare atunci când aveți de-a face cu frontierele.
Pentru a scurta codul, este de asemenea posibil să se specifice toate proprietățile de frontieră individuale într-o singură proprietate.
Proprietatea de frontieră (border) este o proprietate shorthand pentru următoarele proprietăți individuale de frontieră:
border-width
border-style (required)
border-color
Frontierele rotunjite CSS (CSS Rounded Borders).
Proprietatea border-radius este utilizată pentru a adăuga borduri rotunjite la un element.
Toate proprietățile top border într-o singură declarație.
Acest exemplu demonstrează o proprietate shorthand pentru setarea tuturor proprietăților pentru top border într-o singură declarație.
Setați stilul marginii de jos (bottom border).
Acest exemplu demonstrează cum să setați stilul marginii de jos (bottom border).
Setați lățimea marginii din stânga (left border).
Acest exemplu demonstrează modul de setare a lățimii marginii din stânga (left border).
Setați culoarea celor patru chenare (borders).
Acest exemplu demonstrează cum să setați culoarea celor patru chenare. Poate avea de la una la patru culori.
Setați culoarea marginii drepte (right border).
Acest exemplu demonstrează cum să setați culoarea marginii drepte (right border).
border Setează toate proprietățile de frontieră într-o singură declarație
border-bottom Setează toate proprietățile frontierei de jos într-o singură declarație
border-bottom-color Setează culoarea marginii de jos
border-bottom-style Setează stilul marginii de jos
border-bottom-width Setează lățimea marginii de jos
border-color Setează culoarea celor patru chenare
border-left Stabilește toate proprietățile frontierei din stânga într-o singură declarație
border-left-color Setează culoarea marginii din stânga
border-left-style Setează stilul chenarului din stânga
border-left-width Setează lățimea marginii din stânga
border-radius Setează toate cele patru chenare - * - proprietăți ale razei pentru colțurile rotunjite
border-right Setează toate proprietățile de frontieră dreaptă într-o singură declarație
border-right-color Setează culoarea marginii drepte
border-right-style Setează stilul chenarului drept
border-right-width Setează lățimea marginii drepte
border-style Setează stilul celor patru chenare
border-top Setează toate proprietățile de frontieră de sus într-o singură declarație
border-top-color Setează culoarea marginii superioare
border-top-style Setează stilul chenarului superior
border-top-width Setează lățimea marginii superioare
border-width Setează lățimea celor patru chenare

CSS Padding

Proprietățiile CSS padding sunt utilizate pentru a genera spațiu în jurul conținutului unui element, în interiorul oricărui chenar definit.
Cu CSS, aveți un control complet asupra padding- ului. Există proprietăți pentru setarea padding-ului pentru fiecare parte a unui element (sus, dreapta, jos și stânga/top, right, bottom, left).
Padding - Individual Sides
CSS are proprietăți pentru specificarea padding- ului pentru fiecare parte a unui element: padding-top, padding-right, padding-bottom, padding-left .
Toate proprietățile padding pot avea următoarele valori:
length - Specifică o căptușire în px, pt, cm etc.
% - Specifică un padding în % din lățimea elementului care îl conține.
inherit - Specifică faptul că padding-ul ar trebui să fie moștenit de la elementul părinte.
Valorile negative nu sunt permise.
Padding - Proprietatea Shorthand
Pentru a scurta codul, este posibil să specificați toate proprietățiile padding într-o singură proprietate.
Proprietatea padding este o proprietate shorthand pentru următoarele proprietăți individuale padding: padding-top, padding-right, padding-bottom, padding-left
Dacă proprietatea padding are patru valori:
padding: 25px 50px 75px 100px;
top padding este de 25px
right padding este de 50px
bottom padding este de 75px
left padding este de 100px
Dacă proprietatea padding are trei valori:
padding: 25px 50px 75px;
top padding este de 25px
right și left paddings sunt de 50px
bottom padding este de 75px
Dacă proprietatea padding are două valori:
padding: 25px 50px;
top și bottom paddings sunt de 25px
right și left paddings sunt de 50px
Dacă proprietatea padding are o valoare:
padding: 25px;
toate cele patru garnituri sunt de 25px
Padding și elementul width
Proprietatea CSS width specifică lățimea zonei de conținut a elementului. Zona de conținut este porțiunea din interiorul padding-ului, border și marginea unui element (modelul box).
Deci, dacă un element are o lățime specificată, padding-ul adăugat la acel element va fi adăugat la lățimea totală a elementului. Acesta este adesea un rezultat nedorit.
Pentru a menține lățimea la 300px, indiferent de cantitatea de padding, puteți utiliza proprietatea box-sizing. Acest lucru face ca elementul să-și mențină lățimea; dacă măriți padding-ul, spațiul de conținut disponibil va scădea.
Utilizați proprietatea box-sizing pentru a păstra lățimea la 300px, indiferent de cantitatea de padding.
Setați left padding
Acest exemplu demonstrează modul de setare a left padding-ului unui element <p>.
Setați right padding
Acest exemplu demonstrează cum să setați right padding-ul unui element <p>.
Setați top padding
Acest exemplu demonstrează modul de setare a top padding-ului unui element <p>.
Setați bottom padding
Acest exemplu demonstrează modul de setare a bottom padding-ului unui element <p>.
padding - O proprietate shorthand pentru setarea tuturor proprietăților de umplere într-o singură declarație.
padding-bottom - Setează bottom padding-ul unui element.
padding-left - Stabilește left padding-ul unui element.
padding-right - Setează right padding-ul unui element.
padding-top - Setează top padding-ul unui element.

CSS Height și Width

Proprietățiile height și width sunt utilizate pentru a seta înălțimea și lățimea unui element.
Proprietățiile height și width nu includ padding, borders sau margins. Stabilește înălțimea / lățimea (height/width) zonei din interiorul padding-ului, border-ului și marginii elementului.
Valori CSS înălțime / lățime (height/width)
Proprietățiile de înălțime și lățime (height/width) pot avea următoarele valori:
auto - Aceasta este implicită. Browserul calculează înălțimea și lățimea (height/width).
lenght - Definește înălțimea / lățimea (height/width) în px, cm etc.
% - Definește înălțimea / lățimea (height/width) în procente din blocul conținut.
inițial - Setează înălțimea / lățimea (height/width) la valoarea implicită.
inherit - Înălțimea / lățimea (height/width) vor fi moștenite de la valoarea sa parentală.
Nu uitați că proprietățiile de înălțime și lățime nu includ padding, borders sau margins! Ei setează înălțimea / lățimea zonei din interiorul paddingu-ului, border-ului și marginii elementului!
Setarea lățimii maxime (max-width).
Proprietatea max-width este utilizată pentru a seta lățimea maximă a unui element.
Lățimea maximă (max-width) poate fi specificată în valori de lungime, cum ar fi px, cm, etc., sau în procente (%) din blocul conținut sau setat pe niciunul (acesta este implicit. Înseamnă că nu există o lățime maximă).
Problema cu <div> de mai sus apare atunci când fereastra browserului este mai mică decât lățimea elementului (500px). Browserul apoi adaugă o pagină de defilare orizontală la pagină.
Folosind în schimb această lățime maximă (max-width), în această situație, veți îmbunătăți gestionarea browserului de la ferestrele mici.
Trageți fereastra browserului la o lățime mai mică de 500px, pentru a vedea diferența dintre cele două div-uri!
height - Setează înălțimea unui element.
max-height - Setează înălțimea maximă a unui element.
max-width - Setează lățimea maximă a unui element.
min-height - Setează înălțimea minimă a unui element.
min-width - Setează lățimea minimă a unui element.
width - Setează lățimea unui element.

CSS Text

Proprietatea de culoare este utilizată pentru a seta culoarea textului. Culoarea este specificată de:
un nume de culoare - ca „roșu”
o valoare HEX - ca „# ff0000”
o valoare RGB - ca „rgb (255,0,0)”
Consultați CSS Color Values pentru o listă completă a valorilor de culoare posibile.
Culoarea implicită a textului pentru o pagină este definită în selectorul body.
Aliniere text (Text Alignment).
Proprietatea text-align este utilizată pentru a seta alinierea orizontală a unui text.
Un text poate fi aliniat la stânga sau la dreapta, centrat sau justificat (left sau right, centered sau justified).
Când proprietatea de aliniere a textului este „justify”, fiecare linie este întinsă astfel încât fiecare linie să aibă lățimea egală, iar marginile stânga și dreapta sunt drepte (ca în reviste și ziare).
Decorarea textului (Text Decoration).
Proprietatea text-decoration este utilizată pentru a seta sau elimina decorațiunile din text.
Valoarea text-decoration: none; este adesea folosit pentru a elimina sublinierile din link-uri.
Nu este recomandat să subliniați textul care nu este o legătură, deoarece acest lucru încurcă cititorul.
Transformarea textului.
Proprietatea text-transform este utilizată pentru a specifica litere mari și minuscule (uppercase sau lowercase) într-un text.
Poate fi folosit pentru a transforma totul în litere mari sau minuscule (uppercase sau lowercase) sau pentru a valorifica prima literă a fiecărui cuvânt.
Indentare text (Text Indentation).
Proprietatea text-indent este utilizată pentru a specifica indentarea primei linii a unui text.
Spațiul dintre litere (Letter Spacing)
Proprietatea de spațiere a literelor (letter-spacing) este utilizată pentru a specifica spațiul dintre caracterele unui text.
Înălţimea liniei (Line Height).
Proprietatea line-height este utilizată pentru a specifica spațiul dintre linii.
Direcția textului (Text Direction).
Proprietatea direction este utilizată pentru a schimba direcția textului unui element.
Distanțarea cuvintelor (Word Spacing)
Proprietatea word-spacing a cuvintelor este utilizată pentru a specifica spațiul dintre cuvintele dintr-un text.
color - Setează culoarea textului.
direction -  Specifică direcția textului / direcția de scriere.
letter-spacing - Crește sau scade spațiul dintre caractere dintr-un text.
line-height - Setează înălțimea liniei.
text-align - Specifică alinierea orizontală a textului.
text-decoration - Specifică decorația adăugată la text.
text-indent - Specifică indentarea primei linii dintr-un bloc de text.
text-shadow - Specifică efectul umbre adăugat textului.
text-transform - Controlează capitalizarea textului.
text-overflow - Specifică modul în care conținutul revărsat care nu este afișat trebuie semnalat utilizatorului.
unicode-bidi - Se folosește împreună cu proprietatea de direcție pentru a seta sau returna dacă textul ar trebui să fie anulat pentru a accepta mai multe limbi din același document.
vertical-align - Setează alinierea verticală a unui element.
white-space - Specifică modul în care este gestionat spațiul alb din interiorul unui element.
word-spacing - Crește sau scade spațiul dintre cuvinte dintr-un text.

CSS Display

Layout CSS - Proprietatea display
Proprietatea display este cea mai importantă proprietate CSS pentru controlul aspectului.
Proprietatea display
Proprietatea display specifică dacă / cum este afișat un element.
Fiecare element HTML are o valoare de afișare implicită în funcție de tipul de element. Valoarea implicită a afișajului pentru majoritatea elementelor este block sau inline.
Elemente la nivel de block (Block-level Elements)
Un element la nivel de block (block-level element) pornește întotdeauna pe o nouă linie și ocupă toată lățimea disponibilă (se întinde spre stânga și spre dreapta, cât poate).
Exemple de elemente la nivel de block (block-level element): <div>, <h1> - <h6>, <p>, <form>, <header>, <footer>, <section>.
Elemente în linie (Inline Elements)Un element inline nu pornește de pe o nouă linie și ocupă doar lățimea necesară.
Acesta este un element <span> inline din interiorul unui paragraf.
Exemple de elemente inlinie: <span>, <a>, <img>.
Display: none;
Display: none; este utilizat în mod obișnuit cu JavaScript pentru a ascunde și a arăta elementele fără a le șterge și recrea.
Elementul <script> folosește display: none; ca implicit.
Înlocuire Valoare implicită a afișajului
După cum am menționat, fiecare element are o valoare de afișare implicită. Cu toate acestea, puteți trece peste acest lucru.
Modificarea unui element inline într-un element de block, sau invers, poate fi utilă pentru ca pagina să arate într-un mod specific și să respecte în continuare standardele web.
Un exemplu obișnuit este crearea de elemente inline <li> pentru meniurile orizontale.
Setarea proprietății de afișare (display) a unui element modifică doar modul în care este afișat elementul, NU ce fel de element este. Deci, un element inline cu display: block; nu este permis să aibă alte elemente de block în interiorul său.
crearea de elemente inline <li> pentru meniurile orizontale.
afișare elemente <span> ca elemente de block.
afișare elemente <a> ca elemente de block.
Ascunde un element - display:none sau visibility:hidden?
Ascunderea unui element se poate face prin setarea proprietății dispaly la none. Elementul va fi ascuns, iar pagina va fi afișată ca și cum elementul nu este acolo.
visibility:hidden; ascunde de asemenea un element.
Cu toate acestea, elementul va ocupa totuși același spațiu ca înainte. Elementul va fi ascuns, dar afectează în continuare aspectul.
Proprietăți CSS de afișare / vizibilitate:
display - Specifică modul în care trebuie afișat un element.
visibility - Specifică dacă un element trebuie să fie vizibil sau nu.

CSS Float

Proprietatea CSS float  specifică modul în care un element ar trebui să plutească (float).
Proprietatea CSS clear specifică ce elemente pot pluti  (float) lângă elementul șters și pe ce parte.
Proprietatea float
Proprietatea float este utilizată pentru poziționarea și formatarea conținutului, de ex. lăsați o imagine să plutească stânga spre text într-un container.
Proprietatea float poate avea una dintre următoarele valori:
left (stânga) - Elementul plutește în stânga containerului său.
right (dreapta) - Elementul plutește în dreapta containerului său.
none - Elementul nu plutește (va fi afișat acolo unde apare în text). Aceasta este implicită.
inherit (mostenire) - elementul moștenește valoarea float a părintelui său.
În cea mai simplă utilizare, proprietatea float poate fi utilizată pentru a înfășura text în jurul imaginilor.
Elementul float: right; (float: dreapta;).
Elementul float: left; (float: stânga;).
Elementul float: none;. 
Proprietatea clear
Proprietatea clear specifică ce elemente pot pluti (float) lângă elementul șters și pe ce parte.
Proprietatea clear poate avea una dintre următoarele valori:
none - Permite elemente plutitoare de ambele părți. Aceasta este implicită.
left (stânga) - Nu sunt permise elemente plutitoare în partea stângă.
right (dreapta) - Nu sunt permise elemente plutitoare în partea dreaptă.
both (ambele) - Nu sunt permise elemente plutitoare nici pe partea stângă, fie pe partea dreaptă.
inherit (mostenirea) - Elementul mosteneste valoarea clara a parintelui său.
Cel mai obișnuit mod de a utiliza proprietatea clear este după ce ați utilizat o proprietate float pe un element.
Când ștergeți floats, ar trebui să potriviți clear cu float: Dacă un element este float la stânga, atunci ar trebui să ștergeți la stânga. Elementul float va continua să plutească, dar elementul șters va apărea sub el pe pagina web.
The clearfix Hack
Dacă un element este mai înalt decât elementul care îl conține și este float, acesta se va „overflow” în afara containerului său.
overflow: auto clearfix  funcționează bine atâta timp cât sunteți în stare să păstrați controlul asupra margin-ului și a padding-ului (altfel puteți vedea bare de defilare). Totuși, noul clearfix hack however este mai sigur de utilizat și următorul cod este folosit pentru majoritatea paginilor web.
Grid of Boxes / Equal Width Boxes
Ce este box-sizing?
Puteți crea cu ușurință trei cutii plutitoare (floating boxes) una lângă alta. Cu toate acestea, când adăugați ceva care mărește lățimea fiecărei cutii (de exemplu, padding sau borders), caseta se va rupe. Proprietatea de dimensionare a cutiei ne permite să includem padding și border în lățimea totală (și înălțimea) a cutiei, asigurându-ne că padding rămâne în interiorul cutiei și că nu se rupe.
Grila casetelor poate fi de asemenea folosită pentru a afișa imagini side by side:
Cutii de înălțime egală (Equal Height Boxes)
Este bine dacă puteți garanta că casetele vor avea întotdeauna aceeași cantitate de conținut în ele. Dar de multe ori, conținutul nu este același. Dacă încercați exemplul de mai sus pe un telefon mobil, veți vedea că conținutul celei de-a doua cutii va fi afișat în afara casetei. Acesta este locul în care CSS3 Flexbox vine la îndemână - deoarece poate întinde automat cutiile pentru a fi la fel de lungă ca cea mai lungă casetă:
Flexbox nu este acceptat în Internet Explorer 10 sau în versiunile anterioare.
Meniu de navigatie (Navigation Menu)
Utilizați float cu o listă de hyperlinkuri pentru a crea un meniu orizontal.
Exemplu de dispunere web (Web Layout Example)
Este, de asemenea, obișnuit să faceți web layouts folosind proprietatea float.
Toate proprietățiile CSS float.
box-sizing Defineste modul în care se calculează lățimea și înălțimea unui element: trebuie să includă sau nu borduri
clear Specifica ce elemente pot pluti lângă elementul șters și pe ce parte
float Specifică modul în care un element trebuie să plutească
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 Border Images

CSS Border Images
Cu proprietatea CSS border-image, puteți seta o imagine care să fie utilizată ca border în jurul unui element.
Proprietatea CSS border-image
Proprietatea CSS border-image vă permite să specificați o imagine care trebuie utilizată în loc de bordura normală din jurul unui element.
Proprietatea are trei părți:
Imaginea utilizată ca border.
Unde să tăiați imaginea.
Definiți dacă secțiunile din mijloc trebuie repetate sau întinse.
Proprietatea border-image ia imaginea și o taie în nouă secțiuni, precum o placă tic-tac-toe. Apoi plasează colțurile la colțuri, iar secțiunile din mijloc sunt repetate sau întinse după cum specificați.
Pentru ca border-image să funcționeze, elementul are nevoie și de setul de proprietăți border!
Secțiunile din mijloc ale imaginii sunt repetate pentru a crea border.
Secțiunile din mijloc ale imaginii sunt întinse pentru a crea border.
Proprietatea border-image este de fapt o proprietate de tip shorthand pentru proprietățile border-image-source, border-image-slice, border-image-width, border-image-outset și border-image-repeat.
CSS border-image - Different Slice Values
Different slice values schimbă complet aspectul border-ului.
Proprietățiile CSS Border Image
border-image - O proprietate shorthand pentru setarea tuturor proprietăților border-image- *.
border-image-source - Specifică calea către imaginea care va fi utilizată ca border.
border-image-slice - Specifică modul de tăiere a border image.
border-image-width - Specifică lățimile pentru border image.
border-image-outset - Specifică cantitatea prin care se extinde zona border image dincolo de border box.
border-image-repeat - Specifică dacă border image trebuie repetată, rotunjită sau întinsă.

CSS Gradienți

Gradienți CSS
Gradienții CSS vă permit să afișați tranziții netede între două sau mai multe culori specificate.
CSS definește două tipuri de gradienți:
Gradienți liniari/Linear Gradients (coboară / în sus / stânga / dreapta / în diagonală)
Gradienți radiali/Radial Gradients (definiți de centrul lor)
Gradienți liniari CSS
Pentru a crea un gradient liniar trebuie să definiți cel puțin două opriri de culoare (color stops). Oprirea culorilor (color stops) se referă la culorile dintre care doriți să faceți tranziții netede. Puteți seta, de asemenea, un punct de plecare și o direcție (sau un unghi) împreună cu efectul de gradient.
Gradient liniar - de sus în jos (aceasta este implicit)
Gradient liniar care începe de sus. Începe roșu, iar trecerea se face la galben
Gradient liniar - de la stânga la dreapta (Linear Gradient - Left to Right)
Gradient liniar care pornește de la stânga. Începe roșu, trecerea se face la galben.
Gradient liniar - diagonală (Linear Gradient - Diagonal)
Puteți face un gradient în diagonală specificând atât pozițiile de pornire orizontale, cât și cele verticale.
Gradient liniar care începe în stânga sus (și merge spre dreapta jos). Începe roșu, trecerea se face la galben.
Utilizarea unghiurilor (Using Angles)
Dacă doriți un control mai mare asupra direcției gradientului, puteți defini un unghi, în loc de direcțiile predefinite (în jos, în sus, în dreapta, în stânga, în dreapta jos etc.).
Unghiul este specificat ca un unghi între o linie orizontală și linia de gradient.
Modul de utilizare a unghiurilor pe gradienți liniari.
Folosirea mai multor opriri de culori (Using Multiple Color Stops)
Un gradient liniar (de sus în jos) cu mai multe opriri de culoare(multiple color stops).
Un gradient liniar (de la stânga la dreapta) cu culoarea curcubeului și cu un text.
Utilizarea transparenței (Using Transparency)
De asemenea, gradienții CSS acceptă transparența, care poate fi utilizată pentru a crea efecte de decolorare.
Pentru a adăuga transparență, folosim funcția rgba() pentru a defini oprirea culorii (color stops). Ultimul parametru din funcția rgba () poate fi o valoare de la 0 la 1 și definește transparența culorii: 0 indică transparență completă, 1 indică culoarea completă (fără transparență).
Un gradient liniar care pornește de la stânga. Începe complet transparent, trecând la roșu complet.
Repetarea unui gradient liniar (Repeating a linear-gradient)
Funcția repeating-linear-gradient() este utilizată pentru a repeta gradienți liniari:
Gradienți radiali CSS (CSS Radial Gradients)
Un gradient radial este definit de centrul său.
Pentru a crea un gradient radial trebuie să definiți, de asemenea, cel puțin două opriri de culoare (color stops).
În mod implicit, forma este de elipsă, dimensiunea este cea mai îndepărtată de colț, iar poziția este centrală.
Gradient radial - Opriri uniforme ale culorilor/ Radial Gradient - Evenly Spaced Color Stops  (aceasta este implicită)
Un gradient radial cu opriri uniforme de culoare distanțate.
Gradient radial - Opriri de culori distanțate diferit / Radial Gradient - Differently Spaced Color Stops
Un gradient radial cu opriri de culoare distanțate diferit.
Setați forma (Set Shape)
Parametrul shape definește forma. Poate lua cercul de valori sau elipsa. Valoarea implicită este elipsa.
Un gradient radial sub forma unui cerc.
Utilizarea cuvintelor cheie de dimensiuni diferite (Use of Different Size Keywords)
Parametrul size definește dimensiunea gradientului. Poate lua patru valori: closest-side, farthest-side, closest-corner, farthest-corner.
Un gradient radial cu cuvinte cheie de dimensiuni diferite.
Repetarea unui gradient radial (Repeating a radial-gradient)
Funcția repeating-radial-gradient() este utilizată pentru a repeta gradienți radiali.
Proprietăți CSS pentru gradient
background-image - Setează una sau mai multe imagini de fundal pentru un element.

CSS Efecte de text

CSS Text Overflow, Word Wrap, Line Breaking Rules și Writing Modes
Proprietăți: text-overflow, word-wrap, word-break, writing-mode
CSS Text Overflow
Proprietatea CSS text-overflow specifică modul în care conținutul overflowed care nu este afișat trebuie semnalat utilizatorului.
Poate fi decupat sau poate fi redat ca elipsă (...).
CSS Word Wrapping
Proprietatea CSS word-wrap permite cuvintelor lungi să poată fi broken și wrap pe linia următoare.
Dacă un cuvânt este prea lung pentru a se încadra într-o zonă, acesta se extinde în afara.
Proprietatea word-wrap vă permite să forțați textul să fie wrap  - chiar dacă înseamnă împărțirea în mijlocul unui cuvânt.
CSS Word Breaking
Proprietatea CSS word-break specifică regulile de rupere a liniei.
Mod de scriere CSS (CSS Writing Mode)
Proprietatea CSS writing-mode specifică dacă liniile de text sunt dispuse orizontal sau vertical.
Proprietăți CSS Text Effect:
text-align-last - Specifică modul de aliniere la ultima linie a unui text
text-justify - Specifică modul în care textul justify ar trebui să fie aliniat și distanțat
text-overflow - Specifică modul în care conținutul revărsat care nu este afișat trebuie semnalat utilizatorului
word-break - Specifică regulile de rupere de linie pentru scripturile care nu sunt CJK
word-wrap - Permite cuvintele lungi pentru a putea fi broken și wrap pe linia următoare
writing-mode - Specifică dacă liniile de text sunt dispuse orizontal sau vertical

CSS Fonturi Web

Fonturi Web CSS
Regula CSS @ font-face
Fonturile web permit proiectanților web să utilizeze fonturi care nu sunt instalate pe computerul utilizatorului.
Când a-ți găsit / cumpărat fontul pe care doriți să-l utilizați, includeți doar fișierul font pe serverul dvs. web, iar acesta va fi descărcat automat la nevoie.
Fonturile dvs. proprii sunt definite în regula CSS @font-face.
Diferite formate de fonturi (Different Font Formats)
Fonturi TrueType (TTF)
TrueType este un standard de font dezvoltat la sfârșitul anilor 1980, de Apple și Microsoft. TrueType este cel mai frecvent format de font atât pentru sistemele de operare Mac OS cât și pentru Microsoft Windows.
Fonturi OpenType (OTF)
OpenType este un format pentru fonturile computerului scalabile. A fost construit pe TrueType și este marcă înregistrată a Microsoft. Fonturile OpenType sunt utilizate astăzi frecvent pe majore platforme de calculatoare.
Web Open Font Format (WOFF)
WOFF este un format de font folosit pentru paginile web. A fost dezvoltat în 2009 și este acum o recomandare a W3C. WOFF este în esență OpenType sau TrueType cu compresie și metadate suplimentare. Scopul este de a sprijini distribuirea fontului de la un server la un client printr-o rețea cu restricții de lățime de bandă.
Web Open Font Format (WOFF 2.0)
Fontul TrueType / OpenType care asigură o compresie mai bună decât WOFF 1.0.
Fonturi / forme SVG
Fonturile SVG permit SVG-ului să fie utilizat ca glife la afișarea textului. Specificația SVG 1.1 definește un modul de font care permite crearea de fonturi într-un document SVG. Puteți aplica CSS și în documentele SVG, iar regula @ font-face poate fi aplicată textului în documente SVG.
Fonturi OpenType încorporate (EOT)
Fonturile EOT sunt o formă compactă de fonturi OpenType proiectate de Microsoft pentru a fi utilizate ca fonturi încorporate pe paginile web.
Asistență browser pentru formate de fonturi
IE: formatul fontului funcționează numai atunci când este setat să fie „instalabil”.
Firefox: Nu este acceptat implicit, dar poate fi activat (trebuie să setați un steag la „true” pentru a utiliza WOFF2).
Utilizarea Bold Text
Trebuie să adăugați o altă regulă @font-face care conține descriptori pentru text bold
Descriptori de fonturi CSS (CSS Font Descriptors)

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 Stilizarea imaginilor

CSS Stilizarea imaginilor (CSS Styling Images)
Imagini rotunjite (Rounded Images)
Utilizați proprietatea border-radius pentru a crea imagini rotunjite (rounded images).
Imagini în miniatură (Thumbnail Images)
Utilizați proprietatea border pentru a crea imagini în miniatură (thumbnail images).
Imagine in miniatură (thumbnail image).
Imagine în miniatură ca link (Thumbnail Image as Link).
Imagini responsive (Responsive Images)
Imaginile responsive se vor regla automat pentru a se potrivi cu dimensiunea ecranului.
Redimensionați fereastra browserului pentru a vedea efectul.
Centrați o imagine (Center an Image)
Pentru a centra o imagine, setați marginea stângă și dreapta pe auto și transformați-o într-un element block.
Imagini / Carduri Polaroid (Polaroid Images / Cards)
Imagine transparentă
Proprietatea opacity poate lua o valoare între 0,0 și 1,0. Cu cât valoarea este mai mică, cu atât este mai transparentă:
IE8 și versiunile anterioare folosesc filter:alpha(opacity=x). X poate lua o valoare de la 0 la 100. O valoare mai mică face ca elementul să fie mai transparent.
Image Text
Cum se poziționează textul într-o imagine.
Filtre de imagine (Image Filters)
Proprietatea CSS filter adaugă efecte vizuale (precum estomparea și saturația/(blur and saturation) unui element.
Proprietatea CSS filter nu este acceptată în Internet Explorer, Edge 12 sau Safari 5.1 și nici în versiunile anterioare.
Image Hover Overlay
Creați un efect de suprapunere asupra hover.
Rotiți o imagine
Mutați mouse-ul peste imagine.
Galerie de imagini responsive
CSS poate fi utilizat pentru a crea galerii de imagini. Acest exemplu utilizează interogări media pentru a reorganiza imaginile pe dimensiuni de ecran diferite. Redimensionați fereastra browserului pentru a vedea efectul.
Image Modal (Advanced)
Modul în care CSS și JavaScript pot lucra împreună.
În primul rând, utilizați CSS pentru a crea o fereastră modală (dialog box) și ascundeți-o în mod implicit.
Apoi, utilizați un JavaScript pentru a afișa fereastra modală și pentru a afișa imaginea în interiorul modalului, atunci când un utilizator face click pe imagine.

CSS object-fit

Proprietatea CSS object-fit
Proprietatea CSS object-fit este utilizată pentru a specifica modul în care un <img> sau <video> trebuie redimensionat pentru a se potrivi cu containerul său.
Această proprietate spune conținutului să umple containerul într-o varietate de moduri; cum ar fi „păstrați acel raport de aspect” sau „întindeți-vă și ocupați cât mai mult spațiu”.
Asistență browser (Browser Support)
Avem două imagini și dorim ca acestea să umple lățimea de 50% a ferestrei browserului și 100% din înălțime.
Nu folosim object-fit, așa că atunci când redimensionăm fereastra browserului, raportul de aspect al imaginilor va fi distrus.
Folosim object-fit: cover; astfel, când redimensionăm fereastra browserului, raportul de aspect al imaginilor este păstrat.
Toate valorile proprietății CSS object-fit
Proprietatea CSS object-fit poate avea următoarele valori:
fill - Aceasta este implicită. Conținutul înlocuit este dimensionat pentru a completa content box a elementului. Dacă este necesar, obiectul va fi stretched sau squished pentru a se potrivi
contain - Conținutul înlocuit este scalat pentru a-și menține raportul de aspect (aspect ratio) în timp ce se încadrează în content box a elementului
cover - Conținutul înlocuit este dimensionat pentru a-și păstra raportul de aspect (aspect ratio) în timp ce umpleți întreaga content box a elementului. Obiectul va fi tăiat (clipped ) pentru a se potrivi
none - Conținutul înlocuit nu este redimensionat
scale-down - Conținutul este dimensionat ca și cum nici un conținut nu a fost specificat (ar avea ca rezultat o dimensiune mai mică a obiectului concret).

CSS Coloane multiple

CSS Coloane multiple
Layout cu mai multe coloane CSS( CSS Multi-column Layout)
Aspectul cu mai multe coloane CSS (multi-column layout) permite definirea ușoară a mai multor coloane de text - la fel ca în ziare.
Proprietăți CSS Multi-column
În acest capitol veți afla despre următoarele proprietăți CSS multi-column: column-count, column-gap, column-rule-style, column-rule-width, column-rule-color, column-rule, column-span, column-width.
Asistență browser (Browser Support)
CSS Creează mai multe coloane (CSS Create Multiple Columns)
Proprietatea column-count specifică numărul de coloane în care trebuie divizat un element.
Impărțirea textului din elementul <div> în 3 coloane.
CSS Specificați decalajul dintre coloane (CSS Specify the Gap Between Columns)
Proprietatea column-gap specifică decalajul dintre coloane.
Specifică o distanță de 40 de pixeli între coloane.
CSS Reguli coloane (CSS Column Rules)
Proprietatea column-rule-style specifică stilul regulii dintre coloane.
Proprietatea column-rule-width specifică lățimea regulii între coloane.
Proprietatea column-rule-color specifică culoarea regulii dintre coloane.
Proprietatea column-rule este o proprietate shorthand pentru setarea tuturor proprietăților column-rule- * de mai sus.
Stabilre lățimea, stilul și culoarea (width, style, color) regulii între coloane.
Specificați câte coloane ar trebui să se întindă (Specify How Many Columns an Element Should Span)
Proprietatea column-span specifică câte coloane ar trebui să se întindă (span) între un element.
Următorul exemplu specifică faptul că elementul <h2> ar trebui să se întindă (span) pe toate coloanele.
Specificați Lățimea coloanei (Specify The Column Width)
Proprietatea coloană-lățime specifică o lățime sugerată, optimă pentru coloane.
Specifică faptul că lățimea optimă sugerată pentru coloane ar trebui să fie de 100px.
Proprietăți CSS Multi-columns
column-count - Specifică numărul de coloane în care trebuie divizat un element
column-fill - Specifică modul de completare a coloanelor
column-gap - Specifică decalajul dintre coloane
column-rule - O proprietate shorthand pentru setarea tuturor proprietăților column-rule- *
column-rule-color - Specifică culoarea regulii dintre coloane
column-rule-style - Specifică stilul regulii dintre coloane
column-rule-width - Specifică lățimea regulii dintre coloane
column-span - Specifică câte coloane ar trebui să se întindă pe un element
column-width - Specifică o lățime sugerată, optimă pentru coloane
columns - O proprietate shorthand pentru setarea lățimii coloanei și a numărului de coloane

 

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 Flexbox

CSS Flexbox
CSS Modulul Flexbox Layout (CSS Flexbox Layout Module)
Înainte de modulul Layout Flexbox, existau patru moduri de aspect:
Block, pentru secțiunile dintr-o pagină web
Inline, pentru text
Table, pentru date în două dimensiuni ale tabelului
Positioned, pentru poziția explicită a unui element
Flexible Box Layout Module, face mai ușoară proiectarea unei structuri flexibile layout responsive fără a folosi float sau poziționare (positioning).
Asistență browser(Browser Support)
Proprietățilie flexbox sunt acceptate în toate browserele moderne.
Elemente Flexbox (Flexbox Elements)
Pentru a începe să utilizați modelul Flexbox, trebuie să definiți mai întâi un recipient flex (flex container).
Elementul de mai sus reprezintă un recipient flex (flex container) (zona albastră) cu trei elemente flexibile.
Un container flex cu trei articole flexibile.
O dispunere flexibilă (Flexible Layout) trebuie să aibă un element părinte cu proprietatea de afișare setată la flex.
Elementele directe ale copilului ale containerului flexibil devin automat elemente flexibile.
Proprietățiile containerului flex sunt: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content.
Proprietatea flex-direction
Proprietatea flex-direction definește în ce direcție containerul dorește să stiveze elementele flex.
 "flex-direction: column;" stivuiește elementele flexate vertical (de sus în jos).
Valoarea coloanei (column) stochează vertical elementele flex (de sus în jos).
Valoarea coloană-inversă (column-reverse) stochează vertical elementele flex (dar de jos în sus).
Valoarea row-reverse stochează elementele flexate pe orizontală (dar de la dreapta la stânga).
Proprietatea flex-wrap specifică dacă elementele flex trebuie să fie wrap sau nu.
Valoarea wrap specifică faptul că elementele flex se vor wrap dacă este necesar.
Valoarea nowrap specifică faptul că elementele flex nu se vor wrap (aceasta este implicită).
Valoarea wrap-reverse specifică faptul că elementele flexibile se vor wrap dacă este necesar, în ordine inversă.
Proprietatea flex-flow este o proprietate shorthand pentru setarea proprietăților flex-direction și flex-wrap.
Proprietatea justify-content este utilizată pentru alinierea elementelor flex
Valoarea center aliniază elementele flex în centrul containerului
Valoarea flex-start aliniază elementele flex la începutul containerului (implicit)
Valoarea flex-end aliniază elementele flex la sfârșitul containerului
Valoarea space-around afișează elementele flex cu spațiu înainte, între și după linii (before, between și after)
Valoarea space-between afișează elementele flexibile cu spațiu între linii
Proprietatea align-items este utilizată pentru alinierea elementelor flexate pe verticală.
Utilizăm un container înalt de 200 de pixeli, pentru a demonstra mai bine proprietatea align-items.
Valoarea center aliniază elementele flex din mijlocul containerului.
Valoarea flex-start aliniază elementele flex din partea de sus a containerului.
Valoarea flex-end aliniază elementele flex din partea de jos a containerului.
Valoarea stretch întinde elementele flex pentru a umple containerul (aceasta este implicit).
Valoarea baseline aliniază elementele flex, cum ar fi alinierea lor de bază.
Proprietatea align-content este utilizată pentru a alinia liniile flex.
În aceste exemple, utilizăm un container înalt de 600 de pixeli, cu proprietatea flex-wrap setată pentru a wrapa, pentru a demonstra mai bine proprietatea align-content.
Valoarea space-between afișează liniile flexate cu spațiu egal între ele.
Valoarea space-around afișează liniile flexate cu spațiu înainte, între și după ele.
Valoarea stretch întinde liniile flex pentru a ocupa spațiul rămas (acesta este implicit).
Valoarea center afișează liniile de flexare din mijlocul containerului.
Valoarea flex-start afișează liniile flex la începutul containerului.
Valoarea flex-end afișează liniile de flex la sfârșitul containerului.
Centrare perfectă
În următorul exemplu, vom rezolva o problemă de stil foarte comună: centrarea perfectă (perfect centering).
Setați atât proprietățiile justify-content, cât și align-items in centru, iar elementul flex va fi perfect centrat.
Child Elements (Items)
Elementele child directe ale unui recipient flex devin automat elemente flexibile (flexibile).
Proprietățiile elementului flex: order, flex-grow, flex-shrink, flex-basis, flex, align-self.
Proprietatea order specifică ordinea elementelor flex.
Primul element flex din cod nu trebuie să apară ca primul element din layout.
Valoarea order trebuie să fie un număr, valoarea implicită este 0.
Proprietatea order poate modifica ordinea articolelor flex.
Proprietatea flex-grow specifică cât de mult va crește un element flex în raport cu restul elementelor flex.
Valoarea flex-grow trebuie să fie un număr, valoarea implicită este 0.
Faceți ca cel de-al treilea element flex să crească de opt ori mai rapid decât celelalte elemente flex.
Proprietatea flex-shrink specifică cât de mult se va micsora un element flex în raport cu restul elementelor flex.
Valoarea flex-shrink trebuie să fie un număr, valoarea implicită este 1.
Nu lăsați al treilea element flex să se micșoreze la fel de mult decât celelalte elemente flex.
Proprietatea flex-basis specifică lungimea inițială a unui element flex.
Proprietatea flex este o proprietate shorthand pentru proprietățiile flex-grow, flex-shrink și flex-basis.
Proprietatea align-self specifică alinierea pentru elementul selectat în interiorul containerului flexibil.
Proprietatea align-self înlocuiește alinierea setată implicit de proprietatea align-items a containerului.
Galerie de imagini responsive folosind Flexbox
Utilizați flexbox pentru a crea o galerie de imagini responsive care variază între patru, două sau imagini cu lățime completă, în funcție de dimensiunea ecranului.
Website responsive folosind Flexbox
Utilizați flexbox pentru a crea un responsive website, care conține o bară de navigare flexibilă și conținut flexibil.
Proprietăți CSS Flexbox
display - Specifică tipul de box folosit pentru un element HTML
flex-direction - Specifică direcția articolelor flexibile din interiorul unui recipient flex
justify-content - Aliniază orizontal elementele flex atunci când elementele nu folosesc tot spațiul disponibil pe axa principală
align-items - Aliniază vertical elementele flex atunci când elementele nu folosesc tot spațiul disponibil pe axa transversală
flex-wrap - Specifică dacă elementele flexate trebuie să se înfășoare (wrap) sau nu, dacă nu există suficient loc pentru ele pe o singură linie flex
align-content - Modifică comportamentul proprietății flex-wrap. Este similar cu align-items, dar în loc să alinieze elementele flex, aliniază liniile flex
flex-flow - O proprietate shorthand pentru flex-direction și flex-wrap
order - Specifică ordinea unui articol flexibil în raport cu restul elementelor flexibile din interiorul aceluiași recipient
align-self - Folosit pe articolele flex. Înlocuiește proprietatea align-items
flex - O proprietate shorthand pentru proprietățile flex-grow, flex-shrink și flex-basis

CSS Interogări media - Exemple

Interogări media CSS - exemple
Interogările media sunt o tehnică populară pentru livrarea unei foi de stil adaptate diferitelor dispozitive. Pentru a demonstra un exemplu simplu, putem schimba culoarea de fundal pentru diferite dispozitive.
Interogări media pentru meniuri
În acest exemplu, folosim interogări media pentru a crea un meniu de navigare responsive, care variază în ceea ce privește designul pe diferite dimensiuni de ecran.
Interogări media pentru coloane
O utilizare obișnuită a interogărilor media este de a crea un aspect flexibil (flexible layout). În acest exemplu, creem un aspect (layout) care variază între patru, două și full-width coloane, în funcție de diferitele dimensiuni ale ecranului.
Un mod mai modern de a crea column layouts este să folosiți CSS Flexbox. Cu toate acestea, nu este acceptat în Internet Explorer 10 și versiunile anterioare. Dacă aveți nevoie de asistență IE6-10, folosiți floats.
Ascundeți elementele cu interogări media
O altă utilizare obișnuită a interogărilor media este de a ascunde elemente pe diferite dimensiuni ale ecranului.
Modificați dimensiunea fontului cu interogări media
De asemenea, puteți utiliza interogări media pentru a modifica dimensiunea fontului (font size) unui element pe diferite dimensiuni ale ecranului.
Galerie de imagini flexibile
Folosim interogări media împreună cu flexbox pentru a crea o galerie de imagini responsive.
Site web flexibil
Utilizăm interogări media împreună cu flexbox pentru a crea un site web responsive, care conține o bară de navigare flexibilă și conținut flexibil.
Orientare: Portret / Peisaj
Interogările media pot fi, de asemenea, utilizate pentru a schimba aspectul (layout) unei pagini, în funcție de orientarea browserului.
Puteți avea un set de proprietăți CSS care se vor aplica numai atunci când fereastra browserului este mai largă decât înălțimea sa, o așa-numită orientare „Peisaj” (Landscape):
Utilizați o culoare de fundal lightblue (background color) dacă orientarea este în modul peisaj (landscape):
Folosind o valoare suplimentară: adăugăm o interogare media suplimentară la cea existentă folosind virgulă (aceasta se va comporta ca un operator OR).

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.

CSS Responsive Web Design - Interogări media

Responsive Web Design - Interogări media
Ce este o interogare media?
Interogarea media este o tehnică CSS introdusă în CSS3.
Utilizează regula @media pentru a include un block de proprietăți CSS numai dacă o anumită condiție este adevărată.
Dacă fereastra browserului este de 600px sau mai mică, culoarea de fundal (background color) va fi deschisă la culoare (lightblue).
Adăugați un Breakpoint
Mai devreme în acest tutorial am făcut o pagină web cu rânduri și coloane și a fost responzive, dar nu arăta bine pe un ecran mic.
Interogările media (media queries) vă pot ajuta. Putem adăuga un punct de break (breakpoint) unde anumite părți ale designelui se vor comporta diferit pe fiecare parte a punctului de break (breakpoint).
Utilizați o interogare media (media queries) pentru a adăuga un punct de break (breakpoint) la 768px:
Când ecranul (fereastra browserului) devine mai mic decât 768px, fiecare coloană ar trebui să aibă o lățime de 100%.
Întotdeauna design pentru mobil întâi
Mobile First înseamnă proiectare pentru mobil înainte de proiectare pentru desktop sau orice alt dispozitiv (Acest lucru va face afișarea paginii mai rapidă pe dispozitive mai mici).
Aceasta înseamnă că trebuie să facem unele modificări în CSS-ul nostru.
În loc să schimbăm stilurile când lățimea devine mai mică de 768px, ar trebui să schimbăm designul când lățimea devine mai mare de 768px. Acest lucru va face în primul rând proiectarea noastră mobilă.
Puteți adăuga câte breakpoints doriți.
Vom insera, de asemenea, un punct de break (breakpoint) între tablete și telefoane mobile.
Facem acest lucru prin adăugarea a încă o interogare media (media query ) (la 600px) și un set de clase noi pentru dispozitive mai mari de 600px (dar mai mici decât 768px):
Rețineți că cele două seturi de clase sunt aproape identice, singura diferență este denumirea (col- și col-s-).
Breakpoints tipice dispozitivului (Typical Device Breakpoints)
Există tone de ecrane și dispozitive cu înălțimi și lățimi diferite, așa că este greu să creezi un punct de break (breakpoint) exact pentru fiecare dispozitiv. Pentru a menține lucrurile simple, puteți viza cinci grupuri.
Orientare: Portret / Peisaj (Landscape)
Interogările media (media queries) pot fi, de asemenea, utilizate pentru a schimba aspectul (layout) unei pagini, în funcție de orientarea browserului.
Puteți avea un set de proprietăți CSS care se vor aplica numai atunci când fereastra browserului este mai largă decât înălțimea sa, o așa-numită orientare „Peisaj” (Lanscape):
Pagina web va avea un fundal luminos (lightblue background) dacă orientarea este în modul peisaj (lanscape).
Ascundeți elementele cu interogări media (Hide Elements With Media Queries)
O altă utilizare obișnuită a interogărilor media (media queries) este de a ascunde elemente pe dimensiuni diferite de ecran.
Modificați dimensiunea fontului cu interogări media (Change Font Size With Media Queries)
De asemenea, puteți utiliza interogări media (media queries) pentru a modifica dimensiunea fontului unui element pe diferite dimensiuni ale ecranului.

CSS Grid Introducere

CSS Grid Layout Module
Grid Layout
CSS Grid Layout Module oferă un sistem de dispunere bazat pe grilă, cu rânduri și coloane, ceea ce facilitează proiectarea paginilor web fără a fi nevoie să folosiți plutitoare și poziționare (floats și positioning).
Asistență browser(Browser Support)
Proprietățiile grid sunt acceptate în toate browserele moderne.
Elemente grid
Un layout grid este format dintr-un element părinte, cu unul sau mai multe elemente copil.
Proprietatea display
Un element HTML devine un container grid atunci când proprietatea sa display este setată pe grid sau în inline-grid.
Toți copiii direcți (direct children) ai containerului grid devin automat elemente grid.
Coloane Grid (Grid Columns)
Liniile verticale ale elementelor grid se numesc coloane (columns).
Rânduri Grid (Grid Rows)
Liniile orizontale ale elementelor grid se numesc rânduri (rows).
Grid Gaps
Spațiile dintre fiecare coloană/rând (column/row) se numesc gaps.
Puteți ajusta dimensiunea gapului folosind una dintre următoarele proprietăți:grid-column-gap, grid-row-gap, grid-gap.
Proprietatea grid-column-gap stabilește diferența dintre coloane.
Proprietatea grid-row-gap stabilește diferența dintre rânduri.
Proprietatea grid-gap este o proprietate shorthand pentru proprietățile grid-column-gap și grid-row-gap.
Proprietatea grid-gap poate fi, de asemenea, folosită pentru a seta atât row gap cât și column gap într-o singură valoare.
Linii Grid (Grid Lines)
Liniile dintre coloane se numesc linii coloană (column lines).
Liniile dintre rânduri se numesc linii rând (row lines).
Consultați numerele de linie atunci când introduceți un element grid într-un container grid.
Plasați un element grid la linia coloanei 1 și lăsați-o să se încheie pe linia 3 a coloanei.
Plasați un element grid la linia 1 de rând și lăsați-o să se încheie pe linia 3 de rând.
 

SQL Sintaxă

Sintaxa SQL
Tabele de baze de date (Database Tables)
O bază de date conține cel mai adesea una sau mai multe tabele. Fiecare tabel este identificat printr-un nume (de exemplu, „Clienți” sau „Comenzi”). Tabelele conțin înregistrări (rânduri) cu date.
În acest tutorial vom folosi bine-cunoscuta bază de date de exemplu Northwind (inclusă în MS Access și MS SQL Server).
Selecție din tabelul „Clienți”.
Tabelul conține cinci înregistrări (una pentru fiecare client) și șapte coloane (CustomerID, CustomerName, ContactName, Address, City, PostalCode și Country).
Instrucțiuni SQL
Majoritatea acțiunilor pe care trebuie să le efectuați într-o bază de date sunt efectuate cu instrucțiuni SQL.
Ține minte că...
Cuvintele cheie SQL NU sunt sensibile la majuscule și minuscule (nu sunt case sensitive): selectarea este identică cu SELECT
În acest tutorial vom scrie toate cuvintele cheie SQL cu majuscule.
Semicolon după Instrucțiuni SQL?
Unele sisteme de baze de date necesită punct și virgulă la sfârșitul fiecărei instrucțiuni SQL.
Semicolon este modul standard de a separa fiecare instrucțiune SQL în sistemele de baze de date care permit executarea a mai mult de o instrucțiune SQL în același apel către server.
În acest tutorial, vom folosi punct și virgulă la sfârșitul fiecărei instrucțiuni SQL.
Unele dintre cele mai importante comenzi SQL
SELECT - extrage date dintr-o bază de date
UPDATE - actualizează datele dintr-o bază de date
DELETE - șterge datele dintr-o bază de date
INSERT INTO - introduce date noi într-o bază de date
CREATE DATABASE - creează o nouă bază de date
ALTER DATABASE - modifică o bază de date
CREATE TABLE - creează un nou tabel
ALTER TABLE - modifică un tabel
DROP TABLE - șterge un tabel
CREATE INDEX - creează un index (cheie de căutare)
DROP INDEX - șterge un index
 

PHP Variabile

Variabile PHP
Variabilele sunt „containere” (containers) pentru stocarea informațiilor.
Crearea (declararea) variabilelor PHP
În PHP, o variabilă începe cu semnul $, urmată de numele variabilei:
<?php
$txt = "Hello world!";
$x = 5;
$y = 10.5;
?>
După executarea declarațiilor de mai sus, variabila $txt va păstra valoarea "Hello world!", variabila $x va deține valoarea 5, iar variabila $y va păstra valoarea 10.5.
Când atribuiți o valoare text unei variabile, puneți ghilimele în jurul valorii.
Spre deosebire de alte limbaje de programare, PHP nu are nicio comandă pentru declararea unei variabile. Este creat în momentul în care i-ați atribuit prima dată o valoare.
Gândiți-vă la variabile ca la containere pentru stocarea datelor (containers for storing data).
Variabile PHP
O variabilă poate avea un nume scurt (cum ar fi x și y) sau un nume mai descriptiv (age, carname, total_volum).
Reguli pentru variabilele PHP:
O variabilă începe cu semnul $, urmată de numele variabilei.
Un nume de variabilă trebuie să înceapă cu o literă sau un caracter de subliniere.
Un nume de variabilă nu poate începe cu un număr.
Un nume de variabilă nu poate conține decât caractere alfa-numerice și underscores (A-z, 0-9 și _).
Denumirile variabilelor sunt case-sensitive ($age și $AGE sunt două variabile diferite).
Amintiți-vă că numele variabilei PHP sunt case-sensitive!
Variabile de ieșire (Output Variables)
Declarația PHP echo este adesea folosită pentru a afișa (output) date pe ecran.
Afișare (output) text și o variabilă:
<?php
$txt = "lectii-virtuale.ro";
echo "Îmi place $txt!";
?>
Următorul exemplu va produce aceeași ieșire (output) ca exemplul de mai sus:
<?php
$txt = "lectii-virtuale.ro";
echo "Îmi place " . $txt . "!";
?>
Următorul exemplu va produce suma a două variabile:
<?php
$x = 5;
$y = 4;
echo $x + $y;
?>
PHP este un limbaj tiparit mai puțin
În exemplul precedent, observați că nu trebuie să îi spunem PHP-ului ce tip de dată (data type) este variabila.
PHP asociază automat un tip de date (data type) variabilei, în funcție de valoarea acesteia. Deoarece tipurile de date  (data types) nu sunt setate într-un sens strict, puteți face lucruri precum adăugarea unui șir la un număr întreg fără a provoca o eroare.
În PHP 7, au fost adăugate declarații de tip (type declarations). Aceasta oferă o opțiune de a specifica tipul de date (data type) preconizat la declararea unei funcții și, activând cerința strictă, va arunca o „eroare fatală” (Fatal Error) pe o nepotrivire de tip (type mismatch).
Veți afla mai multe despre cerințele stricte și non-stricte și declarațiile de tip de date din capitolul Funcții PHP.
Domeniul variabilelor PHP
În PHP, variabilele pot fi declarate oriunde în script.
Domeniul de aplicare al unei variabile este partea scriptului unde variabila poate fi referită / folosită (referenced/used).
PHP are trei domenii diferite de variabile : local, global, static.
Domeniul global și local
O variabilă declarată în afara unei funcții are un DOMENIU GLOBAL (GLOBAL SCOPE) și poate fi accesată numai în afara unei funcții:
Variabilă cu sfera globală:
<?php
$x = 5; // sfera globală
function myTest() {
    // folosirea x în interiorul acestei funcții va genera o eroare
    echo "<p>Variabila x în interiorul funcției este: $x</p>";
}
myTest();
echo "<p>Variabila x din exteriorul funcției este : $x</p>";
?>
O variabilă declarată în cadrul unei funcții are un SCOP LOCAL și poate fi accesată numai în cadrul acestei funcții:
Variabilă cu scop local:
<?php
function myTest() {
    $x = 5; // scop local
    echo "<p>Variabila x din interiorul funcției este: $x</p>";
}
myTest();
//  folosirea x în afara funcției va genera o eroare
echo "<p>Variabila x din afara funcției este: $x</p>";
?>
Puteți avea variabile locale cu același nume în funcții diferite, deoarece variabilele locale sunt recunoscute doar de funcția în care sunt declarate.
Cuvântul cheie global (global keyword) este utilizat pentru a accesa o variabilă globală dintr-o funcție.
Pentru a face acest lucru, utilizați înainte de variabile (în interiorul funcției) cuvântul cheie global (global keyword):
<?php
$x = 5;
$y = 10;
function myTest() {
    global $x, $y;
    $y = $x + $y;
}
myTest();
echo $y; // outputs 15 (15  ieșiri)
?>
PHP stochează de asemenea toate variabilele globale într-un tablou numit $GLOBALS [index]. Indicele conține numele variabilei. Acest tablou este de asemenea accesibil din funcții și poate fi utilizat pentru a actualiza direct variabilele globale.
Exemplul de mai sus poate fi rescris astfel:
<?php
$x = 5;
$y = 10;
function myTest() {
    $GLOBALS['y'] = $GLOBALS['x'] + $GLOBALS['y'];
}
myTest();
echo $y; // outputs 15 (15 ieșiri)
?>
PHP Cuvântul cheie static
În mod normal, când o funcție este finalizată / executată (completed/executed), toate variabilele sale sunt șterse. Cu toate acestea, uneori dorim ca o variabilă locală să NU fie ștearsă. Avem nevoie de asta pentru un alt job.
Pentru a face acest lucru, utilizați cuvântul cheie static (static keyword) când declarați pentru prima dată variabila:
<?php
function myTest() {
    static $x = 0;
    echo $x;
    $x++;
}
myTest();
myTest();
myTest();
?>
Apoi, de fiecare dată când se apelează funcția, acea variabilă va avea în continuare informațiile pe care le conține din ultima dată când a fost apelată funcția.
Pentru funcție, variabila este încă locală.

PHP Tipuri de date

Tipuri de date PHP(PHP Data Types)
Variabilele pot stoca date de diferite tipuri și diferite tipuri de date pot face lucruri diferite.
PHP acceptă următoarele tipuri de date: String, Integer, Float (floating point numbers - numit și dublu), Boolean, Array, Object, NULL, Resource.
PHP String
Un string este o secvență de caractere, cum ar fi „Hello world!”.
Un string poate fi orice text din ghilimele. Puteți utiliza ghilimele simple sau duble:
<?php
$x = "Hello world!";
$y = 'Hello world!';
echo $x;
echo "<br>";
echo $y;
?>
PHP Integer
Un tip de date întreg (integer data type) este un număr non-zecimal cuprins între -2 147.483.648 și 2.147.483.647.
Reguli pentru numere întregi (integers):
Un număr întreg (integer) trebuie să aibă cel puțin o cifră
Un număr întreg (integer) nu trebuie să aibă o zecimală
Un număr întreg (integer) poate fi pozitiv sau negativ
Numerele întregi (integers) pot fi specificate în: zecimal (baza 10), hexazecimal (baza 16), octal (baza 8) sau notare binară (baza 2)
În următorul exemplu $ x este un număr întreg (integer). Funcția PHP var_dump() returnează tipul (data type) și valoarea datelor:
<?php
$x = 5985;
var_dump($x);
?>
PHP Float
Un float (număr flotant) este un număr cu punct zecimal sau un număr în formă exponențială.
În exemplul următor $x este un float. Funcția PHP var_dump() returnează tipul (data type) și valoarea datelor:
<?php
$x = 10.365;
var_dump($x);
?>
PHP Boolean
Un boolean reprezintă două stări posibile: TRUE sau FALSE.
$x = true;
$y = false;
Booleans sunt adesea folosiți în testarea condiționată. Veți afla mai multe despre testarea condiționată într-un capitol ulterior al acestui tutorial.
PHP Array
Un array (tablou) stochează mai multe valori într-o singură variabilă.
În următorul exemplu $cars este un array (tablou) . Funcția PHP var_dump() returnează tipul (data type) și valoarea datelor:
<?php
$cars = array("Volvo","BMW","Toyota");
var_dump($cars);
?>
PHP Object
Un object (obiect) este un tip de date (data type) care stochează date și informații despre modul de procesare a acestor date.
În PHP, un object (obiect) trebuie declarat explicit.
Mai întâi trebuie să declaram o clasă de obiect (class of object). Pentru aceasta, folosim cuvântul cheie class (class keyword). O clasă (class) este o structură care poate conține proprietăți și metode:
<?php
class Car {
    function Car() {
        $this->model = "VW";
    }
}
// creați un obiect (object)
$herbie = new Car();
// arată proprietățiile obiectului (object)
echo $herbie->model;
?>
PHP NULL Value
Null este un tip de date special care poate avea o singură valoare: NULL.
O variabilă de tip de date (data type) NULL este o variabilă care nu are nicio valoare atribuită.
Dacă o variabilă este creată fără valoare, i se atribuie automat o valoare de NULL.
Variabilele pot fi de asemenea golite prin setarea valorii la NULL:
<?php
$x = "Hello world!";
$x = null;
var_dump($x);
?>
PHP Resource
Tipul resursei speciale nu este un tip de date (data type) real. Este stocarea unei referințe la funcții și resurse externe PHP.
Un exemplu obișnuit de utilizare a tipului de date resurse (resource data type) este un apel la baza de date.

PHP Funcții

Funcții PHP
Puterea reală a PHP provine din funcțiile sale.
PHP are peste 1000 de funcții încorporate și, în plus, vă puteți crea propriile funcții personalizate.
Funcții încorporate în PHP (PHP Built-in Functions)
PHP are peste 1000 de funcții încorporate (built-in) care pot fi apelate direct, dintr-un script, pentru a efectua o sarcină specifică.
Funcții definite de utilizator în PHP
Pe lângă funcțiile PHP încorporate (built-in), este posibil să vă creați propriile funcții.
O funcție este un block de declarații care poate fi utilizat în mod repetat într-un program.
O funcție nu se va executa automat atunci când se încarcă o pagină.
O funcție va fi executată de un apel către funcție.
Creați o funcție definită de utilizator în PHP
O declarație de funcție definită de utilizator (user-defined function) începe cu funcția cuvânt:
Sintaxă
function functionName() {
    cod de executat;
}
Un nume de funcție trebuie să înceapă cu o literă sau o subliniere (underscore).
Numele funcțiilor NU sunt case-sensitive.
Dați funcției un nume care să reflecte ceea ce face funcția!
În exemplul de mai jos, creem o funcție numită "writeMsg()". Paranteza ondulată de deschidere ({) indică începutul codului funcției, iar paranteza ondulată de închidere (}) indică sfârșitul funcției. Funcția întoarce (outputs ) „Hello world!”. Pentru a apela funcția, trebuie doar să scrieți numele ei urmată de paranteze ():
<?php
function writeMsg() {
    echo "Hello world!";
}
writeMsg(); // apelați funcția
?>
Argumentele funcției PHP
Informațiile pot fi transmise funcțiilor prin argumente. Un argument este la fel ca o variabilă.
Argumentele sunt specificate după numele funcției, în interiorul parantezelor. Puteți adăuga oricâte argumente doriți, doar separați-le cu virgulă.
Următorul exemplu are o funcție cu un argument ($fname). Când se numește funcția familyName(), de asemenea, trecem de-a lungul unui nume (de exemplu, Ionescu) și numele este folosit în interiorul funcției, care produce (outputs) mai multe prenume diferite, dar un nume egal:
<?php
function familyName($fname) {
    echo "$fname Refsnes.<br>";
}
familyName("Ionescu");
familyName("Popescu");
familyName("Georgescu");
familyName("Filipescu");
familyName("Zinescu");
?>
Următorul exemplu are o funcție cu două argumente ($fname și $year):
<?php
function familyName($fname, $year) {
    echo "$fname Refsnes.  Născut în $year <br>";
}
familyName("Ionescu", "1975");
familyName("Popescu", "1978");
familyName("Zinescu", "1983");
?>
PHP este un limbaj tiparit mai puțin (PHP is a Loosely Typed Language)
În exemplul precedent, observați că nu trebuie să spunem PHP-ului ce tip de date (data type) este variabila.
PHP asociază automat un tip de date (data type) variabilei, în funcție de valoarea acesteia. Deoarece tipurile de date (data types) nu sunt setate într-un sens strict, puteți face lucruri precum adăugarea unui șir (string) la un număr întreg (integer) fără a provoca o eroare.
În PHP 7, au fost adăugate declarații de tip (type declarations). Aceasta ne oferă opțiunea de a specifica tipul de date (data type) preconizat la declararea unei funcții, iar prin adăugarea declarației strict, va arunca o „Fatal Error” dacă nu există o nepotrivire a tipului de date (data type).
În exemplul următor, încercăm să trimitem atât un număr cât și un șir (string) la funcție fără a folosi o declarația strict:
<?php
function addNumbers(int $a, int $b) {
    return $a + $b;
}
echo addNumbers(5, "5 days");
// deoarece NU este activat strict, „5 days” este schimbat în int(5) și va întoarce 10
?>
Pentru a specifica strict trebuie să setăm declarația (strict_types=1);. Aceasta trebuie să fie chiar în prima linie a fișierului PHP.
În exemplul următor încercăm să trimitem atât un număr cât și un șir (string) la funcție, dar aici am adăugat declarația strict:
<?php declare(strict_types=1); // cerință strictă
function addNumbers(int $a, int $b) {
    return $a + $b;
}
echo addNumbers(5, "5 days");
// din moment ce strict este activat și „5 days” nu este un număr întreg (integer), va fi afișată o eroare
?>
PHP valoarea argumentului default (PHP Default Argument Value)
Următorul exemplu arată cum se utilizează un parametru default (parametru impicit). Dacă numim funcția setHeight() fără argumente, aceasta are valoarea default (valoarea implicită) ca argument:
<?php declare(strict_types=1); // strict requirement
function setHeight(int $minheight = 50) {
    echo "Înălțimea este: $minheight <br>";
}
setHeight(350);
setHeight(); // vom folosi valoarea default (valoarea implicită) of 50
setHeight(135);
setHeight(80);
?>
Funcții PHP - Returnarea valorilor
Pentru a permite unei funcții să returneze o valoare, utilizați instrucțiunea return:
<?php declare(strict_types=1); // cerință strictă
function sum(int $x, int $y) {
    $z = $x + $y;
    return $z;
}
echo "5 + 10 = " . sum(5, 10) . "<br>";
echo "7 + 13 = " . sum(7, 13) . "<br>";
echo "2 + 4 = " . sum(2, 4);
?>
PHP Declarații de tip return (PHP Return Type Declarations)
PHP 7 acceptă, de asemenea, declarații de tip (Type Declarations) pentru instrucțiunea return. Ca și în cazul declarației de tip (type declaration) pentru argumentele funcției, activând cerința strictă, va returna o „Fatal Error” ca nepotrivire de tip (type mismatch).
Pentru a declara un tip (type) pentru funcția returnată, adăugați două puncte (:) și tipul (type) chiar înainte de paranteza ondulată de deschidere ({) la declararea funcției.
În următorul exemplu, specificăm tipul return (return type) pentru funcție:
<?php declare(strict_types=1); // cerință strictă
function addNumbers(float $a, float $b) : float {
    return $a + $b;
}
echo addNumbers(1.2, 5.2);
?>
Puteți specifica un tip de returnare (return type) diferit de cel al argumentelor, dar asigurați-vă că returnarea este cea corectă:
<?php declare(strict_types=1); // cerință strictă
function addNumbers(float $a, float $b) : int {
    return (int)($a + $b);
}
echo addNumbers(1.2, 5.2);
?>

PHP Data și Ora

PHP Data și ora (PHP Date and Time)
Funcția PHP date() este utilizată pentru formatarea unei date și/sau a unei ore.
Funcția PHP date()
Funcția PHP date() formatează un marcaj de timp (timestamp) într-o dată și o oră mai lizibile.
Sintaxă
date(format,timestamp)
format - Obligatoriu. Specifică formatul de timp (timestamp)
timestamp - Opțional. Specifică un marcaj de timp (timestamp). Valoarea implicită (default) o reprezintă data și ora curente
Un marcaj de timp (timestamp) este o succesiune de caractere, care indică data și/sau ora la care a avut loc un anumit eveniment.
Obțineți o dată
Parametrul format necesar al funcției date() specifică modul de formatare al datei (sau orei).
Iată câteva caractere care sunt utilizate frecvent pentru date:
d - Reprezintă ziua lunii (01 - 31)
m - Reprezintă o lună (de la 01 la 12)
Y - Reprezintă un an (în patru cifre)
l (lowercase 'L') - Reprezintă ziua săptămânii
Alte caractere, cum ar fi „/”, „.” sau „-” pot fi de asemenea inserate între caractere pentru a adăuga o formatare suplimentară.
Exemplul de mai jos formatează data de astăzi în trei moduri diferite:
<?php
echo "Astăzi este " . date("Y/m/d") . "<br>";
echo "Astăzi este " . date("Y.m.d") . "<br>";
echo "Astăzi este " . date("Y-m-d") . "<br>";
echo "Astăzi este " . date("l");
?>
Obțineți o oră

Iată câteva caractere care sunt utilizate frecvent pentru perioade:
H - format de 24 de ore al unei ore (de la 00 la 23)
h - format de 12 ore al unei ore cu zerouri în față (de la 01 la 12)
i - Minute cu zerouri în față (00-59)
s - Secunde cu zerouri în față (de la 00 la 59)
a - Lowercase Ante meridian și Post meridian (am sau pm)
Exemplul de mai jos emite ora curentă în formatul specificat:
<?php
echo "Ora este " . date("h:i:sa");
?>
Rețineți că funcția PHP date() va returna data/ora curentă a serverului!
Obțineți-vă fusul orar (timezone)
Dacă timpul de întoarcere din cod nu este corect, cel mai probabil este pentru că serverul dvs. se află într-o altă țară sau este configurat pentru un alt fus orar (timezone).
Deci, dacă aveți nevoie de o oră corectă în funcție de o anumită locație, puteți seta fusul orar (timezone) pe care doriți să îl utilizați.
Exemplul de mai jos stabilește fusul orar (timezone) pe „America/New_York”, apoi emite ora curentă în formatul specificat:
<?php
date_default_timezone_set("America/New_York");
echo "Este ora " . date("h:i:sa");
?>
Creați o dată cu mktime()
Parametrul opțional timestamp din funcția date() specifică un marcaj de timp (timestamp). Dacă este omisă, vor fi utilizate data și ora curentă (ca în exemplele de mai sus).
Funcția PHP mktime() întoarce marcajul de timp (timestamp) Unix pentru o dată. Marcajul de timp Unix (timestamp) conține numărul de secunde între Unix Epoch (1 ianuarie 1970 00:00:00 GMT) și ora specificată.
Sintaxă
mktime(hour, minute, second, month, day, year)
Exemplul de mai jos creează o dată și o oră cu funcția date() dintr-un număr de parametri în funcția mktime():
<?php
$d=mktime(11, 14, 54, 8, 12, 2014);
echo "Data creerii este " . date("Y-m-d h:i:sa", $d);
?>
Creați o dată dintr-un șir (string) cu strtotime()
Funcția PHP strtotime() este utilizată pentru a converti un șir de date (date string) care poate fi citit de om într-un marcaj de timp (timestamp) Unix (numărul de secunde de la 1 ianuarie 1970, 00:00:00 GMT).
Sintaxă
strtotime(time, now)
Exemplul de mai jos creează o dată și o oră din funcția strtotime():
<?php
$d=strtotime("10:30pm April 15 2014");
echo "Data creerii este " . date("Y-m-d h:i:sa", $d);
?>
PHP este destul de inteligent în ceea ce privește conversia unui șir (string) într-o dată, astfel încât să puteți pune diverse valori:
<?php
$d=strtotime("mâine");
echo date("Y-m-d h:i:sa", $d) . "<br>";
$d=strtotime("sâmbăta viitoare");
echo date("Y-m-d h:i:sa", $d) . "<br>";
$d=strtotime("+ 3 luni"");
echo date("Y-m-d h:i:sa", $d) . "<br>";
?>
Cu toate acestea, strtotime() nu este perfect, așa că nu uitați să verificați șirurile (stringurile) pe care le introduceți acolo.
Mai multe exemple de date
Exemplul de mai jos scoate (outputs) datele pentru următoarele șase sâmbete:
<?php
$startdate = strtotime("Sâmbătă");
$enddate = strtotime("+ 6 săptămâni", $startdate);
while ($startdate < $enddate) {
  echo date("M d", $startdate) . "<br>";
  $startdate = strtotime("+ 1 săptămână", $startdate);
}
?>
Exemplul de mai jos afișează numărul de zile până la 4 iulie:
<?php
$d1=strtotime("04 iulie");
$d2=ceil(($d1-time())/60/60/24);
echo "Există " . $d2 ." zile până la 4 iulie.";
?>

PHP Cookies

Cookie-uri PHP (PHP Cookies)
Ce este un Cookie?
Un cookie este adesea folosit pentru a identifica un utilizator. Un cookie este un fișier mic pe care serverul îl încorporează pe computerul utilizatorului. De fiecare dată când același computer solicită o pagină cu un browser, va trimite și cookie-ul. Cu PHP, puteți crea și recupera valorile cookie.
Creați cookie-uri cu PHP
Un cookie este creat cu funcția setcookie().
Sintaxă
setcookie(name, value, expire, path, domain, secure, httponly);
Numai parametrul name este necesar. Toți ceilalți parametrii sunt opționali.
PHP Creare / Recuperare Cookie (PHP Create/Retrieve a Cookie)
Următorul exemplu creează un cookie numit „user” cu valoarea „Ion Popescu”. Cookie-ul va expira după 30 de zile (86400 * 30).
„/” înseamnă că cookie-ul este disponibil pe întregul site web (în caz contrar, selectați directorul preferat).
Vom prelua apoi valoarea „user” cookie-ului (folosind variabila globală $_COOKIE). De asemenea, folosim funcția isset() pentru a afla dacă cookie-ul este setat:
<?php
$cookie_name = "user";
$cookie_value = "Ion Popescu";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1 day
?>
<html>
<body>
<?php
if(!isset($_COOKIE[$cookie_name])) {
    echo "Cookie-ul numit" . $cookie_name . "' nu este setat!";
} else {
    echo "Cookie '" . $cookie_name . "' is set!<br>";
    echo "Valoarea este:" . $_COOKIE[$cookie_name];
}
?>
</body>
</html>
Funcția setcookie() trebuie să apară BEFORE de eticheta (tag) <html>.
Valoarea cookie-ului este codificată în mod automat la trimiterea cookie-ului și automat decodificată atunci când este primită (pentru a preveni codificarea URL-ului, utilizați în schimb setrawcookie()).
Modificați o valoare cookie
Pentru a modifica un cookie, trebuie doar să setați (din nou) modul cookie folosind funcția setcookie():
<?php
$cookie_name = "user";
$cookie_value = "Alex Ionescu";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/");
?>
<html>
<body>
<?php
if(!isset($_COOKIE[$cookie_name])) {
    echo "Cookie-ul nimit'" . $cookie_name . "' nu este setat!";
} else {
    echo "Cookie'" . $cookie_name . "' este setat!<br>";
    echo "Valoarea este:" . $_COOKIE[$cookie_name];
}
?>
</body>
</html>
Ștergeți un cookie
Pentru a șterge un cookie, utilizați funcția setcookie() cu o dată de expirare din trecut:
<?php
// setați data de expirare la o oră în urmă
setcookie("user", "", time() - 3600);
?>
<html>
<body>
<?php
echo "Cookie 'user' este șters.";
?>
</body>
</html>
Verificați dacă cookie-urile sunt activate
Următorul exemplu creează un mic script care verifică dacă cookie-urile sunt activate. Mai întâi, încercați să creați un cookie de testare cu funcția setcookie(), apoi numărați variabila array $_COOKIE:
<?php
setcookie("test_cookie", "test", time() + 3600, '/');
?>
<html>
<body>
<?php
if(count($_COOKIE) > 0) {
    echo "Cookie-urile sunt activate.";
} else {
    echo "Cookie-urile sunt dezactivate.";
}
?>
</body>
</html>

PHP JSON

PHP și JSON
Ce este JSON?
JSON reprezintă o notare a obiectului JavaScript (JavaScript Object Notation) și este o sintaxă pentru stocarea și schimbul de date.
Deoarece formatul JSON este un format bazat pe text (text-based format), acesta poate fi trimis cu ușurință la și de la un server și utilizat ca format de date de orice limbaj de programare.
PHP și JSON
PHP are unele funcții integrate (built-in functions) pentru a gestiona JSON.
În primul rând, vom analiza următoarele două funcții:
json_encode()
json_decode()
PHP - json_encode()
Funcția json_encode() este utilizată pentru a codifica o valoare în formatul JSON.
Acest exemplu arată modul de codificare a unui tablou asociativ (associative array) într-un obiect JSON:
<?php
$age = array("Petre"=>35, "Ion"=>37, "Alex"=>43);
echo json_encode($age);
?>
Acest exemplu arată modul de codificare a unui tablou indexat (indexed array) într-un tablou (array) JSON:
<?php
$cars = array("Volvo", "BMW", "Toyota");
echo json_encode($cars);
?>
PHP - json_decode()
Funcția json_decode() este utilizată pentru a decoda un obiect JSON (JSON object) într-un obiect PHP (PHP object) sau într-un tablou asociativ (associative array).
Acest exemplu decodează datele JSON (JSON data) într-un obiect PHP (PHP object):
<?php
$jsonobj = '{"Petre":35,"Ion":37,"Alex":43}';
var_dump(json_decode($jsonobj));
?>
Funcția json_decode() returnează în mod implicit un obiect. Funcția json_decode() are un al doilea parametru, iar atunci când este setată la adevărat (true), obiectele JSON (JSON objects) sunt decodate în tablele asociative (associative array).
Acest exemplu decodifică datele JSON (JSON data) într-un tablou asociativ PHP (PHP associative array):
<?php
$jsonobj = '{"Petre":35,"Ion":37,"Alex":43}';
var_dump(json_decode($jsonobj, true));
?>
PHP - Accesarea valorilor decodate
Iată două exemple despre cum să accesați valorile decodate dintr-un obiect și dintr-un tablou asociativ (associative array):
Acest exemplu arată cum să accesați valorile dintr-un obiect PHP (PHP object):
<?php
$jsonobj = '{"Petre":35,"Ion":37,"Alex":43}';
$obj = json_decode($jsonobj);
echo $obj->Petre;
echo $obj->Ion;
echo $obj->Alex;
?>
Acest exemplu arată cum să accesați valorile dintr-un tablou asociativ PHP (PHP associative array):
<?php
$jsonobj = '{"Petre":35,"Ion":37,"Alex":43}';
$arr = json_decode($jsonobj, true);
echo $arr["Petre"];
echo $arr["Ion"];
echo $arr["Alex"];
?>
PHP - Buclă prin valori (Looping Through the Values)
De asemenea, puteți bucla (loop) valorile cu o buclă (loop) foreach():
Acest exemplu arată cum să vă buclați (loop) prin valorile unui obiect PHP (PHP object):
<?php
$jsonobj = '{"Petre":35,"Ion":37,"Alex":43}';
$obj = json_decode($jsonobj);
foreach($obj as $key => $value) {
  echo $key . " => " . $value . "<br>";
}
?>
Acest exemplu arată cum să vă buclați (loop) prin valorile unui tablou asociativ PHP (PHP associative array):
<?php
$jsonobj = '{"Petre":35,"Ion":37,"Alex":43}';
$arr = json_decode($jsonobj, true);
foreach($arr as $key => $value) {
  echo $key . " => " . $value . "<br>";
}
?>

PHP Conectare la MySQL

PHP Conectează-te la MySQL
PHP 5 și versiunile ulterioare pot lucra cu o bază de date MySQL folosind:
Extensia MySQLi („i” este îmbunătățită)
DPO (Obiecte de date PHP/PHP Data Objects)
Versiunile anterioare de PHP au folosit extensia MySQL. Cu toate acestea, această extindere a fost depășită în 2012.
Ar trebui să folosesc MySQLi sau PDO?
Dacă aveți nevoie de un răspuns scurt, ar fi „Orice dorți”.
Atât MySQLi, cât și PDO au avantajele lor:
PDO va funcționa pe 12 sisteme de baze de date diferite, în timp ce MySQLi va funcționa doar cu baze de date MySQL.
Deci, dacă trebuie să schimbați proiectul pentru a utiliza o altă bază de date, PDO ușurează procesul. Trebuie doar să schimbați șirul de conexiune (connection string) și câteva interogari (queries). Cu MySQLi, va trebui să rescrieți întregul cod - interogările (queries) incluse.
Ambele sunt orientate pe obiecte (object-oriented), dar MySQLi oferă și o API procedurală (procedural API).
Ambele acceptă declarații pregătite (Prepared Statements). Declarațiile pregătite (Prepared Statements) protejează împotriva injecției SQL și sunt foarte importante pentru securitatea aplicațiilor web.
Exemple MySQL atât în ​​MySQLi cât și în sintaxa PDO
Aici și în capitolele următoare vom demonstra trei moduri de a lucra cu PHP și MySQL:
MySQLi (orientat pe obiect/object-oriented)
MySQLi (procedural)
DOP
Instalare MySQLi
Pentru Linux și Windows: Extensia MySQLi este instalată automat în majoritatea cazurilor, atunci când este instalat pachetul mysql php5.
Pentru detalii despre instalare, accesați:
http://php.net/manual/en/mysqli.installation.php
Instalare DPO
Pentru detalii despre instalare, accesați: http://php.net/manual/en/pdo.installation.php
Deschideți o conexiune la MySQL
Înainte de a putea accesa datele din baza de date MySQL, trebuie să ne putem conecta la server:
Exemplu (MySQLi orientat pe obiect/MySQLi Object-Oriented)
<?php
$servername = "localhost";
$username = "username";
$password = "password";
// Creați conexiunea
$conn = new mysqli($servername, $username, $password);
// Verificați conexiunea
if ($conn->connect_error) {
    die("Conexiunea a eșuat: " . $conn->connect_error);
}
echo "Conectat cu succes";
?>
$connect_error a fost spart până la PHP 5.2.9 și 5.3.0. Dacă trebuie să vă asigurați compatibilitatea cu versiunile PHP înainte de 5.2.9 și 5.3.0, utilizați în schimb următorul cod:
// Verificați conexiunea
if (mysqli_connect_error()) {
    die("Conexiunea la baza de date a eșuat: " . mysqli_connect_error());
}
Exemplu (MySQLi Procedural)
<?php
$servername = "localhost";
$username = "username";
$password = "password";
// Creați conexiunea
$conn = mysqli_connect($servername, $username, $password);
// Verificați conexiunea
if (!$conn) {
    die("Conexiunea a eșuat: " . mysqli_connect_error());
}
echo "Conexiunea s-a realizat cu succes";
?>
Exemplu (PDO)
<?php
$servername = "localhost";
$username = "username";
$password = "password";
try {
    $conn = new PDO("mysql:host=$servername;dbname=myDB", $username, $password);
    // setați modul de eroare PDO la excepție
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    echo "Conectat cu succes";
    }
catch(PDOException $e)
    {
    echo "Conexiune eșuată: " . $e->getMessage();
    }
?>
În exemplul PDO de mai sus am specificat și o bază de date (myDB). PDO necesită o bază de date validă pentru a vă conecta. Dacă nu este specificată nicio bază de date, se face o excepție.
Un mare beneficiu al PDO este că are o clasă de excepție pentru a rezolva problemele care pot apărea în interogările noastre de baze de date (database queries). Dacă o excepție este făcută în block-ul try{}, scriptul nu mai este executat și curge direct către primul block catch(){}.
Închideți conexiunea
Conexiunea va fi închisă automat la finalizarea scriptului. Pentru a închide înainte conexiunea, utilizați următoarele:
MySQLi Object-Oriented:
$conn->close();
MySQLi Procedural:
mysqli_close($conn);
PDO:
$conn = null;

PHP Creare bază de date MySQL

PHP Creați o bază de date MySQL
O bază de date constă dintr-una sau mai multe tabele.
Veți avea nevoie de privilegii speciale CREATE pentru a crea sau pentru a șterge o bază de date MySQL.
Creați o bază de date MySQL folosind MySQLi și PDO
Instrucțiunea CREATE DATABASE este utilizată pentru a crea o bază de date în MySQL.
Următoarele exemple creează o bază de date denumită "myDB":
Exemplu (MySQLi Orientat pe obiect/MySQLi Object-oriented)
<?php
$servername = "localhost";
$username = "username";
$password = "password";
// Creați conexiunea
$conn = new mysqli($servername, $username, $password);
// Verificați conexiunea
if ($conn->connect_error) {
    die("Conexiunea a eșuat: " . $conn->connect_error);
}
// Creați baza de date
$sql = "CREATE DATABASE myDB";
if ($conn->query($sql) === TRUE) {
    echo "Baza de date creată cu succes";
} else {
    echo "Eroare la crearea bazei de date: " . $conn->error;
}
$conn->close();
?>
Când creați o bază de date nouă, trebuie să specificați doar primele trei argumente pentru obiectul mysqli (nume de server, nume de utilizator și parolă/servername, username and password).
Dacă trebuie să folosiți un port specific, adăugați un șir gol (empty string) pentru argumentul numelui bazei de date (database-name argument), astfel: new mysqli("localhost", "username", "password", "", port)
Exemplu (MySQLi Procedural)
<?php
$servername = "localhost";
$username = "username";
$password = "password";
// Creați conexiunea
$conn = mysqli_connect($servername, $username, $password);
// Verificați conexiunea
if (!$conn) {
    die("Conexiunea a eșuat: " . mysqli_connect_error());
}
// Creați baza de date
$sql = "CREATE DATABASE myDB";
if (mysqli_query($conn, $sql)) {
    echo "Bază de date creată cu succes";
} else {
    echo "Eroare la crearea bazei de date: " . mysqli_error($conn);
}
mysqli_close($conn);
?>
Următorul exemplu PDO creează o bază de date denumită "myDBPDO":
Exemplu (PDO)
<?php
$servername = "localhost";
$username = "username";
$password = "password";
try {
    $conn = new PDO("mysql:host=$servername", $username, $password);
    // setați modul de eroare PDO la excepție
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $sql = "CREATE DATABASE myDBPDO";
    // utilizați exec() deoarece nu se returnează niciun rezultat
    $conn->exec($sql);
    echo "Bază de date creată cu succes<br>";
    }
catch(PDOException $e)
    {
    echo $sql . "<br>" . $e->getMessage();
    }
$conn = null;
?>
Un mare beneficiu al PDO este că are o clasă de excepție pentru a rezolva problemele care pot apărea în interogările noastre de baze de date (database queries). Dacă o excepție este făcută în block-ul try{}, scriptul nu mai este executat și este trimis direct către primul block catch(){}. În block-ul catch de mai sus afișam în echo instrucțiunea SQL și mesajul de eroare generat.

PHP MySQL Creare Tabel

PHP MySQL Create Table
Un tabel de baze de date (database table) are propriul nume unic și este format din coloane și rânduri (columns and rows).
Creați un tabel MySQL folosind MySQLi și PDO
Instrucțiunea CREATE TABLE este utilizată pentru a crea un tabel în MySQL.
Vom crea un tabel numit „MyGuests”, cu cinci coloane: "id", "firstname", "lastname", "email" și "reg_date":
CREATE TABLE MyGuests (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
firstname VARCHAR(30) NOT NULL,
lastname VARCHAR(30) NOT NULL,
email VARCHAR(50),
reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)
Tipul de date (data type) specifică ce tip de date poate conține coloana.
După tipul de date (data type), puteți specifica alte atribute opționale pentru fiecare coloană:
NOT NULL - Fiecare rând (row) trebuie să conțină o valoare pentru acea coloană (column), valorile nule nu sunt permise
Valoarea DEFAULT - Setați o valoare implicită care este adăugată atunci când nu este trecută altă valoare
UNSIGNED - Folosit pentru tipuri de numere, limitează datele stocate la numere pozitive și zero
AUTO INCREMENT - MySQL crește automat valoarea câmpului de fiecare dată când se adaugă o nouă înregistrare
PRIMARY KEY - Folosit pentru identificarea unică a rândurilor dintr-un tabel. Coloana cu setarea PRIMARY KEY este adesea un număr de identificare (ID number) și este adesea folosită cu AUTO_INCREMENT
Fiecare tabel trebuie să aibă o coloană de chei primare (primary key column) (în acest caz: coloana „id”). Valoarea sa trebuie să fie unică pentru fiecare înregistrare din tabel.
Următoarele exemple arată cum se creează tabelul în PHP:
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 crea tabelul
$sql = "CREATE TABLE MyGuests (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
firstname VARCHAR(30) NOT NULL,
lastname VARCHAR(30) NOT NULL,
email VARCHAR(50),
reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)";
if ($conn->query($sql) === TRUE) {
    echo "Tabelul MyGuests creat cu succes";
} else {
    echo "Eroare la crearea tabelului: " . $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 crea tabelul
$sql = "CREATE TABLE MyGuests (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
firstname VARCHAR(30) NOT NULL,
lastname VARCHAR(30) NOT NULL,
email VARCHAR(50),
reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)";
if (mysqli_query($conn, $sql)) {
    echo "Tabelul MyGuests creat cu succes";
} else {
    echo "Eroare la crearea tabelului: " . 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 crea tabelul
    $sql = "CREATE TABLE MyGuests (
    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    firstname VARCHAR(30) NOT NULL,
    lastname VARCHAR(30) NOT NULL,
    email VARCHAR(50),
    reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
    )";

    // utilizați exec() deoarece nu se returnează niciun rezultat
    $conn->exec($sql);
    echo "Tabelul MyGuests creat cu succes";
    }
catch(PDOException $e)
    {
    echo $sql . "<br>" . $e->getMessage();
    }

$conn = null;
?>

PHP MySQL Inserare date

PHP MySQL Inserare date
Inserați date în MySQL folosind MySQLi și PDO
După crearea unei baze de date și a unui tabel, putem începe să adăugăm date în ele.
Iată câteva reguli de sintaxă de urmat:
Interogarea SQL (SQL query) trebuie indicată în PHP
Valorile șirului (string values) din interogarea SQL (SQL query) trebuie menționate
Valorile numerice (numeric values) nu trebuie citate
Nu trebuie menționat cuvântul NULL
Instrucțiunea INSERT INTO este utilizată pentru a adăuga noi înregistrări la un tabel MySQL:
INSERT INTO table_name (column1, column2, column3,...)
VALUES (value1, value2, value3,...)
În capitolul precedent, am creat un tabel gol, numit „MyGuests”, cu cinci coloane: "id", "firstname", "lastname", "email" și "reg_date".
Acum, să umplem tabelul cu date.
Dacă o coloană este AUTO_INCREMENT (cum ar fi coloana „id”) sau TIMESTAMP cu actualizarea implicită a current_timesamp (precum coloana „reg_date”), nu este necesar să fie specificată în interogarea SQL (SQL query); MySQL va adăuga automat valoarea.
Următoarele exemple adaugă o nouă înregistrare la 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 = "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Ion', 'Popescu', '[email protected]')";
if ($conn->query($sql) === TRUE) {
    echo "Noua înregistrare creată cu succes";
} else {
    echo "Eroare: " . $sql . "<br>" . $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("Conectarea a eșuat: " . mysqli_connect_error());
}
$sql = "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Ion', 'Popescu', '[email protected]')";
if (mysqli_query($conn, $sql)) {
    echo "Noua înregistrare creată cu succes";
} else {
    echo "Eroare: " . $sql . "<br>" . 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 = "INSERT INTO MyGuests (firstname, lastname, email)
    VALUES ('Ion', 'Popescu', '[email protected]')";
    // utilizați exec() deoarece nu se returnează niciun rezultat
    $conn->exec($sql);
    echo "Noua înregistrare creată cu succes";
    }
catch(PDOException $e)
    {
    echo $sql . "<br>" . $e->getMessage();
    }
$conn = null;
?>

PHP MySQL Obțineți ultimul ID introdus

PHP MySQL Obțineți ultimul ID introdus
Obțineți ID-ul ultimei înregistrări introduse
Dacă efectuăm un INSERT sau UPDATE pe o tabelă cu câmpul AUTO_INCREMENT, putem obține imediat ID-ul ultimei înregistrări introduse / actualizate (inserted/updated ).
În tabelul „MyGuests”, coloana „id” este un câmp AUTO_INCREMENT:
CREATE TABLE MyGuests (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
firstname VARCHAR(30) NOT NULL,
lastname VARCHAR(30) NOT NULL,
email VARCHAR(50),
reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)
Următoarele exemple sunt egale cu exemplele din pagina anterioară (PHP Insert Data In MySQL), cu excepția faptului că am adăugat o singură linie de cod pentru a prelua ID-ul ultimei înregistrări introduse. De asemenea, afisam cu echo ultimul ID introdus:
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 = "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Ion', 'Popescu', '[email protected]')";
if ($conn->query($sql) === TRUE) {
    $last_id = $conn->insert_id;
    echo "Noua înregistrare creată cu succes. Ultimul ID inserat este: " . $last_id;
} else {
    echo "Eroare: " . $sql . "<br>" . $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 = "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Ion', 'Popescu', '[email protected]')";
if (mysqli_query($conn, $sql)) {
    $last_id = mysqli_insert_id($conn);
    echo "Noua înregistrare creată cu succes. Ultimul ID inserat este: " . $last_id;
} else {
    echo "Eroare: " . $sql . "<br>" . 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 = "INSERT INTO MyGuests (firstname, lastname, email)
    VALUES ('John', 'Doe', '[email protected]')";
    // utilizați exec() deoarece nu se returnează niciun rezultat
    $conn->exec($sql);
    $last_id = $conn->lastInsertId();
    echo "Noua înregistrare creată cu succes. Ultimul ID inserat este: " . $last_id;
    }
catch(PDOException $e)
    {
    echo $sql . "<br>" . $e->getMessage();
    }
$conn = null;
?>

PHP MySQL Introduceți mai multe înregistrări

PHP MySQL Introduceți mai multe înregistrări
Inserați mai multe înregistrări în MySQL folosind MySQLi și PDO
Mai multe instrucțiuni SQL trebuie executate cu funcția mysqli_multi_query().
Următoarele exemple adaugă trei înregistrări noi î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 = "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Ion', 'Popescu', '[email protected]');";
$sql .= "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Maria', 'Gheorghe', '[email protected]');";
$sql .= "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Iulia', 'Filipescu', '[email protected]')";
if ($conn->multi_query($sql) === TRUE) {
    echo "Înregistrări noi create cu succes";
} else {
    echo "Eroare: " . $sql . "<br>" . $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 = "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Ion', 'Popescu', '[email protected]');";
$sql .= "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Maria', 'Gheorghe', '[email protected]');";
$sql .= "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Iulia', 'Filipescu', '[email protected]')";
if (mysqli_multi_query($conn, $sql)) {
    echo "Înregistrări noi create cu succes";
} else {
    echo "Eroare: " . $sql . "<br>" . 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);
   // începeți tranzacția
    $conn->beginTransaction();
    // declarațiile noastre SQL
    $conn->exec("INSERT INTO MyGuests (firstname, lastname, email)
    VALUES ('Ion', 'Popescu', '[email protected]')");
    $conn->exec("INSERT INTO MyGuests (firstname, lastname, email)
    VALUES ('Maria', 'Gheorghe', '[email protected]')");
    $conn->exec("INSERT INTO MyGuests (firstname, lastname, email)
    VALUES ('Iulia', 'Filipescu', '[email protected]')");
   // commit the transaction
    $conn->commit();
    echo "Înregistrări noi create cu succes";
    }
catch(PDOException $e)
    {
    // dați înapoi tranzacția dacă ceva a eșuat
    $conn->rollback();
    echo "Eroare: " . $e->getMessage();
    }
$conn = null;
?>

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 Select Data

PHP MySQL Select Data
Selectați datele dintr-o bază de date MySQL
Instrucțiunea SELECT este utilizată pentru a selecta datele dintr-una sau mai multe tabele:
SELECT column_name(s) FROM table_name
sau putem folosi caracterul * pentru a selecta TOATE coloanele dintr-un tabel:
SELECT * FROM table_name
Selectați date cu MySQLi
Selectați date cu MySQLi
Următorul exemplu selectează coloanele id, prenume și nume (id, firstname, lastname) din tabelul MyGuests și îl afișează pe pagină:
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 = "SELECT id, firstname, lastname FROM MyGuests";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    // date de ieșire ale fiecărui rând (output data of each row)
    while($row = $result->fetch_assoc()) {
        echo "id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>";
    }
} else {
    echo "0 results";
}
$conn->close();
?>
Linii de cod pentru a explica exemplul de mai sus:
Mai întâi, am configurat o interogare SQL (SQL query) care selectează coloanele id, nume și prenume (id, firstname, lastname) din tabelul MyGuests. Următoarea linie de cod rulează interogarea (query) și pune datele rezultate într-o variabilă numită $result.
Apoi, funcția num_rows() verifică dacă au fost returnate mai mult de zero rânduri.
Dacă sunt returnate mai mult de zero rânduri, funcția fetch_assoc() plasează toate rezultatele într-un tablou asociativ (associative array) pe care îl putem bucla (loop). Bucla (loop) while() buclează setul de rezultate și emite datele din coloanele id, nume și prenume (id, firstname, lastname).
Următorul exemplu arată același lucru ca și exemplul precedent, în modul procedural MySQLi:
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 = "SELECT id, firstname, lastname FROM MyGuests";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
    // date de ieșire ale fiecărui rând
    while($row = mysqli_fetch_assoc($result)) {
        echo "id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>";
    }
} else {
    echo "0 results";
}
mysqli_close($conn);
?>
Puteți pune rezultatul într-un tabel HTML:
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 = "SELECT id, firstname, lastname FROM MyGuests";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    echo "<table><tr><th>ID</th><th>Nume</th></tr>";
    // date de ieșire ale fiecărui rând
    while($row = $result->fetch_assoc()) {
        echo "<tr><td>".$row["id"]."</td><td>".$row["firstname"]." ".$row["lastname"]."</td></tr>";
    }
    echo "</table>";
} else {
    echo "0 results";
}
$conn->close();
?>
Selectați datele cu PDO (+ declarații pregătite/prepared statements)
Următorul exemplu folosește instrucțiuni pregătite (prepared statements).
Selectează coloanele id, prenume și nume (id, firstname, lastname) din tabelul MyGuests și îl afișează într-un tabel HTML:
Exemplu (PDO)
<?php
echo "<table style='border: solid 1px black;'>";
echo "<tr><th>Id</th><th>Prenume</th><th>Nume</th></tr>";
class TableRows extends RecursiveIteratorIterator {
    function __construct($it) {
        parent::__construct($it, self::LEAVES_ONLY);
    }
    function current() {
        return "<td style='width:150px;border:1px solid black;'>" . parent::current(). "</td>";
    }
    function beginChildren() {
        echo "<tr>";
    }

    function endChildren() {
        echo "</tr>" . "\n";
    }
}
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDBPDO";
try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $conn->prepare("SELECT id, firstname, lastname FROM MyGuests");
    $stmt->execute();
    // setați tabloul rezultat la asociativ (set the resulting array to associative)
    $result = $stmt->setFetchMode(PDO::FETCH_ASSOC);
    foreach(new TableRows(new RecursiveArrayIterator($stmt->fetchAll())) as $k=>$v) {
        echo $v;
    }
}
catch(PDOException $e) {
    echo "Eroare: " . $e->getMessage();
}
$conn = null;
echo "</table>";
?>

PHP MySQL WHERE

PHP MySQL Utilizați clauza WHERE
Selectați și filtrați datele dintr-o bază de date MySQL
Clauza WHERE este folosită pentru a filtra înregistrările.
Clauza WHERE este utilizată pentru a extrage doar acele înregistrări care îndeplinesc o condiție specificată.
SELECT column_name(s) FROM table_name WHERE column_name operator value 
Selectați și filtrați datele cu MySQLi
Următorul exemplu selectează coloanele id, prenumele și numele (id, firstname, lastname) din tabelul MyGuests unde numele de familie (lastname) este "Popescu" și îl afișează pe pagina:
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 = "SELECT id, firstname, lastname FROM MyGuests WHERE lastname='Popescu'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    // date de ieșire ale fiecărui rând
    while($row = $result->fetch_assoc()) {
        echo "id: " . $row["id"]. " - Nume: " . $row["firstname"]. " " . $row["lastname"]. "<br>";
    }
} else {
    echo "0 results";
}
$conn->close();
?>
Linii de cod pentru a explica exemplul de mai sus:
Mai întâi, am configurat interogarea SQL (SQL query) care selectează coloanele id, prenumele și numele (id, firstname, lastname) din tabelul MyGuests unde numele de familie (lastname) este „Popescu”. Următoarea linie de cod rulează interogarea (query) și pune datele rezultate într-o variabilă numită $result.
Apoi, funcția num_rows() verifică dacă au fost returnate mai mult de zero rânduri.
Dacă sunt returnate mai mult de zero rânduri, funcția fetch_assoc() plasează toate rezultatele într-un tablou asociativ (associative array) pe care îl putem bucla (loop). Bucla (loop) while() buclează setul de rezultate și emite datele din coloanele id, nume și prenume (id, firstname, lastname).
Următorul exemplu arată același lucru ca și exemplul dprecedent, în modul procedural MySQLi:
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 = "SELECT id, firstname, lastname FROM MyGuests WHERE lastname='Popescu'";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
    // date de ieșire ale fiecărui rând
    while($row = mysqli_fetch_assoc($result)) {
        echo "id: " . $row["id"]. " - Nume: " . $row["firstname"]. " " . $row["lastname"]. "<br>";
    }
} else {
    echo "0 results";
}
mysqli_close($conn);
?>
Puteți pune rezultatul într-un tabel HTML:
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 = "SELECT id, firstname, lastname FROM MyGuests WHERE lastname='Popescu'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    echo "<table><tr><th>ID</th><th>Nume</th></tr>";
    // date de ieșire ale fiecărui rând
    while($row = $result->fetch_assoc()) {
        echo "<tr><td>".$row["id"]."</td><td>".$row["firstname"]." ".$row["lastname"]."</td></tr>";
    }
    echo "</table>";
} else {
    echo "0 results";
}
$conn->close();
?>
Selectați date cu PDO (+ declarații pregătite/prepared statements)
Următorul exemplu folosește instrucțiuni pregătite (prepared statements).
Selectează coloanele id, prenumele și numele (id, firstname, lastname) din tabelul MyGuests unde numele de familie este "Popescu" și îl afișează într-un tabel HTML:
Exemplu (PDO)
<?php
echo "<table style='border: solid 1px black;'>";
echo "<tr><th>Id</th><th>Prenume</th><th>Nume</th></tr>";
class TableRows extends RecursiveIteratorIterator {
    function __construct($it) {
        parent::__construct($it, self::LEAVES_ONLY);
    }
    function current() {
        return "<td style='width:150px;border:1px solid black;'>" . parent::current(). "</td>";
    }
    function beginChildren() {
        echo "<tr>";
    }
    function endChildren() {
        echo "</tr>" . "\n";
    }
}
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDBPDO";
try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $conn->prepare("SELECT id, firstname, lastname FROM MyGuests WHERE lastname='Popescu'");
    $stmt->execute();
    // setați tabloul rezultat la asociativ (set the resulting array to associative)
    $result = $stmt->setFetchMode(PDO::FETCH_ASSOC);
    foreach(new TableRows(new RecursiveArrayIterator($stmt->fetchAll())) as $k=>$v) {
        echo $v;
    }
}
catch(PDOException $e) {
    echo "Eroare: " . $e->getMessage();
}
$conn = null;
echo "</table>";
?>

PHP MySQL ORDER BY

PHP MySQL Utilizați clauza ORDER BY
Selectați și comandați date dintr-o bază de date MySQL (Select and Order Data From a MySQL Database)
Clauza ORDER BY este folosită pentru a sorta setul de rezultate în ordine crescătoare sau descrescătoare.
Clauza ORDER BY sortează înregistrările în ordine crescătoare în mod implicit. Pentru a sorta înregistrările în ordine descrescătoare, utilizați cuvântul cheie DESC.
SELECT column_name(s) FROM table_name ORDER BY column_name(s) ASC|DESC 
Selectați și comandați date cu MySQLi (Select and Order Data With MySQLi)
Următorul exemplu selectează coloanele id, prenume și nume (id, firstname, lastname) din tabelul MyGuests. Înregistrările vor fi ordonate după coloana prenumelui:
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 = "SELECT id, firstname, lastname FROM MyGuests ORDER BY lastname";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    // date de ieșire ale fiecărui rând
    while($row = $result->fetch_assoc()) {
        echo "id: " . $row["id"]. " - Nume: " . $row["firstname"]. " " . $row["lastname"]. "<br>";
    }
} else {
    echo "0 results";
}
$conn->close();
?>
Linii de cod pentru a explica exemplul de mai sus:
În primul rând, am configurat interogarea SQL (SQL query) care selectează coloanele id, prenume și nume (id, firstname, lastname) din tabelul MyGuests. Înregistrările vor fi comandate de coloana cu numele de familie. Următoarea linie de cod rulează interogarea (query) și pune datele rezultate într-o variabilă numită $result.
Apoi, funcția num_rows() verifică dacă au fost returnate mai mult de zero rânduri.
Dacă sunt returnate mai mult de zero rânduri, funcția fetch_assoc() plasează toate rezultatele într-un tablou asociativ (associative array) pe care îl putem bucla (loop). Bucla (loop) while() buclează setul de rezultate și emite datele din coloanele id, prenume și nume (id, firstname, lastname).
Următorul exemplu arată același lucru ca și exemplul precedent, în modul procedural MySQLi:
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 = "SELECT id, firstname, lastname FROM MyGuests ORDER BY lastname";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
    // date de ieșire ale fiecărui rând
    while($row = mysqli_fetch_assoc($result)) {
        echo "id: " . $row["id"]. " - Nume: " . $row["firstname"]. " " . $row["lastname"]. "<br>";
    }
} else {
    echo "0 results";
}
mysqli_close($conn);
?>
Puteți pune rezultatul într-un tabel HTML:
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 = "SELECT id, firstname, lastname FROM MyGuests ORDER BY lastname";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    echo "<table><tr><th>ID</th><th>Nume</th></tr>";
    // date de ieșire ale fiecărui rând
    while($row = $result->fetch_assoc()) {
        echo "<tr><td>".$row["id"]."</td><td>".$row["firstname"]." ".$row["lastname"]."</td></tr>";
    }
    echo "</table>";
} else {
    echo "0 results";
}
$conn->close();
?>
Selectați date cu PDO (+ declarații pregătite/prepared statements)
Următorul exemplu folosește instrucțiuni pregătite (prepared statements).
Aici selectăm coloanele id, prenume și nume (id, firstname, lastname) din tabelul MyGuests. Înregistrările vor fi ordonate după coloana cu numele de familie și vor fi afișate într-un tabel HTML:
Exemplu (PDO)
<?php
echo "<table style='border: solid 1px black;'>";
echo "<tr><th>Id</th><th>Prenume</th><th>Nume</th></tr>";
class TableRows extends RecursiveIteratorIterator {
    function __construct($it) {
        parent::__construct($it, self::LEAVES_ONLY);
    }
    function current() {
        return "<td style='width:150px;border:1px solid black;'>" . parent::current(). "</td>";
    }
    function beginChildren() {
        echo "<tr>";
    }

    function endChildren() {
        echo "</tr>" . "\n";
    }
}
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDBPDO";
try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $conn->prepare("SELECT id, firstname, lastname FROM MyGuests ORDER BY lastname");
    $stmt->execute();
    // setați tabloul rezultat la asociativ (set the resulting array to associative)
    $result = $stmt->setFetchMode(PDO::FETCH_ASSOC);
    foreach(new TableRows(new RecursiveArrayIterator($stmt->fetchAll())) as $k=>$v) {
        echo $v;
    }
}
catch(PDOException $e) {
    echo "Eroare: " . $e->getMessage();
}
$conn = null;
echo "</table>";
?>

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;
?>

PHP - AJAX Introducere

PHP - AJAX Introducere
AJAX este despre actualizarea părților unei pagini web, fără a reîncărca întreaga pagină.
Ce este AJAX?
AJAX = JavaScript asincron și XML.
AJAX este o tehnică pentru crearea de pagini web rapide și dinamice.
AJAX permite actualizarea asincronă a paginilor web, schimbând cantități mici de date cu serverul din culise. Aceasta înseamnă că este posibil să actualizați părți ale unei pagini web, fără a reîncărca întreaga pagină.
Paginile web clasice (care nu utilizează AJAX) trebuie să reîncarce întreaga pagină dacă conținutul ar trebui să se schimbe.
Exemple de aplicații care utilizează AJAX: Google Maps, Gmail, Youtube și Facebook.
AJAX se bazează pe standardele de internet
AJAX se bazează pe standardele de internet și folosește o combinație de:
Obiectul XMLHttpRequest (pentru schimbul de date asincron cu un server)
JavaScript / DOM (pentru afișarea / interacțiunea cu informațiile)
CSS (pentru stilizarea datelor)
XML (adesea folosit ca format pentru transferul de date)
Aplicațiile AJAX sunt independente de browser și de platformă!
Sugestie Google
AJAX a fost popularizat în 2005 de Google, cu Google Suggest.
Google Suggest utilizează AJAX pentru a crea o interfață web foarte dinamică: Când începeți să tastați în caseta de căutare Google, un JavaScript trimite cererea de informații pe un server și serverul returnează o listă de sugestii.
Începeți să utilizați AJAX Today
În tutorialul nostru PHP, vom demonstra modul în care AJAX poate actualiza părți ale unei pagini web, fără a reîncărca întreaga pagină. Scriptul serverului va fi scris în PHP.

PHP AJAX

PHP - AJAX și PHP
AJAX este utilizat pentru a crea mai multe aplicații interactive.
Exemplu AJAX PHP
Următorul exemplu va demonstra modul în care o pagină web poate comunica cu un server web în timp ce un utilizator tastează într-un câmp de intrare (input field).
Când un utilizator introduce un caracter în câmpul de intrare (input field), se execută o funcție numită "showHint()".
Funcția este declanșată de evenimentul onkeyup.
<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "gethint.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>
<p><b>Începeți să tastați un prenume în câmpul de introducere (input field) de mai jos:</b></p>
<form>
Prenume: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Sugestii: <span id="txtHint"></span></p>
</body>
</html>
Explicarea codului:
În primul rând, verificați dacă câmpul de intrare (input field) este gol (str.length == 0). Dacă este, ștergeți conținutul marcajului de substituție txtHint și ieșiți din funcție.
Cu toate acestea, dacă câmpul de intrare nu este gol, faceți următoarele:
Creați un obiect XMLHttpRequest
Creați funcția care trebuie executată atunci când răspunsul serverului este gata
Trimiteți cererea la un fișier PHP (gethint.php) de pe server
Observați că parametrul q este adăugat la url (gethint.php?q="+str)
Și variabila str conține conținutul câmpului de intrare (input field)
Fișierul PHP - "gethint.php"
Fișierul PHP verifică o serie de nume și returnează numele corespunzător browserului:
<?php
// Array with names
$a[] = "Ana";
$a[] = "Briana";
$a[] = "Cristina";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Florina";
$a[] = "Gina";
$a[] = "Helena";
$a[] = "Ina";
$a[] = "Jana";
$a[] = "Karina";
$a[] = "Liliana";
$a[] = "Nina";
$a[] = "Ofelia";
$a[] = "Petronela";
$a[] = "Alexandra";
$a[] = "Rahela";
$a[] = "Corina";
$a[] = "Dorina";
$a[] = "Evelina";
$a[] = "Emilia";
$a[] = "Sorina";
$a[] = "Tina";
$a[] = "Luana";
$a[] = "Violeta";
$a[] = "Lizuca";
$a[] = "Elizsabeta";
$a[] = "Eliana";
$a[] = "Wanda";
$a[] = "Victoria;
// obțineți parametrul q de la URL
$q = $_REQUEST["q"];
$hint = "";
// căutarea tuturor indiciilor din tablou (array) dacă $q este diferit de ""
if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            } else {
                $hint .= ", $name";
            }
        }
    }
}
// Ieșirea „fără sugestii” dacă nu a fost găsit niciun indiciu sau ieșirea valorilor corecte
echo $hint === "" ? "nici o sugestie" : $hint;
?>

PHP Bază de date AJAX

PHP - AJAX și MySQL
AJAX poate fi utilizat pentru comunicarea interactivă cu o bază de date.
Exemplu de bază de date AJAX
Modul în care o pagină web poate obține informații dintr-o bază de date cu AJAX:
Exemplu explicat
Când un utilizator selectează o persoană din lista derulantă, se execută o funcție numită „showUser()”.
Funcția este declanșată de evenimentul onchange.
<html>
<head>
<script>
function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","getuser.php?q="+str,true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
  <option value="">Select a person:</option>
  <option value="1">Petre Georgescu</option>
  <option value="2">Luiza Georgescu</option>
  <option value="3">Ion Suciu</option>
  <option value="4">Georgiana Ionescu</option>
  </select>
</form>
<br>
<div id="txtHint"><b>Informațiile despre persoană vor fi enumerate aici ... </b></div>
</body>
</html>
Verificați dacă persoana este selectată. Dacă nu este selectată nicio persoană (str == ""), ștergeți conținutul txtHint și ieșiți din funcție. Dacă este selectată o persoană, faceți următoarele:
Creați un obiect XMLHttpRequest
Creați funcția care trebuie executată atunci când răspunsul serverului este gata
Trimiteți cererea dezactivată unui fișier de pe server
Observați că la URL se adaugă un parametru (q) (avand conținutul listei derulante)
Fișierul PHP
Pagina de pe server numită de JavaScript-ul precedent este un fișier PHP numit "getuser.php".
Codul sursă din „getuser.php” rulează o interogare (query) împotriva unei baze de date MySQL și returnează rezultatul într-un tabel HTML:
<!DOCTYPE html>
<html>
<head>
<style>
table {
    width: 100%;
    border-collapse: collapse;
}
table, td, th {
    border: 1px solid black;
    padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','petre','abc123','my_db');
if (!$con) {
    die('Nu s-a putut conecta: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>
<tr>
<th>Prenume</th>
<th>Nume</th>
<th>Vârsta</th>
<th>Orașul natal</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
    echo "<tr>";
    echo "<td>" . $row['Prenume'] . "</td>";
    echo "<td>" . $row['Nume'] . "</td>";
    echo "<td>" . $row['Vârsta'] . "</td>";
    echo "<td>" . $row['Orașul natal'] . "</td>";
    echo "<td>" . $row['Job'] . "</td>";
    echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>
Când interogarea este trimisă de la JavaScript în fișierul PHP, se întâmplă următoarele:
PHP deschide o conexiune la un server MySQL
Este găsită persoana corectă
Un tabel HTML este creat, umplut cu date și trimis înapoi la marcatorul de locație (placeholder) „txtHint”

Oxizi

Structura, formula generală și nomenclatura oxizilor; oxizi acizi, oxizi bazici, oxizi amfoteri și oxizi indiferenți; proprietăți și metode generale de obținere a oxizilor.

Acizi

Definirea acizilor conform teoriei disociației electrolitice și a teoriei protolitice; hidracizi și oxoacizi; radicali acizi; formula generală și nomenclatura acizilor; proprietățile și reacțiile chimice specifice acizilor; ionizarea acizilor; metode generale de obținere a acizilor. 

Baze

Definirea bazelor conform teoriei disociației electrolitice și teoriei protolitice; formula generală și nomenclatura bazelor; proprietățile și reacțiile chimice specifice bazelor; ionizarea bazelor; metode generale de obținere a bazelor. 

Săruri

Structura și formula generală a sărurilor; săruri neutre, săruri acide și săruri bazice; nomenclatura sărurilor; proprietățile și reacțiile chimice ale sărurilor; metode generale de obținere a sărurilor; neutralizare și hidroliză. 

Grupa 18 sau grupa a VIII-a principală

Grupa a VIII-a principală, numerotată VIII A sau 18, cuprinde gazele rare (nobile) heliu, He, neon, Ne, argon, Ar, kripton, Kr, xenon, Xe, radon, Rn. 

 

Grupa 17 sau grupa a VII-a principală

Grupa a VII-a principală, numerotată VII A sau 17, numită și grupa halogenilor, conține următoarele elemente: fluor, F, clor, Cl, brom, Br, iod, I, astatin, At.
 

Grupa 16 sau grupa a VI-a principală

Grupa a VI-a principală a sistemului periodic, numerotată VI A sau 16, cuprinde elementele oxigen, O, sulf, S, seleniu, Se, telur, Te, și poloniu, Po. 

 

Grupa 14 sau grupa a IV-a principală

Grupa a IV-a principală a sistemului periodic, numerotată IV A sau 14, cuprinde elementele carbon, C, siliciu, Si, germaniu, Ge, staniu, Sn, și plumb, Pb. 

Grupa 8 sau grupa a VIII-a secundară

Grupa 8 a sistemului periodic, în trecut considerată parte a grupei a VIII-a secundare, alături de grupele 9 și 10, cuprinde elementele fier, Fe, ruteniu, Ru, și osmiu, Os.