Manav Goyal

Web Programming - Java

  • Web Pages
    • Static
    • Dynamic
  • HTML
    • Used to format and display data
  • JavaScript
    • <script type="text/javascript" src="js/jsExternal.js"></script>
  • Style Sheet
    • <link rel="stylesheet" type="text/css" href="test.css">
  • HTTP Client
    • HttpClient client = HttpClient.newHttpClient();
    • HttpRequest request = HttpRequest.newBuilder().uri(URI.create("http://openjdk.java.net/")).build();
    • client.sendAsync(request, BodyHandlers.ofString()).thenApply(HttpResponse::body).thenAccept(System.out::println).join();
  • HTTPS
    • Combination of HTTP and SSL
    • TCP/IP used by Web servers
    • Allows transfer of encrypted data
    • Methods
      • Post, Get, Head, Put, Delete, Trace, Options, Connect
  • XML
    • Used to transport data
    • XML Schema
      • Matching end tag
      • One root tag
  • XSLT (XML Validation and Transformation)
    • Source (XML), Output (XML, HTML), XSLT Processer (XSL Style Sheet)
    • Performs styling operations and advanced data processing
    • Sample Areas of Application (SAA) – XSL file
      • <?xml version="1.0" encoding="UTF-8"?>
      • <?xml-stylesheet type="text/xsl" href="Zoo.xsl"?>
  • NODE JS
    • ECMAScript
      • Used to standarized JS
      • Babel is used to tranpile ES6 (Can't be understood by Browsers) to ES3
    • Architecture
    • Features
      • Modularity, Event Driven, Asynchronous, Data Streaming
    • Node Modules
      • Core / Built In
        • OS, util, ath, fs, url, http, ...
      • External
      • User Defined
  • React JS
    • Code
          From LifeCycleA constructor
    LifeCycleA.js:17 From LifeCycleA getDerivedStateFromProps()
    LifeCycleA.js:26 From LifeCycleA render()
    LifeCycleB.js:10 From LifeCycleB constructor
    LifeCycleB.js:16 From LifeCycleB getDerivedStateFromProps()
    LifeCycleB.js:25 From LifeCycleB render()
    LifeCycleB.js:21 LifeCycleB component did mount
    LifeCycleA.js:22 LifeCycleA component did mount
      • Execution Steps
        • (I)
          • Import the project "Demo10020_Spring_Boot_Spring_JPA_Repository" into Eclipse
          • Refer the project
            • Copy the db script from Employee.sql and paste it in MYSQL COmmand Line Client
          • Observe the new annotation @CrossOrigin(origins = "http://localhost:3000") in the Controller class
          • Execute this project
          • Verify the execution http://localhost:8095/emp/controller/getDetails
        • (II)
          1. Refer to the project "demo1012-http-client"
          2. Observe the axios call in GetAllComponent.js
          3. In App.js comment other component's call
          4. npm start
          5. Observe the button Get Data is displayed in browser, Click the button and observe the list of employees
          6. Observe GetDetailsByIdComponent.js
          7. In App.js comment other component's call
          8. In your browser, enter any valid id-> 1001, 1002, 1003 and observe the employee data
        • (C)
          1. Observe PostForm.jsp
          2. In App.js comment other component's call
          3. In your browser, observe that you get a form , provide the details and observe the success message
      • Code
            useState:
    ---------
    const initObj={state variables}
    const[newObj,handler] = useState(initObj)
    <!--   updated State - newObj
      name of the state change handler - handler -->
    useEffect
    ---------
    useEffect(effect,[])- mounting only
    useEffect(effect)- mounting + any/all of state update
    useEffect(effect,[newEmpobj])- mounting + updates on emp obj
    useEffect(effect,[newAssetobj])- mounting + updates on asset obj
Share: