close

PHP ਵਿੱਚ HTML ਅਤੇ CSS ਦੇ ਨਾਲ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ

ਇੱਕ ਵੈਬਸਾਈਟ ਜ਼ਿਆਦਾਤਰ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਦਾ ਇੱਕ ਜ਼ਰੂਰੀ ਹਿੱਸਾ ਹੈ, ਅਤੇ PHP ਵਿੱਚ, ਅਸੀਂ ਉਪਭੋਗਤਾ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਲਈ HTML ਅਤੇ CSS ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ। ਇਸ ਲੇਖ ਵਿੱਚ, ਅਸੀਂ ਖੋਜ ਕਰਾਂਗੇ ਕਿ ਸਾਡੀਆਂ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਇੱਕ ਸੁੰਦਰ ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਉਪਭੋਗਤਾ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਲਈ PHP ਵਿੱਚ HTML ਅਤੇ CSS ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰੀਏ।

 

HTML ਨੂੰ PHP ਵਿੱਚ ਜੋੜਨਾ

HTML ਨੂੰ PHP ਵਿੱਚ ਏਕੀਕ੍ਰਿਤ ਕਰਨ ਲਈ, ਅਸੀਂ HTML ਭਾਗਾਂ ਵਿੱਚ PHP ਕੋਡ ਨੂੰ ਏਮਬੈਡ ਕਰਨ ਲਈ PHP ਟੈਗਸ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ। ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਣ ਦਰਸਾਉਂਦੀ ਹੈ ਕਿ ਇੱਕ ਗਤੀਸ਼ੀਲ ਸਿਰਲੇਖ ਬਣਾਉਣ ਲਈ PHP ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰੀਏ:

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

ਉਪਰੋਕਤ ਉਦਾਹਰਨ ਵਿੱਚ, ਅਸੀਂ <?php ?> HTML ਭਾਗਾਂ ਵਿੱਚ PHP ਕੋਡ ਪਾਉਣ ਲਈ PHP ਟੈਗਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। ਇਹ ਸਾਨੂੰ PHP ਕੋਡ ਵਿੱਚ ਗਣਿਤ ਮੁੱਲਾਂ ਦੇ ਅਧਾਰ ਤੇ ਗਤੀਸ਼ੀਲ HTML ਤੱਤ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।

 

PHP ਵਿੱਚ CSS ਸਟਾਈਲ ਲਾਗੂ ਕਰਨਾ

PHP ਪੰਨੇ 'ਤੇ CSS ਸਟਾਈਲ ਲਾਗੂ ਕਰਨ ਲਈ, ਅਸੀਂ <style> ਟੈਗਾਂ ਦੇ ਅੰਦਰ CSS ਕੋਡ ਬਲਾਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ। ਹੇਠ ਦਿੱਤੀ ਉਦਾਹਰਨ ਦਰਸਾਉਂਦੀ ਹੈ ਕਿ PHP ਦੇ ਅੰਦਰ ਇੱਕ HTML ਤੱਤ ਲਈ CSS ਸਟਾਈਲ ਕਿਵੇਂ ਲਾਗੂ ਕਰਨਾ ਹੈ:

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

ਉਪਰੋਕਤ ਉਦਾਹਰਨ ਵਿੱਚ, ਅਸੀਂ ਰੰਗ ਅਤੇ ਫੌਂਟ-ਆਕਾਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਾਲੀ <style> ਇੱਕ ਕਲਾਸ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਟੈਗਾਂ ਦੇ ਅੰਦਰ ਇੱਕ CSS ਕੋਡ ਬਲਾਕ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। .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 ਕੋਡ ਤੋਂ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਅਸੀਂ ਤਰਕ ਤੋਂ ਪਾਸ ਕੀਤੇ ਡੇਟਾ ਦੇ ਆਧਾਰ 'ਤੇ ਡਾਇਨਾਮਿਕ ਇੰਟਰਫੇਸ ਬਣਾ ਸਕਦੇ ਹਾਂ।

 

ਸਿੱਟੇ ਵਜੋਂ, ਇਹ ਉਪਭੋਗਤਾ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਲਈ PHP ਵਿੱਚ HTML ਅਤੇ CSS ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਕੁਝ ਤਰੀਕੇ ਹਨ. PHP ਕੋਡ ਨੂੰ ਏਕੀਕ੍ਰਿਤ ਕਰਕੇ, CSS ਸਟਾਈਲ ਲਾਗੂ ਕਰਕੇ, ਅਤੇ ਟੈਂਪਲੇਟ ਇੰਜਣਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਅਸੀਂ ਆਪਣੀਆਂ PHP ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਗਤੀਸ਼ੀਲ ਅਤੇ ਆਕਰਸ਼ਕ ਉਪਭੋਗਤਾ ਇੰਟਰਫੇਸ ਬਣਾ ਸਕਦੇ ਹਾਂ।