Web Programming 소개
Download
Report
Transcript Web Programming 소개
인공지능 연구실
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 ♡