728x90

 

 

details, summary (toggle)+ <c:foreach> 적용 코드

1.반복하기 위해 가장 바깥 테두리에 <c:foreach>를 위치시킴

2.detail태그 기능을 사용할려면 처음과 끝이 detail태그로 덮어야하므로 처음과 끝은 detail태그로

3.summary가 접혀져있고 요약부분을 보여주는 부분이기에 접혀져있는 상태에서 보여주고 싶은 부분을 summary 안에 집어넣고 펼쳐있을 때(open) 보여주고 싶은 부분은 <p>,<ul,li>태그 같은 걸로 처리해야한다

4.summary부분을 하나로 묶고 css 하기위해 div로 한번 감싸고 그 안에 게시판 번호,타이틀,작성날짜 등을 넣었다

5.펼쳐지는 부분(open)을 하나로 관리하기 위해 <div class="QnaToggleOpen"> 만들고 그 안에 <ul>과 <li>로 펼쳐지는 부분을 구현

 

 

728x90
반응형
728x90

 

에러메세지

HTTP 상태 404 – 찾을 수 없음

Origin 서버가 대상 리소스를 위한 현재의 representation을 찾지 못했거나, 그것이 존재하는지를 밝히려 하지 않습니다.

상황

배운 코드를 써볼려고 새로 workspace와 프로젝트 파일을 생성하고 jsp뷰와 모델.vo 파일만해서 실행해봄. 수업 때는 저 두 파일만해서 페이지가 켜졌는데 에러나서 찾는 중

원인

이 에러메세지 원인의 상당 부분은 해당 경로가 잘못됬거나,경로가 지정하는 곳에 파일이 없는 것

지금의 경우에는 WEB-INF 아래 있는 파일들은 서버에서만 접근이 가능해서 서블릿을 통해야만 접근 할 수 있기 때문에

그래서 파일을 찾지 못한다고 나왔던 것

 

해결

파일들을 WebContent 아래로 이동

728x90
반응형
728x90

 

 

설정되어 디렉토리 경로들이 어그러졌기 때문에 구동이 안될 것이다

이때 체크할 포인트를 알아보자

 

1.project Explorer - 해당 프로젝트 우클릭 properties 선택 - java bulid path - libraries 탭

missing 나는게 있는 체크

missing 떠있는 걸 edit으로 경로 재연결

 

 

 

2.properties - facets - runtimes에 에러 있는지 확인

있다면 Servers탭으로 이동

Runtime environment 들어가서 톰캣 디렉토리가 잘 연결이 되었는지 확인

 

 

728x90
반응형
728x90

 

Servlet이란?

웹 서비스를 위한 자바 클래스

javax.servlet.http.HttpServlet클래스를 extends를 통해 인터페이스 상속 받아 사용

 

web.xml : 설정, 매핑,연결

index.html : 화면단

java class : extends HttpServlet 기능단

체크박스, 텍스트박스 등 사용자 데이터 받는 html 페이지

 

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
  <display-name>0_Practice_Servlet</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <!-- 위의 welcom-file태그는 시작 시 실행시키는 파일들을 명명하는 곳임 -->
  
 
 <servlet>
 	<servlet-name>pracServlet1_get</servlet-name>
 	<servlet-class>tryto.pracServlet1_get</servlet-class>
 </servlet>
 <servlet-mapping>
 	<servlet-name>pracServlet1_get</servlet-name>
 	<url-pattern>/pracServlet1_get.do</url-pattern>
 </servlet-mapping>
  
  
  
</web-app>

 

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jumbotron Template for Bootstrap</title>

<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>

