Scribd
Upload
95 views13 pages

Weekly Diary - Final - Sumagoinfotech

Uploaded by

karbharigughe123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
95 views13 pages

Weekly Diary - Final - Sumagoinfotech

Uploaded by

karbharigughe123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Weekly Diary

For
Industrial Training
at

Name of Industry: Sumago Infotech Pvt.Ltd

From: 03/06/2024 To: 13/07/2024

Name of Supervisor: MRS. Nilam Bodke

Designation of Supervisor: L&D Head

Name of the Student: Om Sharad Patil Enrollment No: 23611470241

Branch of Engineering: Computer Engineering

Name of Polytechnic: MET’s Institute of Technology, Polytechnic

(Special instructions to students:


1. Write down the daily activity on the same day
2. Make note of the important actual activity/activities only.
3. Summarize at the week end.
4. Add extra sheets if needed for daily or weekly activity report.)
 Week 1: From:03/06/2024 To:08/06/2024

Expected Work:
I. Study of organization chart of industry/plant with responsibilities of different posts.
II. General study of industry, its location, its history and its history and its product
range, its size, number of employees, its turnover etc.

Day Activities carried out


 Introduction of Sumago Infotech and Team Structure.
1  Identify Responsibilities of different People working
 Welcome Function.
 Introduction to Full Stack Development: We learned that full stack
development involves working on both the front-end (client side) and back-
end (server side) of web applications, allowing developers to handle all
aspects of a project.
 Need and Scope: The demand for full stack developers is high due to their
2
versatility in managing all parts of a web application. This role offers broader
career opportunities and a deeper understanding of how web technologies
integrate.
 Visual Studio Code Installation: We were guided through the process of
downloading and installing Visual Studio Code. Additionally, we explored
various useful extensions such as Live Server, Prettier, and Snippets, which
enhance development efficiency.

 HTML Forms: We explored the use of forms in HTML for collecting user
input, a fundamental aspect of web development. Key form elements covered
included:
o <label>: Defines a label for input fields.
3 o <input>: Creates various types of input fields.
o <select>: Generates drop-down lists.
o <option>: Specifies options for drop-down lists.
 Introduction to CSS: We were introduced to CSS, which is used to style
HTML documents. CSS allows developers to control the visual presentation of
web pages, enhancing their design and layout.

 Introduction to Navigation Bars: We discussed the navigation bar, commonly


referred to as the "navbar." It is a key user interface element on a webpage that
provides links to other sections of the website, typically integrated into the
main site template and visible across most or all pages.
 Using Navbar in HTML: The <navbar> element in HTML is used to define a
4 navigation section within a webpage. This section helps organize and manage
links to various parts of the site, enhancing user navigation. The basic HTML
structure for a webpage with a navigation bar includes:
o <title>: Sets the title of the webpage.
o <head>: Contains meta-information and links to external resources.
o <body>: Encloses the content of the webpage.
o <nav>: Specifies the navigation area within the page.

 Today's session introduced Bootstrap, a free and open-source CSS framework


designed for responsive, mobile-first web development. Bootstrap includes
HTML, CSS, and JavaScript-based design templates for various web
components like typography, forms, buttons, and navigation.
 Using Bootstrap involves:
5  Copying Bootstrap's CDN link and pasting it into the <head> section of your
HTML file in Visual Studio Code.
 Utilizing Bootstrap classes to create and style elements such as navigation bars
and cards.
 Adjusting properties like length, height, and width in your code.
 Designing and implementing the layout in Visual Studio Code.
 Testing and viewing the design in Chrome to ensure it aligns with Bootstrap's
responsive features.
 Team building activies.
 Fun games.
6  In saturday there's there are some no lecturres of as games and fun activites.
 We played the music some musical gamer like guess background.
 The We played did some changes one vitual game but we in those saturday,

Weekly summarization of the above activities:

Signature of the student: ………… Signature of Industrial Supervisor:


………..
 Week 2: From:10/06/2024 To:15/06/2024

Expected Work: Study of layout and specifications of major machines, equipment and raw
materials/components used.

List the Sections of Industry visited and list the major machines, equipment
and raw materials etc. studied:

Day Activities carried out


 We learn about react.js and how to installed and what is React.js and how to
use read.js in VS code.
 Then we did installed of React.js In Visual studio.
1
 We create the new file of React.js.
 Then We learned about my-app installation.
 Then we learned about how to give command to install..
 We learned about React JS, an open-source front-end technology that
combines JavaScript and HTML.
 We installed Node.js, guided by our instructor, and verified the installation
2 using node -v. We created a project folder in Visual Studio Code and accessed
the terminal.
 The day concluded with the setup of the necessary tools and files to start
