Unit 1
Unit 1
Environmental Sciences
                                                           Professional English                                                                  and Sustainability -
               Professional English -                        - II - HS3252                            Discrete Mathematics -                           GE3451
                    I - HS3152                                                                               MA3354
                                                            Statistics and                                                                     Theory of Computation
               Matrices and Calculus                      Numerical Methods -                          Digital Principles and                        - CS3452
                                                                                       3rd Semester
                                                                                                                                4th Semester
                     - MA3151                                  MA3251                                 Computer Organization
1st Semester
2nd Semester
               Computer Networks -
                     CS3591
                                                             Object Oriented
                  Full Stack Web                          Software Engineering -                       Human Values and
5th Semester
                                                                                                                                8th Semester
                                          6th Semester
                     Elective 1                                  Elective-5
                                                                                                      Management Elective
                                                                 Elective-6
                     Elective 2
   All Computer Engg Subjects - [ B.E., M.E., ]          (Click on Subjects to enter)
      Programming in C            Computer Networks         Operating Systems
    Programming and Data         Programming and Data   Problem Solving and Python
         Structures I                Structure II               Programming
Database Management Systems      Computer Architecture       Analog and Digital
                                                               Communication
     Design and Analysis of        Microprocessors and   Object Oriented Analysis
            Algorithms               Microcontrollers            and Design
      Software Engineering        Discrete Mathematics     Internet Programming
     Theory of Computation          Computer Graphics       Distributed Systems
        Mobile Computing             Compiler Design     Digital Signal Processing
      Artificial Intelligence       Software Testing     Grid and Cloud Computing
  Data Ware Housing and Data        Cryptography and       Resource Management
              Mining                Network Security             Techniques
 Service Oriented Architecture Embedded and Real Time Multi - Core Architectures
                                         Systems              and Programming
Probability and Queueing Theory Physics for Information   Transforms and Partial
                                         Science           Differential Equations
        Technical English          Engineering Physics     Engineering Chemistry
      Engineering Graphics            Total Quality        Professional Ethics in
                                       Management                Engineering
 Basic Electrical and Electronics  Problem Solving and  Environmental Science and
  and Measurement Engineering      Python Programming            Engineering
                                            lOMoARcPSD|45374298
SYLLABUS
Full Stack Web Development- (IT3501)
UNIT I         BASICS OF FULL STACK
 Understandingthe Basic Web Development Framework- User - Browser
                                                                      -Webserver --Backend
 Services - MVC Architecture - UnderStandingthe diferent stacks -The role of
-Node - Mongo DB - React. (Chapter- 1)                                         Express Angular
UNIT II        NODE JS
Basics of Node JS - Installation- Working with Node packages- Using Node package
                                                                                     manaoer
 Creatingasimple Nodejs application- UsingEvents - Listeners- Timers - Callbacks -
Data I/0 - ImplementingHTTP servicesin Node.js. (Chapter- 2)                          Handling
UNIT III       MONGO DB
TABLE OF CONTENTS
                                          UNIT I
Chapter-1          Basics of Full Stack                             (1 - 1) to (1 - 14)
   11    Understandingthe Basic Web DeveloprmentFramework.                          1-2
         14.1      Apache..                                                        .1 -5
         1.4.2     IIS.                                                           .. 1 -6
                                             ()
                                               lOMoARcPSD|45374298
                                                                     (vi)
                                                lOMoARcPSD|45374298
                                                                                    3-29
   3.8 Connectingto MongoDB from Node.js.
   3.9 Understandingthe Objects Used in MongoDB Node.js Driver                      3-30
    4.12 AngularCLI...
    4.13 CreatingFirst Applicationin
                                     Angular....
                                                                                      .4-30
          4.13.1 Angular Lifecycle                                               . .4-31
         4.13.2 Understandingand Using
                                       ngModule
                                                                                   . .4-33
    4.14 Angular Architecture                                                      ....44-35-34
    4.15 Angular Components..
    4.16 Expressions....
                                                                                 ....4-37
                                                                                    .4 -42
         4.16.1 Pipes.
                                                                                 ....4 -43
    4.17 Data Binding
    4.18 Built-in Directives...
                                                                                    .4- 44
          4.18.1 Structural Directives.                                             ,4-52
                  4.18.1.1 nglf Directive...                                        ...4-52
                                                                                    ...4-52
                  4.18.1.2 ngfor Directive
                  4.18.1.3 ngSwitch Directive
                                                                                    ....4-55
                                                                                     ..4-57
          4.18.2 Attribute Directives.                                               .4 -58
    4.19 Two Marks Questionswith Answers                                          .... 4-62
                                               UNIT V
