Cum Se Creeaza Un Blog in PHP Si Baza de Date MySQL

Cum se creeaza un blog in PHP si baza de date MySQL
PARTEA I
In acest tutorial vom crea o aplicație completa de blog, de la zero, folosind PHP si MySQL.
Un blog este o aplicație in care unii utilizatori(administratori, autori) pot crea, edita, actualiza si publica articole
pentru a le pune la dispoziția publicului pentru a le citi si comenta.
Utilizatorii si publicul pot naviga intr-o lista de articole si pot da click pe ele pentru a citi mai multe despre
acesta si pentru a le comenta.
Caracteristici:
• Un sistem de înregistrare a utilizatorilor care gestionează două tipuri de utilizatori: Admin și utilizatorii
normali
• Blogul va avea o zonă de administrare și o zonă publică separate una de cealaltă
• Zona de administrare va fi accesibilă numai utilizatorilor de administrare, iar zona publica va fi
disponibila utilizatorilor normali si publicului general
• În secțiunea de administrare, există două tipuri de administratori:
o Administrator:
▪ Poate crea, vizualiza, actualiza, publica / anula publicarea și șterge ORICE postare.
▪ Poate crea, vizualiza, actualiza și șterge subiecte.
▪ Un utilizator de administrator (și numai un utilizator de administrator) poate crea un
alt utilizator de administrator sau autor
▪ Poate vizualiza, actualiza și șterge alți utilizatori administratori
o Autor:
▪ Poate crea, vizualiza, actualiza și șterge numai postările create de ei înșiși
▪ Nu pot publica o postare. Toată publicarea postărilor se face de către utilizatorul
Admin.
• Numai postările publicate sunt afișate în zona publică pentru vizualizare
• Fiecare postare este creată sub un anumit subiect
• Există o relație many to many între postări și subiecte.
• Pagina publică listează postările; fiecare postare este afișată cu o imagine, un autor și o dată de creare.
• Utilizatorul poate naviga prin toate listările de postări dintr-un anumit subiect făcând clic pe subiect
• Când un utilizator face clic pe o postare, poate vizualiza postarea completă și poate comenta în partea
de jos a postărilor.
• Poate fi implementat un sistem de comentarii Disqus care permite utilizatorilor să comenteze
utilizând conturi de socializare cu platforme precum Facebook, GooglePlus, Twitter.
IMPLEMENTARE
Voi numi proiectul blog-php, deci in directorul serverului (www), voi crea un folder numit blog-php. Ca IDE
voi folosi Visual Studio Code.
Prima data voi crea urmatoarea structura de subdosare: admin, include si static.
Cele 3 dosare vor conține următorul conținut:
admin: va păstra fișierele pentru zona de back-end de administrator. Fișiere

legate de crearea, vizualizarea, actualizarea și ștergerea postărilor,
subiectelor, utilizatorilor.
include: Va conține fișiere care conțin bucăți de cod care vor fi incluse într-una
sau mai multe pagini. De exemplu, fișierele pentru afișarea erorilor
static: fișiere statice, cum ar fi imagini, foi de stilizare CSS, Javascript.
În folderul rădăcină al aplicației, creați un fișier numit index.php
Aceasta structura o veti gasi la toate aplicatiile web, de aceea am ales ca structura si fisierele sa fie in limba
engleza. Functiile le vom trata in limba romana pentru a urmari mai usor calea variabilelor si executia
Deschideți fisierul index.php si copiati codul de mai jos:
<!DOCTYPE html>
<html>
<head>

<link href="https://fonts.googleapis.com/css?family=Averia+Serif+Libre|Noto+Serif|Tangerine" rel="stylesheet">

<link rel="stylesheet" href="static/css/main.css">
<meta charset="UTF-8">
<title>Blog | Acasa </title>
</head>
<body>

<div class="container">

<div class="navbar">
<div class="logo_div">
<a href="index.php"><h1>Blog</h1></a>
</div>
<ul>
<li><a class="active" href="index.php">Acasa</a></li>
<li><a href="#news">Noutati</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">Despre</a></li>
</ul>
</div>


<div class="content">
<h2 class="content-title">Articole Recente</h2>
<hr>

</div>



<div class="footer">
<p>Blogul meu © <?php echo date('Y'); ?></p>
</div>

</div>

</body>
</html>
Între etichetele <head> </head>, am inclus link-uri către unele fonturi Google. Există, de asemenea, un link
către fișierul nostru de stilizare main.css, pe care îl vom crea mai jos.
Observați, de asemenea, elementul <div> cu o clasă setată ca container care înfășoară întreaga noastră
aplicație, incluzând secțiunile navbar, conținutul paginii și subsolul paginii.
Pentru a vizualiza pagina în browser, accesați http://localhost/blog-php/index.php

