Colegiul Național ”Alexandru Papiu Ilarian”

Târgu-Mureș

Lucrare de atestat

la informatică

SITE-UL BISERICII ORTODOXE DIN

NAZNA

Coordonator,

Prof. RACOȚI MIHAELA

Absolvent,

FĂRCAȘ MARIUS ADRIAN

2013

CUPRINS

1. Argument p. 1

2. Manualul utilizatorului p. 2

3. Manualul programatorului p. 9

4. Concluzii p.22

5. Bibliografie p.23

1

ARGUMENT

Am realizat acest site din dorința de a învăța limbajele de programare

vizuală HTML, CSS, PHP, MYSQL. M-am gândit să aleg un subiect practic pentru

site, care să aibă legătură și cu facultatea la care voi merge (vreau să urmez

facultatea de teologie). Astfel, am decis să întocmesc o pagină web a parohiei din

care fac parte, Parohia Ortodoxă Nazna.

Prima dată a fost necesară construirea unei schițe a site-ului: secțiunile

fiecărei pagini (antet, conținut, subsol), meniul, bannerul, etc. Apoi am inclus pe

rând în cadrul site-ului partea de cod HTML, scripturi PHP, baze de date, o pagină

de stiluri CSS. Intenționez ca în viitor să pun acest site pe un domeniu propriu, iar

în acest fel Parohia Ortodoxă Nazna va avea un site oficial.

Dar de ce e nevoie de așa ceva?

Internetul a cunoscut o răspândire considerabilă în ultimul deceniu, iar

existența unei platforme web pentru instituția bisericii devine o necesitate. Pot fi

accesate simplu și rapid, prin doar câteva clickuri, informații legate de istoricul

bisericii, programul sfintelor slujbe, pot fi vizualizate poze de la evenimentele

petrecute în parohie, iar lista poate continua.

Vă invit să aruncăm o privire asupra site-ului conceput de mine!

2

MANUALUL UTILIZATORULUI

Site-ul Bisericii Ortodoxe din Nazna îl găsiți la următoarea adresă web:

http://atestatmarius.atwebpages.com . Am folosit un domeniu gratuit oferit de site-

ul http://www.agilityhoster.com . Pagina de pornire (Acasă) are următorul aspect :

3

În această primă pagină am scris un scurt mesaj de bun-venit și am prezentat

limbajele de programare vizuală folosite. După cum se poate observa, în partea

dreaptă a paginii există un calendar care indică data zilei. În urma apăsării pe

oricare dintre zilele lunii curente, browserul de internet va accesa site-ul

http://www.crestinortodox.ro la pagina unde sunt relatate viețile sfinților din data

calendaristică selectată.

Pe pagina a doua, ”Despre parohie”, am postat istoricul bisericii.

4

Secțiunea ”Despre parohie” a meniului are două subsecțiuni :

a) Evenimente - aici am scris despre principalele evenimente care se petrec

în parohie. La momentul actual este vorba despre un concurs.

b) Galerie foto – sunt disponibile trei albume foto.

5

Primul album se numește ”Paști 2011”, al doilea album are denumirea

”Primăvară 2013”, iar al treilea este ”Biserica veche”. Al doilea album arată astfel:

Pozele sunt dispuse sub

formă de pictograme într-o

listă. Fiecare poză poate

apărea în dimensiunile

originale prin intermediul unui

click pe poza dorită. Spre

exemplu, dând click pe a treia

poză din albumul ”Primăvară

2013”, imaginea va fi afișată

în felul următor :

6

A treia categorie a

meniului cuprinde

programul sfintelor

slujbe.

Apoi, urmează capitolul ”Cultură și spiritualitate”. Apăsând pe căsuța

acestui capitol, se va deschide o pagină web care conține link-uri către

subcapitolele acestui capitol : ”Articole” și ”Poezii” .

7

În subcapitolul ”Articole” am scris un articol legat de spiritualitate.

Cartea de oaspeți permite utilizatorilor site-ului să scrie propria impresie. Nu

există nicio restricție în ceea ce privește numărul de mesaje care pot fi scrise de un

utilizator. Ora care indică momentul în care a fost scris comentariul este setată

după fusul orar al României. Chiar dacă cineva scrie un comentariu din altă țară,

ora afișată va fi cea a Romaniei.

8

Dacă doriți să aflați adresa Bisericii Ortodoxe din Nazna, vă rugăm să

