สอน PHP : ดึงข้อมูลสถานที่ท่องเที่ยวมาแสดงใน Drop Down List ด้วย PHP + AJAX

AJAX 트래픽 그러면 드롭 다운 목록의 정보가 변경됩니다 각 지구 매력은 무엇입니까? AJAX로 작업하면 페이지를 변경할 필요가 없습니다

그러나 데이터를 보낼 수 있습니다

JQuery Autocomplete Tutorial – From AJAX/PHP

이 비디오는 AJAX 데이터에서 자동 완성 입력을 만드는 방법을 보여줍니다 이전 튜토리얼에서는 정적 배열의 제안 목록을 사용했습니다

대신 AJAX를 사용하도록 변경합니다 AJAX를 사용하려면 플러그인이 추천 목록을 검색하는 데 사용할 "serviceUrl"을 제공해야합니다 그래서 이전 튜토리얼에서 배열을 제거하려고합니다 "lookup"을 "serviceUrl"로 바꿉니다 service

php라는 새로운 페이지를 만들 것입니다 이 페이지는 추천 목록을 다시 플러그인에 응답합니다 문서로 돌아가서 유효한 응답 형식을 봅시다 플러그인을 사용하려면 응답이 JSON 형식이어야합니다 목록은 이전 튜토리얼처럼 객체 형식 또는 일반 문자열 배열 일 수 있습니다

이 비디오에서는 정적 배열을 반향 출력하지만 실제 세계에서는 데이터베이스에서 목록을 검색합니다 개발자 콘솔을 열면 입력 된 모든 문자에 대해 AJAX 호출이 수행됩니다 쿼리 문자열이 서비스 URL과 함께 전달됩니다 따라서 데이터베이스에서 목록을 검색하려면 $ _GET [ 'query']를 사용하여 WHERE 절에 대한 쿼리 문자열을 가져올 수 있습니다 보고 주셔서 감사합니다! 더 많은 주간 자습서를 구독하십시오!

CIS165 L8 Ajax & JSON

CIS 165 JavaScript에 다시 오신 것을 환영합니다 프로그램 작성

나는 빅터 캄포스 다 그래서 우리 교과서의 8 번째 교재가 전부입니다 JSON과 Ajax 그래서 이것이 가장 동적 웹 사이트를 만드는 현대적인 방법 특히 JSON이있는 웹 사이트 그건 매우 일반적인 형식 유용하고 실용적인 요즘

그래서 이 장에서 내가 할 일은 내가 최종 결과를 보여줄 것입니다 그러면 그것을 생성해야합니다 나는 Firefox에서 실행하기 잠시 후 "캐릭터 가져 오기"를 클릭합니다 그래서 우리는 거기에 작은 애니메이션을 얻습니다 그게 다시 jQuery 덕분에

우리는 익숙한 문자 이전 과제 그녀 아래의 일부 텍스트 그림 오른쪽의 일부 텍스트 그림 다른 캐릭터가 나올거야 그래서 조금 다른 임의의 성격 애니메이션과 그들의 약간의 정보가 표시됩니다 그래서 이것은 가고있다

이전에 다소 기초를 두다 우리가 해보았지만 JSON의 최신 개념을 설명하십시오 이것은 JavaScript Object Notation입니다 이 캐릭터가 여기있는 모든 것 JavaScript 객체에 저장됩니다 사진에 a의 이름이있다 캐릭터의 원점이있다

성격에는 두 개의 초능력이있다 그들은 무작위로 우리는 작은 애니메이션이있는 캐릭터 설정은 JSON을 갖게 될 것입니다 읽은 후 JSON 파일에 파일을 추가하십시오 그 장은 그것이 단순히 텍스트는 특별한 의미가 없다 이 텍스트는 처리되지만 JavaScript 또는 jQuery 그래서 우리는 당신의 기억을 새롭게하기 위해서 중괄호 다음 우리는 몇 가지 열쇠가있다

콜론 일부 값 쉼표 다른 키 다른 값으로 구분됩니다 이 방법 키 값 쌍까지 매우 마지막 항목 사이에 쉼표가 없습니다 다른 모든 항목에는 쉼표가 있으며 싱글을 사용하는 경우 큰 따옴표를 사용해야합니다 유효한 JSON 형식이 아닌 따옴표 이 객체의 마지막 요소 쉼표가없고 우리는 그 책에서 그것을 보았습니다 그것은 우리에게 매우 복잡해질 수 있다고 말한다

우리가 사용자의 열쇠를 가지고 있다면 콜론은 배열의 값이고 배열에서 여러 객체를 가질 수 있습니다 거기서 나는 첫 번째 대상을 가질 수있다 당신은 존 쉼표 법안을 알고 있지만 정말로 JSON에서 배열을 사용하는 방법 더 복잡한 데이터 구조를위한 것입니다 우리는 다른 JSON 객체와 그때 나는 콜론 존이라고 말할 수있다 배열의 두 번째 JSON 객체 Bill의 다음 JSON 객체를 Bill이라는 이름으로 JSON 객체 이름의 배열 여기의 입력란은 그들은 다른 요소들을 참조하고있다

물론 나는 자본화 할 수있다 우리가 문자열을 사용할 수있는 모든 것 객체의 숫자와 객체를 사용할 수 있습니다 그래서 우리의 데이터를 저장하는 방법이지만 우리는 더 복잡해 질 수 있습니다 우리는 단지 이름을 저장하고있다 하지만 우리는 다른 요소들을 저장하고 있습니다

그렇다면 우리는 실제로 그것을 분리해야만합니다 이것을 여러개로 나눈다 이보다 더 선을 긋습니다 다른 데이터에있는 동일한 데이터 프레 젠 테이션 오 사실은 내가 이동합니다 이 녀석은 그렇게 똑같아 데이터이지만 다른 프리젠 테이션 왜냐하면 내가 할 수있는 일은 내가 이 물건에서 존의 이름을 얻었 어

쉼표 주소를 사용할 수 있으며 123 개의 가짜 주소입니다 Bill comma의 주소는 999입니다 오타이 레이크로드 및 낸시 5 피트 주소 어디서나 5 번 높은 곳에 있으므로 책에서 본 것의 요약 당신이 필요로하는 특정 과제 네가 가진 것과 똑같은 일을하는거야 char JSON 파일 또는 자동차 JSON 파일 JSON 문자가 처음부터 시작됩니다 중괄호가있는 첫 번째 줄과 그것으로 끝까지갑니다

닫는 중괄호 나는 백 개있어 여기 줄을 서서 모든 차를 가져 왔어 우리의 모든 캐릭터가 우리의 핵심입니다 값 콜론은 배열이고 그 온라인으로 시작하고 모든 방법을 간다 99로 정확하게 재현됩니다

내가이 작은 꼬마에 들어가기 위해 잠깐 한거야 내가 쓴 연습의 비트 JSON 객체 이름 spider-man 쉼표 이름 감히 쉼표로 쉼표로 이름을 붙입니다 나는 그 분야에 대해 이야기하고있다 해당 값은 그래픽 및 동일한 그래픽에 대한 링크가 포함되어 있습니다 이전 과제에 사용했던 해당 링크를 숙제 쉼표에 대한 설명 다른 키 값 쌍의 쉼표 그래픽 키의 가치를 과시하다 쉼표 원점 키와 그 값 쉼표 같은 스키마를 반복적으로 같은 구조를 반복해서 반복합니다

조금 더 복잡하고 잘 말하다 우리는 우리의 힘을 가지고있다 그것은 힘 1과 힘의 배열이다 너무 복잡해지기 때문에 평범한 구식으로 설정된 데이터 구조 JSON은 일반 텍스트이므로 전에 그것에 대해 들어 봤어 복잡한 신비주의처럼 보였다

JSON은 단순한 텍스트 일뿐입니다 JSON JSON을 만듭니다 특정 형식이어야한다 구문과 스타일 이외에 특별한 소프트웨어가 필요하다 우리는 물론 자바 스크립트를 사용하고 있습니다

처리 할 내용을 처리합니다 문자가있는 특정 이름 기원과 힘을 가진 그래픽 그 힘은 결장 한 힘이다 콜론에 쉼표로 표시된 쉼표 벽을 크롤링하면 마지막 항목이됩니다 array 객체의 마지막 항목입니다 그 열쇠의 그 배열에 특정 개체 쉼표로 동일한 작업 데어 데블과 보이지 않는 여자 킹핀 마그노 박사

