ASP.NET Core Web API 6 dengan Visual Studio

Abstract

Buku ini memberikan panduan untuk membangun back-end yang memberikan fungsi sebagai RESTful service untuk melakukan proses logika atau layanan pengelolaan data pada database server. ASP.NET Core Web API adalah framework yang dapat mempermudah Full Stack Developer untuk membangun RESTful service yang dapat berjalan di atas platform baik Windows, Linux dan OS X.

Buku ini akan memberikan panduan penggunaan framework ASP.NET Core 6 Web API untuk pengembangan RESTful service tahap demi tahap dengan menggunakan tool development Visual Studio Community dan Visual Studio Code.

Full text

I

II
Kata Pengantar
Saat ini sering didengar istilah Full Stack Development sebagai proses kerja dan Full Stack
Developer sebagai orang yang mengembangkan sistem dari hulu ke hilir. Artinya seorang Full
Stack Developer mengembangkan aplikasi front-end seperti aplikasi web, desktop atau mobile.
Dan juga mengembangkan back-end yang melayangi aplikasi front-end dalam mengakses data
pada database server atau fungsi-fungsi lain pada server.
Buku ini memberikan panduan untuk membangun back-end yang memberikan fungsi sebagai
RESTful service untuk melakukan proses logika atau layanan pengelolaan data pada database
server. ASP.NET Core Web API adalah framework yang dapat mempermudah Full Stack
Developer untuk membangun RESTful service yang dapat berjalan di atas platform baik
Windows, Linux dan OS X.
Buku ini akan memberikan panduan penggunaan framework ASP.NET Core 6 Web API untuk
pengembangan RESTful service tahap demi tahap dengan menggunakan tool development
Visual Studio Community dan Visual Studio Code.
Akhir kata, selamat membaca dan semoga buku ini bermanfaat bagi rekan-rekan yang ingin
belajar menjadi back-end developer. Kritik dan saran akan sangat berarti dan dapat ditujukan
via email.
Yogyakarta, February 2023
Erick Kurniawan
( erick@actual-training.com)
M Reza Faisal
(reza.faisal@gmail)

III
Daftar Isi
1 - Pendahuluan .........................................................................................................................................7
Web/HTTP Service ................................................................................................................................7
. NET Core ..............................................................................................................................................9
ASP.NET Core .................................................................................................................................10
ASP.NET Core MVC .......................................................................................................................11
ASP.NET Core Web API ................................................................................................................11
Web Server .......................................................................................................................................12
Kestrel ...........................................................................................................................................12
Internet Information Services (IIS)............................................................................................12
Development Tool ...............................................................................................................................12
Visual Studio 2022 ...........................................................................................................................13
Visual Studio Code .........................................................................................................................13
Database................................................................................................................................................13
SQL Server 2022 ...............................................................................................................................14
MySQL ..............................................................................................................................................14
PostgreSQL .......................................................................................................................................14
2 - NET 6 SDK & Visual Studio IDE .....................................................................................................15
Installasi ................................................................................................................................................15
.NET Core Command Line Tool .......................................................................................................15
Info & Bantuan .................................................................................................................................15
Membuat Project .............................................................................................................................17
Restore ..............................................................................................................................................19
Build ..................................................................................................................................................19
Run ....................................................................................................................................................19
Installasi Visual Studio for Mac 2022 ...........................................................................................19
Antarmuka .......................................................................................................................................21
Solution Explorer.........................................................................................................................22
Editor .............................................................................................................................................23
Toolbox .........................................................................................................................................23

IV
Properties......................................................................................................................................23
Output ...........................................................................................................................................24
Error List .......................................................................................................................................24
Solution & Project ............................................................................................................................24
Solution .........................................................................................................................................25
Build & Debug .................................................................................................................................26
Reference ..........................................................................................................................................27
NuGet ................................................................................................................................................28
Visual Studio Code .............................................................................................................................29
Installasi ............................................................................................................................................30
Windows.......................................................................................................................................30
Mac OS ..........................................................................................................................................30
Linux .............................................................................................................................................31
Antarmuka .......................................................................................................................................32
Tool Tambahan ................................................................................................................................33
Extension ......................................................................................................................................33
Integrated Terminal ....................................................................................................................34
Membuat Project .............................................................................................................................35
Project Console HelloWorld ......................................................................................................35
Fitur-Fitur .........................................................................................................................................37
Hover ............................................................................................................................................37
Parameter Hint ............................................................................................................................38
IntelliSense ...................................................................................................................................38
Split Editor ...................................................................................................................................39
Go to Definition ...........................................................................................................................39
Error & Warning ..........................................................................................................................40
Folding ..........................................................................................................................................40
Komentar ......................................................................................................................................41
Debugging ....................................................................................................................................41
Postman ................................................................................................................................................44
Insomnia ...............................................................................................................................................46
3 - ASP.NET Core Web API ...................................................................................................................47
Project ....................................................................................................................................................47
Membuat Project .............................................................................................................................47
Visual Studio 2022 for Mac ........................................................................................................47
Struktur Project ................................................................................................................................49

V
File Program.cs ............................................................................................................................49
File appsettings.json ....................................................................................................................50
File *.csproj ...................................................................................................................................50
Folder Controllers .......................................................................................................................50
Menjalankan Project ........................................................................................................................51
Mengakses Web API .......................................................................................................................52
Web Browser ................................................................................................................................53
Postman ........................................................................................................................................53
Class API Controller ...........................................................................................................................54
Namespace .......................................................................................................................................55
Class ..................................................................................................................................................55
Method ..............................................................................................................................................56
Atribut method HTTP ................................................................................................................56
Parameter......................................................................................................................................57
Class Model ..........................................................................................................................................63
Membuat Class Model ....................................................................................................................63
Visual Studio 2022 .......................................................................................................................63
Membuat Class API Controller .....................................................................................................64
4 - Koneksi Database ...............................................................................................................................67
Entity Framework Core ......................................................................................................................67
Menyiapkan Project ............................................................................................................................67
Visual Studio 2022 for Mac ............................................................................................................68
Membuat Project .........................................................................................................................68
Menambahkan Library NuGet Package pada Project ...........................................................68
Konfigurasi Koneksi ke Database .............................................................................................70
Menambahkan Data Context Class ..........................................................................................70
Menambahkan Data Context Class ..........................................................................................71
Mendaftarkan EF DataContext pada Program.cs ...................................................................71
Menjalankan EF Migrations .......................................................................................................72
Menambahkan Data Layer.........................................................................................................73
Menambahkan DI Services pada Program.cs .........................................................................75
Menambahkan Controller Author ................................................................................................75

VI
Menampilkan Semua Data Author ...........................................................................................75
Menampilkan Author By Id.......................................................................................................76
Menambahkan Data Author ......................................................................................................77
Mengupdate Data Author ..........................................................................................................78
Mendelete Data Author ..............................................................................................................79
Menambahkan Log untuk Tracing EF Core ................................................................................80
One To Many Relationships EF .....................................................................................................81
Bekerja dengan Relasi Data ...........................................................................................................82
Menambahkan Author Baru Beserta Book ..............................................................................82
Menambahkan Author Baru Beserta Dua Book .....................................................................82
Menambahkan Book Baru pada Author ..................................................................................83
Menambahkan Book Baru ke Author dari Book ....................................................................83
5 - Keamanan ...........................................................................................................................................85
Menambahkan Basic Authentication .......................................................................................85
7 ..................................................................................................................................................................89
6 - Akses API dari Blazor Client ............................................................................................................90
Membuat Blazor Project .....................................................................................................................90
Mengakses API dari Blazor............................................................................................................91
Halaman Untuk Menampilkan Hasil ...........................................................................................92

7
1 - Pendahuluan
Web/HTTP Service
Aplikasi web yang mempunyai sifat untuk dapat diakses di mana saja dan kapan saja,
membuat banyak aplikasi-aplikasi banyakk bermunculan dan dimanfaatkan oleh orang
banyak. Baik itu aplikasi yang berfungsi membantu untuk pekerjaan perkantoran atau
aplikasi yang bersifat hiburan, jejaring sosial dan lain-lain.
Mungkin kita lebih mengenal aplikasi web yang bersifat hiburan seperti youtube
(www.youtube.com) atau aplikasi web jejaring sosial seperti facebook (www.facebook.com)
atau twitter (www.twitter.com). Tetapi dalam perkembangannya, sekarang ini sudah sangat
umum perangkat smartphone, pad atau tab sehingga tidak heran jika aplikasi web
mempunyai “pendamping” dalam kehidupannya. “Pendamping” ini sering disebut dengan
aplikasi mobile. Kenapa disebut “pendamping” alih-alih sebagai “pesaing”? Hal ini karena
memang antara aplikasi web dan aplikasi mobile tidak saling bersaing, tetapi malah saling
mendukung satu sama lain-lain.
Untuk mengetahui bagaimana antara aplikasi web dan aplikasi web dapat saling mendukung
satu sama lain, maka akan dipaparkan pada bagian dibawah ini.
Pertama akan dijelaskan bagaimana aplikasi web secara umum bekerja. Aplikasi web yang
berada pada web server akan dapat diakses oleh komputer yang digunakan oleh pengguna
dengan web browser seperti Internet Explorer. Komunikasi yang terjadi antara web browser
pada komputer dengan web server adalah dengan dua proses, yaitu request dan response.
Request adalah proses yang dilakukan oleh web browser pada komputer ke web server,
kemudian permintaan tersebut akan diolah oleh web server dan hasilnya akan dikirimkan ke
web browser yang merupakan proses response dari web server. Hasil proses response ini lah
yang akan kita lihat dalam bentuk halaman web pada web browser. Misal user ingin melihat
data mahasiswa pada web browser, maka yang akan dilakukan adalah akan ada proses request
ke web server. Permintaan tersebut akan diproses pada web server, karena ada kebutuhan
akan data mahasiswa maka aplikasi web pada sisi server akan mengambil data mahasiswa
tersebut pada database kemudian hasilkannya akan dikirimkan ke web browser sebagai
proses response.
Dari paparan tersebut maka didapat gambaran jika aplikasi web itu adalah aplikasi yang
disimpan di server, bagi pengguna yang ingin menggunakannya tidak perlu menginstall
apapun di komputer miliknya. Pengguna cukup menginstall web browser, kemudian

8
pengguna cukup mengetikkan alamat dari web server pada web browser tersebut, dan
selanjutnya proses yang terjadi seperti yang telah dipaparkan di atas.
Bagaimana kira-kira cara kerja aplikasi mobile (bukan : web browser pada perangkat mobile)
jika ingin melakukan hal di atas? Aplikasi mobile memang sangat beragam, ada game, ada
aplikasi tanpa perlu koneksi internet atau aplikasi yang terhubung jaringan internet untuk
bisa digunakan, seperti aplikasi mobile twitter atau facebook.
Gambar di bawah ini akan memberikan ilustrasi cara kerja aplikasi mobile yang membutuhkan
koneksi internet.
Dari gambar di atas dapat dilihat letak dari aplikasi mobile yang berada pada perangkat
mobile itu sendiri, ini artinya aplikasi mobile harus diinstall pada perangkat mobile tersebut.
Misalnya aplikasi mobile yang diinstall adalah aplikasi mobile Facebook, maka dipastikan
akan ada halaman yang berfungsi untuk login atau halaman untuk menampilkan statusstatus
yang ditulis. Pada proses login akan dilakukan pengecekan username dan password yang
dimasukkan untuk dicocokkan dengan data yang ada di database. Begitu juga jika pada
halaman ingin ditampilkan daftar status yang telah di tulis pada wall, maka perlu ada proses
untuk mengambil data tersebut pada database. Tetapi jika dilihat pada gambar di atas, proses
pengambilan data tersebut tentunya tidak bisa dilakukan langsung dari aplikasi mobile ke
database server. Pada gambar terdapat layanan berbasis web (web service) yang berada pada
web server, pada layanan tersebut terdapat fungsi-fungsi yang bertugas untuk melakukan
hal-hal penting termasuk fungsi untuk mengakses data pada database server atau fungsi
untuk otentikasi user untuk proses login. Maka aplikasi mobile cukup mengakses
fungsifungsi pada layanan tersebut untuk melakukan proses-proses tersebut.
Keberadaan web service sebagai perantara seperti gambar di atas mempunyai beberapa
manfaat, diantaranya adalah :
- Layanan ini dapat lebih mengamankan data pada database server, hal ini dikarena
database tidak langsung diakses oleh aplikasi
- Layanan ini bukan hanya dapat diakses oleh aplikasi mobile, tapi juga dapat diakses
oleh aplikasi jenis lain seperti aplikasi web atau aplikasi desktop. Selain itu layanan
berbasis web ini akan dapat diakses dan dimanfaatkan pada berbagai platform atau
teknologi, artinya layanan ini bisa diakses oleh aplikasi yang dibangun dengan .NET,
Java, PHP, Python, Ruby, Javascript dan lain-lain.
Dari paparan di atas maka dapat digambarkan peran dari web service seperti gambar berikut
ini.