mergeți la ”Contact”, unde veți găsi o hartă și datele de contact necesare (adresa

exactă, număr de telefon, cod poștal, etc.) .

9

MANUALUL PROGRAMATORULUI

Dimensiunile și modul de împărțire a paginii1

1) PHP și MYSQL2

Aici doresc să prezint pașii care trebuie parcurși pentru a construi o galerie

foto simplă, dar eficientă. Voi folosi PHP și MYSQL, cu puțin ajutor de la GD.

Început

Orice galerie foto trebuie să aibă două opțiuni majore:

1) o categorie care conține lista de imagini

1 http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm

2 http://www.sitepoint.com/php-gallery-system-minutes/

10

2) un sistem de upload bazat pe browserul web

În plus, alt atribut necesar pentru a crea o galerie automată este abilitatea de a

construi pictograme de îndată ce imagini sunt încărcate. Pentru a obține rezultatul

dorit, voi folosi opțiunea GD. În vederea identificării versiunii GD existente pe

serverul utilizat se poate recurge la funcția phpinfo() pentru a afișa toate DLL-

urile instalate și detaliile versiunii lor.

Voi folosi următoarea procedură simplă pentru a construi galeria:

- crearea unei schițe a bazei de date

- construirea unui sistem de încărcare a imaginilor bazat pe browserul web

- indexarea în tabele

- salvarea fișierelor

- realizarea automată a pictogramelor (miniaturilor)

- vizualizarea categoriilor (albumelor) și imaginiile aparținătoare

În continuare, voi repartiza fiecare imagine într-un album în cadrul galeriei; pentru

aceasta e nevoie de un tabel separat pentru a lista toate albumele și de alt tabel

pentru a lista fiecare imagine încărcată.

Tabelul care conține categoriile se va numi gallery_category.

Tabelul care conține informații despre imagini se va numi gallery_photos.

Următoarele sunt interogări MySQL pentru cele două tabele:

CREATE TABLE gallery_category (

category_id bigint(20) unsigned NOT NULL auto_increment,

category_name varchar(50) NOT NULL default '0',

PRIMARY KEY (category_id),

11

KEY category_id (category_id)

) TYPE=MyISAM;

CREATE TABLE gallery_photos (

photo_id bigint(20) unsigned NOT NULL auto_increment,

photo_filename varchar(25),

photo_caption text,

photo_category bigint(20) unsigned NOT NULL default '0',

PRIMARY KEY (photo_id),

KEY photo_id (photo_id)

) TYPE=MyISAM;

Se poate utiliza interogare INSERT pentru a adăuga înregistrările inițiale în

tabelul care conține categoriile, de exemplu:

INSERT INTO gallery_category(`category_name`) VALUES('My First Gallery');

Înainte de a putea încărca imagini, avem nevoie de un folder în care să

putem stoca imaginile. Prin urmare, voi face un folder nou cu numele "photos".

Acum voi construi primul script. Acest script va servi drept conexiune

pentru baza de date și va deține numele folderului în care voi stoca imaginile

încărcate. În codul de mai jos, veți observa numele folderului fiind definit de

variabila $ images_dir.

Acest prim script se va numi "config.inc.php".

<?php

$mysql_link = mysql_connect('localhost', 'root', 'root');

mysql_select_db('sitepoint') or die('Could not select database');

$images_dir = 'photos';

?>

Codul de mai sus stabilește, de asemenea, o conexiune cu baza de date

MySql numită "sitepoint". Înainte de punerea în aplicare a acestui cod, am introdus

propriul meu nume de utilizator, parola și valorile numelor bazelor de date.

Sistemul de upload bazat pe browserul web

Pentru fiecare imagine încărcată, avem nevoie de două câmpuri de bază:

unul pentru a stoca numele imaginii și celălalt pentru o scurtă descriere a imaginii.

Pentru a simplifica lucrurile, aș dori să încarc mai multe imagini simultan. Codul

construit este în măsură să producă orice număr de câmpuri indicate

administrator. Acest lucru va eradica o multă muncă manuală, care altfel ar fi fost

necesară pentru a adăuga câmpuri de formular suplimentare.

12

Să construim o formă automată de încărcare. O voi numi "preupload.php".

<?php

include 'config.inc.php';

// initialization

$photo_upload_fields = '';

$counter = 1;

// If we want more fields, then use, preupload.php?number_of_fields=20

