Curs Php-mysql

In aceast tutorial este prezentat si explicat modul de creare a unui site simplu, de la zero, folosind PHP, si fara a utiliza baza de date.
Datele despre paginile site-ului sunt stocate intr-o matrice iar continutul acestora, doar ce se schimba de la o pagina la alta, se va afla in fisiere.
Obiectul acestui tutorial este codul PHP si logica acestuia pentru crearea unui site simplu de prezentare, designul HTML, CSS nu este finalizat pentru aspect grafic.
Ca sa intelegeti si sa aplicati tutorialul din aceasta lectie, trebuie sa aveti cunostinte generale despre HTML, CSS si PHP.

1. Structura site-ului

Site-ul va contine:

Fisierul principal este "index.php", in acesta este scris:

2. Crearea codului din "index.php"

Fisierul "index.php" va avea doua parti principale:
- Prima parte, la inceput, unde scriem codul PHP cu includerea matricei pentru datele paginilor si scriptul care le prelucreaza si genereaza datele pt. meta-tags si codul HTML pentru meniu, cu link-urile in functie de paginile adaugate in matrice. Aceste date vor fi pastrate in variabile.
- A doua parte este codul HTML cu sectiunea HEAD si strucura generala a template-ului. In acest cod se includ, cu "echo", variabile PHP generate de script: pentru meta-tags si meniu; in locatia lor.

Ca exemplu, voi crea un model de site simplu de prezentare, cu urmatoarele pagini: 'Despre mine', 'Favorite', 'Poze' si Contact. La Poze va fi 3 submeniuri: Familie, Prieteni si Natura.
In continuare iata codul complet pentru fiecare fisier, explicatiile necesare le gasiti in documentatia adaugata.
De asemenea, puteti descarca arhiva cu fisierele acestui exemplu de aici -> Creare Site.

- Fisierul admin.php

<?php
// Datele initiale pt. HEAD ale pagini "index"
$titlu = 'Titlul paginii index';
$desc = 'Descrierea pentru pagina index';
$keys = 'cuvnte, cheie, pagina, index';

/*** Matricea cu datele despre paginile adaugate in site, care apar in "context" ***/

// Este formata din numele paginilor ca si cheie principala
// Fiecare contine un array cu: Titlul paginii, Descriere si Cuvinte-cheie (pt. sectiunea HEAD)
// Sau pt. submeniuri, cu alte array imbricate, ce contin datele de mai sus (cum e la 'poze')

$pags['despre_mine'] = array(
 'titl'=>'Titlul paginii Despre Mine',
 'desc'=>'Descrierea paginii Despre Mine',
 'keys'=>'cuvinte, cheie, despre, mine'
);
$pags['favorite'] = array(
 'titl'=>'Titlul paginii Favorite',
 'desc'=>'Descrierea paginii Favorite',
 'keys'=>'cuvinte, cheie, favorite'
);
$pags['poze'] = array(
 'familie'=>array(
 'titl'=>'Titlul pt. pagina Poze Familie',
 'desc'=>'Descriere pt. pagina Poze Familie',
 'keys'=>'cuvinte, cheie, poze, familie'
 ),
 'prieteni'=>array(
 'titl'=>'Titlul pt. pagina Poze Prieteni',
 'desc'=>'Descriere pt. pagina Poze Prieteni',
 'keys'=>'cuvinte, cheie, poze, prieteni'
 ),
 'natura'=>array(
 'titl'=>'Titlul pt. pagina Poze Natura',
 'desc'=>'Descriere pt. pagina Poze Natura',
 'keys'=>'cuvinte, cheie, poze, natura'
 )
);
$pags['contact'] = array(
 'titl'=>'Titlul paginii Contact',
 'desc'=>'Descrierea paginii Contact',
 'keys'=>'cuvinte, cheie, contact'
);

// Daca doriti sa adaugati alte meniuri sau submeniuri pt. alte pagini de site
// Adaugati in continuare, comform modelului de mai sus
// De asemenea, trebuie sa adaugati in dir. "pagini" fisierul ce contine contextul afisat de acel meniu
?>

- Fisierul index.php

<?php
// Exemplu creare site cu PHP, de la https://marplo.net
ini_set('display_errors',1);
error_reporting(E_ALL);

// Include fisierul "admin.php", in care e matricea cu datele fiecarei pagini
include('admin.php');

/*** Crearea variabilei ce contine codul HTML pt. meniu, cu paginile din matrice ***/

$meniu = '<ul><li><a href="index.php" title="Pagina principala">Pagina principala</a></li>';	// Initializeaza variabila pt. meniu

