가치 있는 정보 준비 중
3초만 투자해 보세요!
Preparing valuable information
Just invest three seconds!
본문 바로가기
IT/DEVELOP

Web 기초

by 콰나 | Quanna 2024. 2. 1.

<웹 프로그래밍>

- 웹 브라우저를 통해 사용자가 요청한 페이지를 만드는 것

클라이언트 웹 통신 웹서버

-- 웹 페이지 요청 -->

<-- 웹 페이지 전송 --

 

<웹 페이지의 종류>

정적인 페이지 - html

동적인 페이지 - java

- JSP = HTML+JAVA

 

 

<java환경변수 설정>

1)PATH 변수추가 : C:\Program Files\Java\jdk1.8.0_11\bin

2) ClASSPATH설정 : C:\Program Files\Java\jdk1.8.0_11\lib\tools.jar

 

 

 

 

<tomcat 설치>

1) D:\tomcat7 압축해제 (디렉토리명을 tomcat7으로 바꿈)

2) path 설정: D:\tomcat7

<이클립스 설치>

1) runtime 설정 : 설치된 톰캣으로 런타임설정

 

 

 

 

<자바>

1) 변수

 – 특정 값을 저장하는 공간

 

<변수의 타입>

숫자 int, long, double, float
문자 char
논리값 boolean

 

2) 조건문

(1)if문 (2)switch
if(조건){
내용
}else if(조건){
내용
}else{
내용
}		 switch(변수){
case 값1 : ~~~
break;
case 값1 : ~~~
break;
default: ~~~
}

 

3) 반복문

while (조건이 참일 때 반복실행) for문
whie(조건){
    반복할 내용
}		 for(i=0; i<10; i++){
    수행할 작업
}

 

 

<HTML>

- 웹페이지를 만들기 위해서 기본적으로 사용되는 언어

- 웹페이지에서 필요한 여러가지 기능들을 활용하기 위해 태그를 사용한다.

 

<구조>

<html>
<title> </title>
<body> </body>
</html>

 

 

1) input 태그

<input type=”button”>

<input type=”radio”>

<input type=”text”>

<input type=”submit”>

<input type=”checkbox”>

<input type=”file”>

<input type=”password”>

 

<input type 활용실습>

1) 개인정보 입력창

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="loginck.jsp">
이름: &nbsp;&nbsp;&nbsp;<input type="text" name="cname"><br/>
아이디: <input type="text" name="id"><br/>
비밀번호: <input type="password" name="pwd"><br/>
성별:
 남<input type="radio" name="gender" value="male">
 여<input type="radio" name="gender" value="female"><br>
취미:
독서<input type="checkbox" name="c" value="book">
게임<input type="checkbox" name="c" value="game">
영화<input type="checkbox" name="c" value="movie">
운동<input type="checkbox" name="c" value="exercise"><br/>
직업:
<select name="job">
<option value="백수">백수</option>
<option value="취준생" selected="selected">취준생</option>
<option value="학생">학생</option>
<option value="회사원">회사원</option>
</select><br>
<input type="submit" value="확인">
<input type="reset" value="취소">   
</form>
</body>
</html>

 

2) 결과창

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
request.setCharacterEncoding("UTF-8");
String cname = request.getParameter("cname");
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
String gender = request.getParameter("gender");
String hobby[] = request.getParameterValues("c");
String job = request.getParameter("job");
%>
이름: <%=cname%><br/>
아이디: <%=id%><br/>
비밀번호:<%=pwd%><br/>
성별:<%=gender%><br/>
취미:
<%for(String str : hobby){%>
<%=str%>&nbsp;&nbsp;   
<%}%>
<br/>
직업:<%=job%>

 

- 개인정보 입력창

 

- 입력된 정보가 출력된다.

 

<Servlet> (CGI프로그램)

