Day 1

Aplikasi Web & ASP.NET MVC

Versi 1.0 29 September 2014

PT AMN Indonesia

Objective

Konsep Aplikasi Web

VB.NET
MVC Pattern
ASP.NET MVC
Tugas: Membuat Aplikasi Dengan
ASP.NET MVC

Konsep Aplikasi Web

Terdiri dari Client dan Server
Web Server sebagai penyedia
layanan
Web Browser sebagai pengakses
layanan
Connection Less
Protokol HTTP

Konsep Aplikasi Web

Konsep Aplikasi Web

POST
Data dikirim melalui HTTP Header
Dikirim menggunakan HTML Form
<form method=post></form>

Konsep Aplikasi Web

GET
Data dikirim melalui URL parameter
Dapat terlihat melalui address-bar
http://www.example.com?
id=1&name=AMN

VB.NET
Salah satu bahasa pemrograman
tingkat tinggi
Mengimplementasikan .NET
Framework
Di launching tahun 2002
Object Oriented
Strong Type

VB.NET
Syntax :
Tidak menggunakan bracket {}
Statement tidak diakhiri dengan
semicolon ; tetapi dengan baris
baru

VB.NET
Tipe Data :
Boolean
Byte
Char
Date
Decimal
Double
Integer

VB.NET
Identifier Naming
Harus didahului dengan Huruf dan
diikuti dengan angka atau
underscore (_)
Tidak boleh mengandung spasi atau
simbol selain underscore
Tidak boleh menggunakan nama
identifier yang termasuk reserved
keyword

VB.NET
Contoh Identifier / Example Naming :
Contoh Benar

Contoh Salah

VB.NET
Conditional :
If Else ... End If
Select -> Case

VB.NET
Loop :
Do
For Next
For Each Next
While End While

VB.NET

Class
Function
Sub Function
Passing Parameter

Konsep MVC
User
Interaction

Memanggil

Viewer

Mempengaruhi

Model

Controller
Memanipulasi

Konsep MVC
Konsep MVC :
Model
Merupakan representasi Business Model
Digunakan sebagai sumber data bagi viewer

View
Bertugas untuk menampilkan UI
Dapat menerima interaksi dari user

Controller
Bertugas untuk melakukan koordinasi terhadap model dan
viewer

ASP.NET MVC
Membutuhkan .NET 3.5 dan di Install
secara terpisah
Komponen ASP.NET MVC
Dispatcher
Routing
Controller
Model
Viewer

ASP.NET MVC
Dispatcher merupakan sebuah
ASP.NET HTTP Handler
Berfungsi untuk menginisialisasi dan
mengatur controller mana yang akan
diaktifkan berdasarkan URL tertentu

ASP.NET MVC
Routing bertugas untuk memetakan
URL dengan controller yang akan
dijalankan
Format routing didefinisikan didalam
file global.asax

ASP.NET MVC
Model merupakan sebuah class
standar
Merepresentasikan business model
dari aplikasi
Ditampilkan kepada user melalui
viewer

ASP.NET MVC
Controller bertugas untuk melakukan
koordinasi model dengan viewer
Didalam controller terdapat methodmethod yang merupakan sebuah
action
Interaksi dari user terhadap viewer
akan mengakibatkan salah satu
action controller dipanggil

ASP.NET MVC
Viewer merupakan file .aspx, .ascx
atau .master
Secara default, nama viewer
disamakan dengan nama action
controller
Viewer diletakkan di dalam folder
yang memiliki nama yang sama
dengan controller

Project ASP.NET MVC

Pilih Menu File | New Project
Pilih project type: web dan template:
ASP.NET MVC Web Application
Beri nama project tersebut
HelloWorld
Klik tombol OK

PROJECT ASP.NET MVC

PROJECT ASP.NET MVC

Pada jendela yang muncul, pilih opsi
do not create Unit Testing project

PROJECT ASP.NET MVC

Secara default, VS.NET
akan membuatkan
controller, serta viewer
lengkap.
Dibuatkan pula
MasterPage dan
UserControl

PROJECT ASP.NET MVC

Controller diturunkan dari
System.Web.Mvc.Controller

PROJECT ASP.NET MVC

Viewer merupakan sebuah file
.aspx, .ascx atau .master
Data yang dikirim dari controller
diambil melalui variable ViewData

PROJECT ASP.NET MVC

Nama file viewer secara
default sama dengan
nama method di controller
Lokasi file berada di
dalam folder yang sama
dengan nama controller

PROJECT ASP.NET MVC

Debuggin secara default disabled.
Ubah menjadi enabled agar dapat
melakukan debug terhadap aplikasi

PROJECT ASP.NET MVC

Compile project, lalu tekan F5 untuk
menjalankannya.

STRONG TYPED VIEW

View yang terikat (coupled) dengan
sebuah class model
View menampilkan data-data yang
dimiliki oleh model tersebut
Untuk membuatnya, perlu dibuat
class model terlebih dahulu

STRONG TYPED VIEW

Buatlah class model dengan nama
Bangun (Bangun.vb)

STRONG TYPED VIEW

Compile project tersebut
Tambahkan method LuasBangun
pada controller

STRONG TYPED VIEW

Klik kanan pada method dan pilih
Add View...

STRONG TYPED VIEW

Visual Studio akan membuatkan
viewer baru

STRONG TYPED VIEW

Jalankan dengan menekan tombol F5

POST DATA
Tambahkan property Luas dan
Method HitungLuas pada model

POST DATA
Tambahkan method LuasBangun
pada controller, tetapi dengan
tambahan attribute
<AcceptVerbs(HttpVerbs.Post)>

POST DATA
Tambahkan informasi luas pada
viewer LuasBangun.aspx

POST DATA

TUGAS
Buatlah sebuah aplikasi POS dengan ASP.NET
MVC
Aplikasi ini menerima input berupa:
Definisi barang
Harga barang
Jumlah barang dibeli
Diskon

Setelah diinput, dan di klik submit, aplikasi

akan menampilkan informasi definisi barang,
jumlah, harga, diskon, sub total dan grand total

TUGAS
Design Model POS

Reference
http://www.tutorialspoint.com/vb.net/
http://www.asp.net/mvc