728x90

 

컨트롤러인 서블릿으로부터 유저에게 받은 유저정보를 넘겨 받아 DAO로 연결 정보와 유저정보를 같이 넘겨주면서 DAO를 호출한다.

 

또한 Service 클래스에서 역할인 DB연결 Connection 클래스를 사용하여 오라클과 연결해주고, 기능이 복잡해지면 꼬일 수 있기 때문에 close로 닫아주도록 하자.

메소드 기능에 따라 트랜잭션 처리가 필요하면 commit & rollback 추가

 

public Member login(Member mem){
    Connection conn = getConnection();

    Member loginC = new MemberDAO().login(conn, mem);

    close(conn);

    return loginC;

}
728x90
반응형
728x90

 

 

페이지네이션 설명

https://rise-up.tistory.com/434

 

Previous와 Next 영어 부담스러워하는 사람들도 있을 것 같고

화살표가 더 심플하고 직관적이어서 양옆 <<>>로 바꿈

      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>

 

크기를 작게 변경

<ul class="pagination pagination-sm">

 

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

 

공홈 페이지네이션 링크

https://getbootstrap.kr/docs/5.0/components/pagination/

 

페이지네이션

여러 페이지에 일련의 관련 내용이 있음을 나타내는 페이지네이션을 사용한 문서와 예시입니다.

getbootstrap.kr

 

728x90
반응형
728x90

 

부트스트랩 공홈의 예제 템플릿 중 블로그형 템플릿 하나를 골라서

이것저것 적용해보았다 

 

맛조 - 양식
양식 이미지
중화요리 팔공 리뷰
중식
중화요리 팔공

22.02.22 | 조회수 50회

위치 : 서울 관악구 신림동 10-621 지하 1층

간단 소개

푸짐한 양과 아낌없는 재료

중화요리 팔공 리뷰
중식
짜장면집

20.02.10 | 조회수 50회

위치 : 서울 관악구 신원로 16 1층

간단 소개

이보다 쌀 수 있을까? 극한의 가성비

...
중화요리 팔공

22.02.22 | 조회수 50회

위치 : 서울 관악구 신림동 10-621 지하 1층

간단 소개

푸짐한 양과 아낌없는 재료

중식

중화요리 팔공

22.02.22 | 조회수 50회

위치 : 서울 관악구 신림동 10-621 지하 1층

간단 소개

아낌 없는 재료와 푸짐한 양

중화요리 팔공 내돈내산 후기
PlaceholderThumbnail
중식

Post title

Nov 11

This is a wider card with supporting text below as a natural lead-in to additional content.

Continue reading
PlaceholderThumbnail

From the Firehose

Sample blog post

This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.


This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

Blockquotes

This is an example blockquote in action:

Quoted text goes here.

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

Example lists

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout. This is an example unordered list:

  • First list item
  • Second list item with a longer description
  • Third list item to close it out

And this is an ordered list:

  1. First list item
  2. Second list item with a longer description
  3. Third list item to close it out

And this is a definition list:

HyperText Markup Language (HTML)
The language used to describe and define the content of a Web page
Cascading Style Sheets (CSS)
Used to describe the appearance of Web content
JavaScript (JS)
The programming language used to build advanced Web sites and applications

Inline HTML elements

HTML defines a long list of available inline tags, a complete list of which can be found on the Mozilla Developer Network.

  • To bold text, use <strong>.
  • To italicize text, use <em>.
  • Abbreviations, like HTML should use <abbr>, with an optional title attribute for the full phrase.
  • Citations, like — Mark Otto, should use <cite>.
  • Deleted text should use <del> and inserted text should use <ins>.
  • Superscript text uses <sup> and subscript text uses <sub>.

Most of these elements are styled by browsers with few modifications on our part.

Heading

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

Sub-heading

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

Example code block

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.

Another blog post

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

Longer quote goes here, maybe with some emphasized text in the middle of it.

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

Example table

And don't forget about tables in these posts:

Name Upvotes Downvotes
Alice 10 11
Bob 4 3
Charlie 7 9
Totals 21 23

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.

New feature

This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.

  • First list item
  • Second list item with a longer description
  • Third list item to close it out

This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.

About

Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.

Elsewhere

  1. GitHub
  2. Twitter
  3. Facebook
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>맛조 - 양식</title>


<!-- <link href="css/foods_styling.css" rel="stylesheet"> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

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

<style>
  .bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    }

    @media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }
