HTML, CSS, Bootstrap, Php, Javascript e MySql: Tutto quello che devi sapere per creare un sito dinamico
()
About this ebook
In primo luogo si esplicherà la differenza fra i vari domini esistenti in rete ed in un secondo momento si cercherà di spiegare il CSS e L’HTML per poi entrare nella programmazione PHP (lato server) e JavaScript (lato client) con la creazione di database tramite phpMyAdmin.
Tutto questo sarà esplicato attraverso un sito web esempio creato appositamente utilizzando per semplicità e comodità di base un Bootstrap gratuito e programmando un pannello di controllo con login collegato al sito tramite database per l’inserimento delle immagini direttamente dal web caricandole sul database creato con phpMyAdmin collegato al sito. Ovviamente dopo essere entrati nel mondo dei database e della programmazione si potrà applicare queste conoscenze a qualsiasi altra necessità di iterazione da parte dell’utente richiesta dal progetto del sito.
Obiettivo di questo studio non è la creazione di semplici pagine web che oggi può essere fatta tranquillamente con WordPress o altri software facili da utilizzare, bensì a scopo prettamente didattico spiegare l’utilizzo dei database e della programmazione lato server e lato client per rendere dinamico un sito altrimenti statico. In sintesi, questo lavoro può essere utile a coloro che vogliono approcciarsi all’affascinante mondo della programmazione dei siti web dal principio.
Read more from Olga Maria Stefania Cucaro
Programmare in Visual Basic (VB) Rating: 0 out of 5 stars0 ratingsTabelle Pivot per tutti. Dalle semplici tabelle alle Power-Pivot: Guida utile per la creazione delle Tabelle Pivot in Excel Rating: 0 out of 5 stars0 ratingsBabbo Natale e il violino magico: Una favola di Natale Rating: 0 out of 5 stars0 ratings
Related to HTML, CSS, Bootstrap, Php, Javascript e MySql
Related ebooks
Corso html. La base di ogni sito web Rating: 1 out of 5 stars1/5Vivere di web: Realizzare un progetto web dalla A alla Z Rating: 0 out of 5 stars0 ratingsCorso Css. Dai stile al tuo sito web Rating: 0 out of 5 stars0 ratingsGuadagnare con uno Smartphone Rating: 0 out of 5 stars0 ratingsCreare un blog di successo Rating: 0 out of 5 stars0 ratingsSEO - Guida Strategica Rating: 0 out of 5 stars0 ratingsSviluppare applicazioni ibride per dispositivi mobili Rating: 5 out of 5 stars5/521 Consigli di Web Marketing per Avvocati Rating: 0 out of 5 stars0 ratingsSEO 2020 - La guida definitiva dopo 10 anni di SEO Rating: 5 out of 5 stars5/5I 40 trucchi che devi conoscere per difenderti da chi ti vuole fare il sito internet ma è un incompetente Rating: 0 out of 5 stars0 ratingsCopywriting per Landing Page ad alta conversione Rating: 0 out of 5 stars0 ratingsManuale di buonsenso in rete Rating: 5 out of 5 stars5/5Scrivere per il Web: Come Farsi Leggere nell'Oceano di Internet Rating: 0 out of 5 stars0 ratingsCostruisci la tua lista - Lista per l’e-mail marketing dei tuoi clienti: Costruzione, metodo e tecniche Rating: 0 out of 5 stars0 ratingsDropshipping: Come iniziare Rating: 0 out of 5 stars0 ratingsIntroduzione pratica alla programmazione in C++ - Parte Prima Rating: 0 out of 5 stars0 ratingsCopywriting: Scrivere Per Vendere: Copywriting Persuasivo, #2 Rating: 0 out of 5 stars0 ratingsLa Guida Definitiva Per Sviluppatori Di Software: CONSIGLI E TRUCCHI Rating: 0 out of 5 stars0 ratingsFotografo 2.0: Come promuovere e vendere foto su internet grazie alle agenzie di microstock e photostock Rating: 0 out of 5 stars0 ratingsTrovare lavoro in 7 giorni Rating: 0 out of 5 stars0 ratingsSEO – Come ottimizzare una singola pagina Web Rating: 0 out of 5 stars0 ratingsPython: La Guida Per Imparare a Programmare. Include Esercizi di Programmazione.: Programmazione per Principianti, #1 Rating: 0 out of 5 stars0 ratingsEsperto Seo: Posiziona il tuo Sito al Top dei Motori di Ricerca Rating: 0 out of 5 stars0 ratingsPagina Facebook Vincente: Edizione 2018 Rating: 0 out of 5 stars0 ratingsLavorare da casa con le nuove Professioni on line - Consigli, strategie, segreti per avviare un’attività in rete Rating: 0 out of 5 stars0 ratingsLavorare Online: Professioni digitali, lavori e metodi per guadagnare sul web Rating: 0 out of 5 stars0 ratingsGuadagna con l'outsourcing: Aumenta i tuoi guadagni con l’outsourcing! Rating: 0 out of 5 stars0 ratings
Programming For You
La Programmazione in JAVA Rating: 0 out of 5 stars0 ratingsPython: La Guida Per Imparare a Programmare. Include Esercizi di Programmazione.: Programmazione per Principianti, #1 Rating: 0 out of 5 stars0 ratingsPROGRAMMARE IN C# 10 - Tecniche di base Rating: 0 out of 5 stars0 ratingsPython | Programmazione passo dopo passo: La guida per i principianti per un'introduzione alla programmazione con Python Rating: 0 out of 5 stars0 ratingsCorso di PHP. Livello base. Con esercizi Rating: 0 out of 5 stars0 ratingsVba Se vi Piace 01 Rating: 0 out of 5 stars0 ratingsLe basi di Linux Rating: 0 out of 5 stars0 ratingsLa programmazione orientata agli oggetti Rating: 0 out of 5 stars0 ratingsLa programmazione VB.NET 2008 Rating: 0 out of 5 stars0 ratingsApp Inventor 2 per esempi Rating: 1 out of 5 stars1/5Guida ePUB. Creare, pubblicare, promuovere un e-book a costo zero: Corso completo da Principiante a Esperto (Nuova Versione) Rating: 0 out of 5 stars0 ratingsFondamenti di programmazione in C# 11 Rating: 0 out of 5 stars0 ratingsTecnologia e Progettazione per il mondo digitale e per il web III Rating: 0 out of 5 stars0 ratingsC++ Funzioni e tutorial 40 esempi Rating: 0 out of 5 stars0 ratingsJavascript - 50 funzioni e tutorial Rating: 0 out of 5 stars0 ratingsApp Inventor 2 con database MySQL Rating: 0 out of 5 stars0 ratingsLa Guida Definitiva Per Sviluppatori Di Software: CONSIGLI E TRUCCHI Rating: 0 out of 5 stars0 ratingsHandbook Excel 365: Dalle basi al livello avanzato Rating: 0 out of 5 stars0 ratings
Reviews for HTML, CSS, Bootstrap, Php, Javascript e MySql
0 ratings0 reviews
Book preview
HTML, CSS, Bootstrap, Php, Javascript e MySql - Olga Maria Stefania Cucaro
HTML, CSS, BOOTSTRAP, PHP, JAVASCRIPT E MYSQL
Tutto quello che devi sapere per creare un sito dinamico
All’interno un esempio completo di sito web con inserimento di immagini tramite accesso con password
Di
Olga Maria Stefania Cucaro
Ringraziamenti e copyright
Ringrazio tutti i miei professori di informatica e mia madre, che mi hanno permesso di studiare questa bellissima materia
Copyright di Olga Maria Stefania Cucaro
Questo libro è coperto dal diritto d’autore come anche l’esempio di sito inserito nello stesso che pur essendo un’opera derivata e sostanzialmente originale e quindi coperta anch’essa dal diritto d’autore
Sommario
Introduzione 5
PARTE GENERALE 6
Differenza tra siti e blog 6
Che cosa sono i domini e hosting 6
Come creare pagine senza conoscere i linguaggi con WordPress 7
Come creare pagine utilizzando HTML e CSS 7
Siti dinamici e statici 21
Siti responsive e Bootstrap 21
Come utilizzare i Bootstrap presenti su internet 22
Scaricare i Bootstrap 22
Creare o Modificare i fogli di Stile e quindi la grafica del sito 28
Cosa sono i Database e a cosa servono 47
Creare e gestire Database con phpMyAdmin 48
Gestione dei Database 49
Linguaggi lato client e lato server 49
Il PHP 49
Il JavaScript 50
Esempio della creazione di un sito 50
Creare il progetto 50
Utilizzare Notepad 51
Creare le pagine 52
Modificare il layout delle pagine 52
Scegliere le immagini e i colori 53
Immagini gratuite e a pagamento 53
Immagini create appositamente per il sito 53
Utilizzare XAMPP O WAMP in Windows per gestire siti web in locale 53
Che cosa è WAMP e come funziona 54
Scaricare e installare WAMP 54
Utilizzare WAMP 54
phpMyAdmin e MySQL 61
Login e Menù inserimento immagini e news 64
Pagine e script del sito esempio 70
Pagine del sito in html 71
Pagine html salvate in php poiché includono codice php al loro interno 98
File php da inserire nella cartella del sito 162
Altri file presenti nella cartella del sito 197
Modificare lo stile del sito 198
Visionare il sito su WAMP 200
Pubblicazione del sito 208
Conclusioni 215
Introduzione
Questo libro ha l'obiettivo di iniziare coloro che vogliono creare autonomamente un sito web, al mondo dei domini e della programmazione legata al web. L’autore ha pensato questo lavoro come opera scientifica destinata all’uso didattico e di studio per tutti coloro che si approcciano allo studio della programmazione lato client e lato server.
In primo luogo si esplicherà la differenza fra i vari domini esistenti in rete ed in un secondo momento si cercherà di spiegare il CSS e L’HTML per poi entrare nella programmazione PHP (lato server) e JavaScript (lato client) con la creazione di database tramite phpMyAdmin.
Tutto questo sarà esplicato attraverso un sito web esempio creato appositamente utilizzando per semplicità e comodità di base un Bootstrap gratuito e programmando un pannello di controllo con login collegato al sito tramite database per l’inserimento delle immagini direttamente dal web caricandole sul database creato con phpMyAdmin collegato al sito. Ovviamente dopo essere entrati nel mondo dei database e della programmazione, si potrà applicare queste conoscenze a qualsiasi altra necessità d’iterazione da parte dell’utente richiesta dal progetto del sito.
Obiettivo di questo studio non è la creazione di semplici pagine web che oggi può essere fatta tranquillamente con WordPress o altri software facili da utilizzare, bensì a scopo prettamente didattico spiegare l’utilizzo dei database e della programmazione lato server e lato client per rendere dinamico un sito altrimenti statico. In sintesi, questo lavoro può essere utile a coloro che vogliono approcciarsi all’affascinante mondo della programmazione dei siti web dal principio.
PARTE GENERALE
Differenza tra siti e blog
Il blog viene aggiornato giornalmente, o settimanalmente non nuove notizie di cui il blogger ha deciso di parlare nel blog costruito ad hoc (blog di cucina, di programmazione, ecc.). Il sito può essere aggiornato solo quando cambiano le informazioni dell’azienda o nel caso di sito portfolio o e-commerce quando cambiano i prodotti o i prezzi degli stessi.
I siti possono essere sia statici sia dinamici, mentre un blog deve necessariamente essere dinamico in quanto deve essere continuamente aggiornato. I siti statici vengono creati in html e css e sono modificabili solo da un esperto attraverso i file sorgente, mentre i siti dinamici hanno molte iterazioni con l’utente che modificano le pagine automaticamente. Esempi di siti dinamici sono i siti e-commerce e i blog che ti permettono di selezionare ciò che ti interessa o di interagire con il sito in vari modi.
Per creare siti dinamici e responsive o blog ora si usano degli hosting con pannelli di controllo semplici detti anche Content Management System (CMS) come il software open source Wordpress. Questo è il metodo più semplice per creare e aggiornare continuamente e con facilità il proprio sito senza avere nessuna conoscenza specifica.
Che cosa sono i domini e hosting
Per rendere pubblico un sito web è necessario un dominio. Il dominio è reso disponibile da un provider e può essere gratuito o a pagamento. Solitamente i domini di primo livello sono quelli che identificano un territorio, mentre quelli che interessano gli utenti sono quelli di secondo, terzo e quarto livello.
I domini di secondo livello sono quelli che usualmente troveremo a pagamento e identificano l’utente (ad esempio www.utente.com). Quelli di secondo e terzo livello per la maggior parte sono disponibili gratuitamente sul web (ad es. possiamo avere www.altervista.utente.com). I domini di secondo, terzo e quarto livello possono essere anche collegati al proprio sito (ad es. possiamo avere blog.utente.com).
Quando vogliamo mettere online delle pagine web, dobbiamo richiedere anche un hosting (spazio web), dall’inglese to host
che significa ospitare
. Spesso il provider che sceglieremo ci darà sia il dominio sia l’hosting gratis o a pagamento. Questo dipende dalle condizioni offerte dal provider.
Nell’esempio che spiegheremo nel prosieguo di questo libro, abbiamo scelto un hosting con un dominio di terzo livello gratuito da Altervista.
Ovviamente se sei un programmatore e stai vendendo un sito ad un cliente, non potrai utilizzare un dominio di terzo livello, ma ne utilizzerai uno di secondo livello con hosting a pagamento che trasferirai all’azienda dopo aver realizzato il sito o che gestirai annualmente. Questo dipenderà dal contratto predisposto con il cliente.
Come in tutto ciò che riguarda la programmazione, la scelta dell’hosting a pagamento o gratuito dipende dal risultato finale che si vuole ottenere. L’hosting a pagamento ha dei servizi aggiuntivi e vari indirizzi di posta elettronica abbinati al dominio, inoltre essendo composto solo dal nome dell’azienda o della persona potrebbe essere facilitato nella ricerca di Google.
Come creare pagine senza conoscere i linguaggi con WordPress
Wordpress è un software open source che permette di creare e aggiornare in maniera dinamica il blog o il sito. Attraverso un CMS (Content Management System) molto intuitivo permette di aggiungere contenuti testuali, video e immagini senza lavorare sul codice direttamente nelle pagine del nostro sito. Offre anche la possibilità se si conoscono delle basi di linguaggio html, di modificarlo in modo diretto dal codice sorgente. Ovviamente questa piattaforma offre tante possibilità di utilizzare widget e modelli da poter avere, al termine del lavoro di creazione, un blog personalizzato, ma non quanto ci permetterebbe di fare una creazione personalizzata con codice html, php, javascript e mysql dove possiamo creare il nostro sito da zero senza temi prefabbricati. Per personalizzare maggiormente il sito basato su un tema, posso aggiungere un CSS all'interno dello stesso.
Il Wordpress rimane comunque un’ottima scelta e ci permette anche di inserire del codice php. In questo caso posso andare su aspetto editor del tema e entrare nelle funzioni del tema un file chiamato function.php. Questo non è molto raccomandabile in quanto tutto il codice aggiuntivo verrà perso quando ci sarà l’aggiornamento del tema.
Esiste invece un plug-in per inserire il codice php che si chiama Code Snippets
. Dopo l’installazione e l’attivazione troverò sul menù principale, Snippets e potrò usare alcuni file presenti o crearne di nuovi.
Come creare pagine utilizzando HTML e CSS
Quando scriviamo un sito in html, il nostro PC (CLIENT) comunica con un altro computer chiamato SERVER che fornisce una risposta al Client.
Il client fa una richiesta al Server che risponde interpretando il linguaggio html e visualizzando il sito.
Per creare pagine web si può utilizzare un semplice wordpad o blocco note o il più avanzato Notepad che evidenzia anche gli errori di scrittura delle istruzioni.
HTML rappresenta la struttura del sito, mentre CSS può essere considerato il vestito (la grafica) del sito.
L’html è un linguaggio di markup e non di programmazione. Infatti, il browser traduce il codice e ci permette di visualizzare la pagina web.
I tag sono fondamentali per dare una struttura alla pagina che verrà poi tradotta dal browser.
Esempio di elemento o tag:
Titolo pagina
Titolo paragrafo
Titolo pagina