PluginDevTools/web.html at master · plugintegal/PluginDevTools · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="assets/css/styles.css">

  <title>Web Developer</title>
</head>

<body>
  <a href="index.html" class="btn3 fa fa-home"></a>
  <div class="tengah">
    <a onclick="backgroundProcess()" class="myButton3">INSTALL</a>
  </div>
  <div class="jumbotron2 jumbotron-fluid">
    <div class="container text-center">
    </div>
  </div>
  <div class="container1">
    <button class="accordion">Apache2</button>
    <div id="foo" class="panel text1">
      <div class="text2">
        <p>Apache2 adalah server web yang dapat dijalankan di banyak sistem operasi (Unix, BSD, Linux, Microsoft Windows
          dan Novell Netware serta platform lainnya) yang berguna untuk melayani dan memfungsikan situs web.
          Protokol yang digunakan untuk melayani fasilitas web/www ini menggunakan HTTP.</p>
      </div>
    </div>

    <button class="accordion">Composer</button>
    <div id="foo" class="panel text1">
      <div class="text2">
        <p>Composer adalah aplikasi package manager untuk bahasa pemrograman PHP yang menyediakan format standar untuk
          mengelola dependensi PHP dan pustaka-pustaka yang diperlukan. Composer dikembangkan oleh Nils Adermann dan
          Jordi Boggiano, yang terus mengelola proyek.
          Mereka mulai pengembangan pada bulan April 2011 dan merilis Composer pertama kali pada tanggal 1 Maret 2012.
          Composer sangat terinspirasi oleh package manager Node.js "npm" dan Ruby "bundler".</p>
      </div>
    </div>

    <button class="accordion">Node JS</button>
    <div id="foo" class="panel text1">
      <div class="text2">
        <p>Node.js adalah lingkungan run-time JavaScript sumber terbuka dan lintas platform yang mengeksekusi kode
          JavaScript di luar browser. Node.js memungkinkan pengembang menggunakan JavaScript untuk menulis alat baris
          perintah dan untuk skrip sisi server - skrip berjalan sisi server untuk menghasilkan konten halaman web
          dinamis sebelum halaman dikirim ke browser web pengguna.
          Akibatnya, Node.js mewakili paradigma "JavaScript di mana-mana", menyatukan pengembangan aplikasi web di
          sekitar bahasa pemrograman tunggal, daripada bahasa yang berbeda untuk skrip server dan sisi klien.</p>
      </div>
    </div>


    <button class="accordion">NPM</button>
    <div id="foo" class="panel text1 ">
      <div class="text2 light">
        <p>npm adalah sebuah manager paket untuk bahasa pemrograman JavaScript yang menjadi manager default untuk
          lingkungan runtime Node.js. Npm terdiri dari command line client yang disebut npm, dan sebuah database online
          yang berisi paket publik dan paket pribadi berbayar, yang disebut npm registry.
          Registry dapat diakses melalui klien, dan ketersediaan paket dapat dicari melalui website npm. Manager paket
          dan registry dikelola oleh npm, Inc.</p>
      </div>
    </div>
    <button class="accordion">PHP</button>
    <div id="foo" class="panel text1">
      <div class="text2">
        <p>PHP adalah bahasa pemrograman script server-side yang didesain untuk pengembangan web. Selain itu, PHP juga
          bisa digunakan sebagai bahasa pemrograman umum. PHP disebut bahasa pemrograman server side karena PHP diproses
          pada komputer server.
          Hal ini berbeda dibandingkan dengan bahasa pemrograman client-side seperti JavaScript yang diproses pada web
          browser (client).</p>
      </div>
    </div>
    <button class="accordion"> MySQL Server & Client</button>
    <div id="foo" class="panel text1">
      <div class="text2">
        <p>DBMS (Database Management System) adalah suatu sistem perangkat lunak yang memungkinkan pengguna untuk
          membuat, memelihara, mengontrol, dan mengakses database secara praktis dan efisien. Dengan menggunakan DBMS
          (Database Management System), pengguna akan lebih mudah dalam mengontrol dan memanipulasi data yang ada.
          Arsitektur DBMS MySQL dapat diklarifikasikan ke dalam dua jenis: server dan client. Secara garis besar, client
          digunakan untuk melakukan request informasi, sedangkan server bertindak merespon permintaan dari client.</p>
      </div>
    </div>

    <button class="accordion">PHP MyAdmin</button>
    <div id="foo" class="panel text1">
      <div class="text2">
        <p> phpMyAdmin adalah sebuah software gratis berbasis scripting language PHP yang bertujuan untuk memudahkan
          kita mengelola database MySQL. Tanpa phpMyAdmin, Anda perlu menggunakan terminal untuk mengelola database
          anda. Sementara, dengan phpMyAdmin Anda tidak perlu susah lagi mengelola database MySQL Anda karena phpMyAdmin
          memiliki user interface grafis.
          phpMyAdmin mendukung banyak operasional MySQL, MariaDB, dan Drizzle sehingga Anda bisa menggunakannya untuk
          mengelola database, columns, tables, indexes, users, dan masih banyak lagi. </p>
      </div>
    </div>

    <button class="accordion">VS Code</button>
    <div id="foo" class="panel text1">
      <div class="text2">
        <div class="text2">
          <p>visual Studio Code (VS Code) ini adalah sebuah teks editor ringan dan handal untuk sistem operasi
            multiplatform, artinya tersedia juga untuk versi Linux, Mac, dan Windows. Teks editor ini secara langsung
            mendukung bahasa pemrograman JavaScript, Typescript, dan Node.js,
            serta bahasa pemrograman lainnya dengan bantuan plugin yang dapat dipasang via marketplace Visual Studio
            Code (seperti C++, C#, Python, Go, Java, dst).</p>
        </div>
      </div>
    </div>
    <button class="accordion">Library PHP</button>
    <div id="foo" class="panel text1">
      <div class="text2">
        <p>Pustaka (atau Library dalam Bahasa Inggris), dalam ilmu komputer adalah koleksi dari rutin-rutin program yang
          digunakan untuk membangun dan mengembangkan perangkat lunak. Pustaka, umumnya mengandung kode program dan data
          pembantu, yang menyediakan layanan-layanan kepada program-program independen. Hal ini mengizinkan kode dan
          data dapat digunakan bersama-sama dan dapat diubah dengan menggunakan paradigma pemrograman moduler.
          Beberapa berkas yang dapat dieksekusi, umumnya berjenis program yang berdiri sendiri atau juga pustaka, tetapi
          kebanyakan pustaka tidak dapat dieksekusi. Program komputer dapat merujuk kepada pustaka dengan menggunakan
          sebuah proses yang disebut linking, yang mampu menghubungkan satu dengan lainnya, yang dapat dilakukan dengan
          linker. </p>
      </div>
    </div>
    <button class="accordion">Postman</button>
    <div id="foo" class="panel text1">
      <div class="text2">
        <p>POSTMAN adalah sebuah aplikasi (berupa plugin) untuk browser chrome, fungsinya adalah sebagai REST Client
          atau istilahnya adalah aplikasi yang digunakan untuk melakukan uji coba REST API yang telah kita buat.</p>
      </div>
    </div>
  </div>

  <div>
    <hr>
    <textarea rows="10" cols="90" id="command-output" disabled="true"></textarea>
    <div id="status"></div>
    <hr>
  </div>


  <script>
    // GLUE to the screen
    function getCommandOutput() { return document.getElementById("command-output"); };
    function getStatus() { return document.getElementById("status"); };
    // End of GLUE

    backgroundProcess();
  </script>
  <script src="./assets/js/web-function.js"></script>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
  <script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].onclick = function () {
        var active = document.querySelector(".accordion.active");
        if (active && active != this) {
          active.classList.remove("active");
          active.nextElementSibling.classList.remove("show");
        }
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
      }
    }
  </script>
</body>

</html>