DotNetCampania
Il primo portale campano dedicato allo sviluppo software con tecnologie Microsoft

Creazione di un sito web con Orchard - Prima Parte

100% of people found this useful
Creazione di un sito web con Orchard - Prima Parte

Introduzione

Che cos'è Orchard

Orchard è un Content Management System gratuito e open source realizzato da Microsoft. Completamente modulare, ha un'architettura basata su tutta una serie di framework e pattern che ne rendono l'estendibilità uno dei suoi punti di forza, abilitando di fatto gli sviluppatori .net a realizzare praticamente qualsiasi tipo di modulo. Ed è questo il segreto di Orchard: ogni suo componente è un modulo e come tale può essere installato, disinstallato, abilitato o disabilitato. Il progetto dispone già di un'ampia gallery di moduli già pronti, realizzati dal team di Orchard ma anche da sviluppatori indipendenti; noi stessi possiamo condividerne con la community del CMS. E' inoltre completamente personalizzabile dal punto di vista grafico, partendo da un tema già pronto, scaricato sempre dalla gallery, o partendo completamente da zero.

Sono quattro le figure che ruotano attorno all'ecosistema Orchard: l'amministratore che installa e configura l'ambiente; lo sviluppatore che può realizzare moduli aggiuntivi; il designer che realizza o modifica l'html e i css del tema da utilizzare; l'utente che usufruisce dei contenuti presentati.

Cosa vogliamo realizzare?

Con la versione 1.1 Orchard ha già raggiunto un grado di maturità tale da poterlo usare in produzione per progetti medio-piccoli. Lo scopo di questa serie di articoli è proprio quello di mostrare come sia possibile, da zero, realizzare un sito web reale. Nel caso specifico si tratta del sito di presentazione di una piccola azienda di impianti elettrici, utilizzando un template scelto dall'azienda stessa, quindi nessun template della gallery di Orchard. Inoltre, nonostante sia possibile partire dai sorgenti rilasciati pubblicamente e utilizzare Visual Studio 2010 per editare alcuni componenti, useremo Web Matrix.

Creazione e configurazione del progetto

Creazione del progetto in Web Matrix

Il primo passo consiste nel creare il nostro progetto con Web Matrix. Cliccando su Site From Web Gallery vi verranno visualizzati i template disponibili tra cui, nella categoria CMS, troveremo Orchard. Indichiamo a questo punto il nome che vogliamo dare al sito nella casella di testo etichettata Site Name, nel nostro caso Comap Impiantistica, e clicchiamo sul tasto Next.

Ci verrà chiesto di accettare le condizioni di utilizzo, clicchiamo su I Accept e attendiamo qualche secondo per la creazione del progetto. A conferma avvenuta clicchiamo sul pulsante Ok.

Web Matrix configura per noi tutto l'ambiente di lavoro, fornendoci fin da subito la possibilità di avviare il sito, che sarà hostato sulla nostra macchina locale grazie ad IIS Express. Cliccando sul link etichettato URL verrà aperto il browser predefinito che visualizzerà il sito web.

Configurazione iniziale del sito web

Al primo avvio il framework di Orchard verifica l'esistenza di una configurazione per il sito; se non trovata, come nel nostro caso,  verranno richieste le informazioni necessarie alla sua creazione. Dobbiamo semplicemente specificare il nome del sito, l'account dell'amministratore, il tipo di storage che vogliamo utilizzare e la preconfigurazione preferita.

Nome del sito e credenziali sono successivamente modificabili dal pannello di amministrazione, mentre non è così indolore modificare il tipo di storage, a scelta tra il nuovo SQL Server Compact, uno storage locale basato su file che non necessita di nessuna installazione aggiuntiva sul server che ospiterà il sito, o un'istanza di Sql Server, anche Express, che invece richiede una precedente installazione e configurazione. Il fatto che non sia indolore il passaggio non significa che non si possa fare, intanto per il nostro esempio utilizzeremo Sql Server Compact.

La scelta della preconfigurazione inziale, denominata Recipe nell'ecosistema Orchard, permette di preinstallazione e attivare tutta una serie di moduli utili ad una determinata tipologia di sito. La Default installa e attiva i moduli più comuni per un sito di presentazione contenuti, Blog invece installa e configura l'ambiente per essere usato come blog personale; Core invece è un'installazione base molto utile per lo sviluppo di moduli aggiuntivi. Scegliamo Default per il nostro esempio e clicchiamo sul pulsante Finish Setup.

Con la configurazione Default viene creata una Home Page all'interno della quale vengono inseriti, a titolo di esempio, dei contenuti in varie zone. Essendo autenticati automaticamente con il ruolo di amministratore, abbiamo i permessi necessari a editare tali contenuti, cliccando sulle piccole etichette Edit nell'angolo in alto a destra di ogni sezione.Andiamo ad esempio ad eliminare le tre colonne First, Second e Thrid Leader Aside, cliccando sulle rispettive etichette Edit.

Il click sull'etichetta Edit ci porta al pannello di amministrazione di Orchard, chiamato Dashboard, direttamente nella pagina che permette di gestire il contenuto sul quale si è cliccato. Scorrendo in fondo alla pagina troviamo il pulsante Delete per l'eliminazione del contenuto.

Creazione del tema

Il template utilizzato

Il template che utilizzeremo è stato selezionato dal cliente stesso da una collezione di temi scaricabili da internet.

Ovviamente il grafico ha apportato alcune modifiche per inserire il logo dell'azienda, e localizzare in italiano i testi di alcune immagini.

Creazione del nuovo tema

Per creare il nostro tema abbiamo diverse possibilità, una di queste è l'utilizzo della console di Orchard, che potete avviare  dalla cartella bin del progetto cliccando sul file Orchard.exe. Verrà aperta la console che, dopo qualche secondo, ci offrirà, attraverso il prompt, la possibiità di digitare dei comandi. Per la generazione di un tema il comando è codegen theme <nometema>, nel nostro caso codegen theme comapimpiantistica.

Come potete notare dalla figura il comando non è riconosciuto. Questo perchè anche la Code Generation è un modulo in Orchard e come tale va installato e attivato. Questa operazione si può fare da console, ma è più pratico utilizzare il pannello Modules della Dashboard, cliccare sul tab Gallery, cercare i moduli che rispondono al nome code generation e cliccare sul link Install.

Attiviamo il modulo e rilanciamo il comando, in modo da creare il nostro nuovo tema

Una volta creato il tema possiamo impostarlo come tema corrente dalla dashboard, selezionando la voce di menu Themes, e cliccando sul pulsante Set Current in corrispondenza del nuovo tema.

Ed ecco il risultato provvisorio:

Nel prossimo articolo vedremo come modificare il tema per ottenere l'aspetto scelto dal cliente.

Recent Comments

Leave the first comment for this page.

Associazione Culturale DotNetCampania - C.F.: 95127870632

Powered by Community Server (Commercial Edition), by Telligent Systems