파멸의 검은 고양이 모두 똑같은 계획이야 그 하나의 객체는 모든 문자에 대해 설정 한 배열 모든 차와 그것과 더불어 이름 키를 가지고있다 가치있는 그래픽과 원산지 힘 마지막 항목이 없으므로 마지막 쉼표가 없습니다 내 캐릭터 JSON 데이터 정의 이것은 어느 정도 데이터베이스이다 전통적으로 데이터베이스는 어떤 형태의 서버이지만 JSON을 사용합니다

서버가 필요없고 저장할 수 있습니다 데이터를 검색하면 HTML 파일에있는 HTML 파일 평소 HTML 헤드 메타 타이틀 설정 스타일을 가지고 있습니다 시체의 순간 머리글 버튼으로 무언가를 할 것이다 그 전에 우리가했던 ID div가 있는데 두 개의 열이 표시됩니다 너는 왼쪽 열의 앞에 그것을했다

오른쪽 열 그래서 스타일의 조금 전체 열 요소를 간단하게 너비의 100 퍼센트를 차지한다 왼쪽 열이 떠있는 화면의 왼쪽 그 너비의 50 퍼센트를 텍스트를 가운데 정렬 오른쪽 칸도 단순히 왼쪽으로 떠있다 우리가 그렇게해야하기 때문에 줄을 서서 그 너비가 50 % 그래서 결과는 우리가 열 설정 우리는 대본 있어요 jQuery 라이브러리에 대한 선언 311 이전과 같은 것을 사용한다 minified 버전 다음 우리는 메인있어 스크립트 우리는 새로운 iffy가 작동하도록했습니다 와 함께 단순히 달러 기호 그리고 그것들은 괄호를 포함한다

최종 실행 괄호 없음 우리는 최종적인 것이 필요 없다는 것을 기억하십시오 우리가 처리 할 때 괄호를 실행 jquery 우리는 마지막 운동에서 그것을 보았습니다 엄격한 사용법은 항상 여기에 있습니다 ~을 만들 변수를 채우십시오 eczema xml httprequest 너무 xhr 새로운 포커스가있는 xmlhttprequest 객체 최근 장에서 크게 기본적으로 연결하도록 허용 외부 콘텐츠에 도달하려고합니다

JSON 파일에 저장하고 데이터를 우리가 jquery를 사용하고 있기 때문에이 HTML 파일 jquery 요소를 만들어 전체를 저장할 버튼을 저장하십시오 열 요소 왼쪽 열 요소 달러가있는 오른쪽 열 요소 기호를 처음부터 그리다 우리가 가지고있는 jquery 기반이라고 자동차 기능을 얻으겠습니다 잠시 후 그리고 마지막에 요소에 대한 이벤트 리스너가 있습니다 버튼 클릭으로 차를 타십시오

자동차 기능으로 버튼이 활성화되어 있습니다 차를 타면 어떻게 될까요? xhr 객체와의 연결을 열려면 파일에서 데이터를 가져올 것입니다 파일에 자동차 JSON 파일을 우리는 이것이 사실이라고 말하고 있습니다 우리가 연결하는 비동기 호출 우리가 비동기 적으로 의미하는 파일 우리가 그 파일에 연결하려고 시도했다 또한 다른 일을하는 것이 아니라 자유롭게 할 수있다

파일에 대한 연결을 기다린다 비동기로 실제로 연결을 시도합니다 이 파일은 우리에게 준비시키는 것입니다 실제로 연결할 파일에 연결하십시오 우리가 할 파일에 xhr은 그것을 보낸다

실제로 우리를 파일에 연결합니다 우리는 무엇을 보내고 우리는 보내고 있습니다 파일에 연결을 요청하면 추가 매개 변수를 말하지 않기 때문에 아니오라고 말하면 우리에게 파일을 연결하십시오 우리가 관리한다면 load xhr download 데이터를 올바르게로드하거나 자동차 JSON 파일은 다음 작업을 수행합니다 이것은 익명의 함수였다

