Rezultate pentru tag: surs
Propagarea luminii. Reflexia si refracţia.
Propagarea luminii în medii omogene: constanţa vitezei şi conceptul de rază de lumină. Legile reflexiei şi refracţiei. Reflexia totală: definiţie, aplicaţii.
Prisma. Oglinzi plane şi sferice.
Prisma optică. Formarea imaginilor. Oglinda plană. Oglinzi sferice: proprietăţi, construcţia imaginilor.
Interferenţa luminii. Dispozitivul Young.
Interferenţa staţionară: surse coerente; intensitate constantă; franje luminoase şi întunecate. Dispozitivul Young.
Interferometrele Lloyd şi Fresnel.
Interferometre nelocalizate: oglinda Lloyd, oglinzile Fresnel şi biprisma Fresnel.
Pana optică.
Interferometre cu interferenţă localizată. Pana optică: franje de egală grosime. Inelele Newton.
Difracţia luminii.
Definiţie, exemple. Franje de difracţie printr-o fantă. Reţele de difracţie.
Ecuaţia undei plane.
Deducerea ecuaţiei undei plane. Proprietăţile undei plane: periodicitatea, intensitatea.
Principiul Huygens. Reflexia undelor.
Principiul Huygens - propagarea frontului de undă. Reflexia undelor mecanice.
Ciclul Carnot.
Ciclul Carnot. Teorema Carnot: randament maxim. Motorul cu reacţie.
Entropia. Principiul II.
Entropia: definiţie, interpretare. Procese reversibile şi ireversibile. Principiul II al termodinamicii.
Tensiunea şi intensitatea.
Mecanismul de generare a curentului electric. Tensiunea electromotoare. Intensitatea curentului electric.
Rezistenţa. Legea Ohm.
Rezistenţa şi rezistivitatea electrica. Supraconductibilitatea. Legea Ohm pentru o porţiune şi pentru întregul circuit.
Legile Kirchhoff.
Reţele electrice. Legile Kirchhoff. Convenţii de semn. Exemplu de aplicare.
Gruparea generatoarelor.
Gruparea în serie şi paralel a generatoarelor. Metoda superpoziţiei de calcul a reţelelor.
Legea Joule. Electroliza.
Energia electrică – legea Joule. Puterea electrică. Randamentul electric. Efectul chimic - electroliza.
Puterea în curent alternativ.
Puterea momentană şi puterea medie. Interpretarea geometrică. Triunghiul puterilor: puterile activă, reactivă şi aparentă.
Oscilaţii electromagnetice.
Circuitul oscilant RLC. Oscilaţii electromagnetice libere, amortizate, forţate. Interpretarea energetică.
Circuitul oscilant deschis. Antene.
Circuitul oscilant deschis. Antene dipol de emisie şi recepţie. Clasificarea undelor electromagnetice.
Principiile Einstein. Transformările Lorentz.
Principiile Einstein ale relativităţii restrânse. Spaţiu-timpul în fizica relativistă. Transformările Lorentz. Relativitatea simultaneităţii.
Microscopul electronic.
Microscopul electronic: rezoluţia spaţială, funcţionare. Discuţie despre dualismul unda-corpuscul.
Aplicaţii ale diodei. Tranzistorul.
Aplicaţii ale diodei: dioda varicap, redresarea curentului alternativ. Tranzistorul cu efect de câmp.
Acceleratoare liniare de particule.
Acceleratoare de particule. Acceleratorul liniar rezonant. Sincronismul.
Celule electrochimice
Electrochimie. Celulă electrochimică. Elemente galvanice/voltaice. Conductori metalici şi electroliţi. Electrod, anod, catod. Semicelulă galvanică. Punte de sare. Procesele chimice care au loc la anod şi la catod. Simbolizarea unei celule electrochimice. Pile uscate/baterii. Pila Daniell.
Alcani – proprietăţi chimice
Reacţii care au loc cu scindarea legăturilor C – C. Reacţii care au loc cu scindarea legăturilor C – H. Arderea alcanilor. Reacţia de substituţie – halogenarea alcanilor. Reacţia de dehidrogenare – piroliza, cracarea. Izomerizarea alcanilor. Izomerizarea n-butanului. Cifra octanică a benzinelor. Solubilitatea alcanilor.
Zaharide - Glucoza
Compuşi organici cu acţiune biologică. Compuşi cu mai multe grupe funcţionale. Zaharide – polihidroxialdehide şi polihidroxicetone. Monozaharide. Zaharide de policondensare. Glucoza. Structura zaharidelor. Proiecţii Fischer – notaţii D şi L. Atom de carbon asimetric. Importanţa biologică a glucozei. Aplicaţiile practice ale glucozei.
Zaharide – produşi de policondensare ai monozaharidelor
Zaharoza – carcateristici şi aplicaţii practice. Zahăr rafinat şi zahăr nerafinat. Amidonul. Amiloza şi amilopectina. Surse de amidon. Fotosinteza. Celuloza. Surse de celuloză. Proprietăţi şi aplicaţii practice.
Zaharide
Fotosintesză, respiraţie. Funcţia zaharidelor în organismele vii. Monozaharide - aldoze, cetoze. D-glucoza, D-fructoza, D-riboza. Formule de proiecţie Fischer. Strucutra ciclică a D-glucozei şi D-ribozei. Adiţie intramoleculară. Semiacetali, semicetali. Anomer α, anomer β, mutarotaţie, centru anomeric. Ciclu piranozic, ciclu furanozic. Formule Haworth. Hidroxil glicozidic. Dizaharide - zaharoză. Polizaharide - amidon, celuloză.
Căldura de combustie
Combustie. Tipuri de combustibili. Entalpia de combustie standard. Ardere completă şi ardere incompletă. Căldura de combustie. Puterea calorică. Condiţii normale pentru măsurarea puterii calorice. Putere calorică inferioară şi putere calorică superioară.
Elemente de bază HTML
Toate documentele HTML trebuie să înceapă cu o declarație de tip document: <! DOCTYPE html>.
Tag-urile utilizate sunt: <html> și </html>, <body> și </body>, <h1> la <h6>,
<p> și </p>, <a> și </a>, <img>, <ul> și </ul>, <button> și </button>
Atribute HTML
Atributele oferă informații suplimentare despre elementele HTML.
Adresa de legătură este specificată în atributul href.
Numele de fișier al sursei imaginii este specificat în atributul src.
Atributele width și height, care specifică lățimea și înălțimea imaginii.
Atributul alt specifică un text alternativ care trebuie utilizat, dacă nu poate fi afișată o imagine.
Atributul style este utilizat pentru a specifica stilul unui element.
Limbajul este declarat cu atributul lang.
Atributul title este adaugat la elementul <p>.
Titluri HTML
Titlurile (headings) sunt definite cu etichete de la <h1> la <h6>.
Fiecare titlu (heading) HTML are o dimensiune implicită. Cu toate acestea, puteți specifica dimensiunea pentru orice titlu (heading) cu atributul style, folosind proprietatea CSS font-size.
Eticheta <hr> definește o pauză tematică într-o pagină HTML.
Elementul HTML <head> este un container pentru metadate.
Metadatele HTML sunt date despre documentul HTML.
Elementul <head> este plasat între eticheta <html> și eticheta <body>.
Vizualizarea codului sursă HTML se face cu View Page Source.
Inspectarea unui element HTML se face cu Inspect Element.
Paragrafe HTML
Elementul HTML <p> definește un alineat.
Elementul HTML <br> definește o pauză de linie (Line Break).
Folosiți <br> dacă doriți o pauză de linie (o linie nouă) fără a începe un nou paragraf.
Eticheta <br> este o etichetă goală, ceea ce înseamnă că nu are o etichetă finală.
Elementul HTML <pre> definește textul preformatat.
Elemente de citare și citate în HTML
Elementele de citare folosite în HTML sunt:
<q> definește un citat scurt.
<blockquote> definește o secțiune care este citată dintr-o altă sursă.
<abbr> definește o prescurtare sau un acronim.
<address> definește informațiile de contact (autor / proprietar) ale unui document sau ale unui articol.
<cite> definește titlul unei lucrări.
<bdo> definește înlocuirea bidirecțională.
Comentarii în codul HTML
Etichetele de comentarii sunt utilizate pentru a insera comentarii în codul sursă HTML.
Comentariile nu sunt afișate de browser, dar vă pot ajuta să vă documentați codul sursă HTML.Cu ajutorul comentariilor puteți plasa notificări și memento-uri în HTML.
Comentariile sunt de asemenea foarte bune pentru depanarea HTML, deoarece puteți comenta câteodată liniile de cod HTML pentru a căuta erori:
Culori în HTML
Culorile în codul HTML sunt specificate folosind nume de culori predefinite sau valorile: RGB, HEX, HSL, RGBA, HSLA.
În HTML, o culoare poate fi specificată folosind un nume de culoare.
Puteți seta culoarea de fundal (Background Color) pentru elementele HTML folosind background-color.
Puteți seta culoarea textului folosind color.
Puteți seta culoarea marginilor folosind border.
Saturația poate fi descrisă ca intensitatea unei culori.
Luminozitatea unei culori poate fi descrisă cam cât de multă lumină doriți să dați culorii.
Valorile de culoare RGBA sunt o extensie a valorilor de culoare RGB cu un canal alfa - care specifică opacitatea unei culori.
Valorile de culoare HSLA sunt o extensie a valorilor de culoare HSL cu un canal alfa - care specifică opacitatea unei culori.
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ă.
Imagini în HTML
Imaginile pot îmbunătăți designul și aspectul unei pagini web.
Utilizați elementul HTML <img> pentru a defini o imagine.
Utilizați atributul HTML src pentru a defini adresa URL a imaginii.
Utilizați atributul HTML alt pentru a defini un text alternativ pentru o imagine, dacă nu poate fi afișat.
Utilizați atributele HTML lățime și înălțime (width and height) pentru a defini dimensiunea imaginii.
Utilizați proprietățile CSS pentru lățime și înălțime (width and height) pentru a defini dimensiunea imaginii (alternativ).
Utilizați proprietatea CSS float pentru a lăsa imaginea să plutească.
Utilizați elementul HTML <map> pentru a defini o imagine-hartă (image-map).
Utilizați elementul HTML <area> pentru a defini zonele în care se poate face click pe imaginea hartă (image-map).
Utilizați atributul usemap al elementului HTML <img> pentru a indica o hartă-imagine(image-map).
Utilizați elementul HTML <picture> pentru a afișa imagini diferite pentru diferite dispozitive.
Element de imagine în HTML
Elementul de imagine ne permite să afișăm imagini diferite pentru diferite dispozitive sau dimensiuni de ecran.
Elementul HTML <picture>.
Elementul <picture> conține o serie de elemente <source>.
Elementul <img> este folosit de browserele care nu acceptă elementul <picture> sau dacă niciuna dintre etichetele <source> nu se potrivește.
Există două scopuri principale pentru elementul <picture>: Lățime de bandă (Bandwidth), Formatați suportul (Format Support).
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.
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
Elemente noi în HTML5
HTML5 oferă elemente noi pentru o structură mai bună a documentelor:
<article> - Definește un articol dintr-un document
<aside> - Definește conținutul în afară de conținutul paginii
<bdi> - Izolează o parte a textului care ar putea fi formatată într-o direcție diferită de celălalt text din afara acestuia
<detalii> - Definește detalii suplimentare pe care utilizatorul le poate vizualiza sau ascunde
<dialog> - Definește o casetă de dialog sau o fereastră
<figcaption> - Definește o legendă pentru un element <figure>
<figure> - Definește conținut autonom
<footer> - Definește un subsol pentru un document sau secțiune
<header> - Definește un antet pentru un document sau secțiune
<principal> - Definește conținutul principal al unui document
<mark> - Definește text marcat / evidențiat
<meter> - Definește o masurare scalara intr-un interval cunoscut (un ecartament)
<nav> - Definește legăturile de navigare
<progress> - Reprezintă progresul unei sarcini
<rp> - Definește ce trebuie afișat în browserele care nu acceptă adnotările ruby
<rt> - Definește o explicație / pronunție a caracterelor (pentru tipografia din Asia de Est)
<ruby> - Definește o adnotare rubin (pentru tipografia din Asia de Est)
<section> - Definește o secțiune dintr-un document
<summary> - Definește un titlu vizibil pentru un element <details>
<time> - Definește o data / ora
<wbr> - Definește o posibila pauza de linie
Elemente noi de formular (New Form Elements):
<datalist> - Specifică o listă de opțiuni predefinite pentru controale de intrare
<output> - Definește rezultatul unui calcul
Tipuri noi de intrare (New Input Types): color,date,datetime,datetime,local,email,month,number,range,search,tel,time,url,week,autocomplete,autofocus,form,formaction,formenctype,formmethod,formnovalidate,formtarget,height and width,list,min and max,multiple,pattern (regexp),placeholder,required,step.
Grafică HTML5:
<canvas> Desenați grafică din mers, prin scripturi (de obicei JavaScript)
<svg> Desenați grafică vectorială scalabilă
Elemente media noi:
<audio> - Definește conținutul sunetului
<embed> - Definește un container pentru o aplicație externă (non-HTML)
<source> - Definește mai multe resurse media pentru elemente media (<video> și <audio>)
<track> - Definește piesele text pentru elementele media (<video> și <audio>)
<video> - Defineste video sau film
HTML5 Video
Redarea videoclipurilor în HTML
Înainte de HTML5, un videoclip putea fi redat doar într-un browser cu un plug-in (precum flash).
Elementul HTML5 <video> specifică un mod standard de a încorpora un videoclip într-o pagină web.
Pentru a afișa un videoclip în HTML, utilizați elementul <video>.
Atributul de control (controls) adaugă controale video, cum ar fi: redare, pauză și volum.
Este o idee bună să includeți întotdeauna atributele de lățime și înălțime (width și height). Dacă nu sunt setate înălțimea și lățimea (width și height), pagina ar putea clipi în timp ce video-ul se încarcă.
Elementul <source> vă permite să specificați fișiere video alternative din care browserul poate alege. Browserul va folosi primul format recunoscut.
Textul dintre etichetele <video> și </video> va fi afișat numai în browserele care nu acceptă elementul <video>.
Pentru a începe un videoclip automat, utilizați atributul autoplay.
Atributul de redare automată (autoplay) nu funcționează pe dispozitive mobile precum iPad și iPhone.
În HTML5, există 3 formate video acceptate: MP4, WebM și Ogg.
HTML5 definește metodele, proprietățile și evenimentele DOM pentru elementul <video>.
Acest lucru vă permite să încărcați, să redați și să întrerupeți videoclipuri, precum și să setați durata și volumul.
<video> Definește un videoclip sau un film
<source> Definește mai multe resurse media pentru elemente media, cum ar fi <video> și <audio>
<track> Definește piesele text în playerele media
HTML5 Audio
Înainte de HTML5, fișierele audio puteau fi redate doar într-un browser cu un plug-in (cum ar fi flash).
Elementul HTML5 <audio> specifică un mod standard de a încorpora un audio într-o pagină web.
Pentru a reda un fișier audio în HTML, utilizați elementul <audio>:
Atributul de control (controls) adaugă controale audio, cum ar fi redare, pauză și volum.
Elementul <source> vă permite să specificați fișiere audio alternative din care browserul poate alege. Browserul va folosi primul format recunoscut.
Textul dintre etichetele <audio> și </audio> va fi afișat numai în browserele care nu acceptă elementul <audio>.
În HTML5, există 3 formate audio acceptate: MP3, WAV și OGG.
HTML5 definește metodele, proprietățile și evenimentele DOM pentru elementul <audio>.
Acest lucru vă permite să încărcați, să redați și să întrerupeți un fișier audio, precum și să setați durata și volumul.
Există, de asemenea, evenimente DOM care vă pot notifica atunci când un audio începe să se redea, este în pauză etc.
<source> - Definește multiple resurse media pentru elemente media, cum ar fi video și audio.
HTML5 Web Workers
Un lucrător web este un JavaScript care rulează în fundal, fără a afecta performanța paginii.
Când executați scripturi într-o pagină HTML, pagina nu răspunde până la finalizarea scriptului.
Un lucrător web (web worker) este un JavaScript care rulează în fundal, independent de alte scripturi, fără a afecta performanța paginii. Puteți continua să faceți orice doriți: făcând click, selectând lucruri etc., în timp ce lucrătorul web (web worker) rulează în fundal.
Înainte de a crea un lucrător web (web worker), verificați dacă browserul utilizatorului îl acceptă.
Creați un fișier Web Worker.
Creăm lucrătorul nostru web (web worker) într-un JavaScript extern.
Creem un script care contează. Scriptul este stocat în fișierul "demo_workers.js".
Apoi putem trimite și primi mesaje de la lucrătorul web (web worker).
Adăugați un ascultător de eveniment „onmessage” la lucrătorul web (web worker).
Când lucrătorul web (web worker) postează un mesaj, codul din ascultătorul evenimentului este executat. Datele de la lucrătorul web (web worker) sunt stocate în event.data.
Încheiați un lucrător web (web worker).
Când se creează un obiect de lucru web(web worker), acesta va continua să asculte mesajele (chiar și după terminarea scriptului extern) până la încheierea acestuia.
Pentru a încheia un lucrător web (web worker) și a resurselor gratuite pentru browser / computer, utilizați metoda terminare ().
Reutilizați Web Worker.
Dacă setați variabila lucrător (worker) pe nedeterminată, după terminarea acesteia, puteți refolosi codul.
Întrucât lucrătorii web (web workers) se află în fișiere externe, aceștia nu au acces la următoarele obiecte JavaScript:
Obiectul ferestrei.
Obiectul documentului.
Obiectul părinte.
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.
Culori CSS
Culorile sunt specificate folosind nume de culori predefinite sau valori RGB, HEX, HSL, RGBA, HSLA.
Nume de culoare CSS.
În CSS, o culoare poate fi specificată folosind un nume de culoare.
CSS / HTML acceptă 140 de nume standard de culori.
Culoare de fundal CSS (CSS Background Color).
Puteți seta culoarea de fundal pentru elementele HTML.
Culoare text CSS (CSS Text Color).
Puteți seta culoarea textului.
Culoarea marginilor în CSS (CSS Border Color).
Puteți seta culoarea marginilor.
Valori de culoare CSS (CSS Color Values).
În CSS, culorile pot fi de asemenea specificate folosind valori RGB, valori HEX, valori HSL, valori RGBA și valori HSLA.
Valoarea CSS RGB
În CSS, o culoare poate fi specificată ca valoare RGB, folosind această formulă:
rgb (roșu, verde, albastru) / rgb(red, green, blue)
Fiecare parametru (roșu, verde și albastru)/rgb(red, green, blue) definește intensitatea culorii între 0 și 255.
De exemplu, rgb (255, 0, 0) este afișat ca roșu, deoarece roșul este setat la valoarea cea mai mare (255), iar celelalte sunt setate pe 0.
Pentru a afișa culoarea neagră, toți parametrii de culoare trebuie să fie setați la 0, astfel: rgb (0, 0, 0).
Pentru a afișa culoarea albă, toți parametrii de culoare trebuie să fie setați la 255, astfel: rgb (255, 255, 255).
Valoarea CSS HEX
În CSS, o culoare poate fi specificată folosind o valoare hexadecimală sub forma:
#rrggbb
În cazul în care rr (roșu), gg (verde) și bb (albastru) sunt valori hexadecimale între 00 și ff (la fel ca zecimale 0-255).
De exemplu, # ff0000 este afișat ca roșu, deoarece roșul este setat la cea mai mare valoare (ff), iar celelalte sunt setate la cea mai mică valoare (00).
Valoare HSL.
În CSS, o culoare poate fi specificată folosind nuanță, saturație și ușurință (HSL) sub forma:
hsl (nuanță, saturație, ușurință)/ hsl (hue, saturation, lightness).
Hue este un grad pe roata de culoare de la 0 la 360. 0 este roșu, 120 este verde și 240 albastru.
Saturația este o valoare procentuală, 0% înseamnă o nuanță de gri, iar 100% este culoarea completă.
De asemenea, lumina este procentuală, 0% este negru, 50% nu este nici lumină, nici întunecată, 100% alb.
Saturația (saturation).
Saturația poate fi descrisă ca intensitatea unei culori.
100% este de culoare pură, fără nuanțe de gri
50% este 50% gri, dar puteți vedea în continuare culoarea.
0% este complet gri, nu mai puteți vedea culoarea.
Luminozitate (Lightness).
Luminozitatea unei culori poate fi descrisă cât de multă lumină doriți să dați culorii, unde 0% nu înseamnă lumină (negru), 50% înseamnă 50% lumină (nici întuneric, nici lumină) 100% înseamnă lumină completă (alb).
Nuanțele de gri sunt adesea definite prin setarea nuanței și a saturației la 0 și reglați luminozitatea de la 0% la 100% pentru a obține nuanțe mai închise / mai deschise.
Valoarea RGBA.
Valorile de culoare RGBA sunt o extensie a valorilor de culoare RGB cu un canal alfa - care specifică opacitatea unei culori.
O valoare de culoare RGBA este specificată cu:
rgba (roșu, verde, albastru, alfa) / rgba(red, green, blue, alpha)
Parametrul alfa este un număr între 0.0 (complet transparent) și 1.0 (deloc transparent).
Valoarea HSLA.
Valorile de culoare HSLA sunt o extensie a valorilor de culoare HSL cu un canal alfa - care specifică opacitatea unei culori.
O valoare de culoare HSLA este specificată cu:
hsla (nuanță, saturație, luminozitate, alfa) / hsla (hue, saturation, lightness, alpha)
Parametrul alfa este un număr între 0.0 (complet transparent) și 1.0 (deloc transparent).
CSS Responsive Web Design - Imagini
Responsive Web Design - Images
Utilizarea proprietății Width
Dacă proprietatea lățimii (width) este setată la un procent și înălțimea este setată la „auto”, imaginea va fi receptivă și va scala în sus și în jos.
Imaginea poate fi redusă pentru a fi mai mare decât dimensiunea inițială. O soluție mai bună, în multe cazuri, va fi utilizarea în schimb a proprietății cu lățimea maximă.
Imaginile de fundal (Background Images) pot răspunde, de asemenea, la redimensionare și scalare (resizing și scaling).
Dacă proprietatea background-size este setată pe „contain”, imaginea de fundal (background Images) se va scala și va încerca să se potrivească zonei de conținut. Cu toate acestea, imaginea își va păstra raportul de aspect (relația proporțională între lățimea și înălțimea imaginii (width și height)).
Dacă proprietatea background-size este setată pe „100% 100%”, imaginea de fundal (background image) se va întinde pentru a acoperi întreaga zonă de conținut.
Dacă proprietatea background-size este setată pe „cover”, imaginea de fundal (background image) se va scala pentru a acoperi întreaga zonă de conținut. Observați că valoarea „cover” păstrează raportul de aspect (aspect ratio), iar o parte din imaginea de fundal (background image) poate fi tăiată.
Imagini diferite pentru dispozitive diferite
O imagine mare poate fi perfectă pe un ecran mare al unui computer, dar inutilă pe un dispozitiv mic. De ce să încărcați o imagine mare atunci când trebuie să o măriți în jos? Pentru a reduce încărcarea sau pentru orice alte motive, puteți utiliza interogări media (media queries) pentru a afișa imagini diferite pe dispozitive diferite.
Puteți utiliza interogarea media (media query) min-device-width, în loc de min-width, care verifică lățimea dispozitivului, în loc de lățimea browserului. Atunci imaginea nu se va schimba când redimensionați fereastra browserului.
Elementul HTML5 <picture>
HTML5 a introdus elementul <picture>, care vă permite să definiți mai multe imagini.
Asistență browser (Browser Support)
Elementul <picture> funcționează similar cu elementele <video> și <audio>. Configurați surse diferite, iar prima sursă care se potrivește preferințelor este cea utilizată:
Atributul srcset este necesar și definește sursa imaginii.
Atributul media este opțional și acceptă interogările media (media queries) pe care le găsiți în regula CSS @media.
De asemenea, ar trebui să definiți un element <img> pentru browserele care nu acceptă elementul <picture>.
SQL INSERT INTO SELECT
SQL INSERT INTO SELECT
Instrucțiunea SQL INSERT INTO SELECT
Instrucțiunea INSERT INTO SELECT copiază datele dintr-un tabel și le introduce într-un alt tabel.
INSERT INTO SELECT necesită ca tipurile de date din sursele și tabelele țintă (target) să se potrivească
Înregistrările existente în tabelul țintă (target) nu sunt afectate
Sintaxa INSERT INTO SELECT
Copiați toate coloanele de la un tabel la altul:
INSERT INTO table2
SELECT * FROM table1
WHERE condition;
Copiați doar câteva coloane dintr-un tabel într-un alt tabel:
INSERT INTO table2 (column1, column2, column3, ...)
SELECT column1, column2, column3, ...
FROM table1
WHERE condition;
Exemple SQL INSERT INTO SELECT
Următoarea instrucțiune SQL copiază „Furnizorii” (Suppliers) în „Clienți” (Customers) (coloanele care nu sunt completate cu date, vor conține NULL):
INSERT INTO Customers (CustomerName, City, Country)
SELECT SupplierName, City, Country FROM Suppliers;
Următoarea instrucțiune SQL copiază „Furnizorii” (Suppliers) în „Clienți” (Customers) (completați toate coloanele):
INSERT INTO Customers (CustomerName, ContactName, Address, City, PostalCode, Country)
SELECT SupplierName, ContactName, Address, City, PostalCode, Country FROM Suppliers;
Următoarea instrucțiune SQL copiază numai furnizorii germani în „Clienți” (Customers):
INSERT INTO Customers (CustomerName, City, Country)
SELECT SupplierName, City, Country FROM Suppliers
WHERE Country='Germania';
PHP Introducere
PHP Introducere
Codul PHP este executat pe server.
HTML
CSS
JavaScript
Ce este PHP?
PHP este un acronim pentru "PHP: Hypertext Preprocessor"
PHP este un limbaj de scripturi de surse deschise, utilizat pe scară largă
Scripturile PHP sunt executate pe server
PHP se poate descărca și utiliza gratuit
PHP este un limbaj uimitor și popular!
Este suficient de puternic pentru a fi în centrul celui mai mare sistem de blogging de pe web (WordPress)!
Este suficient de adânc pentru a rula cea mai mare rețea de socializare (Facebook)!
Ce poate face PHP?
PHP poate genera conținut dinamic al paginii
PHP poate crea, deschide, citi, scrie, șterge și închide fișiere pe server
PHP poate colecta date de formular
PHP poate trimite și primi cookie-uri
PHP poate adăuga, șterge, modifica date din baza de date
PHP poate fi utilizat pentru a controla accesul utilizatorului
PHP poate cripta dateCu PHP nu ești limitat la output HTML. Puteți output imagini, fișiere PDF și chiar filme Flash. De asemenea, puteți output orice text, cum ar fi XHTML și XML.
De ce PHP?
PHP rulează pe diverse platforme (Windows, Linux, Unix, Mac OS X etc.)
PHP este compatibil cu aproape toate serverele folosite astăzi (Apache, IIS etc.)
PHP acceptă o gamă largă de baze de date
PHP este gratuit. Descărcați-l din resursa oficială PHP: www.php.net
PHP este ușor de învățat și rulează eficient pe serverCe este nou în PHP 7
PHP 7 este mult mai rapid decât versiunea stabilă și populară anterioară(PHP 5.6)
PHP 7 a îmbunătățit gestionarea erorilor
PHP 7 acceptă declarații de tip (Type Declarations) mai stricte pentru argumentele funcției
PHP 7 acceptă operatori noi (cum ar fi operatorul național spațial: <=>)
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 Fișierele Open/Read/Close
PHP Fișierele Open/Read/Close
În acest capitol vă vom învăța cum să deschideți, să citiți și să închideți (open, read și close) un fișier pe server.
PHP Open File - fopen()
O metodă mai bună de a deschide fișiere este cu funcția fopen(). Această funcție vă oferă mai multe opțiuni decât funcția readfile().
Vom folosi fișierul text, "webdictionary.txt", în timpul lecțiilor:
AJAX = JavaScript și XML asincron (Asynchronous JavaScript and XML)
CSS = Fișe de stil în cascadă (Cascading Style Sheets)
HTML = Hyper Text Markup Language
PHP = PHP Hypertext Preprocessor
SQL = Limbaj de interogare structurat (Structured Query Language)
SVG = Grafică vectorială scalabilă (Scalable Vector Graphics)
XML = Limbaj de marcare extinsă (EXtensible Markup Language)
Primul parametru al fopen() conține numele fișierului care trebuie deschis și al doilea parametru specifică în ce mod ar trebui să fie deschis fișierul. Următorul exemplu generează, de asemenea, un mesaj dacă funcția fopen() nu poate deschide fișierul specificat:
<?php
$myfile = fopen("webdictionary.txt", "r") or die("Nu se poate deschide fișierul!");
echo fread($myfile,filesize("webdictionary.txt"));
fclose($myfile);
?>
Fișierul poate fi deschis într-unul din următoarele moduri:
r - Deschideți un fișier numai pentru citire. Indicatorul de fișiere începe de la începutul fișierului
w - Deschideți un fișier numai pentru scriere. Șterge conținutul fișierului sau creează un nou fișier dacă acesta nu există. Indicatorul de fișiere începe de la începutul fișierului
a - Deschideți un fișier numai pentru scriere. Datele existente în fișier sunt păstrate. Indicatorul fișierului începe la sfârșitul fișierului. Creează un nou fișier dacă fișierul nu există
x - Creează un nou fișier numai pentru scriere. Returnează FALSE și o eroare dacă fișierul există deja
r + - Deschideți un fișier pentru citire / scriere. Indicatorul de fișiere începe de la începutul fișierului
w + - Deschideți un fișier pentru citire / scriere. Șterge conținutul fișierului sau creează un nou fișier dacă acesta nu există. Indicatorul de fișiere începe de la începutul fișierului
a + - Deschideți un fișier pentru citire / scriere. Datele existente în fișier sunt păstrate. Indicatorul fișierului începe la sfârșitul fișierului. Creează un nou fișier dacă fișierul nu există
x + - Creează un nou fișier pentru citire / scriere. Returnează FALSE și o eroare dacă fișierul există deja
PHP Read File - fread()
Funcția fread() citește dintr-un fișier deschis.
Primul parametru al fread() conține numele fișierului din care trebuie citit și al doilea parametru specifică numărul maxim de octeți de citit.
Următorul cod PHP citește fișierul "webdictionary.txt" până la sfârșit:
fread($myfile,filesize("webdictionary.txt"));
PHP Close File - fclose()
Funcția fclose() este utilizată pentru a închide un fișier deschis.
Este o practică bună de programare pentru a închide toate fișierele după ce ați terminat cu ele. Nu doriți ca un fișier deschis să fie difuzat pe serverul dvs. preluând resurse!
fclose() necesită numele fișierului (sau o variabilă care deține numele fișierului) pe care dorim să o închidem:
<?php
$myfile = fopen("webdictionary.txt", "r");
// ceva cod care urmează să fie executat ....
fclose($myfile);
?>
PHP Read Single Line - fgets()
Funcția fgets() este utilizată pentru a citi o singură linie dintr-un fișier.
Exemplul de mai jos produce (outputs) prima linie a fișierului "webdictionary.txt":
<?php
$myfile = fopen("webdictionary.txt", "r") or die("Nu se poate deschide fișierul!");
echo fgets($myfile);
fclose($myfile);
?>
După un apel la funcția fgets(), indicatorul de fișiere (file pointer) a trecut la linia următoare.
PHP Verifică sfârșitul fișierului - feof() (PHP Check End-Of-File - feof())
Funcția feof() verifică dacă s-a ajuns la „sfârșitul fișierului” (end-of-file) (EOF).
Funcția feof() este utilă pentru a bucla (looping) prin date de lungime necunoscută.
Exemplul de mai jos citește fișierul "webdictionary.txt" linie rând, până la sfârșitul fișierului (end-of-file):
<?php
$myfile = fopen("webdictionary.txt", "r") or die("Nu se poate deschide fișierul!");
// Ieșirea unei linii până la sfârșitul fișierului (end-of-file)
while(!feof($myfile)) {
echo fgets($myfile) . "<br>";
}
fclose($myfile);
?>
PHP Read Single Character - fgetc()
Funcția fgetc() este utilizată pentru a citi un singur caracter dintr-un fișier.
Exemplul de mai jos citește fișierul "webdictionary.txt" caracter după caracter, până când se ajunge la sfârșitul fișierului (end-of-file):
<?php
$myfile = fopen("webdictionary.txt", "r") or die("Nu se poate deschide fișierul!");
// Ieșirea unui caracter până la sfârșitul fișierului (end-of-file)
while(!feof($myfile)) {
echo fgetc($myfile);
}
fclose($myfile);
?>
După un apel către funcția fgetc(), indicatorul de fișier (file pointer) se mută la următorul caracter.
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 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”
PHP - AJAX Căutare live
PHP - AJAX Căutare live
AJAX poate fi utilizat pentru a crea căutări mai prietenoase și interactive pentru utilizator.
AJAX Căutare live
Următorul exemplu va demonstra o căutare live, unde obțineți rezultate de căutare în timp ce tastați.
Căutarea live are multe avantaje în comparație cu căutarea tradițională:
Rezultatele sunt afișate pe măsură ce tastați
Rezultatele se restrâng pe măsură ce continuați să scrieți
Dacă rezultatele devin prea restrânse, eliminați caracterele pentru a vedea un rezultat mai larg
Rezultatele se găsesc într-un fișier XML (de ex. links.xml). Pentru a face acest exemplu mic și simplu, sunt disponibile doar șase rezultate.
Exemplu explicat - Pagina HTML
Când un utilizator tastează un caracter în câmpul de intrare, funcția „showResult()” este executată. Funcția este declanșată de evenimentul "onkeyup":
<html>
<head>
<script>
function showResult(str) {
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
if (window.XMLHttpRequest) {
// cod pentru IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // cod pentru IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("livesearch").innerHTML=this.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>
Explicația codului sursă:
Dacă câmpul de intrare (input field) este gol (str.length == 0), funcția șterge conținutul marcatorului de căutare live (livesearch placeholder) și iese din funcție.
Dacă câmpul de intrare (input field) nu este gol, funcția showResult() execută 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) (cu conținutul câmpului de introducere (input field))
Fișierul PHP
Pagina de pe server numită de JavaScript-ul precedent este un fișier PHP numit "livesearch.php".
Codul sursă din „livesearch.php” caută un fișier XML pentru titluri care se potrivesc cu șirul de căutare (search string) și returnează rezultatul:
<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//obțineți parametrul q de la URL
$q=$_GET["q"];
//căutarea tuturor linkurilor din fișierul xml dacă lungimea lui q>0
if (strlen($q)>0) {
$hint="";
for($i=0; $i<($x->length); $i++) {
$y=$x->item($i)->getElementsByTagName('title');
$z=$x->item($i)->getElementsByTagName('url');
if ($y->item(0)->nodeType==1) {
//find a link matching the search text
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
if ($hint=="") {
$hint="<a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
} else {
$hint=$hint . "<br /><a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
// Setați ieșirea la „nici o sugestie” dacă nu a fost găsit niciun indiciu
// sau la valorile corecte
if ($hint=="") {
$response="nici o sugestie";
} else {
$response=$hint;
}
//ieșire răspuns
echo $response;
?>
Dacă există un text trimis de la JavaScript (strlen($q)> 0), se întâmplă următoarele:
Încărcați un fișier XML într-un nou obiect XML DOM
Buclați-vă (Loop) prin toate elementele <title> pentru a găsi potriviri (matches) din textul trimis de JavaScript
Setează URL-ul și titlul corect în variabila „$response”. Dacă se găsesc mai multe potriviri (matches), toate potrivirile (matches) sunt adăugate la variabilă
Dacă nu se găsește nicio potrivire (matche), variabila „$response” este setată pe „fără sugestie”
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 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 2 sau grupa a II-a principală
Grupa a II-a principală a sistemului periodic, numerotată II A sau 2, cuprinde elementele: beriliu, Be, magneziu, Mg, calciu, Ca, stronțiu, Sr, bariu, și radiu, Ra. Această grupă se mai numește grupa metalelor alcalino-pământoase.
Grupa 1 sau grupa I principală
Grupa 3 sau grupa a III-a secundară
Grupa a III-a secundară a sistemului periodic, numerotată III B sau 3, cuprinde elementele rare scandiu, Sc, ytriu, Y, și lantan, La, precum și elementul radioactiv actiniu, Ac.
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.
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.
Grupa 9 sau grupa a VIII-a secundară
Grupa 9 a sistemului periodic, în trecut considerată parte a grupei a VIII-a secundare alături de grupele 8 și 10, cuprinde elementele cobalt, Co, rodiu, Rh, și iridiu, Ir.