<body>
	<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
		<a class="navbar-brand" href="#">Navbar</a>

		<div class="collapse navbar-collapse" id="navbarsExampleDefault">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item active">
					<a class="nav-link" href="#">Home</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Link</a>
				</li>
				<li class="nav-item">
					<a class="nav-link disabled" href="#">Disabled</a>
				</li>
				<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
		            <div class="dropdown-menu" aria-labelledby="dropdown01">
		            	<a class="dropdown-item" href="#">Action</a>
		            	<a class="dropdown-item" href="#">Another action</a>
		            	<a class="dropdown-item" href="#">Something else here</a>
		            </div>
				</li>
			</ul>
			<form class="form-inline my-2 my-lg-0">
				<input class="form-control mr-sm-2" type="text" placeholder="Search"
					aria-label="Search">
				<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
			</form>
		</div>
	</nav>
	
	<div class="jumbotron">
		<div class="container">
			<h1 class="display-3">Hello, Servlet world!</h1>
			<p>
				서블릿이란, 웹 서비스를 위한 자바 클래스를 말하며 자바를 사용해 웹을 만들기 위해 필요한 기술로
				javax.servlet.http.HttpServle클래스를 상속받는다.<br>
				다시 말해 기존의 java파일에 웹 페이지 구현을 위한 html이 들어간 구조라고 볼 수 있다.<br>
				클라이언트의 요청을 처리하고 그 결과를 HTML을 사용하여 요청에 대한 응답을 다시 클라이언트에 전송하는 구현 규칙이 있다.<br>
				단, HTML변경 시 servlet을 재컴파일 해야한다는 단점이 있다.
				
			</p>
			<p>
				<a class="btn btn-primary btn-lg" href="#" role="button">Learn
					more &raquo;</a>
			</p>
		</div>
	</div>

	<div class="container">
		<!-- Example row of columns -->
		<div class="row">
			<div class="col-md-4">
				<h2>Servlet-1</h2>
				<p>
					<!-- get방식 헤더에 첨부되어 전송됨 -->
					GET방식은 URL에 변수(데이터)를 포함시켜 요청하는 것으로 보안 유지가 불가능하다.
					따라서 로그인 같은 경우 get방식은 부적합하다. GET방식에서 데이터를 header에 포함하여 전송하는데
					Body는 보통 빈 상태로 전송되며 header내용 중 body의 데이터를 설명하는 content-type헤더필드도 듣어가지 않는다.
					header에 데이터가 들어가기 때문에 전송하는 길이에 제한이 있으며 초과 데이터는 절단된다. 캐싱이 가능하다.
										
				</p>
				<p>
					<a class="btn btn-secondary" href="servlet/pracServlet1_get.html" role="button">View
						details &raquo;</a>
				</p>
			</div>
			<div class="col-md-4">
				<h2>Servlet-2</h2>
				<p>
					<!-- post방식 바디에 첨부되어 전송됨 -->
					POST방식은 URL에 변수(데이터)를 노출하지 않고 요청하는 것으로 보안 유지가 가능하다.
					데이터를 Body에 포함하여 전송하므로 Body의 데이터를 설명하는 content-type헤더 필드가 들어가고 어떤 타입인지 명시해줘야 한다.
					body에 데이터가 들어가 전송 길이는 제한이 없지만 최대 요청 받는 시간이 존재해 페이지 요청, 기다리는 시간이 있다.
					URL에 데이터가 노출되지 않아 즐겨찾기나 캐싱이 불가능하다.
										
					
				</p>
				<p>
				    <a class="btn btn-secondary" href="#.html" role="button">View
						details &raquo;</a>
				</p>
			</div>
			<div class="col-md-4">
				<h2>Servlet-3</h2>
				<p>
					서블릿은 화면에 표현될 html코드를 프로그램적으로 작성한다.
					이것으로 생기는 단점은 비즈니스 로직과 화면 구현 디자인이 같이 있어 가독성이 떨어지고 개발이 어렵다.
					이러한 구조는 협업을 중요시 하는 개발자들의 입장에서는 좋지 않은 코드로 비즈니스 로직과 디자인은 분리되는 것이 좋다.
					또한 html파일 수정 시 서버를 재시동해야하고 htm1에는 서버에서 얻어온 정보를 동적으로 반영하기 힘들다.
					
				
				</p>
				<p>
					<a class="btn btn-secondary" href="#" role="button">View
						details &raquo;</a>
				</p>
			</div>
		</div>

		<hr>

	</div>

	<footer class="container">
		<p>&copy; Company 2017-2018</p>
	</footer>
