Arhive categorie: Optimizare pentru mobil

Transforma site-ul WordPress in Mobile Friendly

Internetul mobil se extinde tot mai mult, asa incat 2016 este anul lumii dispozitivelor mobile. Asadar, pentru business-ul tau e imperativ ca site-ul WordPress sa fie optimizat si pentru dispozitive mobile, macar in anii urmatori.  

Asta deoarece, e vorba despre ceea ce clientul si utilizatorul are nevoie; acesta fiind si rolul principal al tehnologiei, de a imbunatati si usura munca si viata populatiei.

La fel ca si domeniul fashion, unde pentru a avea succes e necesar sa fii mereu in pas, aceeasi situatie se aplica si domeniului IT si business. Chiar daca nu esti IT-ist, ci doar ai un business online, e la fel de important sa tii pasul cu schimbarile pe care fiecare le aduce.

Plugin-ul WPtouch

WPtouch este unul dintre plugin-urile care te ajuta sa iti transformi site-ul WordPress intr-unul mobile friendly. Acesta, in mod automat adauga o tema simpla pentru vizitatorii dispozitivelor mobile ai site-ului tau WordPress.

Avand in vedere, ca WPtouch este recomandat de Google, o versiune mobile-friendly este autorizata care este verificata de Google Mobile si evalueaza clasamentul SEO pentru a se asigura ca nu scade datorita faptului ca nu site-ul nu este optimizat pentru dispozitive mobile.

In termeni de popularitate, plugin-ul este destul de folosit, avand peste 300.000 de instalari active si avand o nota de 3.5 stele din 5. Aceste numere sunt dovada eficientei plugin-ului, dar si necesitatii lui.

Cum functioneaza WPtouch?

Pastreaza tema site-ului web – WPtouch foloseste temele sale pentru vizitatorii dispozitivelor mobile, dar tema site-ului web nu se schimba. Mai mullt, continutul e acelasi.

Foloseste acelasi URL – Fiind un plugin pentru site-ul tau WordPress, WPtouch doar foloseste acelasi URL. Continutul se transforma pentru ecrane diferite dar ramane pe acelasi URL.

Google Mobile Friendly – WPtouch este o solutie recomandata de Google, iar aceasta functionalitate imbunatateste clasamentul cautarilor de pe dispozitive mobile.

Poti include sau exclude pagini – WPtouch iti da flexibilitate asupra site-ului mobil, astfel incat poti controla si schimba pagini, meniuri, in functie de ce consideri ca e potrivit pentru fiecare dispozitiv.

Daca iti doresti sa inveti cum sa devii programator WordPress, sau programator web, gasesti aici datele mele de contact!

Cum sa oferi o experienta placuta si utila utilizatorilor de dispozitive mobile

In orice business, clientii constituie unul dintre cei mai importanti factori. Motiv pentru care relatia pe care o construiesti cu acestia e vitala. O relatie business-client se cladeste in mare masura pe baza experientei, atat offline cat si online pe care o oferi.

In ceea ce priveste experienta online, aceasta e divizata in doua sectiuni: cea web si experienta mobila. Tot mai multi utilizatori folosesc dispozitivele mobile pentru a naviga internetul.

Asadar, pe langa configurare si instalarea de baza, o experienta placuta si utila pentru utilizatorii dispozitivelor mobile are trei parti esentiale: continut, viteza si layout. Pentru a te asigura ca utilizatorii raman interesati in business-ul tau, e necesar sa te asiguri ca aceste trei componente sunt facute ca la carte.

Continutul site-ului pentru dispozitive mobile

Personalizeaza, nu exclude

Utilizatorii chiar daca folosesc dispozitive mobile asteapta aceleasi functionalitati ale site-ului pe care le oferi si utilizatorilor desktop. Insemnand, ca daca vor sa se uite la anumite video-uri, sau sa cumpere anumite produse/ servicii sa fie posibil acest proces.

Asadar, nu taia parti importante ale site-ului tau, in schimb redimensioneaza-le astfel incat sa fie compatibile cu ecranurile mai mici.

Verifica fisierele media

Nu orice tip de fisier media este compatibil cu gama variata de ecrane; de exemplu flash video, care nu este compatibil cu prea multe dispozitive mobile.

Pentru a oferi o experienta placuta si utilizatorilor dispozitivelor mobile asigura-te ca fisierele media chiar functioneaza pe toate ecranele pe care trebuie.

Nu ascunde actiunile cheie