9
Dari paparan di atas maka diharapkan pembaca sudah mempunyai gambaran tentang apa
itu web service dan manfaatnya. Selanjutnya pada ebook ini akan dibahas mengenai
ASP.NET Web API yang merupakan framework yang didesain untuk menyederhanakan
arsitektur web service.
. NET Core
.NET Framework adalah software framework yang dikembangkan oleh Microsoft. .NET
Framework terdiri atas banyak class library (Framework Class Library) untuk membangun
bermacam aplikasi, seperti aplikasi desktop, aplikasi mobile, aplikasi web dan cloud. Sampai
saat ini .NET Framework telah mencapai versi 4.7. .NET Framework Classic ini hanya dapat
digunakan pada platform atau sistem operasi MS Windows. Aplikasi-aplikasi yang dibangun
di atas .NET Framework hanya dapat dijalankan jika pada komputer telah terinstall .NET
Framework. Artinya aplikasi-aplikasi itu hanya akan jalan pada platform MS Windows.
Saat ini Microsoft telah mengembangkan .NET Core, yaitu “.NET Framework” yang bersifat
open-source dan multiplatform. Artinya .NET Core dapat dijalankan pada platform
Windows, Linux dan Mac OS. Sehingga aplikasi-aplikasi yang dibangun di atas framework
ini juga dapat dijalankan di atas banyak platform. Saat ini .NET Core hanya mendukung
bahasa pemrograman C# dan F#. Saat buku ini ditulis.NET Core telah mencapai versi 7
namun penulis memilih versi .NET 6 yang merupakan versi LTS (Long Term Support) terkini
yang disarankan untuk digunakan di pada production environment.
Gambar di bawah ini adalah gambar unified development platform dari .NET 6.

10
Untuk mendapatkan .NET 6 anda dapat mengunduh pada link berikut
https://dotnet.microsoft.com/en-us/download/dotnet/6.0.
ASP.NET Core
ASP.NET Core merupakan design ulang dari ASP.NET yang telah ada sejak 15 tahun yang
lalu. ASP.NET Core adalah framework untuk membangun aplikasi web, IoT app dan backend
untuk mobile app. Framework ini bersifat open source dan cross-platform, artinya aplikasi
yang dibangun dengan framework ini dapat dijalankan pada sistem operasi Windows, Linux
dan Mac OSX. Aplikasi ASP.NET Core dapat dijalankan di atas .NET Core atau .NET
framework seperti yang terlihat pada gambar di atas.
Dibandingkan dengan ASP.NET versi sebelumnya, ASP.NET Core mempunyai beberapa
perubahan arsitektur. Perubahan ini membuat ASP.NET Core framework menjadi lebih
ramping dan modular. Perbedaan lain adalah ASP.NET Core tidak lagi berbasis pada
System.Web.dll. ASP.NET Core berbasis kepada package-package di NuGet repository. Hal
ini memungkinkan developer untuk melakukan optimasi aplikasi dengan menggunakan
package-package NuGet yang diperlukan. Keuntungan hal ini adalah:
• Aplikasi lebih kecil.
• Aplikasi menjadi lebih aman.
• Mengurangi service.
• Meningkatkan kinerja atau kecepatan.
Tetapi karena ASP.NET Core merupakan framework yang baru saja ditulis, bukan
melanjutkan kode sumber framework sebelumnya, maka tidak semua fitur yang telah ditemui
pada ASP.NET 4.7 akan ditemui pada framework ini.
Saat ini ASP.NET Core framework dapat digunakan untuk membangun aplikasi web dengan
ASP.NET MVC. Selain itu juga dapat digunakan untuk membangun HTTP service dengan
menggunakan ASP.NET Web API.

11
ASP.NET Core MVC
Model-View-Controller (MVC) adalah architectural pattern yang memisahkan aplikasi
menjadi tiga komponen utama yaitu Model, View, dan Controller. Dengan menggunakan
pattern atau pola ini, request atau permintaan user diarahkan ke komponen Controller,
komponen ini bertanggung jawab untuk berkerja dengan komponen Model untuk melakukan
aksi dari user dan/atau mengambil hasil dari query. Komponen Controller memilih
komponen View untuk ditampilkan kepada user. Komponen View juga menyediakan data
Model yang dibutuhkannya.
ASP.NET Core MVC adalah framework presentasi yang ringan, bersifat open source yang
sangat mudah diuji yang dioptimalkan untuk digunakan dengan ASP.NET Core. Framework
ini menyediakan cara untuk membangun situs web dinamis yang memungkinkan pemisahan
sesuai dengan pola MVC yang telah diterangkan di atas. Framework ini mendukung
pengembangan Test-Driver Development (TDD) dan standar web terbaru.
ASP.NET Core Web API
HTTP tidak hanya digunakan untuk menampilkan halaman web saja. HTTP juga mendukung
pembangunan API untuk mengekspos layanan dan data. Karena HTTP bersifat sederhana,
fleksibel dan dapat diakses dimana saja, maka layanan HTTP dapat menjangkau berbagai
client termasuk web browser, perangkat mobile dan aplikasi desktop.
ASP.NET Core Web API adalah framework yang mempermudah web developer untuk
membangun layanan HTTP.
Model
View
Controller
Database
Web API
Business
Logic
Client
Web Browser
Mobile Device
Desktop Application

12
Web Server
Seperti aplikasi web pada umumnya, aplikasi yang dibangun dengan menggunakan
framework ASP.NET Core juga memerlukan web server untuk agar bisa diakses dari web
browser sebagai web client.
Pada framework ASP.NET sebelumnya digunakan Internet Information Services (IIS) sebagai
web server. Tetapi karena IIS hanya dapat berjalan pada platform Windos maka selain IIS
juga telah disediakan Kestrel sebagai open-source HTTP server dan cross-platform untuk
ASP.NET Core.
Kestrel
Berbeda dengan Apache dan IIS yang didesain untuk banyak kebutuhan umum web server
dan juga dapat mendukung banyak bahasa pemrograman dan banyak fitur seperti browsing
direktori dan lain-lain. Sedangkan Kestrel didesain hanya untuk hosting ASP.NET Core.
Internet Information Services (IIS)
Telah disebutkan kelebihan IIS yang mendukung kebutuhan umum web server juga dapat
digunakan sebagai host ASP.NET Core. Sebagai host ASP.NET Core, IIS tidak berdiri sendiri
tetapi perlu dukungan dari Kestrel.
Development Tool
Visual Studio adalah adalah sebuah integrated development environment (IDE) yang
dikembangkan oleh Microsoft, yang dapat digunakan untuk mengembangkan aplikasi
Android, iOS, Windows, web dan cloud. Tool ini tersedia untuk berbagai platform yaitu
Windows, Linux dan MacOS.
Visual Studio dapat diunduh di link berikut ini https://www.visualstudio.com/downloads/.

13
Visual Studio 2022
Visual Studio 2022 tersedia dalam tiga pilihan lisensi yaitu Enterprise dan Professional yang
berbayar. Sedangkan Community bersifat gratis. Berikut adalah perbandingan fitur-fitur
yang dimiliki oleh masing-masing versi. Visual Studio 2022 hanya tersedia untuk platform
Windows dan MacOS.
Visual Studio Code
Visual Studio Code adalah versi Visual Studio yang ringan tetapi tetap powerful. Versi ini
seperti code editor dengan fitur-fitur tambahan untuk mempermudah penulisan kode
program.
Visual Studio Code tersedia pada platform Windows, Linux dan MacOS. Visual Studio Code
juga mendukung banyak bahasa pemrograman seperti halnya Visual Studio 2022 ditambah
bahasa pemrograman PHP, Node.js dan lain-lain.
Berikut adalah tampilan Visual Studio Code.
Database
Database adalah koleksi data yang terorganisir. Database yang sering digunakan adalah
relational database yang merupakan koleksi dari skema, tabel, query dan view. Software yang
memberikan layanan untuk mengelola database dikenal dengan nama Relational Database
Management System (RDBMS) atau Database Server. Saat ini telah banyak tersedia database
server, beberapa diantaranya adalah SQL Server, MySQL, dan PostgreSQL.

14
SQL Server 2022
MS SQL Server adalah RDBMS yang dikembangkan oleh Microsoft. Versi terbaru dari
RDBMS yaitu MS SQL Server 2022 telah tersedia tidak hanya pada platform Windows tetapi
juga tersedia platform Linux. Jika ingin memanfaatkan RDBMS ini pada platform MacOS
maka dapat memanfaatkan Docker.
MS SQL Server tersedia dalam beberapa edisi yaitu Enteprise, Standard, Developer dan
Express Edition. Express Edition dapat digunakan secara gratis dengan beberapa
keterbatasan seperti tidak dapat menggunakan kemampuan multi-core dan maksimal ukuran
file database yaitu 10GB.
Untuk mencoba MS SQL Server 2022 maka file installer dapat diunduh di sini
https://www.microsoft.com/en-us/sql-server/sql-server-downloads.
MySQL
MySQL adalah relational database management system (RDBMS). MySQL dikenal sebagai
salah satu komponen LAMP open-source web application software stack. LAMP adalah
akronim dari Linux, Apache, MySQL dan PHP. MySQL telah banyak dipakai pada banyak
produk seperti Wordpress, Joomla, Drupal dan lain-lain.
Saat ini MySQL telah menjadi bagian dari Oracle. Dan MySQL memiliki dua versi yaitu versi
Enterprise yang berbayar dan versi Community yang gratis.
Pada buku ini akan digunakan MySQL sebagai database server yang akan menyimpan data
dari contoh aplikasi yang akan dibangun pada buku ini.
Untuk mendapatkan installer MySQL dapat mengunjungi link berikut ini
https://www.mysql.com/downloads/. Terdapat tiga versi yaitu:
- MySQL Enterprise Edition yang bersifat komersial.
- MySQL Cluster Edge yang bersifat komersial.
- MySQL Community Edtion yang bersifat gratis.
PostgreSQL
PostgreSQL adalah sebuah sistem basis data yang disebarluaskan secara bebas menurut
Perjanjian lisensi BSD. Database ini bersifat multiplatform, yang dapat digunakan pada sistem
operasi MS Windows, keluarga Linux, keluarga BSD, MacOS dan Solaris .
Installer PostgreSQL dapat diunduh di link berikut https://www.postgresql.org/download/.

15
2 - NET 6 SDK & Visual Studio IDE
Pada bab ini akan dijelaskan langkah-langkah untuk melakukan installasi .NET 6 dan ASP.NET
Core 6 pada sistem operasi Windows / MacOS.
Installasi
Software yang harus diinstall untuk mengikuti tutorial pada buku ini adalah sebagai berikut:
- .NET 6 SDK.
- SQL Server Express 2022 / Azure SQL Edge.
- SQL Server Management Studio / Azure Data Studio
- Visual Studio 2022 Community atau Visual Studio 2022 for Mac
.NET 6 SDK dapat diunduh pada link berikut: https://dotnet.microsoft.com/en-
us/download/dotnet/6.0.
SQL Server Express atau Azure SQL Edge dapat diunduh pada link berikut:
https://www.microsoft.com/en-us/sql-server/sql-server-downloads.
Azure Data Studio dapat diinstall pada link berikut: https://azure.microsoft.com/en-
us/products/data-studio/.
Proses installasi pada platform Windows dan MacOS sangat mudah, hanya dengan cara
mengeksekusi file installer kemudian ikuti petunjuk yang diberikan pada window installer.
Contoh kode yang akan digunakan pada buku ini akan dijalankan pada komputer dengan
sistem operasi MacOS dan IDE Visual Studio 2022.
Catatan: untuk pengguna Macbook dengan Apple Silicon anda dapat menggunakan Azure
SQL Edge yang dijalankan pada docker, karena Mac dengan Apple Silicon belum mendukung
SQL Server for Linux.
.NET Core Command Line Tool
Pada sub bab sebelumnya telah dapat dilihat penggunaan perintah “dotnet”. Perintah ini
adalah perintah utama yang digunakan untuk melakukan hal-hal penting seperti:
1. Membuat project baru.
2. Melakukan migrasi atau upgrade project ke versi yang lebih baru.
3. Melakukan restore library atau package dan tool yang digunakan project.
4. Melakukan build.
5. Melakukan testing.
6. Menjalankan dan mempublish aplikasi.
7. Dan lain-lain.
Pada sub bab ini akan dijelaskan beberapa fungsi penting perintah “dotnet”.
Info & Bantuan
Untuk mengetahui informasi versi .NET Core Command Line Tool yang digunakan dan
informasi lainnya dapat digunakan perintah berikut.

16
dotnet --info
Hasilnya adalah sebagai berikut.
.NET SDK:
Version: 7.0.102
Commit: 4bbdd14480
Runtime Environment:
OS Name: Mac OS X
OS Version: 13.2
OS Platform: Darwin
RID: osx.13-arm64
Base Path: /usr/local/share/dotnet/sdk/7.0.102/
Host:
Version: 6.0.405
Architecture: arm64
Commit: d037e070eb
.NET SDKs installed:
6.0.200 [/usr/local/share/dotnet/sdk]
6.0.201 [/usr/local/share/dotnet/sdk]
6.0.301 [/usr/local/share/dotnet/sdk]
6.0.400 [/usr/local/share/dotnet/sdk]
6.0.405 [/usr/local/share/dotnet/sdk]
Sedangkan untuk mengetahui secara lengkap opsi lengkap yang dapat digunakan pada
perintah “dotnet” dapat digunakan perintah berikut.
dotnet --help
Outputnya adalah sebagai berikut:
Usage: dotnet [runtime-options] [path-to-application] [arguments]
Execute a .NET application.
runtime-options:
--additionalprobingpath <path> Path containing probing policy and assemblies to probe for.
--additional-deps <path> Path to additional deps.json file.
--depsfile Path to <application>.deps.json file.
--fx-version <version> Version of the installed Shared Framework to use to run the
application.
--roll-forward <setting> Roll forward to framework version (LatestPatch, Minor,
LatestMinor, Major, LatestMajor, Disable).
--runtimeconfig Path to <application>.runtimeconfig.json file.
path-to-application:
The path to an application .dll file to execute.
Usage: dotnet [sdk-options] [command] [command-options] [arguments]
Execute a .NET SDK command.
sdk-options:

