Advanced Web Technologies Laboratory Practical File

Practical File
Of
Advanced web Technologies

Submitted by
Aakash Raj
in partial fulfillment for the award of the degree

of
Bachelor of technology
At
Guru Nanak Dev Engineering College

Ludhiana
NOVEMBER & 2017
Signature of the Internal Examiner: Signature of the External Examiner:
Date: Date:
INDEX
S. Objective Page Signature
No No
1 To install and setup the HTML5 based Bootstrap 1
framework and to deploy basic HTML elements
using Bootstrap CSS.
2 To understand and deploy the multicolumn grid 5
layout of Bootstrap.
3 To deploy dierent types of buttons, progress 8
bars, modals and navigation bars using
Bootstrap.
4 To install and setup the CodeIgniter Framework 13
and to understand its MVC architecture.
5 To construct a simple login page using 16
CodeIgniter Framework by changing necessary
configuration and other files.
6 To perform unit testing on the login module 21
constructed using CodeIgniter
7 To install and setup the AngularJS Framework 22
and to deploy dynamic routing based approach.
8 To implement AngularJS Directive based 26
approach.
9 To perform debugging and testing of AngularJS 30
module created using MVC approach.
10 To create and setup the Git repository on 32
Bitbucket using SSH
11 To push all the practical performed to Bitbucket 35
repository.
12 To perform push, clone and patch operation to 37
Bitbucket repository.
University Roll No 1507884
1. To install and setup the HTML5 based Bootstrap

framework and to deploy basic HTML elements using
Bootstrap CSS.
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive,
mobile-first web sites.
What is Bootstrap?
Bootstrap is a free front-end framework for faster and easier web development Responsive
features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables,
navigation, modals, image carousels and many other, as well as optional JavaScript plugins
Bootstrap also gives you the ability to easily create responsive designs
Bootstrap History
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open
source product in August 2011 on GitHub.
Why Use Bootstrap?
Advantages of Bootstrap:
Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox,
Internet Explorer, Safari, and Opera)
Where to Get Bootstrap?
There are two ways to start using Bootstrap on your own web site.
You can:
1. Download Bootstrap from getbootstrap.com
2. Include Bootstrap from a CDN
Downloading Bootstrap
If you want to download and host Bootstrap yourself, go to getbootstrap.com, and follow the
instructions there.
Page No 1
Standard Install
The first thing you need to do is access the getting started page on getBootstrap. Here you will
notice three different download options depending on your level and skill set.
If youre completely new to Bootstrap, youll want to stick with the basic Bootstrap download. This
contains compiled and minified CSS, JavaScript, and fonts. No docs or original source files are
included.
If youre experienced using CSS pre-processors to extend the CSS language, there are two
additional options available. The Source Code installation contains Source Less, JavaScript and font
files. The SASS installation is Bootstrap ported from Less to Sass for easy inclusion in Rails,
Compass, or Sass-only projects.
Bootstrap Download
Once youve downloaded and unpacked the compiled version of Bootstrap, you should see the
following structure in the downloaded folder.
bootstrap/
css/
bootstrap.css
bootstrap.min.css
bootstrap-theme.css
bootstrap-theme.min.css
js/
bootstrap.js
bootstrap.min.js
fonts/
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Page No 2
This is the most basic form of Bootstrap designed for quick drop-in usage to get you started in
nearly any web project. The standard template will reference the .min CSS and JS files. We
recommend creating additional style sheets if you want to add modifications to the CSS.
Source Code Download
If you downloaded and unpacked the Bootstrap source code version, it will contain precompiled
CSS, JavaScript, and font assets, along with source Less, JavaScript, and documentation. In
addition to the files included in the basic download, it also includes the following:
bootstrap/
less/
js/
fonts/
dist/
css/
js/
fonts/
docs/
examples/
Creating the HTML Template

After youve downloaded Bootstrap, open up your favorite text editor. Marc is using Notepad++
(Windows, free) and Im using Coda (Mac OS X). Here are some additional suggestions.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></
script>
</head>
<body>
<div class="container">
<h1> 1. To install and setup the HTML5 based Bootstrap framework and to deploy
basic HTML elements using Bootstrap CSS.</h1>
<pre>
Bootstrap is a free front-end framework for faster and easier web development Responsive
features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
</pre>
<p>Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing
responsive, mobile-first web sites.</p>
<p>Why Use Bootstrap?</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">Easy to use</div>
<div class="col-sm-4" style="background-color:lavenderblush;">Responsive features</
div>
Page No 3
<div class="col-sm-4" style="background-color:lavender;">Mobile-first approach:</div>
</div>
</div>
</body>
</html>
Save the file as index.html in the same folder where you unpacked Bootstrap. Open the
index.html in your favorite web browser and you should see your web styled.
index.html (large size web browser)
index.html (small size web browser)
Page No 4
2. To understand and deploy the multicolumn grid layout

