prj

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






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






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:

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

</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






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.






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






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.






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:






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






Pentru problema leilor si tigrilor

De exmplu s-a introdus un numar de 4 tigri si 5

lei






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.

prj

Documents

Transcript of prj