VENDOR-CONNECT SYSTEM(A Web Application for developing a

connection with vendors)

NATIONAL INSTITUTE OF TECHNOLOGY,RAIPUR

YASH MITTAL

May - June 2015

1

Dissertation submitted in partial fulfillment for the degree of

B.Tech (Computer Science)

APPROVED BY SUPERVISING COMMITTEE:

Mentor:

Ms. Rucha Khale

(Founder AureaTECH Solutions, Mumbai)

2

Certificate of Originality

The work embodied in this report entitled “Vendor-Connect System (A Web Application for developing a connection with vendors)” has been carried out by me at AureaTECH Solutions, Mumbai. I declare that the work and language included in this project report is free from any kind of plagiarism.

The work submitted is original and has not been submitted earlier to any institute or university for the award of any degree or diploma.

YASH MITTAL

3

Abstract

Vendor-Connect System

(A Web Application based on PHP Framework (CodeIgniter) for developing a connection with vendors)

By

YASH MITTAL

SUPERVISOR:

Ms. Rucha Khale

Presently the commercial world is much more dependent on cheapest, fastest, and reliable source of transferring information. Now-a-days there are various mode of systems to make a connection with vendors like mobile phones, etc. But the communication through a web application is proved to be the cheapest and fastest because of the consistency and there are very less chances of any type of distortion with the data. The idea of the developed Web application was to generate a system which makes a connection to contact vendors.

As it is a web application, so the users who have login credentials can only be able to access this application.

This purpose of this thesis is to introduce the advantages and techniques of PHP framework (CodeIgniter) and Bootstrap. Another purpose is to build an example system which is using PHP framework and Bootstrap to student who want to learn more about programming. The codes of HTML and PHP are very detailed. That help students who want learn PHP framework easier.

Keywords: PHP, HTML5, CSS3, Bootstrap, PHP framework (CodeIgniter)

4

ContentDevelopment of a vendor-connect system using CodeIgniter framework.

Abstract ......................................................................................................................... 4

1 INTRODUCTION ...................................................................................................... 7

2 TECHNOLOGY ANALYSIS .................................................................................... 8

2.1 CodeIgniter ...................................................................................................... 9

2.2 Bootstrap ..................................................................................................... 12

2.3 HTML5.............................................................................................................. 13

2.4 CSS3.................................................................................................................. 14

3 SYSTEM DEVELOPMENT .................................................................................. 15

3.1 System Analysis .............................................................................................. 15

3.2 Database design .............................................................................................. 16

3.3 Installation ....................................................................................................... 17

3.4 Login ........................................................................................................... 21

3.5 Home View ...................................................................................................... 26

3.6 Vendor List.................................................................................................. 27

3.7 Order Status...................................................................................................... 28

3.8 Order View...................................................................................................... 29

4 Conclusion ................................................................................................................... 30

5 Discussion .................................................................................................................... 31

References ...................................................................................................................... 33

5

List of Figures

Figure 1: CodeIgniter Process.........................................................................................................................10

Figure 2: CodeIgniter system directory structure ...........................................................................................17

Figure 3: Application folder...........................................................................................................................18

Figure 4: Login page.......................................................................................................................................25

Figure 5: Home page.......................................................................................................................................26

Figure 6: Vendors view page..........................................................................................................................27

Figure 7: Add Vendor.....................................................................................................................................27

Figure 8: Order Status.....................................................................................................................................28

Figure 9: Add Order........................................................................................................................................28

Figure 10: Single order details........................................................................................................................29

6

1 INTRODUCTION

"Vendor-Connect System" is a web application designed on a platform named as CodeIgniter, a PHP Framework. Now-a-days there are various mode of systems to make a connection with vendors like mobile phones, etc. But the communication through a web application is proved to be the cheapest and fastest because of the consistency and there are very less chances of any type of distortion with the data. The idea of the developed Web application was to generate a system which makes a connection to contact vendors. As it is a web application, so the users who have login credentials can only be able to access this application.

The main use of this application is to give the orders to vendors via Email (a pdf file containing order is attached with it) and send the sms to vendors to contact them.

This purpose of this application is to introduce the advantages and techniques of PHP framework (CodeIgniter) and Bootstrap. Another purpose is to build an example system which is using PHP framework and Bootstrap to student who want to learn more about programming. The codes of HTML and PHP are very detailed. That help students who want learn PHP framework easier.

