Web Programming 소개

Report
인공지능 연구실





1.
2.
3.
4.
5.
Web Programming
Development tool
Language
Session, Cookie
실습
Web Programming


Homepage (Web)을 지원하는 여러 기술중에 하나
HTML만을 활용하면 정적인 모양의 홈페이지만 만들수
있음
◦ Ex) 단순한 그림과 문자만을 보여주는 홈페이지


따라서 정적인 홈페이지를 동적으로 작동할 수 있게 도
와주는 기술을 말함
현재 모든 홈페이지는 동적인 홈페이지라 판단하면 됨
Development tool






Editplus
Ultra edit
NetBeans
Eclipse
기타 등등
이번 학기 동안 사용할 Development tool은
Eclipse!

Eclipse 시작~!

Workspace 는 아래 그림과 같이..
◦ http://borame.cs.pusan.ac.kr/ai_home/lecture/java2011/e
clipse-SDK-3.6.2-win32.zip
절대 체크 하지 마세요!

D:\xampp\htdocs\학번 으로 지정해주세요!

Welcome 옆에 x 를 눌러 Welcome창을 꺼줍니다.

안 뜨는 사람도 있으니 당황하지 마세요!

PHP Plug in 설치법 – 하단에 동그라미 부분 클릭


아래쪽 클릭하여 All Available Sites 를 선택
검색에 시간이 조금 소요되니 기다립시다


아래 검색 창에 php 를 쳐서 검색하면 쉽게 php
development tool 을 찾을수 있습니다.
마찬가지로 검색에 시간이 소요되니 기다립시다


설치되는 목록을 체크만 해보시고 next 를 눌러줍
니다.
Accept 에 체크 해준 후 finish!

PHP Plug in 설치 중입니다~!

PHP Plug in 설치확인

해당 그림과 같은 그림이 나온다면 설치 완료!

APM 이란..
◦ Apache, PHP, MySQL 의 약칭
◦ 개인이 서버를 구축함에 있어 필요한 최소한의 요구사항
◦ 웹 프로그래밍을 위한 기본적인 셋팅

통합 패키지 프로그램
◦ APMSETUP 7
◦ XAMPP

금번 학기엔 XAMPP 를 사용할 것입니다.


http://www.apachefriends.org/en/xampp.ht
ml 접속 해서 직접 installer 를 받거나..
http://borame.cs.pusan.ac.kr 에 접속하여 조교
들이 올려놓은 installer 를 받으시면 됩니다.
◦ 직접 링크 >> http://borame.cs.pusan.ac.kr/ai_home/lecture/java2011/xamppwin32-1.7.4-VC6-installer.exe

현재 PC 에는 XAMPP 가 전부 설치 되어 있
으니 따로 설치하실 필요는 없습니다

하단에 XAMPP Control/Refresh 좌 클릭

해당 패널이 나오면 Apache Start !!


d:\xampp\php 폴더 안에 php.ini 를 메모장으로
엽니다~!
메모장이 열렸다면 편집(E) -> 찾기(F) 를 하여
[XDebug] 를 찾습니다. (컨트롤 F 로서 검색이 가
능합니다.)
위 화면을 찾았다면 OK

밑줄 친 문단 앞에 있는 ; 를 지워주고 나서 저장하
고 종료합니다.

이렇게 지워주셨으면 ok
zend_extension = "D:\xampp\php\ext\php_xdebug.dll"

Apache 는 재시작해주세요! (Stop -> Start)

Window->Preferences

PHP -> PHP Executables -> Add 클릭!

해당 그림과 같이 Name 과 Executable path 설정
PHP debugger 는 Xdebug 로 바꿔줍니다.
Finish 로 마무리

Debug 탭 클릭 > 해당그림과 같이 Zend Debugger를
Xdebug 로 수정해줍니다.
Apply 로 적용 후 OK~!

모든 설정이 완료 되었습니다.

수고하셨습니다♡

이제 Programming 만 남았네요~!


기본적으로 PHP 프로그래
밍할 때 디버그나 실행 시
에 Eclipse에 포함된
Internal Web Browser 가
실행됨.
IE나 다른 브라우저로 뜨
게 하고 싶다면?

상단에 File > New > PHP Project 선택

Project name 에는 하고싶은 이름으로 project 를
생성해주세요. 조교는 Test 로 생성했습니다.

Project 명 위에 우 클릭하여 New > PHP file 클릭

File Name 에 적당한 이름을 넣으신후 Finish.


해당 화면이 나왔다면 Project 생성 완료
Coding 은 다음장인 Language 를 공부하고 나서
알아봅시다.

상단에 벌레 모양을 누르게 되면 다음 창이 뜹니다.

Script 에서 Debug 를 하는 모드 입니다.

