728x90
반응형
제일 신나는 자유시간.
그동안 배운거 하나부터 차근차근 짚어가면서 응용해보자!
1) table 생성 해주기
CREATE TABLE information (
name VARCHAR2(15),
hobby VARCHAR2(15),
age NUMBER (8),
job VARCHAR2(15)
);
2) 화면 구현하기
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="ssi.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[GuestWrite.jsp]</title>
</head>
<body>
<form method="get" action="guestWriteCheak.jsp" name = "myfor" >
이름 : <input type="text" name = "name" > <br>
취미 : <input type="text" name = "hobby" > <br>
나이 : <input type="text" name = "age" > <br>
직업 : <input type="text" name = "job" > <br>
<input type = "submit" value = "입 력" >
</form>
</body>
</html>3) SQL 에 정보 삽입
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="ssi.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
</script>
</head>
<body>
<%
String Gname = request.getParameter("name" );
String Ghobby = request.getParameter("hobby");
String Gage = request.getParameter("age" );
String Gjob = request.getParameter("job" );
%>
이름 : <%=Gname %> <br>
취미 : <%=Ghobby %> <br>
나이 : <%=Gage %> <br>
직업 : <%=Gjob %> <br>
<%
msg = "insert into information values( ?, ?, ?, ? )";
PST = CN.prepareStatement(msg);
PST.setString(1, Gname );
PST.setString(2, Ghobby);
PST.setString(3, Gage );
PST.setString(4, Gjob );
PST.executeUpdate();
System.out.println("success");
%>
</body>
</html>
4) 데이터 삽입 완료
5) SQL 데이터 불러오기
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="ssi.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
#pline{ margin-top: 18px; }
*{ font-size: 18pt; }
a{ font-size: 18pt; color:green; text-decoration:none; }
a:hover{ font-size:25pt; color:blue; text-decoration:underline; }
table{
width="1000";
border="1";
cellspacing="0";
align="right";
}
td{
width="800";
}
</style>
</head>
<body>
<h1> [ I N F O R M A T I O N ]</h1>
<TABLE>
<tr bgcolor="green" >
<td>NAME </td>
<td>HOBBY</td>
<td>AGE </td>
<td>JOB </td>
</tr>
<%
msg = "SELECT ROWNUM, G.* FROM INFORMATION G";
ST = CN.createStatement();
RS = ST.executeQuery(msg);
while( RS.next() == true ){
String Gname = RS.getString("NAME" );
String Ghobby = RS.getString("HOBBY");
String Gage = RS.getString("AGE" );
String Gjob = RS.getString("JOB" );
%>
<tr>
<td><%=Gname %> </td>
<td><%=Ghobby%> </td>
<td><%=Gage %> </td>
<td><%=Gjob %> </td>
</tr>
<%
}
%>
</TABLE>
</body>
</html>
6) 정보 버튼 누르면 LIST 화면 보여주기
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="ssi.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[GuestWrite.jsp]</title>
<script type="text/javascript">
function List(){
location.href='guestList_Check.jsp';
}
</script>
</head>
<body>
<form method="get" action="guestWriteCheak.jsp" name = "myfor" >
이름 : <input type="text" name = "name" > <br>
취미 : <input type="text" name = "hobby" > <br>
나이 : <input type="text" name = "age" > <br>
직업 : <input type="text" name = "job" > <br>
<input type = "submit" value = "입 력" >
<input type = "button" value = "정 보" onclick="List();">
</form>
</body>
</html>
7) 속성 NULL CHECK ( <span> 경고문 )
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="ssi.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[GuestWrite.jsp]</title>
<script type="text/javascript">
function List(){ location.href='guestList_Check.jsp'; }
function nullCheck(){
//돔 = DOM 모댈 객체 document, window, location, history 생략 가능
var n = myform.name.value;
var h = myform.hobby.value;
var a = myform.age.value;
var j = myform.job.value;
// 이름
if( n==null || n==""){
document.getElementById("name_sp").innerHTML="<font style='font-size:12pt; color:red'>*이름 입력*</font>";
myform.name.focus();
return;
}else{
document.getElementById("name_sp").innerHTML="";
myform.hobby.focus();
}
// 취미
if(h==null || h==""){
document.getElementById("hobby_sp").innerHTML="<font style='font-size:12pt; color:red'>*취미 입력*</font>";
myform.hobby.focus();
return;
}else{
document.getElementById("hobby_sp").innerHTML="";
myform.age.focus();
}
//나이
if(a==null || a==""){
document.getElementById("age_sp").innerHTML="<font style='font-size:12pt; color:red'>*나이 입력*</font>";
myform.age.focus();
return;
}else{
document.getElementById("age_sp").innerHTML="";
myform.job.focus();
}
//직업
if(j==null || j==""){
document.getElementById("job_sp").innerHTML="<font style='font-size:12pt; color:red'>*직업란 입력*</font>";
myform.job.focus();
return;
}else{
document.getElementById("job_sp").innerHTML="";
}
document.myform.submit(); // action 속성의 문서랑 연결됨
}
</script>
</head>
<body>
<form method="get" action="guestWriteCheak.jsp" name = "myform" >
이름 : <input type = "text" name = "name" onblur="Name_check();" > <span id="name_sp" ></span> <br>
취미 : <input type = "text" name = "hobby" onblur="Hobby_check();" > <span id="hobby_sp"></span> <br>
나이 : <input type = "text" name = "age" onblur="Age_check();" > <span id="age_sp" ></span> <br>
직업 : <input type = "text" name = "job" onblur="Job_check();" > <span id="job_sp" ></span> <br>
<input type = "button" onclick="nullCheck();" value="등록하기">
<input type = "button" onclick="List();" value = "정 보">
</form>
</body>
</html>
728x90
반응형
'개발중 > Web' 카테고리의 다른 글
| Web01입력 (0) | 2020.07.27 |
|---|---|
| TOMCAT 설정하기 (0) | 2020.07.26 |
| Web04 아이디 중복체크 과정 (0) | 2020.07.24 |
| Web03 readonly (0) | 2020.07.23 |
| Web03 post / get (0) | 2020.07.23 |
