Pengalaman pertama menggunakan ASP.NET MVC

Hay gengsss, jumpa lagi sama saya di blog ini, kali ini akan saya ceritakan kesan pertama ketika saya menggunakan ASP.NET.

Background:
1. Di Nostra, belum ada yang memakan product microsoft(khususnya .NET)
2. Penasaran dengan microsoft punya
3. Oracle merupakan rival dari microsoft (Java vs .NET)

Dari beberapa hal diatas membuat penulis penasaran sehingga mencurahkannya dalam tulisan ini, sebelum jauh, kita sisir dulu perbedaan dari kedua kubu tersebut. Java bisa berjalan di beberapa operating sistem, tetapi harus ada Java Virtual Machine(JVM), sedangkan .Net hanya akan berjalan di operating system windows. Sama-sama tidak bersahabat ya guys, berbeda dengan C yang bisa berjalan dimana aja. xixixi. Selain itu Java mendukung bahasa Java, javaScript, Groovy, Clojure dan Scala, sedangkan .Net mendukung bahasa .Net, C#, F#, VB.NET, C++. Disini jelas ya perbedaanya....
ok, setelah kita tahu perbedaanya, akan saya ceritakan rasanya, eh kesan pertama maksudnya....
Let's GO.....
Langkah-langkah nya CRUD MVC dengan Visual Studio 2013:
1. Harus punya dulu visual studio, akan include framework asp.NET
2. Buat project baru C# > tab Web > ASP.NET Web Application > empty project dan tik MVC.
3. Setelah itu akan muncul project seperti gambar 1. dan setup project dan install framework Entity manager, dan akan muncul file entity manager di project explorer seperti gambar 2.

Gambar 1. Tampilan pertama project

Gambar 2. Entity manager framework

 4. Setelah itu tambahkan project baru Class library atau biasa disebut Model dan ulangi langkah ketiga(ini untuk koneksi ke database, btw kita pakai SQL server ya, biar sepaket)

Gambar 3. tambahkan entity library

5. Tambahkan class pada model tersebut, seperti gambar sehingga akan tampil seperti gambar 4, tambahkan juga konfigurasi (DBcontext) untuk menghubungkan database dengan class(gambar 5)

Gambar 4. Setting tabel pada database seperti gambar diatas

Gamabar 5. Setting koneksi antar class dengan tabel database

6. Tambahkan konfigurasi pada App.config dalam model, tambahkan juga pada Web.config, tanpa konfig ini, WebApp kita tidak akan terkoneksi dengan database. setelah itu tambahkan referensi pada main project ke model yang kita buat seperti gambar 7.

Gambar 7. setting koneksi database dan tambah referensi

Gambar 8. tambah kontroller

7. Nah, setelah itu add controllernya seperti gambar 8. pilih MVC 5 with view using entity framework. tambahkan juga routenya seperti gambar 9.

Gambar 9. folder project explorer dan settup route

8. Setelah itu build project, dan run. web browser default akan membuka tab dengan port default http://localhost:59465, jika kita tambah http://localhost:59465/Student akan langsung tampilk seperti gambar 10. Untuk database bisa dilihat di gamvar 11.

Gambar 10. hasil CRUD MVC

Gambar 11. Database CRUD MVC

Kesimpulan:
Kelebihan menggunakan ASP.NET MVC, langkah CRUD jadi semakin cepat, dengan User Interface yang lumayan bagus untuk versi default. Ini akan mempercepat pembuatan aplikasi. Kekurangannya, benyak project ASP.NET yang tidak opensoure, sehingga kita akan sulit mendapatkan template, selain itu, ASP ini hanya berjalan di sistem operasi windows.

Don't stop learning....

Soure:
https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started
https://codeburst.io/java-vs-net-factors-to-consider-cde1d22b06a7
https://mkhuda.com/teknologi/pilih-php-atau-asp/

JavaFX : Konsep MVC

Konsep MVC
MVC singkatan dari Model-View-Controller, konsep ini bertujuan untuk memudahkan pemrograman dengan mengelompokan source code berdasarkan fungsinya.

Model
Biasanya untuk source code yang berfungsi untuk menampung data-data saat aplikasi sedang berjalan.

View
Biasanya untuk source code yang berfungsi untuk menangani tampilan (user interface) pada aplikasi.

Controller
Biasanya untuk source code yang berfungsi untuk mengatur fungsi-fungsi yang ada pada tampilan (user interface) dengan menggunakan Model sebagai penampung datanya.

