저번 글에서 편지를 DB에 저장하고 관리자만 편지를 볼 수 있도록 설정하기로 결론지었다.따라서 이 글에서는 편지를 DB에 저장하고, 관리자 페이지를 만들어 볼 것이다!📍 DB에 편지 저장하기[letter.js][insertLetterTable.php]음악 저장하는 거랑 똑같이 js에서 편지 데이터(작성자, 편지내용, 편지지)를 php로 날리고, DB에 저장하면 끝📍 편지 보기1. 편지 보기 UI[ckletter.html] 은진 님께 온 편지 [ckletter.css]#letterContainer { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}DB에 저장된 편지를 2열로 보여줄 수..
편지지 메일로 보내기에 너무 긴 시간을 들이고 결국 실패해서 오디오 자동재생도 해결 못하는 건 아니겠지... 하며 먼저 해 봤다...결론부터 말하자면 오디오 자동재생도 실패 ㅎ.. BGM은 없애기로 했다. 저번에 대부분 브라우저에서 오디오 자동재생을 막아뒀기 때문에 로그인 버튼을 통해 오디오를 재생하도록 해결했다고 했는데요?새로운 페이지(달력, 편지, 노래추천)로 이동하면? 또 노래가 꺼지는 이슈 발생... 그러하여 저는 세 번의 시도를 해 봤습니다..나의 철학 세 번 도전하고 안 되는 건 빠르게 포기한다! 🧐 시도 1. 새 페이지가 아닌 한 페이지에서 body만 바꾸며 재생하기대박 !!! 이거면 돼겠다 !!! 하고 1나부터 10까지 일일이 바꾸고 합쳤는데,...약속을 추가하거나, 편지를 보내거나, 노..
메일로 편지를 보내고 싶었는데 세 번의 실패를 맛보고 포기하다.....이 글에선 세 번의 실패 과정을 설명합니다..🧐 문제 1. 사진이 안 보내짐 자꾸 사진을 포함해서 보내도 내용만 보내지고 사진은 흔적도 없이 사라짐 ..정말 열받았다... 믿기지 않아서 200번 시험해봄🔑 인라인 스타일로 보내자!이 문제 해결 법은 검색하니 금방 나왔다!!var emailContent = ` `; 메일 본문 쓸 때 스타일 태그 안 쓰고 위 코드블럭처럼 인라인으로 ..
📍계획 및 구상편지 보내기 페이지에 들어가면 유저들은 편지지를 고를 수 있고, 나에게 편지를 보낼 수 있다.보내기 버튼을 누르면 내 메일로 편지가 온다.📍구현1. 편지지 고르기 인터페이스[letter.html][letter.css]편지지를 선택할 수 있도록 3 종류의 편지지를 그리드로 나열하고, 첫번째 편지지에 테두리를 설정하여 현재 이 편지지가 선택되었음을 표시한다. [letter.js]만약 사용자가 편지지를 선택하면, 해당 편지지를 paper 값으로 설정하여 추후 메일으로 해당 편지지를 보낼 수 있도록 설정한다.선택한 편지지는 테두리를 설정하여 선택된 상태라는 것을 보여준다.2. 편지 작성 인터페이스[letter.html]상단 왼쪽에는 to. 은진을 적어 나에게 쓰는 편지임을 알린다.그리고 te..
📍계획 및 구상약속잡기 페이지에 들어가면 12월 달력이 나오고, 유저들은 나의 일정을 확인할 수 있다.일정이 없는 날을 입력하여 약속잡기 버튼을 누르면, DB에 약속이 저장되고, 달력에 그 약속이 추가된다.📍구현1. 달력 인터페이스[schedule.html]달력은 table을 이용하여 만들었다.토요일과 일요일은 초록색, 빨간색으로 표현하였고, 각 날짜는 숫자와 줄띄움을 하고 공백을 넣어 추후 이름을 저장할 수 있도록 하였다. 각 날짜에는 추후 스케줄 추가가 쉽도록 id를 설정하였다. 이걸 하면서 html entity를 처음 알게 되었는데, html에서의 특수문자이다. 이 코드에서 사용된  는 공백란을 뜻한다~ 2. DB에 저장된 약속 가져오기[schedule.js]음악 가져오는 과정과 동일하게..
원래 UI 개발을 끝내고 연결하려 했는데 유튜브 링크를 동적으로 가져오는 부분을 확인하기 위해 서버를 먼저 연결했다. 정말 고난이 많았다.. 일단 웹 서버가 어떻게 구성되고 연결되는지 전혀 모른다는 것이 가장 큰 문제였다.... 검색해 봤더니 요즘은 주로 스프링을 사용하여 개발하는 것 같았고, 학교 강의자료도 미리 받아 보니 스프링으로 수업하고 있는 것을 확인했다. 그래서 나는 php를 선택했다!!!!!!!!!(?) 그 이유는 어차피 내년에 복학하면 한 학기 내내 양질의 스프링 수업을 들을 수 있으므로 다양한 경험을 위해 혼자선 php 공부를 해 보는 게 나쁘지 않다고 생각했다. 📍 1. 도메인 만들고 호스팅하기우선 무료로 도메인을 만들고 호스팅 해주는 닷홈을 가입했다.무료 호스팅에서 기본사양을 신청하..
📍1. 계획 및 구상음악 추천 페이지로 이동하면 DB에 저장해 둔 링크들을 보여주고, 누가 추천했는지도 보여준다.이때, 사용자가 유튜브 링크를 등록하면, DB에 추가되고, 페이지가 새로고침되어 사용자가 추천한 노래가 등록된 모습을 확인할 수 있게 한다.📍2. 구현📖form[song.html 中] 크리스마스에 듣기 좋은 노래가 있나요? 추천 form 클래스로 노래 링크를 입력받고, 추천 버튼을 누르면 페이지가 새로고침된다. 📖iframe[song.html 中] 크리스마스에 듣기 좋은 노래가 있나요? 추천 ..
📍1. 계획 및 구상우선 로그인화면과 메인화면의 UI 계획은 위와 같다. 로그인 화면은 닉네임 입력 후 입장 버튼을 누르면 메인화면으로 이동하면서 audio가 재생된다.메인화면은 크리스마스까지 남은 시간이 setInterval으로 실시간 업데이트되고, 세 가지 버튼을 통해 각 기능 페이지로 이동할 수 있다. 원래 구상은 로그인페이지를 별도로 나누지 않았다. 그냥 메인화면에 bgm이 자동재생되고, 닉네임을 입력받고, 기능 화면으로 이동할 수 있도록 하는 거였다.📍2. 구현📖 audio, display하지만 audio 클래스는 몇몇 브라우저에서 자동 재생이 허용되지 않는다는 사실을 알았다.그래서 로그인 페이지를 별도로 생성하여 로그인버튼을 통해 오디오가 재생되도록 만들었다 !! 페이지가 새로고침되면 노..
📍1. 기획 의도 내가 제일 좋아하는 빨간 날은 바로바로 크리스마스 ( ˊ ᵕ ˋ )♡.°⑅ 매일 크리스마스가 얼마나 남았는지 확인하고, 행복을 만끽하기 위해 연말은 약속으로 가득 채운다이걸 한 번에 정리할 수 있는 페이지를 만들면 좋을 것 같아 기획한 크리스마스 프로젝트 !!이 사이트를 통해 친목도 도모하고, 서로의 취향도 공유할 수 있다면 좋겠다! 아직 html/css/js가 어색하기 때문에 .. (거의 모른다에 가까움) 진짜 프로젝트임따라서 사용자들이 페이지에 접속하면 나(=은진)와 관련된 일을 수행할 수 있고, 사용자 개인의 페이지를 만들 순 없다..은진이랑 약속 잡기.. 은진이에게 노래 추천해 주기.. 은진이에게 편지 써주기... 만 가능 사실 이미 프로젝트를 중반정도 진행했는데, 정말 ..
