2Bbear's knowledge workshop

자바 서블릿을 사용해보자

WebDegine/Web2019. 1. 2. 17:19

서블릿이란?


JSP 파일의 수명


Java Servlet은 자바를 사용하여 웹페이지를 동적으로 생성하는 서버측 프로그램 혹은 그 사양을 말하며, 흔히 서블릿이라 불린다.

서블릿은 웹 서버의 성능을 향상하기 위해 사용되는 자바 클래스의 일종이다.

서블릿은 JSP와 비슷한 점이 있지만, JSP가 HTML 문서 안에 Java 코드를 포함하고 있는 반면, 서블릿은 자바 코드 안에 HTML을 포함하고 있다는 차이점이 있다.

- 위키백과


============================================================

아무튼 이번에 만들려고 하는 것은 html에서 gmail로 이메일을 보내는 기능이다!


HTML 또는 JSP로 만든 파일에서 버튼을 누를 경우 서블릿으로 만든 것에 접속하는 방식으로 데이터를 처리할 것이다.!


1. 서블릿으로 gmail을 보내는 기능을 만들자!

참고 : http://it77.tistory.com/208


JAF 프레임워크 가 필요하다 https://www.oracle.com/technetwork/java/jaf11-139815.html

JavaMail 라이브러리가 필요하다! https://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive-downloads-eeplat-419426.html#javamail-1.4.5-oth-JPR


사랑해요 오라클!


두 라이브러리를 다운받아 프로젝트의 적당한 곳에 넣어둔다.


난 그냥 막 넣었다. 

근데 javamail 폴더 안에 demo가 있는데 그거 오류나니 그 폴더만 삭제했다.

추가로 java 본래 jre-lib폴더에 들어가서 mail.jar 파일을 넣어줘야 한다.


package mailer;
 
import java.io.IOException;
import java.util.Properties;
 
import javax.mail.Authenticator;
import javax.mail.Message;
import javax.mail.Session;
import javax.mail.Transport;
import javax.mail.internet.InternetAddress;
import javax.mail.internet.MimeMessage;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
/**
 * Servlet implementation class SendMail
 */
public class SendMail extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    /**
     * @see HttpServlet#HttpServlet()
     */
    public SendMail() {
        super();
        // TODO Auto-generated constructor stub
    }
 
    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
    }
 
    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
 
        request.setCharacterEncoding("UTF-8");
 
        response.setContentType("text/html;charset=UTF-8");
        response.setCharacterEncoding("UTF-8");
 
        String m_name =     request.getParameter("name");
        String m_email =    request.getParameter("email");
        String m_title =    request.getParameter("title");
        String m_text =     request.getParameter("text");
 
        try {
            String mail_from =  m_name + "<" + m_email + ">";
            String mail_to =    "admin<admin@83rpm.com>";
            String title =      "hosting.83rpm.com 요청사항 :: " + m_title;
            String contents =   "보낸 사람 :: " + m_name + "&lt;" + m_email + "&gt;<br><br>" + m_title + "<br><br>" + m_text;
 
            mail_from = new String(mail_from.getBytes("UTF-8"), "UTF-8");
            mail_to = new String(mail_to.getBytes("UTF-8"), "UTF-8");
 
            Properties props = new Properties();
            props.put("mail.transport.protocol", "smtp");
            props.put("mail.smtp.host", "smtp.gmail.com");
            props.put("mail.smtp.port", "465");
            props.put("mail.smtp.starttls.enable", "true");
            props.put("mail.smtp.socketFactory.port", "465");
            props.put("mail.smtp.socketFactory.class", "javax.net.ssl.SSLSocketFactory");
            props.put("mail.smtp.socketFactory.fallback", "false");
            props.put("mail.smtp.auth", "true");
 
            Authenticator auth = new SMTPAuthenticator();
 
            Session sess = Session.getDefaultInstance(props, auth);
 
            MimeMessage msg = new MimeMessage(sess);
 
            msg.setFrom(new InternetAddress(mail_from));
            msg.setRecipient(Message.RecipientType.TO, new InternetAddress(mail_to));
            msg.setSubject(title, "UTF-8");
            msg.setContent(contents, "text/html; charset=UTF-8");
            msg.setHeader("Content-type", "text/html; charset=UTF-8");
 
            Transport.send(msg);
 
            response.sendRedirect("request_complete.jsp");
        } catch (Exception e) {
            response.sendRedirect("request_failed.jsp");
        } finally {
 
        }
    }
 
}


