Rezultate pentru tag: reguli
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.
Valenţa şi numărul de oxidare
Valența, covalența, electrovalența, numărul de oxidare. Electronii de valenţă. Reguli pentru determinarea numerelor de oxidare. Determinarea numerelor de oxidare în funcţie de electronegativitate. Valenţa şi poziţia în tabelul periodic.
Reacţii redox. Oxidanţi şi reducători.
Transferul de electroni. Reacţia de oxidare. Reacţia de reducere. Numărul de oxidare. Reguli pentru determinarea numerelor de oxidare. Reacţii redox. Agenţi oxidanţi şi agenţi reducători. Caracter oxidant şi carcter reducător. Seria activităţii metalelor.
Mulţimi - noţiuni introductive
Noțiuni introductive privind mulțimile. Relația dintre un element și o mulțime (relația de apartenență). Reprezentarea mulțimilor: cu ajutorul diagramelor, prin enumerarea elementelor și prin enunțarea proprietăților caracteristice elementelor. Mulțimi finite. Mulțimi infinite. Mulțimea vidă. Relații între mulțimi. Submulțimi.
Operații cu numere naturale. Ridicarea la putere
Puterea unui număr natural. Ridicarea la putere a unui număr natural. Reguli de calcul cu puteri. Compararea puterilor. Ordonarea puterilor.
Puterea cu exponent natural a unui număr întreg
Ridicarea la putere a numerelor întregi și reguli de calcul cu puteri.
Adunarea fracțiilor zecimale
Adunarea fracțiilor zecimale care au un număr finit de zecimale nenule
Scăderea fracțiilor zecimale
Scăderea fracțiilor zecimale care au un număr finit de zecimale nenule
Înmulțirea numerelor reale (1)
Produsul numerelor reale de forma 
, reguli de calcul cu radicali.
Operaţii cu numere reale
Adunarea numerelor reale. Scăderea numerelor reale. Înmulţirea numerelor reale. Împărţirea numerelor reale. Ridicarea la putere a numerelor reale. Calcule cu radicali.
Triunghiul
Definiţia unui triunghi. Elementele unui triunghi. Noțiunea de perimetru triunghi, semiperimetru. Suma măsurilor unghiurilor unui triunghi. Unghi exterior unui triunghi.
Alcani – nomenclatură, proprietăţi fizice, aplicaţii practice
Alcani, izoalcani. Metan, etan, propan, butan, izobutan. Izomerie de catenă. Serie omoloagă. Corelaţia dintre structura alcanilor şi proprietăţile fizice (starea de agregare, temperatura de fierbere).
Alchene – nomenclatură, proprietăţi fizice, aplicaţii practice
Serie omoloagă. Nomenclatură. Atomi de carbon vinilici şi atomi de carbon alilici. Caracteristicile legăturii duble. Izomerie geometrică (izomeri cis-trans). Izomerie de catenă. Izomerie de funcţiune. Izomerie de poziţie. Proprietăţi fizice
Alchene – proprietăţi chimice
Reacţii specifice hidrocarburilor nesaturate – reacţii de adiţie, de oxidare şi de polimerizare. Hidrogenarea alchenelor, halogenarea alchenelor, adiţia hidracizilor la alchene, adiţia apei la alchene. Oxidare blândă şi oxidare energică. Reacţii comune cu hidrocarburile saturate – reacţii de ardere, reacţii de substituţie. Regula lui Markovnikov. Polimeri vinilici.
Alchine – proprietăţi chimice
Hidrogenarea acetilenei. Adiţia halogenilor. Adiţia apei. Tautomerizare. Adiţia hidracizilor. Dimerizarea şi trimerizarea acetilenei. Obţinerea vinilacetilenei şi a benzenului. Reacţii de substituţie.
Arene – nomenclatură, clasificare şi proprietăţi fizice
Hidrocarburi aromatice. Structuri de rezonanţă (structuri limită). Benzenul. Modelul Kékulé. Structura inelului benzenic. Caracter aromatic. Clasificarea arenelor. Nomenclatură. Poziţiile orto-, meta-, şi para-. Proprietăţi fizice.
Reacţii ale compuşilor organici
Clasificarea reacţiilor chimice ale compuşilor organici. Schema generală a unei reacţii. Substrat organic şi reactant. Reacţii de substituţie. Reacţii de adiţie. Reacţii de eliminare. Reacţii de transpoziţie.
Reacţii de halogenare
Halogenarea prin reacţii de substituţie – halogenarea alcanilor, halogenarea în poziţie alilică, halogenarea în poziţie benzilică, halogenarea nucleului aromatic. Halogenarea prin reacţii de adiţie – adiţia halogenilor la alchene, adiţia halogenilor la alchine, adiţia halogenilor la alcadiene, adiţia halogenilor la benzen, adiţia hidracizilor la alchene, adiţia hidracizilor la alchine.
Alcooli – proprietăţi chimice
Caracteristicile grupei funcţionale hidroxil. Reacţia cu metalele alcaline. Reacţia de deshidratare (eliminarea apei). Reactivitatea alcoolilor în funţie de structură. Deshidratarea intramoleculară şi deshidratarea intermoleculară a alcoolilor. Obţinerea eterilor. Oxidarea alcoolilor – oxidarea blândă şi oxidarea energică. Reacţia de esterificare – esteri organici şi esteri anorganici.
Ridicarea la putere a fracțiilor ordinare pozitive
Puterea cu exponent natural a unui număr rațional pozitiv. Reguli de calcul cu puteri.
Ridicarea la putere a numerelor raționale
Ridicarea la putere a numerelor raționale, reguli de calcul cu puteri.
Împărțirea numerelor reale (1)
Împărțirea numerelor reale de forma 
reguli de calcul cu radicali.
Ridicarea la putere a numerelor reale
Puterea cu exponent întreg a unui numar real. Reguli de calcul cu puteri.
Înmulțirea, împărțirea și ridicarea la putere a numerelor reale reprezentate prin litere
Operații cu numere reale reprezentate prin litere. Înmulțirea numerelor reale reprezentate prin litere. Împărțirea numerelor reale reprezentate prin litere. Ridicarea la putere a numerelor reale reprezentate prin litere.
Adunarea numerelor raționale
Adunarea numerelor raționale având același semn sau semne diferite.
Unități de măsură pentru lungimi. Transformări.
Unități de masură pentru lungime. Metrul. Multiplii și submultiplii metrului.
Numere naturale scrise în formă arabă și romană
Scrierea unui număr cu cifre arabe sau cifre romane. Reguli de scriere folosind cifrele romane
Ridicarea la putere cu exponent natural a fracțiilor zecimale
Ridicarea la putere a fracțiilor zecimale. Calculul unor puteri care au exponentul număr natural și baza număr zecimal. Reguli de calcul cu puteri.
Adunarea și scăderea numerelor reale (2)
Adunarea și scăderea numerelor reale de forma 
Înmulțirea și împărțirea numerelor reale (2)
Înmulțirea și împărțirea numerelor reale de forma
Ridicarea la putere a rapoartelor de numere reale
Ridicarea la putere cu exponent întreg a unor rapoarte de numere reale. Reguli de calcul cu puteri
Regulile lui l'Hospital
Regulile lui l'Hospital. Rezolvarea unor cazuri de nedeterminare în calculul limitelor de funcţii cu ajutorul derivatelor.
Reguli de calcul într-un grup
Reguli de calcul într-un grup: puterea unui element, legi de simplificare.
Reguli de calcul într-un inel
Divizori ai lui zero într-un inel. Noţiunea de inel integru (domeniu de integritate). Regula semnelor într-un inel. Legi de simplificare.
Imagini hărți în HTML
Cu hărți de imagine (Image Maps), puteți adăuga zone pe care se poate face click pe o imagine.
Eticheta <map> definește o imagine-hartă
Imaginea este introdusă folosind eticheta <img>.Singura diferență față de alte imagini este că trebuie să adăugați un atribut usemap.
Elementul <map> este utilizat pentru a crea o hartă a imaginii și este legat de imagine prin utilizarea atributului nume.
O zonă pe care se poate face click este definită folosind un element <area>.
HTML Uniform Resource Locators (URL)
Un URL este un alt cuvânt pentru o adresă web.
O adresă URL poate fi compusă din cuvinte (lectii-virtuale.ro) sau o adresă IP (Internet Protocol) (192.68.21.51).
Majoritatea oamenilor introduc numele când navighează, deoarece numele sunt mai ușor de reținut decât numerele.
scheme - definește tipul serviciului de internet (cel mai frecvent este http sau https)
prefix - definește un prefix de domeniu (implicit pentru http este www)
domain - definește numele domeniului Internet (cum ar fi lectii-virtuale.ro)
port - definește numărul de port la gazdă (implicit pentru http este 80)
path - definește o cale pe server (Dacă este omis: directorul rădăcină al site-ului)
filename - definește numele unui document sau resursă
Scheme URL comune: HyperText Transfer Protocol (http), Secure HyperText Transfer Protocol (https), File Transfer Protocol (ftp).
Codificare URL.
Adresele URL pot fi trimise doar pe Internet folosind setul de caractere ASCII. Dacă o adresă URL conține caractere în afara setului ASCII, adresa URL trebuie convertită.
Codarea URL transformă caracterele care nu sunt ASCII într-un format care poate fi transmis pe internet.
Codarea URL înlocuiește caracterele care nu sunt ASCII cu un „%” urmat de cifre hexadecimale.
Adresele URL nu pot conține spații. Codarea URL înlocuiește în mod normal un spațiu cu un semn plus (+) sau% 20.
Setul de caractere implicit în HTML5 este UTF-8.
HTML și XHTML
XHTML este HTML scris ca XML.
XHTML înseamnă limbaj de extindere HyperText Markup Language
XHTML este aproape identic cu HTML
XHTML este mai strict decât HTML
XHTML este HTML definit ca o aplicație XML
XHTML este acceptat de toate browserele principale
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 Sintaxă
Un set de reguli CSS constă dintr-un selector și un bloc de declarații.
Selectorul indică elementul HTML pe care doriți să-l creeze în stil.
Blocul de declarație conține una sau mai multe declarații separate prin punct și virgulă.
Fiecare declarație include un nume de proprietate CSS și o valoare, separate de două puncte.
O declarație CSS se încheie întotdeauna cu punct și virgulă, iar blocurile de declarație sunt înconjurate de acolade.
Comentariile sunt utilizate pentru a explica codul și pot fi utile atunci când editați codul sursă la o dată ulterioară.
Comentariile sunt ignorate de browsere.
Un comentariu CSS începe cu / * și se termină cu * /. De asemenea, comentariile pot cuprinde mai multe linii.
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 Link-uri
Cu CSS, linkurile pot fi proiectate în moduri diferite.
Styling Links.
Linkurile pot fi realizate cu orice proprietate CSS (de exemplu, culoare, familie de fonturi, fundal etc / color, font-family, background).
În plus, legăturile (linkurile) pot fi proiectate diferit în funcție de starea în care se află.
Cele patru stări de legături (linkuri) sunt:
a: link - o legătură normală, nevăzută.
a:visited - un link pe care l-a vizitat utilizatorul.
a: hover - o legătură atunci când utilizatorul dă peste ea.
a: active - un link în momentul în care este dat click.
Când setați stilul pentru mai multe stări de legătură, există câteva reguli de comandă:
a: hover - TREBUIE să vină după a:link și a:visited.
a: active - TREBUIE să vină după a:hover.
Decorarea textului (Text Decoration).
Proprietatea text-decoration este utilizată mai ales pentru a elimina sublinierile din link-uri.
Culoare de fundal (Background Color)
Proprietatea background-color poate fi utilizată pentru a specifica o culoare de fundal pentru link-uri.
Advanced - Link Buttons.
CSS Pseudo-clase
Ce sunt Pseudo-clasele?
O pseudo-clasă este utilizată pentru a defini o stare specială a unui element.
De exemplu, poate fi folosit pentru:
Stilează un element atunci când un utilizator trece cu mouseul peste el.
Stileaza linkurile vizitate și nevizitate diferit.
Stilează un element când se focusează.
Pseudo-clase ancorare
Linkurile pot fi afișate în diferite moduri.
a: hover TREBUIE să vină după a:link și a:visited în definiția CSS pentru a fi eficiente! a: active TREBUIE să vină după a:hover în definiția CSS pentru a fi eficient! Numele pseudo-class nu sunt case-sensitive.
Pseudo-clase și clase CSS
Pseudo-clasele pot fi combinate cu clase CSS.
Hover pe <div>
Simple Tooltip Hover
Hover peste un element <div> pentru a afișa un element <p> (cum ar fi un tooltip).
Pseudo-clasa CSS - :first-child
Pseudo-clasa :first-child se potrivește cu un element specificat care este primul copil al unui alt element.
Potriviți primul element <p>.
Potriviți primul element <i> din toate elementele <p>.
Potriviți toate elementele <i> din toate elementele primului copil <p>.
Pseudo-clasa CSS - :lang
Pseudo-clasa CSS - :lang vă permite să definiți reguli speciale pentru diferite limbi.
:lang definește ghilimele pentru elementele <q> cu lang = "no".
Toate clasele CSS Pseudo. Toate elementele CSS Pseudo.
CSS Contoare
Contoare CSS
Contoarele CSS sunt „variabile” menținute de CSS ale căror valori pot fi incrementate prin reguli CSS (pentru a urmări de câte ori sunt utilizate). Contoarele vă permit să ajustați aspectul conținutului în funcție de plasarea acestuia în document.
Numerotare automată cu contoare
Contoarele CSS sunt ca „variabile”. Valorile variabilei pot fi incrementate prin reguli CSS (care vor urmări de câte ori sunt utilizate).
Pentru a lucra cu contoarele CSS vom folosi următoarele proprietăți:
counter-reset - Creează sau resetează un contor
counter-increment - Crește o valoare a contorului
content - Inserează conținut generat
counter() or counters() function - Adăugă valoarea unui contor la un element
Pentru a utiliza un contor CSS, acesta trebuie mai întâi creat cu counter-reset.
Creează un contor pentru pagină (în selectorul body), apoi crește valoarea contorului pentru fiecare element <h2> și adaugă "Secțiunea <valoarea contorului>:" la începutul fiecărui element <h2>.
Nesting Counters
Creează un contor pentru pagină (section) și un contor pentru fiecare element <h1> (subsection). Contorul „section” va fi contorizat pentru fiecare element <h1> cu „secțiunea <valoarea secțiunii contorului>.”, Iar contorul „subsection” va fi contorizat pentru fiecare element <h2> cu „<valoarea contorului de secțiuni >. <valoarea contorului de subsecțiuni> ".
Un contor poate fi de asemenea util pentru a crea liste conturate, deoarece o nouă instanță a unui contor este creată automat în elementele copil. Folosim funcția counters() pentru a insera o șir între diferitele niveluri de nested counters.
content - Folosit cu pseudo-elementele ::before și ::after, pentru a insera conținut generat
counter-increment - Crește una sau mai multe valori ale contorului
counter-reset - Creează sau resetează unul sau mai multe contoare
CSS Specificitate
Specificitatea CSS
Dacă există două sau mai multe reguli CSS conflictuale care indică același element, browserul respectă câteva reguli pentru a determina care este cea mai specifică și, prin urmare, câștigă.
Gândiți-vă la specificitate ca punctaj / rang care determină ce declarații de stil sunt aplicate unui element în cele din urmă.
Selectorul universal (*) are specificitate scăzută, în timp ce selectoarele ID sunt foarte specifice!
Specificitatea este un motiv comun pentru care regulile CSS nu se aplică anumitor elemente, deși credeți că ar trebui.
Ierarhia specificității (Specificity Hierarchy)
Fiecare selector își are locul în ierarhia specificității. Există patru categorii care definesc nivelul de specificitate al unui selector:
Stiluri în linie (Inline styles) - Un stil inline este atașat direct la elementul care urmează să fie stilat. Exemplu: <h1 style = "color: #ffffff;">.
ID-uri (IDs) - Un ID este un identificator unic pentru elementele paginii, cum ar fi #navbar.
Clase, atribute și pseudo-clase - Această categorie include .classes, [attributes] and pseudo-classes, cum ar fi :hover, :focus etc.
Elemente și pseudo-elemente - Această categorie include nume de elemente și pseudo-elemente, cum ar fi h1, div, :before și :after.
Cum se calculează specificitatea?
Memorează cum să calculezi specificitatea!
Începeți de la 0, adăugați 1000 pentru atributul style, adăugați 100 pentru fiecare ID, adăugați 10 pentru fiecare atribut, clasă sau pseudo-clasă, adăugați 1 pentru fiecare nume de element sau pseudo-element.
Specificitatea lui A este 1 (un element)
Specificitatea lui B este 101 (o referință ID și un element)
Specificitatea C este 1000 (stil în linie)
De la 1 <101 <1000, a treia regulă (C) are un nivel mai mare de specificitate și, prin urmare, va fi aplicată.
Reguli de specificitate (Specificity Rules)
Specificitate egală: ultima regulă contează - Dacă aceeași regulă este scrisă de două ori în foaia de stil externă (external style sheet), atunci regula inferioară din foaia de stil (style sheet) este mai aproape de elementul care trebuie stilizat și, prin urmare, va fi aplicată.
Ultima regulă este întotdeauna aplicată.
Selectoarele ID au o specificitate mai mare decât selectoarele de atribute.
Prima regulă este mai specifică decât celelalte două și va fi aplicată.
Selectoarele contextuale sunt mai specifice decât un singur selector de elemente - Foaia de stil încorporată este mai aproape de elementul care urmează să fie stilat.
Ultima normă va fi aplicată.
Un selector de clasă bate orice număr de selectori de elemente - un selector de clase, cum ar fi .intro beats h1, p, div, etc.
Selectorul universal și valorile moștenite au o specificitate de 0 - *, body * și similare au o specificitate zero. Valorile moștenite au, de asemenea, o specificitate de 0.
CSS Colțuri rotunjite
CSS Colțuri rotunjite
Cu proprietatea CSS border-radius, puteți da oricărui element "colțuri rotunjite" (rounded corners).
Proprietate CSS border-radius
Proprietatea CSS border-radius definește raza colțurilor unui element.
Această proprietate vă permite să adăugați colțuri rotunjite la elemente!
Colțuri rotunjite (rounded corners) pentru un element cu o culoare de fundal specificată.
Colțuri rotunjite (rounded corners) pentru un element cu bordură.
Colțuri rotunjite (rounded corners) pentru un element cu o imagine de fundal.
Proprietatea „border-radius” este de fapt o proprietate de tip shorthand pentru proprietățiile border-top-left-radius, border-top-right-radius, border-bottom-right-radius și border-bottom-left-radius.
CSS border-radius - Specificați fiecare colț
Proprietatea border-radius poate avea de la una până la patru valori.
Patru valori - border-radius: 15px 50px 30px 5px; (prima valoare se aplică colțului din stânga sus(top-left corner), a doua valoare se aplică colțului din dreapta sus(top-right corner), a treia valoare se aplică colțului din dreapta jos(bottom-right corner) și a patra valoare se aplică colțului din stânga jos(bottom-left corner)).
Trei valori - border-radius: 15px 50px 30px; (prima valoare se aplică colțului din stânga sus(top-left corner), a doua valoare se aplică colțurilor din dreapta sus și din stânga jos(top-right și bottom-left corners) și a treia valoare se aplică colțului din dreapta jos(bottom-right corner)).
Două valori - border-radius: 15px 50px; (prima valoare se aplică colțurilor din stânga sus și din dreapta jos(top-left și bottom-right corners), iar a doua valoare se aplică colțurilor din dreapta sus și din stânga jos(top-right și bottom-left corners)).
O valoare - border-radius: 15px; (valoarea se aplică la toate cele patru colțuri, care sunt rotunjite în mod egal).
Proprietăți CSS Rounded Corners
border-radius O proprietate shorthand pentru setarea tuturor celor patru chenare - * - * - proprietăți radius.
border-top-left-radius Definește forma marginii din colțul din stânga sus.
border-top-right-radius Definește forma marginii din colțul din dreapta sus.
border-bottom-right-radius Definește forma marginii din colțul din dreapta jos.
border-bottom-left-radius Definește forma marginii din colțul din stânga jos.
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 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 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 Interogări media
CSS Interogări media (CSS Media Queries)
CSS2 Tipuri de suport introduse (CSS2 Introduced Media Types)
Regula @media, introdusă în CSS2, a făcut posibilă definirea regulilor de stil (style rules) diferite pentru diferite tipuri de media.
Ați putea avea un set de reguli de stil (style rules) pentru ecrane de computer, una pentru imprimante, una pentru dispozitive portabile, una pentru dispozitive tip televizor și așa mai departe.
Din păcate, aceste tipuri de suporturi nu au primit niciodată multă asistență din partea dispozitivelor, în afară de tipul de printare (print media type).
CSS3 Interogări media introduse (CSS3 Introduced Media Queries)
Interogările media (Media queries) din CSS3 au extins ideea tipurilor de media CSS2: În loc să caute un tip de dispozitiv, ele analizează capacitatea dispozitivului.
Interogările media (Media queries) pot fi utilizate pentru a verifica multe lucruri, cum ar fi:
lățimea și înălțimea vizualizării (width and height of the viewport)
lățimea și înălțimea dispozitivului (width and height of the device)
orientare (tableta / telefonul este în mod landscape sau portret?) (orientation (is the tablet/phone in landscape or portrait mode?))
rezoluţie (resolution)
Asistență browser(Browser Support)
Numerele din tabel specifică prima versiune a browserului care acceptă integral regula @media.
Sintaxa interogare media (Media Query Syntax)
O interogare media (media query) constă dintr-un tip media și poate conține una sau mai multe expresii, care se rezolvă returnand fie valoarea adevărat, fie valoarea fals.
Rezultatul interogării este adevărat dacă tipul de media (media type) specificat se potrivește cu tipul de dispozitiv pe care este afișat documentul și toate expresiile din interogarea media (media query) sunt adevărate. Când o interogare media (media query) este adevărată, se aplică foaia de stil (stylesheets) sau regulile de stil (style rules) corespunzătoare, urmând regulile normale în cascadă.
Cu excepția cazului în care utilizați operatorii not sau only, tipul media este opțional și tot tipul va fi implicat.
Puteți avea, de asemenea, foi de stil (stylesheets) diferite pentru media diferite.
CSS3 Tipuri media (CSS3 Media Types)
all - Utilizat pentru toate dispozitivele de tip media
print - Utilizat pentru imprimante
screen - Utilizat pentru ecrane, tablete, telefoane inteligente etc.
speach - Utilizată pentru ecranizatorii care „citesc” pagina cu voce tare
O modalitate de a utiliza interogări media (media queries) este să aveți o secțiune CSS alternativă chiar în foaia de stil (style sheet).
CSS Responsive Web Design - Viewport
Responsive Web Design - Viewport
Ce este Viewport?
Viewport este zona vizibilă a utilizatorului unei pagini web.
Viewportul variază în funcție de dispozitiv și va fi mai mic pe un telefon mobil decât pe un ecran al computerului.
Înainte de tablete și telefoane mobile, paginile web erau concepute doar pentru ecranele computerului și era comun ca paginile web să aibă un design static și o dimensiune fixă.
Apoi, când am început să navigăm pe internet folosind tablete și telefoane mobile, paginile web cu dimensiuni fixe erau prea mari pentru a se potrivi cu ecranul. Pentru a remedia acest lucru, browserele de pe aceste dispozitive au redus întreaga pagină web pentru a se potrivi ecranului.
Nu a fost perfect !! Dar o rezolvare rapidă.
Setarea Viewport
HTML5 a introdus o metodă pentru a permite proiectanților web să preia controlul asupra viewport-ului, prin intermediul etichetei <meta>.
Ar trebui să includeți următorul element viewport <meta> în toate paginile dvs. web.
Un element viewport <meta> oferă instrucțiuni browserului cu privire la modul de control al dimensiunilor și scalării paginii.
width=device-width part stabilește lățimea paginii pentru a urma lățimea ecranului dispozitivului (screen-width) (care va varia în funcție de dispozitiv).
initial-scale=1.0 setează nivelul inițial de zoom atunci când pagina este încărcată prima dată de browser.
Iată un exemplu de pagină web fără viewport meta tag și aceeași pagină web cu viewport meta tag.
Mărimea conținutului la Viewport (Size Content to The Viewport)
Utilizatorii sunt folosiți pentru a derula site-urile pe verticală atât pe desktop cât și pe dispozitive mobile - dar nu pe orizontală!
Așadar, dacă utilizatorul este obligat să defileze orizontal sau să mărească, pentru a vedea întreaga pagină web, rezultă o experiență slabă a utilizatorului.
Câteva reguli suplimentare de urmat:
NU folosiți elemente cu lățime fixă mare - De exemplu, dacă o imagine este afișată la o lățime mai largă decât cea din portofoliu, aceasta poate determina derularea portofoliului pe orizontală. Nu uitați să ajustați acest conținut pentru a se încadra în lățimea vizualizării.
NU lăsați conținutul să se bazeze pe o anumită lățime a viewportului (viewport width) pentru a fi redat - Deoarece dimensiunile ecranului și lățimea în pixeli CSS variază foarte mult între dispozitive, conținutul nu ar trebui să se bazeze pe o anumită lățime a viewportului pentru a fi redat.
Utilizați interogări CSS media (media queries) pentru a aplica stiluri diferite pentru ecrane mici și mari - Setarea lățimilor CSS mari pentru elementele paginii va face ca elementul să fie prea larg pentru viewport de pe un dispozitiv mai mic. În schimb, luați în considerare utilizarea unor valori de lățime relative, cum ar fi lățimea: 100%. De asemenea, aveți grijă să folosiți valori mari de poziționare absolută. Poate determina elementul să iasă în afara ecranului pe dispozitive mici.
SQL Restricții
SQL Constraints
Limitările SQL
Restricțiile SQL sunt utilizate pentru a specifica regulile pentru datele dintr-un tabel.
SQL Creare constrângeri
Constrângerile pot fi specificate atunci când tabela este creată cu instrucțiunea CREATE TABLE sau după crearea tabelului cu instrucțiunea ALTER TABLE.
Sintaxă
CREATE TABLE table_name (
column1 datatype constraint,
column2 datatype constraint,
column3 datatype constraint,
....
);
Limitările SQL
Restricțiile SQL sunt utilizate pentru a specifica regulile pentru datele dintr-un tabel.
Constrângerile sunt utilizate pentru a limita tipul de date care poate intra într-un tabel. Aceasta asigură precizia și fiabilitatea datelor din tabel. Dacă există o încălcare între constrângere și acțiunea de date, acțiunea este anulată.
Constrângerile pot fi la nivel de coloană sau de tabel. Restricțiile de nivel de coloană se aplică unei coloane și restricțiile de nivel de tabel se aplică întregii tabele.
Următoarele constrângeri sunt utilizate în mod obișnuit în SQL:
NOT NULL - Se asigură că o coloană nu poate avea o valoare NULL
UNIQUE - Se asigură că toate valorile dintr-o coloană sunt diferite
PRIMARY KEY - O combinație între NOT NULL ȘI UNIQUE. Identifică în mod unic fiecare rând dintr-un tabel
FOREIGN KEY - Identifică un rând / o înregistrare într-un alt tabel
CHECK - Se asigură că toate valorile dintr-o coloană îndeplinesc o condiție specifică
DEFAULT - Setează o valoare implicită pentru o coloană atunci când nu este specificată nicio valoare
INDEX - Folosit pentru a crea și recupera rapid datele din baza de date
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 Numere
PHP Numbers
În acest capitol vom analiza în profunzime Integers, Floats și Number Strings.
Numere PHP
Un lucru de remarcat cu privire la PHP este că oferă conversie automată de tip de date (automatic data type conversion).
Deci, dacă atribuiți o valoare integer (valoare întreagă) unei variabile, tipul acelei variabile va fi automat un integer (număr întreg). Apoi, dacă atribuiți un string (șir) aceleiași variabile, tipul se va schimba la un string (șir).
Această conversie automată îți poate sparge codul.
PHP Integers
Un integer (număr întreg) este un număr fără nicio parte zecimală.
2, 256, -256, 10358, -179567 sunt integers (întregi). În timp ce 7.56, 10.0, 150.67 sunt floats.
Deci, un tip de date întreg (integer data type) este un număr non-zecimal cuprins între -2147483648 și 2147483647. O valoare mai mare (sau mai mică) decât aceasta, va fi stocată ca float, deoarece depășește limita unui integer (număr întreg).
Un alt lucru important de știut este că, chiar dacă 4*2,5 este 10, rezultatul este stocat sub formă de float, deoarece unul dintre operanzi este un float (2.5).
Iată câteva reguli pentru integers (numere întregi):
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 pot fi specificate în trei formate: zecimale (baza 10), hexazecimale (baza 16 - prefix 0x) sau octale (baza 8 - prefix 0)
PHP are următoarele funcții pentru a verifica dacă tipul unei variabile este integer (întreg):
is_int()
is_integer() - alias of is_int()
is_long() - alias of is_int()
Verificați dacă tipul unei variabile este integer (întreg):
<?php
$x = 5985;
var_dump(is_int($x));
$x = 59.85;
var_dump(is_int($x));
?>
PHP Floats
Un float este un număr cu un punct zecimal sau un număr în formă exponențială.
2.0, 256.4, 10.358, 7.64E + 5, 5.56E-5 sunt toate floats.
Tipul de date (data type) float poate stoca de obicei o valoare de până la 1.7976931348623E + 308 (dependentă de platformă) și are o precizie maximă de 14 cifre.
PHP are următoarele funcții pentru a verifica dacă tipul unei variabile este float:
is_float()
is_double() - alias of is_float()
Verificați dacă tipul unei variabile este float:
<?php
$x = 10.365;
var_dump(is_float($x));
?>
PHP Infinity
O valoare numerică mai mare decât PHP_FLOAT_MAX este considerată infinită.
PHP are următoarele funcții pentru a verifica dacă o valoare numerică este finită sau infinită:
is_finite()
is_infinite()
Cu toate acestea, funcția PHP var_dump() returnează tipul (data type) și valoarea datelor:
Verificați dacă o valoare numerică este finită sau infinită:
<?php
$x = 1.9e411;
var_dump($x);
?>
PHP NaN
NaN semnifică Not Number.
NaN este utilizat pentru operații matematice imposibile.
PHP are următoarele funcții pentru a verifica dacă o valoare nu este un număr:
is_nan()
Cu toate acestea, funcția PHP var_dump() returnează tipul și valoarea datelor:Calculul invalid va returna o valoare NaN:
<?php
$x = acos(8);
var_dump($x);
?>
PHP Numerical Strings
Funcția PHP is_numeric() poate fi utilizată pentru a afla dacă o variabilă este numerică. Funcția returnează true dacă variabila este un număr sau un șir numeric, false altfel.
Verificați dacă variabila este numerică:
<?php
$x = 5985;
var_dump(is_numeric($x));
$x = "5985";
var_dump(is_numeric($x));
$x = "59.85" + 100;
var_dump(is_numeric($x));
$x = "Hello";
var_dump(is_numeric($x));
?>
De la PHP 7.0: Funcția is_numeric() va returna FALSE pentru șirurile numerice (numeric strings) în formă hexazecimală (de exemplu, 0xf4c3b00c), deoarece nu mai sunt considerate șiruri numerice (numeric strings).
PHP Casting Strings and Floats to Integers
Uneori, trebuie să convertiți o valoare numerică într-un alt tip de date (data type).
Funcția (int), (integer) sau intval() sunt adesea folosite pentru a converti o valoare (value) într-un număr întreg (integer).
Convertiți float și string la integer:
<?php
// Cast float to int
$x = 23465.768;
$int_cast = (int)$x;
echo $int_cast;
echo "<br>";
// Cast string to int
$x = "23465.768";
$int_cast = (int)$x;
echo $int_cast;
?>
PHP Validare formular
Validare formular PHP
Acesta și capitolele următoare arată cum să folosești PHP pentru a valida datele formularului.
Validare formular PHP
Gândiți-vă la SECURITATE când prelucrați formularele PHP!
Aceste pagini vor arăta cum să procesați formularele PHP din punct de vedere al securitatii. Validarea corectă a datelor din formular este importantă pentru a vă proteja formularul de hackeri și spameri!
Formularul HTML la care vom lucra în aceste capitole, conține diferite câmpuri de introducere: câmpuri de text obligatorii și opționale, butoane radio și un buton de trimitere (required and optional text fields, radio buttons, and a submit button):
Name - Obligatoriu. + Trebuie să conțină doar litere și spațiu alb
E-mail - Obligatoriu. + Trebuie să conțină o adresă de e-mail validă (cu @ și.)
Website - Obligatoriu. Dacă este prezent, trebuie să conțină o adresă URL validă
Comment - Opțional. Câmp de introducere pe mai multe linii (textarea)
Sex - Obligatoriu. Trebuie să selectați una
Mai întâi vom analiza codul HTML simplu pentru formular:
Câmpuri text (Text Fields)
Câmpurile nume, e-mail și website sunt elemente de introducere ale textului (input elements), iar câmpul de comentarii este textarea. Codul HTML arată astfel:
Nume: <input type="text" name="name">
E-mail: <input type="text" name="email">
Website: <input type="text" name="website">
Comment: <textarea name="comment" rows="5" cols="40"></textarea>
Butoane radio (Radio Buttons)
Câmpurile gen (gender fields) sunt butoane radio, iar codul HTML arată astfel:
Gen:
<input type="radio" name="gender" value="female">Femeie
<input type="radio" name="gender" value="male">Bărbat
<input type="radio" name="gender" value="other">Altele
Elementul form (The Form Element)
Codul HTML al formularului arată astfel:
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Când formularul este trimis, datele formularului sunt trimise cu method = "post".
Ce este variabila $_SERVER["PHP_SELF"] ?
$_SERVER["PHP_SELF"] este o variabilă super globală care returnează numele de fișier al scriptului care se execută în prezent.
Așadar, $_SERVER["PHP_SELF"] trimite datele formularului (submitted form data) trimis către pagina în sine, în loc să sară pe o altă pagină. În acest fel, utilizatorul va primi mesaje de eroare pe aceeași pagină ca și formularul.
Ce este funcția htmlspecialchars()?
Funcția htmlspecialchars() convertește caracterele speciale în entități HTML. Aceasta înseamnă că va înlocui caractere HTML precum <and> cu < și >. Acest lucru împiedică atacatorii să exploateze codul prin injectarea codului HTML sau a javascriptului (Cross-site Scripting attacks) în formulare.
Notă imporantă privind securitatea formularului PHP
Variabila $_SERVER["PHP_SELF"] poate fi utilizată de hackeri!
Dacă PHP_SELF este utilizat în pagina dvs., un utilizator poate introduce un slash (/) și apoi unele comenzi de Cross Site Scripting (XSS) pentru a executa.
Scripturi încrucișate (Cross-site scripting) (XSS) este un tip de vulnerabilitate a securității computerului care se găsește de obicei în aplicațiile Web. XSS le permite atacatorilor să injecteze scripturi din partea clientului în paginile Web vizualizate de alți utilizatori.
Presupunem că avem următorul formular într-o pagină numită "test_form.php":
<form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
Acum, dacă un utilizator introduce URL-ul normal în bara de adrese precum "http://www.example.com/test_form.php", codul de mai sus va fi tradus în:
<form method="post" action="test_form.php">
Până acum, bine.
Cu toate acestea, considerați că un utilizator introduce următoarea adresă URL în bara de adrese:
http://www.example.com/test_form.php/%22%3E%3Cscript%3Ealert('hacked')%3C/script%3E
În acest caz, codul de mai sus va fi tradus în:
<form method="post" action="test_form.php/"><script>alert('hacked')</script>
Acest cod adaugă o etichetă script (script tag) și o comandă de alertă (alert command). Și atunci când pagina se încarcă, codul JavaScript va fi executat (utilizatorul va vedea o casetă de alertă (alert box)). Acesta este doar un exemplu simplu și inofensiv cum poate fi exploatată variabila PHP_SELF.
Fiți conștienți de faptul că orice cod JavaScript poate fi adăugat în eticheta <script>! Un hacker poate redirecționa utilizatorul către un fișier de pe alt server, iar respectivul fișier poate conține cod rău intenționat care poate modifica variabilele globale sau poate trimite formularul la o altă adresă pentru a salva datele utilizatorului, de exemplu.
Cum să evitați exploatările $_SERVER["PHP_SELF"]?
Exploatările $_SERVER["PHP_SELF"] pot fi evitate folosind funcția htmlspecialchars().
Codul formularului ar trebui să arate astfel:
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Funcția htmlspecialchars() convertește caracterele speciale în entități HTML. Acum, dacă utilizatorul încearcă să exploateze variabila PHP_SELF, va rezulta următoarea ieșire (output):
<form method="post" action="test_form.php/"><script>alert('hacked')</script>">
Validați datele formularului cu PHP
Primul lucru pe care îl vom face este să trecem toate variabilele prin funcția PHP htmlspecialchars().
Când folosim funcția htmlspecialchars(); atunci dacă un utilizator încearcă să trimită următoarele într-un câmp text:
<script>location.href('http://www.hacked.com')</script>
- acest lucru nu ar fi executat, deoarece va fi salvat ca și cod HTML scăpat, astfel:
<script>location.href('http://www.hacked.com')</script>
Codul este acum sigur pentru a fi afișat pe o pagină sau în interiorul unui e-mail.
De asemenea, vom face alte două lucruri atunci când utilizatorul va trimite formularul:
Scoateți caracterele inutile (spațiu suplimentar, filă, linie nouă (extra space, tab, newline)) din datele de intrare ale utilizatorului (cu funcția PHP trim() )
Eliminați backslashes (\) din datele de intrare ale utilizatorului (cu funcția PHP stripslashes())Următorul pas este să creem o funcție care să facă toate verificările pentru noi (ceea ce este mult mai convenabil decât scrierea aceluiași cod încă o dată).
Vom numi funcția test_input().
Acum, putem verifica fiecare variabilă $_POST cu funcția test_input(), iar scriptul va arata astfel:
<?php
// definiți variabilele și setați valorile goale
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = test_input($_POST["name"]);
$email = test_input($_POST["email"]);
$website = test_input($_POST["website"]);
$comment = test_input($_POST["comment"]);
$gender = test_input($_POST["gender"]);
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
Observați că la începutul scriptului, verificăm dacă formularul a fost trimis folosind $_SERVER ["REQUEST_METHOD"]. Dacă REQUEST_METHOD este POST, atunci formularul a fost trimis - și ar trebui validat. Dacă nu a fost trimis, săriți validarea și afișați un formular necompletat.
Cu toate acestea, în exemplul de mai sus, toate câmpurile de introducere sunt opționale. Scriptul funcționează bine chiar dacă utilizatorul nu introduce date.
Următorul pas este de a face necesare câmpurile de intrare și de a crea mesaje de eroare, dacă este nevoie.
PHP Formular Obligatoriu
Formulare PHP - Câmpuri obligatorii (PHP Forms - Required Fields)
Acest capitol arată cum se pot face câmpurile de intrare necesare (input fields required) și se pot crea mesaje de eroare (error messages), dacă este nevoie.
PHP - Câmpuri obligatorii (PHP - Required Fields)
Din tabelul cu regulile de validare din pagina anterioară, vedem că sunt obligatorii câmpurile „Nume”, „E-mail” și „Gen”. Aceste câmpuri nu pot fi goale și trebuie completate în formularul HTML.
Nume- Obligatoriu. Trebuie să conțină doar litere și spațiu alb.
E-mail - Obligatoriu. Trebuie să conțină o adresă de e-mail validă (cu @ și.).
Website - Opțional. Dacă este prezent, trebuie să conțină o adresă URL validă.
Comentariu - Opțional. Câmp de introducere pe mai multe linii (textarea).
Gen - Obligatoriu. Trebuie să selectați unul.
În capitolul precedent, toate câmpurile de intrare (input fields) au fost opționale.
În codul următor, am adăugat câteva variabile noi: $nameErr, $emailErr, $genderErr și $websiteErr $. Aceste variabile de eroare (error variables) vor conține mesaje de eroare (error messages) pentru câmpurile necesare (required fields). Am adăugat, de asemenea, o instrucțiune if else pentru fiecare variabilă $_POST. Se verifică dacă variabila $_POST este goală (cu funcția PHP empty()). Dacă este gol, un mesaj de eroare (error message) este stocat în diferite variabile de eroare (error variables) și, dacă nu este gol, trimite datele de intrare (input data) ale utilizatorului prin funcția test_input():
<?php
// definiți variabilele și setați valorile goale
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = test_input($_POST["name"]);
}
if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["email"]);
}
if (empty($_POST["website"])) {
$website = "";
} else {
$website = test_input($_POST["website"]);
}
if (empty($_POST["comment"])) {
$comment = "";
} else {
$comment = test_input($_POST["comment"]);
}
if (empty($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["gender"]);
}
}
?>
PHP - Afișează mesajele de eroare (PHP - Display The Error Messages)
Apoi, în formularul HTML, adăugăm putin de script după fiecare câmp necesar (required field), care generează mesajul de eroare (error message) corect dacă este necesar (adică dacă utilizatorul încearcă să trimită formularul fără a completa câmpurile necesare (required fields)):
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Nume: <input type="text" name="name">
<span class="error">* <?php echo $nameErr;?></span>
<br><br>
E-mail:
<input type="text" name="email">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Website:
<input type="text" name="website">
<span class="error"><?php echo $websiteErr;?></span>
<br><br>
Coment: <textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
Gen:
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="other">Other
<span class="error">* <?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
Următorul pas este validarea datelor de intrare (input data), adică „Conține câmpul Nume doar litere și spațiu alb?”, iar „Conține câmpul E-mail o sintaxă a adresei de e-mail validă?”, iar dacă este completat, ”Conține câmpul Website o adresă URL validă? ".
PHP Fișierul Upload
PHP Încărcare fișier (PHP File Upload)
Cu PHP, este ușor să încărcați fișiere pe server.
Cu toate acestea, cu ușurință apare un pericol, așa că întotdeauna aveți grijă atunci când permiteți încărcarea fișierelor!
Configurați fișierul "php.ini"
În primul rând, asigurați-vă că PHP este configurat pentru a permite încărcarea fișierelor.
În fișierul dvs. "php.ini", căutați directiva file_uploads și setați-l pe On:
file_uploads = On
Creați formularul HTML
Apoi, creați un formular HTML care permite utilizatorilor să aleagă fișierul imagine (image file ) pe care doresc să îl încarce:
<!DOCTYPE html>
<html>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
Selectați imaginea de încărcat:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Încărcați imaginea" name="submit">
</form>
</body>
</html>
Câteva reguli de urmat pentru formularul HTML de mai sus:
Asigurați-vă că formularul folosește method="post"
De asemenea, formularul are nevoie de următorul atribut: enctype = "multipart/form-data". Acesta specifică ce tip de conținut (content-type) trebuie utilizat la trimiterea formularului
Fără cerințele de mai sus, încărcarea fișierului nu va funcționa.
Alte lucruri de remarcat:
Atributul type="file" al etichetei (tag) <input> arată câmpul de intrare (input field) ca un control de selectare a fișierelor (file-select control), cu un buton "Browse" lângă controlul de intrare
Formularul de mai sus trimite date unui fișier numit „upload.php”, pe care îl vom crea în continuare.
PHP Creați scriptul de încărcare (Create The Upload File PHP Script)
Fișierul "upload.php" conține codul pentru încărcarea unui fișier:
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Verificați dacă fișierul imagine este o imagine reală sau o imagine falsă
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "Fișierul este o imagine - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "Fișierul nu este o imagine.";
$uploadOk = 0;
}
}
?>
Script PHP explicat:
$target_dir = "uploads/" - specifică directorul în care urmează să fie plasat fișierul
$target_file - specifică calea fișierului care va fi încărcat
$uploadOk=1 - nu este încă utilizat (va fi folosit ulterior)
$imageFileType - reține extensia fișierului (în minuscule/lower case)
În continuare, verificați dacă fișierul imagine este o imagine reală sau o imagine falsă
Va trebui să creați un nou director numit „uploads” în directorul în care se află fișierul „upload.php”. Fișierele încărcate vor fi salvate acolo.
Verificați dacă fișierul există deja
Acum putem adăuga câteva restricții.
În primul rând, vom verifica dacă fișierul există deja în folderul „uploads”. În acest caz, este afișat un mesaj de eroare și $uploadOk este setat la 0:
// Verificați dacă fișierul există deja
if (file_exists($target_file)) {
echo "Ne pare rău, fișierul există deja.";
$uploadOk = 0;
}
Limitați dimensiunea fișierului (Limit File Size)
Câmpul de introducere (input field) a fișierului în formularul nostru HTML de mai sus este denumit "fileToUpload".
Acum, vrem să verificăm dimensiunea fișierului. Dacă fișierul este mai mare de 500KB, este afișat un mesaj de eroare și
$uploadOk este setat la 0:
// Verificați dimensiunea fișierului
if ($_FILES["fileToUpload"]["size"] > 500000) {
echo "Ne pare rău, fișierul dvs. este prea mare.";
$uploadOk = 0;
}
// Permiteți anumite formate de fișiere
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "Ne pare rău, sunt permise doar fișierele JPG, JPEG, PNG și GIF.";
$uploadOk = 0;
}
Încărcați complet scriptul PHP (Complete Upload File PHP Script)
Fișierul complet "upload.php" arată acum astfel:
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Verificați dacă fișierul imagine este o imagine reală sau o imagine falsă
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "Fișierul este o imagine - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "Fișierul nu este o imagine.";
$uploadOk = 0;
}
}
// Verificați dacă fișierul există deja
if (file_exists($target_file)) {
echo "Ne pare rău, fișierul există deja.";
$uploadOk = 0;
}
// Verificați dimensiunea fișierului
if ($_FILES["fileToUpload"]["size"] > 500000) {
echo "Ne pare rău, fișierul dvs. este prea mare.";
$uploadOk = 0;
}
// Permiteți anumite formate de fișiere
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "Ne pare rău, sunt permise doar fișierele JPG, JPEG, PNG și GIF.";
$uploadOk = 0;
}
// Verificați dacă $uploadOk este setat la 0 printr-o eroare
if ($uploadOk == 0) {
echo "Ne pare rău, fișierul dvs. nu a fost încărcat.";
// dacă totul este în regulă, încercați să încărcați fișierul
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "Fișierul ". basename( $_FILES["fileToUpload"]["name"]). " a fost încărcat.";
} else {
echo "Ne pare rău, a fost o eroare la încărcarea fișierului.";
}
}
?>
PHP OOP - Clase abstracte
PHP OOP - Clase abstracte
PHP - Care sunt clasele și metodele abstracte?
Clasele și metodele abstracte sunt atunci când clasa parent (părinte) are o metodă numită, dar au nevoie de o clasă (e) child (copil) pentru a finaliza sarcinile.
O clasă abstractă (abstract class) este o clasă care conține cel puțin o metodă abstractă (abstract method). O metodă abstractă (abstract method) este o metodă care este declarată, dar care nu este implementată în cod.
O clasă sau o metodă abstractă (abstract method) este definită de cuvântul cheie (keyword) abstract:
Sintaxă
<?php
abstract class ParentClass {
abstract public function someMethod1();
abstract public function someMethod2($name, $color);
abstract public function someMethod3() : string;
}
?>
La moștenirea (inheriting) de la o clasă abstractă (abstract class), metoda clasei copil (child class method) trebuie definită cu același nume și cu același modificator access mai puțin restricționat. Deci, dacă metoda abstractă (abstract method) este definită ca protejată, metoda clasei copil (child class method) trebuie definită fie protejată, fie publică, dar nu privată. De asemenea, tipul și numărul de argumente solicitate trebuie să fie aceleași. Cu toate acestea, clasele pentru copii (child classes) pot avea în plus argumente opționale.
Deci, atunci când o clasă de copii (child class) este moștenită (inherited) de la o clasă abstractă (abstract class), avem următoarele reguli:
Metoda clasei copil (child class method) trebuie definită cu același nume și redeclarea metodei abstracte părinte (parent abstract method).
Metoda clasei pentru copii (child class method) trebuie definită cu același sau cu un mai puțin restricționat modificator access.
Numărul de argumente solicitate trebuie să fie același. Cu toate acestea, clasa pentru copii (child class) poate avea în plus argumente opționale.
<?php
// Clasa părinte (Parent class)
abstract class Car {
public $name;
public function __construct($name) {
$this->name = $name;
}
abstract public function intro() : string;
}
// Clasele copil(Child classes)
class Audi extends Car {
public function intro() : string {
return "Alege calitatea germană! Sunt un $this->name!";
}
}
class Volvo extends Car {
public function intro() : string {
return "Mândru că sunt suedez! Sunt un $this->name!";
}
}
class Citroen extends Car {
public function intro() : string {
return "Extravaganța franceză! Sunt un a $this->name!";
}
}
// Creați obiecte din clasele copil (child classes)
$audi = new audi("Audi");
echo $audi->intro();
echo "<br>";
$volvo = new volvo("Volvo");
echo $volvo->intro();
echo "<br>";
$citroen = new citroen("Citroen");
echo $citroen->intro();
?>
Exemplu explicat
Clasele Audi, Volvo și Citroen sunt moștenite (inherited) de la clasa Auto. Aceasta înseamnă că clasele Audi, Volvo și Citroen pot utiliza proprietatea publică $name precum și metoda publică __construct() din clasa Car din cauza moștenirii (inheritance).
Dar, intro() este o metodă abstractă (abstract method) care ar trebui definită în toate clasele copil (child classes) și ar trebui să returneze un șir (string).
PHP - mai multe exemple de clase abstracte
Să ne uităm la un alt exemplu în care metoda abstractă (abstract method) are un argument:
<?php
abstract class ParentClass {
// Metoda abstractă (abstract method)cu un argument
abstract protected function prefixName($name);
}
class ChildClass extends ParentClass {
public function prefixName($name) {
if ($name == "Ion Popescu") {
$prefix = "Mr.";
} elseif ($name == "Ioana Popescu") {
$prefix = "Mrs.";
} else {
$prefix = "";
}
return "{$prefix} {$name}";
}
}
$class = new ChildClass;
echo $class->prefixName("Ion Popescu");
echo "<br>";
echo $class->prefixName("Ioana Popescu");
?>
<?php
abstract class ParentClass {
// Metoda abstractă (abstract method) cu un argument
abstract protected function prefixName($name);
}
class ChildClass extends ParentClass {
// Clasa copil (child class) poate defini argumente opționale care nu sunt în metoda abstractă a părintelui (parent's abstract method)
public function prefixName($name, $separator = ".", $greet = "Dear") {
if ($name == "Ion Popescu") {
$prefix = "Mr";
} elseif ($name == "Ioana Popescu") {
$prefix = "Mrs";
} else {
$prefix = "";
}
return "{$greet} {$prefix}{$separator} {$name}";
}
}
$class = new ChildClass;
echo $class->prefixName("Ion Popescu");
echo "<br>";
echo $class->prefixName("Ioana Popescu");
?>
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;
?>
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 15 sau grupa a V-a principală
Grupa a V-a principală a sistemului periodic, numerotată V A sau 15, cuprinde următoarele elemente: azot, N, fosfor, P, arsen, As, stibiu (antimoniu), Sb, și bismut, Bi.
Grupa 4 sau grupa a IV-a secundară
Grupa a IV-a secundară a sistemului periodic, numerotată IV B sau 4, cuprinde elementele rare titan, Ti, zirconiu, Zr, și hafniu, Hf.
