[K-Shield Jr. 2기] 3.10_웹 기초 특강

강의. K-Shield Jr. 2/강의 필기

[K-Shield Jr. 2기] 3.10_웹 기초 특강

넬티아 2019. 4. 18. 08:50

728x90

케이쉴드 주니어 2기 - 3.10_웹 기초 특강

강사 : 컬처메이커스 선임연구원 염근철 연구원님
특징 : 배부르면 당황하실 수 있음.

1. 사전준비

win7.ova 가상 환경 내에서 진행
네트워크는 어댑터에 브리지, 맥 어드레스 초기화(가져올 때 네트워크 탭 고급 설정에서 엎는다.)

브라켓 : 웹 언어 편집을 위한 편집기로 웹에 능통하다.
오토셋 : mysql이 망하는 조짐이 보여 이를 대체하는 것.
그 외 간단한 .html 파일이 제공되었다.

웹 언어
서버 : ASP, JSP, PHP
클라이언트 : VBScript, JavaScript, HTML, CSS

2. HTML 5 개념 알기

[HMTL5 부가 기능]
단방향 통신 -> 양방향 통신
단방향 : 서버야 이거 줘, 이거 가져
양방향 : 동적인 동작 가능

장치 접근, 장치에 직접 접근해 동작 가능

??? : 이거 HTML 5 기능이야! = 오타쿠 소리 듣죠?

3. 오전. 웹 구축 실습 - 프론트 엔드 설계하기

다음은 가상 환경에서 진행한 브라켓 시작 화면이다. 번개 표시는 크롬을 사전 설치했을 때 코딩 상황이 즉각 반영되어 한 번에 능동적인 코딩이 가능하다. 이러한 편집기가 필요한 이유는 디버깅, 새로고침 불편 등이 있다.

html은 태그들로만 구분하고 브라우저에서는 해석하지 않는다.

난 오토셋 설치 중 에러가 났는데 설치 충돌이 일어나서 작업 관리자로 종료 후 재설치하니 되었다. NT 서비스에 등록하고 제어에서 홈 디렉터리로 이동하면 index.php가 있다.

오토셋을 가지고 강사님의 컴퓨터에 접속해 위 firt.html의 상태에서 주어진 소스와 각 태그의 설명들을 보며 실습한다.

중간에 html 태그를 설명하며 robots.txt를 알려주셨다. 이는 웹 크롤링을 위해 내가 책 집필 강의 청강 중 나온 내용이다. 사이트에 해당 경로로 인한 접근을 허용하는지 비 허용하는지 표기한다.

HTML 기본 입력 양식은 다음과 같다.

<body>
<form>
<div class="styled-input agile-styled-input-top">
 <input type="text" name="First name" required="">
<label>이메일</label>
<span></span>
</div>
</form>
</body>

웹에서는 POST와 GET 방식으로 데이터를 전달하는데 둘 중 안전한 것을 고르라고 할 때 결론부터 말하면 모두 안전하지 않다. POST는 직접 이름이 드러나고 GET은 &로 나타나지만 결국 도구로 보면 결과는 같기 때문이다.

워게임 사이트인 서니나타스에서 버프수트를 사용한다. 입력한 아이디와 패스워드는 존재하지 않는다. forward를 누르면 원래 반환되어야 하는 아이디와 패스워드가 틀렸습니다.가 아닌 다른 값을 주어 메시지 출력내용이 바뀌었다.

CSS 적용시 우선 순위. 태그 < 클래스 < 아이디

html 내에서

<style type:"text/css">
    .register-right
    {
        color:blue; <!-- 클래스 이름으로 css 설정 -->
    }
</style>

    #category2{ 
        color:red; <!-- 아이디 이름으로 css 설정 -->
    }

별도로 만들어진 css 파일을 html 파일에 적용한다.

<link href="./style.css" type="text/css" rel="stylesheet">

아래 파일에는 완성된 페에지의 소스코드가 담겨있으며 html 내에서는 이를 의미한다.

Downloads.zip

0.54MB

4. 오후. 웹 구축 실습 - 백 엔드 설계(데이터베이스)

오토셋을 통해 세트를 설치했고 원격이 가능하도록 폴더 설정을 해보자.

cmd를 열어 데이터베이스 관리를 위한 간단한 명령어를 사용해 db를 다뤄보자. DB실행파일 위치를 PATH에 등록해 놓지 않았기 때문에 설치가 된 경로로 가서 작업한다.

C:\AutoSet10\server\MariaDB10\bin

cmd를 열어 db에 접속하는데 오토셋에 mysql을 동작하고 해당 경로가 있는곳으로 cd 명령을 이용해 이동한다. mysql이 이제 동작한다.

>SELECT user(); //사용자 목록 보기
>mysql -u root -p //암호 입력 후 계정 접속, 
//mysql의 경우 초기비번이 없지만 autoset은 autoset으로 암호가 걸려있다. 오토셋 패키지는 마리아 db
>show databases; //데이터베이스 확인 
>use [db 명]; //지정 데이터베이스 접속

루트권한이 필요할 때 루트 유저로 접속하기 위해서는 autoset이 초기비밀번호이며 mysql 콘솔로 직접 접속해도 가능하다. 루트 계정의 비밀번호를 지정하는 비밀번호로 변경하기 위해 UPDATE문을 사용한다. 설정변경으로 flush를 사용한다.

UPDATE user SET password=password('새암호') WHERE user='root'; //계정암호 변경
FLUSH PRIVILEGES //설정변경 적용

접근권한이 있는 데이터베이스만 보인다. root로 들어와서 보이지 않던게 보이는 것.

새 데이터베이스를 만들고 삭제해보자. 확인은 show databases;다.

