Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org
 |  |  | 
Anda ingin membuat website?
Untuk Anda yang sedang mencari orang untuk jasa pembuatan website, Saya akan bantu buatkan aplikasi sesuai kebutuhan Anda. Segera hubungi : mail@rizaldimaulidia.com. Selengkapnya tentang profil saya klik www.rizaldimaulidia.com.

PHP Tips and Trick

Cara Membuat 1 File Template untuk Semua Tampilan dengan PHP

<span>Rizaldi Maulidia Achmad</span>Rizaldi Maulidia Achmad
 |  Apr 26, 2018
img-responsive
Sebelum kita masuk ke tutorial untuk membuatnya. Saya mau tanya dulu, apakah Anda mengerti dengan judul tutorial ini? dalam tutorial ini saya akan menjelaskan bagaimana cara membuat 1 file template yang bisa digunakan untuk semua tampilan sehingga akan lebih efisien dan efektif ketika ada perubahan pada template. Mengerti maksudnya? saya beri sebuah contoh, misalnya saya mempunyai sebuah website yang didalamnya mempunyai tampilan untuk Home, Berita, dan Galeri. Nah, apabila kita tidak membuat 1 file template untuk semua tampilan, otomatis ketika misalnya kita ingin menambahkan menu Kontak berarti kita harus mengubah semua file tampilan home, berita, dan juga galeri. Pada kasus ini masih bisa kita atasi apabila ada perubahan template karena file tampilannya juga cuma sedikit. Bagaiman kalau kita membuat website dengan banyak tampilan bukan hanya 3 tampilan, Pasti akan merepotkan ketika ada perubahan template. Kita harus satu per satu merubah semua tampilan.
Maka dari itu sekarang saya akan coba share bagaimana untuk mengatasi kasus diatas agar memudahkan kita jika pada saat develop ada perubahan pada template website kita. Tutorial ini sebelumnya pernah saya buat tapi dengan menggunakan Framework Codeigniter yang bisa Anda lihat disini. Untuk tutorial ini kita akan buat tanpa framework alias menggunakan PHP murni (native).

STEP 1 – PERSIAPAN
Pada step awal ini kita akan coba mempersiapkan beberapa hal sebagai berikut :

  1. Buat sebuah folder dengan nama template_php, lalu simpan pada folder xampp/htdocs/.
  2. Buat sebuah folder dengan nama views, lalu simpan pada folder xampp/htdocs/template_php/.
Baca Juga:
STEP 2 – BUAT TEMPLATE
Pada step pertama ini, kita akan coba membuat file templatenya terlebih dahulu. Silahkan buat sebuah file dengan nama index.php, lalu simpan pada folder  xampp/htdocs/template_php/. Berikut ini kodenya :
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>My Site</title>
  7. <style type="text/css">
  8. #header{
  9. background: black;
  10. padding: 2px;
  11. }
  12. #header ul > li{
  13. display: inline;
  14. list-style-type: none;
  15. padding-right: 10px;
  16. }
  17. #header li a{
  18. color: white;
  19. text-decoration: none;
  20. padding: 5px;
  21. }
  22. #header li > a:hover{
  23. background: white;
  24. color: black;
  25. }
  26. #content{
  27. background: #EBEBEB;
  28. min-height: 450px;
  29. padding: 10px;
  30. }
  31. #footer{
  32. background: black;
  33. padding: 5px;
  34. color: white;
  35. text-align: center;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <div id="header">
  41. <ul>
  42. <li style="color: white;font-size: 25px;font-weight: bold">My Site &raquo;</li>
  43. <li><a href="index.php?page=home">Home</a></li>
  44. <li><a href="index.php?page=berita">Berita</a></li>
  45. <li><a href="index.php?page=tentang">Tentang Kami</a></li>
  46. </ul>
  47. </div>
  49. <div id="content">
  50. <?php include "config.php"; // Load file config.php ?>
  51. </div>
  53. <div id="footer">
  54. Copyright &copy; My Notes Code
  55. </div>
  56. </body>
  57. </html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Site</title>

  <style type="text/css">
  #header{
    background: black;
    padding: 2px;
  }
  #header ul > li{
    display: inline;
    list-style-type: none;
    padding-right: 10px;
  }
  #header li a{
    color: white;
    text-decoration: none;
    padding: 5px;
  }
  #header li > a:hover{
    background: white;
    color: black;
  }
  #content{
    background: #EBEBEB;
    min-height: 450px;
    padding: 10px;
  }
  #footer{
    background: black;
    padding: 5px;
    color: white;
    text-align: center;
  }
  </style>
