프로그래밍 공부방

[PHP갤러리프로젝트#03] 개인별 갤러리 생성하기 본문

프론트엔드/JavaScript

[PHP갤러리프로젝트#03] 개인별 갤러리 생성하기

김갱갱 2022. 6. 17. 00:58

ㅠㅠ... 프로젝트 어느정도 마무리 하느라.. 블로그 포스팅을 하지 못했다..

지금까지 진행한 내용들 정리해서 올리겠습니당!!

 

일단 본인이 만들고 싶은 갤러리를 생성할 수 있다.

갤러리를 만들기 위해서는 로그인이 필요하다. 로그인 후에 개인 갤러리 생성이 가능하다. 

아래 사진은 로그인을 한 후에 처음으로 갤러리를 생성할 때의 화면이다.

갤러리 생성 화면 - 갤러리 이름과 전시 기간을 설정
내 갤러리 화면 - 갤러리 정보 확인/수정, 작품 확인/수정 가능


1. 왼쪽에 있는 사진

1) PHP 코드

  <?php include "./navbar/navbar.php" ?>
  <main>
    <form id="gallery_add_form" action="gallery_add_process.php" method="POST">
      <h1>갤러리 생성</h1>
      <hr>
      <div id="gallery_name_div">
        <p>갤러리 이름</p>
        <input name="gallery_name" class="gallery_add_list" id="gallery_name" type="text">
      </div>
      <div id="gallery_date_div">
        <p>전시 기간</p>
        <input id="date" name="date" class="gallery_add_list" type="date">
      </div>
    
      <input id="save_btn" type="button" value="저장">
    </form>
  </main>
<?php
session_start(); 
header('Content-Type: charset=utf-8'); 

$conn = mysqli_connect('localhost', '', '', '');


$sql = "
    UPDATE users
    SET gallery_name = '{$_POST['gallery_name']}', exhibition_period = '{$_POST['date']}'
    WHERE u_id = '{$_SESSION['id']}' ";

$result = mysqli_query($conn, $sql);
if($result === false){
    echo "fail";
    echo mysqli_error($conn);
}else{
    echo "<script>location.replace('my_gallery.php');</script>"; 
}
?>

 

네비게이션바 부분은 따로 파일로 만든 후에 include 해줬습니다.

post 형태의 form을 제작해서 input으로 갤러리 이름과 전시 기간을 전송하게 했습니다.

 

gallery_process.php에서는 현재 로그인 된 아이디의 db의 갤러리이름, 전시기간 컬럼 쪽 값을 변경했습니다.

(db는 mysql 이용)

 

 

2) JS 코드

const gallery_add_form = document.getElementById("gallery_add_form")
const gallery_name = document.getElementById("gallery_name")
const save_btn = document.getElementById("save_btn")
const date_confirm_btn = document.getElementById("date_confirm_btn")
const date_value = document.getElementById("date");


//date를 현재 날짜로 설정해놓기 위해서 필요한 변수들
var today = new Date();

var year = today.getFullYear();
var month = ('0' + (today.getMonth() + 1)).slice(-2);
var day = ('0' + today.getDate()).slice(-2);

var dateString = year + '-' + month  + '-' + day;


date_value.value = dateString;




save_btn.addEventListener("click", function(){ //저장 버튼을 눌렀을 때
  if (gallery_name.value != ""){
    gallery_add_form.submit();
  } else {
    alert("갤러리 이름을 입력해주세요.")
  }
  
  // location.href='gallery_add.php'
});

전시기간의 디폴트 값을 오늘 날짜로 해놓기 위해서 dateString을 date_value값으로 설정해줍니다.

저장 버튼을 눌렀을 때 갤러리 이름을 적어놨다면 앞에 php에서 설정한 form값들이 전달됩니다.

 

 

 

내 갤러리 설정하는 부분부터는 다음 게시글에서 이어집니당~~!!