Jquery Ajax Insert Step By Step Bangla #1(Making Form)

오늘 자습서에 오신 것을 환영합니다 jquery ajax에 관한이 튜토리얼은 PHP를 사용하여 삽입한다

이 튜토리얼을 단계별로 알려 드리겠습니다 처음에는 부트 스트랩을 사용하여 from을 만들 것입니다 그런 다음 PHP로 데이터를 삽입합니다 그런 다음 세 번째 단계는 jquery ajax를 사용하여 데이터를 삽입합니다 오늘 우리는 첫 번째 단계 여기에 데이터베이스 연결을 위해 mysqli를 사용할 것이다

오늘 우리는 다음 부분에서 시작하자 ! 여기에 이미 css라는 폴더가 생성되었습니다 이 CSS 폴더에 이미 bootstrapcss 파일을 보관하고 있습니다 getbootstrapcom에서 부트 스트랩을 다운로드 할 수도 있습니다

부트 스트랩을 다운로드 한 후 bootstrapcss 파일을 가져 와서 css 폴더에 보관하십시오 나는 똑같은 일을했다 이미 indexphp라는 파일을 만들었습니다

VueJS 2 CRUD with php and MySQL in Bangla: Part-1/3

Vue 2는 PHP와 MySQL로 무결합니다 오늘 우리는 PHP, vue js 및 MySQL을 사용하여 CRUD 응용 프로그램을 만드는 방법을 배웁니다

출력이 어떻게 될지 보자 우리는 새로운 사용자를 추가하고 기존 사용자를 편집 및 삭제할 수 있습니다 그게 전부 야 우리는 지금 이것을 만들 것이다

우선, 새로운 데이터베이스를 생성하십시오 데이터베이스 이름을 입력하고 데이터 정렬로 utf8_general_ci를 선택한 다음 생성 버튼을 누릅니다 4 개의 필드가있는 users라는 테이블을 만듭니다 첫 번째 열의 이름을 id로 지정하고 유형으로 BIGINT를 선택하십시오 길이 : 20이고이 열은 기본이어야합니다

색인 유형으로 해시 선택 그런 다음 자동 증가를 확인하십시오 다음 컬럼 이름은 username이며, 입력 : VARCHAR, length : 99 마찬가지로 이메일, VARCHAR, 99 그리고 모바일, VARCHAR, 99 그런 다음 저장하십시오 그리고 우리 데이터베이스가 준비되었습니다 오늘은 뷰 파트 만 생성합니다 (서버 측 코드 없음) 먼저 www 디렉토리에 vuephpcrud라는 폴더를 만듭니다

그런 다음 그것을 숭고한 텍스트 위에 드래그 앤 드롭하십시오 마크 업 코드를 작성할 폴더 내에 indexhtml 파일을 만듭니다 "Vuejs php와 mysql을 사용하여 crud"라는 제목을 부여하십시오

먼저 vuejs 라이브러리가 필요하다는 것을 알고 있습니다 google에서 vuejs cdn을 검색해 봅시다 직접 cdn 링크를 포함 시키면 vue js 라이브러리를 로컬 서버에 저장할 수 있습니다 두 번째 옵션을 선택합니다

압축 된 버전을 열고 모두 선택하고 복사하십시오 프로젝트 디렉토리에 vuejs 파일을 새로 만듭니다 여기에 coppied 코드를 붙여 넣으세요 이 파일은 index

html 파일에 포함되어야합니다 앱용으로 다른 파일 인 appjs가 필요합니다 이제 appjs 파일을 만듭니다

vue j를 구현하려면 Vue 인스턴스를 만들어야한다는 것을 알고 있습니다 매개 변수로 객체를 가져 오는 요소 속성 (must)이 있습니다 또한 데이터 속성이 있습니다 마운트 된 속성은 자동으로 호출되는 함수입니다 나머지 함수는 메소드 객체 안에 있어야합니다

마운트 된 함수 안에 무엇인가를 로깅하고 vue js가 성공적으로 구현되었는지 아닌지 확인해 봅시다 요소 검사 및 콘솔 클릭 여기서 우리는 "마운트 된"로그를 볼 수 있습니다 이는 vue js가 성공적으로 구현되었음을 의미합니다 보기 부분을 만들어 보겠습니다 스타일 시트를 만들고 index

