JSP基礎練習-会員入庫の作成
83859 ワード
授業中、教材の中間確認問題では、結果画面を写真に符号化し、結果画面を完全に同じに符号化した.結果画面のみを表示し、コードは前に習った+少し応用しました.
機能は、会員登録情報を受信し、入力内容を検証、確認するためのコードです.
データはjspファイルに入力され、jspファイルでjsによって検証されます.また,cssを簡単に適用し,入力バーを統一し,servletで入力情報を表示し,画面に表示させた.
ホームページ
検証(会員登録ボタンで検証します.)
JSP結果
cssのような場合、ラベルにwidth 140 pxを付け、名前や身分証明書番号などの単語のスペースを140 pxに限定してfloatで左に貼り付けます.これにより、文字は140 pxの空間が空白になるまでまっすぐに維持され、140 pxの後、入力ウィンドウは整列されます.widthが狭すぎると、パスワード確認などの部分のスペースが不足します.
「パスワード」と次の行
「学びやすい人」の末路が見える.他の人のコードから見ると、表の使い方もあるようです.
また、inputウィンドウにマージンを追加し、各inputウィンドウ間の距離を1 pxとすることで、可読性の面での効果が向上する.
jsでは、会員入力ボタンをクリックして入力した値が入力されているかどうかを確認し、入力されていない場合は、身分証明書番号などの入力を受け入れるように促すアラートウィンドウが表示され、数字入力のみが受け入れられます.入力した値が数値(ハングル、英語など)でない場合はalertウィンドウが表示され、入力した値がリセットされます.
パスワードの確認時に、パスワードと確認パスワードの値が一致しない場合は、警告ウィンドウが表示され、パスワードの確認値がリセットされます.
電子メール入力で、ユーザーが直接ドメインチェックボックスでチェックボックスをクリックすると、onchangeプロパティはjsのメソッドをロードし、自動的にドメイン入力バーに入力するために値が変化したかどうかをチェックします.
「職業」(Professional)ドロップダウンメニューには、何をクリックしてもクリックしないようにするプロンプトウィンドウが表示されます.
最後に、リセットタイプを使用してすべての入力値をリセットします.
入力するとservletでクライアントから入力したデータが出力され、検証されます.
また、彼は私たちにもう一度ボタンを押して、前のページに移動させました.
まだ正常なサーバは実現していませんが、学んだことをもとに書かれていて面白いです.
出典:国家/地域研修+JSPとサーブレット(聖潤貞)
機能は、会員登録情報を受信し、入力内容を検証、確認するためのコードです.
コード#コード#
jspコード
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script type="text/javascript">
function check() { //유효성 체크
if (document.frm.name.value == "") { //document ==> 우리가 만든 윈도우 창을 가르키는 객체
alert("이름을 입력해주세요");
document.frm.name.focus(); //해당 함수에 포커스를 넣는다.
return false;
} else if (document.frm.jumin.value == "") { //document ==> 우리가 만든 윈도우 창을 가르키는 객체
alert("주민번호를 입력해주세요.");
document.frm.jumin.focus(); //해당 함수에 포커스를 넣는다.
return false;
} else if (document.frm.juminpwd.value == "") { //document ==> 우리가 만든 윈도우 창을 가르키는 객체
alert("주민번호 뒷자리를 입력해주세요.");
document.frm.juminpwd.focus(); //해당 함수에 포커스를 넣는다.
return false;
} else if (isNaN(document.frm.jumin.value)) {
alert("주민번호 앞 자리를 숫자로 입력해주세요.");
document.frm.jumin.value = "";
document.frm.jumin.focus();
return false;
} else if (isNaN(document.frm.juminpwd.value)) {
alert("주민번호 뒷 자리를 숫자로 입력해주세요.");
document.frm.juminpwd.value = "";
document.frm.juminpwd.focus();
return false;
} else if (document.frm.id.value == "") {
alert("아이디를 입력해주세요.");
document.frm.id.focus();
return false;
} else if (document.frm.pwd.value == "") {
alert("비밀번호를 입력해주세요.");
document.frm.pwd.focus();
return false;
} else if (document.frm.checkpwd.value == "") {
alert("비밀번호 확인란을 입력해주세요.");
document.frm.checkpwd.focus();
return false;
} else if (document.frm.checkpwd.value != document.frm.pwd.value) {
alert("비밀번호와 비밀번호 확인란이 일치하지 않습니다. 다시 입력해주세요.");
document.frm.checkpwd.value = "";
document.frm.checkpwd.focus();
return false;
} else if (document.frm.email.value == "") {
alert("이메일을 입력해주세요.");
document.frm.email.focus();
return false;
}
else if (document.frm.email2.value == "") {
alert("도메인을 입력해주세요.");
document.frm.email2.focus();
return false;
} else if (document.frm.zipcode.value == "") {
alert("우편번호를 입력해주세요.");
document.frm.zipcode.focus();
return false;
} else if (document.frm.addr.value == "") {
alert("주소를 입력해주세요.");
document.frm.addr.focus();
return false;
} else if (document.frm.addr2.value == "") {
alert("상세 주소를 입력해주세요.");
document.frm.addr2.focus();
return false;
} else if (document.frm.phone.value == "") {
alert("핸드폰번호를 입력해주세요.");
document.frm.phone.focus();
return false;
} else if (document.frm.work.value == "") {
alert("직업을 선택해주세요.");
document.frm.work.focus();
return false;
} else if (document.frm.phone.value == "") {
alert("핸드폰번호를 입력해주세요.");
document.frm.phone.focus();
return false;
}
return true;
}
function checkEmail() { //도메인 자동 선택
if (document.frm.emailList.value != "") {
document.frm.email2.value = document.frm.emailList.value;
} else {
document.frm.email2.value = "";
document.frm.email2.focus();
}
}
</script>
<style type="text/css">
label {
width: 140px;
float: left;
}
input {
margin: 1px;
}
</style>
</head>
<body>
<div class="login">
<form method="get" action="loginFormServlet" name="frm">
<label for="username"> 이름 </label>
<input type="text" name="name" id="username"><br>
<label for="userjumin"> 주민번호</label>
<input type="text" name="jumin" id="userjumin"> - 
<input type="password" name="juminpwd" id="userjuminpwd"><br>
<label for="userid"> 아이디 </label>
<input type="text" name="id" id="userid"><br> <label for="userpwd"> 비밀번호 </label>
<input type="password" name="pwd" id="userpwd"><br>
<label for="usercheckpwd"> 비밀번호 확인 </label>
<input type="password" name="checkpwd" id="usercheckpwd"><br>
<label for="useremail"> 이메일 </label>
<input type="text" name="email" id="useremail"> @ 
<input type="text" name="email2" id="useremail">
<select name="emailList" size='1' onchange="return checkEmail()">
<option value="">직접 입력</option>
<option value="naver.com">naver.com</option>
<option value="daum.net">daum.net</option>
<option value="nate.com">nate.com</option>
</select> <br>
<label for="userzipcode"> 우편번호 </label>
<input type="text" name="zipcode" id="userzipcode"><br>
<label for="useraddr"> 주소 </label>
<input type="text" name="addr" id="useraddr">
<input type="text" name="addr2" id="useraddr"> <br>
<label for="userphone"> 핸드폰번호 </label>
<input type="text" name="phone" id="userphone"><br>
<label for="work">직업</label>
<select id="interest" name="work" size='4'>
<option value="학생">학생</option>
<option value="컴퓨터/인터넷">컴퓨터/인터넷</option>
<option value="언론">언론</option>
<option value="공무원">공무원</option>
<option value="백수">백수</option>
<option value="취준생">취준생</option>
<option value="프로그래머">프로그래머</option>
</select> <br>
<label for="checkSms"> 메일/SMS정보 수신 </label>
<input type="radio" id="checkSms" name="checkSms" value="수신" checked>수신
<input type="radio" id="checkSms" name="checkSms" value="수신 거부"> 수신 거부 <br>
<label for="checkbox"> 관심분야 </label>
<input type="checkbox" name="item" value="생두"> 생두
<input type="checkbox" name="item" value="원두"> 원두
<input type="checkbox" name="item" value="로스팅"> 로스팅
<input type="checkbox" name="item" value="핸드드립"> 핸드드립
<input type="checkbox" name="item" value="에스프레소"> 에스프레소
<input type="checkbox" name="item" value="창업"> 창업<br> <br>
</div>
<div style="text-align: center;">
<input type="submit" value="회원가입" onclick="return check()">
<input type="reset">
</div>
</form>
</body>
</html>サーブレットコード
package unit11;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class loginFormServlet
*/
@WebServlet("/loginFormServlet")
public class loginFormServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public loginFormServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
String name = request.getParameter("name");
String jumin = request.getParameter("jumin");
String juminpwd = request.getParameter("juminpwd");
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
String checkpwd = request.getParameter("checkpwd");
String email = request.getParameter("email");
String email2 = request.getParameter("email2");
String emailList = request.getParameter("emailList");
String zipcode = request.getParameter("zipcode");
String addr = request.getParameter("addr");
String addr2 = request.getParameter("addr2");
String phone = request.getParameter("phone");
String work = request.getParameter("work");
String checkSms = request.getParameter("checkSms");
String items[] = request.getParameterValues("item");
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
out.print("<html><body>");
out.println("이름 : <b>");
out.print(name);
out.println("</b><br>주민번호 : <b>");
out.println(jumin + "-" + juminpwd + "</b>");
out.println("<br>아 이 디 : <b>");
out.print(id);
out.println("</b><br>비밀번호 : <b>");
out.print(pwd);
out.println("</b><br>이 메 일 : <b>");
out.print(email + "@" + email2);
out.println("</b><br>우편번호 : <b>");
out.print(zipcode);
out.println("</b><br>주소 : <b>");
out.print(addr + addr2);
out.println("</b><br>핸드폰번호 : <b>");
out.print(phone);
out.println("</b><br>직업 : <b>");
out.print(work);
out.println("</b><br>관심분야 : <b>");
if (items == null) {
out.print("선택한 항목이 없습니다.");
} else {
for (String item : items) {
out.print(item + " ");
}
}
out.println("</b><br>정보 수신 여부 : <b>");
out.print(checkSms);
out.println("<br><br><a href = 'javascript:history.go(-1)'> 다시 </a>");
out.print("</body></html>");
out.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
コードフロー
データはjspファイルに入力され、jspファイルでjsによって検証されます.また,cssを簡単に適用し,入力バーを統一し,servletで入力情報を表示し,画面に表示させた.
ホームページの画像
ホームページ
検証(会員登録ボタンで検証します.)
JSP結果
機能
cssのような場合、ラベルにwidth 140 pxを付け、名前や身分証明書番号などの単語のスペースを140 pxに限定してfloatで左に貼り付けます.これにより、文字は140 pxの空間が空白になるまでまっすぐに維持され、140 pxの後、入力ウィンドウは整列されます.widthが狭すぎると、パスワード確認などの部分のスペースが不足します.
「パスワード」と次の行
「学びやすい人」の末路が見える.他の人のコードから見ると、表の使い方もあるようです.
また、inputウィンドウにマージンを追加し、各inputウィンドウ間の距離を1 pxとすることで、可読性の面での効果が向上する.
jsでは、会員入力ボタンをクリックして入力した値が入力されているかどうかを確認し、入力されていない場合は、身分証明書番号などの入力を受け入れるように促すアラートウィンドウが表示され、数字入力のみが受け入れられます.入力した値が数値(ハングル、英語など)でない場合はalertウィンドウが表示され、入力した値がリセットされます.
パスワードの確認時に、パスワードと確認パスワードの値が一致しない場合は、警告ウィンドウが表示され、パスワードの確認値がリセットされます.
電子メール入力で、ユーザーが直接ドメインチェックボックスでチェックボックスをクリックすると、onchangeプロパティはjsのメソッドをロードし、自動的にドメイン入力バーに入力するために値が変化したかどうかをチェックします.
「職業」(Professional)ドロップダウンメニューには、何をクリックしてもクリックしないようにするプロンプトウィンドウが表示されます.
最後に、リセットタイプを使用してすべての入力値をリセットします.
入力するとservletでクライアントから入力したデータが出力され、検証されます.
また、彼は私たちにもう一度ボタンを押して、前のページに移動させました.
に感銘を与える
まだ正常なサーバは実現していませんが、学んだことをもとに書かれていて面白いです.
出典:国家/地域研修+JSPとサーブレット(聖潤貞)
Reference
この問題について(JSP基礎練習-会員入庫の作成), 我々は、より多くの情報をここで見つけました https://velog.io/@tkdeod1234/JSP-기초-실습-회원가입-창-만들기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol