Ente accreditato Regione Veneto n.4271

Costruire un layout web in PHP

Utilizzare i costrutti base del linguaggio di programmazione per realizzare strutture dinamiche

Pubblicato da Simone Baldassin // 13 ottobre 2016 // 1.467 visualizzazioni

Layout php

PHP è l’acronimo di Hypertext Preprocessor (originariamente Personal Home Page) ed è un linguaggio di scripting interpretato per la programmazione di pagine web dinamiche. In parole povere serve a programmare i siti web che, in alternativa, sarebbero dei semplici siti vetrina completamente statici e che non permettono praticamente nessuna interazione tra sito e utente che ne usufruisce.

Questo va spesso di pari passo con altri linguaggi come MySQL, il linguaggio dei database, e il solito, oramai potentissimo, Javascript.

In questo articolo vediamo come gestire le basi di costruzione di un layout in PHP utilizzando i classici linguaggi HTML5 e CSS3 e i costrutti include e require. Questi ultimi rivestono un ruolo importantissimo nel linguaggio, permettono infatti di inserire file esterni in una pagina web. Entrambi svolgono la stessa funzione e si differenziano solamente per la modalità di errore che viene mostrata in caso di insuccesso.

PHP infatti è un linguaggio che processa lato server il codice e restituisce a browser il risultato dello stesso che, di norma, è del puro e semplice HTML.

Se il web è la tua passione hai mai pensato ad un corso WordPress avanzato con PHP

Creazione del layout in HTML5 – CSS3

Andiamo quindi a creare una pagina HTML e inseriamo il seguente codice:


<header>
	<img src="Immagini/logo-vf-alt.png" alt="">
	<h1>Veneto Formazione</h1>
    <h2>Innovazione continua</h2>
</header>


<nav>
    <a href="#">Home</a>
</nav>

<article>
	<div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing
 elit, sed do eiusmod tempor incididunt ut labore et
 dolore magna aliqua.<br>Ut enim ad minim veniam, 
quis nostrud exercitation ullamco<br> laboris nisi 
ut aliquip ex ea commodo consequat.</p> 
    </div>
</article>

<section>
	<div class="content clearfix">
        <div class="section">
        	<h3>Corso Web Designer</h3>
        </div>
        <div class="section red">
        	<h3>Corso Digital Marketing</h3>
        </div>
        <div class="section yellow">
        	<h3>Corso PHP-Wordpress</h3>
        </div>
    </div>
</section>

<footer>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing 
elit, sed do eiusmod tempor incididunt ut labore et dolore
 magna aliqua.</p>
</footer>

e il codice CSS da inserire nel foglio di stile


* { 
	margin:0;
	padding:0;
}
.clearer {
	clear:both;
}
body {
	font-family: 'Roboto', serif;
	font-weight:300;	
}
img {
	border:none;
}
.clearfix::before, .clearfix::after { 
	content: "\0020"; 
	display: block; 
	height: 0; 
	overflow: hidden;
}
.clearfix::after { 
	clear: both; 
}
.content {
	width:1170px;
	margin:0 auto;
}
header {
	width:100%;
	height:470px;
	padding-top:100px;
	text-align:center;
	background:#00BCD4;
}
h1 {
	font-size:56px;
	color:#fff;
	font-weight:300;	
	padding-top:70px;
}
h2 {
	font-size:24px;
	color:#fff;
	font-weight:300;	
}
nav {
	width:100%;
	padding:25px 0;
	position:absolute;
	top:0;
	left:0;
}
a {
	margin-left:30px;
	text-decoration:none;
	text-transform:uppercase;
	color:#fff;
	font-weight:400;
}
article {
	width:100%;
	padding:80px 0;
	text-align:center;
	background:#EEEEEE;
}
article p {
	font-size:20px;
	color:#212121;
}
section {
	width:100%;
	padding:70px 0;
}
.section {
	width:386px;
	height:360px;
	margin:0 2px;
	background:#90A4AE;
	float:left;
	text-align:center;
}
.red {
	background:#E57373;
}
.yellow {
	background:#FFCB28;
}
h3 {
	font-size:20px;
	font-weight:400;
	background:#EEEEEE;
	color:#212121;
	padding:25px 0;
}
footer {
	width:100%;
	height:300px;
	text-align:center;
	background:#212121;
}
footer p {
	font-size:15px;
	color:#757575;
	padding-top:250px;
}


Come potete vedere abbiamo utilizzato un font di Google ed è quindi necessario richiamarlo nella head del sito inserendo questa riga di codice:

<link href=”https://fonts.googleapis.com/css?family=Roboto:300,400″ rel=”stylesheet”>

Ora che la struttura ha un aspetto gradevole passiamo alla fase successiva.
Vi ricordiamo che la modalità che andremo a vedere sta alla base della gestione di un tema custom in WordPress.

 

Strutturazione del layout con PHP

La nostra cartella di lavoro al momento contiene questi file:

php1

Come partenza andiamo a generare, utilizzando il vostro editor preferito, dei nuovi file in estensione PHP che, per ora, lasceremo vuoti.

php

La nostra cartella ora è così disposta:

php

Modifichiamo l’estensione del file index da HTML a PHP:

php

Il prossimo passaggio è molto semplice, dobbiamo infatti solamente distribuire il contenuto della nostra pagina HTML nei nuovi file. Possiamo già supporre che il contenuto iniziale della pagina, per intenderci dall’apertura di doctype alla chiusura di nav, verrà inserito nel file header.php come da figura.

php

Il contenuto naturalmente non dovrà semplicemente essere copiato ma tagliato, non dovrà perciò più essere presente nella pagina index.php

Eseguiamo la stessa operazione dall’apertura di footer alla chiusura di html e tagliamo/incolliamo il tutto nel file footer.php

php

La nostra pagina index ora riporta solamente il suo contenuto. Per poter richiamare i nuovi file all’interno della stessa e ricomporre il layout della pagina ci basta utilizzare include o require come già spiegato all’inizio dell’articolo.

Utilizzate quindi la sintassi di PHP per l’inserimento del codice e andate a eseguire il seguente step:

php

In questo modo è stato creato un modello a inclusioni che vi permette di avere 2 file fissi da inserire in tutte le pagine del sito web.

Perché è importante conoscere PHP?

Ogni sviluppatore web dovrebbe conoscere perlomeno i fondamentali di PHP e MySQL per poter fare questo lavoro con competenza. Molto spesso, se non si possiedono tali requisiti, ci si affida a temi premium e WordPress per poter agire ugualmente. Questi, purtroppo, hanno spesso bug da riparare e anche la più semplice richiesta di customizzazione da parte del cliente può diventare un problema se non sapete dove mettere le mani.

Ricordiamo che WordPress è interamente costruito in PHP-MySQL. Se la nostra struttura fosse stata creata per un layout/tema custom, da noi interamente pensato, avremmo avuto la dicitura in figura:

php

Mettetevi alla prova

Volete provare adesso a creare il nostro layout a inclusioni?
Partite scaricando il file di esempio a questo link e seguite il nostro articolo passo passo.

scarica-demo

A voi buon divertimento.

Topic: , ,

Send this to a friend