<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Pemrograman Web 2</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; padding: 20px; }

        .container {
            width: 90%;
            margin: auto;
            border: 1px solid #ccc;
        }

        /* Header */
        .header {
            text-align: center;
            padding: 30px;
            border-bottom: 1px solid #ccc;
            font-size: 18px;
            color: #444;
        }

        /* Layout 2 kolom */
        .content {
            display: flex;
        }

        /* Sidebar kiri */
        .sidebar {
            width: 220px;
            min-width: 220px;
            border-right: 1px solid #ccc;
            padding: 15px;
        }

        .sidebar h4 {
            margin-bottom: 10px;
            font-size: 14px;
        }

        .sidebar ul {
            list-style: disc;
            padding-left: 15px;
        }

        .sidebar ul li {
            margin-bottom: 6px;
        }

        .sidebar ul li a {
            text-decoration: none;
            color: #5a5acd;
            font-size: 13px;
        }

        .sidebar ul li a:hover {
            text-decoration: underline;
        }

        /* Area konten kanan */
        .main {
            flex: 1;
            padding: 20px;
            min-height: 400px;
        }

        /* Footer */
        .footer {
            text-align: center;
            padding: 15px;
            border-top: 1px solid #ccc;
            font-size: 13px;
            color: #444;
        }
    </style>
</head>
<body>

<div class="container">

    <!-- HEADER -->
    <div class="header">
        20230001 - Nama Lengkap Kamu
    </div>

    <!-- CONTENT -->
    <div class="content">

        <!-- SIDEBAR -->
        <div class="sidebar">
            <h4>List Latihan</h4>
            <ul>
                <li><a href="helloworld.php">Hello World</a></li>
                <li><a href="variabel.php">Variabel</a></li>
                <li><a href="object.php">Object</a></li>
                <li><a href="konstanta.php">Konstanta</a></li>
                <li><a href="operator_aritmetika.php">Operator Aritmetika</a></li>
                <li><a href="operator_perbandingan.php">Operator Perbandingan</a></li>
                <li><a href="operator_string.php">Operator String</a></li>
                <li><a href="if_else.php">Kondisi If</a></li>
                <li><a href="if_elseif.php">Kondisi Elseif</a></li>
                <li><a href="switch.php">Kondisi Switch</a></li>
                <li><a href="while.php">While Loop</a></li>
                <li><a href="do_while.php">Do While Loop</a></li>
                <li><a href="for.php">For Loop</a></li>
                <li><a href="foreach.php">Foreach Loop</a></li>
            </ul>
        </div>

        <!-- MAIN CONTENT -->
        <div class="main">
            <?php
                // Konten berubah sesuai link yang diklik
                $page = isset($_GET['page']) ? $_GET['page'] : 'home';
                if($page == 'home') {
                    echo "<p style='text-align:center; margin-top:150px;'>Hello World!</p>";
                }
            ?>
        </div>

    </div>

    <!-- FOOTER -->
    <div class="footer">
        Pemrograman Web 2, Copyright Nama Lengkap Kamu
    </div>

</div>

</body>
</html>