안녕하세요 슬릭데브 입니다 ^^
제가 아직 직업이 없어서 4월에 준비하느라 글을 못올렸습니다.. 죄송합니다.
한국에서 직업을 구할때 자소서를 쓰는데 너무 어렵네요..
여러분 우리 힘내죠!!
저번 글에는 Firebase 데이터베이스와 연결해서 데이터베이스 있는 정보를 읽어왔습니다.
이번 글에서는 데이터베이스에 쓰는 방법을 알아보겠습니다.
CRUD에서 C 부분에 해당되는 Create (write) 을 하겠습니다.
오늘도 예제를 통해서 배워봅시다.
메뉴 이름과 가격을 입력하려면 버튼이 있어야합니다.
입력 버튼과 취소 버튼을 아래 화면처럼 만들어 봅시다.
HTML 파일에서 입력 버튼과 취소 버튼을 만들고, 마우스로 클릭하면 js 파일에 있는 function 들로 처리를 해줘야 합니다.
그다음은 입력 버튼을 누르면 메뉴이름과 가격에 씌여진 값을 firebase로 저장해야합니다.
취소 버튼을 누르면 reset 되도록 합시다.
searchRestaurant.html
헤드 태그입니다.
여기서 바뀐건 제목과 폴더 경로 위치입니다.
아시다시피 다른것은 저번 글과 동일해요!
바디 태그입니다.
자세히 보시면 input form 에 ng-model을 더 추가했습니다.
ng-model 이름을 menu.name --> 메뉴이름, menu.price --> 메뉴가격 각각 이렇게 썼습니다.
이렇게 하는 이유는 유저가 입력한 값을 컨트롤러에서 scope을 통해서 불러올때 사용되는 변수 이름입니다.
밑 부분에는 입력과 취소 버튼을 만들고 ng-click 에 function 이름을 썼습니다.
입력을 누르면 addMenuItem() function이 호출되고
취소를 누르면 reset() function이 호출됩니다.
이런 function들은 전부다 mainApp.js파일에 MenuController에 넣어놨습니다.
mainApp.js
달라진 부분이 $scope.reset function 입니다.
ng-model 로 input form 이름을 만들었습니다.
그 이름을 이용해서 reset 이 호출될때 빈칸으로 만들어 주는 function 입니다.
$scope.addMenuItem function 에서는 $add 를 써서 Firebase에 저장합니다.
저번글에 JSON 형식으로 Name , Price 가 있었는데 그것을 동일하게 합니다.
그리고 마지막으로 clearForm() function을 만들었는데 reset 하고 동일한 기능입니다.
Controller안에서만 사용하는 function은 이렇게 만들수 있습니다.
오늘은 여기까지 하겠습니다.
내일은 Update 을 해보겠습니다.
Edit 기능인데 메뉴를 수정할수있게 해보겠습니다.
혹시 질문있으시면 꼭 댓글 남겨주세요.
감사합니다!!
//슬릭데브