Cheia business-ului este prosperitate. Acest proces este posibil doar atunci cand utilizatorii actioneaza si devin clienti. Pentru a te asigura de aceste actiuni e necesar sa ai toate actiunile cheie la vedere, astfel incat utilizatorul unui dispozitiv mobil sa poata cumpara anumite produse sau servicii pe care business-ul tau le ofera.

De exemplu, pentru un business in retail e important sa ai bara pentru cautarea produselor dar si un cos de cumparaturi optimizat pentru dispozitive mobile.

Checkout-ul in pasi simpli

Sa completezi diferite formulare pe un dispozitiv mobil este destul de dificil. Pentru a mari conversiile site-ului tau, e recomandat sa simplifici procesul de plata pe cat de mult posibil.

Te poti folosi de Google Wallet Instant Buy, precum si alte servicii care permit clientilor sa plece usor avand plata si informatiile de livrare completate.

Nu afisa prea multe informatii/ elemente

Pe un dispozitiv mobil, mai multe elemente nu sunt neaparat cea mai buna solutie. In schimb, alege sa afisezi ceea ce este cu adevarat important. Mai mult, un site optimizat pentru mobil va functiona mai bine si se va incarca mai repede daca sunt mai putine elemente.

Layout-ul

Alege fontul potrivit

Fontul pentru un site web optimizat pentru dispozitive mobile e recomandat sa nu fie mai mic de 12 pixeli, asta deoarece utilizatorii vor ajunge sa se chinuie sa citeasca continutul site-ului tau.

In ceea ce priveste stilul fontului, alege unul simplu si care e usor de citit. Pe cat posibil incearca sa eviti textele de tip imagine.

Atentie la ecranul tactil

Majoritatea dispozitivelor mobile functioneaza prin ecran tactil. Pentru degetul uman 48 dp (density independent pixels) este minimul recomandat cu cel putin 8 dp intre semnale.

Ai nevoie de minimul de 48 dp pentru ca click-ul efectuat sa emita semnalul corespunzator, deoarece in cazul unui numar mai mic de dp e posibil ca click-ul sa nu fie perceput, iar acest lucru iti poate indeparta utilizatorii dispozitivelor mobile.

Evita mouse-overs

Pe un ecran desktop, mouse-overs este o tehnica eficienta de a-ti face o idee ce continut se ascunde in spatele unui buton, insa pentru ecranele dispozitivelor mobile lucrurile sunt diferite.

In primul rand, in cazul unui dispozitiv mobil nu exista mouse-ul, iar degetul uman nu poate functiona asemenea unui mouse. In al doilea rand, pentru un utilizator mobil acest proces ii poate ingreuna navigarea.

Asadar, evita mouse-overs si in schimb, foloseste butoane pentru a afisa continuturi ascunse.

Foloseste butoane descriptive

Pentru site-ul tau optimizat pentru dispozitivele mobile alege sa folosesti butoane descriptive. E mult mai simpla navigarea, iar utilizatorul stie exact care e pasul urmator in urma click-ului.

Evita folosirea pop-ups

Pop-up-urile sunt cunoscute in site-urile web, dar si in cazul anumitor site-uri optimizate pentru dispozitive mobile. Reputatia lor nu este tocmai una favorabila, intrucat sunt deranjate pentru aproape toti utilizatorii.

Seteaza latimea potrivita pentru dispozitive mobile

Pentru un utilizator desktop e normal si obisnuit sa navigheze o pagina web de sus in jos, de la stanga la dreapta. Totusi, cand vine vorba de a naviga o pagina web pe un dispozitiv mobil, nu mai e atat de confortabil sa navigarea laterala.

Utilizatorii tai vor sa stie ca ai luat in vedere acest aspect si faci tot posibilul pentru ca experienta lor pe un dispozitiv mobil sa fie cat mai utila si usoara.

Viteza

O experienta pe un dispozitiv mobil placuta inseamna si viteza, motiv pentru care e important sa ai in vedere acest aspect in optimizarea site-ului tau web. Asta deoarece, majoritatea utilizatorilor care folosesc dispozitivele mobile este o fac in timpul liber, cand merg dintr-un loc in altul, iar acest lucru necesita o viteza ridicata de functionare a site-ului mobil.

Mai mult, viteza de functionare a unui site creste interesul, retentia si conversia utilizatorilor si nu in ultimul e o modalitate de a urca ca si vizibilitate in motoarele de cautare.

Supraincarcarea continutului cu fisiere si imagini

