Site-uri și aplicații pentru WWW

Aplicații (9)


Afișarea dinamică a conținutului

Adăugarea în baza de date folosind phpMyadmin

Pentru a adăuga în baza de date un câteva seturi de date care vor fi afișate dinamic în secțiunea #portfolio, parcurgeți pașii următori:

  1. Porniți serverul de web Apache și serverul de baze de date MySQL din panoul de control xampp-control.exe.
  2. Adăugați, folosind interfața phpMyadmin câteva înregistrări în tabelul categorii:





  3. Adăugați în același mod câteva înregistrări în tabelul proiecte:

  4. Observații:

    • Pentru a da valori câmpului fotografia puteți păstra câteva imagini oferite de șablonul descărcat. De exemplu imaginile portfolio-1.jpg, portfolio-2.jpg și portfolio-6.jpg se încadrează în categoria design. Redenumiți însă imaginile păstrate, folosind denumirile foto1.jpg, foto2.jpg și foto3.jpg. Cifrele 1, 2 și 3 reprezintă valoarile cheilor primare ale articolelor corespunzătoare din tabelul proiecte, deci primele trei proiecte introduce vor fi din categoria design.
    • rețineți dimensiunile imaginilor. Imaginile adăugate ulterior în tabelul proiecte (câmpul fotografia) vor trebui redimensionate astfel încât toate să aibă aceleași dimensiuni.
    • adăugați în tabelul proiecte cel puțin câte un articol și pentru categoriile marketing, respectiv web, respectând modul de stabilire a numelui imaginii din câmpul fotografia și dimensiunile;


    Pentru marketing:


    Pentru web:

    Observație: Pentru început adăugați doar câteva informații necesare testării primelor scripturi. Veți adăuga restul datelor mai târziu.

    Rezultat posibil:






TOP

Afișarea dinamică a antetului secțiunii #portfolio

Pentru a putea afișa dinamic antetul secțiunii portfolio, parcurgeți pașii următori:

  1. Deoarece pagina index.html va conține și cod PHP, redenumiți-o index.php
  2. În continuare adăugați în directorul principal al site-ului scriptul PHP denumit conectare.php, care realizează conectarea la baza de date. Acest script va fi inserat sistematic la începutul fiecărui fișier PHP care accesează baza de date itcorner:
  3. <?php
      $cnx = mysqli_connect("localhost","root","","itcorner");  //  user: root, fara parola!
      // Se testeaza conexiunea
      if (mysqli_connect_errno()) {
         die("Conectare la MySQL nereusita: " . mysqli_connect_error());
      };
      // Impun setul de caractere utf8
      mysqli_set_charset($cnx,"utf8");
    ?>
    





  4. Adăugați apoi la începutul fișierului index.php, înaintea primei linii, linia de cod necesară inserării scriptului conectare.php
  5. <?php  include 'conectare.php'; ?>
    Observație: La fel se va proceda în toate fișierele care accesează baza de date creată.

  6. Localizați apoi codul HTML care afișează în secțiunea #portfolio a site-ului lista din imagine. Codul PHP care va fi inserat în această secțiune va trebui să genereze această listă folosind valori extrase din tabelul categorii al bazei de date.

  7. Pentru a încărca lista de categorii folosind datele din baza de date creată, adăugați în secțiunea portfolio un script PHP care:
    • formulează și trimite serverului de baze de date o comandă SQL SELECT și apelează funcția mysqli_query() care crează mulțimea de selecție conținând datele necesare
    • <?php
       $interogare = "SELECT categoria, filtru FROM categorii";
       //  Execut comanda SQL
       $trimit = mysqli_query($cnx, $interogare) or die("Eroare: " . mysqli_error($cnx));
      
    • într-un ciclu while realizează parcurgerea mulțimii de selecție create. Datorită modului de scriere a ciclului while, la fiecare reluare a sa se va extrage într-un șir asociativ (variabila $rez) următoarea înregistrare din mulțimea de selecție.
    • while($rez = mysqli_fetch_assoc($trimit)) :?>
      
    • afișează elementele primite din baza de date, înlocuind rândurile
    <li data-filter=".filter-app">App</li>
    <li data-filter=".filter-card">Card</li>
    <li data-filter=".filter-web">Web</li>
    

    cu un rând scris în interiorul ciclului:

    <li data-filter=".<?= $rez['filtru'] ?>"><?= $rez['categoria'] ?></li>
    
    • încheie ciclul while
    <?php endwhile; ?>
    


    Cele două elemente ale șirului asociativ $rez, $rez['filtru'] și $rez['categoria'], vor servi la crearea unui element al listei afișate transformând codul html simplu:

    <!-- ======= Portfolio Section ======= -->
    <section id="portfolio" class="portfolio">
    
      <div class="container">
       <div class="section-title">
         <h2>My Portfoliu</h2>
         <p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. 
         Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
       </div>
      
      <div class="row">
        <div class="col-lg-12 d-flex justify-content-center">
         <ul id="portfolio-flters">
           <li data-filter="*" class="filter-active">All</li>
           <li data-filter=".filter-app">App</li>
           <li data-filter=".filter-card">Card</li>
           <li data-filter=".filter-web">Web</li>
         </ul>
        </div>
       </div>
    

    astfel:

    <!-- ======= Portfolio Section ======= -->
    <section id="portfolio" class="portfolio">
    
      <div class="container">
       <div class="section-title">
         <h2>Portofoliu</h2>
         <p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. 
         Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
       </div>
      
      <div class="row">
        <div class="col-lg-12 d-flex justify-content-center">
         <ul id="portfolio-flters">
           <li data-filter="*" class="filter-active">All</li>
           <?php
              $interogare = "SELECT categoria, filtru FROM categorii";
              //  Execut comanda SQL
              $trimit = mysqli_query($cnx, $interogare) or die("Eroare: " . mysqli_error($cnx));
              while($rez = mysqli_fetch_assoc($trimit)) :?>
                 <li data-filter=".<?= $rez['filtru'] ?>"> <?= $rez['categoria'] ?> </li>
          <?php endwhile; ?> 
         </ul>
        </div>
       </div>
    

    Reîncărcați index.php. Rezultatul ar trebui să fie următorul:






