OpenSolaris는 운영 체제(OS)이자 오픈 소스 프로젝트이며 커뮤니티입니다. 프로젝트의 목표는 썬을 완벽하게 지원하며 테스트된 엔터프라이즈 운영 체제인 솔라리스 OS와 같은 OpenSolaris 기술의 혁신, 협력 및 확장이며 OpenSolaris 릴리스의 개발 및 배포 참여입니다. 최근 OpenSolaris 오픈 소스 프로젝트는 OpenSolaris 2008.05 live CD 운영 체제를 출시했습니다.
CD에는 코어 운영 체제, 커널, 시스템 라이브러리, 데스크탑 환경 그리고 IPS(Image Packaging System)라고 하는 공용 리포지토리 기반 패키지 관리 시스템이 포함되어 있습니다. IPS를 사용하여 최신 버전의 Apache 웹 서버, MySQL 데이터베이스, PHP 엔진, 코드 샘플, 데스크탑 도구 및 사용자 인터페이스 기능을 추가한 Web Stack 패키지와 같은 코드 패키지를 포함한 운영 체제를 확장할 수 있습니다.
"webstackui" Web Stack 패키지에는 PHP, mySQL 및 jMaki를 사용하는 간단한 웹 애플리케이션이 코드 샘플로 포함되어 있습니다. 이 팁은 해당 애플리케이션을 설명합니다. 애플리케이션은 OpenSolaris 기술을 사용한 PHP 애플리케이션의 개발이 상대적으로 쉽다는 것을 강조합니다. OpenSolaris OS에서 샘플을 실행하지만 Apache, MySQL, PHP(AMP) 소프트웨어 스택을 탑재한 리눅스, Mac OS 또는 Windows 운영 체제에서도 실행됩니다.
팁에서는 사용자가 PHP 및 mySQL의 기초에 익숙하다고 가정합니다. jMaki 프레임워크는 CSS, HTML 및 JavaScript 등의 표준 기반 기술을 사용하는 Web 2.0 애플리케이션을 생성하기 위한 경량 프레임워크입니다. 프레임워크는 JSP(JavaServer Pages) 환경, JSF(JavaServer Faces) 환경, jRuby 또는 PHP 등의 서버 환경에서도 사용할 수 있습니다. jMaki에 대해서는 2007년 1월 27일자 테크팁 jMaki 소개를 참조하십시오.
샘플 애플리케이션
무엇보다 자바 기술, PHP 또는 Phobos 개발자들에게 익숙한 방식으로 Dojo, Yahoo, script.aculo.us, Google과 같은 인기 있는 JavaScript 툴킷의 위젯을 사용할 수 있다는 점이 jMaki 프레임워크의 가장 큰 매력입니다. 이들 위젯은 게시/구독 이벤트 메커니즘 위에 구축된 jMaki Glue라는 메커니즘을 통해 jMaki 프레임워크 내에서 통신합니다. 2008년 4월 15일자 테크팁 jMaki 이벤트 처리 방법에서는 jMaki Glue를 다루며 몇 가지 작업 예를 보여주었습니다. 이제 한 단계 나아가 jMaki 위젯이 백엔드 로직과 통신하는 방법을 보여주고자 합니다. 특히 다음을 수행하는 간단한 PHP 웹 애플리케이션을 만들어 보겠습니다.
- 제품 테이블이라는 하나의 테이블을 포함하는 MySQL 데이터베이스 생성.
- 사용자가 제품에 필요한 값을 입력할 수 있는 HTML 양식 제공.
- 데이터베이스의 제품 목록을 표시하는 jMaki Yahoo 테이블 위젯 사용.
- 사용자가 제품 추가를 위해 클릭할 수 있는 jMaki 버튼 위젯 사용. 이 작업은 데이터베이스의 새 컨텐츠를 반영하도록 MySQL 제품 테이블과 표시된 Yahoo 테이블에 새 항목을 추가합니다.
그림 1은 애플리케이션이 사용자에게 표시하는 화면을 보여줍니다. 제품 테이블과 제품 추가 버튼이 보입니다.
 |
|
그림 1. 제품 테이블과 제품 추가 버튼을 표시하는 웹 페이지 |
그림 2는 애플리케이션이 사용자가 제품 정보를 입력하고 제품 추가 버튼을 클릭한 후에 표시하는 화면을 보여줍니다.
 |
