PowerPoint 프레젠테이션

(1)

부록 . 웹 서버 구축하기

HTML5

웹 프로그래밍 입문

(

개정판

)

1

(2)

A.1 웹 서버 시스템 A.2 PHP 사용하기

A.3 데이터베이스 연결하기

(3)

A.1 웹 서버 시스템

3

(4)

웹 서버의 구축

■ 웹 서버 컴퓨터 구축



웹 서버 소프트웨어 설치 및 실행



아파치 (Apache) 웹 서버가 대표적

■ 서버 실행 프로그램



HTML5 폼을 전달받아 처리



PHP, JSP, Python 등

■ 데이터베이스 시스템



서버 측에 데이터를 저장 및 효율적 관리



MySQL, SQL, Oracle 등

(5)

웹 서버 - 클라이언트 연결 구조

5

Web Servers Web Clients

TCP/IP HTTP

Database 웹 서버 프로그램

웹 문서 HTML5, CSS JavaScript, XML PHP, Python

JSP

Web Browser HTML5, CSS,

JavaScript

URL (주소), 폼 입력 데이터

웹 문서 웹 문서,

서버 프로그램 파일 전송 (ftp 등)

(6)

PHP 작동 순서

Web Servers Web Clients

(Web Browser)

웹 서버 프로그램 (웹 페이지웹 문서 ) HTML5, CSS JavaScript

PHP, Python JSP, Javascript 파일 전송

프로그램 (ftp 등) HTML5/CSS

PHP

Web Clients (Web Browser)

URL (html) 웹페이지 방문

HTML5/CSS 결과 페이지 HTML5/CSS

결과 페이지 2 HTML5/CSS

결과 페이지 1 HTML5/CSS

URL (php) 결과 페이지 HTML5/CSS upload

(7)

A.2 PHP 사용하기

7

(8)

웹 서버 프로그래밍 언어 , PHP

■ PHP(PHP: Hypertext Preprocessor)



웹 서버 용 스크립트 언어



HTML 문서에서 <?php 와 ?> 안에 스크립트를 넣어 사용

 => PHP 스크립트가 서버에서 처리

 => 결과인 HTML 문서만 브라우저에 보여줌

<!DOCTYPE HTML>

<html>

<body>

<?php

print "<p> Hello PHP! </p>";

?>

</body>

</html>

<!DOCTYPE HTML>

<html>

<body>

<p> Hello PHP! </p>";

</body>

</html>

서버

(php)

실행 결과

(html)

(9)

■ PHP 특징



윈도우 , 유닉스 , 리눅스 OS 에 아파치 웹 서버를 설치하여 사용

 LAMP(Linux Apache MySQL PHP), WAMP(Windows Apache MyS QL PHP)



다양한 데이터베이스에 대해 사용하기 간편한 인터페이스 제공

9

<!DOCTYPE HTML>

<html>

<body>

<?php

print "<p> Hello PHP!

</p>";

print "<p> Welcome to HTML5

Web Programming 입문

</p>";

?>

</body>

</html>

<body>

<h2> PHP 예제

</h2>

<p> Hello PHP!

</p>

<p> Welcome to HTML5 Web

Programming 입문 </p>

</body>

(10)

PHP 시작하기 : 함수 , 변수

■ 함수

■ 변수 : $ 변수명

<html>

<body>

<?php

$week_day = date("D");

print "<strong> Today is $week_day.. </strong><br/>";

if ($week_day == "Fri")

print "[$week_day] Have a nice weekend!";

elseif ($week_day == "Sun")

print "[$week_day] Have a nice Sunday!";

else

print "[$week_day] Have a nice day!";

?>

</body>

</html>

<body>

<strong> Today is $week_day..

</strong><br/>

[Wed] Have a nice day!

$week_day =

“Wed”

(11)

간략한 PHP 문법

11

■ 주석 : // 혹은 /* … */

■ 출력 : print 혹은 echo

■ 변수



$ 를 붙여 변수로 사용 .



$variable_name

■ 데이터 타입



Boolean, Integer, Floating point, 문자열 ("abcdef” 혹은 'abcdef

‘)



문자열 붙이기 : . 연산자 ( 점 연산자 ), "abc"."def"  "abcd

ef"

■ 제어문 ( 선택문 , 반복문 )

 if, switch, whie, for 문 제공 됨

 C, Java 문법과 유사

(12)

간략한 PHP 문법

■ 함수 정의

function 함수이름 ( 매개변수 ) {

…

함수 정의 ;

return ( 반환값 );

}

■ 폼 입력 값



$_GET, $_POST 배열로 전달 받음

■ 배열



$arr = array();



$arr[] = "apple"; $arr[] = "grape"; $arr[] = "melon";



$arr = array("apple", "grape", "melon");

(13)

PHP 로 폼 다루기

13 Web Servers

웹 서버 프로그램 (웹 페이지웹 문서 ) HTML5, CSS JavaScript