출처: http://it77.tistory.com/208 [시원한물냉의 사람사는 이야기] 

서블릿 코드


이 코드에서 원하는 부분만 가져가서 자기 코드에 추가해보자.

일단 import하다가 터질텐데 이유는 jar 라이브러리 추가를 안해줬으니까!!!! jar 추가는 프로젝트 폴더 build path에서 라이브러리에 추가하면 된다.


package mypack;


import javax.mail.PasswordAuthentication;

import javax.mail.Authenticator;



public class SMTPAuthenticator extends Authenticator {

public SMTPAuthenticator() {

        super();

    }

 

    public PasswordAuthentication getPasswordAuthentication() {

        String username = "지메일주소";

        String password = "지메일암호";

        return new PasswordAuthentication(username, password);

    }


} 

SMTPAuthenticator.java 파일 코드


Authenticator를 상속받는 이러한 인증객체를 따로 구현한 다음 위 서블릿 클래스와 같은 디렉토리에 넣어준다. 이 서블릿 클래스에 파라미터로 name, email, title, text 파라미터를 주면 설정된 메일 주소로 메일을 보내게 된다. 받는 사람도 따로 받고 싶다면 역시 파라미터로 받으면 된다.




'WebDegine > Web' 카테고리의 다른 글

jQuery Plugin 사용법  (0) 2019.01.02
Jquery 기본적인 사용법  (0) 2019.01.01
[CSS] 부트스트랩 사용법  (0) 2018.12.31

jQuery Plugin 사용법

WebDegine/Web2019. 1. 2. 02:25

http://blog.work6.kr/70


를 참고 했습니다.

=========================================================

으아아 jQuery Plugin 사용법을 설명하겠다아


플러그인이란 간단하게 기존의 기능을 확장할 수 있게 도와주는 프로그램입니다.

제이쿼리의 경우 주로 메소드로 많이 사용된다.


예시를 들면

zerofy라는 플러그인을 만들었다면, $('#zero').zerofy()라고 쓸 수 있는 메소드가 생성되는 것이다.

그럼 zerofy라는 플러그인을 어떻게 추가하는가

$.fn.zerofy = function(options) {

  var settings = $.extend({

    repeat: 1 // 기본 설정

  }, options);

  var zeros = '0'.repeat(settings.repeat);

  return this.each(function() {

    $(this).html(zeros);

  });

};

$('#zero').zerofy({ repeat: 5 }); // 00000

여기 html 전부를 0으로 만드는 zerofy라는 플러그인을 만들었다.

each는 여러 태그를 선택했을 경우 각각에 대해 반복문을 돌며 동작을 수행한다.

return this.each를 했기 때문에 각각의 this가 return되어 메소드 체이닝을 할 수 있다.



안에 settings 객체를 만들어 $.extend로 기본 설정과 주어진 options 객체를 합친다. 옵션을 주지 않으면 기본 설정인 repeat: 1이 사용된다. '0'.repeat()을 했는데 이 메소드는 ES2015에 추가된 메소드이다. 만약 브라우저가 es2015를 지원하지 않는다면 따로 만들어야 한다.



아무튼 이렇게 만든 플러그인을 추가하고 싶다면.




이렇게 plugin 폴더를 넣어주고


<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    


    <title>RoyalSlider Example</title>


    <!-- jQuery, 1.7+ is required -->

    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>

    <!-- main slider JS, get it from build tool http://dimsemenov.com/private -->

    <script src="royalslider\jquery.royalslider.min.js"></script>



    <!-- main slider style -->

    <link href="royalslider/royalslider.css" rel="stylesheet">

    <!-- selected skin style -->

    <link href="royalslider\skins\default\rs-default.css" rel="stylesheet">


<script>

    // Slider initialization, you may put this part of code in JS file

    jQuery(document).ready(function($) {


        // slider initialization

        $('#content-slider').royalSlider({

            // example of slider options

            controlNavigation: 'bullets',

            autoPlay: {

                enabled: true

            },

            deeplinking: {

                enabled: true,

                prefix: 'slider-'

            }

        });


    });

    </script>

    <!-- slider css -->

    <style>

            /* you may put here additional slider CSS */

            /* but it'll be better if you move it to separate CSS file that your site uses */

    </style>


  </head>

  <body>


    <!-- actual slider code -->

    <div id="content-slider" class="royalSlider contentSlider rsDefault">

      <div>slide1</div>

      <div>slide2</div>

      <div>slide3</div>

    </div>


    


  </body>