7

.2 TECHNOLOGY ANALYSIS

Several different programming techniques are using in this vendor-connect system

like PHP framework (CodeIgniter), HTML5, CSS3, BOOTSTRAP, JAVASCRIPT

and so on. In this chapter, will be discussed the advantages of the techniques and

introduce how to use it with a short description.

8

2.1 CodeIgniter

CodeIgniter is a powerful PHP framework with a very small footprint, built for PHP

coders who need a simple and elegant toolkit to create full-featured web applications

(CodeIgniter, referred 15.02.2011).

There are many other advantages of using CodeIgniter:

Small, Fast, Simple, Easy to learn.

It is easy to migration from one server to another. Just need to change the URL.

CodeIgniter is easy to install, just need few minutes. All you need to do is download the CodeIgniter folder from www.Codeigniter.com.

Extract it and put it into the server Simple to debug

Active Record Implementation is simply superb and easy to remember.

One of the most important features of the CodeIgniter is that it has a most well - document.

The collection of libraries that it posses is also good enough.

And as previously said awesome documentation of the user guide, which makes any coder easy to use the whole framework.

The following example is display data from database. Through this example it clear to

see the difference between normal PHP and CodeIgniter. For normal PHP, sometimes

the codes were mixed with HTML, and hard to read and modify. Using CodeIgniter

those problems won‟t happen. In this example, the controller folder is to connect the

back end and front end. In this example, the book function is to select data from

database and load a view file. The view folder is to display what users in face see.

9

Controller View

Figure 1– Codelgniter process

Create a file named book.php in views folder.

View (views/book.php)

<Html>

<Body>

<p><?= $a;?></p>

</Body>

</Html>

Create a file named my_controller.php in Controllers folder.

Controllers (controllers/my_controller.php)

Function book () {

$this->db->where (”type”, “book”); $this->db-

>from (”library”); $result = $this->db->get ();

$count = $result->num_rows (); $data [“a”] =

$count; $this->load->view (“book”, $data);

}

10

http://localhost/ my_controller

Where you‟re installed CodeIgniter

Your main controller file:

System/application/controllers/my_controller.php

Figure 3 – CodeIgnier URL

11

2.2 Bootstrap

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains  HTML and CSS based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications.

Bootstrap is modular and consists essentially of a series of LESS stylesheets that implement the various components of the toolkit. A stylesheet called bootstrap.less includes the components stylesheets. Developers can adapt the Bootstrap file itself, selecting the components they wish to use in their project.

Adjustments are possible to a limited extent through a central configuration stylesheet. More profound changes are possible by the LESS declarations. The use of LESS stylesheet language allows the use of variables, functions and operators, nested selectors, as well as so-called mixins.

Since version 2.0, the configuration of Bootstrap also has a special "Customize" option in the documentation. Moreover, the developer chooses on a form the desired components and adjusts, if necessary, the values of various options to their needs. The subsequently generated package already includes the pre-built CSS style sheet.

Grid system and responsive design comes standard with a 1170 pixel wide, grid layout. Alternatively, the developer can use a variable-width layout. For both cases, the toolkit has four variations to make use of different resolutions and types of devices: mobile phones, portrait and landscape, tablets and PCs with low and high resolution. Each variation adjusts the width of the columns.

12

2.3 HTML5

HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It was finalized, and published, on 28 October 2014 by the World Wide Web Consortium (W3C). This is the fifth revision of the HTML standard since the inception of the World Wide Web. The previous version, HTML 4, was standardized in 1997.

Its core aims are to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.).

HTML5 introduces elements and attributes that reflect typical usage on modern websites. Some of them are semantic replacements for common uses of generic block ( <div> ) and inline ( <span> ) elements, for example  <nav>  (website

navigation block),  <footer>  (usually referring to bottom of web page or to last lines

of HTML code), or  <audio> and  <video>  instead of  <object> . Some deprecated elements from HTML 4.01 have been dropped, including purely presentational elements such as  <font>  and <center> , whose effects have long been superseded by the more capable Cascading Style Sheets. There is also a renewed emphasis on the importance of DOM scripting(e.g., JavaScript) in Web behavior.

13

2.4 CSS3

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in amarkup language. Although most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.

Before CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML markup; all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within the HTML. CSS allows authors to move much of that information to another file, the style sheet, resulting in considerably simpler HTML.

For example, headings ( h1  elements), sub-headings ( h2 ), sub-sub-headings ( h3 ), etc., are defined structurally using HTML. In print and on the screen, choice of font, size,color and emphasis for these elements is presentational.

Before CSS, document authors who wanted to assign such typographic characteristics to, say, all  h2  headings had to repeat HTML presentational markup for each occurrence of that heading type. This made documents more complex, larger, and more error-prone and difficult to maintain. CSS allows the separation of presentation from structure. CSS can define color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics, and can do so independently for on-screen and printed views. CSS also defines non-visual styles such as the speed and emphasis with which text is read out by aural text readers. The W3C has now deprecated the use of all presentational HTML markup

14

3 SYSTEM DEVELOPMENT

3.1 System Analysis

"Vendor-Connect System" is a web application designed on a platform named as CodeIgniter, a PHP Framework. Now-a-days there are various mode of systems to make a connection with vendors like mobile phones, etc. But the communication through a web application is proved to be the cheapest and fastest because of the consistency and there are very less chances of any type of distortion with the data. The idea of the developed Web application was to generate a system which makes a connection to contact vendors. As it is a web application, so the users who have login credentials can only be able to access this application.

The main use of this application is to give the orders to vendors via Email (a pdf file containing order is attached with it) and send the sms to vendors to contact them.

15

3.2 Database design

A pivotal setup in designing this blog is making up the database. Although this might

appear to be a simple task, but sometimes a well-designed database that provides you

with an easy way to get the data you want and minimizes design mistakes. That‟s can

save your time for coding because we could not have to always update or tweak

system structure. The database will be easy to modify and maintain. If you want

changes a field or table, it would not negatively affect any other field or table in the

database. Conversely, bad-designed database will destroy your system. Make your

system structure complicated. If you want to modify something or update some

functions, is hard to find the right place and easy to make a mistake.

16

3.3 Installation

After database is really, we can start to install CodeIgniter. It is easy to install. First,

need to download CodeIgniter from www.Codeigniter.com. Unlike other PHP

framework, you don‟t need to install anything (e.g. django framework can‟t run

without python environment), only need an apache server with PHP and MySQL.

There is also does not have to type anything at the command line (e.g. to start django

server need to run the command: python manage.py runserver), which some might be

a little more comfortable with. After already installed the CodeIgniter to your server,

the directory structure should be looks like this:

Figure 2 - CodeIgniter system directory structure

Then we should focus on the application folder, is this where you will be working

most of time and building your applications. Controllers folder is the

17

most important part of your application, as they determine how HTTP requests should

be handled. All the html web pages will be building in views folder.

Figure 3 - application folder

Within that application folder:

Config – deals with the setting up of your database connection, base URL, auto

loader (which loads other classes and helper functions as well as plug-in) and routes.

Controllers – are like traffic cops, directing requests to the proper models and

views.

Errors – deals with your 404 errors.

Models – contains database functions such as inserting, deleting, updating and

retrieving information from your database.

Scripts – a place to store your own script includes or classes.

Views – which are the pages your visitors will see. (godbit.CodeIgniter, referred

20.02.2011).

Before start to coding, there are some default config files in CodeIgniter need to be

done. First is you index page of this website. Open config.php which is in the config

folder (system/application/config/config.php). At line 14:

$config['base_url'] = "http://www.your-site.com/";

Edit this use your URL to replace http://www.your-site.com/ . In this case, the

18

URL will look like this:

$config["base_url"] =

“http:/www.vendorconnect.com/home/”;

The next is connecting database; need open file autoload.php which is in the same

folder with config.php. Add database in the libraries array that means we need to use

database in this project. If you doing a project do not need database, you can skip this

step.

$aotuload["libraries‟] = array ("database‟);

Then open database.php. This file will contain the settings needed to access your

database. ['hostname'] is the hostname of your database server. ['username']

['password'] are the username and password which are used to connect to the database.

['database'] The name of the database you want to connect to

$db['default']['hostname'] = "hostname"; $db['default']['username'] =

"username"; $db['default']['password'] = "password"; $db['default']

['database'] = "database"; $db['default']['dbdriver'] = "mysql";

$db['default']['pconnect'] = TRUE; $db['default']['db_debug'] = TRUE;

$db['default']['cache_on'] = FALSE; $db['default']['char_set'] = "utf8";

$db['default']['dbcollat'] = "utf8_general_ci";

19

The final step is creating folders for icons, CSS files and jQuery files under

application folder. All the jQuery files can be downloading from the link below.

http://code.jQuery.com/jQuery-1.4.2min.js

20

3.4 Login

After finish those settings, we can start the system development. The first part is login

system. Create a new PHP file on controllers and named it zone, when you name your

file is must be the same name as class of controller with PHP extension. The class and

file name must be match. A controller is similar like a PHP class. Function zone is to

load helpers which will be used on the project. Helper is some groups of functions

which can help you with coding. Each helper file is simply a collection of functions in

a particular category (CodeIgniter helper, referred 22.02.2011). In the project, these

helpers will be used: URL Helpers that assist in creating links, Form Helpers that help

you create form elements, file helper that assist in working with files, date helper that

help you work with dates. Use index function to load index.php from views folder.

public function __construct()

{

parent::__construct();

$this->load->helper(array('url','form'));

$this->load->library(array('form_validation','session','pagination'));

$this->load->database();

$this->load->model('home_login');

$this->session->set_flashdata('message','User Logged In Succesfuly.&#10004;');

}

public function index()

{

$this->log_in();

}

21

/*----login page view----*/

public function log_in()

{

if (isset($this->session->userdata['logged_in']))

{

redirect(base_url()."home/home_view");

}

else

{

//setting up the tabs active link

$data['sub_tab']="home";

//setting up the title

$data['title']="LOGIN";

$this->load->view('templates/header',$data);

$this->load->view('templates/nav',$data);

$this->load->view('home/login');

$this->load->view('templates/footer');

}

}

22

Then, we need to add validation rules and the respective error message and

then if user details are correct then forward to the home page. Function for this

task:

public function login()

{

//get the posted values

if ($this->input->post('btn_login') == "Login")

{

$username = $this->input->post("USERNAME");

$password = $this->input->post("PASSWORD");

//set validations

$this->form_validation->set_rules("USERNAME", "Username",

"required");

$this->form_validation->set_rules("PASSWORD", "Password",

"required");

if($this->form_validation->run() == TRUE)

{

//validation succeeds

//check if username and password is correct

$usr_result = $this->home_login->get_user($username,

$password);

if ($usr_result > 0) //active user record is present

{

//set the session variables

$sessiondata = array(

'username' => $username,

'loginuser' => TRUE

);

$this->session->set_userdata('logged_in',$sessiondata);23

$this->home_view();

}

else

{

//redirect to login page

$this->load->view('home/login_error');

//setting up the tab active link

$data['sub_tab']="home";

//setting up the title

$data['title']="LOGIN";

$this->load->view('templates/header',$data);

$this->load->view('templates/nav',$data);

$this->load->view('home/login');

$this->load->view('templates/footer');

}

}

else

{

//setting up the tab active link

$data['sub_tab']="home";

//setting up the title

$data['title']="LOGIN";

$this->load->view('templates/header',$data);

$this->load->view('templates/nav',$data);

$this->load->view('home/login');

$this->load->view('templates/footer');

}

}

}

24

Figure 4 - Login page

If the format for each input is current, data will post to url: "home/login_model" to

check the user account exists which means the login_pwd function in zone.php. If the

username and password are current, function will return true then you can enter your

blog, otherwise will return false and show the error like username and password were

incorrect or Your account has been disabled.

This process is also protected from sql injection.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class home_login extends CI_Model

{

public function get_user($usr, $pwd)

{

$sql = "select * from manager where USERNAME = ? and PASSWORD = ?";

$query = $this->db->query($sql, array($usr,$pwd));

return $query->num_rows();

}

}?>

25

3.5 Home View

After logging in, the home page will be displayed in which there are two links in the navigation tab, viz. vendor and order.

Figure 5- Home Page

26

3.6 Vendors List

After clicking on the Vendor button in the navigation bar in home screen, the page

