내일배움캠프 17일차 _ 강만다 프로젝트(7일차)

이제 내일 최종회의를 하며 발표영상을 준비하면

첫 번째 프로젝트가 끝난다~!!!!!

워후....

내일배움단을 했던 나는 이번 프로젝트를 통해

내가 처음 했던 프로젝트 챌린지 때보다 얼마나

성장했는지 볼 수 있어서 좋았다.

그 때는 하지 못했던 것을 지금은 혼자 할 수 있고

거기에 더해 응용해서 만들어 낼 수 있는 것이 신기했다.

---

오늘은 css를 전체적으로 수정했다.

팀원분이 db에서 데이터를 뽑아오게 구현해주신 페이지 디자인을 수정했다.

내일배움단을 할 때는 이것조차 쉽지 않았는데ㅜㅜㅜ

이제 점점 구조를 보는 눈이 생기고

내가 만져도 되는 부분과 만지면 안되는 부분이 보이기 시작했다.

 

그리고 input box에 값이 들어오지 않은 경우

db에 담기지 않도록 코드를 수정했다.

처음 코드를 짤 때 미처 생각하지 못한 부분을 팀원분이

알려주셔서 감사했다.

---

function post_upload() {

            let author = $("#author_box").val()
            let title = $("#title_box").val()
            let address = $("#address-box").val()
            let content = $("#contents_box").val()

            //파일명 출력//
            var fileInput = document.getElementsByClassName("file");

            for (var i = 0; i < fileInput.length; i++) {
                if (fileInput[i].files.length > 0) {
                    for (var j = 0; j < fileInput[i].files.length; j++) {
                        let filename = fileInput[i].files[j].name //

                        let file = $('#file')[0].files[0]
                        let form_data = new FormData()

                        form_data.append("file_give", file)
                        form_data.append("author_give", author)
                        form_data.append("title_give", title)
                        form_data.append("address_give", address)
                        form_data.append("content_give", content)
                        form_data.append("filename_give", filename)

                        $.ajax({
                            type: "POST",
                            url: "/posts/",
                            data: form_data,
                            cache: false,
                            contentType: false,
                            processData: false,
                            success: function (response) {

                                if ($("#author_box").val().length == 0) {
                                    alert("작성자를 입력하세요!");
                                    $("#author_box").focus();
                                    return false;
                                }
                                if ($("#title_box").val().length == 0) {
                                    alert("제목을 입력하세요!");
                                    $("#title_boxl").focus();
                                    return false;
                                }
                                if ($("#contents_box").val().length == 0) {
                                    alert("내용을 입력하세요!");
                                    $("#contents_box").focus();
                                    return false;
                                }
                                if ($("#address-box").val().length == 0) {
                                    alert("주소를 입력하세요!");
                                    $("#address-box").focus();
                                    return false;
                                } else {
                                    alert(response["msg"])
                                    location.replace('/posts')
                                }
                            }
                        })
                    }
                }
            }
        }

처음에는 코드를 이렇게 짜는 바람에

input 박스가 빈칸일 때 저장 버튼을 누르면

alert을 띄우고 페이지를 넘어가지 않게 하는 것은 성공했지만

빈 값도 db에 들어갔다...

그래서 아래처럼 위치를 바꿔 수정했다.

 

function post_upload() {

            let author = $("#author_box").val()
            let title = $("#title_box").val()
            let address = $("#address-box").val()
            let content = $("#contents_box").val()

            //파일명 출력//
            var fileInput = document.getElementsByClassName("file");

            for (var i = 0; i < fileInput.length; i++) {
                if (fileInput[i].files.length > 0) {
                    for (var j = 0; j < fileInput[i].files.length; j++) {
                        let filename = fileInput[i].files[j].name //

                        let file = $('#file')[0].files[0]
                        let form_data = new FormData()

                        form_data.append("file_give", file)
                        form_data.append("author_give", author)
                        form_data.append("title_give", title)
                        form_data.append("address_give", address)
                        form_data.append("content_give", content)
                        form_data.append("filename_give", filename)

                        if ($("#author_box").val().length == 0) {
                            alert("작성자를 입력하세요!");
                            $("#author_box").focus();
                            return false;
                        }
                        if ($("#title_box").val().length == 0) {
                            alert("제목을 입력하세요!");
                            $("#title_boxl").focus();
                            return false;
                        }
                        if ($("#contents_box").val().length == 0) {
                            alert("내용을 입력하세요!");
                            $("#contents_box").focus();
                            return false;
                        }
                        if ($("#address-box").val().length == 0) {
                            alert("주소를 입력하세요!");
                            $("#address-box").focus();
                            return false;
                        } else {
                            $.ajax({
                                type: "POST",
                                url: "/posts/",
                                data: form_data,
                                cache: false,
                                contentType: false,
                                processData: false,
                                success: function (response) {
                                    alert(response["msg"])
                                    location.replace('/posts')
                                }
                            })
                        }
                    }
                }
            }
        }

form data 에 값을 담은 후에 각 값이 없을 때는

if 문으로 alert을 띄우고

else 일 때(값이 있을 때)는 ajax를 실행 시켜 값을 서버로 넘겨

db에 담기게 하고 msg를 띄워줬다.

 

처음엔 어떻게 해야되는지 멘붕이 왔는데 코드를

계속 보다보니 자연스럽게 알게됐다.

오늘도 뿌듯!!

 

앞으로도 화이탱~!