// Parcurge matricea cu foreach() si adauga un link in <li> pt. fiecare pagina
// Verifica daca sunt submeniuri si creaza codul HTML pt. ele
foreach($pags as $kei=>$pagini) {
 // Daca elementul are cheia 'titl', e considerat cu link direct, fara submeniu
 if (isset($pags[$kei]['titl'])) {
 // Daca e meniu direct
	// Creaza link-ul, codificat urlencode() si prima litera din nume majuscula cu ucfirst()
	$link = '<a href="index.php?id='. urlencode($kei).'" title="'. $pagini['titl']. '">'. str_replace('_', ' ', ucfirst($kei)). '</a>';
	// Adauga link-ul in meniu
	$meniu .= '<li>'. $link. "</li>\r\n";
	}
 else {
 // Altfel e considerat cu submeniu
 $meniu .= '<li class="smeniu"><a href="#"><span>'. str_replace('_', ' ', ucfirst($kei)). '</a></span><ul>';
 // Parcurge submeniul
	foreach($pagini as $kei2=>$pagini2) {
	 // Creaza link-ul, codificat urlencode() si prima litera din nume majuscula cu ucfirst()
	 $link = '<a href="index.php?id='. urlencode($kei). '&amp;sm='. urlencode($kei2).'" title="'. $pagini2['titl']. '">'. str_replace('_', ' ', ucfirst($kei2)). '</a>';
	 // Creaza submeniul cu link-ul si numele
	 $meniu .= '<li>'. $link. "</li>\r\n";
	}
	$meniu .= '</ul></li>';		// Inchide codul HTML pt. submeniu
 }
}
$meniu .= '</ul>';		// Inchide codul HTML pt. tot meniul


/*** Prelucrarea datelor primite prin GET ***/

// Verifica daca sunt primite date prin GET si daca acestea se afla in matrice
// Creaza variabilele pt. meta-tags si continutul ce va fi inclus
if (isset($_GET['id']) && isset($pags[urldecode(trim($_GET['id']))])) {
 $pg = urldecode(trim($_GET['id']));		// Numele paginii, decodificat URL, care va fi inclusa pt. continut
 $obj = $pags[$pg];		// Obiectul cu datele despre pagina

 // Daca e accesata pagina din submeniu
 if (isset($_GET['sm']) && isset($obj[urldecode(trim($_GET['sm']))])) {
 $pg = urldecode(trim($_GET['sm']));		// Numele paginii, decodificat URL, care va fi inclusa pt. continut
	$obj = $obj[$pg];
 }

 // Seteaza variabilele cu datele pt. sectiunea HEAD
 $titlu = $obj['titl'];
 $desc = $obj['desc'];
 $keys = $obj['keys'];
}
// In continuare, codul HTML in care se adauga variabilele necesare generate de PHP
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title><?php echo $titlu; ?></title>
 <meta name="description" content="<?php echo $desc; ?>" />
 <meta name="keywords" content="<?php echo $keys; ?>" />
 <meta name="robots" content="index, follow" />
 <link href="grafic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Start Top pagina -->
<div id="top">
 <h1>Sectiunea din top-ul paginii</h1>
 <h2>Va apare in toate paginile site-ului</h2>
</div>

<!-- Start Corp pagina -->
<div id="corp">
 <!-- Start Meniu -->
 <div id="meniu">
 <h4>Meniu</h4>
<?php echo $meniu; ?>
 </div>

 <!-- Start Context -->
 <div id="context">
<?php
 // Daca e setata o valoare pt. variabila $pg,
 // Variabila devinita cand e accesat un link din meniu
 if (isset($pg)) {
 // Include fisierul in care e continutul
	include('pagini/'.$pg.'.php');
 }
 else {
 // Daca nu e apelat vreun link din meniu
	// Afiseaza continutul dorit pt. pagina "index"
	// Il puteti afisa cu 'echo' sau sa includeti din alt fisier extern
 echo '<h3>Continut initial pentru pagina index</h3>
	 <h3>Creati cu "echo" tag-urile HTML sau includeti continut din alt fisier extern,<br />
	 cu include("fisier.php") sau readfile("fisier.html")</h3>';
 }
?>
 </div>
</div>

<!-- Start Subsol pagina -->
<div id="subsol">
 <h4>Continutul din subsolul paginii</h4>
 <h4>Va apare in toate paginile site-ului</h4>
</div>

</body>
</html>

- Fisierul grafic.css

body {
 margin:0px auto;
 width:1000px;
 background-color:#e8e8fe;
 text-align:center;
}

/* Grafica pentru sectiunea Top */
#top {
 margin:2px auto;
 position:relative;
 border:1px solid #ceceda;
 background-color:#dedeee;
}

/* Grafica pentru sectiunea Corp */
#corp {
 position:relative;
 margin:2px auto;
 width:100%;
 border:1px solid #eeeefe;
 background-color:#ededfe;
 text-align:left;
}

/* Grafica pentru Meniu */
#meniu {
 float:left;
 position:relative;
 width:250px;
 margin:2px auto;
 border:1px solid #dafedf;
 background-color:#deefee;
 padding-left:5px;
}
#meniu ul {
 margin:0px;
 background-color:#cceede;
 list-style:none;
 padding:0px 0px 1px 5px;
}
#meniu ul li {
 display:block;
 position:relative;
 margin:0px;
 width:235px;
 border:1px solid silver;
 padding:2px 0px 2px 5px;
}
#meniu ul li a {
 display:block;
 margin:0px;
 width:100%;
 border:1px solid #daccfe;
}
#meniu ul li a:hover {
 background-color:#ebede0;
}
#meniu .smeniu ul {
 display:none;
 position:absolute;
 top:0px;
}
 #meniu li span {
 overflow:hidden;
 }
 #meniu .smeniu:hover ul {
 display:block;
 left:190px;
 z-index:12;
 }

