이안의 평일코딩

국비 HTML - 태그, 목록출력 / 지니뮤직2 본문

Front-end/HTML

국비 HTML - 태그, 목록출력 / 지니뮤직2

이안92 2020. 8. 10. 10:37
반응형

2020.08.10(월)

 

1. HTML => MarkUP Lang

               ==========

               XML, WML, HDML => 사용자 정의

               HTML => 사용자 정의가 없다

태그사용

  태그의 종류

      => <> : 여는 태그 => <div>

      => </> : 닫는 태그 => </div>

      => </> : 단독 태그 => <img src=""/>

 

지원하는 태그

    1) 문자관련

        (1) 제목을 출력하는 태그

           <h1> ~~ <h6>

        (2) 강조체

           <strong> </strong>, <em>

        (3) 글자

           <font>

    2) 목록출력

         <dl> => <dt>제목 <dd>데이터

         <dl>

             <dt>감독</dt>

             <dd>감독명</dd>

         <dl>

 

         <table>

            <tr> => ROW

               <td> => 실제 데이터

               </td>

            </tr>

          </table>

        ** 대소문자 구분

        ** 에러가 없다

         <img src="파일명">

 

 

table-hover

tag.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style type="text/css">
.row{
margin:0px auto;
width:1000px;
}
h1{
text-align:center
}
</style>
</head>
<body>
 <div class="cnatainer">
  <div class="row">
   <center><!-- 가운데 정렬 -->
   <table class="table table-hover">
	<h1>지니뮤직 Tob50</h1>
     <tr>
      <th>순위</th><!-- th(table head) 제목(타이틀) -->
      <th></th>
      <th>곡명</th>
      <th>가수명</th>
      <th>앨범</th>
     </tr>
     <tr>
      <td align="center">1</td>
      <td align=center><img src="https://image.genie.co.kr/Y/IMAGE/IMG_ALBUM/081/532/004/81532004_1596786436661_1_600x600.JPG" width=30 height=30></td>
      <td>아틀란티스 소녀 (Atlantis Princess)</td>
      <td>볼빨간사춘기</td>
      <td>Our Beloved BoA #2 - SM STATION</td>
     </tr>
     <tr>
      <td align="center">2</td>
      <td align=center><img src="https://image.genie.co.kr/Y/IMAGE/IMG_ALBUM/081/507/074/81507074_1594973911303_1_600x600.JPG" width=30 height=30></td>
      <td>다시 여기 바닷가</td>
      <td>싹쓰리 (유두래곤 & 린다G & 비룡)</td>
      <td>다시 여기 바닷가</td>
     </tr>
	</table>
 </center>
  </div>
 </div>
</body>
</html>

 

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

MusicVO.java

package com.sist.dao;
/*
 *  Name                                      Null?    Type
 ----------------------------------------- -------- ----------------------------
 MNO                                                NUMBER(3)
 TITLE                                              VARCHAR2(300)
 SINGER                                             VARCHAR2(100)
 ALBUM                                              VARCHAR2(200)
 POSTER                                             VARCHAR2(1000)
 STATE                                              CHAR(6)
 IDCREMENT                                          NUMBER(3)
 KEY                                                VARCHAR2(50)
 */
