Calendar 와 메모 기능

caleadar

결과 화면

admin 페이지 메인에다 만든 calendar이다.

일정을 추가하고 일정의 시간이나 날짜를 드래그로 편하게 변경할 수 있다.

자세한 구현 과정 설명 --> 2021.12.01 - [프로그래밍 언어/Javascript&jQuery] - Full Calendar (php 사용)

 

 

 

메모장

결과 화면

팀원들과 admin 페이지에서 간단한 메세지나 공지사항을 알리기 위해 만들었다.

 

 

<구현 설명>

1. 메모 추가

이 버튼을 누르면 메모장이 추가된다.

makeMemo() 함수와 연결되어있다.

function makeMemo() {
		
		var str =   '<div style="float : left;">' + 
						'<div id="memo-top"></div>' + 
						'<textarea onchange="memoAdd()" placeholder="메모" rows="9" cols="20" class="memo" id="hhh"></textarea>' + 
					'</div>';
		
		
		$("#memo_area").append(str);
	}

 

 

메모를 다 적고 아무데나 클릭하면 memoAdd()함수가 실행된다.

그리고 ajax를 이용해서 admin conroller의 ajax_memo_add()함수로 간다.

function memoAdd() {
		
		var content = document.getElementById('hhh').value;
		
		$.ajax({
			url: "/~team2/admin/ajax_memo_add",
			type: "POST",
			dataType: "JSON",
			data : {
				content : content
			},
			success : function(data) {
				
				print_memo(data);
				
			},
			error: function(request,status,error){ // 실패
				alert("code = "+ request.status + " message = " + request.responseText + " error = " + error); // 실패 시 처리
				console.log("code = "+ request.status + " message = " + request.responseText + " error = " + error);
			}
		});
	}

 

 

메모를 데이터베이스에다 저장하고, 데이터베이스에서 메모 내용을 모두 가져와서 다시 화면에 출력한다.

function ajax_memo_add() {
			
			$this->_ajax_header();
			
			$content = $_POST['content'];
			
            $this->load->model('Memo_m');
			$this->Memo_m->add($content);
			
			$data = $this->_get_memo();
			
			$result = json_encode($data, JSON_UNESCAPED_UNICODE);
            echo $result;
		}

function _get_memo() {
			
			$data['memo'] = $this->Memo_m->getAll();
			
			return $data;
		}

function getAll() {
			$sql = 'select * from memo order by id';
			
			return $this->db->query($sql)->result();
		}

function print_memo(data) {
		
		var str = '';
		for (var i = 0; i < data.memo.length; i++) {
			
			str +=  '<div style="float : left;">\n' + 
						'<div id="memo-top"><i class="fas fa-fw fa-times" onclick="pressDeleteMemo(' + data.memo[i].id + ')" style="cursor : pointer;"></i></div>\n' + 
						'<textarea onchange="memoEdit('+ data.memo[i].id +', \'memo' + data.memo[i].id + '\')" placeholder="메모" rows="9" cols="20" class="memo" id="memo' + data.memo[i].id + '">' + data.memo[i].content + '</textarea>\n' + 
					'</div>';
		}
		
		$("#memo_area").empty();
		$("#memo_area").append(str);
		
	}

 

 

 

 

2. 메모 수정

메모를 클릭하면 메모를 수정할 수 있다.

커서가 생김

메모를 수정하고 메모를 제외한 아무 곳을 클릭하면 onchange함수로 인해 memoEdit()함수가 출력된다.

수정한 내용값을 가져와 ajax를 통해 ajax_memo_edit()함수를 실행한다.

function memoEdit(memo_id, memo_id_name) {
		
		var content = document.getElementById(memo_id_name).value;
		
		if (content == ''){
			alert('메모를 1자 이상 적어주세요.');
			return;
		}
		
		$.ajax({
		    url: "/~team2/admin/ajax_memo_edit",
		    type: "POST",
		    dataType: "JSON",
		    data : {
				memo_id : memo_id,
				content : content
		    },
		    success : function(data) {
			
				print_memo(data);
			
		    },
		    error: function(request,status,error){ // 실패
				alert("code = "+ request.status + " message = " + request.responseText + " error = " + error); // 실패 시 처리
				console.log("code = "+ request.status + " message = " + request.responseText + " error = " + error);
		    }
		});
		
		
	}

 

데이터베이스에서 해당 post값으로 받은 id와 같은 id를 가진 메모를 update하고, 다시 화면에 모든 메모를 출력한다.

function ajax_memo_edit() {
			
			$this->_ajax_header();
			
			$data['content'] = $_POST['content'];
			$data['id'] = $_POST['memo_id'];
			
            $this->load->model('Memo_m');
			$this->Memo_m->edit($data);
			
			$data = $this->_get_memo();
			
			$result = json_encode($data, JSON_UNESCAPED_UNICODE);
            echo $result;
		}

function edit($data) {
			
            $sql = "update memo set content='".$data['content']."' where id=".$data['id'];
            
            $this->db->query($sql);
		}

 

 

 

 

3. 메모 삭제

메모 오른쪽 위에 있는 x표시를 누르면 경고창이 나오고 삭제할 수 있다.

 

 

x 표시 html 코드 ↓

<div id="memo-top"><i class="fas fa-fw fa-times" onclick="pressDeleteMemo(<?=$memo->id?>)" style="cursor : pointer;"></i></div>

 

 

x표시를 누르면 pressDeleteMemo()함수가 실행된다.

ajax를 통해 ajax_memo_edit()함수를 실행한다.

function pressDeleteMemo(id) {
		var answer = confirm('정말로 삭제하시겠습니까?');
		if (answer) {
			
			$.ajax({
				url: "/~team2/admin/ajax_memo_delete",
				type: "POST",
				dataType: "JSON",
				data : {
					memo_id : id
				},
				success : function(data) {
					
					print_memo(data);
					
				},
				error: function(request,status,error){ // 실패
					alert("code = "+ request.status + " message = " + request.responseText + " error = " + error); // 실패 시 처리
					console.log("code = "+ request.status + " message = " + request.responseText + " error = " + error);
				}
			});
			
		}
	}

 

 

데이터 베이스에서 post값으로 받은 id와 동일한 메모를 삭제하고, 다시 모든 메모를 가져와 화면에 출력한다.

function ajax_memo_delete() {
			
			$this->_ajax_header();
			
			$id = $_POST['memo_id'];
			
            $this->load->model('Memo_m');
			$this->Memo_m->delete($id);
			
			$data = $this->_get_memo();
			
			$result = json_encode($data, JSON_UNESCAPED_UNICODE);
            echo $result;
		}

function delete($id) {
			$sql = "delete from memo where id=".$id;
			
            $this->db->query($sql);
		}