Wednesday, February 15, 2023

Kreirajte svoje prve PHP veb stranice

Pre nego što počnete da učite i kodirate u PHP programskom jeziku, neophodno je da se upoznate sa nekim osnovnim stvarima poput šta je to PHP programski jezik, šta on radi, kako je nastao, šta je novo u njemu i da odradite neke instalacije i pripremite vaše radno okruženje za što ugodniji rad. Zato je neophodno da dobro prostudirate; a ne samo da pročitate prošli post Uvod u PHP. Kad to uradite i odradite neke osnovne instalacije; vratite se na ovoj post. Bez obzira da li ste spremili sebi Visual Studio Code IDE – integrisano radno okruženje ili nameravate da koristite neki od tekstualnih editora poput Sublime Text, Atom, Vi itd; mi ćemo raditi sa Visual Studio Code-om i sa razlogom savetujemo i vama da ga koristite. Kroz svoj vlastiti programerski razvoj, mogu vam reći da sam pored više od 15 programskih jezika; najviše pravio grešaka upravo u PHP-u. Jedno vreme sam čak i digao ruke od PHP-a i prikaza belih praznih stranica i gubljenja dragocenog vremena u traženju šta i gde sam pogrešio. Zato danas imam ogromno iskustvo i trenutno obožavam PHP . Ali ne bez dobrog IDE koji rešava i više od 90% grešaka.


( U PHP-u mnoge stvari možete uraditi na više načina )

Dakle, svi vi koji nameravate da koristite Visual Studio Code za kodiranje u PHP programskim jeziku; neophodno je da instalirate i neke ekstenzije u Visual Studio Code-u. S obzirom da Visual Studio Code ima po defaultu i neke ekstenzije već instalirane; to se uglavnom odnosi na HTML. Ako se pitate zašto HTML; učenje PHP bez poznavanja nekih osnovnih stvari o HTML ne dolazi u obzir. To ne ide jedno bez drugog. Ako ne znate ništa o istom ili ste zaboravili; prisetite se i prostudirajte tutorijal ovde. Kroz ovaj tutorijal za PHP programski jezik; koristićemo i Bootstrap. Naravno, ništa ovde nije nemoguće, sve ove stvari možete učiti uporedo kako ovaj tutorijal napreduje. Znači pokrenite XAMPP; Apache server; za sada nam nije potreban MySQL. Zatim pokrenite Visual Studio Code. Sa vaše leve strane kliknite na ikonu Extensions i instalirajte sledeće ekstenzije:

  • PHP
  • PHP Intelephense
  • PHP Mess Detector
  • phpfmt – PHP Formatter
  • PHP Debug
  • PHP Getters & Setters
  • Auto Close Tag
  • Live Server

Možete instalirati i PHP Server, ali mislim da nema potrebe. Obratite samo pažnju ukoliko imate više ekstenzija da izaberete noviju verziju. Vi možete dodati na ovaj spisak mnogo što šta ali nema za tim potrebe. Npr; dodao sam neke stvari za HTML i on mi nije mogao odraditi nešto sasvim jednostavno. Zato što je napravio sam sebi negde konflikt. Čim sam to isto deinstalirao sve je opet radilo kako treba. Posle instalacija svega navedenog isključite Visual Studio Code, pa ga ponovo pokrenite. Ukoliko vam Visual Studio Code prikaže neku grešku; jednostavno pogledajte koja ekstenzija pravi grešku i to deinstalirajte i pokrenite Visual Studio Code ponovo. Ukoliko ste sve do sada odradili kako treba, vreme je za kodiranje.

Komplikovan neki Hello World!

