C2C E-COMMERCE WEBSITE

(1)

©Daffodil International University

C2C E-COMMERCE WEBSITE

BY

M.N.U YEA HIA KHAN ID: 161-15-7433

This report presented in partial fulfillment of the requirements for The degree of bachelor of computer science and engineering.

SUPERVISED BY

MD. TAREK HABIB Assistant Professor

Department of Computer Science and Engineering, Daffodil International University.

DAFFODIL INTERNATIONAL UNIVERSITY, DHAKA, BANGLADESH DECEMBER 2019

(2)

©Daffodil International University i

(3)

©Daffodil International University ii

(4)

©Daffodil International University iii

ACKNOWLEDGEMENT

At first, I express my heartiest thanks and gratefulness to almighty Allah for making me eligible to complete this project successfully.

Then I would like to express my special thanks to MD. TAREK HABIB sir, (Assistant Professor, Department of Computer Science and Engineering, Daffodil International University) for providing me necessary information regarding this project & his support to complete this project.

Finally, I must acknowledge with due respect to my parents for their constant support.

(5)

©Daffodil International University iv ABSTRACT

In our country we do not find good tutor easily also tutor do not find tuition easily so this project will be a common platform of tutor and guardians. The main purpose of this project (Online Learning and Exam System) is to make a better solution for tuition and tutor find. In this project a tutor will find tuition easily also guardian find tutor. A guardian can easily find tutor to making job post will his/her all requirements, also a tutor create his profile so than guardian can find him/her. Tutor can be create package also to develop this web application I used raw PHP (OOP), MySQL which make this application faster. We also used HTML, CSS, Bootstrap, jQuery and JavaScript, AJAX for better web design and make this application responsive and user friendly.

(6)

©Daffodil International University v

CHAPTER 1: INTRODUCTION 1-1

1.1 Introduction 1

1.2 Motivation 1

1.3 Objectives 1

1.4 Expected outcome 1

1.5 Report layout 1

CHAPTER 2: BACKGROUND 2-2

2.1 Introduction 2

2.2 Related Works 2

2.3 Comparative Studies 2

2.4 Scope of the Problem 2

2.5 Challenges 2

(7)

©Daffodil International University vi

CHAPTER 3: REQUIREMENT SPECIFICATION 3-8

3.1 Business Process Modeling 3

3.2 Requirement Collection and Analysis 3 3.3 Use Case Modeling and Description 4-6

3.4 Logical Data Model 7

3.5 Design Requirements 8

CHAPTER 4: DESIGN SPECIFICATION 9-21

4.1 Font-end design 9-18

4.2 Back-end Design 19-20

4.3 Interaction Design and UX 21 4.4 Implementation Requirements 21

CHAPTER 5: IMPLEMENTATION AND TESTING 22-28

5.1 Implementation of Database 22-25

5.2 Implementation of Front-end Design 25-26

5.3 Implementation of Interactions 26

5.4 Testing Implementation 27-28

5.5 Test Results and Reports 28

CHAPTER 6: CONCLUSION AND FUTURE SCOPE

29

6.1 Discussion and Conclusion 29 6.2 Scope for Further Developments 29

(8)

©Daffodil International University vii

LIST OF FIGURES

FIGURES PAGE Figure 3.1: Business Processing Model 3

Figure 3.2: Use case model 4

Figure 3.3: Logical data model 7

Figure 3.4: Architecture Design 8

Figure 4.1.1: Index page 9

Figure 4.1.2: Index page 10

Figure 4.2: Profile page 11

Figure 4.3: All Tutor 12

Figure 4.4: All Jobs 13

Figure 4.5: Single job page 14

Figure 4.6: Login Form 15

Figure 4.7: Registration Form 15

Figure 4.9: Information Update 16

Figure 4.10: Package Create 17

Figure 4.11: Job Post Form 18

Figure 4.12: Admin Dashboard 19

Figure 4.13: All Jobs 19

