Design and Implementation of Standard Personal

Design and Implementation of Standard Personal Website for Iraqi Academics By Noor Saihood Abdulrazzaq

Supervised By Dr. Amer Saleem Elameer

October 2016

‫ ه‬1438 ‫حمرم‬

‫قل لوكان البحر مداداً لكلمات ربي لنفد البحر‬ ‫قبل ان تنفد كلمات ربي ولو جئنا بمثله مدداً‬

‫الكهف ‪901‬‬

Acknowledgment First of all, I thank Allah for Grating me the will and strength with which this research was accomplished and I pray that his blessings upon me may continue throughout my life. I would like to express my deepest gratitude and appreciation to my supervisor Dr. Amer Saleem Elameer for his continuous help, encouragement and valuable advice during the work. I thank all teaching staff at informatics institute for postgraduate studies for their help and advice. And I thank my friends for their encouragement all the time.

Thank you so much

Noor Saihood Abdulrazaq

Abstract The importance of web applications increased with the development of information technology and its relationship with our daily life. In this work we developed a web application that creates a personal website for Iraqi academics according to curriculum vitae provided by the Iraqi ministry of higher education with user selected styles. We used PHP7 scripting language and Mysqli to make the site dynamic in addition to other scripting languages such as HTML, CSS and JavaScript. The project included many simple steps must be followed by the user in order to create the personal website starts with registering in the main website by filling up the registration form in order to take the required information from the user, Upload personal and site’s cover images then create the personal website according to the inserted information. The project gives the user the ability to login and update the personal website in future. The result of the project is a hosted personal website with general information determined by the ministry of higher education and styles selected by the user.

List of Contents Chapter One: Introduction to General Web Concepts 1.1 1.2 1.3 1.4

1.5

1.6 1.7 1.8

Introduction Serving Up Information A Word about Browsers Uniform Resource Locator [URL] 1.4.1 Protocols 1.4.2 Domain 1.4.3 Port 1.4.4 Path 1.4.5 Query Strings 1.4.6 Fragment Client-Server Model 1.5.1 The Server 1.5.2 The Client 1.5.3 The Request-Response Loop Aim of the project Previous Works The Project Overview

Chapter Two: Theoretical Study of Web Design & Implementation 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8

Introduction What is the Web Design? User Interface, Experience and Interaction design Design Documents What is the Web Development? Static vs Dynamic Website The Basic Needed Tools Web Design Languages 2.8.1 Html

2.8.2 2.8.3 2.8.4 2.8.5 2.9 2.10

CSS JavaScript PHP MySql

PHP7 & MySqli Web Hosting

Chapter Three: Design and Implementation of Academic Website 3.1 3.2

3.3 3.4 3.5 3.6

3.7 3.8

3.9

Introduction The Website Design 3.2.1. Websites Structure 3.2.2. Websites Wireframes Creating the Interface Creating the Database Hosting the Website Creating Personal Website Procedure 3.6.1 Home Page 3.6.2 About us Page 3.6.3 Contact us Page 3.6.4 Creating New Personal Website 3.6.5 Updating the personal website Choosing Domain name for the Personal Website Hosting the personal website 3.8.1 Sign up for Free Domain 3.8.2 Download the Personal web site 3.8.3 Upload the Personal web site Administration Pages

Chapter Four: Conclusions and Suggestions for Future Work 4.1 4.2

Conclusions Suggestions for Future Work

List of Abbreviations Acronym

The meaning

CSS CV DNS Email FTP HTML HTTP IDE IIS IMAP IP IxD MySQL MySQLi PHP POP RSS SMTP SQL SSH TCP/IP UCD UI UOITC

Cascading Style Sheets curriculum vitae Domain Name System Electronic Mail File Transfer Protocol Hyper Text Markup Language Hyper Text Transfer Protocol Integrated Development Environment Internet Information Services Message Access Protocol Internet Protocol Interaction Design My Standard Query Language My Standard Query Language Improved Hypertext Preprocessor Post Office Protocol Really Simple Syndication Simple Mail Transfer Protocol Structured Query Language Secure Shell Protocol Transmission Control Protocol/Internet Protocol User Centered Design User Interface University of Information Technology and Communications Uniform Resource Locator User Experience World Wide Web Platform- Apatche Mysql PHP Perl

URL UX WWW XAMPP

Chapter One Introduction to General Web Concepts

Chapter One

Introduction to General Web Concepts

