Bagikan melalui

Tutorial: Mulai menggunakan C# dan ASP.NET Core di Visual Studio

  • Artikel

Dalam tutorial ini untuk pengembangan C# dengan ASP.NET Core, Anda membuat aplikasi web C# ASP.NET Core di Visual Studio.

Tutorial ini menunjukkan kepada Anda cara:

  • Membuat proyek Visual Studio
  • Membuat aplikasi web C# ASP.NET Core
  • Membuat perubahan pada aplikasi web
  • Menjelajahi fitur IDE
  • Menjalankan aplikasi web

Prasyarat

Untuk menyelesaikan tutorial ini, Anda memerlukan:

  • Visual Studio terinstal. Kunjungi halaman unduhan Visual Studio untuk versi gratis. Untuk informasi selengkapnya tentang peningkatan ke rilis Visual Studio terbaru, lihat pembaruan Visual Studio.
  • Beban kerja ASP.NET dan pengembangan web terinstal. Untuk memverifikasi atau menginstal beban kerja ini di Visual Studio, pilih Alat >Dapatkan Alat dan Fitur. Untuk informasi selengkapnya, lihat Mengubah beban kerja atau komponen individual.

Membuat proyek

Pertama, Anda membuat proyek ASP.NET Core. Jenis proyek dilengkapi dengan semua file templat yang Anda butuhkan untuk membangun situs web yang berfungsi penuh.

  1. Pada jendela mulai, pilih Buat proyek baru.

    Cuplikan layar memperlihatkan jendela mulai untuk Visual Studio. Opsi Buat proyek baru disorot.

  2. Di jendela Buat proyek baru, pilih C# dari daftar Bahasa. Selanjutnya, pilih Windows dari daftar platform, dan Web dari daftar jenis proyek.

    Setelah Anda menerapkan filter bahasa, platform, dan jenis proyek, pilih templat ASP.NET Core Web App, lalu pilih Berikutnya.

    Cuplikan layar yang memperlihatkan templat proyek ASP.NET Core Web App yang disorot dalam kotak dialog Proyek Baru di Visual Studio.

  3. Di jendela Mengonfigurasi proyek baru Anda, masukkan MyCoreApp di bidang Nama Proyek. Kemudian, pilih Berikutnya.

    Cuplikan layar yang memperlihatkan jendela Konfigurasikan proyek baru Anda di Visual Studio dengan MyCoreApp yang dimasukkan di bidang Nama proyek.

  4. Di jendela informasi tambahan, verifikasi bahwa .NET Core 3.1 muncul di bidang Kerangka Kerja Target.

    Dari jendela ini, Anda dapat mengaktifkan dukungan Docker dan menambahkan dukungan autentikasi. Menu drop-down untuk Jenis Autentikasi memiliki empat opsi berikut:

    • Tidak Ada: Tidak ada autentikasi.
    • Akun individual: Autentikasi ini disimpan dalam database lokal atau berbasis Azure.
    • platform identitas Microsoft: Opsi ini menggunakan ID Microsoft Entra atau Microsoft 365 untuk autentikasi.
    • Windows: Cocok untuk aplikasi intranet.

    Biarkan kotak Aktifkan Docker jangan dicentang, dan pilih Tidak Ada untuk Jenis Autentikasi.

    Cuplikan layar yang memperlihatkan pengaturan default di jendela Informasi tambahan tempat kerangka kerja target diatur ke .NET Core 3.1.

  5. Pilih Buat.

Visual Studio membuka proyek baru Anda.

  1. Pada jendela mulai, pilih Buat proyek baru.

    Cuplikan layar memperlihatkan jendela mulai untuk Visual Studio. Opsi Buat proyek baru disorot.

  2. Di jendela Buat proyek baru, pilih C# dari daftar Bahasa. Selanjutnya, pilih Windows dari daftar Semua platform, dan Web dari daftar Semua jenis proyek.

    Setelah Anda menerapkan filter bahasa, platform, dan jenis proyek, pilih templat ASP.NET Core Web App (Halaman Razor), lalu pilih Berikutnya.

    Cuplikan layar yang memperlihatkan templat proyek ASP.NET Core Web App dipilih dan disorot di halaman Buat proyek baru.

  3. Di jendela Mengonfigurasi proyek baru Anda, masukkan MyCoreApp di bidang nama Proyek. Kemudian, pilih Berikutnya.

    Cuplikan layar yang memperlihatkan jendela Konfigurasikan proyek baru Anda di Visual Studio dengan MyCoreApp yang dimasukkan di bidang Nama proyek.

  4. Di jendela Informasi tambahan, verifikasi bahwa .NET 8.0 muncul di bidang Kerangka Kerja Target.

    Dari jendela ini, Anda dapat mengaktifkan dukungan kontainer dan menambahkan dukungan autentikasi. Menu drop-down untuk Jenis Autentikasi memiliki empat opsi berikut:

    • Tidak Ada: Tidak ada autentikasi.
    • Akun individual: Autentikasi ini disimpan dalam database lokal atau berbasis Azure.
    • platform identitas Microsoft: Opsi ini menggunakan ID Microsoft Entra atau Microsoft 365 untuk autentikasi.
    • Windows: Cocok untuk aplikasi intranet.

    Biarkan kotak Aktifkan dukungan kontainer tidak dicentang, dan pilih Tidak Ada untuk Jenis Autentikasi.

    Cuplikan layar yang memperlihatkan pengaturan default di jendela Informasi tambahan tempat kerangka kerja target diatur ke .NET 8.0.

  5. Pilih Buat.

