제공: 한빛미디어 네트워크 기사
저자: Gavin Andresen, 한동훈 역
원문: http://www.onlamp.com/pub/a/php/2006/03/16/autofill-forms.html
나는 타이핑하는 것은 싫어하지만 코드를 작성하는 것은 좋아한다. 한동안 PHP에서 폼을 다루기 위해 필요한 기계적인 코드들을 타이핑했던 적이 있었는데, 그 이후로 "보다 좋은 방법"을 찾아나서기 시작했다. 이 글에서는 내가 PHP 정규식을 사용해서 폼을 처리하는 데 필요한 많은 작업들을 어떻게 제거했으며, 내가 싫어하는 타이핑을 줄이고, 코드를 작성하거나 넷핵(
NetHack )을 즐기는 데 시간을 할애하게 되었는지 설명할 것이다.
문제
제프 콕스웰(Jeff Cogswell)은
PHP와 CSS를 사용한 사용자 친화적인 폼 검증 에서 일반적인 문제를 기술했다. 즉, 폼을 화면에 표시하고, 입력을 검증하고, 감사 페이지를 보여주거나, 검증이 실패하면 사용자가 입력한 값과 폼에 에러가 난 부분들을 표시해서 다시 보여주는 등의 일반적인 문제를 기술했다. 나는 깔끔하고 세련돼 보이는 웹 사이트를 위해 많은 돈을 지불하는 고객들을 위해 폼을 작성하기 때문에, 폼은 항상 멋있어야 하고, 사이트의 나머지 부분들과도 잘 조화되어야 한다.
지루한 입력에 대한 해결책
문제를 해결하는 가장 쉬운 방법은 위지윅 HTML 에디터를 사용해서 멋있는 폼을 만들고, 적절한 위치에 폼 값과 에러 메시지를 표시하기 위한 PHP 코드를 추가하는 것이다. 예를 들어, 폼에 "email,"이라는 필드 이름을 갖고 있다면, 나는 이 필드를 검증하기 위해 다음과 같은 PHP 코드를 사용한다.
$validationData = array();
$validationData["email"] =
array("isRequired", type="emailAddress");
$formErrors = validateForm($_POST, $validationData)
나쁘지 않아 보인다. validateForm() 함수를 한번 작성하기만 하면 계속에서 이것을 사용할 수 있고, 다른 값을 처리할 필요가 있을 때 마다 그에 해당하는 처리를 확장하면 된다.
에러와 올바른 값을 폼에 표시하는 것은 다소 지저분하다. 조금 간단한 HTML은 다음과 같다.
Email:
이제, HTML과 PHP로 섞인 미로가 시작된다.
>
Email:
폼에 있는 모든 필드에 대해서 이를 반복하는 것은 번거롭다. 특히, 50개나 되는 주를 선택하는 "살고 있는 주를 선택하세요" 같은 드롭다운 목록에 사용된
태그의 value에 이 같은 코딩을 하는 것은 너무 끔찍한 일이어서 차라리 배관공이 되는 게 나을 것이다.
문제, 다시 설명하는 버전
fillInFormValues의 동작
$html은 폼에 사용할 HTML 마크업을 포함한다. fillInFormValues는 어떤 HTML을 전달해도 관계없다. 즉, HTML3, HTML4, XHTML을 처리할 수 있으며, HTML 전체를 전달하거나 폼의 입력 필드가 있는 HTML의 일부분을 전달해도 상관없다. fillInFormValues는 표준 HTML 테스트 를 통과한 것이면 된다. HTML을 전달할 때 와 같은 닫기 태그를 생략하면 안된다. 일부 브라우저는 이를 허용하지 않기 때문에 화면에 표시되지 않을 수 있다.
$values는 폼에서 표시할 값들을 갖고 있는 PHP 배열이며, 형식은 $values["fieldName"] = fieldValue이다. 폼 검증 오류 때문에 폼을 다시 표시하려면 $_POST, $_GET, $_REQUEST 중에 하나를 전달하면 된다.
$errors는 검증 오류 메시지를 갖고 있는 PHP 배열이며, 형식은 $errors["fieldName"] = "error message"이다. fillInFormValues는 HTML에서 요소를 찾아서, 에러 메시지를 삽입한다. 폼 텍스트를 마크업 하려면 태그를 사용해야 한다.
Street Address:
fillInFormValues는 $errors["address"]가 설정되어 있으면 있으면 해당 에 class="error"을 추가한다. CSS는 label.error: color:red;와 같이 간단한 규칙을 정의하고, 에러가 발생한 부분을 빨간색으로 표시한다. 태그를 사용하면 스크린 리더기나 다른 보조 도구를 사용하는 사람들에게 보다 접근성을 높일 수 있으며 , 사용자가 Street Address 텍스트를 클릭하면 address 필드에 커서를 위치할 것을 브라우저에게 지시해준다. 레이블은 입력 필드의 id 속성에서 일치시키는 것이며, name 요소로 일치시키는 것이 아니라는 것에 주의해야 한다.(내 경우엔 name과 ID에 모두 같은 이름을 사용한다)
fillInFormValues는 $values와 $errors를 표시할 수 있는 $html을 가능한한 수정하지 않은 형태로 반환한다. 빈 배열을 전달하면 $html은 변경되지 않으며, 처음에는 이런식으로 화면을 표시하는 것이 쉽다. 완전히 동작하는 예제는 이곳 에서 볼 수 있다.
fillInFormValues: short example
Sign up for our newsletters
PLACEHOLDER FOR FORM ERRORS $info
", $html);
}
}
else {
$formErrors = array();
}
echo fillInFormValues($html, $request, $formErrors);
?>
페이지의 HTML을 fillInFormValues에 전달할 수 있는 PHP 문자열로 얻기 위해 PHP의 출력 버퍼링 루틴인 ob_start, ob_get_contents, ob_end_clena을 사용했다. fillInFormValues는 $validationData 배열에 값을 채우는 것 뿐만 아니라 어떤 종류의 폼에 대해서도 사용할 수 있다. 예를 들어, 보험회사의 웹 사이트에서 볼 수 있는 끔찍한 폼에 대해서도 이 함수를 사용해서 값을 채울 수 있다.
fillInFormValues의 구현
태그를 찾기 위한 정규표현식은 다음과 같다.
/]*)>/i
왼쪽에서 오른쪽으로 읽어가면 된다. 첫번째 /는 정규식의 시작을 의미한다. ]*과 같은 이상한 표현은 "> 문자를 제외한 모든 문자"를 의미한다. 괄호 다음에 >은 문자 ">"을 의미한다. /i는 정규식의 끝을 의미하며, i는 이나 등을 찾을 수 있게끔 지정하는 것으로 대소문자 구분을 하지 않는 것을 의미한다.
XML_HTMLSax 을 사용해야 한다.
function fillInLabel($matches)
{
global $formErrors;
global $idToNameMap;
$tag = $matches[0];
$for = getAttributeVal($tag, "for");
if (empty($for) or !isset($idToNameMap[$for])) { return $tag; }
$name = $idToNameMap[$for];
if (array_key_exists($name, $formErrors)) {
return replaceAttributeVal($tag, "class", "error");
}
return $tag; // No error.
}
preg_replace_callback에 전달된 콜백 함수는 항상 인자가 하나 있다. 이 인자는 정규식으로 검색된 내용에 대한 배열이다. $matches[0]는 전체 내용을 의미하며, $matches[1]은 괄호의 첫번째 집합에 의해 일치된 내용이 된다. 여기서 $matches[0]는 전체 태그이다. label의 속성을 가져오고, $formErrors 배열에서 해당하는게 있는지 확인한다. 만약, 같은 것을 발견하면 label의 class 속성을 class="error"와 같이 변경한다. label에서 해당 에러가 없으면 함수는 태그를 변경하지 않는다. fillInLabel()에 필요한 정보를 전달하기 위해 전역변수를 사용했다.
,
$endTag = $matches[4]; // The tag
$name = fillInFormHelper::getAttributeVal($tag, "name");
if (empty($name)) { return $matches[0]; }
$id = fillInFormHelper::getAttributeVal($tag, "id");
if (!empty($id)) { $this->idToNameMap[$id] = $name; }
if (!array_key_exists($name, $this->request)) { return $matches[0]; }
return $tag.htmlspecialchars($this->request[$name]).$endTag;
}
/**
* Returns modified tag, based on values in $vals.
*
* @param array $matches
* @return string Returns tag with selected="selected" or not.
*/
function fillInOption($matches)
{
$tag = $matches[1]; // The option tag
$valueAfter = $matches[2]; // Potential value (stuff after option tag)
$val = fillInFormHelper::getAttributeVal($tag, "value");
if (empty($val)) { $val = trim($valueAfter); }
if (in_array($val, $this->selectVals)) {
return fillInFormHelper::replaceAttributeVal($tag, "selected", "selected").$valueAfter;
}
else {
return fillInFormHelper::replaceAttributeVal($tag, "selected", null).$valueAfter;
}
}
var $selectVals;
/**
* Returns modified tag, based on values in $request.
*
* @param array $matches
* @return string
*/
function fillInSelect($matches) {
$tag = $matches[1];
$options = $matches[3];
$endTag = $matches[4];
$name = fillInFormHelper::getAttributeVal($tag, "name");
if (empty($name)) { return $matches[0]; }
$id = fillInFormHelper::getAttributeVal($tag, "id");
if (!empty($id)) { $this->idToNameMap[$id] = $name; }
if (strpos($name, "[]")) {
$name = str_replace("[]", "", $name);
}
if (!array_key_exists($name, $this->request)) { return $matches[0]; }
$this->selectVals =
(is_array($this->request[$name])?$this->request[$name]:array($this->request[$name]));
// Handle all the various flavors of:
// foo OR foo
$s = fillInFormHelper::getTagPattern("option");
$pat = "!$s(.*?)(?=($|( tag, based on $formErrors.
*
* @param array $matches
* @return string
*/
function fillInLabel($matches) {
$tag = $matches[0];
$for = fillInFormHelper::getAttributeVal($tag, "for");
if (empty($for) or !isset($this->idToNameMap[$for])) { return $tag; }
$name = $this->idToNameMap[$for];
if (array_key_exists($name, $this->formErrors)) {
return fillInFormHelper::replaceAttributeVal($tag, "class", "error");
}
return $tag; // No error.
}
/**
* Returns modified list with $formErrors error messages.
*
* @return string
*/
function getErrorList() {
$result = "";
foreach (array_unique($this->formErrors) AS $f => $msg) {
if (!empty($msg)) {
$result .= "".htmlspecialchars($msg)." \n";
}
}
if (empty($result)) { return ""; } // No errors: return empty string.
$result = "";
return $result;
}
} // End of helper class.
다른 방법
HTML_QuickForm 과 같은 멋진 도구를 알고 있다. 대부분의 패키지들이 폼 검증과 다시 표시하는 것을 자동화해주지만, 나는 HTML을 생성하기 위해 PHP를 사용하는 것을 좋아하지 않는다. 나는 가능한 한 화면(HTML)과 응용프로그램 로직(PHP 코드)을 분리하는 것을 좋아한다. 웹 페이지 형태로 편집하는 것을 매우 좋아하기 때문에 드림위버와 같은 위지윅 에디터를 사용한다.
단순한 것이 최선이다
스마티(Smarty) 의 블록 함수로 등록해두었따. 어쨌거나 이 기능을 사용하기 시작한 이후로는 배관공이 되려는 유혹을 느낄 필요가 없었다.
소스 다운로드
소스 코드는 여기에서 다운로드 받을 수 있으며, fillInFormValues에 사용할 수 있는 소스 코드와 유닛테스트를 다운받을 수 있는 압축파일로 제공한다.
