Scribd
Upload
357 views49 pages

WEB 2022 - 2023 Practical Exercises

This document discusses HTML and CSS for web programming. It provides steps to create basic HTML pages with headings, paragraphs, links, images and lists. It then covers how to style HTML pages with CSS using inline, internal and external stylesheets. CSS can control font properties, text color, borders, padding, margins and more for HTML elements. The document provides examples and links for further CSS reference.

Uploaded by

Maria Aldeş
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
357 views49 pages

WEB 2022 - 2023 Practical Exercises

This document discusses HTML and CSS for web programming. It provides steps to create basic HTML pages with headings, paragraphs, links, images and lists. It then covers how to style HTML pages with CSS using inline, internal and external stylesheets. CSS can control font properties, text color, borders, padding, margins and more for HTML elements. The document provides examples and links for further CSS reference.

Uploaded by

Maria Aldeş
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 49

TRANSILVANIA UNIVERSITY OF BRASOV

Page 1 of 49

WEB programming

FACULTY OF MATHEMATICS AND INFORMATICS

Webseite: https://mateinfo.unitbv.ro/

Conf. univ. dr. Livia SANGEORZAN - [email protected]

Asist. univ. drd. Dragos TOHANEAN – [email protected]

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 2 of 49

Content

HTML - Hyper Text Markup Language ................................................................................................ 3

Styling HTML with CSS ....................................................................................................................... 9

JavaScript .......................................................................................................................................... 16

WEB in general .................................................................................................................................. 19

VRML ................................................................................................................................................. 27

SQL.................................................................................................................................................... 30

PHP ................................................................................................................................................... 41

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 3 of 49

HTML - Hyper Text Markup Language

Most common declarations:


• The <!DOCTYPE html> declaration defines this document to be HTML5
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the document
• The <title> element specifies a title for the document
• The <body> element contains the visible page content
• The <h1> element defines a large heading
• The <p> element defines a paragraph

HTML page structure:

Versions:

Web pages can be created and modified by using professional HTML editors. However, for learning
HTML we recommend a simple text editor like Notepad (PC)

Step 1 - Open Notepad - Start > Programs > Accessories > Notepad

Step 2 – Write following HTML example:

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 4 of 49

Step 3 – Save the HTML file:

Step 4 - View HTML page in your browser:

Step 5 – HTML headings:

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

Step 6 – HTML paragraphs:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Step 7 – HTML links

<a href="https://www.google.de/maps">This is a link</a>

Step 8 – HTML Images

<img src="test.jpg" width="104" height="142">

Step 9 – HTML buttons

<button>Click me</button>

Step 10 – HTML lists - are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered
list) tag, followed by <li> tags (list items):

<ul>
<li>IAG</li>
<li>MITB</li>
<li>MI</li>
</ul>

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 5 of 49
Step 11 – HTML colors:

Step 12 – HTML attribute example:

Step 13 – HTML fonts:

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 6 of 49
Step 14 – HTML formating elements were designed to display special types of text:

• <b> - Bold text


• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Small text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text

Step 15 – HTML comments:

Step 16 – HTML background color:

Step 17 – HTML links:

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 7 of 49
Step 18 – HTML table:

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 8 of 49

EXERCISE 1: Create your own CV in HTML (use all above attributes: image, lists, tables, colors,
heading, fonts, links, background color etc.). The code should be well structured and commented.

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 9 of 49

Styling HTML with CSS

CSS stands for Cascading Style Sheets.

CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

CSS Solved a big problem:


- HTML was NEVER intended to contain tags for formatting a web page!

- HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a
nightmare for web developers. Development of large websites, where fonts and color information were
added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS can be added to HTML elements in 3 ways:


- Inline - by using the style attribute in HTML elements
- Internal - by using a <style> element in the <head> section
- External - by using an external CSS file

The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will
use inline and internal styling, because this is easier to demonstrate, and easier for you to try it
yourself.

Step 1 - Inline CSS:

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

This example sets the text color of the <h1> element to blue:

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 10 of 49
Step 2 - Internal CSS:

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element:

Step 3 - External CSS:

An external style sheet is used to define the style for many HTML pages.

With an external style sheet, you can change the look of an entire web site, by changing one file!

To use an external style sheet, add a link to it in the <head> section of the HTML page:

An external style sheet can be written in any text editor. The file must not contain any HTML code, and
must be saved with a .css extension.

Here is how the "styles.css" looks:

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 11 of 49
Step 4 - CSS Fonts:

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example:

Step 5 - CSS Border:

The CSS border property defines a border around an HTML element:

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 12 of 49
Step 6 - CSS Padding:

The CSS padding property defines a padding (space) between the text and the border:

Step 7 - CSS Margin:

The CSS margin property defines a margin (space) outside the border:

Step 8 - The id Attribute:

To define a specific style for one special element, add an id attribute to the element:

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 13 of 49
Step 9 - The class Attribute:

To define a style for special types of elements, add a class attribute to the element:

Step 10 - External References:

External style sheets can be referenced with a full URL or with a path relative to the current web page.

Other usefull links:

CSS Synax: https://www.w3schools.com/css/css_syntax.asp

CSS Colors: https://www.w3schools.com/css/css_colors.asp

CSS Height and Width: https://www.w3schools.com/css/css_dimension.asp

CSS Outline: https://www.w3schools.com/css/css_outline.asp

CSS Icons: https://www.w3schools.com/css/css_icons.asp

CSS Tables: https://www.w3schools.com/css/css_table.asp

CSS Layout: https://www.w3schools.com/css/css_max-width.asp

CSS Image Gallery: https://www.w3schools.com/css/css_image_gallery.asp

CSS 3D Transforms: https://www.w3schools.com/css/css3_3dtransforms.asp

CSS Animations: https://www.w3schools.com/css/css3_animations.asp

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 14 of 49

EXERCISE 2: Create your own postcard styling HTML with CSS (use all above attributes: lists, tables,
colors, heading, fonts, attributes, icons, imgae gallery etc.). The code should be well structured and
commented.

Both sides in same HTML document. Side 1:

Side 2:

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 15 of 49

JavaScript

JavaScript was initially created to “make webpages alive”.

The programs in this language are called scripts. They can be written right in the HTML and execute
automatically as the page loads.

Scripts are provided and executed as a plain text. They don’t need a special preparation or a
compilation to run.

In this aspect, JavaScript is very different from another language called Java. When JavaScript was
created, it initially had another name: “LiveScript”. But Java language was very popular at that time, so
it was decided that positioning a new language as a “younger brother” of Java would help.

At present, JavaScript can execute not only in the browser, but also on the server, or actually on any
device where there exists a special program called the JavaScript engine.

The browser has an embedded engine, sometimes it’s also called a “JavaScript virtual machine”.

Different engines have different “codenames”, for example:

• V8 – in Chrome and Opera.

• SpiderMonkey – in Firefox.

• …There are other codenames like “Trident”, “Chakra” for different versions of IE,
“ChakraCore” for Microsoft Edge, “Nitro” and “SquirrelFish” for Safari etc.

What makes JavaScript unique?

There are at least three great things about JavaScript:

• Full integration with HTML/CSS.

• Simple things done simply.

• Supported by all major browsers and enabled by default.

Combined, these three things exist only in JavaScript and no other browser technology. It’s the most
widespread tool to create browser interfaces.

Links:

JavaScript introduction: https://www.w3schools.com/js/js_intro.asp

Statements: https://www.w3schools.com/js/js_statements.asp

Sytanx: https://www.w3schools.com/js/js_syntax.asp

Variables: https://www.w3schools.com/js/js_variables.asp

Operations: https://www.w3schools.com/js/js_operators.asp

Functions: https://www.w3schools.com/js/js_objects.asp

Objects: https://www.w3schools.com/js/js_objects.asp

Data types: https://www.w3schools.com/js/js_datatypes.asp

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 16 of 49

Step 1 – Create one folder. Create below HTML file:

Step 2 – Write following JS example:

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 17 of 49

Step 3 – Call index.html file and your browser should open. Following result should be seen:

EXERCISE 3: Create your own JS example.

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 18 of 49
WEB in general - the Most Popular Browsers

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 19 of 49

IE = Microsoft Internet Explorer

Firefox = Mozilla Firefox (identified as Mozilla before 2005)

Chrome = Google Chrome

Mozilla = The Mozilla Suite (Gecko, Netscape)

Safari = Apple Safari (and Konqueror. Both identified as Mozilla before 2007)

Opera = Opera (from 2011; Opera Mini is included here)

AOL = America Online (based on both Internet Explorer and Mozilla)

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 20 of 49

Browser's developer tools can be used to inspect, edit and debug HTML, CSS, and JavaScript of the
curently-loaded page. To learn more, check out the browser's own manual for developer tools:

Chrome DevTools - https://developers.google.com/web/tools/chrome-devtools/

Microsoft Edge Developer Tools - https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide

Firefox Developer Tools - https://developer.mozilla.org/en-US/docs/Tools

Safari Web Inspector - https://developer.apple.com/safari/tools/

Opera DevTools - https://dev.opera.com/extensions/dev-tools/

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 21 of 49
Web Development Roadmaps

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 22 of 49

More detailed overview: https://www.w3schools.com/whatis/default.asp

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 23 of 49
Example WEB Templates used:

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 24 of 49

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 25 of 49
Links to Templates:

Grayscale: https://startbootstrap.com/template-overviews/grayscale/

Admin: https://startbootstrap.com/template-overviews/sb-admin-2/

Freelancer: https://startbootstrap.com/template-overviews/freelancer/

Creative: https://startbootstrap.com/template-overviews/creative/

Blog: https://startbootstrap.com/template-overviews/clean-blog/

Agency: https://startbootstrap.com/template-overviews/agency/

New structure: https://startbootstrap.com/template-overviews/new-age/

CV: https://startbootstrap.com/template-overviews/resume/

Coming soon: https://startbootstrap.com/template-overviews/coming-soon/

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 26 of 49
VRML

Download CORTONA3D VIEWER: http://www.cortona3d.com/de/cortona3d-viewer-download


(inforamtion on how to enable the viewers in the web browsers, web browers supported by and
minimum requirement can be found unther the same link)

VRML, the Virtual Reality Modeling Language, is a file format for describing interactive three-
dimensional objects and worlds .

VRML has developed in time:


• VRML 1.0 allows for the creation of virtual worlds with limited interactive behavior. These
worlds can contain objects which have hyper-links to other worlds, HTML documents or other
valid MIME types.

• VRML 1.1 extends VRML to support dynamic input fields, sound, camera-collision, navigation-
info, background, fog, height-fields and prototyping of nodes.

• VRML 2.0 will extend VRML to be more interactive and mult-user-able.

Here a world is a model of a 3D space, which can contain 3D objects, lights, and backgrounds; in
other 3D systems this is often called a scene . Objects can be built from solid shapes, from text, or
from primitive points, lines, and faces. Objects have optical material properties which affects how they
interact with the lights in the world; they can also have textures (2-D pat terns) applied to them.

Objects can be grouped into more complex objects, used multiple times, translated, and rotated.
Objects can trigger events, which can be routed to other events or to scripts written in JavaScript or
Java . Within VRML you can trigger sounds, move objects along paths, and link to HTML or VRML
targets. In JavaScript or Java you can manipulate VRML object properties programmatically and even
generate new objects.

It's entirely possible to create VRML worlds with nothing more than the VRML specification, a text
editor, and a VRML-enabled browser (all of which are free), if you're a programmer with a good grasp
of 3D computer graphics concepts. On the other hand, a VRML modeling program or world builder can
take a lot of the pain out of the process, and make 3D world creation accessible to non-technical
designers.

A VRML file contains a file header, comments, and nodes:


• Nodes, which describe objects, may have names and contain fields and values.

• Comments and the file header begin with the pound sign, and curly brackets delimit the
hierarchy of nodes and fields.

VRML files measure distance in meters, angles in radians, time in seconds, and colors as RGB triplets
with each value in the range [0.0,1.0]. It uses a Cartesian, right-handed three-dimensional coordinate
system. By default, the viewer is positioned along the positive Z-axis so as to look along the -Z
direction with +Y-axis up.

VRML files use the .wrl (world) extension and the model/vrml MIME type.

The basic node for defining visible VRML objects is the Shape , which in turn contains Geometry and
Appearance nodes.

So, for example, the following example defines a world containing one cylinder 2 meters high with a
1.5 meter radius with default material properties, meaning that the object will appear to be a glowing
white:

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 27 of 49
#VRML V2.0 utf8
# A Cylinder
Shape {
appearance Appearance {
material Material { }
}
geometry Cylinder {
height 2.0
radius 1.5
}
}

The available geometry nodes are the Box, Cone, Cylinder, ElevationGrid, Extrusion,
IndexedFaceSet, IndexedLineSet, PointSet, Sphere and Text .

Fore more detailed information about VRML 2.0 please access: http://www.c3.hu/cryptogram/vrmltut/

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 28 of 49
Step 1 – Write following VRML example. Save the document .wrl:

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 29 of 49
EXERCISE 4: Create your own VRML example (use at least 6 nodes: Box, Cone, Cylinder,
ElevationGrid, Extrusion, IndexedFaceSet, IndexedLineSet, PointSet, Sphere etc.). The code should
be well structured and commented.

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 30 of 49

SQL

SQL is a standard language for storing, manipulating and retrieving data in databases.

What is SQL?
- SQL stands for Structured Query Language

- SQL lets you access and manipulate databases

- SQL became a standard of the American National Standards Institute (ANSI) in 1986, and of
the International Organization for Standardization (ISO) in 1987

What Can SQL do?


- SQL can execute queries against a database

- SQL can retrieve data from a database

- SQL can insert records in a database

- SQL can update records in a database

- SQL can delete records from a database

- SQL can create new databases

- SQL can create new tables in a database

- SQL can create stored procedures in a database

- SQL can create views in a database

- SQL can set permissions on tables, procedures, and views

Access https://www.mysql.com/de/ and download MySQL Enterprise Edition (trial version):

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 31 of 49

Or access https://www.postgresql.org/

Some of the most important SQL commands:

− SELECT - extracts data from a database

− UPDATE - updates data in a database

− DELETE - deletes data from a database

− INSERT INTO - inserts new data into a database

− CREATE DATABASE - creates a new database

− ALTER DATABASE - modifies a database

− CREATE TABLE - creates a new table

− ALTER TABLE - modifies a table

− DROP TABLE - deletes a table

− CREATE INDEX - creates an index (search key)

− DROP INDEX - deletes an index

Example of a table that contains five records (one for each customer) and seven columns
(CustomerID, CustomerName, ContactName, Address, City, PostalCode, and Country).:

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 32 of 49
Step 1 – Select Syntax

Step 2 – SQL WHERE clause is used to filter records and to extract only those records that fulfill a
specified condition

Step 3 – SQL AND, OR and NOT Operators

The WHERE clause can be combined with AND, OR, and NOT operators.

The AND and OR operators are used to filter records based on more than one condition:
The AND operator displays a record if all the conditions separated by AND is TRUE.
The OR operator displays a record if any of the conditions separated by OR is TRUE.

The NOT operator displays a record if the condition(s) is NOT TRUE.

Step 4 - SQL ORDER BY Keyword

The ORDER BY keyword is used to sort the result-set in ascending or descending order. The ORDER
BY keyword sorts the records in ascending order by default. To sort the records in descending order,
use the DESC keyword.

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 33 of 49

Step 5 – SQL INSERT INTO Statement

The INSERT INTO statement is used to insert new records in a table. It is possible to write the
INSERT INTO statement in two ways.

The first way specifies both the column names and the values to be inserted:

If you are adding values for all the columns of the table, you do not need to specify the column names
in the SQL query. However, make sure the order of the values is in the same order as the columns in
the table. The INSERT INTO syntax would be as follows:

Step 6 – SQL DELETE Statement

The DELETE statement is used to delete existing records in a table.

Step 7 - SQL COUNT(), AVG() and SUM() Functions:

The COUNT() function returns the number of rows that matches a specified criteria.

The AVG() function returns the average value of a numeric column.

The SUM() function returns the total sum of a numeric column.

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 34 of 49
Step 8 - SQL MIN() and MAX() Functions:

The MIN() function returns the smallest value of the selected column.

The MAX() function returns the largest value of the selected column.

Step 9 - SQL TOP, LIMIT or ROWNUM Clause:

The SELECT TOP clause is used to specify the number of records to return.

The SELECT TOP clause is useful on large tables with thousands of records. Returning a large
number of records can impact on performance.

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 35 of 49
SQL TOP, LIMIT and ROWNUM Examples:

Step 10 - SQL Joins:

A JOIN clause is used to combine rows from two or more tables, based on a related column between
them.

Let's look at a selection from the "Orders" table:

Then, look at a selection from the "Customers" table:

Notice that the "CustomerID" column in the "Orders" table refers to the "CustomerID" in the
"Customers" table. The relationship between the two tables above is the "CustomerID" column.

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 36 of 49
Then, we can create the following SQL statement (that contains an INNER JOIN), that selects records
that have matching values in both tables:

Result:

Here are the different types of the JOINs in SQL:

- (INNER) JOIN: Returns records that have matching values in both tables
- LEFT (OUTER) JOIN: Return all records from the left table, and the matched records from the
right table
- RIGHT (OUTER) JOIN: Return all records from the right table, and the matched records from
the left table
- FULL (OUTER) JOIN: Return all records when there is a match in either left or right table

Step 11 - SQL INNER JOIN Keyword:

The INNER JOIN keyword selects records that have matching values in both tables.

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 37 of 49
Step 12 - SQL LEFT JOIN Keyword:

The LEFT JOIN keyword returns all records from the left table (table1), and the matched records from
the right table (table2). The result is NULL from the right side, if there is no match.

Step 13 - SQL RIGHT JOIN Keyword:

The RIGHT JOIN keyword returns all records from the right table (table2), and the matched records
from the left table (table1). The result is NULL from the left side, when there is no match.

Step 14 - SQL FULL OUTER JOIN Keyword:

The FULL OUTER JOIN keyword return all records when there is a match in either left (table1) or right
(table2) table records.

Note: FULL OUTER JOIN can potentially return very large result-sets!

Step 15 - SQL GROUP BY Statement:

The GROUP BY statement is often used with aggregate functions (COUNT, MAX, MIN, SUM, AVG) to
group the result-set by one or more columns.

Step 16 - SQL CREATE DATABASE Statement:

The CREATE DATABASE statement is used to create a new SQL database.

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 38 of 49
Tip: Make sure you have admin privilege before creating any database. Once a database is created,
you can check it in the list of databases with the following SQL command: SHOW DATABASES.

Step 17 - SQL CREATE TABLE Statement:

The CREATE TABLE statement is used to create a new table in a database.

The column parameters specify the names of the columns of the table.

The datatype parameter specifies the type of data the column can hold (e.g. varchar, integer, date,
etc.).

List of datatypes: https://www.w3schools.com/sql/sql_datatypes.asp

Step 18 - SQL PRIMARY KEY Constraint:

The PRIMARY KEY constraint uniquely identifies each record in a database table.

Primary keys must contain UNIQUE values, and cannot contain NULL values.

Step 19 - SQL FOREIGN KEY Constraint:

A FOREIGN KEY is a key used to link two tables together.

A FOREIGN KEY is a field (or collection of fields) in one table that refers to the PRIMARY KEY in
another table.

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 39 of 49

The table containing the foreign key is called the child table, and the table containing the candidate
key is called the referenced or parent table.

Look at the following two tables:

"Persons" table:

"Orders" table:

Notice that the "PersonID" column in the "Orders" table points to the "PersonID" column in the
"Persons" table.

The "PersonID" column in the "Persons" table is the PRIMARY KEY in the "Persons" table.

The "PersonID" column in the "Orders" table is a FOREIGN KEY in the "Orders" table.

The FOREIGN KEY constraint is used to prevent actions that would destroy links between tables.

The FOREIGN KEY constraint also prevents invalid data from being inserted into the foreign key
column, because it has to be one of the values contained in the table it points to.

The following SQL creates a FOREIGN KEY on the "PersonID" column when the "Orders" table is
created:

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 40 of 49

EXERCISE 5: Create your own two tables, binding them via keys, define your fields (simple
structures, didactic applications, catalog, student data etc.). Insert data by using the statement
INSERT INTO. Create simple SELECT statements.

Use the tables you created in exercise 1. Create simple SQL statements using COUNT, AVG, SUM,
MAX or LIMIT.

Create your own two or three tables, binding them via keys, define your fields (simple structures,
didactic applications, catalog, student data etc.). Insert data and create different JOIN statement
using all types (RIGHT, LEFT etc.).

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 41 of 49

PHP

- is an acronym for "PHP: Hypertext Preprocessor "


- is a widely-used, open source scripting language
- scripts are executed on the server
- is free to download and use
- is an amazing and popular language!

It is powerful enough to be at the core of the biggest blogging system on the web (WordPress)!

It is deep enough to run the largest social network (Facebook)!

It is also easy enough to be a beginner's first server side language!

What is a PHP File?


PHP files can contain text, HTML, CSS, JavaScript, and PHP code
PHP code are executed on the server, and the result is returned to the browser as plain HTML
PHP files have extension ".php"

What Can PHP Do?


PHP can generate dynamic page content
PHP can create, open, read, write, delete, and close files on the server
PHP can collect form data
PHP can send and receive cookies
PHP can add, delete, modify data in your database
PHP can be used to control user-access
PHP can encrypt data