Visual Studio membuka proyek baru Anda.

Tentang solusi Anda

Solusi ini mengikuti pola desain Halaman Razor. Ini berbeda dari pola desain Model-View-Controller (MVC) karena disederhanakan untuk menyertakan kode model dan pengontrol dalam Halaman Razor itu sendiri.

Jelajahi solusi Anda

  1. Templat proyek membuat solusi dengan satu proyek ASP.NET Core bernama MyCoreApp. Pilih tab Penjelajah Solusi untuk melihat kontennya.

    Cuplikan layar memperlihatkan proyek MyCoreApp yang dipilih di Penjelajah Solusi di Visual Studio.

  2. Perluas folder Halaman.

    Cuplikan layar memperlihatkan konten folder Pages di Penjelajah Solusi di Visual Studio..

  3. Pilih file Index.cshtml, dan lihat file di editor kode.

    Cuplikan layar memperlihatkan file Indeks dot c s h t m l terbuka di editor kode Visual Studio.

  4. Setiap file .cshtml memiliki file kode terkait. Untuk membuka file kode di editor, perluas simpul Index.cshtml di Penjelajah Solusi, dan pilih file Index.cshtml.cs.

    Cuplikan layar memperlihatkan file Indeks dot c s h t m l yang dipilih di Penjelajah Solusi di Visual Studio.

  5. Lihat file Index.cshtml.cs di editor kode.

    Cuplikan layar memperlihatkan file Index.cshtml.cs terbuka di editor kode Visual Studio.

  6. Proyek ini berisi folder wwwroot, yang merupakan akar untuk situs web Anda. Perluas folder untuk melihat isinya.

    Cuplikan layar memperlihatkan folder w w root yang dipilih di Penjelajah Solusi di Visual Studio.

    Anda dapat meletakkan konten situs statis seperti pustaka CSS, gambar, dan JavaScript langsung di jalur tempat Anda menginginkannya.

    Proyek ini juga berisi file konfigurasi yang mengelola aplikasi web pada waktu proses. konfigurasi aplikasi default disimpan di appsettings.json. Namun, Anda dapat mengambil alih pengaturan ini dengan menggunakan appsettings.Development.json.

  7. Perluas file appsettings.json untuk melihat file appsettings.Development.json.

    Cuplikan layar menunjukkan appsettings.json yang sedang dipilih dan dibuka di Penjelajah Solusi di Visual Studio.

Jalankan, debug, dan buat perubahan

  1. Di toolbar, pilih tombol IIS Express untuk membuat dan menjalankan aplikasi dalam mode debug. Atau, tekan F5, atau buka Debug>Mulai Debugging dari bilah menu.

    Cuplikan layar memperlihatkan tombol I S Express yang disorot di toolbar di Visual Studio.

    Nota

    Jika Anda mendapatkan pesan kesalahan yang mengatakan Tidak dapat tersambung ke server web 'IIS Express', tutup Visual Studio lalu luangkan kembali program sebagai administrator. Anda dapat melakukan tugas ini dengan mengklik kanan ikon Visual Studio dari Menu Mulai, lalu memilih opsi Jalankan sebagai administrator dari menu konteks.

    Anda mungkin juga mendapatkan pesan yang menanyakan apakah Anda ingin menerima sertifikat IIS SSL Express. Untuk melihat kode di browser web, pilih Ya, lalu pilih Ya jika Anda menerima pesan peringatan keamanan tindak lanjut.

  2. Visual Studio meluncurkan jendela browser. Anda kemudian akan melihat halaman Home dan Privasi di bilah menu.

  3. Pilih Privasi dari bilah menu. Halaman Privasi di browser merender teks yang ditetapkan dalam file Privacy.cshtml.

    Cuplikan layar memperlihatkan halaman Privasi MyCoreApp dengan teks berikut: Gunakan halaman ini untuk merinci kebijakan privasi situs Anda.

  4. Kembali ke Visual Studio, lalu tekan Shift+F5 untuk menghentikan debugging. Tindakan ini menutup proyek di jendela browser.

  5. Di Visual Studio, buka Privacy.cshtml untuk pengeditan. Selanjutnya, hapus kalimat, Gunakan halaman ini untuk merinci kebijakan privasi situs Anda dan menggantinya dengan Halaman ini sedang dibangun pada @ViewData["TimeStamp"].

    Cuplikan layar memperlihatkan file Privasi dot c s h t m l terbuka di editor kode Visual Studio dengan teks yang diperbarui.

  6. Sekarang, mari kita buat perubahan kode. Pilih Privacy.cshtml.cs. Selanjutnya, bersihkan arahan using di bagian atas file dengan menggunakan pintasan berikut:

    Arahkan kursor atau pilih direktif using yang berwarna abu-abu. Tindakan Cepat bola lampu muncul di bawah tanda sisipan atau di margin kiri. Pilih bola lampu, lalu pilih Hapus yang tidak perlu menggunakan.

    Cuplikan layar memperlihatkan file Privacy dot c s h t m l di editor kode Visual Studio dengan tooltip Tindakan Cepat yang diekspos untuk direktif 'using' yang berwarna abu-abu.

    Sekarang pilih Pratinjau perubahan untuk melihat perubahan apa yang akan terjadi.

    Cuplikan layar memperlihatkan kotak dialog Pratinjau Perubahan. Kotak dialog memperlihatkan direktif yang dihapus, dan mempratinjau perubahan kode setelah penghapusan.

    Pilih Terapkan. Visual Studio menghapus arahan using yang tidak perlu dari file.

  7. Selanjutnya, dalam metode OnGet(), ubah isi ke kode berikut:

    public void OnGet()
{
   string dateTime = DateTime.Now.ToShortDateString();
   ViewData["TimeStamp"] = dateTime;
}

  8. Perhatikan garis bawah bergelombang muncul di bawah DateTime. Garis bawah bergelombang muncul karena jenis ini tidak berada dalam cakupan.

    Cuplikan layar memperlihatkan tanda kesalahan, dalam bentuk garis bawah bergelombang, untuk DateTime di editor kode Visual Studio.

    Buka toolbar Daftar Kesalahan untuk melihat kesalahan yang sama yang tercantum di sana. Jika Anda tidak melihat toolbar Daftar Kesalahan , buka Lihat>Daftar Kesalahan dari bilah menu atas.

    Cuplikan layar memperlihatkan toolbar Daftar Kesalahan di Visual Studio dengan DateTime tercantum.

  9. Mari kita perbaiki kesalahan ini. Di editor kode, letakkan kursor Anda pada baris yang berisi kesalahan, lalu pilih bola lampu Tindakan Cepat di margin kiri. Kemudian, dari menu drop-down, pilih menggunakan Sistem; untuk menambahkan arahan ini ke bagian atas file Anda dan mengatasi kesalahan.

    Cuplikan layar memperlihatkan opsi Tindakan Cepat dari menu drop-down-nya dengan mouseover saat menggunakan Sistem.

  10. Tekan F5 untuk membuka proyek Anda di browser web.

  11. Di bagian atas situs web, pilih Privasi untuk melihat perubahan Anda.

    Cuplikan layar memperlihatkan halaman Privasi yang diperbarui yang menyertakan perubahan yang Anda buat.

  12. Tutup browser web, tekan Shift+F5 untuk menghentikan debugging.

Mengubah halaman Beranda Anda

  1. Di Penjelajah Solusi, buka folder Halaman, lalu pilih Index.cshtml.

    Cuplikan layar memperlihatkan Indeks titik c s h t m l dipilih di bawah simpul Halaman di Penjelajah Solusi.

    File Index.cshtml sesuai dengan halaman Beranda Anda di aplikasi web, yang berjalan di browser web.

    Cuplikan layar memperlihatkan halaman Beranda untuk aplikasi web di jendela browser.

    Di editor teks kode, Anda melihat kode HTML untuk teks yang muncul di halaman Beranda.

    Cuplikan layar memperlihatkan file Indeks dot c s h t m l untuk halaman Beranda di editor kode Visual Studio.

  2. Ganti teks Selamat Datang dengan Hello World!

    Cuplikan layar memperlihatkan file Indeks dot c s h t m l di editor kode Visual Studio dengan teks Selamat Datang diubah menjadi Halo Dunia!.

  3. Pilih IIS Express atau tekan Ctrl+F5 untuk menjalankan aplikasi dan membukanya di browser web.

    Cuplikan layar memperlihatkan tombol IIS Express yang disorot di toolbar untuk Visual Studio.

  4. Di browser web, Anda akan melihat perubahan baru di halaman Beranda.

    Cuplikan layar memperlihatkan halaman Beranda untuk aplikasi web di jendela browser. Teks yang diperbarui mengatakan Halo Dunia!

  5. Tutup browser web, tekan Shift+F5 untuk menghentikan penelusuran kesalahan, dan simpan proyek Anda. Sekarang Anda dapat menutup Visual Studio.

