Playd8.mobi will be written using PHP, CodeIgniter, MySQL, and JQuery Mobile. I am hoping to compile it to iPhone and Android using PhoneGap, which was just acquired by Adobe.

The first place I want to start is to create a semi-to-non-functional prototype in JQuery Mobile and CodeIgniter. I downloaded the latest version of CodeIgniter, and uploaded it to my pathetic GoDaddy hosting account, which is so inexpensive that I don’t mind going without root access.

To get CodeIgniter running on GoDaddy Deluxe:

  • Per the CodeIgniter User Guide, modify the application/config/config.php file and set my base URL
  • Modify the application/config/database.php and put in your MySQL database credentials
  • Next, create a blank .htaccess file at the root directory of the CodeIgniter application.
  • Do not use the CodeIgniter User Guide’s .htaccess example. Instead, use this…

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) index.php?/$1

Next, I started to build my JQuery Mobile templates according to CodeIgniter’s Model-View-Controller design pattern. In the application/views directory I created a header and a footer. These will stay the same throughout my application.

application/views/header.php

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Playd8.mobi</title>
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css” />
<script src=”http://code.jquery.com/jquery-1.6.4.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js”></script>
</head>
<body>

application/views/footer.php

</body>
</html>

Next, I edited the welcome_message.php file and turned it into a JQuery Mobile page. I also added a link to a second JQuery Mobile page home.php for kicks.

application/views/welcome_message.php

<section id=”welcome” data-role=”page”>
<div data-role=”header”>
<h1>Welcome to Playd8.Mobi</h1>
</div><!– /header –>
<div data-role=”content”>
<p>We are psyched you are here!</p>
<p><a href=”/home/”>Go to the second page!</a></p>
</div><!– /content –>
<div data-role=”footer”>
<h4>&copy; Matt Reider 2011</h4>
</div><!– /footer –>
</section>

application/views/home.php

<section id=”home” data-role=”page”>
<header data-role=”header”>
<h1>Main Menu</h1>
</header>
<div class=”content” data-role=”content”>
<p>What’s up chicken butt?</p>
</div>
<div data-role=”footer”>
<h4>&copy; Matt Reider 2011</h4>
</div><!– /footer –>
</section>

Now we can edit the welcome and home controllers and test the application.

application/controllers/welcome.php

class Welcome extends CI_Controller {
public function index()
{
$this->load->view(‘header’);
$this->load->view(‘welcome_message’);
$this->load->view(‘footer’);
}
}

application/controllers/home.php

class Home extends CI_Controller {
public function index()
{
$this->load->view(‘header’);
$this->load->view(‘home’);
$this->load->view(‘footer’);
}
}

That’s that. Of course this is a really basic example of what can be done in JQuery Mobile.

The first page:

The second page:

I will be expanding on it as I get farther along on my little project.