Embed Size (px)
Citation preview
현대고 학생들과 함께 하는 웹 개발
제 7차시~
한국디지털미디어고등학교13기 웹 프로그래밍과 정욱재
자신의 웹 사이트 만들기
오늘의 수업
오늘 수업
자신의 아이디어가 있나?
게시판 만들기 수업 따라오기미리 업로드 된 자료를 보면서 스스로 만들기!
+ 질문 활발히
예아니오
스스로 만들기
스스로 만들기
구글과 GitHub 참고하면서 만들어주세요!
구글 검색관련한 부분은 검색과 관련하여 번외로 작성해놓은 부분을 참고해주세요.
스스로 만들기
중간중간에 모르는 점이 있으면 바로 불러주세요.
게시판 만들기
게시판 만들기
GitHub 와 부트스트랩 페이지 참고하면서 만들어주세요!
게시판 만들기
게시판 만들기
필요한 부분
환경
APM/LEMP 등등 웹 서버 + PHP + Mysql 서버 환경이 갖추어진 곳
기능
글 쓰기
글 조회
글 삭제
UI+
옵션
자신의 디자인 센스..?
게시판 만들기
부트스트랩은 당연!
게시판 만들기
적당히 난이도 조절
게시판 만들기
익숙해진 후 예상 시간 : 15분 정도
게시판 만들기
전체 코드 : 약 180줄
게시판 만들기
시작
시작
DB 구성
시작
UI 구성
시작
시작
시작
페이지 구성
시작
index.(php|html|htm)
index.css
index.js
bootstrap*
시작
UI 세부
타이틀
글 1
글 1
글 1
글쓰기 버튼
타이틀
글 1
글 1
글 1
글쓰기 버튼 버튼
네비게이션 바
점보트론 그냥 h* & p태그
타이틀
글 1
글 1
글 1
글쓰기 버튼
글쓰기 폼
글쓰기취소
글쓰기1
글쓰기2
글쓰기3
타이틀
글 1
글 1
글 1
글쓰기 버튼
글쓰기 폼
글쓰기취소
글쓰기1
글쓰기2
글쓰기3
모달
폼
시작
중간에 더 낫다고 여기는 방식이 있으면 그렇게 코딩해주세요.
시작
HEAD 부터!
시작
<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>
시작
네비게이션 바!
시작
<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 를 활용하여 대화창을 띄우는 것.
여러모로 활용될 수 있고, 많은 용도로 쓸 수 있으므로 알고 있는 것이 도움이 많이 됨.
그냥 대화창을 모달이라 생각하시는 것이 좋아요.
시작
Modal 을 써보자
시작
<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’>
<!-- Modal Head --><div class=‘modal-header’></div>
<!-- Modal Body --><div class=‘modal-body’></div>
<!-- Modal Foot --><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-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>
시작
<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>
시작
vsJS Html
시작
<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>
시작
<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>
시작
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;
}
시작
이제 다 동작한다!삭제 빼고
시작
삭제 UI부터
시작
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>";
}}
시작
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>";
}}
시작
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 문 좀 더 써보기
추가자료
검색부분만 고쳐주면 바로 구현가능
시작
<!-- 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>
시작
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);
시작
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);
![[바디랭귀지 강의 자료 1탄] 삼성전자 웃음치료 강의 자료](https://img.pdfslide.tips/doc/110x75/5574a0f6d8b42a66438b5163/-1-5574a0f6d8b42a66438b5163.jpg)
![[강의]시민이니셔티브 정보연](https://img.pdfslide.tips/doc/110x75/55a27fce1a28ab1a408b472a/-55a27fce1a28ab1a408b472a.jpg)
![[강의]_아이템 발굴_신승민](https://img.pdfslide.tips/doc/110x75/568bd9541a28ab2034a6a9a1/-568bd9541a28ab2034a6a9a1.jpg)
