1. Merancang InPut dan OutPut
PERTEMUAN XI
Merancang InPut dan OutPut

2. Konsep Input Data Capture Data Entry Data Input
Data yang terjadi dari transaksi-transaksi
yang dilakukan oleh perusahaan
Data Capture
Data Entry
Data Input

3. Data Capture Dokumen Sumber Identifikasi dari data baru yang akan
dimasukkan
Dokumen Sumber
Formulir yang digunakan untuk menangkap
data yang terjadi

4. Proses mengubah sumber data yang Data aktual yang akan dimasukkan
Data Entry
Proses mengubah sumber data yang
dimasukkan ke dalam
Data Input
Data aktual yang akan dimasukkan
ke dalam komputer

5. Product Number Product Type Unit Price dll
Merancang Input Komputer
Menentukan Input yang diinginkan
Product Number
Product Type
Unit Price
dll

6. Merancang Input Komputer
Merancang Sumber Dokumen
Merancang Layar Input

7. 2 5 1 3 4
453
Figure 12.6 SoundStage Prototype for NEW VIDEO TITLE, DISCONTINUED VIDEO TITLE, and VIDEO TITLE UPDATE inputs
The logo appearing in the upper right portion of the screen was included to adhere to a company standard - that all screens must display the company logo. The buttons also appearing in the upper center and right portion of the screen were added because of the decision to combine the three inputs into a single screen. They were needed to allow the user the option of select the desired type of input and record action. Draw your attention to the following:
The PRODUCT NUMBER, MONTHLY UNIT SALES, YEAR UNIT SALES, and TOTAL UNIT SALES are screened in a special color as a visual clue to the user that these fields are locked and they cannot enter data into them. These fields are automatically generated by the system. Other fields appearing on the screen have white background as a visual clue that they are editable.
Notice that edit masks were specified for these input fields. The UNIVERSAL PRODUCT CODE field contains dashes in specified locations. The user does not actually enter these dashes. Rather, the user simply types in the numbers and afterwards the entire content is redisplayed according to the specified edit mask. The same is true for the MANUFACTURERS SUGGESTED RETAIL PRICE, CLUB DEFAULT UNIT PRICE, AND CURRENT SPECIAL UNIT PRICE fields. For example, in either of these three fields the user could type the number “9”, press enter, and the content would be redisplayed (according to the edit mask) with a dollar sign and decimal point.
Each field on a screen has been given a label that is meaningful to the users. Feedback from the indicated that “CC” was a commonly recognized abbreviation for “closed caption”. Also, the users indicated that a label was not necessary for CATALOG DESCRIPTION.
Notice that related radio buttons have been arranged in a group box that contains a descriptive label. Group boxes are frequently used to visually associate a variety of controls that are related. For example, notice the group box labeled “Common Information”. The fields located inside this group box were grouped together because the user associates these attributes any type of SoundStage product. Also, realize that each label that correspond to a radio button option is not what is actually input and stored in the database. Rather, what you see is the meaning of the value. The actual value that is stored is a code. For example, the code value “E” would actually be stored instead of “English” if the user selects the radio button labeled “English” for the attribute LANGUAGE.
Notice that the multiple-line text box has a vertical scroll bar feature. This is a visual clue that there is additional text not appearing inside the CATALOG DESCRIPTION field.

8. (a)
(b)
Figure 12.7 SoundStage Prototype Demonstrating Help Instructions
New versions of Microsoft products use what is called tooltips to provide a brief description of buttons and boxes that appear on a screen. The tooltip description displays when the user positions the mouse over the top of the object. This is demonstrated in Figure (a). When the user places the mouse over the image box for TITLE COVER, a brief description/instruction appears. When the user carries out the instruction they see the dialogue box that appears in Figure (b). The dialogue box contains controls that enable the user to easily select from a set of files containing images of covers for video titles.

9.
Figure 12.9 SoundStage Prototype for NEW MEMBER, MEMBER CANCELLATION, and MEMBER UPDATE Inputs
The figure above represents a prototype screen for entering data for three different inputs; NEW MEMBER, MEMBER CANCELLATION, and MEMBER UPDATE. Notice once again the attribute content and types of controls used to capture the data values. You’ve now seen two prototype screens that handle six different inputs. Such consolidation is common for applications built using a graphical interface. Traditional text-based screen design of old typically would have resulted in six separate screen designs - one for each input.

10. Prinsip Perancangan Sumber Dokumen
Menggunakan Kode
Data bersifat konstan disimpan dalam file induk
Jam dan Tanggal diambil dari sistem
Perhitungan Rutin dilakukan komputer

11. Laporan Eksternal Laporan Internal :
Prinsip Perancangan Output
Menentukan jenis laporan
Laporan Eksternal
Laporan Internal :
- Laporan rinci
- Laporan ringkas

12. Output Eksternal 464-465 Figure 13.1 Typical External Output
No additional notes provided.

13. 464,466 Figure 13.2 Typical External Turnaround Output
Notice that the invoice has a top and lower portion. The top portion is to be detached and returned with the customer payment.

14. 464-467 Figure 13.3a Sample Detailed Report
An example detailed report is depicted in the figure above. This example is a listing of all purchase orders that were generated on a particular date. Other example detail reports would be a detailed listing of all customer accounts, orders, or products in inventory.

15. 464-467 Figure 13.3b Sample Summary Report
A sample summary report is depicted in the figure above. This report summarizes the month and year’s total sales by product type and category.

16. - Berkolom, Grafik - Printer, layar
Prinsip Perancangan Output
Menentukan Format dan Media Laporan
- Berkolom, Grafik
- Printer, layar

17. Prinsip Perancangan Output
Mengidentifikasi Sistem Output
Membuat contoh laporan

18. Contoh Pembuatan Laporan Dilayar5 4 2 1 3
Contoh Pembuatan Laporan Dilayar
475
Figure 13.7 Sample Report Customization Prototype Screen
The figure above represents the prototype of the screen that the user can use to choose a particular report (or graph) and customize its content. The following points should be noted:
A tab dialogue box is used to allow the user to select between obtaining a report or graph. A tab control is used to present a series of related information. If the user clicks on the tab labeled Graph, information would be display for customizing the output as a graph.
A drop-down list is used to select the desired report. The user can click on the downward arrow to obtain a list of possible reports to choose from.
The user is provided with a series of check boxes that correspond to general options for customizing the selected report. The user simply “checks” those options they wish to appear on the report.
A group of check boxes is also used to allow the user to select one or more product categories they wish to include on the report.
Once again, a group of check boxes are used to allow the user to further customize the report to their liking. Here the user is allowed to indicate the type of summary information or totals they wish to have reported for each product category.

19. Contoh Laporan Di layar
476
Figure 13.8 Sample Report Prototype Screen
The figure above is a prototype of a typical report that may result from the previous customization screen. Examine the content and appearance of the tabular report. We draw your attention to the following:
Icons are included for activating commands for allowing the user to “zoom” the report to 100%, fit the report to window size, and to adjust the page width. These features take into consideration the user and often times difficult task of viewing a report on a display screen.
Buttons are included for activating commands were included to permit the user to easily move from one report page to another (Notice that the window’s scroll bar is active allowing the user to scroll through the report.)
A Printer Icon is provided as a visual clue to suggest that the user can request a hardcopy of the report.
The user is given the opportunity to save the report as a file or to load a different report.