Report - hekllo PDF

Preview

Summary

hekllo...

Description

PROJECT REPORT Web Engineering Lab (SEN-310)

BS(IT)-5A Group Members Name 1. Abdullah Mansoor 2. Abdullah Khan Jadoon 3. Khubabullah Sherwani

Enrollment

02-235182-044 02-235182-025 02-235182-013 Submitted to: ENGR.AMBREEN AKRAM

(ONLINE BIRTHDAY MANAGEMENT) BAHRIA UNIVERSITY KARACHI CAMPUS Department of Computer Science

Module wise Work/Task Distribution Name 1. Abdullah Jadoon 2. Abdullah Mansoor 3. Khubabullah 4.

Enrollment

Task

02-235182-025 02-235182-044 02-235182-013

html/css/JS html/css html/css/JS/bootstrap

ABSTRACT The Online Birthday Management is a web-based application intended for online retailers. The main objective of this application is to make it interactive and its ease of use. It would make searching, viewing and selection of a product easier. It contains a sophisticated search engine for users to search for products specific to their needs. The search engine provides an easy and convenient way to search for products where a user can Search for a product interactively and the search engine would refine the products available based on the user’s input. The user can then view the complete specification of each product. They can also view the product reviews and write their own reviews. The application also provides a drag and drop feature so that a user can add a product to the cart by dragging the item in to the cart. The main emphasis lies in providing a user-friendly search engine for effectively showing the desired results and its drag and drop behavior.

CHAPTER 1 1.INTRODUCTION 1.1 Project Description In the system, we can observe that the user interacts with the application through a graphical user interface. The inputs to the system are the Search and Filter criteria provided by the user and a new review written by the user. Also, the output is in the form of Repeater and grid views which present the users with list of Products available. The users can view complete specification, view Images and reviews by other users.

1.2 Scope of the Project  The current system can be extended to allow the users to create accounts and save products in to wish list.  The users could subscribe for price alerts which would enable them to receive messages when price for products fall below a level.  The current system is confined only to the cart process. It can be extended to have a easy to use check out process.  Users can have multiple shipping and billing information saved. During checkout they can use the drag and drop feature to select shipping and billing information.

1.2 Project features  Secure registration and profile management facilities for Customers.  Browsing through the e-Mall to see the items that are there in each category of products like Apparel, Kitchen accessories, Bath accessories, Food items etc.  Creating a cart so that customer can Shop N number of items and checkout finally with the entire shopping cart  Customers should be able to mail the Shop about the items they would like to see in the Shop  Secured mechanism for checking out from the Shop. Updates to customers about the Recent Items in the Shop.  Uploading Most Purchased Items in each category of products in the Shop like Cakes, Birthday accessories, Candles accessories, Food items etc.

CHAPTER 2 2: Analysis 2.1 Existing System Many customers go for purchasing to examine the product and hold the possession of the product just after the payment for the product. In this contemporary world customer’s loyalty depends upon the consistent ability to deliver quality, value satisfaction. Offline shopping has a sense of immediacy. You get to pose the item you’ve purchased the very moment. If we can search and make a list of items that we would like to try while shopping, before going out. This way we can be more confident in our purchase and not missing out something. This can also help us to decide what areas to visit and plan such an event with friends.

Limitation of Exiting System     

Time consuming Refunds/Returns Disputes Lack of options Cash-Back offers not present Bad customer service

Also, there are expenses for traveling from house to shop. Moreover, the shop from where we would like to buy something may not be open 24*7. In order to overcome these, we have online shopping. One place where we can get all required products online.

2.2 Proposed System To remove all the disadvantages of conventional methods, a system is proposed which is an online shopping. The purpose of online shopping is to save time, save money. Through online shopping one can save his valuable time. One can watch and select things that wants to buy. Through online shopping we can save our money because prices are less than market prices and we receive our bought things at our home. No need to go anywhere and do shopping we can get different varieties of things online and we ca choose which one we want.

CHAPTER 3 3.SYSTEM IMPLMENTATION 3.1 Introduction The user interface of the application has been designed using Microsoft Visual Studio 2008. The main controls used in the design are Repeaters, Ajax Update panels, Ajax toolkit controls like modal popup, textbox watermark and Auto complete controls. The user can see the list of products that are available. The user can search for products by entering the search term into the search textbox provided on the top. This text box is watermarked with the words “Search Terms” to let the user know that this is the place to enter the search terms. The user can filter the products by using the dropdown lists.

