생활코딩

Coding Everybody

코스 전체목록

닫기

라이브러리 2 (타인의 것 사용하기, tb)

트위터 브트스트랩(twitter bootstrap)을 이용해서 타인이 만든 라이브러리를 사용하는 방법을 알아보겠습니다.

홈페이지 및 다운로드

라이브러리 3-1

라이브러리 3-2

라이브러리 3-3

라이브러리 3-4

라이브러리 3-5

 소스코드

index.php

<?php
require("config/config.php");
require("lib/db.php");
$conn = db_init($config["host"], $config["duser"], $config["dpw"], $config["dname"]);
$result = mysqli_query($conn, "SELECT * FROM topic");
?>
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <link rel="stylesheet" type="text/css" href="http://localhost/style.css">

  <link href="http://localhost/bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="target">
  <div class="container">

    <header class="jumbotron text-center">
      <img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" alt="생활코딩" class="img-circle" id="logo">
  		<h1><a href="http://localhost/index.php">JavaScript</a></h1>
    </header>
    <div class="row">

        <nav class="col-md-3">
          <ol class="nav nav-pills nav-stacked">
          <?php
          while( $row = mysqli_fetch_assoc($result)){
            echo '<li><a href="http://localhost/index.php?id='.$row['id'].'">'.htmlspecialchars($row['title']).'</a></li>'."\n";
          }
          ?>
          </ ol>
        </nav>
        <div class="col-md-9">

          <article>
          <?php
          if(empty($_GET['id']) === false ) {
              $sql = "SELECT topic.id,title,name,description FROM topic LEFT JOIN user ON topic.author = user.id WHERE topic.id=".$_GET['id'];
              $result = mysqli_query($conn, $sql);
              $row = mysqli_fetch_assoc($result);
              echo '<h2>'.htmlspecialchars($row['title']).'</h2>';
              echo '<p>'.htmlspecialchars($row['name']).'</p>';
              echo strip_tags($row['description'], '<a><h1><h2><h3><h4><h5><ul><ol><li>');
          }
          ?>
          </article>
          <hr>
          <div id="control">
            <div class="btn-group" role="group" aria-label="...">
              <input type="button" value="white" onclick="document.getElementById('target').className='white'" class="btn btn-default  btn-lg"/>
              <input type="button" value="black" onclick="document.getElementById('target').className='black'" class="btn btn-default btn-lg"/>
            </div>
            <a href="http://localhost/write.php" class="btn btn-success  btn-lg">쓰기</a>
          </div>
        </div>
    </div>




  </div>


  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://localhost/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
</body>
</html>

write.php

<?php
require("config/config.php");
require("lib/db.php");
$conn = db_init($config["host"], $config["duser"], $config["dpw"], $config["dname"]);
$result = mysqli_query($conn, "SELECT * FROM topic");
?>
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <link rel="stylesheet" type="text/css" href="http://localhost/style.css">

  <link href="http://localhost/bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="target">
  <div class="container">

    <header class="jumbotron text-center">
      <img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" alt="생활코딩" class="img-circle" id="logo">
  		<h1><a href="http://localhost/index.php">JavaScript</a></h1>
    </header>
    <div class="row">

        <nav class="col-md-3">
          <ol class="nav nav-pills nav-stacked">
          <?php
          while( $row = mysqli_fetch_assoc($result)){
            echo '<li><a href="http://localhost/index.php?id='.$row['id'].'">'.htmlspecialchars($row['title']).'</a></li>'."\n";
          }
          ?>
          </ ol>
        </nav>
        <div class="col-md-9">

          <article>
            <form action="process.php" method="post">

              <div class="form-group">
                <label for="form-title">제목</label>
                <input type="text" class="form-control" name="title" id="form-title" placeholder="제목을 적어주세요.">
              </div>

              <div class="form-group">
                <label for="form-author">작성자</label>
                <input type="text" class="form-control" name="author" id="form-author" placeholder="작성자를 적어주세요.">
              </div>

              <div class="form-group">
                <label for="form-author">본문</label>
                <textarea class="form-control" rows="10" name="description"  id="form-author" placeholder="본문을 적어주세요."></textarea>
              </div>

              <input type="submit" name="name" class="btn btn-default  btn-lg">
            </form>
          </article>
          <hr>
          <div id="control">
            <div class="btn-group" role="group" aria-label="...">
              <input type="button" value="white" onclick="document.getElementById('target').className='white'" class="btn btn-default  btn-lg"/>
              <input type="button" value="black" onclick="document.getElementById('target').className='black'" class="btn btn-default btn-lg"/>
            </div>
            <a href="http://localhost/write.php" class="btn btn-success  btn-lg">쓰기</a>
          </div>
        </div>
    </div>
  </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://localhost/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
