בפרק זה נלמד להטמיע PHP בתוך HTML, לכלול HTML בתוך סקריפטים של PHP, לסגנן את התוכן שנוצר ב-PHP באמצעות CSS ועוד.

הטמעת PHP ב-HTML

אחד היתרונות של שפת PHP הוא האינטגרציה החלקה שלה עם HTML ו-CSS, המאפשרת למפתחים ליצור דפי אינטרנט דינמיים, אינטראקטיביים ומושכים חזותית.

ניתן להטמיע PHP ישירות לתוך קובצי HTML, דבר שמאפשר להוסיף תוכן דינמי לדפי האינטרנט. קוד PHP מבוצע בשרת, והפלט המתקבל נשלח לדפדפן של הלקוח כ-HTML רגיל.

דוגמה:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PHP in HTML Example</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>Today's date is: <?php echo date('Y-m-d'); ?></p>
</body>
</html>

בדוגמה זו, גוף ה-HTML כולל כותרת h1 ופיסקה p. קוד ה-PHP המשולב ב-HTML מבצע חישוב של התאריך בפורמט Y-m-d (חודש, שנה, יום) ומחזיר מחרוזת אשר משתלבת בתוך פיסקת ה-HTML.

קוד ה-PHP מתחיל עם הצירוף php?> ומסתיים בצירוף <?. הרבה פעמים ניתן להסיר את הכיתוב php מהתג הפותח, בהתאם להגדרות על השרת.

חשוב לשים לב: קוד ה-HTML שהשרת מחזיר לדפדפן אינו הקוד שבדוגמה. הקוד שבדוגמה נמצא רק על השרת, ולאחר החישוב של קוד ה-PHP מוחזר קוד HTML "נקי" (ללא PHP) כאשר החלק של ה-PHP מוחלף בתאריך.

הכללת HTML ב-PHP

סקריפט PHP יכול לחולל ולהחזיר קטע HTML. הדבר שימושי ליצירת תוכן HTML באופן דינמי בהתבסס על תנאים או נתונים מסוימים.

דוגמה:

<?php
echo "<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>HTML in PHP Example</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>Today's date is: " . date('Y-m-d') . "</p>
</body>
</html>";
?>

בדוגמה זו, כל מסמך ה-HTML נוצר באמצעות PHP. הפונקציה echo מחזירה מחרוזת שכוללת את ה-HTML. הפונקציה date המשולבת במחרוזת, מחזירה את התאריך הנוכחי. המחרוזת ש-PHP מחזירה היא קטע HTML נקי שמוחזר לדפדפן להצגה.

ערבוב PHP ו-HTML

למעשה, ניתן לערבב בחופשיות PHP ו-HTML ולעבור ביניהם בהתאם לצורך. גמישות זו מאפשרת ליצור פריסות ופונקציות מורכבות.

להלן דוגמה שמדגימה יצירת טופס יצירת קשר פשוט.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Contact Form</title>
</head>
<body>
    <h1>Contact Us</h1>
    <?php
    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        $name = htmlspecialchars($_POST['name']);
        $message = htmlspecialchars($_POST['message']);
        echo "<p>Thank you, $name. Your message has been received:</p>";
        echo "<blockquote>$message</blockquote>";
    } else {
    ?>
    <form action="" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <br>
        <label for="message">Message:</label>
        <textarea id="message" name="message" required></textarea>
        <br>
        <input type="submit" value="Send">
    </form>
    <?php
    }
    ?>
</body>
</html>

בדוגמה זו, טופס ה-HTML מוצג כאשר הדף נטען לראשונה בדפדפן. כאשר הטופס נשלח, סקריפט PHP מעבד את הקלט ומציג הודעת תודה עם הנתונים שנשלחו. הפונקציה htmlspecialchars משמשת למניעת התקפות XSS על ידי קידוד תווים מיוחדים שמגיעים מהקלט של המשתמש.

שימוש ב-CSS עם PHP

ניתן להשתמש ב-CSS לעיצוב HTML דינמי שנוצר על ידי PHP. הגדרות ה-CSS יכולות להכלל בתוך ה-HTML או בקובצי CSS נפרדים.

