Announced Date: Khizer Abdul Salam
Teacher Name: Zaheen Fatima
CMS ID: 1798-2021
Course: Internet Programming
Total Marks = 3
Marks Obtained = ____
Assignment 1
Question 1:
Differentiate between CSS and Bootstrap.
CSS (Cascading Style Sheets)
CSS: Style sheet language defining the
Nature
appearance and formatting of HTML
documents in web design.
CSS enables full customization of web page
Customization styling and layout, allowing designers to
create unique styles.
In CSS, developers have granular control over
Control
design elements and properties for individual
webpage elements.
CSS can create responsive web designs but
Responsiveness involves manual coding and testing. It's more
labor-intensive.
Using CSS effectively requires a good
Learning Curve understanding of the language and design
principles.
Bootstrap
Bootstrap: Pre-designed, responsive front-end
framework with HTML, CSS, and JavaScript
components for web development.
Bootstrap provides customizable pre-designed
components and layouts, serving as a design
starting point.
Customization in Bootstrap may not offer the
same level of fine-grained control as coding
CSS from the ground up.
Bootstrap is inherently responsive and
designed to adapt to different screen sizes
and devices.
It's relatively easy to learn and use, making it
accessible for developers and designers with
varying skill levels.
Question 2:
Application – Management of the CS Graduate Course
Application two aims to manage the graduate course of the ADP-CIS department because all the management was
done using paper forms. For instance, to obtain the transcript of a graduate student, it was necessary to search for
all his data in different paper files (the course has about 150 students). The application is divided into three sets of
components: (1) CRUD applications, (2) listings, and (3) general consistency checking. The consistency checks are
various, for instance, students that fail the exams lose their scholarships. The data model should contain
information about students, professors, scholarships, courses, classes, grades, and others.
How do you build a client-side and server-side application for the above Application?
Client-Side Application:
User Interface (UI): Design the user interface for the application, which should include screens for student
information, professor details, course management, grades, and other relevant data. Use web technologies like
HTML, CSS, and JavaScript to create a user-friendly interface.
Front-End Framework: Consider using a front-end framework like React, Angular, or Vue.js to create dynamic and
responsive user interfaces. These frameworks provide tools for managing data and user interactions efficiently.
Client-Server Communication: Implement mechanisms for the client to communicate with the server. This is usually
done through HTTP requests. You can use JavaScript libraries like Axios or the built-in Fetch API to make requests to
the server.
Data Validation: Ensure data entered by users is validated on the client side to minimize errors before sending it to
the server.
Page 1 of 2
Announced Date: Khizer Abdul Salam
Teacher Name: Zaheen Fatima
CMS ID: 1798-2021
Course: Internet Programming
Total Marks = 3
Marks Obtained = ____
Server-Side Application:
Choose Back-End Technology: Select a server-side technology like Node.js with Express, Ruby on Rails, Django, or
ASP.NET.
Design Database: Create a database schema for storing student, professor, scholarship, course, class, and grade
data. Use a DBMS like MySQL, PostgreSQL, or MongoDB.
Develop API: Build RESTful API endpoints for CRUD operations, defining routes and controllers to manage data.
Implement Data Validation: Ensure server-side validation to maintain data integrity and consistency.
Create Consistency Checks: Develop logic for checks like handling scholarship loss due to grades.
Authentication and Authorization: Secure the app with user authentication and authorization mechanisms.
Testing: Perform rigorous testing, including unit, integration, and end-to-end testing.
Deployment: Deploy the app on a web server or cloud platform, making it accessible to the client-side app.
Monitoring and Maintenance: Set up monitoring tools for performance and security, with regular maintenance and
updates.
Question 3:
Why choose a web-based system in the bank for handling customer requests software?
Accessibility: Customers can submit requests from anywhere with an internet connection.
24/7 Availability: Services are available around the clock, improving convenience.
Efficiency: Bank staff can efficiently manage and process requests online.
Reduced Waiting Times: Customers can avoid long lines and hold times.
Data Accuracy: Online forms help minimize errors and ensure accurate customer information.
Security: Robust security features protect customer data and transactions.
Scalability: Systems can handle increasing customer numbers and requests.
Cost Savings: Reduces operational costs and infrastructure needs.
Integration: Can integrate with other banking software for streamlined operations.
Customer Experience: Aligns with modern customer preferences for online interactions.
Question 4:
What is Responsive Web Design?
Responsive Web Design (RWD) is an approach to web design that aims to make web pages render well on a variety
of devices and window or screen sizes. It involves designing and coding a website so that it automatically adjusts and
adapts to the user's device, whether it's a desktop computer, laptop, tablet, or smartphone. Here are the key
principles and components of responsive web design:
Fluid Grid Layout: RWD uses a fluid grid system that allows page elements to be sized in relative units like
percentages, rather than fixed units like pixels. This ensures that elements resize and reflow to fit different screen
sizes.
Media Queries: CSS3 media queries are used to apply different styles to a page based on the characteristics of the
device, such as its screen width, height, or orientation (portrait or landscape). This allows for customized styling for
various devices.
Flexible Images and Media: Images and media should be scalable and flexible, so they adapt to the screen size
without losing quality or breaking the layout. CSS properties like max-width: 100%; are often used to achieve this.
Viewport Meta Tag: The viewport meta tag in HTML helps control the viewport's behavior on mobile devices. It's
important for ensuring that mobile devices display web pages correctly.
Content Prioritization: On smaller screens, not all content may be displayed, or it may be rearranged to prioritize the
most important information. This ensures a good user experience on smaller screens without overwhelming users
with too much content.
Testing and Debugging: RWD requires thorough testing on various devices and screen sizes. Tools and browser
developer features are used to identify and fix issues.
Page 2 of 2