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.
Site-ul va contine:
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.
<?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 ?>
<?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). '&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>
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".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:
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.
<ul> <li>http://coursesweb.net/html/</li> <li>http://www.marplo.net/html/</li> </ul>
.some_class {
display: list-item;
}var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.netI`m living here. - Traiesc /Locuiesc aici.
Estoy viviendo aquí. - Traiesc /Locuiesc aici.