Chapter One Introduction to General Web Concepts 1.1 Introduction The World Wide Web or simply the Web is what most people think it is the ‘Internet’ is truly a subset of the internet to transfer the information over the computer networks, that can be shown in figure [11]. The WWW depends on a number of protocols, systems, and technologies all working together in harmony.[1] To distinguish between the internet and the web that are increasingly being used alternately, The Internet is computers that are connected via a network. No company owns the Internet; it is a mutual effort managed by a system of rules and standards. The purpose of connecting computers is to share information. The computers have many modes for the information to be passed, including file transfer (FTP), email, and other methods upon which the Internet is built. These ways of transferring the information are called protocols. The Web is a method of transferring information over the Internet. It links the documents to each other via hypertext links thus producing a huge “web” of connected information. The Web uses a protocol called Hyper Text Transfer Protocol (HTTP).

1

Chapter One


Figure [1-1]: The web as subset of the internet[2]

1.2 Serving Up Information The computers that make up the Internet “serve up” documents according to the request, these computers are known as servers. More precisely, the server is not the computer hardware, it is the software that allows the computers to communicate. The function of server software is to wait the information request, then retrieve and send that information back as fast as possible. In order for a computer to be part of the Web, it must to have special web server software that allows it to treat with Hypertext Transfer Protocol transactions. HTTP servers is the second name of the web servers. There are many types of server software, but the two most popular are Microsoft Internet Information Services (IIS) which is a part of Microsoft’s family of server solutions. The second is Apache (open source 2

Chapter One


software). which is available for free to Unix-based computers and comes installed on Macs and there is a windows version. Every computer and device (smartphone, router, modem, etc.) connected to the Internet have a unique numeric oreilly.com hosts

IP address. For example,

in the computer that has an IP address

208.201.239.100. All those numbers can be disorder, so happily, the Domain Name System (DNS) was developed to help us refer to that server by its domain name, “oreilly.com”. The numeric IP address is useful for computer software, while the domain name is more understandable to humans. Matching the numeric IP addresses with the text domain names is the job of a DNS server.

1.3

A Word about Browsers “server-side” or “client-side” applications. These terms refers to

which machine is doing the processing. server-side functions and applications use the processing power of the server computer, while Client-side applications run on the machine of the user. People use mobile browsers, desktop browsers, and other technologies (such that screen readers) as clients to access documents on the Web. The server returns the requested documents back for the browser to display. The requests and responses are processed via the HTTP protocol, it can be used to transfer data, images,

audio files,

scripts, movies and other web

resources that make up applications and web sites. It is common to think of a browser as a window on a computer screen with a web page displayed in it. These are known as desktop browsers or graphical browsers. The most popular desktop browsers as of this writing include 3

Chapter One


Chrome, Firefox, Internet Explorer for Windows, Safari and Opera. These days, the people accessing the Web using browsing clients built into mobile phones or tablets. The sites must be usable and accessible for all users, depending on their browsing experiences. Users with limited mobility may use helping devices to access links and to type. Users with sight disabilities may be listening to a web page read by a screen reader (or simply make their text extremely large). Even on the desktop browsers, pages may look and perform differently among different types of browsers. This depends on web technologies and the users’ ability to set their own browsing preferences.[2]

1.4 Uniform Resource Locator [URL] A naming mechanism is required In order to allow the clients knows how to request resources from the server. That naming mechanism in the web is the URL. As illustrated in Figure [1.2], it consists of two important components: the first one is the protocol that used to connect, the second is the domain (IP address) to connect to. There are optional components of the URL which are: the path (or directory to access the files on that server), the port to connect to, a query string, and a fragment identifier.

Figure [1-2]: The components of URL

4

Chapter One


1.4.1 Protocols The protocol that we are using is the first component of the URL. TCP/IP stack have many application layer protocols define what application to use. A few of those protocols can appear in a URL and used by web developer that includes: FTP: used for transferring files between computers. HTTP: used for web communication. SSH: allows remote command-line connections to servers. DNS: used for resolving domain names to IP addresses. POP/IMAP/SMTP: for transferring and storing email. 1.4.2 Domain This component of URL is case insensitive because the DNS system is case insensitive. The domain recognize from which server we are requesting resources. An IP address can be used instead of the domain. 1.4.3 Port The port is a software connection used in URL to define which port to connect instead of the default one. The syntax for this component is to add a colon after the domain and then the port number as integer. For example to connect our server to port 100 we would specify the URL as http://book4u.com:100/.

5

Chapter One


1.4.4 Path Anyone who has ever used a computer file system is familiar to the concept of path. The web server root match a folder somewhere on that server. The path can be case insensitive in windows servers but it is case sensitive in other such as Linux servers. 1.4.5 Query Strings Query strings are the way of passing the client information inserted in the form to the server. They are encoded in URL as

key-

value pairs separated by ‘&’ symbols and preceded by the ‘?’ symbol. Figure [1.3] illustrates the components for a query string encoding a username and password.

Figure [1-3]: The components of Query String

1.4.6

Fragment Fragment is the last optional component of the URL. It is a way

for requesting a portion of a page.[1]

6