UNIT I
Syllabus
Understandingthe Basic Web Development Framework - User - Browser - Webserver - Backend
Services - MVC Architecture- Understandingthe diferentstacks - The role of Express - Angular -
Node - Mongo DB - React
Contents
1.1 Understandingthe Basic Web DevelopmentFramework
1.2    User
1.3 Browser
                                           (1-1)
                                                  lOMoARcPSD|45374298
             Web Development
                                                 1-2
                                                                                        Basics of FullStack
Full Stack
                             Web              DevelopmentFramework
1.1   Understandingthe Basic
        Frameworkis     ?a platformfor developingapplications which
What isFramework                                                                 provides a foundation
                       applicationscan be built. The front
                                                           end                frameworks are the
        which software
       packagesthatprovide-
                                                                                                   software
         The reusablecode modules,
                               technologiesand
       o Standardizedfront end
                                blocks for making the front                   end development
       o Ready made interface                                                                    faster and
              simple.
    Basic concept : A web development framework is a collection of tools, libraries and
technologiesthat are used to create web applicationsand websites. It provides a basic structure and
                                                         quickly and efficiently.
set of conventionsfor developersto build web applications
                                                               use web frameworke
   Followingare some importantreason which indicatewhy do we
                                                  web framework is that it saves time and
     1. Saves time : The most striking feature of
        in developing any app because the developer doesn't need to worry about session               energy
             handling,eror handling and authenticationlogic. These functions are taken care of by
             web frameworks.
     2. Well organizedapp : The web framework itselftakes care of managing directoriesand
             files. This makes the completeapplication wellorganized.
    3. Flexibility and customizable : Add-ons, themes, plugins, widgets enable rapid
        customization on the web application. This brings out a lot of flexibility in code
        development.
     4. Code reusability:Frameworkalso promotesthe reuse of code.
    5. Security : Framework makes developers sure that the application uses good security
             measurementsbecause the framework itself takes care of it.
                                                                                                   Database
                       Browser                                            Webserver
                                                                          Server-side              MySQL
                                           Request
        Interacts   Javascript) (XML)                                       scripts                 Oracle
                    HTML         CSS
                                                                              Files
                                           Response
User
                                                                                                       Other
                                                                                                      services
 1.2 User
    " User is an importantpart of web developmentframework.
   " Users expectations from a website define the requirements for developing a good
         website.
         Normally an efficientand easy to use website is preferredby the user. They also expect
         that the same website must behave closer to the applications installed on their
         computers and mobile devices.
    " User interacts with the browser by using input devices such as mouse, keyboard on
         PC or swipes and taps on mobile devices. The web framework processesthe user input
         and provides the required visual output.
 1.3 Browser
         Browser is an applicationfor accessingwebsites. User interactswith the browser in the
         web developmentframework.
       " The browser plays three roles in web framework-
          1. It provides communicationto and from the web server.
         2. It interpretsthe data from the server and displays the visual output.
         3. The browser handles user interaction through the keyboard, mouse, touchscreen or
              other input device and takes the appropriateaction.
                                                 1-4
