PHP Ajax CRUD Application Tutorial – MySQL & Bootstrap & jQuery DataTables [Part 1]

최근에 우리는 멋진 사용자 인터페이스를 만드는 방법에 대한 많은 의견을 가지고 있습니다 편집 삭제를 추가하고 MySQL 테이블에서 데이터를 볼 수있어서 만들었습니다

세 부분의 비디오 시리즈를 만드는 결정은 이 부분의 첫 부분이기 때문에 어떻게해야하는지 보여줄 것입니다 부트 스트랩에서 웹 사이드 디자인하기 MySQL 테이블에 데이터를 추가하는 방법과 그 테이블에있는 모든 데이터를 가져 와서 나와 함께있어 이봐 요, 상원 의원은 뭐죠? codingpassivecomecom에서 다른 사람들이 웹이되는 데 도움이되는 곳 개발자가 훨씬 쉽고 빠르다 그런 다음 그들은 데이터에서 그렇게 할 것이다

그 관심사를 구독하는 것을 고려해보십시오 이제 저는 PHPstorm에 있습니다 새 프로젝트를 만들었고 새로운 indexhtml 파일을 먼저 만들었습니다 우리가해야 할 일은 부트 스트랩 라이브러리와 jQuery를 포함시키는 것이다

작은 프로젝트에 필요한 라이브러리이므로 getbootstrapcom에 갈 것입니다 donwload 부트 스트랩을 클릭하면 그 링크를 사용할 것입니다 라이브러리를 포함시켜 CSS 라이브러리를 닫는 직전에 붙이겠습니다 head 태그와 Javascript 부트 스트랩 라이브러리 나는 body 태그를 닫기 전에 붙여 넣을 것이고 jQuery도 필요할 것이다

라이브러리 및 codejquerycom에서 하나를 얻을 것이다 그래서 여기를 클릭하십시오 minified 및 복사이 괜찮아이 붙여 넣어야 할 필요가 않습니다 부트 스트랩 라이브러리가 있기 전에 나는 이것을 곧바로 할 것이고 여기에서 나는 단지 할 것입니다 프로젝트의 기본 디자인을 작성하여 먼저 컨테이너를 만듭니다 부트 스트랩에서 필요하며이 컨테이너 내부에는 하나의 행이 있고 이 행에 하나의 열 -m-d8이 있다고 말하고 2에 오프셋을 설정합니다

결과의 중심에 모든 것을 배치해야합니다 화면과 그 안에 그래서 여기에 우리가 하나의 버튼을해야합니다 그래서 내가 입력을 말할 것입니다 타입 버튼을 클릭하면 클래스가 btn btn-success 값이 새로 추가됩니다 지금은 나중에 기능이 우리가 가진 것을 보도록 할 것입니다 좋아, 그럼 여기에 우리가 가서 우리의 컨테이너에 대해 말하자 나는 스타일 마진 top 30을 설정할 것이다

픽셀이란 이름이 MySQL 테이블 매니저이고 페이지가 2 개인 경우 이 버튼을 화면의 오른쪽에 배치하고 보도록하겠습니다 여기에 우리는 우리가 오래된 테이블을 보여줄 하나의 테이블을 갖게 될 것입니다 데이터 그래서 나는 테이블 클래스 테이블 테이블을 말할 것이다 나는 공중 선회와 테이블 경계선을 만들 것입니다 부트 스트랩 (bootstrap) 및 업종 (industry) 나는 내가 가질 사람들에 대해서 너무 많이 말하지 않을 것입니다

부트 스트랩 디자인에 대해 깊이 들어가는 또 다른 튜토리얼입니다 테이블 머리 세트를 선택하면 첫 번째 열이 하나있을 것입니다 다음 칼럼에서는 더 나은 나라 이름과 다음 옵션은 옵션이며이 옵션 열 안에 추가 할 것입니다 각 행에 대한보기 및 삭제를 편집하여 테스트 해 봅시다 이 테이블을 움직여 라

