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



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

3. tambahkan method consctuct BarangController


[sourcecode language="java"]@ModelAttribute("barang")
public Barang constructBarang(){
return new Barang();
}[/sourcecode]


4. Edit dan tambahkan script pada baranglist.jsp

file baranglist.jsp sekarang seperti ini :


[sourcecode language="xml"]

<%@ 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>

[/sourcecode]


5. Tambahkan controller untuk simpan pada BarangController


[sourcecode language="java"]@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";
}[/sourcecode]


6. Menambahkan pesan/notifikasi data berhasil disimpan


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


7. Testing hasil

tampilan awal ketika menu Barang di-klik



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



 

ketika tombol Simpan diklik maka ada notifikasi data berhasil disimpan :



Alhamdulillah