</head>
<body>
  <div id="header">
    <ul>
      <li style="color: white;font-size: 25px;font-weight: bold">My Site &raquo;</li>
      <li><a href="index.php?page=home">Home</a></li>
      <li><a href="index.php?page=berita">Berita</a></li>
      <li><a href="index.php?page=tentang">Tentang Kami</a></li>
    </ul>
  </div>
  
  <div id="content">
    <?php include "config.php"; // Load file config.php ?>
  </div>
  
  <div id="footer">
    Copyright &copy; My Notes Code
  </div>
</body>
</html>
<?php include “config.php”; // Load file config.php ?>
Kode ini berfungsi untuk men-load sebuah file php lain ke dalam file index.php yang kita buat. Nanti akan kita buat juga file config.php tersebut dan akan saya jelaskan apa isinya.
STEP 3 – BUAT TAMPILAN (CONTENT WEBSITE)
Pada step ini kita akan membuat content/tampilan untuk websitenya. Pada catatan ini, saya membuat 3 tampilan yaitu home (home.php), berita (berita.php), dan tentang kami (tentang.php). Simpan ketiga file tampilan tersebut pada folder xampp/htdocs/template_php/views/. Berikut ini kode dari masing-masing tampilan :
home.php
  1. <h3 style="margin: 0;">Halaman Home</h3><br>
  2. Welcome to My Site, Enjoy your day <img draggable="false" class="emoji" alt="😀" src="https://s.w.org/images/core/emoji/2.2.1/svg/1f600.svg">
<h3 style="margin: 0;">Halaman Home</h3><br>
Welcome to My Site, Enjoy your day <img draggable="false" class="emoji" alt="😀" src="https://s.w.org/images/core/emoji/2.2.1/svg/1f600.svg">

berita.php

  1. <h3 style="margin: 0;">Halaman Berita</h3><br>
  3. <div style="text-align: justify;">
  4. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
  5. <a href="#">Readmore &raquo;</a>
  6. </div><hr>
  8. <div style="text-align: justify;">
  9. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
  10. <a href="#">Readmore &raquo;</a>
  11. </div><hr>
  13. <div style="text-align: justify;">
  14. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
  15. <a href="#">Readmore &raquo;</a>
  16. </div><hr>
<h3 style="margin: 0;">Halaman Berita</h3><br>

<div style="text-align: justify;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
<a href="#">Readmore &raquo;</a>
</div><hr>

<div style="text-align: justify;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
<a href="#">Readmore &raquo;</a>
</div><hr>

<div style="text-align: justify;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
<a href="#">Readmore &raquo;</a>
</div><hr>

tentang.php

  1. <h3 style="margin: 0;">Halaman Tentang Kami</h3><br>
  2. My Site<br>
  3. Telepon : 022-0123456<br>
  4. Jl.Jend. Gatot Subroto No.123 Bandung
<h3 style="margin: 0;">Halaman Tentang Kami</h3><br>
My Site<br>
Telepon : 022-0123456<br>
Jl.Jend. Gatot Subroto No.123 Bandung

