728x90
300x250

[Javascript(jQuery)] 바코드 생성하기

이번에 소개할 내용은 바코드 생성을 위한 소스코드를 소개하려고 한다.

 


1. 소스코드

바코드 개발에 사용될 수 있는 코드이다. jQuery로 작성된 바코드이다.

<html>
<head>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="jquery-barcode.js"></script>
</head>
<body>

     <div id="bcTarget1" style="margin-top:30px;"></div>
     <div id="bcTarget2" style="margin-top:30px;"></div>
     <div id="bcTarget3" style="margin-top:30px;"></div>
     <div id="bcTarget4" style="margin-top:30px;"></div>
     <div id="bcTarget5" style="margin-top:30px;"></div>
</body>

<script type="text/javascript">
         $("#bcTarget1").barcode("1234567890128", "code128");
         $("#bcTarget2").barcode("1234567890128", "ean13",{barWidth:2, barHeight:30});
         $("#bcTarget3").barcode("1234567", "int25",{barWidth:2, barHeight:30});
         $("#bcTarget4").barcode("1234567890128", "code128",{barWidth:1, barHeight:70,showHRI:true,bgColor:"red"});         
         $("#bcTarget5").barcode("1234567890128", "datamatrix",{showHRI:false,bgColor:"yellow"});
</script>

</html>

 


2. 태스트 화면(시연 화면)

시연화면이다.

그림 1. 바코드의 예(입문 / 종류)


* [첨부(Attachments)]

barcode_jquery.zip
0.04MB
210309_HTML_jQuery_Based_Barcode_guideline.zip
0.22MB

 

[Apache License v2.0을 적용 받는다.]


* 맺음글(Conclusion)

jQuery 기반의 바코드를 생성하는 방법에 대해서 HTML 태그를 통하여 알아보았다.


* 참조자료(Reference)

1. jQuery, https://jquery.com, Accessed by 2021-03-09, Last Modified 2021-03-09.

2. Barcode-Coder: BARCODE : JQUERY PLUGIN TO CREATE BARCODE ONLINE (barcode-coder.com), https://barcode-coder.com/en/barcode-jquery-plugin-201.html, Accessed by 2021-03-09, Last Modified 2021-03-09.

반응형
728x90
300x250

[JSP] 22. JSP/Servlet MVC2 - jQuery기반의 Ajax POST 전송 및 MVC패턴 Action 식별자


jQuery를 활용하는 방법에 대해서 소개하려고 한다.

그림 일기 수준으로 매우 편안한 마음으로 입문할 수 있는 학습 기반을 제공해주려고 한다.

심도적인 부분은 전문서적 등도 찾아보기도 하고, 검색도 많이 해보시면 좋을 듯 싶다. (변화가 워낙 빠른 분야인 만큼)



1. 결과


동적인 부분인 관계로 영상으로 올려주도록 하겠다.



영상 1. 출력 결과


jQuery가 어떤 결과물을 만들어 내는 도구인지 이해가 되었으면 하는 바램이다.

원래는 jQuery가 먼저 나온 것이 아니고, Javascript가 먼저이다.


그리고 2006년도에 약 Ajax라는 규격이 나왔는데, Javascript 파일 형태로 ajax 파일을 배포하여 동적인 처리에 대해서 접근하게 되었다.


그리고 조금 시간이 지나서 jQuery라는 게 나왔는데, 분명한 건 이건 표준은 아니다.

다만, 편하게 사용하도록 도와주는 오픈소스 진형의 library이다.




2. 프로젝트 생성하기


이러한 저차원 수준으로 작성한 이유는 프로그래밍에 겁먹지 말라는 것이다.



그림 1. 프로젝트 생성하기


File -> New -> Maven Project를 클릭한다.



그림 2. 프로젝트 생성하기


org.apache.maven.archetypes | maven-archetype-webapp를 선택한다.

Next를 클릭한다.


검색 키워드로 검색할 때, "webapp"로 하면, 조금 찾는데 시간이 절약될 수 있다.

다만, HDD 사용자는 조금 버벅될 가능성이 있다. (검색 기능이 매우 느림.)




그림 3. 프로젝트 생성하기


GroupId, Artifact Id를 적당히 입력한 후 Finish를 누른다.



3. Pom.xml - 설정하기


http://mvnrepository.com에 들어가서 "servlet"을 검색해서 최신 버전으로 해준다.

Maven Project를 아끼고 있는 이유는 정말 사용하기가 편리하다.


셋팅하는데, /src/main/webapp/WEB-INF/lib인가 폴더에 넣고, 프로젝트 속성에 들어가서 BuildPath 클릭하고 Add External Library 등록하고 

