CHAPTER III REVIEW REFERENCES

3.1 Flowchart Flowchart1 is a chart illustrating the sequence of instructions to process with computers and the relationship between a process with other processes, by using certain symbols. Program flow diagram is a useful tool for programmers to prepare complex programs. Flow chart consists of symbols that represent the functions step program and a flow line shows the sequence of symbols that will be done. There are two kinds of flowchart are: 1. System Slowchart A chart with certain symbols that describe the sequence of procedures and processes of a file within a file in the media to other media, in a data processing system. 2. The Program Flowchart A chart with certain symbols that describe in detail the process sequence and the relationship between a process with other processes within a program. For a data processing with a computer, can be summarized the basic sequence for solving a problem, namely: 1. START : contains instructions for the preparation of the necessary

equipment before handling the problem-solving. 2. READ

1

: contains instructions for reading data from an input device.

Widia S, Th, Teknik Dasar Membuat Program Flowchart, Modern Computer Course, 1981, page 3-5

3. PROCESS

contains

activities

related

to

solving

problems

in

accordance with the data read. 4. WRITE : contains instructions for recording the results of the

activities to the output equipment. 5. END : end processing activities.

3.1.1 Flowchart2 Symbols Here is a set of flow chart symbols and their functions and benefits that are used in the manufacture of flowchart steps, namely: Tabel 3.1 Flowchart Symbols Symbols information Terminator / Interrupt (start / stop): This symbol is used to indicate the beginning of the end of the activity or activities or cessation of a program. Input or output: To represent the input data and write

ouputnya.

Preparation or initial pricing.

Yulikuspartono, Pengantar Logika & Algoritma, ANDI, 2004, page 34-43

Display (screen or monitor)

Prose (Processing): A symbol that represents the processed data.

Decission (decision): Shows a comparison to be made, if the result is 'Yes' then the flow will go to a place, if not will go to another place. Connector one page (link): When a flowchart is very long and

disconnected in the middle before it finishes, if spliced in the same page again, then use this symbol. Connector diff page (link): When a flowchart is very long and

disconnected in the middle before completion, and spliced on the other pages using this symbol. Process (procedure): processing data that has been defined.

Flowlines : Of the flowchart symbols associated with these lines. This line that shows the next direction to be addressed.

Print the results to the layer.

3.1.2 Basic Structure Diagram 1. The Structure of The Sequence (Sequential Structure) A sequence consists of one more instruction. Each instruction is done is done sequentially in the order in writing, that an instruction is executed after the previous instruction is completed. Instruction sequence determines the final state of the algorithm. When the order is changed, then the end result may also change. Example :

Figure 3.1 Example of sequence structure

2. Looping Structure (Loop Structure) Also called playback. Occurs when the switch currents flow charts to back up so that some repetitive groove back several times. Can also be referred to as the implementation of a series of statements repeatedly as long as certain conditions are still valid or eligible. Repetition structures are generally divided into two parts: Condition of repetition is a Boolean expression that must be met in order to carry out the repetition. These conditions are stated explicitly by the programmer or managed by a computer (implicit). Agency repetition of the algorithm is repeated.

Example :

Figure 3.2 Example of Looping Structure

3. Branching Structure Plot diagram that there are / lots happening over the control of branching and occurs when we are faced with a condition with a choice of True or False. Example :

Figure 3.3 Example of Structure brancing

3.1.3 Symbol A typical flowchart from older textbooks of basic computer science may have the type of the following symbols: 1. Start and End Symbols Depicted as circles, ovals or rounded rectangles, usually containing the word "Start" or "End", or another phrase signaling the beginning or end of a process, such as "submit question" or "receive product".

