Rating System with more functionalities using jQuery

안녕 Youtube, Happy Coder의 Mary입니다 오늘의 비디오에서는 평가 시스템에 기능을 추가하는 방법을 보여 드리겠습니다

JQuery를 사용합니다 설명의 목적으로 Microsoft Visual Studio를 여는 중입니다 먼저, 이전 비디오에서 내가 보여 주었던 평가 시스템의 코드를 요약 해 보겠습니다 이 코드는 화면에 표시된 것과 같은 웹 페이지를 생성했습니다 선택할 사용자

그러나 개발자의 관점에서 볼 때, 사용자가 선택한 서클의 수를 입력하십시오 또한 서클 수를 확인하는 메시지를 반환하는 함수를 추가하고 싶습니다 클릭 함 둘째, 이전 비디오에서 제공 한 html 및 css 스크립트가 edX는 5 개의 기본 원에 대한 코드를 포함합니다 그러나 오늘날의 비디오에서 이러한 코드는 존재하지 않습니다

즉, 코드를 추가해야합니다 웹 페이지가 시작되면 5 개의 동그라미를 표시하는 코드입니다 이제 업데이트 된 스크립트를 살펴 보겠습니다 그것은 기본적으로 4 부분으로 구성됩니다 : 첫 번째 부분에서는이를 "마우스 이벤트"라고 부릅니다 이전 비디오에서와 같이 클릭, 마우스 오버, 마우스 아웃 이벤트에 대한 3 가지 기능을 보여줍니다

내가 만든 약간의 변화는 3 가지 기능 각각에 이름이 부여 된 것입니다 이 작업을 수행하는 목적은 다음 두 함수에서 함수를 이름으로 호출하여 동일한 코드를 반복 작성해야합니다 두 번째 부분은 documentready를 사용하여 페이지가로드 될 때 5 개의 기본 원을 추가하는 것입니다 기능 for 루프와 append 메소드를 사용하여 서클에 대한 html 코드를 추가합니다

최대 루프 수는 5로 설정됩니다 그런 다음 클릭, 마우스 오버, 마우스 아웃 이벤트에 대한 3 가지 함수를 호출하므로 이전 비디오에서 볼 수있는 것처럼이 5 개의 기본 서클에 잘 작동합니다 세 번째 부분은 사용자가 등급 시스템을 사용자 정의 할 수 있도록하는 것입니다 입력 필드에서 선택하고 "최대 값 업데이트"버튼을 클릭하십시오 먼저 사용자가 입력 한 숫자를 저장하는 변수 "input"을 선언했습니다

클릭 기능에서 먼저 빈 방법을 사용하여 기본 서클을 제거하고 싶습니다 그런 다음 for 루프를 사용하고 메소드를 다시 추가하여 서클에 대한 html 코드를 추가합니다 그리고 이번에는 최대 루프가 "입력"에있는 숫자입니다 그런 다음 마우스 이벤트에 대한 3 가지 함수를 다시 호출하여 다음과 같은 결과를 얻습니다 마지막 비디오에 표시됩니다

마지막 부분은 사용자가 Ajax 호출을 통해 서버에 선택한 등급을 보내는 것입니다 이는 post 메소드 및 API를 사용하여 수행됩니다 서버 및 API는 edX에서 수강 한 과정에서 제공됩니다 (DEV208x jQuery 소개) 그리고 JSON 문서는 전송 된 데이터를 취할 value와 maxValue를 나타냅니다 서버

필자의 스크립트에서는 값을 + 1로 설정했습니다 a는 클릭 된 원의 색인을 포함하는 변수이고 index는에서 시작됩니다 0이므로 a + 1은 선택된 등급 인 클릭 된 원의 실제 주문 번호입니다 그런 다음 maxValue를이 함수에서 선언 한 변수 인 circleNumber로 설정합니다 최대 원 번호를 유지하려면 : 페이지가로드 될 때 기본값은 5입니다 (예 : 이를 성취하기위한 if 문)을 입력 한 다음 사용자가 입력 한 숫자로 변경합니다 어떤 것이 있으면

서버 호출이 성공하면 서버는 등급을 확인하는 메시지를 다시 전송합니다 그런 다음 html 메서드를 사용하여 메시지를 표시합니다 이제 테스트해볼 시간입니다 공백을 마우스 오른쪽 버튼으로 클릭하고 "브라우저에서보기"를 선택하십시오 웹 페이지에는 5 개의 등급 서클이로드됩니다

커서를 서클 위로 이동하면 노란색으로 바뀝니다 3 번째 원을 클릭하면 처음 3 개의 원이 녹색으로 바뀝니다 나는 커서를 멀리 옮기고, 녹색은 그대로있다 서클 위로 다시 이동하면 노란색으로 바뀝니다 입력란에 10을 입력하고 "최대 값 업데이트"버튼을 클릭하면 10이 표시됩니다

화면에 원 이러한 서클의 기능은 이전과 동일합니다 커서가 커서를 가리키면 노란색으로 바뀝니다 나는 6 번째 원을 클릭하고 처음 6 개 원은 녹색으로 변합니다 이 등급을 저장하고 싶습니다

버튼을 클릭하면 메시지가 나타납니다 "당신은 10 점 만점에 6 점을 선택했습니다"라는 말이 옳습니다 모든 기능이 예상대로 작동하므로 평가 시스템이 완료되었습니다 그 말로, 비디오가 유익했기를 바랍니다 댓글을 달거나 공유하십시오

채널에 가입하십시오

Cara Membuat Datepicker Tanpa Bootstrap dan Jquery

부트 스트랩 및 Jquery없이 Datepicker를 만드는 방법 안녕하세요, Reza Fahlevi입니다 이전에는 PHP 프로그래밍 언어를 사용하는 자습서 양식을 작성했으며 HTML 프로그래밍 언어 하지만 HTML5를 사용하여 datepicker를 만들고 싶습니다

