Site booking pentru mobil – Prima pagina

Continuam sa invatam impreuna cursul „Optimizare site pentru mobil” utilizand libraria jQuery Mobile Framework. Cursul este recomandat elevilor/studentilor si programatorilor incepatori sau nivel de cunostinte medii. In primul capitol am invatat bazele librariei jQuery Mobile: cum sa creeam o pagina simpla, sa creeam liste, linkuri, butoane si multe altele.

In capitolul 2 vom trece la practica si anume vom implementa impreuna un site de booking optimizat pentru mobil. Dupa cum se vede si in poza din dreapta avem antet, doua liste, subsol. Prima lista contine tipurile de cazare: hoteluri, pesiuni,vile si case, iar a doua functionalitatile site-ului si pagina de contact.

In acest exemplu insist mai mult pe functionalitatile site-ului de booking si nu pe design ( voi folosi temele implicite din jQuery Mobile) .

Functionalitati

  1. Listare cazare dintr-o categorie sau/si oras
  2. Adaugare cazare
  3. Rezervare
  4. Listare rezervari

1. Listare cazare dintr-o categorie sau/si oras

Pe prima pagina se va selecta tipul de cazare dorit, pe pagina urmatoare se va da clic pe orasul dorit , iar pe ultimul nivel se va apasa pe cazarea dorita. Dupa ce ai selectat cazarea va aparea un meniu cu taburi cu urmatoarele optiuni:

  1. Prezentare generala
  2. Localizare: embed cod din harta google, bing sau yahoo
  3. Contact

2. Adauga cazare

Va aparea un formular de adaugare cazare. Acest formular contine campurile din tabela de hotel . Pentru a adauga o cazare avem de completat urmatoarele campuri:

  • Denumire – camp text
  • Localitate – lista de selectie cu localitatile existente in tabela city
  • Stele/Margarete – lista de selectia
  • Descriere – camp/arie de text
  • Harta – camp/arie de text – se va insera coduk de harta google, yahoo, bing
  • Contact – camp text

In acest exemplu nu sunt validate campurile, daca doriti sa folositi in productie nu uitati de validari!!!

3. Rezervare

Formularul de rezervare a fost simplificat. Pentru inceput vom avea 4 campuri de completat:

  • Cazare – lista de selectie cu cazarile existente in tabela hotel
  • De la – camp text
  • Pana  la – camp text
  • Observatie – camp/arie de text

Informatiile din tabela se vor salva in tabela book.

In acest exemplu nu sunt validate campurile, daca doriti sa folositi in productie nu uitati de validari!!!

4. Lista rezervari

Se vor afisa rezervarile pentru toate cazarile in  ordine descrescatoare dupa data rezervarii. Pentru afisare se va folosi o lista. In acest moment nu exista paginare ce pentru un tutorial este okay, dar in practica este obligatorie.

Cod sursa


 <!DOCTYPE html>
<html>
<head>
  <title> Booking site - mobile version - learning purpose </title> 

<script type="text/javascript" src="/resources/js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="/resources/js/script.js"></script>
<script type="text/javascript" src="/resources/js/jquery.mobile-1.1.1.min.js"></script><script type="text/javascript">// <![CDATA[
document.createElement("article");     document.createElement("footer");     document.createElement("header");     document.createElement("hgroup");     document.createElement("nav");
// ]]></script></pre>
<div data-role="page" data-title="Booking site - mobile version" data-ajax="false">
<div data-role="header">
<h1>Cazare</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-theme="a">
	<li><a href="#">Hoteluri</a></li>
	<li><a href="#">Pensiuni</a></li>
	<li><a href="#">Vile</a></li>
	<li><a href="#">Case</a></li>
</ul>
<div class="list-space"></div>
<div class="list-space"></div>
<ul data-role="listview" data-theme="e">
	<li data-icon="false"><a href="#">Adauga cazare</a></li>
	<li data-icon="false"><a href="#">Rezerva cazare</a></li>
	<li data-icon="false"><a href="#">Lista rezervari</a></li>
	<li data-icon="false"><a href="#">Contact</a></li>
</ul>
<div class="list-space"></div>
</div>
<div data-role="footer">
<h4><a href="https://sandorkovacs84.wordpress.com/2012/04/25/optimizare-site-pentru-mobil-curs-nou/" target="sandor">
 Invata "Optimizare site pentru mobil"
