/ WEB-HACKING

Foundation(2)

Webhacking 강좌는 여러 절로 구성되어 있습니다.

PHP , MYSQL , JS , CSS+HTML 순으로 진행하겠습니다.

PHP


PHP 원리

PHP 원리

만약 확장자가 HTML파일을 만들었다면 언제나 같은 정보를 출력하는 웹페이지를 출력한다. 그러나 확장자가 PHP가 되면 리로드할 때마다 달라지는 동적인 웹페이지 생성이 가능하다.

PHP Number & Operator

<!doctype html>
<html>
<body>
    <h1>1+1</h1>  <!-- 1 + 1 출력 -->
<?php
echo 1+1;         // 2 출력
?>
    <h1>2-1</h1>  <!-- 2 - 1 출력 -->
<?php
echo 2-1;         // 1 출력
?>
    <h1>2*2</h1>  <!-- 2 * 2 출력 -->
<?php
echo 2*2;         // 4 출력
?>
    <h1>4/2</h1>  <!-- 4 / 2 출력 -->
<?php
echo 4/2;         // 2 출력
?>
<body>
</html>

Arithmetic operator
산술적인 계산에 사용되는 연산자를 Arithmetic operator 라고 한다.

PHP String

<!DOCTYPE html>
<html>
  <body>
    <h1>String & String Operator</h1>
    <?php
echo 'Hello word';    // Hello word 출력
echo "Hello 'w'ord";  //  작은 따옴표와 큰 따옴표를 이용해 Hello 'w'ord 출력
echo "Hello \"w\"ord";  //  escape('\') 를 사용하면 일시적으로 순수한 문자로 사용가능
?>
    <h2>concatenation Operator</h2>
    <!-- 좌항과 우황의 문자열을 합치고 싶을 떄 -->
    <?php
echo "Hello "."world";  // . 을 이용해 좌항과 우항을 합칠 수 있다.
?>
    <h2>String length function</h2>
    <!-- 문자의 개수를 알고 싶을 때 -->
    <?php
echo strlen("Hello world") // 11 출력
?>
  </body>
</html>

concatenation Operator
좌항과 우황의 문자열을 합치기 위해 사용한다.

MySQL


MySQL 구조

MySQL 구조

MySQL 설치 == DateBase Server 설치 의미
MySQL 이라는 프로그램이 가지고 있는 기능성을 이용해서 데이터와 관련된 작업을 하는 것이다.

Root 계정으로 접속하고, 스키마 만들기


  1. cmd에서 명령어를 이용해 mysql 프로그램이 있는 장소로 이동

    cd C:\Bitnami\wampstack-7.4.12-0\mysql\bin

  2. 명령어를 이용해 sql을 관리자 계정을 실행

    mysql -uroot -p

  3. 관리자 비밀번호를 입력하면 접속 성공!

  4. 명령어 입력

    CREATE DATABASE opentutorials;

  5. 잘 만들어졌는지 확인하기 위해 명령어 입력

    SHOW DATABASES; DateBase 확인창

JavaScript


JavaScript의 특징
JavaScript는 사용자와 상호작용하는 언어이다.
웹 브라우저는 한번 화면에 출력되면 자신을 바꿀 수 없지만, JavaScirpt를 이용해서 JavaScirpt의 코드에 따라 속성이 추가되면서 디자인을 바꾸는 등의 효과를 줄 수 있다.

SCRIPT

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        document.write(1+1);  //  2를 출력
    </script>
    <h1>html</h1>
    1+1                      <!-- 1 + 1 출력 -->
</body>
</html>

스크립트 태그 안에 있는 코드는 JavaScript로 해석한다.

EVENT

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="hi" onclick="alert('hi')">   <!-- 'hi' 라는 버튼을 만들고 누르면 'hi' 라고 출력-->
    <!-- onclick 속성의 속성값으로는 JavaScript가 와야한다. | onclick의 속성에 속성값은 웹 브라우저가 기억하고 있다.-->
    <input type="text" onchange="alert('changed')">
    <!-- 텍스트 칸에 값을 적고 웹페이지에서 빠져 나오는 순간 메세지 출력 -->
    <input type="text" onkeydown="alert('key down')">
    <!-- 텍스트 칸에 키를 아무거나 누르면 메세지 출력 -->
</body>
</html>

Event?
웹브라우저 위에서 일어나는 일을 의미한다. (ex :: onclick, onchange, onkeydown)

Console

개발자 도구에 Console 창에서 JavaScirpt를 즉석해서 만들어서 사용이 가능하다.

콘솔 JS

JS는 이미 만들어진 사이트에서 JS를 통해 자신에게 필요에 맞는 코드를 작성해 원하는 정보를 얻을 수 있다.

END