현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)

현대고 학생들과 함께 하는 웹 개발
제 7차시~
한국디지털미디어고등학교
13기 웹 프로그래밍과 정욱재
자신의 웹 사이트 만들기

오늘 수업
자신의 아이디어가 있나?
게시판 만들기 수업 따라오기
미리 업로드 된 자료를
보면서 스스로 만들기!
+ 질문 활발히
예
아니오

스스로 만들기
구글과 GitHub 참고하면서 만들어주세요!
구글 검색관련한 부분은 검색과 관련하여 번외로 작성해놓은 부분을 참고해주세요.

스스로 만들기
중간중간에 모르는 점이 있으면 바로 불러주세요.

게시판 만들기
GitHub 와 부트스트랩 페이지 참고하면서 만들어주세요!

게시판 만들기
필요한 부분

환경
APM/LEMP 등등 웹 서버 + PHP + Mysql 서버 환경이 갖추어진 곳
기능
글 쓰기
글 조회
글 삭제
UI+
옵션
자신의 디자인 센스..?
게시판 만들기

부트스트랩은 당연!
게시판 만들기

적당히 난이도 조절
게시판 만들기

익숙해진 후 예상 시간 : 15분 정도
게시판 만들기

전체 코드 : 약 180줄
게시판 만들기

시작
index.(php|html|htm)
index.css
index.js
bootstrap*

타이틀
글 1
글 1
글 1
글쓰기 버튼

타이틀
글 1
글 1
글 1
글쓰기 버튼 버튼
네비게이션 바
점보트론
그냥 h* & p태그

타이틀
글 1
글 1
글 1
글쓰기 버튼
글쓰기 폼
글쓰기취소
글쓰기1
글쓰기2
글쓰기3

타이틀
글 1
글 1
글 1
글쓰기 버튼
글쓰기 폼
글쓰기취소
글쓰기1
글쓰기2
글쓰기3
모달
폼

시작
중간에 더 낫다고 여기는 방식이 있으면 그렇게 코딩해주세요.

시작
<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>

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<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>

시작
<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>

시작
<div class=‘container'>
<button type=‘button’ class=‘btn btn-primary btn-lg’>New Post!</button>
</div>

시작
그런데 모달이 뭐야?

시작
Modal.js 를 활용하여 대화창을 띄우는 것.
여러모로 활용될 수 있고, 많은 용도로 쓸 수 있으므로 알고 있는 것이 도움이 많이 됨.
그냥 대화창을 모달이라 생각하시는 것이 좋아요.

시작
<div class=‘container'>
<button type=‘button’ class=‘btn btn-primary btn-lg’ data-toggle="modal"
data-target="#writingModal">New Post!</button>
</div>

시작
<div class=‘modal fade’ id="writingModal" tabindex="-1" role="dialog" aria-
labelledby="writingModalLabel" aria-hidden="true">
<div class=‘modal-dialog’>
<div class=‘modal-content’>

<div class=‘modal-header’>
</div>

<div class=‘modal-body’>
</div>

<div class=‘modal-footer’>
</div>
</div>
</div>
</div>

시작
<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>

시작
<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>
<label for=‘inputAuthor’ class=‘col-sm-2 control-label’>Author</label>
<input type=‘col-sm-10’ class=‘form-control’ id=‘inputAuthor’
placeholder=‘Author’ name=‘author’>
</div>
</div>
<label for=‘inputContent’ class=‘col-sm-2 control-label’>Content</label
<input type=‘col-sm-10’ class=‘form-control’ id=‘inputContent’
placeholder=‘Content’ name=‘content’>
</div>
</div>
</div>

시작
<button type=‘button’ class=‘btn btn-default’
data-dismiss=‘modal’>Close</button>
<button type=‘submit’ class=‘btn btn-primary’>Post!</button>
</div>