Datepicker에서 인출 달력 날짜를 입력하고 있습니다 datepicker를 사용하면 웹 페이지가 확실히 상호 작용할 것입니다 우리는 실제로 jquery 또는 javascript, css 및 bootstrap을 사용하여 datepicker를 만들 수 있습니다 먼저 만들기 전에 HTML5를 사용하여 datepicker를 만들어 유연하게 만들 것을 제안합니다 HTML5도 datepicker를 지원합니다

HTML5의 datepicker는 Jquery 또는 Javascript, CSS 및 Bootstrap을 사용하는 것보다 재미 있고 아름답습니다 음, html5 만 datepicker를 사용하려면 html5의 datepicker가 있지만 Mozilla Firefox, Internet Explorer와 같은 웹 브라우저에서는 지원되지 않는 것이 있습니다 html5를 사용하는 datepicker는 Google 크롬, Opera, Safari와 같은이 웹 브라우저를 강력하게 지원합니다 우리는 즉시 html이 서버 측이 아니기 때문에 영향을받지 않는 저장소 폴더에 C :, D : 또는 C : / xampp / htdocs / 형식의 저장소에 저장하는 것을 잊지 마십시오 그것의 파일 이름은 위로이다 그러나 우리는 그것의 체재가 html다는 것을 알아야한다

jquery validation part -2

Jquery 확인 부분 -2 연락처 및 전자 메일 ID의 유효성을 검사합니다 그래서 규칙에서 나는 연락과 이메일을 정의 할 것이다

텍스트 필드에 정의한 이름은 규칙과 동일해야합니다 예 : 연락처 이름 = "연락처"의 경우 규칙의 이름을 연락처로 사용해야합니다 required : 필드를 비울 수 없도록 true가 사용됩니다 digits : 사용자가 숫자 만 입력하도록 true가 사용됩니다 minlength : 10은 모바일 번호

길이는 10이어야합니다 이메일 용으로 지금 required : 이메일 필드가 비어서는 안되기 때문에 true가 사용됩니다 email : true는 이메일의 유효성을 검사하는 데 사용됩니다 이제 오류 메시지를 표시하기 위해 "messages"키워드를 사용합니다 다시 메시지의 연락처 정의는 규칙에서 정의한 것과 동일해야합니다

그래서 우리는 규칙으로 쓴대로 다시 쓰게 될 것입니다 이제 오류 메시지를 작성하십시오 이제는 숫자와 같은 오류 메시지를 씁니다 잘못된 입력을 입력하고 오류 메시지를보십시오 제출을 클릭하고 오류를 확인하십시오 이름 입력란에 숫자를 입력하고 오류를 확인하십시오

올바른 이름을 입력하고 메시지가 표시되지 않는지 확인하십시오 연락처 번호에 알파벳 입력 및 오류보기 이제 오류 메시지가 표시되지 않습니다 설명 상자에서 코드 다운로드

How to use webcam in php Part 1

안녕하세요 친구들, wwwvivekmoyal

in에서 Vivek Moyal 네가 즐기고 싶다 우리의 비디오는 우리의 채널을 좋아하고 구독하십시오 그래서 당신은 어떤 비디오도 놓치지 않을 것입니다 오늘의 튜토리얼은 PHP에서 웹캠을 사용하는 방법에 관한 것입니다

우리 사용자가 우리 프로젝트 나 우리의 응용 프로그램에 대한 이미지를 이미지가 PC 나 노트북에 이미지가없는 경우 웹캠 당신을 위해 일할 것이지만 웹캠을 사용하면 이미지를 직접 클릭 할 필요가 없습니다 로컬 저장소 또는 로컬 PC 랩톱에서 이미지를 업로드 할 수 있습니다 집이나 사무실의 경비원으로 카메라를 사용하면됩니다 당신은 어떤 시간 간격으로 이미지를 가져갈 수 있으며 그것은 당신을 도울 것입니다 보안을 유지하여 주된 질문은 웹캠 사용 방법입니다

PHP에서 당신이 내 블로그를 따라 간다면 내가 주변에 기사를 썼음을 알 수있다 PHP에서 웹캠을 사용하는 방법에 대해 3-4 년 전 나는 jQuery와 플래시를 사용하여 웹 캠에 접근하는 플러그인을 사용했다 이미지를 클릭합니다 또한 이미지를 저장하는 PHP 코드를 작성했습니다 데이터베이스하지만 지금은 최근에 PHP에서 웹캠을 통해 또 다른 기사를 작성했습니다 시간 웹캠은 html5 및 jQuery를 사용하지 않고 플래시를 사용하고 있습니다

육체가 오래 되었기 때문에 사람들은 육체의 사용에 대해 불평하고있었습니다 기술을 사용하여 html5를 사용하여 PHP에서 웹캠을 사용하는 방법부터 시작해 보겠습니다 먼저 jQuery가 데이터베이스를 만들고 그 데이터베이스에서 데이터베이스를 생성하기위한 테이블을 생성한다 PHP myadmin determinant를 열 것이다 여기에 내 PHP myadmin에 있고이 PHP myadmin에있다

나는 PHP 튜토리얼 데이터베이스를 만들 것입니다 이미 가지고 있다고 생각합니다 데이터베이스 네, 당신이 데이터베이스를 만들고 싶다면이 PHP 튜토리얼을 가지고 있습니다 서버와이 IP로 이동하여 데이터베이스를 클릭하면 데이터베이스는 여기에 데이터베이스의 이름을 입력하고 생성을 클릭하십시오 이미 데이터베이스가 있으므로 테이블을 만들면 새롭고 여기서 나는 웹캠의 이름으로 테이블을 만들 것이고 나는 두 개의 열만 있으므로 ID는 when이고 이미지와 이미지는 int 일 때 ID는 5를주고 자동 증가로 만들 것이고 여기서 이미지와 나는 어디에서든지 신경을 써서 사용할 수있는 것을 사용하겠다

