prj
TRANSCRIPT
5/13/2018 prj - slidepdf.com
http://slidepdf.com/reader/full/prj5571ff9949795991699da62c 1/11
Universitatea Stefan cel Mare Suceava
Facultatea de Inginerie Electrica
Specializarea Calculatoare
Proiect la practica in programare
- PRACTICA 2004 -
Autor: Zabre Adrian
Indrumatori: Schipor Ovidiu
Gaza Felicia
5/13/2018 prj - slidepdf.com
http://slidepdf.com/reader/full/prj5571ff9949795991699da62c 2/11
Universitatea Stefan cel Mare Suceava
Facultatea de Inginerie Electrica
Specializarea Calculatoare
CUPRINS
I. Consideratii teoretice
Tehnologii utilizate:
HTML
CGI (C)
JavaScript
BKT (BackTracking)
II. Manual al programatorului
Specificatii de realizare
III. Manual al utilizatorului
Specificatii de utilizare
IV. Perspective de imbunatatireInterfata grafica mai atractiva
Spargerea barierelor
Conversia CGI (C)→CGI (php)
V. Bibliografie
5/13/2018 prj - slidepdf.com
http://slidepdf.com/reader/full/prj5571ff9949795991699da62c 3/11
Universitatea Stefan cel Mare Suceava
Facultatea de Inginerie Electrica
Specializarea Calculatoare
I. Consideratii teoretice.
Tehnologii utilizate:
HTML
HTML (Hyper Text Markup Language) este limbajul in care sint scrise paginile World Wide
Web (WWW). Hypertex t reprezinta posibilitatea de a crea legaturi (in engleza - link ) intre diferite
documente. Markup Language inseamna "limbaj de etichetare". Un document HTML reprezinta un
ansamblu de informatie textuala si tag-uri, care explica browser-ului cum sa vizualizeze acest text peecranul utilizatorului. Tag in engleza este "eticheta". Pentru a le deosebi de text, tag-urile sint incluse in
paranteze speciale, formate din semnele "mai mic" si "mai mare": <aceasta_este_un_tag> In dependenta
de continutul "etichetei" (ceea ce e scris intre "<" si ">") textul este reprezentat diferit. Orice document
HTML trebuie sa aiba extensia html sau htm. Realizare codului sursa al unui astfel de document trebuie sa
cuprinda la inceput tagul <HTML> iar la sfarsit acest trebuie inchis prin utilizarea caracterului „/”,</HTML> precum si celelalte tag-uri.Exemplu:<HTML>
<HEAD><TITLE>Bine ati venit!</TITLE>
</HEAD><BODY>
<TABLE><TR>
<TD>Aceasta este o celulta dintr-un tabel</TD></TR>
</TABLE>
</BODY></HTML>
In tag-ul HEAD trebuie scris titlul, unele functii folosite de scripturi ca JavaScript iar in tag-ul
BODY este scris continutul care prin intermediul altor tag-uri este afisat pe ecranul utilizatorului.Tag-ul TABLE a fost utilizat pentru a defini un tabel, iar cu tag-urile TR (Table R ow) si TD
(Table Data) pentru asezarea pe randuri si pentru asezarea pe coloane a informatiei .
JavaScript
JavaScript este un limbaj de scriptare simplu, interpretat, orientat spre obiecte, care poate fi folosit
pentru a adauga un comportament interactiv simplu unei pagini HTML prin intermediul unui script de
cuvinte-cheie inserate intr-o pagina web. JavaScript ruleaza pe masina client si este inglobat in codulHTML, astfel ca este ideal pentru oamenii obisnuiti cu HTML.
Scripturile JavaScript sunt interpretate de browserele Web, care "stiu" JavaScript, acesta fiind unlimbaj orientat obiect si bazat pe evenimente. Prin obiect intelegem un model software al unei entitati
sau fenomen din viata reala, caruia i se retin doar insusirile fundamentale, definitorii. Obiectul va fi descris
printr-un set de comportamente si caracteristici. In JavaScript prin obiecte se reprezinta actiunile,caracteristicile si starea unei pagini HTML.
Cativa termeni foarte importanti sunt:
5/13/2018 prj - slidepdf.com
http://slidepdf.com/reader/full/prj5571ff9949795991699da62c 4/11
Universitatea Stefan cel Mare Suceava
Facultatea de Inginerie Electrica
Specializarea Calculatoare
- object (obiect) = un model software al unei entitati sau fenomen din viata reala, caruia i se retin
doar insusirile fundamentale, definitorii;
- property(proprietate) = caracteristica fundamentala a unui obiect; stare a unui obiect;
- method (metoda) = actiune a obiectului prin intermediul careia se poate modifica una sau mai
multe proprietati ale obiectului;
- event(eveniment) = "ceva care se intampla" ;Pentru a putea lucra cu obiectul trebuie sa utilizam numele acestuia, iar pentru a utiliza valoarea
unei proprietati procedam astfel: nume_obiect. proprietate
Pentru a introduce un script intr-un document Web vom utiliza marcajul <SCRIPT>, care este o
extensie a limbajului Html. Acest marcaj permite introducerea unui numar arbitrar de functii sau secvente
de instructiuni JavaScript si poate sa apara in orice sectiune a documentului.
Exemplu: Vom introduce un script care sa afiseze in document un mesaj. Codul este urmatorul:<HTML>
<HEAD><Title>Exp 1</Title><Script Language="JavaScript"><!--
document.write("Acesta este inceputul documentului")-->
</Script></HEAD>
<Body><P>Aici este continutul ce va fi afisat pe pagina</P>
</Body></HTML>
Am utilizat scriptul Language pentru a specifica ce limbaj de script este utilizat in scriptul inserat.
Scriptul propriu-zis a fost introdus intr-un marcaj de comentariu pentru a nu induce in eroare browserelecare nu pot interpreta JavaScript. Spunem ca ascundem scriptul de navigatoarele care nu stiu JavaScript.
Plasarea scriptului in antetul documentului determina executarea acestuia la incarcarea paginii de catre
navigator. Continutul paginii va fi afisat doar dupa executarea scripturilor din antetul documentului. Amutilizat un obiect predefinit, document si o metoda a sa write. Acest obiect defineste caracteristicile
documentului Html incarcat in fereastra navigatorului. Metoda write afiseaza un sir de caractere in cadrul
documentului.
CGI (C)
CGI (Common Gateway Interface) este un standard pentru interfata grafica a unor aplicatiiexterne ce sunt rulate de un server HTTP sau Web. Serverul HTTP transfera informatii unui scenariu CGI
utilizand argumente de linie de comanda si variabile de mediu. Serverul atribuie valori variabilelor de
mediu cand executa un scenariu. Informatia culeasa intr-un formular care apeleaza un script se poate
trimite catre serverul Web CGI prin doua feluri: GET si POST. Parametrul METHOD specifica alegereafacuta la implementarea formularului in pagina Web. Fiecare metoda foloseste o cale diferita pentru a
trimite informatiile din formular la server, in momentul in care butonul submit (trimite) este apasat.Mai jos am prezentat o serie de variabile folosite de catre CGI:
Variabila SCRIPT_NAME – este folosita pentru a determina calea virtuala catre scenariul care va fi rulat
pe server.Exemplu: SCRIPT_NAME = /practica.html/proiect.html
Variabila QUERY_STRING –este folosita pentru a primi informatii de tip text care urmeaza dupa
caracterul semnul intrebarii (?) in URL-ul specificat de utilizator pentru lansarea scenariului. Serverul va
5/13/2018 prj - slidepdf.com
http://slidepdf.com/reader/full/prj5571ff9949795991699da62c 5/11
Universitatea Stefan cel Mare Suceava
Facultatea de Inginerie Electrica
Specializarea Calculatoare
inlocui toate caracterele speciale cu caracterele "%aa" ude "aa" este o cifra in baza 10, iar spatiul il va
inlocui cu "+". Deci scenariul trebuie sa contina instructiuni pentru decodarea sirului de caractere. Deexemplu, pentru adresa URL: http://www.stud.usv.ro/~azabre/practica/sedinta4/formular/?
nume=Adi+Adrian, valoarea variabilei de mediu va fi:
Exemplu: QUERY_STRING = nume=Adi+Adrian
Variabila REMOTE_ADDR - ajuta un scenariu CGI sa poata afla adresa IP a unui browser careefectueaza o cerere. De exemplu, o adresa de IP:
Exemplu: REMOTE_ADDR = 82.208.147.139
Variabila REMOTE_HOST – cu ajutorul ei se poate afla numele unei gazde care efectueaza o cerere.
Exemplu: REMOTE_HOST = adrian.ro
Variabila CONTENT_TYPE – este folosita pentru interogari care au atasate informatii, de exemplu o
operatie HTTP de tip POST.Exemplu: CONTENT_TYPE = text/html
BKT (Backtracking)
Metoda Backtracking se foloseste in rezolvarea problemelor care indeplinesc simultan urmatoareleconditii:- solutia lor poate fi pusa sub forma unui vector S=x1,x2, ...,xn, cu x1 € A1, x2 € A2 …,xn € An;
- multimile A1, A2 , …., An sunt multimi finite, iar elementele lor se considera ca se afla intr-o relatie de
ordine bine stabilita;
- nu se dispune de o alta metoda de rezolvare, mai rapida;
- x1 x2 …, xn pot fi la randul lor vectori;
- A1, A2 …, An pot coincide.
Tehnica backtracking are la baza un principiu extrem de simplu:
- se construieste solutia pas cu pas: x1, x2 …,xn;
daca se constata ca, pentru o valoare aleasa, nu avem cum sa ajungem la solutie, se renunta la acea valoaresi se reia cautarea din punctul in care am ramas.
5/13/2018 prj - slidepdf.com
http://slidepdf.com/reader/full/prj5571ff9949795991699da62c 6/11
Universitatea Stefan cel Mare Suceava
Facultatea de Inginerie Electrica
Specializarea Calculatoare
II. Manualul programatorului
Specificatii de realizare
Proiectul este realizat folosind sase fisiere, dintre care 3 sunt .html si 3 sunt .cgi, fiecarei paginiweb ce primeste date de intrare corespunzandu-i un fisier cgi de prelucrare a acestor date.
Astfel, fisierul camile.html, contine, pe langa etichetele HTML obisnuite, eticheta <FORM> ce
marcheaza prezenta unui formular. Acest formular foloseste metoda de transmitere a datelor catre server
denumita „GET”, iar la parametrul action are trecuta adresa web a cgi-ului ce trebuie sa prelucreze datelede intrare. Acestea, in cazul problemei camilelor, al carei enunt se afla pe pagina web, consta in doar un
singur numar, numarul de camile. Utilizatorul va completa o valoare pentru acesta folosind casuta text,
introdusa in formular folosind eticheta <INPUT>. Nu orice valoare poate fi introdusa in aceasta casuta – nu sunt acceptate caracterele ce nu sunt cifre, iar valoarea totala introdusa nu trebuie sa depaseasca 20 de
camile. Semnalarea erorilor catre utilizator se face prin modificari ale culorii pentru font si frontieracasutei, fapt realizat prin apelarea unei serii de functii JavaScript, dintre care amintim:
- functia verlit(), ce primeste ca argument un obiect oarecare, a. Aceasta functie are rolul de averifica existenta literelor in sirul a.value. Pentru a efectua aceasta verificare sunt necesare doua
variabile contor i si j. Metoda folosita consta in parcurgerea sirului, folosind instructiunea
repetitiva cu contor for si variabila contor i, aceasta din urma fiind delimitata de intervalul ale caruicapete sunt 0 si lungimea sirului obtinuta prin a.value.length, ce o returneaza. In cadrul acestei
parcurgeri este efectuata verificarea if(!(isNaN(a.value.charAt(i)))), ce are urmatoarea semnificatie
– daca elementul aflat pe pozitia i in cadrul sirului a.value, obtinuta prin proprietatea .charAt(i),returneaza fals atunci cand i se aplica functia isNaN (is not a number) functia va executa
instructiunile ce urmeaza pe prima ramura. Deci se verifica daca de fapt caracterul de pe fiecare
pozitie in cadrul sirului a.value este un numar. Instructiunile ce urmeaza pe ramura executata incazul in care conditia de la if este adevarata reprezinta o serie de atribuiri. Astfel , mai intai douacare vor schimba culoarea font-ului, folosind proprietatea .style.color, si a frontierei casutei
textbox, folosind style.borderColor, in #000000 (negru), schimbare a culorii ce anunta parcurgerea
cu succes a acestei functii pe ramura marcata de conditia adevarat. Urmatoarea atribuire, j=1, estefolosita de functie pentru a „concluziona” aceasta parcurgere a ei, valoarea memorata de variabila j
fiind returnata de functie spre a folosi validarii finale din functia validare(). Ramura pe care o va
urma executia functiei, in cazul in care nu este indeplinita conditia de la if, este marcata, la fel ca inlimbajul C, de cuvantul cheie else. De asemenea si aceasta ramura contine trei atribuiri, pentru
schimbarea culorii font-ului si a frontierei casutei text in #FF0000 (rosu) si pentru variabila contor
j, careia i se atribuie valoarea 0, pe langa care mai apare si instructiunea break, folosita in acest caz
pentru a intrerupe verificarea pentru caracterele ce urmeaza in sir, considerandu-se ca daca s-aintalnit un caracter care nu este cifra nu mai are rost sa se continue verificarea pentru celelalte
caractere din sir deoarece deja s-a gasit o greseala care este semnalata prompt catre utilizator prin
schimbarea culorii celor doua elemente. Functia verlit() returneaza valoarea variabilei j, 1 sau 0,valoare ce va fi folosita in cadrul validarii finale.
functia estevid() primeste ca argument un obiect oarecare, a, avand rolul de a verifica daca a fostsau nu completata o casuta text. Pentru aceasta verificare se foloseste ca mai sus proprietatea
a.value.length, ce returneaza lungimea sirului a.value. Daca aceasta este diferita de 0 atunci
urmeaza cele trei atribuiri, primele doua pentru schimbarea culorii pentru elementele font si
5/13/2018 prj - slidepdf.com
http://slidepdf.com/reader/full/prj5571ff9949795991699da62c 7/11
Universitatea Stefan cel Mare Suceava
Facultatea de Inginerie Electrica
Specializarea Calculatoare
frontiera casutei, iar cea de-a treia pentru a atribui variabilei j, folosita de functie in cadrul
returnarii, valoarea 1. In caz contrar, pe ramura else, urmeaza aceleasi trei atribuiri, insa cu valoridiferite, si anume #FF0000 pentru culoarea folosita pentru a semnaliza greseala pentru utilizator si
valoarea 0 pentru variabila j. Daca trece de instructiunea decizionala fara nici o eroare, functia
returneaza valoarea variabilei j, folosita ca si in cazul functiei anterioare pentru verificarea finala a
completarii casutei text. functia verint() primeste ca argument, ca si celelalte functii mentionate pana acum, un obiect
oarecare a, avand rolul de a verifica daca valoarea obtinuta prin conversia la real a sirului a.value
se incadreaza intr-un anumit interval, in cazul de fata acesta fiind [1;20]. Pentru conversie sefoloseste functia parseFloat, care parcurge sirul pana la intalnirea unui caracter NaN (care nu este
cifra – not a number), returnand valoarea astfel obtinuta. Metoda de verificare a apartenentei
valorii pentru intervalul respectiv este reprezentata de aplicarea in instructiunea decizionala if aconditiei parseFloat(a.value) >=1||parseFloat(a.value)<=20, ce are semnificatia: daca numarul
obtinut prin convertirea sirului a.value este mai mare sau egal cu 1 sau mai mic sau egal cu 20, care
permite parcurgerea functiei pe latura corespunzatoare valorii de adevar a conditiei. Aceastacontine, spre deosebire de celelalte functii prezentate, doar o singura atribuire, si anume aceea a
valorii 1 variabilei j, ce va fi returnata de functie. In cazul in care conditia nu este indeplinita, parcurgerea ramurii ce urmeaza dupa else implica, ca si la functiile anterioare, cele trei atribuiri,
pentru schimbarea culorilor si pentru variabila j. In final valoarea variabilei j este returnata,contribuind la verificarea finala.
functia validare() nu are nici un argument, returnand o valoare booleana. Aceasta functie are rolulde a prelua valorile returnate de fiecare functie de verificare preliminara in parte, returnand fals in
cazul in care una sau mai multe dintre acestea au returnat 0, deci nu au fost indeplinite conditiile
din cadrul lor. Metoda folosita se bazeaza pe implementarea instructiunii decizionale if, ce are la
conditie produsul valorilor returnate de fiecare functie apelata pentru fiecare control de tip text egalsau nu cu 1, apelarea facandu-se folosind antetul document.frm pentru numele fiecarui control (de
exemplu estevid(document.frm.n.)). Termenul frm semnifica de fapt numele formularului
implementat in pagina web. Daca una sau mai multe dintre functiile apelate returneaza 0, produsulfinal va fi 0, fiind clar faptul ca undeva s-a comis o eroare la completare, variabila j luand valoarea
false. Functia returneaza true sau false in functie de succesul verificarilor preliminare.
Astfel, daca valoare completata pentru numarul de camile nu este eronata, la evenimentul onClick pe butonul Submit aceasta este trimisa catre server spre a fi prelucrata.
Prin compilarea fisierului camile.c se obtine fisierul camile.cgi, care va afisa solutiile problemei
intr-o noua pagina html. Sursa .c contine o partitionare a functiilor specifica metodei de rezolvare
backtracking, deci existand functiile este_posibil(), afis_solutie(), solutie() si bkt(). Numarul de camileeste preluat folosind un sir auxiliar a carui adresa de inceput devine adresa variabilei de mediu
QUERY_STRING. Acesta are la inceput valoarea lui n, care este extrasa printr-o parcurgere a sirului pana
la primul egal (de obicei sirurile QUERY_STRING sunt formate prin succesiuni de sintagme de forma
nume=valoare separate de caracterul &) iar de la acesta pana la sfarsitul sirului, marcat de caracterul „\0”. Noul sir in care s-a memorat valoarea este convertit la intreg folosind functia atoi(), rezultatul obtinut fiind
atribuit variabilei n, care codifica numarul de camile in cadrul programului .c.
5/13/2018 prj - slidepdf.com
http://slidepdf.com/reader/full/prj5571ff9949795991699da62c 8/11
Universitatea Stefan cel Mare Suceava
Facultatea de Inginerie Electrica
Specializarea Calculatoare
III. Manualul utilizatorului
Specificatii de utilizare
Aplicatiile vor fi lansate in executie prin intermediul a trei fisiere: camile.html maxcai.html si
leitigri.html. In fereastra browserului vor aparea:
5/13/2018 prj - slidepdf.com
http://slidepdf.com/reader/full/prj5571ff9949795991699da62c 9/11
Universitatea Stefan cel Mare Suceava
Facultatea de Inginerie Electrica
Specializarea Calculatoare
Dupa introducerea datelor in campurile text se apasa butonul Submit, astfel datele sunt trimise, iar
pentru stergerea datelor introduse se apasa butonul Reset. Daca datele nu sunt introduse corect sau deloc
casutele se vor inrosi.Solutiile vor aparea in modul urmator :
Pentru problema camilelor De exemplu s-au introdus 4 camile
Pentru problema maximului de cai
De exemplu s-a introdus 7 car reprezinta numarulde coloane si de linii
5/13/2018 prj - slidepdf.com
http://slidepdf.com/reader/full/prj5571ff9949795991699da62c 10/11
Universitatea Stefan cel Mare Suceava
Facultatea de Inginerie Electrica
Specializarea Calculatoare
Pentru problema leilor si tigrilor
De exmplu s-a introdus un numar de 4 tigri si 5
lei
5/13/2018 prj - slidepdf.com
http://slidepdf.com/reader/full/prj5571ff9949795991699da62c 11/11
Universitatea Stefan cel Mare Suceava
Facultatea de Inginerie Electrica
Specializarea Calculatoare
IV. Perspective de imbunatatire
Imbunatatirea proiectului s-ar putea face in urmatoarele etape:- crearea unui dinamism mai puternic pentru paginile web, care necesita un cod sursa html mai
elaborat, la care s-ar putea adauga o serie de instructiuni folosite in JavaScript, ce pot contribui la
dinamizarea paginii- crearea unei interfete grafice mai atractive, ce s-ar putea concretiza prin folosirea fie a claselor
CSS, fie a gif-urilor animate, sau animatie Flash sau de alte tipuri
- spargerea barierelor - valorile ce pot fi introduse in cazul numarului de camile, al dimensiuniitablei de sah in problema dispunerii unui numar maxim de cai pe o tabla de sah, si in cazul
numarului de lei si tigri, sunt limitate la un anumit interval, din care pot fi prelucrate in majoritatea
cazurilor doar valorile intregi. Acest interval ar putea fi marit, lucru care insa s-ar realiza cu unconsum mai mare al resurselor de pe calculatorul server.
Orice eventuale propuneri sau sesizari pot fi trimise la adresa de mail [email protected].
V. Bibliografie
Cartile folosite: - Stefan – Gh. Pentiuc – „Structuri de date si algoritmi fundamentali”
Articole: -
Pagini web:- www.w3schools.com
- www.devguru.com,- www.e-scoala.ro
- http://thor.info.uaic.ro/~val/istoric.html
- http://www.afaceri.net/articole/Webdesign/Proiectare/Scripturi_CGI.htm
- http://www.fil.unibuc.ro/~stefanov/study/other/tutorialjs/tutorial04.html- http://www.eed.usv.ro/~pentiuc
http://www.cs.ubbcluj.ro/~salvan/articol_js/artjs.html
Alte surse: cunostintele acumulate la laboratoarele de practica.