3.2 Code

HTML SignUP:





Online Birthday Management



Cart

×

Total price: $

Close Order now



/\





Home Decoration View Items Contact Us



R-12 sector 15 nazmimabad karachi

Onl [email protected]

+92 0331 3481742







ContactUs:



Contact Us









Home

View Items

Contact Us

Decoration

LogOut

For Contact & More Details

First name

Last name

Email

@



City

Address

CNIC





Agree to terms and conditions



Submit form

Please Give a Feedback

First name

Last name

Email

@



City













Rate Us

Submit form



/\





Home Decoration View Items Contact Us



R-12 sector 15 nazmimabad karachi

OnlineBir [email protected]

+92 0331 3481742







Decoration:



Decoration









Home

View Items

Contact Us

Decoration

LogOut





Pink Birthday Theme for Girls It’ll blow your mind. We do all things like we show you in this picture. A theme with great colors and contrast. Also we provide a cake with 3 story PINK fondant cake. with a snowy dear and Xmas Tree. A beautiful theme for Girls. PKR 20,000\- Book Now





See for yourself. We do all things like we show you in this picture. A theme with great colors and contrast. Also we provide a cake with 2 story XMAS fondant cake. with a snowy dear Xmas Tree. A beautiful theme for all AGE peoples. PKR 20,000\- Book Now





And lastly, this one. Simple & Elegent. We do all things like we show you in this picture. A theme with simpl e colors and contrast. Also we provide a fondant cake. with a Charming & Crystal decoration. A beautiful theme for all married Couple. < /p> PKR 20,000\- Book Now





Hello Dear We do all things like we show you in this picture. A theme with gre at colors and contrast. Also we provide a cake with 2 story fondant cake. with a hanging Blue & White shinny balloons or Trees. A beautiful theme for boy s. You are Future Doctor. PKR 20,000\- Book Now





Barbie Theme, this one. Charming & Elegent. We do all things like we show you in this picture. A theme with sim ple colors and contrast. Also we provide a fondant cake. with a Charming & Crystal decoration. A beautiful theme for all small age Girls . PKR 20,000\- Book Now





Memorable Day We do all things like we show you in this picture. A theme with gre at colors and contrast. Also we provide a cake with 2 story fondant cake. with a hanging Golden & Black shinny balloons or Trees. A beautiful theme for f amily. Enjoy every moment with your family. PKR 20,000\- Book Now







/\





Home Decoration View Items Contact Us



R-12 sector 15 nazmimabad karachi

Onl [email protected]

+92 0331 3481742





BOOK:





Booking & Details









Home

View Items

Contact Us

Decoration

LogOut

Booking & Details

First name

Last name

Email

@



City

Address

State

Choose... California Asia Northern Sides

Zip

CNIC



Agree to terms and conditions



Submit form



/\





Home Decoration View Items Contact Us



R-12 sector 15 nazmimabad karachi

OnlineB [email protected]

+92 0331 3481742







Add Items:

Add Items











Home

View Items

Contact Us

Decoration



/\





Home Decoration View Items Contact Us



R-12 sector 15 nazmimabad karachi

OnlineB [email protected]

+92 0331 3481742





CSS: SignUP: .div1{ margin-left: 44%; margin-top: 6%; font-family: Times, serif; } .container{ color: white; font-size: 20px; font-family: Times, serif; font-style: italic; }

