Thesis Design of Web-Based After School Tutoring Information System ( Case Studies in "SiPintar" After School Tutoring Mantingan ).

Design of Web-Based After School Tutoring Information System

(Case Studies in

“SiPintar”

After School Tutoring Mantingan)

Thesis

Submitted as a Partial Fulfillment of the Requirements for Getting Bachelor Degree of Department of Informatics in the

Faculty of Communication and Informatics

By:

CHANDRA TRI SUSENO NIM: L200102015

DEPARTMENT OF INFORMATICS

FACULTY OF COMMUNICATION AND INFORMATICS MUHAMMADIYAH UNIVERSITY OF SURAKARTA

v

MOTTO

“Dan Janganlah kamu berjalan di muka bumi ini karena sombong, karena sesungguhnya sekali-kali tidak dapat menembus bumi dan sekali-kali kamu tidak

akan setinggi langit” ( Terjemahan Q.S. Al Isra : 37 )

Sesungguhnya orang yang paling baik di antara kamu sekalian adalah yang paling baik budi pekertinya.

( Terjemahan H. R. Bukhori dan Muslim )

Botol yang berisi separuh cenderung akan bergoyang. Orang yang pandai tidak akan sombong dan selalu terus ingin belajar, sedangkan yang

sedikit ilmu banyak bicara dan malas belajar. (Pepatah Tiongkok Kuno)

Tidak ada rahasia untuk menggapai sukses. Sukses itu dapat terjadi karena persiapan, kerja keras, dan mau belajar dari kegagalan.

(General Colin Powell)

Perbedaan dalam hambatan dan kesempatan. Selalu ada kesulitan dalam setiap kesempatan dan selalu ada kesempatan dalam setiap kesulitan.

vi

DEDICATION

I dedicate this work to :

1. Father (Sudarno Pd) and mother (Dra.Siti Assia, Pd) dear, thank you for the love that can not be assessed with any kind .... 2. My brother (Bowo Prih Hartono )

and my sister ( Dewi Mayasari and Sita) who always make me smile.

3. A person who has filled my heart. 4. My Friends, Wakhid, Dawud, and

all my friends who could not boarding mention here. 5. My Almamater

vii PREFACE

Assalamu‘alaikum Wr. Wb.

Praise to God we pray Allah SWT always give grace, guidance, health and strength so that I can finish the thesis with the title “Design of Web-Based After School Tutoring Information System (Case Studies in After School Tutoring

“SiPintar” Mantingan)”.

This thesis is structured in order to be eligible to earn a bachelor's degree in Informatics Engineering Program Faculty of Communication and Information, University of Muhammadiyah Surakarta. Completion of this thesis can not be separated from the support and assistance of various parties. Therefore, in this moment I would like to thank:

1. Allah SWT who has provided the opportunity for the author to finish this thesis.

2. My beloved parent and family who always give me their prayer, spirit, support and motivation while I do the research and arrange the report. 3. Husni Thamrin, ST, MT., Ph.D., as Dean of the Faculty of Communication

and Information

4. Heru Supriyono, ST, M.Eng as Chairman of the Department of Informatics, University of Muhammadiyah Surakarta.

5. Umi Fadlillah, S.T. M.Eng as a mentor I dan Gunawan Ariyanto Ph.D as a mentor II that always guide and direct writer that can complete this thesis.

6. To the parents and brothers who always give their blessing and support to writers.

ix

TABLE OF CONTENTS

APPROVAL SHEET……… ii

RATIFICATION SHEET……… iii

LIST OF CONTRIBUTION……… iv

MOTTO……….. v

DEDICATION……… vi

PREFACE……… vii

TABLE OF CONTENTS……… ix

LIST OF TABLE .……… xii

LIST OF FIGURE……… xiii

ABSTRACT……… xv

CHAPTER I INTRODUCTION……… 1

1.1 Background……… 1

1.2 Problem Formulation……… 2

1.3 Limitation Problem ……… 3

1.4 Research Objectives ……… 3