</style>

</head>
<body>
  




  
<div class="container">
<header class="blog-header py-3">
  <div class="row flex-nowrap justify-content-between align-items-center">
    <div class="col-4 pt-1">
      <a class="link-secondary" href="#"> </a>
    </div>
    <div class="col-4 text-center">
      <a class="blog-header-logo text-dark" href="#">맛조(이미지 대체)</a>
    </div>
    <div class="col-4 d-flex justify-content-end align-items-center">
      <a class="link-secondary" href="#" aria-label="Search">
      </a>
      </a>
      <a class="btn btn-sm btn-outline-secondary signIn" href="#">Sign in</a>
      <a class="btn btn-sm btn-outline-secondary signUp" href="#">Sign up</a>
    </div>
  </div>
</header>

<div class="bbb nav-scroller py-1 mb-2 ">
  <nav class="nav d-flex justify-content-between" >
    <a class="p-2 text-decoration-none nav_css" href="#">한식</a>
    <a class="p-2 text-decoration-none nav_css" href="#">중식</a>
    <a class="p-2 text-decoration-none nav_css" href="#">양식</a>
    <a class="p-2 text-decoration-none nav_css" href="#">일식</a>
    <a class="p-2 text-decoration-none nav_css" href="#">디저트</a>
    <a class="p-2 text-decoration-none nav_css" href="#">공지사항</a>
  </nav>
</div>
</div>

<main class="container">
<div class="p-4 p-md-5 mb-4 text-white bg-dark">
  양식 이미지
</div>


<div class="card mb-3 cardInline" style="max-width: 380px;"> <!-- 380px -->
  <div class="row g-0">
    <div class="col-md-6">
      <img src="img/review01 palgong.png" class="img-fluid rounded-start" alt="중화요리 팔공 리뷰">
    </div>
    <div class="col-md-6">
      <div class="card-body">
        <strong class="d-inline-block mb-lg-1 text-success reviewCategory">중식</strong>
        <h5 class="card-title cardTitle">중화요리 팔공</h5>
        <p class="card-text mb-1 reviewDate">22.02.22 | 조회수 50회</p>
        <p class="card-text mb-auto reviewNormal">위치 : 서울 관악구 신림동 10-621 지하 1층</p>
        <p class="card-text mt-3 mb-auto reviewFeatureTitle">간단 소개</p>
        <p class="card-text reviewNormal">푸짐한 양과 아낌없는 재료</p>
        <!-- <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> -->
      </div>
    </div>
  </div>
</div>

<div class="card mb-3 cardInline" style="max-width: 380px;"> <!-- 380px -->
  <div class="row g-0">
    <div class="col-md-6">
      <img src="img/review02 zzangjang.png" class="img-fluid rounded-start" alt="중화요리 팔공 리뷰">
    </div>
    <div class="col-md-6">
      <div class="card-body">
        <strong class="d-inline-block mb-1 text-success reviewCategory">중식</strong>
        <h5 class="card-title cardTitle">짜장면집</h5>
        <p class="card-text mb-1 reviewDate">20.02.10 | 조회수 50회</p>
        <p class="card-text mb-auto reviewNormal">위치 : 서울 관악구 신원로 16 1층</p>
        <p class="card-text mt-3 mb-auto reviewFeatureTitle">간단 소개</p>
        <p class="card-text reviewNormal">이보다 쌀 수 있을까? 극한의 가성비</p>
        <!-- <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> -->
      </div>
    </div>
  </div>
</div>


<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="img/review01 palgong.png" class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title ">중화요리 팔공</h5>
        <p class="card-text mb-1 reviewDate">22.02.22 | 조회수 50회</p>
        <p class="card-text mb-auto reviewNormal">위치 : 서울 관악구 신림동 10-621 지하 1층</p>
        <p class="card-text mt-3 mb-auto reviewFeatureTitle">간단 소개</p>
        <p class="card-text reviewNormal">푸짐한 양과 아낌없는 재료</p>
        <!-- <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> -->
      </div>
    </div>
  </div>
</div>



