Ce e o aplicatie web? De la aplicatii in consola la cele cu interfete web.

#1
dani.user

Posted 22 August 2017 - 21:40

Guru Member

Grup: Senior Members
Posts: 29,616
Înscris: 24.02.2007

Acest tutorial isi propune sa prezinte pe scurt din ce e compusa o aplicatie web, ce limbaje sunt folosite in dezvoltarea sa, si cum nu difera atat de mult de aplicatiile obisnuite pe cat ar dorii unii sa creada.

Limbajele folosite vor fi:

HTML pentru a descrie interfata (nu e limbaj de programare, prezinta doar o structura arborescenta)
CSS pentru a stiliza interfata (nu e limbaj de programare, prezinta doar perechi cheie valoare gen "background-color: white" si cui ar trebui sa i se aplice)
Javascript (limbaj de programare ce, in acest caz, e interpretat de catre browser)
C (limbaj de programare, ce va rula pe server)

O aplicatie gen dictionar

Sa zicem ca dorim sa dezvoltam o aplicatie de tip dictionar. Input: un cuvant sau o parte din el. Output: unul sau mai multe cuvinte, fiecare insotite de o explicatie.

Cum ar arata o astfel de aplicatie in consola? Foarte simplu:

Se interogheaza un criteriu de cautare
Se cauta rezultate
Se afiseaza rezultatele

Oare difera mult abordarea daca aplicatia nu mai e rulata din consola ci are o interfata web? Principial, mai deloc.

Pasul 1 – Interfata

Scriem o interfata web, folosind HTML pentru a descrie ce elemente apar pe ecran si CSS pentru a le stiliza mai frumos.

Fisierul, salvat pe disc drept index.htm va fi deservit de catre serverul web de fiecare data cand cineva ii trimite o cere pentru http://localhost/index.htm

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>Simple Dictionary</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
	<script type="text/javascript" src="code.js"></script>
</head>
<body class="container">
	<h1>Simple Dictionary</h1>
	<form>
		<div class="form-group">
			<label for="toSearch">Word to search:</label>
			<input type="text" id="toSearch" class="form-control" />
		</div>
		<button id="searchButton" class="btn btn-default">Search</button>
	</form>
	<div id="results">
		<h2>Results</h2>
		<table class="table">
			<thead>
				<tr>
					<th>Word</th>
					<th>Definition</th>
				</tr>
			</thead>
			<tbody id="resultsTableBody">
			</tbody>
		</table>
	</div>
</body>
</html>

Pasul 2 – Codul client

Scriem cod Javascript, pentru a executa o cautare atunci cand utilizatorul apasa butonul aferent si pentru a afisa rezultatele odata ce le avem.

function performSearch(toSearch, processResultsCallback) {
	var xmlHttp = new XMLHttpRequest();
	xmlHttp.onreadystatechange = function() {
		if (xmlHttp.readyState == XMLHttpRequest.DONE) {
			processResultsCallback(xmlHttp.status, xmlHttp.responseText);
		}
	}
	xmlHttp.open("GET", "http://localhost/cgi-bin/MyDictionary.exe?word=" + encodeURIComponent(toSearch))
	xmlHttp.send();
}

window.onload = function () {

	document.getElementById("searchButton").addEventListener("click", function (event) {

		event.preventDefault();

		var toSearch = document.getElementById("toSearch").value;
		performSearch(toSearch, function(statusCode, resultString) {
			if (200 != statusCode) {
				alert("Error while performing the search");
				return;
			}

			var resultsTableBody = document.getElementById("resultsTableBody");
			while (resultsTableBody.firstChild) {
				resultsTableBody.removeChild(resultsTableBody.firstChild);
			}

			var resultObject = JSON.parse(resultString);
			resultObject.results.forEach(function (result) {
				var row = document.createElement("tr");
				resultsTableBody.appendChild(row);

				var wordColumn = document.createElement("td");
				wordColumn.appendChild(document.createTextNode(result.word));
				row.appendChild(wordColumn);

				var definitionColumn = document.createElement("td");
				definitionColumn.appendChild(document.createTextNode(result.definition));
				row.appendChild(definitionColumn);
			});
		});
	});
};