- 여러 명의 사용들이 동시에 접속했을 때 웹페이지에서 모든 걸 처리하면 시스템이 무리가 간다.

 DB와 연동이 되는 게시판이나 방명록, 쇼핑몰 같은 경우에는 CGI(Common Gateway Interface) 프로그램을 사용하여 따로 처리해준다.

방식 처리분담
JSP = HTML + JAVA HTML > JAVA
Servlet = JAVA + HTML HTML < JAVA

 

<JSP / Servlet 장단점>


 JSP Servlet
장점 프로그램하기 간단하다 복잡한 구조의 프로그래밍이 가능하다
단점 복잡한 프로그램을 구현하는데 무리가 있다. HTML의 구조가 바뀔 때마다 새로 컴파일해야 한다.

 

 

<http 메소드>

GET - 웹페이지를 요청할 때 필요한 값을 보낼 때 URL에 포함시켜서 보낸다.
- 많은 양의 값을 전달하지 못한다.
- 값을 가져올 때 쓴다. (DB에서 특정정보를 끌어내 사용하는 인덱스값을 전송할 뗴)
POST - 웹페이지를 요청할 때 필요한 값을 보낼 때 URL에 포함시키지 않고 body에 포함시켜 보낸다.
- 많은 양의 값을 전달가능
- 뭔가를 수행할 때 쓴다. (DB안에 정보를 입력할 경우의 데이터를 전송할 때)
PUT 동봉한 몸체 정보를 요청한 URL 로 올리기 위해 사용함
DELETE 요청한 URL에 있는 자원이나 파일을 삭제하기 위해 사용함

 

<파일 입출력>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>파일에서 내용 읽어오기</title>
</head>
<body>
<%
try{
String path = application.getRealPath("read.txt");
BufferedReader br = new BufferedReader(new FileReader(path));
String str="";   
while((str = br.readLine()) != null){
if(str.equals("rhj")){
break;
}
}
out.println(str+"<br/>");
}catch(FileNotFoundException ex){
out.println("파일이 없다.");
}%>
</body>
</html>

<DB>

- 데이터를 체계적으로 관리하기 위해 모아둔 데이터의 집합

 

<DB의 구조>

DB -> 테이블 -> 컬럼 -> 값

 

<SQL>

테이블 컬럼 조회 show columns from [테이블명]
테이블 생성 create table [테이블명]
삭제 delete from [테이블명] where [조건]
입력 insert into [테이블](컬럼1 컬럼2) values(‘값1’, ‘값2’)
조회 select [컴럼] from [테이블명] where [조건]
수정 update [테이블명] set  [필드명]= [변경할 값] where [필드명] = [필드값]

 

<JDBC>

<%
String uid = request.getParameter("id");
String upw = request.getParameter("pw");


Connection con = null;
Statement stmt = null;
String url = "jdbc:mysql://localhost:3306/ansan";
String user = "root";
String pwd = "qwer1234";
Class.forName("org.gjt.mm.mysql.Driver");
con = DriverManager.getConnection(url, user, pwd);


if(con == null){
out.println("데이터베이스 연결할 수 없습니다.");
}else{
stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("select * from member where id = '"+uid+"'");
while(rs.next()){
String name = rs.getString("name");
String id = rs.getString("id");
String pw = rs.getString("pw");
String hp = rs.getString("hp");
String add = rs.getString("address");
String email = rs.getString("email");
out.println("이름: "+name+"<br/>");
out.println("아이디: "+id+"<br/>");
out.println("비밀번호: "+pw+"<br/>");
out.println("전화번호: "+hp+"<br/>");
out.println("주소: "+add+"<br/>");
out.println("이메일: "+email+"<br/>");
}
rs.close();
stmt.close();
con.close();
}
%>

 

 

 

<쿠키와 세션>

- 여러 개의 페이지에 데이터를 전달해야 할 때 사용하는 기술

 

<쿠키>(cookie)

-동작순서-

