부트스트랩으로 로그인 페이지 만들기

[이 블로그는 해킹 공부하면서 가볍게 정리용으로 기록 및 내 생각을 끄적여 두기 위한 블로그(라 쓰고 일기라 읽는)이다.]

 

지난번에 만들어 놓은 간단한 로그인 페이지 코드를 부트스트랩을 활용해 웹 페이지를 꾸며보았다. 사실상 페이지 소스를 긁어와서 복붙 하면 끝인 아주 간단한 작업이다. 하지만 잘 만들어 놓은 페이지의 코드를 보면 너무 장황하여 어지러울 지경이다.

 

작업은 vi 에디터를 쓰면 불편하여 vs code 프로그램을 사용했다. 

 

[작업 순서]

1. 구글에 bootstrap 검색하여 공식 홈페이지 들어가기
2. 예시 탭에서 sign-in 이라는 로그인 폼 클릭
3. 로그인 페이지에서 오른쪽 마우스 클릭하여 소스 보기 선택
4. Ctrl+A 하여 복사 -> vs code에 붙여 넣기
5. 필요한 부분 수정하기
6. SFTP로 리눅스 서버로 옮기기

 

부트스트랩 로그인 페이지

 

깔끔한 부트스트랩의 로그인 페이지 화면이다. 아이콘은 그대로 유지한 채 이메일 주소로 되어있는 입력화면을 아이디와 패스워드로 바꿔주고 ID : admin, PW : admin1234로 로그인 했을 때 로그인 확인 문구를 보여주는 화면으로 바꿔 줄 것이다.

 

 

작업 순서 5번의 과정만 간략하게 정리해 보겠다.

 

로그인 페이지의 아이콘 이미지 경로

 

 

우선 로그인 페이지 아이콘의 경로를 링크로 바꿔줘야 한다. 저렇게 하면 이미지를 표시할 수 없다고 뜬다. (아마 부트스트랩 서버의 파일경로로 또는 파일경로 예시로 추정)

방법은 간단하다. 작업 순서 2번 후에 뜨는 로그인 페이지에서 보라색배경에 B라고 쓰여있는 아이콘에 오른쪽 클릭하여 링크 주소 복사 선택을 하고 위 사진에 보이는 이미지 소스에 붙여 넣기 하면 된다. (html 문서로 저장하여 코드가 잘 들어갔는지 중간 저장 후 pc에서 페이지를 확인해 보자.)

 

 

로그인 입력 페이지 코드

 

그대로 복사 붙여 넣으면 input에 email로 되어있는 걸 id로 바꿔주고 라벨도 바꿔주면 된다. 유튜브를 참고하면서 작업하다가 나한테는 하드코어해서 간단히 만들어보았다. 여기서 버튼 태그를 타입 button이 아니라 원래 써져 있던 submit으로 유지해 주면 된다. 저거 바꾸고 안 돼서 한참 헤맸다...

그러고 action에 있는 loginok.php 는 지난 글에 login_ok.php 랑 똑같이 코드를 작성해 주면 돼서 생략하겠다.

 

마지막으로 터미너스 SFTP로 리눅스서버에 드래그&드롭으로 옮겨주고 페이 지를 띄워보자.

 

 

수정한 로그인 입력 페이지

 

 

로그인 확인 페이지

 

 

어디서 button에 타입을 지정 안 하면 자동으로 submit이 된다 하여 생각 없이 그렇게 했는데, 태그랑 타입이랑 착각해서 타입에 버튼 넣고 한참 헤맸다. (유튜브 보고 따라 하다 어려워서 중간에 멈춰 삽질.. 아마 유튜버는 버튼에 value를 넣고 그거를 또 변수지정 해주고 그러는 작업을 하려 했던 듯싶다. ) 사실 버튼이 안 눌리면 버튼 관련 코드를 보면 되는데 다른 엉뚱한 거를 확인하고 있었다. 남이 만든 코드를 조금 수정하는 작업도 초보자한테는 어려운 과정이다. (생각하고 행동하자)