Terminal Exam - Web Engg - SP23 - Solution (1) PDF

National University of Computer and Emerging Sciences FAST School of Computing Spring-2023 Islamabad Campus SE-3003: Web Engineering Serial No: Final Exam Wednes...

National University of Computer and Emerging Sciences FAST School of Computing Spring-2023 Islamabad Campus SE-3003: Web Engineering Serial No: Final Exam Wednesday, 24th May, 2023 Total Time: 3 Hour Course Instructors Total Marks: 100 Zaheer Sani, Irfan Ullah ________________ Signature of Invigilator ____________________ ____________ _____________ __________________ Student Name Roll No. Course Section Student Signature DO NOT OPEN THE QUESTION BOOK OR START UNTIL INSTRUCTED. Instructions: 1. Attempt on question paper. Attempt all of them. Read the question carefully, understand the question, and then attempt it. 2. Use Rough Work space to finalize the answer and then write in the given space. Cutting and overwriting will not be evaluated, so carefully plan the answers. 3. Write optimized and minimal code to achieve the desired functionality. Writing poor code will not get full marks. It is not all about ‘it works’, it should work in the best optimal way. 4. After asked to commence the exam, please verify that you have Eighteen (18) different printed pages including this title page. There are a total of 3 questions. 5. Use permanent ink pens only. Any part done using soft pencil will not be marked and cannot be claimed for rechecking. Q-1 Q-2 Q-3 Total Marks Obtained Total Marks 20 20 60 100  Question 1 [20 x 1 = 20 Marks] Fill the table for the correct option in uppercase letters ONLY. Overwriting and cutting will not give you any score. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 B or D C D A D A A A D C B B C B A B A B C C 1. In React, which of the following is the correct way to update the state based on the previous state? a) this.state = state + 1; b) this.setState({ count: this.state.count + 1 }); c) this.setState(prevState => ({ count: prevState.count + 1 })); d) this.setState({ count: this.state.count++ }); 2. How can you conditionally render content in a React functional component? a) Using the "if-else" statement. b) Using the "switch" statement. c) Using the "render" method. d) Using JavaScript expressions within JSX. 3. Which block of code or a hook is used to fetch data from an API in a React functional component? a) Using the "fetch" method inside the component's render function. b) Using the "componentDidMount" lifecycle method. c) Using the "useEffect" hook. d) Using the "fetch" method at the root of a component. 4. How can you pass data from a child component to its parent component in React? a) By using the "this.props" object. b) By using the "setState" method. c) By using the "useContext" hook. d) By passing a callback function as a prop. 5. What is the purpose of the "useReducer" hook in React? a) To manage local state in functional components. b) To handle asynchronous operations in functional components. c) To synchronize state between multiple components. d) To control the rendering behavior of functional components. 6. What is the role of the useContext hook in React? a) To subscribe to changes in context values. b) To create a new context for sharing state. c) To consume context values within functional components. d) To provide context values to child components. 7. When should you use the useReducer hook instead of the useState hook in React? a) When managing complex state logic or multiple related values. b) When working with form inputs. c) When handling asynchronous operations. d) When using context in functional components Page 2 of 27 8. How can you trigger a re-render of a React component? a) By changing the state of a component. b) By modifying the component's props. c) By using the render method. d) React components automatically re-render when their state or props change 9. How can you handle form inputs in React? a) By using the onChange event and updating the component's state. b) By using the onSubmit event and updating the component's state. c) By directly modifying the DOM using JavaScript. d) By using the useState hook to manage the form state. 10. Which React hook is commonly used to handle complex state logic in functional components? a) useState b) useEffect c) useContext d) useReducer 11. What is the purpose of the useEffect hook in ReactJS? a) To handle user input in forms. b) To update the component's state. c) To perform side effects like data fetching or subscriptions. d) To define event listeners for keyboard events. 12. What is the React Context API used for? a) Managing state in functional components b) Sharing data between components without passing props explicitly c) Handling asynchronous operations in React applications d) Optimizing the performance of React applications 13. How is data provided to components using the React Context API? a) By passing data as props from parent to child components b) By defining a context object and using a Provider component to wrap the desired components c) By using Redux for state management d) By using the useState hook to create a global state object 14. What is the main benefit of using Redux in a React application? a) It simplifies component rendering and lifecycle management b) It improves the performance of React components c) It provides a centralized and predictable state management solution d) It enables server-side rendering of React components 15. What is the purpose of the "dispatch" function in Redux? a) It triggers a re-render of the connected React component b) It updates the Redux store by applying the specified action c) It performs an API request to fetch data for the Redux store d) It connects React components to the Redux store 16. What is the primary routing component used in React Routing v6? a) BrowserRouter b) Switch c) Router d) Route Page 3 of 27 17. Which hook is used to navigate programmatically in React Routing v6? a) useHistory b) useNavigate c) useLocation d) useParams 18. How do you define a route with parameters in React Routing v6? a) b) c) d) 19. How do you define a nested route in React Routing v6? a) By using the component. b) By nesting components inside the parent route. c) By using the children prop on the parent route. d) By defining a separate route configuration for the nested route. 20. It is a recommended approach to store JWT Secrets an env file. _______ package is used to read env file? a) jsontoken b) jwt c) dotenv d) none of the above Page 4 of 27  Question 2 [5 x 4 = 20 Marks] Consider a Clinic System application that manages the data of doctors using ExpressJS and APIs. The doctor entity has the following attributes: Name, Designation, and Specialization. You are tasked with implementing the API routes for performing CRUD operations on the doctors' data. While writing code, any data source can be selected but specify which data source is used in the implementation. Please provide the sample API calls for the routes that need to be implemented in ExpressJS to achieve the following functionalities: 1) Retrieve all doctors' information: Endpoint: GET /api/doctors Sample Request: GET /api/doctors Sample Response: [ { "name": "Dr. John Smith", "designation": "Senior Consultant", "specialization": "Cardiology" }, { "name": "Dr. Sarah Johnson", "designation": "Pediatrician", "specialization": "Pediatrics" },... ] const express = require('express'); const app = express(); app.use(express.json()); // Sample data for doctors let doctors = [ { id: 1, name: "Dr. John Smith", designation: "Senior Consultant", specialization: "Cardiology" }, Page 5 of 27  { id: 2, name: "Dr. Sarah Johnson", designation: "Pediatrician", specialization: "Pediatrics" } ]; // Retrieve all doctors' information app.get('/api/doctors', (req, res) => { res.json(doctors); }); Page 6 of 27 2) Retrieve a specific doctor's information: Endpoint: GET /api/doctors/:id Sample Request: GET /api/doctors/123 Sample Response: { "name": "Dr. John Smith", "designation": "Senior Consultant", "specialization": "Cardiology" } // Retrieve a specific doctor's information app.get('/api/doctors/:id', (req, res) => { const doctorId = parseInt(req.params.id); const doctor = doctors.find(doc => doc.id === doctorId); if (doctor) { res.json(doctor); } else { res.status(404).json({ error: 'Doctor not found' }); } }); 3) Add a new doctor: Endpoint: POST /api/doctors Sample Request: Sample Response: POST /api/doctors { Content-Type: application/json "id": "234", "name": "Dr. Emily Brown", { "designation": "Dermatologist", "name": "Dr. Emily Brown", "specialization": "Dermatology" "designation": "Dermatologist", } "specialization": "Dermatology" } // Add a new doctor app.post('/api/doctors', (req, res) => { const { name, designation, specialization } = req.body; Page 7 of 27  const newDoctor = { id: doctors.length + 1, name, designation, specialization }; doctors.push(newDoctor); res.status(201).json(newDoctor); }); Page 8 of 27 4) Update an existing doctor's information: Endpoint: PUT /api/doctors/:id Sample Request: Sample Response: PUT /api/doctors/123 { Content-Type: application/json "id": "123", "name": "Dr. John Smith", { "designation": "Consultant", "name": "Dr. John Smith", "specialization": "Cardiology" "designation": "Consultant", } "specialization": "Cardiology" } // Update an existing doctor's information app.put('/api/doctors/:id', (req, res) => { const doctorId = parseInt(req.params.id); const { name, designation, specialization } = req.body; const doctor = doctors.find(doc => doc.id === doctorId); if (doctor) { doctor.name = name; doctor.designation = designation; doctor.specialization = specialization; res.json(doctor); } else { res.status(404).json({ error: 'Doctor not found' }); } }); 5) Delete a doctor: Endpoint: DELETE /api/doctors/:id Sample Request: DELETE /api/doctors/123 Sample Response: { "id": "123", "message": "Doctor deleted successfully." } Page 9 of 27 Note: Please provide the sample API calls for the routes mentioned above, considering the appropriate HTTP methods and endpoints. app.delete('/api/doctors/:id', (req, res) => { const doctorId = parseInt(req.params.id); const doctorIndex = doctors.findIndex(doc => doc.id === doctorId); if (doctorIndex !== -1) { doctors.splice(doctorIndex, 1); res.json({ id: doctorId, message: 'Doctor deleted successfully' }); } else { res.status(404).json({ error: 'Doctor not found' }); } }); Page 10 of 27  Question 3 [60 Marks] Answer following questions. 1) Consider following code: export default function App() { const [ready, setReady] = useState(false); console.log('State is Ready!') useEffect(() => { console.log("Component rendered successfully"); }, [ready]); console.log("Returning JSX") return ( setReady(true)}>Click me I'm { ready? 'Ready!' : 'Not Ready!'} ); } a) What will be the output on console when component is rendered first time? (2 Marks) State is Ready! Returning JSX Component rendered successfully b) What will be the output on console when button is clicked for the first time? (2 Marks) State is Ready! Returning JSX Page 11 of 27 c) What will be printed on the web page when the button is clicked for the first time? (2 Mark) Ready! Page 12 of 27 2) What will be printed on the screen? If there is any error, specify that. (2 Marks) export default function App() { const items = [ { id: 1, text: "Item 1" }, { id: 2, text: "Item 2" }, ]; const listItems = items.map((item, index) => {item.text}); return {listItems}; } Output:  Item 1  Item 2 3) Write the missing piece of the code. (2 Marks) function PostList({__posts_}) { return ( Posts { posts.length === 0 ? ( No posts available. ):( { posts.map(post => ( Title: { posts.title} Body: { posts.body } ))} Page 13 of 27  )} ); } export default function App() { const postlist = [{ id: 1, title: 'Title 1', body: 'Body of Post 1' }] return } Page 14 of 27  4) Consider following code which desires to retrieves messages from the API endpoint. It is required to fetch the messages only once when component is rendered. Complete the code to achieve desired functionality. (10 Marks) 1 const ChatWindow = () => { 2 3 const fetchMessages = async () => { 4 try { 5 const response = await fetch('/api/messages'); 6 const data = await response.json(); 7 8 } catch (error) { 9 console.log('Error fetching messages:', error); 10 } 11 }; 12 13 return ( 14 15 {messages.map((message, index) => ( 16 {message.text} 17 ))} 18 19 ); 20 }; Write missing code to complete the functionality of the component. Specify the line number to insert the code. Do not rewrite the complete code again and do not modify anything in existing code. Note: It is an assumption that Insertion of the code will not effect the line numbers specified in the given code. So, if you insert something on line number 5 will not bring rest of the code in next line. Insert Code at Line # 2 const [messages, setMessages] = useState([]) useEffect(() => { fetchMessages(); }, []) Page 15 of 27 Insert Code at Line # 7 setMessages(data); Page 16 of 27 5) Update the code provided in solution of above problem to fetch the messages from the server after one second when component is rendered. (5 Marks) const [messages, setMessages] = useState([]) useEffect(() => { setTimeout(() => { fetchMessages() }, 1000) }, []) 6) Consider following code. a) Complete the given code. (5 Marks) const Parent = (props) => { const [user, setUsers] = useState([]); return ( ) } const ChildA = (props) => { return ( ) } Page 17 of 27 const ChildB = (props) => { return ( ) } const ChildC = (props) => { return ( Username is: {props.user} ) } b) What is the issue with this approach, how it can be avoided? (5 Marks) To receive username in ChildC component, we need to pass username in the chain of components through props. And when the nesting of the components get more complex, it will be become more difficult to pass the props. To avoid this, we can use Context API provided by React JS c) Re-write the code with the react prescribed approach to pass the props to the last component in the tree. (5 Marks) const UserContext = createContext(null); const Parent = () => { const [user, setUsers] = useState([]); return ( ) } const ChildA = () => { Page 18 of 27  return ( ) } const ChildB = () => { return ( ) } const ChildC = () => { const username = useContext(UserContext) return ( Username is: {username} ) } Page 19 of 27 7) Consider a complex multi-level navigation structure in a React application using React Router. The application consists of the following routes: (10 Marks) Home ("/") Products ("/products") Product Details ("/products/:id") Categories ("/categories") Category Details ("/categories/:id") Admin Dashboard ("/admin/dashboard") Admin Products ("/admin/products") Admin Categories ("/admin/categories") Code a react router for the above pages. When coding React Router, group the Admin Routes. Note: Assume that the pages/components already exist, you can assume any name for these pages/components. export default function MyApp() { return ( Page 20 of 27  ); } Page 21 of 27 8) In a social media application, where a logged in user posts are stored in application level state. A post has id, title and description. a) Code a reducer which has an initial state, relevant actions for fetching and storing posts, and exports (reducer and actions). (4 Marks) import { createSlice } from '@reduxjs/toolkit' export const postSlice = createSlice({ name: 'posts', initialState: { posts: [], }, reducers: { fetch_posts: (state) => { fetch(url).then(res => res.json()).then(res => { state.posts = res; }) }, }, }) // Actions export const { fetch_posts } = postSlice.actions export default postSlice.reducer b) create a store and register your reducer (2 Marks) import { configureStore } from '@reduxjs/toolkit' import postreducer from './postReducer.js' export default configureStore({ reducer: { posts: postreducer, }, }) c) Provide the store to application (2 Marks) // index.js (entry point of the application) Page 22 of 27 import store from './app/store' import { Provider } from 'react-redux' const root = ReactDOM.createRoot(document.getElementById('root')) root.render( ) d) Display the state in ProfileComponent (2 Marks) import React, { useEffect } from "react"; import { useSelector, useDispatch } from "react-redux"; import { fetch_posts } from "./postsReducer"; const ProfileComponent = () => { const posts = useSelector((state) => state.posts.posts); const dispatch = useDispatch(); useEffect(() => { // Dispatch an action to fetch posts dispatch(fetch_posts()); }, [posts]); return ( Profile {posts.map((post) => ( {post.title} Page 23 of 27  {post.description} ))} ); }; export default ProfileComponent; Page 24 of 27  Rough Work Page 25 of 27  Rough Work Page 26 of 27  Rough Work Page 27 of 27