[TUTORIAL 6] Membuat Tampilan Tabel Yang Menarik Dengan Bootstrap

-
Kali ini saya akan langkah - langkah membuat tampilan tabel yang menarik dengan bootstrap.

APA ITU BOOTSTRAP?

Bootstrap adalah front-end framework yang Cantik, bagus , mudah digunakan serta cocok untuk semua jenis device (Handphone, tablet PC, Laptop, PC). Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.
Dengan Menggunakan Bootstrap, Pengerjaan sebuah project dalam sebuah team menjadi lebih mudah. Mengapa demikian? Karena dengan Bootstrap, penamaan class sudah dibakukan. Seorang desainer hanya tinggal menggunakan nama class tersebut di setiap TAG HTML yang ia gunakan.

UNTUK APA ITU BOOTSTRAP?

Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.
langsung aja yang pertama-tama siapkan bahan konponen atau aplikasinya terlebih dahulu. Bahan yang dibutuhkan yaitu :

Oke Langkah pertama yaitu membuat project

Klik File lalu pilih New Project


Pilih PHP lalu PHP Application


Beri nama project sesuai dengan keinginan, jika sudah klik finish saja.


Lalu susun file yang sudah didownload tadi seperti gambar berikut.

Langkah selanjutnya yaitu membuat database, kali ini saya menggunakan SQLYog

Buka SQLYog lalu create database dan beri nama sesuai keinginan.


Buat tabel mhs yang berisikan field-field seperti gambar diatas.

Selanjutkan kembali ke Netbeans

Buat file PHP baru kemudian beri nama koneksi.php. Lalu isi seperti ini, defaultnya adalah localhost dan root. Mahasiswa adalah nama database yang kita buat tadi.


Klik Untuk Memperbesar
Pada file index.php isi dengan sintaks berikut.

Langkah berikutnya cek di browser

Jika seperti ini maka kita sudah berhasil menampilkan data di database di tabel dengan bootstrap

Komentar

Posting Komentar

Postingan populer dari blog ini

Rancangan Sistem Login PHP Fundamental

-
Gambar
Kali ini saya akan memplubikasikan tentang tutorial cara membangun sistem login. Untuk yang pertama mari kita mengenal jalannya sistem login yang disertai autentikasinya . Untuk alogaritma sistem login yg disertai auntetikasinya dapat dilihat dibawah ini: Alogaritma: 1. Pertama muncul halaman form login. 2. User diminta menginputkan username dan password. 3. Selanjutnya sistem akan mengecek apakah username dan password telah cocok. 4. Apabila benar maka sistem akan melanjutkan ke halaman yg dipilih. 5. Apabila salah maka sistem akan menghitung kesalahan input dan menampilkan form login kembali. 6. Apabila sistem telah menghitung kesalahan input hingga 3 kali maka sistem akan menampilkan informasi bahwa user telah diblokir dan user tidak dapat kembali mengakses form login. Untuk pseudocodenya bisa juga dilihan di bawah ini: Pseudocode 1. Mulai. 2. Tampilkan login page. 3. Get username. 4. Get password. 5. Then klik login. 6. If username dan password benar then masuk halaman ber...
Baca selengkapnya

[TUTORIAL 2] Tutorial Membuat Form Login

-
Gambar
Langkah pertama seperti biasa buka netbeans -> new project -> php application. Keterangan: Seperti biasa pada bagian head memuat title dan link-link untuk mendefiniskan file-file atau resource apa yang kita butuhkan. Contohnya seperti bootstrap atau file style.css Keterangan: Pada bagian body kita membuat form untuk login Form ini berisikan field username dengan type email dan password dengan type password juga. Lalu kita beri fitur remeber me. Pada baris 64 merupakan sintaks untuk membuat button dengan style bootstrap. Dibawah button kita beri fitur forgot password. Nah... Jika kode diatas sudah dituliskan semua makan ketika dirun tampilannya akan seperti gambar di bawah ini
Baca selengkapnya

[TUTORIAL 3] Membuat JavaSricpt Pada Form Login

-
Gambar
Pertama kita buat dulu form loginnya, kalian bisa pakai form login pada tutorial sebelumnya.  Klik Disini . Tutorial kali ini saya akan membuat aksi dengan java script dengan menggunakan tampilan login yang telah dibuat dari postingan sebelumnya. Saya akan membuat tutorial gagal login 3 kali diblokir menggunakan java script. 1. Siapkan file boot.strap.min.js, jquery.min.js, popper.min.js. 2. Buat folder Js didalam folder Assets. 3. Masukkan file tadi kedalam folder Js. 4. Ketik coding ini dipaling bawah sebelum </bodi> </html>. 5. Buat file login.php: klik kanan Source file - New - PHP File. 6. Ketik coding ini didalam login.php. 7. Ketik coding ini dipaling atas sebelum <html>. 8. Sekarang kita akan membuat warning/peringantannya. Ketik coding ini dibawah <h1> Selamat Datang</h1> </div>. 9. Membuat waktu warning/peringatanya muncul. Ketik coding ini dibawah <link rel="stylesheet"href="assets/css/floating-labe...
Baca selengkapnya