Figure 4.14: DFD level 0 20

Figure 4.14: DFD level 2 21

Figure 5.1: Entity Relationship Diagram 22

Figure 5.2: All database 23

(9)

©Daffodil International University viii

Figure 5.3: User Table 24

LIST OF TABLES

TABLES PAGE

Table 4.3 Use case description: 5-6 Table 6.13 Test case Table: 27-28

(10)

©Daffodil International University ix

(11)

©Daffodil International University 1

CHAPTER 1 INTRODUCTION

1.1 IntroductionIn this time internet is necessity for every people & the main part of internet is website. ‘TutorBd’ is a web based project where we can find tutor or tuition easily. To find tutor or tuition now we do not need TO-LET poster because ‘tutorBd’ is a common platform of tutor and guardian. If you need tuition just go to the website and create an account then make you profile and package, the package system help you to give message to guardian when, where, how many student you want to tech on your price. On the other side if you need tutor for your child then just create an account as guardian and make job post. In the post you can specified every single details about your child and salary time location and contact information, and when a tutor see your post he/she will contact with you.

1.2 Motivationmy main motivation is to-let poster. In our country when a teacher need a tuition he/she user to-let poster to find tuition, on the other side a guardian can to find a tutor easily, that's why I decided to make a common platform for tutor and guardian where a tutor find tuition and a guardian find tutor easily.

1.3 Objectives

• Build a web application for tutor and guardian.

• Make the application user friendly and effective more than existing system.

• Add new feature like package system for tutor.

• Make the application faster and secure.

1.4 Expected OutcomeA user friendly and effective web application for tutor and guardian.

1.5 Report Layout

In this report I will write about

• Requirement analysis

• Background

• Design

➢ Font-end

➢ Back-end

• Implementation

• Use case description

• Testing

• Future scope

(12)

CHAPTER 2 BACKGROUND

2.1 IntroductionThis is a web based project, a web application where tuition finding problem will be solve. Already in our country have some projects like this, but those are not user friendly and effective. That’s why I want to build this project.

2.2 Related WorksYes there are some related work in our country like Bd Tutors, DeshTutor, BD Home Tutors etc.

• Bd Tutors:This web application was build using PHP, and this loading speed is good.

But the main problem of this website is security. The security of this application is not good enough also feature of this website is lod.

• Desh Tutor: This web application used PHP, Jquery, Bootstrap and so on. The loading speed is good enough, but the user interface is not user friendly it’s to messy.

• Bd Home Tutor: This is a wordpress website, Ths performance of this website is so bad, loading speed is not good enough.

2.3 Comparative StudiesComparatively my project will be more effective than other existing project. This project will more user friendly because I will make is responsive so that all devise user can use easily. Loading speed will be so fast because I will use raw OOP PHP and AJAX request, OOP PHP give it more security the raw PHP and the AJAX request will give it a cool effect. Also I build a new feature called package this feature helps tutor to find specific tuition easily. Finally I this this application will be the best solution of tutor finding problem.

2.4 Scope of the ProblemI scope of the problem can be manpower because this is single project and I have to requirement analysis, data collect, design, development, test etc. Another problem is raw coding. I this project I will use raw code and raw code gives more bug than framework.

2.5 Challenges

• Data collect: data collect is a challenge of me. But I overcome the challenge because some of my friend is tutor and also I am a tutor.

• User friendly design: To make application user friendly and responsive is another challenge. I will use bootstrap and jquery to make this project responsive.

• Fast loading speed: To make its fast loading I will maintain the relationship of database table, so that user can fetch or store data easily.

• Raw coding: Raw coding is always challenging, but will use OOP approach to overcome this challenge.

(13)

CHAPTER 3 REQYIREMENT SPECIFICATION

3.1 Business Process Modeling:Graphical representation of a business is called business processing model, so here is the graphical representation of ‘tutorbd’ business.

Figure 3.1: Business Processing Model