**.PHP

Web Clients

URL (html)

웹페이지 (HTML5/CSS)

…

…<form action=“…/…/**.php” method=“…” >

…

</form>

…

결과 페이지 HTML5/CSS 결과 페이지

HTML5/CSS URL (../../**.php)

폼 입력 데이터 (GET방식 혹은 POST 방식)

(14)

PHP 로 폼 다루기 (1)

■ <form> 에서 action, method 속성



예 , <form action="formexample.php" method="GET">



변수명은 name 속성값

 GET 메소드의 경우 : $_GET[" 변수명 "]

 POST 메소드의 경우 : $_POST[" 변수명 "]

<body>

유형 선택 :

<input type="radio" name="kind" value="news">구글 뉴스 <input type="radio" name="kind" value="blog">네이버 블로그

키워드 입력 :

</form>

</body>

http://webclass.me/html5_2e/appendix/formexa mple.php?kind=search&keyword=%EB

%B0%95%EC%A7%80%EC...

kind=sear ch keyword=“박지

성”

formexample1.html

(15)

15

<?php

$k = $_GET["kind"];

$w = $_GET["keyword"];

?>

<p> 키워드 (keyword)는 [ <?php print $w; ?> ] 입니다.</p>

<?php

if ($k=="news")

$result_url = "'http://www.google.co.kr/search?tbm=nws&q=$w'";

elseif ($k=="blog")

$result_url = "'http://section.blog.naver.com/sub/SearchBlog.nhn?

option.keyword=$w'";

elseif ($k=="search")

$result_url = "'http://search.naver.com/search.naver?query=$w'";

?>

window.open(<?php print $result_url;?>);

</script>

formexample1.php

다음 슬라이드

(16)

<?php

$k = $_GET["kind"];

$w = $_GET["keyword"];

?>

<p> 키워드 (keyword)는 [ <?php print $w; ?> ] 입니다.</p>

<?php

if ($k=="news")

$result_url = "'http://www.google.co.kr/search?tbm=nws&q=$w'";

elseif ($k=="blog")

$result_url = "'http://section.blog.naver.com/sub/SearchBlog.nhn?

option.keyword=$w'";

elseif ($k=="search")

$result_url = "'http://search.naver.com/search.naver?query=$w'";

?>

window.open(<?php print $result_url; ?>);

</script>

window.open('http://search.naver.com/search.naver?

query=$w'");

formexample1.php (

계속

)

(17)

PHP 로 폼 다루기 (2)

17

대출 도서관 선택:

<label> <input type="checkbox" name="seoul">서울도서관</label>

<label> <input type="checkbox" name="cheonan">천안도서관 </label>

<label> <input type="checkbox" name="jeju">제주도서관</label>

대출 기간 선택:

</select> <br><br>

대출 시작 날짜:

대출 시작 시간:

포장 색상 선택:

</form>

http://webclass.me/.../appendix/formexamp le2.php?

seoul=on&cheonan=on&duration=4week&

date=2017-04-19&time=14%3A00&color=

%23ff8080

seoul=on&cheonan

=on

duration=4wee k

date=2017-04- 19

…

formexample2.html

(18)

<?php

$period = $_GET["duration"];

$d = $_GET["date"];

$t = $_GET["time"];

$c = $_GET["color"];

?>

대출 요청 도서관:

<?php

if ($_GET["seoul"]=="on") print "서울도서관 ";

if ($_GET["cheonan"]=="on") print "천안도서관 ";

if ($_GET["jeju"]=="on") print "제주도서관 ";

?>

<br>

대출 요청 기간 : <?php print $period;?> <br>

대출 시작 날짜 : <?php print $d;?> <br>

대출 시작 시간 : <?php print $t;?> <br>

포장 색상 요청 : <?php print $c;?>

대출 요청 도서관: 서울도서관 천안도서관

<br>

대출 요청 기간: 4week <br>

대출 시작 날짜: 2017-04-19 <br>

대출 시작 시간: 14:00 <br>

포장 색상 요청: #ff8080

seoul=on&cheonan=

on&

duration=4week&

date=2017-04-19&

time=14%3A00&

color=%23ff8080

formexample2.php

(19)

보충 - 폼 (3)

19

대출 도서관 선택:

<label> <input type="checkbox" name="place[]" value="seoul">서울도서관

</label>

<label> <input type="checkbox" name="place[]" value="jeju">제주도서관

</label> <br><br>

대출 기간 선택:

</select> <br><br>

</form>

<?php

$city = $_GET["place"];

$period = $_GET["duration"];

?>

대출 요청 도서관:

<?php

for ($i=0; $i<count($city); $i++) print

$city[$i]." ";

?>

<br>

대출 요청 기간:

<?php

for ($i=0; $i<count($period); $i++) print

$period[$i]." ";

?>

formexample3.html

formexample3.php

(20)

A.3 데이터베이스 연결하기

(21)

SQL 문

■ 데이터베이스를 다루기 위한 언어



데이터베이스 생성 , 테이블 생성 , 테이블에 레코드 읽기 , 저장 , 변경 등을 수행

■ query ( 질의 )



SQL 문으로 기술된 데이터베이스에 대한 요청

 예 , 이미 생성된 데이터베이스 테이블에 레코드 삽입 및 접근



테이블에 레코드 삽입 : insert

 insert into 테이블이름 ( 필드이름 1, 필드이름 2, . . .) values ( 필드 값 1, 필드값 2 . . . )



테이블에서 레코드 선택 : select

 select 필드이름 1, 필드이름 2, . . .

 select * from 테이블이름 where 조건

21

(22)

PHP 에서 MySQL 실행하기

1. MySQL 데이터베이스 연결



$db = new mysqli( 서버이름 , 사용자계정이름 , 비밀번호 , DB 이 름 );

2. 질의 (query) 요청



$result = $db->query( SQL 질의 );

■ 예 , 선호도 조사

</form>

favorate_food.html

http://webclass.me/.../.../favorate_food .php?

name=heemin&food=korean

(23)

23

<?php

$db = new mysqli("localhost", "webclass", "webclass1234", "favorate_food"); //

데이터베이스 연결

if (mysqli_connect_errno()) {

print "Error: Could not connect to database server.";

exit;

}

mysqli_set_charset($db, "utf8");

$name = $_GET["name"];

$food = $_GET["food"];

$q = "select * from vote where name = '$name'";

$result = $db->query($q);

if ($result->num_rows > 0) { // already voted, 입력한 이름으로 이미 투표했는지 확 인

print "$name has already voted!"; } else {

… }

?>

Id (정수) name ( 문 자 열)

food ( 문 자 열)

p10654 sblim korean

p11237 heemin korean p13689 itdept japanese p16579 ictconv chinese

… … …

favorate_food.php

Database : favorate_food Table : vote

name=heemi n

food=korean

(24)

<?php …

$name = $_GET["name"];

$food = $_GET["food"];

…

if ($result->num_rows > 0) { … } else {

$q = "insert into vote (name, food) values ('$name', '$food')";

$db->query($q);

print "$name voted for $food";

print "<p> 음식 선호도 조사 결과 </p>";

$result = $db->query("select * from vote");

print "<br/> 총 투표자 수 : ".$result->num_rows;

$result = $db->query("select * from vote where food = 'korean'");

print "<br/> 한식: ".$result->num_rows;

$result = $db->query("select * from vote where food = 'chinese'");

print "<br/> 중식: ".$result->num_rows;

$result = $db->query("select * from vote where food = 'japanese'");

print "<br/> 일식: ".$result->num_rows;}

?>

Id (정수) name ( 문 자 열)

food ( 문 자 열)

p10654 sblim korean

p11237 heemin korean p13689 itdept japanese p16579 ictconv chinese

… … …

favorate_food.php (

계속

)

name=heemi n

food=korean

Database : favorate_food Table : vote

PowerPoint 프레젠테이션

부록 . 웹 서버 구축하기

HTML5

(

)

목차

A.1 웹 서버 시스템 A.2 PHP 사용하기

A.3 데이터베이스 연결하기

A.1 웹 서버 시스템

웹 서버의 구축

■ 웹 서버 컴퓨터 구축





■ 서버 실행 프로그램





■ 데이터베이스 시스템





웹 서버 - 클라이언트 연결 구조

PHP 작동 순서

A.2 PHP 사용하기

웹 서버 프로그래밍 언어 , PHP

■ PHP(PHP: Hypertext Preprocessor)





 => PHP 스크립트가 서버에서 처리

 => 결과인 HTML 문서만 브라우저에 보여줌

(php)

(html)

■ PHP 특징



 LAMP(Linux Apache MySQL PHP), WAMP(Windows Apache MyS QL PHP)



PHP 시작하기 : 함수 , 변수

■ 함수

■ 변수 : $ 변수명

간략한 PHP 문법

■ 주석 : // 혹은 /* … */

■ 출력 : print 혹은 echo

■ 변수





■ 데이터 타입





ef"

■ 제어문 ( 선택문 , 반복문 )

 if, switch, whie, for 문 제공 됨

 C, Java 문법과 유사

간략한 PHP 문법

■ 함수 정의

…

■ 폼 입력 값



■ 배열







PHP 로 폼 다루기

PHP 로 폼 다루기 (1)

■ <form> 에서 action, method 속성





 GET 메소드의 경우 : $_GET[" 변수명 "]

 POST 메소드의 경우 : $_POST[" 변수명 "]

formexample1.html

formexample1.php

formexample1.php (

)

PHP 로 폼 다루기 (2)

formexample2.html

formexample2.php

보충 - 폼 (3)

formexample3.html

formexample3.php

A.3 데이터베이스 연결하기

SQL 문

■ 데이터베이스를 다루기 위한 언어

