簡単なカート機能を作りたい
解決したいこと
解体新書を使って勉強している初心者です。
簡単なカート機能を作りたいのですが、合計金額を出す計算で値をうまく出力出来ません。
sqlの価格のデータをhtmlに出力し、その値にinputで入力した個数を掛けて合計金額を出そうとしています。
sqlの価格のデータをhtmlに出力する方法を教えていただきたいです。
また、他にいい方法があれば教えていただきたいです。
勉強して来てこと
html,css,java,Mysql
該当するソースコード
package com.example.demo.domain.user.model;
import lombok.Data;
@Data
public class MMaterials {
private String name;
private Integer price;
private Integer tekisei;
private Integer zaiko;
private String detail;
private Integer goukei;
private Integer kosuu;
}
package com.example.demo.materials.service.impl;
import java.util.List;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.example.demo.domain.user.model.MMaterials;
import com.example.demo.materials.service.MaterialsService;
import com.example.demo.repository.MaterialsMapper;
@Service
public class MaterialsServiceImpl implements MaterialsService {
@Autowired
private MaterialsMapper mapper;
/**資材登録*/
@Override
public void signup(MMaterials materials) {
mapper.insertOne(materials);
}
/**資材取得*/
@Override
public List<MMaterials> getMaterials(MMaterials materials){
return mapper.findMany(materials);
}
/**資材取得(1件)*/
@Override
public MMaterials getMaterialsOne(String name) {
return mapper.findOne(name);
}
/**購入後在庫数更新*/
@Override
public void updateMaterialsOne(String name, Integer zaiko) {
mapper.updateOne(name, zaiko);
}
/**資材一件削除*/
@Override
public void deleteMaterialsOne(String name) {
int count = mapper.deleteOne(name);
}
}
package com.example.demo.mcontroller;
import java.util.List;
import org.modelmapper.ModelMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import com.example.demo.domain.user.model.MMaterials;
import com.example.demo.materials.service.MaterialsService;
import com.example.demo.mform.MaterialsListForm;
@Controller
@RequestMapping("/materials")
public class MaterialsListController {
@Autowired
private MaterialsService materialsService;
@Autowired
private ModelMapper modelMapper;
/**資材詳細一覧を表示*/
@GetMapping("/list")
public String getMaterialsList(@ModelAttribute MaterialsListForm form, Model model) {
//formをMMaterialsに変換
MMaterials materials = modelMapper.map(form, MMaterials.class);
//資材を検索
List<MMaterials> materialsList = materialsService.getMaterials(materials);
//Modelに登録
model.addAttribute("materialsList", materialsList);
//資材詳細一覧を表示
return "materials/list";
}
/**資材検索処理*/
@PostMapping("/list")
public String postMaterialList(@ModelAttribute MaterialsListForm form, Model model ) {
//formをMMaterialsに変換
MMaterials materials = modelMapper.map(form, MMaterials.class);
//資材を検索
List<MMaterials> materialsList = materialsService.getMaterials(materials);
//Modelに登録
model.addAttribute("materialsList", materialsList);
return "materials/list";
}
/**資材削除*/
@PostMapping(value = "/list", params = "delete")
public String deleteMaterialsOne(MaterialsListForm form, Model model) {
//資材を削除
materialsService.deleteMaterialsOne(form.getName());
//資材詳細一覧画面にリダイレクト
return "redirect:/materials/list";
}
}
package com.example.demo.mcontroller;
import java.util.List;
import org.modelmapper.ModelMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import com.example.demo.domain.user.model.MMaterials;
import com.example.demo.materials.service.MaterialsService;
import com.example.demo.mform.CartForm;
import lombok.extern.slf4j.Slf4j;
@Controller
@RequestMapping("/materials")
@Slf4j
public class CartController {
@Autowired
private MaterialsService materialsService;
@Autowired
private ModelMapper modelMapper;
/**購入詳細画面を表示*/
@GetMapping("/cart/{name}")
public String getCartList(CartForm form, Model model, @PathVariable("name") String name){
//資材情報を一件取得
MMaterials materials = materialsService.getMaterialsOne(name);
//MMaterialsをformに変換
form = modelMapper.map(materials, CartForm.class);
//Modelに登録
model.addAttribute("cartForm", form);
//購入詳細一覧画面に遷移
return "materials/cart";
}
/**在庫数更新処理*/
@PostMapping(value = "/cart", params = "update")
public String updateMaterials(CartForm form, Model model) {
//在庫数を更新
materialsService.updateMaterialsOne(form.getName(), form.getZaiko());
//資材詳細画面に遷移
return "redirect:/materials/list";
}
/**資材削除*/
@PostMapping(value = "/cart" , params = "delete")
public String deleteMaterials(CartForm form, Model model) {
//在庫数更新
materialsService.deleteMaterialsOne(form.getName());
//資材詳細画面にリダイレクト
return "redirect:/materials/list";
}
}
cart.html
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/layout}">
<head>
<title>購入画面</title>
<!-- 個別CSS読込 -->
<link rel="stylesheet" th:href="@{/css/materials/list.css}">
</head>
<body>
<div layout:fragment="content">
<div class="header border-bottom">
<h1 class="h2">購入確認画面</h1>
</div>
<form id = "cart-form" method="post" th:action="@{/materials/cart}" class= "form-signup" th:object="${cartForm}">
<input type ="hidden" th:field = "*{name}"/>
<!--購入情報-->
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th>資材名</th>
<th>価格</th>
<th>詳細</th>
<th>数量</th>
<th>合計金額</th>
<th></th>
</tr>
<tr>
<td th:text = "*{name}" ></td>
<td th:text = "*{price}" name = "price" ></td>
<td th:text = "*{detail}"></td>
<td ><input type = "number" name="kosuu" value="0"></td>
<td >
<output name="goukei" >0</output>
</td>
<td>
<input type="button" onclick="goukei.value = Number(price.value) * Number(kosuu.value);" value="計算">
</td>
</tr>
</tbody>
</table>
<!-- ボタンエリア-->
<div class="text-center">
<!--購入確定ボタン-->
<button class="btn btn-primary" type="submit" name="update">
発注する
</button>
<!--<button class="btn btn-danger" type="submit" name="delete">
削除
</button>-->
</div>
</form>
</div>
</body>
</html>
/* 資材詳細一覧テーブル */
INSERT INTO m_materials(
name
, price
, tekisei
, zaiko
, detail
) VALUES
('アクリルペンキ（黄）', '5000', '3', '5','一斗缶');
/* 購入情報詳細一覧テーブル */
INSERT INTO m_cart(
name
, price
, kosuu
, goukei
) VALUES
('アクリルペンキ（黄）', '5000', '3', '15000')
;
自分で試したこと
大変わかりづらいコードで申し訳ないです。
cart.htmlの価格をinputタグで入力すれば合計金額算出ができましたが、そうではなくsqlから価格の値を出力して計算をしたいと考えています。
また、足りないコード、掲載しなくてもいいコードがありましたら教えて頂けると光栄です。初めての投稿でわかりづらいとは思いますが、回答よろしくお願いします。
0 likes