- 전달할 데이터를 웹 브라우저로 보냈다가 웹 서버쪽으로 되돌려 받는다.
- 첫 번째 서버가 클라이언트에서 HTML문서를 보내주면서 전달할 데이터를 함께 보낸다.
- 클라이언트는 해당 데이터를 저장해두었다가 다음 페이지를 호출할 때 해당 데이터를 함께 보낸다. 브라우저가 종료되어도 클라이언트 시스템 디스크에 남아있다.

*브라우져 설정에서 쿠키 저장이 설정되어 있지 않으면 브라우저가 종료되면 쿠키도 사라진다.

- 클라이언트 쪽에 저장

ex) 하루동안 열지 않기, 광고, 아이디 저장

 

<실습>

1) main1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
response.addCookie(new Cookie("name1", "ads"));
response.addCookie(new Cookie("name2", "tddd"));
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="main2.jsp">쿠키 조회</a>
</body>
</html>

2) main2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
Cookie[] cookie = request.getCookies();
String name1 = null;
String name2 = null;
for(Cookie cookies : cookie){
if(cookies.getName().equals("name1")){
name1 = cookies.getValue();
}
if(cookies.getName().equals("name2")){
name2 = cookies.getValue();
}
}
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
이름1: <%=name1%>
이름2: <%=name2%>
</body>
</html>

<실행화면>

 

<세션>(session)

- 여러 페이지들이 함께 작업하여 시작부터 끝까지 남아있다.

- 같은 부라우져를 사용하는 동안 계속 남아있음.

- 브라우져가 종료되면 사라진다.

- 서버 쪽에 저장

ex) 로그인 상태 구분

 

<실습>

1) main3.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
session.setAttribute("name1", "rhj");
session.setAttribute("name2", "test");
%>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="main4.jsp">세션 저장</a>
</body>
</html>

2) main4.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
이름1: <%=session.getAttribute("name1")%>
이름2: <%=session.getAttribute("name2")%>
</body>
</html>

 

<실행화면>

 

 

<파일업/다운로드>

http://www.servlets.com/cos/

- cos파일을 lib에 저장

 

<실습>

1) upload_form

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="upload.jsp" method="post" enctype="multipart/form-data">
올린이:<input type="text" name="name"><br/>
파일명:<input type="file" name="filename"><br/>
<input type="submit" value="전송">
</form>
</body>
</html>

2) upload

<%@page import="java.io.File"%>
<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
String upload_path = application.getRealPath("/pds");
int size=10*1024*1024;
MultipartRequest multi = new MultipartRequest(request,upload_path,size,"UTF-8",new DefaultFileRenamePolicy());
String name = multi.getParameter("name");
File file = multi.getFile("filename");
String filename = multi.getOriginalFileName("filename");
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%=filename%>저장완료<br/>
<a href="download.jsp?filename=<%=filename%>"><%=filename%></a>
</body>
</html>

3) download

<%@page import="java.io.FileInputStream"%>
<%@page import="java.io.File"%>
<%@page import="java.io.PrintWriter"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
String fileName = request.getParameter("filename");
String download_path = application.getRealPath("/pds")+"\\"+fileName;


//HTTP 헤더를 파일 다운로드로 저장
String sMimeType = "application/octet-stream";
response.setContentType(sMimeType);
response.setHeader("Content-Disposition", "attachment;filname="+download_path);


FileInputStream in = new FileInputStream(download_path);
ServletOutputStream outs = response.getOutputStream();


byte b[] = new byte[4096];
int numRead;


while ((numRead = in.read(b,0,b.length)) != -1){
outs.write(b,0,numRead);
}


outs.flush();
outs.close();
in.close();
%>

 

<실행 화면>

 

 

 

저작자표시 비영리 변경금지 (새창열림)

'IT > DEVELOP' 카테고리의 다른 글

이클립스 톰캣 연동하기  (0) 2023.03.06
스프링 프레임워크 게시판만들기 #1  (0) 2023.03.06

관련글

티스토리툴바