2. Arrows Displays the "flow control". Arrows coming from one symbol and ending at another symbol is a control that qualify for the arrow symbol points to. 3. Generic Processing Step Described as a rectangle. Example: "Add 1 to X"; "replace the identified"; "save changes" or similar.. 4. Subroutine Described as a rectangle with a double-hit the vertical edges; is used to demonstrate the complex processing steps that may be detailed in a separate flowchart. Example: PROCESS-FILE. A subroutine entry may have several different points or outflow, if so, is displayed as the label 'wells' in the rectangle, and the arrow is connected to this control 'wells'. 5. Input / Output Represented as a parallelogram. Examples: Get X from the user; X display. 6. Prepare Conditional Represented as a hexagon. Indicates that the operation has no effect other than to prepare for the next step conditional or decision. 7. Conditional or Decision Represented as a diamond (rhombus) shows where a decision is required, usually a Yes / No question or True / False test. Conditional

symbols peculiar in that it has two arrows coming out of it, usually from the bottom point and right point, one corresponding to Yes or True, and one corresponding to No or False. (Arrows always have to be labeled.) More than two arrows can be used, but this is usually a clear indicator that complex decisions are being made, in this case may need to be broken down further, or replaced with a "pre-process the symbol" is defined. 8. Junction Symbol Generally represented by a black blob, showing some control flow together in a single outflow. A symbol of the intersection will have more than one arrow coming into it, but only one will come out. In the simplest case, one might just have an arrow for arrow path than others. This is useful for representing repetitive process (what in Computer Science is called a loop). Loop may, for example, consists of the connector where control first enters, processing steps, a conditional with one arrow out of the loop, and one will go back into the connector. For additional clarity, where two lines cross in the picture accidentally, one of which can be drawn with a small semicircle above the others, shows that there is no connection intended. 9. Connector Labeled Represented by a label identifying inside the circle. Labeled diagram connectors are used in complex multi-sheet or to substitute an arrow. For each label, the "out" connectors should always be unique, but there may be

a number of connectors "enter". In this case, an intersection of implicit control flow. 10. Concurrency Symbol Represented by a double transverse line with a number of arrows in and out. This symbol is used whenever two or more flow control must operate simultaneously activated simultan.Arus out when all inflows have reached a symbol of concurrency. A symbol of concurrency with a single entry flow forks, one with a single outflow is joined. It is important to remember to keep this relationship in a logical sequence. All processes should flow from top to bottom and left to right.

3.2 Notation Hierarchy Menu Notation commonly used in the menu hierarchy are: 3.2.1 Menu The menu here is a position that would have perlihan in the system. The entire menu is contained in a system that will be portrayed by the symbol rectangle as shown below.

Figure 3.4 Menu

3.2.2 The situation changes Transition menu or menu changes symbolized by arrows.

Figure 3.5 Transition State 3.3 PHP PHP is a script for the web server-side programming, the scripts that create HTML documents on the fly3. HTML documents are generated from an application rather dinuat HTML document using a text editor or HTML editor. 3.3.1 History of PHP PHP / FI is the initial name of PHP, PHP is Personal Home Page, while FI is a Form Interface, was first created by Rasmus Lerdoff, PHP was originally a CGI program that is devoted to receive input via the form shown in the web browser. PHP / FI is the initial name of PHP, PHP is Personal Home Page, while FI is a Form Interface, was first created by Rasmus Lerdoff, PHP was originally a CGI program That Is Devoted to receive input via the form shown in the web browser. In 1997 a company called Zend, the PHP interpreter to rewrite a cleaner, better and faster. Then in June 1998 the company released a new interpreter for PHP and inaugurate the release name into PHP 3.0. In mid-1999, Zend released a new PHP interpreter and the release is known with PHP 4.0. PHP version PHP 4.0 is the most widely used 7untuk

Betha Sidik.Ir,2002, Pemograman Web dengan PHP, page 3

build complex web applications tetapitetap mamiliki processing speed and stability. In June 2004, Zend PHP 5.0 release. version is the latest version of PHP, because in this version of the core PHP interpreter experienced great changes. In versiini also introduced a new object-oriented programming model to address development towards pemogram programming language, an object-oriented4.

