close

واجهة المستخدم مع HTML و CSS في PHP

يعد موقع الويب جزءًا أساسيًا من معظم تطبيقات الويب ، وفي PHP ، يمكننا استخدام HTML و CSS لإنشاء واجهة المستخدم. في هذه المقالة ، سوف نستكشف كيفية استخدام HTML و CSS في PHP لبناء واجهة مستخدم جميلة وتفاعلية لتطبيقاتنا.

 

دمج HTML في PHP

لدمج HTML في PHP ، يمكننا استخدام علامات PHP لتضمين كود PHP في أقسام HTML. يوضح المثال التالي كيفية استخدام PHP لإنشاء عنوان ديناميكي:

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

في المثال أعلاه ، نستخدم علامات PHP <?php ?> لإدخال كود PHP داخل أقسام HTML. يتيح لنا ذلك إنشاء عناصر HTML ديناميكية بناءً على القيم المحسوبة في كود PHP.

 

تطبيق أنماط CSS في PHP

لتطبيق أنماط CSS على صفحة PHP ، يمكننا استخدام كتل كود CSS داخل <style> العلامات. يوضح المثال التالي كيفية تطبيق أنماط CSS على عنصر HTML داخل PHP:

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

في المثال أعلاه ، نستخدم كتلة كود CSS داخل العلامات <style> لتحديد فئة .title بخصائص لون وحجم الخط. بعد ذلك ، نطبق .title الفئة على العنوان باستخدام class السمة.

 

استخدام محركات قوالب PHP

لتطوير واجهات مستخدم مرنة وقابلة للصيانة ، يمكننا استخدام محركات قوالب PHP مثل Laravel Blade أو Smarty أو Twig. تسمح لنا محركات القوالب بفصل الواجهة والمنطق في ملفات مختلفة ، مما يجعل الكود المصدري أكثر قابلية للقراءة والصيانة.

يستخدم المثال التالي Laravel Blade ، محرك قالب شائع في مجتمع 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>

 

في المثال أعلاه ، نستخدم {{ $message }} بناء الجملة لعرض متغير في القالب. يمكن تمرير هذا المتغير من كود PHP المتحكم ، مما يسمح لنا بإنشاء واجهات ديناميكية بناءً على البيانات التي يتم تمريرها من المنطق.

 

في الختام ، هذه بعض الطرق لاستخدام HTML و CSS في PHP لبناء واجهات مستخدم. من خلال دمج كود PHP وتطبيق أنماط CSS واستخدام محركات القوالب ، يمكننا إنشاء واجهات مستخدم ديناميكية وجذابة لتطبيقات PHP الخاصة بنا.