해당 창이 뜬다면 Yes 를 눌러줍니다.
◦ Debug 모드로 바꾸겠냐고 묻는 창입니다.
Line 전
체 실행
1 line 씩
진행!
Debug 창
Code 창
Script 결과 화면 출력!

중요!!!! 반드시 localhost 뒤쪽에 자신의 학번을
적어줍니다!!

아래 화면은 Webpage에 출력했을 때 입니다.

혹시 ‘객체 없음!’ 이라고 뜬다면?
Language

JavaScript
◦ 자바의 형태를 본 따서 만든 클라이언트 사이드 스크립트
언어이다.
 스크립트 언어(Script Language) - 컴퓨터 프로그래밍 언어
로서 응용 소프트웨어를 제어한다.
◦ 홈페이지를 보다 역동적으로 꾸미는데 쓰인다.
◦ HTML 안에 포함 된 언어로서 인터프리터 언어이다.
 인터프리터?
 소스 프로그램을 한번에 기계어로 변환시키는 컴파일러와는 달
리 프로그램을 한 단계씩 기계어로 해석하여 실행하는 ‘언어처리
프로그램’이다.

HTML 코드 중에 <Script
type=“text/javascript"> 와 </Script>태그를 넣
고 그 사이에 삽입
◦ Ex)
<HTML>
<HEAD>
<TITLE>자바스크립트 테스트</TITLE>
<Script type="text/javascript">
document.write("Hello World!");
</SCRIPT>
</HEAD>
<BODY></BODY>
</HTML>

JavaScript 의 변수선언은 기타 언어와 다르게 정
수, 실수, 문자열, 배열 등의 변수의 타입을 구별하
지 않고 하나의 키워드로 정의할 수 있다.
◦ Ex)
<HTML>
<HEAD>
<TITLE>자바스크립트 테스트</TITLE>
<Script type="text/javascript">
var i = 2;
var s = “string”;
document.write(“값 : "+ i + "<P>");
</SCRIPT>
</HEAD>
<BODY></BODY>
</HTML>

주석 사용
◦ Ex)
<HTML>
<HEAD>
<TITLE>자바스크립트 테스트</TITLE>
<Script type="text/javascript">
//해당 구문은 변수선언 과 그 값에 대한 출력에 대한 내용임
var i = 2;
document.write(“값 : "+ i + "<P>");
/* 이것도 주석임 */
</SCRIPT>
</HEAD>
<BODY></BODY>
</HTML>

JavaScript 의 배열
◦ 변수 선언과 마찬가지로 하나의 키워드로 선언
◦ 타입에 관계 없이 정수, 문자열, 실수 등을 하나의 배열에
담는 것이 가능
<HTML>
<HEAD>
<TITLE>자바스크립트 테스트</TITLE>
<Script type="text/javascript">
var a = new Array(4,”string”);
var b = [4,”string”];
document.write(a[0],a[1],b[0],b[1]);
</SCRIPT>
</HEAD>
<BODY></BODY>
</HTML>

함수선언 및 호출부분도 기타 언어와 마찬가지로
사용
◦ Ex) 선언
function first_func() {
var i = 1;
document.write(“값 : "+ i + "<P>");
}
호출
first_func()

PHP(Professional HTML Preprocessor)
◦ 웹 프로그램 언어
◦ 서버 프로그래밍
◦ 스크립트 언어 의 한 종류
 HTML 문서의 Header 부분에 기록하여 실제 화면에는 보이
지 않지만 내부 연산 등을 계산하는 숨어있는 언어
 응용프로그램과 독립하여 사용
 C 나 Perl 과 매우 유사
 속도 및 DB 접근속도
 PHP > JSP > ASP
 속도 및 편의성에서 타 웹 프로그램 언어보다 우수하다

PHP 스크립트 선언
◦ PHP 언어는 웹 페이지에 포함되어 사용
◦ 따라서 시작과 끝의 구분이 필요
 EX) <?php 또는 <? 로 시작하여 ?> 로 끝을 낸다.
 모든 문장의 끝에는 ; 을 사용하여 마친다.
<?
?>
echo(“Hello World”);

PHP의 주석
◦ Ex)
<?
?>

//해당 문서는 Hello World 를 출력하기 위한 문서
echo(“Hello World”);
/* 이것도 주석입니다 */
PHP의 변수
◦ PHP 의 변수선언은 JavaScript와 같이 하나의 키워드($)
로 정의할 수 있다.
◦ Ex) <?
?>
$name = “Kim”;
$Number = 54367345;
echo(“$name, $Number”);

PHP의 배열
◦ 변수 선언과 마찬가지로 하나의 키워드로 선언
◦ 타입에 관계 없이 정수, 문자열, 실수 등을 하나의 배열에
담는 것이 가능
◦ Ex) <?
?>
$Arr = Array(“String”, 1254345, 235345.4325);
echo “$Arr[0] , $Arr[1], $ Arr[2]”;

