현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)
Transcript of 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)
![Page 1: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/1.jpg)
현대고 학생들과 함께 하는 웹 개발
제 7차시~
한국디지털미디어고등학교13기 웹 프로그래밍과 정욱재
자신의 웹 사이트 만들기
![Page 2: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/2.jpg)
오늘의 수업
![Page 3: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/3.jpg)
오늘 수업
자신의 아이디어가 있나?
게시판 만들기 수업 따라오기미리 업로드 된 자료를 보면서 스스로 만들기!
+ 질문 활발히
예아니오
![Page 4: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/4.jpg)
스스로 만들기
![Page 5: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/5.jpg)
스스로 만들기
구글과 GitHub 참고하면서 만들어주세요!
구글 검색관련한 부분은 검색과 관련하여 번외로 작성해놓은 부분을 참고해주세요.
![Page 6: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/6.jpg)
스스로 만들기
중간중간에 모르는 점이 있으면 바로 불러주세요.
![Page 7: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/7.jpg)
게시판 만들기
![Page 8: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/8.jpg)
게시판 만들기
GitHub 와 부트스트랩 페이지 참고하면서 만들어주세요!
![Page 9: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/9.jpg)
게시판 만들기
![Page 10: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/10.jpg)
게시판 만들기
필요한 부분
![Page 11: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/11.jpg)
환경
APM/LEMP 등등 웹 서버 + PHP + Mysql 서버 환경이 갖추어진 곳
기능
글 쓰기
글 조회
글 삭제
UI+
옵션
자신의 디자인 센스..?
게시판 만들기
![Page 12: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/12.jpg)
부트스트랩은 당연!
게시판 만들기
![Page 13: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/13.jpg)
적당히 난이도 조절
게시판 만들기
![Page 14: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/14.jpg)
익숙해진 후 예상 시간 : 15분 정도
게시판 만들기
![Page 15: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/15.jpg)
전체 코드 : 약 180줄
게시판 만들기
![Page 16: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/16.jpg)
시작
![Page 17: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/17.jpg)
시작
DB 구성
![Page 18: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/18.jpg)
시작
UI 구성
![Page 19: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/19.jpg)
시작
![Page 20: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/20.jpg)
시작
![Page 21: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/21.jpg)
시작
페이지 구성
![Page 22: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/22.jpg)
시작
index.(php|html|htm)
index.css
index.js
bootstrap*
![Page 23: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/23.jpg)
시작
UI 세부
![Page 24: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/24.jpg)
타이틀
글 1
글 1
글 1
글쓰기 버튼
![Page 25: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/25.jpg)
타이틀
글 1
글 1
글 1
글쓰기 버튼 버튼
네비게이션 바
점보트론 그냥 h* & p태그
![Page 26: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/26.jpg)
타이틀
글 1
글 1
글 1
글쓰기 버튼
글쓰기 폼
글쓰기취소
글쓰기1
글쓰기2
글쓰기3
![Page 27: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/27.jpg)
타이틀
글 1
글 1
글 1
글쓰기 버튼
글쓰기 폼
글쓰기취소
글쓰기1
글쓰기2
글쓰기3
모달
폼
![Page 28: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/28.jpg)
시작
중간에 더 낫다고 여기는 방식이 있으면 그렇게 코딩해주세요.
![Page 29: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/29.jpg)
시작
HEAD 부터!
![Page 30: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/30.jpg)
시작
<head><meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>게시판 만들기!</title>
<!-- Bootstrap core CSS================================================== --><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Bootstrap core JavaScript ================================================== -->
<script src="http://code.jquery.com/jquery-latest.min.js" type='text/javascript'></script>
<script src="js/bootstrap.min.js" type=“text/javascript"></script></head>
![Page 31: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/31.jpg)
시작
네비게이션 바!
![Page 32: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/32.jpg)
시작
<nav class='navbar navbar-default'><div class=‘container-fluid’>
<div class=‘navbar-header’><a class=‘navbar-brand’ href=‘./’>게시판</a><p class=‘navbar-text’>간단한 게시판 만들기</a>
</div></div>
</nav>
![Page 33: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/33.jpg)
시작
컨테이너는?
![Page 34: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/34.jpg)
시작
<div class=‘container'><button type=‘button’ class=‘btn btn-primary btn-lg’>New Post!</button>
</div>
![Page 35: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/35.jpg)
시작
그런데 모달이 뭐야?
![Page 36: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/36.jpg)
![Page 37: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/37.jpg)
시작
Modal.js 를 활용하여 대화창을 띄우는 것.
여러모로 활용될 수 있고, 많은 용도로 쓸 수 있으므로 알고 있는 것이 도움이 많이 됨.
그냥 대화창을 모달이라 생각하시는 것이 좋아요.
![Page 38: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/38.jpg)
시작
Modal 을 써보자
![Page 39: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/39.jpg)
시작
<div class=‘container'><button type=‘button’ class=‘btn btn-primary btn-lg’ data-toggle="modal" data-target="#writingModal">New Post!</button>
</div>
![Page 40: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/40.jpg)
시작
<div class=‘modal fade’ id="writingModal" tabindex="-1" role="dialog" aria-labelledby="writingModalLabel" aria-hidden="true">
<div class=‘modal-dialog’><div class=‘modal-content’>
<!-- Modal Head --><div class=‘modal-header’></div>
<!-- Modal Body --><div class=‘modal-body’></div>
<!-- Modal Foot --><div class=‘modal-footer’></div>
</div></div>
</div>
![Page 41: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/41.jpg)
시작
<div class=‘modal-header’><button type=‘button’ class=‘close’ data-dismiss=‘modal’ aria-label=‘Close’><span aria-hidden=‘true’>×</span></button><h4 class=‘modal-title’ id=‘writingModalLabel’>Writing New Post!</h4>
</div>
![Page 42: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/42.jpg)
시작
<div class=‘modal-body’><div class=‘modal-form-group’>
<label for=‘inputTitle’ class=‘col-sm-2 control-label’>Title</label><div class=‘col-sm-10’>
<input type=‘col-sm-10’ class=‘form-control’ id=‘inputTitle’ placeholder=‘Title’ name=‘title’>
</div></div><div class=‘modal-form-group’>
<label for=‘inputAuthor’ class=‘col-sm-2 control-label’>Author</label><div class=‘col-sm-10’>
<input type=‘col-sm-10’ class=‘form-control’ id=‘inputAuthor’ placeholder=‘Author’ name=‘author’>
</div></div><div class=‘modal-form-group’>
<label for=‘inputContent’ class=‘col-sm-2 control-label’>Content</label><div class=‘col-sm-10’>
<input type=‘col-sm-10’ class=‘form-control’ id=‘inputContent’ placeholder=‘Content’ name=‘content’>
</div></div>
</div>
![Page 43: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/43.jpg)
시작
<div class=‘modal-footer’><button type=‘button’ class=‘btn btn-default’
data-dismiss=‘modal’>Close</button><button type=‘submit’ class=‘btn btn-primary’>Post!</button>
</div>
![Page 44: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/44.jpg)
시작
vsJS Html
![Page 45: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/45.jpg)
시작
<div class=‘modal-footer’><button type=‘button’ class=‘btn btn-default’
data-dismiss=‘modal’>Close</button><button type=‘submit’ class=‘btn btn-primary’ onclick =“javascript:document.form[‘modal-form’].onsubmit();”>Post!</button>
</div>
JS
<div class=‘modal-body’><form name='modal-form' class="form-horizontal" method='post' action='.'>
…… 기존 내용
</form></div>
![Page 46: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/46.jpg)
시작
<div class=‘modal-footer’><button type=‘button’ class=‘btn btn-default’
data-dismiss=‘modal’>Close</button><button type=‘submit’ class=‘btn btn-primary’>Post!</button>
</div></form>
HTML
<form name='modal-form' class="form-horizontal" method='post' action='.'><div class=‘modal-body’>
…… 기존 내용
</div>
![Page 47: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/47.jpg)
시작
UI 준비는 이제 거의 끝났다!
![Page 48: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/48.jpg)
시작
뭔가 없는 것 같지 않나?
![Page 49: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/49.jpg)
시작
글이 보일 부분을 준비하자!
![Page 50: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/50.jpg)
시작
<div class=‘container’><!-- 이부분! -->
<button type=‘button’ class=‘btn btn-primary btn-lg’ data-toggle="modal" data-target="#writingModal">New Post!</button>
<!-- Modal —>……………………
</div>
![Page 51: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/51.jpg)
시작
<div><h3>테스트 게시글<small>누구누구 (2016-XX-XX)</small></h3><p>나는 누구누구 입니다. 코드 하이라이팅 힘들어요. 색 입히기 싫어요. 색 하나 하나 입히는 거 너무 힘들어요. 코드 그만 쓰고 싶어요.</p>
</div><hr><div>
<h3>테스트 게시글2<small>누구누구2 (2016-XX-XX)</small></h3><p>아무 생각하기 싫어요. 누군가 대신 발표자료 만들었으면 좋겠어요. UI만 끝났지 아직 백앤드가 많이 남았어요. 힘들어요.</p>
</div>
![Page 52: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/52.jpg)
시작
<div><h3>테스트 게시글<small>누구누구 (2016-XX-XX)</small></h3><p>나는 누구누구 입니다. 코드 하이라이팅 힘들어요. 색 입히기 싫어요. 색 하나 하나 입히는 거 너무 힘들어요. 코드 그만 쓰고 싶어요.</p>
</div><hr><div>
<h3>테스트 게시글2<small>누구누구2 (2016-XX-XX)</small></h3><p>아무 생각하기 싫어요. 누군가 대신 발표자료 만들었으면 좋겠어요. UI만 끝났지 아직 백앤드가 많이 남았어요. 힘들어요.</p>
</div>
드디어 UI가 끝났습니다.
![Page 53: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/53.jpg)
시작
중간 점검!
![Page 54: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/54.jpg)
시작
글을 쓸 수 있는 UI가 갖추어졌다! 서버로의 전송도 된다.
서버를 짜야한다!
글을 조회할 수 있는 UI가 갖추어졌다!
서버를 짜야한다!
글을 삭제할 수 있는 것은 안 갖추어졌다!
서버랑 UI 둘 다 짜야한다!
![Page 55: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/55.jpg)
시작
글 삭제는 나중에...
![Page 56: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/56.jpg)
시작
어떻게 넘어오나?
content
POST 전송
변수 값
글 내용
author 글쓴이
title 글 제목
![Page 57: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/57.jpg)
시작
쿼리 문부터 만들자!
글을 DB에 넣어야 한다. => INSERT 문
![Page 58: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/58.jpg)
시작
쿼리 문부터 만들자!
글을 DB에 넣어야 한다. => INSERT 문
INSERT INTO `Posting` (`no`, `title`, `date`, `content`, `author`) VALUES (NULL, ‘…’, ‘…’, ‘…’, ‘…’);
![Page 59: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/59.jpg)
시작
쿼리 문부터 만들자!
글을 DB에서 받아와야 한다. => SELECT 문
![Page 60: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/60.jpg)
시작
쿼리 문부터 만들자!
SELECT * FROM `Posting` WHERE 1;
글을 DB에서 받아와야 한다. => SELECT 문
![Page 61: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/61.jpg)
시작
MYSQL 과의 연동을 시작하자
![Page 62: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/62.jpg)
시작
$host = "localhost";$id = “UserId";$pw = “UserPw";$db = “DB_NAME";
$connection = mysqli_connect($host, $id, $pw, $db);
// if there is an error, die;if(mysqli_connect_errno()) {
die("db connection error : ".mysqli_connect_errno());}
// mysql 로직
mysqli_close($connection);
![Page 63: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/63.jpg)
시작
글 받아오기
![Page 64: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/64.jpg)
시작
……if(mysqli_connect_errno()) {
die("db connection error : ".mysqli_connect_errno());}
// mysql 로직// 글 받아오기$posts = array();
if($queryResults = mysqli_query($connection, "SELECT * FROM `Posting` WHERE 1;")) {
while($row = mysqli_fetch_assoc($queryResults)) {array_push($posts, $row);
}mysqli_free_result($queryResults);
}
mysqli_close($connection);
![Page 65: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/65.jpg)
시작
foreach($posts as $index => $val) {echo "<div>";echo "<h3>".$val['title']." <small>".$val['author']." (".$val['date'].")</small></h3>";echo "<p>".$val['content']."</p>";echo “</div>";
if($index < count($posts) - 1) {echo "<hr>";
}}
![Page 66: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/66.jpg)
시작
글 쓰기
![Page 67: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/67.jpg)
시작
if(($content = @$_POST['content'])&& ($author = @$_POST['author'])&& ($title = @$_POST['title'])) {$query = sprintf("INSERT INTO `Posting` (`no`, `title`, `date`,
`content`, `author`) VALUES (NULL, '%s', '%s', '%s', '%s');", mysqli_real_escape_string($connection, $title), date("Y-m-d"), mysqli_real_escape_string($connection, $content), mysqli_real_escape_string($connection, $author));
mysqli_query($connection, $query);
header("Refresh:0;");die;
}
![Page 68: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/68.jpg)
시작
이제 다 동작한다!삭제 빼고
![Page 69: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/69.jpg)
시작
삭제 UI부터
![Page 70: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/70.jpg)
시작
foreach($posts as $index => $val) {echo "<div>";echo "<h3>".$val['title']." <small>".$val['author']." (".$val['date'].")</small></h3>";echo "<p>".$val['content']."</p>";echo “</div>";
if($index < count($posts) - 1) {echo "<hr>";
}}
![Page 71: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/71.jpg)
시작
foreach($posts as $index => $val) {echo “<div>”; echo “<form action=‘.’ method=‘post’>”;echo “<input type=‘hidden’ name=‘no’ value=‘“.$val[‘no’].”’>”;echo “<button type='submit'>”;echo “<span class='glyphicon glyphicon-remove' aria-hidden=‘true’></span>”;echo “</button>”;echo "<h3>".$val['title']." <small>".$val['author']." (".$val['date'].")</small></h3>";echo “<p>".$val['content']."</p>";echo “</form>”;echo “</div>";
if($index < count($posts) - 1) {echo "<hr>";
}}
![Page 72: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/72.jpg)
시작
foreach($posts as $index => $val) {echo “<div>”; echo “<form action=‘.’ method=‘post’>”;echo “<input type=‘hidden’ name=‘no’ value=‘“.$val[‘no’].”’>”;echo “<button type='submit'>”;echo “<span class='glyphicon glyphicon-remove' aria-hidden=‘true’></span>”;echo “</button>”;echo "<h3>".$val['title']." <small>".$val['author']." (".$val['date'].")</small></h3>";echo “<p>".$val['content']."</p>";echo “</form>”;echo “</div>";
if($index < count($posts) - 1) {echo "<hr>";
}}
![Page 73: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/73.jpg)
시작
if(($no = @$_POST['no'])) {if(is_numeric($no)) {
$query = sprintf("DELETE FROM `Posting` WHERE `no` = %s", mysqli_real_escape_string($connection, $no));
mysqli_query($connection, $query);
header("Refresh:0;");}die;
}
![Page 74: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/74.jpg)
다듬기
![Page 75: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/75.jpg)
다듬기
modal 에서 textarea 의 크기를 마음대로 늘려보라 마음대로 늘어난다.
![Page 76: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/76.jpg)
다듬기
textarea 스타일 추가 -> resize:vertical;
![Page 77: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/77.jpg)
다듬기
X 버튼이 왜 왼쪽이지 안 이쁘다. 게다가 배경색이랑 막 이상한게 껴있다.
![Page 78: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/78.jpg)
다듬기
X 버튼에 (button 태그) 에 스타일 추가 ->float:right;border:none;background:transparent;
![Page 79: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/79.jpg)
다듬기
빈칸체크하고 싶다!
사실 서버에서 체크해주면 상관이 없을 것 같긴하나, 사용자가 뭐 같다.
![Page 80: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/80.jpg)
다듬기
modal form 에서 onsubmit 함수 추가
![Page 81: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/81.jpg)
다듬기
추가 방법
window.onload = function(event) {document.forms[‘modal-form’].onsubmit = function (event) {
// 함수코드}
}
![Page 82: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/82.jpg)
다듬기
추가 방법
<form … … … onsubmit=‘javascript:……’>
![Page 83: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/83.jpg)
다듬기
추가 팁!
Form 의 onsubmit 함수에서 return false; 를 하면 submit이 취소된다!
이것을 활용하여 <form onsubmit=‘javascript:return validate(this);’>
와 같은 코드 작성가능
(이 때 validate는 적당한 값이 들어 있으면 true를, 아니면 false 를 리턴한다.)
![Page 84: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/84.jpg)
다듬기
게시판에서 validate 함수
function validate(form) {if(form.title.value == "") {
alert('제목을 입력하지 않았습니다.');return false;
} else if(form.author.value == "") {alert(‘글쓴이을 입력하지 않았습니다.');return false;
} else if(form.content.value == "") {alert('글을 입력하지 않았습니다.');return false;
}
return true;}
![Page 85: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/85.jpg)
다듬기
근데 this가 뭐야?
![Page 86: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/86.jpg)
다듬기
자기 자신을 가리키는 변수
다른 언어에서도 활용되는 키워드이며, 많은 사용법과 난해함으로 프로그래머들의 불평을 안고 산다.
하지만 잘 쓰면 엄청 편하다!
반드시 익힐 필요는 없다.
![Page 87: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/87.jpg)
추가자료
![Page 88: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/88.jpg)
추가자료
![Page 89: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/89.jpg)
추가자료
이거 뭐요?
![Page 90: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/90.jpg)
추가자료
검색 버튼!
![Page 91: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/91.jpg)
추가자료
SELECT 문 좀 더 써보기
![Page 92: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/92.jpg)
추가자료
검색부분만 고쳐주면 바로 구현가능
![Page 93: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/93.jpg)
시작
<!-- Navigation================================================== --><nav class="navbar navbar-default">
<div class="container-fluid"><div class="navbar-header">
<a class="navbar-brand" href="./">게시판</a><p class="navbar-text">간단한 게시판 만들기!</p>
</div>
<!-- 검색 --><form class="nav navbar-nav navbar-form navbar-right"
role="search" method='get' onsubmit='javascript:return validateForSearch(this);'>
<div class="form-group"><input type="text" class="form-control" name="s"
placeholder="검색할 키워드" value="<?=@$_GET['s']?>"></div><button type="submit" class="btn btn-default">검색</button>
</form></div>
</nav>
![Page 94: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/94.jpg)
시작
if($searchKeyword = @$_GET['s']) {$searchKeyword = mysqli_real_escape_string($connection,
htmlspecialchars($searchKeyword));$query = sprintf("SELECT * FROM `Posting`
WHERE `title` LIKE '%%%s%%' OR `content` LIKE ‘%%%s%%' OR `author` LIKE '%%%s%%';",
$searchKeyword,$searchKeyword,$searchKeyword);
} else {$query = "SELECT * FROM `Posting` WHERE 1;";
}
if($queryResults = mysqli_query($connection, $query)) {
while($row = mysqli_fetch_assoc($queryResults)) {array_push($posts, $row);
}
mysqli_free_result($queryResults);
![Page 95: 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)](https://reader036.fdocument.pub/reader036/viewer/2022062302/58a94b461a28ab991c8b6ab5/html5/thumbnails/95.jpg)
시작
if($searchKeyword = @$_GET['s']) {$searchKeyword = mysqli_real_escape_string($connection,
htmlspecialchars($searchKeyword));$query = sprintf("SELECT * FROM `Posting`
WHERE `title` LIKE '%%%s%%' OR `content` LIKE ‘%%%s%%' OR `author` LIKE '%%%s%%';",
$searchKeyword,$searchKeyword,$searchKeyword);
} else {$query = "SELECT * FROM `Posting` WHERE 1;";
}
if($queryResults = mysqli_query($connection, $query)) {
while($row = mysqli_fetch_assoc($queryResults)) {array_push($posts, $row);
}
mysqli_free_result($queryResults);