Hajj Diary in Saudi Arabia

Subject: Tech & Engineering
Pages: 58
Words: 9076
Reading time:
36 min
Study level: College


Diary as a term may be defined as a record providing space for discrete entries, arranged by date; recording what has transpired over the course of a day or other period. Until the last several decades, all diaries were kept in handwritten or typed form. The word comes from the Latin root word for day, and suggests the daily or regular nature of entries. Diaries maintained by institutions have been a vital tool for many elements of complex human societies, including government records, business ledgers and military records.(Kosmix 2010)

A diary is a record of details of general or personal information, generally kept privately, for the writer, or more publicly, to be shared with family, friends or community. The term diary is also used to mean a specially printed book with blank pages in which such entries can be recorded. It may also refer to the electronic format equivalent, for example, blogs. In today’s world of busy and overlapping work schedules, diaries are also used to manage business appointments and meetings.

A diary recording memories and experiences may be used as an aide-memoire in writing an autobiography, or a biography. In some cases, diaries are helpful in confirming details of an historical event, such as the wartime diaries of ordinary people (Duffy 2000-2009) or of the famous, such as Florence Nightingale,(TheDiaryJunction.com 2011). Sometimes they shock the public, as the diary of Mother Teresa has done(Fitzmaurice 2002).

Some diaries seem to be written with a very calculating eye to the diarist’s image in posterity and their profit. This sort of diary was satirized by the character of young character Cecily in the second act of Oscar Wilde’s comedy of manners, The Importance of Being Earnest, Her diary is merely, as she puts it, the private thoughts of a young girl, and therefore intended for eventual publication(Wilde 1895). Some recently published diaries, e.g., Ned Rorem, have been so clearly kept for the purposes of impressing later on that they inspire parody(McClatchy 1999). Such diarists exploit the voyeuristic impulses of the public to sell books. Diaries also form the scaffolding of effective non-fiction periodical articles. Today, the term diary covers not only private but also very public records of thoughts and experiences.

There are many areas of modern life where diaries, recording far more mundane details, are used to great practical advantage, such as the following examples:

  • Business appointments and notes on meetings
  • Recording expenditures,
  • Recording weather events, or the progress of a farm or garden,
  • Recording daily activities of private life, including diet, exercise(Weightlosssoftware.com 2011), prayer, readings,
  • Recording the user’s internal explorations of self awareness,
  • Recording and analyzing one’s deepest feelings and concerns, (Ullrich and Lutgendorf 2007)
  • Recording personal observations and inspirations. (Wikipedia 2010)

Traditional diary

A traditional diary is a book divided into smaller blank sections allocated to days or weeks, often for a period of a year, but often also unlabelled, to allow the user to write as much or as little as desired on a particular occasion. Some diaries include inspirational quotes or images to make the process of writing more pleasant. However, effective journals are kept in all sorts of blank books, from the cheapest composition book to hand-made luxury items with gilt pages and Venetian end papers.

There are unavoidable difficulties with a paper diary. If the user misplaces it, or damages a page, there is no way to retrieve it. Literature and history is full of lost diaries, and the uproar they can cause(TheDiaryJunction.com 2011), If the user wishes to change any portion, no matter how small, the whole entry must be erased (usually difficult to do attractively), or re-written, or space on a different page appropriated for re-writing, which uses up the pages faster.

An example of a simple traditional bound book format diary.
Fig: (1) An example of a simple traditional bound book format diary.

Computer diary

A word processor program can be used to establish a diary and save entries as a text file. This technology offers several conveniences. A computer diary allows the user to search for a word quickly. It also allows swift and simple modification to fonts and colours to highlight and distinguish different subjects, or simply to give visual pleasure. Fig: (3)

However, one of its defects is that a computer-based diary is not available to the user at all times. This means that the user cannot capture thoughts and observations immediately as they occur. This forces the user to record events and feelings only when they are physically near their computer. Even a laptop cannot fully solve this problem, since few people carry a laptop everywhere with them. On the other hand, anything stored on a computer is exposed to risks peculiar to that medium. Computers can be compromised by software viruses, and personal information is sometimes obtained by hackers. These problems can lead to loss of data, or stop a software program from working.

Example of a Page from a Computer Diary.
Fig: (2) Example of a Page from a Computer Diary. (freewarelinker 2011).

Web Based Diary

Our research is focuses on a third alternative: the web based diary. Computer and web-based diaries are very similar to one another, but the difference is that a web-based diary is available through the World Wide Web. A web diary offers the same options as the computer diary to the user: register, delete, modify, add, search, and edit. However, material posted to the internet can be visible to all, and not just the person who wrote it. Consequently, the registration process should assign each user a unique user name and password. This limits access for viewing and modifying the diary exclusively to the registered user. This feature is critical to preserve user privacy and avoid unwanted intrusion or revelation of personal data.

Creating diaries on the World Wide Web is the most flexible and most efficient solution to securing data from damage or loss, because the database is archived in secure servers, protected by redundancy. This averts the disastrous loss of data that occurs when computers, whether new or old, hang up, crash, or experience viruses. In such cases, any diary information stored in a website remains safe. This represents an application of a modern technology which addresses problems that were difficult to solve in the past, and sometimes catastrophic.

Hajj Diary Concept

In this project, I will be applying the most modern of technologies to one of the most ancient human activities. The Hajj is one of the five pillars or central duties of Islam. It is a set of acts of pilgrimage and religious rituals that must be performed in and around the Saudi Arabian site of Makkah (Mecca), according to very specific conditions, at least once in every Muslim’s lifetime. The Hajj differs from some other religious pilgrimages in that it has many steps and tasks that must be accomplished within a limited time period every year. In very general terms, the ritual actions mirror and remind the faithful of important scriptural incidents.

The trip is costly and deliberately uncomfortable. Therefore, many Muslims cannot make the trip due to their age, inability to travel, sickness, or lack of funds. As a result, the Hajj is a precious and rare personal accomplishment, so much so that those who complete it are privileged to add a special honorific (al-Hajj) to their names. (ReligiousTolerance.com 2011)

For those who do undertake the journey, it is critical to write down a clear plan ahead of time. Pilgrims need to have the addresses of all the destinations of the Hajj, and reminders of the ritual tasks that must be enacted at each point in the pilgrimage. The logistics of food drink, shelter and sanitary facilities are complex and advance planning is vital. Since for most Muslims, this is a once in a lifetime experience, many pilgrims also wish to preserve the sensations and feelings they experience when making their Hajj.