함수선언 및 호출부분도 기타 언어와 마찬가지로
사용
◦ Ex) 선언
function first_func() {
$a = 54354;
echo $a;
}
호출
first_func()

기타 언어와 마찬
가지의 방법으로
조건문과 반복문
사용


PHP는 Server에서 먼저 코드를 수행하고 브라우저
(클라이언트)로 보내준다.
따라서 PHP는 이런 방법으로도 사용할 수 있다.
<?
?>
$a = 5;
$b = '신기';
<Script type="text/javascript">
var a = <?=$a?>;
var b = '<?=$b?>' ;
</Script>
document.write(a + ", " + b);
Session,
Cookie



HTTP 프로토콜은 상태를 저장할 수 없는 프로토콜
페이지에 있는 컨트롤의 사용자 입력정보나 페이지
의 정보들이 모두 손실
동적인 웹사이트에서는 사용자의 요청이나 컨트롤
의 입력정보를 유지할 필요가 있기 때문에 상태 관
리를 할 수 있는 여러가지 기능을 제공
◦ 그러한 부분을 Session, Cookie 가 담당!

상태 정보를 클라이언트에 저장하는 방식
◦ 쿠키(Cookie)
 중요하지 않거나 가벼운 Data 를 저장하기 위해 사용하는 방식

상태 정보를 웹 서버에 저장하는 방식
◦ 세션(Session)
 보안 등의 이유로 중요한 Data 를 저장할 필요성이 있지만
Database 보다는 가벼운 Data 를 저장하기 위해 사용하는 방식

기본적으로 지정한 Data 를 저장하는 하나의 객체
◦ 사용자의 시스템에 간단한 정보를 저장해 필요할 때마다 해당정
보를 읽어오기 위하여 사용
◦ Cookie를 사용하는 가장 주된 이유는 한번 방문한 페이지의 정보
를 저장해놨다가 재방문 시 재활용하기 위함
◦ 한 Site 마다 20 개의 cookie 저장 (오버된 cookie는 시간에 따라
오래된 것 부터 삭제)
◦ 전체 Site 에는 300개의 cookie 를 저장 가능
◦ 쿠키는 클라이언트 컴퓨터에 저장됨
 Win XP: %USERPROFILE%\Cookies
 Vista, 7: %USERPROFILE%\AppData\Roaming\
Microsoft\Windows\Cookies
 쿠키는 특정 웹 사이트에 접속할 때 생성되는 임시 파일
 크기는 4KB 이하로 제한

쿠키의 문제점
◦ 쿠키는 웹 브라우저가 거쳐 간 웹 사이트 및 개인의 정보가 기록
◦ 개인의 사생활을 침해할 소지가 있음
◦ 보안문제를 유발하기 때문에 웹 브라우저 자체에 쿠키 거부 기능
이 있음
Ex) setcookie() 전송 예제
Ex) setcookie() 삭제 예제

Cookie와 마찬가지로 Browser 및 웹 페이지에서
지정한 Data 를 저장하는 하나의 객체!
◦ Session은 Server에 저장
◦ 클라이언트마다 1개 씩 할당
◦ 주로 회원관리에서 사용자 인증에 관련된 작업을 수행할
때 사용 (Ex) Login)
◦ 세션은 기본적으로 64비트 암호화되어서 저장
 Cookie 에 비해 자료 보안성 탁월
◦ 일정시간 (약 30분) 이 경과하거나 Browser 가 종료되는
순간 삭제
실습




2개의 page를 가지는 간단한 Web program 구현
Page 1 : JavaScript를 사용하여 학번, 이름과 전
화번호를 출력한다.
Page 2 : PHP를 사용하여 학번, 이름과 전화번호
를 출력한다.
조건
◦ 반드시 Page 1에서만 PHP로 변수를 지정하고 값을 넣을
수 있다.
◦ Page 1에서 JavaScript 부분에서는 직접 변수에 값을 할
당할 수 없다. ( ex) var a = 1234 )
◦ Page 2에서 PHP 부분에서도 직접 변수에 값을 할당할 수
없다.

Hint
◦ Page 1 의 값을 Page 2에 활용하는 데에는 Session 을 활용
◦ Next 페이지로 갈 버튼이벤트는 다음의 코드를 활용할 것
<HTML>
<HEAD>
<TITLE>Javascript With PHP</TITLE>
<Script type="text/javascript">
</Script>
</HEAD>
<BODY>
<input type="button" value="다음 페이지로"
onclick="location.href='test2.php'"/>
</BODY>
</HTML>

Page 1

Page 2

PS. 반드시 결과 화면과 동일하게 출력해야 함
Thank you ♡

similar documents