In primul rand, gandeste-te la CSS styles si JavaScript snippets daca sunt necesare si de folos utilizatorilor mobili. Prea multe din ambele si pagina ta web e posibil sa functioneze mai incet.

Ca si alternativa eficienta, iti poti compresa codul, acolo unde e posibil si poti reorganiza toata partea de CSS.

Cand vine vorba de imagini, pe masura ce tehnologiile si display-ul dispozitivelor mobile se imbunatatesc, tentatia de a oferi imagini la dimensiuni mari e tot mai mare. Din pacate, imaginile mari suprasolicita serverul, iar astfel site-ul tau se va incarca mult mai greu. In schimb, selecteaza dimensiunea potrivita pentru fiecare dispozitiv.

Daca iti doresti sa inveti programare web de la zero, sau alte modalitati prin care iti poti optimiza site-ul web pentru dispozitive mobile, alaturat gasesti datele mele de contact!

Optimizare pentru dispozitive mobile: Practici SEO

Esti proprietarul unui business? Detii un site web pentru business care sa fie optimizat pentru dispozitive mobile? Te intereseaza modalitatile prin care poti sa duci acest proces la bun sfarsit?

Tot mai multi utilizatori isi folosesc dispozitivele mobile pentru a naviga internetul; e mult mai comod si mereu la indemana. Motiv pentru care, e importanta optimizarea site-urilor web pentru dispozitivele mobile.

E o modalitate prin care iti mentii clientii si iti poti dezvolta portofoliul de clienti, intrucat site-ul tau web este mereu la dispozitia acestora, adaptat la orice tip de ecran ceea ce face navigarea mult mai usoara.

3 modalitati pentru implementarea site-ului mobil

Pentru optimizarea unui site web pentru dispozitivele mobile exista mai multe tehnici disponibile, dar trei dintre aceste metode sunt principale: URL-uri separate, responsive web design si dynamic serving.

URL separat – Un URL separat inseamna si coduri diferite pentru fiecare dispozitiv. Prin aceasta configuratie se incearca detectarea utilizatorii dispozitivelor. Mai apoi se redirectioneaza la pagina corespunzatoare folosind HTTP care redirectioneaza impreuna cu header-ul Vary HTTP.

Responsive web design – Prin aceasta tehnica exista un singur cod HTML pe acelasi URL indiferent de numarul dispozitivelor pe care utilizator le are. Totusi, afisarea display-ului poate diferentia in functie de marimea ecranului. Chiar si asa, aceasta este metoda recomandata si de Google.

Dynamic serving – Aceata metoda foloseste acelasi URL indiferent de dispozitivul folosit. In schimb genereaza o versiune diferita a HTML-ului pentru dispozitive diferite in functie de ceea ce cunoaste serverul despre browserul utilizatorului.

Tehnica Responsive Web Design (RWD)

Prin Responsive Web Design toate dispozitivele citesc acelasi cod din acelasi URL. Astfel, continutul site-ului web se redimensioneaza pentru a se potrivi pentru fiecare ecran.

Pentru ca RWD sa functioneze e nevoie de o planificare solida. In ceea ce privesc costurile, tehnica poate sa fie putin mai ridicata la inceput, dar dupa aplicarea strategiei, mentenanta nu necesita o sursa financiara mare.

Puncte tari

Orientare flexibila – In mod natural, RWD permite utilizatorilor sa aleaga cum doresc orientarea imaginii, portrait sau landscape.

Tot continutul intr-un singur URL – Folosirea unui singur URL face ca interactiunea utilizatorilor sa fie mult mai usoara, fiind aceeasi situatie pentru share si link-urile catre continut. Mai mult, este favorabil si pentru motoarele de cautare deoarece in acest fel continutul iti este mai bine indexar si descoperit.

Fara redirectionare – Timpul de asteptare este redus, iar astfel performanta site-ului creste.

Experienta utilizatorului este streamlined – Prezentarea intregului continut este personalizata, iar functionalitatile specifice dispozitivului pot fi folosite.

Puncte slabe

Necesita planificare detaliata – RWD necesita o planificare detaliata si atent pregatita deoarece toata partea de HTML este impartita. Asa incat e nevoie de dezvoltarea unei experience personalizata si robusta cu o performanta optima pentru fiecare dispozitiv si utilizator.

Greseli frecvente