</html> 


코드 상에서 각 파일의 주소값을 잘 맞춰서 넣어주면 실행이 된다.


정상 실행이 되는지 파악 하고 싶으면 크롬으로 확인해보면 된다

'WebDegine > Web' 카테고리의 다른 글

자바 서블릿을 사용해보자  (0) 2019.01.02
Jquery 기본적인 사용법  (0) 2019.01.01
[CSS] 부트스트랩 사용법  (0) 2018.12.31

Jquery 기본적인 사용법

WebDegine/Web2019. 1. 1. 23:33

jquery는 자바스크립트를 좀더 손쉽게 사용하기 위해 만들어진 자바스크립트 라이브러리 중 하나이다.

자주 쓰이는 로직들을 랩핑해두었다고 생각하면 된다.

또 셀렉터를 이용해서 원하는 요소를 지정할 때 쓰이는 document.getElementsByID등을 $(Selector), jQuery(Selector) 형식으로 표현할 수 있으므로 코드도 짧아지게 된다.


- jQuery를 다운로드하는 방법

 https://jquery.com/download/에 접속하여 원하는 버전을 다운 받습니다.


저는 https://code.jquery.com/jquery-3.3.1.min.js 를 다운 받았습니다. 

근대 이런게 뜨내요...그래요 이게 jquery-3.3.1.min.js 입니다. 이걸 어떻게 다운 받으시면 되고 저 같은 경우는 다운 받는 방법을 모르니 그냥 복사 한다음에 메모장에 넣고 그 뒤에 js확장자로 변경하겠습니다.


그렇게 파일을 만들고 자신의 웹 프로젝트에 js 디렉토리를 만든다음에 그 안에 파일을 넣어줍시다.


-jQuery를 사용하는 방법

다운받은 js 파일을 이용할 경우

<head>

 <script src="js/jquery-3.1.0.min.js"></script>

<head> 
제이쿼리를 쓰기 위해서는 head 부분에 사용선언을 해주어야 합니다.


CDN을 이용할 경우

<head>

 <script src="http://code.jquery.com/jquery-latest.min.js"></script>

<head> 

또는 사용 가능한 url을 가져다 써도 됩니다.

<head>

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<head> 


그냥 파일로 하면 오류 발생할 경우가 많으니까 CDN 씁시다.


테스트를 해봅시다

<%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

$(function(){

        $('h3').html("jquery test");

     });

</script>

<title>Insert title here</title>

</head>

<body>

<script>

 

</script>

<h3>hello hi</h3>

</body>

</html>

이 코드를 이렇게 쓰면 .h3안에 있는 hello hi가 안나오고 jquery test가 나옵니다.



- 기본 사용법


제이쿼리는 CSS처럼 selector를 가집니다.

$(selector).action(); 이 기본 형태입니다.


selector는 시작 부분에 언급한 것 처럼, document.getElementById에서 getElementById를 맡고 있다고 보면 됩니다. 


아이디는 #id 클래스는 .class로 html 태그는 p로 표현하면 됩니다. 응용해서 특정 클래스 내의 모든 html태그에 적용시키려면 .className div 이런 식으로 사용하게 됩니다.

간단한 예제

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Tutorial test</title>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script>

        $(function(){

            $('#first').css("color","red");

            $('.second').css("color","blue");

            $('p').css("color","yellow");

        });

    </script>

</head>

<body>

    <div id="first">first is red</div>

    <div class="second">second is blue</div>

    <p>this is yellow</p>

</body>

</html>


action은 event가 될수도, effect, html이 될 수도 있습니다. 말 그대로 액션을 일어나게 하기 위해 쓰이는 부분입니다. 위의 예시에서 $(funtion(){}); 이라는 구조가 나왔는데 이것은 웹 페이지의 html이 모두 출력되면 바로 실행 된다는 뜻으로, $(document).ready(funtion(){}); 과 같은 의미입니다. 여기서 readt() 역시도 action()의 하나 입니다.


event

마우스로 요소를 옮기는 것, 클릭하는 것 등의 모두가 이벤트라 할 수 있다.

간단한 click 이벤트를 알아보자