3.2 Requirement Collection and AnalysisIt is a process or technique to determine the user of client expectations for a project. It make development process easy. In this project I also analysis requirement. I was collect data from my friend who find tuition or who already do tuition, also collect data from internet like how can I make this process more user friendly and easy. It helps me to develop some new features like package create.

(14)

©Daffodil International University 4 3.3 Use Case Modeling and Description:

Figure 3.2: Use case model

(15)

©Daffodil International University 5 Use case description:

Use Case No 1.1

Use Case Name Registration

Actor Tutor, Guardian

Description Allowing Tutor or Guardian to registration to the system.

Precondition Tutor, Guardian should remain in the registration page.

Trigger Click the “Registration” Button.

Flow Of Events ➢ Five text fields to give Registration form. Name, Email, Password, Confirm Password, User type.

➢ Unique Email is required

➢ Password and Confirm password must same

➢ Fill all the fields and click registration Button Post Condition User should confirm email.

Use Case No 1.2

Use Case Name Login

Actor Tutor, Guardian

Description Allowing Tutor or Guardian to login to the system.

Precondition Tutor, Guardian should registration into the system Trigger Click the “Login” Button.

Flow Of Events ➢ Two text fields to give Registration form. Email, Password.

➢ Valid email

➢ Password must be at least 8 characters long.

➢ Fill all the fields and click Login Button Post Condition No Post condition

Use Case No 1.3

Use Case Name Create Profile

Actor Tutor

Description Allowing Tutor to create his/her profile to the system.

Precondition Tutor should login into the system Trigger Click the “Update profile” Button.

Flow Of Events Fill up all the Education information and click update Button Post Condition No post condition

(16)

Use Case No 1.4

Use Case Name Create Package

Actor Tutor

Description Allowing Tutor to create his/her package to the system.

Precondition Tutor should login into the system Trigger Click the “Create” Button.

Flow Of Events ➢ Click create package button

➢ Fill up all the input fields like name, price, area, subject, class etc

Post Condition No post condition

Use Case No 1.5

Use Case Name Search Job

Actor Tutor

Description Allowing Tutor to search job into the system.

Precondition Tutor should login into the system Trigger Click the “search button” Button.

Flow Of Events ➢ Type on the search input field Post Condition No post condition.

Use Case No 1.6

Use Case Name Search Tutor

Actor Guardian

Description Allowing Guardian to search job into the system.

Precondition Tutor should login into the system Trigger Click the “search button” Button.

Flow Of Events ➢ Type on the search input field Post Condition No post condition.

Use Case No 1.7

Use Case Name Make Job Post

Actor Guardian

Description Allowing Guardian to make job post into the system.

Precondition Tutor should login into the system Trigger Click the “post” Button.

Flow Of Events ➢ Click create package button

➢ Fill up all the input fields like name, price, area, subject, class etc

Post Condition Admin confirm the post

Table 3.1: Use case description

(17)

©Daffodil International University 7 3.4 Logical Data Model:Logical data model describe the relation between data. Here is the logical data model of ‘tutorbd’ web application. User and package has one to many relation and tutor and tutor profile has one to one relation also user and job has one to many relation.

Figure 3.3: Logical data model

(18)

©Daffodil International University 8 3.5 Design Requirements

• Designing Tools: In my application is use HTML, CSS, Javascript, Jquery also use css and javascript framework Bootstrap and jQuery to make application more responsive and user friendly.

• Architecture Design:

• User come to the browser and type tutorBd.com

• Browser send request to server for the web page

• Server fetch data from database and send to the browser

• User see the web page to brows

Figure 3.4: Architecture Design

(19)

CHAPTER 4 DESIGN SPECIFICATION

4.1 Front-end DesignFront-end design is user interface. Front-end design is the only think that a user can visually see. To develop a front-end design a developer use many programming

language or markup language. In this project I used HTML, CSS, Bootstrap, JavaScript [4].

• HTML & CSS: Using HTML and CSS I build and design the layout of this project.

