Raport Lucrare de Laborator

Ministerul Educaţiei şi Tineretului al Republicii Moldova
Universitatea Tehnică a Moldovei

Facultatea de Calculatoare Informatică şi Microelectronică
Catedra Automatica şi Tehnologii Informaţionale
RAPORT
La lucrările de laborator Nr. 1-7
Disciplina: TWCC
A efectuat: st. gr. TI-101 F/R Mațco Ina
A verificat: Lector Universitar Boleac Ruslan
Chişinău 2015
Lucrarea de laborator nr. 1-2
Scopul: Implimentarea tehnologiilor CSS şi HTML. Elaborarea paginilor web.
De elaborat un site alcătuit din cîteva pagini web utilizînd tehnologiile sus menţionate.
Tema se alege personal de către student.
a) Utilizarea listelor, tabelelor, imaginilor, link-urilor, div-urilor și altor tag-uri des

utilizate.
Noţiuni
HTML este o formă de marcare orientată către prezentarea documentelor text pe o

singura pagină, utilizând un software de redare specializat, numit agent utilizator HTML, cel
mai bun exemplu de astfel de software fiind browserul web. HTML furnizează mijloacele
prin care conținutul unui document poate fi adnotat cu diverse tipuri de metadate și indicații
de redare. Indicațiile de redare pot varia de la decorațiuni minore ale textului, cum ar fi
specificarea faptului că un anumit cuvânt trebuie subliniat sau că o imagine trebuie introdusă,
până la scripturi sofisticate, hărți de imagini și formulare. Metadatele pot include informații
despre titlul și autorul documentului, informații structurale despre cum este împărțit
documentul în diferite segmente, paragrafe, liste, titluri etc. și informații cruciale care permit
ca documentul să poată fi legat de alte documente pentru a forma astfel hiperlink-uri (sau
web-ul).
HTML este un format text proiectat pentru a putea fi citit și editat de oameni utilizând
un editor de text simplu. Totuși scrierea și modificarea paginilor în acest fel solicită
cunoștințe solide de HTML și este consumatoare de timp. Editoarele grafice (de tip
WYSIWYG) cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft FrontPage
permit ca paginile web sa fie tratate asemănător cu documetele Word, dar cu observația că
aceste programe generează un cod HTML care este de multe ori de proastă calitate.
HTML se poate genera direct utilizând tehnologii de codare din partea serverului cum
ar fi PHP, JSP sau ASP. Multe aplicații ca sistemele de gestionare a conținutului, wiki-uri și
forumuri web generează pagini HTML.
1
HTML este de asemenea utilizat în e-mail. Majoritatea aplicațiilor de e-mail folosesc
un editor HTML încorporat pentru compunerea e-mail-urilor și un motor de prezentare a e-
mail-urilor de acest tip. Folosirea e-mail-urilor HTML este un subiect controversat și multe
liste de mail le blochează intenționat.
Crearea unei pagini Web
Pentru acest laborator am decis să creez un Site al unei companii independente de

dezvoltare a jocurilor numită Small Games. Site-ul va fi alcătuit din 5 pagini Web:
 Home
 About
 Games
 Services
 Contact