3.3.2 The ability of PHP PHP can basically do everything that can be done by CGI programs. Such as getting data from the form, generating a dynamic web page content, and the acceptance of cookies. PHP is the most reliable feature is support for many databases. Creating a web page that uses data from the database very easy to do. Examples of databases supported by PHP is the Adabas D, dbase, Interbase, mSQL, Ovrimos, Velocis, Ingres, Informix, PostgreSQL, UnixDBM, MySQL, and much more. PHP also supports to communicate with other services using protocols, SNMP, NNTP, HTTP, and the fate many others. Programming can also open raw network sockets and interact using other protocols.

http://id.wikipedia.org/wiki/bahasa pemograman/bahasa pemograman

3.3.3 PHP Script Each program is called with the PHP script. Script as a text file, which can be made using the program as a plain text file editor such as notepad, edit, vi, or otherwise. Text editor used should be a text editor which allows creating PHP programs easier. PHP script begins with the tag <? Php Then end with a tag?>. Each line of the statement must be terminated using a semicolon (;). Generally, each statement is written in one line. PHP script is a script that is used to generate web pages, and how writing can be divided into embedded and embedded scripts. The script is different from the program, the program represents a compilation. Maybe if on Windows, the script is like autuexec.bat file and program it with extension *. exe5.

3.3.4 File Names PHP script file name since version 4.0 uses the file extension. Php as standard. Rules customized file names with file names that apply to operating systems where PHP scripts dihostingkan, such as long file names, and characters are allowed and whether used for naming files. PHP scripts should be named according to the intent and purpose of script that created it. And should be prefixed with a letter, followed by a combination of letters or numbers, diiikuti with the extension. Php, examples of file names are recommended as bacafile.php, tampildata.php,

tampil_versil.php, and so on.

5

Annida No.20, Juli 2003, page 34

3.4 HTML HTML (Hypertext Markup Language) is a language used to write web pages. To meyampaikan ideas on the web browser, use the command form of HTML tags. Tag is a standard code that is always written between the characters '<' and character '>', for example: <HTML>. Not all tags have closing tags. There are certain tags that do not have a closing tag, such as <HR>, <BR>, and tags <img>. Tag need not be written using capital letters, it means the same tag with the tag <html> <HTML>. To design a web page we do not need to understand the truth about HTML codes, in the sense that we do not need to memorize all the existing tags in HTML, but we need to understand about the use of HTML in designing a web. 3.4.1 Structure of HTML Documents In simple HTML consists of two parts, namely head and body. HTML structure flanked by a start tag and end tag <HTML> </ HTML>. <HTML> <HEAD> Description of document </HEAD> <BODY> The contents of the document </BODY> </HTML>

3.4.2 HEAD
The head is part of the HTML document is not displayed in the browser but storing useful information about the document. Yaang elements contained in the head.

a. Tag <TITLE>
Serves to give the title of a web page and displayed on the title bar in brower window. <TITLE> Web page title </ TITLE> Uses:

b. Tag <BASE>
Functions to the base URL (Uniform Resource Locator) of the document. Its use: <BASE HREF="http://www.situsku.com">

c. Tag <LINK>
Serves to show the relation antardokumen HTML. Its use: <link REV="made"HREF=mailto:nama@emailprovider.com>

d. Tag <META> Most useful to provide a description of our documents, such as refresh, description, author (authors), keywords (keywords), and others. Property description and keywords is an important property and used as a reference for most search engines (search engines) that exist on the internet to find a site. Its use: <META Name="keywords" CONTENT="asik, lucu, humor">

3.4.3 BODY The information contained in this section will be shown either pictures, text, sound and others. Attribute on the body: Table 3.2 Attributes HTML Atribut ALINK Fungsi Determines the color of links that are active BACKGROUND Determining the source of the image used as background (can be a directory or URL) BGCOLOR Specifies the document

background color BGPROPERTIES If FIXED then filled the

background image does not come rolled up LEFTMARGIN Determine the left border of the document

