Internship Report

on
Web Development Using Django(Online)
JAWAHARLAL NEHRU TECHNOLOGICAL UNIVERSITY ANANTAPUR,
ANANTHAPURAMU
In Partial Fulfillment of the Requirements for the Award of the degree of
BACHELOR OF TECHNOLOGY

In

COMPUTER SCIENCE & ENGINEERING

Submitted By

S.Fazeelunnisa - (20691A05I3)

MADANAPALLE INSTITUTE OF TECHNOLOGY &SCIENCE

(UGC – AUTONOMOUS)

(Affiliated to JNTUA, Ananthapuramu)

(Accredited by NBA, Approved by AICTE, New Delhi)
AN ISO 9001:2015 Certified Institution

P. B. No: 14, Angallu, Madanapalle – 517325

2023 - 24
 2009-2013

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

BONAFIDE CERTIFICATE
This is to certify that the internship work entitled “Web Development” is a bonafide
work carried out by

S.Fazeelunnisa - (20691A05I3 )
Submitted in partial fulfillment of the requirements for the award of degree
Bachelor of Technology in the stream of Computer Science & Engineering in
Madanapalle Institute of Technology & Science, Madanapalle, affiliated to
Jawaharlal Nehru Technological University Anantapur, Ananthapuramu
during the academic year 2023-2024.

Internship Coordinator Head of the Department

Dr. K. Sudhakar, Dr. R. Kalpana,

Senior Assistant Professor, Professor & Head,

Department of CSE Department of CSE

Submitted for the University Examination held on:

Examiner - I Examiner – II
 ACKNOWLEDGEMENT

We sincerely thank the MANAGEMENT of Madanapalle Institute of Technology &

Science for providing excellent infrastructure and lab facilities that helped me complete this
Project.

We sincerely thank Dr. C. Yuvaraj, M.E, Ph.D., Principal, for guiding and providing
facilities for completing our Project at Madanapalle Institute of Technology & Science,
Madanapalle.

We express our gratitude to Dr. R. Kalpana, Ph.D., Professor and Head of the
Department of CSE for her continuous support in making necessary arrangements for the
successful completion of the Project.

We express our sincere thanks to the Internship Coordinator, Dr. K. Sudhakar,

Senior Assistant Professor, Department of CSE for his tremendous support for the successful

completion of Project.

We express our deep gratitude to our Internship In-Charge Dr. D. J. Ashpin Pabi,

Assistant Professor, Department of CSE, for her guidance and encouragement that helped us

to complete this Project.

We also wish to place on record my gratefulness to other Faculty of CSE Department

and our friends and our parents for their help and cooperation during our project work.
 DECLARATION

We hereby declare that the results embodied in this internship " Web Development" by
us under the guidance of Dr. D. J. Ashpin Pabi, in partial fulfillment of the award of Bachelor
of Technology in Computer Science & Engineering from Jawaharlal Nehru Technological
University Anantapur, Ananthapuramu.

Date :

Place :Madanapalle

Internship Associate:
S.Fazeelunnisa - 20691A05I3
 ABSTRACT

Web development is the work involved in developing a web site for the internet(World Wide Web) or an
intranet(a private network) web development can range from developing a simple single static page of
plain text to complex web-based internet services. Amore comprehensive list of tasks to which web
development commonly refers, may include web engineering ,web design ,web content development,
client liaison , client-side/server-side scripting, webserver and network configuration,and ecommerce
development. WICS (Web Based Internship Coordinating System) is a comprehensive toolkit for
managing and coordinating internship programs in an educational institution. WICS was developed with
the intension of providing an interactive tool for the faculty and students to communicate with each other
whenever and wherever they want to. Students can understand the requirements and view their progress
and interact with the faculty in a better way. An instructor can review and update a student's progress
and send email to students directly if necessary, from WICS. Designed in PHP (Hypertext Preprocessor),
an open source, server-side, HTML (Hypertext Markup Language) embedded scripting language used
for creating dynamic web pages, this piece of software, is easy to maintain and further enhancements can
be added without any hassles.

Keywords: Web Development,World Wide Web,Configaration.

 CONTENTS

S.NO. TOPIC PAGE NO.

1 INTRODUCTION 1

2 LITERATURE SURVEY 4
2.1 Aim of the Project 5
2.2 Purpose of the Project 5
2.3 Benefits of the Project 6
2.4 About the Project 6

