ipl-logo

Web tech[1]-1

.docx
School
British College of Applied Studies, Dehiwela**We aren't endorsed by this school
Course
MANAGEMENT 123
Subject
Information Systems
Date
Dec 27, 2024
Pages
19
Uploaded by CountKnowledgeDonkey50
VISVESVARAYA TECHNOLOGICAL UNIVERSITYJnana Sangama, Belgavi – 590018.Report on“ASSIGNMENT REPORT”Submitted in partial fulfillment of the requirements of the award of degree ofBACHELOR OF ENGINEERINGINCOMPUTER SCIENCE & ENGINEERINGSubmittedBy:Name:Poorna Chandra Tejaswi PUSN NO: 1SJ22CS118Subject: Web Technology Lab (BCSL504)UNDER THE GUIDANCE OFSWETHA TASSISTANT PROFESSORDEPT OF COMPUTER SCIENCE, SJCITSJC INSTITUTE OF TECHNOLOGYDEPARTMENT OF COMPUTER SCIENCE ANDENGINEERING CHICKBALLAPUR-5621012024-2025
Background image
Assignment No:01Construct a Website (multiple Web pages) containing ‘Resume’ and Bio -data by using relevant HTML elements and appropriate styling for presentation with CSS/jQuery/JavaScript. Host the Website on a cloud platform.1.Objective:The project involved the creation of a multi-page website to display a resume and bio-data using relevant HTML elements, styled with CSS, and enhanced with JavaScript and jQuery for interactivity. The website was subsequently hosted on a cloud platform.Scope and Requirements:1. Website Pages:1.Resume Page:Displays personal details, educational qualifications, skills, work experience, and projects.2.Bio-data Page:Contains comprehensive information, including personal background, family details, hobbies, and achievements.2.Design and Styling:1.HTML was used for structure.2.CSS for styling and layout.3.JavaScript/jQuery for interactivity and enhanced user experience.3.Cloud Hosting:The website was hosted on a cloud platform to ensure accessibility.
Background image
2.Implementation:Step 1: Project StructureCreate a folder structure like this:/resume-website|-- index.html|-- resume.html|-- bio-data.html|-- styles.css|-- script.jsStep 2: HTML Pagesindex.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Home</title><link rel="stylesheet" href="styles.css"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="script.js" defer></script></head><body><header><h1>Welcome to My Website</h1><nav><ul><li><a href="index.html">Home</a></li><li><a href="resume.html">Resume</a></li><li><a href="bio-data.html">Bio-data</a></li></ul></nav></header><main><h2>About Me</h2><p>Welcome to my website! Explore my Resume and Bio-data pages for more details about me.</p><button id="learn-more">Learn More</button></main><footer><p>&copy; 2024 My Website</p></footer></body>
Background image
</html>resume.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Resume</title><link rel="stylesheet" href="styles.css"></head><body><header><h1>My Resume</h1><nav><ul><li><a href="index.html">Home</a></li><li><a href="resume.html">Resume</a></li><li><a href="bio-data.html">Bio-data</a></li></ul></nav></header><main><h2>Work Experience</h2><ul><li>Software Engineer - ABC Company (2020–2024)</li><li>Web Developer - XYZ Inc. (2018–2020)</li></ul><h2>Education</h2><ul><li>Bachelor's in Computer Science - University of X (2014–2018)</li></ul></main><footer><p>&copy; 2024 My Website</p></footer></body>
Background image
</html>bio-data.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bio-data</title><link rel="stylesheet" href="styles.css"></head><body><header><h1>My Bio-data</h1><nav><ul><li><a href="index.html">Home</a></li><li><a href="resume.html">Resume</a></li><li><a href="bio-data.html">Bio-data</a></li></ul></nav></header><main><h2>Personal Information</h2><table><tr><td>Name:</td><td>[Your Name]</td></tr><tr><td>Date of Birth:</td><td>[Your DOB]</td></tr><tr><td>Address:</td><td>[Your Address]</td></tr><tr><td>Contact:</td><td>[Your Contact]</td></tr></table></main><footer><p>&copy; 2024 My Website</p></footer></body>
Background image
</html>Step 3: CSS Stylingstyles.cssbody {font-family: Arial, sans-serif;margin: 0;padding: 0;}header {background-color: #007BFF;color: white;padding: 1rem;text-align: center;}nav ul {list-style: none;padding: 0;text-align: center;}nav ul li {display: inline;margin: 0 15px;}nav ul li a {color: white;text-decoration: none;}main {padding: 20px;}footer {background-color: #f1f1f1;text-align: center;padding: 10px;position: fixed;width: 100%;bottom: 0;}button {padding: 10px 15px;background-color: #28a745;color: white;border: none;cursor: pointer;}
Background image
button:hover {background-color: #218838;}Step 4: JavaScript for Interactivityscript.js$(document).ready(function () {$("#learn-more").on("click", function () {alert("Thank you for visiting! Explore my Resume and Bio-data for more information.");});});Step 5: Host on a Cloud Platform1. Create a GitHub Repository:Push your files to a GitHub repository.2. Host on GitHub Pages:Go to your repository settings.Under "Pages," select the branch and folder (e.g., /root).Save, and GitHub will provide a URL for your website.3. Host on Netlify or Vercel (Optional):Go to Netlifyor Vercel.Log in with GitHub.Import your repository, and your site will be live.4. Host on AWS S3 (Optional):Create an S3 bucket, upload your files, and enable static website hosting.Now you have a fully functional and hosted website with Resumeand Bio-datapages!3.Technologies Used:HTML5:For structuring the content.CSS3:For styling and creating responsive designs.JavaScript:For interactivity.
Background image
jQuery:To simplify DOM manipulation and create animations.Cloud Platform:For hosting (e.g., AWS, Azure, or GitHub Pages).4.Results:HOME PAGE
Background image
RESUME PAGEBIO-DATA PAGE5.Challenges and Solutions:
Background image
Challenge:Ensuring responsive design compatibility across devices.oSolution:Used media queries in CSS to create adaptive layouts.Challenge:Integrating animations without affecting performance.oSolution:Optimized animations using jQuery and minimized resource-heavy effects.6.Conclusion:The project successfully met its objectives by developing and deploying a multi-page website with an interactive and responsive design. The cloud-hosted website serves as an effective platform to display resume and bio-data information.
Background image
Assignment No:02Build a Web application with HTML, CSS, JavaScript, jQuery and PHP for onlineapplication/registration form. Form should accept the information and print/displayon a browser with formatting/styling upon submission (Button click) on success.Host the application on a cloud platform.ObjectiveDevelop and deploy a web application that enables users to submit an online application/registration form. The submitted data should be formatted and displayed in the browser upon successful submission. The application will utilize HTML, CSS, JavaScript, jQuery, and PHPfor development and will be hosted on a cloud platform.1. Design and Development of the ApplicationFront-End DesignHTML:The structure of the application will be implemented using HTML. Key components include text input fields, dropdowns, radio buttons, checkboxes, and a submit button.Example fields:1.Name (text input)2.Email (text input)3.Gender (radio buttons)4.Skills (checkboxes)5.Comments (textarea)
Background image
CSS:Styling will be implemented using CSS for a visually appealing user interface. Elements such as colors, fonts, margins, and padding will ensure a user-friendly design. The form will be responsive to different screen sizes.Client-Side FunctionalityJavaScript and jQuery:JavaScript and jQuery will be used to validate the form fields before submission. Example checks include: oEnsuring required fields are not empty.oValidating the format of email addresses.oDisplaying error messages dynamically without refreshing the page.Server-Side FunctionalityPHP:Upon submission, the form data will be processed by a PHP script. The script will: 1.Receive the form data via the POSTmethod.2.Perform server-side validation.3.Display the submitted data in a structured and formatted manner on a new webpage.2. Deployment and HostingCloud Platform HostingThe application will be hosted on a cloud platform such as AWS, Heroku, or Azure.Steps:1.Prepare the application files (HTML, CSS, JavaScript, PHP).2.Use a web server like Apache or Nginx for deployment.3.Upload the files to the cloud platform.4.Configure necessary settings such as domain and database connections (if required).
Background image
3. IMPLEMENTATIONHTML (index.html)<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Registration Form</title><link rel="stylesheet" href="styles.css"></head><body><form id="registrationForm" action="submit.php" method="POST"><label for="name">Name:</label><input type="text" id="name" name="name" required><label for="email">Email:</label><input type="email" id="email" name="email" required><label>Gender:</label><input type="radio" name="gender" value="Male" required> Male<input type="radio" name="gender" value="Female" required> Female<label for="skills">Skills:</label><input type="checkbox" name="skills[]" value="HTML"> HTML<input type="checkbox" name="skills[]" value="CSS"> CSS<input type="checkbox" name="skills[]" value="JavaScript"> JavaScript<label for="comments">Comments:</label><textarea id="comments" name="comments"></textarea><button type="submit">Submit</button></form></body><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="script.js"></script></html>
Background image
CSS (styles.css)body {font-family: Arial, sans-serif;margin: 20px;padding: 0;background-color: #f4f4f4;}form {max-width: 500px;margin: auto;background: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}label {display: block;margin-bottom: 5px;font-weight: bold;}input, textarea, button {width: 100%;margin-bottom: 15px;padding: 10px;border: 1px solid #ccc;border-radius: 4px;}button {background-color: #28a745;color: white;border: none;cursor: pointer;}button:hover {background-color: #218838;}
Background image
PHP (submit.php)<?phpif ($_SERVER["REQUEST_METHOD"] == "POST") {$name = htmlspecialchars($_POST['name']);$email = htmlspecialchars($_POST['email']);$gender = htmlspecialchars($_POST['gender']);$skills = isset($_POST['skills']) ? implode(", ", $_POST['skills']) : 'None';$comments = htmlspecialchars($_POST['comments']);echo "<h1>Submitted Information</h1>";echo "<p><strong>Name:</strong> $name</p>";echo "<p><strong>Email:</strong> $email</p>";echo "<p><strong>Gender:</strong> $gender</p>";echo "<p><strong>Skills:</strong> $skills</p>";echo "<p><strong>Comments:</strong> $comments</p>";}?>JavaScript (script.js)$(document).ready(function () {$('#registrationForm').on('submit', function () {// Additional client-side validation can go herealert('Form submitted successfully!');});});
Background image
Background image
4.Result
Background image
Registration Form Page 5.Challenges and Solutions
Background image
Front-End Design and Responsiveness1.Challenge: Making the form visually appealing and responsive across devices.2.Solution: Use CSS media queries and frameworks like Bootstrap for responsive design.Client-Side Validation1.Challenge: Real-time validation without disrupting user experience.2.Solution: Use JavaScript/jQuery for dynamic validation and provide clear error messages.Server-Side Validation1.Challenge: Preventing malicious inputs and ensuring data integrity.2.Solution: Sanitize inputs with PHP functions and use prepared statements to prevent SQL injection.Data Submission and Display1.Challenge: Properly processing and formatting submitted data.2.Solution: Use htmlspecialchars()to prevent XSS and format output using HTML/CSS.Cloud Hosting1.Challenge: Configuring and deploying the application.2.Solution: Use platforms like AWS or Heroku, ensuring correct server and database configurations.6. ConclusionThis project demonstrates the development and deployment of a dynamic web application using HTML, CSS, JavaScript, jQuery, and PHP. The application collects user input, validates it, and displays it with formatting. Hosting the application on a cloud platform ensures its accessibility and scalability.Student Signature Faculty Signature
Background image