택배 조회 서비스 웹앱

2020.06.14 ~ 2020.06.28

사용 언어 : HTML | JQuery | CSS3 | JavaScript | SQLite 

웹앱 프로그래밍 기말 텀 프로젝트

 

콘텐츠 제공 + SQLite (DB 연동)

 

 

>> Term 프로젝트 실행 화면 <<

 

화면1) 페이지의 홈이자 택배 운송장 조회 화면.

텍스트 입력 폼에 운송장 번호를 입력 시 아래 하단에 테이블 형태로 조회한 운송장 번호의 정보가 출력된다.

페이지 홈, 택배 운송장 조회

 

화면2) 화면1)의 푸터바에 있는 ‘택배고객센터...’ 특수 링크를 누를 시

바로 전화를 걸 수 있도록 바로 전화 어플로 이동한다.

전화 앱으로 이동

 

화면3) 화면1)에서 관리자 버튼을 누르면 뜨는 대화상자.

운송장 등록, 위치 갱신, 배송완료(운송장 정보 삭제), 운송장 내역 4가지의 메뉴가 있다.

 

관리자 버튼 메뉴

 

화면4) 운송장 등록 화면.

각 폼에 정보를 입력후 등록을 누르면 SQL DB에 정보가 저장된다.

 

등록 과정 1

등록 과정 2

등록 과정3

화면5) 운송장 갱신 화면.

운송장 번호를 입력후 검색을 누르면 입력한 운송장 번호가 등록이 되어있는지 아닌지의 여부와

입력한 운송장 번호의 정보를 확인할 수 있다.

그리고 변경되어야할 택배의 현재 위치와 배송의 상태를 설정 후 변경을 누르면

위에서 검색한 해당 운송장 번호의 정보가 변경된다.

갱신 과정 1

갱신 과정 2

갱신 과정 3

화면6)운송장 정보 삭제 화면.

운송장 번호 입력 후 삭제를 누르면 운송장 번호와 정보가 삭제된다.

 

삭제 과정1

삭제 과정2

삭제 과정3

화면7)운송장 내역 화면

새로고침을 누르면 등록된 운송장들의 정보를 확인 할 수 있다.

등록된 운송장을 전부 삭제하고 다시 등록한 뒤 새로고침을 하지 않음.

새로고침을 누르면 운송장이 뜸.

 

 

 

~ 시연 동영상 ~