확인 몇 번하고 복잡했는데, Maven을 알게 되면서 많이 좋아진 것 같다.



그림 4. pom.xml


<?xml version="1.0" encoding="UTF-8"?>


<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

  <modelVersion>4.0.0</modelVersion>


  <groupId>com.webedu</groupId>

  <artifactId>exampleAjax</artifactId>

  <version>0.0.1-SNAPSHOT</version>

  <packaging>war</packaging>


  <name>exampleAjax Maven Webapp</name>

  <!-- FIXME change it to the project's website -->

  <url>http://www.example.com</url>


  <properties>

    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

    <maven.compiler.source>1.7</maven.compiler.source>

    <maven.compiler.target>1.7</maven.compiler.target>

  </properties>


  <dependencies>

    <dependency>

      <groupId>junit</groupId>

      <artifactId>junit</artifactId>

      <version>4.11</version>

      <scope>test</scope>

    </dependency>

    <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->

<dependency>

    <groupId>javax.servlet</groupId>

    <artifactId>javax.servlet-api</artifactId>

    <version>4.0.1</version>

    <scope>provided</scope>

</dependency>

  </dependencies>


  <build>

    <finalName>exampleAjax</finalName>

    <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->

      <plugins>

        <plugin>

          <artifactId>maven-clean-plugin</artifactId>

          <version>3.1.0</version>

        </plugin>

        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->

        <plugin>

          <artifactId>maven-resources-plugin</artifactId>

          <version>3.0.2</version>

        </plugin>

        <plugin>

          <artifactId>maven-compiler-plugin</artifactId>

          <version>3.8.0</version>

        </plugin>

        <plugin>

          <artifactId>maven-surefire-plugin</artifactId>

          <version>2.22.1</version>

        </plugin>

        <plugin>

          <artifactId>maven-war-plugin</artifactId>

          <version>3.2.2</version>

        </plugin>

        <plugin>

          <artifactId>maven-install-plugin</artifactId>

          <version>2.5.2</version>

        </plugin>

        <plugin>

          <artifactId>maven-deploy-plugin</artifactId>

          <version>2.8.2</version>

        </plugin>

      </plugins>

    </pluginManagement>

  </build>

</project>



파일명: pom.xml


[첨부(Attachments)]

pom.zip




4. Project Factes와 Build Path - 자바 버전 바꿔주기


자바 버전을 변경해줘야 한다. Maven Project 초기 셋팅이 현재 1.6으로 잡혀서 생성되기 때문이다.



그림 5. 프로젝트의 오른쪽 메뉴 모습


프로젝트를 선택한 후, 마우스 오른쪽 버튼을 클릭한다.

Properties를 클릭한다.



그림 6. Build-Path


JRE System Library [JavaSE-14]로 바꿔준다.

Edit 버튼을 누르면 바꿀 수 있다.



그림 7. Project Factes


Java의 버전을 14로 바꿔준다.




5. jQuery 사이트 - 접속하기


인터넷 웹 브라우저를 켠다.


그림 8. 윈도우 10 - 엣지 클릭하기


웹 브라우저 아이콘을 못 찾는 경우에는 그림처럼 생긴 거 클릭하면 된다. 

(그 옆에도 비슷하게 생긴 e자 아이콘을 클릭해도 무방하다.)



그림 11. jQuery 웹 사이트 접속하기


https://jquery.com/download


링크를 웹 주소창에 입력해서 접속한다.

또는 클릭해도 무방하다.


표기해놓은 것 5개 중 하나만 잘 다운로드 받으면 된다.




그림 12. jQuery 다운받기


문서 클릭\workspace-spring-tool-suite-4-4.7.2.RELEASE\{프로젝트명}\src\main\webapp\js에 저장해준다.

js폴더가 없으니깐 하나 만들어준다.

js폴더 안에 저장해준다.



영상 2. jQuery 다운로드 받는 모습



6. jQuery - ajaxPost - API 접속하기


https://api.jquery.com/jquery.post/


사이트에 접속해준다.



그림 13. jQuery 예제


이렇게 생긴 HTML태그를 복사하여 Eclipse에 옮겨갈 것이다.

참고로 이 코드가 완벽한 코드는 절대 아니다. (태스트 해 봤음.)




그림 14. index.jsp 파일에 복사 붙여넣기 해주기


그림 14와는 다르게 태스트를 완료한 코드는 아래에 있으니 참고하면 되겠다.

WEB-INF내에 views폴더 생성해준다.

그리고 index.jsp 파일을 views 폴더 안으로 이동해준다.



