웹_프론트_백엔드/프론트엔드

2021.01.30

shine94 2021. 1. 30. 19:20

1. SQL 문법

1) frontenddb 사용, 테이블 확인

 

2) 전체 필드 확인

 

3) 특정 필드 가져오기

 

4) 특정 조건에 따라 필드 가져오기

 

5) SQL insert 이용하지 않고 데이터 삽입하는 방법

6) NULL 비교

 

7) 범위 비교

 

8) 데이터 정렬

 

9) 그룹

 

10) 별명을 지어줄 수 있음!

 

11) tb_profile 테이블, 2개 데이터 삽입

 

12) INNER JOIN

 

13) LEFT JOIN


14) RIGHT JOIN

 

 

2. SQL 실습

USE frontenddb;

-- 테이블 확인
SHOW TABLES;

-- 전체 필드 확인
SELECT * FROM tb_member;

-- 특정 필드 가져오기
SELECT mem_idx, mem_userid, mem_name, mem_hp FROM tb_member;
SELECT mem_userid, mem_name, mem_hp, mem_idx FROM tb_member;

-- 특정 조건에 따라 필드 가져오기
SELECT * FROM tb_member WHERE mem_idx = 1;
SELECT * FROM tb_member WHERE mem_userid = 'melon';
SELECT * FROM tb_member WHERE mem_userid = 'apple' and mem_userpw = '1111';
SELECT * FROM tb_member WHERE mem_userid = 'apple' and mem_userpw = '1234';

SELECT * FROM tb_member;

-- NULL
SELECT * FROM tb_member WHERE mem_hobby is null;
SELECT * FROM tb_member WHERE mem_hobby is not null;

-- 범위
SELECT * FROM tb_member WHERE mem_point >= 0 and mem_point <= 1500;
SELECT * FROM tb_member WHERE mem_point between 0 and 1500;
SELECT * FROM tb_member WHERE mem_idx = 1 or mem_idx = 3 or mem_idx = 5;
SELECT * FROM tb_member WHERE mem_idx in (1, 3, 5);

-- 데이터 정렬
SELECT * FROM tb_member ORDER BY mem_point;		-- 오름차순 (ASC 생략)
SELECT * FROM tb_member ORDER BY mem_point DESC;	--  내림차순
SELECT mem_idx, mem_userid, mem_name, mem_point FROM tb_member ORDER BY mem_point;
SELECT mem_idx, mem_userid, mem_name, mem_point FROM tb_member ORDER BY mem_point ASC, mem_idx DESC;

SELECT * FROM tb_member;

-- 그룹
-- SELECT "그룹을 맞은 필드", "그룹함수" FROM tb_member GROUP BY mem_gender;
SELECT mem_gender FROM tb_member GROUP BY mem_gender;
SELECT count(mem_idx) FROM tb_member GROUP BY mem_gender;
SELECT mem_gender, count(mem_idx) as cnt FROM tb_member GROUP BY mem_gender;
SELECT mem_gender, max(mem_point) as max FROM tb_member GROUP BY mem_gender;
SELECT mem_gender, min(mem_point) as min FROM tb_member GROUP BY mem_gender;
SELECT mem_gender, avg(mem_point) as avg FROM tb_member GROUP BY mem_gender;
SELECT mem_gender, sum(mem_point) as sum FROM tb_member GROUP BY mem_gender;

SELECT * FROM tb_profile;
INSERT INTO tb_profile VALUES (5, 22, '여자', 150, 50, '2000-01-30');
INSERT INTO tb_profile VALUES (7, 30, '남자', 180, 80, '2000-01-30');
SELECT * FROM tb_profile;

-- 조인
SELECT * FROM tb_member;
SELECT * FROM tb_profile;
-- 조인(INNER JOIN)
SELECT mem_idx, mem_userid, mem_userpw, pro_height, pro_weight
FROM tb_member INNER JOIN tb_profile
ON tb_member.mem_idx = tb_profile.pro_memidx;
-- 조인(LEFT JOIN)
SELECT mem_idx, mem_userid, mem_userpw, pro_height, pro_weight
FROM tb_member LEFT JOIN tb_profile
ON tb_member.mem_idx = tb_profile.pro_memidx;
-- 조인(RIGHT JOIN)
SELECT mem_idx, mem_userid, mem_userpw, pro_height, pro_weight
FROM tb_member RIGHT JOIN tb_profile
ON tb_member.mem_idx = tb_profile.pro_memidx;

 

 

3. php에 MySQL 연결하기

** 1_dbconn.php

<?php
    $conn = mysqli_connect("localhost", "root", "1234", "frontenddb") or die("데이터베이스 연결 실패!");
    if(!$conn) {
        echo("연결 실패");
    } else {
        echo("연결 성공");
    }
?>

 

 

 

4. 만약 php에서 DB 연결이 되지 않을때, php.ini(php설정파일)에서 아래의 주석이 풀려있나 확인하기!

 

 

5. php에서 MySQL insert하기

** 2_insert.php

<?php
    $conn = mysqli_connect("localhost", "root", "1234", "frontenddb") or die("데이터베이스 연결 실패!");
    if(!$conn) {
        echo("연결 실패");
    } else {
        $sql = "INSERT INTO tb_member (mem_userid, mem_userpw, mem_name, mem_hp, mem_email, mem_hobby, 
                    mem_ssh1, mem_ssh2, mem_zipcode, mem_address1, mem_address2, mem_address3) 
                VALUES ('lee', '1212', '이씨', '010-1234-1234', 'lee@lee.com', '쇼핑',
                    '001011', '4068518', '12345', '서울 서초구', '양재동', '11-1')";
        $result = mysqli_query($conn, $sql);
        echo "{$result}개의 데이터가 정상적으로 insert 되었습니다.";
    }
?>

 

 

 

6. 회원가입

** 3_regist.php

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원가입</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" 
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="./js/regist.js"></script>
    <script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
</head>
<body>
    <h2>회원가입</h2>
    <form name="regform" id="regform" method="post" action="3_regist_ok.php" onsubmit="return sendit()">
        <input type="hidden" name="isSsn" id="isSsn" value="false">
        <p><label>아이디 : <input type="text" name="userid" id="userid" maxlength="20"></label></p>
        <p><label>비밀번호 : <input type="password" name="userpw" id="userpw" maxlength="20"></label></p>
        <p><label>비밀번호 확인 : <input type="password" name="userpw_re" id="userpw_re" maxlength="20"></label></p>
        <p><label>이름 : <input type="text" name="username" id="username"></label></p>
        <p><label>휴대폰 번호 : <input type="text" name="hp" id="hp"></label> ('-' 을 포함)</p>
        <p><label>이메일 : <input type="text" name="email" id="email"></label></p>
        <p>취미 : 
            <label>드라이브<input type="checkbox" name="hobby[]" value="드라이브"></label>
            <label>등산<input type="checkbox" name="hobby[]" value="등산"></label>
            <label>게임<input type="checkbox" name="hobby[]" value="게임"></label>
            <label>영화감상<input type="checkbox" name="hobby[]" value="영화감상"></label>
            <label>쇼핑<input type="checkbox" name="hobby[]" value="쇼핑"></label>
        </p>
        <p>주민등록번호 : 
            <input type="text" name="ssn1" id="ssn1" maxlength="6" onkeyup="moveFocus()"> - <input type="text" name="ssn2" id="ssn2" maxlength="7">
            <input type="button" value="주민등록번호 검증" onclick="ssnCheck()">
        </p>
        <p>우편번호 : <input type="text" name="zipcode" id="sample6_postcode"> <input type="button" value="우편번호 검색" onclick="sample6_execDaumPostcode()"></p>
        <p><label>주소 : <input type="text" name="address1" id="sample6_address"></label></p>
        <p><label>상세주소 : <input type="text" name="address2" id="sample6_detailAddress"></label></p>
        <p><label>참고항목 : <input type="text" name="address3" id="sample6_extraAddress"></label></p>
        <p><input type="submit" value="가입완료"> <input type="reset" value="다시작성"></p>
    </form>
</body>
</html>

 

** js/regist.js

'use strict';
function sendit() {
    const userid = document.getElementById('userid');
    const userpw = document.getElementById('userpw');
    const userpw_re = document.getElementById('userpw_re');
    const username = document.getElementById('username');
    const hp = document.getElementById('hp');
    const email = document.getElementById('email');
    const isSsn = document.getElementById('isSsn');

    const expPwText = /^.*(?=^.{4,20}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&*()+=]).*$/;
    const expNameText = /[가-힣]+$/;
    const expHpText = /^\d{3}-\d{3,4}-\d{4}$/;
    const expEmailText = /^[A-Za-z0-9\.\-]+@[A-Za-z0-9\.\-]+\.[A-Za-z0-9\.\-]+$/;

    if(userid.value == ''){
        alert('아이디를 입력하세요.');
        userid.focus();
        return false;
    }
    if(userid.value.length < 4 || userid.value.length > 20){
        alert('아이디를 4자이상 20자 이하로 입력하세요.');
        userid.focus();
        return false;
    }
    if(userpw.value == ''){
        alert('비밀번호를 입력하세요.');
        userpw.focus();
        return false;
    }
    if(expPwText.test(userpw.value) == false){
        alert('비밀번호 형식을 확인하세요.');
        userpw.focus();
        return false;
    }
    if(userpw.value != userpw_re.value){
        alert('비밀번호와 비밀번호 확인의 값이 서로 다릅니다.');
        userpw.focus();
        return false;
    }
    
    if(expNameText.test(username.value) == false){
        alert('이름 형식을 확인하세요.');
        username.focus();
        return false;
    }
    if(expHpText.test(hp.value) == false){
        alert('휴대폰 번호 형식을 확인하세요.');
        hp.focus();
        return false;
    }
    if(expEmailText.test(email.value) == false){
        alert('이메일 형식을 확인하세요.');
        email.focus();
        return false;
    }

    //let cnt = 0;
    //for(let i=0; i<hobby.length; i++){
    //    if(hobby[i].checked){
    //        cnt++;
    //    }
    //}
    //if(cnt == 0){
    //    alert('취미는 적어도 1개이상 선택하세요.');
    //    return false;
    //}
    let isHobbyCheck = false;
    for(let i=0; i<$("[name='hobby[]']").length; i++) {
        if($("input:checkbox[name='hobby[]']").eq(i).is(":checked") == true) {
            isHobbyCheck = true;
        }
    }
    if(!isHobbyCheck) {
        alert('취미는 한 개 이상 체크하세요.')
        return false;
    }

    if(isSsn.value == 'false'){
        alert('주민등록번호 검증을 확인하세요.');
        ssn1.focus();
        return false; 
    }

    return true;
}

function moveFocus(){
    const ssn1 = document.getElementById('ssn1');
    if(ssn1.value.length >= 6){
        document.getElementById('ssn2').focus();
    }
}

function ssnCheck(){
    const ssn1 = document.getElementById('ssn1');
    const ssn2 = document.getElementById('ssn2');
    const isSsn = document.getElementById('isSsn');

    if(ssn1.value == '' || ssn2.value == ''){
        alert('주민등록번호를 입력하세요.');
        ssn1.focus();
        return false;
    }

    const ssn = ssn1.value + ssn2.value;
    const s1 = Number(ssn.substr(0, 1)) * 2;
    const s2 = Number(ssn.substr(1, 1)) * 3;
    const s3 = Number(ssn.substr(2, 1)) * 4;
    const s4 = Number(ssn.substr(3, 1)) * 5;
    const s5 = Number(ssn.substr(4, 1)) * 6;
    const s6 = Number(ssn.substr(5, 1)) * 7;
    const s7 = Number(ssn.substr(6, 1)) * 8;
    const s8 = Number(ssn.substr(7, 1)) * 9;
    const s9 = Number(ssn.substr(8, 1)) * 2;
    const s10 = Number(ssn.substr(9, 1)) * 3;
    const s11 = Number(ssn.substr(10, 1)) * 4;
    const s12 = Number(ssn.substr(11, 1)) * 5;
    const s13 = Number(ssn.substr(12, 1));

    let result = s1+s2+s3+s4+s5+s6+s7+s8+s9+s10+s11+s12;
    result = result % 11;
    result = 11 - result;
    if(result >= 10) {result = result % 10;}

    if(result == s13){
        alert('유효한 주민등록번호입니다.');
        isSsn.value = 'true';
    } else {
        alert('유효하지 않은 주민등록번호입니다.');
    }
}

function sample6_execDaumPostcode() {
    new daum.Postcode({
        oncomplete: function(data) {
            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

            // 각 주소의 노출 규칙에 따라 주소를 조합한다.
            // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
            var addr = ''; // 주소 변수
            var extraAddr = ''; // 참고항목 변수

            //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
            if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                addr = data.roadAddress;
            } else { // 사용자가 지번 주소를 선택했을 경우(J)
                addr = data.jibunAddress;
            }

            // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
            if(data.userSelectedType === 'R'){
                // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                    extraAddr += data.bname;
                }
                // 건물명이 있고, 공동주택일 경우 추가한다.
                if(data.buildingName !== '' && data.apartment === 'Y'){
                    extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                }
                // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                if(extraAddr !== ''){
                    extraAddr = ' (' + extraAddr + ')';
                }
                // 조합된 참고항목을 해당 필드에 넣는다.
                document.getElementById("sample6_extraAddress").value = extraAddr;
            
            } else {
                document.getElementById("sample6_extraAddress").value = '';
            }

            // 우편번호와 주소 정보를 해당 필드에 넣는다.
            document.getElementById('sample6_postcode').value = data.zonecode;
            document.getElementById("sample6_address").value = addr;
            // 커서를 상세주소 필드로 이동한다.
            document.getElementById("sample6_detailAddress").focus();
        }
    }).open();
}

 

** 3_regist_ok.php

<?php
    include "./include/dbconn.php";

    $userid = $_POST['userid'];
    $userpw = $_POST['userpw'];
    $username = $_POST['username'];
    $hp = $_POST['hp'];
    $email = $_POST['email'];

    $hobby = $_POST['hobby'];
    $hobbystr = "";
    foreach($hobby as $h) {
        $hobbystr .= $h.",";
    }

    $ssn1 = $_POST['ssn1'];
    $ssn2 = $_POST['ssn2'];
    $zipcode = $_POST['zipcode'];
    $address1 = $_POST['address1'];
    $address2 = $_POST['address2'];
    $address3 = $_POST['address3'];

    /*
    echo $userid."<br>";
    echo $userpw."<br>";
    echo $username."<br>";
    echo $hp."<br>";
    echo $email."<br>";
    echo $hobbystr."<br>";
    echo $ssn1."<br>";
    echo $ssn2."<br>";
    echo $zipcode."<br>";
    echo $address1."<br>";
    echo $address2."<br>";
    echo $address3."<br>";
    */

    if(!$conn) {
        echo "DB 연결 실패!";
    } else {
        $sql = "INSERT INTO tb_member (mem_userid, mem_userpw, mem_name, mem_hp, mem_email, mem_hobby, 
                    mem_ssh1, mem_ssh2, mem_zipcode, mem_address1, mem_address2, mem_address3) 
                VALUES ('$userid', '$userpw', '$username', '$hp', '$email', '$hobbystr',
                    '$ssn1', '$ssn2', '$zipcode', '$address1', '$address2', '$address3')";
        $result = mysqli_query($conn, $sql);
        echo "<script>alert('회원가입이 완료되었습니다.');location.href='./3_login.php';</script>";
    }
?>

 

** dbconn.php

<?php
    $conn = mysqli_connect("localhost", "root", "1234", "frontenddb") or die("데이터베이스 연결 실패!");
?>

 

 

 

7. 로그인

** 3_login.php

<?php
    session_start();
?>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인</title>
</head>
<body>
    <h2>로그인</h2>
<?php
    if(!isset($_SESSION['id'])) {
?>
    <form method="post" action="3_login_ok.php">
        <p><label>아이디 : <input type="text" name="userid"></label></p>
        <p><label>비밀번호 : <input type="password" name="userpw"></label></p>
        <p><input type="submit" value="로그인"></p>
    </form>
<?php
    } else {
?>
    <p><?=$_SESSION['id']?>님 환영합니다.</p>
    <p><a href="3_logout.php">로그아웃</a></p>
<?php
    }
?>
</body>
</html>

 

** 3_login_ok.php

<?php
    session_start();
    include "./include/dbconn.php";

    $userid = $_POST['userid'];
    $userpw = $_POST['userpw'];

    if(!$conn) {
        echo "DB 연결 실패!";
    } else {
        $sql = "SELECT mem_idx, mem_userid, mem_name FROM tb_member 
                    WHERE mem_userid='$userid' and mem_userpw='$userpw'";
        $result = mysqli_query($conn, $sql);
        $row = mysqli_fetch_array($result);
        if($row['mem_idx'] == "") {
            echo "<script>alert('아이디 또는 비밀번호를 확인하세요.');history.back();</script>";
        } else {
            $_SESSION['idx'] = $row['mem_idx'];
            $_SESSION['id'] = $row['mem_userid'];
            $_SESSION['name'] = $row['mem_name'];
            echo "<script>alert('로그인 되었습니다.');location.href='3_login.php';</script>";
        }
    }
?>

 

** dbconn.php

<?php
    $conn = mysqli_connect("localhost", "root", "1234", "frontenddb") or die("데이터베이스 연결 실패!");
?>

 

저작자표시

'웹_프론트_백엔드 > 프론트엔드' 카테고리의 다른 글

2021.02.06  (0) 2021.02.06
2021.01.31  (0) 2021.01.31
2021.01.24  (0) 2021.01.27
2021.01.23  (0) 2021.01.23
2021.01.17  (0) 2021.01.17

'웹_프론트_백엔드/프론트엔드'의 다른글

  • 현재글2021.01.30

관련글

shine의 개발 노트

게임 서버 개발자, 샤인의 IT 공부 노트

티스토리툴바