How To Create Image Gallery In Bootstrap & jQuery & PHP & MySQL [Part 2]

2 부로 오신 것을 환영합니다 여기서 이미지 갤러리를 만드는 방법을 알려 드리겠습니다

내 눈금이 올라가는 PHP Drake와이 모든 다른 멋진 것들을 사용하십시오 비디오 나는 모든 이미지를 검색하는 방법을 보여줄 것입니다 데이터베이스를 만든 다음 멋지게 포맷하고 페이지에 표시하여 나와 함께있어주십시오 따라서 첫 번째 부분에서는 우리 웹 사이트의 기본 레이아웃을 만들었습니다 누군가가 이미지를 사용하여 여기에 놓을 수있는 좋은 장소를 만들었습니다

이제 우리가해야 할 일은 다음과 같습니다 실제로 어떤 데이터베이스에 저장되어있는 모든 이미지를 검색하려면 괜찮습니다 내 두루마리를보고 지금 어떻게 잘 할 수 있을지 페이지가로드 될 때 우리는 여기서 바로 말할 것입니다 jQuery와 나는 여기서 읽고 있습니다 왜냐하면 우리는 항상 페이지 하단에 라이브러리 및 기타 자료가있는 스크립트 및 서랍 그 이유와 여기에 다른 모든 것이 여기에 추가 될 수 있습니다

좋아, 또는 다른 파일에서 당신이 할 일은 아약스를 그렇게 멋지게 만들 것입니다 이것이 Ajax라고 가정 해 봅시다 PHP를 읽을 때 끔찍합니다 PHP는 이제 얻을 것입니다 MySQL의 모든 이미지는 다시 모든 이미지를 반환합니다

이제부터 여기에서 모든 이미지를 보여줄 수 있습니다 우리에게 얼마나 많은 이미지가 있는지에 상관없이 우리에게 능력을줍니다 동적으로로드 할 수 있으므로 웹 페이지의 속도가 빨라집니다 물론 모든 이미지가로드되어 있는지 확인하므로 글을 쓰기 시작합니다 코드는 괜찮습니다

이제는 PC에 있습니다 실제로 시작하기 전에 데이터베이스와 디스플레이에서 모든 세부 사항을 가져 오는 방법 구현 마지막으로 내가 한 부분을 끝내고 갤러리 한 실수를 발견했습니다 기본적으로 파일을 업로드 할 때 내가 파일을 많이 가지고 있다고 가정 해 봅시다 당신은 그 사이에 어떤 공간도없는 것을 볼 수 있습니다 그것은 알파벳입니다 나에 대한 두려움 때문에 코드를 확인한 결과 나는 여기에 주목했다

기본적으로 우리는 어떤 행도 가지지 않습니다 그렇습니다 실제로 행 하나뿐입니다 그렇다면 그들은 단지 열을 쌓아 놓았습니다 그러면 여기에 가서 볼 수 있습니다

지난 번에 우리가 작성한 코드는 여기에 얼마나 많은 마지막 행에있는 이미지와 기본적으로 여기에 추가 할 때의 이미지 이 클래스를 추가하는 것을 잊어 버렸으므로 여기에 넣을 것입니다 우리가 이미지를 찾고 있기 때문에 네 가지로 변경하십시오 무역 협상과 이제 우리가 잘하면이 일이 제대로 작동 할 것입니다 저장 이제는 다시 열어 모든 것을 선택하십시오 이제는 똑같은 것처럼 보입니다 비다에서 그것을 고치고 싶습니다

그래서 우리가 실제로 어떻게 될지 볼 수 있습니다 어떤 핵심 문제도 고쳐야한다 이제 모든 것이 잘되었습니다 업로드 된 파일에서 실제로 볼 수 있습니다 두 줄과 각 줄에서 우리는 당신이 4 개의 빗을 볼 수 있습니다

유일한 문제는 행 사이에 패딩이 없으므로 CSS를 통해 그 중 하나를 추가하면 당연히 그 이미지가 꽤 나쁘게 보일 정도로 우리는 그것을 바꿀 것입니다 이 모든 것을 완전히 제거 할 것이고, 그러면 내가 여기서 정의 할 것이다 우리 행에는 순교 50이 있고 그 다음에는 각각 이미지는 100 %이며 매우 중요합니다 예 농담입니다

좋아, 좋아, 좋아,이 하나는 여기에서 제외시켜야한다 저것을 위해 나는 저것이 예외 일 것입니다 그래서 어쩌면 더 낫을 것이라는 점을 생각한다 업로드 된 파일 내부의 모든 이미지가 업로드되므로 이미지가 업로드됩니다 파일이 100 % 유효 할 것입니다 우리가 지금 다시 업로드하면 좋습니다

이제 우리의 이미지 색상이 정말 좋아 보이는지 알 수 있습니다 네가 그녀를 좋아할 수 있기를 바란다 좋아, 이제 다음 일은 멋지다 우리는 실제로 우리의 데이터에 우리가 아마 그렇게 많은 팬을 가지고있는 것입니다 그것들은 중복되지만 실제로는 중요하지 않습니다

이제 우리는 모든 것을 움켜 잡을 필요가 있습니다 그 파일들 좋아, 그럼 내가 여기서 준비 할 문서 준비가 뭐지? 준비된 문서의 짧은 버전은 아마도 다른 것을 쓸 것입니다 당신도 이걸 볼 수 있습니다 근본적으로 이것은 짧은 버전입니다 이건 똑같은 다음 새로운 함수를 정의 해 보겠습니다

그 기능 두 개의 변수를 하나의 변수로 두어 변수를 시작하고 데이터베이스에있는 이미지의 최대 개수를 알아야합니다 그런 다음 여기에서 stat가 최대 값보다 큰 지 확인합니다 더 이상 이미지를로드하지 않으려면 그냥 이미지를로드해야합니다 Ajax를 통해 우리 서버에 요청할 수있는 방법은 서로 다른 버전이 있습니다

이 버스를 쓰세요이게 내 개인적으로 좋아요 그렇다면 말할 것입니다 메소드 게시 '이제 서버가 반환 할 데이터 유형이 텍스트가 될 것이라고 말할 것입니다 우리가 서버에 보내는 데이터는 이미지 하나를 얻는 것입니다

그래서 이것은 같은 파일에 대해 서로 다른 Ajax 호출을하는 경우에 해당한다 그런 다음 당신은 왜 내가 이미지를 얻는다 고 말하면 나는 통과 할 것인가를 구별 할 수있다 이 두 변수가 시작되고 어쩌면 시작하고 성공하면 그들은 하나가됩니다 기능적인 응답과 그 것이고, 지금 우리가해야 할 동일한 일은 이 파일을 실제로 추가하고 추가하려면 아마 우리가 할 수있는 일을 아마 할 수있을 것입니다 그것은 당신을 위해 조금 더 좋았습니다

그래서 서버가 배열을 반환 할 것이라고 가정 해 봅시다 이미지를 찾은 다음 그 배열을 통해 그 이미지를 추가 할 것입니다 우리는 이것을 몇 가지 기능으로 옮길 수 있습니다 함수는 이미지를 추가하고 여기에 우리는 경로를 받게됩니다 이미지와 붐이 그 것이다

좋아, 이제이 코드는 꽤 많이있다 우리가해야 할 모든 것은 내가 여기에 이미지를 추가하고 경로를 넣어라고 말할 것이다 우리는 여기에서 같은 함수를 사용할 수 있습니다 이미지 우리는 모든 이미지를 이미지의 모든 경로로 가져와 쓸 수 있습니다 하나의 간단한 루프 때문에 응답을 낮추지 만 도트 길이는 더하기 I plus 더하기 그리고 나서 우리는 여기서 볼 것이고 이미지와 경로는 그것이 될 것입니다

폴더를 업로드하고 이미지와 색인을 응답합니다 그러면 괜찮습니다 그러면 여기 있습니다 이미지를 불러서 지금은 20 번으로 테스트 해 봅시다 좋아요

그리고 지금 여기에 우리가 말하기를 필요합니다 이제 우리는 연결을 위해 이것을 다시 사용할 필요가 있습니다 어쩌면 우리는 그것을 여기에서 잡을 수 있습니다 장소 그래서 여기 참조 시작은 동일한 연결 실제 이스케이프 문자열 및 시작 자 이제 데이터베이스의 모든 이미지를 다 찍어 봅시다 질문 선택 경로 어쩌면 사진에서 ID 쉼표 애완 동물 한도 그리고 우리는 말할 수있다

어쩌면 먼저 ID가 내림차순으로 내려간 다음 시작을 제한하고 우리가 어쩌면 8 개의 이미지를 좋아할 때마다 2 개의 행과 같을 수 있습니다 그래서 여기 그리고 그 다음에 우리는 하나가 필요하지만 어떤 사람들은 데이터가 똑같이 말하는 반면 연합 배열 가져 오기 아마 우리는 그가 응답하는 벌금을 알 것이다 당신은 응답이나 데이터를 할 수 있습니다 좋습니다 그러면 종료라고 말하면서 Jason과 응답을 반환 하겠지만 그러나 그러나 우리는 여기에서 말할 필요가있다 그것은 이미지 일 것이다 우리 응답 OK

그래서 나는 희망한다 여기있는 모든 것이 정확하다는 것과 우리가 테스트 할 때 8 개의 이미지가 보일 것입니다 신선한 것을 칠 것입니다 그래서 아무 것도 보지 못합니다 뜻밖의 표현 라인 58 내가 뭘 잘못했는지 모르겠다

그래서 보자 좋아, 일부 사람들이 나를 여기서 재미 있다고 부르기 때문에 그것은 신선하고 이제는 이미지가 여기에 있으며 우리가 처음으로 만든 네트워크에서 볼 수 있습니다 요청을하면 여기에서 지금 무슨 일이 벌어지고 있는지 볼 수 있습니다 두 번째 시간은 물론 두 번째 시간이 아닙니다 우리는 여기에 그것을 만들지 않았기 때문에 우리는 단지 여기에서 이미지를 볼 것입니다

케이크로 우리의 시작을 늘릴 필요가 있고 우리의 최대 집안은 이제 괜찮을거야 괜찮 으면 네가 좋아하는 것처럼 20까지 더 많은 이미지가 있습니다 우리는 그렇습니다 그래서 여기에 우리가 가지고있는 행의 실제 수를 집어 넣어야합니다 우리는 단지 사진에서 연결 쿼리 선택 ID를 말할 것입니다 그리고 우리는 말할 것입니다 'numrows는 많은 행을 요구하며 이것이 우리가 여기서 보여줄 것입니다 여기 전화 번호는 시원합니다

그래서 우리가 새로 고침을 할 때 그것을 시험해 봅시다 이제 데이터베이스에있는 모든 이미지를 가져와야하므로 업로드 할 수 있습니다 내가 신선하다면 다시 볼 수있을거야 계선 및 더 많은 것을 가지고 여기에 표시됩니다 더 멋지 네요 그래서 지금 우리가 할 수있을 때 우리가 할 수 있다고 생각합니다

어쩌면 우리가 어쩌면 이미지를 클릭 할 때마다 팝업을 표시하고 원하는 이미지를 삭제할 수 있는지 묻습니다 아주 간단하게 뭔가를 삭제할 수 있습니다 또는 우연히 발생하는 이미지를 클릭하면됩니다 프로세스는 거의 동일합니다 프로세스를 이해하는 것이 중요합니다

실제로 작동합니다 이제는 클릭 만하면됩니다 이미지를 삭제할 수있게 될 것입니다 오, 그래, 이제 우리는 알파벳을 바꿀 필요가 있습니다 여기에 정의 된 응답은 각각 이 배열에 시간을 새 배열을 추가하고 나면 우리는 나쁘게됩니다 이렇게하면 삭제할 이미지의 ID를 갖게됩니다

괜찮아 좋아, 그럼 멋진 이미지와 지금 당장 우리는 여기에 필요한 것들이있어서 우리는 여기 패드를 말해야 할 것입니다 그리고 지금은 그렇게 작동 할 것입니다 테스트 해 봅시다 신선한 이미지가 있습니다하지만 지금은 아이디어가 여전히 좋습니다

각 이미지에 추가되지 않으므로 아마도 여기에 또한 신분증을 붙이면 어쩌면 여기에 말할 수있는 하나의 기능을 가질 수 있습니다 이미지를 클릭하면 삭제하려는 이미지의 ID가 전달됩니다 또한 어쩌면이 이미지에 대한 일부 ID를 정의 할 것입니다 그래서 나는 G와 그런 다음 신분증은 이렇게 멋지다 그래서 여기에 우리가 업로드 할 때 나는 단지 그것을 말할 것이다 ID 0이 될 것입니다

업로드 된 이미지 만 괜찮습니다 삭제하지 않을 것입니다 하지만 지금 여기서 우리는 그 이미지들을 지울 것입니다 그래서 여러분은 여기에 ID와 let 's를 말할 수 있습니다 무슨 일이 일어날 지 보라

이제 모든 행에 다른 ID가 있고 기본적으로 그 ID가 있음을 알 수 있습니다 우리 데이터베이스의 ID를 나타냅니다 이제이 함수를 정의해야합니다 이미지 삭제 좋아, 그럼 여기서 이미지 기능을 말할거야, 그럼 너 여기 이미지의 아이디어를 가지고 있으므로 ID가 0인지 또는 ID가 아닌지를 확인할 수 있습니다 당신은 경고를 볼 수있는 동일한 결과를 줄 것이다

당신은 이것을 지울 수 없다 이제 이미지를 지금 당장 업로드 할 수 있으므로 여기서 실제로 마지막으로 반환 된 ID와 그 물건을 가져 오지만 실제로는 그렇지 않습니다 이 비디오의 목표는 이제 훨씬 더 진보 해 가고 있습니다 이 비디오에 더 많은 시간을 할애하지만, 내가 이해할 수 있다면 이제는 그걸 만드는 법을 이해하게 될거야 그러면 우리가 볼거야

우리가 그 사람에게 묻고 싶다면 이걸 지우고 싶으십니까? 이미지 괜찮아요 그리고 그 경우에만 우리는 그것을 삭제할 것입니다 실제로 잘하려면 Ajax 호출을 다시 작성하십시오 여기서 이미지를 삭제하겠습니다 좋아요

그러면 여기에 ID가 있습니다 누군가 이미지를 삭제하면 페이지에서 해당 이미지를 제거해야합니다 이제 그게 당연합니다 이 부분을 PHP 쪽에서 처리하십시오 그래서이 줄을 적용하여 원하는지 확인하십시오

멋진 이미지를 삭제하려면 이미지 ID를 부여한 다음 나는 그것을 삭제하고 싶다고 말합니다 Chelsea는 ID 동일 ID 좋아, 그럼 출구 성공이라고 말할 수는 있지만 물론 우리는 여기 텍스트로 알았어 그래서 우리가 모든 것을했는지 보자 올바르게 이제는 클릭하면 볼 수있게됩니다 당신이 이것을 지우고 싶다면 취소라고 말하면 아무것도 일어나지 않을 것입니다

나는 이것을 열어 본다 만약 내가 여기를 클릭하면 이제 알게 될 것이다 이미지 ID를 삭제할 서버를 보낸 새 요청이 있습니다 이제이 이미지가 더 이상 존재하지 않는다는 것을 알 수 있습니다 58 번 이미지를 찾으려면 다음 이미지가 분명히 나와 있습니다

나중에 이미지 58이 여기에 존재하지 않는다는 것을 알 수 있습니다 이것은 정확히 우리가 이제 우리가 할 수있는 일은 실제로 지금 모든 행을 통과하는 것입니다 그런 다음 모든 파일을 구성하여 충분한 파일이 있는지 확인하십시오 이미지의 수를 이전 행으로 옮기고 이 동영상의 중요성과 목표는 중요하지 않습니다 그냥 더 이상 이미지 갤러리를 만드는 방법을 보여 주지만 예

다음 문제는 우리가 다른 부분을 추가하는 방법입니다 이 갤러리에 대한 일부 고급 기술은 미리보기를 클릭하면 그게 좋아 그래서 너희들이이 비디오를 즐겼다면 좋겠다 그것을 좋아하고 친구에게 공유하고 물론 언제나 같이 보여주기를 바랍니다 어떤 문제가 의심 스러울 때 질문하십시오 당신이 아래의 코멘트에 남겨두고 나는 그들 모두에게 대답 할 것입니다

케어

How To Create Image Gallery In Bootstrap & jQuery & PHP & MySQL

PHP jQuery MySQL을 사용하여 이미지 갤러리를 만드는 방법을 배우고 싶습니까? 이 비디오의 부트 스트랩 먼저 기본을 만드는 방법을 보여 드리겠습니다 레이아웃 데이터베이스를 만드는 방법과 이미지를 업로드하고 저장하는 방법 데이터베이스에 저장 한 다음 두 번째 부분에서 어떻게 가져올 지 보여 드리겠습니다

모든 이미지를 삭제하고 이미지를 편집하여 유지하는 등의 옵션을 제공하십시오 나랑 또는이 튜토리얼을 실제로 시작하면 우리가 무엇을 할 것인지 빠르게 설명 할 수 있습니다 1 부에서 먼저 기본 웹 사이트를 디자인 해 보겠습니다 말하자면 그들이 이것처럼 보이면 여기 맨 위에 우리는 한 곳을 만들 것입니다 모든 이미지를 업로드 할 수 있으므로 옵션을 사용하려면 누군가 이미지를 드래그 앤 드롭 할 수 있고 그 이미지는 즉시 나타날 것입니다

누군가가 이미지를 떨어 뜨릴 때 장면 뒤에서 일어날 일을 그것을 잡아서 서버에 보냅니다 이제 PHP에서 PHP를 업로드 할 것입니다 그 이미지 저장소에 몇 개의 폴더를 놓습니다 여기에 이미지의 경로를 말할 것입니다 내 다람쥐 확인 데이터베이스에 다음 클라이언트 측에 정보를 반환합니다 이제 우리가 애완 동물을 알기 때문에 이미지가 성공적으로 업로드되었음을 알았습니다

우리는 그 이미지를 여기에 덧붙일 것이고, 이제 우리는 똑같은 것을 할 것입니다 당신이 원했던만큼 많은 이미지들을위한 것입니다 이 웹 사이트를 누군가 열어서 모든 이미지를 검색 한 다음 그들은 여기에 그것들을 표시 할 것이므로 코드를 작성해 보도록하겠습니다 여기에 내 PC에서 우리가 할 첫 번째 일은 우리가 잡고 싶어 내 이전 튜토리얼 중 하나의 소스 코드이므로 나침반 수입 comm을 다운로드하고 여기에 업로드를 검색 한 다음 당신은이 튜토리얼을 열어 볼 수 있습니다 여기에 jQuery와 PHP로 파일을 업로드하는 것은 놀라운 투어와 같습니다

이 투어가 내가 할 수 있도록해야 할 모든 것을 보여줄 것입니다 그렇게하지 않은 당신을 위해 이미 자신을 만들거나 여기에 소스 코드를 원하지 않아도됩니다 그래서 당신이 아래로 클릭하면 당신은 다음과 같은 링크를 얻을 것이다 그리고 당신은 클릭 할 수있다 여기에 소스 코드를 다운로드하십시오 이미 파일을 저장 했으므로 여기에 있습니다

그래서 여기서 압축을 풀면 모든것을 지우고 그냥 잡을 것입니다 전체 코드는 여기에 붙여 넣은 다음이 코드를 삭제합니다 우리의 구조가 튼튼하고 내 제품에 갈 때 모든 것을 볼 수 있습니다 코드와 내가 지금까지 만들었던 모든 것들을 기본적으로 여기에서 사용하고 있습니다 일부 스크립트는 드레 이크 (Drake) 쿼리에 파일을 업로드하여 세부 사항에서 설명했습니다

이 코드의 각 부분과 모든 부분, 그리고 맨 위에는 드롭이 있습니다 그래서 만약 내가 여기에 가서 새로 고침이 당신이 얻을 것이다 무언가이며 기본적으로 여기에 파일을 드래그 앤 드롭하거나 파일을 드래그 앤 드롭 할 수 있습니다 업로드 할 수는 있지만 지금은 부트 스트랩을 사용하고 싶습니다 busuucom 다운로드를 다운로드 한 다음 부츠를 가져옵니다

흑요석 링크 ok 머리 부분에 붙여 넣을 것이고 여기에 우리는 갈 것입니다 약간의 수정을하게해라 그러면 나는 이것이 아마 우리 컨테이너 일 것이다라고 말할 것이다 아마 당신이 쉽게 볼 수 있도록 확대 해 보겠습니다

이것으로 충분하다고 생각합니다 컨테이너 다음에 해당 컨테이너 내부에 하나의 행과 내부 행이 있어야합니다 우리는 몇 개의 콘을 사용할 것입니다 그래서 저는 지금 당장은 하나의 컬럼 만 가지고 있다고 말할 것입니다 그리고 12 괜찮아 그리고 나서 여기이 모든 개들이있어 그래서 지금 우리가 이것을 새로이 할 때 거의 아무것도 우리가 바꿀 것입니다 우리 라인을 센터에 붙이면 아마도 우리가 container 나는 여기에서 편집 할 수있다

100 픽셀을 그런 식으로 생각해 봅시다 다 잘된 것처럼 보입니다 이제는 다음 번에해야 할 일이 너무 멋져요 할 일은 실제로 데이터베이스를 저장하고 데이터베이스를 저장하는 것입니다 찾아보기로 이동하면 내가 업로드 한 모든 이미지의 경로가 표시됩니다

이 파일을 사용하면 업로드 된 것을 볼 수 있지만 파일을 새로 고침하면 더 이상 저장하지 않은 데이터베이스가 없으므로 여기에 더 이상 없습니다 어디서나 경로와 일어난 유일한 일은 파일이 여기에 올린 괜찮아요 그게 전부입니다 그래서 난 그냥 내 관리자 '괜찮아 그리고 거기에 내가 갈거야 PHP로 이동합니다 새로운 데이터베이스, 그래서 내가 utf-8로 설정할 이미지 갤러리의 이름을 밝히지 않겠다 유니 코드 참조 너는 볼 수 있었다

그리고 그들은 사진을 말하게하고 말하게하는 1 개의 테이블을 가지고있다 당장은 4 개의 기둥이 될 것이지만 나는 그렇게 많이 필요하다고 생각하지 않는다 id 정수가됩니다 자동 증가 후이 값은 5의 경로가됩니다 255를 가정 해 보겠습니다

그러면 업로드 날짜를 설정할 수 있습니다 업로드 한 다음 여기에 날짜 / 시간이 표시되며 괜찮습니다 저장하고 붐하십시오 그래서 지금 우리가해야 할 다음 일은 실제로 실제로 파일을 업로드하고 이동하는 PHP 코드를 확인하십시오 보시다시피 업로드 된 파일을 대상 파일로 이동하고 대상 파일은 다음과 같습니다

실제로이 폴더가 업로드되고 지금은 파일 이름이 표시됩니다 다른 이름으로 파일 이름을 바꿀 수 있습니다 그래서 우리는 어쩌면 할 수 있습니다 파일 확장명을 추출한 다음 일부 이름을 생성하면 매우 유용합니다 같은 이름을 다시 붙이기가 힘들어서 우리가 할 수있는 일은 어쩌면 어쩌면 빨리 내가 여기에 가서 파일을 업로드 할 때 지금 시간을 추가하십시오

완료했지만 우리가 여기에 갈 때 당신은 무작위가 있다는 것을 알 수 있습니다 숫자와 파일의 이름이 이제 괜찮 았음을 의미합니다 다시 같은 파일을 업로드 할 때 다시 힘들어서 같은 것을 사용하고 사용하게 될 것입니다 다시 여기에 파일이 있습니다 이제 파일이 있지만 파일이 다시 보입니다

다른 숫자는 괜찮아 그래서 지금 우리는 꽤 다른 머리카락을 만들 수있다 매번 시간을 들여서 시간을 들여다 보지 말고 사례가 많아 트래픽이 많지 않아서 사례가 충분할 것입니다 동시에 많은 파일들이 동시에 업로드되는 우리 웹 사이트 이런 일이 발생할 수는 있지만 누군가가 파일을 갖기가 다시 어려워집니다 누가 같은 이름으로 같은 확장자를 사용했는지, 누가 같은 것을 업로드했는지 두 번째 밀리 세컨드이므로 어쨌든 여기서 볼 수 있듯이 매우 힘들어합니다

이제 파일이 업로드되면 좋습니다 그러면이 경로가 있으므로 반환하고 지금 우리가해야 할 일은 실제로이 경로를 데이터베이스에 저장하는 것뿐입니다 그리고 그것은 매우 간단합니다 그래서 저는 제가 만들고 싶다고 말하려합니다 새로운 연결 내가 로컬 호스트에 연결됩니다 내 사용자 이름은 루트 암호입니다 너를 보낸 다음 데이비스가 마드리드 갤러리에있다

하지만 이건 괜찮아요 이제는이 사용자 이름 세미콜론 데이빗의 이름 인 semcon에 암호 확인이 없기 때문에 존재하지 않습니다 이것과 같은 기본적인 문서를 여기에 붙여 넣으면 그것을 볼 수 있습니다 그렇게하지 않으면 코드에 코드가 없거나 문제가 생기면 이제 테이블 디스패치 용 데이터베이스를 추가합시다 그래서 내가 뭘 할 건지 말해 주겠다

사진과 우리는 ID 나무못을 가지고있다 그러나 걸쳐 업로딩했다 그리고 가치는 유감스럽게 생각한다 우리는 신분증을 지키지 않습니다 그것은 증가합니다 그리고 나서 우리는 애완 동물을 가지고 있습니다

그래서 그들은 여기에서 시간을 보냅니다 우리는 단지 목표 파일이라고 말할 수 있습니다 그리고 우리의 목표 파일에서 다음과 같이 할 수 있습니다 여기를 보아라 우리는 항상 이것을 포함하고있다

그래서 우리는 또한 각각을 의미한다 우리가 저장하려고하는 데이터베이스의 이미지로, 실제로 만들지 않습니다 어떤 감각이든 우리는 아무 이유없이 공간을 사용하고 있습니다 그래서 나는 그냥 제거 할 것입니다 거기 있지만 여기에 추가 할 것입니다 그래서 우리가 우리의 고객 측에 돌아올 때 이것은 여기에 추가 할 수 있지만 데이터베이스에는 파일 이름과 확장 기능이 있습니다

이제 테스트가 어떻게되는지 보도록하겠습니다 그래서 다시 같은 그림을 움켜 잡을거야 100 % 완료 됐니? 우리는 업로드 된 것을 볼 수 있으며 우리 테이블에 추가됩니다 그것은 굉장히 훌륭합니다 그러나 여기에있는 하나의 문제는 어떤 이유로 우리는 여기에 이미지가 표시되므로 일반적으로 네트워크로 이동 한 다음 시도합니다 어떤 일이 일어날 지 다시 확인하기 위해 업로드하면 매개 변수를 볼 수 있습니다

무슨 일이 일어나고 있습니다 문제가 있습니다 권한이 거부되었습니다 왜 이상한거야? 그래서 그들은 아마도 내 localhost 설정에 문제가있어서 파일이 업로드됩니다 우리가 실제로 그 기금을 가지고 있는지 확인해 보겠습니다

여기에 그 기금이 없으면 우리는 단지 이 확인으로 파일을 업로드했으면 데이터베이스에 문제가 있습니다 애완 동물을 저장하고 있지만 파일이 존재하지 않습니다 그 이유 때문에 우리는 그걸 막을 것이고 나는 그 문제가 여기에 여기에 있다고 생각한다 지금 그것은 작동해야하지만 또한 첫 번째 날 데이터베이스에서 모든 것을 삭제하자 왜냐하면 그 파일들이 존재하지 않기 때문입니다 이제 ok를 시도해 봅시다

이미지입니다 여기에 표시되는 것은 업로드 된 것을 의미합니다 여기에서 보자 실제로 우리가이 이름을 가진 파일을 가지고 있는지 확인하라 201에서 0까지가 끝에있다

그리고 그것은 그것이 여기있는 것입니다 당신이 볼 수있는 것은 이것이 같은 번호입니다 ok ok ok 우리가 계속 더 많이 추가하면 정말 잘 작동하지 않는다는 것을 알게 될 것입니다 큰 마시맬로 크기로 500 킬로바이트라고 말하면됩니다 내 이미지와 같은 작은 것 내 로고 내 로고 지금과 바로 여기에있다

