보시는 그대로입니다.

특히나 블로그하실때나 웹문서로 키워드강화하실때 꼭필요할겁니다.!

그냥 선택한 입력소스 (소설)중에서 하나 고르면 그 소설에 쓰인 단어들과 키워들을 알아서 적절히 섞어 태그로 만들어주는 그런역할이죠.

캡쳐에보이는건 "히든"탭인데, 블로그 html에 걍 넣으시면 실제 보이지않는 키워드 더미가 포스트내로 들어갑니다.

사용주소는 http://xiso.co.kr/create_keyword 이구요.

그래서!

XE회원여러분들 중에 필요하신분은 그냥 쓰시고, 또 테스트/피드백 해주실분 모집하려고합니다.

http://xiso.co.kr 홈피에서 "SNS로 로그인" 하시고 문의남겨주시면 권한넣어드리겠습니당.

 

자세한 개발이야기는 동영상 포함해서 블로그에 정리해두었습니다. 여긴 블로그 동영상이 안가져와지네요 ㅠ

http://blog.xiso.co.kr/220715955124

-------------------------------------------------------블로그에있는 글 가져온거.---------------------

angular.js

구글에서 내놓은 angular.js,
MVC패턴으로 자바스크립트를 이용해 비동기식으로 HTML문서를 조작할 수 있게 해주는 마법같은 프레임웍입니다.

특히나 1세대 하이브리드 앱 개발시에 웹뷰를 바로띄우면 속도가 느려 오프라인으로 html과 js,css,이미지가 다 동작하도록 제작하고 데이터만 ajax로 서버에서 받아오는 방식으로 개발할 때 반복되는 메뉴들 같은경우 include가 안되 일일이 js로 구현하거나 작은프로젝트는 그냥 파일마다 반복되는 내용을 다 집어넣곤 했었는데요...

실제로 개발에 사용하시려면 이래저래 실험도 해보고 잘만들어져있는 관련문서를 찾아가며 공부도 해보셔야 할 듯 합니다.
여기선 간단한 정의와 동작만 처리해보도록 하겠습니다.

ng-app, ng-controller

일단 angular가 동작하기위해선 특정 노드에 ng-app="appname" attribute가 정의되어야 합니다.

<div ng-app="appname"> </div>

같은 식이죠. 그리고 js에서 이렇게 선언합니다.

var app = angular.module('klorem', []);

실제 angular를 통해 데이터를 전송하고 받아오는 처리를 하기위해선 controller가 정의되어야합니다.
ng-app과 같은 노드에 정의해도 상관없어요.
controller는 angular의 $scope 를 통해 데이터를 처리하게됩니다.
일단 html에서 ng-app 와 ng-controller을 하나의 엘리먼트에 정의하고,

<div ng-app="appname" ng-controller="appnameCtrl"> </div>

그리고 js에서 다음처럼 처리해줍니다.

app.controller('appnameCtrl', ['$scope', '$http', function($scope, $http){ }]);

이제, 특정 폼데이터를 angular를 통해 전송하고 json으로 리턴받아 템플릿html을 include 한다음 데이터를 loop 돌려 출력해보는 과정을 아주 간단하게 빠르게 대충 적어볼게요.
데이터 전송과 리턴, 결과 정리 및 출력에 저는 generate 라는 function을 정의합니다.

app.controller('appnameCtrl', ['$scope', '$http', function($scope, $http){ $scope.help = false; $scope.error = false; $scope.errorMsg = ''; $scope.formData = { data1: 'test', data2: 'test2' }; $scope.generate = function(isValid) { if(isValid) { $http.post('JSONurl.php', $scope.formData). success(function(data, stat, headers, config){ console.log('SUCCESS', data, headers, config); $scope.error = false; $scope.result = data; }). error(function(data, stat, headers, config){ $scope.error = true; $scope.errorMsg = 'error !'; }); } else { $scope.error = true; $scope.errorMsg = 'form invalid !!'; } }; $scope.generate(true); $scope.$watch('formData', function(newVal, oldVal) { $scope.generate(true); }, true); }]);

대충 읽어보셔도되고,, 그냥 복사해서 data 부분과 $http.post("URL") 부분만 수정해보셔도됩니다.
음.. 설명하자면.. $scope에 generate 라는 함수를 정의하고, 함수에선 JSONurl.php 로 $scope.formData에 정의된 데이터를 전송, 콘솔에 로그를 찍고 $scope.result에 리턴받은 data를 저장합니다.

//jsonurl.php <?php $data = array(); $data['lines'][] = "A"; $data['lines'][] = "B"; echo json_decode($data); exit(); ?>

PHP쪽 소스는 DB에서 빼오시던.. 파일에서 빼오시던.. 저런식으로 데이터를 정의해주심됩니다.
json으로 뿌려주고 종료시키면 되죠. data배열의 lines 라는 키는 임의로 지정하시면됩니다.

그리고 템플릿이 되는 html파일은 다음과같이..

<p ng-repeat="line in result.lines track by $index">{{line}}</p>

끝. 쉽죠?
만약 위에 php소스에서 lines 라는 키를 바꾸셨다면 result.lines 부분을 같이 수정해주시면됩니다.
그리고 템플릿파일은 ng-include를 이용해 이렇게 호출하면됩니다.

<div ng-include="'templatefile.html'"></div>

실제로 만들어진 키워드 더미 생성기

솔직히 말씀드리면 위에서 정의한 예제는 저대로따라하면 동작안합니다.
이건 angular를 공부하시면서 잘 개념이 이해가안될때 필요한부분만 가져다 쓰시는 정도이고, 여기나온 예제로 0에서 100%까지 완성할 수는 없는거랍니다.
개발하시는 상황에 맞춰서 적절히 수정도하셔야하고, 그냥 여기예제는 "아 저런 구문을 쓰는구나, xiso는 저렇게쓰는구나" 정도만 보시면 되겠습니다.

저는 키워드 더미 생성기를 만들어 보았습니다.
사실 웹문서 무의미한 문장을 숨겨서 키워드를 강화하는 "얍삽한" 짓을 하기위한거긴 하지만.. (제블로그엔 안씁니다.)
한글 데이터를 기반으로 Lorem Ipsum을 제작하고 필요한 키워드를 섞는 방식입니다.

폼데이터가 변경될때 generate 함수가 변경된 데이터를 전송하고,
php에선 전송받은 데이터를 기반으로 문장을 생성해 json으로 뿌려줍니다.
그걸 p,ol,ul,dl,table 에따라 각각 만들어져있는 html템플릿을 ng-include를 통해 호출하고 뿌려주는방식이죠.