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

راقـــــجمهورية الع

وزارة التعليم العالي

والبحث العلمي

دادـــة بغـــــــــجامع

ومــــــــــة العلـــكلي