להלן דוגמה שמדגימה עיצוב תוכן שנוצר ב-PHP באמצעות CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Styled PHP Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            color: #333;
        }
        .message {
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #fff;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>PHP and CSS Integration</h1>
    <?php
    $message = "This is a dynamically generated message.";
    echo "<div class='message'>$message</div>";
    ?>
</body>
</html>

בדוגמה זו, הגדרות ה-CSS נמצאות בתוך תגית style בחלק של ה-head ב-HTML. קוד ה-PHP מייצר הודעה שמוצגת בדפדפן ומעוצבת בהתאם להגדרות ה-CSS.

פלט HTML מותנה

באמצעות PHP ניתן לחולל פלט HTML שונה בהתבסס על תנאים, דבר שמקל על יצירת דפים דינמיים ואינטראקטיביים.

להלן דוגמה להצגת הודעות שונות על סמך השעה ביום.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Conditional Output Example</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <?php
    $hour = date('G');

    if ($hour < 12) {
        echo "<p>Good morning!</p>";
    } elseif ($hour < 18) {
        echo "<p>Good afternoon!</p>";
    } else {
        echo "<p>Good evening!</p>";
    }
    ?>
</body>
</html>

חלוקת קוד PHP לקבצים

כדי לשמור על הקוד מאורגן, ניתן לכלול קובצי PHP או HTML חיצוניים באמצעות הצהרות include או require. שימוש נפוץ הוא הפרדה של חלקי ה-head וה-body לקבצים שונים.

דוגמה:

הקובץ header.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>
</head>
<body>
    <header>
        <h1>My Website Header</h1>
    </header>

הקובץ footer.php

    <footer>
        <p>© 2024 My Website</p>
    </footer>
</body>
</html>

הקובץ index.php (הראשי)

<?php include 'header.php'; ?>
    <main>
        <p>Welcome to my website. Here is some content.</p>
    </main>
<?php include 'footer.php'; ?>

יצירת קובץ CSS דינמי באמצעות PHP

ניתן להשתמש ב-PHP כדי ליצור CSS באופן דינמי. הדבר שימושי כשרוצים לעשות שימושים חוזרים באותו קובץ CSS למטרות שונות או כשרוצים להחיל סגנונות המבוססים על העדפות משתמש.

דוגמה:

<?php
header("Content-type: text/css");

$bgColor = isset($_GET['bgColor']) ? $_GET['bgColor'] : '#fff';
$textColor = isset($_GET['textColor']) ? $_GET['textColor'] : '#333';
?>

body {
    background-color: <?php echo $bgColor; ?>;
    color: <?php echo $textColor; ?>;
}

בדוגמה זו, סקריפט PHP יוצר CSS על סמך הפרמטרים bgColor ו-textColor.

ניתן לטעון את קובץ ה-PHP הזה מתוך ה-HTML כאילו היה קובץ CSS סטטי רגיל. נעשה זאת כך:

<link rel="stylesheet" href="style.php?bgColor=#f0f0f0&textColor=#000">

שילוב PHP עם HTML ו-CSS מאפשר ליצור דפי אינטרנט דינמיים, אינטראקטיביים ומסוגננים. על ידי הטמעת PHP בתוך HTML ולהיפך, ניתן לפתח יישומי אינטרנט מורכבים המגיבים לקלט המשתמש ומציגים תוכן דינמי. שימוש בקוד המחולל תוכן דינמי, יצירת CSS דינמי ויצירת תוכן מותנה יכולים לשפר מאוד את תהליך פיתוח האינטרנט שלך. בפרקים הבא, נתעמק באפשרויות השונות ששפת PHP מציעה.

הישארו מעודכנים בעודנו ממשיכים במסע המקיף שלנו אל עולם ה-PHP!

פיתוח ב-PHP ותבנית HTML ראשונית

הטמעת PHP ב-HTML

הכללת HTML ב-PHP

ערבוב PHP ו-HTML

שימוש ב-CSS עם PHP

פלט HTML מותנה

חלוקת קוד PHP לקבצים

יצירת קובץ CSS דינמי באמצעות PHP