<div class="row mb-2">
  <div class="col-md-6">
    <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
      <div class="col p-4 d-flex flex-column position-static">
        <strong class="d-inline-block mb-2 text-success ">중식</strong>
        <h3 class="mb-0 ">중화요리 팔공</h3>
        <div class="mb-1 text-muted reviewDate">22.02.22 | 조회수 50회</div>
        <p class="card-text mb-auto reviewLocation">위치 : 서울 관악구 신림동 10-621 지하 1층</p>
        <pre class="reviewFeatureTitle">간단 소개</pre>
        <p class="mb-auto">아낌 없는 재료와 푸짐한 양</p>
        <a href="https://zingunt2.tistory.com/82" target="_blank" class="stretched-link">중화요리 팔공 내돈내산 후기</a>
      </div>
      <div class="col-auto d-none d-lg-block">
        <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>

      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
      <div class="col p-4 d-flex flex-column position-static">
        <strong class="d-inline-block mb-2 text-success" >중식</strong>
        <h3 class="mb-0">Post title</h3>
        <div class="mb-1 text-muted">Nov 11</div>
        <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="stretched-link">Continue reading</a>
      </div>
      <div class="col-auto d-none d-lg-block">
        <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>

      </div>
    </div>
  </div>
</div>

<div class="row g-5">
  <div class="col-md-8">
    <h3 class="pb-4 mb-4 fst-italic border-bottom">
      From the Firehose
    </h3>

    <article class="blog-post">
      <h2 class="blog-post-title">Sample blog post</h2>
      <p class="blog-post-meta">January 1, 2021 by <a href="#">Mark</a></p>

      <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.</p>
      <hr>
      <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
      <h2>Blockquotes</h2>
      <p>This is an example blockquote in action:</p>
      <blockquote class="blockquote">
        <p>Quoted text goes here.</p>
      </blockquote>
      <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
      <h3>Example lists</h3>
      <p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout. This is an example unordered list:</p>
      <ul>
        <li>First list item</li>
        <li>Second list item with a longer description</li>
        <li>Third list item to close it out</li>
      </ul>
      <p>And this is an ordered list:</p>
      <ol>
        <li>First list item</li>
        <li>Second list item with a longer description</li>
        <li>Third list item to close it out</li>
      </ol>
      <p>And this is a definition list:</p>
      <dl>
        <dt>HyperText Markup Language (HTML)</dt>
        <dd>The language used to describe and define the content of a Web page</dd>
        <dt>Cascading Style Sheets (CSS)</dt>
        <dd>Used to describe the appearance of Web content</dd>
        <dt>JavaScript (JS)</dt>
        <dd>The programming language used to build advanced Web sites and applications</dd>
      </dl>
      <h2>Inline HTML elements</h2>
      <p>HTML defines a long list of available inline tags, a complete list of which can be found on the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">Mozilla Developer Network</a>.</p>
      <ul>
        <li><strong>To bold text</strong>, use <code class="language-plaintext highlighter-rouge">&lt;strong&gt;</code>.</li>
        <li><em>To italicize text</em>, use <code class="language-plaintext highlighter-rouge">&lt;em&gt;</code>.</li>
        <li>Abbreviations, like <abbr title="HyperText Markup Langage">HTML</abbr> should use <code class="language-plaintext highlighter-rouge">&lt;abbr&gt;</code>, with an optional <code class="language-plaintext highlighter-rouge">title</code> attribute for the full phrase.</li>
        <li>Citations, like <cite>— Mark Otto</cite>, should use <code class="language-plaintext highlighter-rouge">&lt;cite&gt;</code>.</li>
        <li><del>Deleted</del> text should use <code class="language-plaintext highlighter-rouge">&lt;del&gt;</code> and <ins>inserted</ins> text should use <code class="language-plaintext highlighter-rouge">&lt;ins&gt;</code>.</li>
        <li>Superscript <sup>text</sup> uses <code class="language-plaintext highlighter-rouge">&lt;sup&gt;</code> and subscript <sub>text</sub> uses <code class="language-plaintext highlighter-rouge">&lt;sub&gt;</code>.</li>
      </ul>
      <p>Most of these elements are styled by browsers with few modifications on our part.</p>
      <h2>Heading</h2>
      <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
      <h3>Sub-heading</h3>
      <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
      <pre><code>Example code block</code></pre>
      <p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.</p>
    </article>

    <article class="blog-post">
      <h2 class="blog-post-title">Another blog post</h2>
      <p class="blog-post-meta">December 23, 2020 by <a href="#">Jacob</a></p>

      <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
      <blockquote>
        <p>Longer quote goes here, maybe with some <strong>emphasized text</strong> in the middle of it.</p>
      </blockquote>
      <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
      <h3>Example table</h3>
      <p>And don't forget about tables in these posts:</p>
      <table class="table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Upvotes</th>
            <th>Downvotes</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Alice</td>
            <td>10</td>
            <td>11</td>
          </tr>
          <tr>
            <td>Bob</td>
            <td>4</td>
            <td>3</td>
          </tr>
          <tr>
            <td>Charlie</td>
            <td>7</td>
            <td>9</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>Totals</td>
            <td>21</td>
            <td>23</td>
          </tr>
        </tfoot>
      </table>

      <p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.</p>
    </article>

    <article class="blog-post">
      <h2 class="blog-post-title">New feature</h2>
      <p class="blog-post-meta">December 14, 2020 by <a href="#">Chris</a></p>

      <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
      <ul>
        <li>First list item</li>
        <li>Second list item with a longer description</li>
        <li>Third list item to close it out</li>
      </ul>
      <p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.</p>
    </article>

    <nav class="blog-pagination" aria-label="Pagination">
      <a class="btn btn-outline-primary" href="#">Older</a>
      <a class="btn btn-outline-secondary disabled">Newer</a>
    </nav>

  </div>

  <div class="col-md-4">
    <div class="position-sticky" style="top: 2rem;">
      <div class="p-4 mb-3 bg-light rounded">
        <h4 class="fst-italic">About</h4>
        <p class="mb-0">Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.</p>
      </div>

      <div class="p-4">
        <h4 class="fst-italic">Archives</h4>
        <ol class="list-unstyled mb-0">
          <li><a href="#">March 2021</a></li>
          <li><a href="#">February 2021</a></li>
          <li><a href="#">January 2021</a></li>
          <li><a href="#">December 2020</a></li>
          <li><a href="#">November 2020</a></li>
          <li><a href="#">October 2020</a></li>
          <li><a href="#">September 2020</a></li>
          <li><a href="#">August 2020</a></li>
          <li><a href="#">July 2020</a></li>
          <li><a href="#">June 2020</a></li>
          <li><a href="#">May 2020</a></li>
          <li><a href="#">April 2020</a></li>
        </ol>
      </div>

      <div class="p-4">
        <h4 class="fst-italic">Elsewhere</h4>
        <ol class="list-unstyled">
          <li><a href="#">GitHub</a></li>
          <li><a href="#">Twitter</a></li>
          <li><a href="#">Facebook</a></li>
        </ol>
      </div>
    </div>
  </div>
