select문 index.php

<select id="sort" onchange="changeFn()">
  <option value="none" hidden><?=selectdefalut();?></option>
  <option value="1">Hit 높은순</option>
  <option value="2">Hit 낮은순</option>
  <option value="3">최신순</option>
  <option value="4">오래된순</option>
  <option value="5">Default</option>
</select>

실행하면 나타나는 화면

<option value="none" hidden><?=selectdefalut();?></option> 를 넣은 이유

1. 처음 접속했을 때 Default로 첫번째컬럼 오름차순으로 설정되어있지만 이 코드를 넣지 않는다면 첫번째 옵션이 나타난다 (실행x)

2. 클릭해도 클릭한 option의 글이 나타나는 것이 아닌 첫번째 option의 글로 갱신된다.

코드 입력 전

클릭 전	->	클릭후
	->

코드 입력 후

클릭 전	->	클릭후
	->

selectdefalut함수

-Hidden태그 안에 있음

function selectdefalut(){
  if(isset($_GET['sort'])){
    if($_GET['sort'] == 1){
      echo $str="Hit 높은순";
    }elseif($_GET['sort'] == 2){
      echo $str="Hit 낮은순";
    }elseif($_GET['sort'] == 3){
      echo $str="최신순";
    }elseif($_GET['sort'] == 4){
      echo $str="오래된순";
    }elseif($_GET['sort'] == 5){
      echo $str="Default";
   }
  }else{
   	echo "Default";
  }
}

Why?

<option value="none" hidden><?=selectdefalut();?></option>을 select 문에 넣고 실행 할 때 실행 되는 함수이며 코드 입력 후 예시가 가능하게 하는 함수이다.

changeFn 함수 sort.js 새로만듬

function changeFn(){
	var sort = document.getElementById("sort").value;
    self.location.href="index.php?sort="+sort;
}

Why?

• 이 함수는 select 태그에서 option으로 선택된 값을 get방식으로 반환하는 함수이다.
• getElementById 함수로 select문에 입력된 id값을 가져온다.
• .value를 getElementById뒤에 입력함으로써 클릭된 option에 지정된 value값을 가져 올수 있다.

예시

받아온 get값 sql문에 넣도록하는 절차

$sql="SELECT * FROM board ORDER BY $col $sort

if(isset($_GET['sort'])){
	if($_GET['sort'] == 1){
         $col="hit";
         $sort="DESC";
    }elseif($_GET['sort'] == 2){
         $col="hit";
         $sort="ASC";
    }elseif($_GET['sort'] == 3){
         $col="date";
         $sort="DESC";
    }elseif($_GET['sort'] == 4){
         $col="date";
         $sort="ASC";
   	}elseif($_GET['sort'] == 5){
         $col="idx";
         $sort="ASC";
    }
}else{
	$col= "idx";
	$sort= "ASC";}

Why?

• 위 예시처럼 URL로 받은 GET 문자에 따라 지정된 변수에 값을 지정하고
  SQL문에 입력하게 하는 코드이다.

--Normaltic Study 6주차--