working on React JS projects.
 We learned how to add a header and navbar to a JavaScript project using
Bootstrap. We started by including Bootstrap CDN links in the index.html file.
Next,
3  We created Header.js and Navbar.js files to define and style the header and
navbar, respectively, using Bootstrap code. We then imported these
components into App.js and used them with <Header /> and <Navbar /> tags.
 Finally, we used a React extension to generate component code quickly.

 Grid System: Utilized Bootstrap’s grid system by adding a container with class
Name, row, and col classes to organize content.
 Content Addition: Included headings with <h4> tags and additional
information using paragraph tags.
 Font Awesome Integration: Added Font Awesome CDN link to index.html to
4 include social media icons.
 Icon Implementation: Copied icon links from Font Awesome and inserted
them with corresponding paragraph tags in the footer.
 Styling Icons: Applied custom styling to icons using a class (e.g., .abc) in
app.css to change their color.
 Final Touches: Assembled a webpage featuring product details, icons, email,
and phone numbers.

 we explored React props and their use in component customization:


 Introduction to Props: Props, short for properties, are arguments passed into
React components via HTML attributes to customize and configure them.
 Creating Title Component: We created a Title.js file to define a title for the
webpage. The component used a <div> with a class name and an <h1> tag to
5
style and border the title "Welcome to Sumago Infotech."
 Card Component: We built a CardUI.js file using Bootstrap 5.3 to design card
components, including images and text.
 Final Touches: After significant effort, we successfully created and styled
cards using props, demonstrating how to pass and utilize properties in React
components.

 On Saturday, we attended a session by Mr. Rajas Nikumbh, known as Digital


Rajas, who has 100k+ Instagram followers.
 He introduced AI and discussed its applications, covering 15 useful AI tools
for tasks such as presentations, image editing, and problem-solving. Tools
6
highlighted included Gamma AI, Humata AI, Merlin AI, Gemini, ChatGPT,
and Adobe Stack.
 He also provided a list of these tools with links and shared tips on contacting
influential personalities. The session was engaging and informative, expanding
our knowledge of AI tools.

Weekly summarization of the above activities:

Signature of the student: ………… Signature of Industrial Supervisor:...........


 Week 3: From:17/06/2024 To:22/06/2024

Expected Work: Study of production processes along with production planning and control
procedures.

List the Sections of Industry visited and list the major production processes,
and products for planning and control procedures etc. studied:

Day Activities carried out


 We learned about arrays in React JS, focusing on the map() method. An array
is a collection of data types, indexed from 0 to size-1, and stored in contiguous
memory locations.
1  The map() method allows you to apply a function to each item in an array,
returning a new array.
 The session was guided by the instructor and another coordinator.

 We learned about arrays of objects in JavaScript, where each element is an


object. We used the map() function to dynamically render data within a <div>,
such as displaying student names.
2  We created a table to organize student information, styled it in the #App.css
file, and integrated it into App.js using import statements.
 This process allowed us to transform array elements into React components,
resulting in a well-organized table with borders.
 We explored Reacts Virtual DOM, which enhances performance and efficient
rendering. We created two files: one for routing using Browser Router and
<Route>, and another for importing images with statements like import im1
from '/download/11.jpeg'.
3
 We used the Link tag for navigation instead of the anchor tag, such as <Link
to='/About'>About Us</Link>, to display the "About Us" page. This setup
improved navigation and integrated images effectively.

 We delved into React Hooks, focusing on the useState() hook for state
management. The syntax is const [variable, setVariable] = useState
(initialValue);, such as const [count, setCount] = useState(5);.
 We learned that hooks do not work with React class components. We
practiced importing images using similar syntax, replacing count with picture,
and setting image sources with specific specifications. We added buttons to
4 switch between images, incorporating increment and decrement functionality
with useState(). Conditional statements were used to handle multiple images.
Overall, we applied useState() for managing state changes, including image
switching and counter updates.

 We explored the useEffect hook for fetching dynamic data in React. We


started by installing the axios dependency using npm i axios in the terminal,
which is used to connect the backend with the frontend.
 We then searched for APIs on the JSON Placeholder website and used
5 axios.get to fetch data, handling responses with .then and errors with .catch,
similar to try-catch blocks in OOP.
 We utilized useState to store user data retrieved from the API and displayed it
using the map function. Overall, the session focused on integrating and
handling dynamic data with useEffect and axios.
 We attended an expert talk by Dipti Pawar on "Dreams to Reality: Expert
