Spring MVC - how to add item to cart? - java

I'm writing an application which is very basic Online Shop. I got phones category here (2 phones available), and after click one of them new page with info about phone displays, under description I got button "add to cart", and here is a thing - I want that after click the button all informations about that phone will go to database and display them at the same time in page "cart". Connection to db and managing data in IDE isn't problematic for me, but how "Add to Cart" button will know which phone I chose (phone1 or phone2)? I should create another Controller for Cart or here is another solution for that?
PhoneController:
#Controller
#RequestMapping
public class PhoneController {
DBConnection db = new DBConnection();
Cart cart;
#RequestMapping(value="/phone1.html", method = RequestMethod.GET)
public ModelAndView phone1Page() {
ModelAndView phone1 = new ModelAndView("Phone1");
return phone1;
}
#RequestMapping(value="/phone2.html", method = RequestMethod.GET)
public ModelAndView phone2Page() {
ModelAndView phone2 = new ModelAndView("Phone2");
return phone2;
}
#RequestMapping(value="/cart.html", method = RequestMethod.POST)
public ModelAndView addToChart(){
ModelAndView cart = new ModelAndView("Cart");
return cart;
}
}
Phone1.jsp:
<form action="/OnlineShop/cart.html" method="post">
<div style="padding-right: 40px">
<table border="1">
<tr>
<td>Name</td>
<td>iPhone 6</td>
</tr>
<tr>
<td>Company</td>
<td>Apple</td>
</tr>
<tr>
<td>Type</td>
<td>Phone</td>
</tr>
<tr>
<td>Price</td>
<td>400$</td>
</tr>
</table>
<input type="submit" value="Add to Cart"/>
</div>
</form>
Cart.jsp:
<div style="padding-right: 40px">
<table border="1">
<tr>
<td>ID</td>
<td>Product</td>
<td>Name</td>
<td>Company</td>
<td>Type</td>
<td>Price</td>
<td>Action</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<display-name>OnlineShop</display-name>
<servlet>
<servlet-name>spring-dispatcher</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>spring-dispatcher</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
and spring-dispatcher-servlet.xml:
<context:component-scan base-package="com.damian.controller" />
<mvc:annotation-driven/>
<bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix">
<value>/WEB-INF/</value>
</property>
<property name="suffix">
<value>.jsp</value>
</property>
</bean>

Do a POST request to your /cart.html mapping with a request parameter for example: /cart.html?selected=iPhone6. Alternatively you could add form data to your post request with the information about the selected phone. I assume you have the phones also in a database with some sort of identifier, if you hide this identifier in your form then you could easily see which device was selected.
This is one way of solving the problem.
<form action="/OnlineShop/cart.html?selectedPhone=iPhone6" method="post">
<div style="padding-right: 40px">
<table border="1">
<tr>
<td>Name</td>
<td>iPhone 6</td>
</tr>
<tr>
<td>Company</td>
<td>Apple</td>
</tr>
<tr>
<td>Type</td>
<td>Phone</td>
</tr>
<tr>
<td>Price</td>
<td>400$</td>
</tr>
</table>
<input type="submit" value="Add to Cart"/>
</div>
</form>
And check the request parameter in your controller:
#RequestMapping(value="/cart.html", method = RequestMethod.POST)
public ModelAndView addToChart(#RequestParam String selectedPhone){
ModelAndView cart = new ModelAndView(selectedPhone);
return cart;
}

