Mobile Interface to CMS Based On HTML5 and Drupal: A Case Study

Mobile Interface to Content Management System
Based On HTML5 and Drupal: A Case Study
By Hima Javvadi
Email: himamurthy11@yahoo.com

More Devices
Economic Realities
High Consumers Expectations
Platform Independent
S
O
L
U
T
I
O
N
?

AIM
• Integrating Native Mobile Application - Drupal Site.
• Develop a Mobile Application – Client Side Scripting
Languages (HTML5,CSS,JS)
• Using PhoneGap

Front End
HTML5 ,JavaScript & CSS
(Phonegap)
Back End Database (MySQL)
Coding Language HTML5,CSS,JSON,PHP
Software Tools
Drupal, Android SDK,
Eclipse IDE, Wamp Server
Technology We Need

Developed - Web Hypertext Application Technology Working Group.
-It Build Cross-browser app for web and mobile.
HTML5 -Fifth major revision of the WWW

Richness of HTML5
     Highly Structured
     Browser Compatible
     Support  API
     -      Web sockets
     -      Geolocation
     -       SVG - Scalable Vector Graphics
DTD – Simplified -   <!DOCTYPE HTML>
     ENCODING -  <Meta Charset=“UTF-8”/>
   Tools
  Modernizer, Validation, OnlineEditor,
CodeBuilder etc.
Used Standard Algorithm

Platform Independent
-Same Every Were
-All API – Build Blocks
-Programing Platform

 Open source platform
 Create cross-platform
 HTML, JavaScript, and CSS
 Support Native application
 Phonegap apps just web pages
that access device function.
 Image loads from the device
AP PhoneGap

PhoneGap API Support Most of the Devices

 Compatible All Major Mobile Platforms
 Provides uniform UI
 Touch-optimized web framework (JS Lib)
 Compatible with Mobile App Frame Work
 Its lightweight code to built
jQuery mobile

• JSON- Java Script Object Notation
• lightweight data-Interchange format
• JSON -language independent
• Uses conventions that are familiar to
programmers of the C-family of languages.
JSON- Ideal Data-Interchange Language.

Drupal CMS Benefits
Drupal is often one of the first choices when building a new website.
•Administer
•Build Content
•Collaborate
•Connect
•Create
•Design & Display
•Extend
•Organize & Find
http://www.whitehouse.gov/ -US
www.ubuntu.com

To Process Data from Mobile Device to Drupal Site
•DrupalGap - tyler.frankenstein
•View
•Services
•REST Service-NODE
•Fire Fox Debugging
Connect to the mobile device.
What to do in Drupal CMS?

Enable Service MODULE -REST Server
• Download SPYC:
Services sub module -'REST Server’
sites/all/modules/services
• REST - Integrate External Application - Drupal.
• Service callbacks used multiple interfaces like REST,
XMLRPC, JSON, JSON-RPC,SOAP,AMF, etc.
• Edit the Resources – Enable Section Authentication in
Service .

Select Server: REST Server
Service > Resources &
Select the required Fields
REST Server Setting

• It will test our 'System -> Connect' resource.
Open up the Poster plugin for Firefox:
 URL: http://localhost/my_drupal_site/?
q=my_services/system/connect.json
 Content Type: application/x-www-form-urlencoded
 Actions: POST
 Once you fill out the 'URL' and 'Content Type' fields, click the
'POST' button in the 'Actions' section. A Response window with a
status of '200 OK' should show up if everything worked
correctly. You should get a JSON response
POSTER plugin in Firefox

Schools / University / Institutions
User can (Staff/Admin) –
-View
-Edit
-Update
-Retrieve
Mobile Application Drupal Site
Update Content from Mobile and View It on Site to

http://drupal.org/node/1423558
http://www.tylerfrankenstein.com/code/android-app-with-drupal-7-services-
phonegap-and-jquery-mobile
http://www.tylerfrankenstein.com/code/android-app-with-drupal-7-services-
phonegap-and-jquery-
mobilehttp://wiki.phonegap.com/w/page/30862722/phonegap-android-
eclipse-quickstart
http://api.drupal.org/api/drupal/includes!database!
database.inc/function/db_select/7
http://stackoverflow.com/questions/2727763/communication-between-
android-java-and-phonegap-javascript
http://drupal.org/documentation
http://www.socialtechnologyreview.com/articles/drupal-advantages-and-
disadvantages-choosing-drupal-your-cms-solution
http://www.w3schools.com/html5/default.asp
http://jquerymobile.com/demos/1.1.0-rc.1/
http://drupal.org/node/1423558
S Reference Links

NCES
T.K.Hema Priya 1 –hemabe26@gmail.com
&
J. Hima 2 - himamurthy11@yahoo.com
B.E. Computer Science and Engineering (2008-2012)
R.M.K. Engineering College
M. Somasundaram 3 - mss.cse@rmkec.ac.in
Professor, Department of Computer Science and Engineering ,
R.M.K. Engineering College, Kavaraipettai, India.
S.P.Karthikeyan 4 - Scientist-E / Technical Director, Open
Technology Centre,
National Informatics Centre, Chennai, India karthy@nic.in
The Authors Team

Mobile Interface to CMS Based On HTML5 and Drupal: A Case Study

Recommended

More Related Content

What's hot (14)

Viewers also liked (16)

Similar to Mobile Interface to CMS Based On HTML5 and Drupal: A Case Study (20)

Recently uploaded (20)

Mobile Interface to CMS Based On HTML5 and Drupal: A Case Study

Editor's Notes