하이브리드앱, 웹앱을 만들기 위해 꼭 배워야할 강좌!
jQuery Mobile 기초부터 차근차근 배울 수 있는 동영상 강좌!
index.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Pinehead</h1>
</div>
<!-- /header -->
<div data-role="content">
<form id="myForm" method="post" action="results.php" data-transition="pop"
data-direction="reverse" />
<fieldset>
<div data-role="fieldcontain">
<label for="firstName">First name</label>
<input type="text" name="firstName" />
<input type="submit" value="Show my first name" />
</div>
</fieldset>
</div>
</form>
</body>
</html>
=====================================================================================================
results.php
<?php
$firstName = $_POST['firstName'];
?>
<!DOCTYPE html>
<html>
<head>
<title>Pinehead.tv Forms Part 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Pinehead</h1>
</div>
<!-- /header -->
<div data-role="content">
<?php echo "Your first Name is <strong>" . $firstName . "</strong>"; ?>
</div>
</body>
</html>
두 페이지를 만들어야 한다. 첫 페이지는 사용하는 스마트폰에 앱의 형태로 포팅되는 것이고, 두 번째 php 파일은 서버에 올려서
앱이 서버와 통신할 수 있도록 한다.
하이브리드앱 & 웹앱 공부 시작
끝.