DEPARTMENT OF COMPUTER & SOFTWARE

ENGINEERING
COLLEGE OF E&ME, NUST, RAWALPINDI

EC-360 Software Engineering

Project Report

Submitted To:
Dr. Wasi Haider Butt

Submitted By:

Name Registration No.

Aliza Haider 482337
Haseeb Ahmad Sardar 456879
Ahsan Ali 475525
Abdul Ahad 482864
Soban Muhammad 459672

Degree/Syndicate: CE-45/B
EC-360 Software Engineering Semester Project

Contents

1 Introduction 3

2 About the Client: 128 Technologies 3

2.1 Core Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

3 Project Objective 4
3.1 Key Project Focus Areas . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

4 Requirements Gathering 4
4.1 Functional Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . 4
4.2 Requirement Clarification . . . . . . . . . . . . . . . . . . . . . . . . . . 5
4.3 Non-Functional Requirements . . . . . . . . . . . . . . . . . . . . . . . . 5

5 Technology Stack and Implementation 5

5.1 Platform Selection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
5.2 Theme and Plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
5.3 Technical Infrastructure . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

6 Website Structure and Content 6

6.1 Page Hierarchy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
6.2 Content Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

7 System Architecture 8
7.1 Architecture Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
7.2 Request-Response Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
7.3 Architecture Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

8 Testing and Quality Assurance 9

8.1 Black Box Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
8.1.1 Test Approach . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
8.1.2 Black Box Test Results . . . . . . . . . . . . . . . . . . . . . . . . 10
8.2 White Box Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
8.2.1 Test Approach . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
8.2.2 White Box Test Results . . . . . . . . . . . . . . . . . . . . . . . 10
8.3 Automated Testing Implementation . . . . . . . . . . . . . . . . . . . . . 11
8.3.1 Selenium Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
8.3.2 Cypress Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

9 Challenges and Solutions 12

9.1 Requirement Ambiguity . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
9.2 Content Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
9.3 Responsive Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
9.4 Form Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

10 Lessons Learned 13
10.1 Client Communication . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

1
EC-360 Software Engineering Semester Project

10.2 Requirement Engineering . . . . . . . . . . . . . . . . . . . . . . . . . . 13

10.3 Technology Selection . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
10.4 Testing Importance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
10.5 Iterative Development . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

11 Conclusion 14
11.1 Future Enhancements . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

2
EC-360 Software Engineering Semester Project

1 Introduction

This report documents the comprehensive software engineering process undertaken

for the development of an informational training website for 128 Technologies. The
project emphasizes the practical application of software engineering principles, includ-
ing client communication, requirement gathering, system analysis, design, and testing
methodologies.
The primary objective of this project was to understand and implement industry-standard
software development practices by working with a real client. Throughout the project
lifecycle, we engaged in multiple client meetings, conducted thorough requirement
analysis, designed system architecture, developed the solution, and performed rigor-
ous testing to ensure quality deliverables.
This document presents a detailed account of the entire development process, from
initial client engagement to final deliverables, demonstrating the systematic approach
required in professional software engineering projects.

2 About the Client: 128 Technologies

128 Technologies is a dynamic organization that combines experience and innovation

to create synergy in their working environment. The company specializes in transform-
ing ideas into reality by creating products and reverse-engineering high-tech systems.

2.1 Core Services

128 Technologies is staffed with a pool of professional experienced engineers and ser-
vice personnel trained to handle challenges ranging from simple to complex technical
problems. Their engineering team provides comprehensive solutions across various
domains.
PCB Designing and Manufacturing: The company possesses expertise in multi-
faceted PCB designing with a team of converged and specialized designers capable
of handling intricate circuit board requirements.
AI Enabled App Development and Platforms: 128 Technologies offers impactful AI-
driven solutions and platforms. They maintain a dedicated team for Machine Learning
and Algorithm Development that delivers customized solutions based on specific user
requirements.
The company’s diverse portfolio demonstrates their commitment to technological ex-
cellence and their ability to provide cutting-edge solutions across multiple engineering
disciplines.

3
EC-360 Software Engineering Semester Project

3 Project Objective

The primary goal of this project was to develop an informational landing page for
128 Technologies that effectively showcases their organizational vision, mission, team
structure, and comprehensive training programs. The website serves as a digital plat-
form to inform potential clients and trainees about the company’s offerings and values.

3.1 Key Project Focus Areas

