코드이그나이터4 뷰 다루기 - 4 - 라디오 버튼

고은연·2021년 3월 16일
0

여러개의 항목 중 하나를 선택하는 라디오 버튼에 대해 알아보겠습니다.
우리가 만들 페이지는 아래와 같습니다.

이번 챕터의 코드는 https://github.com/koeunyeon/ci4/tree/view-radio 에 있습니다.


View 컨트롤러에 아래의 메소드를 추가합니다.

app/Controllers/View.php
public function radio()
{
    $sports_data = [ // (1)
        "baseball" => "야구",
        "soccer" => "축구",
        "basketball" => "농구",
    ];

    $checked = $this->request->getPost("sports") ?? "baseball"; // (2)

    return View("/view/radio",
        [
            "sports_data" => $sports_data,
            "checked" => $checked
        ]
    );
}

코드를 확인해 보겠습니다.
(1) 스포츠 데이터를 연관배열로 정의합니다. 키는 HTML에서 사용할 name이고, 값은 HTML에 표시할 "이름"입니다.

(2) ?? 연산자는 "NULL 병합 연산자" 혹은 중복 연산자라고 부릅니다. 첫번째 항목이 null이거나 값이 없을 때 (boolean 연산에서 false로 간주되는 경우) ?? 오른편의 값을 보여줍니다. PHP 7에서 도입된 연산자로 PHP 5.x 버전대에서는 아래와 같이 사용했었습니다.

$this->request->getPost("sports") ? $this->request->getPost("sports"): "baseball"

위 코드는 사용자가 라디오 버튼을 선택했을 경우에는 선택한 항목의 키(name)을, 그렇지 않으면 기본값으로 "baseball"을 뷰에 표시할 수 있도록 $checked 변수에 넣습니다.


뷰를 추가하겠습니다.

app/Views/view/radio.php
<form method="POST">
    <?php foreach ($sports_data as $sports_key => $sports_name) : ?>
        <?= $sports_name ?>
        <input type="radio" name="sports" value="<?= $sports_key ?>" <?= $checked == $sports_key ? "checked='checked'" : '' ?> />  <!-- (1) --> <!-- (2) -->
    <?php endforeach; ?>
    <p><input type="submit" value="확인"/></p>
</form>

코드를 확인해 보겠습니다.
(1) 라디오 버튼은 여러개의 라디오 버튼 중 하나의 버튼을 선택하는 것입니다. 따라서 여러개의 라디오 버튼은 동일한 name 속성을 가집니다. 예제에서는 `name="sports"로 모든 라디오 버튼의 이름이 동일한 것을 볼 수 있습니다.

(2) 라디오 버튼이 선택되었는지 표기하는 방법은 체크박스와 동일하게 checked="checked" 속성을 input 태그에 설정하면 됩니다.
컨트롤러에서 $checked 변수에 어떤 라디오 버튼을 선택할 지 전달받았으므로 그 값을 기준으로 선택 여부를 렌더링합니다.


브라우저에서 http://localhost:8080/view/radio에 접속해 결과를 확인합니다.

profile
중년 아저씨. 10 + n년차 백엔드 개발자. 스타트업과 창업, 솔로프리너와 1인 기업에 관심 많아요.

0개의 댓글