0

웹에이전시 전문 프리랜서 개발자 프리터코더입니다.

이번 챕터에서는 웹사이트 개발 과정 중 백오피스 로그인 폼 변경을 작업합니다.

<백오피스 로그인 폼 변경> 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게 일하나 시리즈 중 하나입니다.

1

로그인 폼에서 로그인 버튼을 누르면 ID와 비밀번호가 서버로 전달되어야 합니다. 이 값을 서버가 받아서 로그인을 처리해야 하니까요.

2

HTML 에서 서버로 값을 전달하기 위해서는 <form> 태그로 전달할 내용을 감싸야 합니다.

퍼블리셔팁
데이터를 입력하는 항목은 form 태그로 감싸주세요.
가끔 퍼블리싱을 받아서 개발자가 직접 form 태그로 감싸놓고 나면 css 가 깨지는 경우가 있더라고요.

3

서버로 값을 전달하는 버튼은 <a> 링크가 아니라 input submit 타입으로 지정해야 합니다. 따라서 로그인 버튼도 변경이 필요합니다.
login/index.php 파일을 다음과 같이 수정합니다.

퍼블리셔팁
제출 버튼은 a 태그 대신 input 태그나 submit 태그로 해 주세요. 가끔 스타일시트에 제출 버튼 css 가 .form > a {color:red;} 이런 식으로 작성되어 있는 경우를 보는데 a 태그로는 서버에 값을 제출할 수 없기 때문에 부득이하게 태그를 바꿔야 하고, 그러면 css 가 적용되지 않는 이슈가 생겨요.

4

name 속성을 빠뜨렸네요. <form> 태그 안의 항목은 name 속성이 있어야 서버로 값을 전달할 수 있습니다.

id="admin_id" name="admin_id"

id="admin_pw" name="admin_pw" placeholder="비밀번호">

퍼블리셔팁
form 태그 안의 값들 중 서버로 전달하는 값들 (ex. ID, 비밀번호, 제목, 본문.. 등) 은 name 필드를 붙여주세요. 값은 id 와 똑같아도 괜찮아요.

5

화면은 이렇게 바뀝니다.

개발 요청은 프리터 코더 소개를 읽어보시고, 이메일 로 부탁드립니다.