Web 개발

index.php >메인페이지 form 태그 -사용자의 입력을 받은 데이터를 서버로 보내준다. form 태그 속성 action 속성을 사용하여 입력받은 데이터를 "login_ok.php" 보내준다. method 속성을 사용하여 입력받은 데이터를 "POST" 방식으로

로그인 페이지 index.php GET방식을 POST로 변경하였습니다. -전에 GET방식을 썼던 이유는 URL에 데이터가 같이 포함되는 전달되는지 확인 -POST방식으로 바꾼 이유는 Log-in은 민감한 개인정보이기 때문에 보안성을 높히기 위함 로그인 로직 - 정규표

index.php기본적인 로그인 화면을 구성해줍니다.form 태그를 사용하여 login_ok.php 로 데이터를 넘겨줍니다.label 태그를 사용하여 컨트롤 요소를 묶어주었습니다.a태그를 사용해서 회원가입이 된 유저일 경우 회원전용 페이지를 이용할 수 있게 하였습니다.

출처 유튜브 - 왕초보 홈페이지만들기 https://www.youtube.com/watch?v=hLoLjhEP13k&list=PLTb3qGCzYjS1sqYn00g6t5W1IkhndC4 해당 영상을 참고하여 클론코딩하였습니다. 시리즈로 영상이 제작되어서 따라하면서 공부하

https://velog.io/@lth97/php-%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85-%EC%95%BD%EA%B4%80%EB%8F%99%EC%9D%98회원가입 약관동의 만들기 이어서 나머지 스크립트 작업을 해보겠습니다. 못 보셨다

※ 약관동의 스크립트 https://velog.io/@lth97/php-%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85-%EC%95%BD%EA%B4%80%EB%8F%99%EC%9D%98-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

CREATE DATABASE h_pgh_pg 라는 이름의 DB 생성합니다.INT UNSIGNED보통 INT(정수)는 -2,147,483,648~ 2,147,483,647 까지 값을 가지는데 INT UNSIGNED 을 사용하면 마이너스 부분을 제외한 0~4,294,967

객체지향 프로그래밍(OOP)은 현실 세계를 객체(Object) 라는 단위로 나누어 설계하는 프로그래밍 기법입니다.이 개념을 활용하면 코드를 보다 구조적으로 관리할 수 있으며, 유지보수 및 확장성이 뛰어난 프로그램을 만들 수 있습니다.코드 재사용성 증가 : 같은 클래스를

위 코드를 설명해보면아이디 중복 확인 버튼을 btn_id_chk 변수에 담아줍니다.btn_id_chk에 이벤트를 부여하여 클릭했을 때 다음과 같은 코드를 수행합니다.f_id(아이디 입력 칸)를 찾아서 변수에 담아줍니다.만약 f_id 입력 칸이 비어있다면 아래 코드를 수

다음 카카오 우편번호를 사용했습니다.출 처 https://postcode.map.daum.net/guide!\[](https://velog.velcdn.com/images/lth97/post/ec2df208-aaf5-444c-b259-f50da2fd8

필자는 form 태그 안에 mode라는 hidden 값을 주어서 해당 값으로 회원가입을 다뤘습니다.프로필 이미지가 겹칠 수가 있기 때문에 ID. 확장자로 통일하였습니다.확장자를 구하기 위해서 프로필의 이름과 확장자를 나눠서 확장자만 저장했습니다.ID와 확장자를 붙여서

filter_var()를 사용하여 이메일 형식이 맞는지 확인합니다.ex) aaa -> Xex) aaa@gmail.com -> Oex) 형식이 맞았을 때ex) 형식이 틀렸을 때원래 이메일 부분에서 다뤘어야 했는데 그냥 지나쳐버려서 추가했습니다.간단하게 구성하였기 때문에

기본적인 틀은 회원가입 페이지를 참고하였습니다.calc()를 이용하면 고정된 너비의 여백을 가진 요소를 쉽게 배치할 수 있습니다.출 처 https://developer.mozilla.org/ko/docs/Web/CSS/calcform-floating은 Boot