</div>

</main>

<footer class="blog-footer">
<p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p>
  <a href="#">top</a>
</p>
</footer>





<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>
</body>
</html>
728x90
반응형
728x90

어떻게 나오는지 한번씩 시험삼아 해 본 코드

 

Hello, world!

Hello, world!

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + , This text is meant to be treated as sample output from a computer program. 볼드체 적용?


# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
primary
secondary
success
primary secondary ... primary secondary




Example heading New

728x90
반응형
728x90

헤드 태그 사이에 1개

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

 

바디 태그 끝나기 전 1개

  <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>
 
 
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">



<style>
#carouselExampleControls{
  width: 300px; height: 200px;
}

</style>

</head>
<body>


    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled">Disabled</a> 
              </li>
            </ul>
            <form class="d-flex">
              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
      </nav>

    <div class="card" style="width: 18rem;">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>

      <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" >
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="WebContent/startbootstrap-sb-admin-2-gh-pages/startbootstrap-sb-admin-2-gh-pages/img/세미 중식1.png" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="WebContent/startbootstrap-sb-admin-2-gh-pages/startbootstrap-sb-admin-2-gh-pages/img/세미 중식1.png" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="WebContent/startbootstrap-sb-admin-2-gh-pages/startbootstrap-sb-admin-2-gh-pages/img/세미 중식1.png" class="d-block w-100" alt="...">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>




    <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>
    
</body>
</html>
728x90
반응형
728x90

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style>
	body{background-color:rgb(222,234,246);}
	form{background-color:rgb(237,237,237);}
	fieldset{border:none; padding:50px;}
	input{background-color:rgb(237,237,237); border:none; border-bottom-style:dashed; width:100px;}
	div{margin-top: 150px; margin-bottom: 150px; }	/*margin-top: 100px; margin-bottom: 100px;   */
	label{display:inline-block; width:150px; text-align:left;}
	span{display:block; padding-left:150px; font-size:15px;} /*블록안에 있으면서 블록 다 차지하게끔. 디브 움직이면 다 같이 움직이니 스팬으로 블록으로 지정해서 얼라인지정 할 수 있게해서 따로 움직일 수 있도록  */
	#button{background-color:rgb(197,224,181); border:none; width:450px; padding:20px; border-radius:10px;} /* border-radius 설정 */