html에 링크하십시오 출력을보십시오 여기서 우리는 컨테이너를 본다 사용자 제목 목록 및 새 단추 추가 먼저 *로 브라우저 스타일을 재설정합니다 그런 다음 컨테이너 클래스를 만듭니다

너비 : 960, 여백 : 자동, 여백 – 상단 : 44 픽셀 레이아웃을 위해 우리는 세 가지 종류의 fleft, fright 및 clear를 만듭니다 우리는 실수를했습니다 우리는 루트 div를 만들지 않았습니다 그것을 만들어 보자 컨테이너 div를 만듭니다

그런 다음 fleft clas 및 "사용자 목록 작성"으로 h1 태그를 만듭니다 fright 클래스가있는 버튼을 추가하고 Add New를 작성하십시오 스타일을 위해 addNew 클래스를 추가하십시오 h1 및 addNew에 스타일 추가 fleft와 fright 클래스를 사용 했으므로 명확한 클래스를 추가하십시오

그런 다음 hr 요소를 추가하십시오 출력을 봅시다 거의 같은 가자 이제 테이블을 만들어야합니다 hr 태그 뒤에 생성하십시오

스타일을위한 클래스 list를 추가하십시오 표제 표제 작성 더미 데이터 추가 수정 및 삭제 버튼을 만듭니다 출력을 보자 좋지 않아

표 스타일 추가 출력을 살펴 보자 나쁘지 않다 하지만 스타일을 수정 해보자 더 좋아 보인다 버튼 스타일 추가 이제 멋지게 보입니다

이제 Add New 버튼을 클릭했을 때 볼 수있는 모달을 생성합니다 전에 모달 만들기 </ div> ( "#root") 모달에 스타일 추가 출력을 봅시다 더 많은 스타일이 필요합니다 모달에 스타일 추가 추가 이제 더 좋아 보인다 중앙에 모달을 설정하려면 'margin : auto'를 추가하십시오

margin-top 속성 추가 이제 좋아 보인다! 그러나 새로 추가 버튼을 클릭해야만 볼 수 있습니다! vue js로 해보 죠 처음에는 false 인 데이터 객체 안에 showingAddModal 변수를 만듭니다 showingAddModal 변수를 사용하여 모달에 v-if 지시문을 추가하십시오 약간의 변경 모달이 처음에는 표시되지 않습니다 보이게하려면 새 버튼 추가시 @click 이벤트를 추가하십시오

여기서 함수를 호출하거나 인라인 스크립트를 작성할 수 있습니다 우리는 인라인 스크립트를 작성합니다 이제 끝났다 이제 우리는 모달을 닫아야 만합니다 그렇게하려면 모달 제목 안에 닫기 버튼을 추가하십시오

클래스를 추가하여 스타일을 지정하십시오 닫기 버튼에 대한 스타일 쓰기 명확한 버튼을 추가해야합니다 저장하고 새로 고침이 거의 완료되었습니다 닫기 버튼에 흰색 색상 추가 이제 닫기 버튼을 클릭 할 때 모달을 닫아야합니다 인라인 스크립트로 수행하십시오

승인 모달 열기 및 닫기 기능이 완료되었습니다 이제 모달 콘텐츠 내부에 양식을 추가하십시오 vue js를 사용하면 form 태그가 필요 없다는 것을 알고 있습니다 표 안에 입력 필드 만 추가 저장 버튼을 호출 할 때 모달을 닫아야합니다

위 코드를 복사하여 붙여 넣으십시오 이제 양식에 몇 가지 스타일을 추가하십시오 이제 더 좋아 보인다 이제 동일한 편집 및 삭제 모달을 만듭니다 수정 모달 복사, 붙여 넣기 및 작성 모달 편집 및 삭제를 위해 두 개의 내부 변수 데이터 객체 추가 삭제 모달 복사, 붙여 넣기 및 작성 예 또는 아니요 버튼이 호출되면 삭제 모달을 닫아야합니다

위의 코드를 복사하여 붙여 넣으면됩니다 수정 또는 삭제 단추를 클릭하면 편집 및 삭제 모달이 표시됩니다 대처하여이 작업을 해보 죠 나는 오늘의 일부가 준비되어 있다고 생각한다 다음 자습서를 얻으려면 부탁하십시오

감사!