public class MusicVO {
	private int mno;
	private String title;
	private String singer;
	private String album;
	private String poster;
	private String state;
	private int idcrement;
	private String key;
	public int getMno() {
		return mno;
	}
	public void setMno(int mno) {
		this.mno = mno;
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getSinger() {
		return singer;
	}
	public void setSinger(String singer) {
		this.singer = singer;
	}
	public String getAlbum() {
		return album;
	}
	public void setAlbum(String album) {
		this.album = album;
	}
	public String getPoster() {
		return poster;
	}
	public void setPoster(String poster) {
		this.poster = poster;
	}
	public String getState() {
		return state;
	}
	public void setState(String state) {
		this.state = state;
	}
	public int getIdcrement() {
		return idcrement;
	}
	public void setIdcrement(int idcrement) {
		this.idcrement = idcrement;
	}
	public String getKey() {
		return key;
	}
	public void setKey(String key) {
		this.key = key;
	}
	
}

 

MusicDAO.java

package com.sist.dao;
import java.util.*;
import java.sql.*;
public class MusicDAO {
	// 오라클 연결
		private Connection conn;
	// SQL문장을 오라클로 전송
		private PreparedStatement ps;
	// 오라클 주소
		private final String URL="jdb:oracle:thin:@localhost:1521:XE";
	// 드라이버 설치
		public MusicDAO() {
			// 생성자 => 멤버변수의 초기화, 네트워크 서버 연결
			try {
				Class.forName("oracle.jdbc.dirver.OracleDriver");
			}catch(Exception ex) {
				System.out.println(ex.getMessage());
			}
		}
	// 연결
		public void getConnection() {
			try {
				conn=DriverManager.getConnection(URL, "hr", "happy");
				// conn hr/happy
			}catch(Exception ex) {}
		}
	// 연결 종료
		public void disConnection() {
			try {
				if(ps!=null) ps.close();
				if(conn!=null) conn.close();
			}catch(Exception ex) {}
		}
	// SQL 문장 전송 => 200개의 데이터 요청
		public ArrayList<MusicVO> musicAllData(){
			ArrayList<MusicVO> list = new ArrayList<MusicVO>(); //데이터 여러개일때는 ArrayList사용
			try {
		// 오라클 연결
				getConnection();
		// SQL문장 전송
				String sql="SELECT mno, poster, title, singer, album "
						+"FROM genie_music "
						+"ORDER BY mno ASC";
				ps=conn.prepareStatement(sql); //executeQuery()
		// 결과값 받기
				ResultSet rs=ps.executeQuery();
				while(rs.next()) {
					MusicVO vo = new MusicVO(); // 200개 따로따로 저장해야되므로
					vo.setMno(rs.getInt(1));
					vo.setPoster(rs.getString(2));
					vo.setTitle(rs.getString(3));
					vo.setSinger(rs.getString(4));
					vo.setAlbum(rs.getString(5));
					
					// 200개를 모아서 => 브라우저로 전송
					list.add(vo);
				}
				rs.close(); //닫기
		// ArrayList에 값 채우기
				
			}catch(Exception ex) {
		// Error에 에러 종류 확인
				System.out.println(ex.getMessage());
			}finally {
		// 서버 종료
				disConnection();
			}
			return list;
		}
	// 상세보기
		public MusicVO musicDetailData(int mno) {
			MusicVO vo = new MusicVO();
			try {
				getConnection();//없으면 null이라고 뜸 (Not connection)
				String sql = "SELECT mno, title, singer, album, poster, key "
							+"FROM genie_music "
							+"WHERE mno="+mno;
				ps=conn.prepareStatement(sql);
				ResultSet rs = ps.executeQuery();
				rs.next();
				// 값을 채운다
				vo.setMno(rs.getInt(1));
				vo.setTitle(rs.getString(2));
				vo.setSinger(rs.getString(3));
				vo.setAlbum(rs.getString(4));
				vo.setPoster(rs.getString(5));
				vo.setKey(rs.getString(6));
				
				rs.close();
			}catch(Exception ex) {
				System.out.println(ex.getMessage());
			}finally {
				disConnection();
			}
			return vo;
		}
}

 

MusicServlet.java (servlet)

package com.sist.dao;

import java.io.*;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.*;

@WebServlet("/MusicServlet")
public class MusicServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=EUC-KR");
		PrintWriter out = response.getWriter();
		// 데이터 읽기
		MusicDAO dao = new MusicDAO();
		ArrayList<MusicVO> list = dao.musicAllData();
		// out = s.getOutputStream()
		// 브라우저에서 메모리에 출력된 HTML을 읽어 간다
		out.println("<html>");
		out.println("<body>");
		out.println("<center>");
		out.println("<h1>뮤직 Top200</h1>");
		out.println("<table width=1200 border=1 bordercolor=black>");
		out.println("<tr>");
		out.println("<th>순위</th>");
		out.println("<th></th>");
		out.println("<th>곡명</th>");
		out.println("<th>가수명</th>");
		out.println("<th>앨범</th>");
		out.println("</tr>");
		// for문
		for(MusicVO vo : list) {
			out.println("<tr>");
			out.println("<td>"+vo.getMno()+"</td>");
			out.println("<td><img src="+vo.getPoster()+" width=30 height=30></td>");
			out.println("<td><a href=MusicDetail?mno="+vo.getMno()+">"+vo.getTitle()+"</td>");
			out.println("<td>"+vo.getSinger()+"</td>");
			out.println("<td>"+vo.getAlbum()+"</td>");
			out.println("</tr>");
		}
		out.println("</table>");
		out.println("</center>");
		out.println("</body>");
		out.println("</html>");
	}

}

 

MusicDetail.java

package com.sist.dao;

import java.io.*;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/MusicDetail")
public class MusicDetail extends HttpServlet {
	private static final long serialVersionUID = 1L;
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=EUC-KR"); //브라우저를 연결할때 한글이 안깨지게
		// 값을 받는다
		String mno=request.getParameter("mno");
		MusicDAO dao = new MusicDAO();
		MusicVO vo = dao.musicDetailData(Integer.parseInt(mno));
		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<body>");
		out.println("<center>");
		out.println("<h1>&lt;"+vo.getTitle()+"&gt; 상세보기</h1>");
		
		out.println("<table width=700>");
		out.println("<tr>");
		out.println("<td>");
		
		// 동영상 <iframe> => youtube
		// <video> 폴더안에 동영상 있을 때
		out.print("<iframe src=http://youtube.com/embed/"+vo.getKey()+" width=700 height=400></iframe>");
		out.println("</td>");
		out.println("</tr>");
		out.println("</table>");
		
		out.println("<table width=700>");
		out.println("<tr>");
		out.println("<td width=45% rowspan=4>");
		out.println("<img src="+vo.getPoster()+" width=100%>");
		out.println("</td>");
		
		out.println("<td>");
		out.println(vo.getTitle());
		out.println("</td>");
		out.println("</tr>");
		
		out.println("<tr>");
		out.println("<td>");
		out.println(vo.getSinger());
		out.println("</td>");
		out.println("</tr>");
		
		out.println("<tr>");
		out.println("<td>");
		out.println(vo.getAlbum());
		out.println("</td>");
		out.println("</tr>");
		
		out.println("<tr>");
		out.println("<td>");
		out.println("<a href=MusicServlet>목록</a>");
		out.println("</td>");
		out.println("</tr>");
		
		out.println("</table>");
		out.println("</center>");
		out.println("</body>");
		out.println("</html>");
		
		
	}

}

 

반응형

'Front-end > HTML' 카테고리의 다른 글

국비 HTML - 태그, 속성  (0) 2020.08.18
국비 HTML - HTML 기초 / 로그인  (0) 2020.08.11
'Front-end/HTML' Related Articles more
Comments