출 처 https://hyunseo-fullstackdiary.tistory.com/127비밀번호를 암호화하는데 한쪽 방향으로만 암호화가 가능하다, 즉 반대로 암호를 풀 수 없다는 뜻입니다. 덕분에 비밀번호를 숨기는 데 있어서 아주 좋습니다. 또한 비밀번호가

회원이 아닌 상태에서 개인정보 열람은 이루어질 수 없기 때문에 해당 접근을 막는 방법입니다.조건문을 통해서 세션 ID 여부를 확인하고 없으면 해당 페이지의 접근을 막습니다.기존의 회원가입 페이지를 그대로 가져왔습니다.회원정보를 불러오기 위해서 새로운 Member 인스턴

기존 테이블에 level 칼럼이 없어서 추가해줬습니다.해당 값을 가지고 관리자와 일반회원을 구분해 줄 겁니다.현재 관리자와 일반회원 모두 Level 1로 설정되어 있기 때문에 관리자만 따로 변경이 필요하겠습니다.로그인 성공 시 세션 level을 추가해 주었습니다.Ind

관리자 페이지의 메인 페이지입니다.회원관리 및 게시판 관리를 하기 위함입니다.해당 파일들은 Admin 폴더 안에 들어있습니다.Admin 페이지 부분에 헤더입니다.관리자는 이미 로그인이 되어있는 상태이기 때문에 조건을 따로 주지 않습니다.Admin 페이지에 전부 적용되기

member 클래스에 list() 함수를 하나 만들어서 회원정보를 가져오게 합니다.mem->list($page, $limit)에서 넘어온 값foreach 반복문을 사용하여 해당 배열 값을 $row 담아서 뿌려줍니다.중간에 주석 처리 한 코드는 보통 계정 생성을 하면 날

기존 페이지 네이션 부분에 case 문을 사용하여 조건에 맞는 값을 가지고 검색을 해줄 겁니다.조건을 주고 검색해 보겠습니다.조건을 이름으로 주고 bob이라는 이름을 검색해 보겠습니다.조건을 아이디로 주고 test1이라는 아이디를 검색해 보겠습니다.조건을 이메일로 주고

다음 시간에는 회원관리에서 회원 삭제 부분을 해보겠습니다.감사합니다.

회원 삭제를 시키려고 하다 보니 삭제 버튼이 여러 개 중복되어 있고, 해당 데이터만 삭제하려면 idx 값도 필요합니다.그래서 필자는 중복되는 버튼을 해당 프로퍼티에 data-set을 설정하여 idx 값을 부여하고 개별의 삭제 버튼을 foreach() 문을 이용하여 삭제

회원수정 버튼 회원 수정 버튼이 여러 개 존재하기 때문에 id를 부여하면 안 되고 class를 부여하여 querySelectorAll()를 사용하여 처리를 해줍니다. 전에 삭제 버튼과 동일한 방식을 사용합니다. 해당 버튼을 forEach()를 사용하여 요소 개수만큼

관리자와 일반회원 모두 회원을 수정할 때 공통부분을 사용합니다. 그래서 관리자, 일반회원 수정을 따로 나누는 게 속 편하지만 반복되는 부분이기에 하나의 메서드에서 구분하는 걸로 하였습니다.관리자는 idx 값을 가지고 수정을 하기 때문에 idx 값으로 데이터를 가져오게

다음 시간에는 게시판 생성, 모달 창, 스크립트 작업을 해보겠습니다.감사합니다.

출처 https://getbootstrap.kr/docs/5.0/components/modal/다음 시간에는 게시판 코드 생성 로직 Backend 부분을 해보겠습니다.감사합니다.

다음 시간에는 테이블 인덱스(index)를 사용해 중복 처리 부분을 처리해 보겠습니다.감사합니다.

검색에 도움을 줄 수 있는 것을 색인(index)라고 합니다. 인덱스를 사용하면 DB에서 검색 속도가 빨라지는 장점이 있습니다.현재는 idx에만 index가 걸려있으니 다른 걸 추가해 보겠습니다.bcode에 똑같이 index를 추가 해주었습니다.중복 index를 걸어서