Jelajahi solusi Anda

  1. Templat proyek membuat solusi dengan satu proyek ASP.NET Core bernama MyCoreApp. Pilih tab Penjelajah Solusi untuk melihat kontennya.

    Cuplikan layar memperlihatkan proyek MyCoreApp yang dipilih dan kontennya di Penjelajah Solusi di Visual Studio.

  2. Perluas folder Halaman.

    Cuplikan layar memperlihatkan konten folder Halaman di Penjelajah Solusi.

  3. Pilih file Index.cshtml, dan lihat di editor kode.

    Cuplikan layar memperlihatkan file Index.cshtml terbuka di editor Visual Studio Code.

  4. Setiap file .cshtml memiliki file kode terkait. Untuk membuka file kode di editor, perluas simpul Index.cshtml di Penjelajah Solusi, dan pilih file Index.cshtml.cs.

    Cuplikan layar memperlihatkan file Index.cshtml dipilih di Penjelajah Solusi di Visual Studio.

  5. Lihat file Index.cshtml.cs di editor kode.

    Cuplikan layar memperlihatkan file Index.cshtml.cs terbuka di editor Visual Studio Code.

  6. Proyek ini berisi folder wwwroot, yang merupakan akar untuk situs web Anda. Perluas folder untuk melihat isinya.

    Cuplikan layar memperlihatkan folder w w root yang dipilih di Penjelajah Solusi di Visual Studio.

    Anda dapat meletakkan konten situs statis seperti pustaka CSS, gambar, dan JavaScript langsung di jalur tempat Anda menginginkannya.

  7. Proyek ini juga berisi file konfigurasi yang mengelola aplikasi web pada waktu proses. konfigurasi aplikasi default disimpan di appsettings.json. Namun, Anda dapat mengambil alih pengaturan ini dengan menggunakan appsettings.Development.json. Perluas file appsettings.json untuk melihat file appsettings.Development.json.

    Cuplikan layar memperlihatkan appsettings.json dipilih dan diperluas, yang mengekspos appsettings.Development.json, di Penjelajah Solusi di Visual Studio.

