Ce Am Nevoie Ca Să Creez Aplicație Web

Ce este o aplicație web?
O aplicație web (sau web app) este un software care îndeplinește o anumită funcție
folosind un web browser pe post de „client”. Aplicația poate fi ceva simplu, precum
un formular de contact de pe un website, sau ceva mai complex, precum un word
processor sau un joc cu mai mulți jucători pe care îl poți downloada pe telefon.
Spre deosebire de aplicațiile de desktop, care sunt lansate de către sistemul de operare
al calculatorului, aplicațiile web sunt accesate printr-un browser, ceea ce vine la
pachet cu câteva avantaje: funcționând cu ajutorul unui browser, programatorii nu
trebuie să dezvolte mai multe aplicații pentru mai multe platforme. De exemplu, o
aplicație care funcționează cu ajutorul Google Chrome, va funcționa și pe un
calculator care are Windows ca sistem de operare, dar și pe un Mac, care are un sistem
de operare OS X.
În plus, aplicațiile web sunt mult mai simplu de updatat. Updatând aplicația direct pe
server, toți utilizatorii vor avea apoi acces la versiunea nouă. Iar datorită faptului că
datele pe care le introduci în aplicații sunt procesate și salvate extern, vei putea avea
acces la ele de pe mai multe dispozitive, nemaifiind nevoie să transferi documentele
între calculatoare sau dispozitive.
Aplicațiile web pot avea mai multe scopuri, precum webmail, platforme de
eCommerce sau alte exemple, iar sistemul este accesat printr-un browser.
Cum funcționează o aplicație
web?
Aplicația este scrisă într-un limbaj precum HTML sau JavaScript, în cazul în care
aplicația este dinamică, poate avea nevoie și de procesare de pe partea de server. Cu
toate acestea, unele pagini sunt complet statice și nu necesită procesări.
Iată cum funcționează o aplicație web în patru pași simpli și ușor de înțeles.
Pasul 1:
Userul accesează aplicația web printr-un browser, fie de mobil, fie de pe un computer,
activând astfel o cerere către un server web.
Pasul 2:
Serverul web înaintează cererea către serverul aplicației. Acesta îndeplinește „task-ul”
- interoghează baza de date sau procesează date, de exemplu - și apoi generează
rezultatele cerute.
Pasul 3:
Serverul aplicației web trimite rezultatele înapoi la serverul web.
Pasul 4:
Serverul web trimite informația cerută înapoi clientului (pe desktop, dispozitiv mobil,
tabletă etc), iar informația respectivă apare pe display.
JavaScript
JavaScript este un limbaj care te ajută să creezi și să controlezi conținutul
dinamic al unui site sau al unei aplicații, acest lucru însemnând practic tot ce se
„mișcă”, se updatează sau tot ce se schimbă pe ecran fără ca utilizatorul să reîncarce
manual pagina.
Astfel, cu ajutorul JavaScript vei putea controla aspecte precum:
 Grafică și animații
 Slideshow-uri de poze
 Sugestii de text autocomplete
 Formulare interactive

 <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width; user-scalable=no, initial-
scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Auto Salon MotorHorizon</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.
min.css"
integrity="sha384-
JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-
only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarDropdown" role="button" data-toggle="dropdown" aria-
haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-
labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another
action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else
here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1"
aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search"
placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form>
</div>
</nav>
<section class="producte">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6" >
<div class="card">
<img class="card-img-top"
src="https://quto.ru/thumb/533x0/filters:quality(75):no_upscale()/servi
ce-imgs/58/be/70/ce/58be70ce7344b.jpeg" alt="Card Image Cap">
<div class="card-body">
<h5 class="card-title">Lamborghini Huracan</h5>
<p class="card-text"></p>
<p class="price text-danger">2570000 LEI</p>
<a href="#" class="btn btn-primary buy" data-
price="2570000" data-producte="Lamborghini Huracan">Procură</a>
</div>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://avto-
russia.ru/autos/bmw/photo/bmw_x5_1.jpg" alt="Card Image Cap">
<div class="card-body">BMW X5 E53</h5>
price="425000" data-producte="BMW X5 E53">Procură</a>
</div>
</div>
</div>
<div class="card">
russia.ru/autos/bugatti/photo/bugatti_chiron_small.jpg" alt="Card
Image Cap">
<h5 class="card-title">Bugatti Chiron</h5>
price="777000" data-producte="Bugatti Chiron">Procură</a>
</div>
</div>
</div>
<div class="card">
russia.ru/autos/mercedes/photo/mercedes_a-class_sedan_small.jpg"
alt="Card Image Cap">
<h5 class="card-title">Mercedes E-class
C500</h5>
price="372000" data-producte="Mercedes E-class C500">Procură</a>
</div>
</div>
</div>
<div class="card">
src="https://pngimg.com/uploads/porsche/porsche_PNG10603.png"
alt="Card Image Cap">
<h5 class="card-title">Porsche carrera 911</h5>
price="1210000" data-producte="Porsche carrera 911">Procură</a>
</div>
</div>
</div>
<div class="card">
src="https://pngimg.com/uploads/nissan/nissan_PNG48.png" alt="Card
Image Cap">
<h5 class="card-title">Nissan Gt</h5>
price="670000" data-producte="Nissan Gt">Procură</a>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="modal fade" id="cart">

<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Efectuare Comenzii</h5>
<button type="button" class="close" data-
dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="buy" method="post">
<div class="form-group">
<label for="name">Numele Dumneavoastră</label>
<input type="name" class="form-control"
id="name" placeholder="Numele Dumneavoastră">
</div>
<label for="email">Email</label>
<input type="email" class="form-control"
id="email" placeholder="Email">
</div>
<label for="producte">Produsul ales</label>
<input type="text" class="form-control"
id="producte" readonly >
</div>
<label for="price">Prețul</label>
<input type="text" class="form-control"
id="price" readonly >
</div>
<button type="submit" class="btn btn-
primary">Cumpără</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.
js" integrity="sha384-
9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.mi
n.js" integrity="sha384-
B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
<script src="js/main.js"></script>
</body>
</html>
$('.buy').click(function(){
var price = $(this).data('price'),
producte = $(this).data('producte');
$('#price').val(price);
$('#producte').val(producte);
$('#cart').modal();
return false;
});
.producte {
margin: 20px 0;
}
.card {
margin-bottom: 20px;
transition: all 0.5s;
}
.card:hover {
box-shadow: 0 0 10px rgba(0,0,0,.2);
}

Ce Am Nevoie Ca Să Creez Aplicație Web

Î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

Ce Am Nevoie Ca Să Creez Aplicație Web

Încărcat de

Drepturi de autor:

Formate disponibile

Ce este o aplicație web?

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<div class="modal fade" id="cart">

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