S obzirom da ćemo koristiti XAMPP; neophodno je da kreiramo naziv našeg projekta u htdocs folderu. U ovom projektu ćemo raditi sve naše lekcije za učenje  PHP-a. Svaka nova lekcija će biti samo nova PHP  veb stranica ili više njih ugrađeni u ovaj projekat. Naravno, naš index.php ili početna stranica će predstavljati sadržaj onog što učimo da bi se snašli kad pokrenemo veb sajt. Kreirajte novi folder u folderu htdocs koji se nalazi u xampp folderu ukoliko koristite Windows operativni sistem ili /opt ukoliko koristite Linux operativni sistem. Nazovite ga php_tutorial. Obratite pažnju da ukoliko koristite Linux operativni sistem; to nećete moći uraditi. Razlog? Potrebne su vam dozvole za pisanje, čitanje i izvršavanje za sve korisnike. Zato je neophodno da izvršite sledeći kod:


( Dozvolite čitanje, pisanje i izvršavanje rekruzivno vašem folderu projekta )

Sada jednostavno u vašem projektu kreirajte novi fajl index.html. Otkucajte doc, html, ili html i pritisnite Tab taster na vašoj tastaturi. Dobićete automatski ispisanu osnovu za vaš HTML5 kod.

<!DOCTYPE html>

<html lang="en">

    <head>

        <title></title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="css/style.css" rel="stylesheet">

    </head>

    <body>  

    </body>

</html>

Zatim odemo na veb sajt Bootstrap-a; pokupimo dve linije koda i implementiramo u naš kod. Kliknite ovde. Sad, vaš HTML kod treba da izgleda ovakvo. 

<!DOCTYPE html>

<html lang="en">

    <head>

        <title></title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

        <link href="css/style.css" rel="stylesheet">

    </head>

    <body>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

    </body>

</html>

Da ovo sad ne bismo radili stalno potrebno je da se organizujemo. Profesionalni programeri ne podnose ponavljanje koda. Zato ćemo ovaj kod podeliti u tri fajla. Kreirajte novi folder i nazovite ga includes. U njemu kreirajte dva nova PHP fajla: header.php i footer.php. Uzmite deo koda iz index.php i prebacite ga header.php

<!DOCTYPE html>

<html lang="en">

    <head>

        <title></title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

        <link href="css/style.css" rel="stylesheet">

    </head>

    <body>

Ostali deo koda stavite u footer.php

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

    </body>

</html>


Da bismo koristili kod iz navedenih fajlova, neophodno je da pozovemo ove datoteke u našu index.php datoteku, a tu nastupa PHP kod. Svaki PHP kod može da se izvrši samo između taga ili zaglavlja <?php i ?>. Ovi tagovi mogu da se nađu i u samoj HTML liniji koda i izvršiće se. Samo u nekim *.php fajlovima koji koriste samo PHP kod bez HTML-a možete videti da takvi fajlovi ne koriste tag za zatvaranje ?>. Ako mene pitate ne znam koliko je to pametno! Otkucajmo sada neki PHP kod u index.php

<?php

    require_once 'includes/header.php';

?>

<h3>Hello World</h3>

<?php require_once 'includes/footer.php'; ?>

Pokrenite vaš Internet pretraživač i otkucajte sledeći url:

http://localhost/php_tutorial/

I dobićete sledeći rezultat:

Hello World

Kao što vidite sve zajedno radi zahvaljujući PHP kodu. Obratite pažnju da ste umesto require_once mogli da koristite i require ili include i da ste putanju mogli staviti i u male zagrade. PHP je takav programski jezik da lako možete jednu stvar da radite na više načina. Početnici često kažu svejedno, ali to nekada nije dobro. Iskustvo je ono što određuje šta je najbolje; jer ono prati trendove. Hajde malo da sredimo i prepravimo naš kod u našim fajlovima. Tipkajte!

includes/header.php

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

    <title><?php echo $title; ?></title>

</head>

<body>

    <h1 class="bg-dark text-light text-center py-2">PHP Tutorial</h1>

includes/footer.php

<!--

    <h5 class="bg-dark text-light text-center py-2" id="footer">

        Copyright &#169; 2023 <strong>Manuel Radovanovic</strong>

        All rights reserved.

    </h5> -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

