PROJECT REPORT ON WEB DESIGN AND DEVELOPMENT

UNDER

TOPIC: ADVANCED E-COMMERCE WEBSITE DESIGN

This Report Presented in Partial Fulfillment of the Requirements for the

INTERNSHIP IN WEB DEVELOPMENT

BY

PALLAB KUMAR BORAH

ROLL NO - CSB19025

7th SEMESTER

B.TECH IN COMPUTER SCIENCE & ENGINEERING

TEZPUR UNIVERSITY, NAPAAM

SONITPUR, ASSAM

1
 ABSTRACT

The main objective of this internship was WEBSITE DESIGN AND DEVELOPMENT.
Several programming languages that are in use to develop a web based application or
software. Some of them are only used for the UI and the frontend of the application; some are
used for the backend design of the software. For example- HTML, CSS, Bootstrap
Framework etc. are some programming languages to develop the frontend of an application.
PHP, Java etc are used at the backend. Nowadays there are also some framework's that use
vastly. Frameworks are basically structured programming by using Model, View, and
Controller. It is also called as MVC. If we develop web based application that is very useful
for us because we can access it from any whereof the world. It is very helpful for our daily
life. That is why I choose subject of my report is "WEBSITE DESIGN AND
DEVELOPMENT". Working in Bluebird Interactive added huge experiences in my
upcoming career. Solving real life problems was another key issue. This report takes us
through all the details of WEBSITE DESIGN AND DEVELOPMENT knowledge and
experience gathered during this internship period.

2
 OBJECTIVES

• Understand basic concept and structure of HTML, CSS, Bootstrap Framework

and JavaScript.
• Knowing practical knowledge about programming
• To get awareness about the various job opportunities.
• To perceive communicational skills and organizational dynamics.
• To get educated about the official habitat.
• Opportunities for technical skill.
• Improve communication skill.
• Knowing all type of official knowledge.

3
 INTRODUCTION

Internship is thought on addition a few encounters from the different a few associations
which will encourage bounty to make a connection between the hypothetical and reasonable
data. It includes profitable ability like usable working environment or pc instrumentation,
taking care of a spread of things in the meantime, sorting out or dissecting learning, spending
plans or rising collaboration, composing, and talking gifts. Usable work environment or pc
instrumentation, composing, and talking gifts. It’s indispensable to get a handle on the best
approach to impart data to outsiders, managers, and companions. While doing an
undergraduate programming computer science and engineering at Daffodil International
University, I considered a few programming courses Last 4 years. Be that as it may, this is
frequently not happy to get a handle on the web developing because of it's an extremely huge
marketplace to encourage a sound data concerning programming which has net application
style and Development. This entry level position report covers the whole temporary job time
that I have finished with progress concerning the coding, style and improvement.

For internship to induce the sensible expertise within the field of technology and Engineering.
It's extraordinarily vital that knowing about hypothetical information and actualize inside the
reasonable field to broaden our gifted ability in building work advertise. The motivation of
this internship actually came from the intention of learning more about the job sectors and the
work environment of IT farms. A desktop base system of creating websites is easy to learn.
Before joining the internship, I knew that I am in a primary stage and beginner level in
learning web development, my first task is to learn and create and be creative. The ©Daffodil
International university 6learning curve of a web development is such interesting and
charming. It is very simple to build a project fully by HTML, CSS, JAVASCRIPT, MYSQL
and PHP when you know what you are doing.

4
 METHODOLOGY
We know that there are many languages and skills needed to build a project; i used all the
languages like JavaScript, HTML, CSS and more.

In this project I have used visual studio code for implementation.

The training that I underwent at 1STOP is show below:

• HTML
• JavaScript
• CSS
• Bootstrap

Delegated Responsibilities:

• UI/UX design: Designing UI/UX for Websites and Mobile applications.

• Web design: Designing websites.

• Frontend development: Developing the frontend of various websites.

• Android app development: Designing and developing Android applications.

Frontend Developer The main job of a frontend developer is to work at the client side
designing web pages and graphics that is s accessible by the user.

Backend Developer The responsibility of a back end developer is to develop the rear end of
a website that interacts with the server. This type of web developer specializes in the
languages like PHP, ruby, ASP.Net, Java, Cold Fusion and Perl.