If you want all informations about the phone will go to database and display them at the same time in page cart you can try to add commandName like this:
But before you should create a dto class for ex: named PhoneClass
class public PhoneClass{
private name ...;
private ...
// and
setters and getters
}
<form action="/OnlineShop/cart.html" method="post" commandName="phoneInfo">
<div style="padding-right: 40px">
<table border="1">
<tr>
<td>Name</td>
<td>iPhone 6</td>
</tr>
...
<input type="submit" value="Add to Cart"/>
</div>
</form>
And in your controller you can do like this:
#RequestMapping(value="/cart.html", method = RequestMethod.POST)
public String someAction(#ModelAttribute("phoneInfo") PhoneClass phoneInfo, Model model) {
// TODO save un database attributes of `PhoneClass`
model.addAttribute("phoneInfo", phoneInfo);
return "somepage";
}
And in your page Cart.jspyou can use foreach of jstl to retrieve data from atrribute phoneInfo and put them in Cart.jsp like ths:
<div style="padding-right: 40px">
<table border="1">
<tr>
<c:forEach var="element" items="${phoneInfo}" varStatus="status">
<td> Name</td> <td>${status.name}</td>
....
</c:forEach>
</div>

Related

Thymeleaf Get data from Html

I need get data from html to controller with press button also Html data as list.
<thead>
<tr>
<th>Company Name</th>
<th>Book Name</th>
<th>Author</th>
<th>Price</th>
<th>Order</th>
</tr>
</thead>
<tbody>
<tr th:each="Books: ${Books }">
<td th:text="${Books.CompanyName}" />
<td th:text="${Books.BookName}" />
<td th:text="${Books.AuthorName}" />
<td th:text="${Books.Price}" />
<td th:button class="Order-Button" type="button" >Order</button> </td>
Also this is my Controller
#Autowired
private BookRep bookRep;
#RequestMapping(value = "/BookOrder")
ModelAndView submitBookOrder(){
ModelAndView mav = new ModelAndView("BookOrder");
mav.addObject("Books", bookRep.findAll());
return mav;
}
My expect to when user press take order button it will get row datas in controller
I wrote demo code for you. I think it will be useful for you. You can understand what you want by looking at the code
#GetMapping("/Books/{id}")
public String books(#PathVariable("id") Long id, Model model){
model.addAttribute("Books", bookService.getById(id));
return "book-list";
}
<-td> <-a th:href="#{/Books/{id}(id = ${book.id})}">
<-button type="submit" class="btn btn-info col-2" style="min-width: fit-content"> Books List<-/button>

Sending parameter inThymleaf using link urls #