전용 – 예 첫 번째 업로드되지 않습니다 좋습니다 이렇게 멋진 알파 비트를 만들어 봅시다 끔찍한 것처럼 보입니다 좋습니다

근본적으로 우리가 이것을 잘 할 수있는 방법은 여기를 보시면 그것을 의미합니다 이 컨테이너 파일에 모든 파일을 첨부하여 변경하려고합니다 이걸 지울거야 괜찮아 지울 필요가 없어

몇 가지 다른 것들을 사용하고 있지만 우리가 할 수있는 것은 아마 당신도 괜찮을 새로운 컨테이너를 만들 수 있습니까? 계속 진행하면이 컨테이너에 대한 아이디어가로드 된 파일로 업로드된다고 말할 수 있습니다 그런 다음이 컨테이너에 이미지를 업로드하여 우리가 한 행을 가졌고 우리 행에 들어가서 나는 이것을 주석으로 말할 것이다 빗 같이있을거야 – 열 열 md4처럼 좋아, 우리는 4 가지를 표시하고 싶다 우리가 세 개의 기둥을 갖고 싶어서 틀렸어

그리고 그들 각각은 네 가지의 크기가 될 것입니다 아니면 우리가 네 가지처럼 가질 수 있습니다 우리 갤러리가 될 이미지가있는 열 그래, 그럼 우리가하려는 일 5 개가 업로드 될 때마다이 컨테이너 내부에서 마지막 역할을 얻습니다 얼마나 많은 열이 거기에 있는지를 확인할 것입니다 아마 우리는 뭔가를 말할 수 있습니다

내 IMG 좋아요, 그렇다면 행 안에 얼마나 많은 사람들이 있는지 확인하십시오 세 개의 행을 만들고 그 행을 추가하면 그것은 단지 행당 4 개의 이미지를 가진보기 좋은 이미지 갤러리를 쉽게 만들 것입니다 괜찮은 희망 이라니, 여기서 내가 무엇을 할 것인가? 많은 사람들이 마지막 행을 얻을 것입니다 어떻게 그렇게할까요? 업로드 된 파일은 잃어버린 트롤을 찾지 못합니다 마지막으로 찾은 다음 거기에 있습니다

내 IMG를 찾고 싶다 그러면 점 길이는 괜찮을거야 그럼 내가 여기서 말할거야 이 길이가 3 인 경우 업로드 된 파일에 하나 더 추가해야 함을 의미하는 알맞은 사람 트리입니다 이처럼 의미가있는 행을 하나 더 기분을 상하게해야합니다

그리고 그 후에 우리는 단지 이것을 복사 할 것입니다 그리고 이것을 여기에 복사하십시오 이것을 추가하고 싶지만 여기서 우리는 class column MD tree처럼 말할 것입니다 그리고 물론 이미 이벤트가 이미 괜찮아 오, 그래서합시다 지금 어쩌면 너는 옳고 그른지 내가 어떻게되는지 알지 못한다 좋아, 첫 번째는 여기에있다

그래서 또 다른 하나는 괜찮다 지금 우리는 4를 가지고있다 그래서 다른 하나를 업로딩하려고 하지마 그리고 당신은 우리가 다음 행으로 아래로 내려 갔다는 것을 볼 수 있습니다 그리고 다시 우리는 우리가 놀라운 일을했다는 것을 의미하는 그 줄 안에 새로운 칼럼을 만들고 있습니다

이제 우리가 할 수있는 일은 그 이미지가 각각 100 또는 우리가 할 수있는 일은 아마도 헤이를 백으로 제한하는 것일뿐입니다 다른 방법으로 그것을 최적화하고 그게 바로 내가 다음에 할거야 비디오 우리는 이런 식으로 할 수 있지만 나 최고의 옵션이 이제는 정말 멋지게 표시되는지 확인할 수있을 것입니다 형식화되었지만 다음 비디오에서이 모든 것을 설명해 드리겠습니다 여기에 우리가 저장 한 모든 이미지를 가져 와서 그 중 많은 부분을 멋지게 찍은 다음 멋진 이미지 갤러리와 그러면 각 이미지를 클릭 할 수 있는지 확인합니다

팝업이 들어 오면 원하는 경우 이미지를 삭제할 수 있습니다 당신이 정말로 기능적인 갤러리를 가질 것 인 것을 의미하고 당신은 할 수있을 것이다 그 사진을 관리하는 분에게 그래서 너는 내가 좋아했을 바래 이 비디오를 좋아한다면 그것을 좋아하고 친구에게 공유하십시오

물론 당신은 어떤 질문이든 의문을 가질 수 있습니다 아래의 코멘트와 나는 그들 모두가 돌보아 줄 것을 확실히 할 것이다

How to design a complete website using bootstrap 4, html5 ,css3 and jQuery

오늘 나는 완전한 웹 사이트를 디자인하는 방법을 보여줄 것이다 부트 스트랩 4 html5 및 css3 오늘 우리는 이런 종류의 웹 사이트를 디자인 할 것입니다

반응이 좋다 먼저 부트 스트랩 4를 다운로드하여 압축을 풉니 다 그리고 dist에 가라 여기에서 복사 할 수 있습니다 bootstrapcss 또는 bootstrap

mincss js 파일 복사 bootstrapjs 또는 bootstrapminjs 마찬가지로 글꼴 다운로드 복사 CSS 및 글꼴 당신은 또한 jQuery 파일을 다운로드해야한다

링크는 설명에 표시됩니다 이 모든 파일을 하나의 폴더에 넣으십시오 나 벌써 다 했어 내 모든 파일을 youtube2 폴더에 복사했습니다 편집을 위해 모든 도구를 사용할 수 있습니다 나는 당신이 사용할 수있는 드림위버를 사용했다

그래서 이제는 열려있는 드림위버를 허용합니다 새로운 파일 ie html5 파일 이름을 말하자 학교 프로젝트이 파일 저장하기 이 파일을 indexhtml로 저장하십시오 이제는 CSS와 jQuery 파일 이 jQuery 파일을 부트 스트랩 파일 위에 놓아야한다

이제 배너를 만들어 보겠습니다 이제 다시 새 파일을 만들어 보겠습니다 지금 ie css 파일 이 파일을 다음과 같이 저장하십시오 stylecss 이제 open style

css를 허용합니다 이제 스타일 배너를 사용할 수있게되었습니다 높이 100vh는 화면 높이가 100 % 인 화면 높이 파이어 폭스에서 미리 보도록하겠습니다 당신이 볼 수 있듯이 이미지의 높이는 100 %입니다 화면 이제 헤더 섹션을 만들어 보겠습니다

이제 헤더 섹션을 스타일링 해 보겠습니다 여기 rgb는 색상이고 a는 불투명도 (예 : 06)입니다 우리의 불투명 함 헤더 CSS에서 몇 가지 사항을 변경해 보겠습니다 이제 완벽 해 보입니다

이제 탐색 섹션을 만들자 그래서이 google 검색 bootstrap4로 이동 및 탐색 navbars 이 링크 복사 여기에 붙여 넣으세요 우리가 이것을하지 않으면 이것을 제거하십시오 대신 mr-auto put m-auto 이제 변경 사항을 살펴 보겠습니다 이것이 우리가 원하는 것입니다

약간의 변화를 만들어 보자 이제 스타일 탐색을 시작합시다 나중에 완벽 해 보이는군요 여기 전환 속성은 애니메이션 용입니다 이 전환 속성을 제거하면 당신은 변화를 볼 수 있습니다

사용하는 편이 낫다 전이 속성 이제는 플렉스 슬라이더를 돌릴 차례입니다 이것을 위해 woocommerce-flexslider를 다운로드해야합니다 추출하다 데모 후 추출 CSS 및 사본 flexslidercss goto js jquery

flexsliderjs를 복사하십시오 이것을 폴더에 넣으십시오 나는 이것을 이미 끝냈다 CSS와 jQuery 원래 파일에서 flexslider

css 당신은 몇 가지 변경 즉, 이것을 제거해야합니다 글꼴 플렉스 prev 및 다음에 굴절시키다 또한 제거 플렉스 컨트롤 페이징 li : hover 변화를 일으키다 flex-control-paging li a 및 flex-control-paging li aflex-active 이 코드 이 코드를 복사하십시오 정확한 코드 복사 나는 이미 이것을했다

또한 자바 스크립트 코드를 입력해야합니다 여기에 코드가있다 당신은이 코드를 flexslider 다운로드 파일 이제 flex 슬라이더에 대한 코드를 입력 해 봅시다 지금 나는이 슬라이더를 화면의 중앙에두고 싶다 이것에 대한 가로 및 세로 모두 제공해야합니다

부모 클래스 상대 위치와 자식 클래스를 절대 위치로 위치 지정 여기 클래스 배너는 potison입니다 부모 클래스이기 때문에 친척입니다 클래스 슬라이더를 자식 클래스이기 때문에 절대 위치 지정 더 많은 버튼을 위해 지금 버튼 부트 스트랩 모달로 가보자 이 코드를 복사하십시오 클래스 슬라이더가 끝난 후에이 코드를 넣는다 이 버튼 코드를 원하는 위치에 넣으십시오

이제 더 많은 스타일을 읽겠습니다 다른 용도로 사용할 수 있습니다 이것에 대한 다른 모달 이 데이터 타겟 이름을 변경해야합니다 이 이드에서 전화해서 너는 또한 변화 할 필요가있다 아리아 – labelledby 이름과이 이드에서 이것을 부른다 다른 모달에 대해 다른 읽기를 더 많이 사용할 수 있습니다

이제 섹션에 대해 만들어 보겠습니다 현재 전환 속성에 있음 웹킷 Firefox 용 Google 크롬 moz 지금 creat 서비스 섹션을 보자 이제 스타일 서비스하자 지금 gallary를 만들어 보자 gallary 용 라이트 박스를 사용했습니다

라이트 박스를 다운로드해야합니다 링크는 아래 설명에 나와 있습니다 라이트 박스를 다운로드 한 후 추출 그리고 dist에 가라 CSS lightboxcss 복사 및 복사 그리고 js에 가라

lightboxminjs 복사 폴더에 넣으세요 나는 이미 다음을했다 이것을 연결하십시오

js 파일 그 후 CSS 파일 여기 중간 장치 용 col-md 소형 장치 용 col-sm 여분의 작은 장치 용 col 지금 creat하자 강의 섹션 나는 내가 끔찍한 일을했다고 생각한다 그래서 이것을 고쳐 보자 이제 괜찮아 이제 creat지도를 봅시다 지금 google에 가라 모든 위치 검색 공유를 클릭하십시오

삽입 맵을 클릭하십시오 사본 암호 붙여 넣기 이제 footer 섹션을 creat하자 여기 내가 뭔가를 잘못했다고 생각해 폰트 코드 코드 그래서 이것을 고쳐 보자 나중에 지금은 완벽 해 보이네 이제 괜찮아

자 이제 위로 가기로 다시 만들어 보겠습니다 먼저 ID를 정의 해주세요 이제 jquery 코드를 사용하여이 코드를 복사 할 수 있습니다 이 코드를 정확히 넣으십시오 이하 이 jquery 파일 그렇지 않으면 효과가 없을 것입니다

여기서 100은 의미한다 너라면 높이 야 엉덩이가 아빠에게 돌아가는 것보다이 높이 아래로 스크롤하십시오 여기서 우리는 이드를 back-to-top이라고 부릅니다 이 700은 스크롤 속도 즉 0

7 초 이 정확한 코드를 복사하십시오 이제 변화를 보자 지금 내가 섹션을 클릭하면 또는 어떤 탐색에서도 아무데도 가지 않습니다 그러나 내가 이드라면 내비게이션 미안, 내비게이션에 ID를 정의하고 그 ID를 호출하십시오 특히 섹션 그런 다음 특정 섹션으로 이동합니다

이제는 부드러운 스크롤을 위해 jquery 코드가 있습니다 죄송합니다 자바 스크립트 코드 여기 500은 스크롤 속도 즉, 05 초 정확한 코드 복사 변경 사항을 볼 수 있습니다 예, 마침내 우리는 웹 사이트를 완성했습니다 같이 부딪 치고 엉덩이를 물리 치세요

내 동영상을 시청 해 주셔서 감사합니다

Create Amazing Responsive Bootstrap Website From Scratch

안녕하세요 여러분, 오늘의 akshay와 매일 수업료 환영합니다 이 튜토리얼에서 우리는이 놀라운 반응 부트 스트랩 웹 사이트를 할퀴다

따라서이 비디오를 시작하기 전에이 채널을 구독하지 말고 클릭하십시오 이 비디오가 마음에 드시면 버튼을 클릭하십시오 그래서 우리가 떠나기 전에, let 's가 시작됩니다 먼저 프로젝트를 만들고 내용 css 및 js 파일의 부트 스트랩 파일을 추가하십시오 그런 다음이 자습서에서 사용하는 이미지 폴더와 그 내용 이미지를 가져옵니다

이 이미지와 부트 스트랩 파일을 설명에서 모두 다운로드 할 수 있습니다 이제 프로젝트의 루트 디렉토리에 새로운 homehtml 및 Stylecss 파일을 만듭니다 창을 두 개의 섹션으로 분할하고이 두 창에서이 두 파일을 엽니 다

뷰포트 메타 태그로 간단한 HTML 형식을 만듭니다 이 시간에 집으로 가져갈 수 있도록 페이지의 제목을 변경하십시오 이제 stylecss와 bootstrap 파일을 homehtml에 링크하십시오

html 파일에 링크하는 모든 파일은 절대적으로 경로 그래서 그것은 잘 작동합니다 그리고 jquery와 bootstrapjs 파일을 script 태그로 연결하십시오 먼저 jquery 파일을 추가 한 다음 bootstrapjs 파일을 추가하십시오

부트 스트랩 파일이 jquery 파일 위에 있으면 클릭 이벤트가 제대로 작동하지 않습니다 그것이 매우 중요하기 때문에 당신의 마음 에이 일을 계속 그럼, 본문 섹션으로 이동하여 탐색 메뉴를 만듭니다 nav navbar = "navbar navbar-expand-lg navbar-dark 우리는 흑색 네비게이션 바를 사용하고 있습니다 어둠의 navbar