나는 150을 사용한다 우리가 PHP 튜토리얼에있는 테이블 웹캠을 볼 수 있도록 저장하십시오 데이터베이스로 이동하여 데이터베이스 설정을 마쳤으므로 이제 데이터베이스로 이동합니다 색인 페이지에서는 웹캠 창과 업로드 된 이미지 목록을 표시합니다 추가 작업은 블로그를 열고 코드 일부를 복사 한 후 코드 복사 및 코드 붙여 넣기 나는 왜 내가 사용하는지 모든 것을 알려줄 것입니다

그 코드와 코드가하는 일은 내가 내 썩은 짓을 ​​할거야 내 블로그가 지구를 볼 수 있습니다 예, 여기에 우리가 웹캠을 사용하는 방법에 대한 기사가 있습니다 PHP는 HTML 파일을 사용하여 이미지를 데이터베이스에 저장합니다 우리 비디오 여기를 클릭 할 수있는 작업 파일을 다운로드하려면 github 페이지로 전송되고 파일을 다운로드 할 수 있습니다 나는이 부분을 복사 할 것이고 나는이 부분을 복사 할 것이고 여기서 나는 폴더 웹캠 및 여기에 색인 파일을 만들고 여기에 붙여 넣으십시오

이것이 모든 페이지에서 우리가 사용하는 정상적인 것임을 알 수 있습니다 명상 이것은 메타 태그이며 이것이 모든 전화 아이콘의 링크입니다 제목 태그와 이것이 우리의 부트 스트랩 CSS의 연결이므로 우리는 할 필요가 없습니다 자동으로 부트 스트랩 스타일을 얻으므로 어떤 스타일을 만드십시오 는 부트 스트랩하는 Google의 Jumbotron 예제입니다 그래서 여기 당신은 우리가 카메라를위한 스타일을 만들었다는 것을 알 수 있습니다

이 첫 번째 그리고 나서 내가 알게 될 것이다 나는 네가 거기에서 볼 수있는 것처럼 이것을 실행할 것이다 내가이 부분을 제거하고 당신이 볼 수있는 몇 가지 문제가 있습니다 여기서 js '및 기타 사항을 정의하지 않았으므로 지금 볼 수 있습니다 여기로 돌아가서 볼 수 있듯이 지금 당장에는 아무것도 가지지 않지만 우리는 여기에서이 부분을 복사하십시오

여기에 붙여 넣기 만하면됩니다하지만 모든 작업을하기 전에 우리는 html5의 웹캠에 액세스하기 위해 jQuery가 필요합니다 그냥 여기에서 패키지를 다운로드하십시오 패키지를 다운로드하기 만하면됩니다 여기 그리고 나는 단지 내 꾸러미를 다운로드 할 것이다

그렇지 않으면 당신은 할 수있다 패키지를 다운로드하려면 페이지를 클릭하면 볼 수 있습니다 모든 것이 거기에 쓰여졌습니다 그러나 비디오를위한 파일이 필요할 때 우리는 그냥 여기에 우편 번호를 다운로드하고 다운로드 한 폴더를 열어서 그냥 자르십시오 여기에서 우리의 것으로 돌아가서 우리 페이지로 추출하십시오

이제 우리가 볼 수 있듯이 우리는 인덱스 페이지를 가지고 있으며 여기에이 인덱스를 넣으면 스크립트 만 사용하십시오 여기에 스크립트를 입력하겠습니다 아무 문제가 없습니다 내가하고있는 일과 여기서 일어나고있는 일은 모두 내가 만든 폴더 J는 G 쿼리와 볼 수 있듯이 J와 다른 사람들이 mp3를 가지고 있기 때문에이 부분을 복사하고 여기에 붙여 넣어 jpg 카메라를 가져야합니다 J는 여기에 있습니다

카메라를 허용 X는 우리가 당신을 볼 수있는 브라우저에 의해 묻습니다 지금 비디오 상자를 볼 수 있으므로 그냥 흐르게 될 것입니다 지금 당장은 당신이 볼 수 있듯이 우리는 이미지가 유감 스럽다 우리는 비디오를 가지고있다 우리가 이미지를 클릭하고 싶다면 버튼이 있습니다 또한 당신이 볼 수 있듯이 나는 그것을 실행하고 당신이이 스크립트를 항상 실행한다면 중간에 나는 지금 당신에게 글로벌 디폴트를 사용하도록 요청했다

여기를 클릭하면 블록을 볼 수 있습니다 허용하면 카메라를 사용하십시오 허용 버튼을 클릭하면 카메라가 시작됩니다 그렇지 않으면 카메라가 시작되지 않습니다 이걸 차단하면 카메라가 제대로 시작되지 않습니다

여기에 우리 코드 부분으로 돌아가서 이것에 대해 이야기 할 것입니다 우리는 컨테이너 태그와 컨테이너를 생성했습니다 고전적인 스타일이 부트 스트랩에서 나오고 있습니다 CSS를 만들었습니다 Col md6 클래스를 사용하면 부트 스트랩이 작동하는 것을 알 수 있습니다

그리드 레이아웃에서 이것은 레이아웃 CSS입니다 이것은 센터 텍스트 이것은 우리의 카메라 정보를위한 것이고이 태그는이 포트 X를 보여주기위한 것입니다 우리가 이것에 대해 논평하면 카메라를 보여줄 것입니다 카메라를 사용하여 시작합니다 주석 처리를 취소하고 이에 대한 의견을 말하면 이 부분이 작동하도록 아무것도 작동하지 않습니다 우리 페이지의 카메라 창에 대한 작업과 표시로이 버튼이 도움이 될 것입니다