Ce face acest cod?

Se ataseaza la evenimentul click al butonului de cautare
Cand acel buton e apasat, se citeste textul introdus de utilizator in casuta text si se trimite o cerere la server pentru a primi raspunsuri
Dupa ce vine raspunsul (poate dura ceva) sub forma de text, acesta e parsat ca JSON rezultand o structura de obiecte
Pentru fiecare inregistrare primita drept rezultat la interogare, codul adauga cate un rand in tabel

Pasul 3 – Cine ofera raspunsurile?

De unde vin rezultatele? Ce am prezentat pana acum nu contine nici un rezultat sub forma cuvant-definitie. Pentru a le obtine, codul Javascript cere browserului sa interogheze serverul nostru. Interogarea implica o cerere catre o adresa ce arata in felul urmator: http://localhost/cgi...d=cuvantcautat.

Cine va raspunde la aceasta cerere? Serverul web. Instalam Apache pentru acest exemplu (nu e singurul, dar e suficient pentru acest exemplu).

Cum arata defapt cererea? Pe retea, ea respecta protocolul HTTP:

GET /cgi-bin/MyDictionary.exe?word=cd HTTP/1.1
Host: localhost
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.101 Safari/537.36
Accept: */*
Referer: http://localhost/index.htm
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8,ro;q=0.6,de;q=0.4,it;q=0.2

Cum ar trebui sa arate un raspuns?

HTTP/1.1 200 OK
Date: Tue, 22 Aug 2017 18:50:53 GMT
Server: Apache/2.4.7 (Win32) PHP/5.5.8
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/json

{
	"query": "cd",
	"results": [
		{
			"word": "abcd",
			"definition": "A fine word"
		}
		,
		{
			"word": "cdef",
			"definition": "Missing a few letters"
		}
	]
}

Se poate observa ca raspunsul e structurat din doua parti.

Prima parte ofera informatii cum ca procesarea cererii a decurs cu bine, se va oferi un raspuns de tip json, etc
A doua parte cuprinde raspunsul propriu-zis ce poate fi de orice fel. In acest caz, el e sub forma de text, structurat ca json, pentru a usor de interpretat de catre codul javascript.

Pasul 4 – Cum invat Apache sa ofere un asemenea raspuns?

In mod normal, cand lui Apache ii este cerut ceva, acesta cauta pe disc un fisier cu acel nume si trimite clientului continutul fisierului. Acest lucru se intampla cu index.htm si codul javascript (code.js).

Raspunsurile insa nu i le putem oferi de pe disc. Drept urmare vom folosi o facilitate foarte simpla: Common Gateway Interface (CGI). Vine cererea de mai sus, Apache executa aplicatia MyDictionary.exe (sub Linux e la fel doar ca fara .exe), ii ofera cererea clientului sub forma de date de intrare, iar ce scrie raspunde aplicatia, Apache preia si trimite inapoi spre client.

Varianta e usor mai invechita, sufera la capitolul performanta fiindca porneste aplicatia pentru fiecare cerere, insa e usor de inteles si implementat, in orice limbaj.

Cum arata codul lui MyDictionar.exe?

#include <stdio.h>
#include <string.h>
#include <stddef.h>

struct DictionaryEntry
{
	const char* word;
	const char* definition;
};

void searchEntry(const char* wordToSearch)
{
	static const struct DictionaryEntry entries[] = 
	{
		{"abcd", "A fine word"},
		{"hello", "Another fine word"},
		{"cdef", "Missing a few letters"}
	};
	size_t numberOfEntries = sizeof(entries) / sizeof(entries[0]);

	printf("Content-Type: application/json\n\n");
	printf("{\n");
	printf("	\"query\": \"%s\",\n", wordToSearch);
	printf("	\"results\": [\n");

	if (strlen(wordToSearch))
	{
		int matchFound = 0;
		for (size_t i = 0; i < numberOfEntries; ++i)
		{
			if (0 < strstr(entries[i].word, wordToSearch))
			{
				if (matchFound)
				{
					printf("		,\n");
				}
				else
				{
					matchFound = 1;
				}
				printf("		{\n"); //TODO: escape special characters
				printf("			\"word\": \"%s\",\n", entries[i].word);
				printf("			\"definition\": \"%s\"\n", entries[i].definition);
				printf("		}\n");
			}
		}
	}
	printf("	]\n");
	printf("}\n");
}

const char* getSearchString(const char** headers)
{
	static const char* emptyString = "";

	while (*headers)
	{
		const char* header = *headers++;
		if (header == strstr(header, "REQUEST_URI="))
		{
			//TODO: parse all query values
			const char* firstHeaderAt = strstr(header, "?");
			const char* firstValueAt = strrchr(header, '=');

			if ((firstHeaderAt > 0) && (firstValueAt > firstHeaderAt))
			{
				//TODO: decode url encoded parts
				return firstValueAt + 1;
			}
		}
	}

	return emptyString;
}

int main(int argc, const char** argv, const char** env)
{
	const char* searchString = getSearchString(env);
	searchEntry(searchString);
}

Atat de scurt? Da... preluam cuvantul cerut de client, cautam raspunsuri, si le oferim folosind banalul printf().

De unde stim ce cuvant e cautat? Vectorul env contine mai multe inregistrari cu informatii despre cerere. Cea de interes arata in felul urmator:

REQUEST_URI=/cgi-bin/MyDictionary.exe?word=cuvantcautat

Acest sir de caractere trebuie analizat si extras cuvantul de cautat. Codul e simplificat si trateaza doar cazul in care acesta e singurul parametru oferit. Adesea sunt mai multe, separate prin &.

Pasul 5 – Rezultatul

1.png 10.37K 89 downloads

Tema de casa

Sa se adreseze cerintele din TODO, intalnite prin sursa.
Sa se realizaze cautarea definitiilor intr-o baza de date relationala (folosind SQL)

Atentie: tutorialul abia a zgariat suprafata a ceea ce inseamna o aplicatie web. Mai sunt multe aspecte de care trebuie sa se tina cont, in special de securitate.

Back to top

#2
red46

Posted 22 August 2017 - 22:07

Senior Member

Grup: Senior Members
Posts: 4,277
Înscris: 06.03.2016

Nu era mai simplu cu PHP?

Back to top

#3
modoran

Posted 22 August 2017 - 22:25

Senior Member

Grup: Senior Members
Posts: 7,491
Înscris: 08.02.2011

Asta e exact acelasi lucru cu executia scripturilor de tip Perl sau Python pe un server web,, care se practica din cele mai vechi timpuri. Si din PHP se pot executa fisiere direct de pe server cu redirectionarea outputului, posibilitatile sunt numeroase.

Cand am citit "aplicatie web" in titlu ma gandeam la ceva javascript, ajax sau ma rog, ceva ce seamana vizual cu o aplicatie desktop.

Back to top

#4
MarianG

Posted 22 August 2017 - 22:28

be that as it may

Grup: Moderators
Posts: 29,368
Înscris: 10.08.2005

Scopurile sunt ca cititori sa invete, sa inteleaga anumite aspecte, si eventaul sa incerce rezolvari (//TO DO)
Aplicatia MyDictionary.exe este de sine statatoare si nu are cunostinte despre prezenta lui 'WEB'
Ea stie ca primeste date (input) si face output

Cat priveste utilizatorul (browser-ul) el stie ca primeste output (de la server), nu trebuie sa ii pese cum a ajuns serverul la aceste date, ci doar sa le afiseze (intr-un mod elegant descris de HTML si CSS)

Edited by MarianG, 22 August 2017 - 22:31.

Back to top

#5
dani.user

Posted 22 August 2017 - 22:39

Guru Member

Grup: Senior Members
Posts: 29,616
Înscris: 24.02.2007

red46, on 22 august 2017 - 22:07, said:

Nu era mai simplu cu PHP?

Didactic, nu. Prea multi cred ca PHP si tehnologii similare sunt undeva intr-un univers paralel, fara nici o legatura cu altele cand ele defapt sunt foarte similare, doar difera pe ici pe colo.

Tutorialul de mai sus incearca sa se lege/sa refoloseasca cat mai mult din ce stie deja incepatorul.

Edited by dani.user, 22 August 2017 - 22:40.

Back to top

#6
red46

Posted 23 August 2017 - 10:33

Senior Member

Grup: Senior Members
Posts: 4,277
Înscris: 06.03.2016

dani.user, on 22 august 2017 - 22:39, said:

Didactic, nu. Prea multi cred ca PHP si tehnologii similare sunt undeva intr-un univers paralel, fara nici o legatura cu altele cand ele defapt sunt foarte similare, doar difera pe ici pe colo.

Tutorialul de mai sus incearca sa se lege/sa refoloseasca cat mai mult din ce stie deja incepatorul.

P�i pentru acei oameni �i HTML/JS ar trebui s� fie o problem�.
Spre exemplu, scriptul JS �i aplicația scris� �n C puteau fi foarte u�or �nlocuite cu un script PHP.

Dac� totu�i se insist� pe utilizarea limbajelor de programare general-purpose pentru web development, exist� FastCGI, care e mult mai rapid dec�t clasicul CGI.

Edited by red46, 23 August 2017 - 10:39.

Back to top

#7
poadol

Posted 23 August 2017 - 11:10

Guru Member

Grup: Senior Members
Posts: 14,104
Înscris: 13.12.2010

red46, on 22 august 2017 - 22:07, said:

Nu era mai simplu cu PHP?

Incepatorul ar trebui sa vada cum se prezinta aplicatia si prin PHP sau ba?

Back to top

#8
RedDev

Posted 23 August 2017 - 11:18

Active Member

Grup: Members
Posts: 1,847
Înscris: 29.10.2014

Să faci backend-ul în C, asta înseamnă să fii mafiot.

De mult eram curios cum se poate lega un program C de o interfață web și văd că e al naibii de ușor. Păcat că marea problemă stă în generarea rezultatelor de MySQL mai degrabă decât procesarea în PHP. Că ceva durează 100 ms în PHP sau 20 în C, e destul de irelevant.

Back to top

#9
neagu_laurentiu

Posted 23 August 2017 - 11:21

Guru Member

Grup: Senior Members
Posts: 40,096
Înscris: 30.07.2003

red46, on 23 august 2017 - 10:33, said:

Dacă totuşi se insistă pe utilizarea limbajelor de programare general-purpose pentru web development, există FastCGI, care e mult mai rapid decât clasicul CGI.

Da, dar tehnologia FastCGI nu e mai simpla ca CGI (similara cu aplicatia desktop). Scopul nu e pt. industrie ci didactic, care sunt componentele din lant, cum le poti scrie cu limbaje populare/scolaresti.

Edited by neagu_laurentiu, 23 August 2017 - 11:25.

Back to top

#10
red46

Posted 23 August 2017 - 11:31

Senior Member

Grup: Senior Members
Posts: 4,277
Înscris: 06.03.2016

poadol, on 23 august 2017 - 11:10, said:

Incepatorul ar trebui sa vada cum se prezinta aplicatia si prin PHP sau ba?

@dani.user cred că a vrut să facă trecerea de la aplicații simple în consolă la aplicații web mai simplă pentru începători, însă aplicația mai conține şi Javascript, care pentru unii e la fel de greu ca PHP. Practic n-am ajuns nicăieri.

neagu_laurentiu, on 23 august 2017 - 11:21, said:

Da, dar tehnologia FastCGI nu e mai simpla ca CGI (similara cu aplicatia desktop). Scopul nu e pt. industrie ci didactic, care sunt componentele din lant, cum le poti scrie cu limbaje populare/scolaresti.

E un început bun, însă pentru a înțelege codul de mai sus sunt necesare cunoştințe JS/HTML/CSS.

Back to top

#11
neagu_laurentiu

Posted 23 August 2017 - 11:34

Guru Member

Grup: Senior Members
Posts: 40,096
Înscris: 30.07.2003

Desigur, sub acest minim nu poti. Chiar daca gasim o tehnologie care incapsuleaza pe respectivele, nu ajuta in procesul de intelegere a bazelor.

Back to top

#12
c3ezar

Posted 23 August 2017 - 12:48

Junior Member

Grup: Members
Posts: 50
Înscris: 16.10.2011

Foarte interesant, s-au legat cateva rotite in creier, o nelamurire am insa cum primeste parametrul env main-ul din C ?

Edited by c3ezar, 23 August 2017 - 12:48.

Back to top

#13
neagu_laurentiu

Posted 23 August 2017 - 13:07

Guru Member

Grup: Senior Members
Posts: 40,096
Înscris: 30.07.2003

Serverul web face asta.

Back to top

#14
RedDev

Posted 23 August 2017 - 15:13

Active Member

Grup: Members
Posts: 1,847
Înscris: 29.10.2014

Eu mă așteptam să trimită parametrii ca la orice aplicație normală, în argv, dar și așa e ok.

Back to top

#15
dani.user

Posted 23 August 2017 - 17:56

Guru Member

Grup: Senior Members
Posts: 29,616
Înscris: 24.02.2007

Faptul c-am introdus si Javascript poate parea fortat, dar e o realitate ce nu poate fi evitata: browserele stiu si executa javascript, mai toate site-urile folosesc mai mult sau mai putin javascript. M-am straduit sa folosesc javascript "pur", fara frameworks externe.

Tutorialul ajuta invatacelul sa constientizeze diferenta foarte importanta intre cod executat pe server si cod executat in cadrul browserului. O reiterare a diferentelor:

Codul javascript executat de browser:
- Modifica continutul paginii (ce e afisat clientului)
- Reactioneaza la interactiuni (tastatura/mouse/touchpad) cu utilizatorul
- Trimite noi cereri catre server
- Foloseste datele primite de la server pentru a afisa diverse informatii pe ecran
- etc.
Codul executat de server:
- Gestioneaza informatiile
- Raspunde la cererile clientului, in ce mod doreste
- Valideaza datele trimise de client (exemplu: daca e buna combinatia user/parola, daca numele ales de utilizator e disponibil, etc)
- Pastreaza un jurnal cu cine/ce a cerut pentru verificari ulterioare
- etc.

PHP nu-si avea rostul aici. Care-i punctul forte al PHP-ului? Ca poti scrie usor sabloane ce genereaza HTML. Evit sa prezint asa ceva fiindca e o abordare invechita si plina de probleme ce nu-si are locul in dezvoltarea web moderna. Iar multi ce vad prima data, aia le ramane in minte si greu mai scapa de obiceiuri proaste (plina lumea de cod cu mysql_fetch_row urmat de echo pe randul urmator)

RedDev, on 23 august 2017 - 11:18, said:

Păcat că marea problemă stă în generarea rezultatelor de MySQL mai degrabă decât procesarea în PHP. Că ceva durează 100 ms în PHP sau 20 în C, e destul de irelevant.

Daca MySQL e veriga slaba si deranjeaza, solutia e simpla: se inlocuieste/elimina din sistem.

Back to top

#16
OriginalCopy

Posted 23 August 2017 - 21:12

I'm harmful, fear me please! :))

Grup: Senior Members
Posts: 27,268
Înscris: 10.08.2006

Peste câțiva ani sper că vom vedea o mare parte din codul js rescris in C și compilat in wasm.

Atâta tamtam fac copiii pe marginea limbajului, când el e de fapt irelevant.

Back to top

#17
poadol

Posted 24 August 2017 - 14:06

Guru Member

Grup: Senior Members
Posts: 14,104
Înscris: 13.12.2010

red46, on 23 august 2017 - 11:31, said:

@dani.user cred că a vrut să facă trecerea de la aplicații simple în consolă la aplicații web mai simplă pentru începători, însă aplicația mai conține şi Javascript, care pentru unii e la fel de greu ca PHP. Practic n-am ajuns nicăieri.

Javascript este mai dificil decat PHP in general, in cazul acesta poate fi mai usor cu Javascript, parere proprie de nespecialist evident.

Back to top

#18
MarianG

Posted 24 August 2017 - 14:36

be that as it may

Grup: Moderators
Posts: 29,368
Înscris: 10.08.2005

Cum arata alternativa?

Back to top

Anunturi

Chirurgia endoscopică a hipofizei

"Standardul de aur" în chirurgia hipofizară îl reprezintă endoscopia transnazală transsfenoidală.

Echipa NeuroHope este antrenată în unul din cele mai mari centre de chirurgie a hipofizei din Europa, Spitalul Foch din Paris, centrul în care a fost introdus pentru prima dată endoscopul în chirurgia transnazală a hipofizei, de către neurochirurgul francez Guiot. Pe lângă tumorile cu origine hipofizară, prin tehnicile endoscopice transnazale pot fi abordate numeroase alte patologii neurochirurgicale.

www.neurohope.ro

Ce e o aplicatie web? De la aplicatii in consola la cele cu interfete web.

#1 dani.user Posted 22 August 2017 - 21:40

#2 red46 Posted 22 August 2017 - 22:07

#3 modoran Posted 22 August 2017 - 22:25

#4 MarianG Posted 22 August 2017 - 22:28

#5 dani.user Posted 22 August 2017 - 22:39

#6 red46 Posted 23 August 2017 - 10:33

#7 poadol Posted 23 August 2017 - 11:10

#8 RedDev Posted 23 August 2017 - 11:18

#9 neagu_laurentiu Posted 23 August 2017 - 11:21

#10 red46 Posted 23 August 2017 - 11:31

#11 neagu_laurentiu Posted 23 August 2017 - 11:34

#12 c3ezar Posted 23 August 2017 - 12:48

#13 neagu_laurentiu Posted 23 August 2017 - 13:07

#14 RedDev Posted 23 August 2017 - 15:13

#15 dani.user Posted 23 August 2017 - 17:56

#16 OriginalCopy Posted 23 August 2017 - 21:12

#17 poadol Posted 24 August 2017 - 14:06

#18 MarianG Posted 24 August 2017 - 14:36

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
dani.user

Posted 22 August 2017 - 21:40

#2
red46

Posted 22 August 2017 - 22:07

#3
modoran

Posted 22 August 2017 - 22:25

#4
MarianG

Posted 22 August 2017 - 22:28

#5
dani.user

Posted 22 August 2017 - 22:39

#6
red46

Posted 23 August 2017 - 10:33

#7
poadol

Posted 23 August 2017 - 11:10

#8
RedDev

Posted 23 August 2017 - 11:18

#9
neagu_laurentiu

Posted 23 August 2017 - 11:21

#10
red46

Posted 23 August 2017 - 11:31

#11
neagu_laurentiu

Posted 23 August 2017 - 11:34

#12
c3ezar

Posted 23 August 2017 - 12:48

#13
neagu_laurentiu

Posted 23 August 2017 - 13:07

#14
RedDev

Posted 23 August 2017 - 15:13

#15
dani.user

Posted 23 August 2017 - 17:56

#16
OriginalCopy

Posted 23 August 2017 - 21:12

#17
poadol

Posted 24 August 2017 - 14:06

#18
MarianG

Posted 24 August 2017 - 14:36