웹 애플리케이션 만들기

라이브러리 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. 이쁘게~의 감각이 필요한데 그게 저한테는 없는 듯^^
    어려운 내용입니다.
    허나, 선생님의 강의 덕분에 부트스트랩이라는 좋은 내용도 알게 되고
    감사합니다!
  2. 스타일C
    이렇게 강의를 보면서 하니 더 쉽게 다가오네요 ,,감사합니다.
  3. lunamoth
    https://v4-alpha.getbootstrap.com/ 부트스트랩 4.0.0 알파버전으로 해봤는데 이미지 원형, 네비바 스타일 같은건 안되는군요 ㅎㅎ; 없어졌나 봅니다
  4. 김난희
    재밌고 유용한 수업 감사합니다.
    사소한 거지만... write.php 복붙하다가 본문 label이랑 textarea가 author 인게 너무 신경쓰여요...ㅠㅠㅠㅠㅠㅠ
  5. namimoon
    이런게 있었다니.....ㅋ
  6. 정미정
    어렵지만 재밌어요ㅎㅎㅎㅎ 부트스트랩이란게 사용해보니 정말 신기하네요!
  7. booski
    브라우저가 캐시로 웹페이지에 대한 정보를 갖고 있는 페이지를 열때는 최신 정보를 다시 받는게 아니라 저장된 정보를 불러오는 것이 속도면에서 더빠르기 때문이라서 이전버전이 나오는 것으로 알고있는데요.(틀린 부분있으면 다른 분이 보충설명부탁드려요!)

    이것을 방지하고자 크롬의 경우 시크릿창을 사용하시는 것 같은데 더 확실한 방법은 리로드시에 ctrl+shift+r을 사용해서 리로드 하시면 해당 단축키가 저장된 페이지말고 새로 정보를 받아서 보여주는 역할을 해서 딜레이 없이 적용될 것같아요!
    대화보기
    • suhyun
      점점 어려워지네요.. 다음강의는 네트워크라서 기되됩니다^^
      스타일 경우
      #control{
      position: fixed;
      right: 50px;
      bottom: 20px;
      }
      이 더이쁜거같네요
    • Drake
      라이브러리 3-5 12:26에 자막 emale 오타 있어요. email 이 틀리신듯 합니다.
    • 유혀누
      잘들었슴돠~~
    • 나효진
      17/6/5 실습은 따로 하지않고 보기만해서 끝냈습니다.
    • 미노미농
      오늘 새벽부터 하루종일 절반치를 다들었네요 ..
      급하게 들어서 체할지도 모르겠지만, 웹에 대한 기초지식을 탄탄히 세운거같아서 기분이 좋습니다
    • Seo Yun Seok Tudoistube
      Document 마실 다니는 법을 배우고 싶습니다. 감사합니다^_____^
    • egoing
      https://opentutorials.org......366

      위의 수업에서 opcache 파트를 참고해주셔요~
      대화보기
      • 옥수수
        혹시 코드수정한 것을 저장하고 웹에서 reload를 할 때 바로바로 웹이 변경되지 않고 시간차가 생기는 이유에 대해서 아시는 분 왜그런지, 어떻게 하면 바로바로 웹이 수정되게 할 수 있는지 가르쳐 주실 수 있는 분 계신가요?
      • 우탄
        여러가지 열을 한번에 tap을 해준것(들여쓰기)과 같은 효과는 어떻게 하나요?!
      • 응디
        약간 지쳐있던 상태인데 부트스트랩 적용하면서 예쁘게 바꿔보니
        더더 흥미가 생기고 열심히 해보고자하는 의지가 강해지네요^^
        좋은 강의 감사합니당!
      • 14번째
        4.5.
      • 좋은강의 잘들었습니다. ^^
        17.03.31
      • 고은정
        재미있어요+_+
      • 나홀로문도리
        좋은 강의 항상 감사합니다!
      • 강경호
        감사합니다
        170228
      • 강경호
        3.3.4 버전 다운로드 받을 것
      • funlife
        감사합니다.

        몇번 더봐야겠네요 ^^
      • s134788
        안녕하세요 container을 써도 사이트가 확 줄어들지를 않아 답답한데 다른 방법이 있을까요?
      • 이고잉 선생님
        정말 좋은 강의
        멋진 강의 감사드립니다.
        회사 때려치고 새출발을 생활코딩과 함께하고 있습니다.
        대학교때 이론도 모르고 맨땅에 헤딩식으로 하던게
        다시 기억도 나고 그때 헤매던 부분들이 떠오르기도 합니다.

        정말 명품강의입니다.
        감사합니다.
      • 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
                이번강의 보고 희망이 넘쳐나네요...ㅜㅜ
                그런데 궁금한점이
                트위터 개발자드이 부트스트랩을 만들었다는게 잘 접목이 안되네요

                개인적으로 다음강에 나오는 호스팅 업체에서 개발을 해서
                유포한다면 이해가 되겠는데...ㅜㅜ
              • Hmmm
                우와 대박 이번강의 정말 대박
              • 맨밥
                와 첫 강의부터 쭉 보고 있었는데 이번 강의가 제일 설렜어요ㅋㅋㅋ무엇보다 앞에서 쭉 기본적이고 본질적인 면을 배우다 이런 식의 편리함을 접하니까 느낌이 남다른 것 같습니디ㅏ!! 항상 잘 듣고 있어요 이런 강의 해주셔서 정말로 감사드려요ㅠㅠㅠㅜ
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기