3 REQUIREMENT SPECIFICATION 7
3.1 Hardware Requirements 8
3.2 Software Requirements 8

4 SOFTWARE DESIGN 9
4.1 Front End 10
4.1.1 Finctionalities 10
4.2 Connection 11
4.3 Back End Tasks 12
4.4 PHP MYSQL Connection 12

5 IMPLEMENTATION AND SNAPSHOTS 13

6 CONCLUSION 32

REFERENCES 34
 CHAPTER-1
INTRODUCTION

1
1.1 ABOUT WEB DEVELOPMENT

Web development refers to the building, creating, and maintaining of websites. It includes aspects such as
web design, web publishing, web programming, and database management. It is the creation of an
application that works over the internet i.e. websites.

The word Web Development is made up of two words, that is:

• Web: It refers to websites, web pages or anything that works over the internet.
• Development: Building the application from scratch.

Web Development can be classified into two ways:

• Frontend Development
• Backend Development
Frontend Development: The part of a website that the user interacts directly is termed as front end. It is
also referred to as the ‘client side’ of the application.
Frontend Roadmap:
• HTML: HTML stands for HyperText Markup Language. It is used to design the front end
portion of web pages using markup language. It acts as a skeleton for a website since it is
used to make the structure of a website.
• CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language
intended to simplify the process of making web pages presentable. It is used to style our
website.
• JavaScript: JavaScript is a scripting language used to provide a dynamic behavior to our
website.
• Bootstrap: Bootstrap is a free and open-source tool collection for creating responsive
websites and web applications. It is the most popular CSS framework for developing
responsive, mobile-first websites. Nowadays, the websites are perfect for all the browsers
(IE, Firefox, and Chrome) and for all sizes of screens (Desktop, Tablets, Phablets, and
Phones).
• Bootstrap 4
• Bootstrap 5

2
Backend Development: Backend is the server side of a website. It is the part of the website that users
cannot see and interact. It is the portion of software that does not come in direct contact with the users. It is
used to store and arrange data.

Backend Roadmap:
• PHP: PHP is a server-side scripting language designed specifically for web development.
• Java: Java is one of the most popular and widely used programming language. It is highly
scalable.
• Python: Python is a programming language that lets you work quickly and integrate
systems more efficiently.
• Node.js: Node.js is an open source and cross-platform runtime environment for executing
JavaScript code outside a browser.
• Back End Frameworks: The list of back end frameworks
are: Express, Django, Rails, Laravel, Spring, etc.

3
 CHAPTER-2

LITERATURE SURVEY

4
2.1 Aim of the Project

Akash is an Engineering student who is currently in his 3rd year. A typical day in his life includes
attending his courses, following up on assignments and searching for a good Internship. He finds
it hard to come across any suitable Internship offers and the pandemic situation showing no
prospects doesn’t help him entirely. Recently he learns from his classmate about a company that
reached out to their college with a project. Due to poor communication, he loses a golden
opportunity.

Akash really hopes his college could come up with a more organised and professional
technique to regulate such opportunities so that all the students are intimated whenever a new
opportunity comes up.

2.2 Purpose of the Project

The purpose of this project is to design, build and implement an internship coordinating system
with anytime and anywhere access availability. All user and company information will be stored
in a MySQL database and retrieved by PHP and ODBC. The main purpose of this project is to
provide an easy-to-use interface for students and faculty members to interact with each other
during the course of a student's internship class. Students can view their progress in real time and
get the latest information every time they access the system. Moreover, the system offers the
authorization function to make sure that students can access his/her records only and all the other
information is kept discrete. The student's progress page gives read-only information to the student
about his/her progress whereas the instructor can update the student's progress page and email the
student for any information if needed. In the system, all the 2 users can manage their own account
information such as changing passwords or e-mail addresses. And furthermore, the users have the
same login as their department login in order to help users remember their login information. The
system assigns a unique login to every user by following the same convention used by the
department.

2.3 The benefits of the Project

5
✓ Simplicity: The project is easy and simple to use.
✓ Usability: It is easy to use and implement.
✓ Flexibility: It is very flexible since it is easy to add new features to it.

2.4 About the project

• The proposed project is an Internship System for a College or a University.

• Its role is assisting with internship placements for a College or a University. It is a simple
user interface which has two types of users: admin and students. The internship system can
be used to keep track of companies, internship openings, skills. This system results in a
systematic and organized grouping of data. Thus, with the help of this system the students
have complete idea of every company offering internships, so the chance of missing an
opportunity is completely overcome.