The job profiles for the web developer includes:

• Frontend web developer.

• Backend web developer.

5
• Developer of web applications

• Analyst for Design and layout Analyst for.

• Senior web analyst.

• Web marketing analyst.

The name of the project is the design and implementation of the Online Shopping E-
Commerce Website. An online store is web-based virtual stores where customers can browse
the catalog and select interesting products. The selected items will be gathered in shopping
cart. The items will be presented as an order when the customer wants to check out from the
site. This time the website will ask for more information for the transaction. The customer
will fill a billing from containing billing address, shipping address, options for shipping and
his or her payment information like credit card number. The customer will receive an e-mail
notification when the order is placed.

Web Pages details

• Home
• Adds
• About Us
• Contact Us
• Login
• Register
• Review

6
 CODE
• HTML CODE

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HOME</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="icon" href="images/OLX-Logo.png" type="icon" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B"
crossorigin="anonymous">
<link rel="manifest" href="manifest.json">
</head>
<body>

<!-- Navigation -->

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">ONLINE BUY & SELL</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<!-- <li class="nav-item active " >
<a class="nav-link" href="#" id="greetUser"></a>
</li> -->
<li class="nav-item active " >
<a class="nav-link"><input class="form-control border-secondary py-2" type="search"
name="search" id="search" placeholder="Search Ads Here" onkeyup="searchFunction()"/></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" class="userProfile" href="User Profile.html" id="userProfile"></a>
</li>
<li class="nav-item ">
<a class="nav-link" class="favourite" style="display: none" href="favourite.html"
id="favourite">Favourites</a>
</li>
<li class="nav-item">
<a class="nav-link" id="postad" href="submitad.html">Post An Ad</a>
</li>
<li class="nav-item" class="inActiveUser" id="inActiveUser">
<a class="nav-link" href="signin.html">Sign In/Register</a>
</li>
<li class="activeUser nav-item" id="activeUser">
<a class="nav-link" href="index.html" onclick="signOut()">Sign Out</a>
</li>
</ul>
</div>
</div>

7
 </nav>

<h1 class="suh text-center text-dark">Recent Ads</h1>

<div class="container">
<div class="form-group">
<label for="category"><b>Select Category</b></label>
<select onchange="selectCategory()" name="category" id="homePageCategorySelection" class="form-
control" id="category">
<option>All Categories</option>
<option>Vehicles</option>
<option>Electronics And Home Appliances</option>
<option>Furnitue,Home And Decoration</option>
<option>Fashion And Beauty</option>
<option>Books Sports And Hobbies</option>
</select>
</div>
</div>

<!-- bootstrap Modal -->

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-

labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="messages-text" class="col-form-label">Messages:</label>
<div class="modal-body" id="messages-text"><p id="modal-list"></p></div>
</div>
<div class="form-group">
<label for="recipient-messege" class="col-form-label">Type Your Message Here</label>
<input type="text" class="form-control" id="recipient-messege">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="sendMessage()">Send Message</button>
</div>
</div>
</div>
</div>

<!-- Ads -->

<div class="container" id="container">
<div class="row" id="row">

</div>
</div>

<!-- Footer -->

<footer class="grid py-5 bg-dark">
<div class="container">
<div class="container">
<address style="color:#f0f5f5;font-family:Times New Roman;Text-Align:center">
Website Owner : ONLINE BUY & SELL^©<br>
Cell No. : 09876544XX<br>
Facebook : <a href="#">Find Us On Facebook</a><br>
Twitter : <a href="#">Find Us On Twitter</a><br>

8
 Github : <a href="#">Find Us On Github</a><br>
</address>
</div>
<!-- /.container -->
</footer>

<!-- main -->

<script src="https://www.gstatic.com/firebasejs/5.2.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyCzPEhkUwgTiJu2pS69ao7YdnHu-0oVn3Q",
authDomain: "olx-pakistan-8800e.firebaseapp.com",
databaseURL: "https://olx-pakistan-8800e.firebaseio.com",
projectId: "olx-pakistan-8800e",
storageBucket: "gs://olx-pakistan-8800e.appspot.com",
messagingSenderId: "441355874801"
};
firebase.initializeApp(config);
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"
integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-
FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="signup.js"></script>
<script src="signin.js"></script>
<script src="submitad.js"></script>
<!-- <script src="User Profile.js"></script> -->
<script src="script.js"></script>