Codul HTML
Pentru a crea site-ul, deschidem editorul Notepadd++ și creăm un nou fișier. Salvăm
fișierul nou creat, dîndui numele home.html. Extensia HTML va indica faptul că acest fișier
este o pagină Web. După salvarea fișierului introducem următorul cod.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
Tot codul ce va alcătui pagina Web va fi plasat între etichetele <html> </html>.
Acetea au rolul de a înștința browser-ul de faptul că acest fișier este un fișier HTML. În
interiorul etichetelor <html> </html> plasăm o altă grupă de etichete, <head></head> și
2
<body></body>. Elementul <head> reprezintă un container ce va conține titlul
ducumentului, scripturi, styles, meta informație și altele. Elementul <body> reprezintă un
container ce va conține text, hyperlink-uri, imagini, tabele, liste etc.
În continuare introducem următorul cod, în fișierul home.html.
<!DOCTYPE html>
<head>
<title>Small Games</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="page">
<div id="header">
<div class="title">Small Games</div>
</div>
<div id="bar">
<div class="menuLink"><a href="home.html">Home</a></div>
<div class="menuLink"><a href="about.html">About</a></div>
<div class="menuLink"><a href="game.html">Games</a></div>
<div class="menuLink"><a href="services.html">Services</a></div>
<div class="menuLink"><a href="contact.html">Contact</a></div>
</div>
<div id="pageContent">
<div class="articleTitle">Wellcome To Our Site</div>
<div class="articleContent">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Integer mi. Vivamus sit amet neque vitae sapien bibendum sodales. Curabitur
elementum. Duis imperdiet. Donec eleifend porttitor sapien. Praesent leo.
Quisque auctor velit sed tellus. Suspendisse potenti. Aenean laoreet
imperdiet nunc. Donec commodo suscipit dolor. Aenean nibh. Sed id odio.
Aliquam lobortis risus ut felis. Sed vehicula pellentesque quam.</p><br />
<p>Vestibulum augue quam, interdum id, congue semper, convallis
non, velit. Quisque augue tortor, tristique ac, scelerisque eget, aliquam
id, sem. Aenean lorem. Fusce velit nibh, dapibus quis, laoreet nec, porta
a, dui. Nullam ac urna. Proin eget elit. Nunc scelerisque venenatis urna.
3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Fusce congue, turpis ut commodo mattis, pede erat fringilla
tellus, pulvinar suscipit odio lorem sed pede.</p>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Pentru a crea blocuri de elemente utilizăm eticheta <div>. Această eticheta ne va

