PRJ

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) Manual al programatorului Specificatii de realizare Manual al utilizatorului Specificatii de utilizare Perspective de imbunatatire Interfata grafica mai atractiva Spargerea barierelor Conversia CGI (C) CGI (php) Bibliografie
II. III. IV.
V.
I. Consideratii teoretice.
Tehnologii utilizate: HTML
HTML (Hyper Text Markup Language) este limbajul in care sint scrise paginile World Wide Web (WWW). Hypertext 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 pe ecranul 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 Row) 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 codul HTML, astfel ca este ideal pentru oamenii obisnuiti cu HTML. Scripturile JavaScript sunt interpretate de browserele Web, care "stiu" JavaScript, acesta fiind un limbaj 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"> <!-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 browserele care 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. Am utilizat 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 aplicatii externe 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 alegerea facuta 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. De exemplu, 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 care efectueaza 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 urmatoarele conditii: - 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 valoare si 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 pagini web 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 datele de 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 frontiera casutei, 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 a verifica 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 carui capete 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 in cazul in care conditia de la if este adevarata reprezinta o serie de atribuiri. Astfel , mai intai doua care 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, este folosita 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 in limbajul 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-a intalnit 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 fost sau 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 valori diferite, 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 se foloseste 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 a conditiei 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. Aceasta contine, 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 rolul de 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 egal sau 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, produsul final 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 camile este 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 numarul de 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 dimensiunii tablei 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 un consum mai mare al resurselor de pe calculatorul server. Orice eventuale propuneri sau sesizari pot fi trimise la adresa de mail azabre@stud.usv.ro.
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

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

PRJ

Încărcat de

Drepturi de autor:

Formate disponibile

Universitatea Stefan cel Mare Suceava Facultatea de Inginerie Electrica Specializarea Calculatoare

Proiect la practica in programare

Autor: Zabre Adrian Indrumatori: Schipor Ovidiu Gaza Felicia

II. III. IV.

II. Manualul programatorului

III. Manualul utilizatorului

IV. Perspective de imbunatatire

S-ar putea să vă placă și