Web Programming 소개

Web Programming 소개 인공지능 연구실

목차 • 1. Web Programming • 2. Development tool • 3. Language • 4. Session, Cookie • 5. 실습

Web Programming

Web Programming • Homepage (Web)을 지원하는 여러 기술중에 하나 • HTML만을 활용하면 정적인 모양의 홈페이지만 만들수 있음 • Ex) 단순한 그림과 문자만을 보여주는 홈페이지 • 따라서 정적인 홈페이지를 동적으로 작동할 수 있게 도와주는 기술을 말함 • 현재 모든 홈페이지는 동적인 홈페이지라 판단하면 됨

Development tool

여러가지Development tool • Editplus • Ultra edit • NetBeans • Eclipse • 기타 등등 • 이번 학기 동안 사용할 Development tool은 Eclipse!

Eclipse 의 시작! • Eclipse 시작~! • http://borame.cs.pusan.ac.kr/ai_home/lecture/java2011/eclipse-SDK-3.6.2-win32.zip • Workspace 는 아래 그림과 같이.. • D:\xampp\htdocs\학번 으로 지정해주세요! 절대 체크 하지 마세요!

Eclipse 의 시작! • Welcome 옆에 x 를 눌러 Welcome창을 꺼줍니다. • 안 뜨는 사람도 있으니 당황하지 마세요!

Eclipse 설치 과정 및 설정 (1) • PHP Plug in 설치법 – 하단에 동그라미 부분 클릭

Eclipse 설치 과정 및 설정 (2) • 아래쪽 클릭하여 All Available Sites 를 선택 • 검색에 시간이 조금 소요되니 기다립시다

Eclipse 설치 과정 및 설정 (3) • 아래 검색 창에 php를 쳐서 검색하면 쉽게 php development tool 을 찾을수 있습니다. • 마찬가지로 검색에 시간이 소요되니 기다립시다

Eclipse 설치 과정 및 설정 (4) • 설치되는 목록을 체크만 해보시고 next 를 눌러줍니다. • Accept 에 체크 해준 후 finish!

Eclipse 설치 과정 및 설정 (5) • PHP Plug in 설치 중입니다~!

Eclipse 설치 과정 및 설정 (6) • PHP Plug in 설치확인

Eclipse 설치 과정 및 설정 (7) • 해당 그림과 같은 그림이 나온다면 설치 완료!

APM Setting • APM 이란.. • Apache, PHP, MySQL 의 약칭 • 개인이 서버를 구축함에 있어 필요한 최소한의 요구사항 • 웹 프로그래밍을 위한 기본적인 셋팅 • 통합 패키지 프로그램 • APMSETUP 7 • XAMPP • 금번 학기엔 XAMPP 를 사용할 것입니다.

XAMPP 의 설치 법 • http://www.apachefriends.org/en/xampp.html접속 해서 직접 installer 를 받거나.. • http://borame.cs.pusan.ac.kr에 접속하여 조교들이 올려놓은 installer 를 받으시면 됩니다. • 직접 링크 >> http://borame.cs.pusan.ac.kr/ai_home/lecture/java2011/xampp-win32-1.7.4-VC6-installer.exe • 현재 PC 에는 XAMPP 가 전부 설치 되어 있으니 따로 설치하실 필요는 없습니다

XAMPP 사용법 • 하단에 XAMPP Control/Refresh 좌 클릭 • 해당 패널이 나오면 Apache Start !!

Eclipse 에 XAMPP 설정 및 Xdebug설정 • d:\xampp\php 폴더 안에 php.ini 를 메모장으로 엽니다~! • 메모장이 열렸다면 편집(E) -> 찾기(F) 를 하여 [XDebug] 를 찾습니다. (컨트롤 F 로서 검색이 가능합니다.) 위 화면을 찾았다면 OK

Eclipse 에 XAMPP 설정 및 Xdebug설정 • 밑줄 친 문단 앞에 있는 ; 를 지워주고 나서 저장하고 종료합니다. • 이렇게 지워주셨으면 ok • Apache 는 재시작해주세요! (Stop -> Start) zend_extension = "D:\xampp\php\ext\php_xdebug.dll"

Eclipse 에 XAMPP 설정 및 Xdebug설정 • Window->Preferences

Eclipse 에 XAMPP 설정 및 Xdebug설정 • PHP -> PHP Executables -> Add 클릭!

Eclipse 에 XAMPP 설정 및 Xdebug설정 • 해당 그림과 같이 Name 과 Executable path 설정 PHP debugger 는 Xdebug로 바꿔줍니다. Finish 로 마무리

Eclipse 에 XAMPP 설정 및 Xdebug설정 • Debug 탭 클릭 > 해당그림과 같이 Zend Debugger를 Xdebug로 수정해줍니다. Apply 로 적용 후 OK~!

Eclipse 설정 완료! • 모든 설정이 완료 되었습니다. • 수고하셨습니다♡ • 이제 Programming 만 남았네요~!

※ 참고 • 기본적으로 PHP 프로그래밍할 때 디버그나 실행 시에 Eclipse에 포함된 Internal Web Browser 가실행됨. • IE나 다른 브라우저로 뜨게 하고 싶다면?

※ 참고 (cont’)

PHP Project 를 생성해봅시다. (1) • 상단에 File > New > PHP Project 선택

