Nell'ultima lezione, abbiamo capito in quali blocchi sarà composto il modello di viaggio, quindi puoi iniziare. Iniziamo creando due cartelle:
images - questa cartella conterrà tutti i file di immagine utilizzati per definire lo stile del modello. Perché non abbiamo ancora sviluppi di progettazione, quindi gettane uno in questa cartella file grafico altrimenti Joomla non installerà il modello e genererà un errore se la cartella è vuota.
ATTENZIONE: la grafica dei contenuti non può essere inserita nella cartella delle immagini del template!
css - questa cartella conterrà file di fogli di stile a cascata. Per cominciare, inseriamo un file template.css vuoto al suo interno, con l'aiuto del quale verranno assegnati vari stili di design agli elementi del sito.
Successivamente, puoi iniziare a creare il file index.php più importante, che determinerà la posizione visiva degli elementi del sito e indicherà al CMS Joomla in quale blocco posizionare vari componenti e moduli. Il file è una combinazione di PHP e HTML.
Uso sempre solo Macromedia Dreamweaver durante la scrittura del codice. Ottimo programma, la consiglio vivamente ai principianti, perché se commetti un errore mentre lavori sul codice, il programma evidenzierà sicuramente il tuo stipite.
Sul sito troverai un tutorial su Macromedia Dreamweaver. Se hai intenzione di sviluppare siti Web, questo programma dovrebbe essere padroneggiato, almeno per livello base per modificare i codici modello senza errori.
Il posizionamento degli elementi (blocchi) della pagina avviene tramite codice HTML, nello specifico utilizzeremo i tag DIV. Ma il modo in cui il nostro sito funzionerà sul motore Joomla, ad es. sarà dinamico, dovrai anche usarlo linguaggio PHP. Con il suo aiuto, determineremo in quali blocchi si troveranno le posizioni per la visualizzazione dei moduli e come verranno chiamate queste posizioni, se i blocchi collasseranno o meno. Colleghiamo i fogli di stile da file esterni, lingua del contenuto, impostiamo come cambierà la dimensione del sito, ecc.
Intestazione file
L'intestazione del file è composta da più parti. La prima parte del codice dell'intestazione PHP serve per assicurarsi che non si acceda direttamente al file per motivi di sicurezza.
<
?php
definito ("_JEXEC" ) o die ;
JHtml::_("behavior.framework" , true ) ;
$app = JFactory::getApplication() ;
?>
<
?php echo
"<
?"
; ?> versione xml="1.0" codifica=" <
?php echo
$Questo-> _charset ?> "?>
DOCTYPE è un parametro molto importante in base al quale il browser decide come visualizzare questa pagina e come interpretare il CSS.
< ! DOCTYPE html PUBLIC "- / / W3C/ / DTD XHTML 1.0 Strict/ / EN""http: / / www.w3.org/ TR/ xhtml1/ DTD/ xhtml1-strict.dtd">
Il frammento di codice seguente recupera la lingua installata dalla configurazione globale.
< html xmlns= "http://www.w3.org/1999/xhtml" xml:lang=" < ?php echo $Questo->lingua; ?>" lang=" < ?php echo $Questo->lingua; ?>" dir=" < ?php echo $Questo-> direzione; ?>" >
Di seguito è riportato un frammento di codice che include Informazioni aggiuntive per l'intestazione impostata nella configurazione globale. Puoi vedere queste informazioni guardando fonte qualsiasi pagina web. In particolare, questi sono i meta tag che già conosci.
<
head>
<
jdoc:include
type=
"head"
/
>
Le seguenti righe nell'intestazione contengono collegamenti al file principale Stili CSS Joomla.
<
link
rel=
"stylesheet"
href=
"<
?php echo
$Questo-> baseurl ?> /templates/system/css/system.css" tipo="testo /css" /
>
<
link
rel=
"stylesheet"
href=
"<
?php echo
$Questo-> baseurl ?> /templates/system/css/general.css" tipo="testo /css" /
>
Per utilizzare gli stili di progettazione del modello, creiamo un collegamento al file contenente i fogli di stile a cascata template.css, che si trova nella cartella CSS. Non importa che questo file sia ancora vuoto, l'importante è collegarlo, ci occuperemo del design più avanti quando installeremo il template su Joomla. In questo modo sarà più facile vedere il risultato.
< link rel= "stylesheet" href= "< ?php echo $Questo-> baseurl ?> /templates/< ?php echo $Questo-> modello ?> / css/ modello.css" tipo="testo /css" / >
Il seguente frammento di codice ci consente di comprimere le colonne sinistra o destra se non ci sono moduli nelle posizioni "sinistra" e "destra". Se entrambe le colonne sono compresse, il contenuto occupa il 100% della larghezza della pagina. Se è inclusa solo una colonna, il contenuto occupa l'80%. Con due colonne incluse, il contenuto rappresenta il 60% della larghezza della pagina.
<
?php
se ($ Questo-> countModules("sinistra e destra" ) == 0) $contentwidth = "100" ;
se ($ Questo-> countModules("sinistra o destra" ) == 1) $contentwidth = "80" ;
se ($ Questo-> countModules("sinistra e destra" ) == 1) $contentwidth = "60" ;
?>
Colpo di testa vicino
<
/
head>
<
body>
Il blocco “pagina” contiene il design della sola pagina del sito, avrà la larghezza di 950px.
< div id= "page" >
Il blocco "top" si trova nella parte superiore della pagina e contiene due blocchi "logo" e "user1".
< div id= "top" >
Nel bokeh del “logo”, posizioneremo il file grafico del logo, questo verrà scritto nei fogli di stile. Ma scriviamo l'output automatico del nome del sito nel file index.php e il nome viene inserito nel tag H1, che è molto importante per l'ottimizzazione dei motori di ricerca.
<
div id=
"logo"
>
<
h1>
<
?php echo
$app
-
>getCfg("nomesito") ; ?><
/
h1>
<
/
div>
Definiamo la posizione "user1" nel blocco omonimo per visualizzare il modulo di ricerca nel sito.
<
div id=
"user1"
>
<
jdoc:include
type=
"modules"
name=
"user1"
style=
"xhtml"
/
>
<
/
div>
<
/
div>
<
!
-
-
конец блока top -
-
>
Emissione del modulo menu orizzontale nel blocco "user2" nella posizione "user2". Il blocco crollerà se non ci sono moduli in quella posizione.
<
?php if
($Questo-> countModules("user2") ) : ?>
<
div id=
"user2 "
>
<
jdoc:include
type=
"modules"
name=
"user2"
style=
"xhtml"
/
>
<
/
div>
<
?php endif
; ?>
Poi arriva il blocco di intestazione del sito "header". In esso, definiremo la posizione "header" per l'output dei moduli. Il blocco crollerà se non ci sono moduli in quella posizione. Ho intenzionalmente ampliato le capacità di questo blocco per poter inserire non solo l'immagine di intestazione, ma anche i rotatori di immagini.
<
?php if
($Questo-> contaModuli(" intestazione")
)
: ?>
<
div id=
"intestazione">
<
jdoc:include
type=
"modules"
name=
"intestazione" style="xhtml" />
<
/
div>
<
?php endif
; ?>
Nel blocco "user3" definire la posizione "user3" per la visualizzazione dei moduli.
Il blocco collasserà se non viene visualizzato alcun modulo in questa posizione "user3".
<
?php if
($Questo-> countModules("user3") ) : ?>
<
div id=
"user3"
>
<
jdoc:include
type=
"modules"
name=
"user3"
style=
"xhtml"
/
>
<
/
div>
<
?php endif
; ?>
Si apre il blocco della colonna di sinistra, che crollerà se non ci sono moduli nella posizione "sinistra".
<
?php if
($Questo-> countModules("left" ) ) : ?>
<
div id=
"left"
>
<
jdoc:include
type=
"modules"
name=
"left"
style=
"xhtml"
/
>
<
/
div>
<
?php endif
; ?>
Si apre il blocco di contenuto più importante, che può occupare il 100% della larghezza della pagina, l'80% e il 60%, a seconda del numero di colonne incluse.
< div id= "content< ?php echo $contentwidth ; ?> " >
Visualizzazione dei messaggi nei componenti
< jdoc:include type= "message" / >
Uscita del contenuto.
<
jdoc:include
type=
"component"
style=
"xhtml"
/
>
<
/
div>
<
!
-
-
конец блока контента-
-
>
Si apre il blocco della colonna di destra, che verrà collassato se non ci sono moduli nella posizione “destra”.
<
?php if
($Questo-> countModules("right") ) : ?>
<
div id=
"rigth"
>
<
jdoc:include
type=
"modules"
name=
"right"
style=
"xhtml"
/
>
<
/
div>
<
?php endif
; ?>
Output del blocco "footer", progettato per visualizzare il modulo "codice HTML" con informazioni sul copyright. Puoi anche posizionare il fondo qui menù orizzontale o un modulo di presentazione del contenuto. Il blocco collasserà se più di un modulo non viene visualizzato in questa posizione di "piè di pagina"
<
?php if
($Questo-> countModules("footer") ) : ?>
<
div id=
"footer"
>
<
jdoc:include
type=
"modules"
name=
"footer"
style=
"xhtml"
/
>
<
/
div>
<
?php endif
; ?>
Il blocco della pagina del sito "pagina", il corpo e tutto il codice sono chiusi.
<
/
div>
<
!
-
-
конец блока page-
-
>
<
/
body>
<
!
-
-
конец блока body -
-
>
<
/
html>
<
!
-
-
конец кода-
-
>
Abbiamo creato un file index.php completo. Ora sai con quali comandi e in quale ordine vengono visualizzati i blocchi modello.
ATTENZIONE: Affinché il codice del template possa essere letto dal pannello di amministrazione di joomla, il file index.php deve essere aperto nell'editor AkelPad e salvato in codifica UTF-8, deselezionando BOM. Se hai utilizzato il programma Macromedia Dreamweaver per lavorare con il file, devi selezionare "Modifica" > "Proprietà pagina" nel menu di ritorno e selezionare la codifica del documento Unicode (utf-8), deselezionando "abilita firme Unicode (BOM )". Tuttavia, ti consiglio vivamente di non modificare il codice dal pannello di amministrazione di Joomla, se sbagli qualcosa: non puoi tornare indietro, a differenza del programma Macromedia Dreamweaver, dove puoi sempre annullare le modifiche apportate.
Il design stesso dei blocchi sarà descritto in template.css. Ma personalizzeremo i fogli di stile dopo aver installato il modello su Joomla 3 (joomla 2.5), e per questo è necessario creare
2017-01-10
Ciao caro visitatore!
Oggi da pagina iniziale con l'aiuto del linguaggio Programmazione PHP creare pagina dinamica, che verrà ulteriormente generato sul server ad ogni richiesta dell'utente.
Pertanto, modificando la struttura del sito e riempiendolo con pagine simili che cambiano, otterremo un sito dinamico, che lo semplificherà notevolmente in futuro. supporto tecnico e sviluppo rispetto all'opzione statica.
Perché hai bisogno di un sito web dinamico è stato discusso all'inizio. istruzioni passo passo Vedere Installazione di un server Web Denwer locale per una spiegazione della necessità di installare un server Web locale. Pertanto, possiamo tornare indietro e aggiornare questa domanda.
Inoltre, se hai bisogno di considerare ulteriormente i pro ei contro dei siti statici e dinamici, puoi consigliarti di familiarizzare con le pagine della directory online "Puzzleweb.ru" con la sezione Tipi di siti, dove le spiegazioni sono piuttosto concise, ma allo stesso tempo chiaramente diverse opzioni siti.
schermata 12
A questo, possiamo solo aggiungere che per ottenere una risorsa Internet veramente completa, è impossibile saltare questo passaggio e rimanere con l'opzione di un sito statico.
Pertanto, non approfondiremo più la discussione teorica sulla necessità di creare un sito dinamico, ma passeremo a considerare come lo faremo.
Come sapete, la differenza fondamentale tra un sito dinamico e un sito statico è che in un sito statico, le pagine Web già pronte giacciono sul server e aspettano in fila per essere inviate al browser dell'utente. Allo stesso tempo, se le pagine presentano differenze anche minime, diciamo che la differenza è solo in una frase o anche in una parola, allora saranno comunque pagine separate.
Nella versione dinamica, la formazione delle pagine avviene sul server ad ogni richiesta dell'utente, in funzione delle informazioni richieste.
In modo semplice, questo può essere paragonato a un costruttore, in cui è possibile utilizzare un numero limitato di elementi per creare un gran numero di varie figure. Allo stesso tempo, se apporti modifiche a uno degli elementi, si rifletterà nell'intera struttura che include questo elemento.
Sulla base di ciò, faremo apparire la nostra pagina principale creata come un costruttore costituito da determinati elementi (nel nostro caso si tratterà di file), dai quali verranno successivamente assemblate le pagine web su richiesta dell'utente.
Per spiegare i passaggi che eseguiremo per questo, utilizzeremo il codice HTML del frame della pagina principale, ottenuto in una delle fasi di creazione del sito nell'articolo.
"utf-8" >
"Descrizione" contenuto = "Breve descrizione del contenuto della pagina" >
Come puoi vedere dal codice HTML, il container
, progettato per accogliere la parte visibile della pagina web, contiene i seguenti blocchi principali:In questo caso, devi prestare attenzione al fatto che quattro blocchi su cinque sono comuni e solo un blocco "Contenuto principale" sarà diverso per ogni pagina.
Per ottenere elementi di un sito dinamico, separeremo il contenuto di questi blocchi in file separati, che in seguito includeremo durante l'assemblaggio di varie pagine Web su richiesta degli utenti.
Ora, in questa fase, ci saranno solo cinque di questi file. Ma in futuro, quando si aggiungeranno pagine o funzionalità aggiuntive al sito, verranno collegati nuovi file e così via, se necessario.
Tale costruzione della struttura del sito consentirà in futuro di non impegnarsi nel lavoro di routine di modifica del codice HTML di tutte le pagine in caso di sostituzione o integrazione di qualsiasi frammento comune ad esse. In tali casi, sarà sufficiente apportare modifiche solo a un file specifico e questo completerà l'intera procedura di sostituzione. Come puoi vedere, c'è un vantaggio.
Ma per poterlo fare, abbiamo bisogno del linguaggio PHP, con il quale le pagine Web possono accedere a questi blocchi assegnati e trasferire i propri contenuti a se stesse.
Se qualcuno non ha ancora avuto a che fare con il linguaggio PHP, allora è consigliabile conoscerlo meglio, poiché PHP è uno dei più importanti strumenti di sviluppo di siti web. Questo può essere fatto utilizzando vari tipi di letteratura di riferimento, che possono essere trovati in grandi quantità su Runet.
Come opzione, la guida più volte citata "Puzzleweb.ru", in cui una delle sue parti è dedicata all'argomento PHP. Per uno studio più approfondito di PHP, puoi anche utilizzare un libro di riferimento specializzato su misura per questa lingua, pubblicato sul sito "php.ru". Usando il link "https://php.ru/manual/control-structures.intro.html" puoi accedere alla sua pagina "Introduzione", da dove puoi selezionare facilmente qualsiasi sezione del manuale che ti interessa.
Ma per creare ora un sito dinamico e fornire la possibilità di collegare file a pagine HTML, è sufficiente utilizzare solo un'istruzione linguistica (in PHP, qualsiasi script è costituito da una sequenza di istruzioni). Questa può essere una delle quattro possibili opzioni per le istruzioni per la connessione dei file:
Non ha senso descrivere qui le loro caratteristiche, poiché questo è spiegato in dettaglio nei libri di riferimento, ad esempio, utilizzando il collegamento "http://www.puzzleweb.ru/php/26_inc_files.php" puoi capirlo bene.
Useremo l'istruzione "require_once" durante la creazione del sito, di solito utilizzo questa opzione, per me è la più conveniente.
Bene, ora che abbiamo capito cosa faremo, passiamo alle azioni pratiche.
Per formare blocchi che poi parteciperanno all'assemblaggio delle pagine web, devi prima crearli. Questo viene fatto nell'editor di testo Notepad ++ nello stesso modo in cui abbiamo creato il primo file del sito "index.html" nell'articolo. Crea una pagina web e ospitala su un server web locale. Solo l'estensione in questo caso dovrebbe essere specificata non "html", ma "php". Allo stesso tempo, è necessario prestare attenzione alla codifica per evitare in futuro la comparsa di vari tipi di caratteri incomprensibili sulle pagine.
I file verranno creati in una cartella "blocchi" separata e appena creata. Per i file comuni a tutte le pagine, assegneremo nomi basati sui nomi dei blocchi corrispondenti. E per il blocco "principale", specificheremo un nome specifico per ogni pagina del sito.
Pertanto, per la pagina principale, collegheremo un file chiamato "block_glavnaya" al blocco "principale". Per il resto: "header", "section", "aside" e "footer".
Durante la creazione dei file, si può anche tenere conto che per semplificare questa procedura, è possibile copiarli utilizzando il menu "File", specificando un nuovo nome file durante il salvataggio "Salva con nome".
In generale, la creazione di file è una procedura standard, quindi non dovrebbero esserci difficoltà. Alla fine, dovrebbe assomigliare a questo.
Quindi copiamo il contenuto di ciascun blocco e lo trasferiamo nel file appropriato. Diamo un'occhiata a questo in modo più dettagliato usando l'esempio "header.php".
1. Apri il file "index.html" nell'editor Notepad++, seleziona l'area desiderata del blocco "intestazione" e premi alternativamente i pulsanti destro e sinistro del mouse per copiarlo negli appunti.
Va notato che qui copiamo tutto il contenuto del blocco ad eccezione del menu. Questo perché per riflettere il pulsante del menu attivo negli attributi del tag
In futuro, sposteremo anche questi frammenti di menu nei blocchi "intestazione" e "piè di pagina" in file separati, ma per ora non li complicheremo e li lasceremo nello stesso posto.
Come selezionare e copiare negli appunti un frammento del blocco "intestazione" è mostrato nello screenshot qui sotto.
3. Infine, per spostare il contenuto del file in Notepad ++ sul lato sinistro, è necessario premere più volte "Tab" mentre si preme il pulsante "Maiusc". Di conseguenza, otteniamo il file "header.php" generato nella seguente forma.
Faremo lo stesso per altri file. Gli screenshot seguenti mostrano come appariranno i loro contenuti una volta completate tutte le azioni necessarie.
Fig.6 File "sezione.php".
Fig.7 File "block_glavnaya.php"
Fig.8 File "aside.php".
Fig.9 File "footer.php"
Pertanto, abbiamo ricevuto tutti i file per creare una pagina dinamica e ora possiamo andare direttamente al suo codice HTML.
Per fare in modo che la nostra pagina principale carichi i file che sono stati creati nella sezione precedente, devi prima cambiare l'estensione del file "index" da "html" a "php", quindi riaprirlo nell'editor Notepad++ e creare le seguenti modifiche:
Dopo aver eseguito queste operazioni, la nostra pagina principale dovrebbe apparire così.
Dallo screenshot qui sopra, puoi vedere che tutte le istruzioni PHP sono evidenziate con un tag di apertura. Questa notazione viene utilizzata per indicare quando avviare e interrompere l'elaborazione del codice scritto in PHP. Pertanto, in futuro, tutti i codici PHP saranno contraddistinti da questa designazione.
Puoi anche prestare attenzione che i nomi delle nuove pagine siano fatti tenendo conto del loro scopo, in modo che la struttura e il codice del sito siano meglio percepiti.
Questo completa tutte le nostre trasformazioni. E ora, se apriamo di nuovo la pagina principale nel browser, non dovremmo vedere alcuna modifica con la versione precedente del sito, dovrebbe aprirsi allo stesso modo di prima. Ma se il risultato è qualcosa di sbagliato, significa che devi cercare l'errore commesso nelle operazioni di cui sopra.
Aggiorniamo ora il browser e proviamo ad aprire la pagina principale.
Come puoi vedere, nel nostro caso, la pagina principale si è aperta senza problemi. Ma, a differenza del precedente lavoro del sito, la pagina ha acquisito questo modulo a seguito della sua formazione sul server durante l'elaborazione della richiesta.
Così, ora il nostro sito ha la sua prima pagina dinamica. E dopo aver aggiunto altre pagine simili, questo sito può essere giustamente definito dinamico con tutte le conseguenze che ne derivano, ad es. avrà tutti i vantaggi inerenti ai siti dinamici. E saremo in grado di verificarlo quando lo riempiremo con vari tipi di funzionalità in futuro.
Con questo, completeremo questa importante fase di sviluppo del sito e nel prossimo articolo creeremo nuove pagine dinamiche per esso. I codici sorgente dell'ultima versione del sito possono essere scaricati, come di consueto, dal link a fine articolo.
I file sorgente del sito con gli aggiornamenti che sono stati apportati a questo articolo possono essere scaricati dall'allegato materiali aggiuntivi.
Devono essere prese precauzioni. Perché la risorsa può rivelarsi estremamente dinamica. Quello e guarda, mordi!
Ora queste due discipline sono quasi collegate tra loro. Il loro tandem è la base su cui è costruita la "vita" della maggior parte di Internet. Naturalmente, insieme all'html vengono utilizzati anche altri linguaggi lato server (Perl, ASP.NET). Ma la loro prevalenza sul World Wide Web, rispetto a PHP, è puramente episodica.
Secondo le statistiche, l'architettura della maggior parte delle risorse su Internet è costruita sulla base di php e html.
Per molti principianti, la relazione tra queste tecnologie sembra incomprensibile. Da un lato, html statico , che viene interpretato dai browser lato client. D'altra parte, è un linguaggio di programmazione che viene elaborato sul server. Pertanto, prima di scrivere un sito in php da zero, faremo un semplice esempio dell'interazione di queste due tecnologie:
Come puoi vedere nello screenshot, la lineanon viene visualizzato nel codice html della pagina. Sia nel browser che nel codice sono visibili solo la data e l'ora restituite. Ciò significa che lo script è stato elaborato sul lato server. Pertanto, creare un sito in php è fondamentalmente diverso dalla scrittura di semplici pagine html.
Oggi esistono due tipi principali di siti web:
Il codice Java Script viene eseguito nel browser sul lato client.
Un sito php dinamico è costituito dai seguenti file:
Inoltre, il progetto del sito può essere costituito da file che memorizzano il codice delle funzioni e dei metodi php. E includere anche un database.
Nella maggior parte dei CMS, l'origine del contenuto per riempire le pagine generate dinamicamente sul lato server è il database. Il database più utilizzato è MySQL.
Per capire come si crea un sito in php, facciamo un esempio pratico. Naturalmente, gran parte di esso è semplificato, ma l'intero meccanismo di lavoro e le fasi della creazione sono preservate.
Ho un sito html con la seguente struttura e design:
Il suo codice: