Javascript native OOP - 3 layers

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS

https://nndung179.wordpress.com/ Page 1

Contents I/ Set up project ............................................................................................................................................ 3

1.1/ Create project .................................................................................................................................... 3

1.2/ Database ............................................................................................................................................ 4

1.2.1/ Script ........................................................................................................................................... 4

1.2.2/ Diagram ...................................................................................................................................... 4

1.3/ Create structure project .................................................................................................................... 4

1.4/ Install package Dapper ...................................................................................................................... 5

1.4.1/ Open Package Manager Console ................................................................................................ 5

1.4.1/ Get syntax to install Dapper ....................................................................................................... 6

II/ Get List Student ........................................................................................................................................ 8

2.1/ Store procedure ................................................................................................................................. 8

2.2/ Create class ........................................................................................................................................ 9

2.3/ StudentInfoDTO ................................................................................................................................. 9

2.4/ Get connection string ...................................................................................................................... 10

2.5/ Read connection string .................................................................................................................... 11

2.6/ StudentInfoRepository – Function Get List Student ........................................................................ 12

2.7/ StudentInfoService – Function Get List Student ............................................................................. 13

2.8/ Create Controller ............................................................................................................................. 14

2.9/ Add action to handle ajax call ......................................................................................................... 15

III/ Javascript ............................................................................................................................................... 15

3.1/ StudentInfoDTO ............................................................................................................................... 15

3.2/ Handle AJAX function ...................................................................................................................... 16

3.2.1/ Create XMLHttpRequest ........................................................................................................... 16

3.2.2/ Handle AJAX call ....................................................................................................................... 17

3.3/ StudentInfoRepository .................................................................................................................... 17

3.4/ StudentInfoService .......................................................................................................................... 18

3.5/ StudentController ............................................................................................................................ 19

3.6/ View & Place JS in right order .......................................................................................................... 19

3.7/ Test part 1 ........................................................................................................................................ 20

3.8/ Create template for displaying data ................................................................................................ 20

3.9/ Put template into our View ............................................................................................................. 20

4.0/ Run and Feel the magic ................................................................................................................... 21

Setup Project

Today, I am going to guild you building application using native Javascript with 3 layers model at a front-

end and also using 3 layers at a back-end.

In this tutorial, I using as follow:

+ MSSQL

+ Visual Studio 2013 Web Express

+ MVC4

+ .NET 4.0