$(selector).clock(); 이렇게 사용된다.


 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Tutorial test</title>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script>

        $(function(){

            $('#first').css("color","red");

            

            $('.second').css("color","blue");

            $('.mybutton').click(function(){

            $('.second').css("color","green");

            });

            $('p').css("color","yellow");

            

        });

    </script>

</head>

<body>

    <div id="first">first is red</div>

    <div class="second">second is blue</div>

    <p>this is yellow</p>

    <button type="button" class="mybutton"></button>

    

</body>

</html>


버튼을 누르면 2번째 문장이 초록색으로 바뀐다.


hover

마우스 커서를 요소 위에서 왔다갔다 할 때 발생하는 이벤트이다.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Tutorial test</title>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script>

        $(function(){

            $('#first').css("color","red");

            

            $('.second').css("color","blue");

            $('.mybutton').click(function(){

            $('.second').css("color","green");

            });

            $('p').css("color","yellow");

            

            $('.selector').hover(function(){

            $('.second').css("color","blue");

          }, function(){

        $('.second').css("color","red");

          });

        });

    </script>

</head>

<body>

    <div id="first">first is red</div>

    <div class="second">second is blue</div>

    <p>this is yellow</p>

    <button type="button" class="mybutton"></button>

    <button type="button" class="selector"></button>

    

</body>

</html>


2번째 버튼에 마우스를 가져대면 2번째 문장의 색이 변하는 것을 확인 할 수 있다.


keypress 이벤트

키보드가 눌리면 발생된다.


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Tutorial test</title>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script>

        $(function(){

            $('#first').css("color","red");

            

            $('.second').css("color","blue");

            $('.mybutton').click(function(){

            $('.second').css("color","green");

            });

            $('p').css("color","yellow");

            

            $('.selector').hover(function(){

            $('.second').css("color","blue");

          }, function(){

        $('.second').css("color","red");

          });

            $('.myinput').keypress(function(){

            alert("keypress called");

            });

        });

    </script>

</head>

<body>

    <div id="first">first is red</div>

    <div class="second">second is blue</div>

    <p>this is yellow</p>

    <button type="button" class="mybutton"></button>

    <button type="button" class="selector"></button>

    <input type="text" class="myinput" ></input>

</body>

</html>

입력란에 뭔가 입력하려고 하면 경고창이 뜨게 된다.


display

글의 내용을 숨기거나 표시하거나 드롭다운 메뉴를 만들 수도 있고 등등의 효과를 구현할 수 있다.

show/hide

fadeIn/fadeOut

slideUp/slideDown 등이 잇다.


show/hide


 show([duration][,complete]);

hide([duration][,complete]);

duration과 complete는 각각 효과의 지속시간, 효교ㅘ가 완료 되엇을 때 실행될 funtion을 의미하는 것으로 optional한 부분이다. .duration의 경우 단위로는 1000ms가 1초가 되며 따로 지정해주지 않으면 400ms가 default값으로 가지게 된다. slow , fast로 쓸 수도 있는데 각각 600ms, 200ms를 의미한다.

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("#hide").click(function(){

    $("p").hide();

  });

  $("#show").click(function(){

    $("p").show();

  });

});

</script>

</head>

<body>


<p>If you click on the "Hide" button, I will disappear.</p>


<button id="hide">Hide</button>

<button id="show">Show</button>


</body>

</html>


버튼을 눌르면 글자가 사라지고 나타난다.


복잡하게 if문 쓰자면

function toggle_layer() {

if($("#layer").css("display") == "none"){

$("#layer").show();

}else{

$("#layer").hide();

}

}


이렇게 쓸 수 있고 


toggle을 이용하여 사용하는 방법도 있다

$("#tagID").toggle(); // show -> hide , hide -> show 




더 많은 API는 이곳에서 찾아 볼 수 있다.

https://oscarotero.com/jquery/




'WebDegine > Web' 카테고리의 다른 글

자바 서블릿을 사용해보자  (0) 2019.01.02
jQuery Plugin 사용법  (0) 2019.01.02
[CSS] 부트스트랩 사용법  (0) 2018.12.31

[CSS] 부트스트랩 사용법

WebDegine/Web2018. 12. 31. 15:14

참고 : http://tworab.tistory.com/71

============================================================


'WebDegine > Web' 카테고리의 다른 글

자바 서블릿을 사용해보자  (0) 2019.01.02
jQuery Plugin 사용법  (0) 2019.01.02
Jquery 기본적인 사용법  (0) 2019.01.01

티스토리툴바