membuat detail data dengan modal bootstrap

share

membuat detail data dengan modal bootstrap membuat detail data dengan modal bootstrap membuat detail data dengan modal bootstrap membuat detail data dengan modal bootstrap membuat detail data dengan modal bootstrap
  • membuat detail data dengan modal bootstrap

    Cara Membuat Detail Data dengan Modal Bootstrap


    Tutorial cara membuat detail data dengan modal bootstrap sehingga halaman web akan menampilkan informasi dinamis dalam bentuk interface dialog atau jendela pop up ketika suatu event tertentu di klik maupun event otomatis.
  • membuat detail data dengan modal bootstrap
    Service
    1. Complete Website
    2. Only web script
    3. Web modification
    4. Application program
    5. Free web template
    6. Free application
    7. Basic SEO
    8. Article request
    9. Tutorial programing
  • membuat detail data dengan modal bootstrap
    MOTO
    "Kepuasan Pelanggan adalah Prioritas kami, Sebagai Pemicu Semangat Dalam Memberikan Pelayanan Terbaik".
  • membuat detail data dengan modal bootstrap Teknologi dan Bahasa
    PHP-5, HTML-5, CSS3, SQL Server, MySQL Database, Access Database, Java, JavaScript, dan Visual Basic.
  • membuat detail data dengan modal bootstrap
    VISI
    "Menjadi penyedia layanan yang terpercaya dan maju dalam dunia Teknologi Informasi."

Cara Membuat Detail Data dengan Modal Bootstrap

Cara membuat detail data dengan modal bootstrap sehingga halaman web akan menampilkan informasi dinamis dalam bentuk interface dialog atau jendela pop up ketika suatu event tertentu di klik maupun event otomatis. Modal atau jendela pop up adalah sebuah elemen halaman web dengan tampilan kotak dialog atau lightbox pada halaman muka depan dan akan menonaktifkan semua konten halaman lainnya. Jadi, modal bootstrap ini selain untuk menampilkan konfirmasi, juga dapat digunakan untuk membuat detail data dinamis dari table database menggunakan sebuah relasi data atau primary key sebagai index data. Akan tetapi pada pembahasan kali ini kita akan fokus pada bagaimana cara membuat detail data dalam tampilan pop up modal bootstrap sehingga akan menampilkan informasi dinamis yang lengkap sesuai kebutuhan.

Tutorial cara membuat detail data dengan modal bootstrap sehingga menjadi sebuah halaman yang dapat menampilkan data detail responsive pada jendela dialog atau jendela pop up. Bagaimana modal bootstrap tersebut dapat terjadi, itu membutuhkan sebuah event klik, dimana event tersebut harus menyesuaikan antara data target dengan index atau id yang dipilih. Untuk membuat modal bootstrap atau jendela pop up ini boleh dilakukan pada versi 5.3.0 alpha3 atau boleh juga memakai versi yang lebih baru yang dapat didownload secara gratis.


Cara Membuat Detail Data dengan Modal Bootstrap

modal bootstrap

membuat detail data dengan modal bootstrap

Pembahasan cara membuat detail data dengan modal bootstrap akan kita pelajari menjadi beberapa langkah, mulai dari direktori folder asset, sampai dengan membuat kode program dengan script HTML untuk menampilkan data dan action detail di modal bootstrap.

  • Download bootstrap di website getbootstrap
  • Membuat direktori folder di htdocs
  • Membuat kode program dengan script HTML untuk menampilkan data dan detail di modal bootstrap.


1. Download Framework Bootstrap

Download assets bootstrap terbaru dapat di unduh langsung pada situs resmi getbootstrap.com, di dalamnya terdapat kompilasi kode CSS dan JavaScript, dan atau source code examples. Kemudian ekstrak file rar, nanti akan menghasilkan assets dengan nama folder "CSS" dan javascript "JS", kemudian simpan sementara pada folder yang telah dibuat, sebaiknya langsung di htdocs.


2. Membuat Folder Direktori Tutorial Modal Bootstrap

Agar tutorial cara membuat detail data dengan modal bootstrap mudah dijalankan pada web browser, maka sebaiknya langsung saja buat nama folder tutorial pada direktori xampp htdocs. Sebagai contoh nama folder nya adalah "modal-bootstrap", sehingga url folder pada direktori xampp menjadi C:\xampp\htdocs\modal-bootstrap\.

Selanjutnya di dalam folder "modal-bootstrap" tersebut buat lagi sebuah folder dengan nama "assets" yang berfungsi untuk menyimpan kompilasi kode framework bootstrap yaitu folder "CSS" dan "JS" yang telah didownload.

