{"id":75,"date":"2006-11-22T14:50:11","date_gmt":"2006-11-22T14:50:11","guid":{"rendered":"http:\/\/www.rumahweb.com\/journal\/web-template-tanpa-table-php-javascript-dan-css-bagian-3.htm"},"modified":"2022-07-08T14:44:04","modified_gmt":"2022-07-08T07:44:04","slug":"cara-membuat-web-template-tanpa-table-bagian-3","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/cara-membuat-web-template-tanpa-table-bagian-3\/","title":{"rendered":"Cara Membuat Web Template Tanpa Table &#8211; Bagian 3"},"content":{"rendered":"\n<p>Setelah di <a href=\"https:\/\/www.rumahweb.com\/journal\/cara-membuat-web-template-tanpa-table-bagian-2\/\" title=\"\">bagian ke 2<\/a> kita belajar membuat file HTML dan CSS sederhana, pada panduan ini kami akan melanjutkan cara membuat web template tanpa table yaitu pada pengaturan layout dan mengisi content. <\/p>\n\n\n\n\n\n<p>Pastikan Anda sudah membuat file HTML dan CSS, sesuai dengan artikel bagian ke 2. Sebelumnya, kita sudah menyinggung bahwa pada web template yang kita buat terdapat kode yang diawali dengan # dan diakhir dengan #. Tanda ini dijadikan penunjuk kepada engine bahwa #&#8230;# akan diganti dengan content tertentu.<\/p>\n\n\n\n<p>Terdapat beberapa tanda #&#8230;.#, yaitu:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>#JUDUL_WEBSITE#, ini akan kita ganti dengan judul website.<\/li><li>#BLOCK_KIRI#, akan diganti dengan content untuk blok sebelah kiri, misalnya menu dan lain sebagainya.<\/li><li>#CONTENT#, akan diganti dengan content utama.<\/li><li>#BLOCK_KANAN#, akan diganti dengan content untuk blok sebelah kanan.<\/li><\/ul>\n\n\n\n<p>Kita tidak akan menggunakan database untuk menyimpan informasi letak content, melainkan dengan menyimpan content pada folder tertentu sebagai penggantinya. Misalnya content yang akan ditampilkan di blok kiri akan disimpan di folder kiri, content utama disimpan dalam folder content, dan content blok kanan disimpan dalam folder kanan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Membuat Script PHP<\/h2>\n\n\n\n<p>Kita tentukan dulu content apa saja yang akan ditampilkan, misalnya:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Blok Kiri<\/strong>, nama folder kiri:<\/li><li>Menu Vertikal, dengan nama file menu-vertikal.php<\/li><li>Kotak Weblogin, dengan nama file kotak-weblogin.php<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Content<\/strong>, nama folder content:<\/li><li>Home, dengan nama file home.php<\/li><li>Berita Terbaru, dengan nama file berita-terbaru.php<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Blok Kanan<\/strong>, nama folder kanan:<\/li><li>Polling, dengan nama file polling.php<\/li><li>ShoutBox, dengan nama file shoutbox.php<\/li><\/ul>\n\n\n\n<p>Berikut ini kode program masing-masing file PHP:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Script Blok Kiri<\/h3>\n\n\n\n<p>Buatlah sebuah file dengan nama menu-vertikal.php dan simpan dalam folder kiri atau lokasinya seperti : kiri\/menu-vertikal.php<\/p>\n\n\n\n<p>Lalu isi file menu-vertikal.php dengan script berikut:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n&lt;ul>\n \t&lt;li>&lt;a>Menu 1&lt;\/a>&lt;\/li>\n \t&lt;li>&lt;a>Menu 2&lt;\/a>&lt;\/li>\n \t&lt;li>&lt;a>Menu 3&lt;\/a>&lt;\/li>\n&lt;\/ul>\n';\n?><\/code><\/pre>\n\n\n<p>[php]<\/p>\n<ul>\n<li><a>Menu 1<\/a><\/li>\n<li><a>Menu 2<\/a><\/li>\n<li><a>Menu 3<\/a><\/li>\n<\/ul>\n<p>&#8216;;<br \/>\n?>;<br \/>\n[\/php]<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>kiri\/kotak-weblogin.php<\/p>\n\n\n<p>[php]<\/p>\n<div align=\"center\">WEBLOGIN<\/div>\n<p>Username Password<\/p>\n<p>&#8216;;<br \/>\n?&gt;<br \/>\n[\/php]<\/p>\n\n\n\n<p>content\/home.php<\/p>\n\n\n<p>[php]<br \/>\nSelamat datang di Web Saya<br \/>\nSilakan melihat-lihat dan ambil apa yang bisa diambil dengan suka cita, kami menyediakan free stuff, dan dengan girang hati kami sediakan untuk anda dengan percuma.<br \/>\n&#8216;;<br \/>\n?&gt;<br \/>\n[\/php]<\/p>\n\n\n\n<p>content\/berita-terbaru.php<\/p>\n\n\n<p>[php]<br \/>\nBerita 1<br \/>\nDisini berita 1, isinya bermacam-macam berita jadi satu, silakan baca. Mari, mari, kita baca.<\/p>\n<hr noshade=\"noshade\" \/>\n<h3>Berita 2<\/h3>\n<p>Disini berita 2, apapun isinya tidak duanya ditempat lain. Baiklah silakan menikmati berita dari kami.<br \/>\n&#8216;;<br \/>\n?&gt;<br \/>\n[\/php]<\/p>\n\n\n\n<p>kanan\/polling.php<\/p>\n\n\n<p>[php]<br \/>\nWeb siapa paling keren?<br \/>\nPilih jawaban kamu, web siapa paling keren?<\/p>\n<ul>\n<li>Sangat Setuju<\/li>\n<li>Setuju<\/li>\n<li>Ragu-ragu<\/li>\n<li>Tidak Setuju<\/li>\n<li>Sangat Tidak Setuju<\/li>\n<\/ul>\n<p>&#8216;;<br \/>\n?&gt;<br \/>\n[\/php]<\/p>\n\n\n\n<p>kanan\/shoutbox.php<\/p>\n\n\n<p>[php]<\/p>\n<div align=\"center\">\n<h3>ShoutBox<\/h3>\n<\/div>\n<p>Nama Url \/ Email Pesan <textarea cols=\"15\" name=\"textarea\"><\/textarea><\/p>\n<p align=\"center\"><a>Joko<\/a>: Keren yah webnya, ajarin dunkz? [12-11-06 | 18:50]<br \/>\n<a>Siska<\/a>: Hmmm, lam kenal aja deh &#8230;\u00c2\u00a0 [11-11-06 | 08:30]<\/p>\n<p>&#8216;;<br \/>\n?&gt;<br \/>\n[\/php]<\/p>\n\n\n\n<p>Kode program diatas hanyalah contoh, jadi tidak aplikatif.<\/p>\n\n\n\n<p>Bersambung.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Setelah di bagian ke 2 kita belajar membuat file HTML dan CSS sederhana, pada panduan ini kami akan melanjutkan cara membuat web template tanpa table yaitu pada pengaturan layout dan mengisi content. Pastikan Anda sudah membuat file HTML dan CSS, sesuai dengan artikel bagian ke 2. Sebelumnya, kita sudah menyinggung bahwa pada web template yang [&hellip;]<\/p>\n","protected":false},"author":57,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[],"class_list":{"0":"post-75","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-news"},"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p8n3G7-1d","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/75","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/57"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=75"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/75\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=75"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=75"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=75"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}