생활코딩

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-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. Theo Lee
    이 페이지에 있는 process.php 코딩 그냥 복사 붙여넣기 하시지 마시고, 보안 페이지로 다시 가셔서 복사하세요.
    이 페이지에 있는 것은 이고잉님이 하신 보안 개선 마지막 단계 전 버전 입니다.
  2. 송성태
    좋은 도구를 찾는 것을 게을리 하지 마라.
    라이브러리 수업 잘 들었습니다.
    산에 올랐다고 하셨는데 조그만 언덕이었네요.
    산맥의 가장 작은 봉우리 하나 올라 온 느낌인데요. ^^

    Bootstrap에 관한 질문이 있습니다.
    write.php 부분에서 <form> tag에 Botstrap 클래스 적용하는 것에 관해서입니다.
    본문 영역에서 <label for="form-author">를 <label for="form-description">으로 바꾸어야 하는 것 아닌지요?
    데이터 베이스에 입력할 때 name값이 달라지지 않나 싶어서 여쭤봅니다.
    그 아래줄 <text area> 태그도 마찬가지고요.
  3. hunter10
    완료
  4. jayxwoo
    완료했습니다:) 라이브러리(예;부트스트랩)를 적절히 사용하는 것이 편리하고 중요한 것 같네요. 강의 잘봤습니다. 감사합니다!
  5. 강낭콩
    너무 재미있는 수업이었어요! 기존에 디자인은 조금 세련된 느낌이 없어서 조금 답답했었는데 부트스트랩으로 조금만 손 보니까 완벽하진 않아도 확실히 부드럽고 예뻐보이네요 ㅎㅎㅎ 이래서 도구가 필요한가봐요 좋은 수업 감사합니따!
  6. SanFrancisco
    부트스트랩을 쓰니 정말 사이트가 멋있어졌네요!
  7. 고고싱
    디자이너인데 이거보니까 너무 좋네요. 이걸보고 암이 나았습니다.
  8. 다시시작
    완료
  9. ㅈㅈㅈ
    1111
  10. 신정민
    mac사용자인데요.
    제출 버튼 누르면 localhost:8080이 호출 되어야하는데
    그냥 localhost가 호출 되서 저장이 안되네요 ㅠㅠ 왜그럴까요?
    모든 주소에는 localhost:8080 이 있습니다,
  11. 부지런한베짱이
    혹시 codeanywhere 로 하시는 분들 중에 어떻게 하는지 모르시는분들 있으시면 참고될까싶어 적습니다.
    파일 다운로드 받아서 코드애니웨어에 폴더를 똑같이 만들고, 그 폴더에 해당 파일 upload 하세요.
    그 다음은 지금까지 했던거 처럼 localhost 주소를 codeanywhere 주소로 바꿔주시면 됩니다.
  12. 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>
      • 완료!
      • nevertoolate
        wow! great!!
      • 최규광
        col-md-n이 부트스트랩 관련한거였군요...
      • 코딩학습생
        잘 봤습니다.
      • 완료!
      • YeonHoon Jeong
        수강완료 하였습니다. 좋은 강의 감사합니다.
      • wesrdgathy
      • 강동곤
        잘 봤습니다 ㅎ
      • aimerthis(이성민)
        잘봤습니다.
      • 김우진
        이번 강의 정말 잘 들었습니다
      • 안성현
        와.. 진짜 혁명이네요!!! 클래스만 적용했을 뿐인데 깔끔한 디자인이 만들어지니 너무 신기해요! 학교에서 개인 프로잭트로도 웹 에플리케이션을 하나 만들고 있는데 css때문에 엄청 고생을 많이 헀는데 이렇게 편리한 기능이 있을 줄 몰랐습니다!! 앞으로 자주 애용해야겠어요! 웹페이지 디자인이 예뻐지니 뿌듯하네요 ! 오늘도 좋은 강의 감사합니다!
      • 강호준
        정말 댓글들이 많이 도움이 됩니다! 감사합니다 ㅠ
      • 기픈
        감사합니다. 댓글에서도 많은 도움 받고 있습니다.
        어려워요 ㅠ.ㅠ
      • JeonSeon
        크롬 개발자모드로 보니 Uncaught SyntaxError: Unexpected token란 오류가 발생하였습니다.
        인터넷 여기저기 알아보니 링크가 잘못된 경우라고 써져 있어서 전체적으로 링크를 다시 확인했습니다.
        codeanywhere를 사용하기에 실습과 다른 경로를 작성해야 하는데 http://localhost/가 붙어 있는 링크가 있었으며, 심지어 /bootstrap/(이하경로)로만 표시된 링크도 있었습니다.

        index.php파일의 경우는 처음 접속하는 페이지이기 때문에 큰 문제 없이 폴더에 접속하여 파일을 로드하나,
        쓰기 버튼을 통해 접속한 write.php 파일의 경우에는 정확하게 http://opentutorials-[개인식별ID].codeanyapp.com/의 경로를 정확하게 작성해야 되더라구요.

        혹시라도 몰라서 남깁니다.
      • JeonSeon
        codeanywhere 사용중입니다.
        write.php파일 자체로 들어가면 괜찮은데, 링크를 통해 접속하면 모양이 다 깨지네요...
        멘붕입니다. 차근히 다시 찾아봐야겠습니다.

        좋은 강의 감사합니다.
      • Kibum Song
        봤어요가 100명씩 줄어드네요...
      • Jaehyun Kim
        Bootstrap을 통한 라이브러리 느끼기! 감사합니다!^^
      • Whoisy
        한글판 부트스트랩3 사이트입니다.
        http://bootstrapk.com/
      • 정지호
        수강완료
      • Kisoo Ahn
        지금껏 열심히 따라 왔는데 bootstrap을 배우고 나서 활용하니 이전의 작업이 좀 허전하네요.
        잘 배웠습니다.
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기