[#24] Bootstrap Modals zum Hinzufügen/Ändern von Kundendaten

안녕하세요! 나는이 비디오에서 소위 모달을 만드는 방법을 보여주고 싶다 부트 스트랩은 PHP 및 Ajax와 함께 사용할 수 있습니다

Ajax는 비동기 Javascript를 나타냅니다 즉, HTML이 있음을 의미합니다 기반 페이지를 변경할 수 있습니다 백그라운드에서 PHP 파일을 사용하여 예를 들어 그리고 페이지를 다시로드하지 않고 이 예제를 살펴 보겠습니다

여기에 작은 ERP 시스템을 구축하고 싶습니다 즉, 고객, 기사 및 데이터를 관리 할 수 ​​있습니다 합니다 고객 측에서 고객 개요가 표 형식으로 표시됩니다 나는 데이터베이스에 고객이 없어서 아직 비어있다

더하기 기호에 관해서는 고객을 추가 할 수있는 가능성이 있습니다 그런 다음 상기 모달을 엽니 다 이렇게하면 페이지 공간을 절약하고 더 명확하게 볼 수 있습니다 나는 고객을 추가 할 것이다 여기서 인사말을 선택할 수 있습니다

제목 음과 이름을 줄 수 있습니다 보시다시피 고객이 추가되었습니다 그 중 하나는 오른쪽에 "행동"에 대한 가능성이 핀 위에 고객이있다 편집하거나 삭제할 수 있습니다 삭제할 때 확인 메시지가 나타납니다

편집 할 때 모달로 돌아갑니다 그에 따라 값을 변경할 수 있습니다 고객을 한 명 더 추가하겠습니다 열을 클릭하면 그들은 그에 따라 분류됩니다 소개를 위해 너무 좋아

소스 코드를 살펴 보겠습니다 이 섹션은 고객을 추가하는 모달입니다 부트 스트랩 페이지에서 복사 할 수 있습니다 링크 찾기 그녀의 비디오 설명 모달 – 몸체 간단히 두 개의 선택 필드와 세 개의 입력 필드를 추가했습니다

우리가 양식을 사용하지 않는 것이 눈에니다 이것은 여기에서 그렇게 쉽게 작동하지 않습니다 데이터는 자바 스크립트로 처리되며 PHP로 전송됩니다 파일을 보냈습니다

이제 살펴 보겠습니다 또한, 모달은 고유 한 ID를 가지고 있다고 말해야 만합니다 Save (저장) 버튼에는 고유 한 ID가 있습니다 출력되는 모든 텍스트 각각의 언어 파일에서 되돌아옵니다 이미 비디오가 있습니다 고객 개요는 위에 작성되었습니다

이를 위해 모든 고객을 생략하는 선택 쿼리가 있습니다 $ stmt-> fetch ()에 대하여 $ row 변수에 고객을 지정합니다 모든 고객이 소비 될 때까지 이것이 while 루프가 된 이유입니다 while 루프 내에서 매번 새로운 테이블 행이 생성되고 여기에 내용으로 가득 차있다

덧붙여서, 여기에서도 볼 수 있습니다 삭제할 때 보안 쿼리가 작동하는 방식 이 작업은 onClick () 이벤트를 통해 수행 할 수 있습니다 이것은 확인 상자로 해결할 수 있습니다 그것은 자바 스크립트 문법이기도합니다 "확인"을 눌러이 상자를 선택하면 링크가된다

고객 / 삭제 / #each ID #가 호출되었습니다 ID는 각 고객 ID이며, 그래서 스크립트는 어떤 고객이 그것을 삭제해야 하는지를 안다 URL 개념 하나는 htaccess 파일에 있습니다 나는 뭔가를 확장해야했다 이 규칙이 추가되었습니다

예를 들어, 링크에 적용됩니다 고객 / 삭제 / ID도 괄호 안의 각 패키지 여기서 뒤에있는 변수에 할당됩니다 첫 번째 패키지는 $ 1에서 끝납니다 2 분의 2 초 그리고 3의 세 번째

그래서 "고객 / 삭제 / 아이디"라고 부를 때 백그라운드에서 s = customer & action =로 리디렉션됩니다 삭제 & ID = 각각의 ID 중요 함 그 규칙 옛 규칙 위에서야한다 대괄호 안에있는 "L"은 그것은 마지막 규칙이다 적용되는 경우 아래 규칙은 무시됩니다

QSA는 "Query String append"의 약자입니다 따라서 $ _GET 매개 변수를 사용할 수 있습니다 또한, 위의 몇 가지 디렉토리를 명시 적으로 다시 작성했습니다 금지 글꼴, CSS, JavaScript, 이미지 PHP 파일 용으로도 사용할 수 있습니다

이를 "ajaxphp"라고합니다 왜 이렇게 중요한지, 우리는 똑같이 보게 될 것입니다 그래서 간단히 명령을 삭제하십시오 물론 모달 및 JavaScript 지원도 제공합니다

할 수 있습니다 하지만 여기서 PHP 방식을 보여주고 싶습니다 두 가지 방금 언급 된 GET 매개 변수 ID 및 조치가 요청되었습니다 설정되어 있고 조치가 실제로 "삭제"된 경우 단순히 삭제 쿼리를 실행하십시오 사용자는 이에 대한 DELETE 권한도 가지고 있어야합니다

그런 다음 페이지를 완전히 다시로드하여 변경 사항을 적용해야합니다 본다 나는 여기 JavaScript로 그렇게한다 링크가 여기 슬래시로 시작되면 루트 디렉토리에서 시작한다고합니다 이 경우 "c : xampp htdocs"입니다

아래에서 "tablesorterjs"파일을 볼 수 있습니다 나는 코멘트에 대한 링크를 쓴다 이 파일은 테이블을 정렬 가능하게 만듭니다 이 파일이 포함 된 경우 정렬 할 테이블에 고유 한 ID를 지정하십시오

이 경우 나는 그들을 "tbl_kunden"이라고 불렀다 또한 CSS 클래스 "tablesorter"를 제공하는 것이 중요합니다 정말로 "thead" "tbody"가 작동하지 않으면 작동하지 않습니다 자, 이제 jquery 부로 가자 먼저 테이블 정렬을 시작합니다

이 명령으로 가능합니다 그 아래의 줄은 고객을 추가하기위한 것입니다 그것은 그것보다 더 복잡해 보입니다 "고객 추가"모달 이 ID가있는 버튼이 있습니다 그리고 그걸 클릭하면 모든 것이 끝났다

중괄호 사이에 무엇이 있는가 우선 입력 필드의 값은 변수에 저장됩니다 이 작업은 val () 함수를 통해 수행됩니다 그런 다음 Ajax 요청이 시작됩니다 이 파일로 연결되어야합니다

나 또한이 아약스 파일을 htaccess 파일에서 재 작성했다 제외 데이터는 우편 방법으로 보내야합니다 "데이터"를 통해 게시물 변수를 직접 정의 할 수 있습니다 나는 그들에게 변수를 할당한다

대문자로 표시된 변수 게시 JavaScript 변수는 작습니다 Ajax 파일은 여러 경우에 사용되기 때문에 나는 또한 변수 "행동"을 불렀다 이 경우, 나는 "고객 추가"라는 가치를 부여했습니다 곧 다시 보자 데이터 유형으로, 나는 단순히 "텍스트"를 사용합니다

그 후에는 두 가지 가능성이 있습니다 어느 쪽이든 작동합니다 (성공) 또는 아닙니다 (오류) 작동하면 모달이 사라집니다 이것은 함수에 관한 것입니다

"숨기기" 페이지가 다시로드됩니다 짧은 표기법은 다시 쓰기 규칙 때문에 만 작동합니다 오류가 발생하면 오류 메시지가 출력됩니다 Ajax 파일을 살펴 보겠습니다 여기있어

그리고 그것은 포스트 배열을 질의했다 몇 가지 사례가 있음을 알 수 있습니다 첫 번째는 '고객 추가' 그러나 나중에 "고객 데이터 확보"및 "고객 편집"도 있습니다 그래서 우리는이 블록에서 처음입니다 먼저, 현재 정의 된 포스트 변수 PHP 변수에서

그런 다음 INSERT 쿼리에 추가됩니다 execute ()에 의해 실행됩니다 그게 효과가 있다면 우리는 성공 영역에서 여기서 끝납니다 실제 실행은 백그라운드에서 거의 발생합니다 좋습니다, 모달은 일반적인 링크와 같은 방식으로 호출됩니다

글리 phicons에 링크를 적응 그게 큰거야 더하기 기호 지정해야합니다 data-toggle = "modal" 및 데이터 – 타겟 = = "Modal_kunde_hinzufuegen" 그래서 그것은이 것입니다 링크를 통해 전화 걸기 불행히도, 모달 프로세스는 그렇게 쉽지 않습니다

불행히도 여기에 여분의 링크를 추가 할 수 없습니다 그렇지 않으면 열립니다 모달 아닙니다 링크가 없다면 나는 가능성이 없다 "action"과 같은 변수를 얻는다 "ID"를 사용합니다

그래서 다른 방식으로 신분증을 제시해야합니다 다시 한 번 링크에 모달 속성을 매달았습니다 그러나 나는 "데이터 ID" 이름 여기에 각 고객 ID가 주어집니다 이 ID는 JavaScript로 처리 할 수 ​​있습니다 모달이 열릴 때 이미 존재하는 데이터가 표시되어 모든 것을 수행하지 않아야합니다

예를 들어 작은 변화 만 만들고 싶다면 new를 입력해야합니다 첫째, 각 고객 데이터를 읽어야합니다 그래서 지금이 ID가 필요합니다 왼쪽에서 ID를 검색하려면 부트 스트랩이있다 이벤트는 "show

bsmodal"입니다 그런 다음이 구문을 가져옵니다 속성 "data-id"에서 각 고객 ID 이 ID 나는 숨겨진 필드에 글을 씁니다 이것은 여기에 편집 모달에 있습니다

그게 여기있어 그리고 아래에서는 입력 필드에 숨김을 추가했습니다 이것은 현재 아무런 가치가 없다 "type = hidden"이라고 쓰면 표시되지 않습니다 그것은 단지 안에있다

배경 사용 가능 Javascript가 바로 여기 있습니다 ID를 전달하십시오 여기에 신분증을 붙이세요 이 값 필드에 그 후 기본적으로 고객과 동일한 구문을 따릅니다 추가합니다

이번에는 "고객 데이터 검색"이라고합니다 데이터를 표시하려면 먼저 어딘가에 가져와야합니다 읽어 보시기 바랍니다 이 경우에는 게시물 변수로 읽는 ID 만 필요합니다 이번에는 데이터 유형이 JSON입니다

JSON은 텍스트 형식의 간단한 데이터 형식입니다 의견에 대한 자세한 내용 ajaxphp 파일을 살펴 보겠습니다 여기에 "고객 데이터 얻기"가 있습니다

먼저 ID를 변수에 넣습니다 그런 다음 SELECT 쿼리를 실행하기 만하면됩니다 ID를 SELECT 쿼리에 전달합니다 질의가 실행된다 결과는 변수 $ row에 저장됩니다

echo 명령을 통해 모든 것이 반환됩니다 실제로 JSON으로 인코딩됩니다 즉, 결과를 간단한 텍스트가 아닌 텍스트를 JSON 형식으로 되돌립니다 반환 된 데이터는 결국 변수 "data"로 끝납니다 나는 그것을 여기에서 다르게 부를 수 있었다

val () 함수를 통해 개별 필드를 할당합니다 각각의 데이터 SELECT 쿼리가 배열을 반환했기 때문에 나는 여기있다 항목을 통해 "데이터"의 각 속성에 액세스하십시오 인사말, 직위, 이름 이들은 모두 데이터베이스 테이블의 열입니다

고객을 편집 할 준비를하는 것이 좋습니다 수정 버튼이 실제로 눌려진 경우 우리는이 블록에 있습니다 구문은 고객 추가와 거의 완전히 같습니다 이번에는 ID가 필요합니다 정확하게 알고 있어야하기 때문에 고객을 처리해야합니다

여기 숨겨진 필드에서 가져올 게 방금 내가 그들을 쓴 곳 "Customer_process"작업이 실행됩니다 여기에서 "Kunden_bearbeiten"을 볼 수 있습니다 순수한 UPDATE 쿼리 일뿐입니다

그게 전부 야 이 예제는 비교적 복잡합니다 당신이 그것을 완전히 이해할 때까지, 아마도 조금 걸립니다 그래서 내가 좀 더 빨리 설명했다 대략적인 개요를 얻습니다

Ajax는 현재 매우 자주 사용됩니다 예를 들어 누군가가 당신에게 메시지를 쓰는지 또는 페이스 북을 생각하는지 상태는 geliket입니다 화면에 메시지가 자동으로 나타납니다 페이지를 다시로드하지 않아도됩니다 다음에 봐요!