당신이 카메라의 스냅 샷을 찍으려는 것을 볼 수 있듯이 우리는 ID를 생성했습니다 스냅 샷과 클래스 v TM BTN의 성공을 소규모로 충족시키고 있습니다 모든 클래스는 부트 스트랩 CSS에서 나오고 우리는 또 다른 멋진 md6 또 다른 격자 레이아웃을 잘못 말할 수 있습니다 업로드 된 이미지를 표시하거나 클릭 이미지를 표시 할 수 있습니다 그냥 지구 탁자 갑판과 모든 목록이나 모든 이미지가 올 것이다

테이블 몸체가 여기에 와서 지금 우리는 Google을 사용하여 jQuery를 참조했습니다 API는 이것들이 빠르기 때문에 시리아 인들입니다 분명히 그렇습니다 우리의 로컬 스크립트보다 훨씬 빠릅니다 당신이 볼 수있는 것처럼 우리 페이지 위에 카메라를 보여주고 이미지를 클릭하십시오

여기에 스크립트 태그를 작성했습니다 그리고 우리가 작성한 스크립트 태그 안에 옵션을 가진 변수와 셔틀 또는 URL에서 이것은 mp3 URL 이것은 mp3 URL이며 모든 URL은 GA 미만입니다 EG는 카메라 밑줄을 표시합니다 그리고 당신이 볼 수 있듯이 여기에 jpg 폴더와 학교 카메라가 있습니다 org 및 이것이 우리 mp3이며 이것은 많은 사람들이 오래된 URL을 사용하고있는 SWF URL입니다

html5는 이전 브라우저에서 작동하지 않으므로 사용하거나 말할 수 있습니다 브라우저를 통해 카메라를 실행하기 때문에 SWF도 사용하게됩니다 파란색 형식으로 형식은 이전 형식이므로 Flash 형식이므로 새 브라우저를 사용하는 경우 이전 브라우저를 사용하는 경우 html5가 작동합니다 플래시가 작동하므로 여기에서 카메라를 만들었습니다 JPG 카메라와 우리는 jpeg 카메라 카메라와이 카메라의 객체를 만들었습니다

이 카메라는 우리가 정의한 모든 옵션의 dev 옵션에 대한 ID입니다 여기에 갈 것이고이 부분 jpg 카메라를 여는 경우 일부 파일은 더 많은 예, 이제 당신은 우리가 여기에 버튼을 만들었다는 것을 볼 수 있습니다 이것은 버튼입니다 스냅 샷을 찍기 위해 ID가 스냅 샷을 찍는 데 여기에서 버튼 클릭 jQuery를 사용하는 함수입니다 그 스냅 샷을 우리 카메라에 클릭하면됩니다

캡쳐 기능과 스냅 샷 도트 쇼를 보여줄 것입니다 스냅 샷은 API URL 액션을 업로드합니다 PHP는 액션을 생성합니다 PHP 여기에 우리가 파일 액션 매크로 PHP를 작성합니다 함수는 응답을 보내고 응답을 보내면 이미지 목록이 생성됩니다

보시다시피 테이블 행을 만든 다음 테이블에서 해당 이미지를 호출하고 모든 응답은 업로드 프로세스와이 이미지 이후에 발생합니다 목록은 테이블 본문을 볼 수 있듯이 업로드 후 이미지 목록입니다 이미지 목록에 TR이 붙고 업로드 된 이미지가 있으면 여기에 표시됩니다 실패하면 업로드가 실패했다는 경고가 표시됩니다 상태를 표시하고 응답 코드를 표시하면 모든 것이 완료되고 표시됩니다

스냅 샷이 업로드되므로이 비디오에서 우리가 만든 것을 볼 수 있습니다 카메라 창과 우리 카메라가 다시 여기에서 일하고있다 나는 나의 카메라 I을 시작할 것이다 페이지를 새로 고침하고 허용을 클릭하기 만하면됩니다 모든 것이 작동하는지 확인하십시오 카메라도 작동합니다 창과 지금은 모든 것을 볼 수 있습니다

이 비디오에서 작업하면서 카메라 프로세스를 설정하고 버튼 프로세스를 클릭하면 다음 비디오에서 어떻게 할 수 있는지 보여 드리겠습니다 질문이 있으시면 아래 이미지에 데이터베이스에 업로드하십시오 또는 어떤 의견이 있으면 의견이 있으면 아래에 의견을 말하십시오 아래에 의견을 남겨주세요 우리의 비디오가 우리의 비디오를 공유하고 싶습니다 다시 한 번 같은 동영상을 올리려고 다른 동영상을 업로드하는 중입니다

이 동영상은 2 부입니다 그리고 jpg 카메라의 마지막 부분 또는 PHP 파트 2에 웹캠을 저장할 수 있습니다 감사합니다 너는 비디오를 보았다

JQuery Autocomplete Tutorial – From AJAX/PHP

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

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

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

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

How To Download and Add jQuery Into Your Web Page

좋습니다 그럼 jQuery를 다운로드하는 방법에 대한 간단한 동영상을보실 수 있습니다

그리고 그것을 사용하는 HTML 문서에 추가하는 방법은 jquerycom 앞으로 슬래시 다운로드로 이동하십시오 이 페이지를 볼 때 약간 다른 버전의 jQuery가 표시 될 수 있습니다 버전이 모두 똑같은지 상관 없어요 다른 유형으로 jQuery를 다운로드하고 설치하는 몇 가지 다른 방법이있다