Explozie de date – E recomandat sa nu lasi utilizatorii dispozitivelor mobile sa descarce imagini la dimensiuni full care sunt menite pentru ecranele mari si viteze mari. Incearca sa reduci cererile HTTP si sa minimizezi JavaScript si CSS. In schimb, incarca continutul vizibil in primul rand si amana restul proceselor.

Pentru cine este recomandat RWD

RWD este recomandat celor care au un business focusat in a oferi o experienta constanta si care pot planifica in mod holistic pentru toate dispozitivele cu o singura echipa web. De exemplu, Starbucks.com, Time.com si BostonGlobe.com folosesc aceasta tehnica.

Metoda poate fi extinsa pentru a se potrivi pe noi dispozitive pe masura ce apar, iar URL-ul este potrivit pentru a da share la articole si pentru a face legaturile fara redirectionare sau confuzie.

Sfaturi SEO pentru Responsive Design

Pentru ca motoarele de cautare sa inteleaga structura responsive a site-ului tau web e nevoie de access complet la JavaScript, CSS si imagini. In acest fel, va intelege cum continutul site-ului tau este prezentat pentru dispozitive mobile si desktop.

Daca iti doresti sa inveti ce inseamna responsive web design, cum sa il aplici pentru site-ul tau, si nu numai, gasesti aici datele mele de contact!

Cum optimizezi site-ul tau pentru dispozitive mobile?

Mediul tehnologiei e mereu in dezvoltare, iar publicul doreste sa ramana mereu conectat la noutatile mediului online. Motiv pentru care o buna parte dintre utilizatorii internetului o fac prin intermediul dispozitivelor mobile. Asta deoarece fiecare dintre noi, avem telefonul mobil cu noi mereu, la indemana.

Acest fapt face ca cerinta unui site web optimizat pentru dispozitive mobile sa fie tot mai mare. Un site optimizat inseamna o experienta placuta, iar o experienta placuta poate sa transforme vizitatorul intr-un client.

In timp ce, un site web care nu e optimizat pentru dispozitive mobile face mult mai dificila experienta utilizatorului, chiar daca produsele/ serviciile sunt de calitate.

3 Lucruri care ar trebui sa le cunosti atunci cand optimizezi site-ul web pentru dispozitive mobile

  1. Usor de utilizat pentru clienti

Rolul internetului a fost mereu acela de a usura viata utilizatorilor. Acest lucru se aplica si in cazul site-urilor web optimizate pentru mobil; fiind necesar ca acestea sa fie cat mai usor de utilizat.

Termenul “usor de utilizat” se refera la viteza si usurinta cu care utilizatorii gasesc informatiile de care sunt interesati, recenziile produselor/ serviciilor oferite, adresa, sau postarile de blog.

Asadar, fa un plan al posibilor pasi pe care clienti i-ar face si asigura-te ca sunt finalizati cu usurinta pe un dispozitiv mobil; de la butonul de cautare pentru produsul de care este interesat/a, la cercetarea produselor/ serviciilor pe care le oferi si ca un ultim pas cumpararea efectiva.

  1. Alege responsive web design

Termenul de responsive web design (RWD) este folosit pentru optimizarea unui site web asupra tuturor ecranelor pe care utilizatorul le foloseste (desktop, laptop, dispozitiv mobil, tableta). Acest lucru inseamna ca pagina foloseste acelasi URL, modificandu-se doar display-ul pentru a se mula la diferitele marimi ale ecranelor.

Unul dintre beneficiile RWD este ca nu va trebui sa intretii diferite versiuni, ci doar una pentru toate ecranele si nici nu va fi nevoie sa creezi mai multe site-uri web.

  1. Masoara eficacitatea site-ului web

Implementarea unui site web optimizat pentru dispozitive mobile necesita intelegerea utilizatorilor; de la posibilele cautari si necesitati pe care le au pana la implinirea acestora. Asadar, este recomandat sa te gandesti la cele mai importante si obisnuite task-uri pe care acestia le au pe un site web mobil.

Cele mai frecvente greseli de implementare

  1. Implementarea site-ului mobil pe diferite domenii de site-ul web

Realizarea unui site mobil pe un domeniu, subdomeniu diferit de site-ul web necesita mai multa munca, ceea ce extinde si timpul de finalizare. Mai mult, avand URL-uri diferite cantitatea muncii va fi mai mare si in cazul proceselor de mentinere a site-ului, precum actualizarea sau repararea diferitelor probleme tehnice.

  1. Uita de importanta clientului

