1

Industrial Training
On

Web Development

SUBMITTED
BY

Rohan Prabhu CCE ‘B’

160953006 rohan.prabhu05@gmail.com
01 9483927247

Under the Guidance of:

Sharol Salomy Dsouza
Managing Director
Trinix Technologies Pvt Ltd

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

October 2019
2
 3

Table of contents

Acknowledgement
4
Abstract 5
Details of the organization
6
Information acquired during the study 7-17
period
 Front End 7-15
 Back End
15-17
Conclusion
18
References
19
 4

Acknowledgement:

I have completed my Web Development internship at Trinix Technologies Pvt

Ltd, Mangalore from 3rd June to 2nd July. My internship report would not have
been possible without contribution of few people. At first I desire to express my
deepest sense of gratitude to Sharol Salomy Dsouza, Managing director of
Trinix Technologies Pvt Ltd, Mangalore for her generous help and day to day
suggestion. Next I would like to show my gratitude towards Mohammed Anis,
Software Developer at Trinix Technologies Pvt Ltd for guiding me during my
internship period. They have been extremely supportive to me. I cannot thank
them enough. They have explained everything I asked for in detail. Throughout
the time they were never impatient and been there all the time. I am really
grateful to them for their supportive and friendly behavior.
 5

Abstract:

Website Design and Development were the main objectives of this internship.
There are several programming languages used to develop a web based
application or software. Some of them are only used for the frontend and
backend design of the software. For example- HTML, CSS, Bootstrap
Framework etc. Some other programming languages that are used to
develop the dynamic functions of the software or application are PHP, Java
etc. Nowadays some frameworks are vastly used. Frameworks are basically
structured programming by using Model, View, and Controller. It is also called
as MVC. If we develop web based applications it can be accessed from
anywhere around the world. It is very helpful for our daily life and also an
interesting field with a lot of advancements coming every now and then. This is
why I chose "WEBSITE DESIGN AND DEVELOPMENT" as my field.
Working in Trinix Technologies Pvt Ltd added a huge experience in my
upcoming career. Solving real life problems was another key issue. This report
takes us through all the details of WEBSITE DESIGN AND DEVELOPMENT
knowledge and experience gathered during my internship period.
 6

1. Details of the organization:

1.1 Overview:

Trinix Technologies private limited is a software company located in Mangalore, India. It

was founded by Sharol Salomy Preema Dsouza, a software engineer from Srinivas
School of Engineering, Mangalore. Trinix Technologies is an established IT Solutions
Company focuses on delivering real time web applications, Mobile applications and
solutions.
Trinix Technologies is just a bud, but blossoms every day to fulfil the dreams of
its clients. In a short time, it has managed to build a great rapport with foreign clients
who are full of praise and encouragement and have expressed happiness for good and
timely services rendered.
Trinix Technologies also provides internship and workshop programs where
students will gain knowledge on how to build websites and applications which will help
future engineers to gain hands on experience before getting into career.

1.2 Services:

 Web solutions, web logo designing.

 Mobile applications: Android, IOS application development.
 Desktop Application: Windows, WPF application development.
 Existing application maintenance.
 7

2. Information acquired during the study period:

2.1 Languages Used:

Front End:

 HTML  JavaScript
 CSS  AJAX
 Bootstrap  JQuery

Back End:
 PHP
 MySQL

2.2 Software Configuration:

Operating System: Microsoft Windows XP or Higher
Browser: Any Windows support browser with latest updates.

2.3 Front-End details:

HTML: Basic HTML (Tags, Element, Attributes, Paragraphs, etc.), HTML Forms

CSS: Basic CSS (selector, internal, external, Inline, Class, Id, Background, font, Text,
Padding, Margin, Border), Advance CSS (border-radius, opacity, cursor, layers, position,
display, float, gradient)

Bootstrap 4: Environment Setup, Grid System, Tables, Forms, Buttons,

Images, Dropdown, Button group, Navigation Element, Bootstrap plug-ins (Transition,
Modal, Dropdown, Tab, Tooltip, Alert, Button)

JavaScript: Basic JavaScript (Syntax, Operators, Variables, Events, Alert, Prompt,

Date), JavaScript String (Strings, Length, etc.), JavaScript advanced (getElementbyId,
InnerHTML, querySelector, querySelectorAll, etc.)
 8

I used HTML5, CSS3 and Bootstrap 4 to design the front-end UI of the

Websites. We were asked to develop a website using the above technologies. I made use
of various functionalities of Bootstrap like Carousel Slider, Jumbotron etc.

index.php
<?php include("inc/session.php"); ?>
<!DOCTYPE html>
<html lang="en">

<head>
<?php include("inc/head.php"); ?>
<?php include("inc/messages.php"); ?>
</head>

<body>

<?php include("inc/menu.php"); ?>

<div id="carouselExampleIndicators" class="carousel slide page-content" data-

ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-
to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/insta1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/insta2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/insta3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-
prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-
next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<br>
<div class="container bodyContainer">
<div class="row">
<div class="col-md-4">