내가 좋아하는 것은 압축 된 버전을 다운로드하는 것입니다 압축을 풀면 개발을위한 것입니다 들어가서 내가하고있는 모든 것을 위해 jQuery를 편집하기를 원한다면 저는 항상 압축 된 버전을 사용했습니다 파일 크기가 작아서이 문서를 거의 변경하지 않았습니다 내가 작성한 대부분의 변경 사항은 문서 내에서 내가 작업하고있는 HTML 문서와는 반대로 이루어질 것입니다

여기에서 핵심 파일을 변경하려고합니다 나는 계속해서 다운로드를 클릭 할 것이다 압축 된 버전과 다시 버전은별로 중요하지 않습니다 내 바탕 화면으로 다운로드 할게 좋아, 누군가가 가서 그걸 막았다

HTML 편집기를 열어 두겠다 데이트 펜은 사용하고자하는 것은 상관 없다 여기서 중요한 것은 아니다 원하는대로 사용할 수있는 Dreamweaver를 사용하고 있습니다 새 문서를 열어 볼게

이것은 HTML 일 수 있습니다 PHP는 실제로 동일하지 않습니다 여기에 내 HTML 문서가 있는데, 나는 그것을 바탕 화면에 저장합니다 그냥 같은 위치에 모든 것을 가지고 있지만 jQuery라는 폴더를 만들 것입니다 그냥 한 곳에서 다 가지고있어, 파일 색인의 이름을 지을거야

좋은 연습을 위해서 나는 그것을 구할 것이다 자, 이제 데스크톱에 jQuery 파일이 있습니다 여기 저기 내 jquery 폴더에 넣을거야 좋은 연습을위한 종류 대부분의 사람들이하는 일은 폴더를 만들고 j / s로 레이블을 붙이면됩니다

자바 스크립트 파일이며 거기에 모든 자바 스크립트 파일이 있습니다 이것은 핵심 요소가 여기에 끌어 들여서 여기에 단순한 것을 유지하려는 것뿐입니다 따라서 버전에 관계없이 중요하지 않습니다 나는 모든 것을 지우고 jQuery J라는 단어를 지키기 만하면됩니다 이름 지정 구조를 여기에서 매우 간단하게 유지하는 것입니다

알았어 그래서 파일을 다운로드 받았어 내 j / s 폴더에 있고 여기에 내 HTML 문서 HTML이 있습니다 이제 내가하고 싶은 것은 계속 진행하고 그 문서에 링크 만하면됩니다 내 머리 속에서 몇 가지 수익을 올리십시오

왜냐하면 제가 지금 스크립트를 거기에 넣을 것이기 때문입니다 할 말이있다 스크립트 소스가 같고 그러면 Dreamweaver와 실제로 함께 할 수 있습니다 다른 HTML 편집기의 대부분이 여기에서 팝업으로 표시되어 매우 유사한 작업을 수행하고 있습니다 JavaScript 파일 jQuery JavaScript 파일을 바로 클릭하면 닫을 수 있습니까? 따라서 스크립트 소스는 J

Ass과 동일해야합니다 왜냐하면 여기가 ejs 폴더에 있기 때문입니다 Animus가 내 문서를 저장합니다 나는 브라우저를 열고 우리는 이것을 시험해 볼 것이고, 그래서 HTML 파일을 브라우저로 드래그 앤 드롭합니다 지금 아무 것도 말하지 말아야합니다

실제로 아무 것도 실행하지 않는다는 것을 보여줄 것이 없기 때문입니다 실제로 어떤 종류의 작업도 수행하지 않습니다 하지만 파일이 제대로 거기에 추가되었는지 확인하고 싶습니다 그래서 내가하는 일은 컨트롤 클릭 또는 명령 클릭을하고 브라우저의 현재 위치 또는 그 위치를 결정하는 것입니다 당신이 작업하고있는 플랫폼과 나는 여기서 머리 속을 볼 것입니다

내가 볼 여기에 jQuery 파일에 링크 된 스크립트가 있습니다 나는 그걸 복사해서 붙여 넣을거야 브라우저가 상단에 있고 히트 리턴, jQuery 파일을 구성하는 모든 코드가있다 그래서 저는 이것이 여기에서부터 제대로 연결되어 있다는 것을 압니다 우리는 실제로 HTML 문서에 jQuery를 추가하기 시작할 수 있습니다

How to use webcam in php Part 2

안녕 친구는 PHP와이 비디오의 웹캠 2 부분을 다시 환영합니다 어떻게 우리가 이미지를 업로드 할 볼 수 있습니다 클릭 이미지를 우리에게 이전 비디오의 데이터베이스 나는 모든 것이 끝났다고 말 했어야합니다

모든 것이 제대로 작동하고 이전 동영상에서 스냅 샷은 스냅 샷을 클릭하지 않은 것을 유감스럽게 생각합니다 jQuery 및 HTML 부분은 이전 비디오에서 수행되었으며이 비디오에서 우리의 추가 처리를 완료하면이 비디오에서 우리가 만들 것입니다 우리가 여기에서 그리고이 행동에서 만든 우리의 행동 도트 PHP PHP는 여기에 복사하여 붙여 넣을 것입니다 여기서 작은 코드를 복사하고이 부분을 복사하면 여기에 붙여 넣을 것입니다 이 필요는 웹캠 클래스 도트 PHP 및이 웹캠 클래스에 대한 작동합니다 이미지를 데이터베이스에 업로드하여 웹캠 클래스도 가져옵니다

여기 둘 다 똑같습니다이 웹캠 수업을 여기 복사해서 붙여 넣으세요 여기에 우리는 웹캠 클래스를 가지고 있으며 이것은 웹캠 클래스입니다 이미지를 데이터베이스에 저장하면이 액션 클래스에서 웹캠 클래스가 필요합니다 우리는 webcam 클래스의 객체를 만들고 그 웹캠을 사용하여 함수를 호출했습니다