1.5 Benefits of Research ……… 4

1.6 Systematic Writing……… 4

CHAPTER II INTRODUCTION……… 6

2.1 Study of Research……… 6

2.2 Basic Theory ……… 7

2.2.1 Computer ……… 7

2.2.2 Data ……… 8

2.2.3 Information ……… 8

2.2.4 System ……… 9

2.2.5 Internet ……… 9

2.2.6 Network ……… 10

2.2.7 Web ……… 10

2.2.7 Language web Programing ……… 10

a. PHP ……… 10

1). Excess PHP……… 11

2). Weakness of PHP ……… 12

x

c. PhpMyadmin ……… 12

d. HTML ……… 12

e. CodeIgniter ……….. 13

f. Bootstrap ……… 15

CHAPTER III RESEARCH METHODOLOGY ……… 16

3.1 Equipment and Materials ……… 16

3.2 Flow Research ………. 17

3.2.1 Data Collection Techniques ……… 17

3.3 Description of Requirement ……… 24

3.3.1 External Interface Requirements ………. 24

3.3.2 Function Requirement ………. 24

3.4 Input and Output Desire………. 25

3.4.1 Admin ……… 26

3.4.2 Member and Visitor ………. 27

3.5 Design System ……… 28

3.5.1 Context Diagram ……….. 28

3.5.2 Data Flow Diagram ……….. 29

3.5.3 Data Flow Diagram Level 0……….. 31

3.5.3 Data Flow Diagram Level 1……….. 32

3.6 Design Tables and Database……… 33

3.6.1 Determine Entity……… 33

3.7 Entity Relation Diagrams……… 37

3.8 Attributes of ERD ……….. 38

3.9 Draft Website Display ……… 40

a. Design page view ……… 40

b. Design Login Page ……… 41

c. Design Student Page ……….. 41

d. Design Administrator Page ……… 42

CHAPTER IV RESULT AND DISCUSSION ………. 43

4.1 Research……… 43

4.1.1 Stages……… 43

4.1.2 Database and Table Creation ……… 43

xi

a. Home ……….. 44

b.Page of Program Guidance ………. 45

c. Contact Page ……….. 46

d.Page Guest Book ……….. 47

e. Registration Page ………. 48

f.Page Login ……… 49

1). Login Admin……… 50

2). Login Student………. 56

4.2 Analysis System ……… 58

4.2.1 Black Box Student Pages ……… 59

4.2.2 Black Box Admin Pages ……….. 59

4.3 Discussion ………... 60

4.4 Questionnaire Testing and Analysis ………. 61

CHAPTER V CONSLUSION ………. 65

5.1 Conclusion………... 65

5.2 Suggestions ………. 65 Bibliography

xii

LIST TABLE

Table 3.1 Students Table Structure……… 34

Table 3.2 Class Table Structure……… 34

Table 3.3 Instructor Table Structure………. 34

Table 3.4 News Table Structure……… 35

Table 3.5 Guest book Table Structure……….. 35

Table 3.6 Schedule Table Structure………... 35

Table 3.7 User Table Structure……….. 35

Table 3.8 Report value Table Structue……….. 36

Table 3.9 Instructor materials Table Structure………. 36

Table 3.10 Material Table Structure……… 36

Table 3.11 Level Table Structure……….. 36

Table 3.12 Struktur Tabel Registrasi………. 36

Table 4.1 Black box Student Pages ……… 59

Table 4.2 Blackbox Admin Pages ……… 59

Table 4.3. Tabulation of Student SiPintar ……… 61

xiii

LIST FIGURE

Figure 2.1 working principle of general computer……… 7

Figure 2.2 Flow system………. 9

Figure 2.3 PHP Script ……… 11

Figure 2.4 Flow CodeIgniter ……… 14

Figure 3.1 Flowchart research……….. 18

Figure 3.2 The flowchart of student………. 21

Figure 3.3 Admin Flowchart………. 22

Figure 3.4 Description of the system working... 23