Ar trebui să arate cam așa:
Nu arata prea bine, nu?
Dosarul static, așa cum sa menționat anterior va conține, printre

altele, stilizarea site-ului. Creați 3 subfoldere în folderul static: css,
images, js.
În subfolderul css pe care tocmai l-ați

creat, creați un fișier numit main.css.
Deschideți fisierul main.css si adaugati urmatorul cod:
/****************
*** Setari implicite
*****************/
* { margin: 0px; padding: 0px; }
html { height: 100%; box-sizing: border-box; }

body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
}
/* Antete, titluri */
h1, h2, h3, h4, h5, h6 { color: #444; font-family: 'Averia Serif Libre', cursive; }
a { text-decoration: none; }
ul, ol { margin-left: 40px; }
hr { margin: 10px 0px; opacity: .25; }
/* formulare */
form h2 {
margin: 25px auto;
text-align: center;
font-family: 'Averia Serif Libre', cursive;
}
form input {
width: 100%;
display: block;
padding: 13px 13px;
font-size: 1em;
margin: 5px auto 10px;
border-radius: 3px;
box-sizing : border-box;
background: transparent;
border: 1px solid #3E606F;
}
form input:focus {
outline: none;
}
/* butoane */
.btn {
color: white;
background: #4E6166;
text-align: center;
border: none;
border-radius: 5px;
display: block;
letter-spacing: .1em;
margin: 10px 0px;
padding: 13px 20px;
text-decoration: none;
}
.container {
width: 80%;
margin: 0px auto;
}
/* Bara de navigare */
.navbar {
margin: 0 auto;
overflow: hidden;
background-color: #3E606F;
border-radius: 0px 0px 6px 6px;
}
.navbar ul {
list-style-type: none;
float: right;
}
.navbar ul li {
float: left;
font-family: 'Noto Serif', serif;
}
.navbar ul li a {
display: block;
color: white;
text-align: center;
padding: 20px 28px;
}
.navbar ul li a:hover {
color: #B9E6F2;
background-color: #334F5C;
}
/* Logo */
.navbar .logo_div {
float: left;
padding-top: 5px;
padding-left: 40px;
}
.navbar .logo_div h1 {
color: #B9E6F2;
font-size: 3em;
letter-spacing: 5px;
font-weight: 100;
font-family: 'Tangerine', cursive;
}
/* Subsol */
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
color: white;
background-color: #73707D;
text-align: center;
width: 80%;
margin: 20px auto 0px;
padding: 20px 0px;
}
Acest cod începe cu stilul implicit pentru site urmat de stilul pentru navbar (meniul de navigare) și cel pentru
subsol.
Reîncărcați pagina în browser.

Pagina noastră simplă are acum o bara de meniu frumos, cu un logo, câteva fonturi frumoase și, dacă derulați
în jos, subsolul se ascunde undeva în partea de jos.
Cu toate acestea, pagina noastră are câteva segmente de cod care vor fi repetate în multe alte pagini ale site-
ului. De exemplu, majoritatea paginilor vor avea nevoie de o bară de navigație și de subsol, precum și de link-
uri către stilul și fonturile din secțiunea de antet.
În PHP, putem scrie o porțiune de cod într-un singur fișier și îl putem include într-o anumită poziție în multe
alte fișiere. E ca și cum am scrie același cod în acele locații, dar cu avantajul că împiedică repetarea codului.
Facem acest lucru folosind cuvintele cheie include sau require.
După cum probabil ați ghicit deja, vom folosi dosarul includes pe care l-am creat
la început. Secțiunile care se repetă sunt secțiunile de antet, bara de navigație și
subsolul. Deci, în folderul includes, creați 3 fișiere și anume header.php,
navbar.php și footer.php.
Mergeți la fișierul index.php, selectați partea de cod de la prima linie până la și incluzând eticheta <meta
charset = "UTF-8">, direct deasupra etichetelor <title> și tăiați-o. Acum mergeți la fișierul nou creat blog-
php/includes/header.php și lipiți codul în el.
Deci, fisierul header.php are urmatorul cod:

<!DOCTYPE html>
<html>
<head>

<link href="https://fonts.googleapis.com/css?family=Averia+Serif+Libre|Noto+Serif|Tangerine" rel="stylesheet">