Chapter One

1.5


Client-Server Model Sometimes the web is referred to as a client-server model of

communications. This model has two actors: servers and clients. The client is a computer that sends requests and receives responses from the server, in the form of text files, images, codes and other forms. The server is the computer that listening for client’s request. It is active 7 days a week, 24 hours a day. 1.5.1 The Server The server is the central repository for client-server system. It stores user and program data, performs security authorization tasks and hosts web applications. One server can serve millions of client requests on demand 1.5.2 The Client There are different types of client machines such as desktops, smart phones, tablets laptops and laptops. Wide range of specifications these machines have related to processing speed, operating system, available memory and screen size. Client requests for web pages using web browser. But a client can be more than just a web browser. For example the help system for word processor when access the resources online act as an iOS game that communicates using HTTP with a game server. The request-response loop is the interchange mode of information between the server and the client.

7

Chapter One


1.5.3 The Request-Response Loop In client-server model, the basic mechanism on the server for receiving requests and replying with response is the request-response loop. The client is responsible for initiates the loop by sending a request to the server and receives a response. The most common type of HTTP request is the GET request. In this request one is asking for a resource located at a specified URL to be retrieved. The other common request method is the POST request. This method is used to send data to the server using an HTML form. The response include some resource like an image, an HTML file, or some other data such as some information about the request or about the response such as cookies, codes, and other data. The request-response loop illustrated in Figure [1-4].[1] .

Figure [1-4]: Request-Response Loop[1]

8

Chapter One

1.6


Aim of the Project This project aims to unify the biographies of Iraqi academics according to the general curriculum vitae (CV) provided by the Iraqi ministry of higher education by developing a website that creates a standard academic website. Provide the ability to insert the personal information in a simple manner, choosing the styles of the personal website and uploading personal and site’s cover images. Enable the user to update the personal website after creating it. Provide direct free hosting for the created academic website either by using the same URL that created with it or by giving the user an instructions to create domain name, downloading the created academic website and uploading it for a desired host.

1.7

Previous Works There are nobody deals with this type of work in the past.

9

Chapter One

1.8


The Project Overview This Section provide an overview of the project flow. It describes

what each chapter and section contains. Chapter 1: Introduction to general Web concepts. Chapter 2: Covers the theoretical study of the website and the project’s requirements in details. Chapter 3: Design, implementation and publishing of the website. Chapter 4: The project conclusions and suggestions for future work.

10

Chapter Two Theoretical Study for Web Design and Implementation

Chapter Two

Theoretical Study of Web Design & Implementation