</style>

</head>
<body>
 
	<form>
		<fieldset>
			<div> 
				<label>아이디 : </label><input type="text" id="userId" name="userId" onblur="requirement1()"> <!-- 위에 포커스 안맞춰지면 out시키겠다. 이벤트 발생안시키겠다 태그 위에 안맞춰지면 --> 
				<br><span id="checkId"></span>
			</div>
			<div>
				<label>패스워드 : </label><input type="password" id="userPwd" name="userPwd" onblur="requirement2()"> <!-- onfocus to onblur -->
				<br><span id="checkPwd"></span>
			</div>
			<div>
				<label>패스워드 확인 : </label><input type="password" id="userPwdConf" name="userPwd" onblur="requirement3()">
				<br><span id="checkPwdConf"></span>
			</div>
			<div>
				<label>이메일: </label>
				 <input type="text" class="userEmail" name="userEmail">
				@<input type="text" class="userEmail" name="userEmail">
				
			</div>
			<div>
				<label>주소 : </label><input type="text" id="userAddress">
			</div>
			<div>
			<button id="button" name="button">가입</button>
			</div>
		</fieldset>
	</form>
	<script>
	/* 영대소문자, 필수요구사항  */
		var userId = document.getElementById("userId");
		var checkId = document.getElementById("checkId");
		var userPwd = document.getElementById("userPwd");
		var checkPwd = document.getElementById("checkPwd");
		var userPwdConf = document.getElementById("userPwdConf");
		var checkPwdConf = document.getElementById("checkPwdConf");
		
		/* 영어 대/소문자 특수문자, 숫자 포함 8~32자*/
		document.getElementById("userPwd").addEventListener("click",capital);
		function capital(){
			checkPwd.innerText="영어 대/소문자 특수문자, 숫자 포함 8~32자";
		} 
		/* 필수요구사항 */
		function requirement1(){
			/* 비교할 것. 길이가 0또는 비어("")있냐.  */
			if(userId.value == "" || userId.value.length == 0){
				/* 유저가 아이디 안넣었을 때 */
				checkId.innerText="필수 입력 항목입니다";		
				userId.focus(); /* 내장객체 포커스 */
				return false; /* 아디 안넣었을 때 다른거 못쓰게 막아주는 false 리턴 */
			}else{
				/* 유저가 아이디 넣을때 */				
				checkId.innerText="";
				return true; /* 아디를 넣었을 때  true해서 비번 계속 쓸 수 허용, 넘겨주는 것*/
			}
		}
		function requirement2(){
			/* 비교할 것. 길이가 0또는 비어("")있냐.  */
			if(userPwd.value == "" || userPwd.value.length == 0){
				/* 유저가 아이디 안넣었을 때 */
				checkPwd.innerText="필수 입력 항목입니다";		
				userPwd.focus(); 
				return false; 
			}else{
				/* 유저가 아이디 넣을때 */				
				checkPwd.innerText="";
				return true; 
			}
		}
		function requirement3(){
			/* 비교할 것. 길이가 0또는 비어("")있냐.  */
			if(userPwdConf.value == "" || userPwdConf.value.length == 0){
				/* 유저가 아이디 안넣었을 때 */
				checkPwdConf.innerText="필수 입력 항목입니다";		
				userPwdConf.focus(); 
				return false; 
			}else{
				/* 유저가 아이디 넣을때 */				
				checkPwdConf.innerText="";
				return true; 
			}
		}
		
		
	</script>

<!-- 
인라인으로 넣으면 할당된 공간에서만 움직일 수 있어서 정렬 같은게 안먹힘. 인라인은 text-align이 안됨
	- span,
블록요소는 한줄 전체라 공간 제약이 없어서 width height를 다룰 수 있음 

위치선정을 할려면 인라인이 요소라서 정렬할려면 id로 

블록이면 줄바꿈도 적용
 -->
 

</body>
</html>

 

 

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

 