Jalankan, debug, dan buat perubahan

  1. Di toolbar, pilih tombol https untuk membuat dan menjalankan aplikasi dalam mode debug. Atau, tekan F5, atau buka Debug>Mulai Debugging dari bilah menu.

    Cuplikan layar memperlihatkan tombol https yang disorot di toolbar di Visual Studio.

    Nota

    Anda mungkin juga mendapatkan pesan yang menanyakan apakah Anda ingin menerima sertifikat SSL Inti ASP.NET. Untuk melihat kode di browser web, pilih Ya, lalu pilih Ya jika Anda menerima pesan peringatan keamanan tindak lanjut. Pelajari selengkapnya tentang memberlakukan SSL di ASP.NET Core.

  2. Visual Studio meluncurkan jendela browser. Anda kemudian akan melihat halaman Home dan Privasi di bilah menu.

  3. Pilih Privasi dari bilah menu. Halaman Privasi di browser merender teks yang diatur dalam file Privacy.cshtml.

    Cuplikan layar memperlihatkan halaman Privasi MyCoreApp dengan teks berikut: Gunakan halaman ini untuk merinci kebijakan privasi situs Anda.

  4. Kembali ke Visual Studio, lalu tekan Shift+F5 untuk menghentikan debug. Tindakan ini menutup proyek di jendela browser.

  5. Di Visual Studio, buka Privacy.cshtml untuk pengeditan. Selanjutnya, hapus kalimat, Gunakan halaman ini untuk merinci kebijakan privasi situs Anda dan menggantinya dengan Halaman ini sedang dibangun pada @ViewData["TimeStamp"].

    Cuplikan layar memperlihatkan file Privacy.cshtml terbuka di editor Visual Studio Code dengan teks yang diperbarui.

  6. Sekarang, mari kita buat perubahan kode. Pilih Privacy.cshtml.cs. Kemudian, bersihkan arahan using di bagian atas file dengan memilih pintasan berikut:

    Arahkan kursor atau pilih direktif using yang berwarna abu-abu. Sebuah bola lampu Aksi Cepat muncul di bawah tanda sisipan atau di margin kiri. Pilih bola lampu, lalu pilih panah perluas di samping Hapus yang tidak perlu menggunakan.

    Cuplikan layar memperlihatkan file Privacy.cshtml di editor Visual Studio Code dengan tooltip Tindakan Cepat terbuka dan pratinjau perubahan yang disorot.

    Sekarang pilih Pratinjau perubahan untuk melihat perubahan yang dilakukan.

    Cuplikan layar memperlihatkan kotak dialog Pratinjau Perubahan. Kotak dialog memperlihatkan direktif yang dihapus, dan mempratinjau perubahan kode setelah penghapusan.

    Pilih Terapkan. Visual Studio menghapus arahan using yang tidak perlu dari file.

  7. Selanjutnya, buat string untuk tanggal saat ini yang diformat untuk budaya atau wilayah Anda dengan menggunakan metode DateTime.ToString.

    • Argumen pertama untuk metode menentukan bagaimana tanggal harus ditampilkan. Contoh ini menggunakan penentu format (d) yang menunjukkan format tanggal pendek.
    • Argumen kedua adalah objek CultureInfo yang menentukan budaya atau wilayah untuk tanggal tersebut. Argumen kedua menentukan, antara lain, bahasa kata apa pun dalam tanggal, dan jenis pemisah yang digunakan.

    Ubah isi metode OnGet() dalam Privacy.cshtml.cs ke kode berikut:

    public void OnGet()
{
   string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US"));
   ViewData["TimeStamp"] = dateTime;
}

  8. Perhatikan bahwa arahan using berikut secara otomatis ditambahkan ke bagian atas file:

    using System.Globalization;

    System.Globalization berisi kelas CultureInfo .

  9. Tekan F5 untuk membuka proyek Anda di browser web.

  10. Di bagian atas situs web, pilih Privasi untuk melihat perubahan Anda.

    Cuplikan layar memperlihatkan halaman Privasi MyCoreApp yang menyertakan perubahan yang dibuat untuk menambahkan tanggal.

  11. Tutup browser web, tekan Shift+F5 untuk menghentikan debug.

Mengubah halaman Beranda Anda

  1. Di Penjelajah Solusi, perluas Halaman folder, lalu pilih Index.cshtml.

    Cuplikan layar memperlihatkan Index.cshtml dipilih di bawah simpul Halaman di Penjelajah Solusi.

    File Index.cshtml sesuai dengan halaman Beranda Anda dalam aplikasi web, yang berjalan pada browser web.

    Cuplikan layar memperlihatkan halaman Beranda untuk aplikasi web di jendela browser.

    Di editor kode, Anda melihat kode HTML untuk teks yang muncul di halaman Beranda.

    Cuplikan layar memperlihatkan file Index.cshtml untuk halaman Beranda di editor Visual Studio Code.

  2. Ganti teks Selamat Datang dengan Hello World!

    Cuplikan layar memperlihatkan file Index.cshtml di editor Visual Studio Code dengan teks 'Selamat Datang' diubah menjadi 'Halo Dunia!'.

  3. Pilih https atau tekan Ctrl+F5 untuk menjalankan aplikasi dan membukanya di browser web.

    Cuplikan layar memperlihatkan tombol https yang disorot di toolbar untuk Visual Studio.

  4. Di browser web, Anda akan melihat perubahan baru di halaman Beranda.

    Cuplikan layar memperlihatkan halaman Beranda untuk aplikasi web di jendela browser. Teks yang diperbarui mengatakan 'Halo Dunia!'

  5. Tutup browser web, tekan Shift+F5 untuk menghentikan penelusuran kesalahan, dan simpan proyek Anda. Sekarang Anda dapat menutup Visual Studio.

Langkah berikutnya

Selamat atas penyelesaian tutorial ini! Kami harap Anda menikmati belajar tentang C#, ASP.NET Core, dan Ide Visual Studio. Untuk mempelajari selengkapnya tentang membuat aplikasi web atau situs web dengan C# dan ASP.NET, lanjutkan dengan tutorial berikut:

Membuat aplikasi web Razor Pages dengan ASP.NET Core

Atau, pelajari cara membuat kontainer aplikasi web Anda dengan Docker:

Alat Kontainer di Visual Studio