Apa yang Baru dalam ASP.NET dan Pengembangan Web di Visual Studio 2012

2023-07-13

Versi baru Visual Studio memperkenalkan sejumlah penyempurnaan yang berfokus pada peningkatan pengalaman dan performa saat bekerja dengan teknologi Web. Editor Visual Studio untuk CSS, JavaScript, dan HTML telah sepenuhnya dirubah untuk menyertakan banyak bantuan kode yang paling sesuai permintaan, seperti IntelliSense dan indentasi otomatis. Mengenai performa, bundling, dan minifikasi sekarang terintegrasi sebagai fitur bawaan untuk mengurangi waktu pemuatan halaman dengan mudah.

Visual Studio memungkinkan Anda bekerja dengan teknologi situs web terbaru. Anda dapat menggunakan Cuplikan CSS3 lintas browser untuk memastikan situs Anda berfungsi terlepas dari platform klien sambil juga memanfaatkan elemen dan fitur HTML5 baru.

Menulis dan membuat profil kode JavaScript harus lebih mudah dengan versi Visual Studio ini. Daftar IntelliSense, dokumentasi XML terintegrasi, dan fitur navigasi sekarang tersedia untuk kode JavaScript. Anda sekarang memiliki katalog JavaScript di ujung jari Anda. Selain itu, Anda dapat memeriksa kepatuhan ECMAScript5 dengan skrip Anda dan mendeteksi kesalahan sintaks pada tahap awal.

Terakhir, versi Visual Studio ini mengimplementasikan bundling dan minifikasi bawaan. File skrip dan lembar gaya Anda akan dikemas dan dikompresi sehingga situs berkinerja lebih cepat.

Lab ini memandu Anda melalui penyempurnaan dan fitur baru yang sebelumnya dijelaskan dengan menerapkan perubahan kecil pada sampel aplikasi Web yang disediakan di folder Sumber.

Tujuan

Di tangan ini di lab, Anda akan mempelajari cara:

Menggunakan fitur dan peningkatan baru di editor CSS
Menggunakan fitur dan peningkatan baru di editor HTML
Menggunakan fitur dan penyempurnaan baru di editor JavaScript
Mengonfigurasi dan menggunakan bundling dan minifikasi

Prasyarat

Microsoft Visual Studio Express 2012 untuk Web atau superior (baca Lampiran A untuk petunjuk tentang cara menginstalnya).
Windows PowerShell (untuk skrip penyetelan - sudah diinstal pada Windows 8 dan Windows Server 2008 R2)
Internet Explorer 10 - atau browser yang mematuhi HTML5

Latihan

Tangan di lab ini mencakup latihan berikut:

Latihan 1: Apa yang Baru di Editor CSS
Latihan 2: Apa yang Baru di Editor HTML
Latihan 3: Apa yang Baru di Editor JavaScript
Latihan 4: Bundling dan Minifikasi

Perkiraan waktu untuk menyelesaikan lab ini: 60 menit.

Latihan 1: Apa yang Baru di Editor CSS

Pengembang web harus terbiasa dengan banyak kesulitan yang terkait dengan pengeditan CSS. Salah satu masalah terbesar gaya CSS adalah kompatibilitas lintas browser. Sering terjadi bahwa, setelah menerapkan gaya ke situs Anda, Anda melihat bahwa itu terlihat berbeda jika Anda membukanya di browser atau perangkat lain. Oleh karena itu, Anda mungkin menghabiskan banyak waktu untuk memperbaiki masalah visual tersebut untuk menyadari bahwa, ketika Anda akhirnya membuatnya bekerja di satu browser, itu rusak di yang lain.

Visual Studio sekarang menyertakan fitur yang membantu pengembang mengakses, bekerja, dan mengatur lembar gaya CSS secara efektif. Sepanjang latihan ini, Anda akan memenuhi fitur baru untuk organisasi dan edisi yang efektif, serta Cuplikan Kode CSS3 untuk kompatibilitas lintas browser.

Tugas 1 - Fitur Editor Baru

Dalam tugas ini, Anda akan menemukan fitur baru Editor CSS. Editor baru ini akan membantu Anda meningkatkan produktivitas Anda dengan memanfaatkan indentasi cerdas baru, komentar kode yang ditingkatkan, dan daftar IntelliSense yang ditingkatkan.

Mulai Visual Studio dan buka solusi WhatsNewASPNET.sln yang terletak di folder Source\WhatsNewASPNET lab ini.
Di Penjelajah Solusi, buka file Site.css yang terletak di bawah folder Gaya. Pastikan alat Editor Teks terlihat pada toolbar. Untuk melakukannya, pilih opsi menu Tampilkan | Bilah Alat, dan centang opsi Editor Teks. Anda akan melihat bahwa, karena versi baru ini, tombol Komentar ( ) dan tombol Batalkan Komentar ( ) juga diaktifkan untuk editor CSS.

Mengaktifkan Editor dan Alat CSS
Gulir kode dan pilih definisi kelas CSS apa pun. Klik tombol Komentar ( ) untuk mengomentari baris yang dipilih. Kemudian, klik tombol Batalkan Komentar ( ) untuk membatalkan perubahan.
Klik tombol Ciutkan ( ) dan Perluas ( ) yang terletak di margin kiri teks. Perhatikan bahwa Anda sekarang dapat menyembunyikan gaya yang tidak Anda gunakan untuk memiliki tampilan yang lebih bersih.

Menciutkan kelas CSS
Pastikan bahwa fitur indentasi pintar diaktifkan. Pilih opsi menu Opsi Alat | , lalu pilih halaman Pemformatan CSS | Editor | Teks di panel kiri layar. Centang opsi Indentasi hierarkis.

Mengaktifkan indentasi hierarkis
Temukan definisi kelas utama (.main) dan tambahkan gaya ke elemen div. Anda akan melihat bahwa kode selaras secara otomatis, membantu pengguna untuk menemukan kelas induk secara sekilas.

CSS
```
.main
{
  padding: 0px 12px;
  margin: 12px 8px 8px 8px;
  min-height: 420px;
}
  .main div
  {
    border: 0px;
  }
```
Perataan hierarkis dalam CSS
Di dalam kelas .main div , temukan kursor di akhir batas: 0px; dan tekan Enter untuk menampilkan daftar IntelliSense. Mulai ketik atas dan perhatikan bagaimana daftar difilter saat Anda mengetik. Daftar akan menampilkan elemen yang berisi di bagian atas kata mana pun (Dalam versi Visual Studio sebelumnya, daftar difilter oleh item yang dimulai dengan istilah ).

Penyempurnaan IntelliSense di CSS

Tugas 2 - Pemilih Warna

Dalam tugas ini, Anda akan menemukan Pemilih Warna CSS baru yang terintegrasi ke dalam Visual Studio IntelliSense.

Dalam Site.css, temukan definisi kelas header (.header) dan letakkan kursor di samping atribut warna latar belakang, antara karakter ":" dan "#" pada baris kode tersebut .

Menemukan kursor
Hapus titik dua (:) dan tulis lagi untuk menampilkan pemilih warna. Perhatikan bahwa warna pertama yang akan Anda lihat adalah warna situs Anda yang paling sering. Jika Anda mengklik warna putih, kode warna HTML-nya (#fff) akan menggantikan kode warna saat ini dalam lembar gaya.

Pemilih warna
Tekan tombol Perluas ( ) pada pemilih warna untuk menampilkan gradien warna, lalu seret kursor gradien untuk memilih warna yang berbeda. Setelah itu, klik tombol Eyedropper dan pilih warna apa pun dari layar. Perhatikan bahwa nilai warna latar belakang berubah secara dinamis saat Anda memindahkan kursor.

Gradien pemilih warna
Di slider Opacity , pindahkan pemilih ke tengah bilah untuk mengurangi opasitas. Perhatikan bahwa nilai warna latar belakang sekarang mengubah skalanya menjadi RGBA.

Opacity pemilih warna

Catatan

Definisi warna RGBA (Merah, Hijau, Biru, Alpha) di CSS3 memungkinkan Anda menentukan nilai keburaman warna untuk satu item. Tidak seperti opasitas - warna RGBA atribut - CSS serupa juga kompatibel dengan browser terbaru.

Tugas 3 - Cuplikan Kode yang Kompatibel dengan CSS

Dalam tugas ini, Anda akan mempelajari cara menggunakan cuplikan CSS3 yang kompatibel dengan lintas browser untuk mengimplementasikan beberapa fitur di situs web Anda.

Dalam file Site.css, temukan definisi kelas CSS header (.header) dan letakkan kursor di bawah tempat penampung /*border radius*/ untuk menambahkan cuplikan baru. Tekan Enter untuk menampilkan daftar IntelliSense dan ketik radius untuk memfilter daftar. Pilih opsi radius batas dari daftar dengan klik ganda, lalu tekan tombol TAB untuk menyisipkan cuplikan. Kemudian, ketik ukuran radius dalam piksel dan tekan Enter. Misalnya, ketik 15px.

Atribut CSS3 yang ditambahkan oleh cuplikan akan merender batas bulat di sebagian besar browser kepatuhan HTML5, termasuk browser berbasis Mozilla dan WebKit.

Menggunakan cuplikan radius batas

Terapkan cuplikan batas yang sama dalam gaya halaman (.page).

CSS

.page
{
    width: 960px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
    /*border radius*/
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

Tekan F5 untuk menjalankan solusi. Perhatikan bahwa setiap halaman sekarang memiliki batas bulat.

Lengkung
Tutup browser dan kembali ke Visual Studio.
Buka file Custom.css yang terletak di bawah folder Gaya dan letakkan kursor di dalam definisi kelas div.images ul li img.
Tekan enter untuk menampilkan daftar IntelliSense, ketik box-shadow dan tekan tombol TAB dua kali untuk menyisipkan cuplikan kode bayangan default di dalam definisi kelas. Atur nilai bayangan ke 10px 10px 5px #888. Kemudian, ketik radius batas dan masukkan cuplikan kode. Ketik 15px untuk mengatur ukuran radius dan tekan ENTER.

Sudut bulat dengan bayangan

Catatan

Pada saat ini, atribut bayangan dimasukkan dengan awalan yang sesuai (moz, webkit, o) untuk mendukung browser Mozilla dan Webkit (Chrome, Safari, Konkeror).
Buat kelas baru div.images ul li img:hover di bawah definisi kelas div.images ul li img dan letakkan kursor di dalam tanda kurung .

CSS
```
div.images ul li img
{
  ...
}

div.images ul li img:hover
{

}
```

Ketik transformasi dan tekan tombol TAB dua kali untuk menyisipkan cuplikan transformasi. Kemudian, masukkan putar(-15deg) untuk mengubah nilai sudut rotasi saat gambar diarahkan.

CSS

div.images ul li img
{
  padding-top: 50px;
  padding-right: 15px;
  width: 150px;
  ...
}

div.images ul li img:hover
{
  -moz-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}

Tekan F5 untuk menjalankan solusi dan telusuri ke halaman CSS3. Perhatikan bahwa gambar memiliki sudut bulat dan bayangan kotak. Arahkan mouse ke atas gambar dan lihatlah berputar.

Mengubah cuplikan yang memutar gambar

Catatan

Jika Anda menggunakan Internet Explorer 10 dan tidak dapat melihat bayangan, pastikan mode dokumen diatur ke standar IE10. Tekan F12 untuk membuka alat pengembang Internet Explorer dan klik Mode Dokumen untuk mengubah ke standar IE10.

Latihan 2: Apa yang Baru di Editor HTML

Visual Studio memiliki editor HTML yang ditingkatkan. Beberapa penyempurnaan yang disertakan dalam versi ini adalah indentasi cerdas dalam dokumen HTML, cuplikan HTML5, pencocokan tag awal dan akhir HTML, dan validasi HTML. Sepanjang latihan ini, Anda akan melihat bagaimana perubahan ini meningkatkan kefasihan Anda saat bekerja di markup situs web.

Seperti editor CSS, editor HTML juga ditingkatkan. Sebagian besar peningkatan ini adalah yang kecil yang membuat kehidupan pengembang Web lebih mudah. Hal-hal seperti lebih banyak cuplikan kode untuk HTML5, indentasi cerdas, tag awal dan akhir yang cocok saat mengedit dan validasi yang menargetkan dokumen HTML DOCTYPE adalah beberapa peningkatan ini.

Tugas 1 - Validasi DOCTYPE yang Ditingkatkan

Editor HTML sekarang memiliki kemampuan untuk memeriksa DOCTYPE halaman Anda, meskipun definisinya mungkin ada di halaman master. Bergantung pada DOCTYPE halaman Anda, editor HTML akan memvalidasi dengan sekumpulan aturan yang benar dan akan memfilter daftar IntelliSense dengan mempertimbangkan elemen DOCTYPE.

Dalam tugas ini, Anda akan mengubah DOCTYPE halaman untuk melihat bagaimana perilaku editor HTML berubah sesuai.

Jika belum dibuka, mulai Visual Studio dan buka solusi WhatsNewASPNET.sln yang terletak di folder Source\WhatsNewASPNET lab ini.
Buka halaman Site.Master .
Perhatikan Skema Target untuk Toolbar Validasi. Cara editor HTML bertingkah (Validasi, IntelliSense, dll.) akan berubah dengan benar agar sesuai dengan Doctype yang dipilih.

Menggunakan Doctype di toolbar Pengeditan Sumber HTML
Ubah Skema Target menjadi HTML 4.01.

Mengubah Doctype di toolbar Pengeditan Sumber HTML
Tempatkan kursor di bawah elemen isi , dan mulai ketik nama elemen HTML5 (misalnya, video). Perhatikan bahwa elemen tidak tersedia dalam daftar IntelliSense.

Elemen HTML5 tidak tercantum
Batalkan perubahan pada Skema Target untuk Toolbar Validasi, dengan memilih DOCTYPE: XHTML5 dari daftar dropdown.

Reset Doctype di toolbar Pengeditan Sumber HTML
Tempatkan kursor di bawah elemen isi dan mulai ketik elemen HTML5 lagi (Misalnya, seperti video). Perhatikan bahwa elemen HTML5 sekarang tersedia dalam daftar IntelliSense.

Elemen HTML5 sedang dicantumkan

Tugas 2 - Pembaruan Otomatis Tag Mulai/Akhir

Visual Studio sekarang memperbarui tag pembukaan ATAU penutup HTML elemen yang Anda edit agar cocok satu sama lain. Fitur baru ini akan meningkatkan produktivitas Anda saat mengedit tag HTML.

Pada halaman Default.aspx , tambahkan elemen H3 dengan judul (misalnya, Visual Studio 2012 Rocks!).

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <br />
  <asp:Image ImageUrl="~/images/Web11.JPG" runat="server" />
  <h3>Visual Studio 2012 Rocks!!</h3>
</asp:Content>

Ubah tag H3 dan ketik H2 atau H1.

Perhatikan bahwa tag akhir diperbarui secara otomatis. Anda juga dapat memodifikasi tag akhir untuk melihat bahwa tag mulai juga diperbarui.

Pembaruan otomatis tag akhir

Tugas 3 - Cuplikan Kode HTML5 Baru

Visual Studio sekarang menyertakan beberapa cuplikan kode HTML5. Dalam tugas ini, Anda akan menggunakan beberapa cuplikan ini.

Tambahkan folder baru bernama audio ke akar folder situs web. Buka Windows Explorer dan salin file audio apa pun ke folder audio solusi WhatsNewASPNET.sln.
Di halaman Default.aspx, temukan kursor di bawah Web11 Rocks!! Header. Ketik audio dan tekan tombol TAB.

Editor HTML baru menyertakan cuplikan kode untuk konten HTML5. Ingatlah untuk menggunakan definisi DOCTYPE yang tepat untuk mengaktifkan cuplikan HTML5.

Menyisipkan Cuplikan Kode HTML5

Perbarui sumber audio untuk menunjuk ke file audio yang sudah ada.

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <br />
  <asp:Image ImageUrl="~/images/Web11.JPG" runat="server" />
  <h2>Visual Studio 2012 Rocks!!</h2>
  <audio controls="controls">
    <source src="audio/Kalimba.mp3" />
  </audio>
</asp:Content>

Catatan

Anda harus menambahkan file audio ke solusi.

Tekan F5 untuk menjalankan situs dan memutar audio.

Menjalankan kontrol audio

Catatan

Anda juga dapat mencoba lebih banyak cuplikan yang disertakan dalam Visual Studio, seperti video, gambar, dll.
Sekarang, coba sisipkan kontrol di beberapa bagian halaman. Misalnya, coba sisipkan kontrol GridView, tetapi alih-alih mengetik< Gri, mulailah mengetik< GV. Perhatikan bahwa daftar IntelliSense menunjukkan kontrol asp:GridView .

IntelliSense di Editor HTML sekarang menyediakan pencarian judul-casing, serta pencocokan parsial (mengambil semua elemen yang berisi istilah ).

Menyisipkan GridView dengan daftar IntelliSense

Jika Anda mengetik <kisi , Anda akan mendapatkan semua item yang cocok dengan istilah, tetapi Visual Studio akan menyarankan kontrol tampilan kisi :

Menyisipkan GridView dengan daftar IntelliSense dan pencocokan parsial

Tugas 4 - Tag Pintar Editor HTML

Peningkatan lain di Editor HTML adalah fitur Tag Pintar. Tag pintar memudahkan untuk melakukan tugas pengembangan umum atau berulang secara per kontrol. Fitur ini sudah tersedia di Html Designer, tetapi tidak di Editor HTML.

Buka Site.Master dan temukan elemen asp:Menu . Tempatkan kursor pada tag mulai dan perhatikan bahwa glyph kecil ditampilkan di bagian bawah elemen - klik untuk membuka menu tugas pintar. Perhatikan bahwa Anda memiliki akses cepat ke beberapa tugas yang terkait dengan kontrol Menu.

Tugas cerdas untuk kontrol Menu

Tugas 5 - Indentasi Cerdas

Salah satu praktik terbaik dalam HTML adalah mengindentasi elemen berlapis agar kode tetap dapat dibaca. Di Visual Studio 2012, Anda akan melihat bahwa editor secara otomatis menginden elemen saat Anda menulis kode.

Catatan

Di versi Visual Studio sebelumnya, indentasi pintar tersedia di editor XML tetapi tidak di editor HTML.

Pastikan konfigurasi Indentasi pada Editor HTML diatur ke Indentasi Cerdas. Untuk melakukannya, pilih Alat | Opsi menu Opsi lalu pilih Editor Teks | HTML | Halaman tab di panel kiri layar. Pilih opsi Indentasi cerdas.

Pengaturan Editor HTML
Pada halaman Default.aspx , hapus semua konten di bawah elemen audio.
Tempatkan kursor di akhir elemen audio pembuka dan tekan ENTER.

Perhatikan bahwa posisi kursor baru memiliki tingkat indentasi tambahan.

Indentasi cerdas di Editor HTML
Pulihkan tag audio dengan konten yang telah Anda hapus, atau tutup Default.aspx tanpa menyimpan perubahan.

Tugas 6 - Ekstrak ke Kontrol Pengguna

Alat Pemfaktoran ulang yang disertakan dalam Visual Studio, seperti mengekstrak sebagian kode ke fungsi, adalah fitur hebat yang memfasilitasi peningkatan dan pemfaktoran ulang kode yang ada. Mitra untuk halaman ASP.NET akan menjadi ekstraksi kode HTML ke Kontrol Pengguna. Melakukannya secara manual akan melibatkan beberapa langkah, seperti membuat Kontrol Pengguna baru, memindahkan bagian kode ke Kontrol Pengguna, mendaftarkan awalan tag untuk Kontrol Pengguna, dan, akhirnya, membuat instans Kontrol Pengguna pada halaman. Sekarang, alat Ekstrak ke Kontrol Pengguna baru secara otomatis melakukan semua langkah tersebut untuk Anda.

Dalam tugas ini, Anda akan menggunakan operasi kontekstual Ekstrak ke Kontrol Pengguna baru untuk menghasilkan kontrol pengguna baru dari kode yang dipilih.

Pada halaman Default.aspx , pilih elemen H2 dan audio .
Klik kanan dan pilih Ekstrak ke Kontrol Pengguna.

Opsi menu Ekstrak ke Kontrol Pengguna
Ketik nama untuk kontrol pengguna baru. Misalnya, Jukebox.ascx, lalu klik OK.

Menyimpan kontrol pengguna yang diekstrak
Perhatikan bahwa kode yang dipilih diekstrak ke kontrol pengguna dan lokasi asli kode yang dipilih diganti dengan instans kontrol pengguna baru.

Halaman diperbarui secara otomatis untuk menggunakan kontrol pengguna baru
Tekan F5 untuk menjalankan halaman dan memverifikasi bahwa kontrol berfungsi.

Latihan 3: Apa yang Baru di Editor JavaScript

Menulis atau mengedit kode JavaScript bukanlah tugas yang mudah, terutama ketika aplikasi Anda mulai tumbuh dalam ukuran dan Anda menemukan diri Anda berurusan dengan file panjang dan ratusan fungsi. Pengembang skrip biasanya harus melakukan beberapa pekerjaan tambahan untuk mempertahankan legibilitas kode dan menavigasi di seluruh file. Dengan dimasukkannya pustaka JavaScript seperti jQuery, navigasi skrip telah menjadi tantangan tersendiri karena panjang kode.

Visual Studio telah memperbarui editor JavaScript dengan janji untuk membuat mode kode dapat diakses dan diatur. Banyak fitur Visual Studio yang sudah ada di editor C# atau VB sekarang diimplementasikan di editor JavaScript: Buka Definisi, indentasi otomatis, dokumentasi, dan validasi saat Anda menulis. Dengan daftar IntelliSense yang diperbarui, Anda akan memiliki katalog fungsi JavaScript di ujung jari Anda.

Dalam latihan ini, Anda akan mempelajari beberapa fitur baru dan peningkatan editor JavaScript. Anda akan menelusuri file sampel dan menemukan setiap karakteristik baru yang akan membuat pemrograman JavaScript Anda lebih efisien dalam Visual Studio 2012.

Tugas 1 - Fitur Baru Editor JavaScript

Tugas ini akan memperkenalkan Anda ke beberapa fitur editor JavaScript baru, yang berfokus pada pengorganisasian kode Anda dan menghadirkan pengalaman pengguna yang lebih baik.

Jika belum dibuka, mulai Visual Studio dan buka solusi WhatsNewASPNET.sln yang terletak di folder Source\WhatsNewASPNET lab ini.
Tekan F5 untuk menjalankan aplikasi, lalu klik tautan JavaScript di bilah navigasi. Refresh halaman beberapa kali dan periksa bagaimana penaikan penghitung.

Penghitung halaman
Tutup browser dan kembali ke Visual Studio.
Buka halaman JavaScript.aspx dan temukan blok skrip> (ditunjukkan <di bawah).

Kode berikut menggunakan penyimpanan lokal HTML5 untuk menyimpan variabel pageLoadCount yang menyimpan berapa kali halaman telah dikunjungi oleh pengguna saat ini. Penyimpanan Lokal adalah database nilai kunci sisi klien yang diperkenalkan dengan standar HTML5. Data disimpan di komputer lokal, di dalam browser pengguna.
```
<script>
  addCount(1);
  document.getElementById('count').innerHTML = getCount();

  function getCount() {
    var storage = window.localStorage;
    if (!storage.pageLoadCount)
      storage.pageLoadCount = 0;

    return storage.pageLoadCount;
  }

  function addCount(value) {
    window.localStorage.pageLoadCount = parseInt(getCount(), 10) + value;
  }

  ...   
</script>
```
Catatan

Pastikan DOCTYPE diatur ke XHTML5 sebelum melanjutkan dengan langkah-langkah berikutnya.
Edit kode dan perhatikan bahwa IntelliSense untuk JavaScript menyertakan fitur HTML5, seperti penyimpanan lokal, dan metode dalamnya.

Fitur JavaScript HTML5 di JavaScript
Klik tanda kurung siku pembuka ({) dari kode pembuatan skrip dan perhatikan bahwa tanda kurung disorot.

Tanda kurung disorot
Batalkan komentar fungsi testAutoAlign() (pilih tiga baris dan Anda dapat menggunakan CTRL + K; CTRL + U) dan temukan kursor di dalam kode fungsi. Tekan enter untuk menambahkan baris kedua. Perhatikan bahwa kode sekarang diselaraskan dan diindentasi secara otomatis.

Kode JavaScript diratakan secara otomatis

Tugas 2 - Memvalidasi JavaScript

Dalam tugas ini, Anda akan menemukan validasi JavaScript baru untuk standar ECMAScript5. Fitur ini akan membantu Anda menulis kode JavaScript yang sesuai, sekaligus mencegah masalah pembuatan skrip sebelum penyebaran situs.

Catatan

Visual Studio 2010 menerapkan kepatuhan ECMAStript3, sementara Visual Studio 2012 menyediakan kepatuhan ECMAScript5.

Buka ECMA5script5.js yang terletak di bawah folder proyek Skrip\kustom . Anda sekarang akan menguji validasi untuk standar ECMAScript5.
```
"use strict";

if (true) {
    function StrictModeError()
    {
    }
}
```
Anda dapat memeriksa arah " gunakan arah yang ketat " di baris pertama file, yang memungkinkan mode ketat ECMAScript5. Mode ini terdiri dari subset bahasa yang mengklarifikasi ambiguitas dari edisi sebelumnya, dan menambahkan beberapa fitur baru, seperti getter dan setter, dukungan pustaka untuk JSON, dan refleksi yang lebih lengkap pada properti objek.
Buka Daftar Kesalahan jika belum dibuka (menu Tampilan | Daftar Kesalahan). Perhatikan bahwa deklarasi fungsi digaris bawahi. Ini karena dalam fungsi standar ECMA5 tidak dapat disarangkan di dalam struktur bahasa. Dalam daftar kesalahan di bawah ini Anda akan melihat detail peringatan.

Pesan kesalahan validasi JavaScript
Komentari arah "gunakan ketat" dan perhatikan bahwa kesalahan menghilang, tetapi peringatan tetap ada.
Di baris terakhir file, tulis string apa pun seperti "uji" (sertakan tanda kutip untuk menunjukkannya sebagai string). Tulis titik di samping string untuk menampilkan daftar IntelliSense, dan pilih opsi pangkas .

Dalam standar ECMAScript5, nilai string dan variabel juga memiliki metode string yang ditentukan, seperti pemangkasan, huruf besar, pencarian, dan penggantian.

Daftar IntelliSense di JavaScript

Tugas 3 - Dokumentasi XML untuk JavaScript

Dalam tugas ini, Anda akan menjelajahi fitur Visual Studio untuk dokumentasi XML di JavaScript. Anda akan melihat daftar JavaScript IntelliSense sekarang memperlihatkan dokumentasi XML dari setiap fungsi. Selain itu, Anda akan menemukan fitur navigasi di JavaScript.

Buka file XMLDoc.js yang terletak di folder Skrip/proyek kustom . File ini berisi dokumentasi XML pada setiap fungsi JavaScript.

Dokumentasi XML JavaScript terintegrasi ke IntelliSense
Di bawah ini tambahkan fungsi dalam file XMLDoc.js, buat fungsi baru bernama test.
Dalam fungsi pengujian, panggil fungsi kalikan yang menerima dua parameter. Perhatikan kotak tipsalat memperlihatkan dokumentasi fungsi multiply .
```
function test() {
  multiply(
}
```
Dokumentasi XML untuk fungsi JavaScript
Selesaikan pernyataan panggilan fungsi dan ketik titik untuk membuka daftar IntelliSense pada nilai yang dikembalikan. Perhatikan bahwa Visual Studio mendeteksi nilai pengembalian dalam dokumentasi, memperlakukan nilai sebagai angka.

Dokumentasi XML untuk jenis pengembalian
Sekarang, sisipkan panggilan untuk menambahkan fungsi. Perhatikan bahwa editor JavaScript sekarang mendukung kelebihan beban fungsi. Saat Anda menulis nama fungsi, Anda akan dapat memilih salah satu kelebihan beban yang tersedia yang ditentukan dalam dokumentasi.

Dokumentasi XML untuk kelebihan beban
Buka file GotoDefinition.js dan temukan panggilan fungsi $().html(). Temukan kursor pada html.
Tekan F12 dan navigasikan ke definisi. Perhatikan bahwa Anda sekarang dapat mengakses dan menelusuri kode JavaScript Anda tanpa menggunakan alat Temukan .
Temukan kursor pada instruksi jQuery sebelum blok tanda tangan di bagian bawah file kode. Tekan F12. Anda akan menavigasi ke file pustaka jQuery. Perhatikan bahwa Anda juga dapat menavigasi di seluruh file jQuery menggunakan F12.

Menavigasi ke definisi jQuery

Catatan

Pastikan bahwa GotoDefinition.js tidak memiliki kesalahan sintaks sebelum menyimpan file.

Latihan 4: Bundling dan Minifikasi

Berapa kali situs web Anda menyertakan lebih dari satu file JavaScript atau CSS? Ini adalah skenario yang sangat umum di mana bundling dan minifikasi dapat membantu mengurangi ukuran file dan membuat situs berkinerja lebih cepat. Fitur bundling baru di ASP.NET 4.5 mengemas sekumpulan file JS atau CSS ke dalam satu elemen, dan mengurangi ukurannya dengan menambang konten ( yaitu menghapus ruang kosong yang tidak diperlukan, menghapus komentar, mengurangi pengidentifikasi ).

Bundling dan minifikasi dalam ASP.NET 4.5 dilakukan pada runtime, sehingga proses dapat mengidentifikasi agen pengguna (misalnya IE, Mozilla, dll), dan dengan demikian, meningkatkan kompresi dengan menargetkan browser pengguna (misalnya, menghapus hal-hal yang spesifik Mozilla ketika permintaan berasal dari IE).

Dalam latihan ini, Anda akan mempelajari cara mengaktifkan dan menggunakan berbagai jenis bundling dan minifikasi di ASP.NET 4.5.

Tugas 1 - Menginstal Paket Bundling dan Minifikasi dari NuGet

Jika belum dibuka, mulai Visual Studio dan buka solusi WhatsNewASPNET.sln yang terletak di folder Source\WhatsNewASPNET lab ini.
Buka Konsol Manajer Paket NuGet. Untuk melakukan ini, gunakan menu Lihat | Konsol Pengelola Paket Windows | Lainnya.

Membuka konsol manajer paket
Di Konsol Manajer Paket, ketik Install-Package Microsoft.Web.Optimization dan tekan ENTER.

Tugas 2 - Bundel Default

Cara paling sederhana untuk menggunakan bundling dan minifikasi adalah dengan mengaktifkan bundel default. Metode ini menggunakan konvensi untuk memungkinkan Anda mereferensikan versi yang dibundel dan dikurangi untuk file JS dan CSS dalam folder.

Dalam tugas ini, Anda akan mempelajari cara mengaktifkan dan mereferensikan file JS dan CSS yang dibundel dan dikurangi dan melihat output yang dihasilkan.

Jika belum dibuka, mulai Visual Studio dan buka solusi WhatsNewASPNET.sln yang terletak di folder Source\WhatsNewASPNET lab ini.
Di Penjelajah Solusi, perluas folder Styles, Scripts\custom dan Scripts\bundle.

Perhatikan bahwa aplikasi menggunakan lebih dari satu file CSS dan JS.

Beberapa Lembar Gaya dan file JavaScript dalam aplikasi
Buka file Global.asax.cs.

Perhatikan bahwa namespace Microsoft.Web.Optimization baru dikomentari di awal file. Batalkan komentar menggunakan direktif untuk menyertakan fitur bundling dan minifikasi.
```
using System;
using Microsoft.Web.Optimization;
```
Temukan metode Application_Start.

Dalam metode ini, batalkan komentar panggilan EnableDefaultBundles seperti yang ditunjukkan pada cuplikan di bawah ini. Ini memungkinkan kita untuk mereferensikan kumpulan file CSS yang dibundel dalam folder dengan menggunakan jalur ke folder tersebut, ditambah akhiran "CSS" atau "JS".
```
void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js 
    BundleTable.Bundles.EnableDefaultBundles();

    ...
}
```
Buka file Optimization.aspx dan temukan kontrol konten untuk HeadContent.

Perhatikan file CSS dan file JS memiliki satu tag yang dirujuk.
```
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
  <link href="Styles/CSS" rel="stylesheet" type="text/css" />
  <script src="Scripts/custom/JS"></script>
</asp:Content>
```
Catatan

Kode ini untuk tujuan demo. Idealnya, Anda akan mereferensikan bundel dalam file Site.Master. Dalam kode sampel ini, Anda akan menemukan bahwa beberapa file yang dibundel juga sedang dirujuk oleh file Site.Master, menjadikan referensi terakhir ini berlebihan.
Perhatikan bahwa tautan menggunakan konvensi bundling di atribut href untuk mendapatkan semua file CSS atau JS dari folder Styles dan Scripts\custom masing-masing.

Anda dapat menggunakan jalur Skrip/kustom/JS seperti yang ditunjukkan di bawah ini untuk menggabungkan dan menambang semua file JS di dalam folder Skrip/kustom . Ini adalah perilaku default dengan bundel default.
```
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
```
Buka file Styles\Site.css.

Perhatikan bahwa file CSS asli berisi kode yang diindentasi, spasi kosong, dan komentar yang memperbesar file. (Juga file JavaScript berisi spasi dan komentar kosong).

Salah satu file CSS asli di folder Skrip
Tekan F5 untuk menjalankan aplikasi dan navigasi ke halaman Pengoptimalan.
Klik tautan Bundel CSS untuk mengunduh dan membuka file.

Lihat file bundel yang dikurangi. Anda akan melihat bahwa semua spasi kosong, komentar, dan karakter indentasi telah dihapus, menghasilkan file yang lebih kecil.

File CSS yang dibundel
Sekarang klik tautan JS Bundle untuk membuka file bundel JavaScript. Anda dapat mengalihkan peringatan penjelajah dengan aman. Perhatikan file JavaScript di bawah folder kustom juga dibundel dan dikurangi.

File JavaScript yang dibundel

Mengaktifkan kompresi untuk file CSS atau JS jauh lebih rumit dalam versi ASP.NET sebelumnya. Sekarang, seperti yang telah Anda lihat, Anda hanya perlu menambahkan satu baris dalam file Global.asax untuk mengaktifkan bundling, lalu mereferensikan file yang dibundel dari situs Anda.

Tugas 3 - Bundel Statis

Pendekatan bundel statis memungkinkan Anda menyesuaikan kumpulan file yang akan dibundel, referensi, dan metode minifikasi yang akan digunakan.

Dalam tugas ini, Anda akan mengonfigurasi bundel statis untuk menentukan sekumpulan file tertentu untuk dibundel dan dikurangi.

Tutup browser.
Buka file Global.asax.cs dan temukan metode Application_Start.

Batalkan komentar kode bundel statis seperti yang ditunjukkan pada kode di bawah ini.

Anda mendefinisikan bundel statis yang akan direferensikan dengan jalur virtual "~/StaticBundle" dan menggunakan JsMinify untuk minifikasi semua file yang ditentukan dengan metode AddFile . Terakhir, Anda menambahkan bundel statis ke BundleTable dan mengaktifkannya.

Perhatikan bahwa file tidak terletak di tempat yang sama; ini adalah keuntungan lain daripada bundling default.

void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js
    BundleTable.Bundles.EnableDefaultBundles();

    // Static bundle.
    // Access on url http://localhosthost:54716/StaticBundle
    Bundle b = new Bundle("~/StaticBundle", typeof(JsMinify));
    b.AddFile("~/scripts/custom/ECMAScript5.js");
    b.AddFile("~/scripts/custom/GoToDefinition.js");
    b.AddFile("~/scripts/bundle/JScript1.js");
    b.AddFile("~/scripts/bundle/JScript2.js");

    BundleTable.Bundles.Add(b);

    // Dynamic bundle
    // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it: http://localhost:54716/scripts/coffee
    // DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee");
    // BundleTable.Bundles.Add(fb);
}

Buka file Optimization.aspx.

Perhatikan bahwa tautan ke Bundel JS Statis menggunakan jalur yang telah Anda nyatakan saat mengonfigurasi bundel statis dalam file Global.asax.cs: /StaticBundle.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="StaticBundle">Static JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2>
    </li>
  </ul>
</asp:Content>

Tekan F5 untuk menjalankan aplikasi, lalu navigasi ke halaman Pengoptimalan.
Klik tautan Bundel JS Statis untuk membuka file.

Perhatikan bahwa file JavaScript yang dibundel yang dikurangi adalah output untuk semua file JavaScript yang dikonfigurasi dalam file bundel statis di bawah jalur "/StaticBundle".

Bundel file JavaScript statis
Tutup browser dan kembali ke Visual Studio.

Tugas 4 - Bundel Folder Dinamis

Dalam tugas ini, Anda akan mempelajari cara mengonfigurasi bundel folder dinamis. Kekuatan bundling dinamis adalah Anda dapat menyertakan JavaScript statis, serta file lain dalam bahasa yang dikompilasi ke dalam JavaScript, dan dengan demikian, memerlukan beberapa pemrosesan sebelum bundel dijalankan.

Dalam contoh ini, Anda akan mempelajari cara menggunakan kelas DynamicFolderBundle untuk membuat bundel dinamis untuk file yang ditulis dalam CofeeScript. CofeeScript adalah bahasa pemrograman yang dikompilasi ke dalam JavaScript dan menyediakan sintaks yang lebih sederhana untuk menulis kode JavaScript, meningkatkan keterbacaan dan keterbacaan JavaScript.

Buka file Global.asax.cs dan temukan metode Application_Start.

Batalkan komentar kode bundel dinamis seperti yang ditunjukkan pada kode di bawah ini.

Anda mendefinisikan bundel folder dinamis yang akan menggunakan prosesor minifikasi kustom CoffeeMinify yang hanya akan berlaku untuk file dengan ekstensi ".coffee" (file CoffeeScript). Perhatikan bahwa Anda dapat menggunakan pola pencarian untuk memilih file yang akan dibundel dalam folder, seperti '*.coffee'.

void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js
    BundleTable.Bundles.EnableDefaultBundles();

    // Static bundle.
    // Access on url http://localhosthost:54716/StaticBundle
    ...

    // Dynamic bundle
    // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it:
         // http://localhost:54716/scripts/coffee
    DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee");
    BundleTable.Bundles.Add(fb);
}

Buka Konsol Manajer Paket NuGet. Untuk melakukan ini, gunakan menu Lihat | Konsol Pengelola Paket Windows | Lainnya.
Di Konsol Manajer Paket, ketik Install-Package CoffeeSharp dan tekan ENTER.
Klik tombol Perlihatkan Semua File di jendela Penjelajah Solusi

Menampilkan semua file
Klik kanan file CoffeeMinify.cs di Penjelajah Solusi dan pilih Sertakan dalam Proyek

Sertakan file CoffeeMinify.cs dalam proyek
Buka file CoffeeMinify.cs.

Kelas ini mewarisi dari JsMinify untuk memangkas output JavaScript yang dihasilkan dari kompilasi kode CoffeeScript. Ini memanggil pengkompilasi CoffeeScript untuk menghasilkan kode JavaScript terlebih dahulu, dan kemudian mengirimkannya ke metode JsMinify.Process untuk menambang kode yang dihasilkan.
```
public class CoffeeMinify : JsMinify
{
    public override void Process(BundleResponse bundle)
    {
        var compiler = new CoffeeScriptEngine();
        bundle.Content = compiler.Compile(bundle.Content);

        base.Process(bundle);
    }
}
```
Buka file Script1.coffee dan Script2.coffee dari folder Scripts/bundle.

File-file ini akan menyertakan kode CoffeScript yang akan dikompilasi saat melakukan bundling dengan kelas CoffeeMinify.

Untuk tujuan kesederhanaan, file CoffeeScript yang disediakan hanya termasuk kode sampel CoffeeScript. Komentar dikecualikan oleh proses JsMinify.

File CoffeeScript

Catatan

CofeeScript menyediakan sintaksis yang lebih sederhana untuk menulis kode JavaScript, meningkatkan kemudahan dan keterbacaan JavaScript, serta menambahkan fitur lain seperti pemahaman array dan pencocokan pola.

Buka file Optimization.aspx dan temukan tautan bundel.

Perhatikan bahwa tautan ke Dynamic JS Bundle mereferensikan folder Skrip/bundel dengan menggunakan akhiran /Coffee yang Anda konfigurasi untuk bundel folder dinamis.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="StaticBundle">Static JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2>
    </li>
  </ul>
</asp:Content>

Tekan F5 untuk menjalankan aplikasi, lalu navigasi ke halaman Pengoptimalan.
Klik tautan Bundel JS Dinamis untuk membuka file yang dihasilkan.

Perhatikan bahwa konten yang disertakan dalam bundel ini hanya berisi file .coffee . Anda juga dapat melihat bahwa kode CoffeeScript dikompilasi ke JavaScript dan baris yang dikomentari telah dihapus.

Bundel file JS dinamis

Catatan

Selain itu, Anda dapat menyebarkan aplikasi ini ke Windows Azure Web Sites setelah Lampiran B: Menerbitkan aplikasi MVC 4 ASP.NET menggunakan Web Deploy.

Ringkasan

Lab ini membantu Anda memahami apa itu Baru di ASP.NET dan Pengembangan Web di Visual Studio 2012 dan cara memanfaatkan berbagai penyempurnaan di Visual Studio 2012.

Dengan menyelesaikan Lab Langsung ini, Anda telah mempelajari cara menggunakan fitur dan peningkatan baru di Editor Visual Studio 2012 untuk CSS, JavaScript, dan HTML. Selain itu, Anda telah mempelajari bagaimana Visual Studio 2012 mengimplementasikan bundling dan minifikasi bawaan.

Lampiran A: Menginstal Visual Studio Express 2012 untuk Web

Anda dapat menginstal Microsoft Visual Studio Express 2012 untuk Web atau versi "Ekspres" lainnya menggunakan Microsoft Web Platform Installer. Instruksi berikut memandu Anda melalui langkah-langkah yang diperlukan untuk menginstal Visual studio Express 2012 untuk Web menggunakan Microsoft Web Platform Installer.

Buka [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). Atau, jika Anda sudah menginstal Penginstal Platform Web, Anda dapat membukanya dan mencari produk "Visual Studio Express 2012 untuk Web dengan Windows Azure SDK".
Klik Instal Sekarang. Jika Anda tidak memiliki Penginstal Platform Web, Anda akan diarahkan untuk mengunduh dan menginstalnya terlebih dahulu.
Setelah Penginstal Platform Web terbuka, klik Instal untuk memulai penyiapan.

Menginstal Visual Studio Express
Baca semua lisensi dan ketentuan produk dan klik Saya Terima untuk melanjutkan.

Menerima persyaratan lisensi
Tunggu hingga proses pengunduhan dan penginstalan selesai.

Kemajuan penginstalan
Setelah penginstalan selesai, klik Selesai.

Penginstalan selesai
Klik Keluar untuk menutup Penginstal Platform Web.
Untuk membuka Visual Studio Express for Web, buka layar Mulai dan mulai menulis "VS Express", lalu klik petak VS Express untuk Web .

Vs Express untuk petak web

Lampiran B: Menerbitkan Aplikasi MVC 4 ASP.NET menggunakan Web Deploy

Lampiran ini akan menunjukkan kepada Anda cara membuat situs web baru dari Portal Manajemen Windows Azure dan menerbitkan aplikasi yang Anda peroleh dengan mengikuti lab, memanfaatkan fitur penerbitan Web Deploy yang disediakan oleh Windows Azure.

Tugas 1 - Membuat Situs Web Baru dari Portal Windows Azure

Buka Portal Manajemen Windows Azure dan masuk menggunakan kredensial Microsoft yang terkait dengan langganan Anda.

Catatan

Dengan Windows Azure, Anda dapat menghosting 10 ASP.NET Situs Web secara gratis lalu menskalakan seiring pertumbuhan lalu lintas Anda. Anda dapat mendaftar di sini.

Masuk ke Portal Manajemen Windows Azure
Klik Baru pada bilah perintah.

Membuat Situs Web baru
Klik Situs Web Komputasi. | Lalu pilih opsi Buat Cepat. Sediakan URL yang tersedia untuk situs web baru dan klik Buat Situs Web.

Catatan

Situs Web Windows Azure adalah host untuk aplikasi web yang berjalan di cloud yang dapat Anda kontrol dan kelola. Opsi Buat Cepat memungkinkan Anda menyebarkan aplikasi web yang telah selesai ke Situs Web Windows Azure dari luar portal. Ini tidak termasuk langkah-langkah untuk menyiapkan database.

Membuat Situs Web baru menggunakan Buat Cepat
Tunggu hingga Situs Web baru dibuat.
Setelah Situs Web dibuat, klik tautan di bawah kolom URL . Periksa apakah Situs Web baru berfungsi.

Menelusuri ke situs web baru

Situs web berjalan
Kembali ke portal dan klik nama situs web di bawah kolom Nama untuk menampilkan halaman manajemen.

Membuka halaman manajemen Situs Web
Di halaman Dasbor , di bawah bagian sekilas , klik tautan Unduh profil terbitkan.

Catatan

Profil penerbitan berisi semua informasi yang diperlukan untuk menerbitkan aplikasi web ke situs web Windows Azure untuk setiap metode publikasi yang diaktifkan. Profil penerbitan berisi URL, kredensial pengguna, dan string database yang diperlukan untuk menyambungkan dan mengautentikasi terhadap setiap titik akhir tempat metode publikasi diaktifkan. Microsoft WebMatrix 2, Microsoft Visual Studio Express untuk Web dan Dukungan Microsoft Visual Studio 2012 membaca profil penerbitan untuk mengotomatiskan konfigurasi program ini untuk menerbitkan aplikasi web ke situs web Windows Azure.

Mengunduh profil penerbitan Situs Web
Unduh file profil publikasi ke lokasi yang diketahui. Selanjutnya dalam latihan ini Anda akan melihat cara menggunakan file ini untuk menerbitkan aplikasi web ke Windows Azure Web Sites dari Visual Studio.

Menyimpan file profil publikasi

Tugas 2 - Mengonfigurasi Server Database

Jika aplikasi Anda menggunakan database SQL Server, Anda harus membuat server SQL Database. Jika Anda ingin menyebarkan aplikasi sederhana yang tidak menggunakan SQL Server, Anda mungkin melewati tugas ini.

Anda akan memerlukan server SQL Database untuk menyimpan database aplikasi. Anda dapat melihat server SQL Database dari langganan Anda di portal Manajemen Windows Azure di Dasbor | | Server Server Sql Database. Jika Anda tidak memiliki server yang dibuat, Anda dapat membuatnya menggunakan tombol Tambahkan pada bilah perintah. Perhatikan nama server dan URL, nama masuk administrator dan kata sandi, karena Anda akan menggunakannya dalam tugas berikutnya. Jangan membuat database, karena akan dibuat di tahap selanjutnya.

Dasbor SQL Database Server
Dalam tugas berikutnya Anda akan menguji koneksi database dari Visual Studio, karena alasan itu Anda perlu menyertakan alamat IP lokal Anda dalam daftar Alamat IP yang Diizinkan di server. Untuk melakukannya, klik Konfigurasikan, pilih alamat IP dari Alamat IP Klien Saat Ini dan tempelkan pada kotak teks Alamat IP Mulai dan Alamat IP Akhir. Masukkan nama untuk aturan dan klik tombol .

Menambahkan Alamat IP Klien
Setelah Alamat IP Klien ditambahkan ke daftar alamat IP yang diizinkan, klik Simpan untuk mengonfirmasi perubahan.

Konfirmasi Perubahan

Tugas 3 - Menerbitkan Aplikasi MVC 4 ASP.NET menggunakan Web Deploy

Kembali ke solusi MVC 4 ASP.NET. Di Penjelajah Solusi, klik kanan proyek situs web dan pilih Terbitkan.

Menerbitkan situs web
Impor profil penerbitan yang Anda simpan di tugas pertama.

Mengimpor profil penerbitan
Klik Validasi Koneksi. Setelah Validasi selesai, klik Berikutnya.

Catatan

Validasi selesai setelah Anda melihat tanda centang hijau muncul di samping tombol Validasi Koneksi.

Memvalidasi koneksi
Di halaman Pengaturan , di bawah bagian Database , klik tombol di samping kotak teks koneksi database Anda (yaitu DefaultConnection).

Konfigurasi penyebaran web
Konfigurasikan koneksi database sebagai berikut:
- Di nama Server ketik URL server SQL Database Anda menggunakan awalan tcp: .
- Di Nama pengguna ketik nama masuk administrator server Anda.
- Di Kata Sandi ketik kata sandi masuk administrator server Anda.
- Ketik nama database baru, misalnya: MVC4SampleDB.
  
  Mengonfigurasi string koneksi tujuan
Lalu klik OK. Ketika diminta untuk membuat database, klik Ya.

Membuat database
string koneksi yang akan Anda gunakan untuk menyambungkan ke SQL Database di Windows Azure ditampilkan dalam kotak teks Koneksi Default. Lalu, klik Berikutnya.

String koneksi menunjuk ke SQL Database
Di halaman Pratinjau , klik Terbitkan.

Menerbitkan aplikasi web
Setelah proses penerbitan selesai, browser default Anda akan membuka situs web yang diterbitkan.

Aplikasi yang diterbitkan ke Windows Azure