• BOOSTRAP: Using Bootstrap I make the website responsive so that all device user can use the application easily;

• JAVASCRIPT: JavaScript made my project interactive. All the click event, loading event build by javascript.

Front-end Design screenshots:

Figure 4.1.1: Index page

(20)

©Daffodil International University 10 Figure 4.1.2: Index page

(21)

©Daffodil International University 11 Figure 4.2: Profile page

(22)

©Daffodil International University 12 Figure 4.3: All Tutor

(23)

©Daffodil International University 13 Figure 4.4: All Jobs

(24)

©Daffodil International University 14 Figure 4.5: Single job page

(25)

©Daffodil International University 15 Figure 4.6: Login Form

Figure 4.7: Registration Form

(26)

©Daffodil International University 16 Figure 4.9: Information Update

(27)

©Daffodil International University 17 Figure 4.10: Package Create

(28)

©Daffodil International University 18 Figure 4.11: Job Post Form

(29)

©Daffodil International University 19 Figure 4.12: Admin Dashboard

Figure 4.13: All Jobs

(30)

©Daffodil International University 20 4.2 Back-end DesignBack-end design is only for developer. To develop a project a developer use many programming language all of them are back-end design’s part. Some time it also called server side development. In this project I used PHP (OOP), MySQL and AJAX request to

develop back-end design [5].

• PHP (OOP)

PHP is server side language. That means it executed on the server. So if we want to work on

PHP we need a server. In my project I user XAMPP server to executed PHP.

To display something in PHP the syntax is ‘echo’.

Object Oriented Programming (OOP) is a techniques of development. Programmers organize data to creating an object. Suppose ‘tutor’ is an object, so tutor has name, email, password, age all of them are attributes and a tutor can update profile, create package, search job, all of them are method [2].

• MYSQL

In this project I used MYSQL for database management, it is the most popular and easy structured query language (SQL) [3].

• Relation Make Between Two Tables

If we want to make relation between two tables we have to use primary key and foreign key.

➢ Primary Key: Primary key is the unique column of a table. Using this column we can easily understand the difference between tow row, In my project I user ‘id’

column for primary key, like tutor_id, guardian_id, package_id, job_id etc.

➢ Foreign Key: If we use a table’s primary key to another table as a normal column then the column called foreign key. For example: if we use tutor_id column to package table then the tutor_id will be called foreign key. Using this key we can make a relation between tutor and package table

• DFD (level 0 and 2)

Figure 4.14: DFD level 0

(31)

©Daffodil International University 21 Figure 4.14: DFD level 2

4.3 Interaction Design and UX: Interaction and UX design is the even that a user can occur. In this project I use javascript for interactive design also use AJAX request to interact with back- end [3].

4.4 Implementation Requirements: this is a web-based project that’s why to implement this project I need all the web technology.

• A computer

• Code editor

• Server to execute server side language (PHP)

• Necessary library like jquery and bootstrap

(32)

CHAPTER 5 IMPLEMENTATION AND TESTING

5.1 Implementation of Database

• Entity Relationship Diagram:

Figure 5.1: Entity Relationship Diagram

(33)

• Database table list:

Figure 5.2: All database

Figure 5.3: User Table

(34)

©Daffodil International University 24 Figure 5.4: Tutor_profile table

• Database connection (PHP):

To connect database to our project we use mysqli_connect function in PHP file.

This function take four parameter host name, user name, password of database, database name.

mysqli_connect(“host name”,”username”,”password”,”database name”);

(35)

• MySQL Query make method (Insert):

// insert query

functionmake_insert_query($tbl,$array){

$query = "insert into ".$tbl." (";

foreach ($array as $key => $value) {

$query .= $key.",";

}

$query = substr_replace($query, "", -1);

$query .= ") values(";

foreach ($array as $key => $value) {

if(is_int($value) || is_double($value)){

$query .= $value.",";

}else{

$value = $this->escape_string($value);

$query .= "'".$value."',";

} }

$query = substr_replace($query, "", -1);

$query .=")";

return $query;

}