• Client Engagement: Establishing and maintaining professional communication with
the client to understand their business needs and expectations.
• Requirement Gathering: Conducting detailed meetings to collect, analyze, and
document functional and non-functional requirements.
• Software Engineering Practices: Applying systematic methodologies including re-
quirement analysis, system design, development, and quality assurance.
• Stakeholder Communication: Regular progress updates and feedback sessions
to ensure alignment with client expectations.
• Quality Assurance: Implementing comprehensive testing strategies to deliver a
reliable and user-friendly solution.

4 Requirements Gathering

The requirements gathering phase involved multiple client meetings and discussions to
clearly define the scope and specifications of the website. This section documents the
elicited requirements and clarifications obtained during the requirement engineering
process.

4.1 Functional Requirements

The client requested the development of an informational landing page with the follow-
ing structure:
1. Home Page: A welcoming landing page providing an overview of the organization
and easy navigation to other sections.
2. About Us: Section dedicated to presenting the company’s mission statements.
3. Our Team: A page showcasing profiles of team members.
4. Contact Us: A contact form that allows visitors to submit inquiries and messages
directly through the platform.
5. Training Programs: Comprehensive information about available courses divided
into two main categories:
• Corporate Training Programs including:
– Project Management

4
EC-360 Software Engineering Semester Project

– Configuration Management
– Quality Management
– AI Enabled Systems
– Embedded System Design & Development
– System Engineering
– Supply Chain Management
– PCB Design & Development
• Early Childhood Qualification and Training

4.2 Requirement Clarification

To ensure clear understanding and avoid ambiguity, we posed the following clarification
questions to the client:
1. Content Nature Confirmation: "Just to confirm — the website will mainly display
information (vision, team, training details), right? There won’t be any login or form
submissions for users?"
Client Response: The website should be purely informational with optional contact
form capability.
2. Contact Mechanism: "Would you like visitors to contact you through a contact form
or just an email or phone number on the site?"
Client Response: Both options should be available - display contact information and
provide a simple contact form.
3. Content Management: "Will the content (vision, mission, training details) remain
fixed, or should there be an admin dashboard?"
Client Response: Content will remain relatively static; an admin dashboard is not
required at this stage.

4.3 Non-Functional Requirements

• Usability: The website should be user-friendly with intuitive navigation.
• Performance: Fast loading times and smooth user experience.
• Aesthetics: The website should utilize a striking and attractive color scheme as per
client requirements to enhance visual appeal.
• Platform Constraint: The system must be developed using the WordPress Content
Management System (CMS) as specified by the client.

5 Technology Stack and Implementation

Based on the requirements analysis and client preferences, we selected WordPress

as the content management system for developing the website.

5
EC-360 Software Engineering Semester Project

5.1 Platform Selection

WordPress CMS: WordPress was chosen as the development platform due to its:
• User-friendly content management interface
• Extensive theme and plugin ecosystem
• No requirement for custom coding
• Easy maintenance and content updates
• Strong community support

5.2 Theme and Plugins

Theme: Indostic FSE (Full Site Editing)
• Modern, professional design
• Responsive layout
• Customizable blocks
• Suitable for business and training organizations
Active Plugins:
• WPForms Lite: For creating and managing the contact form with email validation
and submission handling.
• WP Reset: For development and testing purposes to reset the site when needed.

5.3 Technical Infrastructure

Web Server: Apache HTTP Server v2.x
Server-side Language: PHP-FPM v8.3.21
Database: MariaDB v10.6.19
Operating System: Linux (x86_64)
Security: HTTPS enabled for encrypted communication

6 Website Structure and Content

The implemented website consists of multiple pages organized to provide clear and
accessible information to visitors.

6.1 Page Hierarchy

1. Home Page
• Landing page with hero section
• Navigation menu
• Brief organizational overview
• Call-to-action elements

6
EC-360 Software Engineering Semester Project

2. About Us Page
• Company background
• Service areas and expertise
• Organizational culture
3. Our Team Page
• Team member profiles
• Staff expertise areas
• Professional backgrounds
4. Corporate Training Pages
• Individual pages for each training course
• Course objectives and enroll option
5. Early Childhood Training Page
• Course description and objectives
• Training modules
6. Contact Page
• An integrated inquiry form

Figure 1: Landing Page interface of website

6.2 Content Storage

All page content is stored in the WordPress database (MariaDB) within the following
primary tables:
• wp_posts: Stores all page content including Home, Vision, Mission, About Us,
Team, Training programs, and Contact page.

