Beranda  ›  OOT

Cara Membuat Halaman Admin Website Dinamis 2024

Ditulis Sabtu, 06 April 2024
Cara Membuat Halaman Admin Website Dinamis
Cara Membuat Halaman Admin Website Dinamis - Keberadaan website memang memberikan banyak sekali keuntungan bagi penggunanya dan saat ini banyak sekali website yang ada di internet.

Masing-masing website ada yang bisa diakses dan digunakan secara gratis, namun ada juga yang menyediakan paket langganan atau berbayar guys.

Salah satu website yang disukan dalam website dengan halaman yang dinamis guys dan biasanya digunakan oleh para admin website itu sendiri.

Halaman website yang bersifat dinamis saat ini sangat berguna, karena bisa menghemat waktu dan tenaga jika dimanfaatkan untuk menyelesaikan beragam keperluan.

Beberapa keperluan tersebut misalnya mengedit sebuah halaman, tanpa harus mengubah semua isi halamannya dan keperluan lainnya.

Menariknya, halaman website admin dinamis tersebut bisa dibuat sendiri loh guys, sehingga tidak perlu menyewa jasa pembuat website.

Pasti penaran kan bagaimana caranya? Untuk menjawab rasa penasaran tersebut, yuk langsung saja simak ulasan berikut ini tentang cara membuat halaman admin website dinamis.


Cara Membuat Halaman Admin Website Dinamis


1. Cara Membuat Halaman Admin Website Dinamis dengan PHP

Cara Membuat Halaman Admin Website Dinamis
Cara Membuat Halaman Admin Website Dinamis dengan PHP
Anda bisa memanfaatkan PHP untuk membuat halaman admin website dinamis, karena sangat mudah digunakan walapun harus menggunakan banyak script.

Sedangkan cara membuat halaman admin website dinamis dengan PHP sebagai berikut:

Untuk langkah pertama, buatlah sebuah project di localhost dan disini kami membuatnya dengan nama "dinamis_php" dengan format C:/xampp/htdocs/dinamis_php

Setelah itu, buatlah sebuah file dengan nama index.php menggunakan script di bawah ini:
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <title>Membuat Halaman Web Dinamis Dengan PHP | www.malasngoding.com</title>
    5. <!-- menghubungkan dengan file css -->
    6. <link rel="stylesheet" type="text/css" href="style.css">
    7. <!-- menghubungkan dengan file jquery -->
    8. <script type="text/javascript" src="jquery.js"></script>
    9. </head>
    10. <body>
    11. <!--
    12. Author : diki alfarabi hadi
    13. Site : www.malasngoding.com
    14. -->
    15. <div class="content">
    16. <header>
    17. <h1 class="judul">WWW.MALASNGODING.COM</h1>
    18. <h3 class="deskripsi">Membuat Halaman Web Dinamis Dengan PHP</h3>
    19. </header>

    21. <div class="menu">
    22. <ul>
    23. <li><a href="index.php?page=home">HOME</a></li>
    24. <li><a href="index.php?page=tentang">TENTANG</a></li>
    25. <li><a href="index.php?page=tutorial">TUTORIAL</a></li>
    26. </ul>
    27. </div>

    29. <div class="badan">


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

    36. switch ($page) {
    37. case 'home':
    38. include "halaman/home.php";
    39. break;
    40. case 'tentang':
    41. include "halaman/tentang.php";
    42. break;
    43. case 'tutorial':
    44. include "halaman/tutorial.php";
    45. break;
    46. default:
    47. echo "<center><h3>Maaf. Halaman tidak di temukan !</h3></center>";
    48. break;
    49. }
    50. }else{
    51. include "halaman/home.php";
    52. }

    54. ?>

    56. </div>
    57. </div>
    58. </body>
    59. </html>
  • Selanjutnya, agar tampilannya lebih rapi dan menarik, buatlah file cssnya menggunakan script di bawah ini:
    1. body{
    2. background-color:#f9f9f9;
    3. font-size:16px
    4. color:#444;
    5. font-family: sans-serif;
    6. }

    8. .content{
    9. width: 80%;
    10. margin: 10px auto;
    11. }

    13. /*header*/
    14. header{
    15. background-color: white;
    16. padding: 20px 10px;
    17. border-radius: 5px;
    18. border: 1px solid #f0f0f0;
    19. margin-bottom: 10px;
    20. }

    22. header h1.judul,
    23. header h3.deskripsi{
    24. text-align: center;
    25. }

    27. /*menu navigasi*/
    28. .menu{
    29. background-color: #87CEFA;
    30. border: 1px solid #f0f0f0;
    31. border-radius: 8px;
    32. margin-bottom: 10px;
    33. }

    35. div.menu ul {
    36. list-style:none;
    37. overflow: hidden;
    38. }


    41. div.menu ul li {
    42. float:left;
    43. text-transform:uppercase;
    44. }

    46. div.menu ul li a {
    47. display:block;
    48. padding:0 20px;
    49. text-decoration:none;
    50. color:#2c2c2c;
    51. font-family: sans-serif;
    52. font-size:13px;
    53. font-weight:400;
    54. transition:all 0.3s ease-in-out;
    55. }

    57. div.menu ul li a:hover,
    58. div.menu ul li a.hoverover {
    59. cursor: pointer;
    60. color:#fff;
    61. }


    64. div.badan{
    65. background-color: white;
    66. border-radius: 5px;
    67. border: 1px solid #f0f0f0;
    68. margin-bottom: 10px;
    69. }

    71. div.halaman{
    72. text-align: center;
    73. padding: 30px 20px;
    74. }
  • Pada tahap ini, Anda sudah selesai membuat kerangka dari halaman web dinamis yang akan dibuat.
  • Kemudian Anda tinggal membuat sebuah folder yang bernama "halaman" dan letakkan lah halaman-halaman yang akan dibuat, diantaranya:
  • home.php:
    1. <div class="halaman">
    2. <h2>Halaman Depan</h2>
    3. <p>Selamat datang di www.malasngoding.com. ini merupakan halaman depan pada demo cara Membuat Halaman Web Dinamis Dengan PHP</p>
    4. </div>
  • tentang.php:
    1. <div class="halaman">
    2. <h2>Tentang Kami</h2>
    3. <p>Ini adalah halaman tentang kami</p>
    4. <p>Malasngoding.com adalah situs yang menyediakan konten-konten berkualitas untuk belajar pemrograman web</p>
    5. </div>
  • tutorial.php
    1. <div class="halaman">
    2. <h2>Halaman Tutorial</h2>
    3. <p>Ini adalah halaman tutorial</p>
    4. </div>
  • Selesai dan Anda bisa melihat hasil dari halaman dinamis yang sudah dibuat dengan php dan silahkan akses project dinamis_php tersebut melalui browser "localhost/dinamis_php, hasilnya akan langsung ditampilkan.
  • Anda bisa klik menu Tentang atau Tutorial dan cobalah untuk mengubah halaman URL nya menjadi "localhost/dinamis_php/index.php?page=tes.
  • Maka, sebuah halaman pemberitahuan jika halaman tidak ditemukan akan ditampilkan.
  • Jadi, pada proses ini Anda membuat dua halaman sekaligus yakni halaman website dinamis dan halaman tidak ditemukan guys.