<link rel="stylesheet" href="static/css/main.css">
<meta charset="UTF-8">
Înapoi în fișierul index.php, înlocuiți codul pe care tocmai l-ați tăiat cu următoarea linie:
<?php require_once('includes/header.php') ?>
Rețineți că linia care urmează imediat după această linie este cea cu eticheta <title>. Nu am inclus eticheta
<title> în fișierul header.php, deoarece este posibil ca titlul fiecărei pagini să fie diferit de celelalte ceea ce ne
ajuta la SEO (Optimizarea Motorului de cautare)
Acum, faceți la fel si cu secțiunea meniului de navigare si antetului.
În fișierul index.php, selectați și tăiați codul navbar unde este indicat cu un comentariu bara de navigare și
lipiți-l în navbar.php din folderul includes. Asa ar trebui sa arate navbar.php după lipire:
<div class="navbar">
<div class="logo_div">
<a href="index.php"><h1>Blog</h1></a>
</div>
<ul>
<li><a class="active" href="index.php">Acasa</a></li>
<li><a href="#news">Noutati</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">Despre</a></li>
</ul>
</div>
Apoi, in locul barei de navigare din index.php, adăugați aceasta linie:

<?php include('includes/navbar.php') ?>
În ceea ce privește subsolul paginii, selectați și tăiați codul din eticheta <div> ca are clasa „footer”, chiar
până la ultima linie din pagină și lipiți-l în fișierul footer.php nou creat.
Iată fișierul footer.php după lipire:
<div class="footer">
<p>Blogul meu © <?php echo date('Y'); ?></p>
</div>

</div>

</body>
</html>
Apoi înlocuiți această secțiune din pagina index.php cu


<?php include('includes/footer.php') ?>
După toate aceste rearanjări, fișierul index.php ar trebui sa arate așa:
<?php require_once('includes/header.php') ?>

</head>
<body>
<?php include('includes/navbar.php') ?>


<h2 class="content-title">Articole recente</h2>
<hr>
</div>


<?php include('includes/footer.php') ?>
Dacă reîncărcați pagina, nu ar trebui să fie nicio modificare.
Acum vom adăuga un anunț (banner) pe pagina de pornire imediat sub bara de navigare.
Creați un nou fișier numit banner.php în folderul blog-php / includes și lipiți acest cod în el:
<div class="banner">
<div class="welcome_msg">
<h1>Inspiratia zilei</h1>
<p>
Daca nu lupti pentru visele tale <br>
atunci altcineva te va angaja sa <br>
lupti pentru visele lui! <br>
<span>~ Dhirubhai Ambani</span>
</p>
<a href="register.php" class="btn">Vino alaturi de noi!</a>
</div>
<div class="login_div">
<form action="index.php" method="post" >
<h2>Login</h2>
<input type="text" name="username" placeholder="Utilizator">
<input type="password" name="password" placeholder="Parola">
<button class="btn" type="submit" name="login_btn">Intra in cont</button>
</form>
</div>
</div>
Includeți următorul cod în index.php imediat sub incluziunea barei de navigație:
<!—- bara de navigare este aici... -->


<?php include('includes/banner.php') ?>
Dacă reîncărcați acum pagina, ar trebui sa vedeți aceasta:
Urmează să ne ocupăm de partea de stilizare, dar înainte, descărcati fotografia din link-ul următor,
https://unsplash.com/photos/LrPKL7jOldI si salvați-o cu numele banner.jpg in folderul blog-
php/static/images/ Aceasta este imaginea de fundal a anunțului.
Odată ce am făcut asta, vom adăuga următorul cod CSS in fișierul main.css. Este stilizarea pentru anunț:
/* BANNER: mesaj de bun venit; */

.banner {
margin: 5px auto;
min-height: 400px;
color: white;
border-radius: 5px;
background-image: url('../images/banner.jpg');
background-size: 100% 100%;
}
.banner .welcome_msg {
width: 45%;
float: left;
padding: 20px;
}
.banner .welcome_msg h1 {
color: #B9E6F2;
margin: 25px 0px;
font-size: 2.4em;
font-family: 'Averia Serif Libre', cursive;
}
.banner .welcome_msg p {
color: white;
font-size: 1.5em;
line-height: 1.8em;
}
.banner .welcome_msg p span {
font-size: .81em;
color: #3E606F;
}
.banner .welcome_msg a {
width: 30%;
margin: 20px 0px;
padding: 12px 15px;
font-size: 1.2em;
}
.banner .welcome_msg a:hover {
background: #374447;
}
/* BANNER: Formular de logare; */

