선생님을 위한 프로그래밍 수업

라이브러리 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-description">본문</label>
                <textarea class="form-control" rows="10" name="description"  id="form-description" 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. 안제경
    이해는 못했지만 잘봤습니다~
  2. James Hanjoo Park
    감사합니다...수고하셨습니다.
  3. 정착유목민
    긴내용이었지만 집중해서 보게 되네요.
  4. 박병진
    2020.11.26 완료. 하지만 데이터 베이스에서 저의 php코드를 가져오지 못해서 웹페이지에서 출력을 못하고 있습니다. 일단 계속 배우면서 다시 문제가 생긴 부분을 보고 고쳐나가야 겠습니다.
  5. 10/15
  6. park
    2020.10.09
  7. HyeonHui Jeong
    5/18
  8. 열심히사는사람
    완료
  9. 산노을
    감사!
  10. 엄청잘될꺼야
    감사합니다. 완료
  11. 들국화
    완료했습니다 감사합니다
  12. 셜리
    완료했습니다!...재플린과 비슷한거군요.
  13. gimpal
    <nav> 하위 <ol> tag에 class="nav nav-pills nav-stacked" 추가하기 전에는
    '\n'을 인식해서 리스트가 한 줄씩 출력이 되는데,
    클래스를 추가한 이후에는 리스트 이름이 짧은 것들은 한 줄에 두 개씩 출력이 되기도 합니다.
    요소 검사를 해서 들어가 보면, 한 줄씩 코딩이 되어있는데 왜 웹페이지 상에서는 이렇게 출력이 되는 건지
    알려주실 분 있나요?? 부트스트랩 여기저기 찾아봐도 해답을 모르겠습니다. 도와주세요!
  14. 꽁꽁
    너무 감사합니다.
  15. 제갈량
    부트스트랩의 사용법을 잘 알지는 못했는데
    확실하게 알아갑니다.
    감사합니다. ^^

    (부트스트랩 한국어 페이지가 있으니,
    영어가 안되시는 분은 참고하시길 바랍니다.)
    한국어 페이지 -> http://bootstrapk.com/
  16. 난쏘공
    부트스트랩 활용하는거 사이다네요ㅎㅎ
  17. hodduck0121
    감사합니다. 어렵네요..
  18. 슝태
    20180119
  19. PassionOfStudy
    18-01-11 12일차 - 첫 번째 강의


    나만의 포트폴리오를 만드려고하는데, CSS 부분에서 막혀서 해매고있었는데,
    이렇게 좋은 라이브러리가 있을 줄은 몰랐네요. ^_^
    시간 날 때 이것저것 부트스트랩에 있는 라이브러리 기능들을 써봐야겠습니다.
    감사합니다.
  20. 리암
    감사합니다. 고맙습니다.
  21. 눈똥그리
    옮기고자하는 라인을 마우스 드래그해서 선택 후에...
    tab 키를 누르시면 뒤로 옮겨 지고
    shift tab를 누르시면 앞으로 옮겨 짐니다. ^^;
    대화보기
    • Johnson
      Failed to find a valid digest in the 'integrity' attribute for resource 'http://localhost/bootstrap-3.3.4-dist/css/bootstrap.min.css' with computed SHA-256 integrity '8EtRe6XWoFEEhWiaPkLawAD1FkD9cbmGgEy6F46uQqU='. The resource has been blocked.

      이런 에러가 뜨면서 부트스트랩이 적용이 안됩니다.
    • sppoi
      너무너무너무 재밌어요!
    • egoing
      이근환님의 댓글에 불미스러운 답글이 달려있었네요. 방금 조치했습니다. 혹시 댓글을 보셨다면 상처가 되지 않으셨으면 좋겠습니다. 죄송합니다.
      대화보기
      • 이근환
        2017-12-15 수강 17일차
        수강완료하였습니다!
      • 도미닉
        컨트로 c 컨트롤 v하신겁니다
        대화보기
        • Gwanghyeon Harry Gim
          코드애니웨어로 실습하고 있었는데 덕분에 문제를 해결할 수 있었습니다. 감사합니다 부지런한베짱이님
          대화보기
          • 초보
            라이브러리3-5에서 코드복사할 때,
            코드전체를 옆으로 이동시키는 단축키가 따로 있나요?
            혹시 아시는 분 있으면 알려주세요..ㅠㅠㅠㅠ
          • 박인호
            11-28
            수강완료.
            디자인적으로도 훌륭한 예제 페이지가 만들어졌네요.
          • Dongwon Shin
            강의 잘 봤습니다. 감사합니다.
          • 효천
            강의 내용 너무 좋고 체계적입니다.
            잘 배우고 가네여...
            다음 강좌에서 뵙겠습니다.
          • 유상원
            2017-11-11 완료!
          • 리얼 쩌네요 ㄳ
          • Theo Lee
            이 페이지에 있는 process.php 코딩 그냥 복사 붙여넣기 하시지 마시고, 보안 페이지로 다시 가셔서 복사하세요.
            이 페이지에 있는 것은 이고잉님이 하신 보안 개선 마지막 단계 전 버전 입니다.
          • 송성태
            좋은 도구를 찾는 것을 게을리 하지 마라.
            라이브러리 수업 잘 들었습니다.
            산에 올랐다고 하셨는데 조그만 언덕이었네요.
            산맥의 가장 작은 봉우리 하나 올라 온 느낌인데요. ^^

            Bootstrap에 관한 질문이 있습니다.
            write.php 부분에서 <form> tag에 Botstrap 클래스 적용하는 것에 관해서입니다.
            본문 영역에서 <label for="form-author">를 <label for="form-description">으로 바꾸어야 하는 것 아닌지요?
            데이터 베이스에 입력할 때 name값이 달라지지 않나 싶어서 여쭤봅니다.
            그 아래줄 <text area> 태그도 마찬가지고요.
          • hunter10
            완료
          • jayxwoo
            완료했습니다:) 라이브러리(예;부트스트랩)를 적절히 사용하는 것이 편리하고 중요한 것 같네요. 강의 잘봤습니다. 감사합니다!
          • 강낭콩
            너무 재미있는 수업이었어요! 기존에 디자인은 조금 세련된 느낌이 없어서 조금 답답했었는데 부트스트랩으로 조금만 손 보니까 완벽하진 않아도 확실히 부드럽고 예뻐보이네요 ㅎㅎㅎ 이래서 도구가 필요한가봐요 좋은 수업 감사합니따!
          • SanFrancisco
            부트스트랩을 쓰니 정말 사이트가 멋있어졌네요!
          • 고고싱
            디자이너인데 이거보니까 너무 좋네요. 이걸보고 암이 나았습니다.
          • 다시시작
            완료
          • ㅈㅈㅈ
            1111
          • 신정민
            mac사용자인데요.
            제출 버튼 누르면 localhost:8080이 호출 되어야하는데
            그냥 localhost가 호출 되서 저장이 안되네요 ㅠㅠ 왜그럴까요?
            모든 주소에는 localhost:8080 이 있습니다,
          • 부지런한베짱이
            혹시 codeanywhere 로 하시는 분들 중에 어떻게 하는지 모르시는분들 있으시면 참고될까싶어 적습니다.
            파일 다운로드 받아서 코드애니웨어에 폴더를 똑같이 만들고, 그 폴더에 해당 파일 upload 하세요.
            그 다음은 지금까지 했던거 처럼 localhost 주소를 codeanywhere 주소로 바꿔주시면 됩니다.
          • egoing
            앗 그렇네요~ 지금 수정했습니다 :)
            대화보기
            • Narrativi
              write.php 의 form에서, 본문 입력란의 label(for 속성)과 textarea의 id가 작성자 입력란과 겹치는데요.
              이 예제는 작동에 문제가 없는 듯 하지만, 수정은 필요할 것 같습니다...
            • 김태윤
              완료
            • 김청빈
              nav 부분 클래스 지정할 때 현재는 nav flex-column nav-pills 로 바뀌어있는데... 이것을 적용시켜도 목록의 번호만 지워질 뿐 변화가 없습니다. li 태그를 지웠더니 모양의 변화가 있었습니다만 파랗게 칠해지는 기능은 작동하지 않았습니다. 어떻게 하면 좋을까요?
            • 가영
              완료!
            • Myeongjin Ko
              완료