Makalah ini membahas cara mengoptimalisasi browser, khususnya Mozilla Firefox. Beberapa cara yang dijelaskan adalah mengatur konfigurasi browser dengan mengubah nilai-nilai tertentu di about:config, memasang addons untuk mempercepat loading halaman dan memblokir iklan, serta menonaktifkan fitur seperti popup dan gambar untuk meningkatkan kecepatan browsing.
Dokumen tersebut memberikan panduan lengkap tentang cara membuat website menggunakan Joomla! secara online mulai dari menginstal Joomla!, mengatur template, modul, dan konten, hingga mempromosikan website."
Laporan ini membahas proses pembuatan desain website menggunakan Joomla. Terdapat penjelasan mengenai pengertian desain web Joomla, aplikasi pendukungnya seperti PHP, Apache, dan MySQL, serta proses instalasi Joomla yang meliputi konfigurasi database dan pengaturan situs.
Joomla merupakan sistem manajemen konten (CMS) yang mudah diinstal, sederhana dikelola, dan andal. Joomla memungkinkan pengelolaan konten secara dinamis dengan fitur-fitur seperti modul, komponen, template, dan bahasa yang dapat diinstal dan dikonfigurasi. Struktur direktori dan file Joomla terdiri dari berbagai direktori dan file inti untuk mengelola konten, tampilan, dan adminsitrasi website.
[/ringk
Dokumen tersebut membahas tentang praktikum penginstalan XAMPP dan Joomla. Terdapat penjelasan langkah-langkah penginstalan XAMPP dan Joomla beserta alat yang dibutuhkan dan tujuan dari praktikum tersebut.
Dokumen ini memberikan instruksi langkah demi langkah untuk membuat database di phpmyadmin, meliputi mengaktifkan xampp, membuka phpmyadmin, membuat user baru, membuat tabel pertama lalu kedua seperti tabel karyawan dan user.
Makalah ini membahas cara mengoptimalisasi browser, khususnya Mozilla Firefox. Beberapa cara yang dijelaskan adalah mengatur konfigurasi browser dengan mengubah nilai-nilai tertentu di about:config, memasang addons untuk mempercepat loading halaman dan memblokir iklan, serta menonaktifkan fitur seperti popup dan gambar untuk meningkatkan kecepatan browsing.
Dokumen tersebut memberikan panduan lengkap tentang cara membuat website menggunakan Joomla! secara online mulai dari menginstal Joomla!, mengatur template, modul, dan konten, hingga mempromosikan website."
Laporan ini membahas proses pembuatan desain website menggunakan Joomla. Terdapat penjelasan mengenai pengertian desain web Joomla, aplikasi pendukungnya seperti PHP, Apache, dan MySQL, serta proses instalasi Joomla yang meliputi konfigurasi database dan pengaturan situs.
Joomla merupakan sistem manajemen konten (CMS) yang mudah diinstal, sederhana dikelola, dan andal. Joomla memungkinkan pengelolaan konten secara dinamis dengan fitur-fitur seperti modul, komponen, template, dan bahasa yang dapat diinstal dan dikonfigurasi. Struktur direktori dan file Joomla terdiri dari berbagai direktori dan file inti untuk mengelola konten, tampilan, dan adminsitrasi website.
[/ringk
Dokumen tersebut membahas tentang praktikum penginstalan XAMPP dan Joomla. Terdapat penjelasan langkah-langkah penginstalan XAMPP dan Joomla beserta alat yang dibutuhkan dan tujuan dari praktikum tersebut.
Dokumen ini memberikan instruksi langkah demi langkah untuk membuat database di phpmyadmin, meliputi mengaktifkan xampp, membuka phpmyadmin, membuat user baru, membuat tabel pertama lalu kedua seperti tabel karyawan dan user.
Makalah ini membahas cara mengoptimalisasi browser dengan fokus pada Mozilla Firefox. Beberapa cara yang disebutkan antara lain mengurangi pemakaian RAM untuk cache, mempercepat loading halaman dengan mengatur konfigurasi jaringan, memasang addons seperti Adblock Plus dan Video DownloadHelper, serta menonaktifkan popup dan gambar untuk meningkatkan kecepatan browsing.
Makalah ini membahas cara mengoptimalisasi browser Mozilla Firefox dengan beberapa langkah seperti mengurangi pemakaian RAM untuk cache, mempercepat loading halaman web, memasang addons seperti Adblock Plus dan Video DownloadHelper, serta mengatur konfigurasi secara langsung di about:config untuk meningkatkan kecepatan browsing.
Makalah ini membahas cara mengoptimalisasi browser dengan fokus pada Mozilla Firefox. Beberapa cara yang dijelaskan antara lain mengurangi pemakaian RAM untuk cache, mempercepat loading halaman web dengan mengatur konfigurasi tertentu, memasang addons seperti Adblock Plus dan Video DownloadHelper, serta menonaktifkan popup window dan gambar untuk meningkatkan kecepatan browsing.
Ses pemrograman-web-database-dg-php-dan-my sqlomenk gokile
Dokumen tersebut memberikan instruksi langkah-demi-langkah untuk menginstal paket XAMPP yang berisi web server Apache, PHP, dan MySQL, serta cara menguji apakah ketiganya sudah terinstal dan berjalan dengan baik melalui browser. Langkah terakhir memperlihatkan cara membuat dokumen PHP pertama.
Makalah ini membahas cara mengoptimalisasi browser Mozilla Firefox dengan beberapa langkah seperti mengurangi pemakaian RAM untuk cache, mempercepat loading halaman web, memasang addons seperti Adblock Plus dan Video DownloadHelper, serta mengatur konfigurasi seperti menonaktifkan popup window dan fasilitas gambar, serta mengatur langsung konfigurasi di about:config.
Makalah ini membahas cara mengoptimalisasi browser Mozilla Firefox dengan beberapa langkah seperti mengurangi pemakaian RAM untuk cache, mempercepat loading halaman web, memasang addons seperti Adblock Plus dan Video DownloadHelper, serta mengatur konfigurasi secara langsung di about:config untuk meningkatkan kecepatan browsing.
Dokumen ini berisi laporan proyek pembuatan aplikasi website bertema toko online jersey bernama "Coldplay Fans" oleh siswa SMK bernama Aldy Johan. Laporan ini mencakup penjelasan tentang instalasi perangkat lunak pengembangan, perancangan database dan tampilan website, serta penjelasan langkah-langkah pembuatan aplikasi website."
Dokumen ini membahas tentang pembuatan aplikasi website tentang "Sisi Lain Pelajar" menggunakan software XAMPP dan Adobe Fireworks. Terdiri dari empat bab yang membahas instalasi XAMPP, rancangan aplikasi berupa flowchart dan layout, pembuatan aplikasi website meliputi pembuatan menu bar, berbagai page, dan kategori, serta pembuatan database menggunakan PHPMyAdmin dan PHP.
Dokumen tersebut merupakan laporan proyek aplikasi website bernama Speed_Shop yang dibuat oleh Ade Thariq F. Laporan tersebut membahas tentang instalasi perangkat lunak pengembang seperti XAMPP dan Photoshop, rancangan aplikasi berupa flowchart, serta pembuatan aplikasi website beserta databasenya untuk menampung komentar pengunjung.
Makalah ini membahas cara mengoptimalisasi browser dengan fokus pada Mozilla Firefox. Beberapa cara yang dijelaskan adalah mengurangi pemakaian RAM untuk cache, mempercepat loading halaman, memasang addons seperti Adblock Plus dan Video DownloadHelper, mengatur konfigurasi seperti menonaktifkan popup dan gambar, serta mengatur langsung konfigurasi di about:config.
Makalah ini membahas cara mengoptimalisasi browser dengan fokus pada Mozilla Firefox. Beberapa cara yang dijelaskan adalah mengurangi pemakaian RAM untuk cache, mempercepat loading halaman, memasang addons seperti Adblock Plus dan Video DownloadHelper, mengatur konfigurasi seperti menonaktifkan popup dan gambar, serta mengatur langsung konfigurasi di about:config.
Makalah ini membahas cara mengoptimalisasi browser dengan fokus pada Mozilla Firefox. Beberapa cara yang dijelaskan antara lain mengurangi pemakaian RAM untuk cache, mempercepat loading halaman, memasang addons seperti Adblock Plus dan Video DownloadHelper, mengatur konfigurasi seperti menonaktifkan popup dan gambar, serta mengatur langsung konfigurasi di about:config.
Makalah ini membahas cara mengoptimalisasi browser dengan fokus pada Mozilla Firefox. Beberapa cara yang disebutkan antara lain mengurangi pemakaian RAM untuk cache, mempercepat loading halaman dengan mengatur konfigurasi jaringan, memasang addons seperti Adblock Plus dan Video DownloadHelper, serta menonaktifkan popup dan gambar untuk meningkatkan kecepatan browsing.
Makalah ini membahas cara mengoptimalisasi browser Mozilla Firefox dengan beberapa langkah seperti mengurangi pemakaian RAM untuk cache, mempercepat loading halaman web, memasang addons seperti Adblock Plus dan Video DownloadHelper, serta mengatur konfigurasi secara langsung di about:config untuk meningkatkan kecepatan browsing.
Makalah ini membahas cara mengoptimalisasi browser dengan fokus pada Mozilla Firefox. Beberapa cara yang dijelaskan antara lain mengurangi pemakaian RAM untuk cache, mempercepat loading halaman web dengan mengatur konfigurasi tertentu, memasang addons seperti Adblock Plus dan Video DownloadHelper, serta menonaktifkan popup window dan gambar untuk meningkatkan kecepatan browsing.
Ses pemrograman-web-database-dg-php-dan-my sqlomenk gokile
Dokumen tersebut memberikan instruksi langkah-demi-langkah untuk menginstal paket XAMPP yang berisi web server Apache, PHP, dan MySQL, serta cara menguji apakah ketiganya sudah terinstal dan berjalan dengan baik melalui browser. Langkah terakhir memperlihatkan cara membuat dokumen PHP pertama.
Makalah ini membahas cara mengoptimalisasi browser Mozilla Firefox dengan beberapa langkah seperti mengurangi pemakaian RAM untuk cache, mempercepat loading halaman web, memasang addons seperti Adblock Plus dan Video DownloadHelper, serta mengatur konfigurasi seperti menonaktifkan popup window dan fasilitas gambar, serta mengatur langsung konfigurasi di about:config.
Makalah ini membahas cara mengoptimalisasi browser Mozilla Firefox dengan beberapa langkah seperti mengurangi pemakaian RAM untuk cache, mempercepat loading halaman web, memasang addons seperti Adblock Plus dan Video DownloadHelper, serta mengatur konfigurasi secara langsung di about:config untuk meningkatkan kecepatan browsing.
Dokumen ini berisi laporan proyek pembuatan aplikasi website bertema toko online jersey bernama "Coldplay Fans" oleh siswa SMK bernama Aldy Johan. Laporan ini mencakup penjelasan tentang instalasi perangkat lunak pengembangan, perancangan database dan tampilan website, serta penjelasan langkah-langkah pembuatan aplikasi website."
Dokumen ini membahas tentang pembuatan aplikasi website tentang "Sisi Lain Pelajar" menggunakan software XAMPP dan Adobe Fireworks. Terdiri dari empat bab yang membahas instalasi XAMPP, rancangan aplikasi berupa flowchart dan layout, pembuatan aplikasi website meliputi pembuatan menu bar, berbagai page, dan kategori, serta pembuatan database menggunakan PHPMyAdmin dan PHP.
Dokumen tersebut merupakan laporan proyek aplikasi website bernama Speed_Shop yang dibuat oleh Ade Thariq F. Laporan tersebut membahas tentang instalasi perangkat lunak pengembang seperti XAMPP dan Photoshop, rancangan aplikasi berupa flowchart, serta pembuatan aplikasi website beserta databasenya untuk menampung komentar pengunjung.
Makalah ini membahas cara mengoptimalisasi browser dengan fokus pada Mozilla Firefox. Beberapa cara yang dijelaskan adalah mengurangi pemakaian RAM untuk cache, mempercepat loading halaman, memasang addons seperti Adblock Plus dan Video DownloadHelper, mengatur konfigurasi seperti menonaktifkan popup dan gambar, serta mengatur langsung konfigurasi di about:config.
Makalah ini membahas cara mengoptimalisasi browser dengan fokus pada Mozilla Firefox. Beberapa cara yang dijelaskan adalah mengurangi pemakaian RAM untuk cache, mempercepat loading halaman, memasang addons seperti Adblock Plus dan Video DownloadHelper, mengatur konfigurasi seperti menonaktifkan popup dan gambar, serta mengatur langsung konfigurasi di about:config.
Makalah ini membahas cara mengoptimalisasi browser dengan fokus pada Mozilla Firefox. Beberapa cara yang dijelaskan antara lain mengurangi pemakaian RAM untuk cache, mempercepat loading halaman, memasang addons seperti Adblock Plus dan Video DownloadHelper, mengatur konfigurasi seperti menonaktifkan popup dan gambar, serta mengatur langsung konfigurasi di about:config.
Makalah ini membahas cara mengoptimalisasi browser dengan fokus pada Mozilla Firefox. Beberapa cara yang dijelaskan antara lain mengurangi pemakaian RAM untuk cache, mempercepat loading halaman, memasang addons seperti Adblock Plus dan Video DownloadHelper, mengatur konfigurasi seperti menonaktifkan popup dan gambar, serta mengatur langsung konfigurasi di about:config.
Makalah ini membahas cara mengoptimalisasi browser dengan fokus pada Mozilla Firefox. Beberapa cara yang dijelaskan adalah mengurangi pemakaian RAM untuk cache, mempercepat loading halaman, memasang addons seperti Adblock Plus dan Video DownloadHelper, serta mengatur konfigurasi secara langsung di about:config untuk menonaktifkan popup, gambar, dan meningkatkan kecepatan.
Dokumen tersebut memberikan panduan lengkap untuk membuat website menggunakan framework Yii. Mulai dari persyaratan, instalasi database dan framework, pembuatan model dan CRUD untuk tabel mahasiswa, prodi dan fakultas, hingga tampilan akhir website.
Wordpress adalah sistem dokumen website yang bersifat gratis dan open source yang dapat digunakan untuk membuat blog, sistem informasi, dan lainnya. Pemrograman web memungkinkan pengguna untuk membuat halaman web yang dinamis dengan perintah-perintah sederhana namun dapat menghasilkan berbagai informasi dan dapat berinteraksi dengan pengguna.
Makalah ini membahas cara mengoptimalisasi browser Mozilla Firefox dengan beberapa langkah seperti mengurangi pemakaian RAM untuk cache, mempercepat loading halaman web, memasang addons seperti Adblock Plus dan Video DownloadHelper, serta mengatur konfigurasi secara langsung di about:config untuk meningkatkan kecepatan browsing.
Similar to training module "web application development with cms and bootstrap" (20)
ANALISIS PENGARUH INDUSTRI BATU BARA TERHADAP PENCEMARAN UDARA.pdfnarayafiryal8
Industri batu bara telah menjadi salah satu penyumbang utama pencemaran udara global. Proses ekstraksi batu bara, baik melalui penambangan terbuka maupun penambangan bawah tanah, menghasilkan debu dan gas beracun yang dilepaskan ke atmosfer. Gas-gas tersebut termasuk sulfur dioksida (SO2), nitrogen oksida (NOx), dan partikel-partikel halus (PM2.5) yang berbahaya bagi kesehatan manusia dan lingkungan. Selain itu, pembakaran batu bara di pembangkit listrik dan industri menyebabkan emisi karbon dioksida (CO2), yang merupakan penyebab utama perubahan iklim global dan pemanasan global.
Pencemaran udara yang disebabkan oleh industri batu bara juga memiliki dampak lokal yang signifikan. Di sekitar area penambangan, debu batu bara yang dihasilkan dapat mengganggu kesehatan masyarakat dan ekosistem lokal. Paparan terus-menerus terhadap debu batu bara dapat menyebabkan masalah pernapasan seperti asma dan bronkitis, serta berkontribusi pada penyakit paru-paru yang lebih serius. Selain itu, hujan asam yang disebabkan oleh emisi sulfur dioksida dapat merusak tanaman, air tanah, dan ekosistem sungai, mengancam keberlanjutan lingkungan di sekitar lokasi industri batu bara.
training module "web application development with cms and bootstrap"
1. Jl. Gayungan PTT No.17-19, Gayungan,
Kota Surabaya, Jawa Timur 60234, Indonesia
Phone: (+62 31) 8280800, (+62 81) 139808009, (+62 81) 13278005
Email: info@ittelkom-sby.ac.id
MODUL PELATIHAN
PENGEMBANGAN APLIKASI WEB
DENGAN CMS DAN BOOTSTRAP
Tim Penyusun:
Dewi Rahmawati, S.Kom., M.Kom.
Ardian Yusuf Wicaksono, S.Kom., M.Kom.
Fidi Wincoko Putro, S.ST., M.Kom.
PENGABDIAN MASYARAKAT
PROGRAM STUDI REKAYASA PERANGKAT LUNAK
FAKULTAS TEKNOLOGI INFORMASI DAN INDUSTRI
INSTITUT TEKNOLOGI TELKOM SURABAYA
TAHUN 2018
2. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
2
Kata Pengantar
Syukur Alhamdulillah Kami panjatkan kehadirat Allah SWT karena
Kami dapat menyelesaikan Modul Pelatihan Pengembangan Aplikasi Web
dengan CMS dan Bootstrap ini. Kami mengucapakan terima kasih kepada
semua pihak yang telah membantu dalam penyusunan modul ini.
Modul ini disusun untuk dipakai sebagai buku pegangan bagi Siswa
SMKN 1 Surabaya dalam pelatihan Pengembangan Aplikasi Web dengan
CMS dan Bootstrap. Buku ini terdiri dari dua Bab yaitu Bab 1 tentang
aplikasi web berbasis Content Management System (CMS) Wordpress dan
Bab 2 yang berisi tentang mempercantik aplikasi web berbasis PHP dan
bootstrap. Penulis berharap buku ini dapat bermanfaat bagi Siswa SMKN 1
Surabaya sehingga mampu mengaplikasikan buku ini dalam praktek sehari-
hari.
Penulis menyadari bahwa dalam modul ini masih terdapat beberapa
kekurangan dan Kami berterima kasih bila Pembaca bersedia memberikan
kritik dan saran bagi pengembangan modul di masa yang akan datang.
Surabaya, November 2018
Penyusun
3. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
3
Daftar Isi
KATA PENGANTAR............................................................................................................2
DAFTAR ISI .......................................................................................................................3
BAB 1 WORDPRESS...........................................................................................................4
A. SERVER DI LOCALHOST.....................................................................................................4
B. INSTALASI WORDPRESS DI LOCALHOST................................................................................9
1) Membuat Database..............................................................................................9
2) Menginstall.........................................................................................................10
C. INSTALASI TEMA...........................................................................................................13
D. UJI LATIHAN ...........................................................................................................15
BAB 2 MEMPERCANTIK APLIKASI WEB DENGAN BOOTSTRAP ........................................16
A. APLIKASI WEB .............................................................................................................16
B. TUJUAN DAN OUTPUT ...................................................................................................16
C. SERVER.......................................................................................................................17
D. DATABASE..............................................................................................................17
E. CRUD .......................................................................................................................18
1) Koneksi Database ...............................................................................................19
2) Create .................................................................................................................19
3) Read....................................................................................................................21
4) Update................................................................................................................23
5) Delete..................................................................................................................25
F. TEMPLATE...................................................................................................................25
1) Mengubah Create...............................................................................................26
2) Mengubah Read .................................................................................................28
3) Mengubah Update..............................................................................................30
4) Optimasi .............................................................................................................31
G. MENAMPILKAN DASHBOARD .....................................................................................36
REFERENSI......................................................................................................................39
4. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
4
BAB 1
Wordpress
A. Server di Localhost
Jika anda tidak punya hosting, anda dapat membangun wordpress di
localhost. Caranya anda harus mempunyai server web sendiri. Salah satu
server yang mudah digunakan adalah xampp.
Cara menginstal xampp:
1. Siapkan installer dari XAMPP. Installer XAMPP bisa diunduh dari
https://www.apachefriends.org/index.html, dimana anda bisa memilih
installer yang sesuai dengan system operasi anda. (Catatan: dalam
perkuliahan ini, installer XAMPP sudah disediakan di dalam file
pendukung).Pada kuliah ini, XAMPP yang digunakan adalah XAMPP
versi.
2. Copy installer xampp ke dalam direktori lokal anda.
3. Jalankan installer xampp
4. Jika User Account Control (UAC) sudah tidak aktif maka akan muncul
pesan seperti berikut. Jika UAC masih aktif, maka anda harus
mengubahnya. Jika muncul pesan seperti gambar berikut klik OK.
5. Muncul tampilan seperti berikut, klik Next.
5. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
5
6. Pada kotak dialog pemilihan direktori untuk instalasi, jika sudah sesuai
klik Next, jika belum sesuai klik Browse dulu dan pilih direktori yang
anda inginkan.
7. Muncul kotak dialog apakah apache, MySQL, dan Filezilla dijadikan
sebagai service seperti beriku, disini kita membiarkan poin-poin di
bawah service section tidak tercentang karena kalau mereka selalu
dijadikan sebagai service akan membebani komputer.
8. Klik Install.
9. Setelah itu proses instalasi akan berjalan seperti tampilan berikut ini:
6. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
6
10. Kalau sudah selesai, klik Finish, kemudian klik Yes.
Menggunakan xampp control panel
Setelah XAMPP berhasil diinstal, anda tidak bisa langsung
menggunakannya karena service Apache dan MySQLnya belum jalan.
Jadi, ketika anda ingin mengaktifkan XAMPP anda harus menjalankan
service Apache dan MySQL. Adapun cara untuk menjalankan service
Apache dan MySQL adalah sebagai berikut:
1. Jalankan XAMPP control panel, pada menu Start, cari Xampp control
panel
7. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
7
2. Pada tampilan berikut, klik Start pada Apache dan MySQL.
3. Sehingga hasilnya adalah seperti berikut:
4. Tanda xampp sudah siap digunakan, anda bisa membuka browser
kemudian memasukkan alamat http://localhost/, maka akan muncul
tampilan seperti berikut ini:
8. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
8
5. Anda juga bisa membuka phpMyAdmin dengan memasukkan alamat
berikut: http://localhost/phpmyadmin/. Sehingga hasilnya adalah
seperti ini:
Menjalankan file PHP di dengan server XAMPP
Setelah server xampp dipasang, biasanya di dalam directory C
komputer muncul folder “xampp”. Kemudian di dalam folder xampp terdapat
folder “htdocs”. Di dalam folder htdocs inilah semua file-file php anda harus
anda simpan dan kemudian dipanggil di dalam browser. Berikut adalah cara
untuk menjalankan file php di dengan server XAMPP:
9. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
9
1. Buat folder baru di dalam directori htdocs anda dan beri nama
“Latihan1”
2. Copykan file php “cobaxampp.php” dari file pendukung bab 1 ke
dalam folder tersebut.
3. Jalankan file php tersebut dengan membuka browser (internet
explorer, firefox, atau Chrome), kemudian ketikkan alamat
“http:localhostLatihan1”. Maka akan muncul file-file yang ada di
dalam folder Latihan 1.
4. Kemudian klik file php yang akan dijalankan, misal: cobaxampp.php.
Maka hasilnya adalah sebagai berikut:
Catatan: jika file php tersebut dibuka dengan menggunakan
dream weaver baris-baris program php sehingga bisa menghasilkan
tampilan seperti di atas. Penjelasan lebih detil tentang maksud dari
baris-baris program tersebut akan dibahas pada bab selanjutnya.
B. Instalasi Wordpress di Localhost
1) Membuat Database
Sebelum menginstalasi WordPress, anda harus menyiapkan
database dulu untuk menyimpan data-data. Adapun langkah-langkah untuk
membuat database adalah sebagai berikut:
10. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
10
1. Mulai dengan membuka web phpMyAdmin. Caranya: buka browser
(bisa Mozilla, internet explorer, dll), lalu ketikan alamat URL berikut
http://localhost/phpmyadmin/
2. Klik menu Databases, pada text field Create new database
masukkan nama database yang akan anda buat, misal: A1_NIM_db.
Kemudia klik Create.
2) Menginstall
WordPress yang akan dipakai pada mata kuliah ini adalah WordPress
4.5.3 (Versi WordPress yang terbaru saat modul ini dibuat). Jika nanti anda
memakai WordPress dengan versi yang berbeda, mungkin ada beberapa
menu yang berbeda. Langkah-langkahnya adalah sebagai berikut:
1. Buat folder di root web server (10.151.16.10) dan beri nama
kelas_nim_WordPress
(Contoh: A1_NIM_db)
2. Copy installer WordPress-4.5.3.zip ke dalam folder yang baru
dibuat. (Catatan: https://wordpress.org/download/ atau pada
kuliah ini installer sudah dishare di file pendukung mahasiswa)
3. Klik kanan file WordPress-4.5.3.zip, lalu pilih Extract here.
4. Tunggu proses ekstraksi selesai.
5. Setelah proses ekstraksi selesai, hapus file WordPress-4.5.3.zip
11. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
11
6. Akses installer WordPress anda, dengan buka browser dan
masukkan URL berupa folder tempat anda mengekstrak
WordPress (http://localhost/A1_NIM_Wordpress/wp-login.php).
7. Langkah selanjutnya untuk instalasi aplikasi.
Instalasi aplikasi
1. Buka browser, ketikkan alamat domain anda pada url, misal:
http://localhost/A1_NIM_Wordpress/wp-admin/install.php
2. Klik Let’s go
3. Masukkan data-data mengenai database anda sebagai berikut:
- Database Name : a1_nim_db (catatan: database yang baru anda
buat)
- Username: root
- Password: (kosong)
- Database Host: localhost
- Table prefix: ganti nama default “wp_” menjadi “ah_”.
Tabel prefix adalah awalan nama tabel wordpress anda di
database.
4. Jika data yang anda masukkan pada langkah sebelumnya benar,
maka akan muncul tampilan seperti berikut, kemudian klik Run the
12. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
12
install. Jika tampilan seperti berikut tidak muncul berarti informasi
tentang database yang anda masukkan pada tahap sebelumnya
masih ada yang salah.
5. Kemudian masukkan informasi-informasi sebagai berikut:
- Site title: IT Telkom Surabaya
- Username: admin
- Password: silahkan diisi dengan password anda sendiri (catat
password anda kalau takut lupa)
- Your email: masukkan email anda
- Centang pilihan search engine visibility
6. Klik Install Wordpress
7. Tanda proses instalasi berhasil adalah muncul tampilan seperti
berikut:
13. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
13
C. Instalasi Tema
Tema (themes) di dalam wordpress bermanfaat untuk menciptakan
desain dan fungsi dari situs wordpress yang menggunakan tema tersebut.
Dengan adanya tema, pemilik website wordpress dapat mengubah
tampilan website mereka secara langsung. Tema untuk wordpress yang
tersedia di internet ada yang bersifat responsive dan ada yang tidak. Tema
yang bersifat responsive artinya tema tersebut dapat menyesuikan
tampilannya terhadap berbagai device baik dekstop, hp, maupun tablet.
Tema ini banyak tersedia di internet. Ada yang berbayar dan ada yang tidak.
Anda bisa mencari tema yang sesuai dengan keinginan anda di internet.
Dalam buku ini, tema yang akan dipakai adalah “Panoramic” yang bisa
di download dari link berikut: https://wordpress.org/themes/panoramic/.
Adapun tampilan Panoramic adalah seperti berikut:
Adapun cara untuk menginstal tema adalah sebagai berikut:
1. Masuklah ke dashboard, jika belum anda harus login (Link login
Localhost: http://localhost/A1_NIM_Wordpress/wp-login.php).
2. Pada halaman dashboard klik Appearance → Themes.
14. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
14
3. Klik Add New
4. Klik Upload Themes, kemudian browse template yang anda
inginkan. Dalam hal ini template yang akan digunakan sudah dishare
di file pendukung dengan nama panoramic.1.0.62.zip.
5. Klik install Now.
6. Klik activate jika ingin mengaktifkannya.
15. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
15
7. Untuk melihat hasilnya klik Visit Site dipojok kiri atas, sehingga
hasilnya:
D. Uji Latihan
1. Cari 2 buah website institusi yang dibangun menggunakan
wordpress!
2. Cara tema wordpress yang support untuk website institusi!
16. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
16
BAB 2
Mempercantik Aplikasi Web dengan Bootstrap
A. Aplikasi Web
Aplikasi web merupakan sebuah aplikasi yang menggunakan
teknologi browser untuk menjalankan aplikasi dan diakses melalui
jaringan komputer (Remick, 2011). Sedangkan menurut (Rouse, 2011)
aplikasi web adalah sebuah program yang disimpan di server dan dikirim
melalui internet dan diakses melalui antarmuka browser.
Dari dua pendapat di atas maka dapat disimpulkan bahwa aplikasi
web adalah aplikasi yang diakses menggunakan web browser melalui
jaringan internet atau intranet. Aplikasi web dikodekan dalam bahasa
pemrograman yang mendukung perangkat lunak berbasis web seperti
HTML, Javascript, CSS, Ruby, Python, PHP, Java dan lain-lain.
Gambar 1. Arsitektur Aplikasi Web
B. Tujuan dan Output
Pada modul pelatihan ini akan dibahas langkah demi langkah
untuk membangun suatu aplikasi web sederhana dengan fungsi Create
(membuat), Read (Membaca data), Update (Mengubah Data), dan
Delete (Menghapus Data). Aplikasi akan dibangun dengan bahasa
pemrograman PHP dan menggunakan database MySQL. Kemudian
17. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
17
untuk mempercantik tampilan aplikasi web, kita akan menggunakan
Bootstrap. Sehingga hasil output akhirnya nanti akan tampak seperti
Gambar 2.
Gambar 2. Tampilan Output
C. Server
PHP merupakan bahasa pemrograman untuk aplikasi web yang
dijalankan di bagian Server, oleh karena itu kita perlu aplikasi server yang
akan menjalankan program PHP kita. Kali ini kita akan memakai paket
aplikasi XAMPP dimana di dalam di dalamnya ada aplikasi Apache yang
akan bertindak sebagai web server PHP. Instalasi Xampp bisa dilihati
pada BAB 1.
D. Database
Selain Apache sebagai web server, kita juga memerlukan server
database yang akan digunakan sebagai wadah penyimpanan data yang
kita masukkan ke aplikasi web. Aplikasi yang digunakan adalah MySQL.
18. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
18
Pada paket aplikasi XAMPP sudah meliputi Mysql server dan PHP
MyAdmin sebagai antarmuka sistem manajemennya, sehingga mudah
untuk mengoperasikan MySQL.
Setelah kita instalasi semua server yang diperlukan, maka kita
menjalankan aplikasi server tersebut (Apache dan MySQL). Langkah
selanjutnya adalah mempersiapkan data yang akan kita isikan di
database terlebih dahulu sebagai data awal. Pada pelatihan ini sudah
kita siapkan data awal dalam format file berekstensi sql yaitu file
pelatihan.sql.
Buka PHPMyAdmin melalui browser dan import file pelatihan.sql.
Gambar 3. Tampilan PHPMyAdmin
E. CRUD
CRUD adalah akronim untuk Create, Read, Update, dan Delete.
Operasi CRUD adalah manipulasi data dasar untuk database. Dalam
modul ini kita akan membuat aplikasi PHP sederhana untuk melakukan
semua operasi ini pada tabel database MySQL di satu tempat. Langkah-
langkah yang akan kita lakukan pada pembuatan CRUD ini adalah
Koneksi Database, Create, Read, Update dan Delete. Untuk lebih
lengkapnya mari kita ikuti langkahnya sebagai berikut:
19. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
19
1) Koneksi Database
File dbconfig.php menyimpan informasi tentang database, host,
username dan password. Sebagian besar server lokal bekerja dengan
detail yang diberikan. Anda dapat mengubahnya sesuai dengan detail
host dan database Anda. Untuk menghubungkan PHP dengan
MySQL, kita menggunakan fungsi mysqli_connect() dengan
parameter alamat, user database, password user, dan nama
database.
1. <?php
2. define("MYSQL_DB_HOST", "localhost");
3. define("MYSQL_DB_USER", "root");
4. define("MYSQL_DB_PASSWORD", "");
5. define("MYSQL_DB_DATABASE", "pelatihan");
6.
7. $conn = mysqli_connect(MYSQL_DB_HOST, MYSQL_DB_USER, MYSQL_D
B_PASSWORD, MYSQL_DB_DATABASE);
8. if (!$conn) {
9. die("Connection failed: " . mysqli_connect_error());
10. }
11. ?>
2) Create
File kontakbaru.php berfungsi untuk menambahkan kontak baru.
Formulir HTML digunakan untuk menerima masukan data kontak.
Setelah data kontak diserahkan, MySQL INSERT Query digunakan
untuk memasukkan data kontak ke dalam database.
1. <?php
2. // Membuka koneksi database menggunakan file config
3. require_once("dbconfig.php");
4.
5. // Cek form apakah telah tersubmit lalu isi data ke tabel
kontak
21. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
21
36. <td><input type="hidden"
name="submit" value="key"></td>
37. <td><input type="submit"
value="Tambah"></td>
38. </tr>
39. </table>
40. </form>
41. </body>
42. </html>
Gambar 4. Contoh tampilan halaman kontakbaru.php
3) Read
File listkontak.php merupakan file utama yang menyertakan file
konfigurasi untuk koneksi database. Kemudian menampilkan semua
daftar kontak menggunakan MySQL Select Query. Kontak yang akan
ditampilkan di dalam daftar perlu menambahkan terlebih dahulu
menggunakan tautan ‘Tambah Kontak’.
1. <?php
2. // Membuka koneksi database menggunakan file config
3. require_once("dbconfig.php");
4.
5. // Ambil semua data kontak dari database
6. $result = mysqli_query($conn, "SELECT * FROM kontak");
7. ?>
8. <html>
9. <head>
23. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
23
Gambar 5. Contoh tampilan halaman listkontak.php
4) Update
File editkontak.php digunakan untuk mengedit / update data
kontak. Anda dapat mengubah data kontak dan memperbaruinya. File
ini akan mengarahkan pengguna kembali ke homepage, setelah
update sukses.
1. <?php
2. // Membuka koneksi database menggunakan file config
3. require_once("dbconfig.php");
4.
5. // Cek form update apakah telah tersubmit lalu ubah dan
redirect setelah selesai
6. if(isset($_POST['update']))
7. {
8. // update data kontak
9. $result = mysqli_query($conn, "UPDATE kontak SET
nama='".$_POST['nama']."',email='".$_POST['email']."',hp='".
$_POST['hp']."' WHERE id=".$_POST['id']);
10.
11. // redirect ke list
12. header("Location: listkontak.php");
13. }
14. ?>
15. <?php
16. // Tampilkan data sesuai id
17. $id = $_GET['id'];
18. $result = mysqli_query($conn, "SELECT * FROM kontak
WHERE id=$id");
19. $kontak = mysqli_fetch_array($result)
25. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
25
Gambar 6. Contoh tampilan halaman editkontak.php
5) Delete
File deletekontak.php hanya dipanggil saat kita klik link 'Hapus'
untuk kontak manapun yang dipilih.
1. <?php
2. // Membuka koneksi database menggunakan file config
3. require_once("dbconfig.php");
4.
5. // Hapus data sesuai id
6. $id = $_GET['id'];
7. $result = mysqli_query($conn, "DELETE FROM kontak WHERE
id=$id");
8.
9. // redirect ke list
10. header("Location: listkontak.php");
11. ?>
F. Template
Untuk mempercantik tampilan aplikasi web kita, pada pelatihan
kali ini akan menggunakan template (cetakan). Template yang akan kita
gunakan adalah AdminLTE. Template AdminLTE dibangun di atas
26. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
26
Bootstrap 3, AdminLTE menyediakan berbagai komponen yang
responsif, dapat digunakan kembali, dan umum digunakan. Dengan
menambahkan tema AdminLTE pada file halaman yang kita buat,
nantinya akan membuat tampilan aplikasi web jadi lebih menarik serta
lebih responsif.
1) Mengubah Create
Dengan menambahkan class dan id yang sesuai dengan tema
AdminLTE pada file kontakbaru.php, akan didapatkan tampilan input
yang jauh lebih baik daripada hanya menggunakan HTML saja.
1. ...
2. <form
action="kontakbaru2.php" method="post" class="form-
horizontal">
3. <div class="box-body">
4. <div class="form-group">
5. <label for="inputNama" class="col-sm-2
control-label">Nama</label>
6.
7. <div class="col-sm-10">
8. <input type="text" class="form-
control" id="inputNama" name="nama" placeholder="Nama">
9. </div>
10. </div>
11. <div class="form-group">
12. <label for="inputEmail" class="col-
sm-2 control-label">Email</label>
13.
14. <div class="col-sm-10">
15. <input type="email" class="form-
control" id="inputEmail" name="email" placeholder="Email">
16. </div>
17. </div>
18. <div class="form-group">
27. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
27
19. <label for="inputHP" class="col-sm-2
control-label">HP</label>
20.
21. <div class="col-sm-10">
22. <input type="text" class="form-
control" id="inputHP" name="hp" placeholder="081XXXXXXX">
23. </div>
24. </div>
25. </div>
26. <!-- /.box-body -->
27. <div class="box-footer">
28. <input
type="hidden" name="submit" value="key">
29. <button type="submit" class="btn btn-
info pull-right">Tambah</button>
30. </div>
31. <!-- /.box-footer -->
32. </form>
33. ...
Gambar 7. Tampilan baru kontakbaru.php
28. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
28
2) Mengubah Read
Dengan menambahkan class dan id yang sesuai dengan tema
AdminLTE pada file listkontak.php, akan didapatkan tampilan tabel
yang jauh lebih baik daripada hanya menggunakan HTML saja.
1. ...
2.
3. <table id="tabel2" class="table table-bordered
table-striped">
4. <thead>
5. <tr>
6. <th>Nama</th>
7. <th>Email</th>
8. <th>HP</th>
9. <th>Aksi</th>
10. </tr>
11. </thead>
12. <tbody>
13. <?php
14. while($kontak = mysqli
_fetch_array($result)) {
15. echo "<tr>";
16. echo "<td>".$k
ontak['nama']."</td>";
17. echo "<td>".$k
ontak['email']."</td>";
18. echo "<td>".$k
ontak['hp']."</td>";
19. echo "<td><button
type="submit" class="btn btn-block btn-
warning" onclick="window.location.assign('editkontak2.php?
id=".$kontak["id"]."');">Ubah</button><button
type="submit" class="btn btn-block btn-
danger" onclick="window.location.assign('deletekontak2.php
?id=".$kontak["id"]."');">Hapus</button></td>";
20. echo "</tr>";
29. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
29
21. }
22. ?>
23. </tbody>
24. <tfoot>
25. <tr>
26. <th>Nama</th>
27. <th>Email</th>
28. <th>HP</th>
29. <th>Aksi</th>
30. </tr>
31. </tfoot>
32. </table>
33. ...
Gambar 8. Tampilan baru listkontak.php
30. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
30
3) Mengubah Update
Dengan menambahkan class dan id yang sesuai dengan tema
AdminLTE pada file editkontak.php, akan didapatkan tampilan input
yang jauh lebih baik daripada hanya menggunakan HTML saja.
1. ...
2. <form action="editkontak2.php" method="post"
class="form-horizontal">
3. <div class="box-body">
4. <div class="form-group">
5. <label for="inputNama" class="col-sm-2
control-label">Nama</label>
6.
7. <div class="col-sm-10">
8. <input type="text" class="form-control"
id="inputNama" name="nama" placeholder="Nama"
value=<?php echo $kontak['nama'];?>>
9. </div>
10. </div>
11. <div class="form-group">
12. <label for="inputEmail" class="col-
sm-2 control-label">Email</label>
13.
14. <div class="col-sm-10">
15. <input type="email" class="form-
control" id="inputEmail" name="email" placeholder="Email"
value=<?php echo $kontak['email'];?>>
16. </div>
17. </div>
18. <div class="form-group">
19. <label for="inputHP" class="col-sm-2
control-label">HP</label>
20.
21. <div class="col-sm-10">
22. <input type="text" class="form-
control" id="inputHP" name="hp" placeholder="081XXXXXXX"
value=<?php echo $kontak['hp'];?>>
31. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
31
23. </div>
24. </div>
25. </div>
26. <!-- /.box-body -->
27. <div class="box-footer">
28. <input type="hidden"
name="update" value="key">
29. <input type="hidden"
name="id" value=<?php echo $_GET['id'];?>>
30. <button type="submit" class="btn btn-
info pull-right">Ubah</button>
31. </div>
32. <!-- /.box-footer -->
33. </form>
34. ...
Gambar 9. Tampilan baru editkontak.php
4) Optimasi
Dengan menggunakan cara sebelumnya, semua data akan
dimasukkan ke dalam halaman ketika sedang melihat halaman
tersebut. Cara ini cukup memberatkan browser karena harus
mengambil data yang lebih banyak apabila data yang akan
32. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
32
ditampilkan sangatlah banyak. DataTables pada bootstrap dapat
mengatasi hal ini dengan mengambil dan menampilkan hanya
beberapa data saja ketika membuka halaman. Dengan menambahkan
file datalistkontak.php yang nanti akan memberi data kepada
DataTables dalam bentuk format json. Maka membuka data yang
banyak akan selalu lebih ringan karena data yang ditampilkan saja
yang diambil dari database.
Perubahan pada file listkontak.php. Pada hasilnya nanti tampilan
di browser muncul sama seperti sebelumnya namun dengan
kecepatan memuat yang lebih cepat.
1. ...
2. <table id="tabel3" class="table table-bordered table-
striped">
3. <thead>
4. <tr>
5. <th>Nama</th>
6. <th>Email</th>
7. <th>HP</th>
8. <th>Aksi</th>
9. </tr>
10. </thead>
11. <tfoot>
12. <tr>
13. <th>Nama</th>
14. <th>Email</th>
15. <th>HP</th>
16. <th>Aksi</th>
17. </tr>
18. </tfoot>
19. </table>
20. <script>
21. $(function () {
22. $(document).ready(function() {
33. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
33
23. var dataTable = $('#tabel3').DataTable
( {
24. "processing": true,
25. "serverSide": true,
26. "order": [[ 2, "asc" ]],
27. "ajax":{
28. url :"datalistkontak.p
hp", // json datasource
29. type: "post", //
method , by default get
30. error: function(){ //
error handling
31. $(".record-
grid-error").html("");
32. $("#tabel3").a
ppend('<tbody class="record-grid-error"><tr><th
colspan="4">Data tidak ditemukan</th></tr></tbody>');
33. $("#record-
grid_processing").css("display","none");
34. }
35. }
36. } );
37. } );
38. })
39. </script>
40. ...
Isi pada file datalistkontak.php sebagai sumber data dari
datalistkontak.php
1. <?php
2. // Membuka koneksi database menggunakan file config
3. require_once("dbconfig.php");
4.
5. // storing request (ie, get/post) global array to a
variable
6. $requestData= $_REQUEST;
7.
34. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
34
8. $columns = array(
9. // datatable column index => database column name
10. 0 => 'nama',
11. 1 => 'email',
12. 2 => 'hp',
13. 3 => 'id',
14. );
15.
16. // getting total number records without any search
17. $sql = "select count(id) from kontak";
18. $query = mysqli_query($conn, $sql) or trigger_error(my
sqli_error($conn));
19. $row = mysqli_fetch_array($query);
20. $totalData = $row[0];
21. $totalFiltered = $totalData; // when there is no
search parameter then total number rows = total number
filtered rows.
22.
23. if( !empty($requestData['search']['value']) ) {
24. // if there is a search parameter
25. $sql = "SELECT *from kontak";
26. $sql.=" where nama LIKE
'%".$requestData['search']['value']."%' "; //
$requestData['search']['value'] contains search parameter
27. $sql.=" or email LIKE
'%".$requestData['search']['value']."%' "; //
$requestData['search']['value'] contains search parameter
28. $sql.=" or hp LIKE
'%".$requestData['search']['value']."%' "; //
$requestData['search']['value'] contains search parameter
29. $query=mysqli_query($conn, $sql) or trigger_er
ror(mysqli_error($conn));
30. $totalFiltered = mysqli_num_rows($query); //
when there is a search parameter then we have to modify total
number filtered rows as per search result without limit in
the query
31.
35. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
35
32. $sql.=" ORDER BY
". $columns[$requestData['order'][0]['column']]." ".$reque
stData['order'][0]['dir']." LIMIT
".$requestData['start']."
,".$requestData['length']." "; //
$requestData['order'][0]['column'] contains colmun index,
$requestData['order'][0]['dir'] contains order such as
asc/desc , $requestData['start'] contains start row number
,$requestData['length'] contains limit length.
33. $query=mysqli_query($conn, $sql) or trigger_er
ror(mysqli_error($conn)); // again run query with limit
34. } else {
35. $sql = "SELECT *from kontak";
36. $sql.=" ORDER BY
". $columns[$requestData['order'][0]['column']]." ".$reque
stData['order'][0]['dir']." LIMIT
".$requestData['start']." ,".$requestData['length']." ";
37. $query=mysqli_query($conn, $sql) or trigger_er
ror(mysqli_error($conn));
38. }
39.
40. $data = array();
41. while( $row=mysqli_fetch_array($query) ) { //
preparing an array
42. $nestedData=array();
43. $nestedData[] = $row["nama"];
44. $nestedData[] = $row["email"];
45. $nestedData[] = $row["hp"];
46. $nestedData[] = "<button
type="submit" class="btn btn-block btn-
warning" onclick="window.location.assign('editkontak3.php?
id=".$row["id"]."');">Ubah</button><button
type="submit" class="btn btn-block btn-
danger" onclick="window.location.assign('deletekontak3.php
?id=".$row["id"]."');">Hapus</button>";
47. $data[] = $nestedData;
48. }
49.
36. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
36
50. $json_data = array(
51. "draw" => intval( $
requestData['draw'] ), // for every request/draw by
clientside , they send a number as a parameter, when they
recieve a response/data they first check the draw number, so
we are sending same number in draw.
52. "recordsTotal" => intval( $
totalData ), // total number of records
53. "recordsFiltered" => intval( $
totalFiltered ), // total number of records after searching,
if there is no searching then totalFiltered = totalData
54. "data" => $data //
total data array
55. );
56.
57. echo json_encode($json_data); // send data as json
format
58. ?>
G. Menampilkan Dashboard
Pada tema AdminLTE memiliki banyak template desain
dashboard yang banyak. Salah satunya kita dapat menampilkan
berapa banyak kontak yang ada pada database kita. Bisa kita
tampilkan dengan kode berikut ini.
1. <?php
2. // Membuka koneksi database menggunakan file config
3. require_once("dbconfig.php");
4.
5. // Ambil semua data kontak dari database
6. $result = mysqli_query($conn, "select count(id) from
kontak");
7. $row = mysqli_fetch_array($result);
8. $jumlah = $row[0];
9. ?>
38. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
38
44. <h3><?php echo $jumlah; ?></h3>
45.
46. <p>Kontak +Tema+DataTable</p>
47. </div>
48. <div class="icon">
49. <i class="ion ion-person-add"></i>
50. </div>
51. <a href="listkontak3.php" class="small-box-
footer">Lihat Kontak <i class="fa fa-arrow-circle-
right"></i></a>
52. </div>
53. </div>
54. ...
Hasilnya akan menjadi seperti Gambar 10.
Gambar 10. Tampilan Dashboard
39. Modul Pelatihan Pengembangan Aplikasi Web dengan CMS dan Bootstrap
39
Referensi
1. XAMPP: https://www.apachefriends.org/index.html,
2. PHP: https://php.net
3. Bootstrap: https://getbootstrap.com
4. AdminLTE: https://adminlte.io