</body>
</html>
728x90
반응형
728x90

 

web1-17.인터넷을 여는 열쇠 : 서버와 클라이언트

인터넷이 동작하기 위해서는 최소 2대가 필요

최초 웹사이트를 개발한  버너스리는 웹브라우저와 웹서버를 개발함

 두대는 인터넷에 연결되어있음.

 

Web Browser : 웹브라우저 주소창에 http://info.cern.ch/index.html 입력하고 엔터누르면, 인터넷을 통해 전기신호를 웹서버 http://info.cern.ch 보냄. 그리고 신호 안에는 index.html 파일을 원한다는 정보가 담겨있음.

Web Server : 인터넷연결상태 하드디스크에 index.html파일 저장된상태

 

<절차 설명>

Web Browser : 웹브라우저 주소창에 http://info.cern.ch/index.html 입력하고 엔터누르면, 인터넷을 통해 전기신호를 웹서버 http://info.cern.ch 보냄. 그리고 신호 안에는 index.html 파일을 원한다는 정보가 담겨있음.

그럼 웹서버는 하드디스크에서 index.html파일을 찾아서 웹브라우저가 설치된 컴퓨터에 전기적 신호로 바꿔서 정보를 쏴준다.  신호 안에는 index.html파일에 있는 코드가 담겨있음.

웹브라우저에는 웹서버에서 보낸 index.html 정보(코드) 도착하고  코드를 웹브라우저가 읽어서 해석한 다음 화면에 표시해줌.  일련의 과정이 우리가 아는 웹사이트가 동작하게 되는 과정

 

*웹브라우저와 웹서버가 서로 정보를 주고 받음

웹브라우저의 역할 : 정보 요청(request) //  클라이언트라고 부를 수도 있음

웹서버의 역할 : 정보 응답(response)

 

게임으로 치면 게임 클라이언트와 게임서버

 

 

 

 

웹서버 두가지방법

자신의 컴퓨터에 웹서버를 직접 깔아서 사용

이런 일을 대행해주는 업체에 맡기는 

 

생활코딩 추천 배움방법

웹호스팅으로 가볍고 쉽게 시작해서 해보고, 웹서버를 통해서 원리를 파악하는 방향을 추천

 어렵게 느껴지거나 시간이 없다면 웹호스팅만 보고갈 

 

 

 

web1-18.웹호스팅 : github page

 

host : 인터넷이 연결되어 있는 컴퓨터 한대 한대를 호스트라 부름.

 - 웹서버를 운영하기 위한 컴퓨터

 - 웹을 목표로 host 빌려주는 사업을 한다면 웹호스팅 업체(대표적 회사 : github)

 - 대부분 전문적인 웹호스팅 업체에 맡김

 

 

웹호스팅 종류

static web hosting : 일정사용량이 넘으면 유료전환 되는 서비스

free static web hosting : 무료

추천 웹호스팅 업체

 - bitballoon.com

 - neocities.org

 - amazon s3

 - google cloud strage

 - azure blob

(시간이 지남에 따라 성장&도태되는 업체가 생기니 검색으로 알아볼 )

 

깃에 업로드한 파일들을 계속 재업하면서 버전관리를   있음☆

 

깃허브를 통해 싸이트 오픈. 만약 안될경우 주소 뒤에 파일명 붙여볼 (ex : index.html)

(아무리 많은 사람들이 들어와서 무료)

 

 

728x90
반응형

'웹 관련 > └생활코딩 WEB1' 카테고리의 다른 글

생활코딩 WEB1 : 20  (0) 2021.12.17
생활코딩 WEB1 : 19-19.3  (0) 2021.12.17
생활코딩 WEB1 : 14-16  (0) 2021.12.12
생활코딩 WEB1 : 11-13  (0) 2021.11.09
생활코딩 WEB1 : 08-10  (0) 2021.11.08

+ Recent posts