sts (spring tools suite) 스프링이라고 생각하면 된다.
하지만 우리가 해볼 것은 바로!
이클립스만 이용해서 웹 페이지를 띄워볼 생각이다.
이클립스로 웹 페이지를 띄우는 방법
New - Project
클릭
web - Dynamic Web Project
static web project랑은
솔직하게 아직 무엇이 다른지 모르겠다.
프로젝트를 만들고 나면
다음과 같이 sts랑은 조금 다른구조?
프로젝트가 생성 되게된다.
스프링은 jsp에 띄우기위해서 Controller.java가 필요한데
이클립스는 필요 없는 것 같다.
WebContent 안에 META-INF와 WEB-INF가 있다.
근데 그냥 WebContent 를 오른쪽 마우스 클릭하고
jsp 파일을 생성해준다.
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<script src="https://kit.fontawesome.com/b322818db5.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="../../../../resources/user/css/login.css">
<!-- stylesheet은 참조하겟다 login.css 이파일을 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>로그인 폼</title>
</head>
<body>
<!-- <video autoplay="" muted="" loop="">
<source src="../../video/couple.mp4" type="video/mp4" style="max-width: 100%" >
</video> -->
<div class="main_div">
<div style="padding-left: 75px">
<img src="../../../../resources/xdmin/image/hoem.png" width="150px" >
</div><br>
<div class="title">로그인</div>
<form action="#">
<div class="input_box">
<input type="text" id="ifmmId" name="ifmmId" placeholder="Email or Phone" maxlength="30">
<div class="icon">
<i class="fas fa-user"></i>
</div>
</div>
<div style="float: right; ">
<Span><a href="#">아이디찾기</a></Span>
</div>
<br>
<div class="input_box">
<input type="password" id="ifmmPassword" name="ifmmPassword" placeholder="Password" maxlength="16">
<div class="icon">
<i class="fas fa-lock"></i>
</div>
</div>
<!-- option_div 다른걸로 바꿔주기 pw 에도 적용해줘야됨 css에서 -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox"
id="flexSwitchCheckChecked" checked> <span><a
href="#">자동로그인</a></span>
</div>
<div class="forget_div">
<Span><a href="#">비밀번호찾기</a></Span>
</div>
<div class="input_box button fff">
<!--...이거 때문에 계속 가운데 정렬이 안됐던거네,, div에다가 넣어줘야됨
input은 css 안먹힌다고 알고있자... -->
<input class="button" type="submit" id="btnLogin" value="접 속">
</div>
<div class="sign_up">
<span>회원가입</span>
</div>
<hr><br>
<div class="container">
<div class="twitter">
<a href="#"><i class="fab fa-twitter"></i>트위터 계정으로 로그인</a>
</div>
<div class="facebook">
<a href="#"><i class="fab fa-facebook-f"></i>페이스북 계정으로 로그인</a>
</div>
<div class="apple"> <a href="#"><i class="fab fa-apple"></i>애플 계정으로 로그인</a>
</div>
<div class="kakao">
<a href="#"><img src="../../../user_images/kakao.png"
width="25px">    
     카카오톡 계정으로 로그인</a>
</div>
</div>
</form>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$("#btnLogin").on("click", function() {
$.ajax({
async: true
,cache: false
,type: "post"
,url: "/member/loginProc"
,data : { "ifmmId" : $("#ifmmId").val(), "ifmmPassword" : $("#ifmmPassword").val()}
,success: function(response) {
if(response.rt == "success") {
location.href = "/index/indexView";
} else {
alert("회원없음");
}
}
,error : function(jqXHR, textStatus, errorThrown){
alert("ajaxUpdate " + jqXHR.textStatus + " : " + jqXHR.errorThrown);
}
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</html>
그리고 이런식으로 코드를 그냥 간단하게 짜도 된다
나도 그냥 아무거나 복사 해왔다.
그리고 스프링에서 서버를 켰던 것처럼
서버를 생성하고
실행시켜주게 되고
http://localhost:8080/alpha_project/alpha.jsp
이런식으로 주소를 입력해 주게되면,
웹 페이지는 일단 성공적으로 뜨는 것 같다.
To be continue..
'Career' 카테고리의 다른 글
| [Career] 첫 회사 퇴사 그리고 새로운 시작 (0) | 2023.04.16 |
|---|---|
| [Career] Search tips (0) | 2023.02.15 |
| [Career] 중간프로젝트 과제 (0) | 2022.07.29 |
| [Career] VirtualBox 설치 (0) | 2022.07.14 |
| [Career] CentOs7 설치 (0) | 2022.07.13 |