Reputatia unui business sta in mare parte in opiniile clientului, fiind piesa centrala. In procesul de implementare a unui site mobil e important sa te gandesti la necesitatile pe care clientul le are, precum si modalitatile prin care ii poti face aceasta experienta usoara.

Informatiile de contact, precum adresa sediului, numarul de telefon sau adresa de email e indicat sa fie asezate la vedere, deoarece crearea unui site mobil inseamna si functionalitate pentru clienti.

  1. Nu cerceteaza

Atunci cand te gandesti la o imbunatatire pentru business-ul tau online, dar si offline o parte esentiala este cercetarea. Afla cum fac ceilalti, ce functioneaza si ce nu.

Din fericire, site-urile web optimizate pentru dispozitive mobile e un concept demult cunoscut si folosit. Astfel, poti cerceta diferite site-uri, care iti vor oferi perspectiva si inspiratie pentru site-ul tau. Vei intelege exact ce inseamna sa fii utilizator si cum ar trebui aranjat site-ul pentru a fi cat mai functional si usor de utilizat.

Daca iti doresti sa inveti cum sa optimizezi site-ul tau pentru dispozitive mobile sau programare web de la zero,  alaturat gasesti datele mele de contact!

6 Sfaturi pentru a implementa un site mobile friendly

Cauti informatii despre cum poti implementa un site mobile friendly?

Conform celor de la eMarketer pana la sfarsitul anului 2014 peste 1.75 miliarde de oameni din toata lumea vor folosi in mod regulat un smartphone.

Si toti acesti oameni, nu folosesc smartphone-ul doar pentru a trimite mail-uri, mesaje si pentru a suna, ci pentru a putea sta conectati la retelele sociale si pentru a avea oricand acces la internet pentru a cauta informatiile care ii intereseaza.

Asadar, necesitatea unui site mobile friendly este mai mult decat recomandata, mai ales pentru un site business, intrucat vei atrage mai multi vizitatori.

Foloseste o tehnologie responsive

Pentru a-ti face site-ul web mobile friendly, foloseste o tehnnologie sau framework responsive, care te ajuta sa dezvolti un software de management al proprietatii, precum Bootstrap.

Aceste framework-uri sunt majoritatea gratuite, sunt foarte usor de implementat si au o documentatie buna. Si nu doar ca ofera o mai buna experienta utilizatorului, dar de asemenea iti consolideaza site-ul web, in acest fel nu vei avea nevoie de un URL diferite pentru dispozitive diferite.

Mai mult, e usor de folosit si ofera beneficii pentru o optimizare SEO mai buna.

Pastreaza continutul scurt, dar interesant

Avand in vedere ca imaginile si video-urile sunt in mare voga, continutul e important sa nu fie prea lung, deoarece e posibil ca o buna parte dintre vizitatori sa il treaca cu vederea. In schimb, alege sa scrii ceva de o lungime mica spre medie, dar care sa atraga publicul virtual.

Ecranul unui smartphone este mult mai mic, decat cel al unui laptop sau desktop, inca un motiv pentru care e recomandat sa scurtezi continutul. Acestia dau scroll repede, asadar include doar textul care conteaza.

Imagini optimizate, iconite si video-uri

Internetul mobil functioneaza mult mai incet decat cel pentru laptopuri si desktopuri, motiv pentru care e indicat sa optimizezi imaginile pentru ca site-ul sa nu se incarce prea greu.

Un alt motiv, asa cum precizam, imaginile si video-urile sunt cele care capteaza atentia vizitatorilor, de aceea e important ca imaginile site-ului tau sa fie optimizate pentru smartphone-uri.

Iconitele sunt tot o modalitate pentru a simplifica site-ul de prea mult text si pentru a-l face mai atractiv pentru utilizatori.

Video-urile sunt un must-have pentru un site mobil, intrucat utilizatorii de smartphone se uita de 3 ori mai mult la video-uri decat cei care folosesc un laptop sau desktop. Motiv pentru care e important sa folosesti o tehnologie care sa ofere o experienta mobila placuta.

Informatii de contact la vedere

Un alt factor important pentru ca utilizatorii site-ului tau mobil sa aibe o experienta cat mai buna, este asezarea informatiilor de contact la vedere. Astfel incat, sa stie la ce numar pot suna, la ce adresa de email pot trimite intrebari, precum si o locatie exacta a business-ului.

Cu cat pot accesa mai repede astfel de informatii, cu atat va fi mai calitativa experienta.

Formulare de contact