Every year, the number of people arriving from around the world number at least two million (ReligiousTolerance.com 2011). These pilgrims are joined by students and the media who are interested in studying and recording this massive movement of people, which is among the largest on the globe.(Ahmed 2001)

The importance of Hajj

Hajj is a one a kind event, with millions of visitors from many different nations meeting in Makkah, Medina, and Arafat. The Hajj, according to the Q’ran (Koran), is to be observed as a time of unity and brotherhood among Muslims, and it generally is. The pilgrimage is the most dramatic of the five obligations of all Muslims1. (Islam101 2011)

Holy Mosque in Makah (Mecca).
Fig: (3) Holy Mosque in Makah (Mecca).

The benefits of Correct Completion of the Hajj

The benefits that the faithful believe are gained from the Hajj are manifold. The pilgrim demonstrates his obedience to God, removes an individual’s past sins, and guards against poverty. Additionally this gathering of Muslims for one common purpose has always been viewed as a positive opportunity for Muslims to share insights and scholarship. It has for centuries been a source of religious unity and brotherhood. (IslamicWell 2011)Thus, among the positive results of pilgrimage are increased understanding and closeness amongst friends, loved ones, and even former strangers. Furthermore, meeting the earthly and quotidian needs of the mass of pilgrims is a massive commercial enterprise. It constitutes one of the major non-oil revenue sources for the nation of Saudi Arabia, which is the custodian of the holy sites of Islam. (Mawdudi ; Zarabozo 2002) Saudi Arabia has recently begun investing in the infrastructure to make the pilgrimage more efficient and less uncomfortable so that more observant Muslims can achieve an acceptable Hajj(Carey and Haroutunian 2010).

The Hajj route in and around Mecca.
Fig: (4) The Hajj route in and around Mecca.

The benefits of a Hajj Diary

While the idea of a web-based diary is not novel, it represents the positive application of a new technology to an ancient and hallowed activity. As a literally life-changing expedition, the Hajj warrants recording the experience for later reflection. All the individuals who converge on Saudi Arabia could benefit from an online diary specially geared to their pilgrimage needs. Since many of them are travelling very light, having access to a web based, secure diary program would be a convenience. Such a facility could be used on a hotel computer, or even from a Smartphone.

During the Hajj, every pilgrim wears identically simple clothing, to demonstrate equality before their creator. However, many who travel on Hajj are quite wealthy, and women make the pilgrimage as well. The data security of a web-based diary would protect travellers from being targeted for kidnapping or robbery.

Because the Hajj requires a time-limited performance of specific actions in specific places at specific times, not just by the clock, but also by the phases of the moon and by light intensity, having a web based facility allows for users to be linked to such information sources as accurate clocks, maps, and moon visibility. Other potential links could include housing, food vendors, the location of comfort stations, public transportation, and locations of emergency resources such as hospitals, embassies and consulates. All of these links could be brought together in the website in a specialized way for pilgrims.

Finally, the secure preservation of the thoughts, reactions, and photographs of pilgrims allows them to be appreciated later in life.. It also opens the way for them to be shared voluntarily for mutual inspiration.

This is a practical and realistic project, with the potential to actually be realized. The diary was developed using off-the-shelf and readily available software tools. It was tested and passed the tests applied to it. It could be implemented at modest cost.


Many technologies now exist for the construction of websites. These technologies are programming languages that may be effectively implemented on the server side or on the client side. In the sections below, I will describe some of those technologies, and describe those that I have used in my project. (Please note that the term diary is used here both to refer to a set of records, and a specific entry for a day or part of a trip. This is because a user might wish to keep the record of their impressions of one place separate from their impressions of another part of their pilgrimage).

In 1958, US Government used a network of computers or the first time. In the spirit of fevered competition with Russia after launching Sputnik, the United States of America started to develop the Advanced Research Project Agency (ARPA) in order to achieve a technological advantage. Through this agency, the first network was built (ARPANET). Its primary purpose was military. In 1983, APRANET was divided into two networks; each one meant to function independently MILNET became a military network that was designated for unclassified information only.(Encyclopedia2 2011). This opened the way for APRANET to become a more common network, which was mainly used by universities for educational functions. In the mid 80’s, it became available to many educational institutions and companies.

The first private sector firms to utilize this technology were, perhaps not surprisingly, the Digital Equipment Corporation (DEC) and Hewlet-Packard (HP). In 1985, the National Science Foundation began funding the construction of five supercomputer centres. Princeton was the site of the John von Neumann Center, the University of California at San Diego housed one, Cornell University had its Cornell Theory Center, the National Center for Supercomputing was located in Champaign-Urbana at the University of Illinois, and Carnegie-Mellon boasted the Pittsburgh Supercomputing Center,

The NSFNET (National Science Foundation Network) linked these five supercomputers over their network without charge. This technology was used as a base network to allow different networks to communicate with each other. APRANET and NSFNET were combined in the late 1987 due to their similarities. (encyclopedia 2010; Wikipedia 2010)

World Wide Web

Sir Tim Berners-Lee from England and Robert Cailliau from Belgium are credited with creating the World Wide Web. At the inception of the World Wide Web, it was a system of interlinked hypertext documents accessible through the internet. Thus, by employing a web browser, a user is able to view whatever text is contained in web pages. The web browser also allows users to view images and other multimedia files attached to the web page. These features are navigated using hyperlinks. A user can access a web page in several ways. They can click on the hypertext link on that page or in any other resource. The user can type the URL (Universal Resource Locator) of the page into a browser. The server- name portion of the URL is determined by an IP (Internet Protocol) address by the universally spread internet database. The address naming system is known as the domain name system, or DNS. When invoked, the browser sends an HTTP (Hypertext Transfer Protocol) command to the web server at the designated IP address to request the resource. In most web pages, the HTML text is requested first. Then, additional requests are made for graphics and other type of files in a quick series. Then, the browser used to display the page as seen by the viewers, described by the HTML or XHTML code. Web pages can be classified in two types as shown in the next two sub-sections.(Wikipedia 2010)

Static Web pages