</body>

</html>

index.php

<?php

    $title = 'PHP Tutorial';

    require_once 'includes/header.php';

?>

<h2 class="bg-primary text-light text-center py-3">Contents</h2>

<div class="container">

    <div>

        <h2><font color="seagreen">Lessons</font></h2>

        <ul>

            <li><a href="lessons/lesson01.php">

                Lesson 1. - The text printing and comments in php

            </a></li>

        </ul>

    </div>

</div>

<!-- footer -->

<?php require_once 'includes/footer.php'; ?>

Ukoliko pogledate dodali smo jednu promenjivu $title u zaglavlju. Preko te promenjive vi možete postaviti drugačiji titl za svaku stranicu. Od početne stranice smo napravili veb stranicu koja sadrži sadržaj. Zašto sve ovo radimo? Da ne bismo ponavljali kod i da bi ste shvatili da je dobra organizacija posla već upola urađen posao. Radite korak po korak, ali nemojte gubiti celu sliku ispred sebe. Header-u smo dodali glavni naslov da ga nebi stalno pisali; dok smo u footer dodali tekst za autorska prava i stavili ga kao komentar; da bi vam bio samo napomena ukoliko pravite footer da se tu pišu autorska prava veb sajta i da vidite kako ćete to da pišete na vašim veb stranicama. Naravno sa vašim imenom ili imenom veb sajta. Pokrenite ovaj projekat i pogledajte sliku šta ćete dobiti.  


( Početna stranica tutorijala nam je sadržaj PHP lekcija koje učimo )

Međutim ukoliko kliknete na link dobićete grešku zato što nismo još kreirali fajl lesson01.php. Zato, prvo kreirajte novi folder i nazovite ga lessons i u njemu kreirajte novi PHP fajl lesson01.php. zatim otkucajte sledeći kod.

lessons/lesson01.php

<?php

    $title = 'Lesson 1';

    require_once '../includes/header.php'; // I can use a comment here, too

?>

<h2 class="bg-primary text-light text-center py-3">

    The text printing and comments

</h2>

<div class="container">

    <?php

        // print '<h3>Hello World</h3>';

        echo '<h3>Hello World</h3>';

    ?>

</div>

<?php

    # This is a one-line comment

    // This is also one-line comment

    /*

        This is

        a multiline

        comment */

?>

<!-- footer -->

<?php require_once '../includes/footer.php'; ?>

Pokrenite ponovo vaš PHP projekat i onda kliknite na link.

( HelloWorld, ispisan PHP komandom echo )

Obratite pažnju na komentare. Kao što vidite u PHP postoji jednolinijski komentari. Njih možete kucati i desno od linije vašeg PHP koda po potrebi.

# This is a one-line comment

// This is also one-line comment

I više linijski komentar. Njih koristite ako hoćete da zakomentarišete više redova koda.

/*

        This is

        a multiline

        comment */

Međutim, često ćete da koristite i HTML komentare:

<!-- footer -->

Isto tako pored PHP komande echo, postoje situacije kada ćete koristiti print komandu koja takođe ispisuje tekst. Ako se pitate kako da prelomite red u vašem tekstu kojeg hoćete da prikažete na vašoj stranici. Jednostavno koristite HTML tagove u vašem tekstu. Preporuka je naravno da pišete HTML kod kad to možete; umesto da koristite PHP komande za ispis teksta na veb stranici. Često ćete se susretati i sa HTML i PHP kodom u istoj liniji. U tome jeste lepota PHP-a ali i grešaka. Zato, nema učenja i kodiranja PHP na brzaka. I najmanji PHP kod shvatite veoma ozbiljno. I za kraj pogledajte video kako smo sve ovo odradili u njemu.

( PHP - 1. My First PHP Web Pages )

 

 

 

 

 

 







No comments:

Post a Comment