[맥]부트스트랩으로 간단한 개인 홈페이지 만들기/Sublime Text 3 설치/파일질러 설치

 

부트스트랩 :  웹 개발 라이브러리.(대부분이 오픈소스이다.)

반응형  웹 :  디바이스, 모바일, 태블릿에 상관없이 같은 페이지를 보여주는 것

 

 

MIT :  상업적으로 이용할 수 있는 라이센스

---

부트스트랩 다운받기

 

1. 부트스트랩 무료 사이트에서 파일을 다운 받는다.

 

https://startbootstrap.com/themes/freelancer/

Freelancer - One Page Theme

 

---

Sublime Text 3 설치

2. 부트스트랩 HTML을 편집해줄 에디터를 다운 받아줍니다.

 

http://www.sublimetext.com/3

Download - Sublime Text

 

https://hongku.tistory.com/285

Sublime Text :: 맥북(Mac os)에 서브라임 텍스트 설치하기

 

index.html

0.03MB

 

수정 된 HTML 파일

---

 

개인 웹 서버 구축 및 업로드

3. 많은 사람이 볼 수 있도록 웹서버 구축을 해줍니다.

 

https://www.dothome.co.kr/

닷홈 - 호스팅은 닷홈

 

웹호스팅 탭에서 무료 호스팅을 신청합니다.

신청을 눌러줍니다.

승인하고 신청을 시작합니다.

FTP와 DB 정보를 입력해 준 후 메일 인증을 합니다.

 

완료 된 것을 확인합니다.

 

구축 완료는 30분에서 1시간 이후 호스팅 세팅이 완료 됩니다.(바로 되기도 하는 것 같다)

시간이 지난 후 도메인주소로 들어가보면 세팅이 완료되었음을 알 수 있습니다.

 

---

https://filezilla-project.org/

FileZilla - The free FTP solution

FTP에 접속하기 위해 파일질라를 다운받아줍니다.(알드라이브도 업로드가 가능하다.)

FileZilla - The free FTP solution

 

https://filezilla-project.org/download.php?platform=osx

Download FileZilla Client for Mac OS X

맥에서 파일질라 다운 및 전송하기

 

https://hongku.tistory.com/188

맥북에서 파일질라(FileZilla)를 이용하여 파일 전송

 

실행 후 FTP 아이디와 비번을 입력 해줍니다.

 

set-finish.html은 기본으로 보여줬던 닷홈호스팅 세팅 완료 페이지와 일치한다.

 

새로운 디렉토리를 만들어줍니다.

다운받아서 수정했던 부트스트랩 폴더 내용을 업로드 해줍니다.

 

업로트 후 http://도메인주소/업로트폴더명 을 입력해주면,

아래와 같이 수정했던 부트스트랩을 볼 수 있습니다.

http://helloqu.dothome.co.kr/bootstrap/

고치삼 개발자 라이프

---

메일 전송 기능 구현하기

4. 

부트스트랩은 기본적으로 PHP 메일 전송 시스템을 지원하고 있다.

*반드시 웹호스팅에서 PHP를 지원하고 메일전송시스템을 허용하고 있는지 확인 후 구현을 시작 할 수 있다.

*닷홈의 무료호스팅에는 메일전송을 허용하고 있지 않다.(보통 유료에서는 지원이 가능하다.)

 

https://www.cafe24.com/

카페24

유료 호스팅을 이용할 수 있는 카페 24 사이트 이다.

10G광 호스팅에 들어간다.

 

같은 방식으로 신청 해준 후 , 파일질러로 닷홈 접속과 같이 들어간 후 같이 작업한 파일을 업로드 해준다.

컨트롤+F키로 email 주소를 찾아 준 뒤 수정 해주도록 한다.

보여지는 결과값들

jqBootstrapValidation.js를 열어주어 메일 기능 오류시 나오는 오류를 한글로 수정해준다.

 