Full Stack Web Development
                               communication:
                                                                                                       Basics of Full Statl
    " Browser    to web server
                                       webserver, the browser                                   makes use
          o For communicating with the                                                                      of
            HTTPS protocols.                                                                                       HTTP and
          o HTTP stands for HyperText Transfer Protocol. This protocol
                                                                            is
            communication between browser and web server. It is a                                                    used    for
            HTTP also defines what type of requests that can be made by the                 request/response
                                                                                                     user. protoco
            HTTP protocoldefinesthe format of those requestsand responses.
          o HTTPS protocol is similar to HTTP protocol but it adds an
                                                                                                                 Similarly the
            layer so that the user can decide whetherto accept the connectionadditional
            There are three types of requeststo the server -
                                                                              Or not.                                 Security
      i) GET:The GET requestis typically used to retrieve data from the
          can be in the .html files or images.                                                          server. This,data
     ii) POST: The POST request is used for sendingthe data to the seserver,
         Credit card details while performingonline shopping.                                               For example -
      ii) AJAX: AJAX stands for Asynchronous JavaScript and
           Language.   In AJAX, the GET or POST request is done                                      Extensible Markup
       running in the browser.                                                                    directly by      JavaScript
  " Difference between GET and POST requests : When
                                                         a user submits his
   the GET method then the URL string displays the                          request using
                                                   request submitted by the user. But if
   the POST method is used then URL string does not show
                                                          the submittedcontents.
 " The common browsers are Internet
                                    Explorer, Mozilla Firefox, Google Chrome, Safari.
   Renderingthe bowser view :
    o The browser reads data from initial
                                          URL and then renders the HTML document to
       build the Document Object Model (DOM).
     o The DOM is a tree structured object. The
                                                     browser interprets each DOM element
       and renders it to user's screen to build a
                                                  webpage view.
     o Browsers get different types of data from
                                                   multiple web server requests to build the
           webpage.
      o     Followingare various types of files that are displayed by the
                                                                           browser -
               HTML files : The HTML files representthe static
                                                                     data.
               CSS files : These files define how the
                                                            elements on the page are lo
              styled using fonts, colors, borders and so on.
            " Client side script : Normally these
                                                       scripts are in JavaScript files. Thes
              scripts provide additional functionalities to the .webpage,
                                                                                facilitate ne
                          TECHNICAL PUBLICATIONS®, an
                                                                       up-thrustfor knowledge
                                                      lOMoARcPSD|45374298
                 interactivityof user with the web page and provide any necessary logie
                 required to display the page and provide the functionality.
                 Media files : These are the files that contain images, videos and audio.
                 These files can be rendered as webpages.
                 Data : Any data such as XML, JSON or raw text can be provided to the
                 web server as a response to an AJAX request.
               . HTTP headers : The HTTP headers define the type of data in the request
             as well as the type of data expected to be returned back to the browser.
   " User interaction: User interactswith the browserwith the help of input devices such as
     mouse clicks, keyboards,touchscreens.The browser has an event system that captures
     the user events and then takes appropriateaction. This action can be loading the web
          page obtainedfrom the server as a response or displayingthe pop-up menu.
     1. The web servers accept the requests from the web browserS.
     2. The user request is processedby the web server.
     3      The web servers respond to the users by providing the services which they demand for
            over the web browsers.
     4.     The web servers serve the web based applications.
     5. The DNS translatesthe domain names into the IP addresses.
     6. The servers verify given address exists, find necessary files, run appropriate scripts,
        exchangecookies if necessaryand return back to the browser.
     7. Some servers actively participatein session handling techniques.
 1.4.1 Apache
   " It is an excellent server because of its two important features: Reliability and
          Effciency.
          Secondly it is more popular because it is an open source software. That means it is
          freely available to anybody. Apache web server is best suitable for UNIX Systems but it
FullStack Web
                Development
                                                 1-6
   Similarly, when the data comes browser to the web server in the form of request, then the web
