Web Development
Web Development
On
“Web Development”
Submitted In Partial Fulfilment of Award of Degree of Bachelor of
Technology in Electronics & Communication Engineering
Submitted by
Divyank Ranjan
2K18
B. Tech (ECE)
CSJMA18001390083
To
CERTIFICATE
COMMUNICATION ENGINEERING), 4th year has submitted his summer training report
on “Web Development” successfully and in satisfactory manner under our guidance and
supervision. This report is requirement for the partial fulfilment of his B. Tech course
The opportunity given to me by Udemy to learn and study about the Web Development will
make a real difference in my engineering aptitude knowledge and ability.
I would like to thank all those who helped me in by giving their valuable thoughts and
information without which it would have been difficult for me to complete this training. I am
obliged and honoured to express the deep sense of gratitude towards my training instructor
Dr. Angela Yu of Udemy for her helpful guidance and suggestions through every stage of this
training. I am thankful to my summer training in charge Er. Amit Kumar Katiyar and Er.
Atul Agnihotri for lectures in electronics and communication engineering department
encourage me and give valuable guidance through which I can do my training successfully.
I am also thankful to Dr. Vishal Awasthi, Head of Department Electronics and
Communication Engineering for its valuable support.
LIST OF FIGURES
ABSTRACT
LIST OF CONTENT: PAGE NO.
CERTIFICATE
ACKNOWLEDGEMENT
LIST OF FIGURES
ABSTRACT
1. INTRODUCTION
1.1. SEVERAL ASPECTS OF WEB DEVELOPMENT
1.2. PROCESS
2. HARDWARE AND SOFTWARE REQUIREMENT
2.1. HARDWARE REQUIRED
2.2. SOFTWIRES REQUIRED
3. TOOLS
3.1. INTRODUCTION
3.2. FEATURES
4. HTML
4.1. INTRODUCTION
4.2. WHAT IS THE WEB?
4.3. VERSIONS OF HTML
5. CSS
5.1. WHAT IS CSS?
5.2. CSS SYNTAX
5.2.1. ID SELECTOR
5.2.2. THE CLASS SELECTOR
5.3. CSS COMMENTS
5.4. CSS STYLES
6. JAVASCRIPT
6.1. WHAT IS JAVASCRIPT?
6.1.1. JAVASCRIPT EXAMPLE: CODE BETWEEN THE
BODY TAG
6.1.2. JAVASCRIPT EXAMPLE: CODE IN JS FILE
6.1.3. BETWEEN THE HEAD TAG OF HTML
6.2. HOW TO CHANGE CONTENT OF HTML USING A
JAVASCRIPT?
6.3. COMMENTS IN JAVASCRIPT
6.3.1. ADVANTAGES OF JAVASCRIPT COMMENTS
6.4. JAVASCRIPT VARIABLE
6.5. JAVASCRIPT FORM VALIDATION
6.5.1. JAVASCRIPT RETYPE PASSWORD VALIDATION
6.6. JAVASCRIPT FUNCTIONS
6.6.1. ADVANTAGE OF JAVASCRIPT FUNCTION
6.6.2. JAVASCRIPT FUNCTION SYNTAX
6.7. JAVASCRIPT CONTROL STATEMENTS
6.7.1. IF-ELSE
6.7.2. JAVASCRIPT SWITCH
7. INTRODUCTION TO PHP
7.1. WHAT IS PHP
7.2. HISTORY OF PHP
7.3. FEATURES OF PHP
7.4. A PHP CODE
7.5. INSTALL PHP
8. MYSQL
8.1. USES
8.2. FEATURES
9. PHP/MYSQL: WEB APPLICATION DEVELOPMENT
9.1. WHY PHP
9.2. USING PHP WITH A DATABASE SYSTEM
9.3. EXECUTING PHP COMMANDS
9.4. INTRODUCTION TO APACHE/ISS SERVER
CONCLUSION
1. Introduction
Website is a collection of related web pages, including multimedia content, typically
identified with a common domain name, and published on at least one web server. A website
may be accessible via a public Internet Protocol (IP) network, such as the Internet, or a
private local area network (LAN), by referencing a uniform resource locator (URL) that
identifies the site.
Websites can have many functions and can be used in various fashions; a website can be a
personal website, a commercial website for a company, a government website or a non-profit
organization website. Websites are typically dedicated to a particular topic or purpose,
ranging from entertainment and social networking to providing news and education. All
publicly accessible websites collectively constitute the World Wide Web, while private
websites, such as a company's website for its employees, are typically a part of an intranet.
Web development is a broad term for 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 the simplest static single page of plain text to the most complex web-based
internet applications (or just 'web apps') electronic businesses, and social network services. A
more 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, web server and network security configuration, and e commerce development.
Among web professionals, "web development" usually refers to the main non-design aspects
of building web sites: writing markup and coding.
1.1 Several Aspects of Web Development
Before developing a web site once should keep several aspects in mind like:
What to put on the web site?
Who will host it?
How to make it interactive
How to secure the source code frequently?
Will the web site design display well in different browsers?
Will the navigation menus be easy to use?
Will the web site load quickly?
How easily will the site pages print?
1.2 Process
Number Description
1. Pentium 4, Window XP/Window7
2. 256 MB RAM
Number Description
1. Windows XP, 7
2. PHP 5.1
3. MySQL
4. IIS server/ XAMPP
5. HTML/CSS/JavaScript
3. TOOLS
3.1 Introduction
The Translate and Edit application had been planned to consist of two parts-front-end and
back-end development. The front-end is the part of the web that you can see and interact
with (e.g., Client-side programming). While front-end code interacts with the user in real
time, the back-end interacts with a server to return user ready results. The front-end is a
combination of HTML, CSS and JavaScript coding. By using JavaScript, modifications of
the design of a web page can be made immediately, however only temporary and visible
only by the user.
Normally the user would not have rights to modify web content dynamically on the server
side. Logically, administrators are the ones who deal with back-end modification of
databases for example, as they often contain sensitive data which should not be available to
see or modify by the general public. These front-end and back-end tools includes languages
like HTML, CSS, JavaScript, PHP, MySQL, etc. We will discuss all these languages in
brief as given below.
3.2 Features
Web Page Assets, Resources, and Network Information
Profiting and Auditing
4. HTML
4.1 Introduction
The World Wide Web (WWW for short), or simply the Web, is the worldwide network
formed by all the documents (called "web pages") which are connected to one another by
hyperlinks.
Web pages are usually organised around a main page, which acts as a hub for browsing
other pages with hyperlinks. This group of web pages joined by hyperlinks and centred
around a main page is called a website.
The Web is a vast living archive composed of a myriad of web sites, giving people access
to web pages that may contain formatted text, images, sounds, video, etc.
The Web is composed of web pages stored on web servers, which are machines that are
constantly connected to the Internet and which provide the pages that users request. Every
web page, and more generally any online resource, such as images, video, music, and
animation, is associated with a unique address called a URL. The key element for viewing
web pages is the browser, a software program which sends requests to web servers, then
processes the resulting data and displays the information as intended, based on instructions
in the HTML page.
The most commonly used browsers on the Internet include:
Mozilla Firefox,
Microsoft Internet Explorer,
Netscape Navigator,
Safari,
Opera
HTML was designed by Tim Berners-Lee, at the time a researcher at CERN (Chinese
Ecosystem Research Network), beginning in 1989. He officially announced the creation of
the Web on Usenet in August 1991. However, it wasn't until 1993 that HTML was
considered advanced enough to call it a language (HTML was then symbolically christened
HTML 1.0).
RFC 1866, dated November 1995, represented the first official version of HTML, called
HTML 2.0. After the brief appearance of HTML 3.0, which was never officially released,
HTML 3.2 became the official standard on January 14, 1997. The most significant changes
to HTML 3.2 were the standardization of tables, as well as many features relating to the
presentation of web pages.
On December 18, 1997, HTML 4.0 was released. Version 4.0 of HTML was notable for
standardizing style sheets and frames. HTML version 4.01, which came out on December
24, 1999, made several minor modifications to HTML 4.0.
Example:
<HTML>
<HEAD>
</HEAD>
<BODY>
<H5> THIS IS AN EXAMPLE </H5>
</BODY>
</HTML>
5. CSS:
5.1 What Is CSS?
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
CSS Saves a Lot of Work! The style definitions are normally saved in external .css files.
With an external stylesheet file, we can change the look of an entire website by changing
just one file!
CSS selector: The selector points to the HTML element you want to style.
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by
curly braces.
The External CSS can be declared in the required HTML page as:
The External CSS file is saved by using the .css extension ,whereas the internal CSS is
saved in corresponding HTML file using the <style> tag. Using External CSS is much
better than using Internal. Here are a few reasons this is better.
Easier Maintenance
Reduced Bandwidth
Improved Flexibility
The selectors that can be used to select the HTML part are:
Id selector
Class selector
5.2.1 Id Selector:
The id selector uses the id attribute of an HTML element to select a specific element. The
id of
an element should be unique within a page, so the id selector is used to select one unique
element! To select an element with a specific id, write a hash (#) character, followed by the
id
of the element. The style rule below will be applied to the HTML element with id="paral":
Example
<hl id="para1">content</h1>
Then Id will be declared as
#para1 {
text-align: center;
color:blue;
font-family:jokerman;
To select elements with a specific class, write a period (.) character, followed by the name
of the class.
Example:
.para1
text-align: center;
color:blue;
font-family: Jokerman;
Comments are used to explain the code, and may help when you edit the source code at a
later date. Comments are ignored by browsers. A CSS comment starts with /* and ends with
*/. Comments can also span multiple lines.
Example
Para1
text-align: center;
color: blue;
font-family: Jokerman;
/*this is the single line comment */
In the example above, all HTML elements with class-paral" will be blue and center-aligned.
Background properties
Border properties
Padding
Margin
Color
Font properties
6. JAVASCRIPT:
Displaying popup windows and dialog boxes (like alert dialog box, confirm dialog
box and prompt dialog box).
Example of JavaScript:
<h2>Welcome to JavaScript</h2>
<script>
</script>
Here, <script> tag is used to initialize the script and document.write() is a function used to
write.
In the given example, we have displayed the dynamic content using JavaScript. Let's see
the simple example of JavaScript that displays alert dialog box.
<script type="text/javascript">
alert("Hello Javatpoint");
</script>
message.js file
function msg()
{
alert("Hello Javatpoint");
}
index.html
<head>
<script type="text/javascript" src="message.js"></script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
We can create external JavaScript file and embed it in many html pages.
It provides code re usability because single JavaScript file can be used in several html
pages. An external JavaScript file must be saved by js extension. It is recommended to
embed all JavaScript files into a single file. It increases the speed of the webpage.
Example:
<head>
<script type="text/javascript">
function msg()
alert("Hello Javatpoint");
</script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
</form>
</body>
This example uses the method to "find" an HTML element (with id="demo") and changes
the element content (innerHTML) to "Hello JavaScript":
Example -
<html>
<head>
<script>
function myFunction()
document.getElementById("demo").innerHTML
"Paragraph
changed.";
</script>
</head>
<body>
</body>
</html>
The JavaScript comments are meaningful way to deliver message. It is used to add
information about the code, warnings or suggestions so that end user can easily interpret the
code. The JavaScript comment is ignored by the JavaScript engine i.e. embedded in the
browser.
To make code easy to understand: It can be used to elaborate the code so that end
user can easily understand the code.
To avoid the unnecessary code: It can also be used to avoid the code being executed.
Sometimes, we add the code to perform some action. But after sometime, there may
be need to disable the code. In such case, it is better to use comments.
Example
<script type="text/javascript">
function msg()
</script>
A JavaScript variable is simply a name of storage location. There are two types of variables
in JavaScript: local variable and global variable. There are some rules while declaring a
JavaScript variable (also known as identifiers).
Name must start with a letter (a to z or A to Z), underscore (_), or dollar ($) sign.
After first letter we can use digits (0 to 9), for example value1.
JavaScript variables are case sensitive, for example x and X are different variables.
It is important to validate the form submitted by the user because it can have inappropriate
values. So, validation is must.
The JavaScript provides you the facility the validate the form on the client side so
processing will be fast than server-side validation. So, most of the web developers prefer
JavaScript form validation.
Through JavaScript, we can validate name, password, email, date, mobile number etc
fields.
Example:
<script>
function validateform()
var name=document.myform.name.value;
var password-document.myform.password.value;
if (name=null || name="")
return false;
}
else if(password.length<6)
return false;
</script>
<body>
m()">
</form>
</body>
In this example, we are going to validate the name and password. The name can't be empty
and password can't be less than 6 characters long.Here, we are validating the form on form
submit. The user will not be forwarded to the next page until given values are correct.
<script type="text/javascript">
function matchpass()
var firstpassword-document.f1.password.value;
var secondpassword=document.f1.password2.value;
if(firstpassword=secondpassword)
return true;
}
Else
return false;
</script>
<input type="submit">
</form>
JavaScript functions are used to perform operations. We can call JavaScript function many
Code reusability
Less coding
//code to be executed
}
JavaScript Functions can have 0 or more arguments.
Example
<script>
function msg()
</script>
6.7.1 If-else:
It evaluates the content whether condition is true or false. The syntax of JavaScript if-else
statement is given below.
if(expression)
Else
Example:
<script>
var a=20;
if(a%2==0)
else
</script>
The JavaScript switch statement is used to execute one code from multiple expressions. It is
just like else if statement that we have learned in previous page. But it is convenient than
if..else..if because it can be used with numbers, characters etc. The signature of JavaScript
switch statement is given below.
switch(expression)
case value1:
code to be executed;
break;
case value2:
code to be executed;
break;
7. INTRODUCTION TO PHP:
PHP (PHP: Hypertext Preprocessor) was created by Rasmus Lerdorf in 1994. It was
initially developed for HTTP usage logging and server-side form generation iUnix.
PHP 2 (1995) transformed the language into a Server-side embedded scripting language.
Added database support, file uploads, variables, arrays, recursive functions, conditionals,
iteration, regular expressions, etc.
PHP 3 (1998) added support for ODBC data sources, multiple platform support, email
protocols (SNMP.IMAP), and new parser written by Zeev Suraski and Andi Gutmans.
PHP 4 (2000) became an independent component of the web server for added efficiency.
The parser was renamed the Zend Engine. Many securities feature was added.
PHP 5 (2004) adds Zend Engine II with object-oriented programming, robust XML support
using the libxml2 library, SOAP Services, SQLite has been bundled with PHP. extension
for interoperability with Web Services, SQLite has been bundled with PHP.
Performance: Script written in PHP executes much faster then those scripts written
in other languages such as JSP & ASP.
Open-Source Software: PHP source code is free available on the web, you can
develop all the version of PHP according to your requirement without paying any
cost.
Platform Independent: PHP are available for WINDOWS, MAC, LINUX & UNIX
operating system. A PHP application developed in one OS can be easily executed in
other OS also
Compatibility: PHP is compatible with almost all local servers used today like
Apache, IIS etc.
Embedded: PHP code can be easily embedded within HTML tags and script .
Fig 2: FEATURES OF PHP
Note: = write HTML tags + PHP code and save this file with .php extension.
File: hello.php
<html>
<body>
<?php
echo "<h2>Hello by PHP</h2>";
?>
</body>
</html>
To install PHP, use to install AMP (Apache, MySQL, PHP) software stack. It is available
for all operating systems. There are many AMP options available in the market that are
given below:
8.1 Uses:
MySQL is used in web applications and acts as the database component of the LAMP
software stack. Its popularity for use with web applications is closely tied to the popularity
of PHP, which is often combined with MySQL. Several high-traffic web sites (including
Flickr, Facebook, Wikipedia, Google (though not for searches), Nokia, Auctionmarts and
YouTube) use MySQL for data storage and logging of user data.
8.2 Features:
Triggers.
Cursors
Strict mode
Updatable Views
Query caching
Replication with one master per slave, many slaves per master, no automatic support
for multiple masters per slave.
PHP and MySQL are two leading open-source scripting and database technologies for web
designers today. They run on both linux and windows servers so your web host most likely
supports it. With the advent of PHS, PHP language has evolved to be an object-oriented
programming language enabling more robust and standards-based web applications.
Community websites leverages both PHP and MYSQL to build rich database driven
dynamic and interactive websites and website applications. Our services include PHP and
MySQL web development, open-source shopping carts, PHP, MySQL offshore
development and PHP programming services. We have a team of experienced coders
dedicated to work on any php/mysql project and have it delivered on time, per your
specifications.
PHP (or PHP Hypertext Preprocessor) is a server-side scripting language that is used to
create dynamic web pages that can interact with databases. It is a widely-used open-source
language that is specifically used for web application development and can be embedded
within HTML.
The distinguishing feature of PHP is that the scripting code is executed on the server, which
generates HTML that is sent back to the client. The client receives the result of executing
the script without knowing the underlying code. Developers can configure the web server to
process all the HTML files (containing the PHP script).
PHP, as a scripting language, is popular among web developers because of its ability to
interact with database systems including Oracle and MySQL. This article discusses the use
of PHP scripting
language with the MySQL database. Any website can require a variety of data or
information to display and to retrieve them from the database. This can include display of a
simple list to the running of the website based on data stored in the database.
Listed below are some examples where PHP and MySQL can be used together:
Digital Ad banners, where the PHP script can be used to retrieve a digital banner
from the database, which then selects a random banner from its table records and
sends it back to the calling script. The PHP script can also maintain a count of
banner views and clicks from the website.
Internet forums or digital boards, which use PHP and MySQL to store and retrieve
user messages.
Website designing, where the design of an entire website can be changed using a
couple of PHP scripts, instead of changing and uploading each web page. The PHP
script can .access the MySQL database to retrieve all information about the web
page.
SQLi command embedded in PHP: As given in figure-3, we can insert SQL commands in
PHP script
Fig 3: SQLi command embedded in PHP
After configuring and connecting to the MySQL database, you can start executing PHP
commands on the server.Following are the 2 methods of executing a PHP
commandEntering the command in PHP using the following syntax:
Mysql_query($query)
This form of command can be used to repeat the command simply by changing the
variable.Defining the command as a variable. The result of the operation will be assigned to
the variable
If you host a website, chances are good that you are running either Apache or Internet
Information Services (IIS). They are by far the two most common web server platforms.
between them commanding about 70% of the market.Apache, or to use its full royal title
The Apache HTTP web server, is an open source Web server application managed by the
Apache Software Foundation. The server software is freely distributed, and the open-source
license means users can edit the underlying code to tweak performance and contribute to
the future development of the program - a major source of its beloved status among its
proponents. Support, fixes and development are handled by the loyal user community and
coordinated by the Apache Software Foundation.IIS (Internet Information Services) is
Microsoft's web server offering, playing second fiddle to market leader Apache. As is
expected of a core Microsoft product, it only runs and is bundled on Windows operating
systems, but is otherwise free for use. It is a closed software product and supported by
solely by Microsoft. Although development is not as open and quick as the open-source
user-supported nature of Apache, a behemoth like Microsoft can throw formidable support
and development resources at its products, and IIS has fortunately benefitted from this.
CONCLUSION:
In a nutshell, this internship has been an excellent and rewarding experience. I can conclude
that there have been a lot I've learnt from my work at the training & research centre.
Needless to say, the technical aspects of the work I've done are not flawless and could be
improved provided enough time.
Working with web development languages has increased my interest in them, hence
prompting me to transfer to the Web Design and Development course at my college.