.banner .login_div {
width: 50%;
float: left;
}
.banner .login_div form {
margin-top: 40px;
}
.banner .login_div form h2 {
color: white;
margin-bottom: 20px;
}
.banner .login_div form input {
width: 60%;
color: white;
border: 1px solid white;
margin: 10px auto;
letter-spacing: 1.3px;
}
.banner .login_div form button {
display: block;
background: #006384;
margin-left: 20%;
}
Reîncărcăm pagina.
Dacă ați făcut totul corect, ar trebui sa vedeți aceasta:
Acum, hai să creăm un fișier pentru a inițializa variabilele globale ale aplicației. În folderul rădăcină (blog-
php) al aplicației, creați un fișier numit config.php și lipiți acest cod în el:
<?php
session_start();
// conectare la baza de date

// va urma....
// definire constante globale

define ('ROOT_PATH', realpath(dirname(__FILE__)));
define('BASE_URL', 'http://localhost/blog-php/');
?>
ROOT_PATH este setat la adresa fizică în raport cu sistemul de operare, la directorul curent în care se află
acest fișier (config.php). De exemplu, pe calculatorul meu, ROOT_PATH are valoarea
/Applications/Ampps/www/blog-php /. Se folosește pentru a include fișiere fizice, cum ar fi fișiere PHP
(cum ar fi cele pe care tocmai le-am inclus), fișiere descărcabile fizice, cum ar fi imagini, fișiere video, fișiere
audio etc. Dar acum îl vom folosi doar pentru a include fișiere PHP .
BASE_URL este doar o adresă web care setează o adresă URL ce indică rădăcina site-ului nostru. În cazul
nostru, valoarea este http://localhost/blog-php. Este folosit pentru a forma legături către CSS, imagini,
javascript.
Sper că am explicat aceste două variabile suficient de bine.
Acum, să includem fișierul config.php nou creat ca prima linie în index.php. După ce l-am inclus, vom
modifica cele patru locuri din cod în care am inclus și alte segmente de cod, astfel încât să folosească acum
variabila ROOT_PATH pentru a indica către acele fișiere incluse. După toate aceste modificări, index.php va
arăta astfel:


<?php require_once('config.php') ?>
<?php require_once( ROOT_PATH . '/includes/header.php') ?>

</head>
<body>
<?php include( ROOT_PATH . '/includes/navbar.php') ?>



<?php include( ROOT_PATH . '/includes/banner.php') ?>


<h2 class="content-title">Articole Recente</h2>
<hr>
</div>

<?php include( ROOT_PATH . '/includes/footer.php') ?>

Acest mod de a include fișiere are avantajul că, dacă mai târziu unele fișiere sunt mutate în alte directoare,
este posibil să nu mai fie nevoie să actualizăm codurile incluse. De asemenea, dacă decidem să schimbăm
calea către directorul rădăcină, vom face acest lucru doar într-un singur loc, adică în fișierul config.php.
Am terminat cu configurarea de bază a zonei publice a blogului.
Până în prezent aplicația nu este dinamică. Nu am creat încă o bază de date și dacă facem clic pe butonul
„Vino alături de noi”, vom primi o eroare care spune „fișierul nu a fost găsit”.
Conectarea utilizatorului nu a fost încă implementată. Toate acestea vor fi tratate în următoarele părți.
Mergi la PARTEA II

Cum Se Creeaza Un Blog in PHP Si Baza de Date MySQL - Partea I

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cum Se Creeaza Un Blog in PHP Si Baza de Date MySQL - Partea I

Uploaded by

Copyright:

Available Formats

admin: va păstra fișierele pentru zona de back-end de administrator. Fișiere

În folderul rădăcină al aplicației, creați un fișier numit index.php

Deschideți fisierul index.php si copiati codul de mai jos:

Pentru a vizualiza pagina în browser, accesați http://localhost/blog-php/index.php

Dosarul static, așa cum sa menționat anterior va conține, printre

În subfolderul css pe care tocmai l-ați

Deschideți fisierul main.css si adaugati urmatorul cod:

html { height: 100%; box-sizing: border-box; }

Reîncărcați pagina în browser.

Deci, fisierul header.php are urmatorul cod:

Apoi, in locul barei de navigare din index.php, adăugați aceasta linie:

Apoi înlocuiți această secțiune din pagina index.php cu

După toate aceste rearanjări, fișierul index.php ar trebui sa arate așa:

<?php require_once('includes/header.php') ?>

Dacă reîncărcați pagina, nu ar trebui să fie nicio modificare.

Includeți următorul cod în index.php imediat sub incluziunea barei de navigație:

<!—- bara de navigare este aici... -->

/* BANNER: mesaj de bun venit; */

/* BANNER: Formular de logare; */

// conectare la baza de date

// definire constante globale

Sper că am explicat aceste două variabile suficient de bine.

<title>Blog | Acasa </title>

Am terminat cu configurarea de bază a zonei publice a blogului.

You might also like