명명 된 함수이지만 끝낼 수 있습니다 단순히 익명의 기능으로 함수 열기 닫기 괄호 열기 포괄적 인 중괄호 그 모든 것 때문에 로딩 할 때 무슨 일이 일어나는가? 데이터는 우리가 데이터를 변환해야하는 데이터 우리가 HTML로 작업 할 수있는 것 우리가 얻은이 모든 데이터는 JSON 파일은 단순한 오래된 텍스트이지만 우리가 사용할 수있는 방식으로 설정되어 있습니다 자바 스크립트에서 객체로 JSON JavaScript 객체 표기법 그것을 분석 할 필요가있다 내 라인 48이하고있는 데이터 여기서 car 객체라는 변수를 만듭니다 모든 문자를 포함하는 객체 도트 응답 xhr에서 오는 데이터 xhr 개체가 가득 찬 텍스트 속성 중 하나가 응답 텍스트 그래서 우리는 기본적으로 이 모든 데이터를 xhr의 텍스트로 그 전체 요점이었던 대상 열리고 우리가 필요로하는 잘 보낸다

jsonparse notice JSON이 있어야합니다 모든 자본 jsonparse 우리는 그것을 적용한다 방법에 그 데이터를 다음에 도착 car 객체 변수에 모두 저장 됨 이 데이터가 모두 저장되었습니다

평면 데이터가 우리가 할 수있는 JavaScript 객체 우리의 jQuery 또는 JavaScript 모두 적용 우리가 무작위로가는 것에 대한 지식 우리의 데이터에서 문자를 가져 와서 좋은 오래 된 자동차 변수 mathrandom은 x 차 객체가 될 것입니다 모든 차 길이 그러나 그것이 의미하는 것은이다 모든 JSON 데이터 내부 우리가 모든 차를 가지고있어 거기의 json 데이터 문자로 이루어지며 내가 말했듯이 배열은 위치가 0이므로 배열의 첫 번째는 스파이더 맨입니다 배열의 위치가 무모한 두 번째 위치는이 등등 그래서이 그 길이의 배열입니다

그 객체로부터 길이를 배열합니다 우리 범위는 0에서부터 무작위로 0 수학 도트를 보장하는 길이 바닥이 새 것이 아니기 때문에 우리가 만든다 저장하기 위해 비어있는 두 개의 문자열 캐릭터의 기본 데이터와 문자의 통계는 그 문자열 이름이 붙들려있다 소스가있는 이미지 태그를 단락 짓지 만 우리가 동적으로 선택된 문자들 image 캐릭터 오브젝트를 저장할 필요가있다 모든 문자 배열에서 특히 난수는 그래픽을 너무 찢어서 줘

다시 모든 차량 데이터에서 배열의 무작위 위치를 그렇게 배열하십시오 임의의 문자라고 생각해 봅시다 데어 데블입니다 우리가 Daredevils를 표시하도록 이름이 있습니다 우리가 그래픽을 원한다면 거기에 이름을 써라

링크 주소 인 그래픽 내가 너에게 그 소스를 제공 할거야 그 주소가 뭐든간에 우리가 닫는 곳으로 설정합니다 태그는 다음 단락을 닫습니다 우리가 더 많이 추가하는 비슷한 줄 새 단락을 만드는 문자열 이번에는 캐릭터의 이름 모든 데이터의 개체 특정 위치에서 배열은 다시 한번 나를 말할 것이다 이름과 잘 화면에 표시 우리 문자열을 구축하고 있습니다

실제로 우리가 가지고있는 스크린에 그것을 디스플레이해라 우리는 왼쪽 열 요소를 div로 만들고 우리는 우리는 HTML을 쓸 것입니다 우리가 만든 문자열을 써주세요 좋은 애니메이션을하기 위해서 우리는 jquery 메서드를 숨긴 다음 사라집니다 스탯 2 초 만에 우리가 가진 것과 매우 흡사 한 것 우리가 추가 할 통계 문자열 우리가 필요한 원점을 말할 수있는 단락 데이터에서 원점을 얻으려면 우리 모두로부터의 우리의 인물 문자 배열 우리 데이터의 배열 원점 필드 에서 모든 자동차 배열 특정 위치는 나에게 원점을 준다

필드 바로 거기에 표시됩니다 그럼 나는 총알 점수를 표시 할거야 목록 그래서 새로운 문자열에 더 추가 단락이 UL과 같이 정렬되지 않은 목록을 시작합니다 우리가 본 순서없는 목록 목록 항목 목록 항목 시작 목록 항목 끝 목록 항목 시작 목록 항목 및 목록 항목 연결을 통해 통보 배열의 Google 데이터에서 배열의 특정 위치 시간은 나에게 힘 배열 위치 0 p 1을 준다 그건 좀 더 복잡하지만하자

