웹 애플리케이션 만들기

라이브러리 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. 제갈량
    부트스트랩의 사용법을 잘 알지는 못했는데
    확실하게 알아갑니다.
    감사합니다. ^^

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


    나만의 포트폴리오를 만드려고하는데, CSS 부분에서 막혀서 해매고있었는데,
    이렇게 좋은 라이브러리가 있을 줄은 몰랐네요. ^_^
    시간 날 때 이것저것 부트스트랩에 있는 라이브러리 기능들을 써봐야겠습니다.
    감사합니다.
  7. 리암
    감사합니다. 고맙습니다.
  8. 눈똥그리
    옮기고자하는 라인을 마우스 드래그해서 선택 후에...
    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.

      이런 에러가 뜨면서 부트스트랩이 적용이 안됩니다.
    • 너무너무너무 재밌어요!
    • 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
              완료
            • 강수진
              같은 어려움 겪고 있었는데 감사합니다 ㅠㅠ
              대화보기
              • GoldPenguin
                완료했습니다.
              • Baekkyu Han
                라이브러리 2 (타인의 것 사용하기, tb)
                twitter boorstrap 3.3.4 사용법
              • 박예지
                8/14 완료
              • 김경태
                잘봤습니다
              • 우왕!! >_<
              • 푸른바람9101
                열심히..
              • 지구촌
                부트스트랩 아주 좋습니다. ㅋㅋㅋ
              • 김범진
                완료.... 모르는거는하다가 댓글찾으니 되는군요.ㅎ
              • refeat
                글을 제출을 하게 되면 옆에 목록으로 출력이 되기는하는데 글씨는 안보이고 선택만 할수있게 나오는 현상은
                왜그런걸까요?
                개발자 도구를 써서 오류를 찾아보려해도 찾을수가 없네요
              • 한종운
                [라이브러리 2 (타인의 것 사용하기, tb)]
                twitter bootstrap
                3.3.4 버전 다운로드

                라이브러리 3-1
                twitter bootstrap 으로
                웹 애플리케이션 꾸미기.

                라이브러리 3-2
                twitter bootstrap 으로 만든 사이트 예제를 보며,
                라이브러리의 이해도 높이기

                라이브러리 3-3
                Grid system
                style.css에 twitter bootstrap의 css를 적용하기.
                상위 태그를 만들어, 하위 태그를 묶어 grid system 적용.

                라이브러리 3-4
                class=
                jumbotron
                imageshape circle
                container(fixed).fluid

                라이브러리 3-5
                세부 디자인
                button 묶음 색 크기

                index.php의 css를 write.php에 적용하기.
                Form tag 디자인 수정.
                lable
                class=form-control

                container padding
              • 임영선
                강의 잘 들었습니다!
                코드가 너무 복잡해서 따라가기 힘들군요; 하지만 다른사람도 저의 고충을 알고있고 벌써 해결책이 나와있다는 것은 매우 기쁘군요! 그리고 마지막으로.. 검색엔진 최고~!
              • 박재은
                제가 들어가본 웹페이지에 있는 basic 코드랑 달라요 ㅜㅜ
                강의랑 똑같이 코드 작성하면 적용이 안되더라구요.. 그래서 bootstrap웹페이지 코드 기준으로 작성하니 잘 되네요. 참고 하시면 될꺼에요. 아래는 예시로, 리스트 부분은 ol 클래스에 list-group 한 후 li테그에 list-group-item으로 클래스 넣어야 작동이 됩니다.
                <ol class=" list-group">
                <?php
                while($row = mysqli_fetch_assoc($result)){
                echo '<li class="list-group-item"><a href="http://localhost/index.php?id='.$row['id'].'">'.htmlspecialchars($row['title']).'</a></li>'. "\n";
                }
                ?>
                </ol>
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기