More Related Content Similar to 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트) (20) More from Ukjae Jeong (7) 현대고등학교 PHP 강의 - 7,8차시 (설리번 프로젝트)1. 현대고 학생들과 함께 하는 웹 개발
제 7차시~
한국디지털미디어고등학교
13기 웹 프로그래밍과 정욱재
자신의 웹 사이트 만들기
3. 오늘 수업
자신의 아이디어가 있나?
게시판 만들기 수업 따라오기
미리 업로드 된 자료를
보면서 스스로 만들기!
+ 질문 활발히
예
아니오
11. 환경
APM/LEMP 등등 웹 서버 + PHP + Mysql 서버 환경이 갖추어진 곳
기능
글 쓰기
글 조회
글 삭제
UI+
옵션
자신의 디자인 센스..?
게시판 만들기
30. 시작
<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>
37. 시작
Modal.js 를 활용하여 대화창을 띄우는 것.
여러모로 활용될 수 있고, 많은 용도로 쓸 수 있으므로 알고 있는 것이 도움이 많이 됨.
그냥 대화창을 모달이라 생각하시는 것이 좋아요.
40. 시작
<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>
42. 시작
<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>
45. 시작
<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>
46. 시작
<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>
50. 시작
<div class=‘container’>
<!-- 이부분! -->
<button type=‘button’ class=‘btn btn-primary btn-lg’ data-toggle="modal"
data-target="#writingModal">New Post!</button>
<!-- Modal —>
…………
…………
</div>
54. 시작
글을 쓸 수 있는 UI가 갖추어졌다! 서버로의 전송도 된다.
서버를 짜야한다!
글을 조회할 수 있는 UI가 갖추어졌다!
서버를 짜야한다!
글을 삭제할 수 있는 것은 안 갖추어졌다!
서버랑 UI 둘 다 짜야한다!
58. 시작
쿼리 문부터 만들자!
글을 DB에 넣어야 한다. => INSERT 문
INSERT INTO `Posting` (`no`, `title`, `date`, `content`, `author`)
VALUES (NULL, ‘…’, ‘…’, ‘…’, ‘…’);
62. 시작
$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);
64. 시작
……
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);
65. 시작
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>";
}
}
67. 시작
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;
}
70. 시작
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>";
}
}
71. 시작
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>";
}
}
72. 시작
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>";
}
}
73. 시작
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;
}
78. 다듬기
X 버튼에 (button 태그) 에 스타일 추가 ->
float:right;
border:none;
background:transparent;
83. 다듬기
추가 팁!
Form 의 onsubmit 함수에서 return false; 를 하면 submit이 취소된다!
이것을 활용하여
<form onsubmit=‘javascript:return validate(this);’>
와 같은 코드 작성가능
(이 때 validate는 적당한 값이 들어 있으면 true를, 아니면 false 를 리턴한다.)
84. 다듬기
게시판에서 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;
}
86. 다듬기
자기 자신을 가리키는 변수
다른 언어에서도 활용되는 키워드이며,
많은 사용법과 난해함으로 프로그래머들의 불평을 안고 산다.
하지만 잘 쓰면 엄청 편하다!
반드시 익힐 필요는 없다.
93. 시작
<!-- 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>
94. 시작
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);
}
95. 시작
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);
}