Curs 5 2019/2020 - Laboratorul de Microunde si ...
Transcript of Curs 5 2019/2020 - Laboratorul de Microunde si ...
![Page 1: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/1.jpg)
Curs 5 2019/2020
1
![Page 2: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/2.jpg)
Programarea aplicațiilor web
An V RC
▪ 2C/1L/1P
2
![Page 3: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/3.jpg)
An V
33% E: 40%
66% Aplicatii
▪ 33% L (0%)
▪ 33% P (60%)
3
![Page 4: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/4.jpg)
2019/2020
4
![Page 5: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/5.jpg)
On-line Teme mai simple Evaluare diferita (fara sustinere) Predare 3 fisiere un fişier *.pdf (print-screen din aplicația rulată, cu
scurte explicații de utilizare, un mini-manual al aplicației respective)
un fişier *.sql cu backup-ul bazei de date de care are nevoie aplicația pentru a funcționa
un fişier cu arhiva directorului conținând aplicația (fişiere *.php, *.jpg, structură de directoare etc., arhivate: *.zip, *.7z etc.)
5
![Page 6: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/6.jpg)
(3p) aplicația rulează pe server-ul de referinţă (care se poate download-a de pe serverul laboratorului: CentOS 7, php 5): se scot fişierele din arhiva *.zip într-un director din rădăcina serverului, se restaurează baza de date (import) din fişierul *.sql
(3p) fişierul *. pdf cu manualul aplicației există şi corespunde cu tema primită (fiecare student din echipă pentru punctul propriu din aplicație)
(3p) rularea aplicaţiei instalate produce aceleaşi efecte ca în manualul *.pdf (fiecare student din echipă pentru punctul propriu din aplicație) şi corespunde cu tema primită
6
![Page 7: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/7.jpg)
necesitatea conlucrarii intre 2 studenti cu doua teme “pereche” √ In caz de necesitate, pentru completarea echipei
cadrul didactic poate fi membru al echipelor numar de pagini dinamice √ fiecare tema va trebui sa contina macar doua pagini
dinamice numar de inregistrari in baza de date √ anumite erori devin vizibile cand sunt mai multe date
prelucrate
7
Tema de nota ... Pagini Inregistrari
- 4 = 2 X 2 30
![Page 8: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/8.jpg)
Web Server
Apache
PHP Interpreter
• HTML • Imagini • documente
Fisiere PHP
cerere HTTP
raspuns HTTP
Server MariaDB
Linux CentOS 7.1
8
Server FTP
Server SSH
Microsoft Windows
Client FTP/SFTP WinScp
Client SSH Putty
Browser
Editor Notepad ++
Server Email
phpMyAdmin
![Page 9: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/9.jpg)
diferente principale fata de server-ul Windows
comenzile in sistem greoaie
▪ linie de comanda, SSH, Putty
fisierele sunt trimise prin FTP
▪ Copy/Paste indisponibil
administrarea serverului MySql:
▪ prin phpMyAdmin (instalat)
▪ prin (eventuale) instrumente instalate pe masina host (MySQL Workbench)
9
![Page 10: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/10.jpg)
Avantaje principale fata de server-ul Windows Aplicatiile au versiuni actualizate (2020 ~)
▪ CentOS/7.1, Apache/2.4.6, PHP/5.4.16, MariaDB/5.5.44, PhpMyAdmin/4.4.15
Aplicatii disponibile similare celor intalnite in practica ▪ SSH
▪ FTP
▪ Email ▪ pentru utilizarea deplina a acestor aplicatii este utila trecerea
interfetei de retea a masinii virtuale Host-only -> Bridged
10
![Page 11: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/11.jpg)
rf-opto.etti.tuiasi.ro > Master > Web Design
11
![Page 12: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/12.jpg)
Cloud ETTI: RF-opto3#
12
![Page 13: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/13.jpg)
Masina virtuala VMware Workstation Player
Gratuit (non-comercial)
https://www.vmware.com/products/workstation-player/workstation-player-evaluation.html
13
![Page 14: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/14.jpg)
14
![Page 15: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/15.jpg)
WinSCP (client FTP, gratuit)
https://winscp.net/eng/download.php
Notepad ++ (editor, avansat, gratuit)
https://notepad-plus-plus.org/downloads/
Putty (remote access)
https://www.putty.org/
MySQL Workbench (gratuit, cont Oracle)
https://www.mysql.com/products/workbench/
15
![Page 16: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/16.jpg)
login, ifconfig Ctrl + Alt + mouse
16
![Page 17: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/17.jpg)
putty.exe evitare captura mouse, copy/paste etc.
17
![Page 18: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/18.jpg)
client FTP upload fisiere
18
![Page 19: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/19.jpg)
19
![Page 20: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/20.jpg)
20
![Page 21: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/21.jpg)
21
Web Server
Apache
PHP Interpreter
• HTML • Imagini • documente
Fisiere PHP
Server MariaDB
Linux CentOS 7.1
Server FTP
Server SSH
Server Email
phpMyAdmin
1. login root:masterrc 2. ifconfig 192.168.30.5 3. putty.exe 192.168.30.5 SSH root:masterrc (remote login) 4. [alte comenzi linux dorite] 5. FTP Winscp SFTP student:[email protected] 6. MySql http://192.168.30.5/phpmyadmin root:masterrc 7. Apache Error Log 7a. putty nano /var/log/httpd/error_log 7b. http://192.168.30.5/logfile.php (nonstandard) 8. PHP info http://192.168.30.5/info.php 9. daca serviciul DHCP duce la oprirea Apache: service httpd restart
![Page 22: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/22.jpg)
logfile.php
Afiseaza log Apache (erori php majore)
1p suplimentar la proiect/examen Modificare logfile.php pentru a afisa toate
erorile PHP
php.ini – activare erori
php.ini – locatie erori
logfile.php – afisare log PHP
22
![Page 23: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/23.jpg)
23
![Page 24: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/24.jpg)
24
![Page 25: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/25.jpg)
25
![Page 26: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/26.jpg)
Web Server
Apache
PHP Interpreter
• HTML • Imagini • documente
Fisiere PHP
cerere HTTP, date
raspuns HTTP, HTML, CSS, Javascript
Web Browser
JVM
JavaScript
Server MySql
Flash Player
HTML, CSS, Javascript
SQL
PHP
HTML, CSS
client side scripting
server side scripting 26
![Page 27: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/27.jpg)
27
![Page 28: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/28.jpg)
28
![Page 29: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/29.jpg)
29
![Page 30: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/30.jpg)
30
![Page 31: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/31.jpg)
31
![Page 32: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/32.jpg)
Ofera structura logica a documentului Necesar
rezultatul final al programarii pentru o aplicatie web este cod HTML (structura HTML eventual manipulata prin “client side scripting”/Javascript)
Curs 1 –Recapitulare HTML
32
![Page 33: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/33.jpg)
<x> Continut afectat de x</x>
x
<x atrib="val"> Continut afectat de x si atrib si val </x>
x si atrib si val
<x> Continut <y> Continut afectat de x si y</y> afectat de x</x>
x
y
<x> C. afectat de x <y> C. afectat de x si y </x> C. afectat de y</y>
x
y
Legal numai in HTML nerecomandat
Legal in XHTML/HTML
Legal in XHTML/HTML
Legal in XHTML/HTML
33
![Page 34: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/34.jpg)
<!DOCTYPE …..> <html> <head> …. </head> <body> …. </body> </html>
34
![Page 35: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/35.jpg)
DOM – Document Object Model: structura de tip graf
<html> <title>pagina mea</title> <body> <h1>Compozitori:</h1> <p> <ul> <li> elvis costello <li> johannes brahms <li> georges brassens </ul> </body> </html>
html
head
title
body
h1 p ul
li li li
35
![Page 36: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/36.jpg)
Ofera forma documentului
36
![Page 37: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/37.jpg)
37
![Page 38: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/38.jpg)
Trei modalitati de a specifica stiluri
stiluri externe (External style sheet)
stiluri interne (Internal style sheet)
stiluri inserate (Inline style)
Trei entitati care impun stiluri:
dispozitivul de afisare (browser)
autorul documentului
cititorul documentului
38
![Page 39: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/39.jpg)
Specificatiile CSS sunt de forma:
Selector { “regula CSS”; [“regula CSS”; ] }
Reguli CSS de forma:
atribut:valoare;
Comentarii
Similar cu C/C++ , PHP, etc.
Cuprinse intre “/*” si “*/”
39
![Page 40: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/40.jpg)
Selector HTML conceput pentru a modifica modalitatea de afisare
standard a etichetelor HTML Selector clasa conceput pentru a lucra cu atributul HTML class=“…”
util pentru aplicare uniforma a formei mai multor elemente din document
Selector identificator conceput pentru a lucra cu atributul HTML id=“…”
util pentru aplicarea unei forme specifice unui anume element din document
40
![Page 41: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/41.jpg)
Orientat in jurul conceptului de “cutie” – Box model
41
![Page 42: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/42.jpg)
http://www.csszengarden.com/ un fisier html comun schimbarea formei permisa numai prin
intermediul CSS
42
![Page 43: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/43.jpg)
43
![Page 44: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/44.jpg)
44
![Page 45: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/45.jpg)
45
![Page 46: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/46.jpg)
presupune prelucrarea unor date si oferirea unui document personalizat (rezultat al datelor respective)
datele pot fi obtinute:
de la utilizator
o sursa externa (baze de date)
combinatie utilizator/baze de date
46
![Page 47: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/47.jpg)
necesare pentru ca utilizatorul sa poate trimite date server-ului
<form>…</form> Atribute specifice:
action: adresa documentului care preia datele
▪ <form action="<?php echo $_SERVER['PHP_SELF'];?>">
▪ <form action="actiuni/fisier2.html">
method: modalitatea de transmitere a datelor: post sau get
▪ <form method="post" action= … >
47
![Page 48: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/48.jpg)
post datele sunt transmise in bloc get datele sunt atasate adresei documentului
de procesare : results.php?prob=81&an=2009 get trebuie folosit numai cand datele sunt
“idempotente”,
nu cauzeaza efecte colaterale
nu modifica starea server-ului (baze date, etc)
se poate simula realizarea unei forme (get) prin scrierea corespunzatoare a link-urilor
48
![Page 49: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/49.jpg)
in interiorul etichetei <form>…</form> input
select/option
textarea
button toate elementele vor avea un nume atribut: name=“”
numele va fi intalnit in uri-ul generat prin get, sau in numele variabilei trimisa prin post
trimiterea datelor se face prin intermediul unui buton cu tipul type="submit"
49
![Page 50: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/50.jpg)
<input …/> Atribute:
type: text | password | checkbox | radio | submit | reset | file | hidden | image | button
name: numele variabilei
value: valoarea trimisa server-ului la selectie (valoarea initiala in anumite cazuri)
checked/src/size/maxlength in functie de tip
50
![Page 51: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/51.jpg)
<input name="textfield" type="text" value="ceva" /> <input name="Ok" type="submit" value="Trimite" /> <label><input name="check" type="checkbox" value="5" checked />check1</label> <label><input name="RG1" type="radio" value="a" checked="checked" />but1</label> <label><input name="RG1" type="radio" value="b" />but2</label> <input name="hid" type="hidden" value="6" />
51
![Page 52: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/52.jpg)
<textarea name="textarea" cols="20" rows="5">Un text initial</textarea><br /><br /> <select name="select." size="3"> <option value="1" selected="selected">opt1</option> <option value="2">opt2</option> <option value="3">opt3</option> </select><br /><br /> <select name="select..."> <option value="1" selected="selected">opt1</option> <option value="2">opt2</option> <option value="3">opt3</option> </select>
52
![Page 53: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/53.jpg)
53
<button type="button" onClick="do ( );">Click Here</button> <button type="submit" value="infoOnly">Request Info<img src="arrowb.gif" /></button> <button type="reset"><img src="arrowr.gif" />Clear</button> <button type="submit" id="sender" value="infoOnly">Request<br />Info<br /><img src="arrowb.gif" /></button> <button type="submit" id="sender" value="infoOnly"><p>Request</p><p><b><i>Info</i></b></p><img src="arrowb.gif" /></button>
introdus pentru a oferi posibilitatea introducerii de continut mai complex (text formatat,imagini) in interiorul butoanelor de pe forma
![Page 54: Curs 5 2019/2020 - Laboratorul de Microunde si ...](https://reader030.fdocument.pub/reader030/viewer/2022012423/61776d938b883076806ecb60/html5/thumbnails/54.jpg)
Mic magazin online Formular de comanda cu
procesarea comenzii <html> <head> <title>Magazin online XXX SRL</title> </head> <body> <h1>Magazin online XXX SRL</h1> <h2>Realizati comanda</h2> <form action="rezultat.html" method="post"> <table border="0"> <tr bgcolor="#cccccc"><td width="150">Produs</td><td width="15">Cantitate</td></tr> <tr><td>Carti</td><td align="center"><input type="text" name="carti_cant" size="3" maxlength="3" /></td></tr> <tr><td>Caiete</td><td align="center"><input type="text" name="caiete_cant" size="3" maxlength="3" /></td></tr> <tr><td>Penare</td><td align="center"><input type="text" name="penare_cant" size="3" maxlength="3" /></td></tr> <tr><td colspan="2" align="center"><input type="submit" value="Trimite" /></td></tr> </table> </form> </body> </html>
54