Google 데이터를 다시보고 그 이유를 확인하십시오 우리는 모든 자동차 배열을 가지고있어 박람회 후 우리는 힘을 가졌어 well powers는 배열에있는 배열입니다 인접 오브젝트 파워는 JSON 데이터를 배열의 JSON 데이터 인 배열 JSON 데이터가 너무 많아서 머리가 아플 때도 있지만, 그렇게 할 때 그것은 완벽 함으로 힘을 얻는다 키 콜론의 값은에서 배열입니다

배열의 위치는 0입니다 두 위치 등 우리는 하나의 JSON 있어요 이 powers 배열의 객체 위치 0 다른 위치는 없습니다 배열에서 속지 마라 위치가 지정되지 않은 p1과 p2가 있습니다 0 이 둘의 위치 1은 키입니다

위치 0의 1 개의 객체의 값 당신이 보여줄 수있는 힘의 배열 배열 쉼표 2의 위치 2를 원했습니다 부모 JSON 개체를 부모 개체라고합시다 실제로 부모가 아니지만 이모는 벤 삼촌에게 쉼표로 부모님과 이제 우리는 힘 배열 위치 1을가집니다 힘 배열 위치 0은 위치 1 인 반면 p1 p2 데이터에 전원을 공급합니다 또는 배열의 항목 2가 부모 데이터는 바로 그걸 그게 바로 우리가 위치 p1로 제로의 힘을 얻는다

모든 캐릭터는 배열의 값으로 키를 키 그들은 모두 제로를가집니다 포지션과 그들은 모두 p1과 ap2 그리고 다른 값으로 목록 항목 1 목록 항목 2 목록 끝내기 우리가 표시해야 할 단락을 끝내야합니다 그 문자열 통계는 화면에 나타나므로 우리가 쓰고있는 문자열을 HTML로 출력해라 우리가 할 수 있도록 먼저 숨길 필요가 있습니다 페이드 인하 고 난 다음에 시간의 조금의 지연 나는 원하는 왼쪽 열에서 첫 번째로 페이드가 시작됩니다

두 번째 열은 오른쪽 칼럼의 1 / 4 나중에 두 번째로 1 초 및 3/4 초 페이드 인하여 모든 것이 사라 지도록 2 초 만에 오른쪽 열 4 분의 1 초 안에 사라지기 시작합니다 왼쪽 열 다음에 우리가 끝난다 그 결과를 다시 얻으세요 우리가 성격을 얻는 것을 새롭게해라 우리 데이터에서 우리는이 캐릭터를 얻었습니다

그 캐릭터는이 캐릭터 등등 사진이로드 중입니다 왼쪽 열과 텍스트 이름 우리는 오른쪽에 기원 필드가 있습니다 열과 힘 p1과 p2가 적재되고있다 오른쪽 열에 우리는 독이있다

당신이 보는 것 같은 종류의 페이딩의 다른 속도 그렇게 원점을 표시하고 그림과 이것이 많은 일을하는 이름입니다 우리가 이미 본 개념 중 그 (것)들에 그러나 큰 생각은 지금이다 우리 데이터가 JSON 파일에서 온다 에 저장된 외부 JSON 파일 프로젝트와 동일한 폴더에 데이터가 저장됩니다 우리가 가진 프로젝트 폴더에 저장되어있다 index

html 파일과 자동차 JSON이 있습니다 그게 바로 그거야 처리되지 않은 일반 오래된 데이터 HTML 및 그 때문에 작동합니다 43 행에 우리가 자동차 JSON 파일에서 우리가 다른 폴더를 가지고있는 다른 폴더 경로가 다른 서버에 있다면 그건 또 다른 토론이야 또 다른 시간 동안 이것은 다른 서버가 아니라 우리 지식에서 우리 셋업의이 시점은 우리가 가지 않을거야

내가 가진 것에 대해서도 꽤 대처하고있다 당신이 이것을 시험해 본 것은 내가 지금까지 해왔 던 것입니다 우리가 사용해온 파이어 폭스에서 테스트 해보세요 크롬 전체가 나를로드하자 이 파일은 Chrome에서와 동일합니다 차를 타기 전에는 아무 일도 일어나지 않습니다

