O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

pptindustrial (1).pptx

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
IRREPORT.pptx
IRREPORT.pptx
Carregando em…3
×

Confira estes a seguir

1 de 27 Anúncio

Mais Conteúdo rRelacionado

Mais recentes (20)

Anúncio

pptindustrial (1).pptx

  1. 1. INDUSTRIAL TRAINING REPORT ON “WEB DEVELOPMENT” (JULY 10,2022 - AUGUST 10,2022) Submitted By: Pankhuri Tripathi 190106028 Final Btech. ET
  2. 2. About Youth & Sports Development Federation of India  It is an NGO whose objective is to promote sports all over the country.  It’s aim is to promote all types of sports activities among the Youth in his/her interested areas by organizing tournaments in different parts of India.  It provides such opportunities to each and every interested youth of our country who is neglected by different sports organizations.  It also provides a platform to help the interested youth to develop their skills in the sport of their choice.
  3. 3. Project Work
  4. 4. Purpose of Project  Purpose of this project is that to learn how to manage database, i.e., proper validation of every details, proper authentication and authorization of users which registers themselves on the web application.  To develop a website centered around sports, useful for promoting and providing relevant Information to users.
  5. 5. Weekly overview of Internship Activities  1st Week: Introduction to React js,features of React js introduction to components,routing in react js  2nd Week: Worked on front-end design to Develop Home Page UI, Sign Page UI.  3rd Week: Server-side development to implement two-step verification on signup.  4th Week: Implemented routing between pages and linked them in navbar.
  6. 6. TECH STACKS USED  ReactJS ( A JavaScript library used for developing the frontend of a website)  Styled-Components (for styling the webpages).  API (for fetching the news related to different fields and information related to various sports based on countries they are played in).  VS Code (IDE used for developing the website)
  7. 7. React Js and Its Features ❖ React is a declarative, efficient, and flexible JavaScript library for building user interfaces ❖ Features: 1-It uses one way data binding 2-Virtual DOM Property 3-High Performance ❖ React lets you compose complex UIs from small and isolated pieces of code called “components”. ❖ React js has different components like class components which are class based and functional components.
  8. 8. Components AND React-Router-DOM Components are small pieces of code that are pieced together to create complex UI’s. When creating a React class component the component has to include the extends React.Component statement, this statement creates an inheritance to React.Component, and gives your component access to React. React Router DOM is an npm package that enables you to implement dynamic routing in a web app. It allows you to display pages and allow users to navigate them. It is a fully-featured client and server-side routing library for React.
  9. 9. Front-end design:- 1) HOME PAGE UI ❖ First we created background of home page. ❖ We then used some animations using css. ❖ Then We added card of some functionalities like discuss, blog, podcast, voting, etc, that our website provides with details using card components and some basic css. ❖ We then created Navigation bar of home page in a separate component and did some styling on it. ❖ We provided contact details and social media handles like facebook,instagram to the header and the footer section. ❖ Then we added HomePage component to our App.js.
  10. 10. HomePage
  11. 11. Footer
  12. 12. 2)SignUp Page UI ❖ SignUp Page is created for users to sign up and can keep track of their records. ❖ For Signing Up User has to enter the name and email address then has to enter the strong password. ❖ After filling the details ,user has to click “Join Now” for successfully sign up. ❖ In this,we used form elements like “label”, “input”. ”button”. ❖ Events like “onClick” was associated with “join now” button,so that on clicking it users details can be updated. ❖ Styling of this page was done using separate css file.
  13. 13. Output-Register Page
  14. 14. Login Page
  15. 15. Server side design:- Implement Two-factor authentication using node.js  We need some kind of a mechanism that allows us to verify a user’s identity.  The way to do it is to create a verification code that will be sent for each new user that registers to our website.  JWT(JSON Web Token) is a token format. It is digitally-signed, self-contained, and compact.  It provides a convenient mechanism for transferring data.
  16. 16. Authentication Process  User registers with username, password and email  The server creates a user object in the DB  A JWT token and a verification code is generated and saved in the DB  A Verification URL is send to the email the user registered with containing the JWT token and the verification code. User clicks the verification link in his mail box  Request in sent to the server, JWT is checked in the middleware  If JWT is valid the request gets passed to the verification api endpoint, code is checked, if the verification process is successful the user’s identity is now verified  User logs in and can make requests to our website
  17. 17. Library used  Express JS — For serving requests  jsonwebtoken — For writing and verifying JWT tokens  bcryptjs — For password encryption  cryptoRandomString — Generate random verification codes  dotenv — Using .env files as config for our server  nodemailer and nodemailer-express-handlebars — sending emails
  18. 18. Code : const express = require('express') const router =express.Router() const mongoose= require('mongoose') const User=mongoose.model("User") const bcrypt= require('bcryptjs') const jwt= require('jsonwebtoken') const {JWT_SECRET}= require('../config/keys') const nodemailer = require('nodemailer') const sendgridTransport =require("nodemailer-sendgridtransport") const {SENDGRID_API, EMAIL} =require('../config/keys’) //to set up an SMTP connection,created a transporter object const transporter = nodemailer.createTransport(sendgridTransport({ auth:{ api_key:SENDGRID_API, }}))
  19. 19. 1) Modify the Signup Procedures exports.signup = (req, res) => { const token=jwt.sign({email: req.body.email}, config.secret) const user = new User({ username: req.body.username, email: req.body.email, password: bcrypt.hashSync(req.body.password, 8), confirmationCode: token, verified: false });
  20. 20. user.save((err) => { if (err) { res.status(500).send({ message: err }); return; } res.send({ message: "User was registered successfully! Please check your email", }); nodemailer.sendConfirmationEmail( user.username, user.email, user.confirmationCode ); })
  21. 21. 2) Send Confirmation Mail module.exports.sendConfirmationEmail = (name, email, confirmationCode) => { console.log("Check"); transport.sendMail({ from: user, to: email, subject: "Please confirm your account", html: `<h1>Email Confirmation</h1> <h2>Hello ${name}</h2> <p>Thank you for subscribing. Please confirm your email by clicking on the following link</p> <a href=http://localhost:8081/confirm/${confirmationCode}> Click here</a> </div>`, }).catch(err => console.log(err)); };
  22. 22. 3)Create the Confirmation route exports.verifyUser = (req, res, next) => { User.findOne({ confirmationCode: req.params.confirmationCode, }) .then((user) => { if (!user) { return res.status(404).send({ message: "User Not found." }); } user.status = "Active"; user.save((err) => { if (err) { res.status(500).send({ message: err }); return; } }); }) .catch((e) => console.log("error", e)); };
  23. 23. Routing Implementation Using “React-Router-Dom” ❖ Since the website composed of different pages/components,so there was the need to dynamically fetched these based on URLS rather than to refresh them again and again. ❖ So to make this routing possible,”react-router-dom” has been used. ❖ Here we used react-router-components like ➢ Router -Parent component that includes other components.Everything within this will be part of routing. ➢ Switch-Renders first route that matches the location. ➢ Route-checks the current URL and displays the component associated with that exact path..
  24. 24. ➢ Link-Used to created links to different routes. ❖ ‘Link’ Component was imported from ‘react-router-dom’ in NavBar component. ❖ Then ‘ Link’ used in NavBar to create link between these different routes.
  25. 25. Routing Code
  26. 26. Conclusion ❖ After creating the different components required for website and the routing between them,our website was successfully created. ❖ Over the period of 30 days ,we deeply understood the importance of react components and how react-router-dom works or how dynamic routing is done.  I also learnt how to use React to develop mobile friendly and responsive websites.
  27. 27. THANK YOU…

×