6
 CHAPTER-3

REQUIREMENTS SPECIFICATION

7
REQUIREMENTS SPECIFICATION

The system requirement and specification of our project is as follows:

1.Hardware requirements

Processor: i5 Core Processor Clock speed: 2.5GHz

Monitor: 1024 * 768 Resolution Color

Keyboard: QWERTY

RAM: 1 GB

Motherboard: 845c Intel Motherboard

Backup Media: Floppy/pen drive/Hard disk.

Hard disk: 2 TB HDD

I/O Device: Standard input and output devices.

2.Software requirements

MySQL Libraries

Xampp software: Apache Server 2.4.4

Operating system: Windows 10

8
 CHAPTER-4

SOFTWARE DESIGN

9
4.1 FRONT END

1. Create Admin login page.

2.Create the landing page in both Admin and Student accounts.

3. Create All the necessary pages for each link and the functionalities.

4. Style all the Web pages.

4.1.1 Functionalities

• ADMIN Side Functionalities:

1. Admin must be able to view the list of students Department Wise.

2. Admin must be able to add a new company into the database.
3. Delete student records based on their Graduation Year.

• STUDENT Side Functionalities:

1. Check the companies offering Internships.
2. Check all the details for the internships.
3. Create a view with Internship ID, Description, Skills.
4. Students must be able to check which company they are placed in.

4.2 CONNECTION

1. Implement the functionalities for each of the web page.

2. Use the appropriate Query for the functionalities.

3. Follow the same procedure –

- Create a SQL Template.

- Prepare the statement.

10
 • Functionalities
➢ ADMIN Side Functionalities:
4. Admin must be able to view the list of students Department Wise.
5. Admin must be able to add a new company into the database.
6. Delete student records based on their Graduation Year.
➢ STUDENT Side Functionalities:

1. Check the companies offering Internships.

2. Check all the details for the internships.
3. Create a view with Internship ID, Description, Skills.
4. Students must be able to check which company they are placed in.

• CONNECTION
➢ Implement the functionalities for each of the web page.
➢ Use the appropriate Query for the functionalities.
➢ Follow the same procedure –
• Create a SQL Template.
• Prepare the statement.

11
 • Bind the parameters if required.
• Execute the statement.

• BACK END TASKS

➢ Create 5 tables.
➢ After the required Tables and add the Foreign key Functionalities.
➢ Insert the values into the tables.
➢ Create views as per requirement.

Fig 4.1:Back End Tasks

• PHP MYSQL CONNECTION

• Depending on the version of PHP, there are either two or three PHP APIs for
accessing the MySQL database.

• PHP 5 users can choose between the deprecated MySQL extension, mysqli, or PDO.

• PHP 7 removes the MySQL extension, leaving only mysqli and PDO.

• Mysqli – MySQL improved.

• PDO – PHP Data Object.

12
 CHAPTER-5

IMPLEMENTATION AND SNAPSHOTS

13
5.1 CREATION OF TABLES

1..Admin

CREATE TABLE `admin` (`PERSONID` varchar(10) NOT NULL,`NAME` varchar(255)

DEFAULT NULL,`PASSWORD` varchar(255) DEFAULT NULL);

2.Company

CREATE TABLE `company` (`COMPANYID` int(11) NOT NULL,`CNAME`

varchar(255) DEFAULT NULL,`EMAIL` varchar(255) DEFAULT
NULL,`PHONE` bigint(10) DEFAULT NULL);

3..Internships

CREATE TABLE `internship` (`INTERNSHIP_ID` varchar(10) NOT NULL,`COMPANYID`

int(11) DEFAULT NULL,`DESCRIPTION` varchar(400) DEFAULT NULL,`LOCATION`
varchar(255) DEFAULT NULL`START_DATE` date DEFAULT NULL,`END_DATE` date
DEFAULT NULL,`SKILLS` varchar(400) DEFAULT NUL);

4.Placements

CREATE TABLE `placements` (`USN` varchar(10) NOT NULL,`COMPANYID` int(10) NOT

NULL);

5.Students

