Report Smart
Report Smart
BY
SUBMITTED TO
JANUARY, 2025.
1
DEDICATION
This SIWES/IT Report is dedicated, firstly to the Almighty God for his infinite
wisdom, love, mercy and guidance towards me during my Six months IT
programme.
2
ACKNOLEDGEMENT
I am very glad to make mention of my profound gratitude to God almighty for his
infinite love, provision, grace and care from Him that I have received throughout
my life training session at Oyol Computer Consult, Inc.
Also, it is noteworthy to make mention of the relentless effort of my industry-
based supervisor, Prof. Eke Bartholomew, who has been helpful in every aspect to
seeing to the success of my training and every other person that supported me in
one way or the other.
More so, it is obligatory to be thankful to my institutional supervisor, Prof. J.
Oluchukwu, who in one way or the other saw to the success of my training through
his guidance, advice and supervision during my training.
I will not also forget the profound effort of my H.O.D Dr. Ugochi A. Okengwu for
the role she played and has been playing to seeing to the success of students in
general, during this industrial training, and also to all my amazing lecturers in the
department of Computer science, including all the non-academic Staff that saw to
the success of the training. The last but not least, I am very grateful and must
express my profound appreciations to my lovely parents, for their moral, financial
and spiritual support in this academic journey so far, all I have to say is that the
good Lord will grant you perfect health and long life.
3
ABSTRACT
Frontend web development is the process of designing and building the user
interface and user experience (UI/UX) of a website or web application using
programming languages like HTML, CSS, and JavaScript. It involves creating
responsive, interactive, and visually appealing interfaces that provide a seamless
user experience across various devices and browsers. Key aspects; User Interface
(UI) Design, User Experience (UX) Design, Responsive Web Design, Frontend
Frameworks, Web Performance Optimization. Technologies and Tool;
HTML/CSS, JavaScript, Frontend Frameworks, UI Component Libraries, Version
Control Systems.
4
TABLE OF CONTENT
DEDICATION
ACKNOLEDGEMENT
ABSTRACT
CHAPTER ONE
1.1 Student Industrial Work Experience Scheme
1.2 Challenges of SIWES
1.3 The Roles of Industrial Training Fund
1.4 Aims, Scopes and Objectives of SIWES
1.5 History and Background of Oyol Computer Consult, Inc.
1.6 Other Services
1.7 Organizational Chart of Oyol Computer Consult, Inc.
CHAPTER TWO
2.1 Activities During My Industrial Attachment
2.2 Project Documentation.
CHAPTER THREE
3.1 Challenges Encountered
3.2 Relevance of SIWES Program
CHAPTER FOUR
4.0 Conclusions and Recommendations
4.1 Conclusions
4.2 Recommendations
APPENDIX
REFERENCE
5
CHAPTER ONE
6
Formulation of policies and guidelines on SIWES for distribution to all the SIWES
participating bodies, institutions and companies involved in the scheme.
Supervision of students in Industrial Attachment.
Disburses supervisory and students’ allowances.
Provides insurance cover for students in attachment.
Provides information on companies for the attachment and assists in the industrial
training of students.
Vet and process student’s logbook and ITF form 8.
Regularly organize orientation programme for students prior to their attachment.
Oyol Computer Consult was established in 1999 and has been in the business of
developing both web and standalone applications for different organizations. The
organization has a team of well experienced C#, PHP programmers, ASP. Net and
JAVA developers, MySQL database Enterprise administrator and Web Designers.
We are specifically trained and dedicated to development of Java applications,
Web site Design, Dynamic Website development, Web database–driven
application, E-commerce, shopping Cart Development, Chart room, Forum,
offshore and outsourcing software development in Nigeria. Oyol Computer
Consult laboratory known as OYOLAB focused on low-cost website development,
shopping cart in creating development in OS-Commerce and other electronic
commerce systems that easily integrated into third party web sites.
We are passionate about what we do and our full commitment to all our clients.
We promise our students and clients personal attention and professional business
ethics. It is essential to maintain our clients’ technological base. We teach our
clients’ staffs the following:
How to make changes and develop their systems by themselves.
How long they need to stay in order to update.
8
Where no in-house staff will do maintenance. Oyol Computer Consult will
maintain clients, systems for a reasonable monthly fee. We provide free hosting for
all the first twelve months (year) of hosting.
9
Fig. 1.0 Organizational Charts of OCC, Inc.
10
CHAPTER TWO
Requirement Gathering
Identify the purpose and scope of the expense tracker.
Determine the target audience and their needs.
Define the features and functionalities required, such as adding expenses,
categorizing expenses, viewing expense history, generating reports, etc
Design
Design the user interface(UI) considering usability and user experience (UX)
principles.
Create wireframe or mockups to visualize the layout and flow of the
application.
Decide on the technologies and tools to be used (HTML, CSS, JavaScript for
frontend; backend technologies if required).
Plan the data structure to store expense data efficiently.
11
Development
Set up the project structure and necessary files (HTML, CSS, JavaScript).
Implement the UI design using HTML and CSS.
Write JavaScript code to add interactivity and functionality to the
application.
Implement features such as adding expenses, editing/deleting expenses,
displaying total expenses etc.
If required, integrate with a backend server/database for the data storage and
retrieval.
Testing
Perform unit testing to ensure each component/module functions
correctly.
Conduct integration testing to verify the interaction between different
parts of the application.
Test the application across various devices and browsers to ensure
compatibility and responsiveness.
Perform user acceptance test (UAT) with a sample group of users to
gather feedback and make necessary improvements.
Deployment
Choose a hosting platform/server to deploy the application (e.g; shared
hosting, cloud hosting).
Upload the necessary files to the hosting server.
Configure any server-side components or databases if applicable.
Test the deployed application to ensure it works correctly in the production
environment.
12
Regularly update the application with new features, enhancements or
security patches as needed.
Keep abreast of technological advancement and industry trends to
incorporate relevant updates into the application.
Following these procedures will help in developing a robust and user-
friendly expense tracker application that meets the needs of its users.
Here’s a simple example of an expense tracker program using HTML, CSS,
JavaScript. This program allows users to add ad track their expenses:
HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expense Tracker</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Expense Tracker</h1>
<div id="expensesList">
<!-- Expenses will be dynamically added here -->
</div>
<form id="expenseForm">
<input type="text" id="expenseName" placeholder="Expense Name"
required>
<input type="number" id="expenseAmount" placeholder="Expense
Amount" required>
<button id="addExpenseButton">Add Expense</button>
13
</form>
<div id="totalExpenses"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS(styles.css):
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
width: 80%;
margin: 40px auto;
background-color: #fff;
padding: 20px;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#expensesList {
margin-bottom: 20px;
}
14
#expenseForm {
margin-bottom: 20px;
}
#addExpenseButton {
width: 100%;
height: 40px;
background-color: #4CAF50;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
#addExpenseButton:hover {
background-color: #3e8e41;
}
15
#totalExpenses {
font-weight: bold;
}
JavaScript (script.js):
// script.js
16
}
function updateExpensesList() {
const expensesListHTML = expenses.map((expense, index) => {
return `
<div>
${expense.name} - $${expense.amount.toFixed(2)}
<button class="delete-button"
data-index="${index}">Delete</button>
</div>
`;
}).join('');
expensesList.innerHTML = expensesListHTML;
addDeleteButtonEventListeners();
}
function addDeleteButtonEventListeners() {
const deleteButtons = document.querySelectorAll('.delete-button');
deleteButtons.forEach((button) => {
button.addEventListener('click', (e) => {
const index = parseInt(e.target.getAttribute('data-index'));
deleteExpense(index);
});
});
}
function deleteExpense(index) {
17
expenses.splice(index, 1);
updateExpensesList();
updateTotalExpenses();
}
function updateTotalExpenses() {
const totalExpenses = expenses.reduce((acc, expense) => acc + expense.amount, 0);
totalExpensesElement.textContent = `Total Expenses: $${totalExpenses.toFixed(2)}`;
}
18
CHAPTER THREE
There were a lot challenges encountered during the training. First of all, one of the
challenges was difficulty in getting a placement, relative to what I wanted to do
which is Web Development. And the amount I was told to pay in order t start the
training was a lot. Another challenge I encountered was the payment of transport
fares, and feeding because during this period I wasn’t at home, and the stipend was
no longer regular as usual. More so, other challenges which I faced were irregular
or poor supply in my IT place, poor internet access.
From what I have learnt, I know for sure how relevant the SIWES Program is, and
the application of my study here at the University of Port Harcourt being Computer
Science. The SIWES program has really broadened my scope of reasoning due to
the training I have gotten so far. This Scheme has also helped in preparing me as a
student to fit well into the industrial system after graduation. The program also
helped in making me understand the relationship between my course of study and
how computing has and can still ease life, last but not least, the SIWES program
has really helped me to apply my theoretical knowledge in real work situations like
computing.
19
CHAPTER FOUR
4.1 CONCLUSION
4.2 RECOMMENDATIONS
I would recommend that, school management, and the federal government should
build a well-equipped information and Communication Technology where students
will go and acquire various computing skills, because in this our contemporary
society, Technology is rapidly advancing every day, and virtually all disciplines in
our tertiary institutions have one way or the other in which they ought to be
automated, and the importance of ICT in our society cannot be underestimated, and
the world they say is a “global village”, so, every university student ought t have
one or more computing skills.
20
APPENDIX
22