우리 콘솔 출력에서 ​​우리는 큰 오래된 것을 얻습니다 무서운 오류 xmlhttprequest를로드 할 수 없습니다 cara JSON 교차 출처 요청은 프로토콜 스키마에만 지원됨 에서 크롬은 매우 엄격하고 그렇지 않습니다 JSON 데이터를로드하는 것이 크롬이 우리를 안전하게 지키고 있기 때문에 좋다 이론 상으로는 우리는 아마도 JSON 파일에 바이러스가 가득 차 있거나 다른 나쁜 데이터는 크롬에 매우 있습니다 외부를 열지 않는 것에 대한 엄격한 견해 서로 다른 도메인에있는 경우 파일 기술적으로 우리는 자동차를 열려고합니다 콜론 파일 JSON from JSON Chrome 그것이 오면 우리에게 열어 줘

HTTP 콜론 슬래시 슬래시 자동차 JSON 우리는 지식을 가지고 있지 않습니다 이 시점에서 그렇게하면 이것의 수업 8 테스트 중입니다 과제는에서 테스트해야합니다 파이어 폭스 나는 사파리가 잘 작동한다고 생각한다 Internet Explorer가 잘 작동하고 아마 오페라 크롬이 아니라고 생각해

불행히도 일하게 될 더 많은 조치를 취하여 크롬을 테스트 해 보겠습니다 파이어 폭스에서 일하는 것은 파이어 폭스에서 그것을 얻으 러 가라 com 또는 주소가 무엇이든지간에 테스트를한다면 잘 작동 할 것입니다 당신의 콘솔을 보면 당신은 볼 수 있습니다 잘 형성되지 않은 메시지는 그것을 무시합니다

그건 파이어 폭스 뿐이야 우리를 방금 보호 해주는 것입니다 파이어 폭스 말로는 기술적으로 데이터 기대했던 것이 아니기를 기대했다 네가 이걸 가지고 있다고 걱정하지 마라 매회 정형 오류가 없으므로 내 데이터를로드하고 문자 나는 그 메시지를 얻을거야

그게 내가 할 일이있을거야 또 다른 한명은 닥터가 될거야 파멸시키다 파이어 폭스 일 뿐이다 우리가 생각하는 그런 종류의 데이터가 아닙니다 먹이를 주어야한다고 생각한다

그것은 아마 XML 데이터로보고있다 비록 jase와 데이터이고 그것을 변환하는 것에 대해 걱정하고 잘하지 못한다 형성되었다 이 작품 실제 환경에서 테스트에 우리를 위해 우리는 그 작은 특질을 얻지 만 걱정하지 마십시오

그것에 대해 그러나 불행히도 큰 변덕 Chrome에서 작동하지 않는다는 것입니다 그것은 갔다 Internet Explorer에서 제대로로드하려면 여긴 에지 야 어떻게 작동하는지 확인하기 만하면됩니다

여기 숯을 얻으십시오; 예 에지가 그것을로드하지 않습니다 어느 쪽이든 괜찮아 그것이 아니기 때문에 우리는 그것이 모두에게 효과가 있음을 알고있다 다른 브라우저는 문제지만 에서 데이터를로드하는 중입니다 JSON을 자주 사용하는 실제 서버 의 데이터 그래서 거기에 간다

돌아가서 이 코드를 확인해 보니별로 좋지 않습니다 코드는 그렇게 복잡하지 않습니다 그만큼 이 데이터를 작성하면 복잡해집니다 구조와이 ​​데이터 구조는 매우 용서하지 않아 그래서 당신이 읽었는지 확인하십시오

이 장에서는 JSON 완전하게 작동합니다 여기 예제를 확인하십시오 그리고 이것은 당신의 다음이 될 것입니다 숙제 내가 무엇을 만들지? 너 자신의 벌거 벗은 채 여기에 너를 보여주고있어

소유 그래서 이것은 Victor Campos가 다음에 보자

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 부분을 보도록 권할 것입니다 우리는이 작은 것을 끝낼 것입니다 프로젝트 및 질문이 있으시면 언제든지 문의하십시오 아래의 댓글 및이 동영상이 마음에 들면 그것을 좋아하고 친구를 공유하십시오 돌보다