When a page displays the same content every time it is invoked by the browser, it is termed a static Web page. An example of a static web page would be a contact information page for a firm, listing phone numbers and addresses and hours of operation. It need not change often, and does not. Such static web pages can be created using HTML. The potential for storing information in a static web page is substantial, since they can store images, and even animated clips, as well as text in abundance. However, they do not draw information from a database.

When a browser uses a simple HTML file, the user connects to a remote server over a private or public network such as the internet and the file is returned by the server(Fichter 2005).

Dynamic Webpages – Web Based Applications

In the web based application the user’s request is executed by a web server which deals with a database which stores information. A Web based application belong to server side applications and /or server side programming which is used to create dynamic web content using a variety of server side languages. Information in dynamic WebPages is stored, retrieved or queried from a database. If the file is a server side script, then the HTML file is executed by the server and then the file is returned to the browser as basic HTML With server scripts you can dynamically edit or add content to a web page, access data by dealing with databases and customize a web page to suit the user’s preferences.(Mischook 2010)

Difference between static and dynamic pages.
Fig: (6) Difference between static and dynamic pages.

Client side

Any code that executed on the client side by the browser is called Client side programming. Client side programming can use to authenticate user inputs or create direction-finding facility on the website. In addition, it can be used to design dynamic images.

The browser accomplishes the Client-side processing. The browser is designed to be capable of interpreting the information that would ordinarily be transmitted to the server. Such a browser consists of two parts: the interface that the user perceives, and the processing software that we do not perceive; that is transparent to us as users. The part of the browser that we perceive (the interface) internally transmits commands and data to other portions of the larger browser software. (saskschools.ca 2010)

HTML Hypertext Mark-up Language

Web page designers use a programming language called Hypertext Mark-up Language (HTML). HTML is a series of tags that can be typed into a text file. After the text is saved as HTML, the browser is able to view the file as HTML. Browsers such as Internet Explorer can read HTML and translate the text into a form that is visible on a screen/ HTML code can be created using any text editor(Source 2010).

What distinguishes ordinary text, such as this, for example from HTML code? The tags noted above are the cue that signals to the browser that there is a special command coming up ahead. These special commands are set off from the rest of the text by distinctive triangle brackets <>. Any command or object within the tag markers is visible to the browser. The effect is that tables, images, and special text bounded by the tag markers will be visible to the user of the web page. The commands that invoke them, however, will not be visible to the user, when the web page is viewed through a browser (Source 2010)

The simplest sorts of tags can be used to apply formatting to a block of text. For example: The words inside the tags will be seen in boldface , and these will appear in normal font(Source 2010)

In the example above, the tags, indicating bolding, when placed on at the start and finish of a target block of text, will cause the demarcated text to appear in bold when viewed through normal web browser. (Saleh 2005) Another example of a tag is the inclusion of a link to another web page.

Dynamic Hypertext mark-up language (DHTML)

