저는 한 달 동안 회사에서 인턴으로 일했어요. 10년 넘게 학생 생활을 하다가 갑자기 직원이 됐어요. "수업에 가세요"라는 말에서 "회사에 가세요"라는 말까지. 생활 방식, 학습 스타일, 심지어 친구 관계 등 어느 정도 불편함이 있을 것입니다. 처음부터 회사의 근무 환경에 적응하는 방법, 유능한 직원이 되기 위해 배우는 방법, 회사의 요구에 적응하기 위해 어떤 지식을 배워야 하는지, 그 중 어떤 지식이 있는지 전혀 몰랐습니다. 내가 해야 할 일 하나. 지금까지 나는 마침내 내가 무엇을 좋아하는지, 무엇이 적합한지, 내 목표가 무엇인지를 알게 되었고, 한걸음 한걸음씩 나아가려고 노력하고 있습니다. 모든 직업과 모든 경험은 어떤 면에서 나에게 큰 영감을 줄 것이라고 믿습니다.
열심히 노력할수록 행운이 찾아오겠죠 어서~!
1. 주요 기능 및 도구
1>Mysql 데이터베이스 및 부트스트랩 프레임워크 사용
2> 간편인증으로 로그인, 등록 기능 구현 가능
3> 이메일 보내기, 이메일 보기, 수신자 선택 기능
4>메시지를 보낼 때 제목 내용을 지정할 수 있습니다
2. 주의사항
1> 제출 버튼은 태그를 사용하지만 버튼 태그는 사용할 수 없습니다. 문제가 발생했습니다. 요청 버튼을 찾을 수 없습니다.
2> PHP 코드와 페이지가 별도로 작성되는 경우가 있는데, 이는 페이지의 아름다움에 영향을 미칩니다.
3> 로그인 시 세션을 이용하여 로그인한 사용자를 저장해주세요
4>로그인 인증 문제
5> 보낸 편지함과 받은 편지함을 보기 위한 SQL 문은 받는 사람과 보낸 사람의 조건을 작성해야 합니다. 그렇지 않으면 모든 편지함의 내용이 표시됩니다.
6> 일부 값이 비어 있는 경우 판단문을 작성해야 합니다
7> 서식에 주의하세요! ! 점점 나아지고 있어서 글이 정말 지저분하네요~!
3. 데이터베이스 디자인
1>사용자 테이블: ID, userID, 사용자 이름, 비밀번호, verifyPassword, isAdmin, emial
2>이메일 내용: emailBoxID,수신자,발신자,제목,내용
4. 아이디어 및 단계
1>로그인 인터페이스 구현
2>데이터베이스 디자인
3>메인 인터페이스 및 등록 인터페이스 설계 및 구현
4>이메일 보내기 메일링 리스트 보낼 편지함 인터페이스 설계 및 구현
5> 단점을 찾아 보완한다
5. 로그인 페이지
<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="text/html; charset=utf-8"</span> <span style="color: #0000ff;">/></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>邮箱登录<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="../bootstrap/css/bootstrap.min.css"</span><span style="color: #0000ff;">/></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="../bootstrap/js/jquery.min.cs"</span><span style="color: #0000ff;">/></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="../bootstrap.min.js"</span><span style="color: #0000ff;">/></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;"> html,body</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #A3D5FB</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;"> .login-box</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> max-width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 400px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 700px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> margin-top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> -200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;"> .form-group</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> margin-bottom</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 30px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;"> .login-title</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> rgba(0,0,0,0.6) </span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;"> .login-title small</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #fff</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;"> .login-content</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 400px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> max-width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 500px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> rgba(255,255,255,0.6)</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> float</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> left</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;"> @media screen and (min-width:500px)</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> .login-box { left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> margin-left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> -250px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;"> } .btn</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 6px 30px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;"> .input-group</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> margin-bottom</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0px 0px 30px 0px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;"> .form-control</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;"> .link p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> line-height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> margin-top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 30px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">></span> <span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> doSubmit() { </span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;">($(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">#username</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).value()){ alert(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">用户名不能为空</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">); </span><span style="background-color: #f5f5f5; color: #0000ff;">return</span><span style="background-color: #f5f5f5; color: #000000;">; } </span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;"> ($(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">#password</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).value)) { alert(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">密码不能为空</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">); </span><span style="background-color: #f5f5f5; color: #0000ff;">return</span><span style="background-color: #f5f5f5; color: #000000;">; } $(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">form1</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).submit(); } </span><span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="login-box"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="login-title text-center"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">><</span><span style="color: #800000;">small</span><span style="color: #0000ff;">></span>站内信登录<span style="color: #0000ff;"></</span><span style="color: #800000;">small</span><span style="color: #0000ff;">></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="login-content"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">form </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="form1"</span><span style="color: #ff0000;"> method</span><span style="color: #0000ff;">="post"</span><span style="color: #ff0000;"> action</span><span style="color: #0000ff;">="../php/login.php"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;">用户ID</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="form-group"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-md-12"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="input-group"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="input-group-addon"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="glyphicon glyphicon-user"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="userID"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="userID"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="form-control"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="用户ID"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;">密码</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="form-group"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-md-12"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="input-group"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="input-group-addon"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="glyphicon glyphicon-lock"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="password"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="password"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="password"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="form-control"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="密码"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;">登录按钮</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="form-group"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-md-4 col-md-offset-4"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-info active navbar-btn "</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="登录"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="form-group"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-md-12 col-md-offset-9 link"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="input-group"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="text-center remove-margin"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="javascript:void(0)"</span><span style="color: #0000ff;">></span>忘记密码<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
6. 도움말 수업
<span style="color: #008080;"> 1</span> <?<span style="color: #000000;">php </span><span style="color: #008080;"> 2</span> <span style="color: #0000ff;">if</span> (!<span style="color: #0000ff;">isset</span> (<span style="color: #800080;">$_SESSION</span><span style="color: #000000;">)) { </span><span style="color: #008080;"> 3</span> <span style="color: #008080;">ob_start</span><span style="color: #000000;">(); </span><span style="color: #008080;"> 4</span> <span style="color: #008080;">session_start</span><span style="color: #000000;">(); </span><span style="color: #008080;"> 5</span> <span style="color: #000000;">} </span><span style="color: #008080;"> 6</span> <span style="color: #008080;">header</span>("Content-type:text/html;charset=utf-8"<span style="color: #000000;">); </span><span style="color: #008080;"> 7</span> <span style="color: #800080;">$conn</span>=<span style="color: #008080;">mysql_connect</span>('127.0.0.1','root','root'<span style="color: #000000;">); </span><span style="color: #008080;"> 8</span> <span style="color: #0000ff;">if</span>(<span style="color: #800080;">$conn</span><span style="color: #000000;">) { </span><span style="color: #008080;"> 9</span> <span style="color: #008080;">mysql_select_db</span>("MailUserManage", <span style="color: #800080;">$conn</span><span style="color: #000000;">); </span><span style="color: #008080;">10</span> <span style="color: #008080;">mysql_query</span>("set names 'utf-8'"<span style="color: #000000;">); </span><span style="color: #008080;">11</span> <span style="color: #000000;"> } </span><span style="color: #008080;">12</span> <span style="color: #0000ff;">else</span><span style="color: #000000;"> { </span><span style="color: #008080;">13</span> <span style="color: #0000ff;">die</span><span style="color: #000000;">(); </span><span style="color: #008080;">14</span> <span style="color: #000000;"> } </span><span style="color: #008080;">15</span> ?>
7. 로그인 기능 구현
<span style="color: #008080;"> 1</span> <?<span style="color: #000000;">php </span><span style="color: #008080;"> 2</span> <span style="color: #0000ff;">require_once</span>("helper.php"<span style="color: #000000;">); </span><span style="color: #008080;"> 3</span> <span style="color: #008080;"> 4</span> <span style="color: #008080;"> 5</span> <span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">isset</span>(<span style="color: #800080;">$_POST</span>['submit'<span style="color: #000000;">])) </span><span style="color: #008080;"> 6</span> <span style="color: #000000;">{ </span><span style="color: #008080;"> 7</span> <span style="color: #800080;">$userID</span>=<span style="color: #800080;">$_POST</span>['userID'<span style="color: #000000;">]; </span><span style="color: #008080;"> 8</span> <span style="color: #800080;">$password</span>=<span style="color: #800080;">$_POST</span>['password'<span style="color: #000000;">]; </span><span style="color: #008080;"> 9</span> <span style="color: #800080;">$sql</span>="select * from Users where userID='<span style="color: #800080;">$userID</span>'"<span style="color: #000000;">; </span><span style="color: #008080;">10</span> <span style="color: #800080;">$result</span>=<span style="color: #008080;">mysql_query</span>(<span style="color: #800080;">$sql</span>) or <span style="color: #0000ff;">die</span>("帐号不正确"<span style="color: #000000;">); </span><span style="color: #008080;">11</span> <span style="color: #800080;">$num</span>=<span style="color: #008080;">mysql_num_rows</span>(<span style="color: #800080;">$result</span><span style="color: #000000;">); </span><span style="color: #008080;">12</span> <span style="color: #0000ff;">if</span>(<span style="color: #800080;">$num</span><span style="color: #000000;">) { </span><span style="color: #008080;">13</span> <span style="color: #800080;">$row</span>=<span style="color: #008080;">mysql_fetch_array</span>(<span style="color: #800080;">$result</span><span style="color: #000000;">); </span><span style="color: #008080;">14</span> <span style="color: #008080;">15</span> <span style="color: #0000ff;">if</span>(<span style="color: #800080;">$row</span>['password']==<span style="color: #800080;">$password</span><span style="color: #000000;">) { </span><span style="color: #008080;">16</span> <span style="color: #0000ff;">echo</span> "登录成功,正在为您跳转至邮箱首页"<span style="color: #000000;">; </span><span style="color: #008080;">17</span> <span style="color: #800080;">$_SESSION</span>['Users']=<span style="color: #800080;">$_POST</span>['userID'<span style="color: #000000;">]; </span><span style="color: #008080;">18</span> <span style="color: #008080;">header</span>("Location:../index.php"<span style="color: #000000;">); </span><span style="color: #008080;">19</span> <span style="color: #000000;"> } </span><span style="color: #008080;">20</span> <span style="color: #0000ff;">else</span><span style="color: #000000;"> { </span><span style="color: #008080;">21</span> <span style="color: #0000ff;">echo</span> "<script>alert('密码错误,请重新输入');</script>"<span style="color: #000000;">; </span><span style="color: #008080;">22</span> <span style="color: #008080;">mysql_close</span><span style="color: #000000;">(); </span><span style="color: #008080;">23</span> <span style="color: #000000;"> } </span><span style="color: #008080;">24</span> <span style="color: #000000;"> } </span><span style="color: #008080;">25</span> <span style="color: #000000;"> } </span><span style="color: #008080;">26</span> <span style="color: #0000ff;">else</span><span style="color: #000000;">{ </span><span style="color: #008080;">27</span> <span style="color: #0000ff;">echo</span> "<script>alert('请登录用户');</script>"<span style="color: #000000;">; </span><span style="color: #008080;">28</span> <span style="color: #000000;"> } </span><span style="color: #008080;">29</span> <span style="color: #008080;">30</span> ?>
8. 등록 인터페이스
<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 2</span> <span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">머리</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">메타 </span><span style="color: #ff0000;">문자 집합</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">제목</span><span style="color: #0000ff;">></span>注册新用户<span style="color: #0000ff;"></</span><span style="color: #800000;">제목</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">링크 </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">= "../bootstrap/css/bootstrap.min.css"</span><span style="color: #0000ff;">/></span> <span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">링크 </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="../bootstrap/js/jquery.min.cs"</span> <span style="color: #0000ff;">/></span> <span style="color: #008080;"> 8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">링크 </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="../bootstrap.min.js"</span><span style="color: #0000ff;">/ ></span> <span style="color: #008080;"> 9</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">스크립트</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 10</span> <span style="color: #008080;"> 11</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">스크립트</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 12</span> <span style="color: #008080;"> 13</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">머리</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 14</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">스타일 </span><span style="color: #ff0000;">유형</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 15</span> <span style="background-color: #f5f5f5; color: #800000;"> 본체</span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 16</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 높이</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 17</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 배경색</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #A3D5FB</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 18</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 19</span> <span style="color: #008080;"> 20</span> <span style="background-color: #f5f5f5; color: #800000;"> .login-box</span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 21</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 너비</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 22</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 최대 너비</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 400px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 23</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 높이</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 800px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 24</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 위치</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 절대</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 25</span> <span style="background-color: #f5f5f5; color: #ff0000;">상위</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 26</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 여백-상단</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> -300px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 27</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 28</span> <span style="background-color: #f5f5f5; color: #800000;"> .form-group</span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 29</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 여백-하단</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 30px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 30</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 31</span> <span style="background-color: #f5f5f5; color: #800000;"> .login-title</span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 32</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 패딩</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 33</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 배경색</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> rgba(0,0,0,0.6) </span><span style="color: #008080;"> 34</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 35</span> <span style="background-color: #f5f5f5; color: #800000;"> .login-title small</span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 36</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 색상</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #fff</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 37</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 38</span> <span style="background-color: #f5f5f5; color: #800000;"> .login-content</span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 39</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 높이</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 500px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 40</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 너비</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 41</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 최대 너비</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 600px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 42</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 배경색</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> rgba(255,255,255,0.6)</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 43</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 부동</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 왼쪽</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 44</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 패딩탑</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 45</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 46</span> <span style="background-color: #f5f5f5; color: #800000;"> @media 화면 및 (최소 너비:500px)</span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 47</span> <span style="background-color: #f5f5f5; color: #ff0000;"> .login-box { </span><span style="color: #008080;"> 48</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 남음</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 49</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 왼쪽 여백</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> -250px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 50</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 51</span> <span style="background-color: #f5f5f5; color: #800000;">} </span><span style="color: #008080;"> 52</span> <span style="background-color: #f5f5f5; color: #800000;"> .btn</span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 53</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 패딩</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 6px 30px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 54</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 55</span> <span style="background-color: #f5f5f5; color: #800000;"> .input-group</span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 56</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 여백-하단</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 57</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 여백</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0px 0px 30px 0px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 58</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 높이</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 59</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 60</span> <span style="background-color: #f5f5f5; color: #800000;"> .form-control</span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 61</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 높이</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 62</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 63</span> <span style="background-color: #f5f5f5; color: #800000;"> .link p</span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 64</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 줄 높이</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 65</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 여백-상단</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 30px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;">66</span> <span style="color: #008080;"> 67</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;"> 68</span> <span style="background-color: #f5f5f5; color: #800000;"> .navbar-btn</span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="color: #008080;"> 69</span> <span style="background-color: #f5f5f5; color: #ff0000;"> 여백-상단</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="color: #008080;"> 70</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #008080;">71</span> <span style="color: #008080;"> 72</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">스타일</span><span style="color: #0000ff;">></span> <span style="color: #008080;">73</span> <span style="color: #008080;">74</span> <span style="color: #008080;"> 75</span> <span style="color: #008080;">76</span> <span style="color: #008080;"> 77</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">양식</span><span style="color: #ff0000;">방법</span><span style="color: #0000ff;">="게시물"</span><span style="color: #ff0000;">동작</span><span style="color: #0000ff;">= "../php/regist.php"</span><span style="color: #0000ff;">></span> <span style="color: #008080;">78</span> <span style="color: #008080;"> 79</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 80</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 81</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="login-box"</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 82</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="login-title text-center"</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 83</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">><</span><span style="color: #800000;">소형</span><span style="color: #0000ff;">></span>용户注册<span style="color: #0000ff;"></</span><span style="color: #800000;">작은</span><span style="color: #0000ff;">></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 84</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 85</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="login-content"</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 86</span> <span style="color: #008000;"><!--</span><span style="color: #008000;">사용자 ID</span><span style="color: #008000;">--></span> <span style="color: #008080;"> 87</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="form-group"</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 88</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-md-12"</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 89</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="input-group"</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 90</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">스팬 </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="input-group-addon"</span><span style="color: #0000ff;">></span>용<span style="color: #ff0000;"> </span>户<span style="color: #ff0000;"> </span>ID<span style="color: #0000ff;"></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 91</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">입력 </span><span style="color: #ff0000;">유형</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;">이름</span><span style="color: #0000ff;">= "사용자ID"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="userID"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="form-control"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="only It 문자와 숫자로 시작하며 길이는 6~10자입니다."</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 92</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 93</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 94</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008080;">95</span> <span style="color: #008080;"> 96</span> <span style="color: #008000;"><!--</span><span style="color: #008000;">비밀번호</span><span style="color: #008000;">--></span> <span style="color: #008080;"> 97</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="form-group"</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 98</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-md-12"</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 99</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="input-group"</span><span style="color: #0000ff;">></span> <span style="color: #008080;">100</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">스팬 </span><span style="color: #ff0000;">클래스</span><span style="color: #0000ff;">="input-group-addon"</span><span style="color: #0000ff;">></span>비밀번호<span style="color: #ff0000;"> </span>코드<span style="color: #0000ff;"></</span><span style="color: #800000;">스팬</span><span style="color: #0000ff;">></span> <span style="color: #008080;">101</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">입력</span><span style="color: #ff0000;">유형</span><span style="color: #0000ff;">="비밀번호"</span><span style="color: #ff0000;">이름</span><span style="color: #0000ff;">= "password"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="password"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="form-control"</span><span style="color: #ff0000;"> 자리 표시자</span><span style="color: #0000ff;">="6명 이상"</span><span style="color: #0000ff;">></span> <span style="color: #008080;">102</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008080;">103</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008080;">104</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008080;">105</span> <span style="color: #008080;">106</span> <span style="color: #008000;"><!--</span><span style="color: #008000;">비밀번호 확인</span><span style="color: #008000;">--></span> <span style="color: #008080;">107</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="form-group"</span><span style="color: #0000ff;">></span> <span style="color: #008080;">108</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-md-12"</span><span style="color: #0000ff;">></span> <span style="color: #008080;">109</span><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="input-group"</span><span style="color: #0000ff;">></span> <span style="color: #008080;">110</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">스팬 </span><span style="color: #ff0000;">클래스</span><span style="color: #0000ff;">="input-group-addon"</span><span style="color: #0000ff;">></span>确认密码<span style="color: #0000ff;"></</span><span style="color: #800000;">스팬</span><span style="color: #0000ff;">></span> <span style="color: #008080;">111</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">입력</span><span style="color: #ff0000;">유형</span><span style="color: #0000ff;">="비밀번호"</span><span style="color: #ff0000;">이름</span><span style="color: #0000ff;">= "configPassword"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="configPassword"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="form-control"</span><span style="color: #ff0000;"> 자리 표시자</span><span style="color: #0000ff;">="确认密码"</span><span style="color: #0000ff;">></span> <span style="color: #008080;">112</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008080;">113</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008080;">114</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008080;">115</span> <span style="color: #008000;"><!--</span><span style="color: #008000;">사용户昵称</span><span style="color: #008000;">--></span> <span style="color: #008080;">116</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">클래스</span>