Upload
others
View
32
Download
0
Embed Size (px)
Citation preview
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)."'> </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)."'> </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> >
<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/