CREATE TABLE `student` (`USN` varchar(10) NOT NULL,`NAME` varchar(200) NOT

NULL,`EMAIL` varchar(200) NOT NULL,`PASSWORD` varchar(260) NOT NULL,`PHONE`
bigint(10

NOT NULL,`DEPARTMENT` varchar(100) NOT NULL,`GRAD` int(4) NOT NULL)

14
 5.2 CODE FOR IMPORTANT MODULES Index.php

nav

width:100%; height:80px;

background-color:darkblue;

line-height: 50px;

nav ul

float: right;

margin-right:30px

nav ul li

list-style-type: none; display:inline-block; transition: 0.8s all;

nav ul li a

text-decoration: none; color: #fff;

padding: 40px;

padding: 8px 12px; position: absolute; bottom: 8px; width: 100%;

text-align: center;

.numbertext

15
{

color: #f2f2f2; font-size: 12px;

padding: 8px 12px;

position: absolute; top: 0;

.dot {

height: 15px; width: 15px;

margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block;

transition: background-color 0.6s ease;

.active

background-color: #717171;

.fade

-webkit-animation-name: fade;

-webkit-animation-duration: 1.5s; animation-name: fade;

animation-duration: 1.5s;

@-webkit-keyframes fade { from {

opacity: .4;

to {opacity: 1}

16
@keyframes fade { from {opacity: .4}

to {opacity: 1}

@media only screen and (max-width: 300px) {

.text {font-size: 11px}

</style>

</head>

<body>

<div id="main">

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="About.php">About</a></li>

<li><a href="Gallery.php">Gallery</a></li>

<li><a href="Alogin.php">Admin </a></li>

<li><a href="Studentlogin.php">User</a></li>

</ul>

</nav>

</div>

<hr>

<div class="slideshow-container">

<div class="mySlides fade">

<div class="numbertext"></div>

<img src="img/8.jpg" style="width:100%">

17
<h1 align=center>College Internship System</h1>

</div>

<div class="mySlides fade">

<div class="numbertext"></div>

<img src="img/7.jpg" style="width:100%">

<h1 align=center>College Internship System</h1>

</div>

<div class="mySlides fade">

<div class="numbertext"></div>

<img src="img/d1.jpg" style="width:100%">

<h1 align=center>College Internship System</h1>

</div>

<div class="mySlides fade">

<div class="numbertext"></div>

<img src="img/e1.jpg" style="width:100%">

<h1 align=center>College Internship System</h1>

</div>

<div class="mySlides fade">

<div class="numbertext"></div>

<img src="img/f1.jpg" style="width:100%">

<h1 align=center>College Internship System</h1>

</div>

<div class="mySlides fade">

<div class="numbertext"></div>

<img src="img/c1.jpg" style="width:100%">

18
<h1 align=center>College Internship System</h1>

</div>

<div class="mySlides fade">

<div class="numbertext"></div>

<img src="img/qq1.jpg" style="width:100%">

<h1 align=center>College Internship System</h1>

</div>

<div class="mySlides fade">

<div class="numbertext"></div>

<img src="img/qq3.jpg" style="width:100%">

<h1 align=center>College Internship System</h1>

</div>

</div>

<br>

<div style="text-align:center">

<span class="dot"></span>

<span class="dot"></span>

<span class="dot"></span>

<span class="dot"></span>

<span class="dot"></span>

<span class="dot"></span>

<span class="dot"></span>

<span class="dot"></span>

<span class="dot"></span>

<span class="dot"></span>

19
</div>

<script>

var slideIndex = 0; showSlides();

function showSlides() {

var i;

var slides = document.getElementsByClassName("mySlides");

var dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length;

i++) { slides[i].style.display = "none";

slideIndex++;

if (slideIndex > slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(" active", "");

slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active";

setTimeout(showSlides, 2000); // Change image every 2 seconds

About.php

<?php

include 'app/connect.php';

?>

<!DOCTYPE html>

<html>

<head>

<title>CIS</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

20
<style> body

background-image: url("img/1d.jpg"); background-repeat: no-repeat; background-

size:cover;

h1

color:black; font-size:70px; margin-top: 7%;

nav

width:100%; height:80px;

background-color:darkblue;

line-height: 50px;

nav ul

<br>

<div class="ad">

<h3><u>About</u></h3>

<p id="cl1"><p>An internship provides the work experience that helps students put
their education into practice, develop their leadership skills and give them a
competitive advantage as they pursue a permanent pAn internship is a period of work
experience offered by an organization for a limited period of time.Once confined to
medical graduates, internship is used for a wide range of placements in businesses,
non-profit organizations and government agencies. They are typically undertaken by
students and graduates looking to gain relevant skills

21
Adminlogin.php

<?php

include 'app/connect.php'; session_start(); if(isset($_POST['submit'])){

$ADMINID = $_POST['AdminID'];

$Name = $_POST['Name'];

$Password = $_POST['Password'];

$sql = "SELECT PERSONID,NAME,PASSWORD FROM admin WHERE

PERSONID = ?";

$stmt = $conn->prepare($sql);

$stmt->bind_param("s",$ADMINID);

$stmt->execute();

$stmt->bind_result($db_aid,$db_name,$db_pass); if($stmt->fetch()){

$_SESSION['Name'] = $db_name;//assicative array

//echo $_SESSION['Name'];

$pass_decode = password_verify($Password, $db_pass); if($pass_decode){

echo "Login successful"; header("location:Alogin after.php");

}else{

?>

<script> alert("Incorrect Password"); </script>

<?php } } else {

?>

<script> alert("Incorrect AdminID"); </script>

<?php

22
?>

<!DOCTYPE html>

<html>

<head>

<title>CIS</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style> body

{color: white;

#a,#b,#c

color: white;

</style>

<form method="post" action="Alogin.php" >

</head>

<body>

<div id="main">

<nav>

<ul>

<li><a href="index.php">Home</a></li>

<li><a href="Gallery.php">Gallery</a></li>

<li><a href="Studentlogin.php">User</a></li>

</ul>

</nav>

23
</div>

<hr>

<fieldset>

<legend id="reg" >Admin</legend>

<label id="a" for="AdminID">ADMIN ID</label><br>

background-image: url("img/1d.jpg"); background-repeat: no-repeat;

background-size:cover;

h1

color:black;

input type="text" name="AdminID" maxlength="10" placeholder="Enter your ID"

required autocomplete="off">

<br>

<label id="b" for="Name">NAME</label><br>

<input type="text" name="Name" maxlength="10" placeholder="Enter your Name"

required autocomplete="off">

<br>

<label id="c" for="Password">PASSWORD</label><br>

<input type="password" name="Password" maxlength="10" placeholder="Enter your

Password" required autocomplete="off" >

<br>

<button type="submit" name="submit"><b>Submit</b></button>

</fieldset>

</form>

24
<footer>

<p>CopyRight@2020 collegeinternshipsystem.in</p>

</footer>

</body>

</html>

Admin after login.php

<?php session_start();

if(!isset($_SESSION['Name']))

nav ul li:hover

background-color: #f39d1a;

footer

text-align: center; padding: 3px;

background-color: black; color: white;

Student after login.php

<?php session_start();

if(!isset($_SESSION['Name']))

header("location:Studentlogin.php");

?>

25
<!DOCTYPE html>

<div id = "boxes">

<a href="Company details.php">

<div id = "leftbox">

<h3 id="b1">Company Details</h3>

</div>

</a>

<a href="Internship details.php">

<div id = "middlebox">

<h3 id="b2">Internships</h3>

</div>

</a>

<br>

<a href="Placements.php">

<div id = "rightbox">

<h3 id="b3">Placements</h3>

</div>

</a>

</div>

<footer>

<p>CopyRight@2020 collegeinternshipsystem.in</p>

</footer>

</body>

</html>

26
Output:

Fig 5.1: About College Internship System

Fig 5.2 : Click on home button

27
Fig 5.3 : Select the gallery

Fig 5.4 : Fill the Admin

28
 Fig 5.5 : Fill the Details

Fig 5.6 :Select Your details

29
Fig 5.7 : Fill the Company Details

Fig 5.8 :Enter the Graduation Year

30
Fig 5.9 :Enter the Password

Fig 5.10 :Internship Details

31
CHAPTER – 6
CONCLUSION

32
Conclusion:

Using web development we can create and maintain websites.Three types of web
developments are there

They are:

1.Front-end,

2.Back-end,

3.Data base.

By using this we can create the website for college internship system.In this way it is
easy to collect the information for various internships programs

33
 REFERENCES

[1]www.w3schools.com

[2]https://codecademy.com/learn/learn-php

[3]www.tutorialspoint.com.Available:https://www.tutorialspoint.com/system_analysis_and_design/

system analysis_and_design_overview .html.[Accessed 25 04 2017]

34
35