<img src="img/three2.jpg" class="img-thumbnail" alt="img1" />

</div>
<div class="col-md-8 parapd">
<p>Leading the charge by offering transparency from Mine to Market. The curre
nt diamond supply chain has to rely on intermediaries on every step, which adds time and cost
 9

and gives a huge scope for fraudulent activities. CARATE having technologically advanced qua
lity management facility solves the mentioned problems by connecting small and medium scaled
retailers to manufacturers through the e-commerce platform. </p>

</div>
</div>
<br>
<div class="row">
<div class="col-md-4">
<img src="img/three3.jpg" class="img-thumbnail" alt="img1" />
</div>
<div class="col-md-4">
<img src="img/heather-mount-607131-unsplash.jpg" class="img-
thumbnail" alt="img1" />
</div>
<div class="col-md-4">
<img src="img/three1.jpg" class="img-thumbnail" alt="img1" />
</div>
</div>

<br>
<div class="borderr card-body bg-dark">
<h5>Reach out to Us</h5>
</div>
<br>
<div class="row">

<div class="col-md-6 ">

<h5>Address</h5>
<p>
"CARATE", Near Veerbhadra Temple, Kinimulky, Udupi

</p>
</div>

<div class="col-md-6">

<form action="user_val.php?query" name="" method="post" enctype="multipart/fo

rm-data">

<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="text" class="form-control" name="userName" aria-
describedby="name" placeholder="Enter Name">

</div>
<div class="form-group">
<label for="exampleInputPassword1">Email-ID</label>
<input type="email" class="form-
control" name="userEmail" placeholder="Enter Email">
</div>
<div class="form-group">
<label>Meassage/Query</label>
<textarea rows="3" name="userMessage" class="form-
control" required placeholder="Message/Queries.."></textarea>

</div>
<div class="form-group">

<input type="Submit" name="btnSubmit" value="Submit" class="btn-

dark btn-lg">
 10

<input type="reset" name="btnreset" value="Clear" class="btn-

dark btn-lg">

</div>
</form>
</div>
<br>
</div>
</div>
<?php include("inc/bottom.php"); ?>
</body>

</html>
 11

signup.php

<?php// include("inc/session.php"); ?>

<!DOCTYPE html>
<html lang="en">

<head>
<?php include("inc/head.php"); ?>
</head>

<body>

<?php include("inc/menu.php"); ?>

<div class="container bodyContainer">

<div class="row">
<div class="col-md-6 col-centered">

<h3 class="text-center">Register</h3>
<form action="user_val.php?add" name="" method="post" enctype="multipart/form-
data">
<div class="form-group">
<label >Enter User Name</label>
<input type="text" name="u_name" class="form-
control" required placeholder="User Name">

</div>
<div class="form-group">
<label >Enter Company Name</label>
<input type="text" name="c_name" class="form-
control" required placeholder="Company Name">

</div>
<div class="form-group">
<label >Enter User Email</label>
 12

<input type="email" name="u_email" class="form-

control" required placeholder="User Email">

</div>
<div class="form-group">
<label >Enter User Password</label>
<input type="password" name="u_password" class="form-
control" required placeholder="User Password">

</div>
<div class="form-group">
<label >Enter User Phone</label>
<input type="number" name="u_phone" class="form-
control" required placeholder="User Phone">

</div>
<div class="form-group">
<label >Enter User Address</label>
<textarea rows="3" name="u_address" class="form-
control" required placeholder="User Adress"></textarea>

</div>
<div class="form-group">
<label >Enter Adhar Number</label>
<input type="u_adharnumber" name="u_adhar" class="form-
control" required placeholder="Adhar Number">

</div><div class="form-group">
<label >Select Adhar Image</label>
<input type="file" name="adhar_image" class="form-
control" required placeholder="Adhar Image">

</div>

<div class="form-group">
<input type="Submit" name="add_product" class="btn btn-primary btn-
block" value="Register">
</div>
<div class="form-group">

<a href="login.php" >Click here to login.</a>

</div>

</form>
</div>
</div>
</div>

<?php include("inc/bottom.php"); ?>

</body>

</html>
13
 14

login.php
<!DOCTYPE html>
<html lang="en">