PHP Project 를 생성해봅시다. (2) • Project name 에는 하고싶은 이름으로 project 를 생성해주세요. 조교는 Test 로 생성했습니다.

PHP Project 를 생성해봅시다. (3) • Project 명 위에 우 클릭하여 New > PHP file 클릭

PHP Project 를 생성해봅시다. (4) • File Name 에 적당한 이름을 넣으신후 Finish.

PHP Project 를 생성해봅시다. (4) • 해당 화면이 나왔다면 Project 생성 완료 • Coding 은 다음장인 Language 를 공부하고 나서 알아봅시다.

PHP Debug 방법! • 상단에 벌레 모양을 누르게 되면 다음 창이 뜹니다.

PHP Script Debug (1) • Script 에서 Debug 를 하는 모드 입니다. • 해당 창이 뜬다면 Yes 를 눌러줍니다. • Debug 모드로 바꾸겠냐고 묻는 창입니다.

PHP Script Debug (2) Line 전체 실행 1 line 씩 진행! Debug 창 Code 창 Script 결과 화면 출력!

PHP Web Debug (1) • 중요!!!! 반드시 localhost뒤쪽에 자신의 학번을 적어줍니다!!

PHP Web Debug (2) • 아래 화면은 Webpage에 출력했을 때 입니다.

PHP Web Debug (3) • 혹시 ‘객체 없음!’ 이라고 뜬다면?

Language

JavaScript • JavaScript • 자바의 형태를 본 따서 만든 클라이언트 사이드 스크립트 언어이다. • 스크립트 언어(Script Language) - 컴퓨터 프로그래밍 언어로서 응용 소프트웨어를 제어한다. • 홈페이지를 보다 역동적으로 꾸미는데 쓰인다. • HTML 안에 포함 된 언어로서 인터프리터 언어이다. • 인터프리터? • 소스 프로그램을 한번에 기계어로 변환시키는 컴파일러와는 달리 프로그램을 한 단계씩 기계어로 해석하여 실행하는 ‘언어처리 프로그램’이다.

JavaScript 기본 사항 (1) • 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 기본 사항 (2) • JavaScript 의 변수선언은 기타 언어와 다르게 정수, 실수, 문자열, 배열 등의 변수의 타입을 구별하지 않고 하나의 키워드로 정의할 수 있다. • Ex) <HTML> <HEAD> <TITLE>자바스크립트 테스트</TITLE> <Script type="text/javascript"> vari = 2; var s = “string”; document.write(“값 : "+ i + "<P>"); </SCRIPT> </HEAD> <BODY></BODY> </HTML>

JavaScript 기본 사항 (3) • 주석 사용 • Ex) <HTML> <HEAD> <TITLE>자바스크립트 테스트</TITLE> <Script type="text/javascript"> //해당 구문은 변수선언 과 그 값에 대한 출력에 대한 내용임 vari = 2; document.write(“값 : "+ i + "<P>"); /* 이것도 주석임 */ </SCRIPT> </HEAD> <BODY></BODY> </HTML>

JavaScript 기본 사항 (4) • 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>

JavaScript 기본 사항 (5) • 함수선언 및 호출부분도 기타 언어와 마찬가지로 사용 • Ex) 선언 호출 function first_func() { vari = 1; document.write(“값 : "+ i + "<P>"); } first_func()

PHP • PHP(Professional HTML Preprocessor) • 웹 프로그램 언어 • 서버 프로그래밍 • 스크립트 언어 의 한 종류 • HTML 문서의 Header 부분에 기록하여 실제 화면에는 보이지 않지만 내부 연산 등을 계산하는 숨어있는 언어 • 응용프로그램과 독립하여 사용 • C 나 Perl 과 매우 유사 • 속도 및 DB 접근속도 • PHP > JSP > ASP • 속도 및 편의성에서 타 웹 프로그램 언어보다 우수하다

PHP 기본사항 (1) • PHP 스크립트 선언 • PHP 언어는 웹 페이지에 포함되어 사용 • 따라서 시작과 끝의 구분이 필요 • EX) <?php또는 <? 로 시작하여 ?> 로 끝을 낸다. • 모든 문장의 끝에는 ; 을 사용하여 마친다. <? echo(“Hello World”); ?>

PHP 기본사항 (2) • PHP의 주석 • Ex) • PHP의 변수 • PHP 의 변수선언은 JavaScript와 같이 하나의 키워드($)로 정의할 수 있다. • Ex) <? //해당 문서는 Hello World 를 출력하기 위한 문서 echo(“Hello World”); /* 이것도 주석입니다 */ ?> <? $name = “Kim”; $Number = 54367345; echo(“$name, $Number”); ?>

PHP 기본사항 (3) • PHP의 배열 • 변수 선언과 마찬가지로 하나의 키워드로 선언 • 타입에 관계 없이 정수, 문자열, 실수 등을 하나의 배열에 담는 것이 가능 • Ex) • <? • $Arr = Array(“String”, 1254345, 235345.4325); • echo “$Arr[0] , $Arr[1], $ Arr[2]”; • ?>

PHP 기본사항 (4) • 함수선언 및 호출부분도 기타 언어와 마찬가지로 사용 • Ex) 선언 호출 function first_func() { $a = 54354; echo $a; } first_func()

Web Programming 소개