Menyajikan File Statis


Halaman ini menunjukkan cara menyajikan CSS sebagai file statis.

Tidak seperti lingkungan hosting web tradisional, Google App Engine tidak menyajikan file langsung dari direktori sumber aplikasi Anda kecuali jika dikonfigurasikan untuk melakukannya. Namun, Anda mungkin ingin menyajikan file statis seperti gambar, CSS, dan kode JavaScript, langsung ke browser web. Anda dapat memberi tahu App Engine untuk menyajikan file tertentu tanpa membuat pengendali Anda sendiri.

Halaman ini adalah bagian dari tutorial multi-halaman. Untuk memulai dari awal dan melihat petunjuk penyiapan, buka Membuat Buku Tamu.

Menentukan pengendali

Dalam contoh kode berikut, dua pengendali baru untuk URL ditentukan dalam file app.yaml:

  1. Saat menerima permintaan dengan URL yang diawali /stylesheets, App Engine memetakan sisa jalur tersebut ke file dalam direktori stylesheets dan, jika file yang sesuai ditemukan, isi file akan ditampilkan ke klien.

  2. Semua URL lainnya cocok dengan jalur /.*, dan ditangani oleh skrip helloworld.php.

    runtime: php55
    api_version: 1
    
    handlers:
    - url: /stylesheets
      static_dir: stylesheets
    
    - url: /.*
      script: helloworld.php
    

Pola jalur pengendali URL diuji sesuai urutan kemunculannya di app.yaml. Dalam hal ini, pola /stylesheets akan cocok sebelum pola /.* untuk jalur yang sesuai. Untuk informasi selengkapnya tentang pemetaan URL dan opsi lain yang dapat Anda tentukan di app.yaml, lihat referensi app.yaml.

Menambahkan stylesheet

Dalam contoh kode berikut, file CSS dibuat, lalu ditambahkan ke aplikasi.

  1. Contoh kode menambahkan konten berikut ke file main.css di direktori helloworld/stylesheets:

    body {
      font-family: Verdana, Helvetica, sans-serif;
      background-color: #DDDDDD;
    }

    Secara default, App Engine menyajikan file statis menggunakan jenis MIME berdasarkan ekstensi nama file. Misalnya, file dengan nama yang diakhiri dengan .css akan disalurkan dengan jenis MIME text/css. Anda dapat mengonfigurasi jenis MIME eksplisit dengan menggunakan setelan mime_type saat mengonfigurasi pengendali di file konfigurasi app.yaml.

  2. Untuk menggunakan stylesheet dalam aplikasi Anda, contoh kode menyisipkan baris berikut setelah baris <html> di bagian atas:

    <head>
      <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
    </head>