nav에서 navbar 브랜드 클래스로 앵커 태그를 만듭니다 그리고 우리는 navbar 브랜드에 왼쪽 패딩을 준다 그런 다음 토글 버튼을 만들고 싶습니다 이 유형 버튼 클래스를 만들려면 navbar 토글 유형이 버튼입니다 그리고 우리는 또한 data-toggle = "collapse"data-target = "# navbarNav"와 같은 몇 가지 필요한 부트 스트랩 속성을 추가합니다

aria-control = "navbarNav"aria-expanded = "false"aria-label = "토글 탐색" 그런 다음 span 태그를 삽입하여 토글 아이콘을 만듭니다 따라서 <span class = "navbar-toggler-icon"> </ span>을 입력하십시오 이제 토글 버튼을 만든 후에 탐색 항목을 만들어야합니다 div 클래스 축소를 만들고 navbar 축소 클래스를 추가하십시오 그런 다음 데이터 대상 속성에서 만든 ID와 정확히 일치하는 ID를 지정하십시오

그런 다음 탐색 항목 클래스가있는 li 태그를 만들고 패딩 x와 활성 클래스를 추가합니다 그런 다음 탐색 링크 클래스로 앵커 태그를 만듭니다 Href 속성을 비워 둡니다 먼저 홈 탭을 만들어 여기에 집을 만듭니다 앵커 태그에 sr 전용 클래스가있는 스팬 삽입 이 클래스는 레이아웃에서 화면 판독기 전용 정보를 숨기는 데 사용됩니다

렌더링 된 페이지 li 탭이 완료되면 일관되게 li 태그가있는 메뉴 항목을 만듭니다 그래서이 모든 코드를 복사하여 모든 닫는 li 태그 아래에 붙여 넣습니다 블로그를 서비스 및 우리에 대한 이름으로 바꿉니다 이제 배경 이미지를 삽입하여 stylecss 파일로 이동하여 html을 만듭니다

및 바디 클래스 우리는 높이 100과 너비 100을 취할 것입니다 그런 다음 배경 이미지를 찾습니다 그런 다음 배경 위치를 사용합니다 : 0 % 왼쪽과 9 % 위쪽 배경 크기 : 표지; 배경 반복 : 반복 없음

That 's it 탐색 메뉴가 탐색 준비가되었습니다 그것은 아주 잘 작동합니다 나는 모든 글꼴에 단 하나의 글꼴만을 사용하고 있으므로 전 세계 글꼴을 사용하고 있습니다 * 및 글꼴 패밀리를 지정하십시오 여백 0과 안쪽 여백 0을 지정하십시오

그런 다음 navbar 브랜드 용 클래스를 만듭니다 그리고 흰색으로 색상을 지정하십시오 색상을 변경하려면 흰색을 다른 색상으로 변경하십시오 이제 navbar 브랜드의 글꼴 크기를 늘려서 늘리십시오 그런 다음 행 및 내용 클래스로 div를 만듭니다

그런 다음 검은 색 칸 2를 만듭니다 그런 다음 4 열로 div를 만듭니다 이 열에 이미지 태그를 삽입하십시오 소스에서 텍스트 이미지를 찾고 클래스 img-fluid를 추가하십시오 이 후 6 열의 다른 div 만들고이 비워 두십시오

프로젝트를 실행하십시오 텍스트 이미지는 배치 할 위치에 배치되었습니다 그래서이 후에 컨테이너로 div를 만들고 텍스트를 가운데에 배치하십시오 이 div에서 h1을 우리의 feature 내용으로 생성하십시오 그런 다음 패딩 상단이있는 단락 태그를 만듭니다

여기에 몇 가지 기능 텍스트를 삽입하십시오 이제 우리는 h1 태그를 스타일링 할 것입니다 글꼴 크기를 늘리십시오 그리고 단락을위한 스타일을 만들고 글꼴 크기를 늘리면 텍스트 정렬이 중심입니다 컨테이너 클래스로 div를 만들고이 요소를 가운데에 놓고 패딩 상단을 만듭니다

4입니다 컨테이너 클래스에서 행 작성 및 행 태그에서 세 개의 컬럼을 작성하십시오 첫 번째 열에서는 img 유체 클래스로 이미지를 삽입하십시오 두 번째 열에서는 img 유체 클래스로 두 번째 시계 아이콘 이미지를 삽입하십시오 그리고 세 번째 열에서는 img 유동 부트 스트랩 클래스로이 채팅 아이콘 이미지를 삽입하십시오

그런 다음 가운데 텍스트가있는 다른 컨테이너 클래스를 만들고 패딩 상단을 만듭니다 컨테이너 클래스에서 새 행을 만들고 패딩 y를 삽입합니다 그런 다음 세 개의 열을 만듭니다 첫 번째 열에서 새 단락을 만들고 데모 텍스트를 추가하십시오 Google 검색 및 유형 데모 텍스트로 이동합니다

lorem에서이 데모 텍스트를 가져옵니다 웹 사이트 그러면이 텍스트를 복사하여 단락 태그에 붙여 넣습니다 이 텍스트를 세 개의 모든 열에 붙여 넣습니다 그리고 당신이 이것을 실행할 때 그것은 매우 반응 적으로 보입니다

