Creazione siti Ferrara

MySQL Quick Reference – Dates

MySQL Quick Reference – Dates

Tested on MySQL 5.5

Date Data Types

DATE – format YYYY-MM-DD
DATETIME – format: YYYY-MM-DD HH:MM:SS
TIMESTAMP – format: YYYY-MM-DD HH:MM:SS
YEAR – format YYYY or YY

Date Functions

NOW() Returns the current date and time
CURDATE() Returns the current date
CURTIME() Returns the current time

DATE() Extracts the date part of a date or date/time expression
EXTRACT() Returns a single part of a date/time
DATE_ADD() Adds a specified time interval to a date
DATE_SUB() Subtracts a specified time interval from a date
DATEDIFF() Returns the number of days between two dates
DATE_FORMAT() Displays date/time data in different formats

Syntax Examples:


/* Example ######################### */

CREATE TABLE Orders
(
... you want to do ...

OrderDate datetime NOT NULL DEFAULT NOW(),

OrderDate datetime NOT NULL DEFAULT CURDATE(),

OrderDate datetime NOT NULL DEFAULT CURTIME(),

... you want to do ...
)

/* Example ######################### */

SELECT ProductName, DATE(OrderDate) AS OrderDate
FROM Orders
WHERE OrderId=1

/* Example ######################### */

SELECT EXTRACT(YEAR FROM OrderDate) AS OrderYear,
EXTRACT(MONTH FROM OrderDate) AS OrderMonth,
EXTRACT(DAY FROM OrderDate) AS OrderDay,
FROM Orders
WHERE OrderId=1

/* Example ######################### */
/* Now we want to add 45 days to the "OrderDate", to find the payment date */

SELECT OrderId,DATE_ADD(OrderDate,INTERVAL 45 DAY) AS OrderPayDate
FROM Orders

/* Example ######################### */
/* Now we want to subtract 5 days from the "OrderDate" date. */

SELECT OrderId,DATE_SUB(OrderDate,INTERVAL 5 DAY) AS SubtractDate
FROM Orders

/* Example ######################### */
/* The result is -1 */

SELECT DATEDIFF('2008-11-29','2008-11-30') AS DiffDate

/* Example ######################### */

DATE_FORMAT(NOW(),'%b %d %Y %h:%i %p')
DATE_FORMAT(NOW(),'%m-%d-%Y')
DATE_FORMAT(NOW(),'%d %b %y')
DATE_FORMAT(NOW(),'%d %b %Y %T:%f')

/* The Result:

Nov 04 2008 11:45 PM
11-04-2008
04 Nov 08
04 Nov 2008 11:45:34:243 */

By Andrea Tonin|MySQL, Web Design|Commenti disabilitati

PHP – MySQL – Order By Keyword

PHP – MySQL – Order By Keyword

Statement:

SELECT column_name(s)
FROM table_name
ORDER BY column_name(s) ASC|DESC

<?php
// Create connection
// Statement: mysqli_connect(host,username,password,dbname)
// NOTICE: se lo script è installato nello stesso server del Data Base, host->localhost
$con=mysqli_connect("localhost","lucedigi_user","mypassword","lucedigi_testphp");

// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

// Order records START
$result = mysqli_query($con,"SELECT * FROM Persons ORDER BY age");

while($row = mysqli_fetch_array($result))
  {
  echo $row['FirstName'];
  echo " " . $row['LastName'];
  echo " " . $row['Age'];
  echo "<br>";
  }
// Order records END

mysqli_close($con); 
echo "Great! Connection Closed!"; 
?>

phpMyAdmin:

The result:

Glenn Quagmire 33
Peter Griffin 35
Andrea Tonin 39

By Andrea Tonin|MySQL, PHP|Commenti disabilitati

CSS – Default h1-h5 Headers

CSS – Default h1-h5 Headers

By Andrea Tonin|CSS, Web Design|Commenti disabilitati

JQuery Mobile Corso OnLine – Menu a Fisarmonica

JQuery Mobile Corso OnLine – Menu a Fisarmonica

Lezione #id-jqmobile-2013-0005#

JQuery Mobile mette a disposizione dei pratici menu a fisarmonica (accordions).

Vediamo il seguente codice:

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/jquery.mobile-1.3.2.min.js"></script>
</head>

<body>

<!-- ################### -->
<!-- Start of first page -->
<!-- ################### -->

<div data-role="page" id="one">

	<div data-role="header">
		<h1>Page one</h1>
	</div><!-- /header -->

	<div data-role="content">

          <p>Accordion</p>
	  <div data-role="collapsible-set" data-theme="c" data-content-theme="d">

		<div data-role="collapsible">
			<h3>Section 1</h3>
			<p>I'm the collapsible content for section 1</p>
		</div>

		<div data-role="collapsible">
			<h3>Section 2</h3>
			<p>I'm the collapsible content for section 2</p>
		</div>

		<div data-role="collapsible">
			<h3>Section 3</h3>
			<p>I'm the collapsible content for section 3</p>
		</div>

           </div>

	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>

