웹 개발 (게시판 목록 만들기, 배경 바둑판 오류 수정, 버튼 submit 오류 수정)

이번주 계획표

1. 게시판 list 만들기

2. form 안에 있는 버튼 submit 실행 차단

3. 배경화면 반복 오류 수정

게시판 list 만들기

먼저 게시판 list를 만드는 실습을 하기 위해 먼저 순서를 정해보자

1. DB 접속 PHP 작성

2. 데이터를 보기 위해 select 구문 작성

3. $row에 배열의 형태로 값을 차례로 넣어줌

4. $row에 들어간 값 출력

이 순서로 코딩을 해보겠음

시작해보자!

STEP1. DB접속 PHP작성

<dbConnect2.php>

<?php
$host = 'localhost';
$user = 'root';
$pw = '*******';
$dbName = 'board';
​
$mysqli = new mysqli($host, $user, $pw, $dbName);
?>

DB 접속 정보가 담긴 dbConnect2.php를 링크를 걸어줌

$mysqli에 mysqli라는 연결을 할 때 필요한 함수를 사용해 host, user, pw, dbName 값을 각각 넣어 DB 연결

STEP2. 데이터를 보기 위해 select 구문 작성

$query = "select * from store";

$query에는 store라는 테이블의 내용을 모두 보기 위해 SELECT * from store 을 작성해줌

$result = mysqli_query($mysqli, $query);

$result에는 $query라는 query를 실행시키는 함수가 들어감

STEP3. $row에 배열의 형태로 값을 차례로 넣어줌

<?
  while($row = mysqli_fetch_row($result))
  {
?>
  <tr>
    <td><?=$row[0]?></td>
    <td><?=$row[1]?></td>
    <td><?=$row[2]?></td>
  </tr>
<?
  }
?>

$row에는 배열의 형태로 $result 값이 차례로 들어감

While 문을 통해 $row로 들어간 값이 출력되게 함

성공!!!!! 인줄 알았지만 오류가 발생했음

게시판 목록에 title 부분이 title 값이 아닌 userPw 값이 들어가 있음

이를 수정해주기 위해 $query 값을 수정해줌

$query = "select userId,title,content from store";

query문에서 보여질 내용을 전체를 의미하는 *이 아닌 필요한 내용만 보여지게 userId,title,content로 수정

수정해주자 title에 정상적으로 title 값이 content에도 정상적으로 content가 채워지는 것이 확인됨

그!런!데!

수정하는 과정에서 글쓰기 버튼이 누락되었음

글쓰기 버튼을 생성해주자

<button class="btn btn-default"><a href="./board.html">WRITE</a></button>
<button class="btn btn-default"> <a href="./main.html">HOME</a></button>

아래 부분에 버튼을 생성하는 소스를 추가해줌

완성~!

form 안의 버튼 submit 실행 차단

이제 두번째 실습인 form 안의 버튼 submit 실행 차단을 해보자

가끔씩 페이지 이동을 위한 버튼을 눌렀는데 submit이 실행되는 등의 오류가 발생함

그래서 오류 해결을 위해 구글신을 활용해봄

검색을 해보자 이런 방법의 해결책이 나옴

그래서 submit이 실행되지 말아야하는 모든 버튼을 저렇게 수정해줌

하!지!만!

혹시나 그럼에도 불구하고 오류가 생길까봐 두려운 마음이 생겨 form안의 실행되지 말아야하는 버튼을 모두 form 밖으로 내보내야겠다고 생각함

그래서~!

<button type="submit">WRITE</button>
</form>
<button type="button"> <a href="./list.php">BOARD LIST</a></button>

이렇게 수정해줌

이렇게 두번째 실습도 완료~!

배경화면 반복 오류 수정

페이지의 배경이 이렇듯 바둑판처럼 반복이 됨

보기에 좋지 않아 이를 수정해보려함. 시작해보자~!

<main.css>

{
        background-image: url('./images/dfdf2.jpg');
        background-repeat: no-repeat;
        background-position: left top;
        background-attachment: fixed;
}

이미지 url 밑에 배경의 반복을 막아주도록 no-repeat와 좌측 상단에 고정되도록 설정해줌

그러자 이렇게 왼쪽 상단에 이미지가 고정된채 배경을 가득 채우지 못함

{
        background-image: url('./images/dfdf2.jpg');
        background-repeat: no-repeat;
        background-position: left top;
        background-attachment: fixed;
        background-size: cover;
    }

그래서 가장 아래 부분에 가득 채우기 위한 배경 사이즈를 cover로 설정해줌

그러자 이렇게 배경이 가득채워진 것을 확인할 수 있음

맘에 드는 배경으로 변경해줌

그런데 이미지를 가득 채워지게 만들자 이미지의 화질이 안 좋아진다는 단점이 생김

그래서

http://waifu2x.udp.jp/에서 이미지의 화질을 최대한 좋게 만들어줌

큰 차이는 없어보이지만 좋아진 화질로 배경화면 수정도 완성됨!

이렇게 이번주 실습이 끝났다

다음주부터는 게시판에 글 수정, 삭제 기능 등의 기능을 추가하고 첨부파일 첨부 등의 기능도 추가할 예정이다!

끝~!