2. Penjelasan terkait Cara Membuat Halaman Admin Website Dinamis dengan PHP

Cara Membuat Halaman Admin Website Dinamis
Penjelasan terkait Cara Membuat Halaman Admin Website Dinamis dengan PHP
Sedangkan penjelasan terkait cara membuat halaman admin website dinamis dengan PHP sebagai berikut:
  • Bila Anda masih bingung dengan cara kerjanya, maka cobalah untuk memperhatikan link URL menu yang telah dibuat sebelumnya, yakni:
    1. <li><a href="index.php?page=home">HOME</a></li>
    2. <li><a href="index.php?page=tentang">TENTANG</a></li>
    3. <li><a href="index.php?page=tutorial">TUTORIAL</a></li>
  • Anda bisa alihkan halamannya menggunakan bantuan dari method GET, untuk mengirim data.
  • Setelah itu Anda bisa menangkap data page yang sudah dikiri dan memeriksa isi dari GET page yang di kirim tersebut dengan meng include halaman yang dituju, menggunakan script di bawah ini:
    1. <?php
    2. if(isset($_GET['page'])){

    4. $page = $_GET['page'];
    5. switch ($page) {
    6. case 'home':
    7. include "halaman/home.php";
    8. break;
    9. case 'tentang':
    10. include "halaman/tentang.php";
    11. break;
    12. case 'tutorial':
    13. include "halaman/tutorial.php";
    14. break;
    15. default:
    16. echo "<center><h3>Maaf. Halaman tidak di temukan !</h3></center>";
    17. break;
    18. }
    19. }else{
    20. include "halaman/home.php";
    21. }

    23. ?>
  • Periksalah apakah ada GET page menggunakan script di bawah ini:
    1. if(isset($_GET['page'])){
  • Halaman yang ditampilkan adalah halaman home, jika tidak ada, yakni:
    1. include "halaman/home.php";
    2. switch ($page) {
    3. case 'home':
    4. include "halaman/home.php";
    5. break;
    6. case 'tentang':
    7. include "halaman/tentang.php";
    8. break;
    9. case 'tutorial':
    10. include "halaman/tutorial.php";
    11. break;
    12. default:
    13. echo "<center><h3>Maaf. Halaman tidak di temukan !</h3></center>";
    14. break;
    15. }
  • Bila data GET yang dikirim tidak ada, silahkan Anda periksa kembali dengan bantuan switch case php berikut ini:
    1. switch ($page) {
    2. case 'home':
    3. include "halaman/home.php";
    4. break;
    5. case 'tentang':
    6. include "halaman/tentang.php";
    7. break;
    8. case 'tutorial':
    9. include "halaman/tutorial.php";
    10. break;
    11. default:
    12. echo "<center><h3>Maaf. Halaman tidak di temukan !</h3></center>";
    13. break;
    14. }
  • Bila halaman yang di cari tidak ada atau tidak sesuai, maka Anda tampilkan pemberitahuan bahwa "halaman tidak di temukan"
    1. echo "<center><h3>Maaf. Halaman tidak di temukan !</h3></center>";
  • Selesai.



Akhir Kata

Demikian cara yang bisa diterapkan, jika ingin membuat halaman admin website yang dinamis guys.

Perhatikan dan tulis script dengan baik dan benar, karena jika ada satu huruf yang terlewatkan, bisa dipastikan proses pembuatan website aka gagal guys.

Jika gagal, maka Anda harus mengulang langkah-langkahnya dari awal lagi dan tentu akan lebih boros waktu serta tenaga.

Itulah seluruh isi artikel kami kali ini mengenai cara membuat halaman admin website dinamis 2024. Semoga bermanfaat dan selamat mencoba.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel