상세 컨텐츠

본문 제목

PHP 게시판 제작(2)

php

by 개발일지작성 2024. 3. 28. 14:42

본문

728x90
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글쓰기</title>
    <!-- 부트스트랩 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <!-- 썸머노트 -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
</head>
<body>

    <div class="container" >

        <div class="mt-4 mb-3">
            <span class="h2">자유게시판</span>
        </div>


        <div class="mb-2 d-flex gap-2">
            <input type="text" name="name" class="form-control w-25" placeholder="글쓴이" autocomplete="off" id="id_name">
            <input type="password" name="password" class="form-control w-25" placeholder="비밀번호" id="id_password">
        </div>

        <div>
            <input type="text" name="subject" class="form-control mb-2" placeholder="제목" autocomplete="off" id="id_subject">
        </div>
   
        <div id="summernote"></div>
   
        <div class="mt-2 d-flex gap-2 justify-content-end">
            <button class="btn btn-primary" id="btn_submit">확인</button>
            <button class="btn btn-secondary">목록</button>
        </div>

    </div>



    <script>
        const btn_submit = document.querySelector('#btn_submit');
        btn_submit.addEventListener("click", () => {
            const id_name = document.querySelector('#id_name') // id 가 id_name인 것을 가져옴
            const id_password = document.querySelector('#id_password')
            const di_subject = document.querySelector('#id_subject')
            if(id_name.value == '') { // btn_name 의 값을 가져오는 방법 (비어있다면)
                alert ('글쓴이를 입력하세요')
                id_name.focus();
                return false
            }
            if (id_password.value == '') {
                alert ('비밀번호를 설정하세요')
                id_password.focus();
                return false
            }
            if (id_subject.value == '') {
                alert ('제목을 설정하세요')
                id_subject.focus();
                return false
            }

            // 썸머노트 내용입력창 기본 값이 <p><br></p> 이거임
            var markupStr = $('#summernote').summernote('code');
            if (markupStr == '<p><br></p>') {
                alert('내용을 입력하세요')
                return false
            }
        });
 
        $('#summernote').summernote({
          placeholder: '글 내용을 입력해주세요',
          tabsize: 2,
          height: 300,
          toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video']],
            ['view', ['fullscreen', 'codeview', 'help']]
          ]
        });
      </script>
</body>
</html>

php공부 중이니 프론트 쪽은 자세히 쓰지 않으려 했지만.... 뭔가... 해야할 것만 같은.. 기록해두면 어딘가 쓸데 있을거같은 느낌적인 느낌느낌이..

 

코드가 길다고 우울할 필요 전혀 없다 모든 코드는 끊어서 볼 것

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글쓰기</title>
    <!-- 부트스트랩 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <!-- 썸머노트 -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
</head>

이건 설명 안해도 될거같고..

 

이후엔 body 안에 들어감

 

    <div class="container" >

        <div class="mt-4 mb-3">
            <span class="h2">자유게시판</span>
        </div>


        <div class="mb-2 d-flex gap-2">
            <input type="text" name="name" class="form-control w-25" placeholder="글쓴이" autocomplete="off" id="id_name">
            <input type="password" name="password" class="form-control w-25" placeholder="비밀번호" id="id_password">
        </div>

        <div>
            <input type="text" name="subject" class="form-control mb-2" placeholder="제목" autocomplete="off" id="id_subject">
        </div>
   
        <div id="summernote"></div>
   
        <div class="mt-2 d-flex gap-2 justify-content-end">
            <button class="btn btn-primary" id="btn_submit">확인</button>
            <button class="btn btn-secondary">목록</button>
        </div>

    </div>

mb-2 = margin bottom 과 같은 효과 1~5 까지 설정 되는 듯

mt-2 = margin top

d-flex  = div로 감싼 글쓴이와 비밀번호 input을 나란히 배치해줌

form-control = 먼가.. 디자인을 꾸며주는데.. 음.. 설명을 어찌할지..

w-25 = 페이지의 25% 만큼 차지함

autocomplete = 입력기록을 안보이게 해줌 (기본값은 on 인 상태)

gap-2 = 간격을 줌

 

전부 css관련 내용을 여기서 조절한 것

 

<script>
        const btn_submit = document.querySelector('#btn_submit');
        btn_submit.addEventListener("click", () => {
            const id_name = document.querySelector('#id_name') // id 가 id_name인 것을 가져옴
            const id_password = document.querySelector('#id_password')
            const di_subject = document.querySelector('#id_subject')
            if(id_name.value == '') { // btn_name 의 값을 가져오는 방법 (비어있다면)
                alert ('글쓴이를 입력하세요')
                id_name.focus();
                return false
            }
            if (id_password.value == '') {
                alert ('비밀번호를 설정하세요')
                id_password.focus();
                return false
            }
            if (id_subject.value == '') {
                alert ('제목을 설정하세요')
                id_subject.focus();
                return false
            }

            // 썸머노트 내용입력창 기본 값이 <p><br></p> 이거임
            var markupStr = $('#summernote').summernote('code');
            if (markupStr == '<p><br></p>') {
                alert('내용을 입력하세요')
                return false
            }
        });

       
        $('#summernote').summernote({
          placeholder: '글 내용을 입력해주세요',
          tabsize: 2,
          height: 300,
          toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video']],
            ['view', ['fullscreen', 'codeview', 'help']]
          ]
        });
      </script>

$('#summernote') 이 부분은 지난 게시글에 작성해놨으니.. 걍 섬머노트에서 긁어온거 작동원리 나도 몰?루?

 

const btn_submit = document.querySelector('#btn_submit');

위 id = "뭐시깽이" 라고 지정한 id를 가져오려면 #을 사용해야함

'#뭐시깽이' 이런식으로 btn_submit 이라는 변수? 를 만들어 줌

btn_submit.addEventListener("click", () => {

btn_submit 변수에 이벤트를 줄건데(add.EventListener) click시 이벤트가 발생하게 함

const id_name = document.querySelector('#id_name')

id_name 이라는 변수를 만들어주는데 얘는 #id_name 값을 넣어줌 (대충 인자 뭐 매개변수 이런 느낌)

if(id_name.value == '') { // btn_name 의 값을 가져오는 방법 (비어있다면)
alert ('글쓴이를 입력하세요')
id_name.focus();
return false
}

'' 큰 따옴표 처럼 생겼지만 작은따옴표 임 (" '') 똑같이 나옴;;

만약에 (if) 입력값이 (id_name.value) 없다면 ('') 알람 울리고 id_name으로 이동하게하고 false를 반환해라  (id_name 값을 가져오는 방법은 .value 사)

return없으면 밑에 비밀번호 입력하세요 뭐 이런거 쭉 실행해버림

'php' 카테고리의 다른 글

PHP 함수 사용과 객체 사용의 차이  (0) 2024.04.01
PHP 객체지향이란?  (0) 2024.04.01
PHP 게시판 제작(1)  (0) 2024.03.28
PHP 단방향 암호화 함수  (0) 2024.03.27
PHP 페이징 처리 DB o  (0) 2024.03.27

관련글 더보기

티스토리툴바