of Bootstrap.
Bootstrap Grid System
Bootstrap's grid system allows up to 12 columns across the page.
If you do not want to use all 12 column individually, you can group the columns together to create
wider columns:
Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size:
On a big screen it might look better with the content organised in three columns, but on a small
screen it would be better if the content items were stacked on top of each other.
Grid Classes
The Bootstrap grid system has four classes:
1. xs (for phones)
2. sm (for tablets)
3. md (for desktops)
4. lg (for larger desktops)
The classes above can be combined to create more dynamic and flexible layouts.
Grid System Rules

Some Bootstrap grid system rules:
Rows must be placed within a .container (fixed-width) or .container-fluid(full-
width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts.
Columns create gutters (gaps between column content) via padding. That padding is offset in
rows for the first and last column via negative margin on .rows
Grid columns are created by specifying the number of 12 available columns you wish to span. For
example, three equal columns would use three .col-sm-4
Page No 5
Basic Structure of a Bootstrap Grid

The following is a basic structure of a Bootstrap grid:
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
</div>
<div class="row">
...
</div>
</div>
So, to create the layout you want, create a container (<div class="container">). Next,
create a row (<div class="row">). Then, add the desired number of columns (tags with
appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for
each row.
Examples of basic Bootstrap grid layouts.

Mixed: Mobile, Tablet And Desktop
<!DOCTYPE html>
<html lang="en">
<head>
bootstrap.min.css">
script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-xs-7 col-sm-6 col-lg-8" style="background-color:red;">.col-xs-7 .col-sm-6
.col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-lg-4" style="background-color:lavender;">.col-
xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
Page No 6
<div class="col-xs-6 col-sm-8 col-lg-10" style="background-color:lavenderblush;">.col-
<div class="col-xs-6 col-sm-4 col-lg-2" style="background-color:lightgrey;">.col-
</div>
<div class="row" style="background-color:lightcyan;">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
</div>
</body>
</html>
lg (for larger desktops)
sm (for tablets)
xs (for phones)
Page No 7
3. To deploy dierent types of buttons, progress bars,

modals and navigation bars using Bootstrap.
BootstrapButtons
Button Styles
Bootstrap provides different styles of buttons:
To achieve the button styles above, Bootstrap has the following classes:
.btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
The following example shows the code for the different button styles:
Example
<!DOCTYPE html>
<html lang="en">
<head>
bootstrap.min.css">
script>
</head>
<body>
<h2>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
Page No 8
<button type="button" class="btn btn-link>Link</button>
</div>
</body>
</html>
The button classes can be used on an <a>, <button>, or <input> element:
BootstrapProgress Bars
Basic Progress Bar
A progress bar can be used to show a user how far along he/she is in a process.
Bootstrap provides several types of progress bars.
A default progress bar in Bootstrap looks like this:
To create a default progress bar, add a .progress class to a <div> element:

Example
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>
Colored Progress Bars

Contextual classes are used to provide "meaning through colors".
The contextual classes that can be used with progress bars are:
.progress-bar-success
.progress-bar-info
.progress-bar-warning
.progress-bar-danger
The following example shows how to create progress bars with the different contextual classes:
Example
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
Page No 9
40% Complete (success)
</div>
</div>
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
50% Complete (info)
</div>
</div>
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
60% Complete (warning)
</div>
</div>
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
70% Complete (danger)
</div>
</div>
BootstrapModal
The Modal Plugin
The Modal plugin is a dialog box/popup window that is displayed on top of the current page:
How To Create a Modal
The following example shows how to create a basic modal:
Example

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-
target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
Page No 10
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
BootstrapNavigation Bar
Navigation Bars
A navigation bar is a navigation header that is placed at the top of the page.
Supported content
Navbars come with built-in support for a handful of sub-components. Choose from the following as
needed:
.navbar-brand for your company, product, or project name.
.navbar-nav for a full-height and lightweight navigation (including support for dropdowns).
.navbar-toggler for use with our collapse plugin and other navigation toggling behaviors.
.form-inline for any form controls and actions.
.navbar-text for adding vertically centered strings of text.
.collapse.navbar-collapse for grouping and hiding navbar contents by a parent
breakpoint.
Heres an example of all the sub-components included in a responsive light-themed navbar that
automatically collapses at the md (medium) breakpoint.
Page No 11
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</
button>
</form>
</div>
</nav>
Page No 12
4. To install and setup the CodeIgniter Framework and

to understand its MVC architecture.
Installation Instructions
CodeIgniter is installed in four steps:
1. Unzip the package.
2. Upload the CodeIgniter folders and files to your server. Normally the index.php file will be at
your root.
3. Open the application/config/config.php file with a text editor and set your base URL. If you
intend to use encryption or sessions, set your encryption key.
4. If you intend to use a database, open the application/config/database.php file with a text editor
and set your database settings.
If you wish to increase security by hiding the location of your CodeIgniter files you can rename the
system and application folders to something more private. If you do rename them, you must open
your main index.php file and set the $system_path and $application_foldervariables at the top of
the file with the new name youve chosen.
For the best security, both the system and any application folders should be placed above web root
so that they are not directly accessible via a browser. By default, .htaccess files are included in each
folder to help prevent direct access, but it is best to remove them from public access entirely in case
the web server configuration changes or doesnt abide by the .htaccess.
If you would like to keep your views public it is also possible to move the views folder out of your
application folder.
After moving them, open your main index.php file and set the $system_path, $application_folder
and $view_folder variables, preferably with a full path, e.g. /www/MyUser/system.
Page No 13
One additional measure to take in production environments is to disable PHP error reporting and
any other development-only functionality. In CodeIgniter, this can be done by setting
the ENVIRONMENT constant, which is more fully described on the security page.
Getting Started With CodeIgniter
Any software application requires some effort to learn. Weve done our best to minimise the
learning curve while making the process as enjoyable as possible.
The first step is to install CodeIgniter, then read all the topics in the Introduction section of the
Table of Contents.
Next, read each of the General Topics pages in order. Each topic builds on the previous one, and
includes code examples that you are encouraged to try.
Once you understand the basics youll be ready to explore the Class Reference and Helper
Reference pages to learn to utilise the native libraries and helper files.
Feel free to take advantage of our Community Forums if you have questions or problems, and
our Wiki to see code examples posted by other users.
Application Flow Chart
The following graphic illustrates how data flows throughout the system:
%
1. The index.php serves as the front controller, initialising the base resources needed to run
CodeIgniter.
2. The Router examines the HTTP request to determine what should be done with it.
3. If a cache file exists, it is sent directly to the browser, bypassing the normal system execution.
4. Security. Before the application controller is loaded, the HTTP request and any user submitted
data is filtered for security.
Page No 14
5. The Controller loads the model, core libraries, helpers, and any other resources needed to
process the specific request.
6. The finalised View is rendered then sent to the web browser to be seen. If caching is enabled,
the view is cached first so that on subsequent requests it can be served.
Model-View-Controller
CodeIgniter is based on the Model-View-Controller development pattern. MVC is a software
approach that separates application logic from presentation. In practice, it permits your web pages
to contain minimal scripting since the presentation is separate from the PHP scripting.
The Model represents your data structures. Typically your model classes will contain functions
that help you retrieve, insert, and update information in your database.
The View is the information that is being presented to a user. A View will normally be a web
page, but in CodeIgniter, a view can also be a page fragment like a header or footer. It can also be
an RSS page, or any other type of page.
The Controller serves as an intermediary between the Model, the View, and any other resources
needed to process the HTTP request and generate a web page.
CodeIgniter has a fairly loose approach to MVC since Models are not required. If you dont need
the added separation, or find that maintaining models requires more complexity than you want, you
can ignore them and build your application minimally using Controllers and Views. CodeIgniter
also enables you to incorporate your own existing scripts, or even develop core libraries for the
system, enabling you to work in a way that makes the most sense to you.
Design and Architectural Goals
Our goal for CodeIgniter is maximum performance, capability, and flexibility in the smallest,
lightest possible package.
To meet this goal we are committed to benchmarking, re-factoring, and simplifying at every step of
the development process, rejecting anything that doesnt further the stated objective.
From a technical and architectural standpoint, CodeIgniter was created with the following
objectives:
Dynamic Instantiation. In CodeIgniter, components are loaded and routines executed only when
requested, rather than globally. No assumptions are made by the system regarding what may be
needed beyond the minimal core resources, so the system is very light-weight by default. The
events, as triggered by the HTTP request, and the controllers and views you design will determine
what is invoked.
Loose Coupling. Coupling is the degree to which components of a system rely on each other. The
less components depend on each other the more reusable and flexible the system becomes. Our
goal was a very loosely coupled system.
Component Singularity. Singularity is the degree to which components have a narrowly focused
purpose. In CodeIgniter, each class and its functions are highly autonomous in order to allow
maximum usefulness.
CodeIgniter is a dynamically instantiated, loosely coupled system with high component singularity.
It strives for simplicity, flexibility, and high performance in a small footprint package.
Signature of class teacher
Date:
Page No 15
5. To construct a simple login page using CodeIgniter

Framework by changing necessary configuration and
other files.
Requirements
CodeIgniter framework. By the time this tutorial was done, the latest version was 2.0.2
Any Apache/PHP/MySQL stack. You can install the applications independently, or install one of
those packages that have all of them bundled together.
Create the database
For this tutorial, you need a MySQL database with the following table:
CREATE TABLE ùsers` (
ìd` tinyint(4) NOT NULL AUTO_INCREMENT,
ùsername` varchar(10) NOT NULL,
`password` varchar(100) NOT NULL,
PRIMARY KEY (ìd`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
Remember also to add at least one user. Well add one user called bob with password superscript.
insert into users (username, password) values ('bob', MD5(supersecret'));
Configure CodeIgniter
Database Access
Update the file application/config/database.php in your CodeIgniter installation with your
database info:
$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'yourdbusername';
$db['default']['password'] = 'yourdbpassword';
$db['default']['database'] = 'yourdbname';
Default Controller
We need to tell CodeIgniter to land into our login page instead of the default welcome page. Update
the file application/config/routes.php in your CodeIgniter installation with you controllers name.
Well call our landing controller login.
$route['default_controller'] = login";
Default Libraries
In the file application/config/autoload.php you can configure the default libraries you want to
load in all your controllers. For our case, well load the database and session libraries, since we
want to handle user sessions, and also the URL helper for internal link generation
$autoload['libraries'] = array('database','session');
...
$autoload['helper'] = array('url');
Encryption Key
When you use the session library, you need to set the encryption_key in the file application/
config/config.php.
$config['encryption_key'] = 'REALLY_LONG_NUMBER'
Page No 16
The Code
Here are the actual Views, Controllers and Model we are using for the login functionality.
User Model (application/models/user.php)
<?php
Class User extends CI_Model
{
function login($username, $password)
{
$this -> db -> select('id, username, password');
$this -> db -> from('users');
$this -> db -> where('username', $username);
$this -> db -> where('password', MD5($password));
$this -> db -> limit(1);
$query = $this -> db -> get();
if($query -> num_rows() == 1)
{
return $query->result();
}
else
{
return false;
}
}
}
?>
Login Controller (application/controllers/login.php)
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Login extends CI_Controller {
function __construct()
{
parent::__construct();
}
function index()
{
$this->load->helper(array('form'));
$this->load->view('login_view');
}
}
?>
Login View (application/views/login_view.php)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Login with CodeIgniter</title>
</head>
<body>
<h1>Simple Login with CodeIgniter</h1>
<?php echo validation_errors(); ?>
<?php echo form_open('verifylogin'); ?>
Page No 17
<label for="username">Username:</label>
<input type="text" size="20" id="username" name="username"/>
<br/>
<label for="password">Password:</label>
<input type="password" size="20" id="passowrd" name="password"/>
<br/>
<input type="submit" value="Login"/>
</form>
</body>
</html>
VerifyLogin Controller (application/controllers verifylogin.php)
This controller does the actual validation of the fields and checks the credentials against the
database.
class VerifyLogin extends CI_Controller {
{
$this->load->model('user','',TRUE);
}
function index()
{
//This method will have the credentials validation
$this->load->library('form_validation');
$this->form_validation->set_rules('username', 'Username', 'trim|required|xss_clean');
$this->form_validation->set_rules('password', 'Password', 'trim|required|xss_clean|
callback_check_database');
if($this->form_validation->run() == FALSE)
{
//Field validation failed. User redirected to login page
$this->load->view('login_view');
}
else
{
//Go to private area
redirect('home', 'refresh');
}
}
function check_database($password)
{
//Field validation succeeded. Validate against database
$username = $this->input->post('username');
//query the database
$result = $this->user->login($username, $password);
if($result)
{
$sess_array = array();
foreach($result as $row)
{
$sess_array = array(
'id' => $row->id,
Page No 18
'username' => $row->username
);
$this->session->set_userdata('logged_in', $sess_array);
}
return TRUE;
}
else
{
$this->form_validation->set_message('check_database', 'Invalid username or
password');
return false;
}
}
}
?>
Home Controller (application/controllers/home.php)
This is the private page (only authenticated users can access it).
session_start(); //we need to call PHP's session object to access it through CI
class Home extends CI_Controller {
{
}
function index()
{
if($this->session->userdata('logged_in'))
{
$session_data = $this->session->userdata('logged_in');
$data['username'] = $session_data['username'];
$this->load->view('home_view', $data);
}
else
{
//If no session, redirect to login page
redirect('login', 'refresh');
}
}
function logout()
{
$this->session->unset_userdata('logged_in');
session_destroy();
redirect('home', 'refresh');
}
}
?>
Page No 19
Home Page View (application/views/home_view.php)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Login with CodeIgniter - Private Area</title>
</head>
<body>
<h1>Home</h1>
<h2>Welcome <?php echo $username; ?>!</h2>
<a href="home/logout">Logout</a>
</body>
</html>
Date:
Page No 20
6 To perform unit testing on the login module

constructed using CodeIgniter
Unit testing is an approach to software development in which tests are written for each function in
your application. If you are not familiar with the concept you might do a little googling on the
subject.
CodeIgniters Unit Test class is quite simple, consisting of an evaluation function and two result
functions. Its not intended to be a full-blown test suite but rather a simple mechanism to evaluate
your code to determine if it is producing the correct data type and result.
The Code
Unit testing Controller (application/controllers/Testunit.php)
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Testunit extends CI_Controller {
public function __construct()
{
$this->load->library("unit_test");
}
private function division($a,$b){
return $a/$b;
}
public function index(){
echo "Using Unit Test Library";
$test = $this->division(6,3);
$expected_result = 2;
$test_name = "Division test function";
echo $this->unit->run($test,$expected_result,$test_name);
}
}
localhost/CodeIgniter/Testunit
Date:
Page No 21
7. To install and setup the AngularJS Framework and to

deploy dynamic routing based approach.
AngularJS Download and Setup
Downloading and Installing AngularJS is extremely easy and takes no time or money.Its open
source and hence available free from their website angularjs.org
Create a new folder to store the AngularJS JavaScript Files, and use the <script> element to link
the files on the document.
AngularJS : Installing AngularJS using CDN
You can also serve AngularJS files using a Content Distribution Newtwork (CDN) , instead of
having the files on the local server.
To use the Content Distribution Network(CDN) you simply need to put the following script in
the <head> element
The latest stable version at the time of writing this is version 1.3x(stable)
The advantage of using Content Delivery Networks is that they provide good speed and
performance, and are bandwidth friendly. AngularJS files are hosted for free on large Web
Organisations like Google, Microsoft , Yahoo etc.
Syntax: AngularJS files Hosted on Google CDN
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
AngularJS : Installing AngularJS on your Server

Go to the website angularjs.org and click on Download button which appears right in the front
page.Click on that you will see a Dialog Box like below.
To choose a minified version, select 1.3.x(legacy) for the branch option and the Minified for the
build option.
When the Download is completed move the .js files into the angularJS folder
There you go, you have downloaded and installed.
Page No 22
INSTALLING ANGULARJS USING BOWER

In this section, we are going to AngularJS and twitter bootstrap using bower. Twitter bootstrap will
add a bit of beauty to our examples. You can read more about twitter bootstrap from the official
website Am working on a windows machine and I have XAMPP already installed. The good news
is the knowledge in this tutorial is not dependent on the platform. The knowledge still applies to
other platforms.
1. create a new directory in the web root
2. install the requirements frameworks
Step 1: Project Directory
1. You can directly create the folder angular-js in drive C:\xampp\htdocs. For me, I will create
a new project using NetBeans IDE
Step 2: Installing Required Frameworks
1. Open the command prompt / terminal and browser to the project root directory. Note: I have
Cygwin installed. This allows me to run commands from the terminal in NetBeans IDE. I hate
switching between windows just to run commands.
2. On windows, run the following command to browser to the project root directory
cd C:\xampp\htdocs\angular-js
Run the following command to install the required frameworks using bower
bower install angular
What is Routing in AngularJS?

If you want to navigate to different pages in your application, but you also want the application to
be a SPA (Single Page Application), with no page reloading, you can use the ngRoute module.
The ngRoute module routes your application to different pages without reloading the entire
application.
Page No 23
Example:
Navigate to "red.htm", "green.htm", and "blue.htm":
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></
script>
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to
"main.htm"</p>
</body>
</html>
Main Page
Page No 24
Red
Green
Blue
Date:
Page No 25
8. To implement AngularJS Directive based approach.

AngularJS lets you extend HTML with new attributes called Directives.
AngularJS has a set of built-in directives which offers functionality to your applications.
AngularJS also lets you define your own directives.
AngularJS Directives
AngularJS directives are extended HTML attributes with the prefix ng-.
The ng-app directive initializes an AngularJS application.
The ng-init directive initializes application data.
The ng-model directive binds the value of HTML controls to application data.
Read about all AngularJS directives in our AngularJS directive reference.
Example
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-init=firstName='Virus' ">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
</body>
</html>
The ng-app directive also tells AngularJS that the <div> element is the "owner" of the
AngularJS application.
Data Binding
The {{ firstName }} expression, in the example above, is an AngularJS data binding expression.
Data binding in AngularJS binds AngularJS expressions with AngularJS data.
{{ firstName }} is bound with ng-model="firstName".
In the next example two text fields are bound together with two ng-model directives:
Page No 26
Example
<!DOCTYPE html>
<html>
<body>
<div data-ng-app="" data-ng-init="quantity=1;price=5">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">
<p><b>Total in dollar:</b> {{quantity * price}}</p>
</div>
</body>
</html>
Design:
The application works, but could use a better design. We use the CSS stylesheet to style our
application.
Add the CSS stylesheet, and include the proper classes throughout the application, and the result
will be the same as the shopping list at the top of this page.
Example
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="/w3css/4/w3.css">
<body>
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.errortext = "";
if (!$scope.addMe) {return;}
if ($scope.products.indexOf($scope.addMe) == -1) {
$scope.products.push($scope.addMe);
} else {
Page No 27
$scope.errortext = "The item is already in your shopping list.";
}
}
$scope.removeItem = function (x) {
$scope.errortext = "";
$scope.products.splice(x, 1);
}
});
</script>
<div ng-app="myShoppingList" ng-cloak ng-controller="myCtrl" class="w3-card-2 w3-
margin" style="max-width:400px;">
<header class="w3-container w3-light-grey w3-padding-16">
<h3>My Shopping List</h3>
</header>
<ul class="w3-ul">
<li ng-repeat="x in products" class="w3-padding-16">{{x}}<span ng-
click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right"></
span></li>
</ul>
<div class="w3-container w3-light-grey w3-padding-16">
<div class="w3-row w3-margin-top">
<div class="w3-col s10">
<input placeholder="Add shopping items here" ng-model="addMe" class="w3-input
w3-border w3-padding">
</div>
<div class="w3-col s2">
<button ng-click="addItem()" class="w3-btn w3-padding w3-green">Add</button>
</div>
</div>
<p class="w3-text-red">{{errortext}}</p>
</div>
</div>
</body>
</html>
Page No 28
Adding a new List
List in removing Milk
Date:
Page No 29
9. To perform debugging and testing of AngularJS

module created using MVC approach.
Installing Batarang for AngularJS
Batarang is a Chrome Extension for debugging AngularJS applications. Before we continue
from our previous tutorial in the AngularJS tutorial series, we will show you how to install Batarang
because we will be using it.
1. Using Chrome, do a web search for batarang chrome extension for angular and it should take
you to Batarang AngularJS download in the Chrome Web Store. Click on the button with the plus
sign that says free
2. It will prompt you to confirm that you are installing an extension for Chrome.
And it is now installed.
Page No 30
3. If you ever want to uninstall an extension, click the trash icon next to the extension in Tools ->
Extensions in Chrome.
Running the code from the previous practical linked here, we see that when the add button is
clicked, we write a message to the console revealed in Chrome when you go to Tools -> Developer
Tools.
Date:
Page No 31
10. To create and setup the Git repository on Bitbucket

using SSH.
Create a Git repository
As our new Bitbucket space station administrator, you need to be organized. When you make files
for your space station, youll want to keep them in one place and shareable with teammates, no
matter where they are in the universe. With Bitbucket, that means adding everything to a repository.
Lets create one!
Step 1. Create the repository
Initially, the repository you create in Bitbucket is going to be empty without any code in it. That's
okay because you will start adding some files to it soon. This Bitbucket repository will be the
central repository for your files, which means that others can access that repository if you give them
permission. After creating a repository, you'll copy a version to your local systemthat way you
can update it from one repo, then transfer those changes to the other.
Do the following to create your repository:

1. From Bitbucket, click the + icon in the global sidebar and select Repository.
Bitbucket displays the Create a new repository page. Take some time to review the dialog's
contents. With the exception of the Repository type, everything you enter on this page you can
later change.
Page No 32
2. Enter BitbucketStationLocations for the Name field.
Bitbucket uses this Name in the URL of the repository. For example, if the user the_best has a
repository called awesome_repo, the URL for that repository would be https://github.com/
aakash416/AWT.git
3. For Access level, leave the This is a private repository box checked.
A private repository is only visible to you and those you give access to. If this box is unchecked,
everyone can see your repository.
4. Pick Git for the Repository type. Keep in mind that you can't change the repository type after
you click Create repository.
5. Click Create repository.
Bitbucket creates your repository and displays its Overview page.
SSH access keys for system use
Bitbucket Server administrators can set up SSH access keys to secure the Git operations that other
systems perform on the repositories managed in Bitbucket Server. Using access keys avoids the
need to store user credentials on another system, and means that the other system doesn't have to
use a specific user account in Bitbucket Server. For example, access keys can be used to allow your
build and deploy server to authenticate with Bitbucket Server to check out and test source code.
Project admins can add and manage SSH access keys for a project. The keys apply to every
repository in the project.
Repository admins can add and manage SSH access keys for a particular repository.
The access key can allow either read-only or read-write Git operations.
Add an SSH access key to either a Bitbucket Server project or repository
You simply copy the public key, from the system for which you want to allow access, and paste it
into Bitbucket Server.
1. The public key. One approach is to display the key on-screen using cat, and copy it from there:
cat < ~/.ssh/id_rsa.pub
2. Now, in Bitbucket Server, go to the Settings tab for the project or repository.
3. Click Access keys and then Add key.
4. Choose the Read permission, for git pull or git clone operations for example, where
you want to be sure that the system will not be able to write back to the Bitbucket Server repository.
Choose the Read / Write permission, for git push or git merge operations for example,
where you may want your build system to merge successful feature branch builds to the default
branch in the Bitbucket Server repository, or so that deployments can be tagged.
Page No 33
Note that if you attempt to add a key already present on a project or repository but with a different
permission to what it currently has, the permission will simply be updated.
5. Paste the key into the text box and click Add key.
Bitbucket Server license implications
System access keys do not require an additional Bitbucket Server user license.
Reusing access keys
You can use the same SSH access key for multiple repositories or projects.
Keys used for personal user accounts can't be re-used as a project or repository system access
key, and keys used as a project or repository access key can't be re-used for user accounts.
Deleting an access key
You can delete an access key by going to Settings > Access keys for the repository, and clicking the
cross for the key (the cross only appears when you move the mouse pointer there):
If the key is used for multiple projects or repositories, you can select the other places that you want
the key to be deleted from:
Date:
Page No 34
11. To push all the practical performed to Bitbucket

repository.
Push code to Bitbucket
To get your code changes into Bitbucket, you work on them locally before you add, commit, and
push them to Bitbucket.
Push changes to a Git repository
1. Create your new files or edit existing files in your local project directory.
2. From the command line, enter cd <path_to_local_repo> so that you can enter
commands for your repository.
3. Enter git add --all at the command line to add the files or changes to the repository.
4. Enter git commit -m '<commit_message>' at the command line to commit new
files/changes to the local repository. For the <commit_message> , you can enter anything
that describes the changes you are committing.
5. Enter git push at the command line to copy your files from your local repository to
Bitbucket.
6. If prompted for authentication, enter your Bitbucket password.
Push changes to a Mercurial repository
1. Create your new files or edit existing files in your local project directory.
2. From the command line, enter cd <path_to_local_repo> so that you can enter
commands for your repository.
3. If you created a new file as part of your changes, enter hg add at the command line to add the
file to the repository. If you didn't create any new files, continue to the next step.
4. Enter hg commit -m '<commit_message>'at the command line to commit new files/
changes to the local repository. For the <commit_message>, you can enter anything that
describes the changes you are committing.
5. Enter hg push at the command line to copy your files from your local repository to Bitbucket.
6. If prompted for authentication, enter your Bitbucket password.
Page No 35
Date:
Page No 36
12. To perform push, clone and patch operation to

Bitbucket repository.
Push Operation
The Push operation stores data permanently to the Git repository. After a successful push operation,
other developers can see aakash416 changes.
He executes the git log command to view the commit details.
[aakashraj416@gmail.com project]$ git log
The above command will produce the following result:

commit d1e19d316224cddc437e3ed34ec3c931ad803958
Author: Aakash Raj <aakashraj416@gmail.com>
Date: Fri Nov 10 08:05:26 2017 +0530
Changed return type of my_strlen to size_t
Before push operation, he wants to review his changes, so he uses the git show command to review
his changes.
[aakashraj416@gmail.com project]$ git show d1e19d316224cddc437e3ed34ec3c931ad803958
The above command will produce the following result:
commit d1e19d316224cddc437e3ed34ec3c931ad803958
Author: Aakash Raj <aakashraj416@gmail.com>
Date: Fri Nov 10 08:05:26 2017 +0530
Changed return type of my_strlen to size_t
diff --git a/string.c b/string.c

new file mode 100644
index 0000000..7da2992
--- /dev/null
+++ b/string.c
@@ -0,0 +1,24 @@
+#include <stdio.h>
+
+size_t my_strlen(char *s)
+
{
+
char *p = s;
+
+
while (*p)
+ ++p;
+ return (p -s );
+
}
+
+int main(void)
+
{
+ int i;
Page No 37
+ char *s[] =
{
+ "Virus",
+ "AWT"
+
};
+
+
+
for (i = 0; i < 2; ++i)
printf("string lenght of %s = %lu\n", s[i], my_strlen(s[i]));
+
+
return 0;
+
}
Clone Operation
git clone is primarily used to point to an existing repo and make a clone or copy of that repo at in a
new directory, at another location. The original repository can be located on the local filesystem or
on remote machine accessible supported protocols. The git clone command copies an existing Git
repository. This is sort of like SVN checkout, except the working copy is a full-fledged Git
repositoryit has its own history, manages its own files, and is a completely isolated environment
from the original repository.
git clone ssh://aakashraj416@gmail.com/path/to/my-project.git
cd my-project
# Start working on the project
1. Cloning to a specific folder
git clone <repo> <directory>
2. Cloning a specific tag
git clone -branch <tag> <repo>
3. Shallow clone
git clone -depth=1 <repo>
Patch Operation
aakashraj416 uses the Git format-patch command to create a patch for the latest commit. If you
want to create a patch for a specific commit, then use COMMIT_ID with the format-patch
command.
[aakashraj416@gmail.com project]$ pwd
/home/AWT/aakashraj416/project/src
[aakashraj416@gmail.com src]$ git status -s
M string_operations.c
?? string_operations
[aakashraj416@gmail.com src]$ git add string_operations.c
[aakashraj416@gmail.com src]$ git commit -m "Added my_strcat function"
[master b4c7f09] Added my_strcat function
1 files changed, 13 insertions(+), 0 deletions(-)
[aakashraj416@gmail.com src]$ git format-patch -1
0001-Added-my_strcat-function.patch
Page No 38
The above command creates .patch files inside the current working directory. Tom can use this
patch to modify his files. Git provides two commands to apply patches git amand git apply,
respectively. Git apply modifies the local files without creating commit, while git am modifies the
file and creates commit as well.
To apply patch and create commit, use the following command:
[aakashraj416@gmail.com src]$ pwd
/home/tom/top_repo/project/src
[aakashraj416@gmail.com src]$ git diff
[aakashraj416@gmail.com src]$ git status s
[aakashraj416@gmail.com src]$ git apply 0001-Added-my_strcat-function.patch
[aakashraj416@gmail.com src]$ git status -s
M string_operations.c
?? 0001-Added-my_strcat-function.patch
The patch gets applied successfully
Date:
Page No 39

Advanced Web Technologies Laboratory Practical File

Uploaded by

Document Information

Copyright

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Advanced Web Technologies Laboratory Practical File

Uploaded by

Copyright:

Practical File

Advanced web Technologies

in partial fulfillment for the award of the degree

Guru Nanak Dev Engineering College

Signature of the Internal Examiner: Signature of the External Examiner:

1. To install and setup the HTML5 based Bootstrap

Creating the HTML Template

index.html (large size web browser)

index.html (small size web browser)

2. To understand and deploy the multicolumn grid layout

Grid System Rules

Basic Structure of a Bootstrap Grid

Examples of basic Bootstrap grid layouts.

lg (for larger desktops)

3. To deploy dierent types of buttons, progress bars,

To create a default progress bar, add a .progress class to a <div> element:

Colored Progress Bars

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">

4. To install and setup the CodeIgniter Framework and

Signature of class teacher

5. To construct a simple login page using CodeIgniter

Home Page View (application/views/home_view.php)

Signature of class teacher

6 To perform unit testing on the login module

Signature of class teacher

7. To install and setup the AngularJS Framework and to

AngularJS : Installing AngularJS on your Server

INSTALLING ANGULARJS USING BOWER

What is Routing in AngularJS?

Signature of class teacher

8. To implement AngularJS Directive based approach.

Adding a new List

List in removing Milk

Signature of class teacher

9. To perform debugging and testing of AngularJS

And it is now installed.

Signature of class teacher

10. To create and setup the Git repository on Bitbucket

Do the following to create your repository:

Add an SSH access key to either a Bitbucket Server project or repository

Signature of class teacher

11. To push all the practical performed to Bitbucket

Signature of class teacher

12. To perform push, clone and patch operation to

The above command will produce the following result:

Changed return type of my_strlen to size_t

diff --git a/string.c b/string.c

The patch gets applied successfully

Signature of class teacher

You might also like