Figure 3.5 Context Diagram……….. 28

Figure 3.6 Data Flow Diagram Level 0………. 30

Figure 3.7 Data Flow Diagram Level 1………. 32

Figure 3.8 Entity Relational Diagrams……….. 38

Figure 3.8 Design front page view website……….. 40

Figure 3.9 images display the login page……….. 41

Figure 3.10 Front page designs for student………... 41

Figure 3.11 Page Admin……… 42

Figure 4.1 Front view of phpmyadmin………. 43

Figure 4.2 Home Menu………. 44

Figure 4.3 Page of Program guidance……….. 45

Figure 4.4. Contact Page……….. 46

Figure 4.5 Page Guest Book………. 47

xiv

Figure 4.7 Login Page……….. 49

Figure 4.8 Login admin Page……… 50

Figure 4.9 Admin Page……….. 51

Figure 4.10 Student Data Page……….. 52

Figure 4.11 Data Page Instructor……….. 53

Figure 4.12 Class Materials Page………. 54

Figure 4.13 Page Data Score………. 55

Figure 4.14 Page Login students……….. 56

Figure 4.15 Page of Check Score……….. 57

xv ABSTRACT

Web-based information systems are widely applied as a medium for displaying information until data management. Conditions of information management in SiPintar after school tutoring Mantingan still using manual systems, ranging from scoring students until registration of new student. Manual method takes not a little time making it less effective and efficient. With this condition will require a web-based information systems in data management in SiPintar after school tutoring. This study aims to (1) Establish a media information website that can provide information to the public. (2) Building a website can do the management of information media student data accurately and precisely. (3) to assist and facilitate the process of monitoring the progress of student learning.

This methods study uses observers, interviews, and a literature method. This method for obtaining accuracy and validation of precise data, in order to get maximum results for the user. equipment required is a PC, and the software used are Dreamweaver, XAMPP, Sublime Text, and CodeIgniter, Bootstrap for management system and display.

The results show the implementation of information media websites that can provide information to the public, the web pages were made in accordance with the design. Not only coding programs, web pages are also designed so that it looks attractive. In addition to the program administrator can edit, delete, and can add to the list of students who want value fed by name and subjects taken by students. The results of subsequent research, students and parents can access the value of the development and learning of students accessing material simply by entering your name and email address.

x

c. PhpMyadmin ……… 12

d. HTML ……… 12

e. CodeIgniter ……….. 13

f. Bootstrap ……… 15

CHAPTER III RESEARCH METHODOLOGY ……… 16

3.1 Equipment and Materials ……… 16

3.2 Flow Research ………. 17

3.2.1 Data Collection Techniques ……… 17

3.3 Description of Requirement ……… 24

3.3.1 External Interface Requirements ………. 24

3.3.2 Function Requirement ………. 24

3.4 Input and Output Desire………. 25

3.4.1 Admin ……… 26

3.4.2 Member and Visitor ………. 27

3.5 Design System ……… 28

3.5.1 Context Diagram ……….. 28

3.5.2 Data Flow Diagram ……….. 29

3.5.3 Data Flow Diagram Level 0……….. 31

3.5.3 Data Flow Diagram Level 1……….. 32

3.6 Design Tables and Database……… 33

3.6.1 Determine Entity……… 33

3.7 Entity Relation Diagrams……… 37

3.8 Attributes of ERD ……….. 38

3.9 Draft Website Display ……… 40

a. Design page view ……… 40

b. Design Login Page ……… 41

c. Design Student Page ……….. 41

d. Design Administrator Page ……… 42

CHAPTER IV RESULT AND DISCUSSION ………. 43

4.1 Research……… 43

4.1.1 Stages……… 43

4.1.2 Database and Table Creation ……… 43

xi

a. Home ……….. 44

b.Page of Program Guidance ………. 45

c. Contact Page ……….. 46

d.Page Guest Book ……….. 47

e. Registration Page ………. 48

f.Page Login ……… 49

1). Login Admin……… 50