그러면 괜찮을거야 이제이 튜토리얼의 기본 디자인을 갖게되면 새로운 내 PHP 내 데이터베이스 내 관리자 '그래서 여기를 참조 MySQL 데이터 관리자 내가 설정합니다 utf-8 유니 코드 c3과 나는 테이블을 국가를 이렇게 첫번째 행을 말할 것이다 놓을 것이다 첫 번째 열은 ID 정수가됩니다 autoincrement 그리고 그것은 다음 나라 이름이 될 것입니다 varchar 20 예를 들어 다음 나라에 대한 간단한 설명이 될 것입니다 나는 텍스트를 설정할 것이고 다음은 긴 설명 일 것이다 국가는 모두 긴 텍스트로 설정되어 있으므로 저장하면됩니다

이 프로젝트의 목표는 누군가 새 버튼 추가를 클릭하면 또는 나중에 뷰를 편집하고 삭제할 것입니다 작은 모달 팝이 표시됩니다 사용자가 먼저 날짜를 조작 할 수 있으므로 처음에는 그 모델을 디자인해라 그러면 나는 여기에 이것을 말할 것이다 나는 ID를 테이블에 설정할 것이다

매니저와 나는 모델 페이드에 클래스를 설정할 것이다 하지만 우리는 실제로 시체를 쓰려고 다음 부분에서 잘되어야합니다 먼지 그래서 나는 나중에 날짜 방식에서 표시 할 수 있도록이 말을 했으므로 나는 모델을 말할 것이다 yelped 그리고 그는 작은 히터를 조금 세트 모델 바디와 세트를해야 할 것입니다 그것의 작은 발 끝이있을 것이다 그래서이 모델에 몇 가지 제목을 넣어 보자

나중에 우리는 조작 할 것이지만 지금은 <h2>와 클래스가 모델 제목이되고 모델에서 국가 이름을 말할 것이라고 가정 해 보겠습니다 한 단추가있는 바닥 글이지만 모든 정보를 저장하려는 경우 나는 그들이 시작할 수있는 기본 수업을 말한다 성공과 그 것이고 우리가 보여줄 필요가있는 몸 안에 있어야합니다 몇 가지 정보가 있으므로 입력 유형은 '텍스트'로 설정됩니다 우리는 class라는 클래스를 폼 대화 상자로 설정하고 placeholder will을 보자

국가 이름이어야하며이 하위 집합 국가 이름에 대한 ID가 필요합니다 여기서 나는 테이블에서 우리는 또한 짧은 설명과 긴 설명을 가지고있을 것이다 그래서 나는 다시 볼 수 있도록 두 텍스트 영역을 놓을 것이다 대화를 위해 나는 짧은 설명 placeholer 짧은 나라 설명에있어 하지만 출력 결과가 끝날 때 바로 그 복제본이 어떻게 나타나는지 긴 설명에 이젠 그만하자 그래서 우리가 지금 새로 고쳐야 할 것을 보자

이 모델이 숨겨져있는 것을 볼 수 있듯이 페이지에는 보이지 않지만 버튼을 새로 추가하면 클릭 방식이 적용됩니다 그러면 새로 추가 할 항목이 표시됩니다 함수와 스크립트 유형의 텍스트 / 자바 스크립트를주고 나는이 작품을 사랑해 documentready 함수 한 번 클릭하는 대신 ID로 변경하고 이 jQuery 함수 내부에서는 완전한 문서 규칙을 기다리고 이 버튼에 클릭 이벤트를 설정하면 여기에 새 버튼이 추가됩니다

addnewon 함수를 클릭하고 여기에서 나는 단지 테이블 900이 더 많은 쇼를 가지고 있다고 말할 것이다 이 기능을 죽이지 않으려 고 새 기능을 추가하십시오 이제 알 수 있듯이 우리는 어떤 디자인이지만 분명히 내가 어딘가 작은 실수를 만들었으니 보자 그래서 여기에 클래스 모델 컨텐츠를 넣는 것을 잊어 버렸습니다

이걸 바닥 글로 옮기겠습니다 그러면 다시 시험을 보도록하겠습니다 너와 이제는 정말 좋아 보인다 우리가 이걸로 마음 먹을 나라 이름이있어 드레이크 쿼리와 함께 우리는 몇 가지 옵션을 가지고 있으며 우리는 버튼 C를 가지고 있습니다

그 순간에 작동하지 않습니다 그래서이 애니메이션을 개선하기 시작하자 작은 말하자면 나는 대화를 말했지만 그것은 통제력이있는 것처럼 보이므로 시험을 치자 신선하고 새롭지 않은가? 이 저장 버튼의 기능 누군가가이 Save 버튼을 누르면 우리는 기능을 저장하고 여기에 없거나 어쩌면 이걸 만드는 것이 낫습니다 기능은 데이터 관리를 요청하고이 기능을 작성하여 이 함수가 하나의 매개 변수를 받아서 우리가 우리가 할 일이 무엇인지 알 수 있습니다 우리가 만들고있는 Ajax 코드가 무엇인지 알게 될 것입니다 그 열쇠가 에드 뉴가 될 순간과 치유 그래서 우리는 첫 번째로 만들거야 이 세 곳의 정보가이 곳과 같이 여기 있는지 확인해 봅시다

나는 먼저 전쟁 이름과 동등한 나라 이름을 말할 것이고 짧은 설명과 오랫동안 설명을하고 이름을 사람과 두 사람이 짝을 지어 지는지 테스트합시다 이 나라에 대한 이름이 없으면 우리가 선택할 것입니다 이것과 우리는 세금 코드를 만들지 않을 것입니다 그래서 술 이름은 CSS이고 우리는 병이 단색의 빨강 픽셀이라고 말할 것입니다

그리고 당신은이 코드를 실행하는 것을 멈추게 할 것이라는 점을 리턴한다고 말할 것입니다 시도해라 그러면 저장한다 그리고, 당신이 볼 수있는 것에 따라, 그것은 초록색이다 우리가 다른 두 사람을 위해 할 일은 똑같아

설명을 잘하면 느꼈다 그리고 여기 나는 오랫동안 똑같은 것을 얻었다 설명 알턴이 괜찮 으면 건강과 건강을 말할 것입니다 H이고 우리는 쇼 설명을 위해 똑같이 할 것이고 길게 칠 것입니다 설명 어쩌면 우리는 이것을이 함수로 옮겨야 할 것입니다

니모닉 기술 테스트를 통해 국가를 구하고 실수가있는 경우 여기에 글을 쓰십시오 저장을 클릭하십시오 다시 선택하지만 문제는 당신과 같습니다 이 입력이 선택되었다는 것을 알 수 있습니다 즉,이를 향상시켜야 함을 의미합니다

어쩌면 이것으로 말할 수있다 우리가 함수를 작성하더라도 책과 같은 것 이 기능이 훨씬 향상되어 기능이 매우 향상 될 것입니다 간단하게 베타 트릭을 보게 될 것이고 핵심을 보게 될 것이고 우리는 단지 이것을 할 것입니다 괜찮아 이것은 천국을 만드는 가장 좋은 방법이고, 여기 우리는 내 차갑고 보자 내가 여기서 일하기를 바라는대로 시험해 볼 것이다

어쩌면 비어 있지 않기 때문에 비어있는 이름이 아니며 설명을 위해 비어 있지 않습니다 당신이 이것을하려고 할 때까지는 설명이 길지 않습니다 볼 수 있도록하자 테스트를 만들어 보자 그럼 괜찮아요 지금은 괜찮아요 그것은 여기에 있습니다 그리고 당신이 볼 수 있듯이 모든 빨간 테두리는 아주 작습니다

그래서 이것은 단지 이 코드를 최적화하고 읽을 수있게하는 가장 좋은 방법은 비어있는 경우 빈 입력에 대해 사용하는 하나의 함수를 갖습니다 빨간색 테두리와 테두리를 제거하고 true를 반환합니다 그렇다면 비어 있지 않은 경우 서버에 대한 아약스 호출을 만들어야합니다 URL 무비는 PHP 파일로 새 페이지를 만들 것이라고 가정 해 봅시다 데이터 유형이 텍스트 일 ​​때 데이터가 먼지 키가됩니다

