Best Practices

Best Practices

Hi Guys,

Im learning JQM and playing with Parse.com to make a customer database.  This is the starting structure of my code which is working but I just wanted to ask if im doing things correctly at the moment or if anyone can give me some tips... 

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.         <title></title>
  6.         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />

  8.         <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
  9. <link rel="stylesheet" href="assets/css/main.css" />

  11.         <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  12. <script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
  14. <script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.0.min.js"></script>
  16. <script src="assets/js/jquery.toastmessage.js" type="text/javascript"></script>
  17. <link href="assets/css/jquery.toastmessage.css" rel="stylesheet" type="text/css" />
  18.   

  20.         <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  21.         <meta name="apple-mobile-web-app-capable" content="yes">

  23.         <link href="assets/images/apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon">
  24.         <link href="assets/images/apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon">
  25.         <link href="assets/images/apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon">
  26.         <link href="assets/images/apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon">

  28.         <link href="assets/images/apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
  29.         <link href="assets/images/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
  30.         <link href="assets/images/apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
  31.         <link href="assets/images/apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
  32.         <link href="assets/images/apple-touch-startup-image-1536x2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />`
  33.         <link href="assets/images/apple-touch-startup-image-1496x2048.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
  34.     </head>
  35.     <body>

  37. <!-- Blank Initial Page.  Jquery will change to either the Login Page or Home Page depending on User Login State -->
  38.         
  39. <div data-role="page" id="startPage">
  40.             <div data-role="content">
  41.             </div><!-- End Content -->
  42.         </div><!-- End startPage -->
  44. <div data-role="page" id="loginPage">
  45. <div data-role="header">
  46. <h1>Login</h1>
  47. </div><!-- End Header -->
  48. <div data-role="content">
  50. <form onSubmit="userLogin();" method="POST">
  51. <div data-role="fieldcontain">
  52. <label for="username" >Username:</label>
  53. <input type="text" name="username" id="username" />
  54. </div>    
  55. <div data-role="fieldcontain">
  56. <label for="password" >Password:</label>
  57. <input type="password" name="password" id="password" />
  58. </div>    
  59. <input id='btLogin' type="submit" name="Login" value="Login"/>
  60. </form>
  62. </div><!-- End Content -->
  63. </div><!-- End loginPage -->
  65. <div data-role="page" id="homePage">
  67. <div data-role="panel" id="pnlSettings">
  68.                 <h2>My Settings</h2>
  69.                 <button data-role="button" data-icon="bars" onclick="userLogout();">Log Out</button>
  70.             </div><!-- End Panel -->
  72.             <div data-role="header" data-position="fixed">
  73.                 <h1>INSITE touch</h1>
  74.                 <a href="#pnlSettings" data-icon="info" data-role="button" id="btSettings" >Settings</a>
  75.             </div><!-- End Header -->
  76.             <div data-role="content">
  77.                 <label for="search-basic" class="ui-hidden-accessible">Search Jobs:</label>
  78.                 <input type="search" name="search" id="search-basic" value="" placeholder="Search Jobs" />
  79.                 <br>
  80.                 <br>
  81.             </div><!-- End Content -->
  83.             <div data-role="footer" data-position="fixed">
  84.                 <div data-role="navbar">
  85.                     <ul>
  86.                         <li><a href="#page-CustomerList" data-role="button" data-icon="gear">Customers</a></li>
  87.                         <li><a href="#" onClick="createCustomer();" data-role="button" data-icon="bars">Jobs</a></li>
  88.                         <li><a href="#" onClick="showPartsList();" data-role="button" data-icon="gear">Parts</a></li>
  89.                     </ul>
  90.                 </div><!-- End NavBar -->
  91. </div><!-- End Footer -->
  92. </div><!-- End homePage -->
  95. <script type="text/javascript">
  97. Parse.initialize("of0fIcF9zlpGEwVVAUH7Sq10nwhvcGASDrwt4trU", "C8KLwbKPjzsBf4xCX0Z90hfkz6lvN0gXePHYadIp");
  98.   
  99. /*
  100. *
  101. * Check that the startPage has loaded and re-direct to either the #loginPage or #homePage
  102. * based on whether the user is logged into Parse
  103. *
  104. *
  105. * NOTE: this doesn't check other pages yet.  There might not be a need as Parse wont give
  106. * any data if not logged in.
  107. *
  108. */
  109.   
  110. $('#startPage').bind('pageshow', function() {
  112. var LoggedIn = Parse.User.current(); // * Get the current User state from Parse.
  114. if (LoggedIn) {
  115. $.mobile.changePage("#homePage"); // User logged in, go to #homePage
  116. } else {
  117. $.mobile.changePage("#loginPage"); // User not logged in, go to #loginPage
  118. }
  120. });
  122. /*
  123. * 
  124. * Authenticate against Parse. 
  125. *
  126. */
  128. function userLogin() {
  130. // Throw up a spinner message that we are checking login
  132. $.mobile.loading( 'show', {
  133. text: 'Authenticating Login',
  134. textVisible: true,
  135. theme: 'a',
  136. html: ""
  137. });
  139. // Attempt to log into Parse using supplied credentials.
  141. Parse.User.logIn($("#username").val(), $("#password").val(), {
  143. success: function(user) {
  145. // Successful login. 
  147. $.mobile.loading( 'hide' ); // Hide the Spinner
  148. $().toastmessage('showSuccessToast', "Login Successful!"); // Show Success Message
  149. $.mobile.changePage('#homePage'); // Change to #homePage
  151. },
  153. error: function(user, error) {
  154. // Unsuccessful login.
  155. $.mobile.loading( 'hide' ); // Hide the Spinner
  156. $().toastmessage('showSuccessToast', "Login Failed, Check your details.!"); // Show Failed Message
  158. }
  159. });
  160. };
  162. /* 
  163. *
  164. * Log Out Function.
  165. *
  166. * TODO: Check if Parse has a way of confirming logout was successful.
  167. *
  168. */
  169. function userLogout() {
  170. Parse.User.logOut(); // Call the Parse logout
  171. $().toastmessage('showSuccessToast', "Logout Successful!"); // Show Logout Successful message (currently assumed)
  172. $.mobile.changePage("#loginPage"); // Change to #loginPage
  173. }
  175. /*
  176. *
  177. * Customer Functions
  178. *
  179. */
  181. function showCustomers() { // Brings up all customers in the listview.
  183. var LoggedIn = Parse.User.current(); // * Get the current User state from Parse.
  185. if (LoggedIn) {
  187. $.mobile.changePage('#customerListPage');
  189. }
  190. }
  192. function CreateCustomer() { // Used to load up the create Customer Page.
  194. var LoggedIn = Parse.User.current(); // * Get the current User state from Parse.
  196. if (LoggedIn) {
  198. $.mobile.changePage('#createCustomerPage');
  200. }
  201. }
  203. function saveCustomer() { // Used to save the customer after user clicks save.
  205. var LoggedIn = Parse.User.current(); // * Get the current User state from Parse.
  207. if (LoggedIn) {
  209. // get values from form, validate and save.
  210. // If unsuccessful, throw up friendly error.  If successful, go customers list.
  212. }
  213. }
  215. function editCustomer() {
  217. }
  219. function updateCustomer() {
  221. }
  225. </script>
  226. </body>
  227. </html>