Javascript native OOP - 3 layers

53 %
47 %
Information about Javascript native OOP - 3 layers
Education

Published on September 30, 2014

Author: nndung179

Source: slideshare.net

Description

It's all about tutorial help you have a vision about Javascript OOP

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

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 2 3.8/ Create template for displaying data ................................................................................................ 20 3.9/ Put template into our View ............................................................................................................. 20 4.0/ Run and Feel the magic ................................................................................................................... 21

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 3 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 View slide

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 4 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. View slide

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 5 + 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

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 6 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

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 7 When you successfully install, you will get this:

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 8 Get list student II/ Get List Student 2.1/ Store procedure

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 9 2.2/ Create class 2.3/ StudentInfoDTO I create 2 constructors + First: no parameter

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 10 + 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

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 11 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

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 12 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.

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 13 2.7/ StudentInfoService – Function Get List Student

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 14 2.8/ Create Controller

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 15 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.

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 16 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

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 17 This function above => create XMLHttpRequest to handle AJAX call and communicate with our server side. 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.

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 18 3.4/ StudentInfoService

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 19 3.5/ StudentController 3.6/ View & Place JS in right order

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 20 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.

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 21 4.0/ Run and Feel the magic

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 22 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

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 23 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

September 29, 2014 NGUYỄN NGỌC DŨNG – JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 24 4.6/ Test and feel cool

Add a comment

Related presentations

Related pages

Native Javascript OOP – 3 Layers – Part 1 | David'N ...

Today, I am going to guide you building application using native Javascript with 3 layers model at a front-end and also using 3 layers at a back ...
Read more

Javascript native OOP - 3 layers - Education - DOCUMENTS.MX

Share Javascript native OOP - 3 layers. ... JAVASCRIPT OOP – 3 LAYERS https://nndung179.wordpress.com/ Page 2 3.8/ Create template for displaying data ...
Read more

Layers in OpenLayers 3 - OpenLayers 3 : Beginner's Guide ...

Layers in OpenLayers 3 OpenLayers is a JavaScript library, ... (OOP). When we want to ... Introducing layers; Layers in OpenLayers 3;
Read more

JavaScript OOP - Technology - documents.mx

Table of Contents (3) JavaScript OOP . Constructors . Properties . Functions . Inheritance . Polymorphism . Extending Prebuilt JavaScript Objects . 3.
Read more

Create an Object-oriented JavaScript Class Constructor

dhtml/layers; dot net; ... Create an Object-oriented JavaScript Class ... The ECMAScript 3 spec does recognize native objects' internal DontEnum ...
Read more

Events And JavaScript: Part 3 - The Event Object

dhtml/layers; dot net; java applets; ... Events And JavaScript: Part 3 - The Event Object. ... and 'Middle' in array positions 0,1 and 3.
Read more

Newest 'javascript' Questions - Stack Overflow

JavaScript (not to be confused ... 3answers 23 ... Is this bad OOP design for a simulation involving interfaces? Morphism that is not a mapping ...
Read more

Understanding JavaScript OOP - Quils in Space

Understanding JavaScript OOP. ... directly. There are no layers of meta ... 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...
Read more