Ajax CRUD operations in Laravel – Code Explanation Video

안녕, everyboby, justlaravel에 오신 것을 환영합니다 나는 다른 코드 설명 비디오로 돌아왔다

이 비디오에서는 Laravel의 AJAX CRUD 작업에 대해 논의 할 것입니다 기본적으로,이 응용 프로그램은 무엇입니까 다음과 같은 4 가지 간단한 작업 수행 생성, 읽기, 업데이트 및 삭제 데이터베이스 작업 이 결과를보기에 표시합니다 AJAX를 사용하여 이러한 모든 작업을 관리합니다 그것은 간단한 응용 프로그램입니다 이미 응용 프로그램의 데모를 설명하는 비디오가 있습니다

그래서이 비디오에서는 코드 부분에 대해 논의 할 것입니다 따라서 응용 프로그램을 로컬에서 실행할 수 있습니다 이것은 데이터베이스에있는 모든 데이터입니다 이제 모든 4 가지 작업을 신속하게 수행 한 다음 코드 부분으로 건너 뜁니다 일부 항목 추가 – 'TestItem' 그리고 우리는 그 항목을 여기에서 볼 수 있습니다

114의 ID로 이것은 Create 작업입니다 여기에있는 모든 데이터는 읽기 작업입니다 그래서 나는이 '바비'를 '밥' 이제 '바비'가 '바브' 이것이 업데이트 작업입니다 이제 나는 이것을 지울 것이다 따라서 생성, 읽기, 업데이트 및 삭제의 4 가지 작업이 있습니다

이제 코드 부분으로 건너 뛸 수 있습니다 먼저 routesphp 파일을 엽니 다 기본 경로 ( '/')는 readItems입니다 addItem URI와 그 클로저 다른 경로와 유사합니다

먼저 IndexController로 가서 그 안에 무엇이 있는지 살펴 보겠습니다 그래서 처음에는 응용 프로그램이로드 될 때 routes 파일이 표시되면 readItem 함수가 호출됩니다 그래서 readItems 함수를 살펴 보겠습니다 단순히 데이터베이스에서 모든 항목을 읽습니다 여기서 '데이터'는 여기에있는 모델입니다 이것이 테이블 이름입니다

그 결과를보기로 전달하고 'welcome'이라는 이름의보기 (welcomebladephp) 모든보기가 resources 디렉토리에 있습니다 열어 보겠습니다 그리고 나는 'welcome

bladephp'에 갈 것이다 여기, 나는 단지 for 루프를 실행하고 모든 항목을 표시합니다

항목의 ID와 이름을 표시합니다 이들은 편집을위한 버튼과 삭제를위한 버튼 인 2 개의 버튼입니다 여기서 볼 수 있듯이 편집 및 삭제 버튼 일부 데이터를 전달하는 일부 데이터 속성과 함께 나중에 편집 및 삭제에 사용할 수 있습니다 그것은 부분 읽기 (읽기 기능) 이제 저는 창조 부분에 갈 것입니다 생성 작업에는 버튼과 이름을 읽는 입력 필드가 있습니다

및 버튼 그래서 나는 'ADD'라고 불리는 간단한 버튼을 추가 할 것이다 나는 그것에 'id'를 추가 할 것이다 그래서이 버튼을 누르면 나는 몇몇 자바 스크립트를 썼다 클릭 리스너이므로이 버튼을 클릭하면 나는 AJAX 호출을 호출 할 것이다 그것은 POST 요청이 될 것이고 URL은 addItem이 될 것입니다, 우리가 routes 파일에서 보았 듯이 그런 다음 URL에 전달하는 내용은 CSRF 토큰 인 토큰입니다

이는 모든 게시 필드에 필요하며, 보안상의 이유로 내가 데이터베이스에 저장하고자하는 이름과 함께 이제 addItem 함수에서 어떤 일이 일어나는지 살펴볼 것입니다 addItem URL은 기본적으로 호출합니다 routes 파일에서 볼 수 있습니다 this (addItem) 함수를 호출합니다 먼저 몇 가지 유효성 검사를 수행 할 것입니다

원하는만큼 많은 유효성 검사를 유지할 수 있습니다 나는 방금 요구했다 최소값을 유지할 수도 있습니다 그것은 최소한 이어야합니다 6 자, 그와 비슷한 것 너는 그 모든 것을 할 수있다 당분간 나는 그것을 그냥 그대로 둔다 유효성 검사가 실패한 경우 나는 그 오류를 보낼 것이다

JSON 응답 오류가없는 경우 나는 그것을 구할 것이다 먼저 우리가 입력 한 이름을 얻으십시오 저장 한 다음 JSON을 반환하십시오 JSON을 반환 한 후에는 어떻게 될까요? 나는 여기에서 점검 할 것이다 성공 함수에서 데이터에 오류가 있는지 검사하고 오류를 표시합니다

그렇지 않으면 새로 추가 된 항목을 표의 끝에 추가합니다 기본적으로 여기가이 테이블입니다 테이블 끝 부분에 새 항목을 추가합니다 이드와 함께 그리고 마지막으로 나는 이름 가치를 지울 것이다 이제 업데이트 및 삭제가 나타납니다

따라서 업데이트 및 삭제 작업은 우리가이 버튼을 누르면 편집 버튼을 누르면 모달이 열립니다 삭제 버튼을 누르면 모달이 열립니다 나는이 '편집'과 '삭제'둘 다에 대해 하나의 모달을 썼다 그래서 어떤 버튼이 눌러 졌는지에 따라 모달의 내용을 수정합니다 여기에서 보면 편집 및 삭제에는 버튼 2 개와 일부 클래스 및 일부 데이터 속성이 있습니다

편집 버튼을 클릭하면 우리가 보는 것은 내가 말했듯이, 나는 동일한 모달을 사용할 것이므로, 나는 몇몇 수업을 추가하고 몇몇 수업을 제거 할 것이다 ~ 같은 편집 모달이 표시되면 '업데이트'버튼이 있어야하며 제목은 '편집'으로 설정해야하며이 두 필드가 있어야합니다 삭제 모달이 표시된 경우 이 버튼은 '삭제'여야하며 여기에 제목과 일부 콘텐츠로 삭제가 있어야합니다 그래서 내가 기본적으로하는 것은, 언제 편집 모달 클릭 함 나는 하나의 클래스를 추가하고 다른 클래스를 제거 할 것이다 마찬가지로 2 개의 버튼 이것이 모달을 편집하기 때문에 삭제 내용을 숨길 것입니다 주요 부분은 여기에 온다

나는이 두 값을 얻을 것이며,이 두 값은 내가 여기에 전달한 데이터 속성 이것은 'id'이고 이것이 여기에서 사용하는 'name'값입니다 보여줄만큼 그래서 그들을 모달,이 모달,이 2 개의 값으로 보여주기 위해 마찬가지로 삭제 모달의 경우이 두 값 (id 및 name)을 사용합니다 따라서 업데이트가 모달에서 클릭되면 모달에서 업데이트를 클릭하면이 편집 함수를 호출합니다 여기에 클래스 편집도 추가합니다 그래서 편집 버튼을 클릭하면, 내가하는 일은 게시물 요청이있는 AJAX 호출 및 URL editItem 나는 지나갈 것이다

이 2, 이름과 이드 함수에 따라서, 항목 편집 기능 이 ID로 행을 찾고 이름을 업데이트합니다 저장 한 다음 JSON을 반환하십시오 성공 함수에서 나는 새 필드를 편집 한 필드를 바꿀 것이다 여기 replaceWith (자바 스크립트 함수) 업데이트 작업과 작업 삭제 이것은 업데이트 작업과 비슷합니다 나는 post 요청 인 AJAX 호출을 사용할 것이고 그 URL은 deleteItem이다

나는 내가 여기에있는 이드를 그냥 지나칠 것이다 그리고 삭제 기능에서 나는 데이터베이스 테이블에서 id를 찾은 다음 삭제할 것입니다 JSON 반환 그래서 성공 함수에서, 나는 단지 이 비디오가 마음에 들면 채널에 가입하십시오 그건 그렇고 이 비디오와 관련된 모든 링크는 원래 게시물 링크,이 링크 또한 github 링크, 작업 데모 이 모든 것은 아래 설명에서 제공됩니다

채널을 구독하고 싶습니다 시청 해주셔서 감사합니다 계속 지켜봐주십시오 다음 비디오에서 다시 만나요