</html>

Per creare un menu a fisarmonica il markup da applicare è il seguente:

          <div data-role="collapsible-set">

		<div data-role="collapsible">
			...
		</div>

		<div data-role="collapsible">
			...
		</div>

		<div data-role="collapsible">
			...
		</div>

           </div>

A ogni div possiamo assegnare i seguenti attributi:
data-inset=”false” -> valori: true / false -> Inset o Full Width
data-mini=”true” -> valori: true / false -> Per avere una versione miniaturizzata
data-collapsed-icon=”arrow-r” data-expanded-icon=”arrow-d” -> assegna le icone per il menu aperto e collasato
data-iconpos=”right” -> valori: right / left / top / bottom -> assegna la posizione dell’icona
data-corners=”false” -> valori: true / false -> spigoli arrotondati o spigoli vivi
data-theme=”b” data-content-theme=”b” -> valori: a 7 b / c / d / e -> assegna separatamente un tema al menu principale e al sottomenù

Differenza tra data-role=”collapsible” e data-role=”collapsible-set”:
data-role=”collapsible-set” apre solo un contenuto per volta
data-role=”collapsible-set” apre anche più contenuti per volta

Ora mettiamo tutto insieme:

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/jquery.mobile-1.3.2.min.js"></script>
</head>

<body>

<div data-role="page" id="one">

	<div data-role="header">
		<h1>Page one</h1>
	</div><!-- /header -->

	<div data-role="content">
	
	<p>Accordion - Inset</p>
	<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
		<div data-role="collapsible">
			<h3>Section 1</h3>
			<p>I'm the collapsible content for section 1</p>
		</div>
		<div data-role="collapsible">
			<h3>Section 2</h3>
			<p>I'm the collapsible content for section 2</p>
		</div>
		<div data-role="collapsible">
			<h3>Section 3</h3>
			<p>I'm the collapsible content for section 3</p>
		</div>
    </div>
	
	<p>Accordion - Full Width</p>
	<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-inset="false">
		<div data-role="collapsible" data-inset="false">
			<h3>Section 1</h3>
			<p>I'm the collapsible content for section 1</p>
		</div>
		<div data-role="collapsible" data-inset="false">
			<h3>Section 2</h3>
			<p>I'm the collapsible content for section 2</p>
		</div>
		<div data-role="collapsible" data-inset="false">
			<h3>Section 3</h3>
			<p>I'm the collapsible content for section 3</p>
		</div>
    </div>
	
	<p>Accordion - Mini</p>
	<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-mini="true">
		<div data-role="collapsible">
			<h3>Section 1</h3>
			<p>I'm the collapsible content for section 1</p>
		</div>
		<div data-role="collapsible">
			<h3>Section 2</h3>
			<p>I'm the collapsible content for section 2</p>
		</div>
		<div data-role="collapsible">
			<h3>Section 3</h3>
			<p>I'm the collapsible content for section 3</p>
		</div>
    </div>
	
	<p>Accordion - Icons</p>
	<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-collapsed-icon="gear" data-expanded-icon="delete">
		<div data-role="collapsible">
			<h3>Section 1</h3>
			<p>I'm the collapsible content for section 1</p>
		</div>
		<div data-role="collapsible" data-iconpos="top">
        <h3>Top</h3>
        <p>Set via <code>data-iconpos="top"</code> attribute on the collapsible</p>
        </div>
    </div>
	
	<p>Accordion - Corners</p>
	<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-corners="false">
		<div data-role="collapsible">
			<h3>Section 1</h3>
			<p>I'm the collapsible content for section 1</p>
		</div>
    </div>
	
	<p>Accordion - Themes</p>
	<div data-role="collapsible-set" data-theme="e" data-content-theme="d">
		<div data-role="collapsible">
			<h3>Section 1</h3>
			<p>I'm the collapsible content for section 1</p>
		</div>
    </div>
	
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>

</html>

Vedi il codice in azione! >

Il mio sito ufficiale >

By Andrea Tonin|JQuery, JQuery Mobile, Web Design|Commenti disabilitati

JQuery Mobile – Liste

JQuery Mobile – Liste

Lezione #id-jqmobile-2013-0009#

JQuery Mobile mette a disposizione degli attributi pensati apposta per gli elenchi non ordinati (ul) e ordinati (ol).

Vediamo la sintassi di base:

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/jquery.mobile-1.3.2.min.js"></script>
</head>