클래스 객체이며 함수는 show image show image입니다 이미지를 데이터베이스에 업로드하거나 먼저 이미지를 업로드합니다 우리는 당신이 로컬 폴더를 볼 수 있고 그 이미지의 이름이나 심지어 경로를 말할 수 있습니다 우리가 지금 우리가 전체 이미지를 업로드하지 않고 있기 때문에 우리의 데이터베이스에 전체 이미지를 데이터베이스에 업로드하려는 경우 그러면 우리는이 부분으로 이미지를 바꿀 것이고이 부분은 우리에게 도움이 될 것입니다 이미지를 만들거나 base64로 이미지를 변환하고 전체 이미지를 데이터베이스에 저장하면 이미지의 로컬 저장 공간 만 알 수 있습니다

당신이 볼 수있는 것처럼 이미지의 데이터베이스 저장소는 우리가 개인 변수는 여기 이미지 폴더이고 여기에서는 방금 웹캠을 정의했습니다 이미지와 우리는이 웹캠 이미지를 여기에 폴더로 만들 것입니다 폴더 웹캠 이미지를 만들고이 부분에서 클릭 한 이미지는 이름을 가진 함수를 만든 이름입니다 Bob과 이것은 이름 변수입니다 이것은 우리의 이미지 폴더와이 이미지입니다

폴더는 웹캠 이미지입니다 /이 날짜는 날짜와 시간을 생성하고 마지막으로 도트 jpg 이미지 확장자를 추가하고이 함수는 구멍 이름을 반환합니다 이것은 당신이 볼 수 있듯이 전체 이름은 웹캠 이미지 / % 날짜와 시간입니다 dot jpg 그래서 이것이 전체 이미지 경로이며 PHP 작업으로 넘어갈 수 있습니다 우리가 공개적으로 보여주는 쇼 이미지 기능을 직접 호출했는지 확인하십시오

function show image 그리고이 함수에서 볼 수있는 것처럼 우리는 파일 변수를 만들고 그 파일 변수에 넣은 내용 파일을 넣습니다 콘텐츠 및 내용은 PHP는 인버터에서 오케이 좋아하고 우리의 이름입니다 파일은 경로와 함께 이름을 가져옵니다 그래서 이것을 클릭하면 이 함수는 우리가 여기서 사용했던 함수입니다 그래서 여기에서 이름을 반환 할 것입니다 이미지를 업로드 할 때마다 버튼을 클릭 할 때마다 이름이 표시됩니다

새로운 이름이 정의되고 모든 이미지는 이미지가 올 새 이름을 갖게됩니다 여기에서 무엇인가 잘못되면 그곳에서 이 이미지에 데이터를 쓰지 못하면 오류가됩니다 때로는 우리 폴더에 허가가없는 문제도 있습니다 귀하의 폴더에 올바른 권한이 있는지 확인하십시오 이 스크립트를 실행하는 중 하나 더 중요한 일 localhost에있는 모든 모든 스크립트를 사용하면 모든 것이 완벽하게 작동합니다

서버를 통해 이것을 실행하려면 HTTP가 필요합니다 HTTP가 왜 이런 식으로 진행되는지 모르기 때문에 문제는 우리의 브라우저는 당신이 원한다면 권한을 모두 허용하지 않을 것입니다 이 웹 캠을 사용하는 동안 HTTP를 사용하지 않습니다 브라우저를 사용하면 웹캠에 액세스하기 위해 HTTP를 사용해야하므로 다시 돌아가십시오 우리 함수는 모든 것이 완벽 해지면이 함수는 동일한 이미지를 데이터베이스에 저장하고 이미지 데이터베이스는 그래서 당신이 볼 수있는 이름입니다

그리고 이것은 파일입니다 이 부분에 가서 우리에게 데이터를 쓸 것입니다 웹캠 이미지 폴더와이 부분은 데이터베이스에 데이터를 저장합니다 이미지의 경로이며 이미지의 경로를 반환하고 우리는 우리가 데이터베이스에 이미지를 저장하면 더 많은 일이 생깁니다 이것이 우리의 저축입니다

데이터베이스를 의미하며 이미지 URL을 가져옵니다 삽입을 볼 수 있기 때문입니다 스냅 샷으로 우리는 그것을 웹캠 이미지 값 이미지로 바꿀 것입니다 우리의 웹캠 결과 쿼리에 이미지가 저장되지 않은 데이터베이스 이미지로 방출됩니다 모든 것이 완벽하게되면 데이터베이스에 저장됩니다

그렇지 않으면 당신이 원한다면 지금 오류를 줄 것이다 당신이 원한다면 내 이미지가 데이터베이스에 저장되어야한다 이 부분의 주석 처리를 제거하면 전체 이미지가 base64로 변경됩니다 base64를 사용하여 전체 이미지가 데이터베이스에 저장되므로 지금은 당신이 볼 수 있듯이이 모든 것을 다 설명했을 것입니다 이 기능과 변경 이미지를 사용하는 것이 하나 남았을 때 base64 기능으로 변경하면이 변경 이미지가 기본으로 있음을 알 수 있습니다

삼중 함수와 이것에서 우리는 우리가이 길을 택했다 우리는 길을 창조한다 info를 사용하여 파일 내용을 경로로 전달한 다음 base64를 반환하고 base64 문자열을 반환합니다 우리가 다시 설명했습니다 웹캠 클래스에 관한 모든 내용은 연결 클래스는 여기에 있습니다

여기서는 연결 클래스에만 업로드 할 것입니다 나는이 TV 이름을 PHP로 바꿀 것이다 튜토리얼 알았어, 이걸 다시 실행하면 오른쪽 클릭이 작동하지 않아 우연히 알 수 있듯이 우리가 이것을 실행하면 내가 가진 것 같아 우리가 볼 수있는 것처럼 스냅 샷을 클릭하면이 사람이 다시 올 것입니다

