Kamis, 02 Februari 2017

PERPADUAN CRUD SEDERHANA DENGAN BOOTSTRAP


LATAR BELAKANG

Menerapkan penggunaan css / framworks botstrap untuk tampilan CRUD agar terlihat lebih menarik dan bagus.

MAKSUD & TUJUAN :

Menerapkan framworks botstrap yang telah di pelajari dalam aplikasi CRUD sederhana.

LANGKAH KERJA :

1. Siapkan frameworks atau file css , untuk membuat tapilan CRUD lebih menarik , disini saya menggunkan frameworks Bootstrap.

2. Buka file CRUD yang dulu pernah di buat dengan tampilan sederhana, pada text editor kawan kawan.

3.Setelah kawan membuka file CRUD yang sudah bi buat pada tutorial sebelumnya, lalu pindah folder bootstrap menjadi satu folder dengan file CRUD kawan kawan.

4. Lau buat pemanggilan file bootstrapnya di dalam tag html <head>...</head> dengan script :
<link rel="stylesheet" type="text/css" href="letak file bootsrap">
5. Untuk pemanggilan bootstrap kita dapat menggunakan metode div ataupun span , atau juga bisa langsung di panggil dengan metode class dalam atribut.

Di bawah ini adala contoh pemanggilan bootstrap untuk tabel dan button , menggunakan tabel class bordered


6. Di bawah ini adalah contoh hasil tampilan pada menu index yang sudah di kombinasikan dengan bootstrap sederhana.


7. Dalam form tambah data juga sama ,


Hasil

8. Dalam form edit data juga sama dengan sebelumnya hanya tinggal memanggil style yang sudah di siapkan oleh bootstrapnya sendiri.




9. Dalam penambahan bootstrap kali ini , tidak merubah file koneksi maupun prosesnya. Jadi kita hanya mengubah apa yang dapat di tampilkan  / halaman home.



KESIMPULAN :

Dalam langkah ini / tutorial ini kita hanya menambah atau memperindah tampilan crud sederhana kita , agar lebih menarik di lihat mata.










EmoticonEmoticon