2). Login Student………. 56

4.2 Analysis System ……… 58

4.2.1 Black Box Student Pages ……… 59

4.2.2 Black Box Admin Pages ……….. 59

4.3 Discussion ………... 60

4.4 Questionnaire Testing and Analysis ………. 61

CHAPTER V CONSLUSION ………. 65

5.1 Conclusion………... 65

5.2 Suggestions ………. 65 Bibliography

xii LIST TABLE

Table 3.1 Students Table Structure……… 34

Table 3.2 Class Table Structure……… 34

Table 3.3 Instructor Table Structure………. 34

Table 3.4 News Table Structure……… 35

Table 3.5 Guest book Table Structure……….. 35

Table 3.6 Schedule Table Structure………... 35

Table 3.7 User Table Structure……….. 35

Table 3.8 Report value Table Structue……….. 36

Table 3.9 Instructor materials Table Structure………. 36

Table 3.10 Material Table Structure……… 36

Table 3.11 Level Table Structure……….. 36

Table 3.12 Struktur Tabel Registrasi………. 36

Table 4.1 Black box Student Pages ……… 59

Table 4.2 Blackbox Admin Pages ……… 59

Table 4.3. Tabulation of Student SiPintar ……… 61

xiii LIST FIGURE

Figure 2.1 working principle of general computer……… 7

Figure 2.2 Flow system………. 9

Figure 2.3 PHP Script ……… 11

Figure 2.4 Flow CodeIgniter ……… 14

Figure 3.1 Flowchart research……….. 18

Figure 3.2 The flowchart of student………. 21

Figure 3.3 Admin Flowchart………. 22

Figure 3.4 Description of the system working... 23

Figure 3.5 Context Diagram……….. 28

Figure 3.6 Data Flow Diagram Level 0………. 30

Figure 3.7 Data Flow Diagram Level 1………. 32

Figure 3.8 Entity Relational Diagrams……….. 38

Figure 3.8 Design front page view website……….. 40

Figure 3.9 images display the login page……….. 41

Figure 3.10 Front page designs for student………... 41

Figure 3.11 Page Admin……… 42

Figure 4.1 Front view of phpmyadmin………. 43

Figure 4.2 Home Menu………. 44

Figure 4.3 Page of Program guidance……….. 45

Figure 4.4. Contact Page……….. 46

Figure 4.5 Page Guest Book………. 47

xiv

Figure 4.7 Login Page……….. 49

Figure 4.8 Login admin Page……… 50

Figure 4.9 Admin Page……….. 51

Figure 4.10 Student Data Page……….. 52

Figure 4.11 Data Page Instructor……….. 53

Figure 4.12 Class Materials Page………. 54

Figure 4.13 Page Data Score………. 55

Figure 4.14 Page Login students……….. 56

Figure 4.15 Page of Check Score……….. 57

xv ABSTRACT

Web-based information systems are widely applied as a medium for displaying information until data management. Conditions of information management in SiPintar after school tutoring Mantingan still using manual systems, ranging from scoring students until registration of new student. Manual method takes not a little time making it less effective and efficient. With this condition will require a web-based information systems in data management in SiPintar after school tutoring. This study aims to (1) Establish a media information website that can provide information to the public. (2) Building a website can do the management of information media student data accurately and precisely. (3) to assist and facilitate the process of monitoring the progress of student learning.

This methods study uses observers, interviews, and a literature method. This method for obtaining accuracy and validation of precise data, in order to get maximum results for the user. equipment required is a PC, and the software used are Dreamweaver, XAMPP, Sublime Text, and CodeIgniter, Bootstrap for management system and display.

The results show the implementation of information media websites that can provide information to the public, the web pages were made in accordance with the design. Not only coding programs, web pages are also designed so that it looks attractive. In addition to the program administrator can edit, delete, and can add to the list of students who want value fed by name and subjects taken by students. The results of subsequent research, students and parents can access the value of the development and learning of students accessing material simply by entering your name and email address.