안녕하세요. 닷홈 php, 자바스크립트에 대해서 질문 드립니다.
글쓴이: ok37 / 작성시간: 화, 2022/07/12 - 5:26오후
안녕하세요 오늘 처음 php를 공부 하고 있는데요.
어제 닷홈에서 무료 웹호스팅을 해보고
html파일을 닷홈의 mysql과 연동을 시키려고 하니 공부 해본적이 없는 php 연동 글만 나와서
오늘 처음 php 를 해봤는데요.
html 파일안에 자바스크립트 안에 php로 mysql 인서트문은 쓸 수 없는 것인가요??
html 파일은 인터넷에 검색해서 복붙한거 고쳤습니다. 셀렉트는 되는데 인서트는 안되네요 ㅜㅠ
달력 일정 만들기 하고 있습니다. 일정추가 버튼 인서트가 안되요..
<?php $db_host = "localhost"; $db_user = "아이디"; $db_passwd = "비번"; $db_name = "디비명"; $conn = mysqli_connect($db_host,$db_user,$db_passwd,$db_name); $sql = "SELECT * FROM cal"; $result = mysqli_query( $conn, $sql); while( $row = mysqli_fetch_array( $result)) { echo '<p>' . $row[ 'ctitle' ] . $row[ 'cstart' ] . $row[ 'cend' ] . $row[ 'ccolor' ] . '</p>' ; $ptitle = $row['ctitle']; $pstart = $row['cstart']; $pend = $row['cend']; } if (mysqli_connect_errno($conn)) { echo "데이터베이스 연결 실패: " . mysqli_connect_error(); } else { echo "데이터베이스 연결 성공"; } ?> <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>calendar</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- bootstrap 4 --> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <!-- fullcalendar --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.0/main.min.css"> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/fullcalendar@5.7.0/main.min.js"></script> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function () { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { timeZone: 'UTC', initialView: 'dayGridMonth', // 홈페이지에서 다른 형태의 view를 확인할 수 있다. events:[ // 일정 데이터 추가 , DB의 event를 가져오려면 JSON 형식으로 변환해 events에 넣어주면된다. { title:'일정1', start:'2022-07-12 00:00:00', end:'2022-07-13 24:00:00' // color 값을 추가해 색상도 변경 가능 자세한 내용은 하단의 사이트 참조 }, { title:'일정2', start:'2022-07-14 00:00:00', end:'2022-07-15 24:00:00' // color 값을 추가해 색상도 변경 가능 자세한 내용은 하단의 사이트 참조 }, { title:'일정3', start:'2022-07-14', end:'2022-07-15' // color 값을 추가해 색상도 변경 가능 자세한 내용은 하단의 사이트 참조 }, { title:'<?php echo $ptitle ?>', start:'<?php echo $pstart ?>', end:'<?php echo $pend ?>' // color 값을 추가해 색상도 변경 가능 자세한 내용은 하단의 사이트 참조 } ], headerToolbar: { center: 'addEventButton' // headerToolbar에 버튼을 추가 }, customButtons: { addEventButton: { // 추가한 버튼 설정 text : "일정 추가", // 버튼 내용 click : function(){ // 버튼 클릭 시 이벤트 추가 $("#calendarModal").modal("show"); // modal 나타내기 $("#addCalendar").on("click",function(){ // modal의 추가 버튼 클릭 시 var content = $("#calendar_content").val(); var start_date = $("#calendar_start_date").val(); var end_date = $("#calendar_end_date").val(); //내용 입력 여부 확인 if(content == null || content == ""){ alert("내용을 입력하세요."); }else if(start_date == "" || end_date ==""){ alert("날짜를 입력하세요."); }else if(new Date(end_date)- new Date(start_date) < 0){ // date 타입으로 변경 후 확인 alert("종료일이 시작일보다 먼저입니다."); }else{ // 정상적인 입력 시 var obj = { "title" : content, "start" : start_date, "end" : end_date }//전송할 객체 생성 <?php $jtitle = "<script>document.write(content)</script>"; $jstart = "<script>document.write(start_date)</script>"; $jend = "<script>document.write(end_date)</script>"; $db_host = "localhost"; $db_user = "아이디"; $db_passwd = "비번"; $db_name = "디비명"; $conn = mysqli_connect($db_host,$db_user,$db_passwd,$db_name); echo '<p>' . $jtitle . $jstart . $jend . '</p>' ; $query = "INSERT INTO cal (ctitle, cstart, cend, ccolor) VALUES ($jtitle, $jstart, $jend, '1') "; mysqli_query($conn, $query); mysqli_close($conn); ?> console.log(obj); //서버로 해당 객체를 전달해서 DB 연동 가능 } }); } } }, editable: true, // false로 변경 시 draggable 작동 x displayEventTime: false // 시간 표시 x }); calendar.render(); }); </script> <style> #calendarBox{ width: 70%; padding-left: 15%; } </style> </head> <body> <div id="calendarBox"> <div id="calendar"></div> </div> <!-- modal 추가 --> <div class="modal fade" id="calendarModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">일정을 입력하세요.</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="form-group"> <label for="taskId" class="col-form-label">일정 내용</label> <input type="text" class="form-control" id="calendar_content" name="calendar_content"> <label for="taskId" class="col-form-label">시작 날짜</label> <input type="date" class="form-control" id="calendar_start_date" name="calendar_start_date"> <label for="taskId" class="col-form-label">종료 날짜</label> <input type="date" class="form-control" id="calendar_end_date" name="calendar_end_date"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-warning" id="addCalendar">추가</button> <button type="button" class="btn btn-secondary" data-dismiss="modal" id="sprintSettingModalClose">취소</button> </div> </div> </div> </div> </body> </html>
Forums:
PHP 이전에 웹 개발이 처음이신거 같네요
웹개발 초보 때 아직 웹쪽에 경험이 없어서
보통 흔히하는 실수인데..
PHP랑 자바스크립트 섞어 쓴다고
왔다 갔다 하면서 처리 되는게 아닙니다.
브라우저에서 HTML소스 보기 하시면 알겠지만
PHP는 선행 처리 한다고 생각해야 합니다..
이 플로우로 원하시는 예제를 완성하는 건 솔찍히 어렵고요.
한 파일로 처리 하는건 완전 불가능은 아니라도 일단은
Insert 하는 PHP 파일도 따로 만들어 주는게 맞고요
그냥 다른 예제 소스를 찾아보시는게 좋을 겁니다
--=--=--=--=--=--=--=--=--=--=--=--=--=--=--=--
N년째 초보입니다
댓글 달기