Come creare la tua prima Web Application con Microsoft Visual Studio

Microsoft Visual Studio è un ambiente di sviluppo integrato per sviluppare web application per varie piattaforme, tra cui anche applicazioni Mobile, Console e tanto altro ancora. Da non confondere con Visual Studio Code, che è un editor di testi, della Microsoft, open source e multipiattaforma, utilizzabile gratuitamente sui più diffusi sistemi operativi, tramite il quale è possibile sviluppare, utilizzando le innumerevoli estensioni a sua disposizione, con molti linguaggi di programmazione disponibili.

---

LEGGI ANCHE: Come creare il tuo primo programma con Qt Creator

---

1. Download Visual Studio Community

Come quasi tutti gli applicativi della Microsoft, anche Visual Studio è un software a pagamento, ma ha una versione gratuita, chiamata community, che puoi scaricare e utilizzare gratuitamente sul tuo PC.

Quindi, apri il tuo browser web preferito e recati a questo indirizzo web. Qui hai la possibilità di scaricare la versione di Visual Studio, la Community per l’appunto, e procedere con la fase di installazione.

L’installazione di Visual Studio non è diversa dalle tante installazioni a cui Microsoft ci ha abituato, pertanto, lancia il setup.exe e procedi con le opzioni suggerite fino a termine installazione di Visual Studio.

Se hai difficoltà con l’installazione, cosa che dubito fortemente vista la sua semplicità, guarda questo video tutorial che ti spiegherà nel dettaglio la procedura.

2. Sviluppa la tua prima applicazione web con Visual Studio

Come ho precedentemente annunciato, Visual Studio è un ambiente di sviluppo Integrato. Questo vuol dire che essendo un software studiato per sviluppare applicativi per ogni piattaforma e di ogni tipo, e tutt’altro che semplice e a prima vista anche molto disarmante.

Questa è l’impressione che solitamente ha un principiante, ma considera che Visual Studio è stato studiato per snellire le fasi di progettazione di un software e non per complicarle. Quindi, questa impressione, ammesso che tu l’abbia avuta, non corrisponde a quella che è la vera natura di Visual Studio. Pertanto, prenditi qualche minuto, è ti mostrerò come creare la tua prima web app.

Quindi, dopo aver eseguito Visual Studio clicca sulla voce di menu File > New > Project, come mostrato in figura.

La maschera che segue, è quella che ti fa capire subito le potenzialità di questo software. Infatti, come puoi notare dal contenuto presente nel frame di sinistra, Visual Studio ti permette di sviluppare una stessa applicazione sfruttando più linguaggi di programmazione, (in figura evidenziati in verde).

Per quanto riguarda il nostro obiettivo tu devi selezionare, in sequenza, tutte gli elementi evidenziati in rosso.

Quella che segue, è la maschera di selezione della tipologia di progetto da scegliere. Anche qui, seleziona le voci evidenziate in rosso e conferma.

Dopo alcuni secondi il nostro progetto è pronto per poter essere modificato e gestito a nostro piacimento. Nello stato in cui è adesso il progetto, se venisse eseguito, non verrebbe mostrata alcuna informazione nella finestra del browser web predefinito. Perché essendo una web application sarà il browser a dare vita alla nostra applicazione web.

Pertanto è necessario creare una pagina di tipo Web Form. Una pagina Web Form non è altro che una normalissima pagina HTML di estensione aspx e con l’attributo runat=”server” aggiunto ai normalissimi TAG html già presenti.

Quindi, seleziona le voci, come mostrato in figura, e il sistema creerà la prima pagina Web form del progetto.

3. Come deve essere una Web Form, ideale, di partenza

La Web Form predefinita, che Visual Studio crea, è una pagina web con il minimo necessario previsto per una pagina web classica. È logico che con il codice incluso di default nella web form, il risultato è ancora piuttosto deludente.

Ma non disperare, ogni buon programmatore ha sempre nella sua cassetta degli attrezzi il materiale giusto che l’esperienza gli ha fornito negli anni. Quindi, adesso ti darò il codice che dovrai copiare e incollare, sempre, nella tua web form, è che includerà tutto il necessario per dar vita ai nostri contenuti web.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="WebApplication7.index" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <meta charset="UTF-8">
    <title>Titolo della pagina</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<body>
    <!-- HEADER -->
    <header class="pt-4 pb-4 bg-dark text-light">
        <div class="container">
            <center>
            <h1>La mia prima Web Application</h1>
            </center>
        </div>
    </header>
    <!-- FINE HEADER -->

    <form runat="server">
        <!-- CONTAINER FLUID RESPONSIVE -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 bg-secondary text-white p-5">
                    <p id="p1" runat="server">Lorèm ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
                       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                       nisi ut aliquip ex ea commodo consequat.
                    </p>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                </div>
                <div class="col-xs-12 col-sm-6 col-md-8 col-lg-9 bg-info text-dark p-5">
                    <p>Lorèm ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 
                       magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
                       commodo consequat.
                    </p>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                       Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </div>
            </div>
        </div>
        <!-- FINE CONTAINER FLUID RESPONSIVE -->
    </form>

    <!-- FOOTER -->
    <footer class="pt-4 pb-4 bg-dark text-light">
        <div class="container">
            <center>
            <h3>La mia Web Form...</h3>
            </center>
        </div>
    </footer>
    <!-- FINE FOOTER -->
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</html>

Adesso, senza tante pretese, dai un’occhiata alle parti evidenziate nella figura sottostante. Puoi notare che il paragrafo identificato dall’ID -> p1, ha un contenuto predefinito. Questo contenuto lo modificheremo in Hello World…!, quando cliccheremo sul pulsante identificato con l’ID -> Button1.

Quindi, cliccando sul pulsante Design, seleziona il pulsante Button1, come mostrato in figura e, dalla finestra delle proprietà del pulsante button1, clicca nel riquadro bianco posizionato a destra della dicitura click.

A questo punto, riporta esattamente, come mostrato in figura, il codice evidenziato in rosso e che sovrascriverà, al click sul pulsante button1, al contenuto del paragrafo p1 il saluto Hello World…!.

Quindi, Premi la combinazione di tasti Ctrl+Shift+S, per salvare tutte le modifiche, e avvia il progetto selezionando il browser web che preferisci, io ho selezionato Google Chrome, e clicca sul triangolino verde.

Dopo qualche secondo si aprirà il browser web e la tua applicazione verrà mostrata nella finestra attiva del browser. Clicca sul pulsante e vedrai comparire il saluto Hello World…! Così come lo hai programmato nell’editor di codice.

---

LEGGI ANCHE: Come creare un app Android senza scrivere una sola riga di codice

---

4. Conclusioni

Questa che abbiamo appena realizzato è una web application che, per quanto semplice, rappresenta la filosofia di massima che solitamente seguirai per progettare una tua pagina web.

Ad ogni modo in questo video tutorial, potrai seguire la creazione di una applicazione web con Visual Studio e che ripercorre tutto quello che abbiamo fatto seguendo i passaggi esposti in questa guida.