Saturday, February 24, 2024

Membuat Tampilan Website Mengguakan Bootstrap dan PHP

Kali ini kita akan membuat tampilan menggunakan bootstrap, sebelumnya template yang akan digunakan adalah "Highadminv2" sebelumnya silahkan download melalui link beriku :


konsep yang kan dibuat : karena menu disetiap file sama maka kita akan buat 1 file yang bisa di panggil dalam file lainnya. langsung saja berikut langkah - langkahnya : 

1. Buatlah folder di htdoc dengan nama bebas, disini saya menggunakan nama "inventaris"Di dalam
2. Buat folder lagi dengan nama "config, class, dan template" 
3. Copy folder assets yang ada di highadmin yang sudah di download tadi, yang berada di folder Highdmin_v1.2\Admin\horizontal dan copy folder plugins yang ada di folder Highdmin_v1.2\Admin kedalam folder inventaris. Sehingga susunan foldernya akan seperti gambar dibawah ini.

4. Buat file dengan nama "header.php" di dalam folder template.
5. Tambahkan script sesuai dengan gambar 

6. Tambahkan script dibawah ini, dan letakan di dalam tag <div class="logo"> ... </div>

7. Langkah selanjutnya tambahkan scrip ini di dalam tag  <div class="menu-extras topbar-custom"> ... </div>

8. Setelah itu kita akan buat bagian navbar, tambahan sript ini di dalam tag  <div class="navbar-custom"> .. </div>

9. Langkah selanjutnya, buat file baru bernama index.php di dalam folder inventaris dengan isi sebagai berikut :

10. setelah tag tutup div </div> wrapper tambahka script ini dan tulis sejajar dengan tag div wrapper.

11. Jalanan file index.php akan menghasilan tampilan seperti ini :

12. Langkah selanjutnya mengabungkan file header.php yang sudah ita buat sebelumnya. Supaya file yang ada di header bisa di tampilkan sehingga tampilanya bisa sesuai dengan css highadmin yang sudah kita buat. Tambakan script dibawah ini pada file index.php pada bagian paling atas 

13. Lalu jalankan kembali dan hasilnya seperti ini.

14. Selanjutnya buat file databarang.php, tentang.php di dalam folder inventaris. Copy script yang ada di index.php dan paste ke dalam databarang.php dan tentang.php. Ubah databarang.php dan tentang.php dari yang seperti ini :

menjadi :

databarang.php

tentang.php

15. Selanjutnya kita buat ketia menu dashboard, data barang dan tentang di klik akan menampilkan file yang sudah ita bua sebelumnya. Ubah header.php pada bagian 

Menjadi : 

header.php

16. Lalu jalankan kembali aan menghasilkan tampilan seperti ini ketika setiap menu di klik:

Menu Beranda

Menu Data Barang

Menu Tentang






Comments 0