Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Info Coronavirus/Vaccinare vs Fake News

Perseidele

Samsung doreste ca pana in 2025 n...

Despre "Drugtest 5000"
 La multi ani @pufonel!

lichid racire Tico Daewoo

Laptop Asus nou cu ssd 980gb scri...

Multimedia, Office - AV1, x265 De...
 Platformele online schimba ordine...

Impas succesiune

Share imagini iPhone HEIC?

xiaomi se blocheaza
 Carbonaut, not great, not terribl...

Amplificare semnal GSM

Oneplus 10T

Va doriți revenirea tramvaielor p...
 

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

* * * * * 4 votes
  • Please log in to reply
75 replies to this topic

#1
dani.user

dani.user

    Guru Member

  • Grup: Senior Members
  • Posts: 29,037
  • Î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

Attached File  1.png   10.37K   87 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.


#2
red46

red46

    Senior Member

  • Grup: Senior Members
  • Posts: 4,064
  • Înscris: 06.03.2016
Nu era mai simplu cu PHP?

#3
modoran

modoran

    Senior Member

  • Grup: Senior Members
  • Posts: 6,662
  • Î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.

#4
MarianG

MarianG

    be that as it may

  • Grup: Moderators
  • Posts: 27,735
  • Î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.


#5
dani.user

dani.user

    Guru Member

  • Grup: Senior Members
  • Posts: 29,037
  • Înscris: 24.02.2007

View Postred46, 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.


#6
red46

red46

    Senior Member

  • Grup: Senior Members
  • Posts: 4,064
  • Înscris: 06.03.2016

View Postdani.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.


#7
poadol

poadol

    Guru Member

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

View Postred46, 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?

#8
RedDev

RedDev

    Active Member

  • Grup: Members
  • Posts: 1,759
  • Î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.

#9
neagu_laurentiu

neagu_laurentiu

    Guru Member

  • Grup: Senior Members
  • Posts: 39,599
  • Înscris: 30.07.2003

View Postred46, 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.


#10
red46

red46

    Senior Member

  • Grup: Senior Members
  • Posts: 4,064
  • Înscris: 06.03.2016

View Postpoadol, 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.

View Postneagu_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.


#11
neagu_laurentiu

neagu_laurentiu

    Guru Member

  • Grup: Senior Members
  • Posts: 39,599
  • Î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.

#12
c3ezar

c3ezar

    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.


#13
neagu_laurentiu

neagu_laurentiu

    Guru Member

  • Grup: Senior Members
  • Posts: 39,599
  • Înscris: 30.07.2003
Serverul web face asta.

#14
RedDev

RedDev

    Active Member

  • Grup: Members
  • Posts: 1,759
  • Î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.

#15
dani.user

dani.user

    Guru Member

  • Grup: Senior Members
  • Posts: 29,037
  • Î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)

View PostRedDev, 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.

#16
OriginalCopy

OriginalCopy

    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.

#17
poadol

poadol

    Guru Member

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

View Postred46, 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.

#18
MarianG

MarianG

    be that as it may

  • Grup: Moderators
  • Posts: 27,735
  • Înscris: 10.08.2005
Cum arata alternativa?

Anunturi

Neurochirurgie minim invazivă Neurochirurgie minim invazivă

"Primum non nocere" este ideea ce a deschis drumul medicinei spre minim invaziv.

Avansul tehnologic extraordinar din ultimele decenii a permis dezvoltarea tuturor domeniilor medicinei. Microscopul operator, neuronavigația, tehnicile anestezice avansate permit intervenții chirurgicale tot mai precise, tot mai sigure. Neurochirurgia minim invazivă, sau prin "gaura cheii", oferă pacienților posibilitatea de a se opera cu riscuri minime, fie ele neurologice, infecțioase, medicale sau estetice.

www.neurohope.ro

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate