Creare site de la zero

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:

• un fisier principal "index.php",
• un alt fisier PHP, denumit "admin.php" in care e stocata matricea cu paginile site-ului, continand datele acestora: nume, titlu, descriere si cuvinte cheie,
• un fisier pentru stilurile CSS, denumit "grafic.css", in care e definit designul paginilor,
• un director "pagini" in care sunt adaugate fisierele pentru continutul specific fiecarei pagini.

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

• - La inceput, codul PHP cu includerea fisierului "admin.php" si scriptul PHP care prelucreaza datele pentru generarea paginilor.
• - Dupa scriptul PHP este adaugat codul HTML: sectiunea HEAD cu meta-tag-urile si in BODY template-ul (sau layout-ul) site-ului.
• - Template-ul este format din trei zone principale: top, corp si subsol. Corpul este impartit in doua zone: meniu (pozitionat in stanga) si context. In afara de ce apare in context, tot restul codului HTML este creat si generat in "index.php" si va apare in toate paginile.

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:

- 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 Scrieti Iar pentru submeniuri, inlocuiti Cu
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.

<input type="text" name="a_name" value="val" />

h3 {
  font-variant: small-caps;
}

var msg = "Viziteaza CoursesWeb.net";
alert(msg);

$ip = $_SERVER["REMOTE_ADDR"];
echo $ip;

He actually came on time.
- De fapt, el a venit la timp.

Hoy hace buen tiempo.
- Astazi e vreme frumoasa.