Bu yazımda sizlere Spring MVC , Ajax ve jQuery , önyüzde ise Semantic UI kullanarak bir kayıt işleminin nasıl gerçekleştiğinden bahsedeceğim.
Senaryomuz şu şekildedir;
- Ad,Soyad,Şifre,Eposta ve Doğum Tarihi alanlarına kullanıcı verilerini girecek.
- Girilen bu veriler Semantic UI form validationundan geçecek.
- Eğer validation başarılı ise kayıt işlemini yapacak.
Semantic UI hakkında daha fazla bilgiye buradan ulaşabilirsiniz.
Senaryomuzu oluşturduğumuza göre artık işin kodlama kısmına geçebiliriz.
springrestornek.jsp
<%@
page
language="java"
contentType="text/html;
charset=UTF-8"
pageEncoding="UTF-8"
isELIgnored="false"%>
<%@
taglib
uri="http://www.springframework.org/tags/form"
prefix="form"%>
<%@
taglib
uri="http://java.sun.com/jsp/jstl/core"
prefix="c"%>
<%@
taglib
uri="http://www.springframework.org/tags"
prefix="s"%>
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8">
<script
src="<c:url
value="/resources/js/springrestornek.js?v=1.1"
/>"></script>
</head>
<body>
<div
id="container"
style="width:600px;margin-left:
400px;height:
300px;" align="center">
<h2
style="color:
orange;">Yeni
Kayıt</h2>
<div
id="sroResponse"></div>
<form:form
id="kayitRestFormId"
cssClass="ui
tiny form"
commandName="sro"
cssStyle="text-align:
center;"
action="${pageContext.request.contextPath}/springrestornek/create.json">
<div
class="two
fields"
>
<div
class="field">
<label><s:message
code="springrestornek.ad"
/></label>
<form:input
path="ad"
cssStyle="width:220px;"
placeholder="Ad"/>
</div>
<div
class="field">
<label><s:message
code="springrestornek.soyad"/></label>
<form:input
path="soyad"
cssStyle="width:220px;"
placeholder="Soyad"/>
</div>
</div>
<div
class="two
fields">
<div
class="field">
<label><s:message
code="springrestornek.sifre"/></label>
<form:input
type="password"
path="sifre"
cssStyle="width:220px;"
placeholder="Şifre"/>
</div>
<div
class="field">
<label><s:message
code="springrestornek.eposta"/></label>
<form:input
path="eposta"
cssStyle="width:220px;"
placeholder="E-Posta"/>
</div>
</div>
<div
class="two
fields">
<div
class="field">
<label><s:message
code="springrestornek.dogumtarihi"/></label>
<form:input
path="dogumtarihi"
id="dogumtarihi"
name="dogumtarihi"
cssStyle="width:220px;"
placeholder="Doğumtarihi"/>
</div>
</div>
<div
class="ui
error message"></div>
<input
type="submit"
id="saveButton"
class="ui
primary button"
value="<s:message
code="register.save"/>"
/>
<input
type="reset"
class="ui
button"
value="<s:message
code="register.clear"/>"
/>
</form:form>
<a
href="${pageContext.request.contextPath}/springrestornekliste">Liste</a>
</div>
</body>
</html>
springrestornek.js
$(document).ready(function(){
var
picker
=
new
Pikaday(
{
field:
document.getElementById('dogumtarihi'),
firstDay:
1,
format
:
'DD.MM.YYYY',
minDate:
new
Date(1900,
0,
1),
maxDate:
new
Date(2016,
12,
31),
yearRange:
[1900,2016],
i18n:
{
previousMonth
:
'Önceki',
nextMonth
:
'Sonraki',
months
: ['Ocak','Şubat','Mart','Nisan','Mayıs','Haziran','Temmuz','Ağustos','Eylül','Ekim','Kasım','Aralık'],
weekdays
:
['Pazar','Pazartesi','Salı','Çarşamba','Perşembe','Cuma','Cumartesi'],
weekdaysShort
:
['Paz','Pzt','Sal','Çar','Per','Cum','Cmt']
}
});
$('#kayitRestFormId').submit(function(event)
{
var
ad
=
$('#ad').val();
var
soyad
=
$('#soyad').val();
var
sifre
=
$('#sifre').val();
var
eposta
=
$('#eposta').val();
var
dogumtarihi
=
$('#dogumtarihi').val();
var
json
=
{
"ad"
:
ad,
"soyad"
:
soyad,
"sifre":
sifre
,
"eposta"
:
eposta
,
"dogumtarihi"
:
dogumtarihi};
var
rules
=
{
on
:
'blur',
inline
:
true,
fields:
{
ad:
{
identifier:
'ad',
rules:
[
{
type
:
'empty',
prompt
:
'Ad
boş geçilemez!'
}
]
},
soyad:{
identifier
:
'soyad',
rules:
[{
type
:
'empty',
prompt
:
'Soyad
boş geçilemez!'
}]
},
sifre:{
identifier
:
'sifre',
rules:
[{
type:
'empty',
prompt
:
'Şifre
boş geçilemez!'
}]
}
}
};
$('#kayitRestFormId').form(rules);
if($('#kayitRestFormId').form('validate
form')){
$.ajax({
url:
$("#kayitRestFormId").attr(
"action"),
data:
JSON.stringify(json),
type:
"POST",
beforeSend:
function(xhr)
{
xhr.setRequestHeader("Accept",
"application/json");
xhr.setRequestHeader("Content-Type",
"application/json");
},
success:
function(smartphone)
{
var
respContent
=
"";
respContent
+=
"<a
class='ui green label'>Kayıt Başarılı.</a>";
$("#sroResponse").html(respContent);
}
});
}
event.preventDefault();
});
});
SpringRESTOrnekController.java
package
com.mesutemre.controller;
import
org.springframework.beans.factory.annotation.Autowired;
import
org.springframework.http.MediaType;
import
org.springframework.stereotype.Controller;
import
org.springframework.ui.Model;
import
org.springframework.web.bind.annotation.RequestBody;
import
org.springframework.web.bind.annotation.RequestMapping;
import
org.springframework.web.bind.annotation.RequestMethod;
import
org.springframework.web.bind.annotation.ResponseBody;
import
com.mesutemre.dao.SpringRestOrnekDAO;
import
com.mesutemre.model.SpringRestOrnek;
/**
*
@author
mesudemre
*
*/
@Controller
@RequestMapping(value
= "/springrestornek")
public
class
SpringRESTOrnekController {
@Autowired
private
SpringRestOrnekDAO service;
@RequestMapping(value
= ""
, method = RequestMethod.GET)
public
String showSpringRestOrnekPage(Model model){
model.addAttribute("sro",
new
SpringRestOrnek());
return
"springrestornek";
}
@RequestMapping(value
= "/create"
, method = RequestMethod.POST
, produces = MediaType.APPLICATION_JSON_VALUE,
consumes = MediaType.APPLICATION_JSON_VALUE)
@ResponseBody
public
SpringRestOrnek createSpringRestOrnek(@RequestBody
SpringRestOrnek sro){
return
service.saveSpringRestOrnek(sro);
}
}
Kayıt işlemimize ait ekran görüntüleri aşağıda ki gibi olur.