</body>
</html>

CSS CODE
.same{
width: 50%;
margin: 0px auto;

}
.goToSignIn{
width: 50%;
margin: 0px auto;
}
.alreadyAccount{
display: none;

}
.wrongInfo{
display: none;

}
.suh{
margin: 15% auto 2% auto;

9
.but{
margin: 1% auto 1% auto;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
.grid{
margin: 2% 0% 0% 0%;
}
.cardstyling{
margin: 0% 0% 2% 0%;
}
.validate{
max-height: 300px;
max-width: 300px;
overflow: scroll;
}
.activeUser{
display: none;
}
#postad{
display: none;
}
#greetUser{
display: none;
}
#search{

height: 70%;
}
#searchBtn{
display: none;
}
.userProfile{
display: none;
}
.userAds{
display: none;
}
.category{
color: gray;
}
.favourite{
display: none;
}
.text-messages{
color: gray;
}

JS CODE
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('./service-worker.js')
.then(function() { console.log('Service Worker Registered'); });
}

firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// console.log(user);

10
 // User is signed in.

document.getElementById("activeUser").style.display="block";
document.getElementById("inActiveUser").style.display="none";
document.getElementById("postad").style.display="block";
// document.getElementById("greetUser").style.color="yellow";
// document.getElementById("greetUser").innerHTML = `Welcome
${firebase.auth().currentUser.displayName} !`;
document.getElementById("userProfile").innerHTML=firebase.auth().currentUser.displayName;
document.getElementById("favourite").style.display="block";

} else {
// No user is signed in.
}
});

function signOut(){
firebase.auth().signOut().then(function() {
// Sign-out successful.
}).catch(function(error) {
// An error happened.
console.log(error);
});
}

function adCard(data, key){

if(firebase.auth().currentUser === null){

return`
<div class="cardstyling col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<small>By ${data.displayName}</small>
<img class="validate card-img-top" src=${data.url} />
<div class="card-body">
<h3 class="card-title">${data.title}</h3>
<h4 class="category">${data.category}</h4>
<p class="validate card-text">${data.description}</p>
<h5>Rs. ${data.price}</h5>
<button type="button" class="btn btn-primary" onclick="signInFirst()">Chat</button>
<button type="button" class="btn btn-warning" onclick="signInFirst()">Add To Favourites</button>
</div>
</div>
</div>
`
}else{
return`
<div class="cardstyling col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<small>By ${data.displayName}</small>
<img class="validate card-img-top" src=${data.url} />
<div class="card-body">
<h3 class="card-title">${data.title}</h3>
<h4 class="category">${data.category}</h4>
<p class="validate card-text">${data.description}</p>
<h5>Rs. ${data.price}</h5>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"
data-whatever="@getbootstrap" onclick="adChat('${key}',this)">Chat</button>
<button type="button" class="btn btn-warning" onclick="addToFavourites(this)">Add To
Favourites</button>
</div>
</div>
</div>
`}

11
 }

var database = firebase.database();

const adsRef = database.ref("ads");

function fetchAds(){

adsRef.on('child_added', function (data) {

// console.log(data.val());
adCard(data.val(), data.key);
document.getElementById("row").innerHTML += adCard(data.val(), data.key);

});
}

//Calling Fetching Function

fetchAds();

//search function
function searchFunction() {
var search = document.getElementById('search');
var filter = search.value.toUpperCase();
var list =document.getElementsByClassName('card-title');
for(i=0 ;i<list.length ;i++){
// console.log(list[i].innerText);
if(list[i].innerText.toUpperCase().indexOf(filter) > -1){
list[i].parentElement.parentElement.parentElement.style.display="";
}
else{
list[i].parentElement.parentElement.parentElement.style.display="none";
}
}
}

//HomePageCategoySelection

function selectCategory() {
// var categoryOnHomepage = document.getElementById(`homePageCategorySelection`);
// categoryOnHomepage.options[categoryOnHomepage.selectedIndex].value;
var selectCategory = document.getElementById(`homePageCategorySelection`);
selectCategory.options[selectCategory.selectedIndex].value;
var categoryDivs =document.getElementsByClassName(`category`);

for(i=0 ;i<categoryDivs.length ;i++){

// console.log(categoryDivs[i].innerHTML);
if(selectCategory.options[selectCategory.selectedIndex].value === `All Categories`){
categoryDivs[i].parentElement.parentElement.parentElement.style.display="";
}
else if(selectCategory.options[selectCategory.selectedIndex].value ===
`${categoryDivs[i].innerHTML}`){
// console.log(categoryDivs[i].innerHTML)
categoryDivs[i].parentElement.parentElement.parentElement.style.display="";
}
else{
categoryDivs[i].parentElement.parentElement.parentElement.style.display="none";
}
}
}

//Favourites Function
function addToFavourites(button){

12
 var
category=button.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSi
bling.innerHTML;
var
description=button.previousElementSibling.previousElementSibling.previousElementSibling.innerHTML;
var displayName=button.parentElement.parentElement.firstElementChild.innerHTML;
var price=button.previousElementSibling.previousElementSibling.innerHTML;
var
title=button.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibli
ng.previousElementSibling.innerHTML;
var url=button.parentElement.parentElement.firstElementChild.nextElementSibling.src;
// console.log(`category :${category}` + `\n`
// +`displayName :${displayName}` + `\n`
// + `description :${description}` + `\n`
// + `price :${price}` + `\n`
// + `title :${title}` + `\n`
// + `url :${url}` + `\n`
// );
database.ref('favourites/' + firebase.auth().currentUser.uid).push().set({
category : category,
description : description,
displayName : displayName,
price : price,
title : title,
url : url
});
}

function signInFirst(){
window.location.href = "signin.html";
}

//Chat For Ads

$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or
other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})

var adKey ;

function adChat(key, button){

document.getElementById(`modal-list`).innerHTML = "";
// console.log(button);
// console.log(key);
adKey = key;
var title =
button.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.inn
erHTML;
document.getElementById(`exampleModalLabel`).innerHTML = title ;
fetchMessages(key);
}

function sendMessage(){
// console.log(document.getElementById(`recipient-messege`).value)
newMessage = document.getElementById(`recipient-messege`).value;
database.ref('ads/' + adKey +`/messages`).push().set({
senderName : firebase.auth().currentUser.displayName,
message : newMessage,
timeStamp : formatAMPM(time)

13
 });
document.getElementById(`recipient-messege`).value="";
return false;
}

function chatMessages(data, key){

return`
<li><b>${data.senderName} :</b> ${data.message} <small class="text-
messages">${data.timeStamp}</small></li>
`
}

function fetchMessages(key){

var messagesRef = database.ref('ads/' + key +`/messages`);

messagesRef.on('child_added', function (data) {
// console.log(data.val());
chatMessages(data.val(), data.key);
document.getElementById("modal-list").innerHTML += chatMessages(data.val(), data.key);

});
}

//Time Stamp Function

function formatAMPM(date) {
var stringDate = date.toDateString()
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = stringDate + " " + hours + ':' + minutes + ' ' + ampm;
return strTime;
}

var time = new Date();

14
RESULT AND OUTPUT

15
16
 CONCLUSION

As we all know, our country is a developing country and it dreams to be a developed country
soon. Hence the government of India has taken many necessary projects to fulfilling the
concept of digital INDIA. Day by day our job sector is getting more and more competitive.
As a result every other company is searching for experienced candidates. Finally, I can claim
it's internship that helps me gain experience. Thanks to 1 STOP, I gained so much more in-
depth knowledge of technical skills and personal skills This project helped me gather
theoretical and practical knowledge about HTML, CSS, JAVASCRIPT and other
programming language. Beforehand I was confident about designing and developing frontend
of websites. Now I am also confident and competent in backbends. For those students who
are willing to work in web development, there are huge opportunities available. To give them
the scope for online work and development of website, most private and public organizations
employ web designers. With the rapid emergence of the digital industry, web development
professionals ' demand is growing, and in the coming days this has already availed so many
job opportunity for newcomers. My internship company gave me a good scope to learn and
discover my potentials. I am very grateful to them. Now I am able to develop web and mobile
applications. I was fortunate for getting the chance to meet the real life software development
environment.

17