{"title":"Menulis aplikasi Django pertama anda, bagian 6","version":"3.1","locale":"id","docname":"intro/tutorial06","url":"/id/3.1/intro/tutorial06/","canonical":"https://djangodocs.dev/id/3.1/intro/tutorial06/","summary":"Tutorial ini mulai dimana Tutorial 5 ditinggalkan. Kami telah membangun aplikasi jejak pendapat Jaringan dicoba, dan kami akan sekarang menambahkan…","html":"<h1>Menulis aplikasi Django pertama anda, bagian 6<a class=\"heading-anchor\" href=\"#writing-your-first-django-app-part-6\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h1>\n<p>Tutorial ini mulai dimana <a class=\"reference internal\" href=\"/id/3.1/intro/tutorial05/\"><span class=\"doc\">Tutorial 5</span></a> ditinggalkan. Kami telah membangun aplikasi jejak pendapat Jaringan dicoba, dan kami akan sekarang menambahkan stylesheet dan sebuah gambar.</p>\n<p>Disamping dari HTML dibangkitkan oleh peladen, aplikasi jaringan umumnya butuh melayani berkas-berkas tambahan - seperti gambar, JavaScript, atau CSS - perlu untuk membangun halaman jaringan lengkap. Di Django, kami mengacu pada berkas-berkas ini sebagai &quot;berkas statis&quot;.</p>\n<p>Untuk proyek kecil, ini bukan urusan yang besar, karena anda dapat menyimpan berkas statis disuatu tempat peladen jaringan anda dapat menemukan itu. Bagaimanapun, dalam proyek terbesar, -- khususnya yang terdiri dari aplikasi - aplikasi banyak -- berhubungan dengan banyak kumpulan dari berkas statis disediakan oleh setiap aplikasi mulai menjadi rumit.</p>\n<p>Itulah <code class=\"docutils literal notranslate\">django.contrib.staticfiles</code> diperuntukkan: dia mengumpulkan berkas statis dari setiap aplikasi anda (dan tempat lain apapun anda tentukan) kedalam tempat tunggal yang dapat dengan mudah dilayani di produksi.</p>\n<aside class=\"admonition-where-to-get-help admonition\" role=\"note\">\n<p class=\"admonition-title\">Dimana mendapatkan bantuan:</p>\n<p>Jika anda memiliki masalah melalui tutorial ini, harap geser ke <a class=\"reference internal\" href=\"/id/3.1/faq/help/\"><span class=\"doc\">Getting Help</span></a> bagian dari FAQ.</p>\n</aside>\n<section id=\"customize-your-app-s-look-and-feel\">\n<h2>Sesuaikan <em>aplikasi</em> anda penampilan dan perasaan<a class=\"heading-anchor\" href=\"#customize-your-app-s-look-and-feel\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>Pertama, buat sebuah direktori dipanggil <code class=\"docutils literal notranslate\">static</code> di direktori <code class=\"docutils literal notranslate\">polls</code> anda. Django akan mencari berkas statis disana, sama halnya bagaimana Django menemukan cetakan didalam <code class=\"docutils literal notranslate\">polls/templates/</code>.</p>\n<p>Pengaturan Django <a class=\"reference internal\" href=\"/id/3.1/ref/settings/#std-setting-STATICFILES_FINDERS\"><code class=\"xref std std-setting docutils literal notranslate\">STATICFILES_FINDERS</code></a> mengandung daftar dari penemu yang mengetahui bagaimana menemukan berkas statis dari beragam sumber. Satu dari awalnya adalah <code class=\"docutils literal notranslate\">AppDirectoriesFinder</code> yang mencari subdirektori &quot;statis&quot; di setiap dari <a class=\"reference internal\" href=\"/id/3.1/ref/settings/#std-setting-INSTALLED_APPS\"><code class=\"xref std std-setting docutils literal notranslate\">INSTALLED_APPS</code></a>, seperti satu di <code class=\"docutils literal notranslate\">polls</code> kami telah buat. Situs admin menggunakan struktur direktori sama untuk berkas statis nya.</p>\n<p>Dalam direktori <code class=\"docutils literal notranslate\">static</code> anda telah buat, buat direktori lain dipanggil <code class=\"docutils literal notranslate\">polls</code> dan dalam itu buat sebuah berkas dipanggil <code class=\"docutils literal notranslate\">style.css</code>. Dengan kata lain, gaya kertas anda harus di <code class=\"docutils literal notranslate\">polls/static/polls/style.css</code>. karena bagaimana pencari berkas statis <code class=\"docutils literal notranslate\">AppDirectoriesFinder</code> bekerja, anda dapat mengacu ke berkas statis ini dalam Django sebagai <code class=\"docutils literal notranslate\">polls/style.css</code>, mirip bgaimana anda mengacukan jalur untuk cetakan.</p>\n<aside class=\"admonition-static-file-namespacing admonition\" role=\"note\">\n<p class=\"admonition-title\">Namespacing berkas statis</p>\n<p>Sama seperti cetakan, kita * mungkin * bisa lolos dengan meletakkan file statis kita secara langsung dalam <code class=\"docutils literal notranslate\">polls/static</code> (daripada membuat subdirektori <code class=\"docutils literal notranslate\">polls</code> lain), tetapi itu sebenarnya adalah ide buruk. Django akan memmilih berkas statis pertama dia temukan yang namanya cocok, dan jika anda memiliki berkas statis dengan nama sama dalam aplikasi <em>berbeda</em>, Django tidak dapat membedakan diantara mereka. Kami butuh dapat menunjuk Django pada satu yang benar, dan cara terbaik untuk memastikan ini adalah dengan <em>namespace</em>. Yaitu, dengan menaruh berkas-berkas statis itu didalam direktori <em>lain</em> dinamai untuk aplikasi itu sendiri.</p>\n</aside>\n<p>Taruh kode berikut di stylesheet itu (<code class=\"docutils literal notranslate\">polls/static/polls/style.css</code>):</p>\n<figure class=\"code-block code-block-captioned\" data-language=\"css\"><figcaption class=\"code-block-caption\">polls/static/polls/style.css</figcaption>\n<div class=\"code-block-toolbar\"><span class=\"code-block-language\">Css</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Css code\"><code><span class=\"nt\">li</span> <span class=\"nt\">a</span> <span class=\"p\">{</span>\n    <span class=\"k\">color</span><span class=\"p\">:</span> <span class=\"kc\">green</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></figure>\n<p>Selanjutnya, tambahkan berikut pada atas <code class=\"docutils literal notranslate\">polls/templates/polls/index.html</code>:</p>\n<figure class=\"code-block code-block-captioned\" data-language=\"html+django\"><figcaption class=\"code-block-caption\">polls/templates/polls/index.html</figcaption>\n<div class=\"code-block-toolbar\"><span class=\"code-block-language\">Django template</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Django template code\"><code><span class=\"cp\">{%</span> <span class=\"k\">load</span> <span class=\"nv\">static</span> <span class=\"cp\">%}</span>\n\n<span class=\"p\">&lt;</span><span class=\"nt\">link</span> <span class=\"na\">rel</span><span class=\"o\">=</span><span class=\"s\">&quot;stylesheet&quot;</span> <span class=\"na\">type</span><span class=\"o\">=</span><span class=\"s\">&quot;text/css&quot;</span> <span class=\"na\">href</span><span class=\"o\">=</span><span class=\"s\">&quot;</span><span class=\"cp\">{%</span> <span class=\"k\">static</span> <span class=\"s1\">&#39;polls/style.css&#39;</span> <span class=\"cp\">%}</span><span class=\"s\">&quot;</span><span class=\"p\">&gt;</span>\n</code></pre></figure>\n<p>Etiket cetakan <code class=\"docutils literal notranslate\">{% static %}</code> membagnkitkan URL mutlak dari berkas-berkas tetap.</p>\n<p>Itu semua yang anda butuhkan untuk pengembangan.</p>\n<p>Mulai peladen (atau mulai kembali jika sudah berjalan):</p>\n<div class=\"console\" data-console><div class=\"console-panel\" data-platform=\"unix\"><p class=\"console-label\" id=\"console-0-unix-label\">Linux / macOS</p><div class=\"code-block\" data-language=\"console\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Shell</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Shell code\"><code><span class=\"gp\">$ </span>python manage.py runserver\n</code></pre></div>\n</div><div class=\"console-panel\" data-platform=\"windows\"><p class=\"console-label\" id=\"console-0-windows-label\">Windows</p><div class=\"code-block\" data-language=\"doscon\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Windows</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Windows shell\"><code><span class=\"gp\">...\\&gt;</span> py manage.py runserver\n</code></pre></div></div></div>\n<p>Memuat kembali <code class=\"docutils literal notranslate\">http://localhost:8000/polls/</code> dan anda harus melihat bahwa tautan pertanyaan adalah hijau (gaya Django!) yang berarti bahwa lembar gaya anda dengan benar dimuat.</p>\n</section>\n<section id=\"adding-a-background-image\">\n<h2>Menambahkan gambar-latar belakang<a class=\"heading-anchor\" href=\"#adding-a-background-image\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>Selanjutnya, kami akan membuat subdirektori untuk gambar. Buat sebuah sibdirektori <code class=\"docutils literal notranslate\">images</code> di direktori <code class=\"docutils literal notranslate\">polls/static/polls/</code>. Didalam direktori ini, taruh sebuah gambar dipanggil <code class=\"docutils literal notranslate\">background.gif</code>. Dengan kata lain, taruh gambar anda di <code class=\"docutils literal notranslate\">polls/static/polls/images/background.gif</code>.</p>\n<p>Lalu, tambahkan ke stylesheet anda (<code class=\"docutils literal notranslate\">polls/static/polls/style.css</code>):</p>\n<figure class=\"code-block code-block-captioned\" data-language=\"css\"><figcaption class=\"code-block-caption\">polls/static/polls/style.css</figcaption>\n<div class=\"code-block-toolbar\"><span class=\"code-block-language\">Css</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Css code\"><code><span class=\"nt\">body</span> <span class=\"p\">{</span>\n    <span class=\"k\">background</span><span class=\"p\">:</span> <span class=\"kc\">white</span> <span class=\"nb\">url</span><span class=\"p\">(</span><span class=\"s2\">&quot;images/background.gif&quot;</span><span class=\"p\">)</span> <span class=\"kc\">no-repeat</span><span class=\"p\">;</span>\n<span class=\"p\">}</span>\n</code></pre></figure>\n<p>Muat kembali <code class=\"docutils literal notranslate\">http://localhost:8000/polls/</code> dan anda harus melihat latar belakang dimuat di kiri atas dari layar.</p>\n<aside class=\"admonition admonition-warning\" role=\"note\">\n<p class=\"admonition-title\">Peringatan</p>\n<p>The <code class=\"docutils literal notranslate\">{% static %}</code> template tag is not available for use in static files\nwhich aren't generated by Django, like your stylesheet. You should always\nuse <strong>relative paths</strong> to link your static files between each other,\nbecause then you can change <a class=\"reference internal\" href=\"/id/3.1/ref/settings/#std-setting-STATIC_URL\"><code class=\"xref std std-setting docutils literal notranslate\">STATIC_URL</code></a> (used by the\n<a class=\"reference internal\" href=\"/id/3.1/ref/templates/builtins/#std-templatetag-static\"><code class=\"xref std std-ttag docutils literal notranslate\">static</code></a> template tag to generate its URLs) without having to modify\na bunch of paths in your static files as well.</p>\n</aside>\n<p>Ini adalah <strong>dasar</strong>. Untuk lebih rinci di pengaturan dan lainnya disertakan dengan kerangka lihat <a class=\"reference internal\" href=\"/id/3.1/howto/static-files/\"><span class=\"doc\">bagaimana berkas statis</span></a> dan <a class=\"reference internal\" href=\"/id/3.1/ref/contrib/staticfiles/\"><span class=\"doc\">acuan berkas statis</span></a>. <a class=\"reference internal\" href=\"/id/3.1/howto/static-files/deployment/\"><span class=\"doc\">Menyebarkan berkas statis</span></a> mengobrolkan bagaimana menggunakan berkas statis di peladen sebenarnya.</p>\n<p>Ketika anda nyaman dengan berkas statis, baca <a class=\"reference internal\" href=\"/id/3.1/intro/tutorial07/\"><span class=\"doc\">bagian 7 dari tutorial ini</span></a> untuk belajar bagaimana menyesuaikan pembangkitan-otomatis Django situs admin.</p>\n</section>","rootId":"writing-your-first-django-app-part-6","toc":[{"title":"Sesuaikan aplikasi anda penampilan dan perasaan","anchor":"customize-your-app-s-look-and-feel","children":[]},{"title":"Menambahkan gambar-latar belakang","anchor":"adding-a-background-image","children":[]}],"breadcrumbs":[{"docname":"intro/index","title":"Mulai","url":"/id/3.1/intro/"}],"prev":{"docname":"intro/tutorial05","title":"Menulis aplikasi Django pertama anda, bagian 5","url":"/id/3.1/intro/tutorial05/"},"next":{"docname":"intro/tutorial07","title":"Menulis aplikasi Django kedua anda, bagian 7","url":"/id/3.1/intro/tutorial07/"},"formats":{"html":"/id/3.1/intro/tutorial06/","markdown":"/id/3.1/intro/tutorial06.md","json":"/id/3.1/intro/tutorial06.json"},"source":"https://github.com/django/django/blob/stable/3.1.x/docs/intro/tutorial06.txt","official":"https://docs.djangoproject.com/id/3.1/intro/tutorial06/","inVersions":["6.1","6.0","5.2","5.1","5.0","4.2","4.1","4.0","3.2","3.1","3.0","2.2","2.1","2.0","1.11","1.10","1.9"],"inLocales":["en","zh-hans","fr","ja","id","pt-br","ko","es","el","pl"]}