permite să înpărțim o pagină web într-un număr mare de secțiuni.
Pentru a identifica mai ușor secțiunile ce alcătuesc pagina Web itilizăm ID-uri și
clase. ID-urile reprezintă identificatori unici ai unot etichete, care se utilizează la formatarea
Paginilor Web.
Dacă deschidem acuma fișierul home.html, acesta nu arată prea bine. Asta pentru că
nu am aplicat încă nici o formatare asupra textului sau elementelor paginii (Fig. 1).
Figura 1 – Forma pagina Home
4
Figura 2 – Pagina About
Figura 3 – Pagina Games
Figura 4 Pagina Services
5
Figura 5 – Pagina Contacts
Codul CSS
CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui
document HTML. Stilurile se pot atașa elementelor HTML prin intermediul unor fișiere
externe sau în cadrul documentului, prin elementul <style> și/sau atributul style. CSS se
poate utiliza și pentru formatarea elementelor XHTML, XML și SVGL.
Pentru a formata pagina Web creăm un nou fișier în Notepad++, cu numele style.css.
html, body
{
text-align: center;
}
p
{
text-align: left;
}
body
{
margin: 0;
padding: 0;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #F1F5F8;
background-color:#473423;
}
a
{
text-decoration:none;
color:#8FB359;
}
6
{
margin: 0 auto 0 auto;
//text-align:left;
}
#page
{
margin: 0 auto 0 auto;
height: 100%;
position: relative;
overflow: hidden;
background-color:#f5faed;
width: 900px;
margin-bottom: 100px;
box-shadow: 3px 0px 50px #000;
}
.title
{
position:relative;
top:22px;
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:32px;
font-weight:bold;
color:#192B33;
}
#header
{
position:relative;
width: 900px;
height:99px;
background-color:#f68c06;
}
#bar
{
position:relative;;
width: 900px;
height:57px;
background-color:#8FB359;
}
.menuLink
{
height:37px;
width: 180px;
text-align:center;
float:left;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#EAD5A8;
padding-top:18px;
}
.menuLink a
{
color:#192B33;
}
7
.menuLink a:hover
{
color:#777;
}
.menuLink:hover
{
background-color:#0892d0;
}
#pageContent
{
width: 680px;
padding-bottom:20px;
}
.articleTitle
{
text-align:center;
padding-top:50px;
padding-bottom:10px;
color: #8FB359;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:22px;
font-weight:bold;
}
.articleContent
{
width:auto;
position:relative;
padding-left:25px;
color:#000000;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
line-height:27px;
}
.articleContent .grid_3
{
width: 300px;
text-align: center;
}
.grid_3
{
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.bio
{
padding-left: 10px;
}
.text1
{
8
font-size: 19px;
line-height: 19px;
}
.box
{
background-color: #d2d2d2;
border: 3px solid #eeeeee;
padding: 23px 0 24px;
border-top-width: 4px;
border-bottom-width: 4px;
}
.box img
{
border: 3px solid #eeeeee;
border-radius: 500px;
}
.box .text1
{
margin-bottom: 1px;
}
.service_list {
margin: 0 0 20px 0;
padding: 0px;
list-style: decimal;
}
.service_list li {
margin: 0px;
padding: 5px 0;
text-align: left;
}
#footer
{
display: table;
width: 900px;
height:60px;
padding-top:36px;
background-color:#8FB359;
}
p.bio
{
text-align: justify;
}
Pentru codul din fișierul style.css să fie executat trebuie să includem următoarea linie
de cod în fișierul home.html.
<link rel="stylesheet" type="text/css" href="css/style.css" />
9
Laboratorul nr. 3
Scopul: Utilizarea limbajului JavaScript în tehnologiile Web. Noţiunea DOM,

ierarhia în JavaScript. Obiecte, funcţii, prelucrarea evenimentelor.
<script language="Javascript">
function validateForm()
{
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
var t_email=document.forms["myForm"]["email"].value;
var t_name=document.forms["myForm"]["name"].value;
self.xmlHttpReq.open('GET', 'validator.php?email=' +
escape(t_email) +'&name=' + escape(t_name), true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-
www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
var res = self.xmlHttpReq.responseText;
if (res == 'valid') {
document.forms["myForm"].submit();
} else {
alert('Form is not invalid');
}
}
}
self.xmlHttpReq.send();
}
</script>
10
Laboratorul nr. 4-5
Scopul: Utilizarea limbajelor server-page în implimentarea site-urilor web.
 Instalarea și configurarea serverului cu modulele Apache,MySql,PHP.

 Utilizarea limbajului PHP.
 Crearea paginilor web utilizind limbajul PHP.
 Creare template pentru un site web.
Scopul: Implimentarea bazelor de date MYSQL utilizînd tehnologii web PHP.

 Limbajul Mysql. Tehnici de creare a bazelor de date.
 Elaborarea unei baze de date în Mysql. Implimentarea operațiilor de adăugare,
ștergere, căutare utilizînd limbajul PHP.
validator.php
<?php
$email = $_GET['email'];
$name = $_GET['name'];
if (filter_var($email, FILTER_VALIDATE_EMAIL) && strlen($name) >2) {

echo 'valid';
}
?>
db.php
<?php
$db_host = "localhost";
$db_name = "twcc";
$db_username = "root";
$db_password = "adminpass";
// Create connection
$conn = mysqli_connect($db_host, $db_username, $db_password, $db_name);
11
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$sql = "INSERT INTO contact (name, email , message) VALUES ('$name',

'$email', '$message')";
if (mysqli_query($conn, $sql)) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
?>
Figura 6 – Salvarea datelor în baza de date twcc
12
Laboratorul nr. 6
Validarea informaţiei. Implimentarea tehnologiilor de validarea a informaţiei în

