close

Antara Muka Pengguna dengan HTML dan CSS dalam PHP

Laman web adalah bahagian penting dalam kebanyakan aplikasi web, dan dalam PHP, kita boleh menggunakan HTML dan CSS untuk mencipta antara muka pengguna. Dalam artikel ini, kami akan meneroka cara menggunakan HTML dan CSS dalam PHP untuk membina antara muka pengguna yang cantik dan interaktif untuk aplikasi kami.

 

Mengintegrasikan HTML ke dalam PHP

Untuk menyepadukan HTML ke dalam PHP, kami boleh menggunakan tag PHP untuk membenamkan kod PHP dalam bahagian HTML. Contoh berikut menunjukkan cara menggunakan PHP untuk mencipta tajuk dinamik:

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

Dalam contoh di atas, kami menggunakan teg PHP <?php ?> untuk memasukkan kod PHP dalam bahagian HTML. Ini membolehkan kami mencipta elemen HTML dinamik berdasarkan nilai yang dikira dalam kod PHP.

 

Menggunakan Gaya CSS dalam PHP

Untuk menggunakan gaya CSS pada halaman PHP, kami boleh menggunakan blok kod CSS di dalam <style> teg. Contoh berikut menunjukkan cara menggunakan gaya CSS pada elemen HTML dalam PHP:

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

Dalam contoh di atas, kami menggunakan blok kod CSS dalam teg <style> untuk menentukan kelas .title dengan sifat warna dan saiz fon. Seterusnya, kami menggunakan .title kelas pada tajuk menggunakan class atribut.

 

Menggunakan Enjin Templat PHP

Untuk membangunkan antara muka pengguna yang fleksibel dan boleh diselenggara, kami boleh menggunakan enjin templat PHP seperti Laravel Blade, Smarty atau Twig. Enjin templat membolehkan kami memisahkan antara muka dan logik ke dalam fail yang berbeza, menjadikan kod sumber lebih mudah dibaca dan diselenggara.

Contoh berikut menggunakan Laravel Blade, enjin templat popular dalam komuniti PHP:

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

 

Dalam contoh di atas, kami menggunakan {{ $message }} sintaks untuk memaparkan pembolehubah dalam templat. Pembolehubah ini boleh diluluskan daripada kod PHP yang mengawal, membolehkan kami mencipta antara muka dinamik berdasarkan data yang diluluskan daripada logik.

 

Kesimpulannya, ini adalah beberapa cara untuk menggunakan HTML dan CSS dalam PHP untuk membina antara muka pengguna. Dengan menyepadukan kod PHP, menggunakan gaya CSS dan menggunakan enjin templat, kami boleh mencipta antara muka pengguna yang dinamik dan menarik untuk aplikasi PHP kami.