I have the following form in my Thymleaf page:
<div class="panel-body">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Issue Date</th>
<th>Payment Schedule</th>
<th>Total</th>
<th>Status</th>
<th>Start Date</th>
<th>End Date</th>
<th>Send Invoice</th>
</tr>
</thead>
<tbody>
<tr class="table-row" th:each="p : ${POList}">
<td th:text="${p.issueDate}"></td>
<td th:text="${p.paymentSchedule}"></td>
<td th:text="${p.total}"></td>
<td th:text="${p.status}"></td>
<td th:text="${p.rentalPeriod.startDate}"></td>
<td th:text="${p.rentalPeriod.endDate}"></td>
<td>
<form style='float:left; padding:5px; height:0px' th:object="${po}" th:method="post" th:action="#{'/dashboard/makeAndSendInvoice(email=${po.Email})'}">
<button class="btn btn-default btn-xs" type="submit">Send Invoice</button>
</form>
</td>
</tr>
</tbody>
</table>
</div>
I have tried to send the value of po.Email to the method.
I thought the th:action="#{'/dashboard/makeAndSendInvoice(email=${po.Email})'}"
will make a link like dashboard/makeAndSendInvoice/{Email}
So i tried to get it in the method like this:
#RequestMapping(method=POST, path="makeAndSendInvoice")
public String makeAndSendInvoice(#PathVariable("email") String email){
System.out.println("Invoice is sent to..................."+email);
return "Invoice";
}
but it seems to me it does not work, since it does not recognize my method.
So how can recieve the po.Email in my method
Change th:action to:
th:action="#{/dashboard/makeAndSendInvoice/{email}(email=${po.Email})}"
and add the PathVariable in the RequestMapping value like:
#RequestMapping(method=POST, path="/dashboard/makeAndSendInvoice/{email:.+}")
public String makeAndSendInvoice(#PathVariable("email") String email) {
From Thymeleaf - Link URLs:
Variable templates are also allowed in URL paths, like
#{/order/{orderId}/details(orderId=${orderId})}
<!-- Will produce '/gtvg/order/details?orderId=3' (plus rewriting) -->
view
<!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->
view
From Spring - URI Template Patterns:
In Spring MVC you can use the #PathVariable annotation on a method
argument to bind it to the value of a URI template variable:
#RequestMapping(value="/owners/{ownerId}", method=RequestMethod.GET)
public String findOwner(#PathVariable String ownerId, Model model) {
Owner owner = ownerService.findOwner(ownerId);
model.addAttribute("owner", owner);
return "displayOwner";
}

Spring MVC pass model to view then to controller

I'm stuck with my code, I'm trying to pass the info of the object "Student". My scenario is like this:
Registration Form (fill the details then press submit button go to next page)
From this view the model will be printed out then press the next button again.
This third page will just show the information again.
Q: How can i pass the same object and display it to other views?
My code is like this.
Registration view:
<form action="/HamburgerProject/stuSubmitAdmissionForm.html" method="post">
<table>
<tr>
<td>Name:</td> <td><input type="text" name="studentName"></td></tr>
<tr>
<td>Age:</td> <td><input type="text" name="studentAge"></td></tr>
<tr>
</table>
<input type="submit" value="submit this">
</form>
First Information View:
<form action="/HamburgerProject/stuSubmitAdmissionForm.html" method="post">
<table>
<tr>
<td>Student's Name :</td>
<td>${student.studentName}</td>
</tr>
<tr>
<td>Student's Age :</td>
<td>${student.studentAge}</td>
</tr>
</table>
<input type="submit" value="send"/>
</form>
Second Information View:
<table>
<tr>
<td>Student's Name :</td>
<td>${student.studentName}</td>
</tr>
<tr>
<td>Student's Age :</td>
<td>${student.studentAge}</td>
</tr>
</table>
My Controller:
#RequestMapping(value="/stuAdmissionForm.html", method = RequestMethod.GET)
public ModelAndView getStudentAdmissionForm() {
ModelAndView model = new ModelAndView("AdmissionForm");
return model;
}
#RequestMapping(value="/stuSubmitAdmissionForm.html", method = RequestMethod.POST)
public ModelAndView submitModelAttributeAnnotationAdmissionForm(#ModelAttribute("student") Student student) {
ModelAndView model = new ModelAndView("AdmissionSuccess");
return model;
}
#RequestMapping(value="/stuDisplayForm.html", method = RequestMethod.POST)
public ModelAndView getStudent(Student student) {
ModelAndView model = new ModelAndView("NewForm");
model.addObject(student);
return model;
}
In attempting to re-display the information from second view to third view the object Student is not being passed.
There are no fields to submit in your fist information view. You have to add the values to hidden fileds:
<form action="/HamburgerProject/stuSubmitAdmissionForm.html" method="post">
<table>
<tr>
<td>Student's Name :</td>
<td>${student.studentName}</td>
</tr>
<tr>
<td>Student's Age :</td>
<td>${student.studentAge}</td>
</tr>
</table>
<input type="hidden" name="studentName" value="${student.studentName}">
<input type="hidden" name="studentAge" value="${student.studentAge}">
<input type="submit" value="send"/>
</form>

Again Neither BindingResult nor plain target object for bean name

Hi I am getiing the above exception : java.lang.IllegalStateException: Neither BindingResult nor plain target object for bean name 'Projet' available as request attribute. Please find my jsp and controller class.
The code I have is like below.
Controller code:
#Controller
#RequestMapping(value="/directeur")
public class AdminController {
#Autowired
private IAdmin directeur;
#RequestMapping(value="/index")
public String index(Model model)
{
model.addAttribute("Projet",new Projet());
model.addAttribute("Projets",directeur.getAllProjet());
return "Projets";
}
#RequestMapping(value="/saveProjet",method = RequestMethod.POST)
public String saveProjet(Projet p,BindingResult result,Model model) throws IOException
{
if(result.hasErrors())
{
model.addAttribute("Projets",directeur.getAllProjet());
return "Projets";
}
directeur.ajouterProjet(p);
model.addAttribute("Projet",new Projet());
model.addAttribute("Projets",directeur.getAllProjet());
return "Projets";
}
}
Jsp Code:
<%#taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%#taglib uri="http://www.springframework.org/tags/form" prefix="f"%>
<div id="formProjet">
<f:form modelAttribute="Projet" action="saveProjet" method="POST"
enctype="multipart/form-data">
<table>
<tr>
<td>ID Projet</td>
<td><f:input path="idProjet" /></td>
<td><f:errors path="idProjet" cssClass="errors"/></td>
</tr>
<tr>
<td>Nom</td>
<td><f:textarea path="nomProjet" /></td>
<td><f:errors path="nomProjet" cssClass="errors"/></td>
</tr>
<tr>
<td>Description du Projet</td>
<td><f:textarea path="description" /></td>
<td><f:errors path="description" cssClass="errors"/></td>
<tr><td><input type="submit" value="enregistrer"/></td></tr>
</table>
</f:form>
</div>
<div id="">
<table>
<tr>
<th>ID</th>
<th>Nom</th>
<th>Description</th>
<th>Photo</th>
</tr>
<c:forEach items="${Projets }" var="proj">
<tr>
<td>${proj.idProjet }</td>
<td>${proj.nomProjet }</td>
<td>${proj.description }</td>
<td></td>
</tr>
</c:forEach>
</table>
</div>

Sharing user object across javascript screens using Springframework MVC

I asked a question earlier how to do this using Webflow, but it has proven to be impractical for my situation.
I am trying to have a walk through 3 screens which add to an object information and then require a confirm to add to the database at the end. [To maintain simplicity etc]
The first screen takes in username for example
then the next screen requires contact information
then the third screen shows a summary and asks to confirm
I am having trouble figuring out how to pass the same object through several screens. I understand how to pass information from one screen to next, but for some reason same technique doesn’t work through several screens.
Sample 3 pages:
AddUser.jsp
<div id="form">
<h2 >Step 1</h2>
<form action="AddUserContact" method="post">
<table>
<tr>
<td>User Name:</td>
<td><input type="text" id="username" name="username"/></td>
</tr>
<tr>
<td><input type="submit" value="Next"/></td>
</tr>
</table>
</form>
</div>
AddUserContact.jsp
<div id="form">
<h2 >Step 2</h2>
<form action="UserSummaryConfirm" method="post">
<table>
<tr>
<td>${user.username}</td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" id="address" name="address"/></td>
</tr>
<tr>
<td><input type="submit" value="Next"/></td>
</tr>
</table>
</form>
</div>
UserSummaryConfirm.jsp
<h2>Step 3</h2>
<form action="home" method="post">
<table>
<tr>
<td>User Name:</td>
<td>${user.username}</td>
</tr>
<tr>
<td>Address:</td>
<td>${address}</td>
</tr>
<tr>
<td>Confirm</td>
</tr>
</table>
</form>
I have a Controller for every page [its for me to understand better what is going on, Ill simplify it later]
AddUserController.java
#Controller
public class AddUserController{
#RequestMapping(value = "AddUser")
public ModelAndView handleRequestInternal(HttpServletRequest request, HttpServletResponse response) throws Exception {
User user = new User();
ModelAndView mav = new ModelAndView("AddUser");
user.setUserName(request.getParameter("username"));
mav.addObject("user", user);
return mav;
}
}
AddUserContactController.java
#Controller
public class AddUserContactController{
#RequestMapping(value = "AddUserContact")
public ModelAndView handleRequestInternal(HttpServletRequest request, HttpServletResponse response) throws Exception {
ModelAndView mav = new ModelAndView("AddUserContact");
mav.addObject("user", request.getParameter("user"));
return mav;
}
}
AddUserConfirm.java
#Controller
public class AddUserConfirm{
#RequestMapping(value = "UserSummaryConfirm")
public ModelAndView handleRequestInternal(HttpServletRequest request, HttpServletResponse response) throws Exception {
ModelAndView mav = new ModelAndView("UserSummaryConfirm");
mav.addObject("user", request.getParameter("user"));
mav.addObject("address", request.getParameter("address"));
return mav;
}
}
And then the User class is just a simple class with getters and setters.
The problem I am having is no matter what I have tried to pass the object, I cannot seem to figure out why the same technique doesnt work.
The address on the third screen is beeing displayed no problem, but the username is not displayed on any of the screens.
With the webflow the way I did it was created a UserBean that was global to all webflow screens. It was easy to add to the same object from any screen and display any information. How can I achieve the same result for this?
Thank you.
WORKING CODE:
Using SessionAttributes
AddUser.jsp
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<div id="form">
<h2 >Step 1</h2>
<form:form action="AddUserContact" commandName="user" method="POST">
<table>
<tr>
<td>User Name:</td>
<td><form:input type="text" id="username" path="username"/></td>
</tr>
<tr>
<td><input type="submit" value="Next"/></td>
</tr>
</table>
</form:form>
</div>
AssUserContact.jsp
<div id="form">
<h2 >Step 2</h2>
<form:form action="UserSummaryConfirm" commandName="user" method="post">
<table>
<tr>
<td>Address:</td>
<td><input type="text" id="address" path="address"/></td>
</tr>
<tr>
<td><input type="submit" value="Next"/></td>
</tr>
</table>
</form>
</div>
UserSummaryConfirm.jsp
<h2>Step 3</h2>
<form:form action="home" method="get">
<table>
<tr>
<td>User Name:</td>
<td><%=session.getAttribute("username")%></td>
</tr>
<tr>
<td>Address:</td>
<td><%=session.getAttribute("address")%></td>
</tr>
<tr>
<td>Confirm</td>
</tr>
</table>
</form:form>
AddUserController.java
#Controller
#SessionAttributes({ "username", "address" })
public class AddUserController{
User usr = new User();
#RequestMapping(value = "AddUser")
public String loadIndex(Model model, User user) {
model.addAttribute("User", user);
return "AddUser";
}
#RequestMapping(value = "AddUserContact")
public String processUserName(Model model, User user) {
usr.setUsername(user.setUsername());
model.addAttribute("User", user);
return "AddUserContact";
}
#RequestMapping(value = "UserSummaryConfirm")
public String processUserContact(Model model, User user) {
usr.setAddress(user.getAddress());
model.addAttribute("username", usr.getUsername());
model.addAttribute("address", usr.getAddress());
return "UserSummaryConfirm";
}
Because in second screen you are using
<tr>
<td>${user.username}</td>
</tr>
User input is not bind to any input so it will not be passed to controller with form data .
While you are using address as
<tr>
<td>Address:</td>
<td><input type="text" id="address" name="address"/></td>
</tr>
As it is bind to input (as you have assigned name="address" which is same as path="name") so its value will be send to controller.
If you want to pass the same object across 3 screens then it's better use #SessionAttribute instead of hiding it and passing again and again.
EDIT :
As you are using session attribute now, remove input element .(which is bind to username) from second screen. Just use instead
<td>session.getAttribute("username")%></td>
I have done a "wizard-style" form like this before. My solution used a single form bean that we put into session for the entire process, and included only the pieces in each page that needs to be added. Spring will not erase a value in the form bean unless you include an input for the given value. We don't use JSR-303, and I don't think this method would work if you are using it. Our validation uses a combination of BindingErrors and custom validation code, so I just setup the code to only validate portions at a time, corresponding to what page the form just submitted.

Categories

Resources