GMR Institute of Technology CARIT An Autonomous Institute Affiliated to JNTUK, Kakinada Taine Tonarow's COURSE HANDOUT B. Tech - VI Semester Course Title Web Application Developments Frameworks Dated: 28-11-2022 Course Code 20CSC22 Academic Year : 2022-23 Course Structure Course Coordinator : Mr.$ Vinodkumar. Instructor(s) Mr.§ Vinodkumar Pre-requisite Javascript, Python, Web Technologies 1.Course description: This course will cover the practical aspects of Web Application development using various frameworks. The course equips students with resources for design, development and production of web applications.Students will be introduced to popular web application frameworks for building scalable applications. 2,Scope and Objective: ‘© Understand the framework architectures ‘+ Use the different frameworks to design web applications ‘* Understand the Various frameworks and their usage * Analyze the design real time web applications ‘+ Analyze to use appropriate client-side or Server-side applications 3.Books: Textbook (s) 1. Angular: Up and Running, Shyam Seshadri, 1st Edition, O'Reilly, 2018 2, Struts the Complete Reference, James Holmes, 2nd Edition, Mc. Graw Hill Professional, 2006, 3, Programming with Django, Wiley Publishing Reference (s) 1. Angular 6 for Enterprise-Ready Web Applications, Doguhan Uluca, 1st edition, 2018 2, The Definitive Guide to Django, Adrian Holovaty, Jacob Kaplan-Moss, Apress, 2009, 3, Struts 2 In Action, Donald Brown, Chad Michael Davis, Scott Stanlick, Dreamtech press, 2008.GMR Institute of Technology CARIT ‘An Autonomous Institute Affiliated to JNTUK, Kakinada Taine Tonarow's 4. Syllabus UNIT-1 10+6 Hours Fundamentals of Web Framework Web framework - History, Types of framework architectures, Model-view-controller (MVC), Three-tier organization Introduction to frameworks- Framework applications, General-purpose website frameworks-Server-side, Client-side features MVC, Three-tier organization, Framework Practical Components 1. Realization of separation of data, data fetch and representation logics 2. Realization of mark-up language and it's styling UNIT- II 12+8 Hours Angular - JavaScript web framework Introduction - Angular MVC, Model, View, Controller, Ajax, Data binding Angular concepts - Directives, Scopes, Controllers, Modules, Expressions Developing a simple To-Do application using Angular}S (Developing a single page application) MVC, Ajax, Data binding Practical Components 1. Implementation of angular directives 2, Implementation of scope and controller 3, Implementation of custom/user-defined directive Unit IIL 12+6 Hours React framework Introduction to React: What is Full-Stack Web Development?, Nodejs and NPM, Front-end JavaScript Frameworks and Libraries Overview, Introduction to React, React App Overview, Introduction to JSX, React Components, React Components: State and Props, React Components: Lifecycle Methods Part 1 React Router and Single Page Applications: Presentational and Container Components, React Components: Lifecycle Methods Part 2, Functional Components, React Virtual DOM, React Router, Single Page Applications, React Router: Parameters React Forms, Flow Architecture and Introduction to Redux: Controlled Forms, Uncontrolled Components, The Model-View-Controller Framework, The Flux Architecture, Introduction to Redux, React Redux Forms Practical Components 1. React Components 2. React Router and Single Page Applications 3. Controlled Form Validation, Uncontrolled Forms Unit IV 11+10 Hours Django - Python web frameworkGMR Institute of Technology CARIT An Autonomous Institute Affiliated to JNTUK, Kakinada renner Introduction to Django- History-Django Components-Alternate Components-MVC Architecture in Django MVC creation in Django - Configuring Django, Creating model, view and controller in Django, REST in Django and templates MVC, Django, REST in Django and templates MVC, Django, REST Practical Components 1, Creating models for database queries 2. Writing Django templates for rendering data 3, Implementation of REST API using Django Total : 45 +30 Hours 5.Course Outcome: Atthe end of the course, students will be able to 1, Understand the fundamentals of web framework. 2, Classify model, view and controller layers of a web application, 3. Design a web application using a framework. 4, Know the concept of Java web framework. 5, Understand and analyze how modern-day web applications are different from web sites. 6, Learn the technologies of Python web framework. 6.COs POs Mapping CO; | PO: | POs | POs a) ae) a) ey Nye we] we] we] 09] os] oo w]e] a] oe] wf we] wl ms] oe] sf 7.Course Plan: No. Lecture | Learning objectives Topie(s) to be covered Chapter in the textbook/reference UNIT —I : Fundamentals of Web Framework History R2 [2] Fundamentals of Web "Fypes of famework R2 Framework architectures 5 R2 Model - view — controller(MVC)GMR Institute of Technology CARIT ‘An Autonomous Institute Affiliated to JNTUK, Kakinada Tale Tororo’ 4 Lab Component : Realisation of separation of data, data fetch and representation logics R2 5 Lab Component : Realisation of separation of data, data fetch R2 and representation logics 6 Three-tier organization R2 R-2 Introduction to frameworks: Framework applications 8 General-purpose website frameworks 9 Lab Component : Realisation of separation of data, data fetch R-2 and representation logics 10 Lab Component : Realisation of separation of data, data fetch R-2 and representation logics 1 General-purpose frameworks R-2 12 Introduction to frameworks | Server-side features 13 Client-side features R2 14 Lab Component : Realization of mark-up language and it’s Re2 styling 15 Lab Component : Realization of mark-up language and it’s R2 styling Unit — 2: AngularJS 16 ‘Ajax R-2 17 ‘Ajax R-2 7 AngularJS Aix RZ 19 Data binding R2 20 ‘Angular MVC 21 Angular MVC Angular concepts ba 22 Directives, Scopes, Controllers, Modules, Expressions 23 Practical Components : Implementation of angular directives 24 Practical Components : Implementation of angular directivesGMR Institute of Technology CARIT An Autonomous institute Affiliated to INTUK, Kakinada Tepe tonero's 25 Directives, Scopes, Controllers, TS Modules, Expressions 26 Angular concepts Directives, Scopes, Controllers, T-3 Modules, Expressions 27 Directives, Scopes, Controllers, T3 Modules, Expressions 28 Practical Components : Implementation of scope and controller 29 Practical Components :Implementation of custom/user-defined directive 30 | Developing a simple To-Do application using AngularJS TS (Developing a single page application) UNIT -3 React Framework 31 4 4 What is Full-Stack Web 12 Introduction to React Development?, Node. js and NPM 32 , - What is ‘FulkStack Web T2 Introduction to React Development? Node,js and NPM 33 fayaSer a T-2 Front-end JavaScript _| JavaScript Libraries 34 Frameworks and Libraties | Ro.5; ap ovale T2 Overview app Overiew 35 React app Overiew 72 36 React app Overiew T2 Introduction to React, 37 React App Overview, | introduction to JSX T2 Introduction to JSX. 38 Introduction to ISX t 39 State and Props T2 React Components 40 State and Props T2 41 Lifecycle Methods Part 1 React Components R T2 Lifecycle Methods Part 2 8B React Router and Single | React Router Page Applications 4 Single Page Applications T2 a5 Functional Components, E React other Components - TI and Parametrs React Virtual DOM, 7 React Router: Parameters TMGMR Institute of Technology CARIT An Autonomous Institute Affiliated to JNTUK, Kakinada ghia Torero’s 48 Practical Components : React Component B Practical Components: React Components 30 TA React Forms, Flow | Controlled Forms 31 Architecture and Uncontrolled Components T1 5 Introduction to Redux 82 MVC Framework Tl 33 Practical Components : React Router and Single Page Applications 8 Flux Architecture TM 56 Introduction to Redux _| React Redux Forms vl 7 React Redux Forms Tl 38 Practical Component Controlled Form Validation, Uncontrolled Forms Unit IV Django — Python web framework 39 History TS 60 Introduction to Django | Diango Framework Architecture 13 I Django Components v 3) Practical Components: Writing Django templates for rendering data Practical Components Writing Django templates for rendering data 4 MVC Architecture in MVC Architecture TS po Django 6 MVC Architecture in Django TS 6 Practical Components. Creating models for database queries 7 Practical Components :Creating models for database queries @ MVC Creation in Django Configuring Django TS o Greate model TS 70 MVC Creation in Django Create View and Controller TS 7i What is REST TS B REST in Django and REST in Django TS templates%ot weightage Date & Time 80% of Max 420% of Min (09-01-2023 to 11-01-2023, (06-03-2023 to 1 2023 23-03-2023 to 05-04-2023 16-03-2023 to 22-03-2023