Because of HTML’s limitations, Dynamic Hypertext markup language (DHTML has been introduced. HTML does not allow the Web page designer to place text or images in a fixed and definite position. The commands included in DHTML permit the designer to add stable form to the Web page(SearchSOA 2011), (Kahuki.com 2010)

DHTML is composed of a client-side scripting language (JavaScript), HTML, which is the language for static mark-up, Cascading Style Sheets (the name of the presentation definition language), and the Document Object Model(Kahuki.com 2010). The DHTML is an assortment of pre-existing technologies that, used together, generate a web page that can include drop-down browsers, buttons, and other “dynamic” functionality. This mix of code has presented problems for debugging, and also presented challenges to use on multiple web platforms. Web browsers are moving in the direction of mutual compatibility, however, and this problem is diminishing(Kahuki.com 2010). For those limitations DHTML is not less used than in past years (Bates 2006).


JavaScript is a scripting language that is considered to be more discreet, transparent, and widely compatible for use as HTML. It is used to create dynamic and interactive Web pages that can be run totally on a Web browser. Despite the name, JavaScript is a not a Java language. Because of this, it is not necessary to compile it in order to use it in a web page. So, Java script is easier and more flexible to employ for simple tasks. Nevertheless, it is possible to create robust, practical, and comprehensive Web applications using JavaScript. It important to mention that JavaScript is not the same as the Java language(Reavis 1999). It can actually complement Java on the client side. By using both together, more complex applications are feasible than using JavaScript by itself. (Flanagan 2006)


A computer that hosts the webpage that the user wants to search or browse called a server. To program the server to enable the user to browse or request information of the server the user must use server side programming. Server side programming is the code that a designer employs to generate dynamic Web pages. A variety of programming languages now exist to create server side programs. A sampling of these will be examined in the following sub-section.(DotNetSpider 2010)

Server-side processing can be described as the web server making decisions based on information entered by the online computer user. Messages and data are transmitted via the Internet from the client machine, and the web server then runs the proper software(System 2010). The web server software retrieves the requested items. When the output is displayed in the web browser, this represents the data and output being sent back from the server to the client, (saskschools.ca 2010)

Java server page

JSP, a part of the J2EE platform, is a technology that is characterized by Sun Microsystems as a convenient way to generate dynamic content in pages, the output of which is generated by a Web application(Microsystems 2010). This technology, which Sun Microsystems describes as “closely coupled with Java servlet technology”, allows users to,” include Java code snippets and calls to external Java components within the HTML code, or other mark-up code such as XML” of the user’s Web page. Sun asserts that “JSP technology works nicely as a front-end for business logic and dynamic functionality encapsulated in JavaBeans and Enterprise JavaBeans (EJBs)”(Oracle 2002).(Oracle 2002)

JSP Translation and Runtime Flow
Fig: (6) JSP Translation and Runtime Flow (Oracle 2002).

Common Gateway Interface (CGI)

This is a program intended to receive and and return data that conforms with the CGI (Computer Graphics Interface, or the code that communicates with the display device) specifications. Several programming languages are available to create such code, among them, Perl, C, Visual Basic, and Java.

(webopedia 2010). As well as, CGI is a programming language used to generate dynamic web pages. Furthermore, it is a server side language and a powerful tool providing a means of creating dynamic content on the Web (Bhatt 2007).

Hypertext Pre-processor (PHP)

This is a server-side script language. PHP, when in use, converts to (X)HTML code. PHP’s applications are varied: it finds uses in processing data entered into a system from forms or in communicating with a database. (PHP 2011)

PHP can be used in creating dynamic web pages (Bhatt 2007). As an open source software product, it can be obtained as a free download from the internet. PHP 5 is the latest version, and offers enhances security, and quality, and supports XML (Extendible Markup Language) and object oriented programming. The language is used in over 16 million domains, globally, and its reputation is still spreading. PHP is designed to allow users to create dynamic web pages quickly and simply. Sending files via email, accessing and editing database records, processing data obtained from a database, and reading and writing cookies ( are all useful PHP functions (PHP.net 2011).

In general, PHP runs on a server. Input is entered via PHP code, and the output is a Web page. However, it can also be used as client side scripting for generating GUI forms. Thus, it can run on any platform because of efficient use of poor system resources. PHP offers speed and does not allow the system to slow down. PHP uses its own resource management system, and has a highly professional method for dealing with conduct variables. This ensures consistency. The syntax is really simple, which allows anyone with basic HTML knowledge to start using PHP on their web pages. PHP is, as a result, very popular with small-scale and amateur designers, who appreciate its simple and easy-to-learn syntax. PHP makes it straightforward for users with little or no familiarity with programming to get started in Web page design. (chiko 2009) (Bhatt 2007)

The Process of PHP Interaction with a Database using MySQL.
Fig: (7) The Process of PHP Interaction with a Database using MySQL.

Active Server Pages (ASP)

ASP stands for Active Server Pages, and is featured on the Microsoft server. In brief, this server-side scripting essentially means that an embedded script is executed by the server prior to sending the page reaches the user. When a webpage containing ASP is requested, the web-server will catch the code and send the result to the user, so the ASP code by no means reach the user’s browser. ASP has been marketed to be a counterpart of JavaScript, but is more effectively a competitor product.(Projects 2010).

Database Technologies

A database system is needed for the implementation of my system records. It functions as a server side application interacting with a database. As my chosen programming language for this project will be PHP, there are two database technologies that will coordinate with PHP MYSQL and PostgreSQL


MySQL defines as a Relational Database Management System (RDBMS). MySQL stands for “My Structured Query language” and SQL is the most popular language used to access data from a relational database system. It is used to store data in separate tables rather than the data being consolidated into a single one large table. This facilitates speed and flexibility of use.


PostgreSQL is an object-relational database server developed and improved by collaborating companies and software designers worldwide. As an open source project and product, it is available for free under a under flexible licensure of the sort innovated by Berkeley System Development (hence the term ‘BSD-style’)(OpenSource.org 2010). It is used as an alternative to other open-source database systems such as MySQL. It is considered an equivalent to systems such as Oracle, Sybase, IBM’s DB2 and Microsoft SQL Server. It shares its open-source DNA with famous web software projects such as Linux, and Wikipedia. (postgresql 1996-2011)



In this chapter, I will lay out the phases of development of my Hajj Diary concept: the analysis phases, system design and methodology.

Project requirements

The set of the activities that the new system should perform is the project’s requirements and the set of constraints that rule the performance of the new system. These requirements can be separated into the following:

Functional Requirements

The Functional requirements of the system are listed as follows:

  • Once the user has registered, the system should allow the users to login to the system.
  • Once the user is logged in to the Hajj Diary website, the system should display a complete list of all diaries linked to the user’s ID.
  • The system lets the user to add additional diaries to their new diary.
  • The system allows the user to delete details of diaries.
  • The system allows the user to edit diaries details.
  • The system allows the user to print, upload files and change the styles of their diaries details.
  • The system should allow the user to change their password.
  • Once the user has logged out, the system should display the Hajj Diary website home page.

Non-Functional Requirements

The following are the Functional requirements of the system:

  • Reliability – Robustness is mandatory, and system must minimize the possibility of input errors by examine all input and pointing out errors to the user.
  • User interface accessibility – The user interface should be simple and user friendly. It should be self-descriptive and consistent in theme and style. It should be appropriate for intended users. It should have an easy-to-use ‘steering’ system.
  • Speed – Every feature of the system must be used and accessed rapidly and powerfully. The system must access and interact with the database quickly.
  • Security – The users’ information must be saved and held securely
  • Multiple browser compatibility – The system must work on the extensively user’s browsers, Internet explorer and Firefox.
  • Data storage – The storage of data should preferably use a database management system such as MySQL (My Structured Query Language), PostgreSQL.

Hajj Diary website Requirements

The user mostly determines the requirements. What are the requirements of the system? What might the user want and need? What are the requirements of which the user may not be aware? Anticipating and capturing all those requirements is a critical initial step. Once the requirements are collected, the next step is to map them in the use cases. As many requirements as can be envisioned are gathered into a visual figure in the document and then requirements are manually given proper illustration. (Gorse, Aboulhamid et al. 2004)

A software example is normally intended to help develop and check the actual requirements of the system. A persistent problem for users, noted by this writer, (especially those end users with limited programming expertise), is to express their requirements accurately. It is the challenge of the designer to use imagination, sensitivity, and empathy to visualize requirements on behalf of the end user, translate them into Web page specifications, and define them in as much detail as possible.

System Design

System design consists of both Physical Design and Logical Design. Logical design describes and explains the structure of the system, and features such as what is to be output, what is to be input, files, and the database. The physical design of any system must realize the all the requirements of the project. These requirements could include, the logical design, as well as the actual software used by the developer, as well as the working system. (Laynetworks 2000-2010)

Use Case Diagram

Use cases are a tool for modelling system requirements(LayNetworks.com 2000-2010). It is used to define the function of the system and determine who external events engage with the system internal processing. A Unified Modelling Language (UML) Use Case diagram consists of:

Case Use diagram.
Fig. 8: Case Use diagram.

The Use Case diagram gives the designer a chance to take the perspective of the user, and visualize how he or she looks at the application tool the designer will be building.

The diagram (Figure 9) shows the viewpoint of the user and administrator of the website.

The user browses the website.
Figure 9 The user browses the website.

From the Use Case model that shown in Figure 1 we can list and describe the following operations that the Hajj Diary should provide for its users. These are listed below:


The registration process is the first task of the Hajj Diary website that deals with personal information.

The Login screen is the first screen that appears wherein the registration option is also available for new users. After using the register button the registration screen displays a number of fields for the user to complete are required to be filled.

  • User Name
  • Password
  • Confirm Password
  • First Name
  • last name
  • Email
  • Date of birth
  • Gender
  • City
  • Country

The system can identify the user via the database by using Username and password. The system requires that the user identify themselves with their password for their security and safety. Many times when the user tries to complete a Web page registration, the user types quickly and the password field cannot generally be seen as it is concealed on the screen. In that case, if the user makes an error, they may not be able to figure out what was wrong with their entry. The system may be so exacting that it is difficult to even type in a misspelled password. There is a function that can be included in the password fields that keeps the colour red. It only changes to green when the contents of the two fields match up exactly. In the case of an incorrect entry, even if the user presses the screen button/link labelled “Register” a message appears saying “A Value does not match.” If a field is left empty then a message appears saying, “A Value is required”, and indicating which specific field still needs to be filled.


Once the registration is completed, the user can login and start using the Hajj Diary on the web. This is accomplished from the first screen by typing the username and password in the corresponding fields and pressing “Login”.

Add a Diary

The main screen of the Diary web appears after the user login. The calendar appears on the top of the screen with navigation buttons to change month or year. To change the desired month and year the user has two options to follow. Firstly, the user can use two navigation buttons “Forward” and “Back”, which change the calendar, month by month. The second alternative is to use the two drop-down menus. In the first, the years are selected and in the second, months am selected. By pressing Select, the user can make the calendar revert to the default setting.

To add a diary the user clicks on the selected date or any date. In that window the title for the diary or journal is requested along with space for a description.. Then by using the “save” button the diary is sent and stored in the database. It appears at the ‘view diary’ page to confirm the transmission.

View a Diary and Edit Diary

All registered diaries, listed by title, and date, are displayed when the user clicks on Diaries. If the user needs to change a diary that is already listed, then the user presses “Edit” on the right of the screen. After changing the diary the user clicks on the “Save” button to save the data.

Delete a Diary

To delete diary that has already been set up, the process is similar to editing one. The user clicks on the button labelled “Delete”, which is at the ‘view’ table. After that, a confirmatory message appears to let the user know that the deletion was completed.

Change password

After the user registers, or any time they log in, he/she can change their password. First, the user enters their old password, then enters a new one, and confirms it by re-entering it.


After using previous facilities such as adding, editing, viewing, deleting a diary and changing their password , the user logouts of the system by using the logout option on the top of the screen. This function returns the user to the Hajj Diary login screen.

These above-described actions are the main functions of the website Hajj Diary. As designed, it is simple, sufficient for the use to which it will be put, and accessible to any computer level user.

Sequence Diagram

A sequence diagram is a model of a dynamic system. It displays the objects that are participants in a Use Case, and shows the messages passing between them.(Dennis, Wixom et al. 2005). The sequence diagram represents the time-based dynamics of the interactions transpiring in a functioning system. I am not listing the entire sequence diagrams in this document. I will cover the most important ones. There are many CASE tools available to help the developer generate sequence diagram. The tool I am using is Visio 2010.

Sequence Diagram of Add New Diary

The sequences diagram in Fig. 9 shows the sequence of actions taken to add a diary. The user first types in username, password and if the user is a member the screen displays the diaries page. The user selects the Add Tasks button and is allowed to view the Add Task screen, here he/she enters details of the new diary and presses Save. If the user correctly validates the task details, then the diary is entered. Otherwise, an Error message is displayed.

The user adds a new diary.
Fig: (10) The user adds a new diary.

Sequence Diagram of View diary

The sequences diagram in Fig11 shows the sequence of action taken to view a diary. The user first types in username, password and if the user is a member it is allowed to view the diaries page.

The user views all diaries.
Fig. (11): The user views all diaries.

Sequence Diagram of Edit diary

The sequence diagram in Fig12 shows the sequence of actions taken to edit a diary. The user first types in username, password and if the user is a member it is allowed to view the diary screen. The user can press Edit button and the system displays the diary page they want. The user then allowed to enter in the modified details and press the save button. If the details entered are correctly validated then details enter into database otherwise, an error message is shown.

The user edits a diary.

Fig: (12) The user edits a diary.

Sequence Diagram of delete diary

The sequence diagram in Fig13 shows the sequence of actions taken to delete a diary. The user first types in username, password and if the user is a member it is allowed to view the diary screen. The user press delete button. Then the system show confirmation message delete the diary or not ,if the user press cancel the diary still in diary in view list.But if the user press OK the diary is then successfully removed from the diary list and database.

The user deletes a diary.
Fig: (13) The user deletes a diary.

Sequence Diagram of change password

The sequence diagram in Fig14 shows the sequence of actions taken to change their password. The user first types in their username and password. If the user is validated as a registered member, they are allowed to view the change password screen. The user enters their previous password, and then enters their new choice for a password. The user is prompted to confirm their new password. Then the user clicks on Submit to save it in the database or Cancel to remain with their old password.

The user changes a password.
Fig: (14) The user changes a password.


According to Ullman (2003), methodology includes the methods, procedures and techniques used to collect and analyze information. In a broader sense, it can be defined as the way in which information is collected and processed. Many types of methodologies are available to as options; however, I will be using the waterfall model methodology.

Waterfall Model

The choice of the waterfall model has been made to exploit its well-structured design. The waterfall model of the software developmental life cycle consists of five fundamental stages. Every step is well documented, which makes it easy to understand. Moreover, flexibility at every level in this model has made it the preferred choice for end-users by allowing them to complete the design requirements within a limited time frame. Although it has seen its popularity decline as knowledge workers rather than clerks have taken over more and more of the use of computers, it is nonetheless still convenient and practical(Kay 2002). The following figure illustrates the developmental life cycle more clearly:

Waterfall Model of Software Life Cycle Development.
Fig (15): Waterfall Model of Software Life Cycle Development.


In this chapter, we show the steps required to implement the system; diagrams showing the different steps of the design along with database relations and entities will be covered in this part. Additionally, we will introduce the user interface design aspects of the Hajj Diary. In this section, the author will provide information relating to the techniques used in the development of the proposed user interface.

This third phase of development is the most important. After careful planning and analysis of the users’ requirements, the design phase is implemented. This phase exhibits how the system will be programmed to cater for the needs of the users. According to Dennis and Wixom (2003), the “design phase of the software design life cycle (SDLC) uses the requirements that were gathered during analysis to create a blueprint for the future system. A successful design builds on what was learned of what needs to be done”.

User Profile

The formation of a user profile is essential in the designing of the website, as it will define who will use it. In this regard, the following aspects would be considered:

User of Diary

Two category of users have been identified in Chapter 3 i.e. Direct users (pilgrims) and Indirect users (writers, journalists and visitors)

User Tasks

Tasks performed by both category of users would be to Register with the system, Log in to the system, add a new diary, write journals, delete, edit and view diaries.


Users can access the website from anywhere in the world at any time. No requirements for a specific environment are needed. Some users might not even be carrying a computer, and might be accessing the Hajj Diary from a hotel business centre.

Database Design

The data for the Hajj Diary would be archived in the database. A top-down method would be used in the designing of database that includes following steps:

  • Hajj Diary Entity Identification: Following two entities could be identified:
  • Admin (users)
  • Diary
  • Hajj Diary Entity Relationships: Relationship of above stated two entities i.e. posting of diaries by Admin is shown in the following figure:
Admin – Diary Relationship.
Fig, (16): Admin – Diary Relationship.
No Attribute Type
3 admin_password VARCHAR
4 admin_email VARCHAR
5 admin_fname VARCHAR
6 admin_lname VARCHAR
7 admin_dob INT
8 admin_gender VARCHAR
9 admin_city VARCHAR
10 admin_country VARCHAR

Table 4.3: Hajj Diary Entity Attributes Identification.

Identifying attributes of all entities that are defined in the following tables:

No Attribute Type
2 diary_date INT
3 diary_title VARCHAR
4 diary_desc TEXT
5 diary_user_id INT

Table 4.4: Identifying attributes of entities.

User Interface

The user interface is a critical step in the designing of a system. The technique used in designing the user interface in this case is exploratory development which according to Sommerville is the most effective approach for designing such user interfaces (2001). Careful designing of user interface is essential since it serves the two most important features of any website i.e. user interaction and information presentation. Shneiderman identifies five primary styles of user interaction: menu selection, command language, natural language, direct manipulation and form fill-in (1998).

Other key features critical for designing a system include user-friendly environment and easy data input steps and procedures to male users comfortable. Moreover, interactive and colored interfaces attract users more as compared to dull designs. However, while using colours, it should be kept in mind that no meanings should be associated with colours, nor should they be used too extensively (Sommerville, 2001).

User Interface Structure Diagram

The structure diagram of the user interface further clarifies the steps as it shows which page is navigated forward and back. As Dennis and Wixom iterated, it shows how all the screens are related and how user can move from one another (2000). The diagram in this case is as follows:

The User Interface Diagram.
Fig. (17): Table. 4.6 The User Interface Diagram.

Website Diary GUI Design

A user interface designed graphically adds more colours to its presentation. A Graphical User Interface (GUI) is being used in designing the website diary too, which makes it more interactive. A pictorial view of the GUI is as follows:

The Graphical User Interface (GUI).
Fig. (18): The Graphical User Interface (GUI).


Many critical aspects of analysis and design activities have been taken into consideration before starting the implementation phase. Therefore, user profile and database tables were analyzed and designed. These aspects assisted the author to implement the system. This chapter is concerned with developing the system and different implementation issues.

In designing the Hajj Diary, PHP 5 has been used for server side scripting whereas MySQL has been used for maintaining the database, and JavaScript for improving website interface.

Implementation Of Website Using HTML And PHP

In this section, screenshots of the project website will be used to show how the project has been designed.

Implementation Of Website Using HTML And PHP

Implementation Of Website Using HTML And PHP

Implementation Of Website Using HTML And PHP

System Testing

In this chapter, I will indicate the tests that were made upon the Hajj Diary and the results that occurred.

Testing is another very important phase of development as it authenticates the steps and codes used in the project. As Yerrem (2010) has reiterated the commonly held description, ““Functionality testing is the process of verifying whether a product meets its design and functional specifications. In the process, functionality testing can identify potential product bugs, and once those bugs are eliminated, functionality testing can verify that the fixes were successful and within the applicable standards” (AllInterview.com 2011)0. Tests applied to the website Hajj Diary are illustrated under the following headings.

Testing the Functional Requirements

Testing of functional requirements is shown in the following table:

Tst # Function Description Expected results Result
1 Register User User enters personal
User is assigned
username and
2 User login Correct username and
password required
Thank you page
is loaded from the system
3 Add diary User should be able to
Add new diary.
The system appears the diary description with tools for edit and a date. pass
4 View diary User should be able to
view all diaries
View diaries page is
Loaded from the system
5 Edit diary User should be able to
modify any diaries
Diary is modified pass
6 Delete diary User should be able to
delete any diaries
Diary is deleted pass
7 Print, upload files and change style the diaries User should be able to upload ,change style and print any diaries Files uploaded in diary
Diary style is changed
Diary is printed
8 Change password User should be able to change password Password is changed pass
9 User logout User should be able to logout from the system User logs out and the system goes back to home page pass

Table 6.3: Testing the functional requirements of the website.

Testing the User Registration Page

Tst # Function Description Expected results Result
1 Enter User Name If username is not entered Validation Message:
A Value is required
2 Enter Password If password is not entered Validation Message:
A Value is required
3 Enter Confirm Password If Confirm password is not entered Validation Message:
A Value is required
4 Enter wrong Confirm Password If Confirm password is not entered correctly Validation Message:
A Value doesn’t match.
5 Enter First Name If first name is not entered Validation Message:
A Value is required
6 Enter Last Name If first lastname is not entered Validation Message:
A Value is required
7 Enter Email If email is not entered Validation Message:
A Value is required
8 Enter Invalid Email
If wrong format for email
has been entered
Validation Message:
Invalid format.
9 Enter Date of birth If date of birth is entered as the same date for today Validation Message:
Please select correct date of birth.
10 Choose Gender If gender not choose The system chosen directly on Male pass
11 Enter City If city is not entered Validation Message:
A Value is required
12 Enter Country If country is not entered Validation Message:
A Value is required
13 Re-register Operation If User re-enters all data
fields again by using the same user name but different data
Validation Message:
Error! Username already exists.
14 Correct details If correct details entered
And press Register! Button
Thank you page appear
After register.

Table 6.4: Testing the Registration page of the website.

Testing the Login Page

Tst # Function Description Expected results Result
1 Enter User Name If username is not entered Validation Message:
Please provide User Name!
2 Enter Password If password is not entered Validation Message:
Please provide Password!
3 Enter User Name If username is not correct Validation Message:
Incorrect User Name or Password
4 Enter Password If password is not correct Validation Message:
Incorrect User Name or Password
5 Not correct details If not correct details entered
And press Reset button
The data is deleted from the fields pass
6 Correct details If correct details entered
And press Login button
Thank you page appears
After login.

Table 6.5: Testing the Login page.

Testing the Add New Diary Page

Tst # Function Description Expected results Result
1 Enter Diary Date If no entered any date The system already has shown today date pass
2 Enter Diary Title If no entered title Validation Message:
Please provide Diary Title!
3 Enter Diary Description If Write in Diary Description The system shows that. Pass
4 Uploaded files If uploaded files The system uploads files pass
5 Chang style If style is changed: such as (font, format, and size etc.) The font is changed pass
6 Print diary If press print icon The diary is printed Pass
7 Press Rest If press Rest icon The whole text is deleted in diary description pass
8 Press Save If press Save icon The diary is saved in data base pass

Table 6.6: Testing the New Diary page.

Testing the View Task Page

Tst # Function Description Expected results Result
1 Diary Title Diary Title should be
displayed in first Colum of table
Diary Title is displayed pass
2 Diary Date Diary date is displayed
in second Colum of view diaries table
Diary date is displayed pass
3 Edit If press edit after diary save The system goes back to diary description pass
4 Delete User should be able to delete diary from four column of view diaries table. Validation Message:
Are you sure, you want delete this record?

Table 6.7: Testing the View Task page.

Testing the Change Password Page

Tst # Function Description Expected results Result
1 Enter User Name If change user name The system is not able to be changed pass
2 Enter Previous Password If no enter Previous password Validation Message:
Please provide Previous Password
3 Enter Previous Password If enter incorrect Previous password Validation Message:
Incorrect Previous Password!
3 Enter New Password If no enter new password Validation Message:
Please provide New Password!
4 Enter Confirm Password If no enter confirm password or not much with new password Validation Message:
New Password and Confirm Password must be the same!

Table 6.8: Testing the Change Password page.

Testing the Logout Page

Tst # Function Description Expected results Result
1 Enter logout User should be able to logout The system goes back to home page. pass

Table 6.9: Testing the Logout page.

Testing the Buttons and Links in the System

Tst # Function Description Result
1 Entering the website address When the user enters the URL
They should enter the system home page
2 Register button Once the user enters the correct information, the system saves it. Pass
3 Button to Diaries page Once the user clicks the button to the Diaries page they will enter the View all Diaries page Pass
4 Upload button Once the user clicks the upload button it will upload the file page. Pass
5 Change style buttons Once the user clicks the any buttons to change style ,it will change it Pass
6 Print button Once the user clicks the print button it will print the page. Pass
7 Link to Add
New Diary page
Once the user clicks the Add New Diary button the system will Go to Add Diary page Pass
8 Edit button Once the user clicks the Edit button they will enter the Modify Diary page. Pass
9 Delete button Once the user clicks the Delete button it will remove the diary from the diary list Pass
10 Button change password Once the user clicks the button to change password they will enter the Change Password page. Pass
11 Logout link Once the user clicks the Logout link it will log them out of the system and take them to the Login page. Pass

Table 6.10: Testing buttons and links in the system.


The Hajj is a momentous event in the life of many Muslims. There are software tools that can help create a useful web based Hajj diary to memorialize this experience and make it more convenient for more people. This project researched available technologies and determined that such a design is feasible using readily available software. A web based Hajj diary was envisioned, designed, implemented, and, finally, successfully tested.


Successful testing phase has validated the codes and procedures used during development of the project. The website has been built while taking into account all key software development steps: planning, analysis, implementation and finally testing. The project has successfully passed all the stages and is ready to be launched. As I have pursued this project, my skills in programming and website design have greatly improved along with the most essential skill: project management.


Limitations such as lack of knowledge and understanding of programming languages and time constraints were definite barriers that I faced during the development of this project. However, this project has helped me to learn those and I have tried to implement my skills on other concurrent projects too.

Future Work

For future course of action, first of all I intend to further polish my skills in programming as it is necessary to have a good hold on them for any improvement. Taking a course specifically focusing on this topic would also be beneficial. After doing so, I would review all the website programming again to make it more even functional and user friendly.

I hope to contact possible sponsors to make this project a reality. I believe that this idea has the potential to become a going concern, perhaps even as a free service for pilgrims, if one or more business or government entities is interested in subsidizing the modest web-hosting fees involved.


Ahmed, D. M. (2001). “Glossary of Hajj related terms.” Web.

AllInterview.com (2011) “Functionaliity Testing ” Alll Interview.

Bates, C. (2006). Web programming: building Internet applications, Wiley.

Bhatt, M. (2007) “Definitions of PHP.” mayurikabhatt.blogspot.com.

Carey, G. and M. Haroutunian (2010) “Hajj Spells Contracts for Companies as Pilgrims Flock to Saudi Holy Cities.” Bloomberg.

chiko, M. (2009). Design dynamic web sites using php and mysql.

Chin, J. P., V. A. Diehl, et al. (1988). “Development of an instrument measuring user satisfaction of the human-computer interface.” CHI ’88 Proceedings of the SIGCHI conference on Human factors in computing systems

de Farias, C. and C. Ricardo (2002). Architectural design of groupware systems: a component-based approach, Citeseer.

Dennis, A., B. Wixom, et al. (2005). Systems analysis and design with UML version 2.0: an object-oriented approach, John Wiley & Sons.

DotNetSpider (2010). AspNet Tutorial.

Duffy, M. (2000-2009). “Memoirs and Diaries.” First World War, Web.

Encyclopedia2 (2011) “MILNET.” Encyclopedia 2.

encyclopedia. (2010). “NSFNET.” Web.

Fichter, D. (2005). “Is It Time To Convert? Migrating Static Pages to Database-Driven Web Sites.” Online 29 (no1 ): 51-53.

Fitzmaurice, E. (2002) “UNHOLY ROW; ‘Living Saint’ Mother Teresa’s diary entries reveal she doubted the existence of God.” High Beam.

Flanagan, D. (2006). JavaScript: the definitive guide, O’Reilly.

freewarelinker (2011). easy diary.

Gorse, N., E. Aboulhamid, et al. (2004). “Consistency validation of high-level requirements.”


Islam101 (2011). Five Pillars of Islam. Islam 101.

IslamicWell (2011). Hajj: Its Virtues and Benefits. Islamic Well.

Kahuki.com (2010). How Can I Create HTML and DHTML Files?

Kay, R. (2002) “Quick Study: System Development Life Cycle.” Computer World.

Kosmix. (2010). “Diary.” Web.

Laynetworks. (2000-2010). “Computer Fundamentals.” System Design. Web.

LayNetworks.com (2000-2010) “System Design.” Lay Networks.

Mawdudi, S. A. A. Let Us Be Muslims, The Islamic Foundation

McClatchy, J. D. (1999) “The Art of the Diary.” The Paris Review.

Microsystems, S. (2010). Java Server Pages Technology.

Mischook, S. (2010) “Database driven websites: What are they and how they are built?”.

Noabeb, J. L. (2011) “User Personalization.”

OpenSource.org (2010) “BSD Licenses.” Open Source.

Oracle (2002). JSP Primer.

Oracle. (2002). “jsp primer.” Web.

PHP. (2011). “What is PHP?” Web.

PHP.net. (2011). “PHP Usage.” Web.

postgresql. (1996-2011). “Advantages.” Web.

Projects, S. (2010). “What is ASP?.” Web.

Reavis, J. (1999). Javascript is Not Java. Network World on Security.

ReligiousTolerance.com (2011). The Hajj: Pilgrimage to Mecca. ReligiousTolerance.org.

Root, R. W. D., Steve (1983). Questionnaires as a Software Evaluation Tool, University of California at La Jolla.

Saleh, A. (2005). The Quick Reference in HTML.

saskschools.ca. (2010). “Lesson 3: Client-Side Processing and Server-Side Processing.” Web.

SearchSOA (2011) “Dynamic HTML.” SearchSOA.

SmartDraw (2011) “Umi Use Case Diagram.”

Source, Y. H. (2010). What is HTML?

System, S. S. (2010) ” Lesson 3: Client-Side Processing and Server-Side Processing.” SASKSCHOOLS.CA.

TheDiaryJunction.com. (2011). “Florence’s Lost Diaries.” Web.

Ullrich, P. M. and S. K. Lutgendorf (2007). “Journaling about stressful events: Effects of cognitive processing and emotional expression.” Annals of Behavioral Science Volume 24(3): 244-250.

webopedia. (2010). “CGI.” Web.

Weightlosssoftware.com (2011) “Food Diary.” Weight Loss Software.

Wikipedia. (2010). “Diary.” Web.

Wikipedia. (2010). “National Science Foundation Network.” Web.

Wikipedia. (2010). “World Wide Web.” Web.

Wilde, O. (1895). The Importance of Being Earnest. London.

Zarabozo, J. (2002). Purification of the soul: concept, process and means, Al-Basheer Publications & Translations.

Your HTML Source. What is HTML? 2010. Web.

AIS: Pennsylvania State University. “Net-Pass & the Net-Pass Activity Table.” 2011. AIS. The Pennsylvania State University. Web.

Alll Interview. “Functionaliity Testing.” 2011. Alll Interview. Web.

Bhatt, Marurika. “Definitions of PHP.” 2007. Web.

Carey, Glen and Mourad Haroutunian. “Hajj Spells Contracts for Companies as Pilgrims Flock to Saudi Holy Cities.” 2010. Bloomberg. Web.

Dotnetspider. AspNet Tutorial. 2010. Web.

Encyclopedia 2. “MILNET.” 2011. Encyclopedia 2. Web.

Fichter, Darlene. “Is It Time To Convert? Migrating Static Pages to Database-Driven Web Sites.” Online 29.no1 (2005): 51-3.

FirstWorldWar.com. Memoirs and Diaries. 2010. Web.

Fitzmaurice, Eddit. “UNHOLY ROW; ‘Living Saint’ Mother Teresa’s diary entries reveal she doubted the existence of God.” 8 December 2002. High Beam. Sunday MirrorDecember 8, 2002. Web.

Islam 101. Five Pillars of Islam. 2011. Web.

Islamic Well. Hajj: Its Virtues and Benefits. 2011. Web.

Kahuki.com. How Can I Create HTML and DHTML Files? 2010. Web.

Kay, Russell. “Quick Study: System Development Life Cycle.” 2002. Computer World. Web.

Laynetworks. “System Design.” 2000-2010. Lay Networks. Web.

Mcafee. “Threat Glossary.” 2011. Mcafee. Web.

McClatchy, J. D. “The Art of the Diary.” 1999. The Paris Review. Web.

Open Source. “BSD Licenses.” 2010. Open Source. Web.

Oracle. JSP Primer. 2002. Web.

O’Reilly.com. Javascript: The Definitive Guide: user reviews. 2011. Web.

Reavis, James. Javascript is Not Java. 1999. Web.

ReligiousTolerance.org. The Hajj: Pilgrimage to Mecca. 2011. Web.

Saskschools.CA. “ Lesson 3: Client-Side Processing and Server-Side Processing.” 2010. SASKSCHOOLS.CA.

SearchSOA. “Dynamic HTML.” 2011. SearchSOA. Web.

Smart Draw, LLC. “Umi Use Case Diagram.” 2011. Web.

Softerra. “Database Design, Programming & Management.” 2010. Softerra. Web.

Sun Microsystems. Java Server Pages Technology. 2010. Web.

The Diary Junction. Florence’s Lost Diaries. 2011. Web.

Ullrich, Philip M. and Susan K. Lutgendorf. “Journaling about stressful events: Effects of cognitive processing and emotional expression.” Annals of Behavioral Science Volume 24.3 (2007): 244-250.

W3Schools. AJAX Tutorial. 2010. Web.

Weight Loss Software. “Food Diary.” 2011. Weight Loss Software. Web.

Wilde, Oscar. The Importance of Being Earnest. London, 1895.


1 The ‘Five Pillars‘ of Islam form the basis for Muslim life:

  • Faith in God and the prophethood of Muhammad;
  • Daily prayers;
  • Almsgiving to the needy;
  • Fasting; and
  • The pilgrimage to Makkah Islam101 (2011). Five Pillars of Islam. Islam 101.