MODUL TUTORIAL WEB PROGRAMING 2021

Konfigurasi Template SB Admin Part 1

Assalamualaikum wr wb alhamdulilah dengan ijin alloh modul ini bisa terselesaikan

Kita langsung saja untuk kebutuhan membuat aplikasi CRUD Berbasis website adalah

1. Xampp (Sebagai Local Servernya)

2. MySQL (Sebagai Databasenya)
3. Navicate (untuk desaign database)
4. Sublime (Sebagai Tool untuk membuat code html)

Studi Kasus nya kita akan membuat aplikasi akademik sederhana

Langkah Pertama Download Template Bootstrap Sb Admin2

Link Download https://startbootstrap.com/theme/sb-admin-2

Langkah Ke 2 Buat Folder Di Drive C Xampp/Htdocs dengan nama xxx

Disni saya contokan nama Foldernya AKADEMIK

 MODUL TUTORIAL WEB PROGRAMING 2021

Langkah ke 3 buka sublime dan add project di folder akademik

Langkah ke 4 copykan folder dari template SB Admin yang sudah di

download kedalam folder AKADEMIK

Otomatis disublim project aka nada file pekerjaan kita lihat digambar bawah ini
 MODUL TUTORIAL WEB PROGRAMING 2021

Langkah Ke 5 buat file baru disublime dengan nama index.php lalu

copykan code yang ada di file blank SB Admin 2

Lalu Copykan Code yang ada di file Blank sb admin

Copykan seluruh code yang ada di file blank kedalam file index.php tadi

Aktifkan xampp coba panggil alamat localhost/AKADEMIK/index.php di browser

 MODUL TUTORIAL WEB PROGRAMING 2021
hasilnya seperti pada gambar dibawah ini

Selanjutnya kita ubah judul nya dari file index tersebut seperti pada gambar dibawah ini

Lalu Kita Ubah Juga judul menu yang ada di Side bar

Hasilnya seperti pada gambar dibawha ini

 MODUL TUTORIAL WEB PROGRAMING 2021

Selanjutnya edit menu side bar kita ubah menjadi inputan data mahasiswa, kelas, jurusan, dosen

Maka tampilanya berubah menjadi seperti pada gambar dibawha ini

 MODUL TUTORIAL WEB PROGRAMING 2021
Langkah selanjutnya kita hilangkan menu yang tidak digunakan

Disini contoh saya hapus dari new item – utilities Collapse Menu sampai ke nav item table

Maka haislnya seperti pada gambar dibawah ini

 MODUL TUTORIAL WEB PROGRAMING 2021
Selanjutnya kita hilangkang juga menu yang tida dibutuhkan yaitu alert dan message

untuk alert hapus dari nav item alert sampai All Alert lihat gambar dibawah

Untuk message hapus dari dropdown message sampai ke class topbar divider

Selanjutnya kita hilangkan Menu Yang Ada Di Logout

 MODUL TUTORIAL WEB PROGRAMING 2021
saya merubah User Menjadi Mr.Kaito dan Menghapus menu yg tidak diperlukan yaitu dari dropdown list
sampai ke activity long lihat gambar dibawah yang diblok

Lalu Sya Mengganti tulisan Copyrigt

Hasilnya Seperti Pada Gambar Dibawah Ini

Langkah Ke 6 Kita Tambahkac beberapa item card pada hlaman page blank
 MODUL TUTORIAL WEB PROGRAMING 2021
Pertama buka file card yang ada pada folder download sb-admin

Buka di sublime dan copykan bagian Card example

Selanjutnya pastekan di file index.php di posisi page heading / dibawah blank page

Lihat gambar dibawah ini

 MODUL TUTORIAL WEB PROGRAMING 2021

Copy 4x untuk membuat card sebanyak 4 setelah itu edit judulnya sesuai nama menu di sidebar

Hapus bagian divclass yang isi contenya $40.000 lihat gambar dibawah ini

Hasilnya seperti Gambar Dibawah Ini

 MODUL TUTORIAL WEB PROGRAMING 2021

Agar setiap card nya berderet kesamping kita beri perintah div row kembali lagi ke sublime

Pindahkan </div> kebagian bawah code card ini Lihat gambar dibawah ini

Hasilnya seperti pada gambar dibawh ini

 MODUL TUTORIAL WEB PROGRAMING 2021

Terakhir Edit Blank Page Menjadi Selamat datang Admin

Hasilnya seperti pada gambar dibawh ini

Membuat halaman Login

 MODUL TUTORIAL WEB PROGRAMING 2021

Untuk Halaman Login saya Sudah Berikan Materinya dipertemuan sebelumnya jadi step ini saya skip

Silahkan lihat lagi video cara membuat halaman login dengan css (https://youtu.be/VgVhflFuQFk)

Menambahkan Source Login

1. Buatlah database dengan nama akademik

2. Buatlah table_user pada database akademik anda dengan format berikut

3. Sourcecode tampilan login

 MODUL TUTORIAL WEB PROGRAMING 2021

4. Sourcecode aksi_login
5. Sourcecode Koneksi database