시작
<button type=‘submit’ class=‘btn btn-primary’ onclick
=“javascript:document.form[‘modal-form’].onsubmit();”>Post!</button>
</div>
JS
<form name='modal-form' class="form-horizontal" method='post' action='.'>
…
… 기존 내용
</form>
</div>

시작
<button type=‘submit’ class=‘btn btn-primary’>Post!</button>
</div>
</form>
HTML
<form name='modal-form' class="form-horizontal" method='post' action='.'>
…
… 기존 내용
</div>

시작
UI 준비는 이제 거의 끝났다!

시작
뭔가 없는 것 같지 않나?

시작
글이 보일 부분을 준비하자!

시작
<div class=‘container’>

<button type=‘button’ class=‘btn btn-primary btn-lg’ data-toggle="modal"
data-target="#writingModal">New Post!</button>
<!-- Modal —>
…………
…………
</div>

시작
<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>

시작
<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가 끝났습니다.

시작
글을 쓸 수 있는 UI가 갖추어졌다! 서버로의 전송도 된다.
서버를 짜야한다!
글을 조회할 수 있는 UI가 갖추어졌다!
서버를 짜야한다!
글을 삭제할 수 있는 것은 안 갖추어졌다!
서버랑 UI 둘 다 짜야한다!

시작
글 삭제는 나중에...

시작
어떻게 넘어오나?
content
POST 전송
변수 값
글 내용
author 글쓴이
title 글 제목

시작
쿼리 문부터 만들자!
글을 DB에 넣어야 한다. => INSERT 문

시작
글을 DB에 넣어야 한다. => INSERT 문
INSERT INTO `Posting` (`no`, `title`, `date`, `content`, `author`)
VALUES (NULL, ‘…’, ‘…’, ‘…’, ‘…’);

시작
글을 DB에서 받아와야 한다. => SELECT 문

시작
SELECT * FROM `Posting` WHERE 1;
글을 DB에서 받아와야 한다. => SELECT 문

시작
MYSQL 과의 연동을 시작하자

시작
$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);

시작
……
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);

시작
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>";
}
}

시작
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;
}

시작
이제 다 동작한다!
삭제 빼고

시작
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>";
}
}

시작
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;
}

다듬기
modal 에서 textarea 의 크기를 마음대로 늘려보라
마음대로 늘어난다.

다듬기
textarea 스타일 추가 -> resize:vertical;

다듬기
X 버튼이 왜 왼쪽이지 안 이쁘다. 게다가 배경색이랑 막 이상한게 껴있다.

다듬기
X 버튼에 (button 태그) 에 스타일 추가 ->
float:right;
border:none;
background:transparent;

다듬기
빈칸체크하고 싶다!
사실 서버에서 체크해주면 상관이 없을 것 같긴하나, 사용자가 뭐 같다.

다듬기
modal form 에서 onsubmit 함수 추가

다듬기
추가 방법
window.onload = function(event) {
document.forms[‘modal-form’].onsubmit = function (event) {
// 함수코드
}
}

다듬기
추가 방법
<form … … … onsubmit=‘javascript:……’>

다듬기
추가 팁!
Form 의 onsubmit 함수에서 return false; 를 하면 submit이 취소된다!
이것을 활용하여
<form onsubmit=‘javascript:return validate(this);’>
와 같은 코드 작성가능
(이 때 validate는 적당한 값이 들어 있으면 true를, 아니면 false 를 리턴한다.)

다듬기
게시판에서 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;
}

다듬기
근데 this가 뭐야?

다듬기
자기 자신을 가리키는 변수
다른 언어에서도 활용되는 키워드이며,
많은 사용법과 난해함으로 프로그래머들의 불평을 안고 산다.
하지만 잘 쓰면 엄청 편하다!
반드시 익힐 필요는 없다.

추가자료
SELECT 문 좀 더 써보기

추가자료
검색부분만 고쳐주면 바로 구현가능

시작

<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>

시작
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);
}

현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (15)

Similar to 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)

Similar to 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트) (20)

More from Ukjae Jeong

More from Ukjae Jeong (7)

현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)