LICEUL TEORETIC ALEXANDRU PAPIU ILARIAN

LUCRARE DE ATESTAT
BAZELE ANATOMIEI SI FIZIOLOGIEI
UMANE

Profesor coordonator
Arba Mihaela

Autor
Cobzaru Mihai
Dej, 2011

Cuprins
1. Introducere in limbajul Html,CSS si jQuery............................................3
1.1 Limbajul HTML..............................................................................................3
1.2 Limbajul CSS................4
1.3 Limbajul jQquery..........................4
1.4 Limbajul PHP................................4

2.Bazele anatomiei si fiziologiei umane..............................................................5

2.1 Introducere.....................................................................................................5
2.2 Prezentare generala........................................................................................5

3. Codul sursa.........................................................................................................11
3.1 Codul sursa Html...........................................................................................11
3.2 Codul sursa CSS..............................................................................................14
3.3 Codul jQuery............................................................................................................16
3.4 Codul PHP................................................................................................................17

4. Baza de Date............................................................................................................19
4.1 Prezentarea bazei de date...............................................................................19

5. Cerinte de sistem.............................................................................................20
6. Bibliografie..........................................................................................................21

1 Limbajele HTML, CSS si jQuery

1.1. Limbajul HTML
HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru crearea
paginilor web ce pot fi afiate ntr-un browser (sau navigator). Scopul HTML este mai degrab
prezentarea informaiilor paragrafe, fonturi, tabele .a.m.d. dect descrierea semanticii
documentului.
HTML este o form de marcare orientat ctre prezentarea documentelor text pe o
singura pagin, utiliznd 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
coninutul unui document poate fi adnotat cu diverse tipuri de metadate i indicaii de redare.
Indicaiile de redare pot varia de la decoraiuni minore ale textului, cum ar fi specificarea
faptului c un anumit cuvnt trebuie subliniat sau c o imagine trebuie introdus, pn la
scripturi sofisticate, hri de imagini i formulare. Metadatele pot include informaii despre titlul
i autorul documentului, informaii structurale despre cum este mprit documentul n diferite
segmente, paragrafe, liste, titluri etc. i informaii 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 utiliznd un
editor de text simplu. Totui scrierea i modificarea paginilor n acest fel solicit cunotine
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 asemntor cu documetele Word, dar cu observaia c aceste programe genereaz un
cod HTML care este de multe ori de proast calitate.
HTML se poate genera direct utiliznd tehnologii de codare din partea serverului cum ar
fi PHP, JSP sau ASP. Multe aplicaii ca sistemele de gestionare a coninutului, wiki-uri i
forumuri web genereaz pagini HTML.

1.2. Limbajul CSS

CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui
document HTML. Stilurile se pot ataa elementelor HTML prin intermediul unor fiiere externe
sau n cadrul documentului, prin elementul <style> i/sau atributul style. CSS se poate utiliza i
pentru formatarea elementelor XHTML, XML i SVGL.

1.3. Limbajul jQuery

jQuery este o platform de dezvoltare JavaScript, conceput pentru a uura i mbunti
procese precum traversarea arborelui DOM n HTML, managementul inter-browser al
evenimentelor, animaii i cereri tip AJAX. jQuery a fost gndit s fie ct mai mic posibil,
disponibil n toate versiunile de browsere importante existente, i s respecte filosofia
"Unobtrusive JavaScript". Biblioteca a fost lansat in 2006 de ctre John Resig.

1.1. Limbajul PHP

PHP este un limbaj de programare. Numele PHP provine din limba englez i este un
acronim recursiv : Php: Hypertext Preprocessor. Folosit iniial pentru a produce pagini web
dinamice, este folosit pe scar larg n dezvoltarea paginilor i aplicaiilor web. Se folosete n
principal nglobat n codul HTML, dar ncepnd de la versiunea 4.3.0 se poate folosi i n mod
linie de comand (CLI), permind crearea de aplicaii independente. Este unul din cele mai
importante limbaje de programare web open-source i server-side, existnd versiuni disponibile
pentru majoritatea web serverelor i pentru toate sistemele de operare. Conform statisticilor este

instalat pe 20 de milioane de situri web i pe 1 milion de servere web. Este disponibil sub
Licena PHP i Free Software Foundation l consider a fi un software liber.
Iniial, limbajul a fost dezvoltat de inventatorul su, Rasmus Lerdorf. Odat cu creterea
numrului de utilizatori, dezvoltarea a fost preluat de o nou entitate, numit The PHP
Group (Grupul PHP).

2. "BAZELE ANATOMIEI SI FIZIOLOGIEI"