|
그림 2. 제품 테이블에 제품 추가 |
애플리케이션의 주요 구성요소를 살펴보겠습니다.
MySQL 데이터베이스 구성
MySQL 데이터베이스 액세스를 위해 애플리케이션의 모든 PHP 파일은 dbname.php라는 스크립트를 사용합니다. 스크립트는 데이터베이스 이름과 데이터베이스 액세스를 위한 자격 증명을 지정한 다음, 데이터베이스에 연결합니다. 서버에서 MySQL 서버가 시작되었다고 가정합니다.
다음은 dbname.php 스크립트입니다.
<?php
$username="root";
$password="";
$database="phpwebstacksample";
$dbhost="localhost";
$mysql_connection = mysql_connect($dbhost, $username, $password);
if (!$mysql_connection)
{
die('Could not connect: ' . mysql_error());
}?>
데이터베이스 이름은 phpwebstacksample이며 사용자 이름은 root입니다. 비밀번호는 없습니다. 변수 $mysql_connection은 올바른 데이터베이스 연결을 나타내며 다른 PHP 파일에서 데이터베이스 연결을 위해 사용됩니다.
설치 스크립트
애플리케이션이 처음 실행되며 데이터베이스가 존재하지 않을 경우, 설치 스크립트 setup.php가 사용됩니다. 스크립트는 간단한 데이터베이스를 생성하고 데이터베이스 내에 products 테이블을 생성합니다. 스크립트 시작 부분에 MySQL 데이터베이스 액세스를 위해 dbname.php 스크립트가 포함됩니다.
다음은 setup.php 스크립트입니다(일부 코드 줄은 페이지 너비 제한에 맞춰 나뉘었음).
include("dbname.php");
// 데이터베이스 생성
if (mysql_query("CREATE DATABASE phpwebstacksample",$mysql_connection))
{
echo "Database created";
}
else
{
echo "Error creating database: " . mysql_error();
}
// my_db 데이터베이스에 테이블 생성
mysql_select_db($database, $mysql_connection);
$query="CREATE TABLE products (
id int(6) NOT NULL auto_increment,
name varchar(15) NOT NULL,
category varchar(20) NOT NULL,
price varchar(20) NOT NULL,
PRIMARY KEY (id),
UNIQUE id (id),
KEY id_2 (id))";
mysql_query($query,$mysql_connection);
mysql_close($mysql_connection);
echo "<br><br><br>Go back to the main index page to
<a href=\"index.php\">run the application ...</a>";?>
기본 페이지
애플리케이션의 기본 페이지인 index.php는 데이터베이스 연결, Ajax 지원 Yahoo 테이블 위젯의 데이터베이스 컨텐츠를 표시하기 위한 HTML 양식 표시, 데이터베이스에 새 제품을 추가하는 버튼 표시를 책임집니다. 버튼은 Ajax 지원 jMaki 버튼입니다. 애플리케이션은 버튼과 표시된 테이블 사이의 통신을 가능하게 하기 위해 jMaki Glue를 사용합니다.
사용자가 제품 추가 버튼을 클릭하면 MySQL 테이블에 새 항목을 삽입하는 서버측 PHP 함수가 호출됩니다. 또한 jMaki 이벤트가 게시됩니다. jMaki Yahoo 테이블 위젯은 이벤트를 사용하며 전체 페이지를 재로드하지 않고 표시된 테이블에 새 행을 삽입합니다. 이는 페이지의 일부를 비동기적으로 새로 고치기를 할 수 있는 Ajax의 능력을 보여줍니다. 또한 통신을 위해 한 페이지에 여러 위젯을 사용할 수 있는 jMaki Glue 메커니즘도 보여줍니다.
PHP 스크립트 내에서 jMaki PHP 위젯을 사용하기 전에 페이지 시작 부분에 다음 PHP 문을 삽입해야 합니다.
<?php require_once 'Jmaki.php'; ?>
그런 다음, addWidget(...) 함수를 호출하여 위젯을 추가할 수 있습니다. 색인 페이지에는 두 개의 위젯이 있으므로 두 개의 addWidget(...) 함수 호출이 포함됩니다.
다음은 index.php의 코드입니다(일부 코드 줄은 페이지 너비 제한에 맞춰 나뉘었음).
<?php require_once "Jmaki.php"; ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Web Stack Sample Application</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php
require_once("dbname.php");
if ( !mysql_select_db($database, $mysql_connection) ) {
echo "<br><br><br>The database for this sample does not exist.
<a href=\"setup.php\"> Click on the initialization link...</a>;
exit();
}
?>
// 3개의 필드 즉, 이름(Product Name), 범주(Product Category), 제품의 가격(Product Price) 필드를 갖는 HTML 양식을 작성하십시오.
<br>Using the following form, you can add products that will be inserted in
a MySql database, and displayed using jMaki Ajax framework in the table below.<br>
<br><br>
<form action="#" >
Product Name : <input id="name" name="name" type="text"><br>
Product Category :<input id="category" name="category" type="text"><br>
Product Price : <input id="price" name="price" type="text"><br>
</form>
<?php addWidget( array("name" => "yahoo.button",
"value" => "{ label : 'add a product' }"
));
?gt;
<br>
// MySQL 데이터베이스 테이블의 컨텐츠를 표시하는 Ajax jMaki 테이블 생성:
// 서비스 매개 변수가 ListProducts.php PHP 스크립트 호출
// 이 서비스는 MySQL 테이블의 컨텐츠를 jMaki 테이블에서
// 사용 가능한 JSON 형식으로 내보냄
<?php
echo "<b><center>List of Products:</center></b><br><br>";
addWidget( array( "name" => "yahoo.dataTable",
"args"=> "{columns : [
{ 'label' : 'name', 'id' : 'name'},
{ 'label':'category', 'id' : 'category'},
{ 'label': 'price ', 'id' : 'price'}
]}",
"service"=>"listProducts.php"
)
);
?>
</body>
</html>
버튼 작업의 작동 방법에 대해 자세히 알아보려면 jMaki Glue 파일 섹션을 참조하십시오. 버튼 클릭 작업과 관련된 Glue 파일의 코드 일부는 다음과 같습니다.
jmaki.subscribe("/yahoo/button/onClick", function(args) ...
사용자가 jMaki 버튼을 클릭하면 /yahoo/button/onClick이라는 jMaki 이벤트가 jMaki 이벤트 처리 메커니즘에 전송되며 그런 다음, jMaki Glue 파일에 지정된 콜백이 실행됩니다.
제품 목록 스크립트
제품 목록 스크립트 lisProducts.php는 제품 테이블의 컨텐츠를 가져올 책임이 있습니다. 스크립트는 다음과 같이 JSON(JavaScript Object notation) 형식의 행 항목 콜렉션으로 컨텐츠를 반환합니다.
[
name: 'value1', category: 'value2', price: 'value3'},
name: 'value1', category: 'value2', price: 'value3'},
name: 'value1', category: 'value2', price: 'value3'},
name: 'value1', category: 'value2', price: 'value3'},
...
]
본질적으로 listProduct.php는 JSON 형식의 데이터를 브라우저로 반환하는 웹에서 사용 가능한 서비스입니다. index.php 페이지에 정의된 jMaki Yahoo 테이블 위젯은 이 형식으로 반환된 데이터를 표시할 수 있습니다.
다음은 lisProducts.php 스크립트입니다.
<?php
require_once("dbname.php");
if ( !mysql_select_db($database, $mysql_connection) ) {
?>
<p>The database for this sample does not exist.</p>
<p>Please, run the <a href="setup.php>setup page.</a></p>
<?php
exit();
}
@mysql_select_db($database);
$query="SELECT * FROM products";
$result=mysql_query($query);
$num=mysql_numrows($result);
mysql_close();
?>
<?php
$i=0;
echo "{'rows' : [";
while ($i < $num) {
$name=mysql_result($result,$i,"name");
$category=mysql_result($result,$i,"category");
$price=mysql_result($result,$i,"price");
echo
"{ name: '".$name ."' , category :'".$category."', price :'".$price ."'}";
if ($i != $num -1)
echo ",";
++$i;
}
echo "]}";
?>
제품 추가 스크립트
사용자가 기본 페이지에서 제품 추가 버튼을 클릭하면 add.php라는 스크립트가 호출됩니다. 스크립트는 데이터베이스에 연결하고 추가할 새 데이터를 게시합니다. 스크립트는 glue.js 스크립트 파일에 정의된 버튼 콜백 함수에 있습니다.
다음은 add.php 스크립트입니다.
<?php
include("dbname.php");
mysql_connect($dbhost,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$name=$_POST["name"];
$category=$_POST["category"];
$price=$_POST["price"];
$query = "INSERT INTO products VALUES ('','$name','$category','$price')";
mysql_query($query);
mysql_close();
echo "value added";
?>
jMaki Glue 파일
마지막으로 애플리케이션의 일부를 "부착"하는 jMaki Glue 파일 glue.js를 검토하겠습니다. jMaki Glue 파일은 jMaki 게시/구독 메커니즘의 가시적인 부분입니다. jMaki 게시/구독 메커니즘에 대한 자세한 내용은 2008년 4월 15일자 테크팁 jMaki 이벤트 처리 방법 및 jMaki Glue 문서를 참조하십시오.
사용자가 제품 추가 버튼을 클릭하면 jMaki 버튼 위젯은 /yahoo/button/onClick이라는 항목에 이벤트를 게시합니다. /yahoo/button/onClick 항목을 구독하는 glue.js 파일의 리스너는 MySQL 데이터베이스에 새 데이터를 삽입하기 위해 add.php 서버측 스크립트를 호출합니다. 이를 위해 리스너는 비동기적으로 실행되는 jmaki.doAjax 함수를 호출합니다. 함수는 서버 URL(add.php)과 추가할 컨텐츠인 이름, 범주 및 가격(모두 기본 페이지에 있는 양식의 항목 필드임)을 지정합니다.
또한 jmaki.doAjax 함수는 콜백 함수도 지정합니다. add.php 스크립트는 데이터베이스에 데이터를 성공적으로 삽입한 후에 콜백 함수를 호출합니다. 콜백 함수는 jMaki Yahoo 테이블에 새 행을 추가하기 위해 /yahoo/dataTable/addRow라는 항목에 새 이벤트를 게시합니다. 이 작업은 데이터베이스에 삽입된 새 데이터로 테이블을 업데이트합니다.
다음은 glue.js 파일입니다.
// 로거를 시작하기 위해 주석 표시를 지움
jmaki.debug = false;
// 게시/구독 메시지를 보여주기 위해 주석 표시를 지움
jmaki.debugGlue = false;
// 제품 추가 버튼을 위한 맵 항목
jmaki.subscribe("/yahoo/button/onClick", function(args) {
// 양식의 3개 필드 값 가져오기
var name= document.getElementById("name").value;
var category= document.getElementById("category").value;
var price= document.getElementById("price").value;
// 정확한 매개 변수를 사용하여 서버측 로직에 대해 ajax 요청 수행
jmaki.doAjax({
url : "add.php", // add.php URL 호출
method : "POST",
content: {
name : name,
category : category,
price : price
},
callback: function(req) {
// 이 콜백에서는 로컬 jMaki 테이블에 새 행 추가
if (jmaki.trim(req.responseText) == "value added")
jmaki.publish ('/yahoo/dataTable/addRow',
{
value: {
name : name,
category : category,
price : price
}
}
);
else
alert ("error adding a row: "+req.responseText);
}
});
});
요약
PHP 엔진, Apache 웹 서버, MySQL 데이터베이스를 포함하는 OpenSolaris 2008.05가 제공하는 완전 통합 소프트웨어 스택에 jMaki Ajax 프레임워크를 추가하면 확장성이 뛰어난 운영 체제의 힘과 Ajax 기술의 풍부한 기능을 결합시켜 최신의 Web 2.0 유형 동작을 제공하는 웹 애플리케이션을 개발할 수 있습니다. jMaki 프레임워크는 서버측 PHP 페이지 표현과 JavaScript의 복잡성을 감춥니다.
추가 자료
저자 정보
Ludovic Champenois(ludo)는 썬 마이크로시스템즈의 주요 엔지니어입니다. 그는 현재 개발자 경험과 도구 통합에 중점을 둔 OpenSolaris WebStack(AMP)과 자바 EE GlassFish 애플리케이션을 설계하고 있습니다.
이 글의 영문 원본은
Using jMaki With PHP on OpenSolaris
에서 보실 수 있습니다.
"Java EE" 카테고리의 다른 글
- JAX-WS 핸들러 구성, 패키징, 배치하기 (댓글 2개 / 트랙백 0개) 2006/10/19
- Enterprise Bean에서 보안 주석 사용하기 (댓글 4개 / 트랙백 0개) 2007/05/28
- 엔터프라이즈용 Java Application Verification Kit, 2부 (댓글 1개 / 트랙백 0개) 2005/10/05
- Java Persistence를 최상으로 구현하는 방법 (댓글 12개 / 트랙백 0개) 2007/07/23
- SAAJ 소개 (댓글 1개 / 트랙백 0개) 2005/06/08
- 커스텀 ELResolver를 이용하여 통합 EL 확장하기 (댓글 4개 / 트랙백 0개) 2006/10/19
- JAX-WS를 이용한 웹 서비스 개발 (댓글 1개 / 트랙백 0개) 2006/01/18
- JAXR (JAVA API FOR XML REGISTRIES) (댓글 1개 / 트랙백 0개) 2005/05/18
- GlassFish에서 호출 흐름 모니터링하기 (댓글 3개 / 트랙백 0개) 2006/06/16
- Groovy, Grails, MySQL 및 Java Persistence API의 조합 (댓글 0개 / 트랙백 0개) 2008/08/20
댓글을 달아 주세요