/* Grafica pentru Context */
#context {
 min-height:200px;
 margin:0px 1px 1px 260px;
 padding:3px 5px;
}

/* Grafica pentru sectiunea Subsol */
#subsol {
 clear:both;
 position:relative;
 margin:2px auto;
 border:1px solid #ceced8;
 background-color:#ebede0;
 z-index:10;
}
- Pe langa aceste fisiere, creati un director "pagini" in care adaugati fisierele ce au continutul specific pentru fiecare link din meniu, si care apare in zona "context".

- Codul generat de "index.php" este ordonat si valid XHTML.
- Observati ca template-ul, codul HTML din HEAD si BODY e simplu, foloseste cateva variabile standard, generate de script-ul PHP, in rest, structura acestuia poate fi oricand modificata usor, pentru toate paginile; trebuie doar sa se tina cont de adaugarea variabilelor pentru meta-tags, meniu si codul PHP din zona "context" care include continutul paginii accesate. In HEAD puteti adauga si alte stiluri CSS sau script-uri JavaScript.
- Cand doriti sa adaugati pagini noi in site, sa le stergeti sau sa modificati numele lor, lucrati in fisierul "admin.php". Acolo sunt stocate, in matricea "$pags[]", elementele ce contin datele necesare afisarii fiecarei pagini. Pentru orice pagina noua, adaugati un element pt. matrice, ($pags['nume']) dupa modelul celor deja existente, apoi in directorul "pagini" adaugati un fisier cu acelasi 'nume' si care sa contina doar continutul care sa fie afisat in sectiunea "context".

Important

- Numele fisierelor pe care le adaugati in directorul "pagini" (pt. continut din context) trebuie sa fie acelasi cu numele cheii din elementul matricei "$pags[]" pentru pagina respectiva.
- Numele din Meniu care va contine subdomeniu trebuie sa fie diferit de cheile: titl, desc si keys.
- Ordinea afisarii numelor in meniu este aceeasi cu cea a elementelor din matrice.

3. Cosmetizarea link-urilor

Daca doriti sa "cosmetizati" link-urile paginilor, generate in meniul din exemplul de sus, sa le faceti "user friendly", puteti folosi mod-rewrite.
Pentru aceasta, adaugati intr-un fisier ".htaccess" (care sa se afle in acelasi loc unde e si "index.php") urmatorul cod:

Options +FollowSymLinks
RewriteEngine On

#RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^([a-zA-Z_]+).html$ index.php?id=$1 [NC,L]
RewriteRule ^([a-zA-Z_]+)-([a-zA-Z_]+).html$ index.php?id=$1&sm=$2 [NC,L]
- Link-urile vor avea forma "nume_pagina.html",
- iar pentru cele cu submeniu vor avea forma "meniu-nume_pagina.html".

In script-ul PHP din "index.php", unde este generat codul pentru meniu, trebuie efectuate urmatoarele doua modificari:
In loc de
$link = '<a href="index.php?id='. urlencode($kei).'" title="'. $pagini['titl']. '">'. str_replace('_', ' ', ucfirst($kei)). '</a>';
Scrieti
$link = '<a href="'. urlencode($kei).'.html" title="'. $pagini['titl']. '">'. str_replace('_', ' ', ucfirst($kei)). '</a>';
Iar pentru submeniuri, inlocuiti
$link = '<a href="index.php?id='. urlencode($kei). '&amp;sm='. urlencode($kei2).'" title="'. $pagini2['titl']. '">'. str_replace('_', ' ', ucfirst($kei2)). '</a>';
Cu
$link = '<a href="'. urlencode($kei). '-'. urlencode($kei2).'.html" title="'. $pagini2['titl']. '">'. str_replace('_', ' ', ucfirst($kei2)). '</a>';

Sau puteti descarca versiunea cu mod-rewrite a acestui exemplu de aici -> Creare Site 2.

Daca studiati codul HTML al paginilor, generat de PHP, veti intelege mai bine rolul datelor din matrice si ce face scriptul PHP.
Codul paginii poate fi vazut, daca folositi Mozilla Firefox, din meniul View -> Page Source.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
Creare site de la zero

Last accessed pages

  1. Conditional IF in Limba Engleza - Fraze Conditionale (119795)
  2. Trecutul continuu - Exercitii si teste incepatori (12854)
  3. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (89333)
  4. Lectia 150, Recapitulare 139-140 (23)
  5. Accentul si Pronuntia (26330)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (618)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (533)
  3. Gramatica limbii engleze - Prezentare Generala (439)
  4. Exercitii engleza - English Tests and exercises - Grammar (379)
  5. Coduri pt culori (362)