STEP 4 – BUAT CONFIG
Ini merupakan tahap paling penting pada tutorial ini, karena kita akan coba membuat file config, dimana file inilah yang nantinya akan mengatur halaman apa yang harus di tampilkan. Silahkan buat sebuah file config.php, lalu simpan pada folder xampp/htdocs/template_php/. Berikut adalah kodenya :

  1. <?php
  2. $page = (isset($_GET['page']))? $_GET['page'] : '';
  4. switch($page){
  5. case 'home': // $page == home (jika isi dari $page adalah home)
  6. include "views/home.php"; // load file home.php yang ada di folder views
  7. break;
  9. case 'berita': // $page == berita (jika isi dari $page adalah berita)
  10. include "views/berita.php"; // load file berita.php yang ada di folder views
  11. break;
  13. case 'tentang': // $page == tentang (jika isi dari $page adalah tentang)
  14. include "views/tentang.php"; // load file tentang.php yang ada di folder views
  15. break;
  17. // case 'case_selanjutnya':
  18. // include "views/case_selanjutnya.php";
  19. // break;
  21. // case 'case_selanjutnya':
  22. // include "views/case_selanjutnya.php";
  23. // break;
  25. // case 'case_selanjutnya':
  26. // include "views/case_selanjutnya.php";
  27. // break;
  29. default: // Ini untuk set default jika isi dari $page tidak ada pada 3 kondisi diatas
  30. include "views/home.php";
  31. }
  32. ?>
<?php
$page = (isset($_GET['page']))? $_GET['page'] : '';

switch($page){
  case 'home': // $page == home (jika isi dari $page adalah home)
  include "views/home.php"; // load file home.php yang ada di folder views
  break;
  
  case 'berita': // $page == berita (jika isi dari $page adalah berita)
  include "views/berita.php"; // load file berita.php yang ada di folder views
  break;
  
  case 'tentang': // $page == tentang (jika isi dari $page adalah tentang)
  include "views/tentang.php"; // load file tentang.php yang ada di folder views
  break;
  
  // case 'case_selanjutnya':
  // include "views/case_selanjutnya.php";
  // break;
  
  // case 'case_selanjutnya':
  // include "views/case_selanjutnya.php";
  // break;
  
  // case 'case_selanjutnya':
  // include "views/case_selanjutnya.php";
  // break;
  
  default: // Ini untuk set default jika isi dari $page tidak ada pada 3 kondisi diatas
  include "views/home.php";
}
?>

$page = (isset($_GET[‘page’]))? $_GET[‘page’] : ”;
Pada kode ini terdapat fungsi isset(). Fungsi ini digunakan untuk mengecek apakah elemen yang kita cari ada atau tidak. Dalam kode tersebut, kita melakukan pengecekan terhadap $_GET[‘page’]. jadi disini kita cek apakah ada data yang dikirim dengan method get (di url) dengan nama parameternya “page”. Nah jika ada, maka kita ambil value dari data page  tersebut dan kita set ke variabel $page. Jika tidak ada, maka kita set variabel $page dengan kosong.

Baca Juga:

Masih bingung soal $_GET[‘page’] itu dari mana? oke coba lihat gambar dibawah ini. Pada gambar dibawah saya beri panah, disitu ada tulisan …..index.php?page=berita. $_GET[‘page’] tadi berfungsi untuk mengambil value “berita” yang ada di URL yang saya beri panah.

Page - Cara Membuat 1 File Template untuk Semua Tampilan dengan PHP

Disini kita juga menggunakan switch….case….., Sebenarnya ada opsi lain yaitu dengan menggunakan if…else…, kenapa saya akhirya lebih memilih switch… case… ? karena tentunya kondisi yang akan kita buat pasti banyak kan? secara halaman yang nantinya akan kita buat bukan cuman 3 atau 5 halaman saja kan? tentunya dalam sebuah website apalagi website aplikasi yang kompleks pasti akan memiliki banyak halaman. Maka dari itu saya lebih memilih untuk menggunakan switch…case..

Mungkin sekian untuk catatan kali ini. Semoga bisa bermanfaat. Jika ada yang kurang dipahami, langsung tanyakan pada form komentar dibawah ini. Jangan lupa LIKE dan SHARE nya, Terimakasih banyak.