Homepage: .body{ margin: 0; padding: 0; background-image: url(1.jpg); background-repeat: no-repeat; background-size: cover; } .header{ background-color: black; display: flex; } .div{ text-align: right; width: 100%; padding: 15px; margin-top: 10px; font-weight: 400; font-family: sans-serif; font-size: 18px; color: chocolate; } .img1{ width:100px; height: 110px; } .img3{ height: 110px; width: 300px; } footer{ margin: 0px; padding: 0px; } .footer-distributed{ background-color: black; box-sizing: border-box; width: 100%; text-align: center; font: bold 16px sans-serif; padding: 50px 50px 60px 50px; margin-top: 3%; height: 330px; } .footer-distributed .footer-center{ width: 100%; } .footer-links{ margin-left: 20%;

margin-right: 20%; width: 60%; color:white; display: flex; justify-content: space-between; } .footer-links a{ color: white; text-decoration: none; } .footer-icons{ width: 85%; margin-left: 7.5%; margin-right: 7.5%; text-align: center; display: inline; } .img10{ height: 110px; width: 500px; margin-top: -50px; } .img12{ color: white; text-align: left; } .img13{ margin-left: 9%; } .img14{ text-align: center; margin-top: -6.5%; height: -5%; } .img17{ text-align: right; margin-top: -6.5%; height: -5%; margin-right: 7%; } .img16{ margin-right: 3%; } .home1{ height: 470px; position: relative; width: 100%; text-align: center; background-size: cover;

background-image: linear-gradient( rgba(10, 20, 10, 0) 100%, rgba(10, 10, 10, 0)100%), url('homepic9.jpg'); background-repeat: no-repeat; } .text1{ position: absolute; left: 3%; top: 80%; transform: translate(-50px, -50px); background-color: black; opacity: 1; height: 100px; width: 100%; padding-right: 10px; } .text2{ font-weight: 800; color: white; opacity: 1; font-size: 30px; } .img20{ height: 570px; width: 35%; } .home2{ background-image: url('homepic 5.jpeg'); height: 1200px; } .quote{ color: black; text-align: center; height: 100px; width: 100%; } .quote1{ font-size: 40px; font-weight: 500; } .quote2{ height: 300px; width: 500px; color: white; margin-left: 200px; margin-top: 135px; font-size: 30px; font-weight: 600; line-height: 2.5rem; } .quote2 span{

font-size: 20px; font-weight: 300; } .text4{ display: flex; } .text5{ margin-bottom: 3%; display: flex; } .img21{ height: 570px; width: 35%; margin-left: 300px; margin-top: 59px;

} .quote3{ height: 300px; width: 500px; color: white; margin-left: 120px; margin-top: 180px; font-size: 40px; font-weight: 600; line-height: 2.5rem; } .quote3 span{ font-size: 20px; font-weight: 300; } .hr{ width: 90%; height: 20%; border-top: 3px solid white; margin-left: 5%; color: white; margin-top: 2%; }

Items: .body{ margin: 0; padding: 0; } .header{

background-color: black; display: flex; } .div{ text-align: right; width: 100%; padding: 15px; margin-top: 10px; font-weight: 400; font-family: sans-serif; font-size: 18px; color: chocolate; } .img1{ width:100px; height: 110px; } .img3{ height: 110px; width: 300px; } .main1{ display: inline; display: flex; } .main{ background-image: url(back.jpeg); background-repeat: no-repeat; background-size: cover; width: 45%; height: 550px; margin-left: 5%; padding-top: 30%; } .birthday{ width: 100%; background-color: black; text-align: center; opacity: 0.6; } .text{ font-weight: 800; color: white; font-size: 30px; padding: 3%; } .main2{ background-image: url(back1.jpg); background-repeat: no-repeat; background-size: cover;

width: 45%; margin-left: 3%; } .birthday1{ width: 100%; background-color: black; text-align: center; opacity: 0.6; margin-top: 67%; } .hr{ width: 100%; margin-right: 3.5%; border-top: 2px solid rgb(47, 45, 45); background-color: rgb(44, 40, 40); } .div1{ margin-left: 7.5%; margin-right: -2%; } .td{ font-size:13px; font-weight:700; color: rgb(66, 61, 61); line-height: 20px; font-family: sans-serif; margin-right: 3%; } .td1{ font-size: 20px; color: black; font-weight: 600; line-height: 5%; margin-left: 35%; } .table1{ height: 40%; width: 50%; } .table2{ height: 20%; width: 50%; } .table3{ height: 22%; width: 50%; } .table4{ height: 20%;

width: 50%; } .main3{ background-image: url(arrange.jpg); background-repeat: no-repeat; background-size: cover; width: 45%; height: 750px; margin-left: 5%; padding-top: 30%; } .main4{ background-image: url(dest.jpg); background-repeat: no-repeat; background-size: cover; width: 45%; height: 750px; margin-left: 5%; margin-right: 2%; padding-top: 30%; } .birthday2{ width: 100%; background-color: black; text-align: center; opacity: 0.6; margin-top: 30%; } .birthday3{ width: 100%; background-color: black; text-align: center; opacity: 0.6; margin-top: 30%; } .next{ background-image: url(main.jpg); background-repeat: no-repeat; background-size: cover; height: 650px; width: 80%; margin-top: 2%; margin-left: 11.5%; margin-bottom: 5%; } .decor{ font-size: 30px; font-weight: 700; font-family: sans-serif; }

