Minggu, 26 Februari 2023

Membuat Web Dinamis

Membuat Template awal
  1.  kunjungi https://getbootstrap.com/
  2. Pilih dan Klik menu Docs


  4. Ganti versi ke 5.02




  6. Setelah itu scrol ke bawah. Cari Starter Template


  8. Copy di Vs code. save dengan nama file index.php

Menambahkan Navbar
  1. Buka bootsrap versi 5.02
  2. Pada kolom pencarian cari dengan kata kunci "navbar"


  4. Setelah itu akan tampil seperti gambar dibawah ini

  6. Copy code nya
  7. Masuk ke VSCode
  8. Cari <body>
  9. Enter 1x
  10. Selanjutnya tekan CTRL dan tanda  / secara bersama
  11. Ulangi 2x sehingga seperti gambar


  13. Diantara akhir dan awal navbar enter 1x sehingga seperti gambar dibawah ini


  15. Pastekan code Navbar disana
  16. Kemudian Save
  17. Lihat tampilan akan seperti gmbar dibawah ini.


  19. Setelah itu edit menunya


  21. Pada baris ke 27, Tulisan  "Link" ganti "CV Saya"
  22. Pada baris ke 34, Tulisan "Action" ganti "Daftar Siswa"
  23. Pada baris ke 35, Tulisan "Another action" ganti "Daftar Nilai"
  24. Pada baris ke 31, Tulisan "Dropdown" ganti "Project Saya". sehingga seperti gmbar di bawah ini.


  26. Setelah itu Save dan lihat hasilnya


  28. Selanjutnya kembali ke VSCode. hapus code yang sama dengan gambar dibaawah ini


  30. kemudian Save
  31. Setelah itu hapus fluid pada baris ke 16


  33. Sehingga menjadi


  35. Hapus juga tulisan hello world


  37. Sehingga menjadi


  39. Save
  40. Selanjutnya ganti background navbar. caranya : pada baris ke 15 tulisan "bg-light" ganti dengan.




  42. Disini saya pilih "bg-primary"
  43. kalian bisa pilih yang lain sesuai keinginan sama caranya saat buat cv
  44. Jika navbar kalian backgoundnya gelap bisa ganti bg-light pada baris 15 menjadi bg-dark


  46. Save
  47. Lihat hasilnya


Menambahkan Icon Web
  1. Cari tag <head>
  2. pada tag <title> ganti Hello word dengan judul web sesuai yang diinginkan contohnya saya ganti dengan Web Dinamis. seperti gambar.


  4. kemudian enter 1x setelah tag <title>


  6. Selanjutnya masukkan code 
  7. <link rel="shortcut icon" href="nama-file">


  9. Kemudian Cari gambar yang ingin dijadikan icon
  10. Setelah ketemu copykan di dalam folder php dasar yang ada di htdoc. ingat di dalam folder php dasar bukan di htdoc nya.


  12. setelah itu ganti nama file yang di code 


  14. karena nama gambar saya 1.png maka saya ganti jadi



  16. Ingat nama gambar tiap org pasti beda
  17. Setelah itu save dan lihat hasilnya
Menambahkan Halaman Web
  1. Pertama buat folder pada VSCode dengan nama halaman


  3. Setelah itu klik foler nya. sehingga seperti ini.


  5. Buat file dengan nama : home.php , data_siswa.php , daftar_nilai.php. sehingga seperti ini :


  7. Kemuidan Klik index.php


  9. tambahkan code dibawah ini

  11. <div class="badan">
     <?php 
    if(isset($_GET['page'])){
    $page = $_GET['page'];
    switch ($page) {
    case 'home':
    include "halaman/home.php";
    break;
    case 'data_siswa':
    include "halaman/data-siswa.php";
    break;
    case 'daftar_nilai':
    include "halaman/daftar_nilai.php";
    break;
    default:
    echo "<center><h3>Maaf. Halaman tidak di temukan !</h3></center>";
    break;
    }
    }else{
    include "halaman/home.php";
    }
    ?>
    </div>


  12. Kemudian Save
  13. Setelah itu Cari kata home pada code navbar
  14. ganti # pada href menjadi index.php?page=home




  16. Ganti pula daftar siswa dan daftar nilai. sehingga seperti gambar.


  18. Kemudian Save
  19. Klik file home.php .lalu pastekan kode dibawah ini
  20. <div class="halaman">
    <h2>Halaman Depan</h2>
    <p>Selamat datang di Web saya. ini merupakan halaman depan pada demo cara Membuat Halaman Web Dinamis Dengan PHP</p>
    </div>
  21. Kemudian save
Menambahkan footer
Menampilkan Data Siswa dari database

di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Membuat Web Dinamis

Membuat Template awal  kunjungi  https://getbootstrap.com/ Pilih dan Klik menu Docs Ganti versi ke 5.02 Setelah itu scrol ke bawah. Cari Sta...

  • Membuat Web Dinamis
    Membuat Template awal  kunjungi  https://getbootstrap.com/ Pilih dan Klik menu Docs Ganti versi ke 5.02 Setelah itu scrol ke bawah. Cari Sta...