Latihan - Hubungkan aplikasi ASP.NET ke Azure SQL Database

  • 10 menit

Database Anda telah dibuat. Sekarang Anda dapat mengonfigurasi dan menyebarkan aplikasi web yang dapat digunakan penasihat akademik untuk mendiskusikan kursus dan rencana belajar dengan siswa. Aplikasi ini menggunakan System.Data.SqlClient pustaka untuk mengambil dan menampilkan detail kursus dan modul yang harus diteruskan siswa untuk menyelesaikan kursus.

Untuk menghemat waktu, kami menggunakan aplikasi web yang sudah ada sebelumnya dan menunjukkan kepada Anda cara menambahkan kode yang menghubungkan aplikasi ini ke database Anda. Diagram berikut menunjukkan komponen utama aplikasi ini:

High-level view of the application structure.

Untuk mengonfigurasi aplikasi web, lakukan hal-hal berikut:

  • Buat kelas yang menyimpan nama kursus, judul modul, dan urutan untuk setiap modul dalam database.
  • Buat kelas pengontrol akses data yang mengambil informasi dari database.
  • Edit kode di belakang halaman indeks dalam aplikasi web untuk membuat objek pengontrol akses data dan mengambil data.
  • Edit halaman indeks untuk menampilkan data.

Sebarkan dan jalankan aplikasi web yang sudah ada

  1. Ubah direktori kerja Anda ke education folder .

    cd ~/education

  2. Jalankan perintah berikut untuk membuat dan menyebarkan aplikasi web awal.

    WEBAPPNAME=educationapp-$RANDOM
az webapp up \
    --resource-group <rgn>[Sandbox resource group]</rgn> \
    --location centralus \
    --sku F1 \
    --name $WEBAPPNAME

  3. Ketika aplikasi web telah disebarkan, output menunjukkan App_url dengan URL situs web. Buka situs ini di tab baru.

    The education web app running. Currently, no data is displayed.

    Anda ingin aplikasi web menampilkan daftar kursus dan modul yang menyusun setiap kursus. Saat ini, aplikasi tidak mengambil atau menampilkan data ini. Jadi, Anda perlu memperbarui kode untuk mendapatkan data dari database dan menampilkannya.

Tambahkan kode ke aplikasi web untuk mengambil data

Sekarang tambahkan kode ke aplikasi untuk mengambil data kursus dari database.

  1. Di Cloud Shell, buka education/Models folder .

    cd ~/education/Models

    Folder ini berisi dua file, CoursesAndModules.cs dan DataAccessController.cs.

  2. Gunakan editor kode untuk membuka CoursesAndModules.cs file.

    code CoursesAndModules.cs

    File ini berisi kelas kosong bernamaCoursesAndModules.

    namespace CoursesWebApp.Models
{
    public class CoursesAndModules
    {
        // TODO: Define the CourseName, ModuleTitle, and Sequence read-only properties

        // TODO: Create a constructor that initializes the fields behind the properties
    }
}

  3. Ganti komentar // TODO: Define the CourseName, ModuleTitle, and Sequence read-only properties dengan kode berikut.

    public string CourseName { get; }
public string ModuleTitle { get; }
public int Sequence { get; }

    Kode ini menentukan sekumpulan bidang baca-saja yang berisi data untuk setiap baris yang ditampilkan oleh aplikasi web.

  4. Ganti komentar // TODO: Create a constructor that initializes the fields behind the properties dengan konstruktor berikut.

    public CoursesAndModules(string courseName, string moduleTitle, int sequence)
{
    this.CourseName = courseName;
    this.ModuleTitle = moduleTitle;
    this.Sequence = sequence;
}

    Konstruktor ini mengisi bidang dengan data untuk ditampilkan. File lengkap harus berisi kode berikut.

    namespace CoursesWebApp.Models
{
    public class CoursesAndModules
    {
        public string CourseName { get; }
        public string ModuleTitle { get; }
        public int Sequence { get; }

        public CoursesAndModules(string courseName, string moduleTitle, int sequence)
        {
            this.CourseName = courseName;
            this.ModuleTitle = moduleTitle;
            this.Sequence = sequence;
        }
    }
}

  5. Simpan file dengan menekan Ctrl+S, dan tutup editor kode dengan menekan Ctrl+Q.

  6. Gunakan editor kode untuk membuka DataAccessController.cs file.

    code DataAccessController.cs

    File ini berisi kelas kosong bernamaDataAccessController. Kelas ini berisi logika akses data untuk menyambungkan ke database dan mengambil data kursus dan modul. Ini mengisi daftar CoursesAndModules objek dengan data ini.

    using Microsoft.Extensions.Options;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Threading.Tasks;

namespace CoursesWebApp.Models
{
    public class DataAccessController
    {
        // TODO: Add your connection string in the following statements
        private string connectionString = "<Azure SQL Database Connection String>";

        // Retrieve all details of courses and their modules
        public IEnumerable<CoursesAndModules> GetAllCoursesAndModules()
        {
            List<CoursesAndModules> courseList = new List<CoursesAndModules>();

            // TODO: Connect to the database
            //using ()
            {
                // TODO: Specify the Transact-SQL query to run

                // TODO: Execute the query

                // TODO: Read the data a row at a time

                // TODO: Close the database connection
            }
            return courseList;
        }
    }
}

  7. Biarkan editor kode terbuka, dan beralih ke portal Azure.

  8. Pada menu portal Azure, pilih Database SQL, lalu pilih database Anda. Database SQL untuk coursedatabaseNNN muncul.

  9. Di panel menu sebelah kiri, di bawah Pengaturan, pilih String koneksi. Salin string koneksi ADO.NET ke clipboard.

    The connection string pane in the Azure portal.

  10. Kembali ke editor kode. Ganti nilai variabel connectionString dengan nilai dari papan klip. Dalam string koneksi, lihat teks User IDdengan nilaiazuresql. Ganti teks {your_password} dengan kata sandi untuk akun ini.

    private string connectionString = "Server=tcp:courseservernnn.database.windows.net,1433;Initial Catalog=coursedatabasennn;Persist Security Info=False;User ID=azuresql;Password=<password>;MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;";

  11. Setelah komentar //TODO: Connect to the database, ganti pernyataan using yang diberi komentar dengan kode berikut.

    using (SqlConnection con = new SqlConnection(connectionString))

    Kode ini membuat SqlConnection objek baru yang menggunakan string koneksi Anda untuk menyambung ke database.

  12. Ganti komentar // TODO: Specify the Transact-SQL query to run dengan pernyataan berikut.

    SqlCommand cmd = new SqlCommand(
    @"SELECT c.CourseName, m.ModuleTitle, s.ModuleSequence
    FROM dbo.Courses c JOIN dbo.StudyPlans s
    ON c.CourseID = s.CourseID
    JOIN dbo.Modules m
    ON m.ModuleCode = s.ModuleCode
    ORDER BY c.CourseName, s.ModuleSequence", con);
cmd.CommandType = CommandType.Text;

    Objek SqlCommand berisi pernyataan Transact-SQL (T-SQL) yang mengambil data untuk semua kursus dan modul. Ini menggabungkan mereka dengan menggunakan informasi dalam dbo.StudyPlan tabel.

  13. Ganti komentar // TODO: Execute the query dengan kode berikut.

    con.Open();
SqlDataReader rdr = cmd.ExecuteReader();

    Pernyataan ini membuka koneksi ke database dan menjalankan pernyataan T-SQL. Anda dapat menggunakan SqlDataReader objek untuk mengambil hasil satu baris sekaligus.

  14. Ganti komentar // TODO: Read the data a row at a time dengan blok kode berikut.

    while (rdr.Read())
{
    string courseName = rdr["CourseName"].ToString();
    string moduleTitle = rdr["ModuleTitle"].ToString();
    int moduleSequence = Convert.ToInt32(rdr["ModuleSequence"]);
    CoursesAndModules course = new CoursesAndModules(courseName, moduleTitle, moduleSequence);
    courseList.Add(course);
}

    Blok ini mengulangi baris yang dikembalikan dalam objek SqlDataReader. Kode mengekstrak data dalam bidang di setiap baris dan menggunakannya untuk mengisi objek CoursesAndModules baru. Objek kemudian ditambahkan ke daftar.

  15. Ganti komentar // TODO: Close the database connection dengan pernyataan berikut.

    con.Close();

    Pernyataan ini menutup koneksi ke database dan melepaskan semua sumber daya yang ditahan.

    Kelas yang telah selesai harus berisi kode berikut, yang menyertakan string koneksi untuk database Anda.

    using Microsoft.Extensions.Options;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Threading.Tasks;

namespace CoursesWebApp.Models
{
    public class DataAccessController
    {
        // Add your connection string in the following statements
        private string connectionString = "Server=tcp:courseserver101.database.windows.net,1433;Initial Catalog=coursedatabase101;Persist Security Info=False;User ID=azuresql;Password=<password>;MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;";

        // Retrieve all details of courses and their modules    
        public IEnumerable<CoursesAndModules> GetAllCoursesAndModules()
        {
            List<CoursesAndModules> courseList = new List<CoursesAndModules>();

            // Connect to the database
            using (SqlConnection con = new SqlConnection(connectionString))
            {
                // Specify the Transact-SQL query to run
                SqlCommand cmd = new SqlCommand(
                    @"SELECT c.CourseName, m.ModuleTitle, s.ModuleSequence
                    FROM dbo.Courses c JOIN dbo.StudyPlans s
                    ON c.CourseID = s.CourseID
                    JOIN dbo.Modules m
                    ON m.ModuleCode = s.ModuleCode
                    ORDER BY c.CourseName, s.ModuleSequence", con);
                cmd.CommandType = CommandType.Text;

                // Execute the query
                con.Open();
                SqlDataReader rdr = cmd.ExecuteReader();

                // Read the data a row at a time
                while (rdr.Read())
                {
                    string courseName = rdr["CourseName"].ToString();
                    string moduleTitle = rdr["ModuleTitle"].ToString();
                    int moduleSequence = Convert.ToInt32(rdr["ModuleSequence"]);
                    CoursesAndModules course = new CoursesAndModules(courseName, moduleTitle, moduleSequence);
                    courseList.Add(course);
                }

                // Close the database connection
                con.Close();
            }
            return courseList;
        }
    }
}

  16. Simpan file, dan tutup editor Kode.

Tambahkan kode ke aplikasi web untuk menampilkan data

Aplikasi sekarang dapat mengambil data kursus. Sekarang, perbarui aplikasi untuk menampilkan data kepada pengguna.

  1. Di Cloud Shell, pindah ke education/Pages folder .

    cd ~/education/Pages

    Folder ini berisi halaman .cshtml dan file kode yang digunakan aplikasi web untuk menampilkan informasi.

  2. Gunakan editor kode untuk membuka Index.cshtml.cs file.

    code Index.cshtml.cs

    File ini berisi kode yang dijalankan halaman indeks saat ditampilkan. Kode mendefinisikan kelas CoursesAndModulesModel. Halaman indeks menggunakan model ini untuk menampilkan detail kursus dan modul. Dalam file ini, Anda perlu menambahkan kode yang menggunakan objek DataAccessController untuk mengambil data itu.

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using CoursesWebApp.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace CoursesWebApp.Pages
{
    public class CoursesAndModulesModel : PageModel
    {
        // TODO: Create a DataAccessController object

        // TODO: Create a collection for holding CoursesAndModules object

        public void OnGet()
        {
            // TODO: Retrieve the data using the DataAccessController object and populate the CoursesAndModules object
        }
    }
}

  3. Di Index.cshtml.cs, ganti komentar // TODO: Create a DataAccessController object dengan kode berikut untuk membuat objek baru DataAccessController .

    DataAccessController dac = new DataAccessController();

  4. Ganti komentar // TODO: Create a collection for holding CoursesAndModules object dengan kode berikut.

    public List<CoursesAndModules> CoursesAndModules;

  5. Dalam metode OnGet, ganti komentar // TODO: Retrieve the data using the DataAccessController object and populate the CoursesAndModules object dengan kode berikut. Kode ini menggunakan DataAccessController objek untuk mengisi daftar dengan data dari database.

    CoursesAndModules = dac.GetAllCoursesAndModules().ToList();

    File yang telah selesai harus berisi kode berikut.

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using CoursesWebApp.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace CoursesWebApp.Pages
{
    public class CoursesAndModulesModel : PageModel
    {
        // Create a DataAccessController object
        DataAccessController dac = new DataAccessController();

        // Create a collection for holding CoursesAndModules object
        public List<CoursesAndModules> CoursesAndModules;

        public void OnGet()
        {
            // Retrieve the data using the DataAccessController object and populate the CoursesAndModules object
            CoursesAndModules = dac.GetAllCoursesAndModules().ToList();
        }
    }
}

  6. Simpan file, dan tutup editor kode.

  7. Gunakan editor kode untuk membuka file Index.cshtml.

    code Index.cshtml

    File ini berisi logika tampilan untuk halaman indeks. Ini ditentukan CoursesAndModulesModel sebagai sumber data. Kode yang kami tambahkan membuat dan mengisi model ini.

    Halaman tersebut menggunakan data HTML untuk menampilkan data dari model. Saat ini, halaman tersebut hanya menampilkan judul tabel. Badan tabel (<tbody>) kosong.

    <h2>Courses and Modules</h2>
<div>
    <table class="table">
        <thead>
            <tr>
                <th>
                    Course Name
                </th>
                <th>
                    Modules
                </th>
                <th>
                    Sequence
                </th>
            </tr>
        </thead>
        <tbody>
            <!-- TODO: Display the data from the CoursesAndModules collection -->
        </tbody>
    </table>
</div>

  8. Ganti komentar <!-- TODO: Display the data from the CoursesAndModules collection --\> dengan markup berikut.

    @foreach(var courseAndModule in Model.CoursesAndModules)
{
<tr>
    <td>
        @Html.DisplayFor(courseName => courseAndModule.CourseName)
    </td>
    <td>
        @Html.DisplayFor(moduleTitle => courseAndModule.ModuleTitle)
    </td>
    <td>
        @Html.DisplayFor(sequence => courseAndModule.Sequence)
    </td>
</tr>
}

    Kode ini melakukan iterasi melalui baris dalam model dan mengeluarkan data di setiap bidang.

    File yang telah selesai Index.cshtml harus berisi kode berikut.

    @page
@model CoursesAndModulesModel
@{
    ViewData["Title"] = "Home page";
}

<h2>Courses and Modules</h2>
<div>
    <table class="table">
        <thead>
            <tr>
                <th>
                    Course Name
                </th>
                <th>
                    Modules
                </th>
                <th>
                    Sequence
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach(var courseAndModule in Model.CoursesAndModules)
            {
            <tr>
                <td>
                    @Html.DisplayFor(courseName => courseAndModule.CourseName)
                </td>
                <td>
                    @Html.DisplayFor(moduleTitle => courseAndModule.ModuleTitle)
                </td>
                <td>
                    @Html.DisplayFor(sequence => courseAndModule.Sequence)
                </td>
            </tr>
            }
        </tbody>
    </table>
</div>

  9. Simpan file, dan tutup editor kode.

Sebarkan dan uji aplikasi web yang diperbarui

Dengan aplikasi yang dikonfigurasi sepenuhnya untuk mengambil dan menampilkan data kursus kepada pengguna, Anda dapat menyebarkan versi yang diperbarui.

  1. Di Cloud Shell, kembali ke education folder .

    cd ~/education

  2. Jalankan perintah berikut untuk membangun dan menyebarkan aplikasi web yang diperbarui.

    az webapp up \
    --resource-group <rgn>[Sandbox resource group]</rgn> \
    --name $WEBAPPNAME

  3. Setelah aplikasi web baru disebarkan, pilih link untuk aplikasi tersebut. Sekarang harus menampilkan daftar kursus dan modul dengan data yang disimpan dalam database.

    Screenshot of the education web app running, showing the data.