17
-d|--diagnostics Enable diagnostic output.
-h|--help Show command line help.
--info Display .NET information.
--list-runtimes Display the installed runtimes.
--list-sdks Display the installed SDKs.
--version Display .NET SDK version in use.
SDK commands:
add Add a package or reference to a .NET project.
build Build a .NET project.
build-server Interact with servers started by a build.
clean Clean build outputs of a .NET project.
format Apply style preferences to a project or solution.
help Show command line help.
list List project references of a .NET project.
msbuild Run Microsoft Build Engine (MSBuild) commands.
new Create a new .NET project or file.
nuget Provides additional NuGet commands.
-------
Additional commands from bundled tools:
dev-certs Create and manage development certificates.
fsi Start F# Interactive / execute F# scripts.
user-jwts Manage JSON Web Tokens in development.
user-secrets Manage development user secrets.
watch Start a file watcher that runs a command when files change.
Membuat Project
Untuk membuat project dengan perintah “dotnet” digunakan opsi “new”. Untuk mengetahui
informasi bantuan cara pembuatan project dan menampilkan semua template project yang
ada, maka dapat digunakan perintah berikut.
dotnet new --list
Dan berikut adalah daftar template project yang dapat kita buat.
Template Name Short Name Language Tags
------------------ ------------------ ---------- -------------------------------------------------------------
.NET MAUI App maui [C#] MAUI/Android/iOS/macOS/Mac
Catalyst/Windows/Tizen
.NET MAUI Blazo... maui-blazor [C#] MAUI/Android/iOS/macOS/Mac
Catalyst/Windows/Tizen/Blazor
.NET MAUI Class... mauilib [C#] MAUI/Android/iOS/macOS/Mac
Catalyst/Windows/Tizen
.NET MAUI Conte... maui-page-csharp [C#] MAUI/Android/iOS/macOS/Mac
Catalyst/WinUI/Tizen/Xaml/Code
.NET MAUI Conte... maui-page-xaml [C#] MAUI/Android/iOS/macOS/Mac
Catalyst/WinUI/Tizen/Xaml/Code

18
.NET MAUI Conte... maui-view-csharp [C#] MAUI/Android/iOS/macOS/Mac
Catalyst/WinUI/Tizen/Xaml/Code
.NET MAUI Conte... maui-view-xaml [C#] MAUI/Android/iOS/macOS/Mac
Catalyst/WinUI/Tizen/Xaml/Code
.NET MAUI Resou... maui-dict-xaml [C#] MAUI/Android/iOS/macOS/Mac
Catalyst/WinUI/Xaml/Code
Android Activit... android-activity [C#] Android/Mobile
Android Applica... android [C#] Android/Mobile
Android Class L... androidlib [C#] Android/Mobile
Android Java Li... android-bindinglib [C#] Android/Mobile
Android Layout ... android-layout [C#] Android/Mobile
Android Wear Ap... androidwear [C#] Android/Mobile
ASP.NET Clean A... clean-arch [C#] Web/ASP.NET/Clean Architecture
ASP.NET Core Empty web [C#],F# Web/Empty
ASP.NET Core gR... grpc [C#] Web/gRPC
ASP.NET Core We... webapi [C#],F# Web/WebAPI
ASP.NET Core We... webapp,razor [C#] Web/MVC/Razor Pages
ASP.NET Core We... mvc [C#],F# Web/MVC
ASP.NET Core wi... angular [C#] Web/MVC/SPA
ASP.NET Core wi... react [C#] Web/MVC/SPA
Blazor Server App blazorserver [C#] Web/Blazor
Blazor Server A... blazorserver-empty [C#] Web/Blazor/Empty
Blazor WebAssem... blazorwasm [C#] Web/Blazor/WebAssembly/PWA
Blazor WebAssem... blazorwasm-empty [C#] Web/Blazor/WebAssembly/PWA/Empty
Class Library classlib [C#],F#,VB Common/Library
Console App console [C#],F#,VB Common/Console
dotnet gitignor... gitignore Config
Dotnet local to... tool-manifest Config
EditorConfig file editorconfig Config
FullStackHero W... fsh-api [C#] WebAPI/Clean
Architecture/Boilerplate/macOS/Windows/Cloud/Web
global.json file globaljson Config
MSTest Test Pro... mstest [C#],F#,VB Test/MSTest
MudBlazor Templ... mudblazor [C#] Blazor/Desktop/macOS/Windows/Cloud/Web
MVC ViewImports viewimports [C#] Web/ASP.NET
MVC ViewStart viewstart [C#] Web/ASP.NET
NuGet Config nugetconfig Config
NUnit 3 Test Item nunit-test [C#],F#,VB Test/NUnit
NUnit 3 Test Pr... nunit [C#],F#,VB Test/NUnit
Protocol Buffer... proto Web/gRPC
Razor Class Lib... razorclasslib [C#] Web/Razor/Library
Razor Component razorcomponent [C#] Web/ASP.NET
Razor Page page [C#] Web/ASP.NET
Solution File sln,solution Solution
Web Config webconfig Config
Worker Service worker [C#],F# Common/Worker/Web
xUnit Test Project xunit [C#],F#,VB Test/xUnit

19
Untuk membuat project digunakan perintah dengan sintaks sebagai berikut.
dotnet new [short name] -n [project name]
Sebagai contoh untuk membuat aplikasi console digunakan perintah berikut ini.
dotnet new console -n MyConsoleProject
Untuk membuat project aplikasi web tersedia 2 template yang dapat digunakan yaitu:
- ASP.NET Core Empty, template ini digunakan untuk membuat aplikasi web kosong.
- ASP.NET Core Web Api, template ini digunakan untuk membuat aplikasi Web API.
Untuk membuat project ASP.NET Web API dapat dilakukan dengan perintah berikut ini.
dotnet new webapi -n MyWebAPIProject
Restore
Setelah project dibuat maka langkah selanjutnya adalah melakan proses restore library,
package atau tool yang digunakan project. Caranya terlebih dahulu masuk ke folder project
yang ingin direstore kemudian jalankan perintah berikut ini.
dotnet restore
Build
Selanjutnya adalah melakukan proses build atau kompilasi source code yang ada di dalam
project. Perintah yang digunakan adalah sebagai berikut.
dotnet build
Run
Untuk menjalankan aplikasi digunakan perintah ini.
dotnet run
Untuk menajalankan fitur hot reload pada .NET 6 anda juga dapat menambahkan kode berikut
ini. Hot reload dapat digunakan untuk mengupdate kode program tanpa harus melakukan
reload secara manual.
dotnet watch run
Dari informasi di atas dapat dilihat, untuk mengakses aplikasi pada web browser dapat
dilakukan dengan mengetikkan alamat http://localhost:5000 pada address bar web browser.
Untuk menghentikan aplikasi dapat dilakukan dengan cara menekan tombol Ctrl+C.
Untuk project ASP.NET Core Web API, untuk melihat hasilnya dapat mengakses alamat
sebagai berikut: https://localhost:5001/api/Values.
Installasi Visual Studio for Mac 2022

20
Installer Visual Studio for Mac 2022 dapat diunduh di
https://visualstudio.microsoft.com/vs/mac/. Bagi pembaca yang belum memiliki lisensinya
dapat mengunduh Visual Studio for Mac 2022 yang bersifat gratis. Proses instalasi visual
studio di Mac sangat mudah, setelah mengunduh file Visual yang berekstensi .dmg anda
dapat melakukan proses instalasi berikut:
Kemudian dilanjutkan dengan proses download sampai Visual Studio for Mac selesai
diunduh.
Jika anda juga ingin mengembangkan aplikasi cross platform mobile development untuk IOS
dan Android, anda dapat menginstall XCode dan Android SDK setelah proses instalasi selesai.

21
Catatan
Versi Visual Studio 2022 yang digunakan pada buku ini adalah versi 17.5. Sedangkan untuk
database menggunakan Azure SQL Edge (versi SQL Server yang bisa diinstal pada
MacBook dengan arsitektur apple solicon.
Antarmuka
Pada sub bab ini memberikan penjelasan tentang antarmuka Visual Studio for Mac 2022.
Visual Studio akan menampilkan Start Page ini saat dijalankan.
Pada antarmuka ini, user dapat melakukan aksi seperti:
- Recent, membuka project dari daftar history project yang pernah dibuka dengan tool
ini.
- Open, membuat project dari media penyimpanan lokal atau remote version control
seperti GitHub.
- New Project, membuat project baru.
Untuk membuat project baru anda dapat memilih New, kemudian akan tampil jendela
pemilihan project template sebagai berikut:

22
Ada beberapa pilihan template untuk membuat aplikasi Console, Web, dan Multiplatform.
Antarmuka di atas terbagi atas beberapa bagian yaitu:
- Solution Explorer.
- Code Editor.
- Toolbox.
- Properties.
- Output.
- Error List.
Solution Explorer
Solution Explorer dapat dilihat pada bagian kiri atas pada Visual Studio 2022 for Mac.

23
Solution Explorer menampilkan Solution. Solution dapat berisi satu atau lebih Project. User
dapat melihat daftar file yang dimiliki oleh project. User dapat memilih file yang ingin dilihat.
Editor
Editor berfungsi untuk menambah atau memodifikasi item atau kode baik secara visual
ataupun kode dari file yang dipilih. Pada gambar di bawah ini contoh Code Editor. Code
Editor berfungsi untuk mengedit file text.
Toolbox
Toolbox pada Visual Studio for Mac berisi snippet dari template kode yang akan ditulis.
Dengan menggunakan snippet anda dapat menuliskan kode lebih cepat. Pada project lain
seperti MAUI Cross Platform, snippet akan berisi kontrol seperti textbox, label, dll yang dapat
digunakan untuk membuat interface aplikasi mobile.
Properties
Bagian Properties menampilkan detail informasi dari item yang dipilih pada Editor. Biasanya
informasi yang ditampilkan pada bagian ini berkaitan dengan item yang dipilih saat mode
Visual Editor.

24
Gambar di sebelah kanan tidak menampilkan informasi, hal ini terjadi ketika Editor sedang
menampilkan file text. Saat mode Editor Visual, maka dapat dilihat property-property yang
dimiliki oleh file yang sedang dibuka.
Output
Bagian Output menampilkan keluaran dari proses yang dijalankan pada Visual Studio.
Seperti proses build atau kompilasi kode. Selain itu bagian ini juga menampilkan keluaran
dari program yang dijalankan, sebagai contoh keluaran dari program berbasis Command
Line.
Gambar 33. Visual Studio 2017 – Output.
Error List
Bagian Error List menampilkan error yang terjadi baik dari kode yang ditulis, atau error yang
terjadi karena program yang dibuat melakukan kesalahan atau mendapatkan pesan error dari
sistem lain. Sebagai ketika program yang dibuat tidak bisa melakukan koneksi ke database.
Solution & Project
Solution adalah tempat yang dapat berisi banyak project. Setiap solution akan memiliki
sebuah file *.sln. Setiap solution akan disimpan ke dalam folder dengan nama yang sama
dengan nama solutionnya. Pada Visual Studio, solution dapat dilihat pada bagian Solution
Explorer.

25
Solution
Pada Visual Studio, solution dapat dibuat dengan dua cara. Yang pertama adalah dengan
membuat solution kosong. Langkah pertama adalah dengan membuat project baru dengan
cara memilih File > New > Project.
Setelah itu Visual Studio akan menampilkan window New Project seperti pada gambar di
atas. Pada daftar Installed pilih Other Project Types > Visual Studio Solutions. Kemudian
pilih API. Selanjutnya tulis nama solution pada kolom Name. Klik tombol Browse pada
kolom Location jika ingin menentukan lokasi penyimpan. Selanjutnya klik tombol OK.
Kemudian anda dapat memilih dilokasi mana anda akan menyimpan project yang anda
buat.

26
Build & Debug
Pada pembangunan aplikasi desktop atau mobile, file-file kode program akan dikompilasi
menjadi file executable dengan format binary. Untuk aplikasi web, file-file kode program
akan dideploy ke web server kemudian setelah web server aktif maka aplikasi web tersebut
dapat dijalankan dengan menggunakan web browser yang mengakses alamat web server
tersebut.
Proses kompilasi dikenal juga dengan istilah Build. Untuk melakukan proses ini dengan
Visual Studio, pengguna dapat melakukannya dengan cara klik kanan pada solution yang ada
pada Solution Explorer kemudian pilih Build Solution. Dengan cara ini maka proses build
akan dilakukan pada seluruh project yang ada di dalam solution. Jika proses build hanya
ingin dilakukan pada salah satu project saja, maka lakukan klik kanan pada project yang
diinginkan pada Solution Explorer kemudian pilih Build.
Status proses ini dapat dilihat pada bagian Output.

27
Proses Debug adalah proses untuk menjalankan StartUp project atau project yang diinginkan.
StartUp project biasanya adalah project yang pertama kali dibuat pada solution. Pada Solution
Explorer, StartUp project dapat dibedakan dengan nama project dengan cetak tebal seperti
yang terlihat pada project ConsoleApp1 pada gambar di atas. Jika proses debug dilakukan
dengan cara memilih Debug maka StartUp project akan dijalankan oleh Visual Studio.
Sedangkan jika ingin melakukan proses debug pada project yang diinginkan saja maka klik
kanan pada project yang ada di Solution Explorer kemudian pilih Debug > Start new instance.
Reference
Sebuah project memiliki library default. Library default ini akan berbeda-beda antar setiap
tipe project. Sebagai contoh project console akan memiliki library yang berbeda jika
dibandingkan dengan project mobile. Untuk melihat library apa saja yang dimiliki oleh suatu
project, maka dapat dilihat dengan cara membuka References pada project.
Pada folder Dependency dapat dilihat library apa saja yang digunakan pada aplikasi yang anda
buat. Anda juga dapat menambahkan referensi baru dengan cara klik kanan pada project dan
memilih Add - Reference.
Anda dapat menambahkan library dari beberapa sumber seperti:

28
• Project yang ada pada solution yang sama
• Library dari Nuget Package Manager
• Library bawaan dari .NET SDK
NuGet
Untuk project yang dibangun dengan .NET Core Framework maka salah satu cara untuk
menambahkan library dengan menggunakan NuGet. NuGet package manager berisi library
third party (baik yang gratis maupun berbayar) yang dapat ditambahkan kedalam project.
Sebagai contoh gambar dibawah ini menunjukan bagaimana menambahkan package dari
NuGet Package Manager. Untuk menambahkan library dari NuGet, klik kanan pada project,
kemudian pilih Managed NuGet Package.
Maka akan ditampilkan daftar library yang akan atau telah diinstall. Jika ingin menginstall
library maka klik tab Browse. Maka akan ditampilkan library yang tersedia secara online.
Untuk itu harus dipastikan komputer pengguna terkoneksi dengan internet jika ingin
menggunakan fitur ini.
Jika ingin mencari library yang diinginkan, maka bisa mengetikan kata kunci pada kolom
Search.
Misal library yang diinginkan telah ditemukan adalah Entity Framework Core, maka klik
library tersebut maka di samping kanan daftar dapat dilihat informasi detail dari library

29
tersebut. Jika ingin menginstallnya maka klik tombol Install. Kemudian ikutan instruksi
selanjutnya.
Setelah library berhasil untuk diinstall, anda dapat melihat hasilnya pada folder NuGet sebagai
berikut:
Visual Studio Code
File installer Visual Studio Code dapat diunduh pada link
berikut https://code.visualstudio.com/download.

30
Installasi
Windows
Untuk platform Windows tersedia dua pilihan file, yaitu installer dan .zip. Untuk file .zip
tidak perlu melakukan proses installasi, cukup melakukan proses extract file .zip. Kemudian
Visual Studio Code dapat dijalankan dengan mengeksekusi file Code.exe.
Mac OS
Untuk platform Mac OS terdapat file zip yang dapat diunduh. Cukup extract file tersebut
maka hasilnya adalah sebagai berikut.
Setelah diklik maka akan dapa dilihat antarmuka sebagai berikut.

31
Linux
Bagi pengguna Linux Ubuntu, installer Visual Studio Code yang digunakan adalah file .deb.
Setelah file diunduh, klik dua kali pada file tersebut. Kemudian proses installasi akan
dilakukan seperti pada gambar di bawah ini.
Setelah proses installasi selesai maka untuk menjalankannya dapat dilakukan dengan cara
mencari dari fitur “search your computer”, kemudian ketik code pada kolom pencarian.
Makan akan ditampilkan item hasil pencarian seperti pada gambar di bawah ini.
Pada gambar di atas dapat dilihat terdapat Visual Studio Code pada group Applications. Klik
icon tersebut untuk menjalankannya.

32
Antarmuka
Pada gambar di bawah ini dapat dilihat layout dasar antarmuka Visual Studio Code.
Dari gambar di atas dapat dilihat layout terbagi atas 5 bagian yaitu:
a. View Bar, berisi tombol-tombol yaitu:
o Explorer yang berfungsi untuk melihat daftar folder dan file-file didalamnya.
o Search untuk melakukan pencarian. o Git untuk melihat daftar folder yang

33
disimpan pada Git repository. o Debug. o Extension untuk melihat
daftar extension yang tersedia pada repository.
b. Side Bar, akan menampilkan view sesuai dengan tombol pada View Bar yang dipilih.
c. Editor Group, akan menampilkan window-window editor dari file yang dibuka.
Artinya jika dibuka 2 file maka akan dapat terlihat 2 windows seperti pada gambar di
atas.
d. Panel akan memberikan informasi output dari hasil proses debug, error, warning dan
dapat juga berfungsi sebagai integrated terminal.
e. Status Bar berfungsi untuk menampilkan informasi dari project dan file yang sedang
diedit.
Tool Tambahan
Pada sub bab ini akan diterangkan cara untuk menambah tool atau extension yang tersedia
pada repository. Akses ke repository memerlukan akses internet. Cara menginstall extension
dapat dilakukan dengan dua cara, yaitu dengan menggunakan:
1. Extensions.
2. Integrated Terminal.
Extension
Untuk mengakses daftar extension yang tersedia dapat mengklik tombol Extensions pada View
Bar. Berikut adalah tampilan daftar extension.
Klik tombol Install kemudian setelah installasi selesai, klik tombol Reload.
Untuk mencari extension yang diinginkan dapat mengetikkan keyword pada kolom pencarian.

34
Sebagai contoh, keyword yang digunakan pada kolom pencarian adalah yeoman. Maka akan
ditampilkan extension yang sesuai dengan keyword. Jika ingin melihat detail dari extension
maka dapat diklik. Maka detail extension yo dapat dilihat seperti pada gambar. Klik tombol
install yang berwarna hijau untuk menginstall extension ini.
Setelah proses installasi selesai maka akan dapat dilihat perubahan status pada tombol install
menjadi seperti pada gambar di bawah ini.
Klik tombol Reload untuk mengaktifkan extension ini.
Integrated Terminal
Cara kedua adalah dengan Terminal. Untuk menampilkan terminal dapat dilakukan dengan
cara memilih menu View > Integrated Terminal.

35
Integrated Terminal seperti command prompt yang memungkinkan pengguna menuliskan
perintah. Perintah yang dapat digunakan untuk menginstall extension adalah npm (nuget
package manager).
Sebagai contoh, jika ingin menginstall extension generator-web maka dapat diketik perintah
berikut ini pada terminal.
npm install -g generator-webapp
Maka hasilnya akan dapat dilihat pada gambar di atas.
Membuat Project
Secara default Visual Studio Code hanya berfungsi untuk membuat project yang telah ada
yaitu project yang telah dibuat sebelumnya dengan Visual Studio 2015. Visual Studio Code
tidak memiliki feature untuk membuat Project, tidak terdapat menu File > New > Project.
Pada sub bab ini akan diberikan langkah-langkah untuk membuat project baru sehingga bagi
pengguna yang tidak memiliki Visual Studio 2015 tetap dapat membangun aplikasi web
ASP.NET Core dari awal.
Project Console HelloWorld
Berikut langkah-langkah untuk membuat project. Nama project yang akan dibuat adalah
“helloworld”. Langkah pertama adalah membuat folder “helloworld”.
dotnet new console -o helloworld
Hasil dari perintah ini berupa dua file, yaitu:
1. Program.cs.
2. helloworld.csproj, file ini adalah file penting yang harus dimiliki oleh sebuah project.

36
Untuk membuka project helloworld pada Visual Studio Code dapat dilakukan dengan
memilih menu File > Open Folder. Kemudian pilih lokasi folder helloworld yang telah dibuat
sebelumnya. Kemudian buka file Program.cs maka akan dapat dilihat tampilan seperti pada
gambar di bawah ini.
Akan ditampilkan dialog konfirmasi seperti pada gambar di atas, klik tombol Yes dan Restore.
Selanjutnya akan dilakukan proses restore oleh Visual Studio Code.
Selanjutnya untuk proses debug klik tombol Debug. Kemudian klik tombol segitiga berwarna
hijau disamping label DEBUG seperti yang terlihat pada gambar di bawah ini.

37
Selanjutnya dilakukan proses menjalankan aplikasi. Dan hasilnya dapat dilihat pada gambar
di bawah ini.
Fitur-Fitur
Berikut adalah fitur-fitur yang dimiliki oleh Visual Studio Code.
Hover
Fitur ini akan memberikan informasi dari fungsi yang ditunjuk oleh cursor. Sebagai contoh
jika cursor diarahkan ke method WriteLine maka akan dapat informasinya seperti gambar di
bawah ini.

38
Parameter Hint
Method WriteLine dapat ditulis dengan cara yang berbeda-beda atau dikenal sebagai method
overloading. Artinya nama method yang sama tetapi berbeda jumlah parameter dan tipe data
yang digunakan pada method tersebut. Visual Studio Code juga dapat memberikan hint
sampai level parameter pada kasus method over loading.
IntelliSense
Fitur ini umum ditemui pada setiap editor kode pemrograman. Fungsi fitur ini adalah sebagai
membantu melengkapi kode yang sedang ditulis dan memberikan hint.

39
Split Editor
Dengan mengklik tombol Split Editor (tombol dengan lingkaran merah) maka dapat
ditampilkan window editor seperti pada gambar di bawah ini. Fitur ini dapat memudahkan
developer untuk membandingkan dua file atau bekerja pada dua file secara bergantian.
Go to Definition
Fitur ini berfungsi untuk menuju ke source code dari method yang dipilih. Cara untuk
menggunakan fitur ini adalah dengan menekan tombol Ctrl dan tahan kemudian klik method
yang diinginkan dengan cursor mouse (Ctrl+Click).
Jika ingin membuka source code definition langsung pada window baru maka dapat
digunakan kombinasi Ctrl+Alt+Click. Maka hasilnya akan seperti pada gambar di bawah ini.

40
Error & Warning
Fitur ini untuk memberikan informasi jika terjadi kesalahan pada kode yang ditulis. Informasi
tentang kesalahan dan peringatan dapat dilihat langsung pada baris yang salah dengan tanda
garis merah. Sedangkan rangkuman kesalahan dan peringatan dapat dilihat pada area di
bawah editor seperti yang dapat dilihat pada gambar di bawah ini.
Folding
Fitur ini berfungsi untuk menutup dan membuka “lipatan” suatu blok pada kode. Pada
bahasa pemrograman C# suatu blok adalah bagian yang dibuka dengan tanda “{“ dan ditutup
dengan tanda “}”.
Untuk membuka dan menutup “lipatan” blok dapat menggunakan tombol toggle disamping
kiri tanda “{“ dan “}” seperti yang terlihat pada gambar di bawah ini.

41
Selain itu juga dapat digunakan tombol shortcut berikut ini:
1. Untuk menutup daerah dimana cursor aktif digunakan kombinasi tombol Ctrl+Shift+[.
2. Untuk membuka daerah dimana cursor aktif digunakan kombinasi tombol
Ctrl+Shift+].
3. Untuk menutup seluruh blok dapat digunakan kombinasi tombol Ctrl+K kemudian
Ctrl+0.
4. Untuk membuka seluruh blok yang tertutup dapat digunakan kombinasi tombol
Ctrl+K kemudian Ctrl+J.
Komentar
Seperti halnya code editor pada umumnya, Visual Studio Code juga memiliki fitur untuk
membuat baris-baris kode menjadi komentar seperti gambar berikut ini. Baris ke-5 sampai
ke-11 menjadi komentar dengan cara memilih baris-baris tersebut kemudian tekan kombinasi
tombol Ctrl+K+C.
Sedangkan untuk membuka komentar pada baris-baris tersebut dapat dilakukan dengan cara
memilih baris-baris tersebut kemudian menekan kombinasi tombol Ctrl+K+U.
Debugging
Visual Studio Code tidak sekedar kode editor saja. Kelebihan utamanya adalah kemampuan
proses debug kode program yang ditulis. Visual Studio Code mampu melakukan debug
berbagai macam bahasa pemrograman. Caranya adalah dengan menginstall extension debug
untuk bahasa pemrograman yang digunakan.

42
Pada gambar di bawah ini adalah beberapa extension populer berdasarkan jumlah
download
(https://marketplace.visualstudio.com/search?target=VSCode&sortBy=Downloads).
Dari sebagain daftar di bawah ini dapat dilihat beberapa extension bahasa
pemrograman dan extension lain yang berguna membangun aplikasi web, seperti:
1. C#.
2. Python.
3. C/C++.
4. Go.
5. HTML.
6. PHP.
7. Javascript.
8. AngularJS.
9. Dan lain-lain.
Saat proses debug dilakukan maka pada Visual Studio Code akan dapat dilihat antarmuka
akan terbagi menjadi area-area seperti berikut ini.

43
Keterangan:
a. Debug Side Bar akan ditampilkan ketika tombol Debug diklik.
b. Untuk memulai proses debug dapat dilakukan dengan mengklik tombol yang
ditunjuk oleh B.
c. Saat proses debug sedang berjalan akan dapat dilihat tombol control yang ditunjuk
oleh C.
d. Debug Console Panel berfungsi untuk menampilkan informasi hasil proses debug.
Area ini juga dapat menampilkan output dari program, seperti yang dapat dilihat pada
gambar di bawah ini.

44
Postman
Postman adalah tool untuk membantu proses pembangunan API. Tool ini akan digunakan
untuk menguji dan menjalankan Restful Service yang dibangun dengan ASP.NET Core Web
API. Tool ini tersedia untuk platform Windows dan Mac OS X.
Untuk mengunduh installer tool ini dapat mengunjungi link
berikut ini https://www.getpostman.com/apps.
Berikut ini adalah tampilan aplikasi Postman. Selanjutnya akan dijelaskan beberapa hal
penting untuk penggunaan aplikasi ini.
Address bar dapat dilihat pada kotak merah pada gambar di atas. Address bar ini berisi alamat
atau route untuk mengakses class API controller.

45
Opsi untuk memilih method HTTP yang ingin digunakan dapat dilihat di kotak merah pada
gambar di atas.
Status akses dapat dilihat pada kotak merah di atas. Status akses ini memberikan informasi
berhasil atau tidaknya akses ke class API controller.

46
Hasil keluaran atau ouput dari class API controller yang diakses dapat dilihat pada kotak
merah pada gambar di atas.
Insomnia
Insomnia adalah tool alternatif yang bisa digunakan untuk membuat http request dan
pengujian RESTFul API. Dibandingkan POSTMAN tools ini mempunyai kelebihan yaitu
dukungan terhadap GraphQL API. Tool ini tersedia untuk platform Windows dan Mac OS X.
Untuk mendownload Insomnia anda dapat mengakses link berikut ini
https://insomnia.rest/download.

47
3 - ASP.NET Core Web API
Pada bab ini akan diberikan panduan untuk membuat project ASP.NET Core Web API.
Kemudian menjalankan dan mengaksesnya.
Project
Membuat Project
Berikut ini panduan membuat project ASP.NET Core Web API dengan menggunakan Visual
Studio for Mac 2022. Untuk versi Visual Studio for Mac yang digunakan pada contoh dibawah
ini adalah versi
Visual Studio 2022 for Mac
Langkah pertama adalah membuat blank solution dengan nama SampleWebAPI.
Selanjutnya klik kanan pada solution dan pilih Add > New Project. Kemudian pilih template
API dan pilih .NET 6 sebagai target framework yang akan digunakan. Nama project adalah
HelloWebAPI.
Hasilnya dapat dilihat pada Solution Explorer. Struktur folder dan file-file yang terdapat pada
project ini dapat dilihat pada gambar di bawah ini.

48
Untuk menambahkan file class controller dapat dilakukan dengan cara klik kanan pada folder
Controllers pada Solution Explorer, kemudian pilih Add > File > kemudian pilih Web API
Controller Class seperti pada gambar di bawah ini.
Tambahkan controller dengan nama HomeController. Hasilnya dapat dilihat pada gambar di
bawah ini.

49
Struktur Project
Project ASP.NET Web API memiliki file-file dan folder yang memiliki fungsi khusus. File-file
utama pada project ini adalah:
- Program.cs.
- appsettings.json.
File Program.cs
Berikut ini adalah isi file ini.
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at
https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI();
}
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.Run();
Program.cs adalah file utama dari project ASP.NET Core, baik itu ASP.NET Core MVC atau
ASP.NET Core Web API. Dilihat dari isinya file ini seperti file utama pada project asp.net,
dimana file ini menjadi file utama untuk menjalankan aplikasi web ini. Pada file ini juga
dipanggil modul-modul yang akan digunakan pada Project.

50
File appsettings.json
File ini berfungsi untuk menyimpan konfigurasi yang digunakan pada aplikasi. Salah satunya
adalah dapat digunakan untuk menyimpan connection string ke database. Berikut adalah isi
dari appsettings.json.
appsettings.json
{
"Logging": {
"IncludeScopes": false,
"Debug": {
"LogLevel": {
"Default": "Warning"
}
},
"Console": {
"LogLevel": {
"Default": "Warning"
}
}
}
}
File *.csproj
File tipe ini adalah konfigurasi project. Jika nama project atau folder project adalah
HelloWebAPI maka nama file konfigurasi project tersebut adalah HelloWebAPI.csproj.
Berikut adalah isi dari file ini.
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>net6.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Swashbuckle.AspNetCore" Version="6.2.3" />
</ItemGroup>
</Project>
Folder Controllers
Project ini memiliki folder utama yaitu Controllers. Folder ini berfungsi untuk menyimpan
class-class controler Web API. Untuk membuat atau menambah Web API maka cukup dengan
menambahkan file class controller pada folder ini. Pada project yang telah dibuat terdapat
file class controller WeatherForecastController yang merupakan sample controller pada saat
ASP.NET Web API dibuat untuk pertama kali.

51
Class controller ini adalah inti dari ASP.NET Web API. Berbeda dengan aplikasi web pada
umumnya maka cara mengakses class controller ini juga berbeda. Jika pembaca telah
mengenal ASP.NET MVC maka class controller di atas seperti class controller pada ASP.NET
MVC. Tetapi cara akses class ini berbeda jika dibandingkan bagaimana cara mengaksesnya
pada ASP.NET MVC.
Pada sub bab selanjutnya akan diberikan cara mengakses class controller dengan
menggunakan web browser. Dan pembahasan detail tentang class controller ini akan
dilakukan pada bab selanjutnya.
Menjalankan Project
Seperti telah dijelaskan di atas bahwa project ASP.NET Core seperti project console, maka
dapat digunakan istilah “menjalankan” project atau program.
Jika project dibangun dengan menggunakan Visual Studio 2022, maka untuk menjalankannya
dapat dilakukan dengan menekan tombol Run.
Jika project dibangung dengan Visual Studio Code, maka project sebaiknya dibuild terlebih
dahulu dengan perintah berikut:
dotnet build
Proses build ini juga dilakukan setelah memodifikasi source code pada project yang tengah
dikerjakan. Kemudian dilanjutkan dengan mengetikkan perintah di bawah ini pada
Integrated Terminal atau pada window Command Prompt.
dotnet rub
Hasilnya dapat dilihat pada gambar di bawah ini.
Dari gambar di atas dapat dilihat alamat untuk mengakses Web API dari web browser
adalah dengan cara mengakses link https://localhost:5001 atau http://localhost:5000. Tetapi
mengakses class controller tersebut tidak dapat dilakukan dengan langsung mengakses

52
kedua link tersebut. Cara mengakses class controller tersebut dapat dilihat pada sub bab di
bawah ini.
Mengakses Web API
Cara mengakses sebuah class controller Web API dapat menggunakan alamat yang telah
dideklarasikan pada atribut [Route] yang terletak pada setiap class.
. . .
namespace HelloWebAPI.Controllers
{
[Route("api/[controller]")]
public class [controller]Controller : Controller
{
. . .
}
}
. . .
Pada contoh di atas untuk mengakses [controller] digunakan alamat
http://[hostname]/api/[controller]
Jika nama controller adalah Values (file ValuesController.cs) maka akan dimiliki kode class
sebagai berikut ini:
. . . namespace
HelloWebAPI.Controllers
{
[Route("api/[controller]")]
public class ValuesController : Controller
{
. . .
} }
. . .
Dan alamat untuk mengaksesnya adalah sebagai berikut:
http://[hostname]/api/Values
Jika nama controller adalah Book (file BookController.cs) maka akan dimiliki kode class sebagai
berikut ini:
. . . namespace
HelloWebAPI.Controllers
{
[Route("api/[controller]")]
public class BookController : Controller
{
. . .
} }
. . .
Dan alamat untuk mengaksesnya adalah sebagai berikut:

53
http://[hostname]/api/Book
Web Browser
Setelah project dijalankan atau dideploy pada web server seperti yang telah dilakukan pada
sub bab Menjalankan Project, maka selanjutnya buka web browser kemudian ketikkan alamat
berikut ini pada address bar http://localhost:5000/api/Values. Maka hasilnya dapat dilihat
pada gambar di bawah ini.
Postman
Berikut ini adalah gambar tampilan Postman.
Ketikkan alamat http://localhost:5000/api/Values pada kolom URL seperti yang terlihat pada
kotak warna merah kecil.
Kemudian pilih method GET dan klik tombol Send maka hasilnya dapat dilihat pada kotak
merah besar pada gambar di atas.

54
Class API Controller
Pada sub bab ini akan dijelaskan dasar-dasar tentang class API controller. Selain itu juga
diberikan contoh-contoh
Pada bab sebelumnya telah dibuat project ASP.NET Web API Controller dengan nama
HelloWebAPI yang memiliki sebuah class Web API Controller atau lebih dikenal sebagai class
API controller. Nama class API controller pada project itu adalah ValuesController.cs dengan
isi sebagai berikut.
ValuesController.cs
using System;
using System.Collections.Generic; using
System.Linq;
using System.Threading.Tasks; using
Microsoft.AspNetCore.Mvc;
namespace HelloWebAPI.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class ValuesController : ControllerBase
{
// GET api/values
[HttpGet]
public ActionResult<IEnumerable<string>> Get()
{
return new string[] { "value1", "value2" };
}
// GET api/values/5
[HttpGet("{id}")]
public ActionResult<string> Get(int id)
{
return "value";
}
// POST api/values
[HttpPost]
public void Post([FromBody] string value)
{
}
// PUT api/values/5
[HttpPut("{id}")]
public void Put(int id, [FromBody] string value)
{
}
// DELETE api/values/5
[HttpDelete("{id}")] public
void Delete(int id)
{
}
}
}
Seperti class pada umumnya, class API controller juga memiliki tiga bagian seperti berikut:
- Namespace.
- Class.
- Method.

55
Namespace
Namespace memberikan informasi nama project dan nama folder tempat class disimpan.
Pada kode di atas menggunakan namespace HelloWebAPI.Controllers. Kata pertama pada
namespace umumnya memberikan informasi nama project. Sedangkan kata berikutnya
memberikan informasi folder dan sub folder tampat class disimpan.
namespace HelloWebAPI.Controllers
{
…
}
Jadi dengan melihat nama namespace di atas dapat disimpulkan bahwa nama project adalah
HelloWebAPI dan folder tempat menyimpan class ini adalah Controllers. Jika class controller
disimpan di dalam sub folder dengan nama Basic yang berada di dalam folder Controller
maka dapat digunakan namespace dengan nama seperti berikut.
namespace HelloWebAPI.Controllers.Basic
{
…
}
Tetapi programmer dapat memberikan nama namespace sesuai keinginannya dan tidak ada
hubungannya dengan nama project atau folder tempat class disimpan. Tetapi untuk
kemudahan pengelolaan source code ada baiknya mengikuti tata cara yang telah dijelaskan
di atas.
Class
Seperti halnya nama class controller pada ASP.NET MVC, nama class API controller mengikuti
aturan yang sama.
[Route("api/[controller]")]
[ApiController]
public class ValuesController : ControllerBase
{
…
}
Aturan pertama adalah tata cara penamaan class controller. Seperti pada contoh di atas, nama
class API controller mengikuti aturan sebagai berikut:
[NAMA CONTROLLER]Controller
Jika ingin menggunakan nama Values maka nama class API controller adalah
ValuesController. Sedangkan jika ingin menggunakan nama Books maka nama class API
controller adalah BooksController. Aturan kedua adalah class API controller merupakan
turunan dari class ControllerBase.
Dibandingkan class controller pada MVC, class API controller memiliki dua atribut yang dapat
dilihat di atas deklarasi class. Atribut pertama adalah sebagai berikut:
[ApiController]

56
Atribut ini berfungsi menyatakan bahwa class adalah class API controller. Dengan
memberikan ini pada class maka seluruh method didalamnya akan diakses dengan tata cara
Web API seperti atribut kedua berikut ini.
[Route("api/[controller]")]
Atribut ini adalah route atau tata cara penulisan alamat untuk mengakses class API controller
ini. Tanda [controller] merupakan variable yang nilainya akan sesuai dengan nama class API
controller. Jika nama class adalah ValuesController maka alamat yang digunakan adalah
api/Values.
Jika ingin menentukan sendiri route untuk mengakses class API controller maka dapat
dilakukan dengan memodifikasi baris atribut di atas menjadi sebagai berikut.
[Route("api/ContohWebAPI")]
Maka class API controller dapat diakses dengan menulis alamat berikut
http://localhost:5000/api/ContohWebAPI pada address bar. Sehingga hasilnya dapat dilihat
pada gambar di bawah ini.
Method
Method-method pada class API controller juga memiliki kesamaan dengan method-method
pada class controller MVC atau method-method pada class pada umumnya. Tetapi ada
beberapa hal yang membedakan class API controller dengan class pada umumnya.
Atribut method HTTP
Yang membedakan adalah setiap method pada class API controller memiliki atribut yang
menyatakan method HTTP yang digunakan untuk mengakses masing-masing method
tersebut.

57
Sebagai contoh method Get di bawah ini.
[HttpGet]
public ActionResult<IEnumerable<string>> Get()
{
return new string[] { "value1", "value2" }; }
Method ini memiliki atribut [HttpGet] yang artinya method ini dapat diakses dengan
menggunakan method HTTP GET. Method dengan atribut ini dapat diakses dengan cara
mengetikkan route pada address bar di web browser.
Atribut-atribut lain yang dapat digunakan adalah:
- HttpPost, method dengan atribut ini dapat diakses dengan method HTTP POST.
- HttpPut, method dengan atribut ini dapat diakses dengan method HTTP PUT.
- HttpDelete, method dengan atribut ini dapat diakses dengan method HTTP DELETE.
Method dengan atribut selain HttpGet tidak bisa diakses dengan cara mengetikkan route pada
address bar di web browser, tetapi harus diakses dengan cara lain seperti dengan bantuan
tool Postman atau dengan membuat program. Pada program Postman, pengguna dapat
memilih method HTTP yang ingin digunakan seperti pada kotak merah di gambar berikut
ini.
Parameter
Pada sub bab Atribut method HTTP dapat dilihat bahwa nama method pada class API
controller tidak diperlukan untuk mengakses method tersebut. Karena untuk mengakses
method tersebut cukup menggunakan method HTTP saja.
Sebuah atribut method HTTP yang sama dapat digunakan oleh beberapa method asalnya
masing-masing method memiliki parameter atau input yang berbeda seperti pada contoh di
bawah ini.
ContohMethodController.cs

58
using System;
using System.Collections.Generic; using
System.Linq;
using System.Threading.Tasks; using
Microsoft.AspNetCore.Mvc;
namespace HelloWebAPI.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class ContohMethodController : ControllerBase
{
// GET api/ContohMethod
[HttpGet]
public ActionResult<IEnumerable<string>> GetAll()
{
return new string[] { "value1", "value2", "value3", "value4"
};
}
// GET api/ContohMethod/5
[HttpGet("{id}")]
public ActionResult<string> GetById(int id)
{
string result = "value" + id;
return result;
}
// GET api/ContohMethod/2/3
[HttpGet("{id1}/{id2}")]
public ActionResult<IEnumerable<string>> GetByTwo(int id1, int
id2)
{
return new string[] { "value"+id1, "value"+id2 };
}
}
}
Pada contoh di atas terdapat tiga method yang menggunakan atribut HttpGet. Method
pertama adalah GetAll untuk mengakses method ini digunakan dengan cara seperti pada
gambar di bawah ini.

59
Dari contoh di atas digunakan alamat dan method HTTP seperti pada kotak merah di atas.
Sedangkan untuk mengakses method GetById dapat dilakukan dengan cara seperti di bawah
ini.
Cara akses method GetById ini masih menggunakan method HTTP GET, tetapi ada perbedaan
alamat yang digunakan yaitu seperti berikut:
http://localhost:5000/api/ContohMethod/2
Pada alamat di atas dapat, setelah nama class ContohMethod dilanjutkan dengan nilai
parameter. Cara penulisan parameter di alamat tersebut sesuai dengan atribut yang
digunakan oleh method ini, seperti yang dapat dilihat pada baris yang dicetak tebal.
[HttpGet("{id}")] public
ActionResult<string> GetById(int id)
{
string result = "value" + id;
return result;
}
Sedangkan atribut yang dimiliki oleh method GetByTwo dapat dilihat pada baris yang dicetak
tebal di bawah ini.
[HttpGet("{id1}/{id2}")] public ActionResult<IEnumerable<string>>
GetByTwo(int id1, int id2)
{
return new string[] { "value"+id1, "value"+id2 }; }
Sehingga alamat yang digunakan untuk mengakses adalah seperti contoh berikut:
http://localhost:5000/api/ContohMethod/4/7
Atau seperti pada gambar di bawah ini.

60
Untuk mengakses method yang menggunakan atribut selain HttpGet dengan Postman, perlu
dimiliki informasi dengan parameter dari method tersebut. Sebagai contoh method Post pada
class API controller ValuesController.cs berikut ini:
[HttpPost]
public void Post([FromBody] string value)
{
}
Parameter pada method ini adalah seperti teks yang tercetak tebal. Hal ini berbeda jika
dibandingkan dengan method-method dengan atribut HttpGet. Untuk mengakses method ini
dengan Postman maka dapat dilakukan dengan cara berikut ini.
Pertama tentukan opsi method HTTP adalah POST dan alamat untuk mengakses class API
controller ValuesController.

61
Kemudian klik tab Body dan pilih raw, kemudian pilih opsi JSON (application/json). Dan
pada kolom ketikkan string (pada contoh di atas adalah “test”). Nilai string ini sesuai tipe
parameter input pada method Post.
Kemudian klik tombol Send, maka dapat dilihat status OK pada kotak merah di atas. Hal ini
menandakan akses ke method Post berhasil dilakukan.
Method selanjutnya adalah Put dengan kode sebagai berikut.
[HttpPut("{id}")] public void Put(int id, [FromBody] string value)
{
}
Pada method di atas terlihat jika cara mengakses method ini dengan gabungan cara antara
method Get dan Post.

62
Dari atribut method di atas, maka untuk mengakses method Put dapat menggunakan alamat
sebagai berikut:
http://localhost:5000/api/Values/1
Alamat ini mirip dengan alamat untuk mengakses method Get yang kedua, dimana
parameter id (pada contoh nilai id adalah 1) diberikan di alamat tersebut di atas. Dan
parameter kedua dari method ini adalah [FromBody] string value, maka perlu digunakan
pengisian nilai pada tab Body seperti saat mengakses method Post.
Yang terakhir adalah method Delete yang memiliki atribut HttpDelete seperti berikut:
[HttpDelete("{id}")] public void Delete(int id)
{
}
Pada method Delete ini hanya memiliki parameter id yang dapat diberikan dengan alamat
seperti pada gambar di bawah ini.

63
Class Model
Pada sub bab ini akan dijelaskan pembuatan class model yang digunakan oleh class API
controller untuk menangani data. Class model dapat menjadi representasi dari table pada
suatu database. Sebagai contoh dimiliki tabel mahasiswa sebagai berikut:
NIM
Nama
Alamat
Jurusan
Maka dapat dibuat class model sebagai berikut:
public class Mahasiswa
{
public string NIM { set; get; } public string Nama {
set; get; } public string Alamat { set; get; } public
string Jurusan { set; get; }
}
Selain itu juga dapat menjadi representasi objek di dunia nyata yang diperlukan pada aplikasi.
Membuat Class Model
Visual Studio 2022
Untuk membuat class model maka terlebih dahulu buat folder Models di dalam project.
Kemudian klik kanan pada project HelloWebAPI dan pilih Add > New Folder, kemudian ketik
nama folder Models. Selanjutnya klik kanan pada Models, kemudian pilih Add > Class.
Sebagai contoh nama class adalah Mahasiswa.cs. Kemudian berikut ini adalah kode dari class
Mahasiswa.cs.
public class Mahasiswa
{
public string NIM { set; get; } = default!;
public string Nama { set; get; } = default!;
public string Alamat { set; get; } = default!;
public string Jurusan { set; get; } = default!;
}

64
Membuat Class API Controller
Langkah selanjutnya adalah membuat class API controller yang menggunakan class model.
Setelah membuat class API controller dengan cara yang telah diberikan di bab sebelumnya,
maka berikut adalah isi class API controller.
MahasiswaController.cs
using System;
using System.Collections.Generic; using
System.Linq;
using System.Threading.Tasks; using
Microsoft.AspNetCore.Mvc;
using HelloWebAPI.Models;
namespace HelloWebAPI.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class MahasiswaController : ControllerBase
{
// GET api/values
[HttpGet]
public ActionResult<IEnumerable<Mahasiswa>> Get()
{
return new Mahasiswa[] {
new Mahasiswa{NIM = "123", Nama = "Nama123", Alamat =
"Alamat123", Jurusan = "Jurusan123"},
new Mahasiswa{NIM = "234", Nama = "Nama234", Alamat =
"Alamat234", Jurusan = "Jurusan234"},
new Mahasiswa{NIM = "345", Nama = "Nama345", Alamat =
"Alamat345", Jurusan = "Jurusan345"}
};
}
// GET api/values/5
[HttpGet("{id}")]
public ActionResult<Mahasiswa> Get(string id)
{
return new Mahasiswa{NIM = "123", Nama = "Nama123", Alamat =
"Alamat123", Jurusan = "Jurusan123"};
}
// POST api/values
[HttpPost]
public void Post([FromBody] Mahasiswa value)
{
}
// PUT api/values/5
[HttpPut("{id}")]
public void Put(string id, [FromBody] Mahasiswa value)
{
}
// DELETE api/values/5
[HttpDelete("{id}")]
public void Delete(string id)
{

65
}
}
}
Kedua method Get dapat diakses dengan cara yang telah diterangkan pada bab sebelumnya.
Untuk mengakses class API controller ini digunakan alamat sebagai berikut:
https://localhost:7213/swagger/index.html
Karena template Web API dengan target .NET 6.0 sudah terpasang swagger, maka anda dapat
melakukan pengetesan menggunakan swagger UI. Tampilan dari swagger UI dapat dilihat
pada gambar dibawah ini.
Untuk mengakses api dengan method Get untuk menampilkan semua data mahasiswa, pilih
endpoint /api/Mahasiswa kemudian tekan tombol Try it out.
Maka akan ditampilkan output sebagai berikut:
Output di atas menggunakan format JSON yang merupakan format standar yang umum
digunakan oleh RESTful service. Dapat dilihat dari tampilan diatas bahwa status code yang
dikembalikan adalah 200 OK, ini artinya berhasil untuk menjalankan api di server.
Sedangkan untuk pengaksesan api mahasiswa dengan method GET membutuhkan parameter
berupa id.

66
Output akan menampilkan satu objek Mahasiswa saja seperti yang dapat dilihat pada gambar
di bawah ini.
Untuk method POST, PUT, dan DELETE akan dibahas pada bab selanjutnya ketika sudah
terhubung dengan database.

67
4 - Koneksi Database
Pada bab ini diberikan langkah-langkah untuk membuat project yang siap digunakan untuk
melakukan koneksi ke database. Kemudian menyiapkan class API controller dan model untuk
mengambil dan menyimpan data.
Entity Framework Core
Entity Framework Core adalah ORM (Object Relational Mapper) framework untuk
mempermudah mengakses database. Framework ini awalnya dibangun sebagai bagian dari
.NET framework yang hanya dapat digunakan pada platform Microsoft. Tetapi dengan
dikembangkannya .NET Core yang bersifat multiplatform, maka Entity Framework Core juga
dapat digunakan pada berbagai platform.
Entity Framework Core atau disingkat EF Core adalah object-relational mapper (OR/M) yang
memungkinkan software developer dapat bekerja dengan database dengan object .NET. Hal
ini mengurangi kode program untuk mengakses database, karena digantikan oleh class dan
method yang telah disediakan oleh framework ini.
EF Core mendukung berbagai macam database, tetapi tergantung ketersediaan provider
database. Saat buku ini ditulis telah tersedia provider database sebagai berikut:
1. MS SQL Server.
2. Azure SQL Edge
3. SQLite.
4. PostgreSQL
5. Oracle dan lain-lain.
Tetapi tidak semua provider yang disebutkan diatas adalah gratis, ada beberapa provider
database yang bersifat berbayar. Untuk mendapatkan update informasi terbaru tentang
provider database dapat mengunjungi alamat berikut
https://docs.microsoft.com/enus/ef/core/providers/.
EF Core mendukung dua pendekatan dalam mengembangkan aplikasi, yaitu:
1. Database First, pendekatan ini umum dilakukan dimana database dan tabel-tabel di
dalamnya telah terlebih dahulu dibuat. Kemudian dibuat class model berdasarkan
tabel-tabel di dalam database tersebut.
2. Code First, pada pendekatan ini yang dibuat terlebih dahulu adalah class-class model
kemudian tabel-tabel pada database akan secara otomatis dibuat saat pertama kali
aplikasi web dijalankan.
Menyiapkan Project
Sub bab ini memberikan panduan untuk membuat dan menyiapkan project agar siap
mengakses database. Panduan pembuatan dan persiapan project dilakukan pada dua tool
development yaitu Visual Studio 2022 dan Visual Studio Code. Agar project dapat melakukan
koneksi ke database perlu ditambahkan library yang sesuai dengan database yang digunakan.
Berikut adalah contoh menyiapkan project untuk mengakses database SQL Server.

68
Nama project yang dibuat adalah CoreBookStoreWebAPI.
Visual Studio 2022 for Mac
Berikut ini adalah panduan langkah-langkah membuat dan menyiapkan solution dan project
dengan Visual Studio 2022 for Mac.
Membuat Project
Pada solution SampleWebAPI yang sudah dibuat pada bab sebelumnya, tambahkan project
Web API baru dengan nama SampleWebAPI.CoreBookStoreWebAPI. Tampilan pada solution
explorer adalah sebagai berikut.
Menambahkan Library NuGet Package pada Project
Klik kanan pada project kemudian pilih manage NuGet Package, kemudian tambahkan
beberapa package berikut:
- Microsoft.EntityFrameworkCore
- Microsoft.EntityFrameworkCore. SqlServer
- Microsoft.EntityFrameworkCore.Tools
- Microsoft.EntityFrameworkCore.Design
Karena target .NET SDK yang digunakan adalah versi 6, maka pilih versi library yang juga
menggunakan versi 6 (pilih library versi terakhir yang berawalan 6).

69
Pada file .csproj dapat dilihat bahwa ada beberapa referensi pustaka yang sudah ditambahkan
pada project ini.
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>net6.0</TargetFramework>
-----
<ItemGroup>
<PackageReference Include="Swashbuckle.AspNetCore" Version="6.2.3" />
<PackageReference Include="Microsoft.EntityFrameworkCore"
Version="6.0.14" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Design"
Version="6.0.14">
<IncludeAssets>runtime; build; native; contentfiles; analyzers;
buildtransitive</IncludeAssets>
<PrivateAssets>all</PrivateAssets>
</PackageReference>
<PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer"
Version="6.0.14" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Tools"
Version="6.0.14">
<IncludeAssets>runtime; build; native; contentfiles; analyzers;
buildtransitive</IncludeAssets>
<PrivateAssets>all</PrivateAssets>
</PackageReference>
</ItemGroup>
</Project>
Pada Solution Explorer juga dapat dilihat daftar package yang telah diinstall seperti pada
gambar di bawah ini.

70
Konfigurasi Koneksi ke Database
Langkah selanjutnya adalah membuat file yang menyimpan informasi untuk melakukan
koneksi ke database SQL Server. Informasi ini disimpan pada file appsettings.json.
{
"ConnectionStrings": {
"DefaultConnection": "Server=localhost,1433;Database=BookStoreDb;User
Id=sa;Password=<password>;MultipleActiveResultSets=true;"
},
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*"
}
Menambahkan Data Context Class
Langkah selanjutnya adalah menambahkan folder Models, kemudian tambahkan class Author
yang akan digunakan untuk menyimpan informasi tentang Author. Kode untuk class Author
adalah sebagai berikut:
public class Author
{
public int AuthorId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
}
Selain class Author yang merepresentasikan data Author, buat juga class Book yang akan
digunakan untuk menyimpan data buku yang ditulis oleh Author. Untuk kode dari class Book
adalah sebagai berikut:

71
public class Book
{
public int BookId { get; set; }
public string Title { get; set; }
public DateTime PublishDate { get; set; }
public decimal BasePrice { get; set; }
}
Pada dua class yang sudah dibuat dapat dilihat bahwa kedua class tersebut memiliki properti
Id untuk menympan data yang unik dari masing-masing entitas. Untuk standarisasi aturan
yang ada pada EF disarankan untuk menggunakan nama table kemudian diikuti dengan Id
untuk penamaan propertinya. Jika class ini nanti digenerate menjadi tabel (menggunakan
metode code first) maka properti-properti dalam class tersebut akan di mapping menjadi tabel.
Menambahkan Data Context Class
Untuk melakukan koneksi ke database perlu dibuat sebuah class yang menangani hal
tersebut. Pada EF Core class DbContext digunakan untuk mengakses objek yang terhubung
dengan database. Pada DbContext class-class yang akan di mapping menjadi table di database
dapat ditambahkan. Untuk itu buat folder Data, kemudian tambahkan DbContext class
dengan nama PubContext.cs. Tambahkan kode berikut pada file PubContext.cs.
public class PubContext : DbContext
{
public PubContext(DbContextOptions options):base(options)
{}
public DbSet<Author> Authors { get; set; }
public DbSet<Book> Books { get; set; }
protected override void OnConfiguring(DbContextOptionsBuilder
optionsBuilder)
{
base.OnConfiguring(optionsBuilder);
}
}
Pada kode diatas dapat dilihat bahwa class PubContext yang akan dgunakan sebagai
DbContext harus diturunkan dari class DbContext. Kemudian tambahkan properti dengan tipe
DbSet<Nama Class> yang akan di mapping sebagai tabel pada database.
Mendaftarkan EF DataContext pada Program.cs
Setelah class DbContext dibuat, langkah selanjutnya adalah meregister class DbContext
sebagai services. Tambahkan EF Data Context services pada Program.cs, agar object Data
Context mengetahui default database connection yang akan digunakan.
builder.Services.AddDbContext<PubContext>(options => options.UseSqlServer(
builder.Configuration.GetConnectionString("DefaultConnection")));

72
Menjalankan EF Migrations
Ada dua cara yang dapat digunakan untuk menjalankan EF Migrations yaitu menggunakan
package manager console, dan yang kedua menggunakan dotnet CLI. Cara dibawah ini
menggunakan .NET CLI karena pada Visual Studio for Mac tidak ada package manager
console.
Pada EF Core ada dua cara untuk bekerja dengan database yaitu metode Code First dan
Database First. Metode Code First dapat digunakan jika anda akan membuat project baru
(green field), dengan menggunakan Code First, anda dapat mendefinisikan terlebih dahulu
class model yang nanti akan digenerate menjadi tabel di database. Misal pada
Jalankan EF Migrations dengan mengetikan perintah berikut:
dotnet ef migrations add "InitialCreate"
Jika perintah tersebut berhasil dijalankan, maka folder Migrations akan dibuat pada project.
Folder Migrations tersebut berisi file-file database script yang akan dapat dieksekusi ketika
akan membuat tabel-tabel-nya di database.
Untuk mengeksekusi file SQL pada folder Migrations jalankan perintah berikut:
dotnet ef database update
Jika perintah migrasi diatas berhasil untuk dijalankan, maka tabel-nya akan dibuat di
database. Anda dapat melihat hasil database yang dibuat dengan menggunakan SQL Server
Management Studio atau Azure Data Studio, pada buku ini dugunakan Azure Data Studio
karena SQL Server Management Studio tidak di dukung di perangkat Mac.
Buka Azure Data Studio, kemudian koneksikan ke database BookStoreDb. Berikut adalah
database dan tabel yang berhasil dibuat menggunakan perintah migrations.
Dapat dilihat bahwa dua tabel Authors dan Books sudah berhasil dibuat. Field yang ada pada
tabel tersebut juga sama dengan properti yang sudah anda buat di class model. Tabel
__EFMigrationHistory digunakan untuk menyimpan informasi versi migrasi dari EF
Migrations.

73
Menambahkan Data Layer
Pada contoh project yang dibuat akan menggunakan repository pattern. Repository pattern
digunakan untuk menambahkan kode yang berhubungan dengan koneksi dan manipulasi
database. Ini bertujuan agar API Controller tetap ‘thin’.
Untuk menambahkan data layer, buat interface IAuthor pada folder data dengan method
sebagai berikut:
public interface IAuthor
{
Task<IEnumerable<Author>> GetAll();
Task<Author> Insert(Author author);
Task<Author> GetById(int id);
Task<Author> Update(Author author);
Task Delete(int id);
}
Method diatas digunakan untuk operasi CRUD (Create, Read, Update, Delete) yang akan
dilakukan di database.
Kemudian tambahkan class AuthorDAL.cs yang berisi implementasi dari interface tersebut
sebagai berikut:
public class AuthorDAL : IAuthor
{
private readonly PubContext _context;
public AuthorDAL(PubContext context)
{
_context = context;
}
public async Task Delete(int id)
{
try
{
var deleteAuthor = await GetById(id);
_context.Authors.Remove(deleteAuthor);
await _context.SaveChangesAsync();
}
catch (Exception ex)
{
throw new Exception($"{ex.Message}");
}
}

74
public async Task<IEnumerable<Author>> GetAll()
{
var authors = await _context.Authors.ToListAsync();
return authors;
}
public async Task<Author> GetById(int id)
{
var author = await _context.Authors.Where(a => a.Id ==
id).FirstOrDefaultAsync();
if (author != null)
return author;
else
throw new Exception($"Author with id {id} not found");
}
public async Task<Author> Insert(Author author)
{
try
{
_context.Authors.Add(author);
await _context.SaveChangesAsync();
return author;
}
catch (Exception ex)
{
throw new Exception($"{ex.Message}");
}
}
public async Task<Author> Update(Author author)
{
try
{
var updateAuthor = await GetById(author.Id);
updateAuthor.FirstName = author.FirstName;
updateAuthor.LastName = author.LastName;
await _context.SaveChangesAsync();
return updateAuthor;

75
}
catch (Exception ex)
{
throw new Exception($"{ex.Message}");
}
}
}
Kode diatas berisi statement Lambda untuk operasi CRUD pada tabel Author di database.
Untuk mengakses object DataContext yang sudah dibuat pada folder Data, maka dapat
dilakukan teknik Dependency Injection dengan menginject object pada class konstruktor.
Untuk operasi SQL yang akan dikirimkan ke tabel di database digunakan LINQ Method. LINQ
Method yang digunakan akan secara otomatis di konversi menjadi T-SQL sintaks oleh EF Core.
Menambahkan DI Services pada Program.cs
Agar anda dapat menggunakan class AuthorDAL yang sudah dibuat pada controller, maka
perlu ditambahkan registrasi Dependency Injection class pada file Program.cs. Tambahkan
kode berikut pada Program.cs.
builder.Services.AddScoped<IAuthor, AuthorDAL>();
Menambahkan Controller Author
Kemudian pada folder Controller, tambahkan kode berikut untuk mengakses class Data Layer
yang sudah dibuat sebelumnya, dan menampilkan output berupa REST API dengan format
json.
Pada folder Controller, tambahkan class baru dengan nama AuthorsController.cs.
Menampilkan Semua Data Author
Untuk menampilkan daftar Author yang ada pada table Author tambahkan kode berikut ini:
private readonly IAuthor _author;
public AuthorsController(IAuthor author)
{
_author = author;
}
// GET: api/values
[HttpGet]

76
public async Task<IEnumerable<Author>> Get()
{
return await _author.GetAll();
}
Pada kode diatas dapat dilihat cara menginject IAuthor yang akan digunakan untuk
menjalankan perintah query untuk mengambil semua data. Jika dijalankan pada swagger UI
dapat dilihat hasilnya sebagai berikut:
Menampilkan Author By Id
Untuk menampilkan Author berdasarkan Id tambahkan kode berikut:
// GET api/values/5
[HttpGet("{id}")]
public async Task<Author> Get(int id)
{
return await _author.GetById(id);
}
Pada kode diatas id author dapat ditambahkan sebagai parameter untuk menampilkan
Author berdasarkan id. Pada swagger UI tambahkan parameter id sebagai berikut:
Maka hasilnya dapat dilihat pada tampilan berikut ini:

77
Menambahkan Data Author
Untuk menambahkan data Author, dapat digunakan method POST dan mengirimkan
parameter berupa json file yang berisi informasi Author yang akan ditambahkan, berikut
untuk kodenya:
// POST api/values
[HttpPost]
public async Task<IActionResult> Post(Author author)
{
try
{
var result = await _author.Insert(author);
return CreatedAtAction("Get", new { id = result.Id },
result);
}
catch (Exception ex)
{
return BadRequest(ex.Message);
}
}
Pada kode diatas dapat dilihat bahwa output dari api ini adalah HttpStatus, jika api tersebut
berhasil untuk dijalankan, maka method CreateAtAction akan memanggil method Get dengan
parameter untuk menampilkan data yang berhasil ditambahkan. Untuk menambahkan data
author pada swagger UI masukan data berikut, kemudian tekan tombol Execute untuk
mengeksekusi kodenya.

78
Jika berhasil akan ditampilkan status code 201 (created), kemudian akan ditampilkan data
author yang berhasil ditambahkan. Outputnya dapat dilihat pada kode dibawah ini:
Mengupdate Data Author
Untuk mengupdate data author buat method berikut, method ini mempunyai [HttpPut]
sebagai attribut yang artinya untuk permintaan API ke server akan digunakan http method
PUT.
// PUT api/values/5
[HttpPut]
public async Task<ActionResult> Put(Author author)
{
try
{
var result = await _author.Update(author);
return Ok(result);
}
catch (Exception ex)

79
{
return BadRequest(ex.Message);
}
}
Jika berhasi maka method ini akan menghasilkan kembalian http status 200 OK, dan
menampilkan data yang berhasil untuk diupdate. Untuk pengujian API, jalankan program,
kemudian pada swagger UI pilih method PUT dan tambahkan input berikut untuk
mengupdate data, dan tekan tombol Execute.
Jika data Author berhasil untuk diupdate, maka akan muncul tampilan hasil dengan
HttpResult 200 OK sebagai berikut.
Mendelete Data Author
Untuk mendelete data author buat method berikut, method ini mempunyai [HttpDelete]
sebagai attribut yang artinya untuk permintaan API ke server akan digunakan http method
DELETE.
// DELETE api/values/5
[HttpDelete("{id}")]
public async Task<ActionResult> Delete(int id)
{
try
{
await _author.Delete(id);
return Ok($"Data author dengan id {id} berhasil
didelete");

80
}
catch (Exception ex)
{
return BadRequest(ex.Message);
}
}
Jika berhasi maka method ini akan menghasilkan kembalian http status 200 OK dan keterangan
bahwa API sudah berhasil untuk didelete. Untuk pengujian API, jalankan program, kemudian
pada swagger UI pilih method DELETE dan tambahkan id parameter dari data Author yang
akan didelete.
Jika data Author berhasil untuk diupdate, maka akan muncul tampilan hasil dengan
HttpResult 200 OK sebagai berikut.
Menambahkan Log untuk Tracing EF Core
Ketika menggunakan EF Core, maka EF Core akan menjembatani interaksi antara aplikasi dan
database. Statement EF method (lambda ataupun LINQ) akan diterjemahkan menjadi bahasa
yang spesifik terhadap database yang digunakan. Sebagai contoh EF Core akan menciptakan
bahasa T-SQL dari statement Lambda yang dibuat. Untuk menampilkan log dan melakukan
tracing terhadap hasil T-SQL dari EF Core, anda dapat menambahkan kode berikut pada
Program.cs.
builder.Services.AddDbContext<PubContext>(options => options.UseSqlServer(

81
builder.Configuration.GetConnectionString("DefaultConnection"))
.LogTo(Console.WriteLine, new[]
{DbLoggerCategory.Database.Command.Name},
LogLevel.Information));
Dapat dilihat pada kode diatas bahwa method LogTo() dapat ditambahkan untuk
menampilkan data Log yang akan dihasilkan oleh EF Core. Anda juga dapat menentukan
output log tersebut akan ditampilkan dimana. Pada kode diatas output hasil EF Core berupa
T-SQL akan ditampilkan pada console, alternatif lain bisa juga hasil log disimpan pada file text.
Untuk data log yang ditampilkan berupa perintah/command dari T-SQL. Untuk log level
sendiri dapat ditentukan tipenya (information, warning, dll). Contoh diatas menggunakan
LogLevel.Information. Tampilan log yan g dihasilkan dapat dilihat pada gambar dibawah ini.
<gambar log information>
Dari hasil log T-SQL yang diperoleh anda dapat menganalisa hasil T-SQL yang digenerate oleh
EF Core. Ini akan sangat berguna jika anda mengalami masalah terkait dengan performa query
ketika menggunakan EF Core. Contoh masalah performa ketika hasil T-SQL yang dihasilkan
banyak menggunakan teknik sub-query atau banyak melakukan round-trip ke database yang
merupakan sebab dari masalah performance yang terjadi.
One To Many Relationships EF
Pada EF Core untuk menambahkan relasi One-To-Many anda dapat mendefinisikannya pada
class model. Pada EF Core model relationship dapat ditambahkan menggunakan aturan yang
sudah ada atau istilahnya ‘convention over configuration’.
Pada contoh studi kasus yang dibuat tabel Author akan berelasi dengan Book. Satu Author bisa
memiliki beberapa Buku. Untuk membuat relasi one-to-many Author dan Book tambahkan
kode berikut pada class Author dan class Book.
Pada class Author tambahkan kode berikut:
public class Author
{
public Author()
{
Books = new List<Book>();
}
public int AuthorId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public List<Book> Books { get; set; }
}
Pada kode diatas dapat dilihat bahwa satu Author dapat memiliki banyak Book, ini dapat
dilihat dari property List<Book>.
public class Book
{
public int BookId { get; set; }

82
public string Title { get; set; }
public DateTime PublishDate { get; set; }
public decimal BasePrice { get; set; }
public Author Author { get; set; }
public int AuthorId { get; set; }
}
Pada class Book diatas juga dapat dilihat bahwa class tersebut dapat terhubung ke class Author
dengan menggunakan properti navigasi yaitu Author yang juga bertipe Author. Properi
AuthorId juga dapat ditambahkan untuk foreign key pada tabel.
Setelah ditambahkan relasi pada class, jalankan perintah migrasi untuk menambahkan relasi
tersebut pada database. Jalankan perintah:
dotnet ef migrations add ‘Tambah_Relasi_Author_Book’
Kemudian jalankan perintah:
dotnet e database update
Setelah berhasil menambahkan relasi, lihat perubahan tabel pada database untuk memastikan
perintah migrasi dapat dijalankan dengan baik.
<gambar tabel beserta field nya>
Bekerja dengan Relasi Data
Pada subab ini akan dibahas beberapa contoh untuk menambahkan data pada tabel-tabel yang
berelasi.
Menambahkan Author Baru Beserta Book
Kasus yang pertama adalah ketika menambahkan author baru beserta dengan book.
Tambahkan kode berikut:
void TambahAuthorBaruDenganBook()
{
var author = new Author { FirstName = "Erick", LastName =
"Kurniawan"};
author.Books.Add(new Book
{
Title = "Belajar ASP.NET Core 6",
PublishDate = new DateTime(2023, 1, 1)
});
_context.Authors.Add(author);
_context.SaveChanges();
}
Menambahkan Author Baru Beserta Dua Book
Kasus yang kedua adalah menambahkan Author dengan dua book baru.

83
void TambahAuthorDenganDuaBookBaru()
{
var author = new Author { FirstName = "Andi", LastName = "Setiawan" };
author.Books.AddRange(new List<Book> {
new Book {Title = "Blazor Server", PublishDate = new
DateTime(2022, 12, 1) },
new Book {Title = "Blazor Wasm", PublishDate = new
DateTime(2022,4,1)}
});
_context.Authors.Add(author);
_context.SaveChanges();
}
Menambahkan Book Baru pada Author
Kasus yang ketiga adalah menambahkan book baru pada author yang sudah ada.
void TambahBukuKeAuthor()
{
var author = _context.Authors.FirstOrDefault(a => a.LastName ==
"Kurniawan");
if (author != null)
{
author.Books.Add(
new Book { Title = "ASP Core 6 Identity", PublishDate = new
DateTime(2022, 1, 1) }
);
}
_context.SaveChanges();
}
Menambahkan Book Baru ke Author dari Book
Pada kasus ini akan ditambahkan Book baru dan mendaftarkannya ke Author yang sudah ada,
namun bedanya dengan contoh sebelumnya, pada contoh ini menggunakan objek Book.
void MenambahkanBookBaruKeAuthor()
{
var book = new Book
{
Title = "Shift",
PublishDate = new DateTime(2012, 1, 1),
AuthorId = 5
};

84
_context.Books.Add(book);
_context.SaveChanges();
}

85
5 - Keamanan
Pada bab-bab di atas telah ditunjukkan bagaimana membuat dan mengakses API. Tetapi jika
project web API tersebut dideploy pada web server maka user yang mengetahui alamat dan
cara akses API ini akan dengan mudah melihat data, menambah data dan bahkan
menghapusnya.
Jika data merupakan data penting seperti data perbankan maka web API yang mengelola data
tersebut harus dilindungi agar hanya user dan aplikasi tertentu saja yang dapat
mengaksesnya.
Ada beberapa cara yang dapat digunakan untuk mengamankan API yang sudah dibuat
sebelumnya sepert Basic Authentication, API Key, dan JWT. Pada subbab ini akan dibahas
bagaimana cara menggunakan Basic Authentication, untuk penggunaan API Key dan JWT
akan dibahas pada buku selanjutnya.
Menambahkan Basic Authentication
Basic Authentication adalah cara yang paling sederhana yang dapat ditambahkan untuk
melindungi API. Untuk mengimplementasikan Basic Authentication pada API yang sudah
dibuat, tambahkan folder dengan nama Authorization pada project. Folder ini akan berisi file
custom Attribute dan custom middleware yang akan digunakan untuk pengecekan username
dan password.
Pada folder Authorization tambahkan class dengan nama AuthorizeAttribute.cs untuk
memodifikasi atribut Authorize yang digunakan untuk authorisasi API di controller.
Tambahkan kode berikut ini:
[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method)]
public class AuthorizeAttribute : Attribute, IAuthorizationFilter
{
public void OnAuthorization(AuthorizationFilterContext context)
{
// skip authorization jika action menggunakan allowanonymous
attribute
var allowAnonymous =
context.ActionDescriptor.EndpointMetadata.OfType<AllowAnonymousAttribute>(
).Any();
if (allowAnonymous)
return;
var user = (User)context.HttpContext.Items["User"];
if (user == null)
{
// jika tidak melakukan login maka akan dikembalikan status
401 unauthorized
context.Result = new JsonResult(new { message = "Unauthorized"
}) { StatusCode = StatusCodes.Status401Unauthorized };

86
// tambahkan 'WWW-Authenticate' header untuk mentrigger popup
basic authentication pada browser.
context.HttpContext.Response.Headers["WWW-Authenticate"] =
"Basic realm=\"\", charset=\"UTF-8\"";
}
}
}
Tambahkan class dengan nama BasicAuthMiddleware.cs, class ini adalah custom middleware
yang akan ditambahkan untuk proses autentikasi dan autorisasi.
public class BasicAuthMiddleware
{
private readonly RequestDelegate _next;
public BasicAuthMiddleware(RequestDelegate next)
{
_next = next;
}
public async Task Invoke(HttpContext context, IUserService
userService)
{
try
{
var authHeader =
AuthenticationHeaderValue.Parse(context.Request.Headers["Authorization"]);
var credentialBytes =
Convert.FromBase64String(authHeader.Parameter);
var credentials =
Encoding.UTF8.GetString(credentialBytes).Split(':', 2);
var username = credentials[0];
var password = credentials[1];
context.Items["User"] = await
userService.Authenticate(username, password);
}
catch
{
// jika invalid auth header
}
await _next(context);
}

87
}
Pada folder Models tambahkan class dengan nama AuthenticateModel.cs.
public class AuthenticateModel
{
[Required]
public string Username { get; set; }
[Required]
public string Password { get; set; }
}
Buat folder Services, kemudian tambahkan file dengan nama UserService.cs yang berisi
interface IUserService dan impelemntasinya yaitu class UserServices. Dapat dilihat bahwa
IUserService interface memiliki dua method yaitu Authenticate dan GetAll(). Method
Authenticate() akan digunakan.
public interface IUserService
{
Task<User> Authenticate(string username, string password);
Task<IEnumerable<User>> GetAll();
}
public class UserService : IUserService
{
// agar simple untuk user masih dihardcode dan belum diambil dari
database
private List<User> _users = new List<User>
{
new User { Id = 1, FirstName = "Erick", LastName = "Kurniawan",
Username = "rahasia", Password = "rahasia" }
};
public async Task<User> Authenticate(string username, string password)
{
var user = await Task.Run(() => _users.SingleOrDefault(x =>
x.Username == username && x.Password == password));
// jika auth proses gagal: nilai null dikembalikan
// jika auth success: user object dikembalikan
return user;
}
public async Task<IEnumerable<User>> GetAll()

88
{
return await Task.Run(() => _users);
}
}
Pada Program.cs tambahkan custom middleware yang sudah dibuat
app.UseMiddleware<BasicAuthMiddleware>();
dan jangan lupa untuk menambahkan services UserServices.
builder.services.AddScoped<IUserService, UserService>();
Tambahkan controller dengan nama UserController kemudian tambahkan kode berikut:
[Authorize]
[ApiController]
[Route("[controller]")]
public class UsersController : ControllerBase
{
private IUserService _userService;
public UsersController(IUserService userService)
{
_userService = userService;
}
[AllowAnonymous]
[HttpPost("authenticate")]
public async Task<IActionResult>
Authenticate([FromBody]AuthenticateModel model)
{
var user = await _userService.Authenticate(model.Username,
model.Password);
if (user == null)
return BadRequest(new { message = "Username atau password
tidak tepat" });
return Ok(user);
}
[HttpGet]
public async Task<IActionResult> GetAll()
{
var users = await _userService.GetAll();

89
return Ok(users);
}
}
Pada controller diatas ditambahkan [Authorize] atribut untuk mengautorisasi API yang akan
diakses.
Jalankan aplikasi kemudian lakukan pengujian API menggunakan POSTMAN atau tools
pengujian API yang lain. Pada contoh dibawah ini menggunakan Insomnia REST.
Pertama coba untuk melakukan autentikasi user dengan memasukan username dan
passwoed. dapat dilihat bahwa
Kemudian coba untuk akses API users menggunakan get method tanpa menambahkan
autentikasi.
Dapat dilihat bahwa jika tidak menambahkan informasi Basic Authentication pada header
maka keluaran yang dikembalikan berupa http status 401 Unauthorized. Kemudian ulangi
untuk melakukan pengujian terhadap API yang sama namun kali ini dengan menambahkan
informasi Basic Atuhentication.
Dapat dilihat bahwa dengan menambahkan basic authentication berupa username dan
password maka keluarannya adalah http status 200 OK yang berarti berhasil untuk
mengakses resources users.
7

90
6 - Akses API dari Blazor Client
Bab ini memberikan contoh kode program untuk mengakses web API yang telah dibuat di
bab sebelumnya. aplikasi client yang digunakan adalah Blazor Web Assembly. Bab ini tidak
akan membahas teknologi Blazor secara detail. Bahasan detail mengenai Blazor akan dibahas
pada buku khusus mengenai teknologi Blazor.
Membuat Blazor Project
Untuk membuat Blazor Project pada Visual Studio 2022 tambahkan project baru pada solution
yang sudah dibuat sebelumnya. Pilih Blazor WebAssembly project.
Kemudian pilih versi .NET SDK yaitu SDK 6.0
Tambahkan BlazorClient sebagai nama Projectnya.

91
Setelah berhasil membuat Blazor project langkah selanjutnya adalah bagaimana untuk
mengakses API dari Blazor.
Mengakses API dari Blazor
Untuk mengakses Author API yang sudah dibuat sebelumnya dengan Blazor Client
diperlukan beberapa library yang harus ditambahkan via NuGet Package Manager. Klik kanan
pada project kemudian tambahkan library berikut:
• System.Net.Http.Json
• Microsoft.Extensions.Http
Karena pada project ini menggunakan .NET 6 maka pilih versi 6 pada library tersebut.
Langkah selanjutnya adalah menambahkan folder dengan nama Services pada Blazor Project.
Folder ini akan berisi file yang akan digunakan untuk mengakses API yang sudah dibuat pada
bab sebelumnya.
Pada folder Services, tambahkan file interface dengan nama IAuthor.cs, kemudian tambahkan
method yang akan diimplementasikan kemudian.
public interface IAuthor
{
Task<IEnumerable<AuthorReadViewModel>> GetAuthors();
}
Method GetAuthors akan digunakan untuk mengambil semua data Author. Untuk
menampung data dengan tipe Author dari API dibutuhkan class. Buat folder dengan nama
Models, kemudian tambahkan class dengan nama AuthorReadViewModel.cs, kemudian
tambahkan kode berikut ini:
public class AuthorReadViewModel
{
public int AuthorId { get; set; }
public string FirstName { get; set; }

92
public string LastName { get; set; }
}
Kemudian tambahkan juga class dengan nama AuthorService.cs pada folder Services. Class ini
adalah implementasi dari method GetAuthors.
public class AuthorService : IAuthor
{
private readonly HttpClient _httpClient;
public AuthorService(HttpClient httpClient)
{
_httpClient = httpClient;
}
public async Task<IEnumerable<AuthorReadViewModel>> GetAuthors()
{
return await
_httpClient.GetFromJsonAsync<IEnumerable<AuthorReadViewModel>>($"api/Autho
rs");
}
}
Pada class diatas dapat dilihat penggunaan library HttpClient untuk mengakses API Author.
Untuk mendaftarkan services HttpClient, tambahkan juga kode berikut pada Program.cs.
builder.Services.AddHttpClient<IAuthor,AuthorService>(
client => client.BaseAddress = new Uri("https://localhost:7135"));
Halaman Untuk Menampilkan Hasil
Untuk menampilkan data yang sudah berhasil diambil dari Author API pada halaman,
tambahkan halaman AuthorPage.razor pada folder Pages. Kemudian tambahkan juga file
AuthorPage.razor.cs untuk menambahkan kode c#-nya.
Berikut adalah kode pada class AuthorPage.razor.cs
public partial class AuthorPage
{
public IEnumerable<AuthorReadViewModel> Authors { get; set; }
[Inject]
public IAuthor AuthorService { get; set; }
protected override async Task OnInitializedAsync()
{
Authors = (await AuthorService.GetAuthors()).ToList();

93
}
}
Kemudian tambahkan juga kode razor pada halaman AuthorPage.razor.
@page "/authorpage"
<h3>Authors List</h3>
@if (Authors == null)
{
<div class="spinner"></div>
}
else
{
<div class="card-deck">
@foreach (var author in Authors)
{
<div class="card m-3" style="min-width: 18rem; max-
width:30.5%;">
<div class="card-header">
<h3>@author.FirstName @author.LastName</h3>
</div>
</div>
}
</div>
}
Kode diatas digunakan untuk menampilkan semua data Author yang diperoleh dari Author
API. Jalankan aplikasi Blazor Client tersebut dan tampilkan halaman /authorpage, maka dapat
dilihat hasil sebagai berikut: