membuat modal bootstrap untuk form simpan

Membuat form simpan untuk data barang

Bismillah

Melanjutkan tulisan ini :
https://saifiahmada.wordpress.com/2014/12/13/css-menu-aktif-ketika-pilih-menu/

1. buka getbootstrap.com > menu JavaScript > link Modal

2. copy paste pada example Modal ke file baranglist.jsp

3. tambahkan method consctuct BarangController

4. Edit dan tambahkan script pada baranglist.jsp

5. Tambahkan controller untuk simpan pada BarangController

6. Menambahkan pesan/notifikasi data berhasil disimpan

7. Testing hasil

q> – – – mulai – – –

1. buka getbootstrap.com > menu JavaScript > link Modal

Selection_623

2. copy paste pada example Modal ke file baranglist.jsp

3. tambahkan method consctuct BarangController

@ModelAttribute("barang")
public Barang constructBarang(){
return new Barang();
}

4. Edit dan tambahkan script pada baranglist.jsp

file baranglist.jsp sekarang seperti ini :


<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<%@ include file="../layout/taglib.jsp"%>

<c:if test="${param.success eq true }">
<div class="alert alert-success">Data berhasil disimpan !</div>
</c:if>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal"
data-target="#myModal">Tambah Barang</button>

<form:form commandName="barang" cssClass="form-horizontal">

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Tambah Barang</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="kode" class="col-sm-2 control-label">Kode</label>
<div class="col-sm-10">
<form:input path="kode" cssClass="form-control" />
</div>
</div>

<div class="form-group">
<label for="nama" class="col-sm-2 control-label">Nama</label>
<div class="col-sm-10">
<form:input path="nama" cssClass="form-control" />
</div>
</div>

<div class="form-group">
<label for="harga" class="col-sm-2 control-label">Harga</label>
<div class="col-sm-10">
<form:input path="harga" cssClass="form-control" />
</div>
</div>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
<input type="submit" class="btn btn-primary" value="Simpan" />
</div>
</div>
</div>
</div>
</form:form>

<br />
<br />

<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<td>Kode</td>
<td>Nama Barang</td>
<td>Harga</td>
</tr>
</thead>
<tbody>
<c:forEach items="${barangs}" var="barang">
<tr>
<td>${barang.kode}</td>
<td>${barang.nama}</td>
<td>${barang.harga}</td>
</tr>
</c:forEach>
</tbody>
</table>

5. Tambahkan controller untuk simpan pada BarangController

@RequestMapping(value="/barang/list", method=RequestMethod.POST)
public String simpan(@ModelAttribute("barang") Barang barang){
System.out.println("simpan");
barangService.save(barang);
return "redirect:/barang/list.html?success=true";
}

6. Menambahkan pesan/notifikasi data berhasil disimpan

<c:if test="${param.success eq true }">
<div class="alert alert-success">Data berhasil disimpan !</div>
</c:if>

7. Testing hasil

tampilan awal ketika menu Barang di-klik

Selection_624

klik menu Tambah Barang, kemudian isi data barang dan klik tombol Simpan

Selection_625

 

ketika tombol Simpan diklik maka ada notifikasi data berhasil disimpan :

Selection_626

Alhamdulillah

Published by

saifiahmada

Begin a big Process with a bit trying

2 thoughts on “membuat modal bootstrap untuk form simpan”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s