7
EC-360 Software Engineering Semester Project

• wp_options: Contains site settings, theme configuration, and plugin settings.

• wp_postmeta: Stores page metadata, custom fields, and additional content at-
tributes.

7 System Architecture

The architectural design of the Training Website follows a standard web application
architecture with distinct layers for presentation, application logic, and data storage.

7.1 Architecture Overview

The system architecture is organized into four primary layers:
1. Client Layer: Comprises external visitors accessing the website through desktop
or mobile browsers using HTTP/HTTPS protocols.
2. Web Server Layer: Apache HTTP Server handles incoming requests and PHP-
FPM processes server-side logic.
3. Application Layer: WordPress serves as the content management system, inte-
grated with the Indostic FSE theme and active plugins (WPForms Lite, WP Reset).
4. Data Layer: MariaDB database stores all website content, configuration, and meta-
data. The file system stores media files, themes, and plugin files.

7.2 Request-Response Flow

When a visitor accesses a page (e.g., Training Page), the following process occurs:
1. Step 1: Visitor sends an HTTP/HTTPS request (e.g., GET /training) through their
browser.
2. Step 2: Apache HTTP Server receives the request and forwards it to PHP-FPM for
processing.
3. Step 3: WordPress Core loads and processes the request, identifying the re-
quested page and loading the appropriate theme template.
4. Step 4: WordPress queries the MariaDB database to retrieve page content from
wp_posts, wp_postmeta, and wp_options tables.
5. Step 5: The theme renders the HTML page with the retrieved content and sends
the response back to the visitor’s browser.

8
EC-360 Software Engineering Semester Project

7.3 Architecture Diagram

Figure 2: System Architecture Diagram showing the four-layer structure

The architecture diagram (Figure 2) illustrates the complete system structure, includ-
ing:
• Client layer with visitor interactions through multiple devices
• Web server infrastructure (Apache and PHP)
• WordPress application layer with theme and plugins
• Data storage layer with database and file system
• Database tables storing website content

8 Testing and Quality Assurance

Comprehensive testing was conducted to ensure the website functions correctly across
different scenarios and meets quality standards. Both Black Box and White Box testing
methodologies were employed.

8.1 Black Box Testing

Black box testing focuses on testing the functionality of the website from a user’s per-
spective without knowledge of internal code structure. We performed functional testing
to verify that all features work as expected.
8.1.1 Test Approach
We used automated testing tools including Selenium and Cypress to perform system-
atic functional testing. The test cases covered navigation, page loading, form function-
ality, and responsive design.

9
EC-360 Software Engineering Semester Project

8.1.2 Black Box Test Results

Figure 3: Black Box Test Case Results

All black box test cases passed successfully, demonstrating that:

• All pages load correctly without errors
• Navigation menus function properly with appropriate dropdowns
• Course pages are accessible and display correct information
• Contact form validates input and processes submissions correctly
• Social media links open in new tabs as expected
• The website is fully responsive across different screen sizes
• Error handling works appropriately for invalid URLs

8.2 White Box Testing

White box testing examines the internal structure and code logic of the website. This
testing methodology focuses on verifying that the underlying code, logic paths, and
system components function correctly.
8.2.1 Test Approach
We conducted white box testing by analyzing WordPress code logic, theme structure,
form validation mechanisms, routing behavior, and caching performance. The tests
verified internal processes that support the visible functionality.
8.2.2 White Box Test Results

Figure 4: White Box Test Case Results

All white box test cases passed successfully, confirming that:

• Navigation menu rendering logic functions correctly with proper dropdown behavior

10
EC-360 Software Engineering Semester Project

• Homepage is correctly set as the static front page in WordPress configuration

• Contact form validation logic properly checks for required fields and email format
• Form submission triggers the correct POST request and email sending mechanism
• URL routing correctly maps permalinks to their corresponding pages
• Theme block structure renders layouts properly
• Media handling includes fallback for missing images
• Caching mechanism improves page load performance on subsequent visits

8.3 Automated Testing Implementation

8.3.1 Selenium Testing
Selenium WebDriver was used for automated browser testing to verify homepage func-
tionality and user interactions.

Figure 5: Selenium automated testing of homepage

The Selenium tests verified:

• Homepage loads successfully in multiple browsers
• All navigation elements are clickable
• Page title and meta information are correct
• Links navigate to the appropriate pages
8.3.2 Cypress Testing
Cypress was utilized for end-to-end testing with focus on form interactions and page
navigation.

11
EC-360 Software Engineering Semester Project

Figure 6: Cypress automated testing results: Contact form testing

Figure 7: Cypress automated testing results: Homepage testing

The Cypress tests confirmed:

• Contact form accepts valid input and rejects invalid input
• Form validation messages display correctly
• Form submission triggers appropriate actions
• Homepage elements load and interact properly
• All interactive components respond to user actions

9 Challenges and Solutions

Throughout the project lifecycle, we encountered several challenges that required

thoughtful solutions.

12
EC-360 Software Engineering Semester Project

9.1 Requirement Ambiguity

Challenge: Initial requirements lacked specificity regarding form functionality and con-
tent management needs.
Solution: We conducted follow-up meetings with the client and asked clarifying ques-
tions to eliminate ambiguity. This iterative communication ensured we understood the
exact scope and expectations.

9.2 Content Organization

Challenge: Organizing multiple training programs in a user-friendly manner while
maintaining clear navigation.
Solution: We implemented a hierarchical menu structure with dropdowns for training
categories, allowing users to easily browse different courses without overwhelming the
navigation.

9.3 Responsive Design

Challenge: Ensuring the website displays correctly across various devices and screen
sizes.
Solution: The Indostic FSE theme provided built-in responsive design capabilities. We
conducted thorough testing on multiple devices to verify proper rendering and made
necessary adjustments to spacing and layout.

9.4 Form Validation

Challenge: Implementing robust form validation to prevent spam and ensure data
quality.
Solution: WPForms Lite plugin provided comprehensive validation options including
required field checks, email format validation, and spam protection mechanisms.

10 Lessons Learned

This project provided valuable insights into real-world software engineering practices
and client management.

10.1 Client Communication

Effective communication is crucial for project success. Regular meetings, clear docu-
mentation, and prompt responses to client queries helped maintain alignment through-
out the development process. Asking clarifying questions early prevented costly mis-
understandings later.

10.2 Requirement Engineering

Thorough requirement gathering and analysis at the project’s outset saves time and re-
sources. Documenting requirements clearly and obtaining client confirmation ensures
all stakeholders have a shared understanding of project goals.

13
EC-360 Software Engineering Semester Project

10.3 Technology Selection

Choosing the right technology stack based on project requirements is essential. Word-
Press was ideal for this informational website because it met all functional require-
ments without requiring custom development, allowing for faster delivery and easier
maintenance.

10.4 Testing Importance

Comprehensive testing uncovers issues before deployment and ensures quality de-
liverables. Both automated and manual testing approaches provide complementary
coverage, catching different types of defects.

10.5 Iterative Development

An iterative approach with regular client feedback loops allows for course correction
and ensures the final product meets expectations. Presenting incremental progress
helped the client visualize the end result and provide timely input.

11 Conclusion

This project successfully delivered a professional, functional, and user-friendly infor-

mational website for 128 Technologies. The website effectively presents the organiza-
tion’s vision, mission, team, and comprehensive training programs to potential clients
and trainees.
Throughout this project, we applied software engineering principles including require-
ment analysis, system design, implementation, and rigorous testing. The experience
provided practical insights into working with real clients, managing requirements, mak-
ing technology decisions, and ensuring quality through systematic testing.
The deliverables include a fully functional WordPress website, comprehensive archi-
tectural documentation, and detailed testing reports demonstrating that all functionality
works as expected.
This project reinforced the importance of client communication, thorough requirement
engineering, appropriate technology selection, and comprehensive testing in deliv-
ering successful software solutions. The skills and knowledge gained through this
hands-on experience will be valuable in future software engineering endeavors.

11.1 Future Enhancements

Potential future enhancements for the website include:
• Integration with course registration system
• Addition of blog section for articles and updates
• Implementation of testimonials and case studies
• Integration with social media feeds
• Analytics dashboard for tracking visitor engagement

14
EC-360 Software Engineering Semester Project

• Multi-language support for international audience

Acknowledgments

We would like to express our gratitude to Dr. Wasi Haider Butt for his mentorship
and for the academic insights provided during our Software Engineering studies and
to 128 Technologies for providing the opportunity to work on a real-world software
engineering project. This practical experience has been invaluable in understanding
the complete software development lifecycle.

15