<head>
<?php include("inc/head.php"); ?>
<?php include("inc/messages.php");?>
</head>
<body>
<?php include("inc/menu.php"); ?>
<div class="container bodyContainer">
<div class="row">
<div class="col-md-6 col-centered">
<h3 class="text-center">Login</h3>
<form action="" name="" method="post" enctype="multipart/form-data">
<div class="form-group">
<label>Enter User Email</label>
<input type="email" name="u_email" class="form-
control" required placeholder="User Email">
</div>
<div class="form-group">
<label>Enter User Password</label>
<input type="password" name="u_password" class="form-
control" required placeholder="User Password">
</div>
<div class="form-group">
<input type="Submit" name="btn_login" class="btn btn-primary btn-
block" value="Login">
</div>
<div class="form-group">
<a href="signup.php">Click here if not a member.</a>
</div>
</form>
</div>
<?php
if (isset($_POST['btn_login'])) {
include('connection.php');
$email = mysqli_real_escape_string($con, $_POST['u_email']);
$password = mysqli_real_escape_string($con, $_POST['u_password']);
$query = mysqli_query($con, "SELECT * FROM `user` WHERE `u_email` = '$email'
") or die(mysqli_error($con));
$row = mysqli_fetch_array($query);
$hashedpassword = $row['u_password'];
if (password_verify($password, $hashedpassword)) {
session_start();
$_SESSION['u_email'] = $row['u_email'];
header("location:index.php?logged_in");
} else {
echo '<h4 style = "color:red; text-
align:center;">Invalid Credentials..</h4>';
}
}
?>
</div>
</div>
<?php include("inc/bottom.php"); ?>
</body>
</html>
 15

2.4 Backend Details:

In Back-end development, I used PHP and MySQL to store the details in the database.
I learnt to configure databases and to integrate it with the websites. I gained knowledge
on how to get user data and store it in the database. I also used Ajax for form validation.
To store data in the database, I used phpMyAdmin which has all the features including
built-in queries for easy manipulation. I developed a simple E-Commerce like website to
get a better understanding of PHP.

PHP: Control Structures (if, else, else-if, while, do-while, for, for-each, break, continue,
switch), Include (require, include), Function (User-defined Function, Function
arguments, returning values, variables function), Array (array declaration, merging,
sorting, deleting, inserting)

connection.php

This was the main backend PHP file that was used to access the PHPMyAdmin Database
from the website. This file was included in almost all the PHP files that used the
database. $con was used as a reference variable to the table.
 16

<?php
$con = mysqli_connect('localhost','root','');
mysqli_select_db($con,"carate");
?>

user_val.php
This PHP file was used to insert data into the user table and query table; That is user
information and user queries.
<?php
include("connection.php");
if(isset($_GET['add'])){
$u_name = mysqli_real_escape_string($con,$_POST['u_name']);
$c_name = mysqli_real_escape_string($con,$_POST['c_name']);
$u_email= mysqli_real_escape_string($con,$_POST['u_email']);
$u_password= mysqli_real_escape_string($con,$_POST['u_password']);
$h_u_password = password_hash($u_password, PASSWORD_DEFAULT);
$u_phone= mysqli_real_escape_string($con,$_POST['u_phone']);
$u_address= mysqli_real_escape_string($con,$_POST['u_address']);
$u_adhar= mysqli_real_escape_string($con,$_POST['u_adhar']);
$carid = "CARATE-".rand(1000,10000);

$file = $carid."_".$_FILES['adhar_image']['name'];
$file_loc = $_FILES['adhar_image']['tmp_name'];
$file_size = $_FILES['adhar_image']['size'];
$file_type = $_FILES['adhar_image']['type'];
$folder = "admin/images/adhar/";
$new_size = $file_size/2048;

$new_file_name = strtolower($file);

$final_file = str_replace(' ','-',$new_file_name);

if(move_uploaded_file($file_loc,$folder.$final_file)){
$query = mysqli_query($con,"INSERT INTO `user`(`carid`, `u_name`, `c_name`, `u_em
ail`, `u_password`, `u_phone`, `u_adddress`, `u_adharnumber`, `adharImage`) VALUES ('$carid',
'$u_name','$c_name','$u_email','$h_u_password','$u_phone','$u_address','$u_adhar','$final_fil
e')");
if($query){
header("location:login.php?ins_success");
}

}
else if(isset($_GET['query'])){

$name = mysqli_real_escape_string($con, $_POST['userName']);

$email = mysqli_real_escape_string($con, $_POST['userEmail']);
$message = mysqli_real_escape_string($con, $_POST['userMessage']);
$query = mysqli_query($con,"INSERT INTO `queries`(`userName`, `userEmail`, `userMessag
e`,`readMessage`) VALUES ('$name','$email','$message','0')");
if($query){

header("location:index.php?que_success");

}else{

header("location:index.php?que_fail");
 17

}
}

?>

This project also has an admin panel where in the admin can check all the registered user
details, and also the various queries that are asked by the website users could be seen by
the admin.
 18

Conclusion:
As a conclusion, I can say that this internship was a great experience. Thanks to this
training, I not only acquired deeper knowledge concerning my technical skills but also
personally benefited. Currently PHP pages are a common part of web applications, and
one of the most popular language for web development used by developers worldwide. If
we surf internet we can see millions of websites built with PHP and MYSQL. I grew
more independent in work and also in everyday life. I realized that I could do more things
than I thought like learning new things by myself. With the rapid advent of online
industry, the demand of web development professionals is increasing and this has
created huge job opportunities for the aspirants in the upcoming days. Also an
experienced person in this field can also work as a freelancer; there are many online
companies which provide online projects to the individuals.
 19

References:
https://stackoverflow.com
https://getbootstrap.com/docs/4.3/getting-started/introduction/
https://developer.mozilla.org/en-US/
https://www.w3schools.com