영상 3. views 폴더 생성 방법 및 파일 이동 시키기



그림 15. 이동을 완료한 모습 - views 폴더 내용


<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery.post demo</title>

<script src="js/jquery-3.5.1.js"></script>


</head>

<body>

 

<form action="board/insert.do" id="searchForm">

  <input type="text" name="s" placeholder="Search...">

  <input type="submit" value="Search">

</form>

<div id="result"></div>


<script type="text/javascript">

// Attach a submit handler to the form

$( "#searchForm" ).submit(function( event ) {

 

  // Stop form from submitting normally

  event.preventDefault();

 

// Get some values from elements on the page:

  var $form = $( this ),

    term = $form.find( "input[name='s']" ).val(),

    url = $form.attr( "action" );

 

  // Send the data using post

  var posting = $.post( url, { s: term } );

 

  // Put the results in a div

  posting.done(function( data ) {

    alert( "Data Loaded: " + data );

    var content = data ;

    $( "#result" ).html( content );

   

  });

 

});


</script>

<!-- the result of the search will be rendered inside this div --> 

 

</body>

</html>


파일명: index.jsp


[첨부(Attachments)]

index.zip




7. Servlet 작성하기


MVC2 패턴을 만들거니깐 서블렛을 잘 따라 해야 한다.



그림 16. Java Resources 폴더 - 마우스 오른쪽 버튼 메뉴 모습


Java Resources 폴더를 선택한 후, 마우스 오른쪽 버튼으로 클릭한다.

New-> Servlet을 클릭한다.



그림 17. Servlet 생성 작업창 - 모습 (Create Servlet)


Java Package명을 입력한다. (예: com.example.web.controller)

Class Name명을 입력한다. (예: FrontController)


Finish를 누른다.



8. web.xml 파일 - 수정작업하기


경로 위치: /src/main/webapp/WEB-INF/web.xml


문자열하고, FrontController의 *.do로 변경 작업을 해주면 된다.



그림 18. web.xml - 수정작업하기


<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 

xmlns="http://java.sun.com/xml/ns/javaee" 

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" 

id="WebApp_ID" version="3.0">

  <display-name>Archetype Created Web Application</display-name>

  <servlet>

  <servlet-name>FrontController</servlet-name>

  <servlet-class>com.example.web.controller.FrontController</servlet-class>

  <init-param>

<param-name>charset</param-name>

<param-value>UTF-8</param-value>

</init-param>

  </servlet>

  <servlet-mapping>

  <servlet-name>FrontController</servlet-name>

  <url-pattern>*.do</url-pattern>

  </servlet-mapping>

</web-app>



파일명: web.xml


[첨부(Attachments)]

web.zip




9. Class 만들기 - HttpUtil


HttpUtil 클래스를 만들어주려고 한다.



그림 19. Java Resources의 오른쪽 버튼 메뉴 모습


Java Resources를 마우스 오른쪽 버튼으로 클릭한다.

New->Class를 클릭한다.



그림 20. 클래스 생성 마법사 모습


Package명은 com.example.web.util

Name은 HttpUtil로 한다.


Finish를 누른다.





그림 21. 코드를 입력한 모습 - HttpUtil.java


package com.example.web.util;


import java.io.IOException;


import javax.servlet.RequestDispatcher;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;


public class HttpUtil extends HttpServlet {


private static final long serialVersionUID = 1L;


private static String charset = null;


public static void forward(HttpServletRequest req, HttpServletResponse res,

String path) throws ServletException, IOException {


try {

RequestDispatcher dispatcher = req.getRequestDispatcher(path);

dispatcher.forward(req, res);


}catch(Exception e) {

e.printStackTrace();

}

}

}


파일명: HttpUtil.java


[첨부(Attachments)]

HttpUtil.zip



10. Controller - Interface 만들기


Controller 인터페이스를 하나 만들 것이다.



그림 22. Controller.java


package com.example.web.controller;


import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;