Sehingga saat ini di dalam folder \modal-bootstrap\assets\ terdapat susunan 2 nama folder yaitu css dan js seperti pada gambar di bawah ini.

membuat detail data dengan modal bootstrap


3. Membuat File Index dengan HTML untuk Menampilkan Data dan Modal Detail

File html ini digunakan sebagai homepage dan sekaligus akan menampilkan data dalam tabel, dimana pada setiap baris tabel terdapat tombol untuk event detail data. Coding script kode program membuat detail data dengan modal bootstrap juga dilakukan pada file ini, yang dijalankan oleh tombol detail data. Pastikan simpan file index ini ke folder direktori utama yaitu \modal-bootstrap\, sehingga sejajar dengan folder "assets" modal bootstrap.

Save as index.html

<!DOCTYPE html>
<html lang="id">
<head>
	<title>Membuat Detail Data dengan Modal Bootstrap</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="panel-body">
			<h3>Data Pegawai</h3>
			<table class="table table-striped table-bordered nowrap" width="100%">
				<thead>
					<tr>
						<th width="4%">No.</th>
						<th>NIP</th>
						<th>Nama Pegawai</th>
						<th>TTL</th>
						<th>No. HP</th>
						<th width="8%">Action</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>198702082019071019</td>
						<td>Siska Nur Aminah</td>
						<td>Cilacap, 8 Februari 1987</td>
						<td>081289980110</td>
						<td class="text-center">
							<!-- Trigger the modal with a button -->
							<a type="button" class="btn btn-success btn-icon btn-xs" data-toggle="modal" data-target="#Detail1" title="detail">Detail</a>
						</td>
					</tr>
					<tr>
						<td>2</td>
						<td>199212092021112089</td>
						<td>Galang Budiman</td>
						<td>Banyumas, 9 Desember 1992</td>
						<td>08778993212</td>
						<td class="text-center">
							<!-- Trigger the modal with a button -->
							<a type="button" class="btn btn-success btn-icon btn-xs" data-toggle="modal" data-target="#Detail2" title="detail">Detail</a>
						</td>
					</tr>
					<tr>
						<td>3</td>
						<td>198802152018121044</td>
						<td>Nadir Suhendar, ST</td>
						<td>Banjarnegara, 15 Frebruari 1988</td>
						<td>023188792712</td>
						<td class="text-center">
							<!-- Trigger the modal with a button -->
							<a type="button" class="btn btn-success btn-icon btn-xs" data-toggle="modal" data-target="#Detail3" title="detail">Detail</a>
						</td>
					</tr>
					<!-- Modal -->
					<div class="modal fade" id="Detail1" role="dialog">
						<div class="modal-dialog">
							<!-- Modal content-->
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal">×</button>
									<h4 class="modal-title">Detail Data Pegawai</h4>
								</div>
								<div class="col-md-12">
									<div class="modal-body">
										<label class="col-md-4">NIP</label>
										<span class="col-md-8">: 198702082019071019</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Nama</label>
										<span class="col-md-8">: Siska Nur Aminah</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Tempat Tanggal Lahir</label>
										<span class="col-md-8">: Cilacap, 8 Februari 1987</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">No. HP</label>
										<span class="col-md-8">: 081289980110</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Jenis Kelamin</label>
										<span class="col-md-8">: Perempuan</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Agama</label>
										<span class="col-md-8">: Islam</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Gol. Darah</label>
										<span class="col-md-8">: AB</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Status Pernikahan</label>
										<span class="col-md-8">: Nikah</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Alamat</label>
										<span class="col-md-8">: Desa Mujurujak RT. 02/03 Jeruklegi kulon, Cilacap Barat, Cilacap</span>
									</div>
									<br />
									<br />
									<div class="modal-body">
										<label class="col-md-4">Status Kepegawaian</label>
										<span class="col-md-8">: PNS</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Pangkat</label>
										<span class="col-md-8">: Penata Tk. I</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Golongan</label>
										<span class="col-md-8">: III/D</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Jabatan</label>
										<span class="col-md-8">: Staff Perencanaan Dan Keuangan</span>
									</div>
								</div>
								<div class="modal-footer">
									 
								</div>
							</div>
						</div>
					</div>
					<!-- Modal -->
					<div class="modal fade" id="Detail2" role="dialog">
						<div class="modal-dialog">
							<!-- Modal content-->
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal">×</button>
									<h4 class="modal-title">Detail Data Pegawai</h4>
								</div>
								<div class="col-md-12">
									<div class="modal-body">
										<label class="col-md-4">NIP</label>
										<span class="col-md-8">: 199212092021112089</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Nama</label>
										<span class="col-md-8">: Galang Budiman</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Tempat Tanggal Lahir</label>
										<span class="col-md-8">: Banyumas, 9 Desember 1992</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">No. HP</label>
										<span class="col-md-8">: 08778993212</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Jenis Kelamin</label>
										<span class="col-md-8">: Laki-laki</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Agama</label>
										<span class="col-md-8">: Islam</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Gol. Darah</label>
										<span class="col-md-8">: O</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Status Pernikahan</label>
										<span class="col-md-8">: Nikah</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Alamat</label>
										<span class="col-md-8">: Desa Kaligesing RT. 04/01 Bantaran, Cilacap Utara, Cilacap</span>
									</div>
									<br />
									<br />
									<div class="modal-body">
										<label class="col-md-4">Status Kepegawaian</label>
										<span class="col-md-8">: PNS</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Pangkat</label>
										<span class="col-md-8">: Penata Tk. I</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Golongan</label>
										<span class="col-md-8">: III/E</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Jabatan</label>
										<span class="col-md-8">: Staff Kepegawaian</span>
									</div>
								</div>
								<div class="modal-footer">
									 
								</div>
							</div>
						</div>
					</div>
					<!-- Modal -->
					<div class="modal fade" id="Detail3" role="dialog">
						<div class="modal-dialog">
							<!-- Modal content-->
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal">×</button>
									<h4 class="modal-title">Detail Data Pegawai</h4>
								</div>
								<div class="col-md-12">
									<div class="modal-body">
										<label class="col-md-4">NIP</label>
										<span class="col-md-8">: 198802152018121044</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Nama</label>
										<span class="col-md-8">: Nadir Suhendar, ST</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Tempat Tanggal Lahir</label>
										<span class="col-md-8">: Banjarnegara, 15 Frebruari 1988</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">No. HP</label>
										<span class="col-md-8">: 023188792712</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Jenis Kelamin</label>
										<span class="col-md-8">: Laki-laki</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Agama</label>
										<span class="col-md-8">: Islam</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Gol. Darah</label>
										<span class="col-md-8">: B</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Status Pernikahan</label>
										<span class="col-md-8">: Nikah</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Alamat</label>
										<span class="col-md-8">: Grand Salakan A7 No. 11, Cilacap Utara, Cilacap</span>
									</div>
									<br />
									<br />
									<div class="modal-body">
										<label class="col-md-4">Status Kepegawaian</label>
										<span class="col-md-8">: PNS</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Pangkat</label>
										<span class="col-md-8">: Pembina</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Golongan</label>
										<span class="col-md-8">: IV/A</span>
									</div>
									<div class="modal-body">
										<label class="col-md-4">Jabatan</label>
										<span class="col-md-8">: Kasubbag Kepegawaian</span>
									</div>
								</div>
								<div class="modal-footer">
									 
								</div>
							</div>
						</div>
					</div>
				</tbody>
			</table>
		</div>  
	</div>