JavaFX 
Untuk tahu lebih banyak tentang JavaFX bisa melihat di http://www.oracle.com/technetwork/java/javase/overview/javafx-overview-2158620.html.

Singkat kata JavaFX merupakan pengganti Swing untuk pemrograman Java pada aplikasi desktop, yang katanya juga bisa berjalan diatas Android OS dan iOS.

Kemudian saya mencoba menerapkan konsep MVC pada pemrograman dengan JavaFX dengan bantuan Maven.

Berikut merupakan screen capture untuk mengelompokan source code sesuai dengan konsep MVC :

Mengelompokan Model pada 1 package

Mengelompokan Controller pada 1 package

Mengelompokan View (FXML) pada 1 folder

Untuk source code-nya bisa didownload di https://bitbucket.org/agus3winarno/blog.

Class Model
Model diimplementasi dengan POJO. seperti class User yang digunakan pada

public class User implements Serializable {

    private Integer id;
    private String username;
    private String password;
    private String keterangan;
    private String email;

    public User() {
    }

    //fungsi setter & getter

Desain UI pada JavaFX
Untuk mendesain UI bisa menggunakan Scene Builder dari http://www.oracle.com/technetwork/java/javase/downloads/javafxscenebuilder-info-2157684.html. Saat ini saya masih menggunakan versi 1.1.

Scene Builder 1.1

Integrasi dengan IDE
Saat ini saya menggunakan IntelliJ IDEA, untuk mengintegrasikan dengan Scene Builder dapat mengikuti screen capture dengan membuka Preferences -> IDE Settings :

Integrasi dengan IntelliJ IDEA

Setelah terintegrasi, akan muncul menu saat klik kanan pada file UI (FXML) :

Menu klik kanan Scene Builder

Untuk menghubungkan antara UI (FXML) dengan Controller tambahkan attribute

fx:controller

pada file FXML-nya. Contohnya untuk menghubungkan UI userManagement.fxml tambahkan attribute

fx:controller="org.controller.UserManagementController"

Class Controller
Controller diimplementasikan dengan contoh sbb :

public class UserManagementController extends BaseController {

    @FXML
    private TableView<User> userTable;
    @FXML
    private TableColumn<User,String> userName;
    @FXML
    private TableColumn<User,String> email;
    @FXML
    private TableColumn<User,String> keterangan;

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        super.initialize(url, rb);

        userName.setCellValueFactory(new PropertyValueFactory<User,String>("username"));
        email.setCellValueFactory(new PropertyValueFactory<User,String>("email"));
        keterangan.setCellValueFactory(new PropertyValueFactory<User,String>("keterangan"));

        // Auto resize columns
        userTable.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);

    }

    @Override
    protected void init() {
        super.init();
        userTable.setItems(UserService.getInstance().findAllEntity());
    }

    @Override
    public void setApp(Main application) {
        super.setApp(application);
    }

    public void create(ActionEvent actionEvent) {
        getApplication().addPageParameter(Constants.Parameter.ACTION, Constants.Parameter.ACTION_NEW);
        getApplication().translateToWithDefaultScreen(Layout.INPUT_PROFILE);
    }

    public void edit(ActionEvent actionEvent) {

        if(userTable.getSelectionModel().getSelectedItem() == null){
            Dialogs.showInformationDialog(getApplication().getStage(), "Belum ada data yang dipilih");
            return;
        }

        getApplication().addPageParameter(Constants.Parameter.ACTION, Constants.Parameter.ACTION_EDIT);
        getApplication().addPageParameter(Constants.Parameter.OBJECT, userTable.getSelectionModel().getSelectedItem());
        getApplication().translateToWithDefaultScreen(Layout.INPUT_PROFILE);
    }

    public void delete(ActionEvent actionEvent) {

        if(userTable.getSelectionModel().getSelectedItem() == null){
            Dialogs.showInformationDialog(getApplication().getStage(), "Belum ada data yang dipilih");
            return;
        }

        Integer id = userTable.getSelectionModel().getSelectedItem().getId();
        UserService.getInstance().remove(id);
        init();
        Dialogs.showInformationDialog(getApplication().getStage(), "Hapus data berhasil");
    }

    public void close(ActionEvent actionEvent) {
        getApplication().translateToWithDefaultScreen(Layout.MAIN);
    }

}

Untuk setiap property yang memiliki @FXML akan di-binding dengan komponen yang ada pada file FXML sesuai dengan fx:id nya.

Dan untuk setiap method action dari button yang ada pada file FXML akan di-binding menggunakan attribute onAction="#{nama_method}".

Ok. sekian dulu javafx-nya. semoga bermanfaat.