CSD PRPJECT
Republic of Iraq
Ministry of Higher Education
And Scientific Research
Baghdad University
College of Science
Design and Implementation of
Social Website for Students
By HTML, PHP, CSS & JS
A Project Report Submitted to the College of Science, Baghdad
University in Partial Fulfillment of the Requirements for the BSc
Degree of Science in Computer Science
BY
Ahmed Hasan Adel Hasan
SUPERVISED BY
M.Sc. Hussam Ali Abdul-Musen
M.Sc. Khulood Askander Dagher
2011-2012
CSD PRPJECT
ساىخلق*خلقالذيربكباسناقزأ هياإل
علن*بالقلنعلنالذي*الكزم وربكاقزأ*علق
ساى علنلنهااإل
CSD PRPJECT
Dedications
To my wisdom and knowledge ..
My straight way .. my path guidance ..
To the fountain of patience, optimism, and hope ..
My Dear Mother ..
To the great heart ..
Who reap the thorns from my way ..
Who bearing the fatigue to give me a moment of happiness ..
My Precious Father ..
To my strength and refuge after God ..
Those who taught me the science of life ..
And who shown me the most beautiful of the world ..
My Sisters and Brothers ..
To those whom tasted with me sweetest moments ..
Who I lived with them for days that won't be repeated ..
And those who I'll miss them so much ..
My Best Friends ..
To who taught us a gold letters ..
Who led us to the road of progress and success ..
Who formulate their knowledge to illuminate our way ..
My Instructors ..
CSD PRPJECT
Acknowledgments & Estimations
During we take the last steps of our academic life, we must pause for a
moment to remember the years we spent in the university with our instructors
who have given their knowledge and spent efforts to build tomorrow's
generation, therefore, I offer to them all thanks and gratitude, especially for:
M.Sc. Hussam A. Abdul-Muhsen
M.Sc. Khulood A. Dagher
Who were overseeing the completion of this research. Also, I'll be pleased when
thanking who planting the optimism in my way, and who gave me assistance,
facilitations, ideas, and information, perhaps they didn't feel their role, I mean:
B.Sc. Safa A. Abdul-Sahib
B.Sc. Yasmin A. Ahmed
So they deserved the thanksgiving. I'll never forget to thank everyone who
supported me morally and was a strong motivation to complete this work and
encourage me to do the best, especially:
Mohammed Z. Radhi
Ahmed A. Muhsen
Yasir S. Kadhum
As well as they were as pearls throughout my career, so I have to offer to them
all thanks and gratitude.
CSD PRPJECT
Abstract:
The activity of the project goes around trying to understand the main
concepts of web designing, and the differences between dynamic and static sites
before goes into web design in its actual concept. By knowing how each tool
can be used and purpose and action of each one, it will be gave a side view to
the importance of websites development and improvement. The learning of how
each instrument acts must be gradually, sometimes there is a need for learn an
instrument before trying to learn another one, such as, HTML must learned
before PHP. Also, this offer tries to show how the applications and instruments
which used can work together.
CSD PRPJECT
Abbreviations List:
Stands for Abbreviation
Apache MySQL PHP AMP
Command Line Interface CLI
Cascading Style Sheet CSS
Database Management System DBMS
Dynamic Hyper Text Markup Language DHTML
Denial of Service DoS
File Transmitter Protocol FTP
Graphical User Interface GUI
Hyper Text Markup Language HTML
Hypertext Transfer Protocol HTTP
Hypertext Transfer Protocol Secure HTTPS
Java Script JS
Preprocessor Hypertext PHP
Preprocessor Hypertext Intrusion Detection System PHPIDS
Structured Query Language SQL
Uniform Resource Locator URL
Cross Site Scripting XSS
CSD PRPJECT
Contents:
Chapter Subject Page
No.
-------- Abstract 2
List of Abbreviations 4
Chapter One
General Introduction
1.1 Introduction 6
1.2 Aim of the work 7
1.3 Project Layout 8
Chapter Two
Approach Structure
2.1 Introduction 10
2.2 Apache Server 10
2.3 PHP 11
2.4 MySQL 19
2.5 HTML 22
2.6 CSS 29
2.7 JavaScript 33
2.8 jQuery 37
2.9 Adobe Dreamweaver 38
2.10 Adobe Photoshop 38
Chapter Three
Practical Phase
3.1 Introduction 40
3.2 How to deal with Apache Server 40
3.3 Dealing with MySQL 41
3.4 Start creating a Website 41
3.5 Using CSS for designing 59
3.6 Using of JS and jQuery 60
Chapter Four Conclusions & Future Works
4.1 Conclusions 62
4.2 Future Works 63
CSD PRPJECT
1.1 Introduction
Websites designing occupied a wide area in our technologies world
nowadays. Therefore, it's supposed to be basis of our approach. Generally,
social sites spread largely in World Wide Web, so the "Social site for students"
was chosen for that purpose.
Before starting the implementation of that, some languages, applications
and techniques must be learned as a first step. Very natural to be HTML the
basic language used, then the PHP, JS and CSS which are very important for
idea integration. Inside applications field, Adobe Dreamweaver, Adobe
Photoshop, Apache and MySQL are used, while the jQuery is a modern
technique suggested to add more flexibility.
With the reference to that JS is the language used to write jQuery
technique. What should be noted, that each one of languages, applications and
techniques used will be explained in details in the next chapter. Second step, is
using adobe Photoshop to design the photos and logos, using MySQL server to
design a suitable database structure. Third step, is using adobe Dreamweaver,
were codes of different languages can be written to implement a web site that
we aspire to.
Web pages are accessed and transported with the HTTP, which may
optionally employ encryption (HTTPS) to provide security and privacy for the
user of the webpage content. The user's application, often a web browser,
renders the page content according to its HTML markup instructions onto
a display terminal.
The pages of a website can usually be accessed from a simple URL called
the web address. The URLs of the pages organize them into a hierarchy,
although hyper linking between them conveys the reader's perceived site
structure and guides the reader's navigation of the site which generally includes
a home page with most of the links to the site's web content, and a
supplementary about, contact and link page.
Some of concepts must understood to make the idea in more clear view.
Server side concept refer to a web server technology in which request of the
user handled by a script running on that web server to generate a dynamic web
pages, know that these scripts invisible to the browser of the client in case of
PHP, but it is visible in case of JS, then the pages viewed in client's browser as
static pages, where the meaning of client side concept can be noted. Scripting
CSD PRPJECT
concept refer to coding pages to change its content according to input of the
user, environmental conditions, or other factors. Content changing will be
according to change in HTML tags, here is the meaning of DHTML can be
shown.
The web designer is the person who responsible for the visual aspect,
which includes the layout, coloring and typography of a web page. A web
designer must have a working knowledge of using a variety of languages such
as HTML, CSS, JavaScript and PHP before create a site, although the extent of
their knowledge will differ from one web designer to another.
1.2 The Aim of Work
This work aims to design a website sharing information center, used by the
Iraqi students, and it helps the students to communicate during and after their
education, and it also helps the students to exchange their knowledge. One of
the main aims of this project is to protect the privacy of information for the
students. This web site can be also used by the teachers, by uploading the
lectures on the web site to avoid the students going to the copy machine and
charging money for it.
1.3 Project Layout
CSD PRPJECT
This project contain four chapters, chapter one is an introduction to the
approach accomplished in this work and the instruments used, chapter two is an
introduction to the web designing field in general, and explains all the
instruments needed to accomplish this work in details. Chapter three, describes
in details this work step by step, and illustrates the pseudo code of the main
functions in for the proposed website, and chapter four, discusses in details the
conclusion obtained, and the results achieved, and also discusses the work what
can be added to this work in the future.
CSD PRPJECT
2.1 Introduction
As mentioned previously each tool used in our project will be explained in
details and will mention the features of each and the reason of using that
instrument or tool in our project.
2.2 Apache Server Apache is a virtual web server, it is software notable for playing a key role
in the initial growth of the World Wide Web, and in 2009 it became the first
web server software to surpass the 100 million website milestone.
1. Apache Features:
Apache supports a variety of features, many implemented as compiled
modules which extend the core functionality. These can range from server-side
programming language support to authentication schemes. Some common
language interfaces as PHP.
Virtual hosting allows one Apache installation to serve many different
actual websites. For example, one machine with one Apache installation could
simultaneously serve www.example.com, www.example.org, .. etc.
Apache features DBMS-based authentication databases, configurable
error messages, and content negotiation. It is also supported by several GUI's.
CSD PRPJECT
It supports password authentication and digital certificate authentication.
Apache has a built in search engine and an HTML authorizing tool and
supports FTP.
2. Why Apache chosen?
a. Free virtual server application.
b. Support PHP language.
c. Support MySQL.
d. Very fast web server.
2.3 PHP
PHP is a general-purpose server-side scripting language originally
designed for Web development to produce dynamic Web pages. It is one of the
first developed server-side scripting languages to be embedded into
an HTML source document, rather than calling an external file to process data.
Ultimately, the code is interpreted by a Web server with a PHP processor
module which generates the resulting Web page. It also has evolved to include
a command-line interface capability and can be used in standalone graphical
applications. PHP can be deployed on most Web servers and also as a
standalone shell on almost every operating system and platform free of charge.
CSD PRPJECT
1. PHP Action:
PHP acts primarily as a filter, taking input from a file or stream
containing text and/or PHP instructions and outputting another stream of data;
most commonly the output will be HTML.
PHP Originally designed to create dynamic Web pages, PHP now focuses
mainly on server-side scripting, and it is similar to other server-side scripting
languages that provide dynamic content from a Web server to a client.
2. PHP Security:
Vulnerabilities are caused mostly by not following best practice
programming rules: technical security flaws of the language itself or of its core
libraries are not frequent (23 in 2008, about 1% of the total). Recognizing that
programmers make mistakes, some languages include taint checking to detect
automatically the lack of input validation which induces many issues. Such a
feature is being developed for PHP, but its inclusion in a release has been
rejected several times in the past.
PHPIDS adds security to any PHP application to defend against
intrusions. PHPIDS detects XSS, SQL injection, header injection, Directory
traversal, Remote File Execution, Local File Inclusion and DoS.
3. PHP as speed optimizer:
PHP source code is compiled on-the-fly to an internal format that can be
executed by the PHP engine. In order to speed up execution time and not have
to compile the PHP source code every time the Web page is accessed, PHP
scripts can also be deployed in executable format using a PHP compiler.
Code optimizers aim to enhance the performance of the compiled code
by reducing its size, merging redundant instructions and making other changes
that can reduce the execution time.
4. PHP features:
a. HTTP authentication with PHP.
b. Ability of retains cookies.
c. Sessions mechanization.
d. Handling files upload.
e. Ease to connect with DB.
f. Support e-commerce and shopping cards.
g. Support MySQL.
h. Runs in different platforms.
i. Compatible with Apache server.
5. PHP Syntax:
CSD PRPJECT
A PHP script always starts with <?php and ends with ?>. A PHP script
can be placed anywhere in the document. On servers with shorthand-support,
you can start a PHP script with <? and end with ?>.
For maximum compatibility, we recommend that you use the standard form
(<?php) rather than the shorthand form. PHP file must have a .php extension,
and normally contains HTML tags, and some PHP scripting code.
Each code line in PHP must end with a semicolon ( ; ). The semicolon is a
separator and is used to distinguish one set of instructions from another. There
is a need to know that comment in PHP preceded by ( // ) for one line of
comment, if a block of comments needed, it began by ( /* ) and ended with
( */ ), make sure that comments appear in orange color inside the
Dreamweaver editor.
a. Variables: As with algebra, PHP variables are used to hold values or
expressions. A variable can have a short name, like x, or a more descriptive
name, like carName.
Rules for PHP variable names:
I. Variables in PHP starts with a dollar sign ($), followed by the name of
the variable as $x for defining variable x.
II. The variable name must begin with a letter (a-z or A-Z) or the
underscore (_) character.
III. A variable name can only contain alpha-numeric characters and
underscores (A-z, 0-9, and _ )
IV. A variable name should not contain spaces.
V. Variable names are case sensitive (x and X are two different variables).
b. Data Types: PHP is a loosely type language. A variable does not need to
be declared before assign a value to it. PHP automatically converts the
variable to the correct data type, depending on its value. As different
programming languages, PHP support many possible data types as integer,
float, characters, strings, double, .. etc.
c. Strings: String variables are used for values that contain characters. After
we create a string we can manipulate it. A string can be used directly in a
function or it can be stored in a variable. PHP supports many functions and
operators to deal with strings, as dot (.) Operator to concatenate two
strings, strl en( ) function for string length, strpos( ) function for searching
about position of character or substring in a some string, .. Etc.
CSD PRPJECT
d. Operators:
I. Arithmetic Operators:
Operator Name Description Example Result
x + y Addition Sum of x and y 2 + 2 4
x – y Subtraction Difference of x and y 5 – 2 3
x * y Multiplication Product of x and y 5 * 2 10
x / y Division Quotient of x and y 15 / 5 3
x % y Modulus Remainder of x divided by y 5 % 2 1
- x Negation Opposite of x - 2
a . b Concatenation Concatenate two strings "Hi" . "Ha" HiHa
II. Assigning Operators:
Assignment Same as... Description
x = y x = y Assignment
x += y x = x + y Addition
x -= y x = x – y Subtraction
x *= y x = x * y Multiplication
x /= y x = x / y Division
x %= y x = x % y Modulus
a .= b a = a . b Concatenate two strings
III. Increment/Decrement Operators:
Operator Name Description
++ x Pre-increment Increments x by one, then returns x
x ++ Post-increment Returns x, then increments x by one
-- x Pre-decrement Decrements x by one, then returns x
x -- Post-decrement Returns x, then decrements x by one
IV. Comparison Operators:
Operator Name Description Example
x == y Equal True if x is equal to y 5==8 returns false
x === y Identical True if x is equal to y, and they
are of same type
5==="5" returns false
x != y Not equal True if x is not equal to y 5!=8 returns true
x <> y Not equal True if x is not equal to y 5<>8 returns true
x !== y Not identical True if x is not equal to y, or they
are not of same type
5!=="5" returns true
CSD PRPJECT
x > y Greater than True if x is greater than y 5>8 returns false
x < y Less than True if x is less than y 5<8 returns true
x >= y Greater than or
equal to
True if x is greater than or equal
to y
5>=8 returns false
x <= y Less than or
equal to
True if x is less than or equal to y 5<=8 returns true
V. Logical Operators:
Operator Name Description Example
x and y
x && y
And True if both x and y are true x=6
y=3
(x < 10 and y > 1) returns true
x or y
x || y
Or True if either or both x and y
are true
x=6
y=3
(x==6 or y==5) returns true
x xor y Xor True if either x or y is true, but
not both
x=6
y=3
(x==6 xor y==3) returns false
! x Not True if x is not true x=6
y=3
!(x==y) returns true
6. PHP Conditional Statements:
Very often when write code, you want to perform different actions for
different decisions. You can use conditional statements in your code to do this.
In PHP we have the following conditional statements:
A. IF statement: Use this statement to execute some code only if a
specified condition is true. Syntax:
if(condition)
[Code ..]
B. IF .. ELSE statement: Use this statement to execute some code if a
condition is true and another code if the condition is false. Syntax:
If(condition)
[Code ..]
Else
[Code ..]
C. IF .. ELSEIF .. ELSE statement: Use this statement to select one of
several blocks of code to be executed. Syntax:
if(condition)
CSD PRPJECT
[Code ..]
elseif
[Code ..]
else
[Code ..]
D. SWITCH statement: Use this statement to select one of many blocks of
code to be executed. Syntax:
switch(var)
{
case val_1 :
[Code ..]
break;
case val_2 :
[Code ..]
break;
case val_n :
[Code ..]
break;
default :
[Code ..]
}
7. PHP Loops statements:
Often when you write code, you want the same block of code to run over
and over again in a row. Instead of adding several almost equal lines in a script
we can use loops to perform a task like this.
In PHP, we have the following looping statements:
A. WHILE loop: Loops through a block code while a specified condition
is true.
Syntax:
while (condition)
{
[Code ..]
}
B. DO .. WHILE loop: Loops through a block of code once, and then
repeats the loop as long as a specified condition is true.
Syntax:
do
CSD PRPJECT
{
[Code ..]
} while(condition)
C. FOR loop: Loops through a block code for a specified number of times.
Syntax:
For (init_val; condition; increment)
{
[Code ..]
}
D. FOREACH loop: Loops through a block code for each element in an
array.
Syntax :
foreach(array as var)
{
[Code ..]
}
8. PHP Functions: Functions in PHP can be written in the following
syntax format: function fun_nam([args])
{
[Code ..]
}
And then can be called wherever it's needed such as:
fun_nam([param]);
Note that there is a built-in functions inside PHP language, user defined
functions wrote when some performance needed and there is no built-in
function meet the task.
9. Arrays:
A variable is a storage area holding a number or text. The problem is, a
variable will hold only one value. An array is a special variable, which can store
multiple values in one single variable.
CSD PRPJECT
In PHP, there are three kinds of arrays:
A. Numeric Array: Array with numerical indexes, as:
$cars[0]="Saab";
$cars[1]="Volvo";
$cars[2]="BMW";
$cars[3]="Toyota";
B. Associative Array: Array where each ID key is associated with a
value, as:
$ages['Peter'] = "32";
$ages['Quagmire'] = "30";
$ages['Joe'] = "34";
Or it’s initialized in the following form:
$ages = array("Peter"=>32, "Quagmire"=>30, "Joe"=>34);
C. Multidimensional Array: Array containing one or more arrays, as:
$families = array(
"Griffin" => array("Peter", "Lois", "Megan"),
"Quagmire" => array("Glenn" ),
"Brown" => array("Cleveland", "Loretta", "Junior")
);
10. GET & _POST Variables:
_GET and _POST are too important variables have to talk about them, the
following clarification will take a part of knowledge about:
GET Variable:
The predefined $_GET variable is used to collect values in a form
with method="get". Information sent from a form with the GET method
is visible to everyone (it will be displayed in the browser's address bar)
and has limits on the amount of information to send. When using
method="get" in HTML forms, all variable names and values are
displayed in the URL. Very important to note that this method should not
be used when sending passwords or other sensitive information,
However, because the variables are displayed in the URL, it is possible to
bookmark the page. This can be useful in some cases. The get method is
not suitable for very large variable values. It should not be used with
values exceeding 2000 characters.
CSD PRPJECT
POST Variable:
The predefined $_POST variable is used to collect values from a
form sent with method="post". Information sent from a form with the
POST method is invisible to others and has no limits on the amount of
information to send. However, there is an 8 Mb max size for the POST
method, by default, (can be changed by setting the post_max_size in the
php.ini file). However, because the variables are not displayed in the
URL, it is not possible to bookmark the page. It's important to mention
that both _GET and _POST are built-in variables inside PHP, they are
defined as associative arrays, which described previously. In additional to
that two variables, there are more PHP built-in variables as _SESSION ,
_FILES , … etc which will be described when needed in the forward
sections.
2.4 MySQL
MySQL is the world's most used Relational DBMS that runs as a server
providing multi-user access to a number of databases. It's named after
developer Michael Widenius' daughter, "My", The SQL phrase stands for
Structured Query Language. MySQL was owned and sponsored by a single for-
profit firm, the Swedish company "MySQL AB", now owned by Oracle. Free
software open-source projects that require a full-featured database management
system often user MySQL. For commercial use, several paid editions are
available, and offer additional functionality. MySQL is also used in many high-
profile, large-scale World Wide Web products, as Google(though not for
searches), Facebook and Twitter.
1. MySQL Action:
MySQL acts as a database management system, database is very
serious item in website designing to store and maintain information. The
data in MySQL is stored in database objects called tables. A table is a
collection of related data entries and it consists of columns and rows.
Databases are useful when storing information categorically.
CSD PRPJECT
2. Queries:
A query is a question or a request. With MySQL, we can query a
database for specific information and have a record-set returned. A queries
is the talking language between MySQL and PHP as what will explained in
the next chapter.
3. Database and Tables Creation:
Before any creation of tables, a database mechanism must be created.
The SQL statement CREATE DATABASE is used to create a database in
MySQL.
Syntax:
CREATE DATABASE database_name;
Now, new tables can be created inside the above database name, SQL
statement CREATE TABLE is used to create tables.
Syntax:
CREATE TABLE table_name
(
column_name1 data_type,
column_name2 data_type,
column_name3 data_type, ....
);
4. Primary Keys and Auto Increment Fields:
Each table should have a primary key field. A primary key is used to
uniquely identify the rows in a table. Each primary key value must be
unique within the table. Furthermore, the primary key field cannot be null
because the database engine requires a value to locate the record. The
following example sets the user ID field as the primary key field. The
primary key field is often an ID number, and is often used with the
AUTO_INCREMENT setting. AUTO_INCREMENT automatically
increases the value of the field by 1 each time a new record is added. To
ensure that the primary key field cannot be null, we must add the NOT
NULL setting to the field.
CREATE TABLE Users
(
ID int NOT NULL AUTO_INCREMENT,
PRIMARY KEY(ID),
UserName varchar(15)
);
CSD PRPJECT
5. Data Insertion:
At the beginning, all tables have been created is empty, and it's ready
to insert data and information, so The SQL statement INSERT INTO is used
to add new records to a database table.
Syntax:
INSERT INTO table_name
(column1, column2, column3,...)
VALUES (value1, value2, value3,...);
6. Data Retrieve:
Retrieve records from database table is done by the SQL statement
SELECT .
Syntax:
SELECT column(s)_name FROM table_name;
7. Where Existence:
The WHERE statement is used to extract only those records that fulfill
a specified criterion.
Syntax:
SELECT column(s)_name FROM table_name
WHERE column_name operator value;
8. Order by Existence:
The ORDER BY keyword is used to sort the data in a recordset. The
ORDER BY keyword sort the records in ascending order by default. With
that keyword, two other keywords can be used, ASC for sorting data
ascending, and DESC for sorting data descending.
Syntax:
SELECT column(s)_name FROM table_name
ORDER BY column(s)_name ASC|DESC;
9. Data Updating:
Some data need to be alternated or modified, SQL language provide
this ability by UPDATE .. SET statement.
Syntax:
UPDATE table_name
SET column1=value, column2=value2, ...
[WHERE some_column=some_value];
10. Data Deletion:
Deleting data is possible in SQL language, using DELETE FROM
statement.
CSD PRPJECT
Syntax:
DELETE FROM table_name
WHERE some_column = some_value;
2.5 HTML
HTML is the main markup language for web pages. HTML elements are
the basic building-blocks of web pages. The purpose of a web browser is to read
HTML documents and compose them into visible or audible web pages. The
browser does not display the HTML tags, but uses the tags to interpret the
content of the page. HTML elements form the building blocks of all websites.
HTML allows images and objects to be embedded and can be used to
create interactive forms. It provides a means to create structured documents by
denoting structural semantics for text such as headings, paragraphs, lists, links,
quotes and other items.
It can embed scripts in languages such as JavaScript which affect the
behavior of HTML web pages. HTML is the language that web browsers use to
interpret and compose text, images and other material into visual or audible web
pages. Default characteristics for every item of HTML markup are defined in
the browser, and these characteristics can be altered or enhanced by the web
page designer's additional use of CSS.
1. HTML Characteristics:
a. HTML is not programming language.
b. HTML is mark-up language.
c. A mark-up language is a set of mark-up tags.
d. HTML uses mark-up tags to describe a web page.
e. Need not to HTML editor.
f. Need not to web server.
CSD PRPJECT
2. Editing HTML:
HTML can be written and edited using many different editors like
Dreamweaver, However, a plain text editor (like Notepad) also used to edit
HTML, believe that using a plain text editor is the best way to learn HTML.
3. Markup:
HTML markup consists of several key components, including:
a. Elements and their attributes.
b. Character-based data types.
c. Character references and entity references.
4. Tags:
HTML is written in the form of HTML elements consisting of
tags enclosed in angle brackets (like <html>), within the web page content.
HTML tags most commonly come in pairs, the first tag in a pair is the start tag,
and the second tag is the end. Although some tags, known as empty elements,
are unpaired, for example <img>. In between these tags web designers can add
text, tags, comments and other types of text-based content.
5. Attributes:
Most of the attributes of an element are name-value pairs, separated by
"=" and written within the start tag of an element after the element's name. The
value may be enclosed in single or double quotes, although values consisting of
certain characters can be left unquoted in HTML. Leaving attribute values
unquoted is considered unsafe. There are some attributes that affect the element
simply by their presence in the start tag of the element. Three types of attribute
included by HTML tags, as the following:
a. Core Attribute:
Attribute Description
class Specifies one or more class names for an element
id Specifies a unique id for an element
style Specifies an inline CSS style for an element
title Specifies extra information about an element
b. Language Attribute:
CSD PRPJECT
Attribute Description
dir Specifies the text direction for the content in an element
lang Specifies the language of the element's content
xml:lang Specifies the language of the element's content (for XHTML)
c. Keyboard Attribute:
Attribute Description
accesskey Specifies a shortcut key to activate/focus an element
tabindex Specifies the tabbing order of an element
6. Elements:
HTML documents are composed entirely of HTML elements that, in their
most general form have three components: a pair of tags, a "start tag" and "end
tag"; some attributes within the start tag; and finally, any textual and
graphical content between the start and end tags, perhaps including other nested
elements. The HTML element is everything between and including the start and
end tags.
7. Data Types:
HTML defines several data types for element content, such as script data
and style sheet data, and a plethora of types for attribute values, including ID's,
names, URL's, numbers, units of length, languages, media descriptors, colors,
character encodings, dates and times, and so on. All of these data types are
specializations of character data.
8. HTML Basics:
The purpose of a web browser (like Internet Explorer or Firefox) is to
read HTML documents and display them as web pages. The browser does not
display the HTML tags, the basic used tags are:
a. HTML Basic Tags:
Before going into details of many important tags, some basic tags must be
recognized:
Tag Description
<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<body> Defines the document's body
CSD PRPJECT
<head> Defines information about the document
b. Headings, Lines and Comments:
Headings are important in HTML documents. Headings are defined with
the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines
the least important heading. The <hr /> tag creates a horizontal line in an HTML
page. The hr element can be used to separate content.
Comments can be inserted into the HTML code to make it more readable
and understandable. Comments are ignored by the browser and are not
displayed. It is written as <!-- comment -->.
c. Paragraphs and Line Breaks:
Paragraphs are defined with the <p> tag; note that Browsers
automatically add an empty line before and after a paragraph. Either line breaks
or which is called carriage return is represented by use tag <br> or <br /> with
no end tag (closing tag) are not allowed.
d. Formats:
HTML uses tags like <b>, <i> or <u> for formatting output, like bold,
italic or underlined text. These HTML tags are called formatting tags. The
following table describes some format tags:
Tag Description Tag Description
<b> Defines bold text <sub> Defines subscripted text
<big> Defines big text <sup> Defines superscripted text
<code> Defines computer code text <ins> Defines inserted text
<i> Defines italic text <del> Defines deleted text
<small> Defines small text <u> Defines underline text
<strong> Defines strong text <tt> Defines a teletype text
e. Links:
Links are found in nearly all Web pages. Links allow users to click their
way from page to page. A hyperlink (or link) is a word, group of words, or
image that you can click on to jump to a new document or a new section within
the current document. When moving the cursor over a link in a Web page, the
arrow will turn into a little hand. Links are specified in HTML using the <a>
tag. The <a> tag can be used in two ways:
CSD PRPJECT
1- To create a link to another document, by using the "href" attribute as:
<a href="url"> Link text </a>.
2- To create a bookmark inside a document, by using the "name" attribute
<a name="tips"> Tips Section </a>.
f. Images:
In HTML, images are defined with the <img> tag. The <img> tag is
empty, which means that it contains attributes only, and has no closing tag. To
display an image on a page, you need to use the src attribute. Src stands for
"source". The value of the src attribute is the URL of the image you want to
display. <img src="img_url" />. The height and width attributes are used to
specify the height and width of an image. The attribute values are specified in
pixels by default: <img src="pic.jpg" width="304" height="228" />.
Some image tags:
Tag Description
<img /> Defines an image
<map> Defines an image-map
<area /> Defines a clickable area inside an image-map
g. Tables:
Tables are defined with the <table> tag. A table is divided into rows (with
the <tr> tag), and each row is divided into data cells (with the <td> tag). td
stands for "table data," and holds the content of a data cell. A <td> tag can
contain text, links, images, lists, forms, other tables, etc. Tables tag has an
attribute called "border" that changes table border.
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
</tr>
</table>
h. Lists:
CSD PRPJECT
HTML support two kinds of lists, ordered and unordered, and use <ul>
and <ol> tags for them respectively. Each element in the list is defined by <li>
tag.
<ul> <ol>
<li> Element1 </li> <li> Element1 </li>
<li> Element2 </li> <li> Element2 </li>
</ul> </ol>
i. Forms and Input Elements:
HTML forms are used to pass data to a server. A form can contain input
elements like text fields, checkboxes, and radio-buttons, submit buttons and
more. A form can also contain select lists, text area, field set, legend, and label
elements. The <form> tag is used to create an HTML form:
<form> input items </form>
Most important form element is the input element. The input element is
used to select user information. An input element can vary in many ways,
depending on the type attribute. An input element can be of type text field,
checkbox, password, radio button, submit button, and more.
I. Text Field:
<input type="text" /> defines a one-line input field that a user can
enter text into. note that the default width of a text field is 20 characters.
II. Password Field:
<input type="password" /> defines a password field. The characters
in a password field are masked (shown as asterisks or circles).
III. Radio Buttons:
<input type="radio" /> defines a radio button. Radio buttons let a user
select ONLY ONE of a limited number of choices.
IV. Checkboxes:
<input type="checkbox" /> defines a checkbox. Checkboxes let a user
select ONE or MORE options of a limited number of choices.
V. Submit Buttons:
CSD PRPJECT
<input type="submit" /> defines a submit button. A submit button is used
to send form data to a server. The data is sent to the page specified in the form's
action attribute.
9. Events:
HTML added the ability to let events trigger actions in a browser, like
starting a JavaScript when a user clicks on an element. Below is the standard
event attributes that can be inserted into HTML elements to define event
actions.
a. <body> Events:
Attribute Description
Onload Script to be run when a document load
Onunload Script to be run when a document unload
b. Form Events:
Attribute Description
Onblur Script to be run when an element loses focus
Onchange Script to be run when an element changes
Onfocus Script to be run when an element gets focus
Onreset Script to be run when a form is reset
Onselect Script to be run when an element is selected
Onsubmit Script to be run when a form is submitted
c. Image Events:
Attribute Description
Onabort Script to be run when loading of an image is
interrupted
d. Keyboard Events:
Attribute Description
Onkeydown Script to be run when a key is pressed
Onkeypress Script to be run when a key is pressed and released
CSD PRPJECT
Onkeyup Script to be run when a key is released
e. Mouse Events:
Attribute Description
Onclick Script to be run on a mouse click
Ondblclick Script to be run on a mouse double-click
Onmousedown Script to be run when mouse button is pressed
Onmousemove Script to be run when mouse pointer moves
Onmouseout Script to be run when mouse pointer moves out of
an element
Onmouseover Script to be run when mouse pointer moves over an
element
Onmouseup Script to be run when mouse button is released
2.6 CSS
CSS is a style sheet language used for describing the look and formatting
of a document written in a markup language. Its most common application is to
style web pages written in HTML.
1. CSS Action:
CSS is designed primarily to enable the separation of document content
(written in HTML or a similar markup language) from document presentation,
including elements such as the layout, colors, and fonts.
2. CSS Features:
a. Improve content accessibility.
b. Provide more flexibility and control in the specification of
presentation characteristics.
c. Enable multiple pages to share formatting.
CSD PRPJECT
d. Reduce complexity and repetition in the structural content.
e. Allow the same markup page to be presented in different styles for
different rendering methods.
CSS specifies a priority scheme to determine which style rules apply if
more than one rule matches against a particular element. In this so-
called cascade, priorities or weights are calculated and assigned to rules, so that
the results are predictable.
3. Syntax:
CSS has a simple syntax and uses a number of English keywords to
specify the names of various style properties. A style sheet consists of a list
of rules. Each rule or rule-set consists of one or more selectors and a declaration
block. A declaration-block consists of a list of declarations in braces. Each
declaration itself consists of a property, a colon (:), and a value. If there are
multiple declarations in a block, a semi-colon (;) must be inserted to separate
each declaration.
Syntax :
selector [, selector2, ...] [:pseudo-class] {
property: value;
[property2: value2;
...]
}
a. Selectors:
In CSS, selectors are used to declare which of the markup elements a
style applies to, a kind of match expression. Selectors may apply to all
elements of a specific type, or only those elements that match a certain
attribute; elements may be matched depending on how they are placed
relative to each other in the markup code, or on how they are nested within
the Document Object Model.
Selector Example Example description
.class .intro Selects all elements with class="intro"
#id #firstname Selects the element with id="firstname"
* * Selects all elements
element P Selects all <p> elements
element, element div,p Selects all <div> elements and all <p> elements
element element div p Selects all <p> elements inside <div> elements
element>element div>p Selects all <p> elements where the parent is a
<div> element
CSD PRPJECT
element+element div+p Selects all <p> elements that are placed
immediately after <div> elements
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [target=_blank] Selects all elements with target="_blank"
[attribute~=value] [title~=flower] Selects all elements with a title attribute
containing the word "flower"
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value
starting with "en"
element1~element2 p~ul Selects every <ul> element that are preceded by
a <p> element
[attribute^=value] a[src^="https"] Selects every <a> element whose src attribute
value begins with "https"
[attribute$=value] a[src$=".pdf"] Selects every <a> element whose src attribute
value ends with ".pdf"
[attribute*=value] a[src*="w3schools"] Selects every <a> element whose src attribute
value contains the substring "w3schools"
b. Pseudo-Class:
Pseudo-classes are another form of specification used in CSS to identify
markup elements, and in some cases, specific user actions to which a particular
declaration block applies. An often-used example of a pseudo-class is :hover,
which applies a style only when the user 'points to' the visible element, usually
by holding the mouse cursor over it. It is appended to a selector as in a:
hover or #elementid:hover. Other pseudo-classes and pseudo-elements are, for
example: first-line: visited or: before.
Pseudo Class Example Example Description
:link a:link Selects all unvisited links
:visited a:visited Selects all visited links
:active a:active Selects the active link
:hover a:hover Selects links on mouse over
:focus input:focus Selects the input element which has focus
:first-letter p:first-letter Selects the first letter of every <p> element
:first-line p:first-line Selects the first line of every <p> element
:first-child p:first-child Selects every <p> element that is the first child of its parent
:before p:before Insert content before every <p> element
:after p:after Insert content after every <p> element
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value
starting with "it"
:root :root Selects the document’s root element
CSD PRPJECT
:empty p:empty Selects every <p> element that has no children (including
text nodes)
:target #news:target Selects the current active #news element (clicked on a URL
containing that anchor name)
:enabled input:enabled Selects every enabled <input> element
:disabled input:disabled Selects every disabled <input> element
:checked input:checked Selects every checked <input> element
:not(selector) :not(p) Selects every element that is not a <p> element
::selection ::selection Selects the portion of an element that is selected by a user
c. Sources:
CSS information can be provided by various sources. CSS style information
can be either attached as a separate document or embedded in the HTML
document. Multiple style sheets can be imported. Different styles can be applied
depending on the output device being used; for example, the screen version can
be quite different from the printed version, so that authors can tailor the
presentation appropriately for each medium. Priority scheme for CSS sources
(from highest to lowest priority):
a. Inline styles, inside the HTML document, style information on a
single element, specified using the "style" attribute.
b. Embedded style, blocks of CSS information inside the HTML
itself.
c. External style sheets, i.e., a separate CSS file referenced from the
document.
2.7 JS
JS is a prototype-based scripting language that is dynamic, weakly
typed and has first class functions.
It's a multi-paradigm language, supporting object-oriented, imperative,
and functional programming styles.
CSD PRPJECT
1. JS Action:
The most common use of JavaScript is to write functions that are embedded
in or included from HTML. Some simple examples of this usage are:
a. Opening or popping up a new window with programmatic control over
the size, position, and attributes of the new window (e.g. whether the
menus, toolbars, etc., are visible).
b. Validating input values of a web form to make sure that they are
acceptable before being submitted to the server.
c. Changing images as the mouse cursor moves over them: This effect is
often used to draw the user's attention to important links displayed as
graphical elements.
d. Transmitting information about the user's reading habits and browsing
activities to various websites. Web pages frequently do this for web
analytics, ad tracking, personalization or other purposes.
Because JavaScript code can run locally in a user's browser (rather than on
a remote server), the browser can respond to user actions quickly, making an
application more responsive. Furthermore, JavaScript code can detect user
actions which HTML alone cannot, such as individual keystrokes.
2. JS Features:
a. JS gives HTML designers a programming tool : HTML authors are
normally not programmers, but JavaScript is a scripting language with
a very simple syntax. Almost anyone can put small "snippets" of code
into their HTML pages.
b. JS can react to events: JavaScript can be set to execute when
something happens, like when a page has finished loading or when a
user clicks on an HTML element.
c. JS can read and write HTML elements: JavaScript can read and
change the content of an HTML element.
d. JS can be used to validate data: A JavaScript can be used to validate
form data before it is submitted to a server. This saves the server from
extra processing.
e. JS can be used to detect the visitor's browser: JavaScript can be
used for detection of the visitor's browser, and - depending on the
browser - load another page specifically designed for that browser.
f. JS can be used to create cookies: JavaScript can be used to store and
retrieve information on the visitor's computer.
CSD PRPJECT
3. Scripts Position in HTML Document:
It's possible to place an unlimited number of scripts in a document, and have
scripts in both the <body> </body> and the <head> </head> section at the same
time. It is a common practice to put all functions in the head section, or at the
bottom of the page. This way they are all in one place and do not interfere with
page content.
4. Using External JS file:
External JavaScript files often contain code to have a possibility to be used
on several different web pages. External JavaScript files have the file extension
".js". Note that External script cannot contain the <script></script> tags.
5. Syntax:
Unlike HTML, JavaScript is case sensitive, therefore capitalization must be
noticed closely whenever JS statements written create or call variables, objects
and functions.
a. Statements:
A JavaScript statement is a command to a browser. The purpose of
the command is to tell the browser what to do. It is normal to add a
semicolon at the end of each executable statement. Most people think that
this is a good programming practice, and most often you will see this in
JavaScript examples on the web. The semicolon is optional (according to
the JavaScript standard), and the browser is supposed to interpret the end
of the line as the end of the statement. Because of this you will often see
examples without the semicolon at the end. Using semicolons makes it
possible to write multiple statements on one line.
b. JS Code:
JavaScript code (or just JavaScript) is a sequence of JavaScript
statements. Each statement is executed by the browser in the sequence
they are written. The code of JavaScript is written inside the <script>
</script> tags.
c. JS Blocks:
CSD PRPJECT
JavaScript statements can be grouped together in blocks. Blocks
start with a left curly bracket {, and end with a right curly bracket }.The
purpose of a block is to make the sequence of statements execute together.
d. JS Comments:
Comments can be added to explain the JavaScript, or to make the
code more readable. Single line comments start with //. Multi line
comments start with /* and end with */.
e. Variables:
As with algebra, JavaScript variables are used to hold values or
expressions. A variable can have a short name, like x, or a more
descriptive name. Rules for JavaScript variable names:
1- Variable names are case sensitive(x and X are different)
2- Variable names must begin with a letter, $ or _ .
Creating variables in JavaScript is most often referred to as
"declaring" variables. The Declaration of JavaScript variables is done by
the var keyword. After the declaration, the variables are empty (they have
no values yet) However, they can also assigned to values with declaration.
f. Operators, Conditional Statements and Loops:
Operators, Conditional Statements and loops in JS much like them
counterparts in PHP. So the description of PHP operators good enough for
the purpose. Except in (elseif), which is written (else if) in JS, (note the
space character), and JS has no (foreach) loop. (see pages 4,5,6 and 7).
g. Catching Errors:
When browsing Web pages on the internet, JavaScript alert
sometimes have seen for telling there is a runtime error and asking "Do
you wish to debug?". Error message like this may be useful for developers
but not for users. When users see errors, they often leave the web page.
The try.. catch statement allows you to test a block of code for
errors. The try block contains the code to be run, and the catch block
contains the code to be executed if an error occurs.
Syntax :
try
{
CSD PRPJECT
[Code..]
} catch(error)
{
[Code..] // Handling Error
}
h. Insert Special Characters:
The backslash (\) is used to insert apostrophes, new lines, quotes,
and other special characters into a text string. In JavaScript, a string is
started and stopped with either single or double quotes. To solve this
problem, you must place a backslash (\) before each double quote. The
table below lists other special characters that can be added to a text string
with the backslash sign:
Code Outputs
\' single quote
\" double quote
\\ Backslash
\n new line
\r carriage return
\t Tab
\b Backspace
i. Functions:
A function contains code that will be executed by an event or by a
call to the function. Function called anywhere within a page. Functions
can be defined both in the <head> and in the <body> section of a
document. However, to assure that a function is read/loaded by the
browser before it is called, it could be wise to put functions in the <head>
section.
Syntax :
function fun_nam(var1, var2, .. , varN)
{ [Code..]
[return something;]
}
The return statement is used to specify the value that is returned
from the function. So, functions that are going to return a value must use
the return statement.
CSD PRPJECT
6. Events:
By using JavaScript, we have the ability to create dynamic web pages.
Events are actions that can be detected by JavaScript. Every element on a web
page has certain events which can trigger a JavaScript. For example, we can
use the onClick event of a button element to indicate that a function will run
when a user clicks on the button. Previously, events are defined in the HTML,
(see pages 20 and 21). Examples of events:
A mouse click (onClick).
A web page or an image loading (onLoad, onUnload).
Mouse over a hotspot on the web page (onMouseOver).
Selecting an input field in an HTML form (onFocus).
Submitting an HTML form (onSubmit).
A keystroke (onKeyPress).
Note: Events are normally used in combination with functions, and the
function will not be executed before the event occurs.
2.8 jQuery:
jQuery is a cross-browser JavaScript library designed to simplify the
client-side scripting of HTML.
1. Features:
1- jQuery is free, open source software.
2- syntax is designed to make it easier to navigate a document.
3- Effects and animations.
4- Extensibility through plug-ins.
5- Utilities, such as user agent information, feature detection.
6- Cross-browser support.
2. Usage Style:
CSD PRPJECT
jQuery has two usage styles:
a. via the $ function, which is a factory method for the jQuery object. These
functions, often called commands, are chainable as they all return jQuery
objects.
b. via $.-prefixed functions. These are utility functions which do not work on
the jQuery object.
2.9 Adobe Dreamweaver:
Adobe Dw (Dreamweaver) is a proprietary web development application
originally created by Macromedia. It is now developed by Adobe Systems,
which is acquired Macromedia in 2005. Dreamweaver is available for
both Mac Windows operating systems. Recent versions have incorporated
support for web technologies such as CSS, JavaScript and various server-side
scripting languages including PHP.
2.10 Adobe Photoshop:
Adobe Ps (Photoshop) is a graphics editing application program developed
and published by Adobe Systems Incorporated. Photoshop has been a useful
tool for graphic designers to create artwork conveniently and aesthetically. In
this project, Photoshop was too useful for designing logos, banners,
backgrounds, stickers, bars, .. etc, Photoshop has an attractive effects and tools,
therefore it's chosen.
CSD PRPJECT
3.1 Introduction
As described in the previous chapter, this approach is to design a web base web
site that it's created by MySQL. PHP pages cannot work as any HTML page; it
needs a server to function properly. The virtual web server named Apache is
used for that purpose.
In fact, the AMP abbreviation references to the compatibility of the three
applications (PHP, MySQL, Apache) to create a dynamic websites. Instead of
installing each one of these applications individually, there is a suggested
application called "AppServ" that install integrated applications that are
essential in our work.
This chapter would describe the creation of dynamic websites step by step, by
using the applications and languages that described previously, assuming that
all requirements are installed, now let us begin:
After the installation of the AppServ software, it will create an important
directory named "AppServ" inside the driver chosen during installation. Within
that directory there are four directories, first one for Apache, the second one is
for MySQL, third one is for PHP and the other named "www".
Any ".php" file created using Dreamweaver must be saved in the "www"
directory to work correctly by dealing with the virtual server through any web
browser.
3.2 How to deal with Apache virtual server and PHP file
By assuming a page created named "index.php", follow the steps bellow to
display that page:
1- Save or copy the page into "www" directory which is included within
"~/AppServ" directory.
2- Open any web browser.
3- In address bar type: "localhost/index.php".
4- "127.0.0.1" can be written Instead of "localhost".
5- The page "index.php" will be immediately and correctly displayed.
The term "localhost" mean that there is a server but works locally only, here is
the meaning of "virtual server" that will be discussed in details.
CSD PRPJECT
Note if "index.php" saved inside another subdirectory, named for example
"mysite" that is created in the directory "www" then the address
"localhost/mysite/index.php" must be typed instead of the one in step 3 above.
3.3 Dealing with MySQL:
There are two phases for dealing with MySQL, first one by the CLI and the
other through GUI.
1. CLI of MySQL:
By following the path: "~\AppServ\MySQL\bin", follow the steps:
1- Open file "mysql.exe".
2- Type the default password that is "admin".
3- MySQL shell prompt will appear, and the cursor pointed in front.
4- Now, any SQL statement can be written.
2. GUI of MySQL:
MySQL provide a more efficient way to deal with. Follow the steps:
1- Open any web browser.
2- At the address bar type "localhost/phpmyadmin".
3- Type the username and password, typically username is "admin" and the
password is left empty.
4- Now, interact with MySQL.
3.4 Start creating a website:
To create any social website, keep in mind there's many tools to make the
website effective. Such as login/logout panel, registration mechanism, users
profile, uploading files, media galleries, messaging bars.. etc.
CSD PRPJECT
3.4.1 Login/Logout Panel
The first figure shows the design of login panel. As noticed, the first textbox is
for entering the username and the second one is for entering the password. The
button is for sending the information entered to the server to be checked
whether it is correct or not.
Then there is a PHP code for checking, but first a connection has to be done
with the database then search for the username that's entered. If the username is
found, then the correctness of the password is checked. When both of user name
and password are accepted, the user will be redirected to the welcome page; else
the massage to reenter the username and password will appear.
The two links under the button, one for new registration when the client has no
authenticated information, and the other is to help the user remember his
password if he has forgot it.
The second figure shows the logout panel. There is a bolded header for
welcoming the user that logged out; under the header there are three links. The
first link is for the user to access his profile, the second link is to provide the
user the capability for editing his personal information that is stored in the
website database.
The following pseudo code will describe the login and logout mechanism
clearly:
CSD PRPJECT
For logging in:
1- Connect( ) to DB;
2- Flag = chk_info(username, password);
3- Session(valid) = flag;
4- If Flag = true then accept user;
5- Else msg_show("Invalid username or password");
In the above pseudo code there are two functions are used, which is shown in
the following code:
1- connect( )
2- db_username = database authored name;
3- db_password = database password of authored name;
4- database = database name;
5- server = localhost;
6- mysql_connect(server, db_username, db_password);
7- mysql_select_db(database);
Where the two functions mysql_connect( ) and mysql_select_db( ) are built-in
PHP function. The first one is to connect to the apache server and the other is to
connect to the database.
1- chk_info(arg1, arg2)
2- flag = false;
3- query = "SELECT * FROM INFO_TABLE;";
4- result = mysql_query(query);
5- while row = mysql_fetch_array(result) do
6- if row(username) = arg1 and row(password) = arg2 then
a. flag = true;
b. set session(username) = arg1;
c. break while loop;
7- end while;
8- return flag;
The two functions mysql_query( ) and mysql_fetch_array( ) are also built-in
PHP. The first one is for performing the SQL query desired, and the other one is
for creating an array that store information of the current row of the table that is
retrieved as a result of the SQL query.
For logging out:
1- unset(session(username));
CSD PRPJECT
2- unset(session(valid));
3- redirect to home page;
Where the unset( ) is built-in PHP procedure that set any variable passed as an
empty value. It is importance to mention that the session ( ) is a built-in array
which is described in the previous chapter.
3.4.2 Registration Mechanism
Some information is needed to authorize any user. The following steps are
required:
1- Choose and enter a username.
2- Choose and enter a password, and password confirmation.
3- Enter the personal email, and email confirmation.
4- Enter gender, by choosing the right one.
5- Enter the birth date, by choosing the right one.
6- Enter the collage department, by choosing the right one.
7- Enter the personal hobbies.
There's a button under that textboxes, when it has been clicked, the overall
information will be sent to the server to be checked. It is very important for the
system to check if the username entered exists in database, when the answer is
yes, then this username will be rejected, taking care that the two passwords and
two emails entered are equivalent. When all information is being under polices,
then new a user is created, and his information is stored in website database.
The following pseudo code shows the registration mechanism:
CSD PRPJECT
1- if any of the information required (username, password, email, gender or
birth date) is empty then reject the user;
2- return("Please fill all required information");
3- result = mysql_query("SELECT * FROM INFO_TABLE WHERE
USERNAME = username;");
4- if mysql_num_rows(result) < > 0 then
5- return("Username entered is used is already registered");
6- if password < > password_confirmation then
7- return("Passwords are not equivalent");
8- result = mysql_query("SELECT * FROM INFO_TABLE WHERE EMAIL
= email;";
9- if mysql_num_rows(result) < > 0 then
10- return("Email registered previously");
11- if email < > email_confirmation then
12- return("Emails are not equivalent);
13- query = "INSERT INTO INFO_TABLE VALUES
(ID, USERNAME, PASSWORD, EMAIL, GENDER,
BIRTHDATE, DEPARTMENT, REG_DATE, HOBBIES);";
14- mysql_query(query);
15- return("OK");
16- if returned_value < > "OK" then
17- msg_show(returned_value);
18- else accept the new user;
Note that mysql_num_rows( ) is built-in PHP function, which returns the
number of rows that are retrieved as a result of SQL query. In step 13, the insert
query contains REG_DATE, this value isn’t entered by the user, it's entered by
the server using the date( ) built-in function that returns the date of the day the
user registered in. The code above returns a string. If this string doesn’t equal
"OK", that means there is a problem in the registration process, and the problem
is described through the returned string, and the client must avoid that problem
in the next attempt to complete the registration and become a user.
3.4.3 User Profile Construction
Before describing the construction of user profile, there is a need to describe
briefly, what is Query String? Query string is one of the effective tools that
make web designing easier. It's typed after the question mark character "?" in
CSD PRPJECT
the URL language. The Query string consists of a variable and its value, if
there's more than one variable, the character "&" will be typed after the value of
the previous variable as the following syntax:
localhost/page.php?var1=val1&var2=val2...&varn=valn
One profile page is designed, but the support of query string give the ability to
use that page for different users according to the query variable named "user".
The Profile page contains all of the user information in additional to:
1- The capability of editing the information.
2- Adding profile picture.
3- Changing profile picture.
The three capabilities listed above is not available for the user who visit's the
profile of another user. It is available just for the owner of that profile.
The following pseudo code shows the construction of the profile in an
efficient way:
1- prof_nam = get(user);
2- connect( );
3- query = "SELECT * FROM INFO_TABLE WHERE
USERNAME = prof_nam;";
4- result = mysql_query(query);
CSD PRPJECT
5- row = mysql_fetch_array(result);
6- put the values of row array in them specified places;
7- picture = row(user_pic);
8- prof_picture = picture;
Note that get( ) is a built-in PHP array that is responsible of getting the values of
the variables typed in Query string for example: If the query string contains
the substring "?var1=val1&…", the statement "v = get(var1)" means that
the variable "v" will be assigned to "val1". The get( ) array is as well as
described in the previous chapter.
In the profile page there's also two buttons, the first one is for changing the
profile picture and the second one is for changing the user information.
Changing profile picture would be described in the next sections after knowing
how to uploading files and to changing user information is shown through the
following pseudo code:
1- query = "SELECT * FROM INFO_TABLE WHERE
USERNAME = get(user);
2- row = mysql_fetch_array(mysql_query(query));
3- set the value of each textbox to its suitable value from row array;
4- change any desired value;
5- query = "UPDATE INFO_TABLE SET
CSD PRPJECT
(EMAIL = POST(textbox1), PASSWORD = POST(textbox2) …,
HOBBIES = POST(textbox6)) WHERE
USERNAME = GET(user);";
6- mysql_query(query);
This code will be applied when clicking the button which is responsible of the
saving process. Note that post( ) is built-in PHP array that is described in
previous chapter, it's responsible for getting data from page forms.
3.4.4 Messaging Bar
The messaging bar adds an interactivity among users. Substantially, any
registered user can add a message to the bar, by clicking the button showed in
the above figure, knowing that the button is hidden before user logging in.
When the user click the button, a new page will be opened containing a textbox
that will act as a "from", textarea to insert desired the message and a button to
send data to the server to be added as new message appeared in the bar.
This activity is based on files, the message submitted by the user is stored in a
server sequential file, there is one file for all messages, any user adds a new
message, it will be appended to this file. Note that only the ten messages
recently added are displayed.
The following pseudo code shows the messaging activity:
For add message:
1- msg = post(textarea);
2- from = post(textbox);
3- if msg is not empty then
CSD PRPJECT
a. file = "file.txt";
b. stream = fopen(file, "a");
c. fwrite(stream, msg);
d. fclose(stream);
4- else msg_show("Don't leave empty message");
fopen( ), fwrite( ) and fclose( ) are three built-in PHP functions. The first is for
creating a stream and appending it to the file (because of "a" parameter), know
that "r" used instead of "a" parameter to read from file and "w" for writing. The
second function is for writing and the third function is to close the stream.
For display messages:
1- define A as array;
2- file = "file.txt";
3- stream = fopen(file, "r");
4- num = count(Arr = file(file));
5- if num > 10 then
a. dif = num – 10;
b. for i = 0 .. dif do : msg = fgets(stream);
6- while not eof(stream) do
a. msg = fgets(stream);
b. A(k) = msg;
c. k = k + 1;
7- for i = 0 .. 9 do : echo(msg);
8- fclose(stream);
count( ), fgets( ), file( ) and eof( ) are built-in PHP functions. The first one is for
counting the number of rows of the array, the second one read a line from file,
the third one puts the content of the file into an array, and the fourth function
responsible for checking if the pointer reaches the end of the file or not.
3.4.5 Uploading Files
CSD PRPJECT
Uploading files is one of the services that are provided by PHP. Any user can
upload a file (picture, audio or video) by browsing the file desired then give a
caption to it, then click the button that's responsible for uploading. The next
pseudo code is for uploading pictures:
1- if files(uf, type) = "image/gif" or "image/jpeg" or "image/bmp" then
2- if files(uf, size) < 200000 then
i. if file_exists(files(uf, name)) then
echo("File name exist");
ii. else if post(caption) is empty then
echo("Please type any caption for picture");
iii. else
1. token = explode(".", files(uf, name));
2. files(uf, name) = token(0) + rand( ) + "." + token(1);
3. move_uploaded_file(file(uf, tmp_name)), file(uf, name));
4. connect( );
5. query = "INSERT INTO PHOTOS VALUES
(ID, files(uf, name), POST(caption), SESSION(username) … );
6. mysql_query(query);
3- else echo("Unavailable File");
Notes:
1- files( ) is a built-in two dimensional array n×m where n equal the number
of files browser in the page, and m equal the number of file attribute
(name, type, size, … etc.).
2- file_exists( ) is a built-in function that checks if the file wanted to upload
exists in the server or not.
CSD PRPJECT
3- explode( ) is also a built-in function that tokenizes the string according to
specified delimiter.
4- rand( ) is a built-in function too, that returns a random number that will
be concatenated with file name to reduce the probability of file name
duplication.
5- move_uploaded_file( ), uploading built-in function that moves the file to
the server directories.
3.4.6 Photo Gallery
Photos that are uploaded by the users are collected together in the photo gallery,
each photo uploaded has an information stored in website database, a photo
name, photo caption, uploaded by, uploading date and so on.
The Photo gallery is partitioned into pages, each page consist of 8 photos, each
photo is displayed as thumbnail, any photo can be viewed by clicking its
thumbnail.
CSD PRPJECT
The photo would be viewed in a container inside the gallery, but not in it full
size, so that there's a link under the container to add the ability to view a photo
in its real size, but in a new window.
The following pseudo code representing the photo gallery activity:
For partitioning gallery into pages:
1- connect( );
2- query = "SELECT * FROM PHOTO;";
3- result = mysql_query(query);
4- num = mysql_num_rows(result);
5- number_of_pages = floor(num / 8) + 1;
6- page = get(page);
7- first_pic = (page * 8) – 7;
8- last_pic = page * 8;
Notes:
1- floor( ), is a built-in function that is responsible for converting real
numbers to integer numbers and round it to the nearest integer.
2- number_of_pages is useful to know how many pages in the gallery to
number them in the pages bar.
3- first_pic, last_pic is useful to indicate the interval of photos id to be listed
in the current gallery page.
For listing photo in current page:
1- query = "SELECT * FROM PHOTO WHERE
ID >= first_pic AND ID <= last_pic;";
2- result = mysql_query(query);
3- while row = mysql_fetch_array(result) do
a. thumb = row(thumb);
b. add thumb to the page;
c. add link to thumb that view picture(thumb) = row(name);
d. echo row(caption), row(uploaded_by), row(date);
Through using query string (described previously), the page number and the
picture name can be determined to view the picture inside the container, query
string here is also useful for designing one template for all gallery pages.
3.4.7 Video and Audio Galleries
CSD PRPJECT
At first, there's a need for a player for watching videos or hearing audios.
Here, the JWPlayer is used from the JavaScript library. Video gallery as shown
in the above figure, consist of two containers, one for JWPlayer and the other is
for listing the videos that are added by the user whose video is playing.
The next pseudo code represents the behavior of video gallery:
For video jwplayer:
1- video = get(video);
2- set jwplayer file = video;
3- set jwplayer height = any value;
4- set jwplayer width = any value;
5- set jwplayer skin = any skin file "*.zip";
For video list:
1- user = get(user);
2- connect( );
3- query = "SELECT * FROM VIDEO WHERE
UPLOADED_BY = user;";
4- result = mysql_query(query)
5- while row = mysql_fetch_array(result) do
a. add row(thumb) to the list;
b. add row(caption) to the list;
c. add row(date) to the list;
d. add horizontal line as separator.
CSD PRPJECT
The audio gallery is the same idea of the video gallery, but the JWPlayer will
play the audio with black background. Therefore JWPlayer add a facility to
choose an image to be displayed instead of black background. This image can
be varied from one audio to another, by adding an "aud_img" column to the
audio table in the website database. This column will take a path to an image for
each audio file to be displayed during playing the audio file.
3.4.8 Users Online Mechanism
The idea works as:
1- Any user logged in, the server inserts his username into the database
table. The Server also insert the time when the user logged in.
2- The user now browsing the website. In each page of the website there's a
code loaded every one second.
3- This code is responsible of:
a. Updating the time of the session user.
b. Checking time value of other users.
c. If the last updating of time was before 2 minutes at most, the
username and its time will be removed from the table.
4- Any user logged out, his username and time will be immediately removed
from database table.
Following pseudo code display the mechanism:
For (every one second interval) load :
a. connect( );
b. query = "UPDATE ONLINE SET TIME = time( ) WHERE
USER = session(username);";
c. mysql_query(query);
d. query = "DELETE FROM ONLINE WHERE
time( ) – TIME > 120;";
e. mysql_query(query);
time( ) is built-in PHP function, that returns the current time in seconds, it deals
with a time counter, every second it is increased by one. This counter still
increment since 1970.
3.4.9 Administrative Panel
CSD PRPJECT
The Administrative panel is the most important phase of this work,
because it is controlling many activities. The administrator of the website can
assign this responsibility to any user. If the user became an administrator, then
he can type his username and password in the textboxes of the figure above to
enter as an administrator to the administrative panel, then the panel will appear
as the figure bellow.
1. Controlling Message Bar
Many times the admin need to delete or edit any undesired message. There is a
button responsible to enter the message control page. The Message control page
is designed as the figure bellow.
CSD PRPJECT
The following pseudo code showing message controlling:
For editing a message:
1- file = "file.txt";
2- stream = fopen(file, "r");
3- i = 0; position = line number of message wanted to edit;
4- text = empty string;
5- while not eof(stream) do
a. if i < > position then
i. line = fgets(stream);
ii. text = text +line;
b. else
i. wanted = fgets(stream);
ii. Edit wanted;
iii. text = text + wanted;
c. i = i + 1;
6- fclose(stream);
7- stream = fopen(file, "w");
8- fwrite(stream, text);
9- fclose(stream);
For deleting a message:
1- file = "file.txt";
2- stream = fopen(file, "r");
3- i = 0; position = line number of message wanted to edit;
CSD PRPJECT
4- text = empty string;
5- while not eof(stream) do
a. if i < > position then
i. line = fgets(stream);
ii. text = text +line;
b. else
wanted = fgets(stream);
c. i = i + 1;
6- fclose(stream);
7- stream = fopen(file, "w");
8- fwrite(stream, text);
9- fclose(stream);
2. Controlling Users
The Administrator can also edit all users information, deleting users or
add/remove administrators. The page of controlling users is designed as the
figure bellow.
Any website has a large number of users. Then the textbox shown in the
above figure give the admin a facility to search for username of the user that
wanted to.
The following pseudo code shows the operations of controlling the users:
CSD PRPJECT
For editing user:
1- id = get(id);
2- query = "SELECT * FROM INFO_TABLE WHERE ID = id;";
3- connect( );
4- row = mysql_fetch_array(mysql_query(query));
5- set each textbox to the suitable value from row array;
6- edit any desired information;
7- query = "UPDATE INFO_TABLE SET
USERNAME = textbox1, PASSWORD = texbox2, …
HOBBIES = textbox7 WHERE ID = id;";
8- mysql_query(query);
For deleting user :
1- id = get(id);
2- connect( );
3- query = "DELETE FROM INFO_TABLE WHERE ID = id;";
4- mysql_query(query);
For giving administration:
1- id = get(id);
2- connect( );
3- query = "SELECT * FROM INFO_TABLE WHERE ID = id;";
4- row = mysql_fetch_array(mysql_query(query));
5- query = "INSERT INTO ADMINS VALUES
(row(username), row(password));
6- mysql_query(query);
3.5 Using CSS for Designing
CSD PRPJECT
CSS is simple a language in syntax, but its effect is great. In this work,
the CSS code typed in a separated file, then linked with all the pages of the
website, therefore, all pages will be affected by any changes that happen in CSS
file.
The following three examples will take a clear view about CSS:
Example1:
body {
background-image:url(Background.jpg);
font-family:Tahoma;
font-size:small;
margin: 0px 0px 0px 0px;
cursor:url(cur.png);
color:#FFF;
}
Example2:
#nav {
width:850px;
height:51px;
float:none;
font-family:Tahoma;
}
Example3:
.txt {
width:200px;
height:30px;
border-width:2px 2px 2px 2px;
border-color:#666;
border-style:groove;
background-color:#CCC;
CSD PRPJECT
font-family:Tahoma;
font-weight:bold;
text-align:center;
}
3.6 Using of JS and jQuery for Animation and Events:
In simple words, jQuery is a JS library that gives an ability to animation, event
accuracy or develop some website objects. In this approach, the jQuery used to
animate some objects, such as user login panel, welcoming user page … etc.
where the JS used to provide more flexibility to the scripting of website.
CSD PRPJECT
4.1 Conclusions:
A. When the user logged in the website, then his username stored in session
array. Here, there is a need for a flag named "valid" also stored in session
array, to determine whether the user valid or not, user is still logging in,
and make some objects visible which is invisible for the client who is not
a user, or he is a user but doesn’t logged in.
B. There is a problem when uploading a file has the same name of another
file already exist in the server, for solving this problem, a random number
may appended to file name to avoid the replication of file names.
C. Query string is very important way to design one page for many
purposes, such design for user profile. Profile page designed once, but by
the existence of query string it seems that each user has his own profile
page.
D. Using a separate CSS document is better than including CSS code inside
the PHP document, because the separate document can be shared for all
website pages, so that all of web pages affected by any change happens in
the CSS document.
E. PHP is a server side scripting language, so that it does not appear when
the client tries to view the source code of the web page, While the JS is a
client side scripting language, it is appear in source code of the web page.
F. PHP code can be written inside JS code, while the JS code cannot be
written inside the PHP code, with the reference to that both of PHP and
JS codes are closely like C language code.
G. Avoiding send any sensitive data (as passwords) through get method will
avoid compromising these data or bookmarking the page, because any
information sent by this method will appear in the URL.
H. Sending data through post method is safer than sending it by get method,
because there is no possible to compromising data or bookmarking page,
due to these data does not appear in the URL.
I. Adding comments as a description of some statements decreases the
probability of errors accuracy and the researcher understands many steps
through these comments to use them in another research.
J. CSS code can be written dynamically through JS using jQuery.
CSD PRPJECT
4.2 Future Works:
There are many ideas to be added to this approach, for increasing the
sociality of website, such as adding friendship facility, user will be able to share
his uploads, capability of comments on shared uploads, user can send private
messages, public and private chat, and so on.
CSD PRPJECT
Resources:
[1] J. Coggeshall and M. Tabini, “The Zend PHP Certification Practice Test
Book”, First Edition, Jan 2005.
[2] C. Grannell, “The Essential Guide to CSS and HTML Web Design”,
2007.
[3] T. Boronczyk and et al, “PHP6, Apache, MySQL Web Development”, Jan
2009.
[4] Wikipedia, Free Encyclopedia, www.wikipedia.com.
[5] W3Schools, Online Web Tutorials, www.w3schools.com.
[6] Hot Scripts, The net’s largest script collection, www.hotscripts.com.
CSD PRPJECT
نفيذتصميم وت
موقع اجتماعي للطلبةJS و HTML،PHP،CSSةبواسط
بغدادجاهعةالعلوم،كلةإلىهقدمتقزز
فالعلومكلةفالبكالوروصلدرجةالالسهةاالحتاجاتهيفقطالجشئالتفذف
اتالحاسبعلومقسن
فذبواسطة
أحودحسيعادلحسي
شراف إب
م.م.حسامعلعبدالوحسي
م.م.خلوداسكدرداغز
2011-2012
راقـــــجمهورية الع
وزارة التعليم العالي
والبحث العلمي
دادـــة بغـــــــــجامع
ومــــــــــة العلـــكلي