+ Dapper (https://github.com/StackExchange/dapper-dot-net)

I/ Set up project

1.1/ Create project New => Project => C# => Web => MVC4

Choose Basic

1.2/ Database

1.2.1/ Script

1.2.2/ Diagram

1.3/ Create structure project I store all javascript handle action or business in folder called JavaScript. And store all class handle

business at a back-end in Models.

+ DTO: Data transfer object

+ Repositories: Interact directly with database

+ Services: handle business

1.4/ Install package Dapper

1.4.1/ Open Package Manager Console

Go to tools => Library Package Manager => Package Manager Console

1.4.1/ Get syntax to install Dapper

Go to : https://www.nuget.org/packages/Dapper

Copy box with red border line. Then go back to Visual Studio

When you successfully install, you will get this:

Get list student

II/ Get List Student

2.1/ Store procedure

2.2/ Create class

2.3/ StudentInfoDTO

I create 2 constructors

+ First: no parameter

+ Second: with 3 parameters

2.4/ Get connection string + Go to SQL Server. Right click to highlight => Properties

Copy Name

Go back to Visual Studio. Do as below

2.5/ Read connection string Once you have connection string from database. You need to read connection string from Visual Studio

to handle data with database

Go to Web.config

Parse connection string you just copy from you SQL Server and name it

To read this connection string. You have to add library System.Configuration and go to

StudentInfoRepository. Do as below

2.6/ StudentInfoRepository – Function Get List Student Here is syntax of Dapper. You have to remember to place namespace before you used Dapper syntax.

2.7/ StudentInfoService – Function Get List Student

2.8/ Create Controller

Notice this scripts => We are going to use it to put all our js in this section. Because this place at the

bottom of web page, so that all of our js will be placed at the bottom of our web app.

2.9/ Add action to handle ajax call

III/ Javascript

3.1/ StudentInfoDTO Here is our constructor of javascript StudentInfoDTO.

I’m not going to explain it. Everything you need to know about js. Just go to google and type Javascript

OOP and find out what is it.

3.2/ Handle AJAX function

3.2.1/ Create XMLHttpRequest

From folder JavaScript => Add HandleAjax.js => Edit it

This function above => create XMLHttpRequest to handle AJAX call and communicate with our server

3.2.2/ Handle AJAX call

I pass to this function 2 parameter

+ url: path to our action from controller. E.g: /Home/GetSomeThing (it must be return JSON)

+ callback: when we retrieve data, so that callback function will be called to handle our business.

3.3/ StudentInfoRepository Once we have tool to communicate with our Server side. So next thing we do that write function to

retrieve data from our server.

3.4/ StudentInfoService

3.5/ StudentController

3.6/ View & Place JS in right order

3.7/ Test part 1

3.8/ Create template for displaying data

3.9/ Put template into our View Go back to controller and replace the line “console.log(…)” with calling function create template at

previous index 3.8.

4.0/ Run and Feel the magic

IV/ Update code javascript => template

4.1/ Update your view As you can see at index 3.8. No one want to create view like this. So I will take you far away from that. I

will change this into my way.

Go back to you index view. Put some code like this

[[fullname]] => This is variable to contain data which I define myself. You can use your own.

4.2/ Create template variable Create folder Template and StudentTemplate.js

4.3/ Update function templateData (StudentController.js)

4.4/ function replaceAll

Create folder Utility and Handle.js => put some code on this.

4.5/ Update script order Go back to your view index and update something

4.6/ Test and feel cool

Javascript native OOP - 3 layers

Education

Transcript of Javascript native OOP - 3 layers

1 INTRODUCTION TO OOP Objective: Know the difference between functional programming and OOP Know basic terminology in OOP Know the importance of OOP Know.

[Frontend 101] JavaScript OOP

JavaScript and OOP - Stanford University · JavaScript and OOP Jerry Cain CS 106AJ November 12, 2018 slides courtesy of Eric Roberts. Once upon a time . . . Object-Oriented Programming

ANALYTICS ENGINEERING · · 2017-05-19ANALYTICS ENGINEERING ... • Ensighten • Google Tag Management • Tealium ... • JavaScript • Native Mobile languages • Data Layers:

Things start to get serious Telerik Software Academy JavaScript OOP.

The drivers of catastrophic expenditure: outpatient …...types of OOP - outpatient OOP (oop_out) and medicines OOP (oop_drug) as well as total OOP, (total_oop) were calculated and

C Derived Languages C is the base upon which many build C++ conventions also influence others *SmallTalk is where most OOP comes Java and Javascript have.

Modern JavaScript - nthu-datalab.github.io · •Modern Javascript –Babel –ES6 and 7 •Architectural Design –OOP vs. FP –Component-based Design 45. GUI and Component-based

Bringing classical OOP into JavaScript

ArcGIS API for JavaScript: Creating Custom Layers and Layer Views · 2017-03-21 · Introduction to Layers extensibility in 4.x •They don’t have a visual representation, they

OOP and JavaScript

More on JavaScript OOP

Functional & Reactive UIs with JavaScript · Functional & Reactive UIs with JavaScript Lambda Days 2016. Survey 2. OOP: Alan Key Objects communicate by asynchronous message passing.

JavaScript OOP Pattern

LECTURE-4 OOP Concepts of JS - Columbia Universityramana/Fall-2018/lectureNotes/...LECTURE-4 •OOP Concepts of JS 2 W3101: Programming Languages: Javascript Ramana Isukapalli OOP

LECTURE-4 OOP Concepts of JS AJAX - Columbia …ramana/Fall-2019/lectureNotes/...LECTURE-4 •OOP Concepts of JS •AJAX 2 W3101: Programming Languages: Javascript Ramana Isukapalli

Understanding JavaScript OOP - Soreλ_a's Basement

Chapter 1: JavaScript Primer · color: JavaScript JavaScript JavaScript src a }

6. JavaScript Objects and Object- Oriented Programming (OOP)

A Chorus Line Audition Songs - cbsd.org Chorus... · 1 oop sup ' oop Inoqs np aap aap atp 'np 'oop ' oop puno.l ' Iltzq 'np 'oop una aap sKem oop aap aap up up all) aap 'Ileq np oaCI