본문 바로가기
IT코딩공부!

#30 JS(history, 팝업창 띄우기!!) JSP공부하기 시작!!!

history. 2023. 5. 12. 16:50

오늘의 노래!!!

 
Memories
아티스트
Maroon 5
앨범
JORDI (Deluxe)
발매일
1970.01.01

 

[0] history

<body>
    <button id="naver">네이버</button>
    <button id="back">이전</button>
    <button id="forward">다음</button>
</body>

<script src="https://code.jquery.com/jquery-3.6.4.js"
integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E="
crossorigin="anonymous">
</script>

<script>
    $('#naver').click(function(){
        location.href="http://www.naver.com";
    });

    $('#back').click(function(){
        window.history.back();
    });

    $('#forward').click(function(){
        window.history.forward();
    });
</script>

네이버 버튼 >> 이동

이전 >> back 뒤로가기

다음 >> forward 다시 네이버로 이동

-> 메세지 버튼 남길때  주로 사용~~~

웹페이지 출력값

[1] 팝업창 확인,선택,입력창 띄우기

<body>
    <button id="popup">알림창</button>
    <button id="conf">선택창</button>
    <button id="pormp">입력창</button>
</body>

<script src="https://code.jquery.com/jquery-3.6.4.js"
integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E="
crossorigin="anonymous">
</script>

<script>
    $('#popup').click(function(){
        alert("알림창 입니다");
    });

    $('#conf').click(function(){
        let con = confirm('정말 삭제하시겠습니까?');
        console.log(con);

        if(con ==true){
            alert('삭제완료');
        } else{
            alert('취소완료');
        }
    });

    $('#pormp').click(function(){
        let stuName = prompt('당신의 이름은?');

        if(stuName==""){
            alert('이름을 입력 부탁드려요~');
        } else if (stuName==null){
            alert('취소했습니다');
        } else{
        alert(`${stuName}님 환영합니다.`);
        }
    });
</script>

popup창 alert으로 뜨게 만들고~

 

conf 버튼을 누르면 먼저 삭제하시겠습니까 물어보고 맞으면 삭제 아니면 취소

 

pormp버튼을 누르면 이름을 물어보고 맞으면 ~~환영합니다, 아니면 이름입력 부탁드려요~~

JSP 시작

window > preferences >> 웹기본 설정
파일 UTF-8로 되어 있는지 확인!!!
web에서 CSS, HTML, JSP 폰트를 UTF-8로 설정한다
JSP는 확장자여서 직접 JSP파일을 지정해서 생성!!
없에!!!
버전을 11로변경
자바 버전을 11로 변경

https://tomcat.apache.org/download-90.cgi

Apache Tomcat 설치~

컴퓨터 사양에따라 설치
각 원하는 서버와 포트 지정, 이름과 비번 지정 후
설치 완료 되었는지 확인!
파일경로 9.0으로 진행~
서버경로 설정 완료!!!
모듈 9.0 Apply 설정
포트랑 서버 확인!!! 에러뜨면 톰캣 문제니&nbsp; 포트서버 바꿔주기~~!!!

또한

이렇게 에러가 뜰 수가 있다.

안뜨고 액세스 허용 알림창 뜨면 성공한거니 아래로는 안봐도 된다.

저건 톰캣이 쓰려는 포트가 이미 돌고있다는 뜻이다. 그럼 이제 저 포트를 죽여버려야 다시 쓸 수가 있다.

 

 

포트를 죽이려면 일단 명령프롬프트를 켜야 한다.

이렇게 치면 지금 돌고 있는 포트가 뜬다.

8009와 8080이 돌고 있다. 이제 저 7604라는 놈을 죽이면 된다.

이렇게 하면 죽어야 하는데...

 

권한이 없다고 튕길 수가 있다.

그럼 명령프롬프트를 관리자권한으로 다시 실행시켜줘야 한다.

나는 이렇게 cmd를 작업표시줄에다 박아놨는데, 컨트롤+쉬프트 누른 상태에서 아이콘을 누르면 관리자 권한으로 cmd가 실행된다.

 

이제야 죽이는 데 성공했다.

 

이제 아까 했던걸 다시 하면 된다.

 

그러면 

 

액세스 허용해주면

 

짜잔

이제 저 링크를 브라우저에 넣고 돌려도 잘 돌아간다.

 

자고로 시작이 반이라고 했다.

우리는 JSP의 절반이나 한 것이다.

JSP 시작2

[1] HTTP : 네트워크에서 연결된 검퓨터가 서로 통신하기 위한 프로토콜
				 : 프로토콜이란 통신 규약을 의미
				 : www 서비스를 위한 프로토콜로 웹 서버와 클라이언트는 http를 이용한다.
				 : 요청과 응답으로 이루어져 있다.
		
[2] Web Browser : 웹의 정보를 쉽게 참조할 수 있도록 고안된 응용프로그램
						: 웹은 www를 의미하며, World Wide Web의 줄인말이다.
						
[3] DNS : 숫자로 된 아이피 주소를 문자로 변환하는 시스템
				: 일반적으로 도메인이라 부른다
				: IP주소를 알려주거나 IP주소에 대한 도메인 이름을 알려주는역할
				: EX) cmd에서 nslookup www.naver.com을 입력
				: ip주소 확인 : 223.130.200.104 // 223.130.195.95
				: google.com ip주소 : 142.250.204.68
				
[4] 서버와 클라이언트 : 서버 : 서비스를 제공하는 컴퓨터
					  	   웹서버 : 웹페이지가 들어있는 파일을 사용자들에게 제공하는 컴퓨터
					  	   클라이언트 : 서비스를 제공받는 컴퓨터
						   대표적인 웹서버 : 아파치(Apache), 인터넷정보서(IIS), 엔터프라이즈 서버 등등...

[5] 정적 웹서비스와 동적 웹서비스
			(1) HTML : 웹 문서를 만들기 위해 사용하는 기본적인 프로그래밍 언어의 한 종류
					 : 정적 웹 서비스 제공
					 
			HTML에러를 대체하고자 ↓ JS 사용
			
			(2) JavaScript : 스크립트 언어로 웹 페이지의 동작을 담당
			
			(3) JSP : HTML코드에 Java코드를 넣어서 동적 웹페이지를 생성하는 웹어플리케이션 도구

파일 생성후 무조건 UTF-8 확인할 것 // 대충 자바언어는 사용가능하다는 뜻

<%

// 이 안에서는 JAVA언어 사용 가능!!!

 

%>

많이 보게될 에러 이다... 기억하지마.. 나오지마..

// Form.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>
</head>
<body>
	<form action="FormTest.jsp" method="get">
		<fieldset>
			<legend>로그인</legend>
			<label>아이디 : <input type="text" name="id"></label><br/>
			<label>비밀번호 : <input type="password" name="pw"></label><br/>
			<input type="submit" value="로그인"/>
		</fieldset>
	</form>
</body>
</html>

// FormTest.jsp 파일

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    
<% 


	// 이안에서는 JAVA언어 사용 가능!!!
	String id = request.getParameter("id");
	String pw = request.getParameter("pw");
	
	// request.getParmeter() >>> name값을 받아온다.

	System.out.println("id : "+id);
	System.out.println("pw : "+pw);

%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>야 좀...좀...좀...좀비! --</h1><br/>

	<h1>Form.jsp에서 가져온 정보</h1>
	<h3>id : <%=id %></h3>
	<h3>pw : <%=pw %></h3>
</body>
</html>

 

// HTML을 자바를 불러들어서 만드는 방법! 순서 기억할것!

Servlet 파일 생성 후 자바로 시작!!!

자바로 사용할수 있는 파일 만들기!!!

 

 Servlet  : Java코드로 이루어져 있고, html 언어를 사용할 수 있다.
 
 jsp의 form에서
 (1) action값으로 요청한 url을 @WebServler({})으로 받는다.
 (2) method를 get으로 설정하면 doGet()
     post로 설정하면 doPost()로 이동한다

servlet에 대해서 이해하기!!

// 액션의 값에 따라 파일이동이 다르다

Form action값이 에 따라 이동하는게 다르다!!!
Form method값이 에 따라 이동하는게 다르다!!!

// doGet() 일때~~

/FormTest로 이동~ ?  id.pw나오는걸 볼수있다

 

콘솔창을 보면 doGet()만 실행된걸 볼수 있다.

// doPost() 일때~~

/FormTest로 이동~ ?  id.pw나오는걸 볼수있다
콘솔창을 보면 do()만 실행된걸 볼수 있다.
한글 사용할때 필요한 코드!!!
한글 입력 완료!!!

 

// 한문장 안에 넣어두어서 불러와 쓸 수 있다

// WebServlet({"/"}) >>  위치 중요!!!

@WebServlet({"/FormTest" })
public class JSPController extends HttpServlet {
	private static final long serialVersionUID = 1L;
        
    public JSPController() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doProcess(request,response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doProcess(request,response);
	}
	
	protected void doProcess(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=UTF-8");
		request.setCharacterEncoding("UTF-8");
		
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
		
		PrintWriter out = response.getWriter();
		out.println("아이디 : " + id + "<br/>");
		out.println("비밀번호 : " + pw + "<br/>");
		
		System.out.println("아이디 : " + id);
		System.out.println("비밀번호 : " + pw);
	}
}

// 이미지를 불러와 checkbox로 불러와~ 선택한거만 출력하기!!!

// 먼저 jsp파일에 Check코드 작성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
	table{
		text-align : center;
	}
	
	img{
		width : 200px;
	}
	
</style>
<title>Insert title here</title>
</head>
<body>
	<h1>좋아하는 사진을 선택하세요!</h1>
	<form action ="CheckServLet" method="GET">
	
		 <table>
		 	<tr>
		 		<td><img src="./image/깽똘이.jpeg"></td>
		 		<td><img src="./image/샤넬이.jpeg"></td>
		 		<td><img src="./image/샤넬이2.jpeg"></td>
		 		<td><img src="./image/아이브4.jpg"></td>
		 	</tr>
		 	<tr>
		 		<td><input type="checkbox" name="pick" value="깽똘이.jpeg"/>1번(깽똘이)</td>
		 		<td><input type="checkbox" name="pick" value="샤넬이.jpeg"/>2번(샤넬이)</td>
		 		<td><input type="checkbox" name="pick" value="샤넬이2.jpeg"/>3번(샤넬이2)</td>
		 		<td><input type="checkbox" name="pick" value="아이브4.jpg"/>4번(아이브4)</td>
		 	</tr>	
		 	<tr>
		 		<td colspan="4"><input type="submit" value="선택"></td>
		 	</tr>	 
		 </table>
	</form>
</body>
</html>

// java로 만들어진 controller패키지에 CheckServLet.java으로 생성

//자바코드에 >> HTML에 코드 작성!!!

package controller;

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;


@WebServlet("/CheckServLet")
public class CheckServLet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public CheckServLet() {
        super();
    }


	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doProcess(request,response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doProcess(request,response);
	}
	
	protected void doProcess(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=UTF-8");
		request.setCharacterEncoding("UTF-8");
		
		String[] picks = request.getParameterValues("pick");
		
		// servlet 화면을 출력하기 위한 PrintWriter객체 생성
		PrintWriter out = response.getWriter();
		
		
		// out.println(); 나 out.append() 사용가능
		out.println("<html>");
		out.println("<head>");
		out.println("<title> 이미지 선택 페이지</title>");
		out.println("<style>");
		out.println("body {background-color : orange; }");
		out.println("table {background-color : yellow; }");
		out.println("</style>");
		out.println("</head>");
		out.println("<body>");
		out.println("<table>");
		out.println("<caption>선택한 사진</caption>");
		out.println("<tr>");
		
		// 사진을 선택한 갯수만큼 반복문 실행
		for(int i=0; i<picks.length; i++) {
			out.print("<td>");
			out.print("<img src=\"./image/"+picks[i] + "\" width=\" 200px\">");
			out.print("</td>");
		}
		
		out.println("</tr>");
		out.println("</table>");
		out.println("</body>");
		out.println("</html>");

	}
}

 

 

저작자표시 (새창열림)

'IT코딩공부!' 카테고리의 다른 글

#32 이클립스(JSP) + DB 연결  (0) 2023.05.18
#31 JSP(반복문!),(DB연결 시작)  (0) 2023.05.16
#29 JS(jquery 배우기)  (0) 2023.05.11
#28 JS(핀볼이랑, 빙고게임 만들기)  (0) 2023.05.10
#27 JS( ATM기 만들어보기ex)함수사용, Event생성  (0) 2023.05.08

'IT코딩공부!' Related Articles

티스토리툴바