열쇠 그것은 nameval 짧은 설명과 긴 설명입니다 이름이 될 것입니다 물론 우리는 선생님으로부터 몇 가지 성공 함수 응답이 필요합니다 일단 서버에서 응답을 받으면이 코드 부분을 여기 실행됩니다 그래서 우리의 반응은 그 일이 어떻게 볼 수 있는지 그리고 아약스 파일을 만들고 PHP 코드를 작성하지 말고 새로운 PHP 파일을 말할 것입니다 아약스와 여기 내가 안전을 향상시킬 것인가를 의미한다 우리가 여러 키를 가질 것이기 때문에 우리가 점검 할이 키입니다

포스트 키 동등한 관리자가 할 수 있으면 새로운 것을 추가하기를 위해 하나를 만드는 순서를 묵살했다 이 코드 부분에 먼저 데이터베이스에 연결해야합니다 connection = new mysqli 그리고 그는 localhost라고 말할 것입니다 내 사용자 이름 루트 암호입니다 순간에 내 암호가 비어 있습니다 하나만 가지고 있지만, 만약 당신이 단지 그를 만들고 우리의 죽은 사업은 MySQL 데이터 관리자가 맞는지 확인하십시오 이제 알았습니다

우리가 jQuery에서 얻는 모든 것을 탈출 할 수 있도록 name = connection 나는 진짜 탈출 문자열을 잃는다 힘 이름 같은 것을 국경은 설명을 보여준다 이것은 긴 설명을위한 이것과 똑같은 것을 보호하는 것입니다 우리 자신과 이제는 처음으로 같은 이름의 데이터를 데이터베이스 그래서 여기에 말을 sql = connection query select ID라고 해봅시다 국가 이름이있는 국가에서 = 이름과 우리가 있는지 확인하자 호출 이름이 올바른지 확인하십시오

국가 이름을 입력하십시오 if sql-> num_rows> 0 회전 우리는이 이름으로 이미 jQuery 국가로 돌아 왔다고 말할 것입니다 그 밖에 삽입하려고하면 국가 레이어를 삽입 할 수 있습니다 국가 이름 짧은 설명과 긴 설명이 표시됩니다 그 값은 국가 이름 설명과 물론 길다는 것을 말할 것입니다

설명 종료 국가가 삽입되었으므로 이제는 많이 작성한 테스트를 만들어 보겠습니다 그래서 우리는 그렇게 실수하지 않았 으면 좋겠다 예를 들어 오스트리아는 징병 긴 설명 안전하고 무슨 말을하는지 보자 큰 그래서 문제는 15 번 줄에있다 국가 니켈 남자가 온 국가에서 RV처럼 수정 회색 바다 여기에서 그래서 나는 그것을 보았지만 실제로 연결이 필요합니다

다시 해보자 오스트리아 설명 저장에 표시하고 다시 사용하므로 사용하고 있습니다 국가 이름을 지우지 만 다시 시도해야합니다 그리고 마침내 나라는 곤충 ok이었을 정도로 만일 우리가 밖에 간다면 지금 당신에게 남겨주세요 우리가 여러 명이 있다는 것을 알 수 있지만 처음으로이 문제가 발생했을 때 변수가 존재하지 않으므로 다시 시도해 볼 수 있습니다 모든 것이 좋아 보인다 이제 최종 기능을 만들어 보자

이 테이블의 모든 데이터를 나열하는이 제품의이 부분 그들이 할 일은 우리가 PHP 코드를 직접 가져갈 수 있습니다 여기에 직접 코드를 작성할 수 있습니다하지만 이미 jQuery로 작업하고 다른 것들은하지 않습니다 나는 우리가 어떻게해야하는지 보여줄 것입니다 테이블에서 모든 데이터를 얻으려고 내가 여기서 할 일은 내가 선언 할 것입니다