</body>
</html>

process.php

<?php
require("config/config.php");
require("lib/db.php");
$conn = db_init($config["host"], $config["duser"], $config["dpw"], $config["dname"]);
$sql = "SELECT * FROM user WHERE name='".$_POST['author']."'";
$result  = mysqli_query($conn, $sql);
if($result->num_rows == 0){
  $sql = "INSERT INTO user (name, password) VALUES('".$_POST['author']."', '111111')";
  mysqli_query($conn, $sql);
  $user_id = mysqli_insert_id($conn);
} else {
  $row = mysqli_fetch_assoc($result);
  $user_id = $row['id'];
}
$sql = "INSERT INTO topic (title,description,author,created) VALUES('".$_POST['title']."', '".$_POST['description']."', '".$user_id."', now())";
$result = mysqli_query($conn, $sql);
header('Location: http://localhost/index.php');
?>

style.css

body.white{
  background-color:white;
  color:black;
}
body.black{
  background-color:black;
  color:white;
}
#logo {
  width:100px;
}
.container{
  padding-top:20px;
}
#control{
  margin-bottom:40px;
}

소스코드

github 

댓글

댓글 본문
작성자
비밀번호
  1. 0=2
    이고잉 선생님
    정말 좋은 강의
    멋진 강의 감사드립니다.
    회사 때려치고 새출발을 생활코딩과 함께하고 있습니다.
    대학교때 이론도 모르고 맨땅에 헤딩식으로 하던게
    다시 기억도 나고 그때 헤매던 부분들이 떠오르기도 합니다.

    정말 명품강의입니다.
    감사합니다.
  2. egoing
    뒤에서 경로에 대해서 언급이 있습니다~
    대화보기
    • 늘감사
      늘 좋은 강의 감사히 듣고 있습니다.
      한가지 제안드리고 싶은 점은 모든 소스코드 내에서 'http://localhost'를 삭제해주는 것이 좀더 바람직할 것 같습니다. (이렇게 처리해주면 다른 클라이언트 PC에서도 웹페이지가 정상적으로 로드될 수 있습니다.)
    • 가뭉
      sql에서 흐름을 놓쳤더니 라이브러리 소스를 복붙해도 페이지가 안떠서...;ㅁ; 영상강의만 봤어요.. 그래도 재밌었습니다..!!
    • 문돌이
      좋은 강의 감사합니다
    • 주재학
      너무나도 훌륭한 강의 감사합니다 :)
    • 이성진
      수강 완료!
      좋은 강의 항상 감사 드립니다~
    • handylady
      그 유명한 부트스트랩이 이런 것이었군요. 멋져요 ! :)
    • 만토리
      2016/11/29 완료
    • souLTrain
      화이팅님!
      저도 같은 현상이 있어서 해결했습니다. (이 해결방법이 맞는 방법인지는 모르겠습니다만...)

      웹 브라우져의 과거 열람페이지를 전부 삭제했습니다. (브라우져 설정화면에 있죠?)
      브라우져는 크롬입니다.
      대화보기
      • 화이팅
        css 수정하고 저장뒤 localhost/index.php 새로고침을 했는데 왜 바로 적용이 안되는걸까요..?
        한번은 css 경로를 새로 만든뒤 바꾼 경로로 수정하니까 적용이 됐었고 또 한번은 그것도 안되길래
        쓰기버튼을 눌러서 localhost/write.php 화면에 들어갔다가 다시 index.php 화면으로 들어가니까 적용이 되었어요 ㅜㅜ
        어찌어찌 해결은 됐지만 왜 저런문제가 생기는건지 모르겠네요..
      • 폭스킴
        아악~ 내 눈~ ㅎ
      • 히스토
        와.. 험난한 mysql 뒤에 이렇게 재미난 코너를 준비해두셨다니!
      • 김남진
        감사합니다
      • 김종엽
        2016.08.10 완료!
      • 라꿍차타
        오 이거예요 이거 제가 원했던거!!! 드디어 도착했네요!! 대박ㅜㅜ
        감사합니다 이고잉님 ㅠㅠ
        듣는중인데 심장이 두근거립니다!
        감사합니다!!
      • 오타가있었네요 ㅎㅎ
        대화보기
        • 저는 이상하게

          제목 텍스트칸부터 article영역에 없고 길게 밑에 배치되네요 소스도 같은데 왜 그런건지 ㅠㅠ
        • Wookiiis
          잘 보았습니다. :)
        • JustStudy
          고맙습니다 2.
        • JuHui Lee
          php 강좌중에 작성자님도 말씀해주신 건데요,
          php.ini파일에 있는 내용을 소폭 수정하셔야 합니다.
          일단 php.ini를 여시고요
          (경로는 C:\Bitnami\wampstack-5.6.21-2\php이고요
          ini라는 확장자가 안보이시면 윈도우 사용중이시라면 위쪽에 보기 메뉴 > 파일확장자 체크하시면 보입니다)
          그 파일에서 opcache를 검색하시면 그중 opcache.enable=0으로 되어있는 게 있어요.
          이 0을 1로 해주시면 변경된 정보가 바로바로 반영됩니다ㅎ
          대화보기
          • Sy Kim
            <나만의 이해> 부트스트랩이라는 것은 그냥 class="~~" 이렇게 생긴 명령어임. 다만, 예쁘거나.. 반응형 디자인이거나.. 많이 쓰는 기능을 담은 것으로.. 다른 사람들이 계속 만들어서 늘어나고 있는... 최신 웹 디자인 명령어 사전임..
          • Rhys Jung
            이번강의 보고 희망이 넘쳐나네요...ㅜㅜ
            그런데 궁금한점이
            트위터 개발자드이 부트스트랩을 만들었다는게 잘 접목이 안되네요

            개인적으로 다음강에 나오는 호스팅 업체에서 개발을 해서
            유포한다면 이해가 되겠는데...ㅜㅜ
          • 우와 대박 이번강의 정말 대박
          • 맨밥
            와 첫 강의부터 쭉 보고 있었는데 이번 강의가 제일 설렜어요ㅋㅋㅋ무엇보다 앞에서 쭉 기본적이고 본질적인 면을 배우다 이런 식의 편리함을 접하니까 느낌이 남다른 것 같습니디ㅏ!! 항상 잘 듣고 있어요 이런 강의 해주셔서 정말로 감사드려요ㅠㅠㅠㅜ
          • 초짜다
            동물사랑님 같은경우 ..강좌내용에도 있었지만

            php.ini 파일의 내용중 opcache.enable=1 을 opcache.enable=0 으로 바꾸고 아파치 재시작하면

            된다고 하네요.
          • 이주환
            2016. 04. 15.
            정독했습니다.
            라이브러리의 도움을 받는것도 많은 도움이되지요.
            저는 예전에 jquery mobile를 사용해본적이있어서 부트스트랩이 어색하지않네요 ㅎ
          • JustStudy
            고맙습니다
          • 동물사랑
            강좌 너무 잘 보고 있습니다.

            안내해 주신대로 비트나미로 PHP, 아파치 사용중입니다.


            그런데 수정된 php 내용의 업데이트가 늦게 되는 거 같습니다.

            localhost/index.php 내용은 2~3분 뒤 변경 내용이 반영이 되고,

            일반 index.html 파일을 열면 수정 후 바로 반응을 합니다.

            어떻게 해결 방법이 없을까요?
          • 트위터 부트스트랩 라이브러리는 자바스크립트와 CSS, 폰트파일들로 구성되어있습니다.
            즉, 트위터 부트스트랩 라이브러리로 디자인한다는 게 결국 CSS를 사용한다는 것이죠!

            잘 보시면, 위 예제에서
            HTML(PHP) 소스코드에는 디자인 적인 세부사항(색상, 크기, 여백 등등)이
            전혀 들어있지 않음을 알 수 있습니다(CSS에서 해주기 때문이죠!).

            개체들의 배치순서와 클래스 지정 등이 디자인 적인 요소라서 HTML에서 빠져야 한다고 생각하실 수
            있지만, 모든 디자인 작업을 CSS가 담당할 수는 없습니다.

            '설계적 디자인'(design)은 HTML이 담당하고, '심미적 디자인'(graphic art)을 CSS가 담당한다고 보시면
            조금 더 명확하지 않을까 싶습니다.

            클라이언트 입장에서 -
            HTML : 디자인(설계), 내용(정보, 데이터)
            JS : 동작
            CSS : 미적 요소

            이렇게 구분하시면 어떨까요?
            대화보기
            • 색종
              유익한 강의 항상 고맙습니다~
            • 해앵인
              감사합니다! 그런데 트위터 부트스트랩을 쓰면 전에 이고잉님이 강조하셨던 html의 정보로서의 기능이 퇴색하는 것 아닌가 하는 의문이 듭니다. css를 도입한 목적이 정보와 디자인을 분리하기 위해서였잖아요? 이번 강의를 통해 예전으로 퇴보하는 건 아닌가요? 궁금해요!
            • 김트라슈
              우오오... 동공지진입니다.... 감사합니다.
            • openarms
              Twitter Bootstrap 으로 쉽게 스타일을 지정할 수 있겠네요. 굿!
            • 티거리스
              라이브러리 강의를 듣는순간 신세계를 접하게되네요 ㅋㅋㅋ
            • ironboy
              라이브러리 들어와서는진짜 재밌네요.ㅋㅋㅋㅋ
            • 오빠는다르다
              항상감사합니다!!!
            • Moon Hee Bae
              좋은 강의 감사드립니다. ^^
            • Cherry Jeon
              와...이번 강의가 진짜 제일 재미있었어요!! ㅋㅋㅋ진찌 언제쯤 이 웹사이트를 예쁘게 꾸밀까 했는데 드디어..!! 진짜 왠만한 웹사이트 못지않게 예쁘네요 빨리 더 꾸미고 싶지만요ㅋㅋㅋ 진짜 5개 강의나 되는 긴 강의였는데도 하나도 안 지루하게 달려온거같아요!! 정말 많은 것을 배웠네요 ㅎㅎ 항상 쉽고 재미있게 가르쳐주셔서 감사합니다:)
            • dkfkcl5
              그럴싸하게 꾸미다 보니깐 정말 재미있네요^^
              '개발자는 생산성을 추구해야되기 때문에 만들어져있는 라이브러리를 적절히 이용할 줄 알아야하는 것이
              선택이 아닌 필수'라는 말에 많이 배웠습니다~~
            • SK Kim
              도장 쾅!
            • adslbna2@naver.com
              좋은강의 감사합니다
            • 남상민
              잘 봤습니다.
              여기가 최 정점인 것 같습니다!
              여러번 따라해야 익숙해질 것 같아요
              좋은강의 감사합니다.
            • googler
              제출버튼 누르면 누르고 제목이 옆에 생성되면 그거 누를때 다른사름은 못들어가고 저혼자볼수있게하려고

              <?php
              while( $row = mysqli_fetch_assoc($result)){
              echo '<li><a href="/index.php?id='.$row['id'].'">'.htmlspecialchars($row['title']).'</a></li>'."\n";
              }
              ?> 이부분에서

              <a href="/index.php?id='.$row['id'].'"> 이 제출하면 생길텐데 이안에 코드를써서 링크 누를때 비번입력하는 식으로 저혼자 보게 하려고하는데 어떻게해야할까요? 이안에 쓰는게 아니라면 방법 좀 알려주세요 ㅠㅠ
            • 안광현
              모방은 창조의 어머니. 라이브러리를 이용하고 따라하면서 빨리 실력을 쌓아야겠네요~!
            • 정민규
              와 정신 나갔던 멘탈이 다시 제자리를 찾네요~ 물을 먹여주기 보다는 오아시스까지 안내해주는
              친절한 강의 넘 감사드립니다 ^^ 이정도 컨텐츠면 중간중간 지치셨을 듯도 해서 짠하게 수업 듣고 있는
              1인입니다.
            • Hunmin Koh
              넘 재밌어요
            • 비티민C플러스
              감사합니다^.^
              날씨가 많이 쌀쌀하네요. 감기 조심하세요!!
            • soonsoobr
              어렵지만 신기하고 재밌어요~~!!!!!
            • 준맹
              너무 재밌었습니다. 좋은강의 감사드려요.
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기