이미지가 있으면 이미지 이름이 모두 표시되고 이름이 당신이 모든 것을 볼 수있는 하나의 도트 JPG 그리고 이것은 경로 웹캠 이미지 슬래시입니다 여기 웹캠 이미지는 우리의 이미지입니다 여기가 여기에 0 9 월이고 이것은 날짜이고 이것은 우리 둘째 날입니다 webcam 클래스에 의해 정의되는 1 분간 도트 jpg이며 이것은 경로에 이름을 지정하면 이미지를 Google에 업로드 한 것을 볼 수 있습니다 데이터베이스는 데이터베이스도 체크 아웃합니다 당신이 볼 수 있듯이 웹캠은 신분증 하나의 웹캠 이미지를 가지고 있으므로 새로 고침 만하면됩니다

페이지를 새로 고침하고 나는 다시 이미지를 가져다 줄 것이다 약간의 오류와 지금 나는 그것이 이미지를 가지고있을 것이다라고 생각한다 오오 그래 우리는 이미지를 품는다 당신이 할 수있는 것처럼 당신은 당신이 여기에 되돌아 가게 될 것 인만큼 당신은 머리를 볼 것이다 씨 분 네 여기 네가 볼 수 있듯이 우리는 두 번 때문에 네 개의 이미지가있다 이미지를 얻지는 못했지만 그 이미지는 우리가받은 이미지 또는 이미지가 도착하기 전에 보여준 이미지 일 수 있습니다

웹캠 폴더에 저장되었으므로 이미지를 볼 수 없었습니다 if 당신은 이미지를 보여주고 그 다음 몇 초 동안 기다린 다음 이미지를 보여줍니다 몇 번이나 빈 이미지를 얻을 수 있습니다 어떤 문제가있을 경우 PHP에서 웹캠을 사용하는 방법에 대한 자습서 저에게 비디오를 보내주십시오 채널이 있다면 우리 채널에 가입하십시오

문제는 아래의 코멘트하시기 바랍니다 반드시 내가 반드시 도움이 될 것입니다 당신을 도울 것입니다 어떤 문제가 있다면 코드를 작성하여 주석을 달 수도 있습니다 내 블로그는 분명히 당신의 질문에 대답 할 것이지만 만약 당신이 빠른 대답이 필요하다면 그러면 vivek@simplyitsolscom으로 나를 우편으로 보낼 수 있습니다 Vivek@simplyitsolscom을 받거나 나에게 vivekmoyal28@gmail

com 메일을 보낼 수 있습니다 나는 분명히 너를 도울 것이다 시간은 너무 많아서 우리 채널을 구독하십시오 당신과 당신의 주제에서 당신을 도와주세요 비디오를 시청 해 주셔서 감사합니다

How to Create Bootstrap Card Hover Effect ( jQuery )

안녕 모두, 그 akshay 그리고 매일 학비 유튜브 채널에 오신 것을 환영합니다 이 튜토리얼에서는 호버 효과가 적용된 간단한 부트 스트랩 카드를 만듭니다

먼저 부트 스트랩 카드를 만듭니다 그런 다음 그림자를 추가하고 jover를 사용하여 호버 아웃 효과에 마우스를 올려 놓습니다 자습서를 시작하기 전에 이 채널에서 더 새로운 사용자라면 구독 버튼을 클릭하고 종소리 아이콘 또한 자습서에서 Let�s 버튼을 누르는 것을 잊지 마십시오 그래서 let 's가 시작되도록하기 전에

비주얼 코드 편집기에서 프로젝트 파일을 만들고 스톡 폴더에 몇 가지 이미지를 추가하십시오 이 자습서에서는 세 가지 이미지를 사용하고 있습니다 이제 html 파일 호출 인 indexhtml을 작성하십시오 그리고 그 직후에 style

css 파일을 만들 것입니다 이 파일에서 html 발췌 문장을 추가하고 페이지 제목을 변경합니다 그런 다음 부트 스트랩 CSS 파일을 추가합니다 이 CDN을 복사하여 머리에 붙여 넣으십시오 그 후에도 style

css 파일을 링크 할 것입니다 그런 다음 스크립트 태그를 삽입하여 js 파일을 추가하십시오 부트 스트랩이 jquery 슬림 파일을 사용하고있는 것을 볼 수 있습니다 이 파일을 제거하고 jquery minjs 파일을 추가하려고합니다

슬림 파일에는 애니메이션 기능이 없으므로 호버를 만들고 호버 아웃 효과를 만들기 위해 우리는 애니메이션 기능을 사용하고 있습니다 따라서이 함수를 사용하기 위해이 파일을 제거하고 jqueryminjs 파일을 사용합니다 그냥 복사해서 여기에 붙여 넣으세요

이제 부트 스트랩 카드를 만듭니다 이것을 생성하기 위해서 div를 컨테이너 클래스로 추가 할 것입니다 그런 다음 행을 추가하고이 행에 세 개의 열을 만듭니다 이 세 개의 열은 모두 하나의 카드를 포함합니다 이제 부트 스트랩 카드를 만듭니다

부트 스트랩 웹 사이트에서이 부트 스트랩 카드 코드를 복사 할 수는 있지만 가장 좋은 방법은 이 코드를 수동으로 적어 두는 것입니다 그래서 우리는 카드 클래스로 div를 만들고 스타일 폭 18 rem을 추가합니다 이 카드에 이미지 태그를 추가하고 이미지 소스를 지정합니다 그런 다음 alt 텍스트를 지정하고 클래스 카드 img top을 추가하십시오 그런 다음 카드의 본문 부분을 만듭니다