>show databases;
>create database [만들 db 명]
>drop database [삭제할 db 명] //이게 기억이 안난다면 drop the 테이블을 기억하자!!!

데이터베이스를 생성하고 삭제해봤다. 이번엔 데이터베이스 선택과 테이블을 확인한다.

>select databases(); //현재 사용중인 db 출력, 주로 외부에서 사용한다. 프롬프트에 나오므로
>use mysql; //mysql이라는 이름의 db 접속
>show tables; //테이블 목록을 출력한다.

테이블을 생성할 때는 다음의 형식을 따른다. 자료형은 int, char, varchar 등이 있고 varchar은 알맞게 데이터를 분류하는데 오버헤드가 크다는 단점이 있다. 그래서 대규모 서버에는 varchar의 가변형으로는 할 수 없다. 소규모에만 쓰인다.

create table [테이블명](
속성명 자료형 옵션,
속성명 자료형 옵션,
...);

그럼 실제로 테이블을 만들어보자.

CREATE TABLE test( //테이블 추가
idx INT(3) NOT NULL AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(30) NOT NULL,
email VARCHAR(30) NOT NULL,
phone VARCHAR(30) NOT NULL,
passwd VARCHAR(30) NOT NULL,
track VARCHAR(30) NOT NULL);

show tables; //테이블 생성 확인

INSERT INTO test(name, email, phone, passwd, track) //테이블에 값 삽입
VALUES('admin','hyun@cmcom.kr','010-1234-5678','admin','all');

select * from test;

5. 오후. 웹 구축 실습 - 백엔드 설계(php 문법)

html 코드와 섞여 작성되는 경황이 있다. <?로 시작하고 ?>로 끝난다.

<?
echo "반갑습니다.<br>";
echo "행복하지 않은 하루였나요!";
?>

php는 백엔드기때문에 브라켓의 자동 브라우저 띄우기 기능으로는 불가능하다. 오토셋의 위치에 파일을 배치하고 소스코드 저장 뒤 로컬호스트의 php파일명을 입력하면 접속된다.

개발자 도구로 코드를 보면 다음과 같이 설정되어 있다.

- php에서의 주석은 c언어의 주석과 동일하다. (한 줄 : //, 여러 줄 /* */)
- php에서 변수는 영문이나 숫자 앞에 $를 붙여 사용하며 호출시도 $를 붙인다. 변수에는 특수문자와 한글등이 사용 불가능하나 현재는 플러그인을 설치하면 한글도 사용할 수 있다.
예시) $var = 1234 echo $var

<?
$a = '자동차';
echo "<br>";
echo $a;
?>

변수가 있으니 논리연산, 산술연산이 있으며 이에 따라 조건문과 반복문도 있다. 단 유의점이 있다. 문자열을 연결할 때는 문자열 연결 연산자(.)를 사용한다.

<?
$s1 = '010';
$s2 = '1234';
$s3 = '5678';
$hp = $s1.-$s2.-$s3;
echo "<br>";
echo $hp;
?>

조건문을 달아보자. 전체적인 틀은 c언어와 유사하되 변수는 $가 붙고, 태그작성이 유용함을 알아두자.

<?
echo "<br>";
echo "<br>";
$num = 1;
if($num == 1)
{
    echo "number one!";
}
else
{
    echo "what is number?!";
}
?>

while 반복문이다. 그냥 알 수 있으니 이번엔 사진은 첨부하지 않는다.

<?
$i = 1;
while ($1<=10)
{
    echo"$i<br>";
    $i++;
}
?>

6. 오후. 웹 구축 실습 - 백엔드 설계(php)

php 코드의 문법을 알았으니 플랫폼에 백엔드를 작성해보자. 소스코드에는 ./register/regi.php 로부터 받기로 약속되어있다. 그래서 이 파일이 위치한 register 폴더 내에 php 파일을 만들어야 한다. 다음 사진 상태의 index.html에서 First name을 name으로 변경하자.

연결을 위한 php 파일을 구성한다. regi는 폴더 내에, dbo는 index.html과 같은 경로에 둔다. 아래는 연결을 위한 함수다.

<?
function connect(){
    $dbhost='127.0.0.1';
    $dbuser='root';
    $dbpw='root'; //db에서 설정한 비밀번호 적용
    $dbname='web';

    $db_link=mysqli_connect($dbhost,$dbuser,$dbpw,$dbname,3306);
    
    if(!$db_link){ //디버깅을 위한 조건문, 변수에 아무것도 들어있지 않다면 출력
        echo "DB_연결오류!!";
    }
    else{
    }
    return $db_link;
}
?>

위에서 작성한 연결함수를 include로 불러온다. 그리고 POST방식으로 각 변수에 값을 담고 연결을 시도한다. 결과확인을 위해 완료되었다면 문자를 출력한다.

<?
include "../dbo.php";
$name = $_POST['name'];
$email = $_POST['Email'];
$phone = $_POST['Phone'];
$passwd = $_POST['password'];
$track = $_POST['track'];

$db_link = connect();
echo "success!";

?>

마지막으로 sql문을 작성하고 사이트에 정보를 입력하면 수강신청 성공이라고 뜬다.

<?
include "../dbo.php";
$name = $_POST['name'];
$email = $_POST['Email'];
$phone = $_POST['Phone'];
$passwd = $_POST['password'];
$track = $_POST['track'];

$db_link = connect();
echo "success!";

$sql = "INSERT INTO test(name, email, phone, passwd, track)";
$sql .= "VALUES('$name','$email','$phone','$passwd','$track')";

if($db_link->query($sql)){
    echo "수강신청 성공!";
}
else
{
    echo "으으 살려줘";

SQL 인젝션 문제다. '#으로 아이디를 입력하고 마리아 db의 뒤 모든 것을 주석처리한다. 그럼 플래그인 123123이 나온다.