</body>
</html>

Perhatikan kode baris ke 7, 8, dan 9 yang terletak di dalam tag head berikut ini.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Itu adalah asset javascript CDN bawaan bootstrap 4 yang harus diakses melalui koneksi internet, tetapi bisa juga dilakukan penyesuaian script ke versi offline, download satu per satu.

Kemudian pada tutorial membuat detail data dengan modal bootstrap ini ID yang digunakan adalah Detail1 dan seterusnya, jadi kita panggil saja menggunakan data target pada tombol detail dengan value #Detail1.


Sampai juga pada tahap uji coba tutorial cara membuat detail data dengan modal bootstrap sehingga terlihat data pada tabel yang dapat di klik detail untuk menampilkan detail data pada jendela pop up. Silahkan jalankan coding script modal bootstrap tersebut pada web browser dengan url localhost/modal-bootstrap/, pastikan tampil seperti gambar di bawah ini.

membuat detail data dengan modal bootstrap

Tutorial Cara Membuat Detail Data dengan Modal Bootstrap

Download Script Modal Bootstrap

Sekian penjelasan tutorial tentang modal pop up yaitu cara membuat detail data dengan modal bootstrap menggunakan kompilasi javascript CDN sehingga modal bootstrap dapat tampil ketika action tombol detail di klik. Jika terjadi gagal atau error atau tidak berhasil berjalan sebagaimana mestinya, silahkan hubungi kami melalui live chat atau form komentar. Semoga dapat membantu.

Baca juga :


Cara Membuat Detail Data dengan Modal Bootstrap

Tags: cara membuat detail data modal, membuat detail data bootstrap, detail data modal bootstrap, detail modal bootstrap, membuat detail data dengan modal bootstrap

