CHAPTER 1. WEB TECHNOLOGIES … … … … 9 [616036]

3

CONTENT

INTRODUCTION ………………………….. ………………………….. ………………………….. ………………………….. ……. 5
CHAPTER 1. WEB TECHNOLOGIES ………………………….. ………………………….. ………………………….. ……….. 9
1.1. Introduct ory notions ………………………….. ………………………….. ………………………….. ……………….. 9
1.1.1. What are web technologies ………………………….. ………………………….. ………………………….. … 9
1.2. HTML5 ………………………….. ………………………….. ………………………….. ………………………….. …….. 11
1.2.1. Advantages of HTML5 ………………………….. ………………………….. ………………………….. ……… 11
1.2.2. HTML5 syntax ………………………….. ………………………….. ………………………….. …………………. 12
1.3. CSS (Cascading Style Sheets) ………………………….. ………………………….. ………………………….. …… 14
1.3.1. What is CSS? ………………………….. ………………………….. ………………………….. …………………… 14
1.3.2. Internal styles ………………………….. ………………………….. ………………………….. …………………. 15
1.3.3. Foreign Styles ………………………….. ………………………….. ………………………….. …………………. 17
1.3.4. Styles in line ………………………….. ………………………….. ………………………….. ……………………. 19
1.3.5. CSS stylesheets ………………………….. ………………………….. ………………………….. ……………….. 20
1.4. JavaScript ………………………….. ………………………….. ………………………….. ………………………….. …. 21
1.4.1. About Java Script ………………………….. ………………………….. ………………………….. …………….. 21
1.4.2. Validate INPUT cassette contents ………………………….. ………………………….. ………………….. 24
1.4.3. Perform m apping on an image ………………………….. ………………………….. ………………………. 28
1.5. JQuery ………………………….. ………………………….. ………………………….. ………………………….. ……… 32
1.5.1. How do I add a jQuery library to a webpage? ………………………….. ………………………….. ….. 33
1.5.2. The jQuery element syntax ………………………….. ………………………….. ………………………….. . 34
1.6. XML (eXtensible Markup Language) ………………………….. ………………………….. ……………………… 35
1.6.1. Composition of an XML format ………………………….. ………………………….. ……………………… 35
1.6.2. Solving XML -related ambiguities ………………………….. ………………………….. ……………………. 37
CHAPTER 2. PHP LANGUAGE. MYSQL DATABASES ………………………….. ………………………….. ……………. 38
2.1. Basic elements of PHP language ………………………….. ………………………….. ………………………….. 38
2.2. Elements about MySQL databases ………………………….. ………………………….. ……………………….. 42
CHAPTER 3. RE ALIZING AND FUNCTIONING THE ELECTRONIC IT SHOP APPLICATION ……………………. 46
3.1. Description of the Online Store application ………………………….. ………………………….. …………… 46
3.1. Administr ator interface ………………………….. ………………………….. ………………………….. ………….. 47

4
3.3. User Interface ………………………….. ………………………….. ………………………….. ……………………….. 50
CONCLUSIONS AND CONTRIBUTION ………………………….. ………………………….. ………………………….. ….. 54
BIBLIOGRAPHY ………………………….. ………………………….. ………………………….. …………………………. 56
WEBOGRAPFIE ………………………….. ………………………….. ………………………….. ………………………….. . 56

5

INTRODUCTION
A virtual store, online store or e -shop is an e -commerce website designed to sell
products and services. In most cases, the online store is a platform on which products are
added. On complex online stores, users can select the payment method: credit card, bank
transfer, refund and mode of transport: mail, courier, airplane, etc.1
A virt ual store is any location fixed in the Internet where information can be displa yed about a
particular company and offered for commercial p urposes samples of the products or services
of that company.
A virtual shop has to meet specific needs:
– lower market ing costs
– faster distribution of information
– Better customer service. A virtual store offers customers access to information and services
24h a day, 7 days a week, making it easy to place orders, check the status of orders, browse an
online catalog, an d give customers more control over the time and place they are doing
purchase;
– The virtual store must be visible and accessible to the target audience. Even the best -made
virtual store in the world will fail if customers have not noticed or can not acces s it.
The work ONLINE E-SHOP, made in HTML5, PHP, with MySQL support, is the
result of documentation in the field of Web technologies, on the course of the academic years.
As interface for editing I used Notepad ++, and as server for PHP and mySQL I used
Xampp. Xampp offers direct access to databases through phpmyadmin, an important feature
in the application creation process. Phpmyadmin provides the ability to create databases,
create tables, view and manage tables. However, for creating the base and the t ables we used
php functions.
I have structured the paper in three chapters, dealing both the theoretical and
applicative aspects with the most relevant aspects of web technologies for creating web sites,
photo albums, etc. Of the many web technologies curr ently available, I think the most
important are:
– HTML
– JavaScript
– PHP

1 https://ro.wikipedia.org/wiki/Magazin_virtual

6
– MySQL
These web resources have been chosen from a wide range of web technologies and
programming languages, because they provide important facilities for web application
development
In the first chapter I synthesize the web technologies used in site building. In Chapter 2, I
briefly describe mySQL databases.
In chapter 3, we describe the practical ways of implementing the IT e -commerce site.
In conclusion , the virt ual store is a type of business which offers facilitie s to both clients and
customers bidders. It provides access to and goods services re gardless of geographic location
being available 24 hours a day the way it is built and maintained the virtual sto re, the benefits
to the comp any who provides the goods or supplies service s are significant to the effort
provide d for upgrading and maintenance it.
The content of a commercial site must include a series of mandatory information on:
1. Provider
The site must provide accurate and up -to-date inform ation about the vendor and / or
distributor as well as their geographic location. This should highlight:
– the name of the producer and / or distributor organization, which is the most it's often not the
same as the web address;
– the exact ad dress of the vendor, phone, e -mail;
– the country in which the organization is registered;
– if possible, the registration number ( from the Commercial Register of example) of the
license or operating license;
– contact information.
2. Delivery
The site mus t provide clear and up -to-date information to the consumer about the countries
where the products are delivered before the order is processed. Delivery information is good
to be found on Home Page and updated permanently.
3. Price
The price is an essential element and that is why the site must display the total price (with all
taxes included) before the order is executed by the customer. The price must include delivery
(transport) taxes. These elements are very important, especially if the site is addressed to
customers in other countries and there are differences from different distances, differences
that can greatly increase the overall price.
4. Applicable law

7
Generally, in the case of international consumers, it is considered that the law governing the
transaction should be that of the customer country. This procedure is, but still debated. Some
virtual stores stipulate in the contract the law that is considered to be applicable, but this is not
acceptable in all situations.
5. Order
In making an online s tore, it is recommended to go through three levels (three clicks) to make
an on -line order to ensure that there is no misunderstanding.
The three levels are:
a. The customer expresses his intention to buy the product / service (for example by adding it
to the cart through the "shopping cart" technology);
b. Customer is provided with information about all details of the order (without going through
one page) and confirming that they are correct;
c. The customer must agree to go further and have the opportuni ty to read the terms and
conditions of delivery. It must be clear that it reached the final level of the contract.
The site design should also offer the consumer the possibility to cancel the order
immediately (before leaving the ordering process).
6. Data privacy
All sites must have a clea r and easy -to-understand policy the confidentiality of the data
entered by potential customers.
7. Security of the transaction
The site must contain information about the security of the transaction. This information
shou ld be presented in a clear and easy to understand form.
The client must be assured that he / she finds himself in a safe environment to gain and
maintain his / her confidence.
Consumers must be informed of their rights and liability for damages that may ar ise from a
fraudulent transaction.
8. Product Returns
Customers must be given the right to return the products within a specified period of time
without being required to state the reasons.
9. Complaints
The virtual store must contain information on how co mplaints can be made, what is the
procedure and who to contact the consumer and how the vendor responds.

8
10. Contract performance
Virtual stores must provide information about the orde r execution situation, such as
information about the requested article (whether it is in stock or not);
11. Compensation
Online stores must:
a) provide a simple compensation policy;
b) provide the link to the page where the cargo information is found;
c) clarify which of the costs of returning the goods will be borne by the customer;
d) to return the money as soon as possible and to estimate the date when they reach the client's
account;

9

CHAPTER 1. WEB TECHNOLOGIES

1.1. Introductory notions
1.1.1. What are web technologies
Web technologies are programming languages used to create online applications, including
interactive and complex multimedia sites. Making web sites and other online applications
requires in -depth knowledge of programming, using scripting languages, and databases.
Web technologies include :
1. types of programming languages, such as PHP, JavaScript, ASP, etc.
2. types of databases such as MySQL, MsSQL, Access, ORACLE, etc.
Based on web technologies and specialized programming languages, the following types of
web applications can be created :
– multimedia sites
– virtual stores
– photo albums online
– web portals
– forums
– eLearning platforms
– Forms
– etc.
Programming dynamic web applications uses a range of state -of-the-art technologies such as:
1. HTML, This web application programming la nguage appeared in the early '90s. HTML
Now comes to version 5 of the language. This version led to the development of smart web
pages and contributed to a spectacular quality of the Internet.

10
The HTML markup within a document is intended to tell the brows er how to display the
actual content of the page.
2. CSS Standard – Is a standard for formatting styles from a web page.
CSS (cascading style sheet) file – cascading style sheets. Styles can be attached to the html
page directly via external files. CSS fil es have the .css extension.
CSS3 is an upgrade to older versions that comes with a new attribute that allows compelling
achievements in webdesign.
CSS3 brings, among other things, the following modules:
– Box models;
– Selectors;
– Text Effects;
– Animatio nas;
– 2d / 3d Transformation
– etc.
3. JAVASCRIPT – JavaScript has been developed to generate the dynamics of the web page
and process the information found in the documents. It's a scripting language running at
browser level. It was originally developed by Netscape. The language allows the development
of subprograms necessary for the processing of the information in the forms.
3. FLASH. It's a Macromedia IT application. With Macromedia FLASH
We can get pages with interactive content, dynamic pages can be created and professional
animations and processing can be obtained
4. MySQL. Databases are used to store information to provide subsequent data according to
the request received. MySQL Is an Open Source SGDB.
5. PHP. It is a scripting programming language designed specifically for WEB and for
creating dynamic pages. It is the most popular web programming language. The embedded

11
php code on a web page is running when it accesses the page, it is interpreted by the web
server, and the effect is that it generate s HTML
Next, I will present notions about the main Web technologies used in web page creation.

1.2. HTML5
1.2.1. Advantages of HTML5
HTML (HyperText Markup Language) is a continually evolving language, currently allowing
multimedia content web browsers to be tagged. [1], [5]
HTML has as a feature a number of special commands called tags or HTML tags. Tags are
commands that determine how the features of the web page are displayed on the web page.
Also, as the name suggests, language provides the facility to make links or hyperlinks to
documents or other pages of the same document or the Internet.
The HTML and information on the page is uploaded to a web server and transferred from
there to a web browser that uses HTTP.
For Internet communication, the protoco l used is called HTTP (Hypertext Transfer Protocol).
This ensures the interpretation of html commands.
HTML language commands are called tags. These are special language commands that
determine how the created content is displayed and properly viewed by th e browser /. The
HTM code and the information it brings with it is stored on a Web server. From here, the code
along with the information is transferred to a web browser (using the HTTP protocol), the
HTTP protocol interprets the language commands used by the creator of the web page and
loads the page information.
Nowadays, many web browsers operate, each with a different page interpretation algorithm.
So some HTML tags will be interpreted differently by different browsers. That's why when
testing a web app lication, we need to test it on various browsers and even on different
operating systems.
HTML 5 is the latest version of HTML. This release comes with new features that make it
easier to build dynamic and complex web applications and improve the performan ce of web
applications.
Advantages and benefits of HTML5:

12
– HTML5 applications can run offline, because HTML5 has an offline storage function; even
if the user is offline, the browser has access to the files stored by a request cache;
– To move a page elem ent to the desired location, HTML5 provides the Drag and Drop
function;
– HTML5 allows multimedia files – audio and video – to be embedded directly into the HTM
page without using it. plugins.
– HTML5 introduces pop -up entry features that allow better cont rol over web page access;
– One of the great achievements of HTML5 is the ability to share your site with trusted sites.
This feature is now widely used by online businesses and not only that use browser browser
information to send customized offers based on pages and even accessed products.
To maximize the potential of HTML5, it is necessary to combine the features of Web 2.0
technologies, ie the use of the advantages of JavaScript, CSS, Flash.

1.2.2. HTML5 syntax
As far as the syntax of functions, tags a nd other HTML5 codes is concerned, it is much
simplified compared to previous versions.
When writing HTML code it is necessary to show the web browser version of the HTML
language. This is done using the DOCTYPE statement. In the HTML4 version, we use the
sequence: <! DOCTYPE HTML PUBLIC " – // W3C // DTD HTML 4.01 Transitional // EN"
"Http://www.w3.org/TR/html4/loose.dtd">
In XHTML, the statement is similar.
In HTML5, the DOCTYPE statement is written as follows:
<! DOCTYPE html>
So much simplified compared to the other versions.
Character encoding is necessary for the web page because the browser needs to know what
character set to use when converting the information bits into characters understood by the
human user. Typically, the encoding used in HTML 4 is UTF -8. The command for an
HTML4 document is:
<meta http-equivalent="Content -Type" content="text/html; charset=utf -8">
In HTML5 we use the following command to encode characters:
<meta charset="utf -8">
To define the client side, such as JavaScript, the Scr ipt tag is used with the type attribute. In
HTML5, the script tag is no longer required, the correct command being:

13
<script src="/scripts/something.js">
versus HTML4, where should be written:
<script type="text/javascript" src="/scripts/something.js">
In HTML5 a scrip t will be executed until the page loads. This can be done by using the 'async'
tag that the browser executes asynchronously with the rest of the page:
<script src="/scripts/something.js" async="async">
To define relationships between a document and an external resource, such as to include CSS
files, use the link tag
<link rel="stylesheet" href="style.css" />
If we want to insert a video file on the page, we use the code sequence

To run a sound file, we can use the sequence:

If we want to display con tent using a browser, we can use the code:

The title of the page usually contains the logo, the menu, essential information for the web
page. The tag used is the h eader. The syntax in HTML5 is:
<header>
Compared to HTML4, where it says:
<div id="header">
<videowidth="500" height="450" controls="controls">
<source src=" film1.mp4" type="video/mp4" />
Browserul activ nu suporta HTML5.
</video> <audiocontrols="controls">
<source src="sunet11.ogg"type="audio/ogg" />
Browserul activ nu suporta HTML5.
<article>
<h1>Internet Explorer 11</h1>
<p>Continut este afisat cu IE 11.</p>
</article>

14
Analogously, to navigate through the menu, in HTML5 we use the extremely simple
command:
<nav>
HTML5 also contains other new tags like:
– Image tag for comments on pictures, charts, etc.
– Side tag, for panels separated by the main content of the page
– Section Tag, for separating the page by sections;
– Article tag for various articles, comments, etc
HTML5 no longer supports, instead tags like:
– framset
– fram
– noframes
– font
– u
– center
– big
HTML 5 successfully integrates web 2.0 technologies, delivering spectacular workmanship,
and the use of new IT technologies. In this way, the user becomes creative because he does
not receive asynchronous information anymore and can conv ey his own ideas in multimedia
format, using his blog, forum, photo album, online social media.

1.3. CSS (Cascading Style Sheets)
1.3.1. What is CSS?
In creating web pages, the organization of the web page, the type of characters, the place and
the way th e elements of the web page are rendered – colors, characters, alignment, spacing,
etc. – are automated by describing them with a specific language. This makes it easier to write
web pages. The pseudo language created to apply the creation and defined forma tting styles is
Cascading Style Sheets or CSS, or cascade style sheets.

15
Presentation of CSS styles is done through CSS files. These allow allowing an HTML
document to be created distinctly, in part the content itself, in part the styles of formatting,
respectively the display of that content. CSS takes care of the content formatting details and
HTML code manages the content and structure of the web page.
The HTML code integrates CSS styles and seperately separates web page presentation from
the structure cr eated by the developer based on the ordered requirements.
One of the main ways to apply CSS styles to create a standardization of the page structure
from a stylistic point of view is cascading style.
The cascading CSS style, existing in the HTML page code, can be applied in several ways:
• Inner style sheet
• External style sheet
• style in line
• CSS classes
A CSS style has three parts:
– the selector that identifies the HTML tag to which the defined style applies
– properties, what are the elements we wan t to shape.
– property values, what are the new sizes we want to attribute to properties
CSS statements always end with the symbol;
Example:

p {
color:black;
text-align:center;
}

1.3.2. Internal styles
Internal styles are inserted into each HTML page, b etween the tags
<head> </ head>, as in the example below:

16

<head>
<title>Cum se utilize ază stilurile interne în pagin web</title>
<style type="text/css">
Definirea stilurilor CSS</style>
</head>
An example of HTML with internal styles is shown in Figure 2.1

Figure 1 . Example CSS internal style
In the case of internal CSS styles, if a style change is desired, it is done on all HTML pages in
which the style is used. For this reason, internal styles are applied only when this type of style
is used in a small number of HTML pages.

17
1.3.3. Foreign Styles
An external style sheet is used if you nee d to change the style of multiple pages. In principle,
with an external style sheet, you can change the style of an entire HTML job by modifying
only one file
To work properly, each page you edit should link to the external style file by using <link>
withi n the <head> section of the <link> tag as in the example below:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
hr {color:sienna;}
p {margin -left:30px;}
body {background -image:url("trandafiri.gif");}
</style>

</head>
<body>
…
</body>
</html>
There is no space between the unit of measure and the value given to the property, as some
browsers may not recognize that style.
An external CSS style sheet can be written with NotePad or WordPad applications, or with
specialized editors that are usually free. The external file must not contain HTML tags and is
saved with the .css extension
In an HTML page, referring to an external CSS style is done by placing the <link> tag in the
section
Below is a html page referenc ing an external style:
<html>
<title> Utilizarea stilurilor externe. Exemplu </title><head>
<link href="Extern.css" rel="stylesheet" type="text1/css">
</head>
<body>

//Alt stil extern
<table>

18
<tr>
<td>

</td>
</tr>
</table>
</body>
</html>
The file that was created is of the external CSS type and was named Extern.css, used on the
previous page and the effect obtained, are shown below in Figure 2.2:
Body {
font -family: "Courier New";
font -size: 13 px;
color:#000000;
background -color:# ffffff;
text-align: center;
}
table{
font -family: " Minion Pro";
font -size: 16px;
color: #FFFFFF;
background -color: # 5a84a0;
border: 4px double #00f5ff;
text-align: center;
}

19

Figure 2. Example CSS Extern Style
1.3.4. Styles in line
Inline style is quite disadvantageous f or a web page because it mixes style with presentation
and is rarely used. E.g:
<p style="color:blue; margin -left:18px">Sshimbare culoarea și marginea stânga a unui
paragraf.</p>
This style is defined in the HTML tag code of the element to be stylized, as in the example
below in Figure 2.3.
<body>
<p style="color: #60ff00; font -size: 24;">Titlu</p>
<h2 style="font -size: 17;font -weight: bold; color: #ff0000;">Exemplu utilizare
de stiluri in linie </h2>
</body>

Figure 3. Example CSS sty les in line

20
1.3.5. CSS stylesheets
CSS classes are used when different types of HTML tag commands are to be stylized in
different ways and must work on different pages. The major advantage of style classes is that
if style changes are made on multiple page s, they are made globally and not at the level of
each style [5]. So a change in the CSS class changes all pages that refer to that class.
A CSS class has a syntax that begins with the "." Symbol, followed by the name of the class.
For the name of the clas s it is necessary to use suggestive names to be easily recognizable and
to quickly identify what will result applying the style [4].
When can we use a CSS class? Whenever necessary to standardize the page image, in terms
of font size, color, page layout, e tc.

.text24red
{
font -size: 20px;
color: 50ff00;
}

CSS classes are stored in external CSS files:
Below is an HTML file that uses a CSS style class:
<head>
<title> Utilizarea claselor de stiluri </title>
<link href="clasestiluriCSS.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="text20 rosu">Titlu
</p>
<h2class="text18verde"> Utilizarea claselor de stiluri </h2>
</body>

The CSS class file. css has defined two classes of styles that each style differently a type of
text.

21
.text20negru
{
font -size: 20px;
color60ff00;
}
.text1rosu
{
font -size: 2px;font -weight: bold;
color: ff0000;
}

Styles or stylesheets can be referenced in several ways in an HTML page:
– In the <head> section of html;
– Within an html element;
– In an external CSS file
– In the default settings of the vrowser.
Also, several external CSS stylesheets can be referenced in an html document

1.4. JavaScript
1.4.1. About Java Script
JavaScript has been developed by NetScape to extend the use of CGI scripting web pages,
able t o process information from web forms and create the dynamism and interconnection of
web pages.
JavaScript is today the most popular scripting language that creates a true client server
relationship, running on the client side (web browser), and is primaril y intended to increase
web page interactivity.
Thus, JavaScript allows the embedding of scripts into the web page, scripts that run on the
user's (client) page, by the browser.
A JavaScript script uploads to a web page and collects data from the client to monitor the
accuracy of the data entry. A script sends these corrected data to the server. JavaScript
functions and controls also check the correct data entry in the forms, supervise the correct

22
processing of mathematical calculations, correct manipulation of sounds, window objects, and
images. Supervises the correct use of linkurilot URL, etv
The JavaScript code for these features and commands can be inserted into the html page and
executed directly on the user's computer.
The JavaScript language works tog ether with HTML tag tags, ensuring the dynamics and
accuracy of web page elements and, at the same time, a superior dynamics of web page
performance [6].
To insert Java scripts into html documents proceed as follows:
1. Place the Java script in the web hea der between <head> and </ head>;
2. Place the Java script on the body of the page, between <body> and </ body>
3. We create an external source Java file, which we refer to from the html page
4. We use a JavaScript event manager file
To make the web page dy namic, the JavaScript code interacts with the static elements of the
html code, giving them new active assets.
The main disadvantage of JavaScript is that it depends on the browser you are using.
There is an extensive bibliography on the use, creation and implementation of JavaScript code
on HTML pages. For this reason, in the paper I will mainly refer to the validation of
JavaScript data.
In order to use data processing using JavaScript, it is necessary to validate the data used to
work with forms, mainly. Data validation includes the following:
In the example presented in this paragraph, I refer to a JavaScript function, which has the
effect of typing digits inside the form boxes. The function is activated when a key is pressed.
There is a backspace effect to avoid entering erroneous data into the form

23
<FORM action='introd.php' method='GET'>
Venit: <input type="textul1" name="sallut" onkeypress="returnonlyNo(event)">
<input type='SUBMIT' value='Start'>
</FORM>

<script language="JavaScript" type="textul1/ja vascript">
function onlyNo(eveniment)
{
var e = eveniment;
if(window.event)
{
// Internet Explorer
var charCode = e.keyCode;
}
else if (e .which)
{
// Mozilla, Firefox
var charCode = e.which;
}
// verificare plaja valori ASCII pentru cifre și caractere de control
if (charCode > 30 && (charCode < 49 ||charCode > 55))
return false; // &&, || -> ȘI, SAU LOGIC
return true;
}
</script>

Note that there is a structure in the body of the function that resolves the running of the code
in an Internet Explorer or Mozilla browser respectively.
The event I've attached to the INPUT tag is onkeypress. The function executes and returns
true or false, which depends on the ASCII code of the pressed key. The false value invalidates
the retrieval of the typed character

24
1.4.2. Validate INPUT cassette contents
The script code in the following example integrates a JavaScript function to correctly fill in
boxes within an html form. In this case, the content and accuracy of the information is not
verified, but the actual existence of the information in the box.
Following the execution, the events that occur in the I NPUT box and in the FORM form are
triggered by the reference in the HRML of the Java code.
The code script is too much below, and the effect can be seen in figures 2.4 and 2.5:

<!—Fformular HTML cu evenimente JavaScript –>
<form method="GET" action="a.htm l" onsubmit="return checkform(this);">
<table align="center">
<tr>
<td>Student:</td>
<td> <input type="text" name="nume">
</td>
</tr>
<tr>
<td>Nota Parcurs:</td>
<td> <input type="text" name="nota1" onclick="return
checkinput_alt(form)"> </td>
</tr>
<tr>
<td>Nota Examen:</td>
<td> <input type="text" name="nota2" onclick="return checkinput(form)"
onblur="return checkinput(form)"> </td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Adauga"> </td>
</tr>
</table>
</form>

25
<!–Comenzile JavaScript at așate codului HTML –>
<script language="JavaScript" type="text/javascript">
function checkform(form) // verifică conținut pentru toate
casetele
{
if (form.nume.value == "") {
alert( "Nume student." );
//var bool=confirm(”Alege”); –>Dialog Box
form.nume.focus();
return false ;
}

if (form.nota1.value == "") {
alert( "Nota laborator." )
form.nota1.focus();
return false ;
}
if (form.nota2.value == "") {
alert( "Nota Examen." );
form.nota2.focus();
return false ;
}
return true ;
}

26
function checkinput(form) // verificare casetă precedentă
nota1
{
if (form.nota1.value == "")
{
alert( "Adauga text in campul 2 -Nota parcurs…" );
form.nota1.focus();
return false ;
}
return true ;
}
function checkinput_alt(form)/ / verificare casetă precedentă nume
{
if (form.nume.value == "")
{
alert( "adaugatext in campul 1 -Nume…" );
form.nume.focus();
return false ;
}
return true ;
}
</script>

The checkform () function is attached to the FORM form and will be c alled using this
parameter. This parameter is an HTML tag that refers to the event that triggers the action of
the checkform (), which will act on the FORM form. At the same time, after calling the
function, the content of the form boxes (after pressing th e SUBMIT button)
The form.nume.focus () function in the FORM code plays the role of checking whether the
content of the box to be filled is empty. The action does not move on IF branches unless the
contents of that box become nevid.
The form.name.value () function is meant to refer to the elements of a form by specifying the
name of the form, the value property, and the INPUT tag. These actions invalidate the content
of a form box by clicking the SUBMIT button, allowing (if the form is completed) to move to
the next page of the form or exit the form. (Figure 2.4).

27

Figure 4. Validation at SUBMIT (final check

Figura. 5. Validating an OnClick box on the next box (on -line check)

The JavaScript functions that define the created form are presented below.
Embed ding a JavaScript function of the return function type () will cancel the effect (if the
referenced function receives the FALSE logical value) to a function in the code, including the
effect of the SUBMIT () function if the return function returns. functio n () is applied to the
checkform () function.

28
To verify the contents of a specified box in the program by name, the checkinput () and
checkinput_alt () functions were used. The trigger event is even the HTML tag attached to
that event. Thus, in our case, t here are the following events that trigger:
– The note box1 defines the onclick () event, which calls the checkinput_alt () function. This
checks the contents of the name box;
– Note2 also has the onclick () event attached to checkinput () which will check the content of
the note box1
After inserting the notes, it must take place, leaving the respective boxes on the form. This is
achieved by entering the onblur () event, which is also defined on the note box2. The effect is
to leave the current box by tappi ng a key or clicking with the mouse. The purpose of using the
onblur () event was to remove any attempt to leave a box before it was completed. Any
attempt will reposition the prompt by ordering form.caseta.focus ()) in the blank box.