2.1 Introducere
Proiectul "BAZELE ANATOMIEI SI FIZIOLOGIEI" este un website ce se adreseaza
in mare parte elevilor dornici sa invete biologie sau sa urmeze facultatea de medicina si de
asemenea poate fi folositor si celor care deja urmeaza facultatea de medicina.
Website-ul pune la dispozitia elevilor sau studentilor materiale de studiu favorabile
pentru examenul de admitere la facultate sau chiar examenele de sesiune.

2.2. Prezentare generala

Acest proiect reprezinta o sursa de informatii menite sa puna bazele anatomiei si
fiziologiei oricui este interesat de acest domeniu.
Website-ul pune la dispozitia elevilor:

Notiuni introductive de anatomie si fiziologie

Cursuri in format PDF si PPT

Lectii video

Capturi foto din atlasul de anatomiei Netter

Pagina de start:

Pagina ACASA contine un meniu principal in partea superioara, care ajuta la navigarea foarte
usoara pe site, un mesaj de bun venit insotit de informatii generale despre site plus imagini
menite sa aduca la cunostinta utilizatorului ceea ce poate gasi pe acest site.
Meniul principal contine 6 butoane de navigare a site-ului:
Acasa - reintoarcerea pe pagina principala;
Lectii - accesarea pagina ce contine lectii sau notiunile introductive;
Bilioteca - acceseaza pagina ce contine bibliotecaa cu cursuri in format PDF si PPT;
Video - acceseaza pagina ce contine libraria de lectii video;
Atlas - acceseaza pagina ce contine poze din atlasul de anatomie Netter;
Contact - pagina de contact ofera informatii despre adresele la care poate fi contactat cel care se
ocupa de site;
Aceste sunt prezentate in detaliu mai jos:
6

Pagina LECTII

Aceasta pagina contine notiunile introductive de anatomie si fiziologie.

In momentul accesarii paginii se prezinta o "Introducere in corpul uman" pe centrul pagini, iar
in drepata paginii avem un meniu cu ajutorul caruia alegem lectiile care vrem sa le citim.
Biologia este impartita in doua mari sectiu si anume anatomia si fiziolgoia. Pe pagina
de LECTII, din meniul cu lectii ai posibilitatea de a accesa o lectie de anatomie sau o lectie de
fiziologie.
La click pe unul dintre link-urile din meniu se face un request de tipul GET spre
aceasi pagina doar ca de aceasta data in url va fi parametrul id care va retine id-ul lectiei pe care
s-a dat click. La reincarcarea pagini se verifica daca id-ul respectiv este prezent in url, caz in care
se apeleaza o functie care preia din baza de date lectia corespunzatoare.

function get_lesson_by_id($id)
{
$link = open_database_connection();
$result = mysql_query('SELECT * FROM lectie WHERE id ='.$id, $link);
$lesson = mysql_fetch_array($result);
close_database_connection($link);
return $lesson;}
Daca s-a gasit o lectie, pentru id-ul respectiv aceasta v-a fi incarcata pe pagina.
In momentul in care ne-am hotarat ce vrem sa citim la butonul click pe o anumita
lectie se apeleaza o functie care selecteaza lectia respectiva din baza de date. Elementele acestei
baze de date si codul sursa vor fi prezentate in capitolele ce trateaza aceste subiecte.
Pagina Biblioteca

Pagina Biblioteca contine un tabel in care sunt afisate cursuri in format PDF sau PPT.
In tabel sunt oferite informatii despre fiecare carte, curs etc. Toate aceste cursuri sau carti pot fi
downloadate in calculator prin simplul clcik pe iconita de download.
In momentul in care s-a apasat butonul download fisierele PDF sunt deschise direct in
browser oferind posibilitatea de a fi citite direct sau de a fi salvate in calculator.

Pagina Video

Pe langa modalitatea de invatare prin citire exista si cea prin vizualizarea de lectii
video. Pagina video ofera lectii video pe teme de biologie la nivel de facultate sustinute de un
doctor indian pe nume Dr. Najeeb.

Pagina contine cate un titlu de capitol in dreptul caruia exista un buton intitulat
VIDEO. Cand ai ales capitolul care te intereseaza prin apasarea butonul VIDEO filmuletele se
prezinta sub forma unei galerii. Filmuletele apar in stil Dropmenu prin functia de slidedown
facuta in cod jQuery ce va fi prezentata la capitolul respectiv.
Filmuletele sunt preluate printr-un cod de incorporare de pe youtube.
Pagina Atlas

10

Pe langa notiunile introductive si lectiile video un elev ar mai avea nevoie si de un

Atlas de anatomie insa atlasele in format carte sau chiar in format electronic sunt costisitoare asa
ca pe pagina de atlas sunt prezentate cateva dintre capturile din atlasul de anatomie Netter.
Aceasta galerie contine poze referitoare la anatomia corpului uman. Fiecare dintre
poze poate fi marita si studiata mai indeaproape printr-un simplu click pe o anumita poza.