Reliable

membuat detail data dengan modal bootstrap

Advertise

Archive

Payment & Donation

membuat detail data dengan modal bootstrap

Rekening BCA : 343 1156 006

a/n : Andi Hatmoko

Rekening MANDIRI : 13300 11921 079

a/n : Andi Hatmoko

membuat detail data dengan modal bootstrap

Account :

andihatmoko@gmail.com

Live Chat

David2023-09-29, 16:02 pm
Untuk aplikasi arsip berapa donasinya , terima kasih
AYI SYAHFITR2023-09-25, 10:33 am
Assalamualaikum, maaf apakah aplikasi ini berbayar atau bisa di instal bebas?
yulli2023-09-24, 17:09 pm
saya mau bertanya utk aplikasi sppd,brp dijualnya,terimakasih
yulli2023-09-24, 17:00 pm
saya mau bertanya utk aplikasi sppd,brp donasinya,
DENIEL AFRIA2023-09-20, 15:01 pm
berapa unruk program_ aplikasi_ surat_ masuk_ dan_ surat_ keluar
untuk harga 2023-09-20, 07:20 am
untuk harga aplikasi sipas brp min
Slamet2023-09-19, 10:05 am
untuk program aplikasi pendataan umkm, kalau boleh tahu dijual berapa?_ terima kasiih
Pria2023-09-14, 14:37 pm
untuk donasi menggunakan aplikasi ini berapa gan
Amot2023-09-09, 08:46 am
apakah framework nya php kak? berapa minimal donasi kak agar dpt password nya?
besse2023-08-25, 13:56 pm
minta kontak wa
rizal2023-08-24, 06:09 am
untuk harga aplikasi sipas brp min
Muji2023-08-20, 22:51 pm
Saya dan temen_ temen seorganisasi tertarik dengan Program Aplikasi Input Data Anggota, berapakah harga aplikasi tersebut
Auriga Danur2023-08-14, 11:32 am
File koneksi_ php nya kok gak ada ya?
Miftah2023-08-09, 16:36 pm
Apakah bisa develope aplikasi sistem management atlet, khususnya cabang olahraga atletik, data atlet, result event, dll
sutrisno2023-08-09, 11:45 am
bos haraga aplikasi surat berapa
Fahrul,S.Kom2023-08-07, 15:34 pm
saya tertarik dengan aplikasi SIPAS V2_ 0
ratna2023-07-30, 09:44 am
Mas aplikasi Sppd harganya berapa njih
Cien2023-07-25, 08:33 am
Buat biodata diri pakai tipe data boolean di php bagaimana min?
Viqi2023-07-20, 11:40 am
Untuk mendapatkan Aplikasi sarpras V4, Bayar berapa min?
Bimo Cakti T2023-07-13, 13:54 pm
aplikasi cuti online pegawai berapa min? mohon info
Dwi P2023-07-11, 21:45 pm
Mohon maaf mau menanyatakn aplikasi SIMPEG kira_ kira berapa harganya? Bisa dilist kan untuk semua SIMPEG
Duta2023-07-10, 18:38 pm
Saya ingin beli aplikasi Sipas V2_ 0
Alex2023-07-10, 11:38 am
Halo gan saya mau nanya2 dulu ya_ aplikasi perjalanan dinas SPD v2 itu bisa kita dapat source codenya donasi berap yah_ _
FIYO FAHREZI2023-07-09, 21:25 pm
Mas saya mau beli aplikasi KTP
sila susila2023-07-09, 17:06 pm
aplikasi pembayaran SPP sekolah donasi berapa klo untuk skripsi?
aa2023-07-06, 21:43 pm
net simpeg brp min?
aditya2023-06-22, 13:12 pm
berapa harga untuk aplikasi inventory? bagaimana transaksinya?
michael 2023-06-20, 23:06 pm
saya mau tanya kalo penamabahan harga untuk jumlah keseluruhan nya tu bgimana ya? terima kasih
Muhadi2023-06-20, 12:14 pm
Software aplikasi pembayaran SPP sekolah bisa diakses pakai HP tidak?
Fadly2023-06-18, 20:41 pm
Source code aplikasi arsip digital di jual harga berapa min? minat SC nya saja
Marisca2023-06-13, 08:16 am
Saya sedang diklat PIM IV, rencana akan memakai aplikasi kepegawaian simpeg untuk proyek perubahan, bisa dibantu?

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 
membuat detail data dengan modal bootstrap

Copyright © 2013. All Rights Reserved. Jasa Pembuatan Website - Raja Putra Mediamembuat detail data dengan modal bootstrap