$number_of_fields = (isset($_GET['number_of_fields'])) ?

(int)($_GET['number_of_fields']) : 5;

// Firstly Lets build the Category List

$result = mysql_query('SELECT category_id,category_name FROM gallery_category');

while($row = mysql_fetch_array($result)) {

$photo_category_list .= <<<__HTML_END

<option value="$row[0]">$row[1]</option>\n

__HTML_END;

}

mysql_free_result( $result );

// Lets build the Image Uploading fields

while($counter <= $number_of_fields) {

$photo_upload_fields .= <<<__HTML_END

<tr><td>

Photo {$counter}:

<input name="photo_filename[]"

type="file" />

</td></tr>

<tr><td>

Caption:

<textarea name="photo_caption[]" cols="30"

rows="1"></textarea>

</td></tr>

__HTML_END;

$counter++;

}

// Final Output

echo <<<__HTML_END

<html>

<head>

<title>Lets upload Photos</title>

13

</head>

<body>

<form enctype="multipart/form-data"

action="upload.php" method="post"

name="upload_form">

<table width="90%" border="0"

align="center" style="width: 90%;">

<tr><td>

Select Category

<select name="category">

$photo_category_list

</select>

</td></tr>

<! - Insert the image fields here -->

$photo_upload_fields

<tr><td>

<input type="submit" name="submit"

value="Add Photos" />

</td></tr>

</table>

</form>

</body>

</html>

__HTML_END;

?>

Codul de mai sus produce o formă HTML destul de simplă. Cu toate acestea,

există câteva lucruri de reținut.

14

enctype atribut în <form>

Prin specificarea valorii de enctype atribut ca "multipart / form-data", continutul

fiecărei imagini va fi depus într-o secțiune separată a unui document cu multiple

părți. Acest document va fi trimis la scriptul-țintă, în cazul nostru, upload.php .

Adăugarea de câmpuri suplimentare

Numărul de câmpuri este implicit setat la 5, dar s-ar putea să fie nevoie de

încărcarea mai multor fișiere într-un singur lot. Acest lucru poate fi realizat

folosind codul de mai sus, care ne permite să specificăm numărul de câmpuri prin

metoda GET. De exemplu, dacă doriți 25 de domenii, puteți introduce pur și

simplu preupload.php? number_of_fields = 25 .

Notă: În fișierul php.ini , safe_mode trebuie să fie oprit, iar atributul file_uploads

setat pentru a permite încărcarea imaginilor. Run phpinfo () pentru a vedea setările

curente.

PARTEA REALĂ: UPLOAD.PHP

Vom construi acum upload.php .

1. Voi verifica dacă fișierul încărcat este într-adevăr o imagine

2. Voi indexa intrările imaginilor în baza de date

3. Voi stoca imagini încărcate

4. În cele din urmă, voi crea miniaturi automate

O vector sursă pe nume $ _FILES este creat de PHP de fiecare dată când se

încarcă fișiere. Înainte de a începe procesarea fișierelor încărcate, avem nevoie de

unele informații despre aceste imagini. Vectorul conține următoarele detalii cu

privire la orice fișier încărcat:

Numele adevărat al fișierului, de exemplu, my_birthday.jpg

Tipul MIME al fișierului, de exemplu, imagine / pjpeg

Locația temporară a fișierului pe server

Dimensiunea fișierului (în bytes)

Voi crea propriii mei vectori pentru a accesa aceste valori. Totodată, voi lua

imaginile și le voi atribui, de asemenea, o matrice.

// Fetch the image array sent by preupload.php

15

$photos_uploaded = $_FILES['photo_filename'];

// Fetch the image caption array

$photo_captions = $_POST['photo_captions'];

Este fișierul încărcat o imagine reală?

Cum ne putem asigura că fișierul încărcat este o imagine? Ei bine, de fiecare dată

când un fișier este încărcat, PHP generează un vector care conține detaliile

fișierului încărcat, inclusiv tipul mime. Deci, pentru ca un fișier să fie o imagine

reală, el trebuie să se potrivească cu unul dintre tipuri MIME cunoscute. De

exemplu, pentru a verifica dacă imaginea este un JPEG, GIF, BMP sau PNG, se va

compara tipul mime preluat cu tipurile cunoscute de imagini. Am enumerat câteva

dintre acestea în vectorul următor:

