CSS(Client Side Script)

WEB Language

- WEB 서비스를 위한 Data(Hyper Text)를 생성 → HTML

- Client와 Server의 동작을 제어(동적 기능 구현)

 Client → CSS (JavaScript, VBScript, Jscript …)

 Server → SSS (ASP, PHP, JSP … )

- Database를 생성하고 제어 및 관리 → SQL(MY-SQL, MS-SQL, ORACLE … )

• WEB Language 참고

- https://www.w3schools.com/

• W3C (World Wide Web Consortium)

- 팀 버너스 리를 중심으로 1994년 설립 된 WEB을 위한 표준을 개발하고 장려하는 조직

 웹 표준과 가이드라인 개발

- https://www.w3.org/

- 각 국가에 사무국을 두고 있음

 우리나라 → http://w3c.or.kr/

HTML

- Tag를 이용하여 WEB Data(Hyper Text 문서)를 생성하기 위해 사용되는 프로그래밍 언어

- HTML 기본 Tag

 http://www.w3schools.com/html/default.asp

• HTML 문서 생성

- 텍스트 편집기 또는 전용의 프로그램을 이용 함

 Notepad, 에디트 플러스(Edit Plus), 아크로 에디터(Acro Editor), 크림슨 에디터(Crimson Editor) …

- HTML 확장자

 html로 구성된 파일은 .htm 또는 .html 확장자를 사용 함

• HTML 주석

HTML 구성

- Elements(엘리먼트, 요소)

 HTML문서를 구성하는 모든 명령어(Tag) 모음

제목 문단

- Tag(태그)

 Elements의 일부로서 지정된 하나의 기능을 수행하는 명령어

 시작태그, 종료태그로 구성 됨 → 태그의 종류에 따라 종료 태그가 생략되거나 없는 경우도 있음

제목 문단

 시작 태그 → 명령의 시작 제목

제목 문단

 종료 태그 → 명령의 끝 제목

제목 문단

HTML 구성

- Attributes(어트리뷰트, 속성)

 시작 태그에서 지정하는 명령의 상세 동작을 지정하는 명령

 Tag의 동작을 상세하게 지정하는 하위 명령어의 이름

- Arguments(아규먼트, 속성값=변수)

 Attribute에 설정하는 값

HTML 기본형식

문서 형식 선언 Html 문서 시작 ------------------------------- WEB 문서의 정보 ------------------------------- 문서에 출력될 내용 ------------------------------- Html 문서 끝

HTML 실습 - 로그인 페이지

> w3school.com

HTML DOM

• HTML DOM (Document Object Model) - HTML 문서의 객체관계 또는 구조

- HTML 문서의 내용에 쉽게 접근하고 조작하기 위한 표준화된 방법

- HTML 문서를 Tree 구조로 표현 함

- JavaScript를 이용하여 DOM을 제어할 수 있음

JavaScript

- Client에서 실행되는 스크립트 언어 → WEB Browser에서 실행 됨

- Netscape사에서 Mocha라는 이름으로 개발되었다가 LiveScript로 변경됨, 차 후 Netscape 사가 Java 기술을 지원하기 시작하면서 JavaScript로 이름을 변경 함

- 객체 지향 언어

- C언어를 기반으로 개발되었으므로 C언어의 문법과 비슷 함

 대/소문자 구분

 명령의 끝을 ; 으로 지시 함 -

test site test page alert("test");

jQuery

더보기 - 모든 종류의 WEB Browser에서 동작하는 오픈소스 JavaScript 라이브러리 - DOM과 관련된 처리를 쉽게 구현할 수 있음 - 동일한 이벤트 연결을 쉽게 구현 함 - 시각적 효과를 쉽게 구현 함  플래시 대체 - https://www.w3schools.com/jquery/default.asp - jQuery 다운로드  http://www.jquery.com/ • jQuery 사용법 - 외부 링크로 라이브러리에 접근하여 사용 → CDN 호스트 사용 - 직접 다운받아서 사용

패스

ATOM Editor

더보기 - 오픈 소스 텍스트 및 소스코드 편집기 - 다양한 기능의 패키지 대부분도 무료 소프트웨어로 커뮤니티가 구축하고 유지 관리  소스코드 구문 강조, 웹 서버와 작업 소스코드 동기화, 소스코드 자동 완성 기능 등 - 다양한 프로그래밍 언어를 편리하게 개발 할 수 있는 통합 개발 환경(IDE)으로 사용할 수 있음 - 지원되는 프로그래밍 언어  C / C++ / JAVA / Python / C# / JavaScript / PHP 등

패스

비주얼스튜디오 코드, sftp 확장 - 설치

1. vsftpd 설치

[root@localhost html]# yum install vsftpd

[root@localhost html]# service vsftpd restart vsftpd 종료 중: [실패] vsftpd에 대한 vsftpd을 시작 중: [ OK ]

2. vsftpd root 허용

# vim /etc/vsftpd/user_list #root <-- 주석처리

# vim /etc/vsftpd/ftpuser #root <-- 주석처리

비주얼스튜디오 코드/언어팩 설치

1. 비주얼스튜디오 코드 설치

https://code.visualstudio.com/

2. 언어팩 설치

> 확장모듈에서 korean 언어팩

비주얼스튜디오 확장모듈 - SFTP 설치

1. SFTP 확장모듈 설치 후 서버 설정

> FTP,21번

