実現したいこと
ショッピングカート機能を持つオンラインショップを開発したいです。
more.htmlで商品をカートに追加し、proceed to checkoutボタンを押すとcart.htmlに画面遷移しカートの中身が一覧で表示されるようにしたいです。
途中まではYouTubeやChatGPTを利用して作成できましたが、Proceed to Checkoutボタンを押しても画面遷移がうまくいきません。
ソースコードを添付いたしますのでどなたかお力添えの程よろしくお願いいたします。
また、YouTubeでsessionについても学習しcartlistServlet.javaファイルをサンプルプログラムを参考に作ってみましたが中身はまだ不完全で他ファイルと連携もできていません。併せて添削よろしくお願いいたします。
発生している問題・エラーメッセージ
Proceed to Checkoutボタンを押すと”ファイルが見つかりません”となります。
該当のソースコード
コード ★CartListServlet.java import java.util.*; import java.io.*; import javax.servlet.*; import javax.servlet.http.*; import javax.servlet.annotation.*; @WebServlet("/session") public class SessionServlet extends HttpServlet{ public void doPost(HttpServletRequest req,HttpServletResponse res) throws IDException,ServletException{ HttpSession session=req.getSession(true); ArrayList<String> cartlist=(ArrayList<String>)session.getAttribute("cart"); if(cartlist==null){ cartlist=newArraylist<String>(); }else{ req.setCharacterEncoding("utf-8"); String book=req.getParameter("item"); cartlist.add(item); } } session.setAttribute("cart",cartlist); res.setContetntType("text/html;charset=utf-8"); PrintWriter out=res.getWriter(); out.println("<html><head>"); out.println("<title>items</title>"); out.println("</head><body>"); out.println("<h2>LINE UP</h2>"); out.println("<form action=\"/javaweb/session\" method=\"post">"); out.println("<p>What's in your cart</p>"); for(int i=0;i<cartlist.size(; i++){ our.println(cartlist.get(i)+"<br/>"); } our.println("</body></html>"); ) public void doGet(HttpServletRequest req, HttpServletResponse res) throws IOException,ServletException{ doPost(req,res); } } ★RegisterServlet4.java import bean.RegisterBean; import java.io.*; import javax.servlet.*; import javax.servlet.http.*; import javax.servlet.annotation.*; @WebServlet("/register4") public class RegisterServlet4 extends HttpServlet{ public void doPost(HttpServletRequest req, HttpServletResponse res) throws IOException,ServletException{ RegisterBean rb=new RegisterBean(); String[] items=req.getParameterValues("item"); if(items != null){ for (String item:items){ System.out.println("Item:"+item); } } RequestDispatcher rd=req.getRequestDispatcher("register4.jsp"); rd.forward(req,res); } } ★cart.html <html> <head> <title>cart</title> <link rel="stylesheet" href="shop.css" type="text/css"> <meta charset="UTF-8"> </head> <body> <h1>shopping cart</h1> <div class="nav"> <ul> <li><a href="webshop.html">HOME</a></li> <li><a href="more.html">SHOP</a></li> <li><a href="search.html">SEARCH</a></li> <li><a href="cart.html">CART</a></li> </ul> </div> <div id="cartItems"> <p>Your cart is empty.</p> </div> <p>Total: <span id="cartTotal">$0.00</span></p> <button onclick="checkout()">Checkout</button><br> <button onclick="resetCart()">カートをリセット</button> <script src="./products.js"></script> <script src="./shop.js"></script> <a class="back" href="webshop.html">back</a> </body> </html> ★mainpage.html <html> <head> <title>coyury_handmade</title> <link rel="stylesheet" href="shop.css" type="text/css"> <script src="./products.js"></script> <script src="./shop.js"></script> <meta charset="UTF-8"> </head> <body> <h1>coyury_handmade</h1> <div class="nav"> <ul> <li><a href="webshop.html">HOME</a></li> <li><a href="more.html">SHOP</a></li> <li><a href="search.html">SEARCH</a></li> <li><a href="cart.html">CART</a></li> </ul> </div> <div class="item"> <h2><span>LINE UP</span></h2> <div class="imgs"> <img src="images/OIP.jpg"> <img src="images/OIP1.jpg"> <img src="images/OIP2.jpg"> </div> <a href="more.html">more</a> </div> <div class="news"> <h2><span>NEWS</span></h2> <ul> <li>新アイテムを入荷しました</li> <li>きらきらマルシェ出展のお知らせ</li> </ul> </div> </body> </html> ★more.html <html> <head> <title>items</title> <link rel="stylesheet" href="shop.css" type="text/css"> <meta charset="UTF-8"> </head> <body> <h1>online shop</h1> <div class="nav"> <ul> <li><a href="webshop.html">HOME</a></li> <li><a href="more.html">SHOP</a></li> <li><a href="search.html">SEARCH</a></li> <li><a href="cart.html">CART</a></li> </ul> </div> <div class ="shopping-bag"> <a href="./cart.html"> <img src="images/cart.jpg"> <div class="total-items-in-cart"> 0 </div> </a> </div> <h2><span>LINE UP</span></h2> <div class="products-list"> <div class="products"> </div> <form action="/javaweb/session" method="post"> <p>What's in your cart</p> <div class="cart"> <div class="cart-items"> </div> <div class="cart-footer"> <div class="subtotal"> Subtotal(0 items):¥0 </div> <div class="checkout"> <input type="submit" value="Proceed to checkout" /> </div> </div> </div> </form> </div> <script> const productsList=document.querySelector(".products") </script> <script src="./products.js"></script> <script src="./shop.js"></script> <a class="back" href="webshop.html">back</a> </body> </html> ★products.js const products=[ { id:1, name:"watery ring", price:2500, instock:5, imgSrc:"images/OIP.jpg", }, { id:2, name:"flower ring", price:4000, instock:7, imgSrc:"images/OIP1.jpg", }, { id:3, name:"heart ring", price:3000, instock:8, imgSrc:"images/OIP2.jpg", }, { id:4, name:"color ring", price:2000, instock:2, imgSrc:"images/OIP3.jpg", }, { id:5, name:"clear ring", price:2000, instock:15, imgSrc:"images/OIP4.jpg", }, { id:6, name:"clear bungle", price:6000, instock:3, imgSrc:"images/OIP5.jpg", }, ]; ★register4.jsp <%@page contentType="text/html;charset=utf-8" %> <jsp:useBean id="rb" scope="request" class="bean.RegisterBean" /> <html> <head> <title>cart</title> <link rel="stylesheet" href="shop.css" type="text/css"> </head> <body> <h1>shopping cart</h1> <div class="nav"> <ul> <li><a href="webshop.html">HOME</a></li> <li><a href="more.html">SHOP</a></li> <li><a href="search.html">SEARCH</a></li> <li><a href="cart.html">CART</a></li> </ul> </div> <div id="cartItems"> <p>Your cart is empty.</p> </div> <p>Total: <span id="cartTotal">$0.00</span></p> <button onclick="checkout()">Checkout</button><br> <button onclick="resetCart()">カートをリセット</button> <script src="./products.js"></script> <script src="./shop.js"></script> <a class="back" href="webshop.html">back</a> </body> </html> ★shop.js const productsEl=document.querySelector(".products"); const cartItemsEl = document.querySelector(".cart-items"); const subtotalEl=document.querySelector(".subtotal"); const totalItemsInCartEl = document.querySelector(".total-items-in-cart"); //RENDER PRODUCTS function renderProducts(){ products.forEach((product)=>{ productsEl.innerHTML +=` <div class="item"> <div class="item-container"> <div class="item-img"> <img src="${product.imgSrc}" alt="${product.name}"> </div> <div class="desc"> <h2>${product.name}</h2> <h2><small>¥</small>${product.price}</h2> </div> <div class="add-to-cart"> <button onclick="addToCart(${product.id})">Add to Cart</button> </div> </div> </div> `; }); } renderProducts(); let cart=JSON.parse(localStorage.getItem("CART")) || []; updateCart(); // カートにアイテムを追加する関数 function addToCart(id) { if(cart.some((item)=>item.id===id)){ changeNumberOfUnits("plus",id); }else{ const item=products.find((product)=>product.id===id); cart.push({ ...item, numberOfUnits:1, }); } updateCart(); } // カートの表示を更新する関数 function updateCart() { cart=cart.filter((item)=>item.numberOfUnits>0); renderCartItems(); renderSubtotal(); localStorage.setItem("CART",JSON.stringify(cart)); } function renderSubtotal(){ let totalPrice=0, totalItems=0; cart.forEach((item)=>{ totalPrice += item.price*item.numberOfUnits; totalItems+=item.numberOfUnits; }); subtotalEl.innerHTML=`Subtotal(${totalItems}items):¥${totalPrice}`; totalItemsInCartEl.innerHTML=totalItems; } function renderCartItems(){ cartItemsEl.innerHTML=""; cart.forEach((item)=>{ cartItemsEl.innerHTML+=` <div class="cart-item"> <div class="item-info" onclick="removeItemFromCart(${item.id})"> <img src="${item.imgSrc}" alt="${item.name}"> <h4>${item.name}</h4> </div> <div class="unit-price"> <small>¥</small>${item.price} </div> <div class="units"> <div class="btn minus" > <button onclick="changeNumberOfUnits('minus',${item.id})">-</button> </div> <div class="number">${item.numberOfUnits}</div> <div class="btn plus" > <button onclick="changeNumberOfUnits('plus',${item.id})">+</button> </div> </div> </div> `; }); } function removeItemFromCart(id){ cart=cart.filter((item)=>item.id !==id); updateCart(); } function changeNumberOfUnits(action,id){ cart=cart.map((item)=>{ let numberOfUnits=item.numberOfUnits; if(item.id===id){ if(action==="minus"&& numberOfUnits>0){ numberOfUnits--; }else if(action==="plus" && numberOfUnits<item.instock){ numberOfUnits++; } } return{ ...item, numberOfUnits, }; }); updateCart(); } function checkout(){ localStorage.setItem("CART",JSON.stringify(cart)); window.location.href="cart.html"; }
補足情報（FW/ツールのバージョンなど）
Windows10でeclipseを使用しています。
mainpage.htmlをサーバーで実行→localhost の Tomcat v9.0 サーバー
を用いて実行しています。
長くなってしまい申し訳ございませんが、どうぞよろしくお願いいたします。
0 コメント