Chapter Two Theoretical Study of Web Design and Implementation 2.1 Introduction There are more than two billion Internet users worldwide and more than billions of devices such as computers, smartphones, tablet computers and more are connected to the internet. The client-side programming technologies used to build web applications and web pages that are run on the client (i.e., in the browser on the user’s device). HTML, CSS technologies and JavaScript language are used to add fun, dynamic and powerful characteristics and effects to web applications and pages, like animation, audio, image manipulation, video, drawing, designing pages for different screen sizes and more. The server-side programming is the applications that replay to the clientside requests from web browsers, such as ordering a book from amazon, searching the Internet. There are three popular server-side technologies, including PHP, ASP.NET (either C# or Visual Basic) and Java Server Faces.[3]

11

Chapter Two


2.2 What is the Web Design? Web design is the creation process of the content that viewed over the web. Windy Willard define the web design as “ the skill of creating the presentations of content (usually hypertext or hyper media ) that is delivered to an end user through the world wide web, by way of web browser or other web-enabled software like internet television clients, microblogging clients and RSS readers ”, so the web design is what happen in website front-end. The website front-end is what the customer facing such as images, texts, layouts and navigation.[4]

2.3 User Interface, Experience and Interaction design The first think of web design is how the site works. Before choosing fonts and colors, it is important to determine the goals of the site, how the visitors navigate through it and how it will be used. These tasks fall under the disciplines of User Interface (UI) design, User Experience (UX) design, Interaction Design (IxD). User Interface Designer : responsible for designing the site tools that users use to navigate such as (menus , buttons, links, and so on) and functional organization of the page. User Interaction Designer : is responsible for making the site as interesting, efficient and easy to use as possible. User Experience Designer : ensuring that the user experience with the site is suitable.

12

Chapter Two


2.4 Design Documents The website designers might produce some types of document include: 1. Wireframe diagrams A wireframe diagram shows the structure of a web page using only outlines for each widget and content type as shown in Figure [2-1]. The wireframe diagram purpose is to show how to divide the screen in real estate and indicate the navigation, form elements, search boxes, and other functionality without any graphic design or decoration.

Figure[2-1] Wireframe Diagram[2] 13

Chapter Two


2. User research and testing reports This design document is focus on user’s needs and limitations and it is called User Centered Design(UCD). Site designs usually starts with user research, including observations and interviews in order to gain a better understanding of how the site will be used. 3. Site Diagram It describes the whole structure of the site and how pages connected with each other. Figure[2-2] shows a an example of simple site diagram.[2]

Figure [2-2] Example of Site Diagram[2]

2.5 What is the Web Development? It is the process of creating a new website or performing changes to an existing one, for example adding new section to a live website.[5]

14

Chapter Two


The back-end is the behind the seen codes and technologies that makes the front-end work. It includes scripts to process the forms, databases to store the content and programming to display the contents.[4] The web development refers to the work on the back-end of the site. The website development cycle follows eight steps, which are: • Planning: Describe why to build the website and what to create. • Content: provide a list of wanted contents. • Design: generate a design document to display the contents. • Construction: Write the code. • Test: to ensure everything works in right manner. • Hosting: select a domain name and find a place to upload the site. • Publicity: Build traffic via publicity the site. • Review: Review the site periodically to ensure it succeeds. [5]

Figure [2-3]: Website Development Cycle.[5] 15

Chapter Two


2.6 Static vs Dynamic Website Static website is the earliest form of the webs. Users in static website could view the pages but could not provide feedback. The skills that needed to create static website is very simple: one just needed to have knowledge of the HTML and creating images. The interaction between the user and the static website can be shown in figure[2-4].

Figure[2-4]: Static Website.[1]

In dynamic website the page content vary from one user to another because the content of the page is created at the run time by a program created by a programmer. These server-based programs would read content from databases, interface with existing enterprise computer systems, communicate with financial institutions, and then output HTML that would be sent back to the users’ browsers. The dynamic website can be shown in figure [2-5].[1] 16

Chapter Two


Figure [2-5]: Dynamic Website.[1]

2.7 The Basic Needed Tools Many tools are required to build the dynamic website these are: The Primary: these tools are programs that necessary to perform many functions such as edit the plain text for example windows notepad (used to create the web pages), Eclipse IDE also text editor but it provide suggestions for the user, XAMPP server that used to provide programs (Apatche, Mysql, PHP and Perl), programs that provide design tools such as Dreamweaver and FrontPage , image editor such as Photoshop and windows Paint programs . Web Browser: to view the website contents such as Mozilla Firefox, Chrome, Opera, etc.

17

Chapter Two


FTP Client: in order to put the website in Internet after completing the creation process such as FileZilla Client.[6]

2.8 Web Design Languages The code is the medium of the web. The web designer doesn’t need to be expert in web programming, he just need to know some important code to create the website basis. 2.8.1 HTML The web page is a plain text appears perfectly formatted in a web browser because it has been encoded using Hypertext Markup Language (HTML) The HTML means: ● Hypertext is the text that clicked by the user in order to jump from one document (Web page) to another. ● Markup is the tags that apply the layout and formatting to the plain text. [7] ● Language

the fact that HTML is a markup language not a

programming language. The markup language is a collection of markup tags. HTML tag is a keyword enclosed by angle brackets like , The first tag in a pair is the start tag (opening tag); the second tag is the end tag (closing tag). Figure [2-6] shows simple example of HTML program.[8]

18

Chapter Two


Figure [2-6]: HTML Example

2.8.2 CSS The Cascade Style Sheet is used to add the visual formatting to the web page. CSS rules are defined as a property name followed by a colon and then a property value. Individual rules are terminated by semicolons, with the final rule having an optional semicolon. The following is the basic syntax: property-name1 : value1; ............. property-nameN : valueN;[9] there are three types of style sheet : Inline, Internal and External. 1- Inline CSS : should be used to apply the style to a single occurrence of an element. As shown in figure [2-7].

19

Chapter Two


Figure [2-7]: Inline Style Sheet

2- Internal Style Sheet: should be used when a single document has a unique style. It must to define in the section using tag. Figure [2-8] shows an example to internal style sheet.

Figure [2-8]: Internal Style Sheet

3- External Style Sheet: used when applying the style to many pages. Each page must link to the style sheet using the tag inside the section as shown in figure [2-9].[8]

figure [2-9]: External Style Sheet

20

Chapter Two


2.8.3 JavaScript It is the scripting language of the web that used to add the functionality, detect browsers and much more. It is a good example of a client - side scripting language which commonly runs within a web browser. Usually it is embedded directly to HTML tags. We can put it to different places: 1- Put the script in < head> as shown in Figure [2-10]

Figure [2-10] Put the Script in tag

2- Put the script in < body> as shown in Figure [2-11]

Figure [2-11] Put the Script in tag 21

Chapter Two


3- Put the script in both < body> and as in Figure [2-11].

Figure [2-11]: script in both < body> and tags

4- External Script: we must to point to the .js file in the src attribute of the tag as shown in figure[2-11]. [10]

Figure [2-11]: External Script

22

Chapter Two


2.8.4 PHP PHP is a server-side scripting language, that means the PHP programs, or scripts is run on the Web server. Also, it is an interpreted language a PHP script is processed by the PHP engine each time it ’ s run in order to add the dynamic property to the website. Dynamic website contain forms to be filled by the user. The process of dynamic website that contain a form can be shown in figure [2-12].

Figure [2-12]: How Forms Work.[11]

In order to write a PHP code we must to access a web server that running the PHP. For that we must to install some programs which is: Apatche web server, PHP engine and Mysql database web server[11]. PHP work on different platforms ( Linux, Windows, Unix ). PHP files contain text, HTML tags and scripts. It have a file extension of .php, .php3 or.phtml .

23

Chapter Two


2.8.4.1 Basic PHP Syntax PHP usually starts with . A PHP scripting block can be placed anywhere in the document. A PHP file normally contains HTML tags similar to an HTML file, and some PHP scripting code. Figure [2-13] shows simple example written by PHP to display ‘Hello World’ text in browser.

Figure [2-13]: Simple Example in PHP

The PHP scripts written iside tag. Echo is the basic statement to display the text. Note that, each line in PHP must end with semicolon(;).[12] 2.8.5 Mysql The standard query language SQL used by Mysql server to control the access to the data and ensure that multiusers can work simultaneously. So Mysql server is a multithreaded and multiuser server.[13]

2.9 PHP7 & Mysqli PHP combined with MySQL are cross-platform that’s mean the project that developed in Windows and serve on a Unix platform. in our project we used Windows7 as an operating system and we installed XAMPP program that contain a collection of important programs which 24

Chapter Two


are ( Apathe server, Mysqli database server, PHP7 engine ) for local development. Where the Apatche is the web server, PHP7 is the latest version of PHP and Mysqli is Mysql Improved. The following is the most important aspects that used in our project that contain both php7 and mysqli are: mysqli_connect ('localhost','root','') : this function is used to connect to the database on ‘local server’ with user who has privileges called ‘root’ and the last attribute refers to the user password, in this example there are no password to access the server. mysqli_select_db($db, 'project') : this function is to select the required database that called ‘project’ among several database in the server. the first attribute ‘$db’ is variable contain the connection link. $sql ="select * from cv where user_id='$id' "; $result =mysqli_query($db, $sql); $my=mysqli_fetch_array($result) $sql is the variable that carry the selection query, and $result this variable carries the result of the processed query. But $my variable carry the database table’s record that contain all the selected information from the project’s database.

25

Chapter Two


2.10 Web Hosting When completing the creation process of the website the next step is to put it on the Internet. In order to do that it must to have place to store it so that the public can find it. When purchase a web hosting that mean you are sort of renting a space on the Internet. Actually, you are just renting hard drive space along with some very useful applications and important website tools from a company that provides space on the Internet. That “space” is called a web server and is provided by a web HOST. The Web Host makes sure your website is available to people who are browsing the Internet. You are also paying for bandwidth which is just a measurement of accessibility between the public and your website files. When someone views your website, for example, they are spending your bandwidth.[14]

26

Chapter Three Design and Implementation of Academic Website

Chapter Three

Design and Implementation of Academic Website

Chapter Three Design and Implementation of Academic Website 3.1

Introduction This chapter explains the design and implementation of standard

academics website. This website has been designed to help the Iraqi academics to build their personal website on the internet according to the standard CV provided by the Iraqi ministry of higher education. The website provide a registration form to the visitors to take the personal information and allow the user to select required styles for the personal website, also uploading the personal image and the website’s cover image. The main website provide a series of instructions that helps the visitors to choose the required programs with its links in order to download the personal website after creating it. Another instructions are provided to describe how to create the URL and provide a program to upload it to the host. There are property provided by the main website which is allowing the registered user to update the personal website after creating it. The languages that have been used in the design of the website are PHP7, HTML, CSS, JavaScript, and MySqli to deals with the database. The web design and development applications that used are XAMPP, eclipse IDE, brackets IDE. In addition to some design applications such as ‘FrontPage’ and ‘Dreamweaver’ and some graphics editing programs such as 'Photoshop' and 'Paint' and some text editing programs such as ‘Notepad ++’ and ‘FileZilla Client’ program to upload the website . 27

Chapter Three


Panoramic images has been taken from the main website of UOITC in the Facebook. It is known that the use of the images with their real size will slow the loading process; so that the images have been processed to be appropriate to the speed of loading. The website’s main interface contains basic information about the required programs that must to be installed in the visitor’s computer in order to download the personal website and uploading it after the creation process using the main website. Through the main page all the visitors can access many different pages using the navigation bar.

3.2 Website Design 3.2.1 Website Structure The structure of the website chosen before considering the visuals. There are two types of navigation structures that will eventually translated to the navigation menus: flat structure, hub-and-spoke structure and hierarchal strict structure. In flat structure each page can be accessed by every other pages, this type of navigation can be shown in the main interface of the created personal website and in the interface of the main website where all the pages such us ‘contact us’ , ‘about us’, ‘create new website’, ‘update existing website’ and ‘home page’ are all in the same level of navigation. While in the hub-and-spoke structure the website have sections that separated from each other and each one of them follow a linear structure, this can be seen in the steps of creating new personal website or updating the existing one. In strict 28

Chapter Three


hierarchy the visitor must return back to the home page in order to switch to another one, that appears in the internal and external links which included in the home page. This combination of structures that created the project of Iraqi academics website can be seen in figure[3-1]:

29

Chapter Three


3.2.2 Websites Wireframes Two wireframes are used in academics website design which are: 1. Main Website wireframe

30

Chapter Three


2. Created Personal Website wireframe

31

Chapter Three

3.3


Creating the main Interfaces The main interface of the main website is designed using PHP7,

HTML, CSS and Javascript. The main interface includes many pages and shows information about the required programs that must be installed by the visitors to download and upload the created personal website after completing the creation procedure. The interface of the main website will be explain below: 1- The top of the website: contain the name of UOITC and links to take the user to the main website of the UOITC and the institute of higher education.

2- The website header: consist of the UOITC image and the name of the website.

32

Chapter Three


3- The main bar: consist of home page link, create new personal website page link, update existing website page link, about us Page link and contact us page link.

4- Website body: the body differs according to the current page, below is the body of the home page.

5- Website Footer: it is the last part of the website, consists of the copyrights and the logo as link to UOITC main website and the designer’s name as a link to contact with.

33

Chapter Three


The interface of the created personal website will be explain below: 1- The navigation menu: to enable the visitor navigate among different sections of the personal wesite.

2- The website header: contains the name and The scientific title of the

academic

in

addition

to

the

site

cover

image.

3- The page’s contents: it contains the BIO of the academic in the main page and the academic’s picture and some contact information on the

page’s

right

side.

4- The footer: contains the copyrights and link to contact the designer.

34

Chapter Three

3.4


Creating the Database The database is very important to add the dynamic property to the

website. It’s important for registration and for retrieving the information during creating the personal website. The database built using ‘Mysqli’ that worked with PHP7. The database is called ‘Project’ it’s contain one table called ‘CV’. The database is shown in the following figure:

35

Chapter Three

3.5


Hosting the Website After building the website and testing its operation on local server, it

uploaded to ‘000web host’ company which provided free unlimited storage with URL ‘http://iraqiacademics.site88.net’ . Its connected with the database and became online web application and ready to use.

3.6

Creating Personal Website Procedure 3.6.1 Home Page The home page starts with welcome phrase and gives brief summary of how to use the website to create new personal website or to update the existing one.

36

Chapter Three


Also, the home page provide instruction of the required programs that must be installed by visitor’s in order to download and upload the personal website after completing the creation procedure. The first program is ‘Teleport pro’ that necessary download the personal website. There are two links belongs to this program; the first one take the visitor to an external website ‘Download.com’ in order to download the teleport program, and the other is an internal link to a page that provide instructions of how to use the Teleport program. This page of instructions can be shown below:

37

Chapter Three


38

Chapter Three


The second program is ‘FileZilla Clients’ that necessary upload the personal website after creating it. There are two links belongs to this program; the first one take the visitor to an external website ‘FileZilla.org’ in order to download it, and the other is internal link to a page that provide instructions of how to use the FileZilla program. This page can be shown below:

39

Chapter Three


40

Chapter Three


3.6.2 About us Page This page provide an information about the website builder and describes the goal of creating the website.

3.6.3 Contact us Page This page enable the visitor to contact the admin of the website by filling the given form as shown below:

41

Chapter Three


3.6.4 Creating New Personal Website After reading the instructions and installing the important programs. The visitor must go to ‘Create New Personal Website’ page. Then register in website’s database by filling the registration form. The information of this registration form based on the general CV provided by the Iraqi ministry of higher education. The user must fill all the required information precisely because it will be displayed in the personal website after creating it. The visitor can select the personal website styles by selecting the website’s background color and the text background color. The user must remember the username, password and the email in order to use it for the login purposes in the next step and when updating the personal website in the future. After completing the procedure of filling the registration form the ‘Next button’ must be pressed. The registration page can be shown in the next figure:

42

Chapter Three


43

Chapter Three


After pressing the ‘Next button’ message will appear to inform the user the registration process complete successfully. Then the user must to log into the website in order to continue. The ‘login’ page will appear as follows:

After login process completed successfully, new page will appear ask the user to upload the personal image. The image must be selected and then uploaded, then ‘next’ must be pressed as shown below:

44

Chapter Three


The next page ask the user to upload the website cover. The same procedure of selecting personal image must be followed. After completing this step successfully the personal website will be created with its URL. the user can see the personal website by pressing the link ‘Click here to Visit your Website’ as shown below:

45

Chapter Three


The home page of personal website that created according to the inserted information can be shown in the following figure:

Simply the visitor can navigate the website pages by selecting it from the navigation menu, the following is the education page:

46

Chapter Three


This is the CV page:

47

Chapter Three


The following is the experience page:

The projects page can be shown below:

48

Chapter Three


The next is the honor and awards page:

Finally, this is a contact us page that allow the visitors to contact the personal website owner.

49

Chapter Three


3.6.5 Updating the personal website When the user want to update the personal website. Simply, it can be done by going to ‘Update Existing Website’ and login by inserting the username, password and email.

After logged in immediately the will receive a unique number in order to insert it into the updating form. This is necessary to reach the record that contains the personal information of that user in the database and update it. The next steps exactly the same as the steps of creating new website that described in details in previous sections. The updating form can be shown in the next figure: 50

Chapter Three


51

Chapter Three

3.7


Choosing Domain name for the Personal Website After completing the process of creating the personal website. The

owner has two choices for the domain name: 1- the URL that appear with the home page can be used as the main URL of the personal website. For the last example it is ‘http://iraqiacademics.site88.net/personal/index.php?id=2’. 2- The user can create the wanted URL by downloading the website on the personal computer using teleport program that installed initially. Then, uploaded it to the required URL using FileZilla program after downloaded it.

3.8

Hosting the personal website The process of creating new domain name, downloading the

website and uploading it described in details for the visitor in the main website. This procedure will be illustrated in the following sections. 3.8.1 Sign up for Free Domain The main website gives the user an example for signing up for free hosting website. The user is free in selecting any other paid or free hosing site to create his URL but the creation procedure is the same. The instructions of signing up for free URL will be explained below: 1- The user must visit the website of the hosting company, for example ‘http://www.hostfree.pw’ then signing up as shown:

52

Chapter Three


The sign up form must be filled carefully. the username is the required URL, the password must be saved for future work, the email must be active to receive the activation link after completing the signing up procedure. Other information must be filled as shown:

53

Chapter Three


After pressing ‘Register’ button an activation message received in the input box. The user must click the activation link.

Then, new webpage will appear containing the new URL and the hosting information as shown below. The highlighted information must to be saved for later use in uploading procedure.

54

Chapter Three


3.8.2 Download the Personal Website After completing the procedure of creating the personal website. The owner must copy the URL of the personal website home page.

After that the user must open the Teleport program and select ‘New’ then ‘New Project Wizard’ as shown below:

55

Chapter Three


The first option must be selected then ‘next’:

The user must paste the copied URL then press ‘Next’:

56

Chapter Three


The everything selection must be chosen then ‘next’ and ‘Finish’:

57

Chapter Three


After clicking ‘Finish’ new window will appear ask the user to choose the name and directory of the folder that contains the personal website:

The website will be in the user’s personal computer and ready to upload

58

Chapter Three


3.8.2 Upload the Personal web site After creating the website and downloading it on the personal computer and preparing the URL, the next step is to upload it for hosting site. This process can be done using FileZilla program. The uploading procedure starts with opening the program and inserting the hosting information that saved previously during signing up. The registration process can be seen in the following steps:

After pressing connect the user must ensure the connection is success as shown in the highlight. Then double click on the folder ‘htdocs’ in order to upload the website files inside it.

59

Chapter Three


The user must delete the files that contained in ‘htdocs’ folder and brows the folders on the right side to select personal website. ‘ctrl+A’ to select all the files then right click and upload.

60

Chapter Three


After transferring all the files inside the ‘htdocs’ folder the website uploaded successfully and its ready to visit.

To visit the website the user must write his URL followed by ‘/the name of the file that starts with index word.htm’ as shown below:

61

Chapter Three

3.9


Administration Pages There are some hidden pages that can be accessed via the login page

which are the ‘Administration Pages’ that consist of many pages such as ‘registered table’, ‘search page’, ‘update page’, ‘delete page’ and ‘insert page’ that enables the admin to perform those processes to alter the information that saved in the database when necessary. The Administration pages are: 1- Registered Academics Page: which display a table that contains all the information about the registered users in the website database.

62

Chapter Three


2- The search page: It contains textbox that must to be filled with the name of the academic in order to be searched.

After inserting the user name the result will be as follows:

63

Chapter Three


3- The delete page: It contains textbox must be filled with the name of the academic to be deleted.

The page after deletion will appear as follows:

64

Chapter Three


4- The add page: It is used by the admin to add new academic to the site’s database. The addition procedure exactly the same as creating new academic website procedure.

65

Chapter Three


5- The update page: It is used by the admin to update existing academic information that saved in site’s database. The update procedure exactly the same as update existing academic website procedure.

6- the homepage: take the admin to the main website interface.

66

Chapter Four Conclusion and Future Work

Chapter Four

Conclusions and Suggestions for Future Work

Chapter Four Conclusions and Suggestions for Future Work

4.1

Conclusions

 In this work we develop a standard website for Iraqi academics.  The website based on adding the interactivity with the user in order to create his personal website. This interactivity is created using PHP7 scripting language, MySqli to build the database.  The academic website contain personal information in addition to his desired styles and images.  the user could select either using the same URL that created with his personal website or creating new one by following the instructions that provided by the main website before staring the creation process.  The user could update his personal website after creating it by logging in to the main website using the username, password and email that used in registration process.  The result of the project is a hosted personal website based on the general curriculum vitae provided by the Iraqi ministry of higher education with styles and images chosen by the website owner.

59

Chapter Four

Conclusions and Suggestions for Future Work

4.2 Suggestions for Future Work

 Develop an English version of the website.  Develop a new version for UOITC employees.  Provide more styles to the personal website such as the font type, font size and sound effects.  Provide collection of website frames to select from.  Add more flexibility to the created website.  Apply high security to the website to protect the academics sensitive information.  Create smartphone application for design and implementation academics personal website.

60

References 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14.

Hoar, R.C.R., Fundamentals of Web Development, ed. M. Goldstein. 2015: Microsoft Corporation. 979. Robbins, J.N., Learning Web Design. Fourth Edition ed. 2012, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472: O’Reilly Media. 603. Paul Deitel, H.D., Abbey Deitel, Internet and World Wide Web: How to Program. 5th ed. How To Program Series. Vol. 1. 2012: Prentice Hall. 923. Willard, W., Web Design Demystified. DeMYSTiFieD Series. 2011, United States: McGraw-Hill Companies. 285. McGovern, G., Website Development, in The Website Manager’s Handbook, S. Diffily, Editor. LLOYD, I., BUILD YOUR OWN WEBSITE THE RIGHT WAY USING HTML & CSS. 2nd ed. 2011: SitePoint Pty. Ltd. 514. Wempen, F., HTML5 Step by Step. 2011, 1005 Gravenstein Highway North Sebastopol, California 95472: O’Reilly Media, Inc. 384. Hege Refsnes, S.R., Kai Jim Refsnes and Jan Egil Refsnes, Learn HTML and CSS with w3schools. 2010, 111 River Street: Wiley Publishing, Inc. 230. Powell, T.A., HTML & CSS:The Complete Reference. Fifth Edition ed. 2010: The McGraw-Hill Companies. 832. Hege Refsnes, S.R., Kai Jim Refsnes and Jan Egil Refsnes, Learn JavaScript and AJAX with w3schools. 2010, Published simultaneously in Canada: Wiley Publishing, Inc. 252. Doyle, M., Beginning PHP 5.3. 2010: Wiley Publishing, Inc. 801. Muryanto, N.D., PHP Tutorial. 2009. 187. Luke Welling, L.T., PHP and MySQL Web Development. 3rd ed. 2005: Sams Publishing. 946. Hughes, G., The Web Hosting Starter Guide 2007: Greg Hughes 190.

Design and Implementation of Standard Personal

Design and Implementation of Standard Personal

Suggest Documents

The Design and Implementation of Combining the Standard of Data ...

Design and implementation of a standard framework ...

Embedded system design and implementation of standard auto ...

Design and Implementation of a Standard Library for WebCube ...

Design and Implementation of Advanced Encryption Standard Security ...

Design And Implementation Of Advanced Encryption Standard ... - IJRIT

Design And Implementation Of Advanced Encryption Standard ... - IJRIT

Design and Implementation of Personal Museum-based on O3D

Design and implementation of personal firewalls for handheld ... - UoW

DESIGN AND IMPLEMENTATION OF WINDOWED

design and implementation of performance

Design and Implementation of Standalone

DESIGN AND IMPLEMENTATION OF SMART

Analysis, Design, and Implementation

Database Design and Implementation

Database Design and Implementation

Design and Implementation

How personal and standardized coordination impact implementation ...

Design & implementation of

How personal and standardized coordination impact implementation ...

Design and Implementati esign and Implementation of

Design and Implementation of Monitoring and ... - CiteSeerX

DESIGN AND IMPLEMENTATION OF SENSING AND ESTIMATION ...

Implementation of standard sedation management in paediatric ...