if (settings.options.sniffHtml) {
            var message = "";
            // ---------------------------------------------------------
            //                                                   PATTERN
            // ---------------------------------------------------------
            if ($this.attr("pattern") !== undefined) {
              message = "예상치 못한 형식입니다.<!-- data-validation-pattern-message to override -->";
              if ($this.data("validationPatternMessage")) {
                message = $this.data("validationPatternMessage");
              }
              $this.data("validationPatternMessage", message);
              $this.data("validationPatternRegex", $this.attr("pattern"));
            }
            // ---------------------------------------------------------
            //                                                       MAX
            // ---------------------------------------------------------
            if ($this.attr("max") !== undefined || $this.attr("aria-valuemax") !== undefined) {
              var max = ($this.attr("max") !== undefined ? $this.attr("max") : $this.attr("aria-valuemax"));
              message = "값이 너무 높습니다. 최댓값 :  '" + max + "'<!-- data-validation-max-message to override -->";
              if ($this.data("validationMaxMessage")) {
                message = $this.data("validationMaxMessage");
              }
              $this.data("validationMaxMessage", message);
              $this.data("validationMaxMax", max);
            }
            // ---------------------------------------------------------
            //                                                       MIN
            // ---------------------------------------------------------
            if ($this.attr("min") !== undefined || $this.attr("aria-valuemin") !== undefined) {
              var min = ($this.attr("min") !== undefined ? $this.attr("min") : $this.attr("aria-valuemin"));
              message = "값이 너무 낮습니다. 최솟값 :'" + min + "'<!-- data-validation-min-message to override -->";
              if ($this.data("validationMinMessage")) {
                message = $this.data("validationMinMessage");
              }
              $this.data("validationMinMessage", message);
              $this.data("validationMinMin", min);
            }
            // ---------------------------------------------------------
            //                                                 MAXLENGTH
            // ---------------------------------------------------------
            if ($this.attr("maxlength") !== undefined) {
              message = "값이 너무 깁니다. 최댓값 : '" + $this.attr("maxlength") + "' characters<!-- data-validation-maxlength-message to override -->";
              if ($this.data("validationMaxlengthMessage")) {
                message = $this.data("validationMaxlengthMessage");
              }
              $this.data("validationMaxlengthMessage", message);
              $this.data("validationMaxlengthMaxlength", $this.attr("maxlength"));
            }
            // ---------------------------------------------------------
            //                                                 MINLENGTH
            // ---------------------------------------------------------
            if ($this.attr("minlength") !== undefined) {
              message = "값이 너무 짧습니다. 최소값 : '" + $this.attr("minlength") + "' characters<!-- data-validation-minlength-message to override -->";
              if ($this.data("validationMinlengthMessage")) {
                message = $this.data("validationMinlengthMessage");
              }
              $this.data("validationMinlengthMessage", message);
              $this.data("validationMinlengthMinlength", $this.attr("minlength"));
            }
            // ---------------------------------------------------------
            //                                                  REQUIRED
            // ---------------------------------------------------------
            if ($this.attr("required") !== undefined || $this.attr("aria-required") !== undefined) {
              message = settings.builtInValidators.required.message;
              if ($this.data("validationRequiredMessage")) {
                message = $this.data("validationRequiredMessage");
              }
              $this.data("validationRequiredMessage", message);
            }
            // ---------------------------------------------------------
            //                                                    NUMBER
            // ---------------------------------------------------------
            if ($this.attr("type") !== undefined && $this.attr("type").toLowerCase() === "number") {
              message = settings.builtInValidators.number.message;
              if ($this.data("validationNumberMessage")) {
                message = $this.data("validationNumberMessage");
              }
              $this.data("validationNumberMessage", message);
            }
            // ---------------------------------------------------------
            //                                                     EMAIL
            // ---------------------------------------------------------
            if ($this.attr("type") !== undefined && $this.attr("type").toLowerCase() === "email") {
              message = "이메일 형식이 잘못 입력 되었습니다. <!-- data-validator-validemail-message to override -->";
              if ($this.data("validationValidemailMessage")) {
                message = $this.data("validationValidemailMessage");
              } else if ($this.data("validationEmailMessage")) {
                message = $this.data("validationEmailMessage");
              }
              $this.data("validationValidemailMessage", message);
            }

 

컨텍트미 파일 수정

$(function () {
    $(
        "#contactForm input,#contactForm textarea,#contactForm button"
    ).jqBootstrapValidation({
        preventSubmit: true,
        submitError: function ($form, event, errors) {
            // additional error messages or events
        },
        submitSuccess: function ($form, event) {
            event.preventDefault(); // prevent default submit behaviour
            // get values from FORM
            var name = $("input#name").val();
            var email = $("input#email").val();
            var phone = $("input#phone").val();
            var message = $("textarea#message").val();
            var firstName = name; // For Success/Failure Message
            // Check for white space in name for Success/Fail message
            if (firstName.indexOf(" ") >= 0) {
                firstName = name.split(" ").slice(0, -1).join(" ");
            }
            $this = $("#sendMessageButton");
            $this.prop("disabled", true); // Disable submit button until AJAX call is complete to prevent duplicate messages
            $.ajax({
                url: "/assets/mail/contact_me.php",
                type: "POST",
                data: {
                    name: name,
                    phone: phone,
                    email: email,
                    message: message,
                },
                cache: false,
                success: function () {
                    // Success message
                    $("#success").html("<div class='alert alert-success'>");
                    $("#success > .alert-success")
                        .html(
                            "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;"
                        )
                        .append("</button>");
                    $("#success > .alert-success").append(
                        "<strong>메일이 성공적으로 보내졌습니다. </strong>"
                    );
                    $("#success > .alert-success").append("</div>");
                    //clear all fields
                    $("#contactForm").trigger("reset");
                },
                error: function () {
                    // Fail message
                    $("#success").html("<div class='alert alert-danger'>");
                    $("#success > .alert-danger")
                        .html(
                            "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;"
                        )
                        .append("</button>");
                    $("#success > .alert-danger").append(
                        $("<strong>").text(
                            "죄송합니다. " +
                                firstName +
                                "님, 현재 메일 서버가 응답하지 않습니다. 나중에 다시 시도해주세요. "
                        )
                    );
                    $("#success > .alert-danger").append("</div>");
                    //clear all fields
                    $("#contactForm").trigger("reset");
                },
                complete: function () {
                    setTimeout(function () {
                        $this.prop("disabled", false); // Re-enable submit button when AJAX call is complete
                    }, 1000);
                },
            });
        },
        filter: function () {
            return $(this).is(":visible");
        },
    });

    $('a[data-toggle="tab"]').click(function (e) {
        e.preventDefault();
        $(this).tab("show");
    });
});

/*When clicking on Full hide fail/success boxes */
$("#name").focus(function () {
    $("#success").html("");
});

 

contact_me.php 파일을 열어 준 후, 수정한다.

<?php
// Check for empty fields
if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['phone']) || empty($_POST['message']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
  http_response_code(500);
  exit();
}

$name = strip_tags(htmlspecialchars($_POST['name']));
$email = strip_tags(htmlspecialchars($_POST['email']));
$phone = strip_tags(htmlspecialchars($_POST['phone']));
$message = strip_tags(htmlspecialchars($_POST['message']));

// Create the email and send the message
$to = "helloqu@naver.com"; // Add your email address in between the "" replacing yourname@yourdomain.com - This is where the form will send a message to.
$subject = "메일이 도착하였습니다.:  $name";
$body = "당신의 개인 홈페이지에서 메일이 도착하였습니다.\n\n"."이곳의 자세한 내용을 확인 하세요.:\n\nName: $name\n\nEmail: $email\n\nPhone: $phone\n\nMessage:\n$message";
$header = "From: http://helloqu.dothome.co.kr/\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com.
$header .= "Reply-To: $email";	

if(!mail($to, $subject, $body, $header))
  http_response_code(500);
?>

 

파일질러를 이용하여 수정한 파일 들을 업로드 해준다.