Why PHP?
PHP runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
PHP is compatible with almost all servers used today (Apache, IIS, etc.)
PHP supports a wide range of databases
PHP is free. Download it from the official PHP resource: www.php.net
PHP is easy to learn and runs efficiently on the server side

With PHP you are not limited to output HTML. You can output images, PDF files, and even Flash
movies. You can also output any text, such as XHTML and XML.

Step 1 - Set Up PHP on Your Own PC

- install a web server

- install PHP

- install a database, such as MySQL

The official PHP website (PHP.net) has installation instructions for PHP:
http://php.net/manual/en/install.php

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 42 of 49
Step 2 – PHP Syntax

A PHP script can be placed anywhere in the document.

A PHP script starts with <?php and ends with ?>:

The default file extension for PHP files is ".php".

A PHP file normally contains HTML tags, and some PHP scripting code.

In the example below, only the first statement will display the value of the $color variable (this is
because $color, $COLOR, and $coLOR are treated as three different variables):

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 43 of 49
Step 3 - PHP Variables

In PHP, a variable starts with the $ sign, followed by the name of the variable:

A variable can have a short name (like x and y) or a more descriptive name (age, carname,
total_volume).

Rules for PHP variables:

• A variable starts with the $ sign, followed by the name of the variable
• A variable name must start with a letter or the underscore character
• A variable name cannot start with a number
• A variable name can only contain alpha-numeric characters and underscores (A-z, 0-9 and _ )
• Variable names are case-sensitive ($age and $AGE are two different variables)

In PHP, variables can be declared anywhere in the script. The scope of a variable is the part of the
script where the variable can be referenced/used.

PHP has three different variable scopes:

• local
• global
• static

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 44 of 49

Step 4 - PHP Data Types

PHP supports the following data types:

• String
• Integer
• Float (floating point numbers - also called double)
• Boolean
• Array
• Object
• NULL
• Resource

Step 5 – Constants

A constant is an identifier (name) for a simple value. The value cannot be changed during the script.

A valid constant name starts with a letter or underscore (no $ sign before the constant name).

Note: Unlike variables, constants are automatically global across the entire script.

Syntax
• define(name, value, case-insensitive)

Parameters:

• name: Specifies the name of the constant


• value: Specifies the value of the constant
• case-insensitive: Specifies whether the constant name should be case-insensitive. Default is
false

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 45 of 49
Step 6 – Operators

PHP divides the operators in the following groups:

• Arithmetic operators
• Assignment operators
• Comparison operators
• Increment/Decrement operators
• Logical operators
• String operators

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 46 of 49

Step 7 – Functions

Besides the built-in PHP functions, we can create our own functions.

A function is a block of statements that can be used repeatedly in a program.

A function will not execute immediately when a page loads.

A function will be executed by a call to the function.

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 47 of 49
Step 8 – Date and Time

The PHP date() function formats a timestamp to a more readable date and time:

Here are some characters that are commonly used for dates:
• d - Represents the day of the month (01 to 31)
• m - Represents a month (01 to 12)
• Y - Represents a year (in four digits)
• l (lowercase 'L') - Represents the day of the week

Other characters, like"/", ".", or "-" can also be inserted between the characters to add additional
formatting.

The example below formats today's date in three different ways:

Step 9 – Error Handling

The default error handling in PHP is very simple. An error message with filename, line number and a
message describing the error is sent to the browser.

When creating scripts and web applications, error handling is an important part. If your code lacks
error checking code, your program may look very unprofessional and you may be open to security
risks.

Error handling methods:


• Simple "die()" statements
• Custom errors and error triggers
• Error reporting

The first example shows a simple script that opens a text file:

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 48 of 49
Syntax:

In this example, an error occurs if the "test" variable is bigger than "1":

The output of the code above should be something like this:

An error can be triggered anywhere you wish in a script, and by adding a second parameter, you can
specify what error level is triggered.

Possible error types:

• E_USER_ERROR - Fatal user-generated run-time error. Errors that can not be recovered
from. Execution of the script is halted
• E_USER_WARNING - Non-fatal user-generated run-time warning. Execution of the script is
not halted
• E_USER_NOTICE - Default. User-generated run-time notice. The script found something that
might be an error, but could also happen when running a script normally

Practical exercises
TRANSILVANIA UNIVERSITY OF BRASOV

Page 49 of 49

EXERCISE 5: Create your own php example using Validate E-mail and URL function
(https://www.w3schools.com/php/php_form_url_email.asp). If entered email is wrong, show error
message.

Practical exercises

You might also like