게시판 삭제 - 실행 게시판 삭제 - Ajax 게시판 삭제 - DB 중복생성 막기 네트워크 환경이 좋지 않을 경우 통신이 밀리면서 생성을 연달아 클릭하는 경우가 있습니다. 그렇게 되면 중복이 생기기 때문에 이러한 문제점을 막기 위해서 간단하게 해결해 보겠습니다.

모달 창을 이용하여 수정 버튼과 등록을 같이 사용하였습니다.다음 시간에는 게시판 글목록 출력을 해보겠습니다.감사합니다.

보기버튼 클릭 시 해당 게시물로 이동합니다.게시판 코드를 사용하여 해당 페이지로 이동하기 때문에 쿼리 스트링을 추가해 줬습니다.DB에서 게시판 코드를 불러와서 해당 페이지로 이동해 주는 모습다음 시간에는 게시글 작성 부분을 해보겠습니다.감사합니다.

출처 https://summernote.org/getting-started/\`\`\`js// URL 쿼리 스트링 가져오기function getURLParams() { const params = {} window.location.search.replace(

게시판 Class를 만들어서 게시판 관련 된 작업을 여기서 다룹니다.제목과 내용을 입력하여 어떻게 처리되는지 확인해 보겠습니다.현재 데이터는 이러한 상태로 보내집니다.받은 데이터를 가지고 아래와 같은 응답을 받았습니다.글 등록이 정상적으로 처리되면 DB에 데이터가 들어

위에 사진을 보면 상당히 복잡한 내용이 있는데 간단히 말하면 이미지 파일이다.잘 보이지 않으니 앞 부분만 가져와보면 html에서 자주 보던 img 태그라는 걸 알 수 있습니다.잘 보면 해당 이미지 파일이 어떠한 형식으로 되어있는지 알 수 있는데 먼저 jpeg라는 걸 보

서머 노트 웹에디터 밑에 위와 같이 file 첨부를 추가해 줬습니다.파일 첨부 요소를 찾아 위와 같이 file에 담아줍니다. Ajax 형식으로 데이터를 담아서 데이터를 보내줍니다.넘겨받은 파일에 대한 내용이 정상적으로 넘어온 걸 확인할 수 있고 해당 파일은 tmp_na

속성에 multiple을 추가해 주면 여러 파일을 추가할 수 있습니다.기존에 있던 file 부분을 주석 처리해 주세요. for 문을 통해서 파일을 받아올 겁니다.마찬가지로 기존에 append 파일 부분을 주석 처리해 줍니다. 이후 for 문을 통해서 file에 여러 파

용량이 큰 파일 첨부하기 파일은 여러 가지 있습니다. 그중에서는 작은 크기의 파일이 있고 큰 크기의 파일이 있을 수도 있습니다. 따라서 이번에는 크기 큰 파일을 제한하는 방식에 대해서 알아보겠습니다. 위와 같이 파일 용량이 큰 파일을 한번 업로드 해보겠습니다. 파일

Backend에서 확인하는 것은 당연한 거고 Frontend에서도 네트워크를 타고 넘어가기 전에 사전에 확인하는 작업도 중요한 부분이라고 할 수 있습니다. 왜냐하면 큰 파일을 첨부하면 일단 전송이 발생하기 때문에 네트워크 부하가 발생을 합니다. 해서 사전에 차단할 수

※ 예전에 회원관리에서 사용했었던 방식을 그대로 가져오면서 수정되는 부분만 추가, 삭제하였습니다.먼저 해당 게시판의 글 목록을 가져오는 부분을 해보겠습니다.현재 필자는 Board 클래스를 만들어서 해당 클래스에 맞는 작업들을 진행하고 있습니다. 크게 달라지는 부분은 없

LIKE 문 : 해당하는 문자열 찾기ex) subject LIKE % 무궁화% => 제목 칼럼에 무궁화 문자열 찾기CONCAT 문 : 문자 붙이기ex) CONCAT('a','b','c') => abcCONCAT을 사용한 이유는 SQLi을 예방하기 위해서입니다.ex) b