E important ca utilizatorii sa poata intra in orice moment in contact cu tine si business-ul tau, dar in acelasi timp e la fel de important ca tu sa mentii o constanta legatura cu acestia.

De aceea, formularele de contact trebuie sa fie optimizate pentru ecranul mobil. Foloseste cat mai putine campuri, din care sa extragi informatiile cele mai relevante.

Testeaza continutul

Ca un ultim pas pentru a implementa un site mobile friendly si pentru a te asigura ca functioneaza la parametrii normali, testeaza continutul site-ului, fiind o etapa indispensabila intrucat demonstreaza importanta pe care o acorzi vizitatorilor si potentialilor clienti.

Efectueaza aceasta testare pentru a te asigura ca functioneaza pe diferite platforme, dispozitive si sisteme de operare. Poti efectua aceste testari cu UXRecorder, POP, Solidifyapp si delight.io, unelte menite pentru acest scop.

Daca iti doresti sa inveti programare web de la zero, si nu numai, alaturat gasesti datele mele de contact!

jQuery Mobile 1.2.0

UPDATE 21 septembrie 2012: jQuery Mobile 1.2.0 versiunea RC2 a fost lansat . S-au corectat foarte multe erori si va recomand sa pregatiti aplicatiile voastre pentru aceasta versiune. Pe langa functionalitatile noi se observa si o imbunatatire a performantei . 

In 14 septembrie 2012 a fost lansat jQuery Mobile Release Candidate 1 . Astept o performanta mult mai buna de la acest „framework” fata de precedentul sau, versiunea 1.1.0. Noile functionalitati oferite de versiunea 1.2.0 sunt:

POPUPS

Este una dintre cele mai importante functionalitati noi.  JQM permite crearea unui tooltip simplu, harta embed-uita sau orice alt iframe in interiorul acestui popup. Cand se da clic inafara popup-ului, acesta se va inchide.

<a href="#popupBasic" data-rel="popup">Deschide Pop-up</a></pre>
<div id="popupBasic" data-role="popup">
Acesta este un popup..</div>
<pre>

COLLAPSIBLE LISTS

Continutul listelor se pot inchide / deschide. Este foarte utila pentru lista mari structurate pe mai multe nivele ierarhice. La primul acces se va afisa doar primul nivel din lista, apoi cand se da clic pe un element se vor afisa elementele din nivelul urmator.

LISTVIEW AUTODIVIDERS

Listele generate in mod dinamic se pot autostructura adaugand atributul data-autodividers.

READ ONLY LISTS

Stilul listelor read-only a fost modificat.

WIDTH ADJUSTMENTS FOR ALL FORM ELEMENTS

Latimea campurilor au fost marite, astfel incat sa se profite cat mai mult din ecran.

SUPPORT JQUERY 1.8

JQM suporta ultima versiune de jQuery, adica versiunea 1.8

Mai multe detalii pe site-ul oficial jQuery Mobile.

Site booking pentru mobil – Listare localitati

Azi vom implementa listarea localitatilor pentru toate tipurile de cazare, cum ar fi: hoteluri, pensiuni, case, vile, etc. Pentru a adauga aceasta functionalitate site-ului mobil avem de adaugat( utilizam frameworkul MVC CodeIgniter ) :

  1. o metoda in controller pentru a avea informatiile in variabile
  2. un sablon pentru afisarea continutului (afisarea variabilelor)
  3. o metoda in MODEL pentru interogarea informatiilor dorite
Afisarea localitatilor pentru tipurile de cazare

Codul din CONTROLLER

public function category()
{
    $hotel_type_arr                = $this->config->item('hotel_type_arr'); 
    $this->data['category_id']     = $this->uri->segment(3);
    $this->data['category_name']   = $hotel_type_arr[$this->data['category_id']];
    $this->data['book_page_title'] = ucfirst($this->data['category_name']);
    $this->data['content']         = 'main/category';
    $this->data['cities']          = $this->City_model->get_all_entries();

    $this->load->view('layout', $this->data);
}

EXPLICATII:

  • linia #3 : se citeste tipurile de cazare existente. Tipurile de cazare sunt salvate in config
  • linia #4 : se citeste id-ul categoriei de cazare din URL. URL-ul are urmatoarea structura: http://mbooking.sandorkovacs.ro/main/category/1
  • linia #5 : se salveaza numele tipului de cazare intr-o variabila
  • linia #6 : in plus vom afisa tipul de cazare si in titlul paginii
  • linia #7 : calea catre fisierul sablon in care se va face afisarea
  • linia #8 : se face o interogare cu toate localitatile existente in baza de date