will be redirected to Vendors View page(fig. 6) which shows the list of all the

available vendors along with their details. On the right top of this page an "Add

Vendor" button is there and by clicking on it, another page will be opened( fig. 7) and

the admin can add another new vendor if he wants.

Figure 6- Vendors View Page

Figure 7- Add Vendor

27

3.7 Order StatusOn the home page if admin selects the "Order" button in the top navigation bar then he will be redirected to that page(fig. 8) which shows the present status of all the orders in such a way that, if sms and mails are sent to all the vendors of a particular order then the status will be "Completed" else if the same is sent to some of the vendors then it will show "Incomplete" else if the same is sent to none of the vendors then it will show "Not Yet Started". Along with it, on the right top a button "Add Order" is there by which the admin will be redirected to the page(fig. 9) where he can generate the new order with any number of vendors of his choice.

Figure 8- Order Status

Figure 9- Add Order

28

3.8 Order ViewOn clicking the link "view" in the Order Status page, the admin will be redirected to the page(fig. 10) which shows the details of a particular order and contains the connect buttons to send sms and email to a particular vendor. A pdf file is attached with the email which contains the details of the order.

Figure 10- Single order details

29

4 Conclusion

"Vendor-Connect System" is a web application designed on a platform named as CodeIgniter, a PHP Framework. Now-a-days there are various mode of systems to make a connection with vendors like mobile phones, etc. But the communication through a web application is proved to be the cheapest and fastest because of the consistency and there are very less chances of any type of distortion with the data. The idea of the developed Web application was to generate a system which makes a connection to contact vendors. As it is a web application, so the users who have login credentials can only be able to access this application.

The main use of this application is to give the orders to vendors via Email (a pdf file containing order is attached with it) and send the sms to vendors to contact them.

In addition, to the development part, PHP framework is written in PHP that

provides a simplified way to build the build application. In other words, PHP

framework makes application development easier, which help you write code in less

time because you do not have to always modify or debug some parts, it can improve

code quality and reduces a lot of repetitive coding for developers. PHP framework

also helps to build more stable applications especially for PHP beginner who do not

have much experience in this area.

30

5 Discussion

I have been interested in programming since I did the practice job in an IT

company. During my work practice I learn a lot of new things about programming,

such as JavaScript, HTML, CSS, and PHP.

PHP is kind of a server scripting language; it is very easy to learn and use. Many

functions are included without needing any sort of namespace importing. And you do

not even have to write OO code if you do not want to. But PHP's ease of use is also its

downfall. Because there are less restrictions on the structure of the code you write, it's

much easier to write bad code. There is a solution: use a framework. Compare with

other PHP framework, CodeIgniter has the most well-documented and approachable

PHP MVC framework out there. Unlike other PHP frameworks, CodeIgniter works

with both PHP 4 and 5. That makes the lives of someone like me who has to be able to

work seamlessly between the two environments much easier. So I choose CodeIgniter

as the PHP framework which will be used in the project.

Before start the project, I collected a great deal of information and material about

PHP framework (CodeIgniter) from internet and books. After reading these I have

clear framework concept in my mind and made this website by PHP framework. In the

project of my thesis, it can divide into three parts: Information services, Album

service, Message service.

Because I need to make everything by myself even the user interface and the

project is quite huge. Therefore, in the thesis I cannot explain every step of making

the system and also the PHP frameworks is not easy to use for the PHP beginners, it

requires medium level with PHP. So in this thesis I focused more on the main part.

31

During the process of establish the project, I have encountered some problems.

Sometime I have to use JavaScript instead of jQuery. Another problem was I am not

familiar with how to use Codeigniter, always make mistakes in the project. Made a

web application is not that simple as could be expected, but experience can be

achieved during the process.

32

Reference

Electronic Sources:

Bootstrap Components

Available: http://getbootstrap.com/components/

Bootstrap Css

Available: http://getbootstrap.com/css/

Ellislab CodeIgniter User-guide

Available: https://ellislab.com/codeigniter/user-guide/

Stackoverflow for Error handling

Available: http://stackoverflow.com/questions/

Codeigniter

Available: http://Codeigniter.com/

Codeigniter. Helper

Available: http://Codeigniter.com/user_guide/general/helpers.html

33

34

35