Career Planning." She shared valuable strategies and tips on achieving career
goals, making it an insightful session that provided guidance on our
professional futures.
6  The session lasted for an hour and was highly informative. Following the talk,
we participated in a fun game where pairs of participants played charades-like
rounds. One person had to provide clues for a word written on a paper that
they couldn't see, while their partner guessed the word within a 20-second time
limit.
 It was a delightful and engaging Saturday, filled with both learning and
entertainment.

Weekly summarization of the above activities:

Signature of the student: …………Signature of Industrial Supervisor:………...


 Week 4: From:24/06/2024 To:29/06/2024

Expected Work: Study testing and quality assurance processes.

List the Sections of Industry visited and list the major testing and quality
assurance processes studied there.

Day Activities carried out


 useState: The most commonly used React hook for managing state in
functional components.
 useEffect: Explored previously to handle side effects and dynamic data
fetching.
 onChange Function: An event handler that triggers whenever there is a change
in an input field, allowing for real-time updates.
 onClick Function: Used with button tags to handle click events, such as
1 submitting data.
 Example: const handleChange = (e) => setText(e.target.value); for input
fields.
 Data Insertion: Implemented a button to insert data multiple times into the
component state.
 Completion: Finished exploring essential React hooks and their usage in
handling component state and events.
 MongoDB Introduction: A non-relational document database supporting
JSON-like storage.
 Installation: The process was lengthy; theoretical aspects were covered during
this time.
2  Working with MongoDB: Uses collections to represent objects or documents;
queries are used to retrieve results.
 Query Structure: Requires proper syntax to avoid errors.
 Naming Convention: Always use an 's' at the end of collection names. The
installation was successfully completed.
 Revision: Started the day by revising HTML, React, and CSS.
 Backend Development: Began working with backend technologies by
installing Express and Mongoose.
 Dependencies: Express is a Node.js framework; Mongoose acts as a bridge
between Express and MongoDB.
3  Setup: Used nodemon app.js to start the server, created an api folder with an
app.js file linked to MongoDB, and set the port to 8000.
 Tools: Installed Postman for API testing and completed setup of external
dependencies.
 Initial Setup: Connected Visual Studio Code with MongoDB and configured it
to run on localhost:8000.
 MongoDB File Creation: Created a student collection with fields for name,
city, and phone number using required queries.
 Code Integration: Used app.get in Visual Studio Code with async and (req,
4 res) to fetch data.
 Data Retrieval: Employed find to retrieve all data from the MongoDB
collection.
 Testing: Tested the setup by accessing http://localhost:8000 in Postman to
verify the connection and data retrieval.

 Node.js Setup: Installed Node.js and used npm start to initiate the server.
 Fetch API: Utilized the fetch method to send requests to a Web API URL.
 POST Request: Configured the fetch request to use POST, including an object
5 in the Body property.
 Headers: Specified content type in request headers to indicate data media type.
 API Creation: Learned how to create an API to post data into MongoDB.

 Expert Talk: Hosted by Digital Rajas with 100k Instagram followers, starting
at 11:30 AM.
 AI Overview: Explained what AI is and engaged students with interactive
questions.
6
 AI Tools: Detailed over 20 AI tools, including Gamma.app for presentations
and Humata.app for summarizing texts.
 Specialized Uses: Gemini for YouTube video summaries and HUXLI.AI for
essay writing.
 Comprehensive Learning: Provided extensive insights into various AI tools
and their applications.

Weekly summarization of the above activities:

Signature of the student: …………Signature of Industrial Supervisor:………...


 Week 5: From:01/07/2024 To:06/07/2023

Expected Work: Study of preventive maintenance and breakdown maintenance & safety
practice adopted in industry.

List the Sections of Industry visited and list


i. The major machines/plants whose preventive and breakdown maintenance procedures
studied,
ii. The major safety practices adopted in the industry, and
iii. Organization chart of the industry with responsibilities of different departments/posts.

Day Activities carried out


 We learn about the backend .
 Delete Operation in Postman: Used to remove a specific resource via a REST
API request.
 Steps to Perform Delete Request:
 Click on "New" in the Postman application.
1  Save the request by entering a name in the pop-up (e.g., "Test 1").
 The request name will appear on the request tab.
 Click on the "Send" button to execute the delete request.
 Result: The specified resource is removed, and all related data is deleted.

 SEBI Awareness Session: Hosted by the Securities and Exchange Board of


India (SEBI).
 Focus: Educated about the stock market and how to recognize misleading
information.
 Investment Advice: Recommended starting investments from ages 18-19 for
2 future savings, such as for education.
 Usefulness: Provided valuable insights for safe investment practices and
financial planning.
 Overall Impact: The session was highly beneficial for understanding stock
market investments and making informed decisions.

 Overview: Focused on CRUD operations using Postman API.


 GET Command: Used to retrieve information from the server.
 POST Command: Sends new data to the server.