출 처 : https://getbootstrap.kr/docs/5.1/content/tables/!\[](https://velog.velcdn.com/images/lth97/post/2b443176-570d-4b93-91fb-1fb8e4c0771b/i

다운로드 두 코드 중에 편하신 거 사용하시면 됩니다. 다운로드 - 문제점 파일 위치 노출 특정한 사람만 다운로드하게 하려면 이렇게 하면 안 되고 파일 위치를 감춰야 합니다. 파일의 다운로드 횟수를 알 수 없다. 중간의 무슨 게이트 역할을 할 수 있는 것들을 두어서 카

파일 링크가 있는데 이걸 복사하고 로그아웃을 한 후에 주소창에 복사한 주소를 입력하면 다운로드가 바로 이루어집니다. 복사한 링크만 있다면 누구나 다운을 받을 수 있다는 거죠. 이 부분을 한번 제한하도록 해보겠습니다.회원이 아니라면 다운로드 페이지의 이동을 막고 로그인

한 사람이 반복해서 내려받거나 반복해서 글을 조회했을 때 카운팅이 계속 발생하는데 그걸 제한해 보겠습니다. 완벽하게 차단은 하지 못할 겁니다. 하지만 차단에 대한 참조 정도는 될 거라고 생각됩니다.3번 정도 2번째 파일을 내려받았는데 3->4로만 증가하고 그 이후부터는

기존에 글 쓰기 부분을 그대로 사용하였습니다.게시글 본문에 큰따옴표"", 작은따옴표 '' 가 들어가게 되면 안에 구문이 연결이 되어버려서 문법적으로 오류가 발생합니다.처음에는 \`(백 틱)으로 본문 내용을 감싸서 정상적으로 출력을 하였습니다. 그런데 생각해 보니 이번에

기존에 있던 글 쓰기 페이지를 가지고 수정하였습니다. 해당 첨부 파일을 삭제하기 위해서 삭제 버튼을 하나 추가하였습니다. 버튼을 구분하기 위해서 첨부파일의 순서 값을 주었습니다.삭제 버튼의 요소를 담아서 클릭 이벤트를 만듭니다.Ajax 통신을 하기 위해 값들을 설정하여

기존에 게시글 작성 부분을 가져와 수정하였습니다. 크게 설명할 부분이 없어서 생략하도록 하겠습니다.원래는 Frontend 부분에서 파일을 저장할 때 files 변수에 저장하려고 했는데 그렇게 하면 방식을 바꿔야 해서 배열로 받기로 하였습니다. 물론 바꾸지 않는다고 해서

board_edit.JS board_process.php 정규 표현식 때문에 밑에 코드들이 주석 처리 되어버려서 다른 방법으로 처리하였습니다. 참고 : https://carbon.now.sh/ Board Class- DB 결과 Before After 마무리 다

idx가 89번째인 게시글을 삭제해보겠습니다.다음 시간에는 드디어 게시글에 댓글을 작성해 보도록 하겠습니다.감사합니다.

댓글 - UI 게시판 테이블 필드 추가 - 댓글 수 댓글 테이블

기존에 등록 부분에 댓글 조회수를 증가시키는 부분을 추가하였습니다.댓글 class에서 가져온 list 함수를 가지고 DB에 있는 댓글 table에서 글을 가져옵니다.다음 시간에는 댓글 삭제하는 부분을 해보겠습니다.감사합니다.

Frontend board_view.js Backend comment_process.php DB Comment Class 결과 Before 현재 댓글이 2개 있습니다. After ![](https://velog.velcdn.com/images/lth97/po

댓글 수정 UI 수정 버튼에 data-comment-idx값을 넣어서 어떤 댓글을 삭제할 것인지 판단합니다. JS 수정 버튼을 눌렀을 때 등록 버튼이 수정으로 바뀌고 해당 댓글의 내용이 입력 칸으로 들어갑니다. 그리고 배경색을 넣어서 확실하게 포커스가 이동되었다는