5.2 Implementation of Front-end Design: To implement font-end design I use HTML, CSS and javascript [1].

• Basic html code;

<!DOCTYPE html>

<head>

<title>tutorbd</title>

</head>

<body>

<nav>

<ul>

<li><a href="">Tutor</a></li>

(36)

<li><a href="">Action</a></li>

</ul>

</nav>

</div>

</header>

</section>

</footer>

</body>

</html>

5.3 Implementation of Interactions: For interactive design I used javascript (Jquery)

• Some js code (search bar):

$("#tutor-search-typed").mouseover(function(){

$(this).hide();

$("#tutor-search").show();

})

$("#tutor-search").mouseleave(function(){

$("#tutor-search").hide();

$("#tutor-search-typed").show();

})

(37)

Test case Input Expected

output

Actual output

Result Test on

1.Font-end design

Tested browsers- Firefox

Google Chrome Opera Safari

Display all the page successfully

Display all the page

successfully

Passed 10-22-19

2.Registration form

Input name, email, password, User type

Registration successfully

Passed 10-22-19

3. login Input email and password

Login

successfully

Login successfully

Passed 10-22-19

4.create profile

Input all personal information

Created successfully

Passed 10-22-19

5.Create package

Input all package information in the package create form

Passed 10-22-19

6.Create job post

Input all job information in the job create form

Passed 10-22-19

7.Tutor Search

Input in the search bar

Provide valid output

Passed 10-22-19

8.Job Search Input in the search bar

Provide valid output

Passed 10-22-19

9.package edit

Click on edit button

Show all info to edit form

Show all info edit form

Passed 10-22-19

(38)

Test case Input Expected

output

Actual output

Result Test on

10.job edit Click on edit button

Show all info to edit form

Show all info edit form

Passed 10-22-19

11. package update

Click to the update button

Package update success

Passed 10-22-19

12. Job update

Click to the update button

job update success

Passed 10-22-19

13.package delete

Click to the delete button

package delete success

Passed 10-22-19

14.job delete Click to the delete button

job delete success

Passed 10-22-19

15. logout Click logout button

Logout success show index page

Passed 10-22-19

Table 5.1: Test case table

5.5 Test Results and Reports: Test case result is positive. All the test case passed, expected outcome and actual outcome are same.

(39)

CHAPTER 6 CONCLUSION AND FUTURE SCOPE

6.1 Discussion and Conclusion:The project (web application) has been successfully implemented. After uploading the application in live server it’s all features and functionalities works fine. This application is responsive and user friendly also efficient enough to use.

• Limitations

My application has some limitation. I will overcome them in future. Some limitations are:

➢ it is only web based application.

➢ Some features need to be include such as rating and review system of tutor and guardian.

➢ Small data storage 6.2 Scope for Further Developments:

• My mission is to make this project for all platform like windows, IOS and android.

• Use more large data storage

• I will add more additional features to make it more dynamic and user friendly.

(40)

REFERENCES

[1] About JavaScript available at <<https://www.w3schools.com/js/>> last access on 22-09-2019 at 09.40 PM.

[2] What is PHP available at <<https://www.php.net/>> last accessed on 22-09-2019 at 10.02 PM.

[3] About MySql available at <<https://www.w3schools.com/sql/default.asp>> last access on 22- 09-2019 at 10.20 PM.

[4] About AJAX available at <<https://www.w3schools.com/js/js_ajax_intro.asp>> last access on 22-09-2019 at 10.30 PM.

[5] Front-end design available at <<https://bradfrost.com/blog/post/frontend-design/>> last access on 22-09-2019 at 11.10 PM.

[6] Backend design available at <<https://www.pluralsight.com/blog/film-games/whats- difference-front-end-back-end>> last access on 22-09-2019 at 11.40 PM.

(41)

(42)