HTML/CSS, PHP 및 MySQL을 사용한 로그인 양식

이 자습서에서는 HTML, PHP 및 MySQL 확장을 사용하여 로그인 양식을 만드는 방법을 보여줍니다. 이 인증 양식은 사용자가 자신의 계정에 액세스할 수 있는 권한을 부여하는 양식을 제출해야 할 때 사용됩니다.

로그인 양식을 만드는 네 단계:

1- 양식의 구조를 포함하는 HTML 파일을 만듭니다.
2- 스타일을 정의하는 CSS 파일을 만듭니다.
3- 양식 필드가 데이터베이스의 테이블 값과 일치하는지 확인하는 PHP 로그인 파일을 만듭니다.
4- 메인 페이지와 로그아웃의 PHP 파일을 만듭니다.

1단계:

먼저 HTML 페이지를 만듭니다login.php.

login.php:

 
 < 머리> 
 < 메타 문자 집합 = "utf-8"> 
  
 < 링크 rel = "스타일 시트"href = "style.css"미디어 = "화면"유형 = "텍스트 / CSS"/ > 
  
 < 몸> 
 < div id="컨테이너"입니다> 
  
 
 < 양식 action="verification.php" method="POST"> 
 < h1입니다> 로그인 
 
 < 상표> < 비> 사용자 이름 
 < input type="text" placeholder="사용자 이름 입력" name="username" 필수입니다> 

 < 상표> < 비> 암호 
 < input type="password" placeholder="비밀번호 입력" name="password" 필수입니다> 

 < 입력 유형 = "제출"ID = '제출'값 = '로그인'> 
  if(isset($_GET['오류'])){
 $err = $_GET['오류']; 
 if($err==1 || $err==2)
 에코 "< p 스타일 = '색상 : 빨간색'> 잘못된 사용자 또는 암호"; 
 }
 ?>

2단계:

이 스타일은 로그인 창에 서식을 추가합니다.

style.css:

body{
 background:  #67BE4B; 
}
#container{
 너비:400px; 
 여백:0 자동; 
 마진 상단:10%; 
}
/* 테두리 있는 형태 */
form {
 너비:100%; 
 패딩 : 30px; 
 테두리 : 1px 솔리드 #f1f1f1; 
 배경: #fff; 
 상자 그림자 : 0 0 20px 0 rgba (0, 0, 0, 0.2), 0 5px 5px 0 rgba (0, 0, 0, 0.24); 
}
#container h1{
 너비: 38%; 
 여백: 0 자동; 
 패딩 하단 : 10px; 
}

/* 전각 입력 */
input[type=text], input[type=password] {
 width: 100%; 
 패딩 : 12px 20px; 
 여백: 8px 0; 
 디스플레이 : 인라인 블록; 
 테두리 : 1px 솔리드 #ccc;
 상자 크기 : 테두리 상자; 
}

/* 모든 버튼의 스타일 설정 */
input[type=submit] {
 background-color: #53af57; 
 색깔: 백색; 
 패딩 : 14px 20px; 
 여백: 8px 0; 
 테두리: 없음; 
 커서: 포인터; 
 너비: 100%; 
}
input[type=submit]:hover {
 background-color: white; 
 색상: #53af57; 
 테두리 : 1px 솔리드 #53af57; 
}

Preview:

< / a>< / div >

3 단계 : < / h4 > 그런 다음 양식의 유효성을 검사하려면 양식의 필드를 확인하는 파일이 필요하지만 그 전에 데이터베이스에 'user'테이블을 만드는 것을 잊지 마십시오.

verification.php:

session_start()를 호출합니다.
if(isset($_POST['사용자 이름']) & & isset($_POST['password']))
{
// 데이터베이스 연결
$db_username = 'root';
$db_password = 'mot_de_passe_bdd';
$db_name = 'nom_bdd';
$db_host = '로컬 호스트';
$db = mysqli_connect($db_host, $db_username, $db_password,$db_name)
또는 die('데이터베이스에 연결할 수 없습니다');

// SQL 삽입 공격을 제거하기 위해 mysqli_real_escape_string 및 htmlspecialchars
// 두 함수를 적용하고 XSS
$username = mysqli_real_escape_string($db,htmlspecialchars($_POST['username']));
$password = mysqli_real_escape_string($db,htmlspecialchars($_POST['비밀번호']));

if($username !== "" & & $password !== "")
{
$requete = "SELECT count() FROM user where
nom_utilisateur = '".$username."' 및 mot_de_passe = '".$password."' ";
$exec_query = mysqli_query($db,$requete);
$reponse = mysqli_fetch_array($exec_요청);
$count = $reponse['개수()'];
if($count!=0) // 올바른 사용자 이름과 비밀번호
{
$_SESSION['사용자 이름'] = $username;
header('위치: principale.php');
}
else
{
header('위치: login.php?error=1'); // 잘못된 사용자 또는 비밀번호
}
}
else
{
header('Location: login.php?error=2'); // 빈 사용자 또는 암호
}
}
else
{
header('위치: login.php');
}
mysqli_close($db); 연결 닫기
?>

4단계:

마지막 단계에서 서버는 제공된 정보가 정확한지 확인하고, 정확하다면 사용자 이름에 세션을 생성하고 principale.php.

principale.php:

 
 < 머리> 
 < 메타 문자 집합 = "utf-8"> 
  
 < 링크 rel = "스타일 시트"href = "style.css"미디어 = "화면"유형 = "텍스트 / CSS"/ > 
  
 < 본문 스타일 = '배경 : #fff;' > 
 < div id="콘텐츠"입니다> 
  
  session_start()를 호출합니다. 
 if($_SESSION['사용자 이름'] !== ""){
 $user = $_SESSION['사용자 이름']; 
 // 메시지 표시
 echo "Hello $user, 연결되었습니다"; 
 }
 ?>

< / a>< / div>

Bonus:

당신은 질문을 할 것입니다: 어떻게 로그아웃합니까? 로그아웃 버튼과 현재 세션을 파괴하는 작은 PHP 코드를 추가하는 것은 쉽습니다.

 
 
 < 머리> 
 < 메타 문자 집합 = "utf-8"> 
  
 < 링크 rel = "스타일 시트"href = "style.css"미디어 = "화면"유형 = "텍스트 / CSS"/ > 
  
 < 본문 스타일 = '배경 : #fff;' > 
 < div id="콘텐츠"입니다> 
 
 < a href='principale.php?logout=true'입니다> < 경간> 로그아웃 
 
  
  session_start()를 호출합니다. 
 if(isset($_GET['연결 끊기']))
 { 
 if($_GET['연결 끊기']==true)
 { 
 session_unset(); 
 헤더("location:login.php"); 
 }
 }
 else if($_SESSION['사용자 이름'] !== ""){
 $user = $_SESSION['사용자 이름']; 
 // 메시지 표시
 echo "< br> 안녕하세요 $user, 연결되었습니다."; 
 }
 ?>

< / a>< / div>

양식을 제출할 때 발생하는 문제는 여러 번의 클릭이 있을 수 있으므로 동일한 확인 작업, 리디렉션 등을 여러 번 실행할 수 있다는 것입니다. 변칙이 발생할 수 있으며 서버에서 오류가 발생하고 중지됩니다.

해결책은이 기사에 있습니다 : jQuery로 제출 버튼을 활성화 / 비활성화하려면 어떻게합니까?< / a>< / div>