[#22] JQuery Einführung + Kennwort ändern Funktion

안녕하세요! 이 비디오에서 암호를 변경하는 방법을 보여주고 싶습니다 PHP 함수 password_hash ()를 사용합니다

또한 Javascript 라이브러리 jQuery를 처음 보았습니다 암호의 복잡성을 검사합니다 이를 위해 이전 비디오에서 로그인 시스템을 확장합니다 나는 이미 "settingsphp"페이지를 확장했다

마지막에 어떻게 작동하는지 살펴 보겠습니다 암호는 오타가 발생하지 않도록 두 번 입력해야합니다 처음에는 암호 반복 상자가 있는데, 연관된 "표시 / 숨기기"버튼과 비밀번호 변경 버튼 여전히 사용할 수 없습니다 이 지침을 이행 할 때에 만 요소가 점진적으로 활성화됩니다 따라서 비밀번호는 8 자 이상이어야합니다

대소 문자를 구분해야합니다 나는 무엇인가 입력한다 즉시 암호가 아래의 빨간색 텍스트로 나타납니다 이다 나는 계속 타이핑 할 것이다

이제 나는 지침을 이행한다 포인트 숨기기 버튼 정보 내가 쓴 것을 보니? 유튜브 테스트 내가 지침을 만났기 때문에 이제 암호 반복 필드 및 표시 / 숨기기 단추입니다 활성화 여기에 글을 쓰기 시작하면 빨간색 글자로 암호가 아직 나타나지 않습니다 일치합니다

이제 그들은 동의한다 마지막 문자를 다시 가져 와서 다시 추가하면 암호 변경 단추가 매번 또는 비활성화됩니다 '비밀번호 변경'을 클릭합니다 그리고 암호가 성공적으로 변경되었다는 메모 위에 올 수 있습니다 나는 그것을 시도 할 것이다

나는 로그 아웃한다 이전 암호는 "gazica"였습니다 그건 잘못된거야 새 암호는 "YoutubeTest"입니다 나는 거기에 들어갈 것이다

그래서 효과가있었습니다 이 작업은 백그라운드에서 update 명령으로 수행됩니다 따라서이 명령을 설정 한 사용자도 업데이트해야합니다 권리가있다 사용자에게 권한이없는 경우 그러면 작동하지 않을 것입니다 이론을 위해 너무 좋아

소스 코드를 살펴 보겠습니다 기본적으로 세 부분으로 구성됩니다 HTML과 CSS 부분, Javascript 부분 및 PH 부분 HTML 및 CSS 부분부터 시작하겠습니다 그게이 분야 야

HTML과 CSS 부분은 주로 부트 스트랩에 의해 제공됩니다 나는 당신에게 비디오 설명에 링크를 씁니다 먼저 부트 스트랩 그리드 시스템을 가지고 있습니다 지정된 폭의 10 입력 필드의 값을 평가할 수 있습니다

양식이 필요합니까? 양식은 게시물 데이터를 자체 파일로 다시 보냅니다 즉, "settingsphp" 다시 쓰기 규칙을 사용하기 때문에 여기에서 속기를 사용할 수 있습니다 일

그런 다음 여기에 입력 필드를 정의합니다 및 표시 숨기기 단추 암호 및 암호 반복을위한 것입니다 아래에는 암호 지침이 있습니다 및 출력 영역 암호가 지침에 부합하는지 여부 현재 div 영역에는 내용이 없습니다

이것은 나중에 JavaScript 부분에 의해 동적으로 추가 될 것입니다 우리는 지금 javascript에 온다 JavaScript는 <script> 태그로 시작합니다 이것은 조금 더 길고 처음에는 매우 혼란스럽게 보입니다 그러나 우리는 한걸음 한 걸음 나아 간다

여기서 jQuery의 구문을 사용합니다 이것은 무료 자바 스크립트 라이브러리입니다 나는 순수한 자바 스크립트와 동의어를 사용할 수 있지만 구문 나는 jQuery를 정말 좋아한다 그래서 나는 JQuery를 전혀 사용할 수 없다 나는 도서관을 통합해야한다

나는 대시 보드에서 그것을 여기에서했다 이 구문에 대한 페이지의 머리 부분 스크립트 URL ajaxgoogleapiscom에서 가져옵니다

물론 파일을 다운로드 할 수 있었고 Javascript 폴더를 로컬에 저장하십시오 지금은 두 가지 방법의 장점과 단점에 대해 논쟁 할 수 있습니다 JavaScript에 대한 좋은 점은 이벤트 기반으로 작업 할 수 있습니다 예를 들어, 이벤트는 키보드의 키 스트로크 또는 마우스로 클릭하십시오 이벤트가 트리거되면 동적 이벤트의 일부를 동적으로 선택할 수 있습니다

각 페이지에 영향을줍니다 반대로 PHP는 매번 전체 페이지를 다시로드해야합니다 첫 번째 줄에서 "frm_psw1"요소에 액세스합니다 "frm_psw1"은 입력 필드입니다 새 암호입니다

$ 기호를 통해 액세스 할 수 있습니다 ID는 괄호 안에 있습니다 십자가 후 # 따라서 frm_psw1은 "name"속성이 아닌 ID입니다 그런 다음 "checkPasswordLength ()"함수가 실행됩니다 키 업 이벤트가 방아쇠되었을 경우 키 – 업은 키보드의 키가 해제되었음을 의미합니다

여기서 함수를 볼 수 있습니다 이것은 "function"키워드에 의해 정의됩니다 중괄호 안에 내용이 있습니다 물론 나는 자유롭게 이름을 선택할 수있다 변수에서 "var"키워드로 정의하는 함수에서 변수 "password" 나는 값을 할당한다

ID "frm_psw1"인 입력 필드에서 이것은 "val ()"함수와 함께 작동합니다 "val"은 Value를 의미합니다 그래서 그것은 가치가됩니다 입력란에 입력합니다

이 변수에 저장됩니다 그 다음에 if 여부를 암호의 길이 8 이하 그렇다면 방금 언급 한 PasswordCheck 영역이 사용됩니다 신분증에 대해서 html 함수를 사용할 수 있습니까? 새 텍스트를주는 와 CSS 기능 CSS 매개 변수 "color" "빨간색"으로 설정하십시오 특성 함수 정보 (소품) 입력 필드를 사용할 수 있습니까? 비밀 번호 반복 필드에 대한 관련 버튼 "disabled"로 설정하십시오

8 문자를 입력하지 않는 한 이미 내가 두 번째 암호 필드에 무언가를 입력하십시오 그것이 "장애인"= true 인 이유입니다 그런 다음 "else if"를 사용하여 다른 많은 것들을 쿼리 할 수 ​​있습니다 어떤 암호를 이행해야합니다 예를 들어, 이것은 password

match () 함수로 확인됩니다 대소 문자가 사용되었는지 여부 그 전에 호출 부호는 그렇지 않다는 것을 의미합니다 조건이 아직 충족되지 않은 경우 DivCheckPasswordMatch가 다시 처리됩니다 HTML 및 CSS로 출력 "암호는 적어도 하나 이상의 대문자와 소문자를 포함해야합니다

이 경우에도 비밀번호 반복 상자는 그대로 유지됩니다 해당 버튼이 비활성화됩니다 암호가 모든 지침을 충족하면 이 시간은 초록색으로 보냈다 모든 것이 괜찮습니다 그러면 비밀번호 반복 필드와 버튼이 활성화됩니다

비밀번호 반복 필드에 무언가를 입력하자마자 함수 "checkPasswordMatch ()"가 실행됩니다 아래에서 확인할 수 있습니다 여기에서 두 암호가 일치하는지 확인합니다 이를 위해 두 변수를 정의했습니다 첫 번째 변수에 값을 지정합니다

첫 번째 비밀번호 입력란에서 그리고 확인 – 그것은 확인 변수입니다 – 나는 두 번째 값을 부여합니다 암호 필드 val () 함수로 두 번 그 후 나는 체크한다 두 변수가 다른지 여부 그렇다면 비밀번호가 일치하지 않음을 빨간색으로 표시합니다

'비밀번호 변경'버튼을 비활성화하십시오 일치하면 녹색으로 표시됩니다 버튼을 활성화하여 비밀번호를 변경하십시오 그런 다음 함수를 사용하십시오 각각의 가리키고 숨기기 버튼에 대해

그들은 기본적으로 동일하며 ID 만 다릅니다 첫 번째 표시 및 숨기기 버튼에 대한 기능은 다음과 같습니다 나는 변수를 정의한다 거기에서 첫 번째 암호 필드의 type 속성 값을 삭제합니다 이것은 속성 함수 (prop)를 통해 수행됩니다

그런 다음 현재 그 안에 무엇이 있는지 확인합니다 "암호"또는 "텍스트" 일반적으로 첫 번째 "비밀번호"가 있습니다 그거야 문자는 인식 할 수 없게 렌더링됩니다

그렇다면 속성 함수를 사용하여 다시 변경합니다 "type"속성 "password"에서 "text"로 변경하십시오 이미 "텍스트"가 들어있는 경우 나는 다른 방향으로 그렇게한다 "type"속성을 변경합니다 "암호"

따라서 버튼을 클릭 할 때마다 암호가 표시되거나 또는 숨겨져 있습니다 어쩌면 여기에 트리플 이에 상응하는 것이 있습니다 흥미 롭군요 특수 비교 연산자입니다 여기에는 값이 같은지 여부 만 살펴 보는 것이 아닙니다

남자들이 똑같다면 이 경우 두 방정식으로 충분했을 것입니다 그러나 나는 그것을 원했다 보여 주었다 두 번째 버튼에 대해서도 아래에서 설명합니다

따라서 PHP 부분 만 빠져 있습니다 나는 그것을 여기에 올려 놓았다 꽤 간단합니다 양식에서이 파일로 데이터를 보내므로 isset () – 모든 관련 게시물 데이터를 사용할 수 있는지 확인하십시오 그렇다면 db_connect를 실행하여 데이터베이스에 연결합니다

파일을 포함하십시오 나는 해당 설정 파일을 가지고 있다고 말해야 만한다 액세스 데이터가 들어 있습니다 이제 대시 보드에 묶여 있습니다 그런 다음 두 입력 필드의 값을 두 개의 변수로 드롭합니다

나는 frm_psw1과 2라고 부른다 일반적으로 두 암호는 동일해야합니다 하지만 안전을 위해 다시 확인합니다 동일하다면 나는 첫 번째 암호를 돌린다 "password_hash ()"함수 변수 "psw_hash"에 값을 저장하십시오

여기서 첫 번째 또는 두 번째 암호를 사용할지 여부는 중요하지 않습니다 어쨌든, 둘 다 동일하다 그래서 나는 로그인 한 사용자의 암호를 변경할 수 있어야합니다 누가 로그인했는지 압니다 로그인시이 세션이 정의됩니다

현재 사용자 이름이 저장됩니다 세션을 "사용자"라고합니다 저는 PDO와 Prepared Statements에서 여기서 일합니다 업데이트 명령을 얻을 수 있습니다 다음과 같이 번역하십시오

테이블 갱신 사용자가 암호 설정 psw_hash 사용자가있는 곳 현재 사용자의 값을가집니다 bindParam () 함수를 통해 두 변수를 전달합니다 그리고 execute ()로 실행합니다 그 후에 암호가 성공적으로 변경됩니다 암호가 일치하지 않으면 거기에 "암호가 일치하지 않습니다"입니다

좋습니다 그렇지 않으면 평온하게 물어볼 수 있었으면 좋겠다 다음에 봐요!