<body>

<div data-role="page" id="one">

	<div data-role="header">
		<h1>Page one</h1>
	</div><!-- /header -->

	<div data-role="content">

	<ul data-role="listview">
   		<li>Acura</li>
    		<li>Audi</li>
    		<li>BMW</li>
    		<li>Cadillac</li>
    		<li>Ferrari</li>
	</ul>

	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>

</html>

Agli elenchi non ordinati assegnamo l’attributo: ul data-role=”listview”

Agli elenchi ordinati assegnamo l’attributo: ol data-role=”listview”

Altri attributi:

data-inset=”true” -> true o false -> attiva e disattiva i bordi arrotondati

data-filter=”true” data-filter-placeholder=”Search fruits…” -> true o false -> nasconde gli elementi – li – in tempo reale durante la ricerca

data-filter=”true” data-filter-reveal=”true” data-filter-placeholder=”Search fruits…” -> true o false -> mostra gli elementi – li – in tempo reale durante la ricerca

data-role=”list-divider” -> aggiunge un divisorio

data-autodividers=”true” -> aggiunge un divisorio colorato

span class=”ui-li-count”>12 -> aggiunge un contatore (Count bubbles)

data-icon=”gear” -> aggiunge un’unicona standard

Per aggiungere icona personalizzata 16×16

<li><a href="#"><img src="../../_assets/img/gf.png" alt="France" class="ui-li-icon ui-corner-none">France</a></li>

Per aggiungere una miniatura 80×80 px

    <li><a href="#">
        <img src="img/firefox-logo.png">
        <h2>Content</h2>
        <p>Content</p></a>
    </li>

Bottoni con separazione, notare che lo split può avere un tema differente dal resto dell’elemento.

<ul data-role="listview" data-split-icon="gear" data-split-theme="d">

Un listato di esempio con altre variazioni sul tema:

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/jquery.mobile-1.3.2.min.js"></script>
</head>

<body>

<div data-role="page" id="one">

	<div data-role="header">
		<h1>Page one</h1>
	</div><!-- /header -->

	<div data-role="content">
<p>Elenco non ordinato</p>	
<ul data-role="listview">
    <li>Acura</li>
    <li>Audi</li>
    <li>BMW</li>
    <li>Cadillac</li>
    <li>Ferrari</li>
</ul>

<p>Elenco ordinato</p>	
<ol data-role="listview">
    <li>Acura</li>
    <li>Audi</li>
    <li>BMW</li>
    <li>Cadillac</li>
    <li>Ferrari</li>
</ol>

<p>Linked</p>
<ul data-role="listview">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>

<p>Inset</p>
<ul data-role="listview" data-inset="true">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>

<p>Filter</p>
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." data-inset="true">
    <li><a href="#">Apple</a></li>
    <li><a href="#">Banana</a></li>
    <li><a href="#">Cherry</a></li>
    <li><a href="#">Cranberry</a></li>
    <li><a href="#">Grape</a></li>
    <li><a href="#">Orange</a></li>
</ul>

<p>Filter Reveal</p>
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search fruits..." data-inset="true">
    <li><a href="#">Apple</a></li>
    <li><a href="#">Banana</a></li>
    <li><a href="#">Cherry</a></li>
    <li><a href="#">Cranberry</a></li>
    <li><a href="#">Grape</a></li>
    <li><a href="#">Orange</a></li>
</ul>

<p>Divider</p>
<ul data-role="listview" data-inset="true" data-divider-theme="d">
    <li data-role="list-divider">Mail</li>
    <li><a href="#">Inbox</a></li>
    <li><a href="#">Outbox</a></li>
    <li data-role="list-divider">Contacts</li>
    <li><a href="#">Friends</a></li>
    <li><a href="#">Work</a></li>
</ul>

<p>Autodividers</p>
<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
    <li><a href="index.html">Adam Kinkaid</a></li>
    <li><a href="index.html">Alex Wickerham</a></li>
    <li><a href="index.html">Avery Johnson</a></li>
    <li><a href="index.html">Bob Cabot</a></li>
    <li><a href="index.html">Caleb Booth</a></li>
    <li><a href="index.html">Christopher Adams</a></li>
    <li><a href="index.html">Culver James</a></li>
</ul>

<p>Count Bubbles</p>
<ul data-role="listview" data-count-theme="c" data-inset="true">
    <li><a href="#">Inbox <span class="ui-li-count">12</span></a></li>
    <li><a href="#">Outbox <span class="ui-li-count">0</span></a></li>
    <li><a href="#">Drafts <span class="ui-li-count">4</span></a></li>
    <li><a href="#">Sent <span class="ui-li-count">328</span></a></li>
    <li><a href="#">Trash <span class="ui-li-count">62</span></a></li>
</ul>

<p>Icons 16x16</p>
<ul data-role="listview" data-inset="true">
    <li><a href="#"><img src="img/gf.png" alt="France" class="ui-li-icon ui-corner-none">France</a></li>
    <li><a href="#"><img src="img/de.png" alt="Germany" class="ui-li-icon">Germany</a></li>
</ul>

<p>Thumbnails automatic resize 80x80 px</p>
<ul data-role="listview" data-inset="true">
    <li><a href="#">
        <img src="img/firefox-logo.png">
        <h2>Content</h2>
        <p>Content</p></a>
    </li>
    <li><a href="#">
        <img src="img/firefox-logo.png">
        <h2>Content</h2>
        <p>Content</p></a>
    </li>
    <li><a href="#">
        <img src="img/firefox-logo.png">
        <h2>Content</h2>
        <p>Content</p></a>
    </li>
</ul>

<p>Split Buttons</p>
<ul data-role="listview" data-split-icon="gear" data-split-theme="d" data-inset="true">
    <li><a href="#">
        <img src="img/firefox-logo.png">
        <h2>Broken Bells</h2>
        <p>Broken Bells</p></a>
        <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    </li>
    <li><a href="#">
        <img src="img/firefox-logo.png">
        <h2>Warning</h2>
        <p>Hot Chip</p></a>
        <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    </li>
    <li><a href="#">
        <img src="img/firefox-logo.png">
        <h2>Wolfgang Amadeus Phoenix</h2>
        <p>Phoenix</p></a>
        <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    </li>
</ul>
<div data-role="popup" id="purchase" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
    <h3>Purchase Album?</h3>
    <p>Your download will begin immediately on your mobile device when you purchase.</p>
    <a href="index.html" data-role="button" data-rel="back" data-theme="b" data-icon="check" data-inline="true" data-mini="true">Buy: $10.99</a>
    <a href="index.html" data-role="button" data-rel="back" data-inline="true" data-mini="true">Cancel</a>
</div>

<p>Formatted content</p>
<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
    <li><a href="index.html">
        <h2>Stephen Weber</h2>
        <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
        <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
        <p class="ui-li-aside"><strong>6:24</strong>PM</p>
    </a></li>
    <li><a href="index.html">
        <h2>jQuery Team</h2>
        <p><strong>Boston Conference Planning</strong></p>
        <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
        <p class="ui-li-aside"><strong>9:18</strong>AM</p>
    </a></li>
    <li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
    <li><a href="index.html">
        <h2>Avery Walker</h2>
        <p><strong>Re: Dinner Tonight</strong></p>
        <p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
        <p class="ui-li-aside"><strong>4:48</strong>PM</p>
    </a></li>
</ul>

<p>Themes</p>
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b">
    <li data-role="list-divider">Divider</li>
    <li><a href="index.html" data-theme="e">Inbox <span class="ui-li-count">12</span></a></li>
    <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
    <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
</ul>

<p>No white icon sprite</p>
<ul data-role="listview" data-inset="true" class="ui-icon-alt">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>

<p>Forms</p>
<form>
    <ul data-role="listview" data-inset="true">
        <li data-role="fieldcontain">
            <label for="name2">Text Input:</label>
            <input type="text" name="name2" id="name2" value="" data-clear-btn="true">
        </li>
        <li data-role="fieldcontain">
            <label for="textarea2">Textarea:</label>
        <textarea cols="40" rows="8" name="textarea2" id="textarea2"></textarea>
        </li>
        <li data-role="fieldcontain">
            <label for="flip2">Flip switch:</label>
            <select name="flip2" id="flip2" data-role="slider">
                <option value="off">Off</option>
                <option value="on">On</option>
            </select>
        </li>
        <li data-role="fieldcontain">
            <label for="slider2">Slider:</label>
            <input type="range" name="slider2" id="slider2" value="0" min="0" max="100" data-highlight="true">
        </li>
        <li data-role="fieldcontain">
            <label for="select-choice-1" class="select">Choose shipping method:</label>
            <select name="select-choice-1" id="select-choice-1">
                <option value="standard">Standard: 7 day</option>
                <option value="rush">Rush: 3 days</option>
                <option value="express">Express: next day</option>
                <option value="overnight">Overnight</option>
            </select>
        </li>
        <li class="ui-body ui-body-b">
            <fieldset class="ui-grid-a">
                    <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
                    <div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
            </fieldset>
        </li>
    </ul>
</form>


	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>

</html>

Vedi il codice in azione! >

Il mio sito ufficiale >

By Andrea Tonin|JQuery, JQuery Mobile, Web Design|Commenti disabilitati