Mengambil List Directory, Menyusun Laman Index Bootsrap Example

Menggunakan phyton. Buat generate_index.py untuk menghasilkan index.html yang memanfaatkan struktur HTML tersebut.


import os

DIRECTORY = r'C:\xampp\htdocs\bootstrap'  # Ganti dengan path ke direktori Anda

# Print debug info
print(f"Generating index.html for directory: {DIRECTORY}")

html_content = '''<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <title>Bootstrap Examples Directory</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #wrapper {
            display: flex;
            width: 100%;
            align-items: stretch;
        }
        #sidebar-wrapper {
            width: 250px;
            background-color: #f8f9fa;
        }
        #page-content-wrapper {
            flex: 1;
            padding: 20px;
        }
        .sidebar-heading {
            font-size: 1.5rem;
            padding: 0.875rem 1.25rem;
        }
        .list-group-item {
            border: none;
        }
    </style>
</head>
<body>
    <div class="d-flex" id="wrapper">

        <!-- Sidebar -->
        <div class="bg-light border-right" id="sidebar-wrapper">
            <div class="sidebar-heading">Bootstrap Examples</div>
            <div class="list-group list-group-flush" id="sidenav">
'''

# Check if directory exists
if not os.path.exists(DIRECTORY):
    print(f"Error: Directory '{DIRECTORY}' does not exist.")
    exit(1)

# Loop through directory and add each folder/file to the HTML content
for item in os.listdir(DIRECTORY):
    if item != 'index.html' and item != 'generate_index.py':  # Skip the index and script file
        item_path = os.path.join(DIRECTORY, item)
        if os.path.isdir(item_path):
            html_content += f'<a href="{item}/" class="list-group-item list-group-item-action bg-light" onclick="loadContent(\'{item}/\'); return false;">{item}</a>\n'
        else:
            html_content += f'<a href="{item}" class="list-group-item list-group-item-action bg-light" onclick="loadContent(\'{item}\'); return false;">{item}</a>\n'
        print(f"Added {item} to index.html")

html_content += '''
            </div>
        </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">

            <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
                <button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>

                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                    </ul>
                </div>
            </nav>

            <div class="container-fluid">
                <div id="content" style="margin-top: 20px;">
                    <!-- Loaded content will appear here -->
                </div>
            </div>
        </div>
    </div>
    <!-- /#wrapper -->

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
        document.getElementById("menu-toggle").addEventListener("click", function (e) {
            e.preventDefault();
            document.getElementById("wrapper").classList.toggle("toggled");
        });

        function loadContent(url) {
            $('#content').load(url);
        }
    </script>
</body>
</html>
'''

# Write the HTML content to index.html
try:
    with open(os.path.join(DIRECTORY, 'index.html'), 'w') as file:
        file.write(html_content)
    print('index.html has been generated.')
except Exception as e:
    print(f"Error writing to index.html: {e}")

EP Note:

  1. Struktur HTML: Script ini membuat struktur HTML dengan Bootstrap, termasuk sidebar dan konten halaman.
  2. Looping Direktori: Menambahkan setiap folder dan file sebagai item dalam sidebar.
  3. Output: index.html akan dihasilkan dengan daftar folder dan file dalam direktori.

Cara Menggunakan:

  1. Letakkan script generate_index.py di direktori yang sama dengan folder contoh Bootstrap Anda.
  2. Sesuaikan DIRECTORY di script Python dengan path ke direktori Anda.
  3. Jalankan script dengan python generate_index.py.
  4. Buka index.html di browser untuk melihat hasilnya.


Audio Title
0:00 / 0:00
Next Post Previous Post