노드 4기 'A조3반' 제 1회 프로젝트 설명

 

  우선 저희가 개발과정 중에 사용한 와이어프레임을 보여드리겠습니다.

이번 프로젝트에 메인 페이지와 개인 소개 페이지 두 종을 구상하였는데, 이를 와이어프레임으로 작성한 모양새입니다

 

 

 

  하단부터는 저희가 기획에 따라 구현해낸 웹페이지를 캡처본으로 보여드리겠습니다.

 

 

  팀 소개 프로젝트의 메인 페이지입니다.

간결한 ui와 그에 대비되는 아이콘, 하단의 비비드한 이미지 파일로 클릭을 유도해보았습니다.

 

메인 페이지의 각 기능들은 아래와 같습니다.

 

 

  최상단 우측의 플레이, 중지 아이콘은 <audio> 태그로 구현한 음악 플레이어로 static에 담은

음악을 플레이하게 구현되어있습니다.

  html5부터 페이지에 오디오 파일을 삽입시 긴 코딩 필요 없이 <audio> 태그를 사용하면 간편하게 

오디오 플레이어를 만드실 수 있습니다. 비디오의 경우에는 <vidio>라고 합니다. 

 

  중단 좌측에 보이는 시계는 function gettime을 이용해 구현한 시계입니다. 

구현 초기에는 웹페이지 진입 후 1에서 2초쯤 기다렸다 나타나는 현상이 있었는데

이는 시계를 매 1초마다 변화된 걸 구현하게 되어있었기 때문이었고 현재는 함수의 순서와

태그를 수정해 사이트 진입 시 딜레이 없이 바로 실행되도록 하였습니다.

 

  그 밑에 붉은 박스로 표시한 목록이 보이실 텐데 이는 중단 우측의 소개글, 목표, 약속이 떠있는

푸른 박스와 연동되어 있습니다.

 

  팀 소개란의 각 항목을 눌렀을 때 구현되는 화면입니다.

원하는 항목을 눌렀을 때 목록의 항목마다 배정되어 있는 문장만 더욱 집중해서 보실 수 있게

단독으로 띄우도록 하였습니다.

 

 프로젝트 소개항목은 소중하게 따로 저장해놓았습니다.

 

 

hover.를 이용한 마우스 올린항목에 밑줄

  또한 각 항목에 마우스를 대시면 hover 기능을 이용해 밑줄을 뜨게 하였습니다.

 

 

 

 붉은 상자로 강조한 맨 하단의 젭 아바타 이미지는 저희 조가 실재 사용하는 아바타의 이미지인데 

이는 이미지 태그로, 각 이미지를 누르시면 저희의 개인 소개 페이지 html로 넘어가게 되어 있습니다.

 

 예시로 저의 페이지를 올렸습니다.

 

   요구된 소개정보와 블로그 주소 링크를 사진 우측에, 사진 하단에는 페이지 별 방명록을 구현하였습니다.

블로그는 이미지 버튼에 링크를 걸어 구현하였는데 저의 경우에는 티스토리 아이콘을 넣어 찾기 편하시게 하였습니다.

 

  현재 방명록은 팀원 한 분의 db에 저희 조원 5명의 방명록을 전부 관리하게 하였습니다.

처음에는 각자 자기의 db에 연동되도록 하려고 여러 시행착오를 겪었었는데,

현재는 팀원 한분의 db로 5명의 방명록 데이타를 전부 넣되 각기 다른 폴더로 연동되게끔 하였습니다.

 

다음은 방명록을 남겨보겠습니다

 

이름과 내용을 적지 않았을때 화면입니다., 방명록으로 공백을 남길 수 없습니다.

 

 

이름은 적고 내용은 적지 않았을 때의 상황입니다, 내용을 적으라고 alert을 뜨게하였습니다.

 

 

넣고 입력을 누르면 저장완료가 뜨고

 

잘 되었습니다, 한눈에 들어오는 페이지를 위해 남긴 방명록에 스크롤바를 넣었습니다.

 

 

 많은 분들이 어려워하고 저희도 오래 걸린 삭제기능

 

깔끔하게 지워졌죠?

 

 

하단에는 저희가 사용한 api의 목록입니다

 

 

 

 

 

아래에는 팀원 개인별로 마음에 들었던 코드를 적어보겠습니다

 

 

이드보라님

 

@app.route('/first_mini1/deletecomment', methods=["POST"])
def first_mini1_delete():
    num_receive = request.form["num_give"]

    db.bora.delete_one({'num': int(num_receive)})
    return jsonify({'msg': '삭제 완료!'})

 

function comment_delete(num) {
    $.ajax({
        type: 'post',
        url: '/first_mini5/deletecomment',
        data: {'num_give': num},
        success: function (response) {
            alert(response['msg']);
            window.location.reload()
        }
    });
}

db 삭제기능 구현코드입니다

 

박종수님

function save_comment() {
    let name = $('#name').val()
    let comment = $('#comment').val()
    if (name == "") {
        alert("이름을 입력해주세요.");
        return false
    } else if (comment == "") {
        alert("내용을 입력해주세요.");
        return false
    }

빈 항목 입력방지 기능입니다

 

조해빈님

 

$(document).ready(function () {
    $('#team2').hide()
    $('#team3').hide()
    $('#project').hide()
    $('#team1').hide()

    $("#ot1").click(function () {
        $('#team2').hide()
        $('#team3').hide()
        $('#project').hide()
        $('#team1').show()
    })
    $("#ot2").click(function () {
        $('#team2').show()
        $('#team3').hide()
        $('#project').hide()
        $('#team1').hide()
    })
    $("#ot3").click(function () {
        $('#team2').hide()
        $('#team3').show()
        $('#project').hide()
        $('#team1').hide()
    })
    $("#ot4").click(function () {
        $('#team2').hide()
        $('#team3').hide()
        $('#project').show()
        $('#team1').hide()
    })

원하는 탭 표시 기능입니다

 

 

박예빈님

.members {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 2px solid gray;
    padding: 30px;
    width: 100%;

    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}
.memberphoto {
    width: 100%;
    height: auto;

    flex-wrap: wrap;
}

구역 너비에 맞게 이미지 다섯 개 나열 및 자동 크기 조절

 

예시

 

 

조봉진

 

function play() {
    var audio = document.getElementById("audio");

<div class="music">
    <p>wanna chill?
        <input type="image" name="button" src="../static/icons8-play-button-circled-30.png" onclick="audio.play();"
               value="PLAY"> <!--재생-->
        <input type="image" name="button" src="../static/icons8-pause-button-30.png" onclick="audio.pause();"
               value="PAUSE"> <!--일시정지-->
        <audio id="audio" src="../static/freemusicforhtml.mp3" onloadstart="audio.volume=0.5" loop></audio>
    </p>

 

오디오 재생기능입니다, 초등학생때는 플래시 등을 이용해야 했던거 같아 복잡해 보였는데 간결해지니 좋네요