새로운 함수 그래서 함수는 연결 데이터를 얻고이 함수는 세 가지 매개 변수를 먼저 받으면 시작하고 다음 매개 변수는 부싯돌은 영양가없이 잘 사용했을 텐데 여기서는 두 개의 매개 변수를 만나고 여기에서 말할 것입니다 아약스 코드를 다시 만들어서 아 맞다 좋아,이 부분은 여기 너무 똑같아 이 부분과 같이 말하면이 부분은 동일합니다

좋아요 그러면 우리가 보낼 데이터가 있습니다 아이가 기존 데이터를 가져 와서 시작하고 경고하도록하십시오 좋습니다 그러면 여기에서 절단 된 모든 응답이 죽음에 참석할 것입니다

테이블 body 내가 response == reachedMax라면 처음 썼다 ID가 없으면 표 본문에 응답의 모든 데이터를 추가합니다 길이면에서 우리의 시작을 증가시킬 것이고 우리는 기존 데이터 기능을 다시 가져와 왜 우리가 길에 테이블을 가지고 있는지 이 일을 계속해라 그리고 이것에 문제가있는 너를 위해서 내가 여기서 뭘하고 있는지 이해하기 위해 나는 다른 튜토리얼을 가지고있다

테이블에서 동적으로 모든 데이터를 가져 오는 방법을 보여줍니다 이 개념을 더 잘 이해하고 동일한 경로를 할당하고 지금이 아약스 안에이 기능을 써서이 부분을 제거해 보겠습니다 지금 여기서 그리고 여기에서 key = 기존 데이터를이 안전만으로 얻는다면 말할 것입니다 스타트 오, 이제 우리는 SQL = 연결을위한 규칙이 있다는 것을 알게 될 것입니다 쿼리 선택 ID 국가 이름 시작 국가 제한 시작 제한 당신은 다시 행 번호를 물어 볼 것입니다

왜냐하면 여기서 우리는 그 밖의 경우에는 테이프에 아주 많은 정보를 줄 수있는 출구 도달 거리가 보일 것입니다 이 MySQL 테이블 내에 더 이상의 데이터가 없다는 것과 그 이유 때문에 우리는 또 다른 아약스를 만들지 않을 것입니다 모든 데이터 셀은 complete data = sql fetch_array 동안 사용하고 여기에 전체 데이터를 연결하여 여기에 테이블 행은 괜찮아이 줄 안쪽에서 나는 약간의 부름을받을거야 이것에 의해 첫 번째 것은 우리의 디자인을 체크하자

그래서 첫번째 것은 나는 두 번째를 의미한다 하나는 국가 이름이므로 먼저 해당 국가의 ID를 이름에 그 후에 우리가 만들려는 버튼을 추가하여 기능 편집보기 및 삭제이므로 해당 하위 단추를 사용해 봅시다 승리에 대한 답을 당신들을위한 코드 값 및 클래스 버튼 버튼 기본 그래서 다음 하나를 삭제하는 것입니다 내가 설정합니다 위험에 단추를 넣으면 도움이 될 것입니다 우리가 살지 않기 때문에 아마도이 일이 가능할 것입니다 이 함수를 호출하면 여기에서이 데이터를 가져와 봅시다

우리는 0에서부터 시작하고 있으며 우리는 10 개국에 8 개가 있다고 말할 것입니다 아약스 코드를 사용하면 테이블 데이터의 식물과 같이 더 큰 재질을 만들 수 있습니다 이제 아약스에 작은 실수가 있습니다 왜냐하면 여기에 돌아 오지 않았기 때문입니다 응답은 괜찮아

새로 고침하고 지금 볼 수 있듯이 우리는 나무에 ID를 가지고 있습니다 우리는 국가 이름이 있습니다 오스트리아와 또한 우리는 몇 가지 옵션을 가지고 있습니다 생각했지만 다음 부분에서 우리는이 기능을 만들 예정입니다 이 튜토리얼이 매우 간단하고 아름답기를 바랍니다

그리고 나는 여러분에게 2와 3 부분을 보도록 권할 것입니다 우리는이 작은 것을 끝낼 것입니다 프로젝트 및 질문이 있으시면 언제든지 문의하십시오 아래의 댓글 및이 동영상이 마음에 들면 그것을 좋아하고 친구를 공유하십시오 돌보다