$photo_types = array(

'image/pjpeg' => 'jpg',

'image/jpeg' => 'jpg',

'image/gif' => 'gif',

'image/bmp' => 'bmp',

'image/x-png' => 'png'

);

Codul de mai jos îndeplinește două funcții:

1. Respinge un fișier încărcat dacă dimensiunea fișierului încărcat nu este mai

mare de 0 bytesMai important, acesta validează tipul de fișier de la vectorul

photo_types .

while($counter <= count($photos_uploaded)) {

if($photos_uploaded['size'][$counter] > 0) {

if(!array_key_exists($photos_uploaded['type'][$counter], $photo_types)) {

$result_final .= 'File ' . ($counter + 1) .

' is not a photo<br />';

} else {

// Great the file is an image, we will add this file

}

}

}

16

Indexarea în tabele

mysql_query("

INSERT INTO gallery_photos (

photo_filename,

photo_caption,

photo_category

) VALUES (

'0',

'" . $photo_captions[$counter]) . "',

'" . $_POST['category'] . "'

)

");

$new_id = mysql_insert_id(); // New Id generated

Acum putem genera noua denumire a fișierului:

// Get the filetype of the uploaded file

$filetype = $photos_uploaded['type'][$counter];

// Get the extension for the new name

$extension = $known_photo_types[$filetype];

// Generate a new name

$filename = "$new_id.$extension";

// let's update the filename now

mysql_query("

UPDATE gallery_photos SET

photo_filename = '$filename'

WHERE photo_id = '$new_id'

");

Salvarea imaginilor

copy($photos_uploaded['tmp_name'][$counter],

$images_dir . '/' . $filename);

17

GENERAREA AUTOMATĂ DE MINIATURI

$size = GetImageSize($images_dir . "/" . $filename);

// Wide Image

if($size[0] > $size[1])

{

$thumbnail_width = 100;

$thumbnail_height = (int)(100 * $size[1] / $size[0]);

}

// Tall Image

else

{

$thumbnail_width = (int)(100 * $size[0] / $size[1]);

$thumbnail_height = 100;

}

$thumbnail_width = <Preset Width>

$thumbnail_height = <Preset Width> * <height_dimension_of_original_image> /

<width_dimension_of_original_image>

$thumbnail_width = <Preset Height> * <width_dimension_of_original_image> /

<height_dimension_of_original_image>

$thumbnail_height = <Preset Height>

VIZUALIZAREA LISTELOR DE MINIATURI ÎN CADRUL

ALBUMELOR ȘI A LISTEI DE ALBUME

Avem nevoie de un sistem pentru a afișa categoriile (albumele) și imaginile

prezente în aceste categorii. În primul rând voi crea un script pe nume

viewgallery.php . Folosind acest script voi putea afișa cele 3 tipuri de ecrane:

1. Lista de albume

2. Lista de miniaturi pentru fiecare categorie

3. Imaginea întreagă

<?php include("config.inc.php");

// initialization

$result_array = array();

$counter = 0;

18

$cid = (int)($_GET['cid']);

$pid = (int)($_GET['pid']);

// Category Listing

if( empty($cid) && empty($pid) )

{

$number_of_categories_in_row = 4;

$result = mysql_query( "SELECT

c.category_id,c.category_name,COUNT(photo_id)

FROM gallery_category as c

LEFT JOIN gallery_photos as p ON p.photo_category = c.category_id

GROUP BY c.category_id" );

while( $row = mysql_fetch_array( $result ) )

{

$result_array[] = "<a

href='galerie_foto.php?cid=".$row[0]."'>".$row[1]."</a> "."(".$row[2].")";

}

mysql_free_result( $result );

$result_final = "<tr>\n";

foreach($result_array as $category_link)

{

if($counter == $number_of_categories_in_row)

{

$counter = 1;

$result_final .= "\n</tr>\n<tr>\n";

}

else

$counter++;

$result_final .= "\t<td>".$category_link."</td>\n";

}

if($counter)

{

if($number_of_categories_in_row-$counter)

$result_final .= "\t<td colspan='".($number_of_categories_in_row-

$counter)."'>&nbsp;</td>\n";

$result_final .= "</tr>";

}

}

// Thumbnail Listing

else if( $cid && empty( $pid ) )

{

$number_of_thumbs_in_row = 5;

19

$result = mysql_query( "SELECT photo_id,photo_caption,photo_filename FROM

gallery_photos WHERE photo_category='".addslashes($cid)."'" );

$nr = mysql_num_rows( $result );

if( empty( $nr ) )

{

$result_final = "\t<tr><td>No Category found</td></tr>\n";

}

else

{

while( $row = mysql_fetch_array( $result ) )

{

$result_array[] = "<a

href='galerie_foto.php?cid=$cid&pid=".$row[0]."'><img

src='".$images_dir."/tb_".$row[2]."' border='0' alt='".$row[1]."' /></a>";

}

mysql_free_result( $result );

$result_final = "<tr>\n";

foreach($result_array as $thumbnail_link)

{

if($counter == $number_of_thumbs_in_row)

{

$counter = 1;

$result_final .= "\n</tr>\n<tr>\n";

}

else

$counter++;

$result_final .= "\t<td>".$thumbnail_link."</td>\n";

}

if($counter)

{

if($number_of_photos_in_row-$counter)

$result_final .= "\t<td colspan='".($number_of_photos_in_row-

$counter)."'>&nbsp;</td>\n";

$result_final .= "</tr>";

}

}

}

// Full Size View of Photo

else if( $pid )

{

$result = mysql_query( "SELECT photo_caption,photo_filename FROM

gallery_photos WHERE photo_id='".addslashes($pid)."'" );

list($photo_caption, $photo_filename) = mysql_fetch_array( $result );

$nr = mysql_num_rows( $result );

mysql_free_result( $result );

20

if( empty( $nr ) )

{

$result_final = "\t<tr><td>No Photo found</td></tr>\n";

}

else

{

$result = mysql_query( "SELECT category_name FROM gallery_category

WHERE category_id='".addslashes($cid)."'" );

list($category_name) = mysql_fetch_array( $result );

mysql_free_result( $result );

$result_final .= "<tr>\n\t<td>

<a href='galerie_foto.php'>Categories</a> &gt;

<a

href='galerie_foto.php?cid=$cid'>$category_name</a></td>\n</tr>\n";

$result_final .= "<tr>\n\t<td align='center'>

<br />

<img src='".$images_dir."/".$photo_filename."' border='0'

alt='".$photo_caption."' id='imagine_mare' />

<br />

$photo_caption

</td>

</tr>";

}

}

// Final Output

echo <<<__HTML_END

<html>

<head>

<title>Gallery View</title>

</head>

<body>

<div id="galerie_detaliu">

<table width='500' border='0' align='center' style='width: 500;'>

$result_final

</div>

</table>

</body>

</html>

__HTML_END;

?>

21

2) HTML

MENIU și FOOTER au fost scrise astfel încât dacă trebuie efectuate

modificări, acestea să fie făcute într-un singur loc.

Am folosit urmatoarele taguri: paragrafe, liste, h2, a, img, br, span, table.

3) CSS

Cu CSS am controlat aspectul siteului: dimensiunile div-urilor, culoarea,

alinierea textului, marginile, padding.

Meniul3

3 http://cssmenumaker.com/menu/silver-opera-drop-down-menu

22

CONCLUZII

Mi-a făcut plăcere să realizez acest site, astfel învățând mai multe din cele

care sunt în spatele unui site bine făcut.

În primul rând am văzut că este foarte importantă o schiță, o schemă

prealabilă a paginii web. În acest mod am putut avea o vedere de ansamblu a ceea

ce doresc să fac, și am mers dinspre general spre particular.

În al doilea rând, detaliile sunt și ele esențiale: așezarea în pagină, luarea în

considerare a diferențelor care pot apărea în funcție de mărimea monitorului,

adoptarea unuei maniere de scriere a codului care să îl facă pe acesta ușor de citit și

de corectat.

Acum apreciez mult mai mult munca programatorilor web, deoarece nu este

simplu să creezi un site și să soluționezi diversele probleme care apar pe drum.

Este o muncă laborioasă, dar când site-ul este gata, efortul depus se dovedește a fi

meritat. Așa mi s-a întâmplat și mie: chiar dacă nu a fost ușor, acum mă bucur

pentru ceea ce am reușit să fac !

23

BIBLIOGRAFIE

1) http://w3schools.com/

2) http://matthewjamestaylor.com

3) http://line25.com

4) http://cssmenumaker.com

5) http://stackoverflow.com

6) https://developers.google.com/maps/

7) http://www.agilityhoster.com/