server connects to the database and updates the data.
Review Question
    3. Controller: The controller receives input, validates it and then performs business
         operations that modify the state of the data model. The controllerbasicallyresponds to
         user requests and performs interactionwith the model. Refer Fig. 1.6.1.
                                       alerts                                Controller
                                                                                          updates
                                    about event                                           model
                                                1-8                                     DasicS of
             Web Development                                                                           Full
 FullStack
                                formatting : MVC
                                                  pattern returns data             without                    Stack
      4. Returns
                  data without
         formatting. Hence, the
                                same components can be used
                                                               and
                                                                               called for     ap lyinwigth aannyy
                                                                                             use
      5. interface.
          Customization: It is an extensibleand pluggable framework. MVC framewoTk are
                              componentscan be casilyreplacedor customized
          designedso that the
Review Questions
FullSlack
          Web       Development                        1-9                                      Basics of Full Stack
                                                                                                Backend services
                                                                                                 Database
                          Browser                                              Webserver
                           Angular                                              Node.js
                                             Request                                             MongoDB
        Interacts    (Javascript) (JSON
                                    XML
                                                                    Express
                                                                   webserver
                      HTML           SS                                          Server-side)
                                                                                    scripts
                                             Response
User                                                                  Files
                                                                                                     Other
                                                                                                    services
1.7.1 Express
    Express is used for server side developmentin full stack. As it is running in Node.js, it is easy
to configure,implementand control the web application.
   Followingare the reasons why express is a great frameworkto start from -
       1) Routing : Express JS provides a routing mechanism so that it is possible to reach to
           differentweb pages using the URLs.
       2) Error handling: Express providesbuilt-inerror handling for documents.
       3) Easy integration: Express server can easily be implementedbehind an existing reverse
          proxy system. This allowsit to be easily integratedinto your existingsecured system.
       4) Cookies : Express provides easy cookie management.
       5) Session and cache management:Express has session management and cache
           managementfacility.
 1.7.2 Angular
   Angular is aclient side framework developed by Google. It is written in TypeSeript. angular
provides all the functionalitiesneeded to handle user input in the browser, manipulatedata on the
client side. It also controls how elements are di_played in the browser window.
                    Development
    EullStack Web                                    1-11                               Basics of Full Stack
     1.7.5 React
       ReactJS is an open source, component-based front end JavaScript library maintained by
    facebook. This library is responsible only for the view layer of the application. That means this
    JavaScriptis for buildinguser interfaces.
e      Followingare the reasons why MongoDB is a great frameworkto start from -
        ) Virtual DOM : DOM stands for Document Object Model. It also provides a way to
             update the content, structure and style of the document. Virtual DOM is a representation
             of the original DOM. When a user updates something on the web application,DOM gets
             updated. Updating the DOM is very slow, most of the JavaScript frameworks update the
             whole DOM which makes it slower. But actually there is no need to update the whole
             DOM, instead, these frameworks should update only the part of DOM that is required to
             update. This is what the virtual DOM does. This is why ReactJS's DOM manipulationis
             much faster than other frameworks. Due to this property, whenever any change is made
             in the web application,then those changes are reflected on the web page within no time.
        2) Comnponents : This feature allows the web developer to create custom elements which
           can be reused in HTML.
        3) JSX: JSX is an extension of JavaScriptsyntax. JSX can be seen as a
                                                                                  combination of
             javascript and XML. The syntax of JSX is very simple that makes writing components
             very easy.
         4) One way data binding : The ReactJS is designed in such a
                                                                              way that it follows,
            unidirectional one way data binding. That means, data is allowed to flow in one
                           or
            direction at a time. This helps in achieving greater control over the
                                                                                           application. This
             makes helps in increasingthe efficiencyof an application.
FullStackWeb
ReviewQuestions
                                 sackdevelopment.
                    ofNodejsinfull
    1. Eyplaintheuse MongoDB.
               noteon-                       frameworks?
  2. Writeshort                        in
                                  useful  web
     Ghe thereasons- Whyis express
                                framework.
  3.               ofreactin web
  4. Eyplaintherole
                   Questionswith Answers
