웹프로젝트 3주차_3조
2022. 9. 25. 23:33ㆍ22-2학기 (SISS)/웹해킹
메인 웹페이지 형식과 로그인, 회원가입 시 페이지를 구현했다.
아래는 코드와 결과이다.
1. index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Our Secret Place</title>
</head>
<body>
<style>
body {
background-image: url(sky.jpg);
background-repeat: no-repeat;
min-height: 100%;
background-position: center;
background-size: cover;
}
div.box1 {
position: relative;
text-align: center;
margin-left: 400px;
margin-top: 150px;
width: 900px;
height: 500px;
border: 3px solid pink;
background-color: white;
}
</style>
<div class="box2">
<div class="box1">
<br><br>
<span style="font-size: 60px;">사이트 이름</span> <br><br>
<span style="font-size: 30px;">어쩌고 저쩌고</span> <br>
<span style="font-size: 20px;">have fun</span>
<br><br><br>
<input type="button" value=" sign in " style="
font-family: Georgia, serif; background-color: white; font-size:20px;
padding:5px; padding-left: 7px; padding-right: 7px; margin-top: 10px; margin-right: 30px; cursor: pointer;"
onclick="location.href='signin.html';">
<span></span>
<input type="button" value=" sign up " style="
font-family: Georgia, serif; background-color: white; font-size:20px;
padding:5px; padding-left: 7px; padding-right: 7px; margin-top: 10px; cursor: pointer;"
onclick="location.href='signup_n.html';">
</div>
</div>
<!-- <div onclick=window.location="login.html">
love the moment
</div> -->
</body>
</html>
2. main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>메인 페이지</title>
</head>
<body>
Welcome, <?php echo $_GET['name']; ?> !
</body>
</html>
3.signin.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Join the circle</title>
</head>
<body>
<style>
body {
background-image: url(sky.jpg);
background-repeat: no-repeat;
min-height: 100%;
background-position: center;
background-size: cover;
}
div.box p {
font-size: 30px;
color: pink;
text-align: center;
opacity: 1;
}
div.box {
text-align: center;
margin-left: 400px;
margin-top: 150px;
width: 900px;
height: 500px;
border: 3px solid pink;
background-color: white;
}
</style>
<div class="box">
<br>
<strong style="cursor:default; font-size:40px;">SIGN IN</strong><br><br><br><br>
<form action="">
<p>
<strong style="margin-right:10px; cursor: default"> ♥ ID </strong>
<input type="text" name="ID" style="font-size:20px; cursor:text">
</p>
<p>
<strong style="margin-right:10px; cursor:default"> ♥ PW </strong>
<input type="password" name="PW" style="font-size: 20px; cursor:text">
<p>
<input type="button" value=" sign in " style="
font-family: Georgia, serif; background-color: white; font-size:20px;
padding:5px; padding-left: 7px; padding-right: 7px; margin-top: 10px; cursor: pointer;"
onclick="location.href='main.html';">
</p>
</form>
<br>
don't have your account yet?
<input type="button" value=" sign up " style="
font-family: Georgia, serif; background-color: white; font-size:20px;
padding:5px; padding-left: 7px; padding-right: 7px; margin-left: 10px; cursor: pointer;"
onclick="location.href='signup_n.html';">
</div>
</body>
</html>
4.sign_up.js
function LastSignup(){
const nm = document.getElementById("userName").value
const p = document.getElementById("userPwd").value
const id = document.getElementById("userId").value
const em = document.getElementById("userEmail").value
const nn = document.getElementById("userNick").value
let isValid = true
if(nm === ""){
document.getElementById("warningP1").innerText = "이름을 입력해 주세요."
document.getElementById("warningP2").innerText = ""
isValid = false
}
if(id === ""){
document.getElementById("warningP1").innerText = "아이디를 입력해 주세요."
document.getElementById("warningP2").innerText = ""
isValid = false
}
if(p === ""){
document.getElementById("warningP1").innerText = "비밀번호를 입력해 주세요."
document.getElementById("warningP2").innerText = ""
isValid = false
}
if(em === ""){
document.getElementById("warningP1").innerText = "이메일을 입력해 주세요."
document.getElementById("warningP2").innerText = ""
isValid = false
}
if(nn === ""){
document.getElementById("warningP1").innerText = "닉네임을 입력해 주세요."
document.getElementById("warningP2").innerText = ""
isValid = false
}
if(isValid === true){
alert("가입을 축하합니다.")
}
else{
alert("항목을 다시 확인해주십시오.")
history.go(-1)
}
}
5. signup_proc.php
<?php
$conn = mysqli_connect("localhost", "root", "111111", "register")
or die("SQL 접속 실패!");
$sql ="
INSERT INTO user
(userName, userEmail, userNick, userId, userPwd, created)
VALUES('{$_POST['userName']}', '{$_POST['userEmail']}', '{$_POST['userNick']}',
'{$_POST['userId']}', '{$_POST['userPwd']}', NOW()
)";
$result = mysqli_query($conn, $sql);
if($result == false){
echo "문제발생. 관리자에게 문의하세요.";
error_log(mysqli_error($conn));
}
else{
header('Location: /index.html');
}
?>
6.login.java
package user;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
public class LOGIN {
private Connection conn;
private PreparedStatement pstmt;
private ResultSet rs;
public UserDAO() {
try{
String dbURL = "jdbc:mysql://localhost:3306/BBS";
String dbID ="root";
String dbPassword="pass";
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(dbURL,dbID,dbPassword);
} catch(Exception e){
e.printStackTrace();
}
}
public int login(String userID, String userPassword) {
String SQL = "SELECT userPassword FROM USER WHERE userID=?";
try {
pstmt = conn.prepareStatement(SQL);
pstmt.setString(1, userID);
rs = pstmt.executeQuery();
if (rs.next()) {
if(rs.getString(1).equals(userPassword)) {
return 1;
}else {
return 0;
}
}
return -1;
}catch(Exception e){
e.printStackTrace();
}
return -2;
}
}
7.login_db.java
package user;
public class User {
private String userID;
private String userPassword;
private String userName;
private String userGender;
private String userEmail;
public String getUserID() {
return userID;
}
public void setUserID(String userID) {
this.userID = userID;
}
public String getUserPassword() {
return userPassword;
}
public void setUserPassword(String userPassword) {
this.userPassword = userPassword;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getUserGender() {
return userGender;
}
public void setUserGender(String userGender) {
this.userGender = userGender;
}
public String getUserEmail() {
return userEmail;
}
public void setUserEmail(String userEmail) {
this.userEmail = userEmail;
}
}
'22-2학기 (SISS) > 웹해킹' 카테고리의 다른 글
| 웹해킹_3주차 (2) | 2022.09.20 |
|---|---|
| 웹해킹_2주차 (0) | 2022.09.12 |
| 웹해킹_1주차 (0) | 2022.09.10 |