그 후, 컨테이너 유체 클래스로 div에 대한 시차 스크롤 효과를 생성합니다 div를 시차 클래스로 삽입하십시오 이제는 시차 클래스를 만들고 싶으므로 stylecss 파일로 이동하여 높이 30을 삽입하십시오 높이 : 30vw; background-image : url ( 'Images / 739905

png'); 배경 위치 : 중심; background-repeat : no-repeat; 배경 부착 : 고정; 색깔 : 백색; 디스플레이 : 플렉스; align-items : 센터; } 그것은 우리의 시차가 아주 잘 작동합니다 이제 시차 div 태그에 텍스트를 삽입하려고합니다 그래서 4 개의 열을 만듭니다 col 1을 사용하여 div 클래스를 만듭니다 컬럼 5, 컬럼 2 및 컬럼 4; 5 열에 h1 태그를 만들고 일부를 삽입하십시오

본문 우리는 당신이 행복하게 사는 공간을 만들 것입니다 그런 다음 열 4에서 목표 텍스트로 h1 태그를 만듭니다 그런 다음 프로젝트를 실행하십시오 이제 색상을 지정하여 style

css 파일로 이동하여 흰색에 color 속성을 삽입하고 싶습니다 그런 다음 디스플레이 플렉스를 추가하고 항목 가운데 정렬 이렇게하면 텍스트를 세로 및 가로로 가운데 맞춤 할 수 있습니다 이제 우리는 연락처 섹션을 만들 예정입니다 그래서 div 클래스를 컨테이너 클래스와 함께 추가하십시오

여백 위쪽 5 및 여백 아래쪽 5 행 만들기 이 후 두 개의 열을 만듭니다 칼럼 4와 칼럼 8 컬럼 4 칼럼에 h1 태그 추가 본문 그리고 여기에 데모 텍스트를 추가 할 것입니다 그래서 이것을 복사하여 단락 태그에 붙여 넣습니다 그런 다음 3 열의 입력란에 입력란을 추가하십시오

그래서 우리는 placeholder라는 이름으로 input textbox를 추가 할 것입니다 그리고 오른쪽 여백을 추가하고 y를 패딩하고 x 클래스를 패딩합니다 그런 다음 전자 메일 자리 표시자가있는 다른 텍스트 상자를 만듭니다 패딩 y와 패딩 x 클래스를 추가합니다 그런 다음 텍스트 상자의 너비를 늘려 CSS 클래스 입력 유형 텍스트를 만들고 추가합니다

너비를 늘리십시오 그런 다음 메시지 자리 표시자를 사용하여 텍스트 영역을 만들고 마진 상단 여백 y와 여백 x를 추가합니다 부트 스트랩 클래스 또한 텍스트 영역의 크기도 늘립니다 이후 우리는 다른 시차 효과를 만들기 위해 div 컨테이너 유체를 생성 할 것입니다

수업 컨테이너 유체 클래스에서 텍스트 센터가있는 parallax2 클래스를 추가하십시오 그런 다음 CSS 파일로 이동하여 parallax2 클래스를 만듭니다 높이는 40이어야합니다 그런 다음 배경 이미지를 추가합니다

이 이미지를 변경하겠습니다 그런 다음 배경 위치를 추가 한 다음 배경을 반복하면 배경이 지정됩니다 커버 할 크기 마지막으로 첨부 파일이 고정됩니다 parallax2에서 4 열 cols1 col4 col1 및 col5로 새 div를 만듭니다

col4에 커서를 놓고 이미지 태그를 추가하십시오 원본 속성에서 표시 할 이미지를 지정하십시오 그래서 나는이 이미지를 사용할 것이다 이 작업을 완료 한 후 col5로 이동하여 h2 태그를 추가하십시오 이 h2 태그에 텍스트를 삽입합니다

나는 여행을 세계에 가져갈 것이다 그런 다음 데모 텍스트로 단락을 만듭니다 그래서 데모 텍스트를 복사하여 단락에 붙여 넣습니다 Google 콘텐츠가 상단에 표시되지만이 센터를 배치하려고합니다 이렇게하려면 디스플레이 플렉스를 추가하고 항목을 가운데 맞춤하십시오

여기에서 텍스트 색상을 검정색으로 변경할 수 있지만 수동으로 변경하여 h2 요소의 CSS 클래스입니다 그리고 속성은 검은 색이고 패딩 바닥은 5vh입니다 그런 다음 색상 검정과 글꼴 크기 12vw로 단락 CSS 클래스를 만듭니다 그래서 그것은 매우 아름답게 보입니다

이제 두 개의 버튼을 삽입하기 만하면됩니다 그래서 나는 편집자에게 돌아가 줄 클래스로 div를 만들 것이다 이 행에 col6이라는 두 개의 열을 만듭니다 첫 번째 열에서 버튼 유형 버튼을 추가하고 클래스 btn1을 추가 한 다음 보조 btn btn을 추가합니다 부트 스트랩 클래스

패딩 x를 추가합니다 다음과 같이이 버튼의 이름을 지정하겠습니다 두 번째 열에서 다른 버튼을 만듭니다 그리고 follow 버튼에 사용하는 것과 동일한 클래스를 추가합니다 그러나이 클래스의 이름을 btn2로 지정합니다

이 후 btn1 클래스를 stylecss 파일에 추가합니다 그리고 왼쪽에 float 속성을 추가합니다 배경색은 투명하게 중요합니다 그리고 검은 색은 중요합니다

float 오른쪽으로 btn2 클래스를 만듭니다 그리고 배경색 투명성이 중요합니다 그리고 색상은 검은 색이 중요합니다 이제 우리는 객관적인 섹션을 만들고 싶습니다 따라서 컨테이너 유체 클래스로 div를 생성하십시오

그런 다음이 컨테이너 유체에 행 클래스를 삽입하십시오 그리고 행 클래스에 마진 상위 5를 추가하십시오 이 후 div 12 및 텍스트 중심 div 만듭니다 이 div에서 h1 태그에 객관적인 텍스트를 추가하십시오 col 4로 다른 div를 만들고 공백으로 둡니다

그런 다음 col 5 클래스로 div를 만듭니다 col 5 클래스에서 단락을 추가하십시오 스타일 폭 30vh를 지정하십시오 단락에서 데모 텍스트를 추가하면됩니다 복사해서 여기에 붙여 넣으십시오

그리고 마지막으로 검은 색 3 클래스를 만듭니다 단락 너비를 제거하면 단락이 얇아집니다 그런 다음, 컨테이너 유체와 바닥 글 클래스를 나누어서 만듭니다 그런 다음 가운데 텍스트 및 여백 위쪽 5 행 추가 이 행에 3 열 4 열을 작성하십시오 그리고 우리는 cols3 이름을 사용하여이 모든 클래스에 접근 할 것입니다

첫 번째 열에서 img 유체 클래스로 원 이미지를 추가합니다 그 후 h1 태그에 count 클래스를 추가하면 텍스트는 91 %가됩니다 그리고 마진 상단 4와 함께 h2 태그를 추가하고 이름을 Design으로 지정하십시오 이제 우리의 텍스트가 원의 바깥에 있음을 볼 수 있습니다 원

그래서 상대적인 위치와 cols3 클래스를 만듭니다 그리고 position 절대 값으로 count 클래스를 생성하십시오 그리고 위쪽 : 0 아래쪽 0 왼쪽 0과 오른쪽 0; 그런 다음 패딩 윗면 12를 만듭니다 이 후 두 번째 열에서 img 유체 클래스로 원의 이미지를 추가합니다 그런 다음 h1 태그에 count 클래스를 추가하고 텍스트를 추가합니다

86 % 그리고 마진 4 위의 h2 태그를 추가하고 융통성을 부여하십시오 세 번째 열에서는 이전에 만든 것과 똑같이 만듭니다 그래서 나는 그것을 창조 할 것이다 이 작업을 완료 한 후 권한 클래스가있는 div 태그를 추가하십시오 저작권 기호가있는 h3 태그를 추가하십시오

이제 여기에 배경 이미지를 추가하여 stylecss에 바닥 글 클래스를 추가하겠습니다 파일 그런 다음 배경 이미지를 추가 한 다음 배경 크기를 추가하십시오 그리고 배경 위치 센터

높이 100vh 그리고 상대적인 위치 이제 h3 태그를 페이지 하단에 배치하려고합니다 따라서 stylecss 파일에 권한 클래스를 만들고 절대 위치를 추가합니다

그리고 bottom 속성은 0입니다 이제 우리의 복사 오른쪽 기호가 바닥에 있습니다 페이지의 이제 모든 것이 완료되었습니다 그러나 우리는 우리 웹 사이트에 스크롤 효과를주기를 원합니다 그래서 src 속성으로 script 태그를 추가하고 scroll reveal

minjs 파일을 찾습니다 그런 다음 페이지 하단으로 이동하여 windowsr = scrollreveal을 추가하십시오 그런 다음 sr

reveal 메서드를 삽입하고 괄호 안에 우리가 사용하는 부트 스트랩 클래스를 추가합니다 이 튜토리얼 그런 다음 시간을 추가하십시오 우리는 1 분이 걸릴 것이므로 여기에 1000을 더할 것입니다 이 효과를 적용하기 위해 몇 가지 클래스를 추가 할 것입니다

그거야 이제 모든 것이 만들어집니다 이제 우리는 프로젝트를 실행할 것입니다 우리 웹 사이트가 준비되어 있고 놀라운 것처럼 보일 것입니다 그거야

아직 가입하지 않으 셨다면 빨간 버튼을 클릭하십시오 당신 매주 놀라운 콘텐츠 질문이 있으면 비디오 댓글 섹션에 나에게 의견을 말하십시오이 비디오 이 동영상을 좋아하면 도움이됩니다 지켜봐 줘서 고마워

그때까지 다음 비디오에서 보시고 행복하게 지켜보십시오

jQuery DataTable Tutorial With Bootstrap Design For Beginners

이 비디오에 미친 당신은 테이블을 만드는 방법을 배우려고합니다 검색, 페이지 매김과 같은 기능

정렬과 훨씬 더 그래서 나와 함께있어 이봐 요, 상원 의원은 codingpassiveincomecom에서 다른 사람들이 웹 개발자가되는 것을 더 쉽고 빠르게 도와주는 장소 그들이 소유하고있는 것보다 자신이하는 것보다 더 관심이있는 것이면 지금 가입 해보십시오 내 phpstorm에 있습니다 새 프로젝트 jQuery Datatable 튜토리얼을 만들었고 빈 index

php도 만들었습니다 내 XAMPP 서버와 PHP 내부 관리자를 시작했습니다 '데이터베이스를 만들었습니다 jQuery 데이터 테이블과 하나의 테이블 국가 및이 테이블 내부 많은 데이터를 가지고 나라의 일부 이름을 짓고 국가는 아무 것도하지 않는다 내가 부트 스트랩을 포함하기를 원하기 때문에 우선 specialso 멋지게이 테이블을 디자인하면 부트 스트랩 닷컴을 얻을 수 있습니다

이 자습서의 소스 코드를로드하려는 사용자 당신은 아래 설명에있는 링크에서 찾을 수 있습니다 이 CSS 파일을 포함 시키면 다운로드 할 수 있습니다 흰색이므로이 부분에 머리를 넣고 아무것도 필요하지 않습니다 다른 사람은 그렇게 빨리 디자인 할 것이므로 클래스 컨테이너를 말할 것입니다 예를 들어 여백을 20 픽셀 씩 늘리면됩니다

container 새 행 하나를 만들겠습니다 좋아요 그리고이 줄 안쪽에 나는 수업 칼럼 mb6 또는 8 오프셋을 말하여 우리가 가지고있는 중심에 놓기를 원합니다 12 8 2 & 2 오프셋은 2가 될 것입니다 괜찮습니다

하나의 테이블 만들기 say table class say table 우리가 경계를 갖고 싶다고합시다 그래서 저는 테이블이 보더라고 말하고 저는 테이블을 알맞게 말할 것입니다 확실하지만 여기서 보자 나는 테이블 하나를 가지고이 테이블 안에있다 머리 나는 열이있는 하나의 테이블 행을 가지며 ID 국가 이름 국가 번호를 입력하면됩니다

테이블 본체와이 몸 안쪽에 나는 모든 것을 넣을거야 테이블 그래서 우리는 그 테이블 머리와 테이블 본문이 우리 플러그인에 필요합니다 이 테이블 안의 데이터를 조작하는 데 사용할 것입니다 그래서 그들을 포함하는 것을 잊지 마라 그리고 나는 여기에서 매우 빨리 쓸 것이다 MySQL 데이터베이스에서 모든 데이터를 가져올 PHP 코드는이 작업을 수행 할 수 있습니다 동적으로이 테이블을로드하고 만드는 방법에 대한 또 다른 자습서가 있습니다

동적이지만이 튜토리얼에서는 실제로 중요하지 않으며 계속 유지하려고합니다 간단하기 때문에 여기서 HP 코드를 작성합니다 그래서 나는 connection = mysqli라고 말할 것이고 여기에서 나는 말할 것이다 localhost 내 사용자 이름이 root로 표시됩니다 내 암호가 비어 있습니다

내 데이터베이스 이름은 jQuery Datatable입니다 이제 여기에 있습니다 SQL 같은 연결 쿼리를 말하면 여기에서 모든 것을 선택한다고 말할 것입니다 그 나라는 물론 물론 while 루프를 사용하여 모든 것을 얻을 것입니다 우리 테이블의 데이터와 이것이 의미하는 바를 모르는 사람들의 데이터 나는 하나의 행을 얻고 모든 데이터를이 변수에 넣고, if 너는 아직도 이해하지 못한다

나는 또한이 주제에 대한 또 다른 튜토리얼을 가지고있다 여기에서 우리는 단지 말할 것이다 그리고 나는 테이블 행을 말할 것이다 그리고 우리는 3 개의 칼럼과 OK를 필요로한다 나는 첫번째 것이 데이터라고 말할 것이다

조금 더 빠른 길과 이것은 국가 코드이고 거의 그것입니다 우리는 새로 고침을 확인하고 여기에 우리가 가야한다 그래서 우리는 멋진 테이블을 가지고 있으며 여기에 모든 데이터가 있습니다 그래서 여기에 작은 실수를 한 것 같아요 맞아요

그리고 지금 당신이 볼 수 있듯이이 테이블은 정말 거대하고 정말로 어렵습니다 이 테이블에서 어쨌든 찾을 수 있으며이를 정렬 할 가능성이 없습니다 테이블 그래서 하나의 jQuery 플러그인을 다운로드 할거야 jQuery 데이터 테이블이나 당신은 직접 데이터 테이블에 갈 수 있습니다 net이 웹 사이트를 모른다

내 머리와 왼쪽에서 옵션 다운로드가 있고 거기에 릴리스 패킷을 다운로드하고 꼬리를 알지 못한다 나는 그것을 저장하려고한다 여기에 우리는 괜찮아요 그럼 이제 폴더에 가자 그러면 여기서 끝낼거야 이 파일을 무시하면 나는 미디어에 갈 것이고 복사 할 것입니다

그 둘은 내가 필요없는 파일들을 삭제할 것이고 그래서 나는 그냥 지우 게 할 것이다 그 순간에 우리는이 두 가지 CSS를 필요로합니다 이걸 잘 먹어 우리가 필요로하는 건 다 이거 야 이 사람은 다른 사람들을 모두 지우겠습니다 그래서 우리가 여기로 돌아 가면 CSS가 어떻게 괜찮은지 알 수 있습니다

자바 스크립트를 처음으로 사용하기도합니다 이 라이브러리를 포함 할 필요가 있습니다 body tag를 닫기 직전에 벽을 내려 놓았습니다 도서관 처음으로이 파일을 작성한 다음 다른 파일을이 파일에 넣을 것입니다 jQuery를 포함시켜야 code

jquerycom에 갈 수 있습니다 나는 minified를 선택하고 이것을 복사하고 거의 모든 것을 가지고있다 이 자습서에서 필요한 파일을 작성하면 우리 스크립트는 스크립트 타입의 텍스트 / 자바 스크립트를 말하며, 여기서 나는 말할 것이다 준비 기능은 우리가 먼저 기다려야한다는 것을 의미한다

모든 라이브러리 등 모든 테이블을로드하기위한 완전한 문서로드 여기에서 코드의이 부분을 실행하려고합니다 클래스 테이블에서 요소 테이블을 찾고 있음을 의미합니다 이 플러그인을 호출하고 어떻게 될지 보자 새로 고침하고 여기에 우리가 가서 거의 모든 설정없이 볼 수있는 내가 가진 기능이 너무 많아서 맨 처음에 볼 수 있듯이 추가되었습니다 페이징 (paging)과 우리가보고 싶은 요소의 수를 25로하면 25 당신이 여기에서 볼 수있는 것에 따라 50의 100 등은 10의 텐트에 통한다 나는 분류하고있다 기본적으로 ID가 오름차순으로 정렬되고 내림차순으로 정렬하려는 경우 여기를 클릭하면 변경 사항이 표시됩니다

국가 이름에 대한 특정 학교와 동일한 방식으로 국가 코드를 사용할 수 있습니다 내가 찾고 싶다면 검색 기능도 있습니다 알바니아 이것은 내가 타이핑을 시작하는 방법이거나 당신이 지금 볼 수있는 것입니다 우리는 세 가지 조사로 검색 할 수 있습니다 예를 들어 나라를 찾고 싶다면 ID 55와 함께 타이핑을 시작할 수 있습니다

여기에 우리가 가서 정말 빠릅니다 그리고하기 쉽고 또한 세계에 우리는 몇 가지 정보가 있습니다 우리가 가지고있는 엔트리들과 몇 가지 기본 페이지 매김이 있습니다 좋아요 놀랍지 만 때로는 활성화 또는 비활성화하려고합니다

일부 필터 또는 변경하려는 및 그 이유에 대해 보여줄거야 이 발을 어떻게 개선 할 수 있을지, 내가해야 할 일은 창의력과 여기에 있습니다 몇 가지 옵션을 쓰려고합니다 주문을 말하고 싶습니다 네 번째로 설정하고 우리가 새로 고침 때 지금 무슨 일이 있었는지 보자 if 아무 것도 일어나지 않을 열 이름을 클릭하려고합니다 즉,이 테이블을 오름차순 또는 내림차순으로 정렬 할 수 없다는 것을 의미합니다

다음은 내가 검색을 말할 것이라고 말하자 새로 고침 및 검색 옵션이 없어서 검색 할 수 없습니다 내 의견에있는 테이블은 모든 시간에 대해 정말 나쁜 생각 그래서 다음 문제는 내가 거짓 새로 고침으로 말할 수있는 페이징을 말하자 우리는 지금 우리가 가지고 있던 기본 테이블을 가지고 있으므로 볼 수 없습니다 거기에 그림을 그리는 것은 그저 기본적인 것을 아무것도 주문하지 않고있다

처음에 우리에게 요점이 사실이되도록하겠습니다 왜냐하면 나는 또한 진실을 찾고 있습니다 어떤 것을 보여주고 싶습니다 예를 들면 우리가 이것을 원한다면 우리의 결과입니다 ID로 검색을 비활성화하려면 무슨 일이 일어나서 열 정의를 말할 것인가? 나는 목표를 말하자면 ID를 지정해야한다고 말할 것이다

ID가 0 인 열 국가 이름은 하나이고 국가 코드는 2이므로 0을 목표로하는 ID가 0 인 목표 검색을 사용 중지하려면 여기 검색 가능하다고 말할 수 있으며, 네 번째로 설정하면 지금 새로 고침합니다 if 번호 5를 치려고하면 일치하는 레코드가 발견되지 않으며 비록 우리가 하나 또는 다른 따라서이 ID에 대한 검색이 사용 중지 된 경우 (예 : 숨기기를 원할 경우) 이 빗 또는 기타 우리는 단지 거짓말을하고 괜찮아 보자 이제는 그렇지 않다 이 원추형을 가지고 있으면 좋았어 이거 정말 멋지다

내가 이것을 보여주고 싶은 진실하고 최후의 것을 위해 이걸 만들자 정말 중요한 것은 기본 정렬을 설정할 수 있다는 것입니다 내가 주문을하겠다고 말하면 나는 이렇게 말하고 내가 전화를 목표로하고 있다고 말한다 2 번은 국가 코드이고 오름차순으로 정렬하고 싶습니다 팽창 해보고 무슨 일이 일어날 지 봅시다

새로 고침 괜찮아 지금 우리는 가득 채울 것입니다 그래서 어떻게해야할까요? 진실하고 다시 시도하십시오 그리고 여기에 우리가 가서 오른쪽에서 볼 수 있듯이 옆의 국가 코드에는 옵션이 있으며 정렬되어있는 다른 국가를 보여줍니다 짧은 내림차순으로 정렬 됨 예

매우 간단하고 매우 유용한 자습서이며 질문이 있거나 당신이 이해하지 못하거나해야할 일을 알고 있다면 아래의 댓글 및이 동영상이 마음에 들면 동영상을 좋아하고 공유하십시오 친구 돌봐

CSS NAV BAR BOOTSTRAP 4 MODAL

안녕하세요 Skyler와의 협력을 환영합니다

내 시리즈 빌딩에 오신 것을 환영합니다 PHP 프레임 워크로 부트 스트랩 4 웹 사이트 수정하기 이것은 두 번째 비디오입니다 이 비디오의 제 시리즈에서 저는 기능이없는 navbar를 넣을 것입니다 그러면 점보트론 (Jumbotron)을 실행하고 그 다음에 우리 페이지를 일부 CSS는 여기에서 볼 수 있듯이 <div class = "container-flex"> 이제는 div가 페이지 전체에 걸쳐 있음을 알리는 것은 무엇입니까? 계속해서 내 navbar를 시작하겠습니다 <ul class = "navi"> 그럼 나는 <li class = "navli"> 그런 다음 <a class="nava"> 중간에 넣을 것입니다

그럼 내가 여기서 나가서자를거야 나는 그것을 만들기 위해 자르고 싶다 클립 보드에 있는지 확인한 후 다시 붙여 넣으십시오 하나 둘 셋 그들 중 4 명은 이제 마지막 두 가지를 바꿀거야 <li class = "navliri"> 그리고 나는 그들에게주고 그들에게 아이디를 주겠다 <li id ​​= "flt-rt> 그리고 내가 이것을하고있는 이유는 내가 원하기 때문이다

전진하고 그 마지막 두 개를 오른쪽으로 띄우겠습니다 클래스를 사용하지만 ID를 통해이 작업을 수행하는 것을 선호합니다이 경우에도 <a class="nava" id="flt-rt"> 그리고 나서 이것 다음에 나는 가서 registerphp 두 번째 href에 마지막으로 설정할 것입니다 등록 할 링크 및 여기에 로그인을 설정하고 이 중 하나를 참조하십시오 나는이 href를 너무 실제로 소문자에 넣을 것입니다

href = "loginModal"그리고 나서 나는 data-toggle = "모달"이며 이것은 우리가 수행 할 로그인 모달을위한 것입니다 나중의 튜토리얼 이제부터 끝내야겠다 앞으로와 헤더 작품 태그를 삭제 그리고 나서 우리는 그것을 볼 것이고 당신은 당신이 볼만한 것을 볼 수 있습니다 네비게이션 바처럼 우리가 갈 다음 일은 링크 다 do는 우리의 index

php 파일로 가서 헤더를 저장하는 것을 잊지 마라 그러면 우리는 <div class = "container"> 이제 컨테이너가 확장되지 않습니다 container-flex가 이것을하는 반면 전체 페이지는 부트 스트랩 4의 특징이다 우리는 <div class = "jumbotron">에 추가 할 것입니다 우리 웹 사이트 이름과 h1을 h1에 추가하려면 건설 중이다

이제 우리는 그것을 보게 될 것입니다 거기 Jumbotron 그래서 지금 우리가 가서 우리 스타일을 열거야 CSS 파일 그리고 나서 우리는 앞으로 나아갈 것이고 단지 단어 몸체를 대괄호로여십시오 배경색을 검정색으로 변경하면됩니다 우리는 그것을 살펴볼 것입니다

그리고 이제 여러분은 점보트론을 다음으로 볼 수 있습니다 우리가 할 일은 우리가 놓을 내비게이션 막대 작업을 시작하는거야 거기에있는 우리 navi 클래스는 대괄호를 열고 우리는 목록 스타일 유형을 none으로 설정하면 알 수 있듯이이 목록에 다음 스타일이 표시됩니다 우리가 할 일은 여백을 0으로 설정하는 것입니다 패딩을 0으로 설정하면 패딩이 0으로 설정됩니다

그것들을 끝까지 움직일 것이고 모든 패딩을 말로 빼낼 것입니다 이제 오버 플로우를 숨김으로 설정하고 이것이 제어하는 ​​것은 무엇인가? 내용이 너무 커서 숨겨진 부분에 맞게 너무 커지면 어떻게 될까요? 오버플로가 잘리고 콘텐츠의 나머지 부분이 보이지 않게되며 변경됩니다 우리의 배경색이 회색으로 변하면 다음으로 할 일은 우리가 할 일입니다 우리의 nav 목록에서 작업하게 될 것입니다 그리고 우리는이 왼쪽을 떠 다니고 우리는 그 (것)들에게 1px 단단한 백색의 국경을주기 위하여려고하고 이제 우리가 할 다음 일은 우리가 제공 할 형식의 navliri입니다

그것의 국경 권리 없음 그리고 나서 우리는 1px solid white의 border-left를 다음 줄에 넣을 것입니다 우리가 할 일은 우리가 가고있는 스타일이나 목록 아이템 링크에 있다는 것입니다 그 (것)들에게 백색을 착색하기 위하여려고하고있는 구획을 전시하십시오 텍스트를 가운데에 맞춘 다음 패딩을 지정합니다 1em 1em의 왼쪽과 오른쪽에 1em이 될 것입니다 그리고 바닥은 1em이 될 것입니다

그리고 나서 우리는 텍스트 장식을 none으로 변경하려고합니다 그래서 당신이 갈 때 그 위에 올려 놓고 선을 긋지 않는 색을 바꾸지 않는다 그 다음에 우리는 앞으로 나아갈 것이고, 우리는 그것을 잘라서 붙여 넣을 것입니다 우리는 그것을 navliri로 바꿀거야 우리는 똑같이 남겨두고 이제는 펑키하게 보일 것입니다

지금은 그렇지 않습니다 우리가해야 할 일은 #flt-rt 우리가이 일을 할 때 우리는 그들을 바로 부유시킬거야 오, 이제 좋아 보인다 우리가 할 마지막 일은 앞으로 나아가고 우리의 점보트론을 스타일 짓는 것입니다 우리가 그것을 꺼낼 수 있도록 2시 방향으로 여백을 둡니다

navbars 엉덩이의 그때 우리는 그것에게 배경색을 회색으로 줄 것이다 그래서 우리는 몸과 별개로 말할 수 있습니다 그러면 텍스트를 다음과 같이 정렬 할 것입니다 센터는 단지보기 좋고 거기에서 볼 수 있습니다 내가 망 쳤어 navi의 경계를 경계 오른쪽으로 변경해야하고 그것은 맨 아래쪽과 왼쪽 테두리를 버리고 난 그냥 가고 싶다

내가 OCD이기 때문에 내 등록기와 로그인 링크를 전환하면된다고 생각합니다 그런 식으로 나아 보인다 이제 너는 그것을 볼 수있다 튜토리얼 2를 시청 해 주셔서 감사합니다 구독하는 것을 잊지 마세요 우리 웹 사이트에서 우리를 확인하십시오 wwwlearnwithskyler

com

Xantico – A PHP Bootstrap helper – Tutorial

안녕하세요 여러분 ~! 나는 스티븐슨 쿠오입니다 나 자신이 쓴 PHP 라이브러리를 소개 할 것이다

나는 그것을 GitHub에 넣었다 그러나 아직 아무도 그것을 지켜 보지 못했습니다 Google 검색 및 GitHub 저장소에 내 프로젝트를 홍보하려고합니다 그것은 당신이 문서를 작성하고 사용자를 위해 readme를 작성해야한다고 말합니다 내 문서를 이미 작성했다고 생각합니다

그리고 나는 그것이 완벽하다고 생각합니다 이 readme 및 wiki 페이지를 통해 내 코드의 작동 방식을 이해할 수 있습니다 모든 수업과 방법에 대한 도움을받을 수 있습니다 그러나 내 문서를 완성한 후에도 아무런 시계도 없습니다 여기서 볼 수 있는데 'Watch'번호는 여전히 0입니다

그래서 나는이 비디오를 만들기로 결심한다 누구든지 내 비디오를보고 나면 내 프로젝트를 알게 될 것입니다 처음에는이 프로젝트가 무엇을 설명 할 것입니다 나는 심지어 그것을 'Xantico'라고 부른다 모든 서류는 영어로 작성됩니다

모든 외국인이 내 프로젝트를 쉽게 이해할 수 있기를 바랍니다 부트 스트랩 HTML을 제작하는 데 도움이 될 수 있습니다 PHP 헬퍼 기능입니다 그것은 객체 지향 패러다임으로 접근합니다 나는이 이상이 이미 보편적으로 사용되고 있다고 생각한다

뷰 모델에는 많은 PHP 프레임 워크가 이러한 이상을 사용합니다 템플릿 엔진과 OOP 이상적인 뷰 모델 내 프로젝트에는 특별한 기능이 있습니다 나는 프레임 워크 사용 템플릿 엔진을 뷰 모델로 완전히 싫어한다 아마도 당신은 스마티 (Smarty) 글쎄, 네가 그렇게한다면 너는 늙다

hTML을 표시하기 위해 모델에서 미리 정의 된 많은 언어로 작동합니다 내 일에 내가했던 몇 가지 코드를 보여줄 수 있습니다 이러한 프레임 워크를 사용하려면 템플릿 언어 그리고 HTML을 함께, 심지어 jQuery 및 기타 자바 스크립트 프레임 워크 프론트 엔드 페이지에 대한 코드가 완전히 엉망임을 깨닫게 될 것입니다 사실이 방법은 프론트 엔드를 완료하는 데 많은 것을 배워야합니다

그래서 부트 스트랩 (Bootstrap)이 발표 된 후, 부트 스트랩 구성 요소를 모듈화 할 수 있습니다 따라서 OOP 구문을 사용하여 액세스 할 수 있습니다 요구 사항은 부트 스트랩을 이해하고,

Footer Section Bootstrap Consultant Website – Part-3

안녕하세요 매일 수업료를 다시받을 수 있습니다

이전 비디오에서는 콘텐츠 1, 콘텐츠 2 및 콘텐츠 3 섹션을 만들었습니다 이 튜토리얼에서는 섹션 4와 웹 사이트의 바닥 글 섹션을 작성합니다 이 튜토리얼 시리즈의 마지막 부분입니다 나는 당신이 학습을 즐기기를 바랍니다 그래서 우리가 떠나기 전에 let�s가 시작됩니다

앞으로 콘텐츠 만들기 4 그러므로 클래스 내용으로 div를 생성하십시오 이 div에서 행을 만듭니다 그리고 col-6의 두 열을 삽입하십시오 이제 첫 번째 열에서 행을 추가하고 두 개의 열을 다시 삽입합니다

그래서 우리는 col-2와 col-7을 추가 할 것입니다 col-2에서 우리는 질문 아이콘의 이미지를 추가 할 것입니다 두 번째 열에서는 텍스트 센터 클래스로 div를 만듭니다 그리고 h4 제목 태그를 텍스트와 함께 삽입하십시오 그래서 여기에 텍스트를 추가 할 것입니다

그리고 닫는 div 바로 뒤에 p 태그에 데모 텍스트를 추가 할 것입니다 따라서 단락 태그에 텍스트를 복사하여 붙여 넣습니다 우리는 약간의 패딩을 추가하려고합니다 따라서 패딩 윗부분과 패딩을 왼쪽에 추가합니다 또한 내부 행에 패딩 4를 추가하십시오

콘텐츠 4 클래스에서 경계 상단과 경계 하단 클래스를 추가합니다 그 다음, 콘텐츠 4의 두 번째 열에 행을 추가합니다 이 줄에서는 col-2와 col-7 두 열을 추가합니다 col-2에서는 이미지 태그에 다운로드 아이콘을 추가합니다 그리고 col-7에서는 div를 텍스트 센터로 추가합니다

이 div에서 텍스트를 추가 할 것입니다 그래서 몇 가지 텍스트를 추가하겠습니다 그 다음에는이 코드를 다시 입력하는 것을 제외하고 단락 태그를 삽입합니다 이 p 태그를 복사하여 여기에 붙여 넣으십시오 그런 다음 행에 패딩 4를 추가합니다

나는 여기에 약간의 문제가 있다고 생각한다 승인 여기에 h4 태그를 삽입하여 삽입하겠습니다 이제는 완벽합니다 이제는 바닥 글 섹션을 만드는 것입니다

그래서 우리는 바닥 글 태그를 추가 할 것입니다 이 태그에서 클래스 내용으로 div를 추가합니다 5 앞으로 나아 가기 전에 콘텐츠 4에 약간의 마진을 추가 할 것입니다 컨텐츠 5에서는 div를 컨테이너 및 패딩 5 클래스로 추가합니다 이 div에서 div를 텍스트 흰색으로 채우고 상단 4를 채 웁니다

여기서 우리는 d flex 표제어 태그에 d flex 인라인 클래스를 추가 할 것입니다 이 클래스는 한 줄에 h2 제목을 표시합니다 구독 뉴스 레터 텍스트를 추가하십시오 텍스트를 볼 수 없으므로 Stylecss 파일에 컨텐츠 5 클래스를 삽입합니다

그리고 배경색을 적용하십시오 이제 콘텐츠에 배경색을 추가했기 때문에 텍스트를 제대로 볼 수 있습니다 5 수업 그 다음 입력 텍스트에 자리 표시 자 입력 이메일 주소를 입력합니다 그리고 클래스 패딩 2 margin left 3과 border zero를 추가하십시오

그 후이 텍스트 상자에 크기 50을 지정하십시오 입력 태그 바로 다음에 버튼을 추가합니다 그 사이에 공백을 추가하지 않으므로 입력 태그와 버튼 이 공간을 제거하기 위해 입력 태그 바로 뒤에 버튼을 만듭니다 그러면 버튼을 만들고 클래스를 추가합니다

y btn-info 텍스트 – 어둡기 및 경계 0을 채우는 것과 같습니다 이 버튼에 텍스트 제출을 지정하십시오 그 후에 우리는 바닥 글과 경계 최상위 클래스를 만들 것입니다 행과 함께 div를 만듭니다 그리고 col-3의 4 개의 열을 추가하십시오

그래서 첫 번째 열에서 d-flex 플렉스 컬럼 클래스로 div를 만듭니다 Flex-column 클래스는 수직 방향을 설정하는 데 사용됩니다 그 다음 텍스트 흰색 클래스와 함께 h6 제목 태그를 추가합니다 그리고 회사 텍스트를 추가하십시오 이 열에 패딩 4를 추가합니다

stylecss에서 바닥 글 클래스를 만듭니다 그리고 마진 상위 8 %를 추가하십시오 완벽 해 그 후에 우리는 몇 개의 링크를 추가 할 것입니다

그래서 앵커 태그를 추가 할 것입니다 그리고 가정 텍스트를 지정하십시오 us 텍스트가있는 다른 앵커 태그를 만듭니다 더 많은 링크를 만들려면 여기에 복사하여 여기에 붙여 넣으십시오 style

css에서 앵커 클래스를 만들고 텍스트 장식 없음을 지정합니다 색상과 패딩을 2 % 지정하십시오 다른 3 개의 열에도 패딩 4를 추가합니다 두 번째 열에서는 d flex와 flex column 클래스로 div를 생성합니다 이 div에서 텍스트 흰색 클래스로 h6 태그를 생성합니다

서비스 텍스트를 지정하십시오 그런 다음 여기에 링크를 추가하십시오 그래서 중개, 가치있는 서비스, 뮤추얼 펀드 및 보험 링크를 추가 할 것입니다 세 번째 열에서 플렉스 컬럼 클래스를 추가하고 div에 텍스트 흰색 클래스를 추가합니다 그리고 우리에게 텍스트를 지정하십시오

그런 다음 Gmail 링크를 지정하고 전화 번호를 지정합니다 네 번째 열에서는 h6 태그를 텍스트 흰색으로 만듭니다 그리고 우리와 텍스트로 연결을 지정하십시오 이 후 우리는 d flex와 flex 행 클래스로 div를 생성 할 것입니다 이 클래스는 요소를 가로 방향으로 설정합니다

페이스 북 png 이미지가있는 이미지 태그를 삽입하십시오 클래스 폭을 25 % 높이 25 %로 지정하고 패딩 1을 지정합니다 그런 다음이 이미지 태그를 복사하여 붙여넣고 트위터 png 이미지로 이미지를 변경하고 PNG 이미지에 링크되어 있습니다 그런 다음 세 개의 닫는 div를 남기고 텍스트 중심의 흰색 폭을 가진 다른 div를 추가하십시오 100 및 패딩 톱 4 클래스

여기서 우리는 저작권 정보를 지정하여 p 태그를 추가하고 저작권 정보를 추가 할 것입니다 이리 span 태그에서는 일일 수업료 텍스트의 색상을 지정합니다 좋아 이제 모든 것이 만들어집니다

시간은 프로젝트를 실행하는 것입니다 회전 목마와 놀라운 디자인으로 매우 아름답게 보입니다 그래서이 튜토리얼 시리즈에서는이 모든 것을 다룰 수 있습니다 이 튜토리얼을 좋아한다면이 튜토리얼에서 유용한 것을 찾으면 같은 버튼을 클릭하십시오 나를 위해 무언가를 만들 것을 제안하고 싶다면 비디오 댓글에서 나를 말하십시오

나는 당신을 위해 그것을 만들거나, 가능한 한이 일을 창조 할 아이디어를 줄 것이다 최신 채널 인 경우이 채널을 구독하고 벨 아이콘을 누르면 내 채널의 알림을받습니다 모든 새로운 비디오 그게 오늘이야 다음 비디오에서 만나요

그 때까지 행복하게 지켜봐주십시오

Bootstrap 4 Working contact form with php Bootstrap 4 and Brackets Text Editor

안녕 얘들 아,이 부츠 컷 4에 오신 것을 환영합니다 시스템 22의 jamie와 웹 디자이너의 기술 팁 PHP를 추가하거나 PHP 문의 양식을 작성하여 문의 양식을 얻을 수 있습니다

실제로 메일을 보내는 작업으로 사이트를 만들었거나 템플릿이 있고 구독 양식과 문의 양식이 있으며 모두 멋지게 보이면 그들을 채울 수 있습니다 연락처 버튼을 누르면됩니다 가장 쉽고 당신이 그들을 채울 수있는 일들이 일어 났지만, 물론 당신이 때 아무것도 제출하지 않으면 잘 될 것입니다 왜냐하면 저는 이것이 라이브에 있지 않기 때문입니다 서버 및 B가 라이브 서버에 있더라도이 양식 제출을 명중 할 때해야 할 일을이 양식에 알려주지는 않습니다

버튼을 클릭하면이 작업을 수정하기 위해 약간의 PHP를 사용하게 될 것입니다 이제는 PHP에 관해 알아야 할 것을 시작하기 전에 그것이 생방송이라는 것입니다 스크립팅 언어이므로 라이브 서버에서만 작동합니다 그렇다면 로컬 컴퓨터에이 사이트를 구축하면 라이브로 업로드해야합니다 서버가 PHP 작업을 수행하거나 PHP를 실행하는 로컬 호스팅 환경을 갖습니다

그래서 나는 그것을 업로드의 모든 것을 통해 당신을 데려 갈 것이라고 말했고 우리는 모든 것들이 우리 괄호를여십시오 소프트웨어 괄호는 자유 텍스트 편집기입니다 그리고 그것은 절대적으로 굉장합니다이 비디오 아래 링크에서 다운로드 할 수 있습니다 새 문서를 만들어 파일로 이동하고 새로운 문서를 작성해 보겠습니다

여기에 몇 가지 물건을 입력 시작 그것은 당신에게 익숙하지 않을 수 있습니다 PHP의 괜찮아 따라 와서 대괄호를 열어 보통 PHP 용 태그를 여는 물음표를 넣은 다음 PHP를 닫고이 형식을 더 읽기 쉽게 만들어 보겠습니다 저장하고 PHP로 저장해야하므로 같은 위치에 저장합시다 부트 스트랩 파일을 저장하여 다른 이름으로 저장한다고 말하면서 여기에 부트 스트랩이 있습니다

폴더 안에있는 모든 파일들 CSS 이미지 비디오 자바 스크립트 인덱스 도트 HTML 그냥 차가운대로 저장하자 전화해서 원하는대로 부를 수있다 그러나 당신이 그것을 부른 것을 기억하고, PHP를 그 뒤에 넣어야합니다 어떤 형태의 형식을 알았는지 알고 있으므로 약간의 글을 쓰기 시작합니다 PHP는 우리 사이트를 가져 와서 우리가 어떤 형식을 가지고 있는지 보도록하겠습니다

우리가 이름을 알아내는 방식으로 그 쓰레기를 얻는 것은 상쾌합니다 우리는 전자 메일을 받았으므로 메시지 필드가 있으므로 전자 메일로 이름을 지정하지 않습니다 우리는 실제로 우리의 구독자를 위해 동일한 PHP 폼을 사용할 수 있습니다 이름 입력란과 이메일 입력란은 나중에 별도의 입력란을 지정하기로 결정할 수 있지만 우리는 당분간 양쪽 모두에 대해 동일한 것을 사용할 수 있습니다 그래서 우리는 이메일과 메시지 필드에 이름을 붙였습니다

우리 대괄호로 돌아 가기 좋아, 지금은 달러 기호로 시작해서 시간이 갈거야 하나는 이메일이었고 다음은 메시지가 아니 었습니다 좋아, 지금은 이름 우리가 뭘 잘하길 바래 우리 모두가 똑같이하기를 바란다 포스트 인 것은 Dolph Sonic이 자본 P OST를 강조하고 실제로 중요한 건 당신이이 모든 일을 똑같이한다면 당신도 문제가있을거야 과 우리는 이것을 복사 할 수 있습니다

그 컨트롤 저장하기 이제 우리가해야 할 일 우리는 우리의 이름 필드를 가져야한다 전자 메일 필드와 메시지 필드는 실제 이름을 가지고 있으므로 우리가 색인 도트 HTML 우리가 만든 사이트는 내려갑니다 우리의 형태로 여기에 당신 우리가 가지고있는 첫 번째 버전은 두 가지 버전이 있습니다 모바일 용, 데스크톱 용으로 모두 4 가지가 있습니다 실제로 볼 때 거기에 일반적인 page

php가 있습니다 아무 것도하지 않아서 아무 것도하지 않아서 이름을 넣고 싶습니다 거기에 우리의 PHP 양식의 연락처는 PHP이며 이것은 모두 될 것입니다 나중에 더 명확 해지고 나는 그것을 우리의 복제 된 형태로 복사 할 것이다 아래에 있어요 우리가 그것을 클릭했을 때 우리는 그것이 PHP를 날려 버리거나 PHP 문의 지금 우리의 각 분야는 여기에 우리가 잘하고 싶은 것입니다

여기에 첫 번째 텍스트 필드가 있는데 이름을위한 것입니다 이름은 간단하게해라 나는 그걸 복사 할거야 이것이 전자 메일 또는 전자 메일이므로 전자 메일의 이름을 지정합니다 이메일 나는 가능한 한 간단하게 유지하려고 노력하고있다

우리는 필요 없다 그걸로 아무것도 할 수는 없지만이 아래에있는 우리의 복제 양식은해야합니다 똑같은 이름과 이메일 필드 필드 이름을 제공합니다 이메일은 괜찮습니다 메시지 필드가 없습니다

구독자 발은 내가 여기에 있지만 우리가 거기에서 일하고있는 것을 보여줍니다 이 인라인 가입자 형태 그래서 우리는 그곳에 이름과 이메일 필드를 가지고 있습니다 이제 우리 연락처 양식으로 이동하여 여기에 우리는 여기에 연락 양식을 가지고 다시 행동을 형성합니다 우리가 방금 시작한 우리의 접촉 PHP로 가기를 원합니다 건물과 다시 우리는 우리의 필드에 두 개의 이름을주고 싶습니다

이것이 John이라는 이름입니다 Doe 그래서 나는 그 이름의 이름과 그 다음의 것을 넣을 것입니다 전자 메일 주소가 내려 가고 전자 메일이므로 이름을 입력하고 전화를 걸어 봅시다 나는 당신이 원하는 것을 이것들이라고 부를 수 있다고 말한 것처럼 이메일을 보낸다 그러나 나는 그것을 지키려고 노력하고있다

여기 간단하고 여기에 우리의 메시지가 들어 있습니다 이 메시지를 지금 우리의 모든 필드에 이름이 붙어 있다고 가정 해 봅시다 각 필드와 연결되어 있으므로 저장했습니다 이메일이라 불리는 이름으로 불리는 연락 양식으로 미끄러 져 들어가면 전자 메일이라고하는데 바로 거기에서 메시지라고합니다 우리의 PHP에 우리가 그 이름과 우리는 그 이름을 그 필드라고 불렀던 이름으로 줄 것입니다

그냥 대괄호를 열고 거기에 반전 된 쉼표를 넣고 싶습니다 우리는 지금 쓰고 있습니다 아래에서 똑같은 것을 할 것입니다 세미콜론은 CSS와 마찬가지로 각 후 하나와 대괄호 이 이메일을 이메일이라고 부르 자면, 같은 이름으로 부름을 보았습니다 여기 꽤 간단하고 이건 메시지라고 불리는거야

알았어 그 사람들을 채우기 위해서 우리는 저 밑에 세미콜론이 있는지 확인해야합니다 우리는 내려 가고 싶습니다 이메일을 받으면 우리는 무엇을 말하고 싶습니까? 이메일을 보내면 이메일을 통해 뭔가를 말하고 싶어 할거야 거기에 밑줄이있어서 우리가 말하기를 원한다면 거꾸로 쉼표는 Styles 식당에서 우리가 지금 사용하고 있던 사이트 자체는 이제 우리가 말하고자하는 부제목입니다

우리는 다른 말을해야 할 것입니다 다시 우리가 말하고 싶은 이메일 주제가 될 것입니다 우리가하고 싶은 말 여기서 나는 표준이나 새로운 메시지를 의미한다 웹 사이트에서 또는 단일 역전 된 말 새 메시지를 사용합시다 Styles에서 좋아요 그 다음 이메일 본문에있는 이름으로 이것이 우리가있는 곳입니다

우리의 사용자가 예를 들어 자신의 이름으로 알고있는 정보를 원합니다 그들의 이메일 주소와 그들이 보낸 메시지 전자 메일 본문이 몸을 강조하므로이 점이 동일 할 것입니다 실제 이메일 입력란에 나타나기 때문에 이름과 그 이름 옆에 우리는 그들이 여기에 그들의 이름으로 채워 넣을 것이 무엇이든 가질 것입니다 코트를 입은 다음 그 이름을 바로 여기에 넣고 그들이 그들의 이름 안에 넣은 것을 채워야합니다 나는 시대를 칠 것입니다

그리고 IMAX 위대한 사양 오른쪽 그레이스 백 스페이스와 새로운 라인에 대한 N 그 후에는 일정 기간이 지나면 이것을 닫을 것입니다 우리가 추가하고 싶은 다른 것들을 이제 내가 거기에 마침표를 넣을거야 우리가 이메일을 작성하고 싶었던 이름, 그래서 우리는 똑같은 짓을 할 것이다 메시지 자체는 우리가 전자 메일로 말하기를 원했기 때문에 우리가 알고있는 것입니다 이메일 주소는별로 분명하지 않고 물론 파운드가 아닙니다

이메일에 서명하여이 세부 정보를 채울 것입니다 다시 말하자면 우리는 백 슬래시를 넣고 새로운 페이지를 넣기를 원합니다 거꾸로 쉼표를 쓴 후에는 다른 기간을 추가합니다 하나 더 여기 물론 메시지이며 이것이 조금 보일 수 있습니다 지금 당장 이상한 일이지만, 우리가 이것을 할 때 분명히 드러날 것입니다

확신합니다 우리가이 메시지를 그들이 사용하는 메시지와 함께 사용할 거라는 걸 알 잖아요 그들의 메시지는 달러 기호 메시지이므로 거기에 있는지 확인하십시오 정확히 똑같은 철자가 붙어 있지 않다면 대문자를 쓰지 마라 고양이는 대소 문자를 구분하지 않기 때문에 작동하지 않을 것이므로 PHP와 백 슬래시 (backslash)와 거기에있는 개행 문자를 치면 거기없이 빠져 나갈 것입니다

이건 어쨌든 이제 할거야 왜냐하면 우리는 세미콜론을 넣을거야 계속 나아가고 우리의 다음 일은 지금 가고 있습니다 우리는 그들이 당신이 그들의 주요 이메일 메시지를 채울 거라고 말했어 여기에 우리가 스타일 (Style)에서 원하는 이메일을 우리에게 보냈을 때 우리는 그것을 말했습니다

레스토랑 사이트와 별에서 오는이 새로운 메시지를 원하는 제목 줄 그 아래에서 우리는 그들이 여기에서 채웠던 것이 무엇이든지 원한다 그러나 우리는 그것을 말하지 않았다 어디로 가야할까요? 우리가 보내고 자하는 곳에 넣으십시오 메시지를 좋아할만한 이메일 주소가 될 수 있습니다 약간의 여유 공간이 있고이 일을 제대로 수행해야합니다

평등하게 가고 나서 우리가 살 때 당신의 이메일 주소를 넣으십시오 내 진짜 이메일 주소를 거기에 넣어 분명히 괜찮아 그래서 세미콜론 사촌 우리는 조금 더 추가 할 것입니다 이제 우리는 어디로 가야할 지 말하십시오 이 물건을 넣고 머리글에 전자 메일의 머리글을 넣으면 헤더가됩니다 우리는 누구로부터 왔는지 말할 수 있기를 바란다

쉼표는 바로 그 다음에 우리는 스크롤을 통해 이메일에 넣을 것입니다 그리고 다시 우리는 이번에 그것을 돌려받을 것입니다 우리는 달러 백 슬래시 R을 사용할 것입니다 그리고 백 슬래시 N과 거기에 약간의 세미콜론이 있습니다 쉼표가 있으면 지금 다음 헤더가 많이 있습니다

그들에게 우리는 거의 정확한 이메일에 회신하지 않을 것입니다 이번에는 머리글을 다시 붙이십시오 다른 사람은 혼란스럽지 않고 열리고 닫히는 것과 같습니다 쉼표로 회신 – 그리고 우리는 답장을하기 때문에 이메일을 보냅니다 이 전자 메일 값을 위해 여기에 넣은 것이 든간에 그들의 이메일 주소 우리는 그것이 돌아오고 개행하기를 원한다

그래서 괜찮아 보인다 이제 우리는 남성에게해야 할 일을 실제로 말해야합니다 같은 남성이 둥근 브래킷을 열고 내부에 두 개를 추가하여 전자 메일 주소로 보내려고합니다 우리는 쉼표를 넣는 전자 메일 제목을 추가하려는 전자 메일을 추가하려고합니다 이 공간과 전자 메일 본문 사이에 전자 메일이 있으므로 제목과 전체를 포함하는 이메일 본문 이 정보는 여기에있다

더하기 우리는이 두 헤더를 원한다 그리고 우리가 대답 할 때 우리는 그 이메일에 답장을 보내십시오 그래서 헤더를 추가하고 다시 헤더를 추가 할 수 있습니다 일반 Word 문서를 입력 할 때 쉼표 뒤에 공백을 넣지 마십시오 우리가 거의 이것 한 번 해본 다음에는 한번 제출 했어

물 우리가 당분간 잘 해내 길 원한다 우리는 그들을 다시 보내야한다 페이지 상단으로 머리말이 둥근 괄호 하나에서 열립니다 더 많은 시간 우리가 가고 싶었던 위치를 말할 거에요 우리 페이지 이름 인 이튼 index

html에 가보겠습니다 그냥 페이지의 상단에 갈거야 그래, 거기에 뭔가를 넣어 그 후에 오만처럼 다른 것을 추가하고 싶은 경우에 대비해 거기에 작은 틈새 거기에 우리의 연락 PHP는 지금 어떻게 우리가 할거야 이 모든 일을 잘 할 수있는 일은 내가해야 할 일이 있다면 지금 저장하는 것입니다 우리의 부트 스트랩 폴더를 살펴보면 우리가 지금 가지고있는 부트 스트랩 4 폴더가 있습니다 일반 색인화 된 또는 HTML 페이지 및 우리는 그냥 우리가 우리의 연락처 PHP 파일을 가지고있어 지금 처음에 내가 기억 하건데 이것은 이것이 당신이 라이브 서비스를 제공하지 않는 한 일하는 것은 라이브 코드이기 때문에 라이브 호스팅이 필요합니다

서버를 사용하므로 우리 웹 사이트가 온라인 상태인지 확인하고 싶습니다 이 모든 것들이 내 웹 서버에 이르기까지 FTP 클라이언트의 무료 비트를 사용하려고합니다 FileZilla라는 이름의 소위 괜찮은 것부터 시작하겠습니다 할머니처럼 우리는 모든 것을 올바르게 꿰뚫어 야합니다 괜찮 으면 괜찮아

괜찮 으면 세미콜론 버퍼가 없어 세미콜론을 놓치면 그 시점에서 멈추고 오, 그래, 괜찮아 내 이메일을 넣어 줘야 돼 거기에 잠시만해도 괜찮아 보여서 안된다 이제는 밑줄을 써야합니다

전에 말했던 것처럼 정말 중요합니다 모든 것이 자리에 있어야합니다 그렇지 않으면 상황이 올바르게 작동하지 않습니다 괜찮아 내가 그걸로 행복하다는 걸 믿어

그래서 내가 구할거야 내가 할일은 내가 할거야 내 이메일 주소를 입력하면 업로드됩니다 당신 좋아요 모든 준비가되었습니다

대신 이메일 주소를 입력 해주세요 귀하의 이메일 주소가 이제이 전체 사이트를 라이브 서버 여기에 우리의 모든 웹 사이트 파일이 들어있는 부트 스트랩 폴더가 있습니다 CSS 이미지 우리가 방금 작성한 JavaScript 비디오 접촉 PHP와 우리의 indexhtml 그 (것)들을 움켜 잡고 생활 서버에 올려주기하는 것은 어떻게 당신은 그것을 하는가? 당신은 그것이 정말로 쉽다는 것을 말하고 있습니다 나는 약간의 자유 소프트웨어를 사용할 것입니다

FileZilla라는 이름으로 FTP 클라이언트와 여기에 링크를 달았습니다 여기서 내 컴퓨터 파일의 왼쪽에 계속해서 내 컴퓨터의 디렉토리와 여기에있는 폴더가 여기에 있습니다 이 폴더와 나는 그저 오른쪽에있는 우리 웹 사이트 파일들을 보여 줬어 옆에 호스팅 제공 업체에 연결되어 있습니다 이제 우리는 수백 개의 웹 사이트에 있습니다

나는 방금라는 하위 디렉토리를 만들었습니다 당신이 단지 하나를 호스팅하는 중이라면 그 순간을위한 부트 스트랩 웹 사이트를 방문한 사람은 아무 것도 얻지 못했을 것입니다 공용 HTML을 사용하지만 호스팅 제공 업체와 확인하십시오 정말 쉽습니다 왼쪽 클릭하고 드래그하여 선택해야합니다

왼쪽 버튼을 클릭 할 것입니다 내 손가락을 아래로 유지하고 내 호스팅 제공 업체 디렉토리 바로 여기에 복사가 시작되면 교차 할 것입니다 부트 스트랩 (bootstrap)과 관련이있는 이유가 너무 좋아서 너무 가볍기 때문입니다 정말 쉽습니다 WordPress와는 다릅니다

설치하지 않아도됩니다 말 그대로 데스크탑에 설치하고 라이브 서버를 가로 질러 드래그하십시오 그것은 나를 틀리게하지 않는다 나는 단어를 사랑한다 WordPress – 멋진 종소리와 휘파람이 있지만 건물을 만들 때 기업 사이트 또는 한 페이지짜리 사이트 또는 스플래시 페이지와 같은 페이지 방문 너무 가볍기 때문에 매번 부트 스트랩을 사용하겠다

빨리 그리고 정말 쉽습니다 이제 끝났습니다 합리적인 속도로 여기에 업로드가 오래 걸리지 않았습니다 저희 사이트를 온라인에서 실시간으로 보러 가서 이메일을 보낼 수 없는지 확인하십시오 그래서 나는 그것의 하위 도메인이기 때문에 나는 나의 정규적인 사이트에 갈 것이다

거기에 하위 도메인 ds4라는 이름이 붙어있어서로드가 얼마나 빨리 완료 되었습니까? 첫 번째 문의 양식을 작성하고 이것이 작동하는지 확인하십시오 가입 양식과 난 그냥 거기에 임의의 이메일을 넣어 내 이메일 통신에 내가 사용하는 일반적인 테스터는 페이지의 맨 위로 돌아가는 점을 클릭하자 그 이유는 그것이 우리 PHP 폼의 바닥에 있기 때문에 우리가 가라고 말했기 때문입니다 바로 여기 indexhtml에 있습니다

따라서 기본적으로이 페이지의 맨 위입니다 이번에는 우리의 연락 양식으로 가자 여기에 살고있어 난 그냥 연락해 너 감히 그렇게하지 않을거야

이메일 주소와 여기에 좋아요 제출 버튼을 누르면 다시 페이지 상단으로 팝업됩니다 거기에 우리가 가서 1 ~ 2 분 기다릴거야 그럼 내 Outlook 이메일로 이동합니다 고객과 내가 그걸 받았는지 확인해 이메일 당신 알았어 약 2 분 후예요

우리는 그 두 메시지를 모두 가지고 있습니다 맨 위 하나를 통해 나는 우리가 보낸 마지막 것이 무엇인지 추측한다 양식이 있고 이메일에 메시지가 있습니다 Styles 레스토랑 사이트에서 가져온 헤더가 있습니다 그것은 우리가 주제에 넣기 위해 말한 Stiles 접촉으로부터의 새로운 메시지입니다

필드를 입력하고 지금 답장을 보내면 이메일 주소로 답장해야합니다 그래, 훌륭 했어 좋아, 이제는 그럴 필요 없어 물론 가입 양식의 하위 양식이 될 것입니다 메시지가 없습니다

왜냐하면 거기에 메시지 필드가 없으므로 이름과 메시지가 있습니다 이메일이있어서 모든 것이 잘 작동하고 있습니다 이걸 한 걸음 더 나아가서 PHP 폼을 만들 수 있다는 것을 의미합니다 이것들 각각은 당신이 원한다면 그들은 다른 주제를 가지고 있습니다 그러나 나는 단지 가려고합니다

그것을 그대로두고 우리가 한 일을 정확하게 수행하십시오 당신이 구독자 양식이나 뭐 그런 말을하고 싶다면 여기에 메시지를 올려주세요 그런 다음 이메일 주소를 만들어서 자신의 이메일 주소에 넣을 수 있습니다 MailChimp Constant와 같은 당신의 메일 클라이언트는 그들 자신의 것을 가지고 있습니다 양식을 자동으로 사이트에 올릴 수 있습니다

하지만 우리가이 양식을 보낸 대신에 다시 위로 갑자기 튀어 나와 보자 나는 그것을 원한다 나는 당신이 당신의 메시지를 보내 주신 것을 고백하는 페이지로 간다 그래서 우리의 괄호로 돌아가 보자 나는 이것이 조금씩 진행되고 있음을 알고있다

이 비디오는 가치가있을 것입니다 여기에 우리의 인덱스는 HTML 페이지에 있습니다 근본적으로 나는 그것으로부터 약간의 재료를 훔칠 것이다 머리글이 있고 그게 그 다음에 우리는 뭔가를 가질 수 있습니다 이 말은 당신의 메시지를 보냈습니다

당신 그게 아마 바닥 글에있는지도를 보자 우리가 제거 할 수있는 모든 것, 그래서 우리 사이트를 우리의 인덱스 점으로 가져 가자 HTML과 줌 백업 위로 그리고 그의 카사 아래로 가자 우리는 이걸 맨 아래까지 가져 가고 싶지 않아 그 Jumbotron 아마도 과거의 와인 선택 와인 메뉴를 확대 해 보겠습니다

점보 트론 (Jumbotron)은 그 모든 것을 삭제합니다 이제이 비트를 Google지도로 가져갑니다 당신 그것이 비디오 섹션이나 아직 갈 길입니다 Google지도와 바닥 글 호스트는 해당 항목을 삭제하므로 우리는 우리의지도 표시 줄에 그 작은 Jumbotron이 있습니다 문의 해 주셔서 감사합니다

당신 나는 당신에게 메시지를 박수 치기 시작할 것이다 당신 집으로 돌아 가기 위해 버튼을 쳤다 그리고 우리는 단지 내가 거기에서 추측하는 Stiles를 말할 것이다 기존 색인 도트 HTML HTML 페이지를 덮어 쓸 것이기 때문에 그렇게 말하지 마십시오 네가 그렇게 말하면 네가 그걸 백업했으면 좋겠어

indexhtml로 저장하면됩니다 여기에 부트 스트랩 폴더가 있습니다 HTML이 성공했다고 가정합니다 좋아, 이제 우리가 여기에 우리 페이지에 가면 우리는 다른 페이지를 가지고 있다고 말할 것입니다

HTML을 성공이라고 부르며 열어 보겠습니다 우리가 간다 우리가 가지고있는 것이 우리를 홈페이지로 다시 데려 갈 것이다 내가 말하지 않았기 때문에 나는 그의 팬 페이지를 가져 가지 않을 것이다 여기에 버튼이있다

진실한 마음에 드는 것이 어디에서 지금 가고있는가? 그곳에 가기위한 아무런 즐겨 찾기가 없기 때문에 HTML 페이지의 인덱스를 바로 잡을 수 있습니다 괜찮아 그걸 다시 시도하자 그 페이지를 새로 고침해라 그리고 거기에 우리가 우리가 지금 원하는 것을 다시 홈 페이지로 가져갔습니다

우리가 연락 양식을 보낼 때 연락 양식으로 돌아가고 싶습니다 이번에 우리가 성공 페이지를 치라고 말하고 싶은 위치에 성공 HTML 우리가 거기에서 부르는 것이 바로 거기에 있습니다 이제 우리의 새 페이지와 업데이트 된 연락처 PHP 파일을 서버를 새로 고침합니다 히트 새로 고침에서 마우스 오른쪽 버튼을 클릭하면됩니다 우리의 성공 페이지가 왼쪽 클릭으로 서버로 업로드됩니다 PHP에 연락하면 그것을 드래그해야하며, PHP를 업데이트하라는 메시지가 표시됩니다

그게 바로 이상이야 우리가 원하는대로하는거야 괜찮아 괜찮아 다시 보내겠습니다

그것은 우리의 라이브 페이지가 아니며 우리의 것입니다 라이브 페이지를 확인하십시오 위로 돌아가서 위로 올라가십시오 여기에서 보내자 그 시간에 괜찮 았어

나가 주셔서 감사합니다 당신이 당신의 하위 구독에 대해 다른 것을 가질 수 있다고 말하는 것 같은 당신의 메시지 거기에 다른 PHP와 당신의 연락처에 대한 다른 하나 무엇을하고 싶은지 바꿨다 다른 것을 쓰다 구독 해 주셔서 감사합니다 당신 또는 귀하의 성공 페이지에 귀하가 말할 수있는 가입 페이지가있을 수 있습니다

가입 또는 우리 모두가 귀하를 우리 메일 링리스트에 추가하기 위해 그걸 세이버라고 부르기를 원한다면 나는 다음 접촉에로드 한 또 다른 페이지이다 하나는 이걸 복사해라 HTML 또는 그 페이지를 호출 한 내용을 구독하고 메시지를 변경하십시오 새로운 가입자 작업 완료 알았어 연락 양식을 보자 그게 또 다른 일을 할 수 있는지 보자

여기에 하나를 반올림하고 모자를 쓰지 않으면 유효성을 검사합니다 그때 당신은 그것을 시도하고 보내면 약간의 오류가 나옵니다 시도해 보시고 보내주세요 그걸 포함 해주세요 원하는 경우이 필드를 필수 필드로 만들 수 있습니다

만약 그들이 그것을 채우지 않는다면 그것은 매우 쉽습니다 바로 이것을 보내십시오 다시 성공 페이지로 이동하여 버튼을 눌러 집으로 돌아갑니다 그 방법으로 사람들은 그들의 메시지가 때때로 전달되었다는 것을 알게된다 그들이 생각했던 페이지 상단에있는 위로 올라간다

보냈는지, 아니면 그냥 흐트러 뜨 렸는지 다행스럽게도 우리가 선고 한 첫 번째 문장이 몇 분 더 있습니다 저의 이메일 주소는 저기 있습니다 괜찮습니다 메시지와 어쩌구 저쩌구는 많은 Z가 거기에가는 모든 것이 좋기 때문에 PHP를 사이트에 추가하여 연락처 양식을 사용하는 방법 가입 양식이 유용 할 것입니다 YouTube 채널을 좋아하고 공유하고 YouTube 채널을 구독하십시오

웹 개발에 관심이있는 아래의 웹 개발 코스 중 하나를 선택하십시오 YouTube 가입자에게 큰 할인 혜택이 있습니다 위대한 무료 코스가 다시 한번 시스템 22와 웹에서 온 제이미입니다 디자인 및 기술 팁 시청을위한 com 감사는 좋은 하루 보내세요