3.4.4 HEADING Used to declare the title or subtitle of a document used in the tag <BODY>. HTML provides six levels of headings (<H1> .. <h6>). Heading level 1 is usually used as the main title. Perataanya ALIGN attribute to determine when it is displayed in the browser.

3.4.5 Formatting an HTML Document We can format the appearance of HTML documents using specific tags. Tags include: a. Tag <BR> This tag is used to start a new line. If written once will go down one line, if it is written two times it will go down two lines. This tag does not require a closing tag. b. Tag <P> Serves to start a new paragraph. Premises to use this tag then the browser will give the distance or spacing before and after paragraphs. c. Tag <HR> Used to create a horizontal line that is useful to divide the document. Attributes that can be used are: ALIGN, WIDTH, SIZE, NOSHADE, and COLOR. d. Tag <PRE> Make an appearance in the browser similar to the appearance of the editor. e. Tag <CENTER> Serves to menengahkan elemem in your browser. This tag Dapa used for text, images, and other elements. f. Tag <BLOCKQUOTE> Used to write text citations. With this tag will be displayed indented writing ketengah by the browser (mengindentasi text).

3.4.6 Logical Format Examples of tags that belong to logical format: a. Tag <CITE> CITATION stands that serve to display quotes. b. Tag <CODE> To display the programming code in a webpage. c. Tag <EM> To give emphasis or marking on a particular text. d. Tag <SAMP> To mark a text as an example. e. Tag <STRONG> To mark an important part in certain text. f. Tag <VAR> To display a variable on a web page. g. Tag <ADDRESS> To display the address on a web page.

3.4.7 Physical Format This format is the format of the physical appearance of the characters, examples of the tags that are categorized as physical format is: a. Tag <B> Featuring bold.

b. Tag <I> Showing italics. c. Tag <TT> Display the letters as letters on a typewriter. d. Tag <U> Showing the bottom line. e. Tag <STRIKE> Showing horizontal line in the middle letters (such as graffiti). f. Tag <SMALL> Showing a letter with a smaller size g. Tag <BIG> Showing the letter with a larger size h. Tag <SUB> Showing SUBSCRIPT i. Tag <SUP> Showing SUPERSCRPIT.

3.4.8 FONT Used to set the font in an HTML document. <FONT> Tag attributes, among others, used to adjust the font size, font, and color of letters used. Attributes include: a. SIZE Set the font size, with smallest values first and greatest value of 7.

b. FACE Set the type of letters used. This attribute is optional string type of font (font type in the two quotation marks) as "Arial", "Times New Roman", "Tahoma", "Monotype Corsiva", and so on. c. COLOR Set the font color is cool. To give value to attribute color there are two ways. The first way by writing the name of the color such as red, green, or blue. A second way to use the RGB (Red Green Blue) of a color specified in hex decimal numbers, for example: FF0000 for red, 00FF00 for green, and 0000FF for blue.

3.4.9 LINK Commands anchor (A) is used to create a link. To create a link to another HTML document used commands: <A HREF="dokumen_name"> text on the browser </ A> We can also create a link in an HTML document. To that should be provided the name of the destination anchor of the link. The name of the anchor is made by adding a NAME attribute in the tag <A>, for example: <A NAME="anchor_name"> text on the browser </ A>. How to make a link to that section are: <A HREF="#anchor_name"> text on the browser </ A>.

3.4.10 IMAGE To insert a picture / image into a web page used <img> tag followed by SRC command that indicates the source of the image file. Commonly used image formats are JPG or GIF as the file size small. The command: <IMG SRC="file_name.gif" ALT="image file_name">. ALT attributes serve to give information if the image file / image can not be displayed, so that is displayed is the value of ALT which gives information about the image of what appears seharusntya the place is. <img> Tag attribute that is often used in web pages: a. BORDER: Provide a boundary / border on the image. The default value = 0. b. HEIGHT, WIDTH: Determine the height and width of an image that will appear in pixel size. c. HSPACE, VSPACE: Determines the horizontal spacing and vertical spacing between images with surrounding objects.