attr() : 문서 객체의 특정 속성값을 알아내거나 추가할 때 사용
attribute 속성
        // 메소드 체이닝 , 여러개의 속성
        $('input[password]').css('background','blue').css('color','blue');
        //객체로 넣어주는 방법, 여러개의 속성
        $('input[class~=text]').css({'background':'green','color':'red'});
        // Uncaught SyntaxError: Unexpected string 오류  - 키값잘못연결해서났음
        // $('input[size]').css('backgroundColor','green');
        $('input[class$=order]').css('backgroundColor','red');
        $('input[type=number]').attr('placeholder','폰번호');
        

        // 마우스 호버시 // 마우스 아웃시 -> 메소드 체이닝 가능
        $('input:image').mouseenter(function(){
            $(this).attr('src','../images/city1.png');
        }).mouseout(function(){
            $(this).attr('src','../images/river2.png')
        })
728x90
반응형
728x90

 

cmd로 들어가서 sqlplus 입력

sql에 진입

유저는 반드시 system권한을 가진 계정으로 해야한다

(아아디 비번을 틀리면 invalid username/pw; login denied 메세지가뜨면서 로그인 거부됨)

 

여기서 한번 더 conn/as sysdba로써 시스템 관리자로 들어간다

create user 사용할 아이디 indentified by 사용할 비번;

해서 계정 생성하고

grant connect,resource to id;

해서 권한 부여해준다

그리고 많이들 실수하는게 그냥 꺼버리는건데

commit까지 해줘야 완전히 저장된다

 

728x90
반응형
728x90

1.매개인자로 전달하기

2.매개인자로 스스로를 전달하기

3.함수의 리턴처리

4.매개변수로 함수 전달

5.함수 리턴

 

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>04_Function_p</title>


    <h3>매개인자로 스스로를 전달하기</h3>
    <button onclick="funcPara1('매개인자로 스스로를 전달하기1')">매개인자로 스스로를 전달하기11</button>
    <script>
        function funcPara1(parameter){
            alert(parameter);   // 매개인자로 스스로를 전달하기1
        }
    </script>
    <button onclick="funcPara2(this)">매개인자로 스스로를 전달하기22</button>
    <script>
        function funcPara2(parameter2){
            alert(parameter2);  // [object HTMLButtonElement]
            alert(parameter2.innerHTML);  // 매개인자로 스스로를 전달하기22
        }
    </script>
    <br><br>
    <button onclick="a1('b1');">a1</button>
    <script>
        function a1(para){
            alert(para); // b1
        }
    </script>
    <button onclick="c1(this);">d1</button>
    <script>
        function c1(para){
            alert(para.innerHTML); // d1
        }
    </script>
    
    
    <br><br><br>

    <button onclick="retur();">함수의 리턴 : 리턴값있는 다른 함수 호출하기</button>
    <script>
        function retur(){
            var getReturn = returFunc();
            alert(getReturn);
        }
        function returFunc(){
            return Math.random() * 10 + 1;  // 9.213956197609749
        }
    </script>
    <button onclick="aaa();">함수의 리턴처리</button>
    <script>
        function aaa(){
            var ref = returFunc();  // 9.213956197609749
            alert(ref);
        }
        
    </script>

<br><br>

    <h3>매개변수로 함수 전달</h3>       
    <button onclick="try1(callfunc);">매개변수로 함수 전달</button>
    <script>
        function try1(parameter){
            parameter();      // 매개변수로 함수를 호출함
        }
        function callfunc(){
            alert("매개변수로 함수를 호출함");
        }
    </script>
    <button onclick="try2(try2_1);">매개변수로 함수 전달</button>
    <script>
        function try2(try22){
            try22();
        }
        function try2_1(){
            alert("매개변수로 함수 전달");
        }
    </script>


    <h3>함수 리턴</h3>
    <!-- function 받아와서 실행시켜줘야해 onclick="test8()();"에다가 ()소괄호 추가 -->
    <button onclick="try3()();">함수 리턴</button>  <!-- 함수 리턴 : 익명함수 리턴 -->
    <script>
        function try3(){
            return function(){  
                alert("함수 리턴 : 익명함수 리턴");
            }
        }
    </script>
    <button onclick="try3_1()()">함수 리턴시키기</button>    <!-- 받아온 함수를 실행을 위해 ()추가 -->
    <script>
        function try3_1(){
            return function(){
                alert("방법이 너무 많아서 헷갈릴 듯");
            }
        }
    </script>

    



</head>
<body>
    






</body>
</html>
728x90
반응형

+ Recent posts