public interface Controller {


public void execute(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException;


}




파일명: Controller.java


[첨부(Attachments)]

Controller.zip



11. InsertController.java - Class


앞서 만든 Interface(Controller)로 InsertController.java를 작성할 것이다.



그림 23. InsertController.java


Package 명은 com.example.web.board라고 입력한다.

Name명은 InsertController라고 입력한다.


Interfaces의 Add버튼을 누른다.



그림 24. Implemented Interfaces.......


Controller를 입력한 후 작성한 Controller 인터페이스를 선탁한다.

OK를 누른다.

Finish를 누른다.


package com.example.web.controller.board;


import java.io.IOException;


import javax.servlet.ServletException;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;


import com.example.web.controller.Controller;

import com.example.web.util.HttpUtil;


public class InsertController implements Controller {


@Override

public void execute(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {

HttpUtil.forward(req, res, "/WEB-INF/views/board/insert.jsp");


}


}



파일명: InsertController.java


[첨부(Attachments)]

InsertController.zip



13. FrontController - 코드 작성하기 (수정)


코드를 자세히 보면, flag가 추가되었다.

doAction에서 POST, GET 등을 인식할 수 있게 되었다.


package com.example.web.controller;


import java.io.IOException;


import javax.servlet.ServletConfig;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;


import com.example.web.controller.board.InsertController;

import com.example.web.util.HttpUtil;


public class FrontController extends HttpServlet {

private static final long serialVersionUID = 1L;

private String charset = null;

       

protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {

doAction(req, res, "GET");

}


protected void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {

       doAction(req, res, "POST");

}


protected void doAction(HttpServletRequest req, 

HttpServletResponse res,

String flag) 

throws ServletException, IOException {

ServletConfig sc = this.getServletConfig();

charset = sc.getInitParameter("charset");


req.setAttribute("charset", charset);

req.setCharacterEncoding(charset);

res.setContentType("text/html; charset=" + charset);


String uri = req.getRequestURI();

String conPath = req.getContextPath();

String command = uri.substring(conPath.length());


Controller subController = null;


// POST 전송방식만

if(command.equals("/board/insert.do") && 

flag.contentEquals("POST")){


System.out.println("insert");

System.out.println("----------------");

subController = new InsertController();

subController.execute(req, res);

}else if (command.equals("/index.do")){

HttpUtil.forward(req, res, "/WEB-INF/views/index.jsp");

}

}

}



파일명: FrontController.java


[첨부(Attachments)]

FrontController.zip



14. View - webapp/WEB-INF/views/board/insert.jsp


POST처리 후에 출력할 페이지를 작성하도록 하겠다.

PrintWriter out으로 해도 무방하지만, MVC패턴을 적용했으니 뷰 파일에서 작성하겠다.


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

    pageEncoding="UTF-8"%>

<%

String text = (String)request.getParameter("s");

%>

<%= text %>


파일명: insert.jsp


[첨부(Attachments)]

insert.zip



* 맺음글(Conclusion)


jQuery를 통해서 ajax 전송에 대해서 간단한 형태로 살펴보았다.

반응형
728x90
300x250

[Javascript] 현재 페이지 Refresh 방법 - (3가지)

 

location.reload(true);

location.href = location.href;

history.go(0);

 

사용 방법은 웹 페이지 소스에서 사용하시면 되겠습니다.

 

<script>

 

 ~~~~

 

</script>

 

이상입니다.

반응형
728x90
300x250
[jQuery] 하이퍼링크 예제를 통한 {속성 Get, Set에 관한 설명}

 

Set(쓰기)

$(selector).attr('href', 'url_goes_here'); 

 

Get(읽기 전용) 

and read it using
$(selector).attr('href');

 

속성에 관한 이야기를 의미합니다.

 

attr은 두 가지 매개변수를 가지고 있습니다.

 

 유형

속성1 

속성2 

1차 매개변수

attributeName 

 

2차 매개변수

attributeName 

Value 

 

구성

attr(1차형태)

attr(2차n1, 2차n2)

 

이런 형태라고 정의했을 때,

각각 처리하는 명령이 뭔지 리어셈블링하거나 메뉴얼을 보기 전까진 모릅니다.

그러나 jQuery 메뉴얼을 보면, 1차 형태로 정의한 것은 원소의 속성값을 반환하는 구실을 한다고 되어있습니다.

2차 형태로 정의한 것은 속성값을 지정하기 위해 정의되어있습니다.

 

정리하자면, 읽기 전용과 쓰기 전용이라고 생각하면 편할 거 같습니다.

반응형
728x90
300x250

[Javascript] 자녀 창에서 부모 창에 새로 고침 하기



window.opener.document.location.reload(); 명령어로 호출 시 경고문이 출력됩니다.
이처럼 경고문이 발생하지 않고 출력하려면 아래와 같은 명령을 사용하시면 됩니다.

window.opener.document.location.href = window.opener.document.URL; 



1. 적용하기

1. <head> 아래에 입력

<script language="javascript" type="text/javascript">

function 함수 이름()
{
          window.opener.document.location.href = window.opener.document.URL;
}

</script>

이하 생략

2. <body> 아래에 입력

<a href="javascript:함수 이름()">링크 이름</a>

사용자 환경에 맞게 기재하시면 됩니다.
반응형

+ Recent posts