div를 클래스 카드 본문에 추가합니다 본문에는 카드 제목 클래스가있는 h5 제목 레벨 태그를 삽입합니다 그런 다음 단락 태그를 추가하고 데모 텍스트를 삽입합니다 따라서이 웹 사이트에서이 데모 텍스트를 복사하여 단락에 붙여 넣습니다 그 후에 버튼 기본 클래스가있는 앵커 태그를 추가하여 기본 부트 스트랩을 만듭니다

단추 그리고이 버튼의 이름을 읽으십시오 이제 프로젝트를 실행하십시오 라이브 서버 확장을 설치 했으므로이 파일을 마우스 오른쪽 단추로 클릭하고 간 서버로 열어 이제 첫 번째 카드가 생성됩니다

이제 두 번째 열에 두 번째 카드를 만듭니다 두 번째 카드를 만들려면 카드 클래스로 div를 만들고 너비를 추가하십시오 그런 다음 img 태그를 만들고 이미지 원본, 대체 텍스트 및 클래스를 지정하십시오 그런 다음 카드의 본문 부분을 만듭니다 그래서 카드 바디 클래스로 div를 만들고 카드 제목 클래스로 제목 레벨 태그 인 h5를 추가하십시오

그리고 포트폴리오 텍스트를 추가하십시오 그런 다음 카드 텍스트 클래스로 단락을 만들고 데모 텍스트를 추가하십시오 그 후 카드 하단에 부트 스트랩 기본 버튼을 만듭니다 그거야 두 번째 카드가 만들어집니다

이제 우리는 세 번째 카드를 만들 것입니다 이것을 만들려면 두 번째 카드 코드를 복사하여 세 번째 카드를 만드는 데 사용하십시오 따라서 이것을 복사하여 세 번째 부트 스트랩 열에 붙여 넣으십시오 원본 이미지와 카드 제목 텍스트 만 변경하십시오 이제 세 장의 카드가 모두 만들어졌습니다

나는이 카드들에 여백을 더하고 싶었다 따라서 두 번째 카드에 남은 여백을 추가하고 세 번째 카드에 남은 여백을 추가합니다 그리고 나는이 카드들을 중심에두기 위해 stylecss 파일에 코드를 몇 개 쓸 것입니다 style

css 파일에서 컨테이너 클래스를 만듭니다 여백 상위 8 %와 여백 8 %를 추가하십시오 그래서 우리는이 카드들을 중심에 두었습니다 그 다음, 우리는 사용자가이 카드를 가리키면이 카드들에 쉐도우 호버 효과를 생성 할 것입니다 그래서 style

css에서 콜론 호버 카드를 추가 할 것입니다 Webkit box shadow를 추가하고 rgb alpha color로 그림자 값을 지정하십시오 먼저 firefox와 chrome에이 속성을 추가합니다 그런 다음 일반 CSS 속성을 지정하십시오 이제 호버 쉐도우 효과가 제대로 작동합니다

하지만이 카드에 더 많은 효과를 추가하고 싶었습니다 그래서 우리는 script 태그를 생성하고 hover를 수행하는 jquery 함수를 생성 할 것입니다 호버 아웃 효과 먼저 문서 준비 기능을 추가합니다 이 함수는 페이지 DOM이 자바 스크립트 코드를 실행할 준비가되면 실행됩니다

그런 다음 jquery selector를 추가하고 4 열을 지정합니다 그리고 호버 기능을 만듭니다 따라서 호버 기능의 첫 번째 매개 변수에 함수를 추가합니다 이 함수는 html 요소 위에 마우스를 올리면 실행됩니다 이 함수에서이 점 애니메이션 함수를 호출합니다

그리고 CSS margin top-1 %를 지정하십시오 따라서이 속성은 요소 위로 마우스를 이동하면 위쪽에서 여백 1 % 여백을 제거합니다 둘 이상의 CSS 속성을 지정할 수 있습니다 그리고 duration을 지정하여 애니메이션이 실행되는 시간을 결정하십시오 그 다음에는 호버 기능을위한 두 번째 매개 변수를 만듭니다

여기서는 쉼표를 추가하고 기능을 만듭니다 이 기능은 호버 아웃 효과를 만듭니다 따라서 요소에서 마우스 커서를 움직이면이 함수가 실행됩니다 그래서 우리가 이전에 만든 함수는 동일하지만 마진 상위 0 %를 지정합니다 이 함수는 요소 위로 마우스를 가져갈 때 시작됩니다

따라서이 함수는 요소에서 마진 상위 1 %를 제거하고 기본값으로 돌아갑니다 여백 8 %를 Stylecss 파일에서 정의합니다 그리고 기간을 지정하십시오 세미 콜론으로 문을 닫습니다

그리고 프로젝트를 실행하십시오 jqueryminjs 파일을 지정하기 때문에이 함수가 작동하지 않는 것을 볼 수 있습니다 이 함수

그래서 페이지로드 스크립트 함수가 먼저 실행되고 jquery 파일이 포함됩니다 그래서이 문제를 해결하기 위해 jquery 파일을 아래에서 제거하고 머리 그래서 문서가로드 될 때 jquery 파일에는 먼저 스크립트 함수가 포함됩니다 실행 따라서 프로젝트를 실행하면이 멋진 효과를 볼 수 있습니다

이 효과를 html 요소에 추가 할 수 있습니다 그래서 그거야 우리는이 멋진 호버 효과를 카드에 만들었습니다 이 효과는 웹 사이트 또는 블로그에서 사용할 수 있습니다 마음에 의문 사항이 있으면 비디오 댓글 섹션에서 저에게 의견을 말하십시오

그리고 당신이 도움이되고 구독을 누르면이 비디오가 마음에 드는 것을 잊지 마십시오 벨 아이콘 단추입니다 우리는 다음 비디오에서 당신을 볼 것입니다 그때까지 행복하게 지켜봐 주셔서 감사합니다