Professional Documents
Culture Documents
Advanced Web Technologies Laboratory Practical File
Advanced Web Technologies Laboratory Practical File
Of
Aakash Raj
Bachelor of technology
At
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
Page No 1
University Roll No 1507884
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
University Roll No 1507884
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/
<!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
University Roll No 1507884
<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.
Page No 4
University Roll No 1507884
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.
Page No 5
University Roll No 1507884
Page No 6
University Roll No 1507884
<div class="col-xs-6 col-sm-8 col-lg-10" style="background-color:lavenderblush;">.col-
xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-lg-2" style="background-color:lightgrey;">.col-
xs-6 .col-sm-4 .col-lg-2</div>
</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>
sm (for tablets)
xs (for phones)
Page No 7
University Roll No 1507884
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>
<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">
<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
University Roll No 1507884
<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:
The following example shows how to create progress bars with the different contextual classes:
Example
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:40%">
Page No 9
University Roll No 1507884
40% Complete (success)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (info)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width: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
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-
target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<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
University Roll No 1507884
<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
University Roll No 1507884
Page No 12
University Roll No 1507884
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
University Roll No 1507884
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
University Roll No 1507884
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.
Date:
Page No 15
University Roll No 1507884
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
University Roll No 1507884
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
University Roll No 1507884
<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.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class VerifyLogin extends CI_Controller {
function __construct()
{
parent::__construct();
$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
University Roll No 1507884
'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).
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
session_start(); //we need to call PHP's session object to access it through CI
class Home extends CI_Controller {
function __construct()
{
parent::__construct();
}
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
University Roll No 1507884
Date:
Page No 20
University Roll No 1507884
localhost/CodeIgniter/Testunit
Date:
Page No 21
University Roll No 1507884
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>
Page No 23
University Roll No 1507884
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.min.js"></script>
<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
University Roll No 1507884
Red
Green
Blue
Date:
Page No 25
University Roll No 1507884
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
University Roll No 1507884
Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<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
University Roll No 1507884
$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
University Roll No 1507884
Date:
Page No 29
University Roll No 1507884
2. It will prompt you to confirm that you are installing an extension for Chrome.
Page No 30
University Roll No 1507884
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
University Roll No 1507884
contents. With the exception of the Repository type, everything you enter on this page you can
later change.
Page No 32
University Roll No 1507884
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.
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
University Roll No 1507884
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
University Roll No 1507884
Page No 35
University Roll No 1507884
Date:
Page No 36
University Roll No 1507884
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
Page No 37
University Roll No 1507884
+ 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
University Roll No 1507884
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
Date:
Page No 39