웹 프로그래밍 - 데이트 코스 만들기2(Apache+PHP+MariaDB)

오늘 과제의 조건은 다음과 같다.

 

1. 오늘의 데이트 코스 - 랜덤 출력(제보된 데이트 코스 포함)

2. 데이트 코스 제보하기 - 제보를 하면 데이트 코스 표 제일 아래 뜨게 만들기.

 

아래와 같이 오늘의 데이트 코스 클릭 창은 띄웠으나 팝업 창이 랜덤하게 뜨지 않는다.

솔직하게 오늘은 제미나이의 도움을 받았다.

 

 

 

 

<첫번째 조건>

</tbody>

                <tfoot bgcolor="white" align="center">//흰색, 가운데 정렬
                        <tr height="20">//높이 20으로 설정
                        //버튼 타입, 클릭을 하면 랜덤값을 출력하는 설정이 들어있는 hangout을 화면에 보여준다.
                        <td colspan="4"> <input type="button" value="오늘의 데이트 코스!" onClick="hangout()" id="randomresult"></td>
                
                        </td>//가로 한줄 끝
                        </tr>//가로 줄 안에 있는 칸 끝 
                        </tfoot>//tfoot 끝
                        </table> <space id="randomresult"></space>
                        //랜덤 결과값이 들어가기 전까지 비어있는 곳.
                <script>
                        const hangout = function() {//변하지 않는 함수 값 설정.
                        //tbody의 가로 한줄에서 해당하는 목록을 모두 가져와라.
                        const rows = document.querySelectorAll('tbody tr');
                        //표의 줄이 몇개인지 확인하고 0부터 0.999..사이의 수를 뽑아라.
                        //뽑을 때 줄 개수를 곱하고 정수만 남겨라. 남은 정수를 random1상수에 저장해라.
                        const random1 = Math.floor(Math.random() * rows.length);
                        //랜덤1상수가 있는 줄의 0번째 셀 안에 있는 값을 selectedCourse 상수에 저장해라.
                        const selectedCourse = rows[random1].cells[0].innerText;
                        //스페이스라는 태그 생성
                        const result = document.createElement('space');
                        //result안에 있는 글자색 파랑색 그리고 selectedCourse값 불러오기
                        result.innerHTML = `<h3>오늘의 코스: <span style="color: blue;">${selectedCourse}</span></h3>`;
                        //id = randomresult를 outTag에 담기
                        const outTag = document.querySelector('#randomresult');
                        //outTag의 안쪽을 빈문자열로 만들어라
                        outTag.innerHTML = '';
                        //화면에 출력
                        outTag.appendChild(result);
                        //알람 내용.
                        alert("오늘의 데이트 코스: " + selectedCourse);
                        };
												//"문서가 다 준비될 때까지 기다렸다가, 준비가 끝나면 이 안에 있는 자바스크립트 명령들을 시작해라!"
                        document.addEventListener('DOMContentLoaded', () => {
                        const randomresult = document.querySelector('#randomresult');
                        if(randomresult) {
                        //버튼 누르면 실행되게 해라.
                        randomresult.onclick = hangout;
                                }
                        });

                </script>

 

표 안으로 값을 넣는 것이 어렵다;

<두번째 조건>

const addreport = function() {//변하지 않는 함수 값 설정.
                  const name = document.querySelector("#user_name").value;
                  //id가 user_name인 곳에 직접 입력한 값을 가져와서 name에 저장
                  const rec = document.querySelector("#user_rec").value;
                  //id가 user_rec인 곳에 직접 입력한 값을 가져와서 rec에 저장
                  const categoryNode = document.querySelector('input[name="user_category"]:checked');
                  //user_category라는 이름의 라디오 버튼 중에서 사용자가 현재 체크한 값을 찾아 저장해라.
                  const category = categoryNode ? categoryNode.value : "";
                  //사용자가 항목을 선택했다면 category에 아니라면 빈칸
                  const experienceNode = document.querySelector('input[name="user_experience"]:checked');
                   //user_expericence라는 이름의 라디오 버튼 중에서 사용자가 현재 체크한 값을 찾아 저장해라.
                  const experience = experienceNode ? experienceNode.value : "";
                  //방문경험 있다면 experience에 저장 아니면 빈칸.
                  const outTag = document.querySelector('#randomresult');
                  //id가 randomresult인 태그를 찾아서 outTag에 넣어라. 결과값 넣을 곳.
               if (outTag) {
                  const reportResult = `[이름] ${name} 추천장소: ${rec} | 종류: ${category} | 방문경험: ${experience}`;
                  //사용자가 입력한 이름, 장소, 종류, 경험 값을 하나의 문자열로 합쳐서 reportResult에 담아라
                  outTag.innerHTML = `<h3 style="color: green;">${reportResult}</h3>`;
                  //내용의 글자 크기를 h3, 글자색은 초록색으로.
                  userReports.push(reportResult); 
                  //reportResult를 나중에 랜덤으로 뽑을 수 있게 userReports에 추가해라.
                  alert("제보 완료! 이제 오늘의 데이트  코스 후보에 포함됩니다.");}
                  //버튼 누르면 알림창
														 };

 

화면에 출력하기 위해 값을 가져오는 것이 조금 어렵다. C언어, Python보다는 괜찮지만 그래도 쉽지 않다.

화이팅..!