APPLICATIO N YEAR ApplicantID Applicant Name Fathers Name ...
Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter...
Transcript of Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter...
![Page 1: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/1.jpg)
Advancedd Web ApplicatioDesign Patter
Rupak Raj GhiP th IT S t PPratham IT System Pv
![Page 2: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/2.jpg)
• #ComputerEngineer #Soft
• Education:‐ #ME‐CE (KU)
• Experience:‐ 6 yrs.Experience: 6 yrs.• Bee IT System, Departmen(GoN), Softech Foundation
• Expertise: #.NET #PHP #A
• ProjectsProjects
• Research Field• Text‐to‐Speech Synthesis Text‐to‐Speech Synthesis
Advanced Web Application
BiotwareEngineer #Developer
nt of Land Information and Archive n, PITS
Android #JS
for Nepali Languages for Nepali Languages
Jan 8, 2014
![Page 3: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/3.jpg)
St
• I assume, audience alread,
• HTML
• CSS• CSS
• JavaScript
• Programming Language
• Web Server
• How Web site works?
Advanced Web Application
tartupp
dy have an idea ony
es
Jan 8, 2014
![Page 4: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/4.jpg)
Agg
• Website and Web‐applicatpp
• Web‐application Architect
• M d W b A D l• Modern Web Apps Develo
• Modern Tools for Web App
• How to start a carrier?
Advanced Web Application
gendag
tions
tural Patterns
opment
ps
Jan 8, 2014
![Page 5: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/5.jpg)
Website andWebsite and
• Dif
• Co
• La• La
Advanced Web Application
d Web‐Appsd Web Apps
fferences
omponents
ng agesnguages
Jan 8, 2014
![Page 6: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/6.jpg)
Website vs. W
Advanced Web Application
Web Applicationpp
Jan 8, 2014
![Page 7: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/7.jpg)
Web Applicatpp
My‐SQLMs‐SQLOracle
ApacheIIS
PostGreSQLSqLite
IISTomcat
Glass FishRails
Advanced Web Application
tion Componentsp
Jan 8, 2014
![Page 8: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/8.jpg)
Programming Weg g
Client Side Front EndClient Side – Front End
• JavaScript and JS Frameworks,
• JQuery,
• Dojo,
h• Sencha , etc…
• Flash,
il li h• Silverlight, etc….
Advanced Web Application
b Apps? – No problempp p
Server Side Back EndServer Side – Back End• PHP,
• .NET (ASP.NET, C#),
• Java (JSP, Servlets, Applets),
• C/C++• C/C++,
• Python,
• Ruby on Rails,Ruby on Rails,
• Perl, etc…
Jan 8, 2014
![Page 9: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/9.jpg)
What most populap p
http://en.wikipedia.org/wiki/Advanced Web Application
ar websites are using?g
/Programming_languages_used_in_most_popular_weJan 8, 2014
![Page 10: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/10.jpg)
Architecture of MArchitecture of M
• Client‐
• Tier‐Ar
• Ser ice• Service
• MVC (M
Advanced Web Application
Modern Web AppsModern Web Apps
‐Server
rchitecture
e Oriented Architect re(SOA)e Oriented Architecture(SOA)
Model‐View‐Controller)
Jan 8, 2014
![Page 11: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/11.jpg)
Client‐Serv
• Simple but widely used inp y
Advanced Web Application
er Architecture
n networked environment
DatabaseDatabaseFileFileEmailEmailSMSSMSSMSSMS
Jan 8, 2014
![Page 12: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/12.jpg)
Tier Ar• Client–server architecture in which
t ti li ti ipresentation, application processing,and data managementfunctions are logically separated
• Separation of concerns
• ReusabilityReusability
• Interoperability
Advanced Web Application
rchitecture
Jan 8, 2014
![Page 13: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/13.jpg)
Tier tools
Advanced Web Application
s/Languages/ g g
Jan 8, 2014
![Page 14: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/14.jpg)
Service Orien• Being used for interoperability
• Eg.g
• Banking(Utility bills)
• Telecomm• Telecomm.
Advanced Web Application
nted Architecture
Jan 8, 2014
![Page 15: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/15.jpg)
Current Trend i
• MVC ‐Model View Contro
Advanced Web Application
in web apps ‐MVCpp
ller
Jan 8, 2014
![Page 16: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/16.jpg)
MVC – Ho
• Model: Handle the backenDatabases
• View: Presentation to UseView: Presentation to Use
• UI
• Controller
• Mediator between User, Model and View
Advanced Web Application
ow it works?
nd
ers ers
Jan 8, 2014
![Page 17: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/17.jpg)
MVC‐T
• Testable Coding Patternsg
• Easy to test the applicatio
• U it T ti• Unit Testing
• Integration Testing
• System Testing
Advanced Web Application
Testability y
ons
Jan 8, 2014
![Page 18: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/18.jpg)
MVC‐ Separap
• The process of breaking ap gfeatures that overlap in fu
• Improves code clarity anImproves code clarity an
•Helps troubleshooting b
•Allows for multiple team
Advanced Web Application
ation of Concerns
computer program into distincp p gunctionality as little as possible
nd organizationnd organization
by isolating issues
ms to develop simultaneously
Jan 8, 2014
![Page 19: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/19.jpg)
MVC‐Cod
• Shortens developmentp
• Code Libraries
•Design Patterns
• FrameworksFrameworks
Advanced Web Application
de Reusabilityy
Jan 8, 2014
![Page 20: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/20.jpg)
MVC‐ Ex
• Modularized through plugg p g
• Easy to add New
• M d l Vi d C t l• Model, View and Control
Advanced Web Application
xtensibilityy
ginsg
llller
Jan 8, 2014
![Page 21: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/21.jpg)
Modern Web ApModern Web Ap
• Cu
• Ca
Advanced Web Application
pp Developmentpp Development
urrent Trends
arrier Startup
Jan 8, 2014
![Page 22: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/22.jpg)
Trends‐O
• Lots of tools are available
• Most of the web tools and• http // codeple com• http://www.codeplex.com
• http://www.github.com/
• You Can, Download them
• Only need to attribute th
Advanced Web Application
Open Sourcep
e in web
d techniques are Openm/m/
m and use as per your need
he author, no more..
Jan 8, 2014
![Page 23: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/23.jpg)
Trends‐ F
• JavaScript (Sencha, Jquerp ( , q
• HTML (JqueryUI)
• D b (E i F• Database (Entity Framew
• Programming (ASP.MVC,
• Makes your life easier
Advanced Web Application
Frameworks
ry, etc..)y, )
k Hib )work, Hibernate etc.)
CodeIgniter(PHP) etc.)
Jan 8, 2014
![Page 24: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/24.jpg)
Trends‐ JS, UI &,
• JQuery: Write less do mory• http://jquery.com/
• HTML (JQueryUI)HTML (JQueryUI)
• BootStrap (HTML5 and CS• htt // tb t t• http://getbootstrap.com
• On the fly Testing• Testing makes easier
• http://jsfiddle.net/
Advanced Web Application
& CSS Frameworks
re
SS)/m/
Jan 8, 2014
![Page 25: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/25.jpg)
Trends‐Cros
• Same apps for Desktop, Lpp p,
• Same apps for
• A d id Wi d d iO• Android, Windows and iO
• Developed using Cross pla
• Tools: PhoneGap, Cordo
• Frameworks: JQM, SencFrameworks: JQM, Senc
Advanced Web Application
ss Platform Appspp
Laptop, Tablet, Mobile etc.p p, ,
OSOS
atform development engines
va etc…
ha etc…ha etc…
Jan 8, 2014
![Page 26: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/26.jpg)
Trends‐ P• Multiple languages for sam
• Server Side• ASP.NET (MVC & Web API)
• PHP (CodeIgniter)
• JAVA (Spring)
• NodeJS
• Python (Dijango)
• Client Side• JS, HTML5 and CSS3
Advanced Web Application
Programmingg ge apps
Jan 8, 2014
![Page 27: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/27.jpg)
Carrier on W
• Job: No problem, lots of op ,
• Earning: Depends on skill,
• H ?• How?
• Start learning today
Advanced Web Application
Web Developer….p
openingsp g
, performance and dedication
Jan 8, 2014
![Page 28: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/28.jpg)
Usef• http://www.codecademy.com/
• https://www.codeschool.com/
• https://www.udacity.com/
• http://www.codeproject.com/Articlehttp://www.codeproject.com/Articlestep‐by‐step‐in‐7
• http://www.youtube.com/playlist?lis
• http://mvc4beginner com/http://mvc4beginner.com/
• http://www.w3schools.com/aspnet/m
• http://jsfiddle.net/
• http://getbootstrap.com/
• http://jquery.com/
Advanced Web Application
ful links
es/207797/Learn‐MVC‐Model‐View‐Controllees/207797/Learn MVC Model View Controlle
st=PL6n9fhu94yhVm6S8I2xd6nYz2ZORd7X2
mvc_intro.asp
Jan 8, 2014
![Page 29: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/29.jpg)
Need
• Contact me
• Email: rughimire@gmai
Advanced Web Application
d a help ?p
l.com
Jan 8, 2014
![Page 30: Advanced Web Applicatio - WordPress.com · 2014-04-23 · Advanced Web Applicatio Design Patter Rupak Raj Ghi PthPratham IT StSystem PPv ... ork, Hibernate etc.)) CodeIgniter(PHP)](https://reader033.fdocuments.net/reader033/viewer/2022060510/5f273a36ea49d16f914e0390/html5/thumbnails/30.jpg)
Tha
Advanced Web Application
ank youy
Jan 8, 2014