.header{ background-color: black; display: flex; } .buttons{ text-align: right; padding: 30px 50px; padding-bottom: -50px; padding: 30px 50px; padding-bottom: -50px; width: 100%; } .homebutton{ padding: 5px 15px; text-decoration: none; color: white; font-size: 20px; font-weight: 600; } .homebutton:hover{ color: black; cursor: pointer; border-radius:4px; background-color: white; } .img{ text-align: left; margin-left: 0px; } .img1{ width:100px; height: 110px; } .img3{ height: 110px; width: 200px; } .bod{ margin: 0; padding: 0; } footer{ margin: 0px; padding: 0px; } .footer-distributed{ background-color: black; box-sizing: border-box; width: 100%; text-align: center;

font: bold 16px sans-serif; padding: 50px 50px 60px 50px; margin-top: 3%; height: 330px; } .footer-distributed .footer-center{ width: 100%; } .footer-links{ margin-left: 20%; margin-right: 20%; width: 60%; color:white; display: flex; justify-content: space-between; } .footer-links a{ color: white; text-decoration: none; } .footer-icons{ width: 85%; margin-left: 7.5%; margin-right: 7.5%; text-align: center; display: inline; } .img10{ height: 110px; width: 500px; margin-top: -50px; } .img12{ color: white; text-align: left; } .img13{ margin-left: 9%; } .img14{ text-align: center; margin-top: -6.5%; height: -5%; } .img17{ text-align: right; margin-top: -6.5%; height: -5%; margin-right: 7%; }

.img16{ margin-right: 3%; }

CART: body { padding-top: 80px; margin: 0; } .show-cart li { display: flex; } .card { margin-bottom: 20px; } .card-img-top { width: 200px; height: 200px; align-self: center; } .header{ background-color: black; display: flex; } .div{ text-align: right; width: 100%; padding: 15px; margin-top: 10px; font-weight: 400; font-family: sans-serif; font-size: 18px; color: chocolate; } .img1{ width:100px; height: 110px; } .img3{ height: 110px; width: 300px; } footer{ margin: 0px; padding: 0px; } .footer-distributed{

background-color: black; box-sizing: border-box; width: 100%; text-align: center; font: bold 16px sans-serif; padding: 50px 50px 60px 50px; margin-top: 3%; height: 330px; } .footer-distributed .footer-center{ width: 100%; } .footer-links{ margin-left: 20%; margin-right: 20%; width: 60%; color:white; display: flex; justify-content: space-between; } .footer-links a{ color: white; text-decoration: none; } .footer-icons{ width: 85%; margin-left: 7.5%; margin-right: 7.5%; text-align: center; display: inline; } .img10{ height: 110px; width: 500px; margin-top: -50px; } .img12{ color: white; text-align: left; } .img13{ margin-left: 9%; } .img14{ text-align: center; margin-top: -6.5%; height: -5%; } .img17{ text-align: right;

margin-top: -6.5%; height: -5%; margin-right: 7%; } .img16{ margin-right: 3%; } .p{ text-align: center; margin-bottom: -15px; margin-top: 3%; } .hr{ width: 90%; height: 20%; border-top: 2px solid black; margin-left: 4%; }

ContactUs: .body{ margin: 0; padding: 0; background-image:url(1.png); background-repeat: no-repeat; background-size: cover; } .container{ border-radius: 4px; background-color: rgb(53, 54, 54); padding: 4%; color: white; } .header{ background-color: black; display: flex; } .div{ text-align: right; width: 100%; padding: 15px; margin-top: 10px; font-weight: 400; font-family: sans-serif; font-size: 18px; color: chocolate; } .img1{ width:100px; height: 110px;

} .img3{ height: 110px; width: 300px; } .h2{ color: black; font-family: sans-serif; font-weight: ; text-align: center; margin-top: 3%; } .class{ background-color: rgba(180, 177, 177, 0.822) ; width: 60%; margin-left: 21%; margin-top: 3%; padding: 3%; border-radius: 6px; border: none; } footer{ margin: 0px; padding: 0px; } .footer-distributed{ background-color: black; box-sizing: border-box; width: 100%; text-align: center; font: bold 16px sans-serif; padding: 50px 50px 60...