[apache,mysql,php] 웹 애플리케이션 만들기 (생활코딩)

https://opentutorials.org/module/1514

https://opentutorials.org/module/1514

    

## 웹 애플리케이션 만드는 순서

    구상 - 기획 - 디자인 - 개발 - 테스트

    Start Small !

    

## 구상

## 기획

    UI 모델링

    Pencil - 오픈소스 모델링 도구

        (pencil.evolus.vn)

    PowerPoint

    

## 인터넷과 웹의 역사

    팀버너스리 - 웹을 창조

    

## 서버와 클라이언트

    웹서버 / 웹브라우저

    웹서버 : Apache, Nginx, IIS

        (앞두건이 opensource)

    bitnami : apache php mysql 한번에 설치

    http://bitnami.com/stack/wamp

    

## 윈도우에 웹서버 설치

    mysql root account pw : 1q2w3e4r

    port : 81 / 444

    http://localhost:81/index.html

        C:\Bitnami\wampstack-7.0.14-1\apache2\htdocs 내의 index.html 호출

    

    http://localhost:81/helloworld.html

    

## 서버 제어

    Apache php mysql 제어

    탑색기 - bitnami폴더 - manager-windows.exe 실행

        mysql 로그 확인 가능

        apache 세팅 가능

        

## html의 기본문법   

    C:\Bitnami\wampstack-7.0.14-1\apache2\htdocs\temp1.html

    

##  html 실습

## 개발도구

    Apatana SublimeText Brackets Atom

    

## css이론

    C:\Bitnami\wampstack-7.0.14-1\apache2\htdocs\css\temp.html

    

## css실습   

    

## JS, PHP 이론

    - javascript vs php

        php.ini > display_errors = On 으로 변경

        opcache.enable=1에서 0으로 변경

    - 기본 문법

        php : server-side 언어

        js : 웹브라우저가 해석하는 언어

    - 데이터타입과 연산자

        php "10"+"10" : 숫자(문자로하려면 .)

        js "10"+"10" : 문자

    - 디버깅(F12)

        php : C:\Bitnami\wampstack-7.0.14-1\apache2\logs\error.log

    - 변수

        php : $

    - 비교

        if(){}

    

## 데이터베이스(mySql) 이론 

     mysql monitor 

     cd /C/Bitnami/wampstack-7.0.14-1/mysql/bin 

     winpty mysql -hlocalhost -uroot -p 

     localhost : 주소 root : 접속 비밀번호 -p 이후 : password - 명령어       

## 라이브러리(bootstrap)

    http://getbootstrap.com/

    C:\Bitnami\wampstack-7.0.14-1\apache2\htdocs\bootstrap-3.3.7-dist

## 인터넷

    IP 주소 : Internet protocol address

    DNS : Domain Name System

    

    왜 안될까 ? 

        공인ip(공유기) vs 사설ip(공유기 연결된 기기들)

        IPv4 vs Ipv6(새로운 주소체계)

        1.228.248.22

        

    대부분 공유기때문...

        1.228.248.22 > 공유기 ip일듯 !

         // 컴퓨터 서버로 도달해야하는데 ... ?

          >>> 포트포워딩 !

    

    포트는 80이 기본 default !

        192.168.0.1 : 공유기 관리자

        NAT/라우터관리 > 포트포워드 설정

            1.228.248.22:83 외부

            192.168.0.3:81  내부

            

    유동IP와 DDNS

        ddns는 도메인과 호스트의 ip를 지속적으로 일치화

        특수기능 > DDNS 설정

        무료도메인 : http://freedns.afraid.org

        

## 웹호스팅 vs 서버호스팅

    서버에서 사용하는걸 제공하는 사업자

    IDC : internet data center

    웹호스팅 : 웹 애플리케이션 운영을 위한 모든것을 제공

    서버호스팅 : 컴퓨터를 제공

    

    클라우드 컴퓨팅 ?

        가상화와 종량제

    직접운영    X

    IAAS        컴퓨터 + 운영체제(linux,window)

    PAAS        컴퓨터 + 운영체제 + Platform(php,mysql,apahe)

    SAAS        컴퓨터 + 운영체제 + Platform + Software(사이트)