1.8 Two Marks
                   developmentframework?
 Q.1 What is web
 " A web developmentframework is a collection of tools, libraries and technologies that are
Ans. :
                                 and websites.
   used to ereate web applications
                       structure and set   of conventionsfor           developers to build   web
 " It provides a basic
  quicklyand efficiently.
                                                                                                   applications
                      framework ?      Give any two reasons.
Q.2 Why do we use web
Ans. :
 1. Saves time : The most striking feature of web framework is that it saves time and energy in
     developing any app becausethe developer doesn't need to worry about session handling.
                                                                                  hu
    error handling and authentication logic. These functions are taken care of
    frameworks.
2. Flexibility and customizable :            Add-ons, themes, plugins, widgets enable ranid
   customization on the web application. This brings out a lot of flexibility in oda
   development
Q.3 What are the componentsof web developmentframework ?
Ans.: The components of web developmentframework are
 (1) User (2) Browser (3) Web Server (4) Backend services
 Q.4 Give the importanceof browser
 Ans.: The browser plays three roles in web framework-
 1. It providescommunicationto and from the web server.
 2. It interpretsthe data from the server and displays the visual output.
3. The browser handles user interaction through the keyboard, mouse, touchscreen or other
   input device and takes the appropriateaction.
  1) Backend services are the services that run behind the web server. These services
                                                                                      provide the
     data to the web server which is requestedby the web browser.
  2) The most comnmonlyused backend service is a database that stores the information.
  Q.9 What is MVC?
   Ans. :
  1. Model : This part of the architectureis responsible for managing the applicationdata. This
     module responds to the request made from view. The model gives instructions to the
      controllerto update when the response is made.
   2. View: This part takes care of the presentation of data. The data is
                                                                          presented in desired
      format with the help of view. This is a script based system using JSP, ASP, PHP and so on.
   3. Controller: The controllerreceives input, validatesit and then
                                                                     performs business operations
      that modifythe state of the data model. The controllerbasically responds to
                                                                                   user requests
       and performs interactionwith the model.
                                              1-14
Full Stack Web Development                                                          Basics of Full Star,
 Q.10 What is full stack ?
                                                                                                                                4th Semester
                     - MA3151                                  MA3251                                 Computer Organization
1st Semester
2nd Semester
               Computer Networks -
                     CS3591
                                                             Object Oriented
                  Full Stack Web                          Software Engineering -                       Human Values and
5th Semester
                                                                                                                                8th Semester
                                          6th Semester
                     Elective 1                                  Elective-5
                                                                                                      Management Elective
                                                                 Elective-6
                     Elective 2
   All Computer Engg Subjects - [ B.E., M.E., ]          (Click on Subjects to enter)
      Programming in C            Computer Networks         Operating Systems
    Programming and Data         Programming and Data   Problem Solving and Python
         Structures I                Structure II               Programming
Database Management Systems      Computer Architecture       Analog and Digital
                                                               Communication
     Design and Analysis of        Microprocessors and   Object Oriented Analysis
            Algorithms               Microcontrollers            and Design
      Software Engineering        Discrete Mathematics     Internet Programming
     Theory of Computation          Computer Graphics       Distributed Systems
        Mobile Computing             Compiler Design     Digital Signal Processing
      Artificial Intelligence       Software Testing     Grid and Cloud Computing
  Data Ware Housing and Data        Cryptography and       Resource Management
              Mining                Network Security             Techniques
 Service Oriented Architecture Embedded and Real Time Multi - Core Architectures
                                         Systems              and Programming
Probability and Queueing Theory Physics for Information   Transforms and Partial
                                         Science           Differential Equations
        Technical English          Engineering Physics     Engineering Chemistry
      Engineering Graphics            Total Quality        Professional Ethics in
                                       Management                Engineering
 Basic Electrical and Electronics  Problem Solving and  Environmental Science and
  and Measurement Engineering      Python Programming            Engineering