proiectul web utilizind tehnologii AJAX.
<script language="Javascript">
function validateForm()
{
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
var t_email=document.forms["myForm"]["email"].value;
var t_name=document.forms["myForm"]["name"].value;
self.xmlHttpReq.open('GET', 'validator.php?email=' +
escape(t_email) +'&name=' + escape(t_name), true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-
www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
var res = self.xmlHttpReq.responseText;
if (res == 'valid') {
document.forms["myForm"].submit();
} else {
alert('Form is not invalid');
}
}
}
self.xmlHttpReq.send();
}
</script>
13
Laboratorul nr. 7
Tema: Tehnici de securitate utilizate pentru aplicații web.
Utilizarea .htacces.
Serverul de web Apache utilizeaza un sistem de acces si configurare prin intermediul

caruia utilizatorii pot modifica si controla mai multe caracteristici ale unui site, prin crearea
de fisiere .htaccess.
Un fisier .htaccess este un simplu fisier text ce contine comenzi, denumite

directive Apache. Aceste directive se aplica si afecteaza fisirele din directorul in care se afla
fisierul .htaccess precum si subdirectoarelor acelui director. Fisierele de tip htaccess trebuie
puse pe ftp în format ASCII mode si nu BINARY.
Daca puneti un fisier “.htaccess” în directorul root al siteului, acesta va afecta si

subdirectoarele, daca acestea nu au cate un fisier .htaccess. Daca in .htaccess aveţi setate
niste reguli pentru directorul corespunzator “site.ro”, atunci vor fi afectate şi subdirectoarele
corespunzătoare “site.ro/director1″ sau “site.ro/director2″. Dacă doriti setări diferite pt fiecare
subdirector, puteti pune cate un fisier .htaccess in fiecare director. Un subdirector va fi afectat
de cel mai aproape htaccess.
Ce pot face utilizand fisierele .htaccess?
Fisierele .htaccess pot fi unelte foarte puternice. Mai jos gasesti cateva lucruri care pot
fi obtinute utilizand .htaccess:
 directoare protejate cu parola

 setare pagini erori personalizate
 dezactivare listare director (directory listings)
 specificare fisier index alternativ
 blocarea accesului vizitatorilor pe baza de adresa IP
 prevenire furt banda prin utilizarea ‘hotlink’
 redirectionare automata catre anumite pagini
Unele dintre aceste caracteristici (protectie parola, pagini erori personalizabile, tipuri
MIME) au fost automatizate prin intermediul panoului de control al contului de gazduire si
14
pot fi utilizate fara a crea manual fisiere .htaccess. Oricum, celelalte trebuiesc implementate
manual de catre detinatorul contului.
Setare pagini erori personalizate
Există mai multe coduri de eror, cum ar fi:
Cereri acceptate cu succes
200 OK
201 Created
202 Accepted
203 Non-Authorative Information
204 No Content
205 Reset Content
206 Partial Content
Cereri de client redirectate
300 Multiple choices
301 Moved Permanently
302 Moved Temporarly
303 See Other
304 Not Modified
305 Use Proxy
Erori de server
500 Internat Server Error
501 Not Implemented
502 Bad Gateway
503 Service Unavailable
15
504 Gateway Timeout
505 HTTP Version Not Supported
Unele din cele mai frecvente erori sunt:

401 – Authorization required – atunci cand cineva încearcă să intre într-o zonă unde nu are
destul acces, 403 – Forbidden – atunci când un utilizator nu are access la un anume fişier
400 – Bad request – atunci când cineva încearcă să manipuleze URL-ul sau scripturile paginii
web
Cu .htaccess putem creea pagini personalizate ce se afiseaza atunci cand se intalneste

o eroare.
De exemplu:
ErrorDocument 400 /badrequest.html

ErrorDocument 401 /auhreqd.html
ErrorDocument 403 /forbid.html
ErrorDocument 404 /notfound.html
ErrorDocument 500 /serverr.html
Creem aceste fisiere unde punem codul ce se va executa si afisa cand se intalneste
eroarea respectiva.
Protectie cu parola, folosind .htaccess