## 성장

    

- SQL -

show databases;
CREATE DATABASE opentutorials CHARACTER SET utf8 COLLATE utf8_general_ci;
use opentutorials;
CREATE TABLE `topic` (
		`id` int(11) NOT NULL AUTO_INCREMENT,
		  `title` varchar(100) NOT NULL,
		  `description` text NOT NULL,
		  `author` varchar(30) NOT NULL,
		  `created` datetime NOT NULL,
		  PRIMARY KEY (id)
		) ENGINE=InnoDB DEFAULT CHARSET=utf8;
		INSERT INTO `topic` (`id`, `title`, `description`, `author`, `created`) VALUES(1, 'About JavaScript', '<h3>Desctiption</h3>\r\n<p>JavaScript  is a dynamic computer programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed.</p>\r\n<p>\r\nDespite some naming, syntactic, and standard library similarities, JavaScript and Java are otherwise unrelated and have very different semantics. The syntax of JavaScript is actually derived from C, while the semantics and design are influenced by the Self and Scheme programming languages.\r\n</p>\r\n<h3>See Also</h3>\r\n<ul>\r\n  <li><a href="http://en.wikipedia.org/wiki/Dynamic_HTML">Dynamic HTML and Ajax (programming)</a></li>\r\n  <li><a href="http://en.wikipedia.org/wiki/Web_interoperability">Web interoperability</a></li>\r\n  <li><a href="http://en.wikipedia.org/wiki/Web_accessibility">Web accessibility</a></li>\r\n</ul>\r\n', 'egoing', '2015-03-31 12:14:00');
		INSERT INTO `topic` (`id`, `title`, `description`, `author`, `created`) VALUES(2, 'Variable and Constant', '<h3>Desciption</h3>\r\n\r\nIn computer programming, a variable or scalar is a storage location paired with an associated symbolic name (an identifier), which contains some known or unknown quantity or information referred to as a value. The variable name is the usual way to reference the stored value; this separation of name and content allows the name to be used independently of the exact information it represents. The identifier in computer source code can be bound to a value during run time, and the value of the variable may thus change during the course of program execution.\r\n\r\n<h3>See Also</h3>\r\n<ul>\r\n<li>Non-local variable</li>\r\n<li>Variable interpolation</li>\r\n</ul>\r\n', 'k8805', '2015-05-14 10:04:00');
		INSERT INTO `topic` (`id`, `title`, `description`, `author`, `created`) VALUES(3, 'Opeartor', '<h2>Operator</h2>\r\n<h3>Description</h3>\r\n<p>Programming languages typically support a set of operators: constructs which behave generally like functions, but which differ syntactically or semantically from usual functions</p>\r\n<p>Common simple examples include arithmetic (addition with +, comparison with >) and logical operations (such as AND or &&). </p>\r\n', 'egoing', '2015-06-18 05:00:00');
		INSERT INTO `topic` (`id`, `title`, `description`, `author`, `created`) VALUES(4, 'Conditional', '<h3>Description</h3>\r\n<p>In computer science, conditional statements, conditional expressions and conditional constructs are features of a programming language which perform different computations or actions depending on whether a programmer-specified boolean condition evaluates to true or false. Apart from the case of branch predication, this is always achieved by selectively altering the control flow based on some condition.</p>\r\n<p>In imperative programming languages, the term "conditional statement" is usually used, whereas in functional programming, the terms "conditional expression" or "conditional construct" are preferred, because these terms all have distinct meanings.</p>\r\n<h3>See Also</h3>\r\n<ul>\r\n<li><a href="http://en.wikipedia.org/wiki/Branch_(computer_science)" title="Branch (computer science)">Branch (computer science)</a></li>\r\n<li><a href="http://en.wikipedia.org/wiki/Conditional_compilation" title="Conditional compilation">Conditional compilation</a></li>\r\n<li><a href="http://en.wikipedia.org/wiki/Dynamic_dispatch" title="Dynamic dispatch">Dynamic dispatch</a> for another way to make execution choices</li>\r\n<li><a href="http://en.wikipedia.org/wiki/McCarthy_Formalism" title="McCarthy Formalism">McCarthy Formalism</a> for history and historical references</li>\r\n<li><a href="http://en.wikipedia.org/wiki/Named_condition" title="Named condition" class="mw-redirect">Named condition</a></li>\r\n<li><a href="http://en.wikipedia.org/wiki/Test_(Unix)" title="Test (Unix)">Test (Unix)</a></li>\r\n<li><a href="http://en.wikipedia.org/wiki/Yoda_conditions" title="Yoda conditions">Yoda conditions</a></li>\r\n</ul>', 'c2', '2015-07-25 00:00:00');
show tables;

- index.php -

<?php
$conn = mysqli_connect("localhost", "root", '1q2w3e4r');
mysqli_select_db($conn, "opentutorials");
$result = mysqli_query($conn, "SELECT * FROM topic");
?>
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="http://localhost:81/css/style.css">
</head>
<body id="target">
    <header>
    <img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" alt="생활코딩">
        <h1><a href="http://localhost:81/phpjs/index.php">JavaScript</a></h1>
  </header>
    <nav>
        <ol>
    <?php
    while( $row = mysqli_fetch_assoc($result)){
      echo '<li><a href="http://localhost:81/phpjs/index.php?id='.$row['id'].'">'.$row['title'].'</a></li>'."\n";
    }
    ?>
        </ol>
    </nav>
  <div id="control">
    <input type="button" value="white" onclick="document.getElementById('target').className='white'"/>
    <input type="button" value="black" onclick="document.getElementById('target').className='black'" />
    <a href="http://localhost:81/phpjs/write.php">쓰기</a>
  </div>
  <article>
  <?php
  if(empty($_GET['id']) === false ) {
      $sql = 'SELECT * FROM topic WHERE id='.$_GET['id'];
      $result = mysqli_query($conn, $sql);
      $row = mysqli_fetch_assoc($result);
      echo '<h2>'.$row['title'].'</h2>';
      echo $row['description'];
  }
  ?>
  </article>
</body>
</html>

- process.php -

<?php
$conn = mysqli_connect("localhost", "root", '1q2w3e4r');
mysqli_select_db($conn, "opentutorials");
$sql = "INSERT INTO topic (title,description,author,created) VALUES('".$_POST['title']."', '".$_POST['description']."', '".$_POST['author']."', now())";
$result = mysqli_query($conn, $sql);
header('Location: http://localhost:81/phpjs/index.php');
?>

- write.php -

<?php
$conn = mysqli_connect("localhost", "root", '1q2w3e4r');
mysqli_select_db($conn, "opentutorials");
$result = mysqli_query($conn, "SELECT * FROM topic");
?>
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="http://localhost:81/css/style.css">
</head>
<body id="target">
    <header>
    <img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" alt="생활코딩">
        <h1><a href="http://localhost:81/phpjs/index.php">JavaScript</a></h1>
  </header>
    <nav>
        <ol>
    <?php
    while( $row = mysqli_fetch_assoc($result)){
      echo '<li><a href="http://localhost:81/phpjs/index.php?id='.$row['id'].'">'.$row['title'].'</a></li>'."\n";
    }
    ?>
        </ol>
    </nav>
  <div id="control">
    <input type="button" value="white" onclick="document.getElementById('target').className='white'"/>
    <input type="button" value="black" onclick="document.getElementById('target').className='black'" />
    <a href="http://localhost:81/phpjs/write.php">쓰기</a>
  </div>
  <article>
    <form action="process.php" method="post">
      <p>
        제목 : <input type="text" name="title">
      </p>
      <p>
        작성자 : <input type="text" name="author">
      </p>
      <p>
        본문 : <textarea name="description"></textarea>
      </p>
      <input type="submit" name="name">
    </form>
  </article>
</body>
</html>

- style.css -

body.white{
  background-color:white;
  color:black;
}
body.black{
  background-color:black;
  color:white;
}
 
header{
  border-bottom:1px solid gray;
  padding:20px;
}
nav {
  border-right:1px solid gray;
  width:200px;
  height:600px;
  float:left;
}
nav ol{
  list-style:none;
  padding:0;
}
article{
  float:left;
  padding:20px;
  width:500px;
}
#control{
  float:right;
}
header img{
  float:right;
  height:100px;
}