Vartotojo sąsaja su HTML ir CSS PHP

Svetainė yra esminė daugumos žiniatinklio programų dalis, o PHP galime naudoti HTML ir CSS, kad sukurtume vartotojo sąsają. Šiame straipsnyje mes išnagrinėsime, kaip naudoti HTML ir CSS PHP, kad sukurtume gražią ir interaktyvią mūsų programų vartotojo sąsają.

 

HTML integravimas į PHP

Norėdami integruoti HTML į PHP, galime naudoti PHP žymas, kad įterptume PHP kodą į HTML skyrius. Toliau pateiktame pavyzdyje parodyta, kaip naudoti PHP kuriant dinaminį pavadinimą:

<html>  
<head>  
    <title><?php echo "Home Page"; ?></title>  
</head>  
<body>  
    <h1><?php echo "Welcome to our website!"; ?></h1>  
</body>  
</html>  

Aukščiau pateiktame pavyzdyje naudojame PHP žymas <?php ?> PHP kodui įterpti į HTML skyrius. Tai leidžia mums sukurti dinaminius HTML elementus pagal apskaičiuotas reikšmes PHP kode.

 

CSS stilių taikymas PHP

Norėdami pritaikyti CSS stilius PHP puslapiui, žymose galime naudoti CSS kodo blokus <style>. Šis pavyzdys parodo, kaip taikyti CSS stilius HTML elementui PHP:

<html>  
<head>  
    <style>  
        .title {  
            color: blue;  
            font-size: 24px;  
        }  
    </style>  
</head>  
<body>  
    <h1 class="title"><?php echo "Dynamic Title"; ?></h1>  
</body>  
</html>  

Aukščiau pateiktame pavyzdyje mes naudojame CSS kodo bloką žymose, <style> kad apibrėžtume klasę .title su spalvos ir šrifto dydžio savybėmis. Toliau klasę pritaikome .title antraštei naudodami class atributą.

 

PHP šablonų variklių naudojimas

Norėdami sukurti lanksčias ir prižiūrimas vartotojo sąsajas, galime naudoti PHP šablonų variklius, tokius kaip Laravel Blade, Smarty ar Twig. Šablonų varikliai leidžia atskirti sąsają ir logiką į skirtingus failus, todėl šaltinio kodas tampa lengviau skaitomas ir prižiūrimas.

Šiame pavyzdyje naudojamas Laravel Blade, populiarus PHP bendruomenės šablonų variklis:

<!-- resources/views/welcome.blade.php -->  
<html>  
<head>  
    <title>Home Page</title>  
</head>  
<body>  
    <h1>Welcome to our website!</h1>  
  
    <p>{{ $message }}</p>  
</body>  
</html>  

 

Aukščiau pateiktame pavyzdyje naudojame sintaksę, {{ $message }} kad šablone būtų rodomas kintamasis. Šis kintamasis gali būti perduodamas iš valdančio PHP kodo, todėl galime sukurti dinamines sąsajas pagal duomenis, perduodamus iš logikos.

 

Apibendrinant, tai yra keletas būdų, kaip naudoti HTML ir CSS PHP kuriant vartotojo sąsajas. Integruodami PHP kodą, taikydami CSS stilius ir naudodami šablonų variklius, savo PHP programoms galime sukurti dinamiškas ir patrauklias vartotojo sąsajas.