Codul din VIEW

<?php if (isset($cities)): ?>
<ul data-role="listview" data-theme="a">
  <?php foreach ($cities as $city): ?>
	  <li><a href="#"><?php echo $city->name; ?></a></li>
  <?php endforeach; ?>
</ul>
<?php endif; ?>

EXPLICATII:

  • linia #1: verificam daca exista localitati in baza de date
  • linia #3 : parcurgem fiecare inregistrare (localitate)
  • linia #4 : afisam numele localitatii

Codul din MODEL

    function get_all_entries($limit = 100)
    {
        $this->db->order_by("name", "asc");
        $query = $this->db->get($this->table_name, $limit);
        return $query->result();
    }

EXPLICATII:

Am folosit ACTIVE RECORD pentru interogarile din baza de date MySQL.

  • linia #3 : ordonare dupa nume in ordine alfabetica
  • linia #4 : contruirea interogarii finale unde primul parametru este numele tabelei, iar al doilea parametru este limita. Daca in tabel avem 300 de localitati si setam limita la 30 atunci se vor interoga doar 30 de localitati
  • linia #5 : returnarea rezultatului

Demo

Pentru a vizualiza varianta demo intrati pe mbooking.sandorkovacs.ro si dati clic pe oricare tip de cazare. Se va afisa o lista cu localitatile existente in baza de date – tabela cities

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!

Capitolul 2 – Site de booking

Asadar cum am promis, continuam cu capitolul 2 cursul intitulat „Optimizare site pentru mobil” folosind tehnologia jQuery Mobile Framework. In acest capitol vom implementa o aplicatie minimala de booking.

Cerinte  

Pentru implementarea codului avem nevoie de:

  • server wamp sau lamp ( Apache + MySQL + PHP )
  • CodeIgniter 2 – Framework MVC .
  • notepad++, netbeans sau ce editor preferi
  • 10-15 minute timp liber

Pentru partea dinamica voi folosi framework-ul CodeIgniter 2 , este un framework foarte light si din mai multe motive am preferat decat limbaj php pur. Daca esti interesat de motive/detalii legat de alegerea frameworkului CodeIgniter 2 poti sa lasi un comentariu.

Functionalitati

Site-ul de booking va contine urmatoarele functionalitati:

  • meniu site
  • formular de contact
  • formular de adaugare cazare
  • listare hoteluri/pensiuni
  • pagina de prezentare cu 3 taburi: prezentare / localizare / contact
  • inserare harta google
  • formular rezervare

Structura baze de date

Creeaza o noua baza de date ( din phpmyadmin/linia de comanda pentru MySQL) cu numele book_mobile.
Site-ul de booking va contine urmatoarele tabele:
  • city
    id / name
  • hotel
    id / id_city / name / description / star / map / contact
  • book 
    id / id_city / id_hotel /  date_start / date_end / comment
Inseareaza urmatorul cod MySQL in baza de date creata cu numele „book_mobile” :
-- phpMyAdmin SQL Dump
-- version 3.4.5
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Jul 18, 2012 at 07:18 AM
-- Server version: 5.1.63
-- PHP Version: 5.3.6-13ubuntu3.8

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `book_mobile`
--

-- --------------------------------------------------------

--
-- Table structure for table `book`
--

CREATE TABLE IF NOT EXISTS `book` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `id_city` int(11) NOT NULL,
  `id_hotel` int(11) NOT NULL,
  `date_start` date NOT NULL,
  `date_end` date NOT NULL,
  `comment` mediumtext NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COMMENT='reservations' AUTO_INCREMENT=4 ;

--
-- Dumping data for table `book`
--

INSERT INTO `book` (`id`, `id_city`, `id_hotel`, `date_start`, `date_end`, `comment`) VALUES
(1, 0, 3, '2012-08-12', '2012-08-15', 'observatii'),
(2, 0, 1, '2012-08-12', '2012-08-15', 'dasdasdasd\n'),
(3, 0, 2, '2012-08-13', '2012-08-16', 'fara observatii');

-- --------------------------------------------------------

--
-- Table structure for table `city`
--

CREATE TABLE IF NOT EXISTS `city` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(100) CHARACTER SET latin1 NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COMMENT='city table' AUTO_INCREMENT=8 ;

--
-- Dumping data for table `city`
--

INSERT INTO `city` (`id`, `name`) VALUES
(1, 'Arad'),
(2, 'Oradea'),
(3, 'Cluj-Napoca'),
(4, 'Brasov'),
(5, 'Costinesti'),
(6, 'Poiana Brasov'),
(7, 'Mamaia');

-- --------------------------------------------------------

--
-- Table structure for table `hotel`
--

CREATE TABLE IF NOT EXISTS `hotel` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `id_city` int(11) NOT NULL,
  `name` varchar(100) CHARACTER SET latin1 NOT NULL,
  `description` mediumtext CHARACTER SET latin1 NOT NULL,
  `star` tinyint(4) NOT NULL,
  `map` mediumtext CHARACTER SET latin1 NOT NULL,
  `contact` varchar(100) CHARACTER SET latin1 NOT NULL,
  `type` int(11) NOT NULL COMMENT '1- hotels 2-pensions, 3-vila,4-house',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COMMENT='hotel table' AUTO_INCREMENT=9 ;

--
-- Dumping data for table `hotel`
--

INSERT INTO `hotel` (`id`, `id_city`, `name`, `description`, `star`, `map`, `contact`, `type`) VALUES
(1, 2, 'Hotel Maxim', 'Descriere hotel maxim . .. misdm idsamd masidmas mdiadsamd omisamdsoia', 4, '<br /><small><a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=hotel+maxim+oradea&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=42.445866,93.076172&amp;ie=UTF8&amp;hq=hotel+maxim&amp;hnear=Oradea,+Bihor+County,+Romania&amp;ll=47.061916,21.934969&amp;spn=0.001118,0.00284&amp;t=m&amp;z=14&amp;iwloc=A&amp;cid=12500074677983447461" style="color:#0000FF;text-align:left">View Larger Map</a></small>', 'office@hotelmaxim.ro', 1),
(2, 1, 'Hotel Arad', 'dsadasd sadasas', 1, 'dsdsadsada', '', 1),
(3, 2, 'Hotel Nevis', 'n 2011, Hotel Nevis si-a marit capacitatea de cazare prin 42 de spa?ii dotate ?i mobilate la standarde de 4 stele. Toate camerele din aripa nou? sunt dotate cu instala?ie de climatizare, televizor, minibar si conexiune internet wireless.\n\nPe lâng? cele 42 de camere amenajate ?i mobilate la standarde de 4 stele, oaspe?ii hotelului sunt invita?i s? se relaxeze la Centrul Wellness & SPA din interiorul hotelului. Aici pute?i s? uita?i de grijile de peste zi la o ?edin?? de masaj sau la una dintre saune - baie de aburi, aromasauna ?i Old Sauna. Centrul Wellness & SPA v? a?teapt? ?i cu tratamenete faciale ?i de remodelare coproral?, du?uri de senza?ie, du? Vichy, piscina interioar?, jacuzzi ?i sal? de fitness.', 3, 'harta', '', 1),
(4, 1, 'test', 'dekosdkoasdpsa', 1, 'harta', '', 1),
(5, 1, 'test 2', 'descriere', 1, 'harta\n', 'contact', 1),
(6, 1, 'test3desc', 'descifjsdsfjdsioj', 1, '', 'cbafusdafdsfoi cntact', 1),
(8, 6, 'Hotel Ursus', 'descirerere rehotelteptp eius', 4, 'harta', 'office@hotelursus.ro', 1);

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Machete

Va atasez machetele site-ului in format pdf.

Lectia 12 – Bara de instrumente pentru navigare

jQuery Mobile ofera o bara de instrumente pentru navigare, se pot adauga pana la 5 butoane ( pe un rand ) cu sau fara iconita. Bara de instrumente de navigare se poate adauga atat in antet cat si in subsol.
Bara de instrumente pentru navigare este doar o lista <ul> avand atributul data-role=”navbar”.

Sa cream impreuna o bara de instrumente de navigare cu 2 butoane: „Prima pagina” si „Contact”

	<div data-role="header"  data-position="fixed" data-theme="c" >
			<h1>Lectia 12 – Bara de instrumente pentru navigare</h1>
			<div data-role="navbar">
				<ul>
					<li><a href="#home" class="ui-btn-active"   data-transition="slide">Prima pagina</a></li>
					<li><a href="#contact"   data-transition="slide">Contact</a></li>
				</ul>
			</div><!-- /navbar -->
	</div>

Demo

Demo-ul complet poti vizualiza aici.