Uploaded byHima Javvadi
Mobile Interface to CMS Based On HTML5 and Drupal: A Case Study
The document discusses a case study on integrating a mobile interface with a Drupal content management system using HTML5 and PhoneGap. It outlines the development process, technologies employed, and benefits of using Drupal for mobile applications, emphasizing cross-platform compatibility. Additionally, it provides instructions on enabling services and utilizing REST API for content management via mobile devices.
Mobile Interface to CMS Based On HTML5 and Drupal: A Case Study
- 1. Mobile Interface toContent Management System Based On HTML5 and Drupal: A Case Study By Hima Javvadi Email: himamurthy11@yahoo.com
- 2. More Devices Economic Realities HighConsumers Expectations Platform Independent S O L U T I O N ?
- 3. AIM • Integrating NativeMobile Application - Drupal Site. • Develop a Mobile Application – Client Side Scripting Languages (HTML5,CSS,JS) • Using PhoneGap
- 4. 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
- 5. Developed - Web Hypertext ApplicationTechnology Working Group. -It Build Cross-browser app for web and mobile. HTML5 -Fifth major revision of the WWW
- 6. Richness of HTML5 Highly Structured Browser Compatible Support API - Web sockets - Geolocation - SVG - ScalableVector Graphics DTD – Simplified - <!DOCTYPE HTML> ENCODING - <Meta Charset=“UTF-8”/> Tools Modernizer, Validation, OnlineEditor, CodeBuilder etc. Used Standard Algorithm
- 7. Platform Independent -Same EveryWere -All API – Build Blocks -Programing Platform
- 8. Open sourceplatform 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
- 9. PhoneGap API SupportMost of the Devices
- 10. Compatible AllMajor Mobile Platforms Provides uniform UI Touch-optimized web framework (JS Lib) Compatible with Mobile App Frame Work Its lightweight code to built jQuery mobile
- 11. • JSON- JavaScript 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.
- 12.
- 13. Drupal CMS Benefits Drupalis 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
- 14. To Process Datafrom 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?
- 15. 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 .
- 16. Select Server: RESTServer Service > Resources & Select the required Fields REST Server Setting
- 17. • It willtest 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
- 18. 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
- 19.
- 20.
- 21. 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
Editor's Notes
- #4 scripting languages (HTML5, JavaScript & CSS). Integrating the native mobile application with Drupal Site to provide easy access to the users in retrieving the information and to upload/view the contents in the Drupal site.
- #5 Take a time Heart of the project
- #6 Compatible Browser: Firefox version 3.5 Chrome, Safari, Microsoft’s ,IE 8 also Support .
- #8 Responsive Design -Ethan marcotte a web designer & developer, a speaker and author.
- #9 PhoneGap-compatible Javascript frameworks Dashcode - Framework from Apple (only for iPhone) NS Basic/App Studio - Full IDE, drag and drop designer including jQuery Mobile, program using Visual BASIC or JavaScript. The Dojo Toolkit - Flexible and extensible JavaScript framework WebApp.Net xUI - slimmed down jQuery work-alike
- #10 Support thousands of API PhoneGap™ Build API allows programmatic access to creating, building, updating and downloading PhoneGap apps, using the PhoneGap Build web service. It is designed for easy integration into IDEs, shell scripts, app builders, and anywhere else.
- #11 We developed native application using phonegap library files for android to integrate it with Drupal.
- #13 High Flexiable Native App – talk to your and Web Server
- #16 &apos;REST Server&apos; needs SPYC (a PHP YAML loader/dumper - &quot;YAML is a human friendly data serialization standard for all programming languages&quot;).
- #19 Drawback: -Only contents can be updated. -No database usage.