2. 업로드/다운로드 메뉴

3. html 작성

비주얼스튜디오 확장모듈 - html 작성

1) index.html

WebHackTest 로그인 회원가입 회원정보수정 게시판 웹하드 닉네임변경 로그아웃

2) login.html

로그인 아이디 : 비밀번호 :

비주얼스튜디오 확장모듈 - 로컬 <-----> 서버 코드 비교

실습

WAS

WEB(Apache) <----> WAS(PHP) <----> DBMS(MYSQL)

사용자 - 웹서버에 파일을 요청

웹 서버 - 요청받은 파일이 HTML인 경우 파일의 내용을 읽어서 응답

요청받은 파일이 PHP인 경우 PHP 모듈이 파싱(실행)한 다음 결과를 웹서버가 사용자에게 전달함

PHP 모듈은 파싱 시 출력 결과물을 생성하는데, 생성된 결과물을 웹서버에 전달한다

PHP에서 변수의 이름은 $으로 시작한다.

APM 설치

[root@localhost ~]# yum install httpd php php-mysql mysql-server

[root@localhost ~]# chkconfig --level 5 httpd on //부팅 시 서비스 자동실행 [root@localhost ~]# chkconfig --level 5 mysqld on

mysql> update user set password=password("P@ssw0rd") where user='root'; //암호설정

index.html 생성

// doctype을 명시하지않으면 기본 html test site test page

mysql_connect.php(mysql 접속) 생성

# PHP에서 변수의 이름은 $로 시작함 "; $connect = mysql_connect("localhost","root","P@ssw0rd"); //mysql 로그인 함수사용 if($connect) //connect 값으로 조건비교 { echo "연결 성공!"; } else { echo "연결 실패!"; } echo $connect; mysql_close($connect); //연결해제 ?>

> mysql_connect("localhost","root","P@ssw0rd");

: 인자로 전달한 호스트에 있는 mysqld에 접속하며 접속시 계정명과 비밀번호 값으로 인증을 수행한다.

: 접속 성공시 리소스ID 숫자를 반환, 접속 실패 시 NULL 반환함

: 결과값으로 조건비교시 리소스 ID는 참, NULL은 거짓

http://www.poopoo.com/mysql_connect.php

mysql_create_db.php(데이터베이스 생성) 생성

▼

mysql> show databases -> ; +--------------------+ | Database | +--------------------+ | information_schema | | example | <--- example DB가 생성되었다. | mysql | | test | +--------------------+

▼

- 다시한번 생성요청

> 이미 DB가 생성되어있으므로 실패

mysql_query.php(테이블 생성) 생성

vim mysql_query.php

> php 구문 오류 찾기( php -l )

[root@localhost html]# php -l mysql_query.php PHP Parse error: syntax error, unexpected T_EXIT in mysql_query.php on line 6 Errors parsing mysql_query.php

▼

mysql> show tables; +-------------------+ | Tables_in_example | +-------------------+ | account | +-------------------+

mysql_query_insert.php(데이터 입력) 생성

[root@localhost html]# cp mysql_query.php mysql_query_insert.php

▼

mysql> select * from account; +----+------+----------+ | no | id | pass | +----+------+----------+ | 1 | test | qwer1234 | +----+------+----------+

- 재실행

> 중복되는 ID가 있으므로 생성 실패

mysql_query_insert.php(SELECT문) 생성

# vim mysql_query_select.php

> 제대로 나오지 않는다.

* PHP에서 mysql에 select query 요청하면 메모리에 저장하고난 다음

저장된 곳에서 접근 할 수 있는 식별 값(여기선 #3)을 반환한다.

- 때문에 함수를 하나 더 써야한다.

* mysql_fetch_array

> mysql_fetch_array의 전달인자로 식별값을 전달하면

select의 결과 중 첫번째의 레코드를 읽어서 컬럼 단위로 잘라서 배열형태로 저장함

ex)

mysql> select * from account; +----+-------+----------+ | no | id | pass | +----+-------+----------+ | 1 | test | qwer1234 | | 2 | test2 | 1234 | +----+-------+----------+

$return = #3;

$result = mysql_fetch_array(#3);

> 컬럼단위로 자른다.

+----+-------+----------+ | no | id | pass | +----+-------+----------+

| 1 | test | qwer1234 |

| 2 | test2 | 1234 |

* 최종

"; echo "id : ".$result["id"].""; echo "pass : ".$result["pass"].""; mysql_close(); ?>

* 다음 컬럼을 읽어오고 싶으면 echo를 복사해서 이어붙이면 된다.

...생략 echo "no : ".$result["no"].""; echo "id : ".$result["id"].""; echo "pass : ".$result["pass"].""; echo "no : ".$result["no"].""; echo "id : ".$result["id"].""; echo "pass : ".$result["pass"].""; echo "no : ".$result["no"].""; echo "id : ".$result["id"].""; echo "pass : ".$result["pass"].""; ...

mysql_query문 실습

php : mysql_test.php

mysql> use test;

mysql> create table test_tb ( -> no int auto_increment primary key, -> id char(20), -> name char(20), -> age int );

mysql> insert into test_tb set id='test',name='테스트',age=20;

"; echo "id : ".$result["id"].""; echo "name : ".$result["name"].""; /* 접속을 해제한다.*/ mysql_close(); ?>

from http://girrr.tistory.com/56 by ccl(A) rewrite - 2020-03-24 09:54:08