🎉학교 프로젝트 결과물로 사이트 만들기(2) - 사이트에 DB데이터 가져오기

사용한 Query문 정리

협업으로 사이트를 만들고 있기때문에 Query문을 정리하여 조원들과 공유하였다.
https://shingu.gitbook.io/jun-api/

사이트 제작에 사용한 기술들

PDO객체 생성

학교에서 php또는 jsp를 사용하여 프로젝트를 진행하라고 하여 php를 이용하였습니다.

<?php
  $db = new PDO("mysql:host=localhost;port=????;dbname=junseok816","junseok816","비번");
  
  $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  // $db->setAttribute(PDO::MYSQL_ATTR_USE_BUFFERED_QUERY, true);
 ?>

간단하게 PDO객체를 이용하여 DB랑 연동하였습니다.

session 값 유무체크하기

세션(session)이란 웹 사이트의 여러 페이지에 걸쳐 사용되는 사용자 정보를 저장하는 방법을 의미합니다.
사용자가 브라우저를 닫아 서버와의 연결을 끝내는 시점까지를 세션이라고 합니다.

<?php
    session_start();
    // $userID = 0;
    if(isset($_SESSION['userId'])){
      $user_login = TRUE;
      // $userID = $_SESSION['userid'];
    }else{
      $user_login = false;
      // $_SESSION['userId'] = 0;
    }
?>

session_start() 함수는 세션 아이디가 이미 존재하는지를 확인하고, 존재하지 않으면 새로운 아이디를 만듭니다.

만약 이미 존재하는 세션 아이디가 있을 때는 원래 있던 세션 변수를 다시 불러와서 사용할 수 있도록 합니다.

    <?php
         if($user_login){
                 $q_user = $db->query('SELECT * FROM tbl_user WHERE ai_id = '.$_SESSION['userId'].'');
                 $row_user = $q_user->fetch(PDO::FETCH_ASSOC);
                 $row_user["f_profile"] = ($row_user["f_profile"] == "") ? "img/defaultProfile.jpg" : $row_user["f_profile"];
    ?>
     <button class="nav-btnMember" onclick="location.href='myPage.php'">
     	<img class="profileImg" src="<?=$row_user["f_profile"]?>">
     	<?php 
          if(mb_strlen($row_user["f_user_name"]) > 5)
            echo mb_substr($row_user["f_user_name"],0, 5,"utf-8")."...";
            else
            echo $row_user["f_user_name"];
     	?>님
     </button>
     <button class="nav-btnMember" onclick="location.href='logout.php'">로그아웃</button>
     <?php
       }else{
     ?>
     	<button class="nav-btnMember" onclick="location.href='login.php'">로그인</button>
     	<button class="nav-btnMember" onclick="location.href='join.php'">회원가입</button>
     <?php
        }
     ?>
                        

session을 사용하여 위와같이 사용자가 사이트에 로그인을하여 로그인정보가 session에 남아있다면 DB에 있는 값과 대조하여 SELECT된 정보를 긁어오는 코드를 만들 수 있었습니다.

회원가입 페이지