1.4.3. Perform mappi ng on an image
Mapping an image is an important step in creating webpages because it allows you to define
contours to which we can associate specific links. So, by mapping the image, you can define
multiple links within the same image by clicking on the di fferent regions of the image by
moving the mouse (onMouseMove) on its surface.
Given the importance of mapping images to exemplify how to make a map on an image, we
created a rectangular contour mapping three images, creating an image map. By clicking on
one of them, the JavaScript messages we want will be displayed.
To map an image, add the usemap attribute to the img tag.
In this case I have defined rectangular, three rectangular areas using HTML commands and
JavaScript. The verification was done using th e Microsoft Internet Explorer browser.
Figure 2.6 shows the page as it appears in the Microsoft Internet Explorer browser. The
application code is shown below:

29
<HTML>
<FORM NAME="formediv">
<A href="javascript:apasare_mouse()" >
<IMG SRC="pozaform.gif" WI DTH=158 HEIGHT=200
onMouseMove="javascript:miscare()" ></A><BR>
<INPUT TYPE="text" NAME="descriere"SIZE=40 value=" ">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!–
var x_curent, y_curent;
function apasare_mouse() // funcția de apăsare a mouse -lui
{
if (in_zona(x_curent,y_curent,0,0,159,40))
alert("Programare cu JavaScript");
else if (in_zona(x_curent,y_curent,100,50,160,92))
alert("Autorii cartii");
else if (in_zona(x_curent,y_curent,0,121,161,200))
alert("Publicata in editura Viața");
else
alert("Alege o zona de imagine!"+" x: "+x_curent+" y: "+y _curent);
}
function in_zona(x,y,Rect_x1, Rect_y1, Rect_x2, Rect_y2)
{
return(x>Rect_x1 &&
x<Rect_x2 &&
y>Rect_y1 &&
y<Rect_y2);
}
function afiseaza_text(text)
{
form1.descriere.value=text;//formular lipsă: descriere.value=text;

30
Figure 6. Mapping messages to a map -type image using JavaScript

The following important aspects can be highlighted in the application's operation:
By using HTML and JavaScript, an image and an INPUT box have been embedded in an
HTML form with the name formed. At the call of the JavaScript script, the image and the box
are displayed.
Moving the mouse over that image displays the message specified in t he JavaScript script. If
the mouse pointer moves out of the image area, the text of the script is canceled.
If you click on the mapped area, a JavaScript message appears in a pop -up alert box and the
mouse coordinates corresponding to the mapped area
In or der to generate the background of the map and the display of messages in a box, HTML
code was used. It was necessary to use the <A> anchor tag, with the href attribute, which
allows the setting of the hypertext reference to the called JavaScript script, a script embedded
in the respective code intercept any mouse click. Each JavaScript element is attached to
JavaScript calls to get the effects that I wanted to appear. }
function miscare()
{
x_curent=event.x;
y_curent=event.y;
if (in_zona(x_curent,y_curent,0,0,161,50))
afiseaza_text("Programare cu JavaScript");
else if (in_zona(x_curent,y_curent,100,60,161,90))
afiseaza_text("Autorii cartii");
else if (in_zona(x_curent,y_curent,0,120,161,199))
afiseaza_text("Publicata in Editura Viata");
else
afiseaza_text("Alege o zona de imagine!"+" x: "+x_curent+" y:
"+y_curent);
}
</SCRIPT>
</HTML>

31
The JavaScript code contains statements of global variables and JavaScript functions that
generate the desired events:
The motion function () is the first function called when a mouse movement is detected. This
reads the current coordinates of the mouse – x_curent = event.x; y_curent = event.y – and
temporarily stores them via two variables, whi ch also make the call to the in_zona () function.
The in_zone function has input parameters as the current coordinates of the mouse and the
coordinates that define the area of the respective image. This function returns the TRUE or
FALSE logical values, depending on the mouse position relative to the defined area.
The move function () knows whether to check the if -else structure by framing the mouse
pointer in the specified area mapped to the map. If the mouse pointer is in an area, call the
JavaScript di splay_text (), which will generate the corresponding text and the current mouse
cursor coordinates.
The push_mouse () function first verifies the cursor to the coordinates required by the code by
calling the in_zona () function and generating, via an if -else structure, JavaScript messages
appropriate to the TRUE or FALSE logic action.
The example application is currently running if we use Internet Explorer. To work with other
browsers, the code needs to be properly adapted, using other JavaScript features o r
eliminating them
To run the application with Mozilla Firefox, the application code needs to be modified:
<IMG SRC="casetapoza.jpg" name="imagmap" WIDTH=150 HEIGHT=200
onMouseMove="javascript:miscare1()">
And the JavaScript script wi ll need to be modified accordingly.
In the JavaScript sequence that is running when loading the application, the command must be
added
document.imagmap.onmousemove = miscare1
Motion1 is a newly created function similar to the motion function () that is cal led by the
Mozilla browser when a mouse moves inside the map on the imagmap object. JavaScript
JavaScript for Mozilla will start as follows:
<SCRIPT LANGUAGE="JavaScript">
<!–
var x_curent, y_curent;
document.imagmap.onmousemove = miscare1;

32
The JavaScript move1 () function builds from the existing move () function by altering the
code by reading the current mouse coordinates, which is also supported by Mozilla.
function miscare1(e) // e – prescurtarea de la eveniment
{
x_curent=e.pageX;
y_curent=e.pageY;

Otherwise, the Java / script code does not change.
JavaScript has demonstrated its usefulness in creating modern web pages, especially as code
elements and JavaScript functions can be attached and embedd ed in HTML code, making
dynamism in the user interface. In FIG. 2.7 are some of the HTML5 tags and events generated
by the DOM Object Model (DOM) type.

Figure 7. JavaScript Events

1.5. JQuery
jQuery is a JavaScript library that was created in 2006 by J ohn Resig [6]. jQuery greatly
simplifies programming in Javascript code and adds dynamism to webpages. jQyery also
simplifies the functional aspects of the web page such as navigation, animations, upload
speed, browsers compatibility, etc.

33
The jQuery libra ry must be added to the <head> </ head> section of an HTML document and
stored in a single JavaScript file.
The jQuery library contains, among other things, HTML and HTML DOM elements, CSS3
code elements, JavaScript code for animations and other effects, A JAX elements, Cross
Browser support between browsers, making web applications compatibl e with most web
browsers, etc .

1.5.1. How do I add a jQuery library to a webpage?
A jQuery library can be added to an HTML program by a command such as:
<head>
<scrip t type=”text/javascript” src=”jquery_file.js”></script>
</head>
The jQuery file does not need to be stored on our computer. The jQuery bookstore can be
included in the HTML code via Google by entering the sequence:
<head>
<script type=”text/javascript”
scr=”http>//ajax.googleapis.com/ajax/libs/jquery/versiunea/jquery.min.js”></script>
</head>
Sau pot fi folosite saiturile Microsoft
<head>
<script type=”text/javascript”
scr=”http>//ajax.microsoft.com/ajax/jquery -versiunea.min.js”></script>
</head>
The <scr ipt> tag must be in the <head> section of the page.
How does a jQuery function work? I will explain below:
<Head>
// through this sequence includes jQuery in the page
<script type=”text/javascript” src=”jquery.js”></script>
</head>
<script type=” Text/jav ascript”>
$(document).ready(function()

34
{// follows the jQuery functions. The HTML document can not be processed by JavaScript if
it was not uploaded by the browser. Main items are loaded in the DOM. After loading them,
the function will be loaded by call ing jQuery .
$(“.buton”).click(function() {
// class .button is the element to which the jQuery function will be referenced
// the .click element determines the method by which the function becomes active, that is,
when clicking the element in the .buton c lass.
$(“#caseta”).slideUp(“slow);”
// the element to which the jQuery function will be used is the id id = "box"
// slideUp ("slow") is the effect that will apply to the box element.
});
Script can also be written in an external file.
Observation. Writi ng $ () can be replaced with similar jQuery ()

1.5.2. The jQuery element syntax
The jQuery syntax is simple because the code lines are short. All jQuery commands start with
the $ symbol.
The jQuery syntax is designed to act on the HTML code elements
The j Query syntax is based on the expression:
$ (element or selector). action or event (function or parameter);
– Using the alias "$" we can access the jQuery library.
– The Element or Selector is an HTML tag, a CSS id or a JavaScript class to which the jQuery
function is applied.
– The action or event or method is the method by which the function or parameter is executed,
that is, the event by which we will act or activate an HTML selector.
– Parameters indicate the exact method by which actions or events are a pplied.
The syntax of using a script is:
$(document).ready(function() {
// urmează scrierea codului și apoi închiderea
Ready is the jQuery method that checks and expects the structure of the HTML page to be
loaded
Access to the HTML page is through access to page elements, which can be:
– Labels. Access mode is through label_n ame (for example, "s", "div")

35
– ID items,} in this case access mode is #ID (example: #text)
– Elements of class (class). Access mode is .name of the class (the point sign followed by the
class name. (For example, .text, .stil)

1.6. XML (eXtensible Markup Language)
XML is a markup language somewhat similar to HTML, but here tag creation is relatively left
to the user's reach. While HTML is a display language, XML is a data description language.
Hence its advantages: simplicity, flexibility, accessibility, e asy editing in any simple, easy -to-
read, easily expandable text editor.
XML can also be considered as a data storage system or format. Data stored in XML is called
entities. In fact, XML documents are defined as entities.
The issue of XML creation has star ted from the goal of finding a data storage and readable
format that can run on any platform and be recognized by any program. Thus, the method of
describing data using bookmarks appeared. Marks are used by machines to read formats of
data and forms that n eed to be processed in various fields of activity. Charls Goldfarb
researcher at IBM had the idea of describing the structure that a document needs to have to be
validated by a machine. Such a computer program that processes such a document will know
in advance the structure of the document and will be able to retrieve, process and analyze it
easily. Goldfarb called this document type template.
XML has thus become an international, standardized format for data storage and processing in
all areas. The data of any institution is described and stored using XML, and their affiliation
can be done using HTML.

1.6.1. Composition of an XML format
An XML document consisting of document content and bookmarks. Tag (tag) is an activity to
tell the word processor how to interpret a piece of text. The mark is a string of characters
delimited by the <and> carcasses.
XML does not use bookmarks to display data or other actions, but to provide a standardized
means of analysis for XML processors and to describe the hierarchi cal structure of the
content.
Any XML file contains the following mandatory sections:

36
1. A prolog, which is a processing instruction that tells us that an XML file is to be described
that respects the version and character code specified
2. Define the type of document;
3. Find the root element
In an XML file, we can find all of these sections. Example:

2 <?xml version=”1.0” encoding=”UTF -8”?>
2 <!DOCTYPE MAIL SYSTEM „MAIL.DTD”>
3 <MAIL id=”15” date=”23-05-2016”>
<FROM>bogdanflaviusalin@ya hoo.com</FROM>
<TO>bogdanflaviusalin@yahoo.com </TO>
<SUBJECT >Am terminat lucrarea de licenta </SUBJECT>
<BODY>
Hello Bogdi
</BODY>
</MAIL>

<? xml version = "1.0" encoding = "UTF -8"?>
He tell s us he's going to have an XML file with version 1.0 and the UTF -8 character set
2. Define the type of document
<!DOCTYPE MAIL SYSTEM „MAIL.DTD ”>
The root tag is the mail tag, and the mail.dtd file contains the document type declaration
3. The root element of the XML document is the resp. Code, ie:

<MAIL id=”15” date=”23-05-2016”>
<FROM>bogdanflaviusalin@yahoo.com </FROM>
<TO>bogdanflaviusalin@yahoo.com </TO>

37
<SUBJECT >Am terminat lucrarea de licenta </SUBJECT>
<BODY>
Hello Bogdi
</BODY>
</Mail>

The syntax of an XML document includes the following types of markup:
Document Type Statement, Entities, Elements, Attributes, Comments, Processing
Instructions, Data Section

1.6.2. Solving XML -related ambiguities

In XML documents of the same kind, but from different sources, situations may arise where
elements or attributes have the same name but different significance. To avoid these
ambiguities that appear quite frequently, naming names are us ed that uniquely identify the
names of the elements or attributes, avoiding conflicts. For this, the namespace has been
entered.
For example, a name can be a name for people, or a business name, etc. To avoid such
situations, a name vocabulary is created a nd an namespace based on it.

38
CHAPTER 2. PHP LANGUAGE. MYSQL DATABASES

2.1. Basic elements of PHP language

PHP (Hypertext Preprocessor) is a widely used open source (open source) scripting language
that is especially suitable for web application development and can be integrated into HTML .
The php code is delimited with the <? And respectively? Or <? Php and respectively?>
Example
<!DOCTYPE HTML>
<html>
<head>
<title>Exemplu</title>
</head>
<body>

<?php
echo „Salut, sunt un script PHP!”;
?>
</body>
</html>
nstead of a set of commands to display HTML (as in C or Perl), the PHP pages contain
HTML with embedded source code that performs "something" (in this case, displays "Hello,
I'm a PHP script!" ). The PHP source code is embedded in some special start and end
processing instructions <? Php = and?>, Which allow you to enter and exit PHP mode.
The first_script.php file was created in C: \ Program Files \ EasyPHP -1.8 \ www and open a
browser (Internet Explorer or Mozilla Firefox) and type the address: http:
//localhost/primul_script.php
What makes PHP different from a client -side JavaScript is that its code is executed on the
server, generating HTML that is then sent to the client. The client will recei ve the results of
running that script without being able to know the underlying source code. You can even
configure the web server to process all HTML files with PHP, and then there really will be no
way for users to find out what's hidden in your sleeve.

39
PHP can be used in conjunction with a wide list of SGBDs of both commercial and non –
commercial SGBDs including MySQL, dBase, Oracle, DB2, PostgreSQL, InterBase SQLSer
er ODBC, etc. Sybase, InterBase, SQLServer, ODBC, and so on
The PHP code is interpreted o n the WEB server and generates an HTML code that will be
seen by the Utility (the client (the browser) being transmitted only code interpreted as
HTML).

Figure 9. PHP script

It can also embed HTML. Example:
<? Php
echo 'This is a script that also conta ins <b> HTML </ b> <br>
<a href="pagina_mea.php"> Link to my page </a> ';
?>
In a php script, you can create as many variables as we want. Example
<?php
$nume = 'orice';
$prenume = 'on';
$varsta = '20 ani';
$tara = 'Romania';
echo ' Ma numesc '.$nume.' ' .$prenume.', am '.$varsta.' si locuiesc in '.$tara.'. ';
?>

40
In a variable we can have several variables with different content and the "sticking" of the
variables is done with 'and' respectively. ie if we have two variables, we will associate them
with $ variable 1. ". $ variabila2

<?php
$nume = 'orice';
$prenume = 'on';
$nume_complet = $nume.' '.$prenume;
echo ' Ma numesc '.$nume_complet.' ';
?>

Forms.
A form is delimited by the FORM element that contains several other elements called
"controls", which have a variety of methods to gather information. Each element in the form
has a name and a value, so that the data transferred for processing is in the form of name /
value pairs. The syntax is:
<form [action=url] [method=get/post] [enctype=MIMEType] [onsu bmit=script] [onreset=script]
[acceptcharset=set_caractere]
[core] [international] [events]>

The main tasks in designing an HTML form are the choice of the HTML controls to be
included in the form, the selection of the control locations and the choice of the name.
An HTML form must contain a send, submit button, which the user clicks to send the data
from the form to the PHP script.
Forms are created using specific labels embedded in the <form> </ form> tag as in the
example below:

<form action = "script. php" method = "post">
Name: <input type = "text" name = "name" />
<br /> <input type = "submit" name = "submit" value = "Trmite form" />
</ Form>
The browser will see:

41

Generally, the form data is retrieved by the PHP script using the following formula:

$ _POST ['name'] – if method = "post"
$ _GET ['name'] – if method = "get"

– where "name is the value of the name attribute of the element in the HTML form.
A practical example of an HTML form that sends data (via method = "post") to a PHP scrip t
where they can be viewed.
We save the script below in a file we call "test -form.php"
<?php
$nume = $_POST['nume'];
$email = $_POST['email'];
$parola = $_POST['parola'];

echo "Nume = $nume";
echo "<br />E -mail = $email";
echo "<br />Parola = $parola";
?>
We write the HTML code into another "form.html" file, which we save in the same directory
as the PHP script above.

<!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" xml:lang="ro" lang="ro">
<head>
<meta http -equiv="content -type" content="text/html; charset=UTF -8" />
<title> Test -Form </title>
</head>
<body>
<form action="test -form.php" method="POST">

42
Nume:<input type="text" name="nume" />
<br />Email:<input type="text" name="email" />
<br />Parola:<input type="password" name="parola" />
<br /><input type="submit" name="submit" value="Trmite datele" />
</form>
</body>
</html>
The browser will show:

2.2. Elements about MySQL databases
Mysql (pronounced mai -es-chiu-el) is a very fast and robust database management system. A
database allows you to store, search, sort and retrieve data efficiently. The MySQL server
controls access to your data to ensure that multiple users can work with them
MyS QL is a multi -user (multi -user) and multi -thread server (multiple threads). Uses SQL
(Structured Query Language), the standard database query language of the world.
MySQL is available under an Open Source license, but commercial licenses are available if
needed.
To run a site is primarily a HyperText Transport Protocol (HTTP) server. Apache is a good
choice because of its flexibility, portability, security and extensibility.
How a database works with a server. It is shown in the figure

43

Figure 10. MySQL S erver operating schema
phpMyAdmin is a php script that helps manage a database using a web interface. The figure
shows how this php script is called phpMyAdmin.

Figure 11. MyAdmin PHP Interface
A database is the backbone of a dynamic site. It is made up of tables which, in turn, consist of
field recordings.

Figure 12. Table

44
A row from the database is made up of:
1) A name after seeing the field column. This name can not contain space.
2) A type value that differs from column to column.
The most commonl y used types are:
Numeric types:
INT – Byte Storing 4
BIGINT – 64 bits
Types of string:
CHAR – Interval 1 -255 characters
VARCHAR – Interval 1 -255 characters
Text types:
TEXT – Maximum character length 65.535
LONGTEXT – Maximum length of characters 4.294.96 7.295

1) Creating a database
Go to http: // localhost / phpmyadmin / and then see in the middle, the field "Create New
Database"

Figure 13. Entering the database name

To add a table to our database, we need to compile the "Create new table in tutorial database:"
field.

Figure 14. Creating a table

45

Figure 15. Fields of a table
After they have been entered click the "Save" button. The image in the figure is displayed

Figure 16. Creating the table

Connecting to MySQL using PHP
A folder is created in the root directory of the apache server (www) with the tutorial name, for
example. A file is created with the name config.php where the following code is given,
corresponding to the configuration file: = where to connect to the database:
<? Php
// Databas e information
$AdresaBazaDate = "localhost";
$UtilizatorBazaDate = "root";
$ParolaBazaDate = "parola_mysql";
$NumeBazaDate = "tutorial";
$conexiune = mysql_connect($AdresaBazaDate,$UtilizatorBazaDate,$ParolaBazaDate)
or die("Nu ma pot conecta la MySQL!");
mysql_select_db($NumeBazaDate,$conexiune)
or die("Nu gasesc baza de date!");
?>
MySQL database manipulation uses k

46

CHAPTER 3. REALIZING AND FUNCTIONING THE
ELECTRONIC IT SHOP APPLICATION

3.1. Description of the Online Store application
When building this site, PHP was used with mySQL support for databases.
As the interface for editing I used Notepad ++, and as a server for PHP and mySQL I used
Xampp. Xampp offers direct access to databases through phpmyadmin, an important feature
in the application creati on process. Phpmyadmin provides the ability to create databases,
create tables, view and manage tables. However, for creating the base and the tables we used
php functions.
include_once("../include/mysql.inc.php");
$server_name = "localhost";
$db_name = "magazin";
$db_user = "root";
$db_pass = "";
$myConn = mysql_connect($server_name, $db_user, $db_pass) or
die("Error while connecting to db: " . mysql_error());
$res=mysql_query("Create database $db_name");
if($res){
$dbConn=mysql_selec t_db($db_name);
if($dbConn){
$res=mysql_query("CREATE TABLE `tadmins` (
`fIdAdmin` int(11) UNSIGNED NOT NULL,
`fUsername` varchar(32) DEFAULT NULL,
`fPassword` varchar(32) DEFAULT NULL)");
$res=mysql_query("CREATE TABLE `tcategori i` (
`fIdCategorie` int(11) UNSIGNED NOT NULL,
`fNumeCategorie` varchar(50) NOT NULL
DEFAULT'')");

47

Figure 17. Administration panel
The files and resources are logically structured into specific folders

Figure 18. The content of the Online St ore application
The site offers two different interfaces – one for administration and the other for users.

3.1. Administrator interface
Access to the management side is older than that of users and is done by accessing the
index.php file in olderol "admin ". This file includes, in turn, several files – one for configuring

48
access to the mysql.inc.php database as well as files containing the functions defined by
"functions.inc.php" and "adminfunctions.inc.php" all of the older "includes".
When accessing this interface, authentication is made:
After login, a menu is displayed on the left of the page that provides links to add, modify, and
delete modules in the online store.
Figure 19. PcOne administration panel

The functionality of the different models is sim ilar, all offering the possibility of performing
data operations. Exemplified by the Adders Module

49

Figure 20. Adding clients panel
Note that the menu is kept on the left side of the page for easy access to the other modules,
while on the right side th e imported manufacturers are displayed, giving the possibility of
adding, modifying or deleting a producer, as well as generating useful reports.

Figure 21. Reports panel

50

Figure 22. Site administration panel

Similarly, the other modules (eg, category administration)
So the management interface provides the tools needed to maintain online store data as well
as the tools needed to have a detailed look.

3.3. User Interface

The user interface is launched by accessing the file "index.php", a file from whi ch – as with
the administration interface – you can access, among other things, the database configuration
file "mysql.inc.php" and the "functions.inc.php" file that contains the functions that will be
used.
The home page is divided into several areas. The top is intended for the logo – on the left – and
the shopping cart – partly right. The main menu is shown at the top and bottom. Also in the
upper part is the authentication area. The median area is divided into three sections. A left
side has the search area, the central part is reserved for the cutting results, and on the right are
presented "Product of the day" and "Promotions".

51

Figure 23. Home Page

Also on the left there are links to other pages for other information, coupons, etc.
You can search f or a product either by selecting a category from the category list, then from
the list presented or from the search module.

Figure 24. Product search
3. Add to cart. Is only allowed if the user has an account and is authenticated.

52

Figure 25. Adding to the cart

Each product has the "Add to Cart" button attached. Pressing this button displays the
shopping cart page

Figure 26. Viewing the basket
in which we have the ability to change the number of copies ordered from a product, to empty
the basket or t o order the products by entering the delivery data.

53

Figure 27. Changing the number of products in the page

54

CONCLUSIONS AND CONTRIBUTION

In my undergraduate work I highlighted the theoretical contribution through a synthetic
presentati on of the used and existing web technologies for the development of the web pages
as well as the practical contribution through the concrete realization of the application.
Theoretical methods and their practical application have enabled a personalized app lication.
Current web techniques allow the development of adaptable web pages and platform
adaptability to platform and desktop devices, laptops, tablets or phones, or whether the used
platforms are Windows or non -Windows operating systems.
Through the the oretical contribution from the paper, we performed the critical analysis and
critical analysis of the different existing web technologies, the evolution of the versions of
these weblogs and the ways of their implementation.
The study shows that HTML5, one of the great future tools of WEB2.0 technologies and
paradigm, is the best option for building up advanced and complex web pages.
The Android platform, for smartphones, an open source platform that allows the user to install
their own applications is also neglected.
In the framework of the bachelor work, for the practical realization of the project, I
approached the following WEB techno logies:
• HTML5 that brings a whole host of new tags and removes others that were slow to use or
includes them in CSS packages. This version of HTML has been designed to make it easy to
include video content, audio, graphics, etc. without the need for plug ins and APIs. [6]
• CSS3 styles, which define the "layout" for documents on the HTML page. That is, HTML5
has the role of describing and presenting the form of an element of the web page, and the CSS
is meant to describe how that element should look.
• Jav ascript and jQuery, are standard scripting languages dedicated to creating dynamic and
performing WEB pages that can be deployed within HTML5 pages.
As is well known, the JavaScript code is hosted in the HTML document and is executed
within it, JavaScrip t being a flexible language, completely different from C ++, C # or Java.
JavaScript has specific features to work with scalable, which type is not specified before
running. It is a language specially adapted for web pages.
• XML, is a mark -up language sim ilar to HTML, the greater difference being that the tags are
not defined and the programmer is free to experiment with various types of commands,

55
defining them by themselves. An XML document can be edited, modified, easily transformed,
requiring only a sim ple text editor such as Notepad or Wordpad.
Practical work was done using WEB technologies presented in the paper.
Implementation and implementation consisted of the following steps:
• Choosing a software that specifically uses these WEB technologies, resu lting in the choice
of HTML5, PHP and MYSQL. Testing them
• I've emptied multiple versions of the virtual store using different technologies
• I wrote the source code for the application.
• We have experienced implementing the application.
• We have made t he graphic design and web site layout.
• We have developed a "Help" section for a better understanding of how the application
works.
• We tested the end product on multiple platforms to optimize resolution and functionality
across a wide range of devices.
As future achievements, I am proposing to diversify the application's use on various types of
browsers, adding new features that, for example,
Another concern for the future is to make personalized by making image collages, sound text,
using only web techn ologies and devices such as smart tablets or phones,
Permanent application development by introducing new features and methods to create
persdonalized photo albums without the user having specialized knowledge.

56

BIBLIOGRA PHY

Programare WEB : s upot de curs / Ioan Filip – București : Conspress, 2013 Bibliogr. ISBN
978-973-100-263-7
Mihaela Brut, Sabin Buraga, Prezentări multimedia pe Web, Polirom, Iasi, 2003
Ian S. Graham – “HTML Stylesheet Sourcebook”, Wiley, 2007
Darren Levy – “HTML/CSS / Ja vaScript: From Beginner to Whiz”, 2017
Sabin Buraga, Proiectarea siturilor Web – ediția a doua, Polirom, Iasi, 2005
Buraga, Sabin Corneliu. "Tehnologii Web." Matrix Rom, Bucharest (2011).
Traian Anghel, Programare Web, Editura Polirom, Iasi, 2007

WEBOGR APFIE

http://ro.wikipedia.org/wiki/HTML5 , consultat în data de 25.05.2018
http://themarklee.com , consultat în data de 11.05.2018
https://secure.php.net/manual/ro/inde x.php
http://www.sjuneamt.ro/wp -content/uploads/2013/10/Initiere -in-PHP-MySQL -Romana.pdf
http://dpw.bistrita.ro/wp -content/uploads/jQuery_ro.pdf , consultat în data de 15.04.2018