Happy Coding ^_^

SOURCE CODE
Untuk mengunduh source code nya, klik link berikut ini : Download.

Membuat Export Data ke Excel tanpa plugin dengan codeigniter, Membuat Export Data ke Excel tanpa plugin dengan codeigniter 3, membuat laporan excel tanpa plugin dengan codeigniter, cara mudah membuat laporan excel tanpa plugin dengan framework codeigniter 3

Template

(Total : 27,898 viewers, 1 viewers today)

Catatan Lainnya

Tags
1-file-template-untuk-semua-tampilan-php

ABOUT THE AUTHOR

Interested in android programming, long time focused on web development. Visit My Profile Site at www.rizaldimaulidia.com

POST YOUR COMMENTS TO prozoila (Cancel)

Your email address will not be published. Required fields are marked *

Name *

Email *

Website

10 Comments

  1. Eka Arisanti

    Apr 22, 2021
    Reply

    Kok aku coba. Pas ku cek not found ya kak?

  2. LaCobrote

    Jan 3, 2020
    Reply

    gan.. kalau semisal saya punya script seperti ini:

    <?php
    if(isset($_GET['page'])){
    $page = $_GET['page'];

    switch ($page) {
    case 'ubah_berita':
    include "input/ubah_berita.php";
    break;
    default:
    echo "Maaf. Halaman tidak di temukan !”;
    break;
    }
    }else{
    include “home.php”;
    }

    untuk memanggil case tersebut
    index.php?page=edit_berita1″.$row[‘id_berita’].”

    nah untuk memanggil case tersebut agar bisa ditambah code “id_berita=” itu caranya gimana? saya coba seperti diatas itu tidak bisa.
    kan nggak munkin jika saya menambahkan case nya sampai ratusan wkwk 😀

    • Rizaldi Maulidia Achmad

      Jan 6, 2020
      Reply

      pakai simbol & om untuk menambah parameter lainnya. seperti ini jadinya :
      index.php?page=edit_berita1&id_berita=".$row['id_berita']."

      Di file confignya, case nya ga perlu di ubah-ubah lagi

  3. Tomi Nurhidayat

    Oct 11, 2019
    Reply

    Yang bikin saya bingung gmna cara masukin jdi template blog kita gan, pas mau d upload kode XML tidak sesuai

  4. prozoila

    Sep 8, 2019
    Reply

    saya nemu yang penulisannya begini mas

    namun, saya kebinggungan jika file yang ingin dibuka berada dalam subfolder lain…
    untuk kasus di atas, file yang ingin dibuka berada dalam folder utama atau sejajar dengan file index.php…
    bisa dibantu mengatasinya mas jika file yang ingin dituju berada dalam subfolder (subfolder sejajar dengan file index.php) ?

    • prozoila

      Sep 8, 2019
      Reply

  5. pemula_php

    Mar 1, 2019
    Reply

    mantap bang tutorialnya…sangat membantu untuk belajar php

NOTE CATEGORIES

NOTE ARCHIVES

DMCA.com Protection Status
Apabila Anda ingin meng-copy Tutorial yang ada di blog ini dan mem-publish nya kembali di blog Anda sendiri, Harap untuk Mencantumkan Link Sumber dari blog ini. Terimakasih atas kerjasamanya.
Happy Coding ^_^
Berapapun yang Anda berikan saya akan sangat berterimakasih atas donasinya. Sebagian dari donasi yang diberikan akan saya gunakan untuk biaya Hosting dan Domain blog ini. Terimakaih banyak.
Bank : BNI
No. Rekening : 1183861372
Atas Nama : Rizaldi Maulidia Achmad
------------------------------
Donasi ini tidak wajib.
Klik link berikut untuk melihat rincian donasi yang sudah masuk ke rekening kami : Rincian Donasi
My Notes Code - The Notes of Programmer
My Notes Code
The Notes of Programmer
 

NOTE ARCHIVES