Cu un fişier de .htaccess putem proteja un director cu parola. Pentru a proteja un
director cu parola trebuie să cream un fisier numit “.htpasswd”, apoi în fişierul htaccess este
introdus username si parola (este criptată).
Exemplu:
AuthUserFile fisier_cu_parole/.htpasswd
AuthName “Mesaj_autentificare”
AuthType Basic
require user user_name
16
user_name este user-ul care dorim ca browserul sa-l accepte ca un nume valid pentru
parola. Daca sunt mai multi useri ce pot sa acceseze directorul ultima linie se va scrie astfel:
require valid-user
Continutul fisierul .htpasswd este de forma:

user1:parola_pentru_user1_criptata_cu_md5
user2:parola_pentru_user2_criptata_cu_md
Pentru ca aceasta modalitate de protectie functioneze este necesara si o modificare in

fisierul de configurare httpd.conf a serverulu, astfel:
AllowOverride None se inlocuieste cu AllowOverrideAll
17

Raport Lucrare de Laborator

Încărcat de

Informații document

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

Raport Lucrare de Laborator

Încărcat de

Drepturi de autor:

Formate disponibile

Ministerul Educaţiei şi Tineretului al Republicii Moldova

Universitatea Tehnică a Moldovei

A efectuat: st. gr. TI-101 F/R Mațco Ina

A verificat: Lector Universitar Boleac Ruslan

Scopul: Implimentarea tehnologiilor CSS şi HTML. Elaborarea paginilor web.

a) Utilizarea listelor, tabelelor, imaginilor, link-urilor, div-urilor și altor tag-uri des

HTML este o formă de marcare orientată către prezentarea documentelor text pe o

Crearea unei pagini Web

Pentru acest laborator am decis să creez un Site al unei companii independente de

În continuare introducem următorul cod, în fișierul home.html.

Pentru a crea blocuri de elemente utilizăm eticheta <div>. Această eticheta ne va

Figura 1 – Forma pagina Home

Figura 3 – Pagina Games

Figura 4 Pagina Services

<link rel="stylesheet" type="text/css" href="css/style.css" />

Scopul: Utilizarea limbajului JavaScript în tehnologiile Web. Noţiunea DOM,

Scopul: Utilizarea limbajelor server-page în implimentarea site-urilor web.

 Instalarea și configurarea serverului cu modulele Apache,MySql,PHP.

Scopul: Implimentarea bazelor de date MYSQL utilizînd tehnologii web PHP.

if (filter_var($email, FILTER_VALIDATE_EMAIL) && strlen($name) >2) {

$sql = "INSERT INTO contact (name, email , message) VALUES ('$name',

Figura 6 – Salvarea datelor în baza de date twcc

Validarea informaţiei. Implimentarea tehnologiilor de validarea a informaţiei în

Tema: Tehnici de securitate utilizate pentru aplicații web.

Serverul de web Apache utilizeaza un sistem de acces si configurare prin intermediul

Un fisier .htaccess este un simplu fisier text ce contine comenzi, denumite

Daca puneti un fisier “.htaccess” în directorul root al siteului, acesta va afecta si

Ce pot face utilizand fisierele .htaccess?

 directoare protejate cu parola

Setare pagini erori personalizate

Există mai multe coduri de eror, cum ar fi:

Cereri acceptate cu succes

203 Non-Authorative Information

205 Reset Content

206 Partial Content

Cereri de client redirectate

300 Multiple choices

301 Moved Permanently

302 Moved Temporarly

303 See Other

304 Not Modified

305 Use Proxy

500 Internat Server Error

501 Not Implemented

502 Bad Gateway

503 Service Unavailable

505 HTTP Version Not Supported

Unele din cele mai frecvente erori sunt:

Cu .htaccess putem creea pagini personalizate ce se afiseaza atunci cand se intalneste

ErrorDocument 400 /badrequest.html

Protectie cu parola, folosind .htaccess

Continutul fisierul .htpasswd este de forma:

Pentru ca aceasta modalitate de protectie functioneze este necesara si o modificare in

AllowOverride None se inlocuieste cu AllowOverrideAll

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