Cohe

JSP mini project : mypage 실습 본문

개발 언어/JSP

JSP mini project : mypage 실습

코헤0121 2024. 4. 15. 17:58
728x90

1.중심이 되는 index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-idth, initial-scale=1">


    <title>Welcome to MyWorld</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/business-casual.css" rel="stylesheet">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">

     <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Script to Activate the Carousel -->
    <script>
    $('.carousel').carousel({
        interval: 2000 //changes the speed
    })
    </script>


</head>

<body>
    <%@include file="include/header.jsp" %>


    <div class="container">

        <div class="row ">
            <div class="box">


                <div class="col-lg-6 text-center">
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- data-ride="carousel" 자동 슬라이드 기능 -->

                        <ol class="carousel-indicators hidden-xs">
                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>

                        </ol>


                        <div class="carousel-inner">
                            <div class="item active">
                                <img class="img-responsive img-full" src="img/1.jpg">
                            </div>
                            <div class="item">
                                <img class="img-responsive img-full" src="img/2.jpg"> <!-- img-full 옵션 class -->
                            </div>
                            <div class="item">
                                <img class="img-responsive img-full" src="img/3.jpg">
                            </div>
                        </div>
                        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                            <span class="icon-prev"></span>
                        </a>
                        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                            <span class="icon-next"></span>
                        </a>
                    </div>

                </div>




                <div class="col-lg-6 text-center" >    

                        <h2>배우</h2>
                        <p>
                            한지민을 소개합니다.
                        </p>
                        <hr>
                        <h3>화보 영상</h3>

                        <iframe width="100%" height="372px" src="https://www.youtube.com/embed/1C6dcnVQjSM?autoplay=1&amp;loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>></iframe>

                 </div>   
            </div>

        </div>

        <div class="row">
            <div class="box">



                <div class="col-lg-12">
                    <hr>
                    <h2 class="intro-text text-center">Jimin World
                        <strong>유의 사항!</strong>
                    </h2>
                    <hr>
                        <div class="inner" align="center">
                            <img class="img-responsive img-center" src="img/intro.jpg" alt=""><!-- img-border --> 

                            <hr class="visible-xs">

                            <p>1. 모든 자료는 회원 가입 후에 이용하실 수 있습니다.</p>
                            <p>2. ------------------------------------------------------</p>
                            <p>3. ------------------------------------------------------</p>

                        </div>


                </div>




            </div>
        </div>


    <!-- /.container -->
    </div>

    <%@include file="include/footer.jsp" %>


</body>
</html>

2. footer, header

footer


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

<body>
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <p>Copyright &copy; By Chae 2024.04.12~</p>
                </div>
            </div>
        </div>
    </footer>
</body>

header

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


<body>
<!-- header -->
    <div class="brand">My Web</div>        
    <div class="address-bar">Welcome to MyWorld</div> 
    <nav class="navbar navbar-default" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="/hong">My First Web</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="http://localhost:8080/mypage/index.jsp">HOME</a>
                    </li>
                    <li>
                        <a href="http://localhost:8080/mypage/member/member.jsp">Member</a>
                    </li>
                    <li>
                             <a href="/myweb/board/list.board">BOARD</a>
                    </li>
                    <%

                        String idCheck = (String)session.getAttribute("user_id");
                        String icon;
                        String icon2;

                        if(idCheck ==null){
                            %>
                            <li>
                        <a href="http://localhost:8080/mypage/user/user_login.jsp">LOGIN</a>
                    </li>
                    <li>

                        <a href="http://localhost:8080/mypage/user/user_join.jsp" style="color:red">JOIN</a>
                    </li>
                        <% }
                        else{%>
                        <li>
                                <a href="http://localhost:8080/mypage/user/user_logout.jsp">LOGOUT</a>
                            </li>
                            <li>

                                <a href="http://localhost:8080/mypage/user/user_mypage.jsp" style="color:red">MYPAGE</a>
                            </li>
                        <% }%>

                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
     <!-- end header -->
</body>

'개발 언어 > JSP' 카테고리의 다른 글

JSP mini project : mypage 실습4 - 회원 정보 수정  (0) 2024.04.15
JSP mini project : mypage 실습3 - 로그인  (0) 2024.04.15
6-1 JSP-JDBC 연동2  (0) 2024.04.12
6. JSP-JDBC 연동  (0) 2024.04.11
5. javaBean  (0) 2024.04.11