</a></h4>
<h5>Tutorial realizat de
<a href="http://www.sandorkovacs.ro/" target="sandor">
 Sandor</a></h5>
</div>
</div>
<pre>

Tehnologii utilizate

Pentru realizarea site-ului de booking optimizat pentru mobil am folosit urmatoarele:

  1. CodeIgniter MVC
  2. jQuery
  3. jQuery Mobile
  4. standard  HTML5
  5. CSS3

Configurare proiect

Pentru a configura proiectul pe un server sau pe calculatorul local, avem de urmat pasii:

1. Configurare CodeIgniter

Pentru a configura framework-ul CodeIgniter avem de modificat 2 fisiere:

  • application/config/config.php:
    – url-ul

    <!--?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');<br ?-->
    /*
    |--------------------------------------------------------------------------
    | Base Site URL
    |--------------------------------------------------------------------------
    |
    | URL to your CodeIgniter root. Typically this will be your base URL,
    | WITH a trailing slash:
    |
    |	http://example.com/
    |
    | If this is not set then CodeIgniter will guess the protocol, domain and
    | path to your installation.
    |
    */
    $config['base_url']	= 'http://domeniultau.ro';
    
    /*
    |--------------------------------------------------------------------------
    | Index File
    |--------------------------------------------------------------------------
    |
    | Typically this will be your index.php file, unless you've renamed it to
    | something else. If you are using mod_rewrite to remove the page set this
    | variable so that it is blank.
    |
    */
    $config['index_page'] = '';
    
    /*
    |--------------------------------------------------------------------------
    | URI PROTOCOL
    |--------------------------------------------------------------------------
    |
    | This item determines which server global should be used to retrieve the
    | URI string.  The default setting of 'AUTO' works for most servers.
    | If your links do not seem to work, try one of the other delicious flavors:
    |
    | 'AUTO'			Default - auto detects
    | 'PATH_INFO'		Uses the PATH_INFO
    | 'QUERY_STRING'	Uses the QUERY_STRING
    | 'REQUEST_URI'		Uses the REQUEST_URI
    | 'ORIG_PATH_INFO'	Uses the ORIG_PATH_INFO
    |
    */
    $config['uri_protocol']	= 'AUTO';
    
    /*
    |--------------------------------------------------------------------------
    | URL suffix
    |--------------------------------------------------------------------------
    |
    | This option allows you to add a suffix to all URLs generated by CodeIgniter.
    | For more information please see the user guide:
    |
    | http://codeigniter.com/user_guide/general/urls.html
    */
    
    $config['url_suffix'] = '';
    
    /*
    |--------------------------------------------------------------------------
    | Default Language
    |--------------------------------------------------------------------------
    |
    | This determines which set of language files should be used. Make sure
    | there is an available translation if you intend to use something other
    | than english.
    |
    */
    $config['language']	= 'english';
    
    /*
    |--------------------------------------------------------------------------
    | Default Character Set
    |--------------------------------------------------------------------------
    |
    | This determines which character set is used by default in various methods
    | that require a character set to be provided.
    |
    */
    $config['charset'] = 'UTF-8';
    
    /*
    |--------------------------------------------------------------------------
    | Enable/Disable System Hooks
    |--------------------------------------------------------------------------
    |
    | If you would like to use the 'hooks' feature you must enable it by
    | setting this variable to TRUE (boolean).  See the user guide for details.
    |
    */
    $config['enable_hooks'] = FALSE;
    
    /*
    |--------------------------------------------------------------------------
    | Class Extension Prefix
    |--------------------------------------------------------------------------
    |
    | This item allows you to set the filename/classname prefix when extending
    | native libraries.  For more information please see the user guide:
    |
    | http://codeigniter.com/user_guide/general/core_classes.html
    | http://codeigniter.com/user_guide/general/creating_libraries.html
    |
    */
    $config['subclass_prefix'] = 'MY_';
    
    /*
    |--------------------------------------------------------------------------
    | Allowed URL Characters
    |--------------------------------------------------------------------------
    |
    | This lets you specify with a regular expression which characters are permitted
    | within your URLs.  When someone tries to submit a URL with disallowed
    | characters they will get a warning message.
    |
    | As a security measure you are STRONGLY encouraged to restrict URLs to
    | as few characters as possible.  By default only these are allowed: a-z 0-9~%.:_-
    |
    | Leave blank to allow all characters -- but only if you are insane.
    |
    | DO NOT CHANGE THIS UNLESS YOU FULLY UNDERSTAND THE REPERCUSSIONS!!
    |
    */
    $config['permitted_uri_chars'] = 'a-z 0-9~%.:_\-';
    
    /*
    |--------------------------------------------------------------------------
    | Enable Query Strings
    |--------------------------------------------------------------------------
    |
    | By default CodeIgniter uses search-engine friendly segment based URLs:
    | example.com/who/what/where/
    |
    | By default CodeIgniter enables access to the $_GET array.  If for some
    | reason you would like to disable it, set 'allow_get_array' to FALSE.
    |
    | You can optionally enable standard query string based URLs:
    | example.com?who=me&what=something&where=here
    |
    | Options are: TRUE or FALSE (boolean)
    |
    | The other items let you set the query string 'words' that will
    | invoke your controllers and its functions:
    | example.com/index.php?c=controller&m=function
    |
    | Please note that some of the helpers won't work as expected when
    | this feature is enabled, since CodeIgniter is designed primarily to
    | use segment based URLs.
    |
    */
    $config['allow_get_array']		= TRUE;
    $config['enable_query_strings'] = FALSE;
    $config['controller_trigger']	= 'c';
    $config['function_trigger']		= 'm';
    $config['directory_trigger']	= 'd'; // experimental not currently in use
    
    /*
    |--------------------------------------------------------------------------
    | Error Logging Threshold
    |--------------------------------------------------------------------------
    |
    | If you have enabled error logging, you can set an error threshold to
    | determine what gets logged. Threshold options are:
    | You can enable error logging by setting a threshold over zero. The
    | threshold determines what gets logged. Threshold options are:
    |
    |	0 = Disables logging, Error logging TURNED OFF
    |	1 = Error Messages (including PHP errors)
    |	2 = Debug Messages
    |	3 = Informational Messages
    |	4 = All Messages
    |
    | For a live site you'll usually only enable Errors (1) to be logged otherwise
    | your log files will fill up very fast.
    |
    */
    $config['log_threshold'] = 0;
    
    /*
    |--------------------------------------------------------------------------
    | Error Logging Directory Path
    |--------------------------------------------------------------------------
    |
    | Leave this BLANK unless you would like to set something other than the default
    | application/logs/ folder. Use a full server path with trailing slash.
    |
    */
    $config['log_path'] = '';
    
    /*
    |--------------------------------------------------------------------------
    | Date Format for Logs
    |--------------------------------------------------------------------------
    |
    | Each item that is logged has an associated date. You can use PHP date
    | codes to set your own date formatting
    |
    */
    $config['log_date_format'] = 'Y-m-d H:i:s';
    
    /*
    |--------------------------------------------------------------------------
    | Cache Directory Path
    |--------------------------------------------------------------------------
    |
    | Leave this BLANK unless you would like to set something other than the default
    | system/cache/ folder.  Use a full server path with trailing slash.
    |
    */
    $config['cache_path'] = '';
    
    /*
    |--------------------------------------------------------------------------
    | Encryption Key
    |--------------------------------------------------------------------------
    |
    | If you use the Encryption class or the Session class you
    | MUST set an encryption key.  See the user guide for info.
    |
    */
    $config['encryption_key'] = 'djsaidjioas^&^&*dshahdusadsahhdusua&*(';
    
    /*
    |--------------------------------------------------------------------------
    | Session Variables
    |--------------------------------------------------------------------------
    |
    | 'sess_cookie_name'		= the name you want for the cookie
    | 'sess_expiration'			= the number of SECONDS you want the session to last.
    |   by default sessions last 7200 seconds (two hours).  Set to zero for no expiration.
    | 'sess_expire_on_close'	= Whether to cause the session to expire automatically
    |   when the browser window is closed
    | 'sess_encrypt_cookie'		= Whether to encrypt the cookie
    | 'sess_use_database'		= Whether to save the session data to a database
    | 'sess_table_name'			= The name of the session database table
    | 'sess_match_ip'			= Whether to match the user's IP address when reading the session data
    | 'sess_match_useragent'	= Whether to match the User Agent when reading the session data
    | 'sess_time_to_update'		= how many seconds between CI refreshing Session Information
    |
    */
    $config['sess_cookie_name']		= 'ci_session';
    $config['sess_expiration']		= 7200;
    $config['sess_expire_on_close']	= FALSE;
    $config['sess_encrypt_cookie']	= FALSE;
    $config['sess_use_database']	= FALSE;
    $config['sess_table_name']		= 'ci_sessions';
    $config['sess_match_ip']		= FALSE;
    $config['sess_match_useragent']	= TRUE;
    $config['sess_time_to_update']	= 300;
    
    /*
    |--------------------------------------------------------------------------
    | Cookie Related Variables
    |--------------------------------------------------------------------------
    |
    | 'cookie_prefix' = Set a prefix if you need to avoid collisions
    | 'cookie_domain' = Set to .your-domain.com for site-wide cookies
    | 'cookie_path'   =  Typically will be a forward slash
    | 'cookie_secure' =  Cookies will only be set if a secure HTTPS connection exists.
    |
    */
    $config['cookie_prefix']	= "";
    $config['cookie_domain']	= "";
    $config['cookie_path']		= "/";
    $config['cookie_secure']	= FALSE;
    
    /*
    |--------------------------------------------------------------------------
    | Global XSS Filtering
    |--------------------------------------------------------------------------
    |
    | Determines whether the XSS filter is always active when GET, POST or
    | COOKIE data is encountered
    |
    */
    $config['global_xss_filtering'] = FALSE;
    
    /*
    |--------------------------------------------------------------------------
    | Cross Site Request Forgery
    |--------------------------------------------------------------------------
    | Enables a CSRF cookie token to be set. When set to TRUE, token will be
    | checked on a submitted form. If you are accepting user data, it is strongly
    | recommended CSRF protection be enabled.
    |
    | 'csrf_token_name' = The token name
    | 'csrf_cookie_name' = The cookie name
    | 'csrf_expire' = The number in seconds the token should expire.
    */
    $config['csrf_protection'] = FALSE;
    $config['csrf_token_name'] = 'csrf_test_name';
    $config['csrf_cookie_name'] = 'csrf_cookie_name';
    $config['csrf_expire'] = 7200;
    
    /*
    |--------------------------------------------------------------------------
    | Output Compression
    |--------------------------------------------------------------------------
    |
    | Enables Gzip output compression for faster page loads.  When enabled,
    | the output class will test whether your server supports Gzip.
    | Even if it does, however, not all browsers support compression
    | so enable only if you are reasonably sure your visitors can handle it.
    |
    | VERY IMPORTANT:  If you are getting a blank page when compression is enabled it
    | means you are prematurely outputting something to your browser. It could
    | even be a line of whitespace at the end of one of your scripts.  For
    | compression to work, nothing can be sent before the output buffer is called
    | by the output class.  Do not 'echo' any values with compression enabled.
    |
    */
    $config['compress_output'] = FALSE;
    
    /*
    |--------------------------------------------------------------------------
    | Master Time Reference
    |--------------------------------------------------------------------------
    |
    | Options are 'local' or 'gmt'.  This pref tells the system whether to use
    | your server's local time as the master 'now' reference, or convert it to
    | GMT.  See the 'date helper' page of the user guide for information
    | regarding date handling.
    |
    */
    $config['time_reference'] = 'local';
    
    /*
    |--------------------------------------------------------------------------
    | Rewrite PHP Short Tags
    |--------------------------------------------------------------------------
    |
    | If your PHP installation does not have short tag support enabled CI
    | can rewrite the tags on-the-fly, enabling you to utilize that syntax
    | in your view files.  Options are TRUE or FALSE (boolean)
    |
    */
    $config['rewrite_short_tags'] = FALSE;
    
    /*
    |--------------------------------------------------------------------------
    | Reverse Proxy IPs
    |--------------------------------------------------------------------------
    |
    | If your server is behind a reverse proxy, you must whitelist the proxy IP
    | addresses from which CodeIgniter should trust the HTTP_X_FORWARDED_FOR
    | header in order to properly identify the visitor's IP address.
    | Comma-delimited, e.g. '10.0.1.200,10.0.1.201'
    |
    */
    $config['proxy_ips'] = '';
    
    /* End of file config.php */
    /* Location: ./application/config/config.php */
    
  • application/config/database.php:
    – nume server
    – nume baza de date
    – nume utilizator
    – parola utilizator

    <!--?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');<br ?-->/*
    | -------------------------------------------------------------------
    | DATABASE CONNECTIVITY SETTINGS
    | -------------------------------------------------------------------
    | This file will contain the settings needed to access your database.
    |
    | For complete instructions please consult the 'Database Connection'
    | page of the User Guide.
    |
    | -------------------------------------------------------------------
    | EXPLANATION OF VARIABLES
    | -------------------------------------------------------------------
    |
    |	['hostname'] The hostname of your database server.
    |	['username'] The username used to connect to the database
    |	['password'] The password used to connect to the database
    |	['database'] The name of the database you want to connect to
    |	['dbdriver'] The database type. ie: mysql.  Currently supported:
    				 mysql, mysqli, postgre, odbc, mssql, sqlite, oci8
    |	['dbprefix'] You can add an optional prefix, which will be added
    |				 to the table name when using the  Active Record class
    |	['pconnect'] TRUE/FALSE - Whether to use a persistent connection
    |	['db_debug'] TRUE/FALSE - Whether database errors should be displayed.
    |	['cache_on'] TRUE/FALSE - Enables/disables query caching
    |	['cachedir'] The path to the folder where cache files should be stored
    |	['char_set'] The character set used in communicating with the database
    |	['dbcollat'] The character collation used in communicating with the database
    |				 NOTE: For MySQL and MySQLi databases, this setting is only used
    | 				 as a backup if your server is running PHP < 5.2.3 or MySQL < 5.0.7
    |				 (and in table creation queries made with DB Forge).
    | 				 There is an incompatibility in PHP with mysql_real_escape_string() which
    | 				 can make your site vulnerable to SQL injection if you are using a
    | 				 multi-byte character set and are running versions lower than these.
    | 				 Sites using Latin-1 or UTF-8 database character set and collation are unaffected.
    |	['swap_pre'] A default table prefix that should be swapped with the dbprefix
    |	['autoinit'] Whether or not to automatically initialize the database.
    |	['stricton'] TRUE/FALSE - forces 'Strict Mode' connections
    |							- good for ensuring strict SQL while developing
    |
    | The $active_group variable lets you choose which connection group to
    | make active.  By default there is only one group (the 'default' group).
    |
    | The $active_record variables lets you determine whether or not to load
    | the active record class
    */
    
    $active_group = 'default';
    $active_record = TRUE;
    
    $db['default']['hostname'] = 'localhost';
    $db['default']['username'] = 'nume_utilizator';
    $db['default']['password'] = 'parola';
    $db['default']['database'] = 'nume_baza_de_date';
    $db['default']['dbdriver'] = 'mysql';
    $db['default']['dbprefix'] = '';
    $db['default']['pconnect'] = TRUE;
    $db['default']['db_debug'] = TRUE;
    $db['default']['cache_on'] = FALSE;
    $db['default']['cachedir'] = '';
    $db['default']['char_set'] = 'utf8';
    $db['default']['dbcollat'] = 'utf8_general_ci';
    $db['default']['swap_pre'] = '';
    $db['default']['autoinit'] = TRUE;
    $db['default']['stricton'] = FALSE;
    
    /* End of file database.php */
    /* Location: ./application/config/database.php */
    
    
  • adaugat fisierul .htaccess cu urmatorul cod, pentru a elimina index.php-ul din CodeIgniter:
    RewriteEngine on
    RewriteCond $1 !^(index\.php|images|resources|robots\.txt)
    RewriteRule ^(.*)$ /index.php/$1 [L]
    

    – Bineinteles trebuie sa ai activat modulul rewrite in Apache

  • create dosarul „resources” in folderul de root. Aici se vor copia fisierele CSS si JS, imaginile folosite pentru proiect.
    – 
    CSS-ul se va copia in folderul resources/css/
    – JS-ul se va copia in folderul resources/js/

Demo

Pentru capitolul 2 am creat un demo pe acest link: http://mbooking.sandorkovacs.ro

Bafta tuturor!

Anunțuri

O părere la “Site booking pentru mobil – Prima pagina”

Lasă un răspuns

Completează mai jos detaliile tale sau dă clic pe un icon pentru a te autentifica:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare / Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare / Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare / Schimbă )

Fotografie Google+

Comentezi folosind contul tău Google+. Dezautentificare / Schimbă )

Conectare la %s