링크(http://funware.shop/joinDetail.php)

이메일 비번 값 넘겨주기

 $(function(){
        $('#btn-join').click(function(){
          // 이름
          if($('#name').val().trim() == ""){
            alert('이름을 입력해주세요.');
            return;
          }
          // 이메일
          if($('#email').val().trim() == ""){
            alert('이메일 주소를 입력해주세요.');
            return;
          }else if($('#email').val().indexOf('@') == -1){
            alert('올바른 이메일 주소를 입력해주세요.');
            return;
          }
          // 비밀번호
          if($('#pw').val().trim() == "" || $('#chkPW').val().trim() == ""){
            alert('비밀번호를 입력란을 확인해주세요.');
            return;
          }else if($('#pw').val() != $('#chkPW').val()){
            alert('비밀번호가 일치하지 않습니다.');
            return;
          }
          // 이용약관
          if($('#chkTerm').is(":checked") == false){
            alert('이용약관에 동의하셔야 서비스 이용이 가능합니다.');
            return;
          }

          $("#join-form").submit();
          // $("#name").val(currentUserInputName);
          // 디비 돌려 ~~~~!~!!!!
          $.ajax({
            url: "ajax_src/ajaxJoin.php",
            type: "post",
            dataType: "json",
            async: false,
            data: {
              name:     $("#name").val(),
              email:    $("#email").val(),
              password: $("#pw").val(),
              chkMkt:   $("#chkMkt").is(":checked")
            },
            success: (res) => {
              if(res.msg){
                alert('가입이 완료되었습니다.');
                // window.location.assign('login.php');
                // 페이지 이동이 왜 안 될까앙
                location.replace('login.php');
              }else{
                alert('이미 가입된 이메일입니다.');
              }
            },
          });
        })
      })

input창에 사용자가 기입한 데이터를 ajaxJoin.php로 전달해줍니다.

구글,네이버,카카오 아이디 연동

HTML 코드

      <div id="join-container">
        <div id="join-box">
  	  <p id="title">회원가입</p>
	  <button type="" id="btn-join" onclick = "location.href='joinDetail.php'">
	  	<img src="img/email.png" style="margin-right:8.9px;">이메일로 회원가입
	  </button>
	  <img src="img/loginOr.png" style="width:100%;">
  	  <div id="socialBox">
            <div id="social">
              <div id="customBtn"  class="customGPlusSignIn" data-onsuccess="onSignIn"  data-width="44px" data-height="44px">
                <div id="gSignInWrapper">
                  <div id="customBtn" class="customGPlusSignIn">
                    <span class="icon">
                      <img src="img/google@3x.png" width="44px" height="44px" alt="" srcset="">
                    </span>
                  </div>
                </div>
                <script>startApp();</script>
              	<div>
                <!-- <div><img src="img/facebook@3x.png"></div> -->
                  <div id="naver_id_login">
                    <!-- <img src="img/naver@3x.png"> -->
                  </div>
                  <div id="kakaoBtn">
                    <a href="javascript:KakaoLogin();">
                     <img src="img/kakao@3x.png">
                    </a>
                  </div>
    		</div><br>
              <br><span style="color: #666666;">소셜 네트워크로 회원가입 해보세요</span>
              <p id="msg-join">이미 FunWare계정이 있으신가요?</p>
              <a href="login.php" style="color: #27a3ff;">기존 계정으로 로그인하기</a>
            </div>
  	</div>
      </div>

구글 로그인 api설정

<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="YOUER_KEY.com">

HTML상단에 script태그 안에 구글 API를 사용하기 위해 위와같이 태그를 추가해줍니다.

  var googleUser = {};
      var startApp = function() {
        gapi.load('auth2', function(){
          // Retrieve the singleton for the GoogleAuth library and set up the client.
          auth2 = gapi.auth2.init({
            client_id: 'YOUR_KEY.com',
            additional_scope: 'profile email'
            // Request scopes in addition to 'profile' and 'email'
            //scope: 'additional_scope'
          });
          attachSignin(document.getElementById('customBtn'));
        });
      };

      function attachSignin(element) {
        // console.log(element.id);
        auth2.attachClickHandler(element, {},
        function(googleUser) {
          var profile = googleUser.getBasicProfile();
          console.log(profile);
          console.log("ID: " + profile.getId()); // Do not send to your backend! Use an ID token instead.
          console.log("Name: " + profile.getName());
          console.log("Image URL: " + profile.getImageUrl());
          console.log("Email: " + profile.getEmail()); // This is null if the 'email' scope is not present.
        }, function(error) {
          alert(JSON.stringify(error, undefined, 2));
        });
      }

먼저 startApp()함수가 실행이되고 구글 내장함수를 통해 객체를 생성합니다.
객체는 client_id와 additional_scope(사용자에게 요구하는 정보)를 받아서 생성됩니다.

그 후 attachSignin()함수를 통해 사용자가 HTML객체를 클릭했을때 작동되는 Handler를 적용시켜 주었는데 핸들러가 실행되면 사용자의 구글프로필 정보가 담겨있는 객체를 불러옵니다.

naver 로그인 api 설정

<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>

HTML상단에 script태그 안에 Naver API를 사용하기 위해 위와같이 태그를 추가해줍니다.

 var naver_id_login = new naver_id_login("YOUR_CLIENT_ID", "YOUR_CALLBACK_URL");
      var state = naver_id_login.getUniqState();
      // naver_id_login.setButton("white", 2,50);
      naver_id_login.setDomain("http://funware.shop/");
      naver_id_login.setState(state);
      // naver_id_login.setPopup();
      naver_id_login.init_naver_id_login();

new naver_id_login("YOUR_CLIENT_ID", "YOUR_CALLBACK_URL");을 사용해 naver api객체를 생성합니다.

kakao 로그인 api 설정

 <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

HTML상단에 script태그 안에 Kakao API를 사용하기 위해 위와같이 태그를 추가해줍니다.

HTML

<div id="kakaoBtn"><a href="javascript:KakaoLogin();"><img src="img/kakao@3x.png"></a></div>

버튼을 클릭하면 함수가 호출되게 설정합니다.

      Kakao.init("YOUR_KEY");
      console.log("Init state : " + Kakao.isInitialized());
      function KakaoLogin() {
        Kakao.Auth.login({
          scope: "profile, account_email, gender",
          success: function (authObj) {
            console.log(authObj);
            Kakao.API.request({
              url: "/v2/user/me",
              success: (res) => {
                console.log(res.kakao_account);
                location.replace("joinDetail.php?email=" + res.kakao_account.email);
              },
            });
          },
        });
      }

넘겨받은 값 DB에 INSERT하기

<?php
try {
  require '../dbInfo.php';

  // 데이터 받기
  $name     = $_REQUEST["name"];
  $email    = $_REQUEST["email"];
  $chkMkt = ($_REQUEST["chkMkt"]) ? 1 : 0;

  // 토큰 발급 function
  function GenerateString($length){
     $characters  = "0123456789";
     $characters .= "abcdefghijklmnopqrstuvwxyz";
     $characters .= "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
     $characters .= "_";

     $string_generated = "";

     $nmr_loops = $length;
     while ($nmr_loops--)
     {
         $string_generated .= $characters[mt_rand(0, strlen($characters) - 1)];
     }

     return $string_generated;
  }
  // 암호화 function
  function Encrypt($str){
    // secreat key = 'funware', secreat iv = 'tlsrn815'
    $key = hash('sha256', 'funware');
    $iv = substr(hash('sha256', 'tlsrn815'), 0, 16);
    return str_replace("=", "", base64_encode(
                 openssl_encrypt($str, "AES-256-CBC", $key, 0, $iv))
    );
  }

  // 이메일 값 검사
  $q1= $db->prepare('SELECT f_user_pw FROM tbl_user WHERE f_email = ? AND f_div = "Y";');
  $q1->execute(array($email));
  // 신규회원
  if(!($row = $q1->fetch(PDO::FETCH_ASSOC))){
    // 토큰 발급
    $token = GenerateString(10);
    // PW, token 암호화
    // $password = Encrypt($_REQUEST["password"]);
    $password = Encrypt($_REQUEST["password"].$token);
    // insert user
    $q2 = $db->query("INSERT INTO tbl_user (f_email, f_user_pw, f_user_name, auto_date, f_token, f_marketing, f_div)
                      VALUES ('".$email."', '".$password."', '".$name."', CURRENT_TIMESTAMP, '".$token."', '".$chkMkt."', 'Y');");

    $result['msg'] = true;
  // 기존 회원
  }else{
    $result['msg'] = false;
  }

}catch(Exception $e) {
  $result['msg'] = '죄송합니다. 서버 오류입니다.';
}finally{
  // 있어보이게 json화
  echo json_encode($result, JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE);
}
?>

hash()함수를 이용해 받아온 Password를 암호화시킨후 DB에 INSERT하는 코드입니다.

function GenerateString()

숫자,소문자,대문자,언더바 를 조합한 10자리의 난수를 생성합니다.

function Encrypt()

GenerateString()함수로 생성한 난수에 password문자열을 합친 변수를 파라미터로 받아와
hash()함수로 암호화 시킨값을 리턴합니다.

메인 페이지

링크(http://funware.shop/index.php)

DB에 있는 데이터 사이트에 띄우기

  <p class="main-titles">신규 프로젝트👀</p>
  <p class="main-subTitles">최근에 나온 프로젝트를 만나보세요</p>
  <div id="new-cards-box" class="mainCards pListBox">
            <?php
             $q1= $db->query('SELECT ai_project_id ,
                                     f_project_name ,
                                     f_thumbnail ,
                                     SUM(f_spon + f_invest) AS f_donate ,
                                     TRUNCATE((SUM(f_spon + f_invest)/f_donate_limit)*100,0) AS achieveRate,
                                     f_etp_name ,
                                     DATEDIFF(f_date_limit,CURDATE()) AS f_daysleft
                              FROM tbl_project
                              LEFT JOIN tbl_img ON tbl_project.ai_project_id = tbl_img.sys_project_id
                              LEFT JOIN tbl_enterprise ON tbl_project.ai_project_id = tbl_enterprise.sys_project_id
                              LEFT JOIN tbl_payment ON tbl_payment.sys_project_id = tbl_project.ai_project_id
                              WHERE tbl_project.f_div = "Y" AND  DATEDIFF(f_date_limit,CURDATE()) > 0
                              GROUP BY ai_project_id
                              ORDER BY auto_date DESC LIMIT 20'
              );
              echo '<div class ="oh_box">';
              echo'<span id="movieList_slideLeft_new" class="material-icons md-18 prev">arrow_back_ios</span>';
              echo '<div id="new-cards" class="cards">';
              while($row = $q1->fetch(PDO::FETCH_ASSOC)){
                // $percent = isset($row['achieveRate']) ? $_row['achieveRate']: 0;
                // ($percent == "") ? $percent=0 : "";
                if(!$row["f_thumbnail"]) $row["f_thumbnail"] = "img/defaultThumbnail.png";
                if(!$row["achieveRate"]) $row["achieveRate"] = "0";
                $projectSize = strlen($row["f_project_name"]);
                $etpSize = strlen($row["f_etp_name"]);
                $projectName = ($projectSize >= 17) ? $projectName = substr($row["f_project_name"],0, 17).'...': $row["f_project_name"] ;
                $etpName = ($etpSize >= 23) ? $etpName = substr($row["f_etp_name"],0, 23).'...': $row["f_etp_name"];
                echo '<div class="wrapNewCard">';
                  echo '<div class="cards_contents">';
                    echo '<a href="projectDetail.php?p_num='.$row["ai_project_id"].'">';
                      echo '<div class="p_thumnail"><img src="'.$row["f_thumbnail"].'"></div>';
                      echo '<div class="p_infoBox">';
                        echo '<div class="enp_name">', $etpName, '</div>';
                          echo '<div class="p_nameRateBox p_tip">';
                            echo '<div class="p_name">', $projectName, '</div>';
                            echo '<div class="d_rate">', $row["achieveRate"], '%</div>';
                            echo '<span>' , $row["f_project_name"] ,'</sapn>';
                          echo '</div>';
                        echo '</div>';
                      echo '</div></a>';
                    echo '</div>';
                }
                echo '</div>';
                echo '<span id="movieList_slideRight_new" class="material-icons md-18 next">arrow_forward_ios</span>';
                echo '</div>';
                // }
              ?>

사이트에 있는 모든 데이터들은 위와같이 SELECT문으로 추려내여 php문으로 띄워내었습니다.

검색기능 구현

<?php
          $q1= $db->prepare("SELECT j_link.sys_project_id AS p_id
                                  ,j_link.sys_category_id
                                  ,j_category.f_category_name
                                  ,j_project_Sum.f_project_name
                                  ,j_project_Sum.f_projectTotal
                                  ,j_project_Sum.f_percent
                                  ,j_project_Sum.f_etp_name
                                  ,j_project_Sum.f_daysleft
                                  ,j_project_Sum.f_thum
                          FROM tbl_pj_category as j_link
                              Left join tbl_category AS j_category
                                ON j_link.sys_category_id = j_category.ai_category
                              LEFT JOIN (
                                      SELECT j_project.ai_project_id
                                            ,j_project.f_project_name
                                            ,sum(j_payment.f_spon + f_invest) AS f_projectTotal
                                            ,TRUNCATE((sum(j_payment.f_spon + f_invest)/j_project.f_donate_limit)*100,0) AS f_percent
                                            ,j_etp.f_etp_name AS f_etp_name
                                            ,DATEDIFF(f_date_limit,CURDATE()) AS f_daysleft
                                            ,j_img.f_thumbnail AS f_thum
                                            ,j_project.f_div
                                        FROM tbl_project AS j_project
                                          LEFT JOIN tbl_payment AS j_payment
                                            ON j_project.ai_project_id = j_payment.sys_project_id
                                          LEFT JOIN tbl_enterprise AS j_etp
                                            ON j_project.ai_project_id = j_etp.sys_project_id
                                          LEFT JOIN tbl_img AS j_img
                                            ON j_project.ai_project_id = j_img.sys_project_id
                                            GROUP BY j_project.ai_project_id,j_project.f_project_name
                                    ) AS j_project_Sum
                                  ON j_project_Sum.ai_project_id = j_link.sys_project_id
                            WHERE concat(j_project_Sum.f_project_name,',',j_project_Sum.f_etp_name,',',j_category.f_category_name)  LIKE ? AND j_project_Sum.f_div ='Y' AND f_daysleft > 0
                                  GROUP BY sys_project_id");

          $q1->execute(array("%".$keyword."%"));

            echo '<div id="keyword-cards" class="cards">';

            while($row = $q1->fetch(PDO::FETCH_ASSOC)){

              $projectCount++;

              if($keyword != "" && $projectCount != 0){
                if(!$row["f_thum"]) $row["f_thum"] = "img/defaultThumbnail.png";
                if(!$row["f_percent"]) $row["f_percent"] = "0";
                  $projectSize = strlen($row["f_project_name"]);
                  $etpSize = strlen($row["f_etp_name"]);
                  $projectName = ($projectSize >= 17) ? $projectName = substr($row["f_project_name"],0, 17).'...': $row["f_project_name"] ;
                  $etpName = ($etpSize >= 23) ? $etpName = substr($row["f_etp_name"],0, 23).'...': $row["f_etp_name"];
                echo '<div class="cards_contents">';
                echo '<a href="projectDetail.php?p_num='.$row["p_id"].'">';
                  echo '<div class="p_thumnail"><img src="'.$row["f_thum"].'"></div>';
                  echo '<div class="p_infoBox">';
                    echo '<div class="enp_name">', $etpName, '</div>';
                    echo '<div class="p_nameRateBox p_tip">';
                      echo '<div class="p_name">', $projectName, '</div>';
                      echo '<div class="d_rate">', $row["f_percent"], '%</div>';
                      echo '<span>' , $row["f_project_name"] ,'</sapn>';
                    echo '</div>';
                  echo '</div>';
                echo '</div></a>';
              }

            }
            if($projectCount == 0) echo '<div class="emptySearchedBox">Oooops, 검색결과가 없어요 !</div>';

            echo '</div>';

?>

쿼리에 값을 바꿔 넣을 곳에 ? (placeholder)를 사용합니다
execute(array("%".$keyword."%")) 코드를 사용하여 배열형태로 값을 ?(placeholder)에 전달합니다
keyword값은 사용자가 input창에 입력한 값입니다.

쿼리문에 있는
concat(j_project_Sum.f_project_name,',',j_project_Sum.f_etp_name,',',j_category.f_category_name)
LIKE ?
concat문으로 모든 데이터를 하나의 문자열로 합친후 ? (placeholder)와 비교합니다.