TOP

Afișarea dinamică a corpului secțiunii #portfolio

Pentru a putea afișa dinamic conținutul corpului secțiunii portfolio, se folosește aceeași metodă, dar comanda SELECT este mai complexă:

$interproiect = "SELECT proiecte.cod_proiect, proiecte.fotografia, proiecte.nume, 
categorii.filtru, categorii.categoria FROM proiecte, categorii WHERE 
proiecte.cod_categ=categorii.cod_categ";
//  Execut comanda SQL
$trimitcom = mysqli_query($cnx, $interproiect) or die("Eroare: " . mysqli_error($cnx));
while($rezpro = mysqli_fetch_assoc($trimitcom)) :

Apoi va fi înlocuită zona care conține descrierile în HTML a fiecărui bloc:

<div class="col-lg-4 col-md-6 portfolio-item filter-app">
   <div class="portfolio-wrap">
     <img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid" alt="">
        <div class="portfolio-info">
            <h4>App 1</h4>
            <p>App</p>
            <div class="portfolio-links">
                <a href="assets/img/portfolio/portfolio-1.jpg" data-gall="portfolioGallery" class="venobox" title="App 1"><i class="bx bx-plus"></i></a>
                <a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
            </div>
        </div>
    </div>
</div>
. . .

cu un singur bloc scris în interiorul ciclului, în care sunt inserate valori din articolul curent al mulțimii de selecție create:

<div class="col-lg-4 col-md-6 portfolio-item <?= $rezpro['filtru'] ?>">
 <div class="portfolio-wrap">
  <img src="assets/img/portfolio/<?= $rezpro['fotografia'] ?>" class="img-fluid" alt="">
	<div class="portfolio-info">
	    <h4><?= $rezpro['nume'] ?></h4>
	    <p><?= $rezpro['categoria'] ?></p>
	    <div class="portfolio-links">
		  <a href="assets/img/portfolio/<?= $rezpro['fotografia'] ?>" data-gall="portfolioGallery" class="venobox" title="<?= $rezpro['nume'] ?>"><i class="bx bx-plus"></i></a>
		  <a href="portfolio-details.html" title="More Details"><i class="bx bx-link"></i></a>
            </div>
	</div>
  </div>
</div>

Reîncărcați index.php. Rezultatul ar trebui să fie următorul:






Lucrând în acest mod, se păstrează toate funcționalitățile site-ului, nefiind necesare niciun fel de modificări în zonele "sensibile" ale acestuia, adică în scripturile JavaScript utilizate.

TOP