3. CODUL SURSA
3.1 Codul HTML

Meniul Principal
<div class="header">
<img id="logo" src="images/logo4.png"/>
<div class="meniu">
<ul class="nav nav-tabs">
<li class="active">
<a href="home.php"><i class="icon-home"></i>Acasa</a></li>
<li><a href="lectii.php"><i class="icon-pencil"></i>

Lectii</a></li>

<li><a href="carti.php"><i class="icon-book"></i>

Biblioteca</a></li>

<li><a href="video.php"><i class="icon-film"></i>

Video</a></li>

<li><a href="poze.php"><i class="icon-picture"></i>

Atlas</a></li>

<li><a href="contact.php"><i class="icon-briefcase"></i>

Contact</a></li>

</ul>
</div>
</div>

Meniul de lectii
11

<div class="sectiune">
<ul class="nav nav-pills nav-stacked" >
<li id="anatomie" class="active"><a href="#"> <i class="icon-list"></i> Anatomie</a></li>
<div class="dropmenu">
<ul class="nav nav-pills nav-stacked">
<?php foreach ($anatomie as $lesson): ?>
<li><a href="?id=<?php echo $lesson['id']; ?>"> <?php echo $lesson['nume']; ?> </a></li>
<?php endforeach; ?> </ul></div>

Tabelul de carti
<div id="carti" >
<div class="page-header">
<h3><i class="icon-book icon-white"></i> Biblioteca <small> . </small></h3>
</div>
<tbody>
<table class="table">
<tr>
<td id="rank" ><b>#</b></td>
<td id="rank" ><strong>Tip</strong></td>
<td><strong>Nume</strong></td>
<td><strong>Sectiune</strong></td>
<td><strong>Download</strong></td>
</tr>
<tr>
<td id="rank">1.</td>
<td id="rank"><img src="images/pdficon.png" /> </td>
<td>Transport Membranar</td>
12

<td>Fiziologie</td>
<td><a href="carti/1-transport membranar.pdf"><img src="images/down.png"/></a></td>
</tr>

Codul pentru libraria video

<div class="videogrup">
<div class="page-header">
<h2> <i class="icon-film icon-white"></i> Respiratia
<small> de Dr. Najeeb</small><a class="btn" id="ddvg1">Video</a></h2>
</div>
<div class="videogrup" id="vg1">
<ul class="thumbnails">
<li class="span4">
<a href="#" class="thumbnail">
<iframe width="290" height="200" src="http://www.youtube.com/embed/7dp5EoSEMY0"
frameborder="0" allowfullscreen></iframe></a>
</li>
Codul pentru pagina Atlas
<div class="poze">
<ul>
<li><a href="images/poze/1.png"><img src="images/poze/mici/1.png" /></a></li>
<li><a href="images/poze/2.png"><img src="images/poze/mici/2.png" /></a></li>
<li><a href="images/poze/3.png"><img src="images/poze/mici/3.png" /></a></li>
<li><a href="images/poze/4.png"><img src="images/poze/mici/4.png" /></a></li>
<li><a href="images/poze/5.png"><img src="images/poze/mici/5.png" /></a></li>
<li><a href="images/poze/6.png"><img src="images/poze/mici/6.png" /></a></li>
<li><a href="images/poze/7.png"><img src="images/poze/mici/7.png" /></a></li>
<li><a href="images/poze/8.png"><img src="images/poze/mici/8.png" /></a></li>
13

Codul pentru pagina Contact

<div class="contact">
<p>
In cazul aveti intrebari sau cereri de materiale de studiu ne puteti contacta la adresa de mail:
</p>
<hr />
<p><i class="icon-envelope icon-white"></i>
<strong>baf@yahoo.com</strong>
</p>
<p><i class="icon-envelope icon-white"></i>
<strong>baf@gmail.com</strong>
</p>
<p><i class="icon-envelope icon-white"></i>
<strong>baf@hotmail.com</strong>
</p></div>

3.2 Codul CSS

Banner

.header{
background-color: #0493da;
height: 70px;
}
.meniu{
margin-top: 31px;
float: left;
margin-left: 25px;
}
.meniu a{
text-align: center;

width: 90px;
color: white;
}
.meniu li{
background-color:;
}
#logo{
float:left;
margin-top: 15px;
width: 500px;
}

14

Codul CSS pentru pagina Lectii

.sectiune{
margin-top:30px;
margin-left: 50px;
width: 200px;
float: left;
}
.sectiune ul{
width: 200px;
}
.dropmenu{
width: 200px;
float: left;
}
.dropmenu2{

width: 200px;
float: left;
}
#text h3{
text-align: center;
}
#text{
float:left;
width: 800px;
height: 500px;
background-color: transparent;
margin-left: 100px;
color: white;
}

