반응형
1. 회원 가입시 index.jsp로 넘어가면서 회원가입 성공이라는 모달창 띄움
2. 실시간 채팅창 디자인 구현 (index.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css">
<title>JSP Ajax fxProbest</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<% //userID를 초기화 해주고 session에서 userID값을 가져옵니다. 만약에 null이 아니라면 userID에 가져온 userID값을 넣어줍니다.
String userID = null;
if(session.getAttribute("userID") != null){
userID = (String) session.getAttribute("userID");
}
%>
<!-- 부트스트랩을 이용하여 메뉴를 만들어 주도록 하겠습니다. -->
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.jsp">ProbestSoft members chat</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.jsp">메인</a>
</ul>
<% // userID가 null 이면 로그인이 되지 않은 경우
if(userID == null){
%>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="buton" aria-haspopup="true"
aria-expand="false">접속하기<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="login.jsp">로그인</a>
<li><a href="join.jsp">회원가입</a>
</ul>
</li>
</ul>
<%
// userID가 null이 아닐 경우 로그인이 되었다는 것.
} else {
%>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expand="false">회원관리<span class="caret"></span></a>
</li>
</ul>
<%
}
%>
</div>
</nav>
<!-- 실시간 채팅 서비스 디자인 구현 -->
<div class="container bootstrap snippet">
<div class="row">
<div class="col-xs-12">
<div class="portlet portlet-default">
<div class="portlet-heading">
<div class="portlet-title">
<h4><i class="fa fa-circle text-green"></i>실시간 채팅창</h4>
</div>
<div class="clearfix"></div>
</div>
<div id="chat" class="panel-collapse collapse in">
<div id="chatList" class="portlet-body chat-widget" style="overflow-y auto; width: auto; height: 600px;">
</div>
<div class="portlet-footer">
<div class="row">
<div class="form-group col-xs-4">
<input style="height: 40px;" type="text" id="chatName" class="form-control" placeholder="이름" maxlength="8">
</div>
</div>
<div class="row" style="height: 90px;">
<div class="form-group col-xs-10">
<textarea style="height: 80px;" id="chatContent" class="form-control" placeholder="메시지를 입력하세요." maxlength="100"></textarea>
</div>
<div class="form-group col-xs-2">
<button type="button" class="btn btn-default pull-right" onclick="submitFunction();">전송</button>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="alert alert-success" id="successMessage" style="display: none;">
<strong>메시지 전송에 성공하였습니다.</strong>
</div>
<div class="alert alert-danger" id="dangerMessage" style="display: none;">
<strong>이름과 내용을 모두 입력해 주세요.</strong>
</div>
<div class="alert alert-warning" id="warningMessage" style="display: none;">
<strong>데이터베이스 오류가 발생하였습니다.</strong>
</div>
<%
//서버로부터 내용을 받아왔는지 확인.
String messageContent = null;
if (session.getAttribute("messageContent") != null) {
messageContent = (String) session.getAttribute("messageContent");
}
String messageType = null;
if (session.getAttribute("messageType") != null) {
messageType = (String) session.getAttribute("messageType");
}
if (messageContent != null) {
%>
<!-- 모달창 -->
<div class="modal fade" id="messageModal" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div
class="modal-content <%if (messageType.equals("오류 메시지"))
out.println("panel-warning");
else
out.println("panel-success");%>">
<div class="modal-header panel-heading">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<!-- bootstrap sr-only: 화면상에 출력하지 않음 -->
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">
<%=messageType%>
</h4>
</div>
<div class="modal-body">
<%=messageContent%>
</div>
<div class="modal-footer">
<!-- data-dissmiss="modal" 자바스크립트에의해 닫기 역할을 하는 속성 -->
<button type="button" class="btn btn-primary"
data-dissmiss="modal">확인</button>
</div>
</div>
</div>
</div>
</div>
<script>
$('#messageModal').modal("show");
</script>
<%
session.removeAttribute("messageContent");
session.removeAttribute("messageType");
}
%>
<div id="container">
</div>
</body>
</html>
3. custom.css 내용 추가
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
* {
font-family: 'Nanum Gothic';
}
h5 {
font-family: 'Noto Sans KR';
font-size: 15px;
}
h4 {
font-family: 'Noto Sans KR';
}
h3 {
font-family: 'Hanna';
}
h2 {
font-family: 'Hanna';
}
h1 {
font-family: 'Hanna';
}
/* 테이블 관련 디자인 처리 */
thead th {
background-color: #006DCC;
color: white;
text-align: center;
}
tr th:first-child, tr th:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
tr th:first-child, tr th:first-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
/* 모달 팝업창 관련 디자인*/
.vertical-alignment-helper {
display: table;
height: 100%;
width: 100%;
pointer-events: none;
}
.vertical-align-center {
display: table-cell;
vertical-align: middle;
pointer-events: none;
}
.modal-content {
width: inherit;
height: inherit;
margin: 0 auto;
pointer-events: all;
}
/* 채팅창 디자인 처리 */
.portlet {
margin-bottom: 15px;
}
.btn-white {
border-color: #cccccc;
color: #333333;
background-color: #ffffff;
}
.portlet {
border: 1px solid;
}
.portlet .portlet-heading {
padding: 0 15px;
}
.portlet .portlet-heading h4 {
padding: 1px 0;
font-size: 16px;
}
.portlet .portlet-heading a {
color: #fff;
}
.portlet .portlet-heading a:hover, .portlet .portlet-heading a:active,
.portlet .portlet-heading a:focus {
outline: none;
}
.portlet .portlet-widgets .dropdown-menu a {
color: #333;
}
.portlet .portlet-widgets ul.dropdown-menu {
min-width: 0;
}
.portlet .portlet-heading .portlet-title {
float: left;
}
.portlet .portlet-heading .portlet-title h4 {
margin: 10px 0;
}
.portlet .portlet-heading .portlet-widgets {
float: right;
margin: 8px 0;
}
.portlet .portlet-heading .portlet-widgets .tabbed-portlets {
display: inline;
}
.portlet .portlet-heading .portlet-widgets .divider {
margin: 0 5px;
}
.portlet .portlet-body {
padding: 15px;
background: #fff;
}
.portlet .portlet-footer {
padding: 10px 15px;
background: #e0e7e8;
}
.portlet .portlet-footer ul {
margin: 0;
}
.portlet-green, .portlet-green>.portlet-heading {
border-color: #16a085;
}
.portlet-green>.portlet-heading {
color: #fff;
background-color: #16a085;
}
.portlet-orange, .portlet-orange>.portlet-heading {
border-color: #f39c12;
}
.portlet-orange>.portlet-heading {
color: #fff;
background-color: #f39c12;
}
.portlet-blue, .portlet-blue>.portlet-heading {
border-color: #2980b9;
}
.portlet-blue>.portlet-heading {
color: #fff;
background-color: #2980b9;
}
.portlet-red, .portlet-red>.portlet-heading {
border-color: #e74c3c;
}
.portlet-red>.portlet-heading {
color: #fff;
background-color: #e74c3c;
}
.portlet-purple, .portlet-purple>.portlet-heading {
border-color: #8e44ad;
}
.portlet-purple>.portlet-heading {
color: #fff;
background-color: #8e44ad;
}
.portlet-default, .portlet-dark-blue, .portlet-default>.portlet-heading,
.portlet-dark-blue>.portlet-heading {
border-color: #34495e;
}
.portlet-default>.portlet-heading, .portlet-dark-blue>.portlet-heading {
color: #fff;
background-color: #34495e;
}
.portlet-basic, .portlet-basic>.portlet-heading {
border-color: #333;
}
.portlet-basic>.portlet-heading {
border-bottom: 1px solid #333;
color: #333;
background-color: #fff;
}
@media ( min-width :768px) {
.portlet {
margin-bottom: 30px;
}
}
.img-chat {
width: 40px;
height: 40px;
}
.text-green {
color: #16a085;
}
.text-orange {
color: #f39c12;
}
.text-red {
color: #e74c3c;
}출처: 나동빈쌤
반응형
'2020 > JSP 기본 WEB 만들기(미완성)' 카테고리의 다른 글
| #7 채팅 메시지 전송 기능 구현 (0) | 2020.05.29 |
|---|---|
| # 6 채팅 데이터베이스 구축 (0) | 2020.05.28 |
| #4 JSP 회원 가입 DB기능 구현 (0) | 2020.05.20 |
| # 회원 가입 화면 만들기 (0) | 2020.05.20 |
| # 2 MySQL 데이터베이스 커넥션 풀 구축 (0) | 2020.05.20 |
꽃꽂이하는개발자