3  DELETE Command: Removes specified resources from the server.
 UPDATE Command: Updates existing data on the server, refining CRUD
operations in ReactJS, MongoDB, and Postman.

 Focused on update and delete operations using Visual Studio, MongoDB, and
Postman.
 Operations: Utilized useEffect and axios for asynchronous HTTP requests in
CRUD operations.
 Deleting Records: Implemented
4 axios.delete('http://localhost:8000/deleteRecord/deleteId') to remove specific
records.
 Confirmation: Used console.log("Deleted successfully") to confirm successful
deletions.

 Project Work: Continued working on project completion and resolved errors


with mentor assistance.
 Focused on project work with guidance and error resolution from the mentor.
 Project Development: Started creating a registration page in React JS for an
industrial visit, including fields like name, password, confirm password, and
college selection.
 Error Resolution: Addressed issues such as missing semi-colons and image
5 imports.
 Design Fixes: Adjusted styling issues including background color and form
layout.
 Mentor Support: Received valuable feedback and solutions for project-related
errors.

 The project work is going on, so today we learn and find the topic for
industrial projects.
 Then we decided the coffee café website for your project.
6

Weekly summarization of the above activities:

Signature of the student: …………Signature of Industrial Supervisor:


…………
 Week 6: From:08/07/2024 To:13/07/2024

Expected Work: Report writing

List the Sections of Industry visited and list the major manual/brochures such as operational
manual, safety manual, maintenance manual, quality manuals referred/studied there for
preparation of reports.

Day Activities carried out


 BOOTSTRAP Designing Framework
 Introduction to Bootstrap
 How to Download and Use Bootstrap
 How to Include Custom CSS in Bootstrap
 Container and Container fluid Layout in Bootstrap
 Grid System in Bootstrap
 Grid System Break Points in Bootstrap
1
 Example Grid System Break Points in Bootstrap
 Auto Width Column in Bootstrap
 Column Break in Bootstrap
 How to set Column Order in Bootstrap
 Offset Column in Bootstrap
 Nesting Columns or Rows in Bootstrap
 Media Object in Bootstrap
 BOOTSTRAP Designing Framework
 Typography in Bootstrap
 Images in Bootstrap
 Table in Bootstrap Figures in Bootstrap
 Colors in Bootstrap
 Borders in Bootstrap
 Text in Bootstrap
 Spacing - Margin and Padding in Bootstrap
 Vertical Alignment in Bootstrap
2
 Visibility in Bootstrap
 Sizing in Bootstrap
 Position in Bootstrap
 Shadow in Bootstrap
 Display in Bootstrap
 Embed in Bootstrap
 Float in Bootstrap
 Alerts in Bootstrap
 Breadcrumb in Bootstrap
 BOOTSTRAP Designing Framework
 Buttons in Bootstrap
3  Button Group in Bootstrap
 Checkbox Button in Bootstrap
 Radio Button in JavaScript
 Button Toolbar in Bootstrap
 Cards in Bootstrap
 Card Header and Footer in Bootstrap
 Card Image Overlays in Bootstrap
 Card Styles in Bootstrap
 Card Group in Bootstrap
 Card Decks in Bootstrap
 Card Columns in Bootstrap
 BOOTSTRAP Designing Framework
 Dropdown in Bootstrap
 Split Button in Bootstrap
 Dropdown Directions in Bootstrap
 Collapse in Bootstrap
4  Accordion in Bootstrap
 Badges in Bootstrap
 Base Nav in Bootstrap
 Tabs in Bootstrap
 Tabs with Dropdown in Bootstrap
 Tab with Their Contents in Bootstrap
 BOOTSTRAP Designing Framework
 Vertical Tab with Their Contents in Bootstrap
 Navbar in Bootstrap
 Mobile Friendly Navbar in Bootstrap
5  Navbar Placement Fixed Top Fixed Bottom and Sticky Top in Bootstrap
 Dropdown Menu Navbar in Bootstrap
 Navbar Search Box in Bootstrap
 Image Slider or Carousel in Bootstrap
 Jumbotron in Bootstrap
 Pagination in Bootstrap
 Progress in Bootstrap
 Tooltips in Bootstrap
 WordPress CMS Framework
 introduction and installation
 Dashboard and Complete Overview
 How to make website with WordPress start to finish
 All about plugins in WordPress
6  All about themes in WordPress
 how to Change WordPress title to your own logo in WordPress
 All about WordPress security
 All about Cracked WordPress theme
 Top 10 free themes for 2020
 Step by Step installing Xampp server properly

Weekly summarization of the above activities:

Signature of the student: …………Signature of Industrial Supervisor:


…………

You might also like