Codul CSS pentru biblioteca

#carti{
margin-left: 200px;
float: left;
}
.table td{
text-align: center;
width: 160px;
}
#rank{
width: 120px;
}
#rank img{
width: 50px;
height: 50px
}
.table img{
width: 50px;
height: 50px
}
Codul pentru libraria video
.videogrup{
width: 1000px;
float: left;
15

}
.videogrup .btn{
float: right;
}
.videogrup li{
background-color: black;
}
#vg2{
display: none;
}
#vg3{
display:none;
}

Codul pentru pagina atlas

.poze{
margin-left: 40px;
}
.poze img{
width: 200px;
height: 200px;
}
.poze li{
list-style-type: none;
float: left;
margin-left: 25px;
margin-top: 35px;
}

3.3 Codul jQuery

Functia de "SlideDown" pentru butonul Video din galeria video
$(document).ready(function(){
$("#ddvg1").click(function(){
if($("#vg1").css("display") == 'none')
16

$("#vg1").slideDown();
else $("#vg1").slideUp();
});
$("#ddvg2").click(function(){
if($("#vg2").css("display") == 'none')
$("#vg2").slideDown();
else $("#vg2").slideUp();
});
$("#ddvg3").click(function(){
if($("#vg3").css("display") == 'none')
$("#vg3").slideDown();
else $("#vg3").slideUp();});});

3.4 Codul PHP

Codul pentru conectarea la baza de date si inchiderea acesteia:

function open_database_connection()
{
$link = mysql_connect('localhost', 'root', '');
mysql_select_db('biologie', $link);
return $link;
}
function close_database_connection($link)
{
mysql_close($link);
}
Codul pentru selectarea sectiuni din care face parte lectia:
17

function get_lessons_by_chapter($capitol)
{
$link = open_database_connection()
$result = mysql_query("SELECT * FROM lectie WHERE capitol='$capitol'", $link);
$lessons = array();
while ($lesson = mysql_fetch_assoc($result)) {
$lessons[] = $lesson;
}
close_database_connection($link);
return $lessons;
}
In momentul in care vrem sa alegem o lectie din meniu aceasta poate face parte din
sectiunea Anatomie sau sectiunea Fiziologie.
Functia get_lessons_by_chapter(&capitol) preia lectia din baza de date de la sectiunea
specificata de utilizator in momentul selectarii lectiei.

Codul pentru selectarea lectiei dupa ID:

function get_lesson_by_id($id)
{
$link = open_database_connection();
$result = mysql_query('SELECT * FROM lectie WHERE id ='.$id, $link);
$lesson = mysql_fetch_array($result);
close_database_connection($link);
return $lesson;
}

18

Dupa selectarea sectiunii din care face parte lectia aceasta trebuie selectata dupa un ID
unic fiecarei lectii.
Functia get_lesson_by_id($id) selecteaza lectia cu id unic al lectiei specificata de
utilizator din meniul lectiilor.
Codul pentru afisarea lectiilor pe pagina:
<?php if (isset($lectie)): ?>
<p>
<?php echo $lectie['continut']; ?>
</p>
<?php else: ?> <h3>Introducere in corpul uman</h3>
In baza de date fiecare lectie din tabel are un continut. Prin functiile enumerate mai sus si
prin functia de afisare continutul se va incarca intr-un <div> pe pagina LECTII.
Daca lectia din baza de date nu contine informatii care sa fie afisate functia afiseaza textul
"Introducere in corpul uman" text care apare la reincarcarea pagini.

4. Baza de Date
Asa cum am mentionat in capitolele precedente proiectul are si o mica baza de date.
Aceasta baza de date ajuta la stocarea de informatie mai exact de lectii pe care noi vrem sa le
aveam pe site. Lectiile din baza de date sunt accesate prin selectarea unei lectii din pagina cu
acelasi nume.
Baza de date "biologie.sql" contine un tabel in care se tin lectiile care vor aparea pe site la
momentul alegerii.
19

Cel care se ocupa de site va putea oricand sa adauge o noua lectie un nou continut pentru
o lectie sau chiar sa rectifice unele greseli sesizate.

20

5. Cerinte de sistem
Pentru ca aceast proiect sa functioneze pe un anumit computer trebuie sa fie indeplinite
urmatoarele cerinte de sistem:
1. Web Server: WAMP sau Xampp
2. Browser: Google Chrome sau Mozila Firefox
3. Conexiune la internet

6. Bibliografie

Manual de biologie clasa XI

www.youtube.com/DrNajeeb
www.wikipedia.org
www.php.net

21